Log Message
[iOS] Star rating is covered with a black circle when writing a review on Yelp https://bugs.webkit.org/show_bug.cgi?id=197469 <rdar://problem/48094446>
Reviewed by Dean Jackson. Source/WebCore: This patch moves the background painting of the radio/checkbox form controls in checked state to RenderTheme. It enables content authors to disable default appearance using -webkit-appearance: none (it is also inline with what we do on macOS). Test: fast/forms/radio-and-checkbox-checked-with-no-appearance.html * css/html.css: (input:matches([type="checkbox"], [type="radio"]):checked): * rendering/RenderThemeIOS.mm: (WebCore::RenderThemeIOS::paintCheckboxDecorations): (WebCore::RenderThemeIOS::paintRadioDecorations): LayoutTests: * fast/forms/radio-and-checkbox-checked-with-no-appearance-expected.html: Added. * fast/forms/radio-and-checkbox-checked-with-no-appearance.html: Added.
Modified Paths
- trunk/LayoutTests/ChangeLog
- trunk/Source/WebCore/ChangeLog
- trunk/Source/WebCore/css/html.css
- trunk/Source/WebCore/rendering/RenderThemeIOS.mm
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (244847 => 244848)
--- trunk/LayoutTests/ChangeLog 2019-05-01 20:44:36 UTC (rev 244847)
+++ trunk/LayoutTests/ChangeLog 2019-05-01 20:46:20 UTC (rev 244848)
@@ -1,3 +1,14 @@
+2019-05-01 Zalan Bujtas <[email protected]>
+
+ [iOS] Star rating is covered with a black circle when writing a review on Yelp
+ https://bugs.webkit.org/show_bug.cgi?id=197469
+ <rdar://problem/48094446>
+
+ Reviewed by Dean Jackson.
+
+ * fast/forms/radio-and-checkbox-checked-with-no-appearance-expected.html: Added.
+ * fast/forms/radio-and-checkbox-checked-with-no-appearance.html: Added.
+
2019-05-01 Ryan Haddad <[email protected]>
REGRESSION: Layout test imported/w3c/web-platform-tests/resource-timing/resource-timing-level1.sub.html is frequently failing on Mac-ews
Added: trunk/LayoutTests/fast/forms/radio-and-checkbox-checked-with-no-appearance-expected.html (0 => 244848)
--- trunk/LayoutTests/fast/forms/radio-and-checkbox-checked-with-no-appearance-expected.html (rev 0)
+++ trunk/LayoutTests/fast/forms/radio-and-checkbox-checked-with-no-appearance-expected.html 2019-05-01 20:46:20 UTC (rev 244848)
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests that the checked version of the radio and checkbox input controls paint blank with appearance: none</title>
+</head>
+<body>
+</body>
+</html>
Added: trunk/LayoutTests/fast/forms/radio-and-checkbox-checked-with-no-appearance.html (0 => 244848)
--- trunk/LayoutTests/fast/forms/radio-and-checkbox-checked-with-no-appearance.html (rev 0)
+++ trunk/LayoutTests/fast/forms/radio-and-checkbox-checked-with-no-appearance.html 2019-05-01 20:46:20 UTC (rev 244848)
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>This tests that the checked version of the radio and checkbox input controls paint blank with appearance: none</title>
+<style>
+input {
+ width: 50px;
+ height: 50px;
+ -webkit-appearance: none;
+}
+</style>
+</head>
+<body>
+<input type="radio" checked><input type="checkbox" checked>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (244847 => 244848)
--- trunk/Source/WebCore/ChangeLog 2019-05-01 20:44:36 UTC (rev 244847)
+++ trunk/Source/WebCore/ChangeLog 2019-05-01 20:46:20 UTC (rev 244848)
@@ -1,3 +1,22 @@
+2019-05-01 Zalan Bujtas <[email protected]>
+
+ [iOS] Star rating is covered with a black circle when writing a review on Yelp
+ https://bugs.webkit.org/show_bug.cgi?id=197469
+ <rdar://problem/48094446>
+
+ Reviewed by Dean Jackson.
+
+ This patch moves the background painting of the radio/checkbox form controls in checked state to RenderTheme.
+ It enables content authors to disable default appearance using -webkit-appearance: none (it is also inline with what we do on macOS).
+
+ Test: fast/forms/radio-and-checkbox-checked-with-no-appearance.html
+
+ * css/html.css:
+ (input:matches([type="checkbox"], [type="radio"]):checked):
+ * rendering/RenderThemeIOS.mm:
+ (WebCore::RenderThemeIOS::paintCheckboxDecorations):
+ (WebCore::RenderThemeIOS::paintRadioDecorations):
+
2019-05-01 Said Abou-Hallawa <[email protected]>
REGRESSION (r244182): RenderingUpdate should not be scheduled for invisible pages
Modified: trunk/Source/WebCore/css/html.css (244847 => 244848)
--- trunk/Source/WebCore/css/html.css 2019-05-01 20:44:36 UTC (rev 244847)
+++ trunk/Source/WebCore/css/html.css 2019-05-01 20:46:20 UTC (rev 244848)
@@ -886,7 +886,6 @@
}
input:matches([type="checkbox"], [type="radio"]):checked {
- background: rgba(0, 0, 0, 0.8);
border-color: rgba(255, 255, 255, 0.0);
}
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.mm (244847 => 244848)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2019-05-01 20:44:36 UTC (rev 244847)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2019-05-01 20:46:20 UTC (rev 244848)
@@ -385,13 +385,15 @@
bool checked = isChecked(box);
bool indeterminate = isIndeterminate(box);
CGContextRef cgContext = paintInfo.context().platformContext();
-
GraphicsContextStateSaver stateSaver { paintInfo.context() };
- auto clip = addRoundedBorderClip(box, paintInfo.context(), rect);
- float width = clip.width();
- float height = clip.height();
if (checked || indeterminate) {
+ auto border = box.style().getRoundedBorderFor(rect);
+ paintInfo.context().fillRoundedRect(border.pixelSnappedRoundedRectForPainting(box.document().deviceScaleFactor()), Color(0.0f, 0.0f, 0.0f, 0.8f));
+
+ auto clip = addRoundedBorderClip(box, paintInfo.context(), rect);
+ auto width = clip.width();
+ auto height = clip.height();
drawAxialGradient(cgContext, gradientWithName(ConcaveGradient), clip.location(), FloatPoint { clip.x(), clip.maxY() }, LinearInterpolation);
constexpr float thicknessRatio = 2 / 14.0;
@@ -425,10 +427,13 @@
lineWidth = std::max<float>(lineWidth, 1);
drawJoinedLines(cgContext, Vector<CGPoint> { WTFMove(shadow) }, kCGLineCapSquare, lineWidth, Color { 0.0f, 0.0f, 0.0f, 0.7f });
- lineWidth = std::max<float>(std::min(clip.width(), clip.height()) * thicknessRatio, 1);
+ lineWidth = std::max<float>(std::min(width, height) * thicknessRatio, 1);
drawJoinedLines(cgContext, Vector<CGPoint> { WTFMove(line) }, kCGLineCapButt, lineWidth, Color { 1.0f, 1.0f, 1.0f, 240 / 255.0f });
} else {
- FloatPoint bottomCenter { clip.x() + clip.width() / 2.0f, clip.maxY() };
+ auto clip = addRoundedBorderClip(box, paintInfo.context(), rect);
+ auto width = clip.width();
+ auto height = clip.height();
+ FloatPoint bottomCenter { clip.x() + width / 2.0f, clip.maxY() };
drawAxialGradient(cgContext, gradientWithName(ShadeGradient), clip.location(), FloatPoint { clip.x(), clip.maxY() }, LinearInterpolation);
drawRadialGradient(cgContext, gradientWithName(ShineGradient), bottomCenter, 0, bottomCenter, sqrtf((width * width) / 4.0f + height * height), ExponentialInterpolation);
@@ -471,10 +476,19 @@
bool RenderThemeIOS::paintRadioDecorations(const RenderObject& box, const PaintInfo& paintInfo, const IntRect& rect)
{
GraphicsContextStateSaver stateSaver(paintInfo.context());
- FloatRect clip = addRoundedBorderClip(box, paintInfo.context(), rect);
+ CGContextRef cgContext = paintInfo.context().platformContext();
- CGContextRef cgContext = paintInfo.context().platformContext();
+ auto drawShadeAndShineGradients = [&](auto clip) {
+ FloatPoint bottomCenter(clip.x() + clip.width() / 2.0, clip.maxY());
+ drawAxialGradient(cgContext, gradientWithName(ShadeGradient), clip.location(), FloatPoint(clip.x(), clip.maxY()), LinearInterpolation);
+ drawRadialGradient(cgContext, gradientWithName(ShineGradient), bottomCenter, 0, bottomCenter, std::max(clip.width(), clip.height()), ExponentialInterpolation);
+ };
+
if (isChecked(box)) {
+ auto border = box.style().getRoundedBorderFor(rect);
+ paintInfo.context().fillRoundedRect(border.pixelSnappedRoundedRectForPainting(box.document().deviceScaleFactor()), Color(0.0f, 0.0f, 0.0f, 0.8f));
+
+ auto clip = addRoundedBorderClip(box, paintInfo.context(), rect);
drawAxialGradient(cgContext, gradientWithName(ConcaveGradient), clip.location(), FloatPoint(clip.x(), clip.maxY()), LinearInterpolation);
// The inner circle is 6 / 14 the size of the surrounding circle,
@@ -489,10 +503,11 @@
FloatSize radius(clip.width() / 2.0f, clip.height() / 2.0f);
paintInfo.context().clipRoundedRect(FloatRoundedRect(clip, radius, radius, radius, radius));
+ drawShadeAndShineGradients(clip);
+ } else {
+ auto clip = addRoundedBorderClip(box, paintInfo.context(), rect);
+ drawShadeAndShineGradients(clip);
}
- FloatPoint bottomCenter(clip.x() + clip.width() / 2.0, clip.maxY());
- drawAxialGradient(cgContext, gradientWithName(ShadeGradient), clip.location(), FloatPoint(clip.x(), clip.maxY()), LinearInterpolation);
- drawRadialGradient(cgContext, gradientWithName(ShineGradient), bottomCenter, 0, bottomCenter, std::max(clip.width(), clip.height()), ExponentialInterpolation);
return false;
}
_______________________________________________ webkit-changes mailing list [email protected] https://lists.webkit.org/mailman/listinfo/webkit-changes
