Attachment 368695 Details for Bug 197469 – Patch

[patch] Patch

bug-197469-20190501131311.patch (text/plain), 8.52 KB, created by zalan on 2019-05-01 13:13:12 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: zalan

Created: 2019-05-01 13:13:12 PDT

Size: 8.52 KB

patch

obsolete

>Subversion Revision: 244764
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index c0eea3e665eecc17a43323b8a922f2c3db0e7aa0..1d58cf54c4cd19873cb4c6f8cb7d523c5a676b74 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -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 NOBODY (OOPS!).
>+
>+        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-04-29  Truitt Savell  <tsavell@apple.com>
> 
>         Unreviewed, rolling out r244755.
>diff --git a/Source/WebCore/css/html.css b/Source/WebCore/css/html.css
>index 09a968e4f1a8c0b91ff2f0cb72a6b9322648e454..627d1487a6f0c7b7310a0c34be0058f008080c48 100644
>--- a/Source/WebCore/css/html.css
>+++ b/Source/WebCore/css/html.css
>@@ -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);
> }
> 
>diff --git a/Source/WebCore/rendering/RenderThemeIOS.mm b/Source/WebCore/rendering/RenderThemeIOS.mm
>index 193d07931be99fde19783b7c049cf6ad22b85387..9c3438e71518fdda78f2e58472d9fedc36b57f0a 100644
>--- a/Source/WebCore/rendering/RenderThemeIOS.mm
>+++ b/Source/WebCore/rendering/RenderThemeIOS.mm
>@@ -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;
> }
> 
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index 87c1bd7fe0c99d8f3fb1538ca81b6d9d35be00e5..96d876f4d0d44a12324e64fdd63d2714a1d18eb0 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -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 NOBODY (OOPS!).
>+
>+        * fast/forms/radio-and-checkbox-checked-with-no-appearance-expected.html: Added.
>+        * fast/forms/radio-and-checkbox-checked-with-no-appearance.html: Added.
>+
> 2019-04-29  Truitt Savell  <tsavell@apple.com>
> 
>         Unreviewed, rolling out r244755.
>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
>index 0000000000000000000000000000000000000000..680ba6f3d0b814ecc1cc97ff1587475d828e91f1
>--- /dev/null
>+++ b/LayoutTests/fast/forms/radio-and-checkbox-checked-with-no-appearance-expected.html
>@@ -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
>index 0000000000000000000000000000000000000000..acca555240a3af17e736c8b908490821d47ed3e1
>--- /dev/null
>+++ b/LayoutTests/fast/forms/radio-and-checkbox-checked-with-no-appearance.html
>@@ -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>

Actions: View | Formatted Diff | Diff

Attachments on bug 197469: 368695