<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[284232] trunk</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/284232">284232</a></dd>
<dt>Author</dt> <dd>akeerthi@apple.com</dd>
<dt>Date</dt> <dd>2021-10-14 21:25:14 -0700 (Thu, 14 Oct 2021)</dd>
</dl>

<h3>Log Message</h3>
<pre>[iOS] Support accent-color for controls without text
https://bugs.webkit.org/show_bug.cgi?id=231762
rdar://84261702

Reviewed by Tim Horton.

Source/WebCore:

Add support for 'accent-color' on checkboxes, radio buttons,
<input type=range>, <progress> elements, and the <datalist>
indicator button.

* rendering/RenderThemeIOS.h:
* rendering/RenderThemeIOS.mm:
(WebCore::RenderThemeIOS::controlTintColor):
(WebCore::RenderThemeIOS::checkboxRadioBackgroundColor):
(WebCore::RenderThemeIOS::paintCheckbox):
(WebCore::RenderThemeIOS::paintRadio):
(WebCore::RenderThemeIOS::paintProgressBarWithFormControlRefresh):
(WebCore::RenderThemeIOS::paintListButton):
(WebCore::RenderThemeIOS::paintSliderTicks):
(WebCore::RenderThemeIOS::paintSliderTrackWithFormControlRefresh):

LayoutTests:

Add new "Pass" results.

* TestExpectations:
* platform/ios/TestExpectations:
* platform/mac/TestExpectations:</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsTestExpectations">trunk/LayoutTests/TestExpectations</a></li>
<li><a href="#trunkLayoutTestsplatformiosTestExpectations">trunk/LayoutTests/platform/ios/TestExpectations</a></li>
<li><a href="#trunkLayoutTestsplatformmacTestExpectations">trunk/LayoutTests/platform/mac/TestExpectations</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderThemeIOSh">trunk/Source/WebCore/rendering/RenderThemeIOS.h</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderThemeIOSmm">trunk/Source/WebCore/rendering/RenderThemeIOS.mm</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (284231 => 284232)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog      2021-10-15 03:20:18 UTC (rev 284231)
+++ trunk/LayoutTests/ChangeLog 2021-10-15 04:25:14 UTC (rev 284232)
</span><span class="lines">@@ -1,3 +1,17 @@
</span><ins>+2021-10-14  Aditya Keerthi  <akeerthi@apple.com>
+
+        [iOS] Support accent-color for controls without text
+        https://bugs.webkit.org/show_bug.cgi?id=231762
+        rdar://84261702
+
+        Reviewed by Tim Horton.
+
+        Add new "Pass" results.
+
+        * TestExpectations:
+        * platform/ios/TestExpectations:
+        * platform/mac/TestExpectations:
+
</ins><span class="cx"> 2021-10-14  Alan Bujtas  <zalan@apple.com>
</span><span class="cx"> 
</span><span class="cx">         WPT progression after turning on the IFC codepath for inline boxes with background decoration (r284194).
</span></span></pre></div>
<a id="trunkLayoutTestsTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/TestExpectations (284231 => 284232)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/TestExpectations       2021-10-15 03:20:18 UTC (rev 284231)
+++ trunk/LayoutTests/TestExpectations  2021-10-15 04:25:14 UTC (rev 284232)
</span><span class="lines">@@ -1124,7 +1124,7 @@
</span><span class="cx"> # Support for VP9 encoded videos with transparency is only available on ports that use GStreamer.
</span><span class="cx"> media/video-with-alpha.html [ Skip ]
</span><span class="cx"> 
</span><del>-# accent-color is currently only supported on macOS
</del><ins>+# accent-color is currently only supported on Cocoa platforms
</ins><span class="cx"> fast/css/accent-color/checkbox.html [ ImageOnlyFailure ]
</span><span class="cx"> fast/css/accent-color/datalist.html [ ImageOnlyFailure ]
</span><span class="cx"> fast/css/accent-color/progress.html [ ImageOnlyFailure ]
</span></span></pre></div>
<a id="trunkLayoutTestsplatformiosTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/ios/TestExpectations (284231 => 284232)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/ios/TestExpectations  2021-10-15 03:20:18 UTC (rev 284231)
+++ trunk/LayoutTests/platform/ios/TestExpectations     2021-10-15 04:25:14 UTC (rev 284232)
</span><span class="lines">@@ -43,6 +43,17 @@
</span><span class="cx"> fast/css/webkit-named-image/apple-pay-logo-white [ Pass ]
</span><span class="cx"> fast/css/getComputedStyle/computed-style-apple-pay-button.html [ Pass ]
</span><span class="cx"> 
</span><ins>+# accent-color is currently only supported on Cocoa platforms
+fast/css/accent-color/checkbox.html [ Pass ]
+fast/css/accent-color/datalist.html [ Pass ]
+fast/css/accent-color/progress.html [ Pass ]
+fast/css/accent-color/radio.html [ Pass ]
+fast/css/accent-color/range.html [ Pass ]
+fast/css/accent-color/text.html [ Pass ]
+imported/w3c/web-platform-tests/css/css-ui/accent-color-checkbox-checked-001.tentative.html [ Pass ]
+
+webkit.org/b/231764 fast/css/accent-color/select.html [ ImageOnlyFailure ]
+
</ins><span class="cx"> fast/css/ios [ Pass ]
</span><span class="cx"> fast/media/ios [ Pass ]
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkLayoutTestsplatformmacTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/mac/TestExpectations (284231 => 284232)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/mac/TestExpectations  2021-10-15 03:20:18 UTC (rev 284231)
+++ trunk/LayoutTests/platform/mac/TestExpectations     2021-10-15 04:25:14 UTC (rev 284232)
</span><span class="lines">@@ -2339,7 +2339,7 @@
</span><span class="cx"> 
</span><span class="cx"> webkit.org/b/230116 imported/w3c/web-platform-tests/webrtc-extensions/transfer-datachannel.html [ Pass Failure ]
</span><span class="cx"> 
</span><del>-# accent-color is currently only supported on macOS
</del><ins>+# accent-color is currently only supported on Cocoa platforms
</ins><span class="cx"> fast/css/accent-color/checkbox.html [ Pass ]
</span><span class="cx"> fast/css/accent-color/progress.html [ Pass ]
</span><span class="cx"> fast/css/accent-color/radio.html [ Pass ]
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (284231 => 284232)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog   2021-10-15 03:20:18 UTC (rev 284231)
+++ trunk/Source/WebCore/ChangeLog      2021-10-15 04:25:14 UTC (rev 284232)
</span><span class="lines">@@ -1,3 +1,26 @@
</span><ins>+2021-10-14  Aditya Keerthi  <akeerthi@apple.com>
+
+        [iOS] Support accent-color for controls without text
+        https://bugs.webkit.org/show_bug.cgi?id=231762
+        rdar://84261702
+
+        Reviewed by Tim Horton.
+
+        Add support for 'accent-color' on checkboxes, radio buttons,
+        <input type=range>, <progress> elements, and the <datalist>
+        indicator button.
+
+        * rendering/RenderThemeIOS.h:
+        * rendering/RenderThemeIOS.mm:
+        (WebCore::RenderThemeIOS::controlTintColor):
+        (WebCore::RenderThemeIOS::checkboxRadioBackgroundColor):
+        (WebCore::RenderThemeIOS::paintCheckbox):
+        (WebCore::RenderThemeIOS::paintRadio):
+        (WebCore::RenderThemeIOS::paintProgressBarWithFormControlRefresh):
+        (WebCore::RenderThemeIOS::paintListButton):
+        (WebCore::RenderThemeIOS::paintSliderTicks):
+        (WebCore::RenderThemeIOS::paintSliderTrackWithFormControlRefresh):
+
</ins><span class="cx"> 2021-10-14  Robin Morisset  <rmorisset@apple.com>
</span><span class="cx"> 
</span><span class="cx">         Allow WASM to use up to 4GB
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderThemeIOSh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.h (284231 => 284232)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderThemeIOS.h  2021-10-15 03:20:18 UTC (rev 284231)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.h     2021-10-15 04:25:14 UTC (rev 284232)
</span><span class="lines">@@ -119,7 +119,7 @@
</span><span class="cx"> 
</span><span class="cx"> #if ENABLE(IOS_FORM_CONTROL_REFRESH)
</span><span class="cx">     Color checkboxRadioBorderColor(OptionSet<ControlStates::States>, OptionSet<StyleColorOptions>);
</span><del>-    Color checkboxRadioBackgroundColor(bool useAlternateDesign, OptionSet<ControlStates::States>, OptionSet<StyleColorOptions>);
</del><ins>+    Color checkboxRadioBackgroundColor(bool useAlternateDesign, const RenderStyle&, OptionSet<ControlStates::States>, OptionSet<StyleColorOptions>);
</ins><span class="cx">     RefPtr<Gradient> checkboxRadioBackgroundGradient(const FloatRect&, OptionSet<ControlStates::States>);
</span><span class="cx">     Color checkboxRadioIndicatorColor(OptionSet<ControlStates::States>, OptionSet<StyleColorOptions>);
</span><span class="cx"> 
</span><span class="lines">@@ -205,6 +205,8 @@
</span><span class="cx"> 
</span><span class="cx">     Color systemColor(CSSValueID, OptionSet<StyleColorOptions>) const override;
</span><span class="cx"> 
</span><ins>+    Color controlTintColor(const RenderStyle&, OptionSet<StyleColorOptions>) const;
+
</ins><span class="cx">     void adjustStyleForAlternateFormControlDesignTransition(RenderStyle&, const Element*) const;
</span><span class="cx"> 
</span><span class="cx"> #if USE(SYSTEM_PREVIEW)
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderThemeIOSmm"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.mm (284231 => 284232)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2021-10-15 03:20:18 UTC (rev 284231)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.mm    2021-10-15 04:25:14 UTC (rev 284232)
</span><span class="lines">@@ -1556,6 +1556,15 @@
</span><span class="cx">     }).iterator->value;
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+Color RenderThemeIOS::controlTintColor(const RenderStyle& style, OptionSet<StyleColorOptions> options) const
+{
+    Color tintColor = style.effectiveAccentColor();
+    if (tintColor.isValid())
+        return tintColor;
+
+    return systemColor(CSSValueAppleSystemBlue, options);
+}
+
</ins><span class="cx"> #if ENABLE(ATTACHMENT_ELEMENT)
</span><span class="cx"> 
</span><span class="cx"> const CGSize attachmentSize = { 160, 119 };
</span><span class="lines">@@ -2161,7 +2170,7 @@
</span><span class="cx">     return defaultBorderColor;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-Color RenderThemeIOS::checkboxRadioBackgroundColor(bool useAlternateDesign, OptionSet<ControlStates::States> states, OptionSet<StyleColorOptions> styleColorOptions)
</del><ins>+Color RenderThemeIOS::checkboxRadioBackgroundColor(bool useAlternateDesign, const RenderStyle& style, OptionSet<ControlStates::States> states, OptionSet<StyleColorOptions> styleColorOptions)
</ins><span class="cx"> {
</span><span class="cx">     bool isEmpty = !states.containsAny({ ControlStates::States::Checked, ControlStates::States::Indeterminate });
</span><span class="cx">     bool isEnabled = states.contains(ControlStates::States::Enabled);
</span><span class="lines">@@ -2181,7 +2190,7 @@
</span><span class="cx">     if (!isEnabled)
</span><span class="cx">         return systemColor(isEmpty ? CSSValueWebkitControlBackground : CSSValueAppleSystemOpaqueTertiaryFill, styleColorOptions);
</span><span class="cx"> 
</span><del>-    auto enabledBackgroundColor = systemColor(isEmpty ? CSSValueWebkitControlBackground : CSSValueAppleSystemBlue, styleColorOptions);
</del><ins>+    auto enabledBackgroundColor = isEmpty ? systemColor(CSSValueWebkitControlBackground, styleColorOptions) : controlTintColor(style, styleColorOptions);
</ins><span class="cx">     if (isPressed)
</span><span class="cx">         return enabledBackgroundColor.colorWithAlphaMultipliedBy(pressedStateOpacity);
</span><span class="cx"> 
</span><span class="lines">@@ -2271,7 +2280,7 @@
</span><span class="cx">     auto controlStates = extractControlStatesForRenderer(box);
</span><span class="cx">     auto styleColorOptions = box.styleColorOptions();
</span><span class="cx"> 
</span><del>-    auto backgroundColor = checkboxRadioBackgroundColor(useAlternateDesign, controlStates, styleColorOptions);
</del><ins>+    auto backgroundColor = checkboxRadioBackgroundColor(useAlternateDesign, box.style(), controlStates, styleColorOptions);
</ins><span class="cx"> 
</span><span class="cx">     bool checked = controlStates.contains(ControlStates::States::Checked);
</span><span class="cx">     bool indeterminate = controlStates.contains(ControlStates::States::Indeterminate);
</span><span class="lines">@@ -2354,7 +2363,7 @@
</span><span class="cx">     auto controlStates = extractControlStatesForRenderer(box);
</span><span class="cx">     auto styleColorOptions = box.styleColorOptions();
</span><span class="cx"> 
</span><del>-    auto backgroundColor = checkboxRadioBackgroundColor(useAlternateDesign, controlStates, styleColorOptions);
</del><ins>+    auto backgroundColor = checkboxRadioBackgroundColor(useAlternateDesign, box.style(), controlStates, styleColorOptions);
</ins><span class="cx"> 
</span><span class="cx">     FloatRoundedRect radioRect { rect, FloatRoundedRect::Radii(rect.width() / 2, rect.height() / 2) };
</span><span class="cx"> 
</span><span class="lines">@@ -2476,7 +2485,7 @@
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     FloatRect barRect(barLeft, barTop, barWidth, barHeight);
</span><del>-    context.fillRoundedRect(FloatRoundedRect(barRect, barCornerRadii), systemColor(CSSValueAppleSystemBlue, styleColorOptions).colorWithAlphaMultipliedBy(alpha));
</del><ins>+    context.fillRoundedRect(FloatRoundedRect(barRect, barCornerRadii), controlTintColor(renderer.style(), styleColorOptions).colorWithAlphaMultipliedBy(alpha));
</ins><span class="cx"> 
</span><span class="cx">     return false;
</span><span class="cx"> }
</span><span class="lines">@@ -2574,7 +2583,7 @@
</span><span class="cx">     transform.scale(scale);
</span><span class="cx">     path.transform(transform);
</span><span class="cx"> 
</span><del>-    context.setFillColor(systemColor(CSSValueAppleSystemBlue, box.styleColorOptions()));
</del><ins>+    context.setFillColor(controlTintColor(style, box.styleColorOptions()));
</ins><span class="cx">     context.fillPath(path);
</span><span class="cx"> 
</span><span class="cx">     return false;
</span><span class="lines">@@ -2638,7 +2647,7 @@
</span><span class="cx">                 tickRect.setY(rect.y() + tickRatio * (rect.height() - tickRect.height()));
</span><span class="cx"> 
</span><span class="cx">             FloatRoundedRect roundedTickRect(snapRectToDevicePixels(LayoutRect(tickRect), deviceScaleFactor), tickCornerRadii);
</span><del>-            context.fillRoundedRect(roundedTickRect, systemColor((value >= *optionValue) ? CSSValueAppleSystemBlue : CSSValueAppleSystemOpaqueSeparator, styleColorOptions));
</del><ins>+            context.fillRoundedRect(roundedTickRect, (value >= *optionValue) ? controlTintColor(box.style(), styleColorOptions) : systemColor(CSSValueAppleSystemOpaqueSeparator, styleColorOptions));
</ins><span class="cx">         }
</span><span class="cx">     }
</span><span class="cx"> }
</span><span class="lines">@@ -2714,7 +2723,7 @@
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     FloatRoundedRect fillRect(trackClip, cornerRadii);
</span><del>-    context.fillRoundedRect(fillRect, systemColor(CSSValueAppleSystemBlue, styleColorOptions));
</del><ins>+    context.fillRoundedRect(fillRect, controlTintColor(box.style(), styleColorOptions));
</ins><span class="cx"> 
</span><span class="cx">     return false;
</span><span class="cx"> }
</span></span></pre>
</div>
</div>

</body>
</html>