WebKit Bugzilla
Attachment 368695 Details for
Bug 197469
: [iOS] Star rating is covered with a black circle when writing a review on Yelp
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch
bug-197469-20190501131311.patch (text/plain), 8.52 KB, created by
zalan
on 2019-05-01 13:13:12 PDT
(
hide
)
Description:
Patch
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>
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 197469
: 368695