[iOS] Star rating is covered with a black circle when writing a review on Yelp
authorzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 1 May 2019 20:46:20 +0000 (20:46 +0000)
committerzalan@apple.com <zalan@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 1 May 2019 20:46:20 +0000 (20:46 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@244848 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/forms/radio-and-checkbox-checked-with-no-appearance-expected.html [new file with mode: 0644]
LayoutTests/fast/forms/radio-and-checkbox-checked-with-no-appearance.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/css/html.css
Source/WebCore/rendering/RenderThemeIOS.mm

index 885c795..28bcc7e 100644 (file)
@@ -1,3 +1,14 @@
+2019-05-01  Zalan Bujtas  <zalan@apple.com>
+
+        [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  <ryanhaddad@apple.com>
 
         REGRESSION: Layout test imported/w3c/web-platform-tests/resource-timing/resource-timing-level1.sub.html is frequently failing on Mac-ews
diff --git a/LayoutTests/fast/forms/radio-and-checkbox-checked-with-no-appearance-expected.html b/LayoutTests/fast/forms/radio-and-checkbox-checked-with-no-appearance-expected.html
new file mode 100644 (file)
index 0000000..680ba6f
--- /dev/null
@@ -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>
diff --git a/LayoutTests/fast/forms/radio-and-checkbox-checked-with-no-appearance.html b/LayoutTests/fast/forms/radio-and-checkbox-checked-with-no-appearance.html
new file mode 100644 (file)
index 0000000..acca555
--- /dev/null
@@ -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>
index 7cff018..1eddcd7 100644 (file)
@@ -1,3 +1,22 @@
+2019-05-01  Zalan Bujtas  <zalan@apple.com>
+
+        [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  <sabouhallawa@apple.com>
 
         REGRESSION (r244182): RenderingUpdate should not be scheduled for invisible pages
index 09a968e..627d148 100644 (file)
@@ -886,7 +886,6 @@ input[type="checkbox"]:indeterminate:disabled {
 }
 
 input:matches([type="checkbox"], [type="radio"]):checked {
-    background: rgba(0, 0, 0, 0.8);
     border-color: rgba(255, 255, 255, 0.0);
 }
 
index 193d079..9c3438e 100644 (file)
@@ -385,13 +385,15 @@ bool RenderThemeIOS::paintCheckboxDecorations(const RenderObject& box, const Pai
     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 @@ bool RenderThemeIOS::paintCheckboxDecorations(const RenderObject& box, const Pai
         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 @@ void RenderThemeIOS::adjustRadioStyle(StyleResolver&, RenderStyle& style, const
 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();
+
+    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 @@ bool RenderThemeIOS::paintRadioDecorations(const RenderObject& box, const PaintI
 
         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;
 }