Log Message
[iOS][FCR] Color inputs are painted outside their box https://bugs.webkit.org/show_bug.cgi?id=222299 <rdar://problem/74621954>
Reviewed by Wenson Hsieh. Source/WebCore: Color inputs have a gradient decoration around their inner swatch. Since this decoration is painted using a stroke with a non-zero thickness around the input's box, a portion of the decoration overflows the box. To fix, use an inset rect to draw the gradient decoration, ensuring the stroke is drawn within the input's box. This patch also updates the padding and stroke thickness to match the latest specifications. Test: fast/forms/ios/form-control-refresh/color/paint-within-box.html * css/html.css: (input[type="color"]): Update padding to match specification. (input[type="color"]::-webkit-color-swatch-wrapper): Update padding to match specification. * css/legacyFormControlsIOS.css: (input[type="color"]::-webkit-color-swatch-wrapper): * rendering/RenderTheme.cpp: (WebCore::RenderTheme::paintDecorations): Use the device-pixel-snapped rect when painting the decoration for color inputs, to ensure the swatch is centered within the input. We should also consider moving other controls to using the device-pixel-snapped rect when painting, as some controls still use integral snapped rects. However, each control should be individually audited to avoid breakage. (WebCore::RenderTheme::paintColorWellDecorations): * rendering/RenderTheme.h: * rendering/RenderThemeIOS.h: * rendering/RenderThemeIOS.mm: (WebCore::RenderThemeIOS::colorInputStyleSheet): Update the default width/height of color inputs to match the latest specification. (WebCore::RenderThemeIOS::paintColorWellDecorations): Inset the stroke rect to ensure the gradient is painted within the input's box. LayoutTests: Added a reference test which verifies that color inputs are painted within their box. This is done by drawing a square over the input and comparing to a page which contains a square of the same size, with the input hidden. Rebaselined tests after change to padding. * fast/forms/ios/form-control-refresh/color/paint-within-box-expected.html: Added. * fast/forms/ios/form-control-refresh/color/paint-within-box.html: Added. * platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative-expected.txt: * platform/ios/fast/forms/color/input-appearance-color-expected.txt:
Modified Paths
- trunk/LayoutTests/ChangeLog
- trunk/LayoutTests/platform/ios/fast/forms/color/input-appearance-color-expected.txt
- trunk/LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative-expected.txt
- trunk/Source/WebCore/ChangeLog
- trunk/Source/WebCore/css/html.css
- trunk/Source/WebCore/css/legacyFormControlsIOS.css
- trunk/Source/WebCore/rendering/RenderTheme.cpp
- trunk/Source/WebCore/rendering/RenderTheme.h
- trunk/Source/WebCore/rendering/RenderThemeIOS.h
- trunk/Source/WebCore/rendering/RenderThemeIOS.mm
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (274231 => 274232)
--- trunk/LayoutTests/ChangeLog 2021-03-10 21:07:06 UTC (rev 274231)
+++ trunk/LayoutTests/ChangeLog 2021-03-10 21:16:59 UTC (rev 274232)
@@ -1,3 +1,23 @@
+2021-03-10 Aditya Keerthi <[email protected]>
+
+ [iOS][FCR] Color inputs are painted outside their box
+ https://bugs.webkit.org/show_bug.cgi?id=222299
+ <rdar://problem/74621954>
+
+ Reviewed by Wenson Hsieh.
+
+ Added a reference test which verifies that color inputs are painted
+ within their box. This is done by drawing a square over the input
+ and comparing to a page which contains a square of the same size,
+ with the input hidden.
+
+ Rebaselined tests after change to padding.
+
+ * fast/forms/ios/form-control-refresh/color/paint-within-box-expected.html: Added.
+ * fast/forms/ios/form-control-refresh/color/paint-within-box.html: Added.
+ * platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative-expected.txt:
+ * platform/ios/fast/forms/color/input-appearance-color-expected.txt:
+
2021-03-10 Robert Jenner <[email protected]>
[ macOS wk2 ] imported/w3c/web-platform-tests/html/semantics/embedded-content/media-elements/media_fragment_seek.html is a flakey text failure
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/color/paint-within-box-expected.html (0 => 274232)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/color/paint-within-box-expected.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/color/paint-within-box-expected.html 2021-03-10 21:16:59 UTC (rev 274232)
@@ -0,0 +1,32 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+ #input {
+ opacity: 0;
+ }
+
+ #overlay {
+ position: absolute;
+ background-color: red;
+ }
+</style>
+</head>
+<body>
+<input id="input" type="color">
+<div id="overlay"></div>
+</body>
+<script>
+
+let input = document.getElementById("input");
+let overlay = document.getElementById("overlay");
+
+let rect = input.getBoundingClientRect();
+overlay.style.width = rect.width + "px";
+overlay.style.height = rect.height + "px";
+overlay.style.top = rect.top + "px";
+overlay.style.left = rect.left + "px";
+
+</script>
+</html>
Added: trunk/LayoutTests/fast/forms/ios/form-control-refresh/color/paint-within-box.html (0 => 274232)
--- trunk/LayoutTests/fast/forms/ios/form-control-refresh/color/paint-within-box.html (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/form-control-refresh/color/paint-within-box.html 2021-03-10 21:16:59 UTC (rev 274232)
@@ -0,0 +1,28 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ IOSFormControlRefreshEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<style>
+ #overlay {
+ position: absolute;
+ background-color: red;
+ }
+</style>
+</head>
+<body>
+<input id="input" type="color">
+<div id="overlay"></div>
+</body>
+<script>
+
+let input = document.getElementById("input");
+let overlay = document.getElementById("overlay");
+
+let rect = input.getBoundingClientRect();
+overlay.style.width = rect.width + "px";
+overlay.style.height = rect.height + "px";
+overlay.style.top = rect.top + "px";
+overlay.style.left = rect.left + "px";
+
+</script>
+</html>
Modified: trunk/LayoutTests/platform/ios/fast/forms/color/input-appearance-color-expected.txt (274231 => 274232)
--- trunk/LayoutTests/platform/ios/fast/forms/color/input-appearance-color-expected.txt 2021-03-10 21:07:06 UTC (rev 274231)
+++ trunk/LayoutTests/platform/ios/fast/forms/color/input-appearance-color-expected.txt 2021-03-10 21:16:59 UTC (rev 274232)
@@ -6,110 +6,110 @@
RenderBlock {H3} at (0,0) size 784x23
RenderText {#text} at (0,0) size 164x22
text run at (0,0) width 164: "Default Appearance"
- RenderBlock (anonymous) at (0,41) size 784x44
+ RenderBlock (anonymous) at (0,41) size 784x49
RenderText {#text} at (0,0) size 457x19
text run at (0,0) width 457: "List color controls have different appearance if ENABLE(DATALIST)."
RenderBR {BR} at (456,0) size 1x19
- RenderBlock {INPUT} at (0,20) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (3,3) size 17x17
- RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#000000]
- RenderBlock {INPUT} at (23,20) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (3,3) size 17x17
- RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#000000]
+ RenderBlock {INPUT} at (0,20) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#000000]
+ RenderBlock {INPUT} at (28,20) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#000000]
RenderText {#text} at (0,0) size 0x0
- RenderBlock {H3} at (0,103) size 784x24
+ RenderBlock {H3} at (0,108) size 784x24
RenderText {#text} at (0,0) size 162x22
text run at (0,0) width 162: "Different Font Sizes"
- RenderBlock (anonymous) at (0,145) size 784x47
+ RenderBlock (anonymous) at (0,150) size 784x49
RenderText {#text} at (0,0) size 590x19
text run at (0,0) width 590: "List color controls have different sizes depending on font sizes. Normal color controls don't."
RenderBR {BR} at (589,0) size 1x19
- RenderBlock {INPUT} at (0,23) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (5,5) size 13x13
- RenderBlock {DIV} at (0,0) size 13x13 [bgcolor=#00FF00]
- RenderText {#text} at (23,25) size 4x19
- text run at (23,25) width 4: " "
- RenderBlock {INPUT} at (27,21) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (3,3) size 17x17
- RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#00FF00]
- RenderText {#text} at (50,25) size 4x19
- text run at (50,25) width 4: " "
- RenderBlock {INPUT} at (54,20) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (2,2) size 19x19
- RenderBlock {DIV} at (0,0) size 19x19 [bgcolor=#00FF00]
- RenderText {#text} at (77,25) size 4x19
- text run at (77,25) width 4: " "
- RenderBlock {INPUT} at (81,23) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (5,5) size 13x13
- RenderBlock {DIV} at (0,0) size 13x13 [bgcolor=#00FF00]
- RenderText {#text} at (104,25) size 4x19
- text run at (104,25) width 4: " "
- RenderBlock {INPUT} at (108,21) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (3,3) size 17x17
- RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#00FF00]
- RenderText {#text} at (131,25) size 4x19
- text run at (131,25) width 4: " "
- RenderBlock {INPUT} at (135,20) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (2,2) size 19x19
- RenderBlock {DIV} at (0,0) size 19x19 [bgcolor=#00FF00]
+ RenderBlock {INPUT} at (0,20) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
+ RenderText {#text} at (28,28) size 4x19
+ text run at (28,28) width 4: " "
+ RenderBlock {INPUT} at (32,20) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
+ RenderText {#text} at (60,28) size 4x19
+ text run at (60,28) width 4: " "
+ RenderBlock {INPUT} at (64,20) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
+ RenderText {#text} at (92,28) size 4x19
+ text run at (92,28) width 4: " "
+ RenderBlock {INPUT} at (96,20) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
+ RenderText {#text} at (124,28) size 4x19
+ text run at (124,28) width 4: " "
+ RenderBlock {INPUT} at (128,20) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
+ RenderText {#text} at (156,28) size 4x19
+ text run at (156,28) width 4: " "
+ RenderBlock {INPUT} at (160,20) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
RenderText {#text} at (0,0) size 0x0
- RenderBlock {H3} at (0,209) size 784x24
+ RenderBlock {H3} at (0,216) size 784x24
RenderText {#text} at (0,0) size 122x22
text run at (0,0) width 122: "Various Colors"
- RenderBlock (anonymous) at (0,251) size 784x25
- RenderBlock {INPUT} at (0,0) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (3,3) size 17x17
- RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#FF0000]
- RenderText {#text} at (23,4) size 4x19
- text run at (23,4) width 4: " "
- RenderBlock {INPUT} at (27,0) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (3,3) size 17x17
- RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#00FF00]
- RenderText {#text} at (50,4) size 4x19
- text run at (50,4) width 4: " "
- RenderBlock {INPUT} at (54,0) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (3,3) size 17x17
- RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#0000FF]
- RenderText {#text} at (77,4) size 4x19
- text run at (77,4) width 4: " "
- RenderBlock {INPUT} at (81,0) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (3,3) size 17x17
- RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#EC008C]
- RenderText {#text} at (104,4) size 4x19
- text run at (104,4) width 4: " "
- RenderBlock {INPUT} at (108,0) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (3,3) size 17x17
- RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#40E0D0]
- RenderText {#text} at (131,4) size 4x19
- text run at (131,4) width 4: " "
- RenderBlock {INPUT} at (135,0) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (3,3) size 17x17
- RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#FF0000]
- RenderText {#text} at (158,4) size 4x19
- text run at (158,4) width 4: " "
- RenderBlock {INPUT} at (162,0) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (3,3) size 17x17
- RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#00FF00]
- RenderText {#text} at (185,4) size 4x19
- text run at (185,4) width 4: " "
- RenderBlock {INPUT} at (189,0) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (3,3) size 17x17
- RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#0000FF]
- RenderText {#text} at (212,4) size 4x19
- text run at (212,4) width 4: " "
- RenderBlock {INPUT} at (216,0) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (3,3) size 17x17
- RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#EC008C]
- RenderText {#text} at (239,4) size 4x19
- text run at (239,4) width 4: " "
- RenderBlock {INPUT} at (243,0) size 23x23 [bgcolor=#FFFFFF]
- RenderFlexibleBox {DIV} at (3,3) size 17x17
- RenderBlock {DIV} at (0,0) size 17x17 [bgcolor=#40E0D0]
+ RenderBlock (anonymous) at (0,258) size 784x29
+ RenderBlock {INPUT} at (0,0) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#FF0000]
+ RenderText {#text} at (28,8) size 4x19
+ text run at (28,8) width 4: " "
+ RenderBlock {INPUT} at (32,0) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
+ RenderText {#text} at (60,8) size 4x19
+ text run at (60,8) width 4: " "
+ RenderBlock {INPUT} at (64,0) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#0000FF]
+ RenderText {#text} at (92,8) size 4x19
+ text run at (92,8) width 4: " "
+ RenderBlock {INPUT} at (96,0) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#EC008C]
+ RenderText {#text} at (124,8) size 4x19
+ text run at (124,8) width 4: " "
+ RenderBlock {INPUT} at (128,0) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#40E0D0]
+ RenderText {#text} at (156,8) size 4x19
+ text run at (156,8) width 4: " "
+ RenderBlock {INPUT} at (160,0) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#FF0000]
+ RenderText {#text} at (188,8) size 4x19
+ text run at (188,8) width 4: " "
+ RenderBlock {INPUT} at (192,0) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#00FF00]
+ RenderText {#text} at (220,8) size 4x19
+ text run at (220,8) width 4: " "
+ RenderBlock {INPUT} at (224,0) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#0000FF]
+ RenderText {#text} at (252,8) size 4x19
+ text run at (252,8) width 4: " "
+ RenderBlock {INPUT} at (256,0) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#EC008C]
+ RenderText {#text} at (284,8) size 4x19
+ text run at (284,8) width 4: " "
+ RenderBlock {INPUT} at (288,0) size 28x28 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (3,3) size 22x22
+ RenderBlock {DIV} at (2,2) size 18x18 [bgcolor=#40E0D0]
RenderText {#text} at (0,0) size 0x0
- RenderBlock {H3} at (0,294) size 784x24
+ RenderBlock {H3} at (0,305) size 784x24
RenderText {#text} at (0,0) size 118x22
text run at (0,0) width 118: "Arbitrary Size"
- RenderBlock (anonymous) at (0,336) size 784x31
+ RenderBlock (anonymous) at (0,347) size 784x31
RenderBlock {INPUT} at (0,0) size 100x30 [bgcolor=#FFFFFF]
RenderFlexibleBox {DIV} at (3,3) size 94x24
- RenderBlock {DIV} at (0,0) size 94x24 [bgcolor=#FF0000]
+ RenderBlock {DIV} at (2,2) size 90x20 [bgcolor=#FF0000]
Modified: trunk/LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative-expected.txt (274231 => 274232)
--- trunk/LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative-expected.txt 2021-03-10 21:07:06 UTC (rev 274231)
+++ trunk/LayoutTests/platform/ios-wk2/imported/w3c/web-platform-tests/html/rendering/widgets/baseline-alignment-and-overflow.tentative-expected.txt 2021-03-10 21:16:59 UTC (rev 274232)
@@ -77,11 +77,11 @@
FAIL <input type="range" style="overflow: visible; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 71 +/- 3 but got 61
FAIL <input type="range" style="overflow: hidden; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 71 +/- 3 but got 61
FAIL <input type="range" style="overflow: scroll; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 71 +/- 3 but got 61
-FAIL <input type="color" value="#000000" style="overflow: visible; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 51
-FAIL <input type="color" value="#000000" style="overflow: hidden; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 51
+FAIL <input type="color" value="#000000" style="overflow: visible; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 49
+FAIL <input type="color" value="#000000" style="overflow: hidden; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 49
FAIL <input type="color" value="#000000" style="overflow: scroll; appearance: auto;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 71
-FAIL <input type="color" value="#000000" style="overflow: visible; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 51
-FAIL <input type="color" value="#000000" style="overflow: hidden; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 51
+FAIL <input type="color" value="#000000" style="overflow: visible; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 49
+FAIL <input type="color" value="#000000" style="overflow: hidden; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 49
FAIL <input type="color" value="#000000" style="overflow: scroll; appearance: none;"> assert_approx_equals: <span>.offsetTop expected 61 +/- 3 but got 71
PASS <input type="checkbox" style="overflow: visible; appearance: auto;">
PASS <input type="checkbox" style="overflow: hidden; appearance: auto;">
Modified: trunk/Source/WebCore/ChangeLog (274231 => 274232)
--- trunk/Source/WebCore/ChangeLog 2021-03-10 21:07:06 UTC (rev 274231)
+++ trunk/Source/WebCore/ChangeLog 2021-03-10 21:16:59 UTC (rev 274232)
@@ -1,3 +1,59 @@
+2021-03-10 Aditya Keerthi <[email protected]>
+
+ [iOS][FCR] Color inputs are painted outside their box
+ https://bugs.webkit.org/show_bug.cgi?id=222299
+ <rdar://problem/74621954>
+
+ Reviewed by Wenson Hsieh.
+
+ Color inputs have a gradient decoration around their inner swatch. Since
+ this decoration is painted using a stroke with a non-zero thickness
+ around the input's box, a portion of the decoration overflows the box.
+
+ To fix, use an inset rect to draw the gradient decoration, ensuring the
+ stroke is drawn within the input's box.
+
+ This patch also updates the padding and stroke thickness to match the
+ latest specifications.
+
+ Test: fast/forms/ios/form-control-refresh/color/paint-within-box.html
+
+ * css/html.css:
+ (input[type="color"]):
+
+ Update padding to match specification.
+
+ (input[type="color"]::-webkit-color-swatch-wrapper):
+
+ Update padding to match specification.
+
+ * css/legacyFormControlsIOS.css:
+ (input[type="color"]::-webkit-color-swatch-wrapper):
+ * rendering/RenderTheme.cpp:
+ (WebCore::RenderTheme::paintDecorations):
+
+ Use the device-pixel-snapped rect when painting the decoration for color
+ inputs, to ensure the swatch is centered within the input.
+
+ We should also consider moving other controls to using the
+ device-pixel-snapped rect when painting, as some controls still use
+ integral snapped rects. However, each control should be individually
+ audited to avoid breakage.
+
+ (WebCore::RenderTheme::paintColorWellDecorations):
+ * rendering/RenderTheme.h:
+ * rendering/RenderThemeIOS.h:
+ * rendering/RenderThemeIOS.mm:
+ (WebCore::RenderThemeIOS::colorInputStyleSheet):
+
+ Update the default width/height of color inputs to match the latest
+ specification.
+
+ (WebCore::RenderThemeIOS::paintColorWellDecorations):
+
+ Inset the stroke rect to ensure the gradient is painted within the
+ input's box.
+
2021-03-09 Darin Adler <[email protected]>
[Cocoa] Make WebKit API Objective-C objects safe to release on non-main threads
Modified: trunk/Source/WebCore/css/html.css (274231 => 274232)
--- trunk/Source/WebCore/css/html.css 2021-03-10 21:07:06 UTC (rev 274231)
+++ trunk/Source/WebCore/css/html.css 2021-03-10 21:16:59 UTC (rev 274232)
@@ -996,7 +996,7 @@
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
input[type="color"] {
- padding: 0.3em;
+ padding: 3px;
}
#endif
@@ -1004,7 +1004,7 @@
display: flex;
#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
border-radius: inherit;
- padding: 0;
+ padding: 2px;
#else
padding: 4px 2px 5px;
#endif
Modified: trunk/Source/WebCore/css/legacyFormControlsIOS.css (274231 => 274232)
--- trunk/Source/WebCore/css/legacyFormControlsIOS.css 2021-03-10 21:07:06 UTC (rev 274231)
+++ trunk/Source/WebCore/css/legacyFormControlsIOS.css 2021-03-10 21:16:59 UTC (rev 274232)
@@ -91,6 +91,7 @@
input[type="color"]::-webkit-color-swatch-wrapper {
border-radius: initial;
+ padding: 0;
}
input[type="color"]::-webkit-color-swatch {
Modified: trunk/Source/WebCore/rendering/RenderTheme.cpp (274231 => 274232)
--- trunk/Source/WebCore/rendering/RenderTheme.cpp 2021-03-10 21:07:06 UTC (rev 274231)
+++ trunk/Source/WebCore/rendering/RenderTheme.cpp 2021-03-10 21:16:59 UTC (rev 274232)
@@ -485,6 +485,9 @@
if (paintInfo.context().paintingDisabled())
return;
+ // FIXME: Investigate whether all controls can use a device-pixel-snapped rect
+ // rather than an integral-snapped rect.
+
IntRect integralSnappedRect = snappedIntRect(rect);
FloatRect devicePixelSnappedRect = snapRectToDevicePixels(rect, box.document().deviceScaleFactor());
@@ -513,7 +516,7 @@
break;
#if ENABLE(INPUT_TYPE_COLOR)
case ColorWellPart:
- paintColorWellDecorations(box, paintInfo, integralSnappedRect);
+ paintColorWellDecorations(box, paintInfo, devicePixelSnappedRect);
break;
#endif
case ButtonPart:
@@ -1002,9 +1005,9 @@
}
#if ENABLE(INPUT_TYPE_COLOR)
-void RenderTheme::paintColorWellDecorations(const RenderObject& box, const PaintInfo& paintInfo, const IntRect& rect)
+void RenderTheme::paintColorWellDecorations(const RenderObject& box, const PaintInfo& paintInfo, const FloatRect& rect)
{
- paintButtonDecorations(box, paintInfo, rect);
+ paintButtonDecorations(box, paintInfo, snappedIntRect(LayoutRect(rect)));
}
#endif
Modified: trunk/Source/WebCore/rendering/RenderTheme.h (274231 => 274232)
--- trunk/Source/WebCore/rendering/RenderTheme.h 2021-03-10 21:07:06 UTC (rev 274231)
+++ trunk/Source/WebCore/rendering/RenderTheme.h 2021-03-10 21:16:59 UTC (rev 274232)
@@ -312,7 +312,7 @@
virtual void paintRadioDecorations(const RenderObject&, const PaintInfo&, const IntRect&) { }
virtual void paintButtonDecorations(const RenderObject&, const PaintInfo&, const IntRect&) { }
#if ENABLE(INPUT_TYPE_COLOR)
- virtual void paintColorWellDecorations(const RenderObject&, const PaintInfo&, const IntRect&);
+ virtual void paintColorWellDecorations(const RenderObject&, const PaintInfo&, const FloatRect&);
#endif
virtual void adjustTextFieldStyle(RenderStyle&, const Element*) const;
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.h (274231 => 274232)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.h 2021-03-10 21:07:06 UTC (rev 274231)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.h 2021-03-10 21:16:59 UTC (rev 274232)
@@ -131,7 +131,7 @@
void adjustColorWellStyle(RenderStyle&, const Element*) const final;
bool paintColorWell(const RenderObject&, const PaintInfo&, const IntRect&) final;
- void paintColorWellDecorations(const RenderObject&, const PaintInfo&, const IntRect&) final;
+ void paintColorWellDecorations(const RenderObject&, const PaintInfo&, const FloatRect&) final;
#endif
#endif
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.mm (274231 => 274232)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2021-03-10 21:07:06 UTC (rev 274231)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2021-03-10 21:16:59 UTC (rev 274232)
@@ -2434,7 +2434,7 @@
if (!settings.iOSFormControlRefreshEnabled())
return RenderTheme::colorInputStyleSheet(settings);
- return "input[type=\"color\"] { -webkit-appearance: color-well; width: 23px; height: 23px; outline: none; border: initial; border-radius: 50%; } "_s;
+ return "input[type=\"color\"] { -webkit-appearance: color-well; width: 28px; height: 28px; outline: none; border: initial; border-radius: 50%; } "_s;
}
void RenderThemeIOS::adjustColorWellStyle(RenderStyle& style, const Element* element) const
@@ -2453,7 +2453,7 @@
return true;
}
-void RenderThemeIOS::paintColorWellDecorations(const RenderObject& box, const PaintInfo& paintInfo, const IntRect& rect)
+void RenderThemeIOS::paintColorWellDecorations(const RenderObject& box, const PaintInfo& paintInfo, const FloatRect& rect)
{
if (!box.settings().iOSFormControlRefreshEnabled()) {
RenderTheme::paintColorWellDecorations(box, paintInfo, rect);
@@ -2460,7 +2460,7 @@
return;
}
- constexpr int strokeThickness = 2;
+ constexpr int strokeThickness = 3;
constexpr DisplayP3<float> colorStops[] = {
{ 1, 1, 0, 1 },
{ 1, 0.5, 0, 1 },
@@ -2481,10 +2481,13 @@
auto& context = paintInfo.context();
GraphicsContextStateSaver stateSaver(context);
+ FloatRect strokeRect = rect;
+ strokeRect.inflate(-strokeThickness / 2.0f);
+
context.setStrokeThickness(strokeThickness);
context.setStrokeStyle(SolidStroke);
context.setStrokeGradient(WTFMove(gradient));
- context.strokeEllipse(rect);
+ context.strokeEllipse(strokeRect);
}
#endif // ENABLE(INPUT_TYPE_COLOR)
_______________________________________________ webkit-changes mailing list [email protected] https://lists.webkit.org/mailman/listinfo/webkit-changes
