Title: [234609] trunk
Revision
234609
Author
commit-qu...@webkit.org
Date
2018-08-06 11:06:25 -0700 (Mon, 06 Aug 2018)

Log Message

[iOS] Indeterminate checkboxes appear unchecked
https://bugs.webkit.org/show_bug.cgi?id=160484
<rdar://problem/31143185>

Patch by Aditya Keerthi <akeer...@apple.com> on 2018-08-06
Reviewed by Wenson Hsieh.

Source/WebCore:

Add support for rendering indeterminate checkboxes on iOS.

We now paint the unchecked appearance only if the checkbox is not checked and is
not indeterminate. Otherwise, we draw a checkmark if the checkbox is in the
checked state and a dash if the checkbox is in the indeterminate state. Both of
these states share the same dark background.

Test: fast/forms/ios/render-indeterminate-checkbox.html

* css/html.css:
(input[type="checkbox"]:indeterminate):
(input[type="checkbox"]:indeterminate:disabled):
* rendering/RenderThemeIOS.mm:
(WebCore::drawJoinedLines):
(WebCore::RenderThemeIOS::paintCheckboxDecorations):

LayoutTests:

Added reftest to ensure that the indeterminate checkbox does not appear the same
as an unchecked checkbox.

* fast/forms/ios/render-indeterminate-checkbox-expected-mismatch.html: Added.
* fast/forms/ios/render-indeterminate-checkbox.html: Added.
* platform/ios/fast/forms/indeterminate-expected.txt: Rebaseline.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (234608 => 234609)


--- trunk/LayoutTests/ChangeLog	2018-08-06 17:45:41 UTC (rev 234608)
+++ trunk/LayoutTests/ChangeLog	2018-08-06 18:06:25 UTC (rev 234609)
@@ -1,3 +1,18 @@
+2018-08-06  Aditya Keerthi  <akeer...@apple.com>
+
+        [iOS] Indeterminate checkboxes appear unchecked
+        https://bugs.webkit.org/show_bug.cgi?id=160484
+        <rdar://problem/31143185>
+
+        Reviewed by Wenson Hsieh.
+
+        Added reftest to ensure that the indeterminate checkbox does not appear the same
+        as an unchecked checkbox.  
+
+        * fast/forms/ios/render-indeterminate-checkbox-expected-mismatch.html: Added.
+        * fast/forms/ios/render-indeterminate-checkbox.html: Added.
+        * platform/ios/fast/forms/indeterminate-expected.txt: Rebaseline.
+
 2018-08-06  Truitt Savell  <tsav...@apple.com>
 
         storage/indexeddb/modern/opendatabase-after-storage-crash.html is causing tests in directory svg/ to timeout at random

Added: trunk/LayoutTests/fast/forms/ios/render-indeterminate-checkbox-expected-mismatch.html (0 => 234609)


--- trunk/LayoutTests/fast/forms/ios/render-indeterminate-checkbox-expected-mismatch.html	                        (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/render-indeterminate-checkbox-expected-mismatch.html	2018-08-06 18:06:25 UTC (rev 234609)
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<body>
+    <input type=checkbox>
+    <div>Test passes if indeterminate checkbox appears different from unchecked checkbox.</div>
+</body>
+<script>
+document.querySelector("input").indeterminate = true;
+</script>
+</html>

Added: trunk/LayoutTests/fast/forms/ios/render-indeterminate-checkbox.html (0 => 234609)


--- trunk/LayoutTests/fast/forms/ios/render-indeterminate-checkbox.html	                        (rev 0)
+++ trunk/LayoutTests/fast/forms/ios/render-indeterminate-checkbox.html	2018-08-06 18:06:25 UTC (rev 234609)
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<body>
+    <input type=checkbox>
+    <div>Test passes if indeterminate checkbox appears different from unchecked checkbox.</div>
+</body>
+</html>

Modified: trunk/LayoutTests/platform/ios/fast/forms/indeterminate-expected.txt (234608 => 234609)


--- trunk/LayoutTests/platform/ios/fast/forms/indeterminate-expected.txt	2018-08-06 17:45:41 UTC (rev 234608)
+++ trunk/LayoutTests/platform/ios/fast/forms/indeterminate-expected.txt	2018-08-06 18:06:25 UTC (rev 234609)
@@ -7,4 +7,4 @@
         text run at (20,2) width 500: " This checkbox should look 50% transparent and should be in the mixed state."
       RenderText {#text} at (0,0) size 0x0
 layer at (10,11) size 16x16
-  RenderBlock {INPUT} at (2,3) size 16x16 [bgcolor=#FFFFFF02] [border: (1px solid #4C4C4C)]
+  RenderBlock {INPUT} at (2,3) size 16x16 [bgcolor=#000000CC] [border: (1px solid #4C4C4C)]

Modified: trunk/Source/WebCore/ChangeLog (234608 => 234609)


--- trunk/Source/WebCore/ChangeLog	2018-08-06 17:45:41 UTC (rev 234608)
+++ trunk/Source/WebCore/ChangeLog	2018-08-06 18:06:25 UTC (rev 234609)
@@ -1,3 +1,27 @@
+2018-08-06  Aditya Keerthi  <akeer...@apple.com>
+
+        [iOS] Indeterminate checkboxes appear unchecked
+        https://bugs.webkit.org/show_bug.cgi?id=160484
+        <rdar://problem/31143185>
+
+        Reviewed by Wenson Hsieh.
+
+        Add support for rendering indeterminate checkboxes on iOS.
+
+        We now paint the unchecked appearance only if the checkbox is not checked and is
+        not indeterminate. Otherwise, we draw a checkmark if the checkbox is in the
+        checked state and a dash if the checkbox is in the indeterminate state. Both of
+        these states share the same dark background.
+
+        Test: fast/forms/ios/render-indeterminate-checkbox.html
+
+        * css/html.css:
+        (input[type="checkbox"]:indeterminate):
+        (input[type="checkbox"]:indeterminate:disabled):
+        * rendering/RenderThemeIOS.mm:
+        (WebCore::drawJoinedLines):
+        (WebCore::RenderThemeIOS::paintCheckboxDecorations):
+
 2018-08-06  Ryosuke Niwa  <rn...@webkit.org>
 
         HTML parser should execute custom element reactions for setting attributes immediately after creating a custom element

Modified: trunk/Source/WebCore/css/html.css (234608 => 234609)


--- trunk/Source/WebCore/css/html.css	2018-08-06 17:45:41 UTC (rev 234608)
+++ trunk/Source/WebCore/css/html.css	2018-08-06 18:06:25 UTC (rev 234609)
@@ -836,6 +836,15 @@
     background-color: rgba(255, 255, 255, 0.01);
 }
 
+input[type="checkbox"]:indeterminate {
+    background: rgba(0, 0, 0, 0.8);
+}
+
+input[type="checkbox"]:indeterminate:disabled {
+    opacity: 0.4;
+    background: rgba(0, 0, 0, 0.8);
+}
+
 input:matches([type="checkbox"], [type="radio"]):checked {
     background: rgba(0, 0, 0, 0.8);
     border-color: rgba(255, 255, 255, 0.0);

Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.mm (234608 => 234609)


--- trunk/Source/WebCore/rendering/RenderThemeIOS.mm	2018-08-06 17:45:41 UTC (rev 234608)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.mm	2018-08-06 18:06:25 UTC (rev 234609)
@@ -371,14 +371,16 @@
     return CGPointMake(start.x + x * ratio, start.y + y * ratio);
 }
 
-static void drawJoinedLines(CGContextRef context, CGPoint points[], unsigned count, bool antialias, CGLineCap lineCap)
+static void drawJoinedLines(CGContextRef context, const Vector<CGPoint>& points, CGLineCap lineCap, float lineWidth, Color strokeColor)
 {
-    CGContextSetShouldAntialias(context, antialias);
+    CGContextSetLineWidth(context, lineWidth);
+    CGContextSetStrokeColorWithColor(context, cachedCGColor(strokeColor));
+    CGContextSetShouldAntialias(context, true);
     CGContextBeginPath(context);
     CGContextSetLineCap(context, lineCap);
     CGContextMoveToPoint(context, points[0].x, points[0].y);
     
-    for (unsigned i = 1; i < count; ++i)
+    for (unsigned i = 1; i < points.size(); ++i)
         CGContextAddLineToPoint(context, points[i].x, points[i].y);
 
     CGContextStrokePath(context);
@@ -392,12 +394,27 @@
     float width = clip.width();
     float height = clip.height();
 
+    bool checked = isChecked(box);
+    bool indeterminate = isIndeterminate(box);
+
     CGContextRef cgContext = paintInfo.context().platformContext();
-    if (isChecked(box)) {
-        drawAxialGradient(cgContext, gradientWithName(ConcaveGradient), clip.location(), FloatPoint(clip.x(), clip.maxY()), LinearInterpolation);
+    if (!checked && !indeterminate) {
+        FloatPoint bottomCenter(clip.x() + clip.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);
+        return false;
+    }
 
-        static const float thicknessRatio = 2 / 14.0;
-        static const CGSize size = { 14.0f, 14.0f };
+    drawAxialGradient(cgContext, gradientWithName(ConcaveGradient), clip.location(), FloatPoint(clip.x(), clip.maxY()), LinearInterpolation);
+
+    static const float thicknessRatio = 2 / 14.0;
+    static const CGSize size = { 14.0f, 14.0f };
+    float lineWidth = std::min(width, height) * 2.0f * thicknessRatio;
+
+    Vector<CGPoint> line;
+    Vector<CGPoint> shadow;
+
+    if (checked) {
         static const CGPoint pathRatios[3] = {
             { 2.5f / size.width, 7.5f / size.height },
             { 5.5f / size.width, 10.5f / size.height },
@@ -404,34 +421,35 @@
             { 11.5f / size.width, 2.5f / size.height }
         };
 
-        float lineWidth = std::min(width, height) * 2.0f * thicknessRatio;
-
-        CGPoint line[3] = {
+        line = {
             CGPointMake(clip.x() + width * pathRatios[0].x, clip.y() + height * pathRatios[0].y),
             CGPointMake(clip.x() + width * pathRatios[1].x, clip.y() + height * pathRatios[1].y),
             CGPointMake(clip.x() + width * pathRatios[2].x, clip.y() + height * pathRatios[2].y)
         };
-        CGPoint shadow[3] = {
+
+        shadow = {
             shortened(line[0], line[1], lineWidth / 4.0f),
             line[1],
             shortened(line[2], line[1], lineWidth / 4.0f)
         };
+    } else if (indeterminate) {
+        line = {
+            CGPointMake(clip.x() + 3.5, clip.center().y()),
+            CGPointMake(clip.maxX() - 3.5, clip.center().y())
+        };
 
-        lineWidth = std::max<float>(lineWidth, 1);
-        CGContextSetLineWidth(cgContext, lineWidth);
-        CGContextSetStrokeColorWithColor(cgContext, cachedCGColor(Color(0.0f, 0.0f, 0.0f, 0.7f)));
-        drawJoinedLines(cgContext, shadow, 3, true, kCGLineCapSquare);
-
-        lineWidth = std::max<float>(std::min(clip.width(), clip.height()) * thicknessRatio, 1);
-        CGContextSetLineWidth(cgContext, lineWidth);
-        CGContextSetStrokeColorWithColor(cgContext, cachedCGColor(Color(1.0f, 1.0f, 1.0f, 240 / 255.0f)));
-        drawJoinedLines(cgContext, line, 3, true, kCGLineCapButt);
-    } else {
-        FloatPoint bottomCenter(clip.x() + clip.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);
+        shadow = {
+            shortened(line[0], line[1], lineWidth / 4.0f),
+            shortened(line[1], line[0], lineWidth / 4.0f)
+        };
     }
 
+    lineWidth = std::max<float>(lineWidth, 1);
+    drawJoinedLines(cgContext, shadow, kCGLineCapSquare, lineWidth, Color(0.0f, 0.0f, 0.0f, 0.7f));
+
+    lineWidth = std::max<float>(std::min(clip.width(), clip.height()) * thicknessRatio, 1);
+    drawJoinedLines(cgContext, line, kCGLineCapButt, lineWidth, Color(1.0f, 1.0f, 1.0f, 240 / 255.0f));
+
     return false;
 }
 
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to