Log Message
[iOS] Swatch appears squished and off-center in inputs of type color https://bugs.webkit.org/show_bug.cgi?id=191279 <rdar://problem/45816319>
Reviewed by Tim Horton.
Source/WebCore:
This patch makes some small adjustments to color inputs on iOS to bring them closer to the intended design.
See comments below for more details.
Tests: fast/forms/color/color-input-uses-color-well-appearance.html
fast/forms/color/input-appearance-color.html
* css/html.css:
Adjust the UA stylesheet for color inputs on iOS.
* rendering/RenderTheme.cpp:
(WebCore::RenderTheme::paintDecorations):
When painting decorations for `ColorWellPart`, treat it as a standard button instead of the square button
appearance.
(WebCore::RenderTheme::colorInputStyleSheet const):
Add `-webkit-appearance: color-well;` to the stylesheet for color inputs. Previously, this was special-cased on
iOS, where color input elements had appearances of `textfield`; however, this patch makes some adjustments to
RenderThemeIOS, allowing us to use `color-well` on iOS.
* rendering/RenderTheme.h:
(WebCore::RenderTheme::platformUsesColorWellAppearance const): Deleted.
Remove this from RenderTheme. This is no longer necessary, since all platforms now use
`-webkit-appearance: color-well;`.
* rendering/RenderThemeIOS.h:
* rendering/RenderThemeIOS.mm:
(WebCore::RenderThemeIOS::adjustButtonStyle const):
When painting buttons for color inputs, don't add rounded corners that are present by default for regular
buttons.
LayoutTests:
* fast/forms/color/color-input-uses-color-well-appearance-expected-mismatch.html: Added.
* fast/forms/color/color-input-uses-color-well-appearance.html: Added.
Add a test to verify that setting `-webkit-appearance: textfield;` on a color input causes the color input to
render differently from a color input with a default appearance.
* platform/ios-wk1/TestExpectations:
* platform/ios/TestExpectations:
In the WebKit2 port of iOS, enable a handful of color input tests that are currently disabled.
* platform/ios/fast/forms/color/input-appearance-color-expected.txt:
Rebaseline an existing test on iOS.
Modified Paths
- trunk/LayoutTests/ChangeLog
- trunk/LayoutTests/platform/ios/TestExpectations
- trunk/LayoutTests/platform/ios/fast/forms/color/input-appearance-color-expected.txt
- trunk/LayoutTests/platform/ios-wk1/TestExpectations
- trunk/Source/WebCore/ChangeLog
- trunk/Source/WebCore/css/html.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 (237841 => 237842)
--- trunk/LayoutTests/ChangeLog 2018-11-06 02:30:47 UTC (rev 237841)
+++ trunk/LayoutTests/ChangeLog 2018-11-06 04:07:36 UTC (rev 237842)
@@ -1,3 +1,26 @@
+2018-11-05 Wenson Hsieh <wenson_hs...@apple.com>
+
+ [iOS] Swatch appears squished and off-center in inputs of type color
+ https://bugs.webkit.org/show_bug.cgi?id=191279
+ <rdar://problem/45816319>
+
+ Reviewed by Tim Horton.
+
+ * fast/forms/color/color-input-uses-color-well-appearance-expected-mismatch.html: Added.
+ * fast/forms/color/color-input-uses-color-well-appearance.html: Added.
+
+ Add a test to verify that setting `-webkit-appearance: textfield;` on a color input causes the color input to
+ render differently from a color input with a default appearance.
+
+ * platform/ios-wk1/TestExpectations:
+ * platform/ios/TestExpectations:
+
+ In the WebKit2 port of iOS, enable a handful of color input tests that are currently disabled.
+
+ * platform/ios/fast/forms/color/input-appearance-color-expected.txt:
+
+ Rebaseline an existing test on iOS.
+
2018-11-05 Eric Carlson <eric.carl...@apple.com>
[MediaStream] An audio track should be muted when capture is interrupted by the OS.
Added: trunk/LayoutTests/fast/forms/color/color-input-uses-color-well-appearance-expected-mismatch.html (0 => 237842)
--- trunk/LayoutTests/fast/forms/color/color-input-uses-color-well-appearance-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/color/color-input-uses-color-well-appearance-expected-mismatch.html 2018-11-06 04:07:36 UTC (rev 237842)
@@ -0,0 +1 @@
+<input style="-webkit-appearance: textfield;" type="color" value="#00FF00" style="font-size:18px">
Added: trunk/LayoutTests/fast/forms/color/color-input-uses-color-well-appearance.html (0 => 237842)
--- trunk/LayoutTests/fast/forms/color/color-input-uses-color-well-appearance.html (rev 0)
+++ trunk/LayoutTests/fast/forms/color/color-input-uses-color-well-appearance.html 2018-11-06 04:07:36 UTC (rev 237842)
@@ -0,0 +1 @@
+<input type="color" value="#00FF00" style="font-size:18px">
Modified: trunk/LayoutTests/platform/ios/TestExpectations (237841 => 237842)
--- trunk/LayoutTests/platform/ios/TestExpectations 2018-11-06 02:30:47 UTC (rev 237841)
+++ trunk/LayoutTests/platform/ios/TestExpectations 2018-11-06 04:07:36 UTC (rev 237842)
@@ -1660,12 +1660,6 @@
fast/forms/button-inner-block-reuse.html [ Failure ]
fast/forms/button-with-float.html [ ImageOnlyFailure ]
-# <input type=color> is not supported on iOS.
-fast/forms/color/input-color-onchange-event.html [ Failure ]
-fast/forms/color/input-color-readonly.html [ Failure ]
-fast/forms/color/input-value-sanitization-color.html [ Failure ]
-fast/forms/color/color-setrangetext.html [ Failure ]
-
fast/forms/datalist/input-list.html [ Failure ]
fast/forms/datetime/ValidityState-rangeOverflow-datetime.html [ Failure ]
fast/forms/datetime/ValidityState-rangeUnderflow-datetime.html [ Failure ]
Modified: trunk/LayoutTests/platform/ios/fast/forms/color/input-appearance-color-expected.txt (237841 => 237842)
--- trunk/LayoutTests/platform/ios/fast/forms/color/input-appearance-color-expected.txt 2018-11-06 02:30:47 UTC (rev 237841)
+++ trunk/LayoutTests/platform/ios/fast/forms/color/input-appearance-color-expected.txt 2018-11-06 04:07:36 UTC (rev 237842)
@@ -11,105 +11,105 @@
text run at (0,0) width 457: "List color controls have different appearance if ENABLE(DATALIST)."
RenderBR {BR} at (456,15) size 1x0
RenderBlock {INPUT} at (0,20) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 32x16
- RenderBlock {DIV} at (2,4) size 27x7 [bgcolor=#000000]
+ RenderFlexibleBox {DIV} at (4,4) size 36x15
+ RenderBlock {DIV} at (0,0) size 36x15 [bgcolor=#000000]
RenderBlock {INPUT} at (44,20) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 32x16
- RenderBlock {DIV} at (2,4) size 27x7 [bgcolor=#000000]
+ RenderFlexibleBox {DIV} at (4,4) size 36x15
+ RenderBlock {DIV} at (0,0) size 36x15 [bgcolor=#000000]
RenderText {#text} at (0,0) size 0x0
RenderBlock {H3} at (0,103) 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 784x48
+ RenderBlock (anonymous) at (0,145) size 784x47
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,15) size 1x0
- RenderBlock {INPUT} at (0,24) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (10,4) size 24x13
- RenderBlock {DIV} at (2,4) size 20x4 [bgcolor=#00FF00]
- RenderText {#text} at (44,20) size 4x19
- text run at (44,20) width 4: " "
- RenderBlock {INPUT} at (48,22) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 32x16
- RenderBlock {DIV} at (2,4) size 27x7 [bgcolor=#00FF00]
- RenderText {#text} at (92,20) size 4x19
- text run at (92,20) width 4: " "
- RenderBlock {INPUT} at (96,21) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (5,2) size 34x18
- RenderBlock {DIV} at (2,4) size 30x9 [bgcolor=#00FF00]
- RenderText {#text} at (140,20) size 4x19
- text run at (140,20) width 4: " "
- RenderBlock {INPUT} at (144,24) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (10,4) size 24x13
- RenderBlock {DIV} at (2,4) size 20x4 [bgcolor=#00FF00]
- RenderText {#text} at (188,20) size 4x19
- text run at (188,20) width 4: " "
- RenderBlock {INPUT} at (192,22) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 32x16
- RenderBlock {DIV} at (2,4) size 27x7 [bgcolor=#00FF00]
- RenderText {#text} at (236,20) size 4x19
- text run at (236,20) width 4: " "
- RenderBlock {INPUT} at (240,21) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (5,2) size 34x18
- RenderBlock {DIV} at (2,4) size 30x9 [bgcolor=#00FF00]
+ RenderBlock {INPUT} at (0,23) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (6,6) size 32x11
+ RenderBlock {DIV} at (0,0) size 32x11 [bgcolor=#00FF00]
+ RenderText {#text} at (44,24) size 4x19
+ text run at (44,24) width 4: " "
+ RenderBlock {INPUT} at (48,21) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (4,4) size 36x15
+ RenderBlock {DIV} at (0,0) size 36x15 [bgcolor=#00FF00]
+ RenderText {#text} at (92,24) size 4x19
+ text run at (92,24) width 4: " "
+ RenderBlock {INPUT} at (96,20) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (3,3) size 38x17
+ RenderBlock {DIV} at (0,0) size 38x17 [bgcolor=#00FF00]
+ RenderText {#text} at (140,24) size 4x19
+ text run at (140,24) width 4: " "
+ RenderBlock {INPUT} at (144,23) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (6,6) size 32x11
+ RenderBlock {DIV} at (0,0) size 32x11 [bgcolor=#00FF00]
+ RenderText {#text} at (188,24) size 4x19
+ text run at (188,24) width 4: " "
+ RenderBlock {INPUT} at (192,21) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (4,4) size 36x15
+ RenderBlock {DIV} at (0,0) size 36x15 [bgcolor=#00FF00]
+ RenderText {#text} at (236,24) size 4x19
+ text run at (236,24) width 4: " "
+ RenderBlock {INPUT} at (240,20) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (3,3) size 38x17
+ RenderBlock {DIV} at (0,0) size 38x17 [bgcolor=#00FF00]
RenderText {#text} at (0,0) size 0x0
- RenderBlock {H3} at (0,210) size 784x24
+ RenderBlock {H3} at (0,209) size 784x24
RenderText {#text} at (0,0) size 122x22
text run at (0,0) width 122: "Various Colors"
- RenderBlock (anonymous) at (0,252) size 784x26
- RenderBlock {INPUT} at (0,2) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 32x16
- RenderBlock {DIV} at (2,4) size 27x7 [bgcolor=#FF0000]
- RenderText {#text} at (44,0) size 4x19
- text run at (44,0) width 4: " "
- RenderBlock {INPUT} at (48,2) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 32x16
- RenderBlock {DIV} at (2,4) size 27x7 [bgcolor=#00FF00]
- RenderText {#text} at (92,0) size 4x19
- text run at (92,0) width 4: " "
- RenderBlock {INPUT} at (96,2) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 32x16
- RenderBlock {DIV} at (2,4) size 27x7 [bgcolor=#0000FF]
- RenderText {#text} at (140,0) size 4x19
- text run at (140,0) width 4: " "
- RenderBlock {INPUT} at (144,2) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 32x16
- RenderBlock {DIV} at (2,4) size 27x7 [bgcolor=#EC008C]
- RenderText {#text} at (188,0) size 4x19
- text run at (188,0) width 4: " "
- RenderBlock {INPUT} at (192,2) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 32x16
- RenderBlock {DIV} at (2,4) size 27x7 [bgcolor=#40E0D0]
- RenderText {#text} at (236,0) size 4x19
- text run at (236,0) width 4: " "
- RenderBlock {INPUT} at (240,2) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 32x16
- RenderBlock {DIV} at (2,4) size 27x7 [bgcolor=#FF0000]
- RenderText {#text} at (284,0) size 4x19
- text run at (284,0) width 4: " "
- RenderBlock {INPUT} at (288,2) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 32x16
- RenderBlock {DIV} at (2,4) size 27x7 [bgcolor=#00FF00]
- RenderText {#text} at (332,0) size 4x19
- text run at (332,0) width 4: " "
- RenderBlock {INPUT} at (336,2) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 32x16
- RenderBlock {DIV} at (2,4) size 27x7 [bgcolor=#0000FF]
- RenderText {#text} at (380,0) size 4x19
- text run at (380,0) width 4: " "
- RenderBlock {INPUT} at (384,2) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 32x16
- RenderBlock {DIV} at (2,4) size 27x7 [bgcolor=#EC008C]
- RenderText {#text} at (428,0) size 4x19
- text run at (428,0) width 4: " "
- RenderBlock {INPUT} at (432,2) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 32x16
- RenderBlock {DIV} at (2,4) size 27x7 [bgcolor=#40E0D0]
+ RenderBlock (anonymous) at (0,251) size 784x24
+ RenderBlock {INPUT} at (0,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (4,4) size 36x15
+ RenderBlock {DIV} at (0,0) size 36x15 [bgcolor=#FF0000]
+ RenderText {#text} at (44,3) size 4x19
+ text run at (44,3) width 4: " "
+ RenderBlock {INPUT} at (48,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (4,4) size 36x15
+ RenderBlock {DIV} at (0,0) size 36x15 [bgcolor=#00FF00]
+ RenderText {#text} at (92,3) size 4x19
+ text run at (92,3) width 4: " "
+ RenderBlock {INPUT} at (96,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (4,4) size 36x15
+ RenderBlock {DIV} at (0,0) size 36x15 [bgcolor=#0000FF]
+ RenderText {#text} at (140,3) size 4x19
+ text run at (140,3) width 4: " "
+ RenderBlock {INPUT} at (144,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (4,4) size 36x15
+ RenderBlock {DIV} at (0,0) size 36x15 [bgcolor=#EC008C]
+ RenderText {#text} at (188,3) size 4x19
+ text run at (188,3) width 4: " "
+ RenderBlock {INPUT} at (192,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (4,4) size 36x15
+ RenderBlock {DIV} at (0,0) size 36x15 [bgcolor=#40E0D0]
+ RenderText {#text} at (236,3) size 4x19
+ text run at (236,3) width 4: " "
+ RenderBlock {INPUT} at (240,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (4,4) size 36x15
+ RenderBlock {DIV} at (0,0) size 36x15 [bgcolor=#FF0000]
+ RenderText {#text} at (284,3) size 4x19
+ text run at (284,3) width 4: " "
+ RenderBlock {INPUT} at (288,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (4,4) size 36x15
+ RenderBlock {DIV} at (0,0) size 36x15 [bgcolor=#00FF00]
+ RenderText {#text} at (332,3) size 4x19
+ text run at (332,3) width 4: " "
+ RenderBlock {INPUT} at (336,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (4,4) size 36x15
+ RenderBlock {DIV} at (0,0) size 36x15 [bgcolor=#0000FF]
+ RenderText {#text} at (380,3) size 4x19
+ text run at (380,3) width 4: " "
+ RenderBlock {INPUT} at (384,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (4,4) size 36x15
+ RenderBlock {DIV} at (0,0) size 36x15 [bgcolor=#EC008C]
+ RenderText {#text} at (428,3) size 4x19
+ text run at (428,3) width 4: " "
+ RenderBlock {INPUT} at (432,0) size 44x23 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderFlexibleBox {DIV} at (4,4) size 36x15
+ RenderBlock {DIV} at (0,0) size 36x15 [bgcolor=#40E0D0]
RenderText {#text} at (0,0) size 0x0
- RenderBlock {H3} at (0,296) size 784x24
+ RenderBlock {H3} at (0,293) size 784x24
RenderText {#text} at (0,0) size 118x22
text run at (0,0) width 118: "Arbitrary Size"
- RenderBlock (anonymous) at (0,338) size 784x31
+ RenderBlock (anonymous) at (0,335) size 784x31
RenderBlock {INPUT} at (0,0) size 100x30 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
- RenderFlexibleBox {DIV} at (6,3) size 88x23
- RenderBlock {DIV} at (2,4) size 83x14 [bgcolor=#FF0000]
+ RenderFlexibleBox {DIV} at (4,4) size 92x22
+ RenderBlock {DIV} at (0,0) size 92x22 [bgcolor=#FF0000]
Modified: trunk/LayoutTests/platform/ios-wk1/TestExpectations (237841 => 237842)
--- trunk/LayoutTests/platform/ios-wk1/TestExpectations 2018-11-06 02:30:47 UTC (rev 237841)
+++ trunk/LayoutTests/platform/ios-wk1/TestExpectations 2018-11-06 04:07:36 UTC (rev 237842)
@@ -31,6 +31,12 @@
fast/forms/datalist [ WontFix ]
imported/w3c/web-platform-tests/html/semantics/forms/the-datalist-element [ WontFix ]
+# <input type=color> is not supported in WebKit1 on iOS.
+fast/forms/color/input-color-onchange-event.html [ Failure ]
+fast/forms/color/input-color-readonly.html [ Failure ]
+fast/forms/color/input-value-sanitization-color.html [ Failure ]
+fast/forms/color/color-setrangetext.html [ Failure ]
+
# <rdar://problem/6501130> LayoutTests: Enable editing tests after we support editing
editing/deleting/4922367.html
editing/deleting/5126166.html
Modified: trunk/Source/WebCore/ChangeLog (237841 => 237842)
--- trunk/Source/WebCore/ChangeLog 2018-11-06 02:30:47 UTC (rev 237841)
+++ trunk/Source/WebCore/ChangeLog 2018-11-06 04:07:36 UTC (rev 237842)
@@ -1,3 +1,46 @@
+2018-11-05 Wenson Hsieh <wenson_hs...@apple.com>
+
+ [iOS] Swatch appears squished and off-center in inputs of type color
+ https://bugs.webkit.org/show_bug.cgi?id=191279
+ <rdar://problem/45816319>
+
+ Reviewed by Tim Horton.
+
+ This patch makes some small adjustments to color inputs on iOS to bring them closer to the intended design.
+ See comments below for more details.
+
+ Tests: fast/forms/color/color-input-uses-color-well-appearance.html
+ fast/forms/color/input-appearance-color.html
+
+ * css/html.css:
+
+ Adjust the UA stylesheet for color inputs on iOS.
+
+ * rendering/RenderTheme.cpp:
+ (WebCore::RenderTheme::paintDecorations):
+
+ When painting decorations for `ColorWellPart`, treat it as a standard button instead of the square button
+ appearance.
+
+ (WebCore::RenderTheme::colorInputStyleSheet const):
+
+ Add `-webkit-appearance: color-well;` to the stylesheet for color inputs. Previously, this was special-cased on
+ iOS, where color input elements had appearances of `textfield`; however, this patch makes some adjustments to
+ RenderThemeIOS, allowing us to use `color-well` on iOS.
+
+ * rendering/RenderTheme.h:
+ (WebCore::RenderTheme::platformUsesColorWellAppearance const): Deleted.
+
+ Remove this from RenderTheme. This is no longer necessary, since all platforms now use
+ `-webkit-appearance: color-well;`.
+
+ * rendering/RenderThemeIOS.h:
+ * rendering/RenderThemeIOS.mm:
+ (WebCore::RenderThemeIOS::adjustButtonStyle const):
+
+ When painting buttons for color inputs, don't add rounded corners that are present by default for regular
+ buttons.
+
2018-11-05 Eric Carlson <eric.carl...@apple.com>
[MediaStream] An audio track should be muted when capture is interrupted by the OS.
Modified: trunk/Source/WebCore/css/html.css (237841 => 237842)
--- trunk/Source/WebCore/css/html.css 2018-11-06 02:30:47 UTC (rev 237841)
+++ trunk/Source/WebCore/css/html.css 2018-11-06 04:07:36 UTC (rev 237842)
@@ -906,9 +906,19 @@
#if defined(ENABLE_INPUT_TYPE_COLOR) && ENABLE_INPUT_TYPE_COLOR
+#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
+input[type="color"] {
+ padding: 0.3em;
+}
+#endif
+
input[type="color"]::-webkit-color-swatch-wrapper {
display: flex;
+#if defined(WTF_PLATFORM_IOS_FAMILY) && WTF_PLATFORM_IOS_FAMILY
+ padding: 0;
+#else
padding: 4px 2px 5px;
+#endif
box-sizing: border-box;
width: 100%;
height: 100%;
Modified: trunk/Source/WebCore/rendering/RenderTheme.cpp (237841 => 237842)
--- trunk/Source/WebCore/rendering/RenderTheme.cpp 2018-11-06 02:30:47 UTC (rev 237841)
+++ trunk/Source/WebCore/rendering/RenderTheme.cpp 2018-11-06 04:07:36 UTC (rev 237842)
@@ -523,10 +523,10 @@
case PushButtonPart:
return paintPushButtonDecorations(box, paintInfo, integralSnappedRect);
case SquareButtonPart:
+ return paintSquareButtonDecorations(box, paintInfo, integralSnappedRect);
#if ENABLE(INPUT_TYPE_COLOR)
case ColorWellPart:
#endif
- return paintSquareButtonDecorations(box, paintInfo, integralSnappedRect);
case ButtonPart:
return paintButtonDecorations(box, paintInfo, integralSnappedRect);
case MenulistPart:
@@ -1039,10 +1039,7 @@
String RenderTheme::colorInputStyleSheet() const
{
ASSERT(RuntimeEnabledFeatures::sharedFeatures().inputTypeColorEnabled());
- auto colorWellAppearanceStyle = emptyString();
- if (platformUsesColorWellAppearance())
- colorWellAppearanceStyle = "-webkit-appearance: color-well; "_s;
- return makeString("input[type=\"color\"] { "_s, WTFMove(colorWellAppearanceStyle), "width: 44px; height: 23px; outline: none; }"_s);
+ return "input[type=\"color\"] { -webkit-appearance: color-well; width: 44px; height: 23px; outline: none; } "_s;
}
#endif // ENABLE(INPUT_TYPE_COLOR)
Modified: trunk/Source/WebCore/rendering/RenderTheme.h (237841 => 237842)
--- trunk/Source/WebCore/rendering/RenderTheme.h 2018-11-06 02:30:47 UTC (rev 237841)
+++ trunk/Source/WebCore/rendering/RenderTheme.h 2018-11-06 04:07:36 UTC (rev 237842)
@@ -347,10 +347,6 @@
virtual void adjustListButtonStyle(StyleResolver&, RenderStyle&, const Element*) const;
#endif
-#if ENABLE(INPUT_TYPE_COLOR)
- virtual bool platformUsesColorWellAppearance() const { return true; }
-#endif
-
virtual void adjustProgressBarStyle(StyleResolver&, RenderStyle&, const Element*) const;
virtual bool paintProgressBar(const RenderObject&, const PaintInfo&, const IntRect&) { return true; }
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.h (237841 => 237842)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.h 2018-11-06 02:30:47 UTC (rev 237841)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.h 2018-11-06 04:07:36 UTC (rev 237842)
@@ -145,14 +145,6 @@
String extraDefaultStyleSheet() final;
#endif
-#if ENABLE(INPUT_TYPE_COLOR)
- bool platformUsesColorWellAppearance() const final
- {
- // FIXME: Support -webkit-appearance: color-well; for drawing color inputs on iOS.
- return false;
- }
-#endif
-
const Color& shadowColor() const;
FloatRect addRoundedBorderClip(const RenderObject& box, GraphicsContext&, const IntRect&);
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.mm (237841 => 237842)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2018-11-06 02:30:47 UTC (rev 237841)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2018-11-06 04:07:36 UTC (rev 237842)
@@ -1016,6 +1016,11 @@
{
RenderTheme::adjustButtonStyle(selector, style, element);
+#if ENABLE(INPUT_TYPE_COLOR)
+ if (style.appearance() == ColorWellPart)
+ return;
+#endif
+
// Set padding: 0 1.0em; on buttons.
// CSSPrimitiveValue::computeLengthInt only needs the element's style to calculate em lengths.
// Since the element might not be in a document, just pass nullptr for the root element style
_______________________________________________ webkit-changes mailing list webkit-changes@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-changes
