Attachment 349964 Details for Bug 189640 – Patch

[patch] Patch

bug-189640-20180917160339.patch (text/plain), 19.33 KB, created by Megan Gardner on 2018-09-17 16:03:40 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Megan Gardner

Created: 2018-09-17 16:03:40 PDT

Size: 19.33 KB

patch

obsolete

>Subversion Revision: 236028
>diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
>index c0a979bedbc07218cd428bbc4af0d4a90b549a19..b95a4078e52940703d9438d0a71b58262a6b7522 100644
>--- a/Source/WebCore/ChangeLog
>+++ b/Source/WebCore/ChangeLog
>@@ -1,3 +1,23 @@
>+2018-09-14  Megan Gardner  <megan_gardner@apple.com>
>+
>+        Support two color hints per color stop for all gradients
>+        https://bugs.webkit.org/show_bug.cgi?id=189640
>+        <rdar://problem/44158152>
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        The CSS spec for conic gradients allows for each color stop to have two angles to be used for hints.
>+        This makes pie chart and checkerboard gradients much simpler to write.
>+
>+        Test: fast/gradients/conic-two-hints.html
>+        Test: fast/gradients/linear-two-hints-angle.html
>+        Test: fast/gradients/linear-two-hints.html
>+        Test: fast/gradients/radial-two-hints.html
>+
>+        * css/parser/CSSPropertyParserHelpers.cpp:
>+        (WebCore::CSSPropertyParserHelpers::consumeAngularGradientColorStops): Removed.
>+        (WebCore::CSSPropertyParserHelpers::consumeGradientColorStops):
>+
> 2018-09-14  Justin Fan  <justin_fan@apple.com>
> 
>         WebGL 2 conformance: rgb-format-support.html
>diff --git a/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp b/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp
>index 98ffc21b5d5657e727ebfb1d586a8102cf47f2f6..29d52b8df6dd0b43d656c8fd06560ca58c7ebd1d 100644
>--- a/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp
>+++ b/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp
>@@ -963,7 +963,9 @@ static RefPtr<CSSValue> consumeDeprecatedGradient(CSSParserTokenRange& args, CSS
> 
> static bool consumeGradientColorStops(CSSParserTokenRange& range, CSSParserMode cssParserMode, CSSGradientValue& gradient)
> {
>-    bool supportsColorHints = gradient.gradientType() == CSSLinearGradient || gradient.gradientType() == CSSRadialGradient;
>+    bool supportsColorHints = gradient.gradientType() == CSSLinearGradient || gradient.gradientType() == CSSRadialGradient || gradient.gradientType() == CSSConicGradient;
>+    
>+    bool isAngularGradient = gradient.gradientType() == CSSConicGradient;
> 
>     // The first color stop cannot be a color hint.
>     bool previousStopWasColorHint = true;
>@@ -979,45 +981,27 @@ static bool consumeGradientColorStops(CSSParserTokenRange& range, CSSParserMode
>         // FIXME-NEWPARSER: This boolean could be removed. Null checking color would be sufficient.
>         stop.isMidpoint = !stop.m_color;
> 
>-        stop.m_position = consumeLengthOrPercent(range, cssParserMode, ValueRangeAll);
>+        if (isAngularGradient)
>+            stop.m_position = consumeAngleOrPercent(range, cssParserMode, ValueRangeAll, UnitlessQuirk::Forbid);
>+        else
>+            stop.m_position = consumeLengthOrPercent(range, cssParserMode, ValueRangeAll);
>+        
>         if (!stop.m_color && !stop.m_position)
>             return false;
>         gradient.addStop(stop);
>-    } while (consumeCommaIncludingWhitespace(range));
>-
>-    gradient.doneAddingStops();
>-
>-    // The last color stop cannot be a color hint.
>-    if (previousStopWasColorHint)
>-        return false;
>-
>-    // Must have 2 or more stops to be valid.
>-    return gradient.stopCount() >= 2;
>-}
>-
>-// https://www.w3.org/TR/css-images-4/#typedef-angular-color-stop-list
>-// FIXME: This should support up to two position hints per color stop.
>-static bool consumeAngularGradientColorStops(CSSParserTokenRange& range, CSSParserMode cssParserMode, CSSGradientValue& gradient)
>-{
>-    // The first color stop cannot be a color hint.
>-    bool previousStopWasColorHint = true;
>-    do {
>-        CSSGradientColorStop stop;
>-        stop.m_color = consumeColor(range, cssParserMode);
>-
>-        // Two hints in a row are not allowed.
>-        if (!stop.m_color && previousStopWasColorHint)
>-            return false;
>         
>-        previousStopWasColorHint = !stop.m_color;
>+        // See if there is a second color hint, which is optional.
>+        CSSGradientColorStop secondStop;
>+        if (isAngularGradient)
>+            secondStop.m_position = consumeAngleOrPercent(range, cssParserMode, ValueRangeAll, UnitlessQuirk::Forbid);
>+        else
>+            secondStop.m_position = consumeLengthOrPercent(range, cssParserMode, ValueRangeAll);
>+        
>+        if (secondStop.m_position) {
>+            secondStop.m_color = stop.m_color;
>+            gradient.addStop(secondStop);
>+        }
>         
>-        // FIXME-NEWPARSER: This boolean could be removed. Null checking color would be sufficient.
>-        stop.isMidpoint = !stop.m_color;
>-
>-        stop.m_position = consumeAngleOrPercent(range, cssParserMode, ValueRangeAll, UnitlessQuirk::Forbid);
>-        if (!stop.m_color && !stop.m_position)
>-            return false;
>-        gradient.addStop(stop);
>     } while (consumeCommaIncludingWhitespace(range));
> 
>     gradient.doneAddingStops();
>@@ -1228,7 +1212,7 @@ static RefPtr<CSSValue> consumeConicGradient(CSSParserTokenRange& args, CSSParse
> 
>     if (expectComma && !consumeCommaIncludingWhitespace(args))
>         return nullptr;
>-    if (!consumeAngularGradientColorStops(args, context.mode, *result))
>+    if (!consumeGradientColorStops(args, context.mode, *result))
>         return nullptr;
>     return result;
> }
>diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
>index 00680933dc25f1a43c7ddbe121b8598908307d85..e945128462952872a42f750bca6dd353748bd1dd 100644
>--- a/LayoutTests/ChangeLog
>+++ b/LayoutTests/ChangeLog
>@@ -1,3 +1,24 @@
>+2018-09-14  Megan Gardner  <megan_gardner@apple.com>
>+
>+        Support two color hints per color stop for all gradients
>+        https://bugs.webkit.org/show_bug.cgi?id=189640
>+
>+        Reviewed by NOBODY (OOPS!).
>+
>+        Test that uses two angles per color stop.
>+
>+        * TestExpectations:
>+        * fast/gradients/conic-two-hints-expected.html: Added.
>+        * fast/gradients/conic-two-hints.html: Added.
>+        * fast/gradients/linear-two-hints-angle-expected.html: Added.
>+        * fast/gradients/linear-two-hints-angle.html: Added.
>+        * fast/gradients/linear-two-hints-expected.html: Added.
>+        * fast/gradients/linear-two-hints.html: Added.
>+        * fast/gradients/radial-two-hints-expected.html: Added.
>+        * fast/gradients/radial-two-hints.html: Added.
>+        * platform/ios-12/TestExpectations:
>+        * platform/mac/TestExpectations:
>+
> 2018-09-14  Megan Gardner  <megan_gardner@apple.com>
> 
>         Additional tests for conic gradients
>diff --git a/LayoutTests/TestExpectations b/LayoutTests/TestExpectations
>index 07acdf01943d0dd9fe9e07e93fdf1437c80580c2..5786c1b366c2ab44027bf7b6efe10e28424e4d7f 100644
>--- a/LayoutTests/TestExpectations
>+++ b/LayoutTests/TestExpectations
>@@ -2246,5 +2246,6 @@ fast/gradients/conic-repeating-last-stop.html [ Skip ]
> fast/gradients/conic-gradient-alpha.html [ Skip ]
> fast/gradients/conic-gradient-extended-stops.html [ Skip ]
> fast/gradients/conic-gradient.html [ Skip ]
>+fast/gradients/conic-two-hints.html [ Skip ]
> 
> webkit.org/b/187773 http/tests/webAPIStatistics [ Skip ]
>diff --git a/LayoutTests/fast/gradients/conic-two-hints-expected.html b/LayoutTests/fast/gradients/conic-two-hints-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..7b71df1ae38616a31cbdfb04b732cc94400a8175
>--- /dev/null
>+++ b/LayoutTests/fast/gradients/conic-two-hints-expected.html
>@@ -0,0 +1,33 @@
>+<html>
>+<head>
>+    <style>
>+        div {
>+            float: left;
>+        }
>+
>+        #box1 {
>+            height: 50px;
>+            width: 25px;
>+            background-color: orange;
>+        }
>+        #box2 {
>+            height: 25px;
>+            width: 25px;
>+            background-color: blue;
>+        }
>+        #box3 {
>+            height: 25px;
>+            width: 25px;
>+            clear: left;
>+            background-color: green;
>+        }
>+    </style>
>+</head>
>+<body>
>+    <div id="box1"></div>
>+    <div id="container">
>+        <div id="box2"></div>
>+        <div id="box3"></div>
>+    </div>
>+</body>
>+</html>
>diff --git a/LayoutTests/fast/gradients/conic-two-hints.html b/LayoutTests/fast/gradients/conic-two-hints.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..43928120a6f859e5a3410554fe0a3370bf035f98
>--- /dev/null
>+++ b/LayoutTests/fast/gradients/conic-two-hints.html
>@@ -0,0 +1,14 @@
>+<html>
>+<head>
>+    <style>
>+        #grad {
>+            height: 50px;
>+            width: 50px;
>+            background: conic-gradient(blue 0deg 90deg, green 90deg 180deg, orange 180deg 360deg);
>+        }
>+    </style>
>+</head>
>+<body>
>+    <div id="grad"></div>
>+</body>
>+</html>
>diff --git a/LayoutTests/fast/gradients/linear-two-hints-angle-expected.html b/LayoutTests/fast/gradients/linear-two-hints-angle-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..c9ad2ec21bbdb0a1f992da13cc279fb0efdfbc0f
>--- /dev/null
>+++ b/LayoutTests/fast/gradients/linear-two-hints-angle-expected.html
>@@ -0,0 +1,115 @@
>+<html>
>+<head>
>+    <style>
>+        div {
>+            width: 200px;
>+            height: 200px;
>+            float: left;
>+        }
>+
>+        #topleft {
>+            width: 0; 
>+            height: 0; 
>+            border-left: 50px solid green;
>+            border-right: 50px solid orange;
>+            border-top: 50px solid orange;
>+        }
>+        #topright {
>+            width: 0; 
>+            height: 0; 
>+            border-left: 50px solid orange;
>+            border-right: 50px solid lime;
>+            border-top: 50px solid lime;
>+        }
>+        #topmiddleleft {
>+            width: 0; 
>+            height: 0; 
>+            clear: left;
>+            border-left: 50px solid green;
>+            border-right: 50px solid orange;
>+            border-bottom: 50px solid green;
>+        }
>+        #topmiddleright {
>+            width: 0; 
>+            height: 0; 
>+            border-left: 50px solid orange;
>+            border-right: 50px solid lime;
>+            border-bottom: 50px solid orange;
>+        }
>+
>+        #bottommiddleleft {
>+            width: 0; 
>+            height: 0; 
>+            clear: left;
>+            border-left: 50px solid blue;
>+            border-right: 50px solid green;
>+            border-top: 50px solid green;
>+        }
>+        #bottommiddleright {
>+            width: 0; 
>+            height: 0; 
>+            border-left: 50px solid green;
>+            border-right: 50px solid orange;
>+            border-top: 50px solid orange;
>+        }
>+        #bottomleft {
>+            width: 0; 
>+            height: 0; 
>+            clear: left;
>+            border-left: 50px solid blue;
>+            border-right: 50px solid green;
>+            border-bottom: 50px solid blue;
>+        }
>+        #bottomright {
>+            width: 0; 
>+            height: 0; 
>+            border-left: 50px solid green;
>+            border-right: 50px solid orange;
>+            border-bottom: 50px solid green;
>+        }
>+
>+        .box {
>+            position: absolute;
>+        }
>+        .x1 {
>+            position: absolute;
>+            -webkit-clip-path: polygon(0% 45%,55% 100%,45% 100%,0% 55%);
>+        }
>+        #x1 {
>+            background-color:black;
>+        }
>+        .x2 {
>+            position: absolute;
>+            -webkit-clip-path: polygon(0% 0%, 5% 0%, 100% 95%, 100% 100%, 95% 100%,0% 5%);
>+        }
>+        #x2 {
>+            background-color:black;
>+        }
>+        .x3 {
>+            position: absolute;
>+            -webkit-clip-path: polygon(55% 0%, 100% 45%, 100% 55%,45% 0%);
>+        }
>+        #x3 {
>+            background-color:black;
>+        }
>+
>+    </style>
>+</head>
>+<body>
>+    <div>
>+        <div class="box">
>+            <div id="topleft"></div>
>+            <div id="topright"></div>
>+            <div id="topmiddleleft"></div>
>+            <div id="topmiddleright"></div>
>+            <div id="bottommiddleleft"></div>
>+            <div id="bottommiddleright"></div>
>+            <div id="bottomleft"></div>
>+            <div id="bottomright"></div>
>+        </div>
>+        <div id="x1" class="x1"></div>
>+        <div id="x2" class="x2"></div>
>+        <div id="x3" class="x3"></div>
>+    </div>
>+</body>
>+</html>
>diff --git a/LayoutTests/fast/gradients/linear-two-hints-angle.html b/LayoutTests/fast/gradients/linear-two-hints-angle.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..5b946ef08c6858a0d90667f636357c26a7fe78a9
>--- /dev/null
>+++ b/LayoutTests/fast/gradients/linear-two-hints-angle.html
>@@ -0,0 +1,42 @@
>+<html>
>+<head>
>+    <style>
>+    	div {
>+            width: 200px;
>+            height: 200px;
>+        }
>+        #grad {
>+        	position: absolute;
>+            background: -webkit-linear-gradient(45deg, blue 0% 25%, green 25% 50%, orange 100px 75%, lime 150px);
>+        }
>+
>+        .x1 {
>+            position: absolute;
>+            -webkit-clip-path: polygon(0% 45%,55% 100%,45% 100%,0% 55%);
>+        }
>+        #x1 {
>+            background-color:black;
>+        }
>+        .x2 {
>+            position: absolute;
>+            -webkit-clip-path: polygon(0% 0%, 5% 0%, 100% 95%, 100% 100%, 95% 100%,0% 5%);
>+        }
>+        #x2 {
>+            background-color:black;
>+        }
>+        .x3 {
>+            position: absolute;
>+            -webkit-clip-path: polygon(55% 0%, 100% 45%, 100% 55%,45% 0%);
>+        }
>+        #x3 {
>+            background-color:black;
>+        }
>+    </style>
>+</head>
>+<body>
>+	<div id="grad"></div>
>+    <div id="x1" class="x1"></div>
>+    <div id="x2" class="x2"></div>
>+    <div id="x3" class="x3"></div>
>+</body>
>+</html>
>diff --git a/LayoutTests/fast/gradients/linear-two-hints-expected.html b/LayoutTests/fast/gradients/linear-two-hints-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..17237e00d70b67a2372c3b294e3da1f390b7f66b
>--- /dev/null
>+++ b/LayoutTests/fast/gradients/linear-two-hints-expected.html
>@@ -0,0 +1,29 @@
>+<html>
>+<head>
>+    <style>
>+        div {
>+            width: 200px;
>+            height: 50px;
>+        }
>+
>+        #box1 {
>+            background-color: blue;
>+        }
>+        #box2 {
>+            background-color: green;
>+        }
>+        #box3 {
>+            background-color: orange;
>+        }
>+        #box4 {
>+            background-color: lime;
>+        }
>+    </style>
>+</head>
>+<body>
>+    <div id="box1"></div>
>+    <div id="box2"></div>
>+    <div id="box3"></div>
>+    <div id="box4"></div>
>+</body>
>+</html>
>diff --git a/LayoutTests/fast/gradients/linear-two-hints.html b/LayoutTests/fast/gradients/linear-two-hints.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..856f4a6c00f35b1c711937ac3f8ca4b225a19d81
>--- /dev/null
>+++ b/LayoutTests/fast/gradients/linear-two-hints.html
>@@ -0,0 +1,14 @@
>+<html>
>+<head>
>+    <style>
>+        #grad {
>+        	width: 200px;
>+            height: 200px;
>+            background: -webkit-linear-gradient(blue 0% 25%, green 25% 50%, orange 100px 75%, lime 150px);
>+        }
>+    </style>
>+</head>
>+<body>
>+    <div id="grad"></div>
>+</body>
>+</html>
>diff --git a/LayoutTests/fast/gradients/radial-two-hints-expected.html b/LayoutTests/fast/gradients/radial-two-hints-expected.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..23c26881b059f0504712acb5e557581d719ce95c
>--- /dev/null
>+++ b/LayoutTests/fast/gradients/radial-two-hints-expected.html
>@@ -0,0 +1,66 @@
>+<html>
>+<head>
>+    <style>
>+        div {
>+            width: 200px;
>+            height: 200px;
>+        }
>+        #grad1 {
>+            background-color: orange;
>+            height: 33px;
>+            -webkit-clip-path: inset( 0% 40% 0% 40%);
>+        }
>+        #grad2 {
>+            background-color: green;
>+            height: 33px;
>+            -webkit-clip-path: inset( 0% 40% 0% 40%);
>+        }
>+        #grad3 {
>+            background-color: blue;
>+            height: 68px;
>+            -webkit-clip-path: inset( 0% 40% 0% 40%);
>+        }
>+        #grad4 {
>+            background-color: green;
>+            height: 33px;
>+            -webkit-clip-path: inset( 0% 40% 0% 40%);
>+        }
>+        #grad5 {
>+            background-color: orange;
>+            height: 33px;
>+            -webkit-clip-path: inset( 0% 40% 0% 40%);
>+        }
>+        .box {
>+            position: absolute;
>+            background-color:black;
>+        }
>+        #box1 {
>+            -webkit-clip-path: inset( 30% 40% 60% 40%);
>+        }
>+        #box2 {
>+            -webkit-clip-path: inset( 60% 40% 30% 40%);
>+        }
>+        #box3 {
>+            -webkit-clip-path: inset( 10% 40% 80% 40%);
>+        }
>+        #box4 {
>+            -webkit-clip-path: inset( 80% 40% 10% 40%);
>+        }
>+    </style>
>+</head>
>+<body>
>+    <div style="position: absolute">
>+        <div id="grad1"></div>
>+        <div id="grad2"></div>
>+        <div id="grad3"></div>
>+        <div id="grad4"></div>
>+        <div id="grad5"></div>
>+    </div>
>+    <div style="position: absolute">
>+        <div id="box1" class="box"></div>
>+        <div id="box2" class="box"></div>
>+        <div id="box3" class="box"></div>
>+        <div id="box4" class="box"></div>
>+    </div>
>+</body>
>+</html>
>diff --git a/LayoutTests/fast/gradients/radial-two-hints.html b/LayoutTests/fast/gradients/radial-two-hints.html
>new file mode 100644
>index 0000000000000000000000000000000000000000..5903c0e398179786cd86ef6a6705293524ad5f7b
>--- /dev/null
>+++ b/LayoutTests/fast/gradients/radial-two-hints.html
>@@ -0,0 +1,40 @@
>+<html>
>+<head>
>+    <style>
>+    	div {
>+    		position: absolute;
>+        	width: 200px;
>+            height: 200px;
>+    	}
>+        #grad {
>+            background: -webkit-radial-gradient(blue 0%, blue 25%, green 25% ,green 50%, orange 50%, orange 75%, lime 75%);
>+            -webkit-clip-path: inset(0% 40% 0% 40%);
>+        }
>+       	.box {
>+        	position: absolute;
>+        	background-color:black;
>+        }
>+        #box1 {
>+        	-webkit-clip-path: inset(30% 40% 60% 40%);
>+        }
>+        #box2 {
>+        	-webkit-clip-path: inset(60% 40% 30% 40%);
>+        }
>+        #box3 {
>+        	-webkit-clip-path: inset(10% 40% 80% 40%);
>+        }
>+        #box4 {
>+        	-webkit-clip-path: inset(80% 40% 10% 40%);
>+        }
>+    </style>
>+</head>
>+<body>
>+	<div>
>+	    <div id="grad"></div>
>+	    <div id="box1" class="box"></div>
>+	    <div id="box2" class="box"></div>
>+	    <div id="box3" class="box"></div>
>+	    <div id="box4" class="box"></div>
>+	</div>
>+</body>
>+</html>
>diff --git a/LayoutTests/platform/ios-12/TestExpectations b/LayoutTests/platform/ios-12/TestExpectations
>index 05511e5f2acf036f17c8041d982ce0762b2358f9..05f74a80b0451d103c8d9c13e132bac51fd64be5 100644
>--- a/LayoutTests/platform/ios-12/TestExpectations
>+++ b/LayoutTests/platform/ios-12/TestExpectations
>@@ -37,4 +37,4 @@ fast/gradients/conic-repeating-last-stop.html [ Pass ]
> fast/gradients/conic-gradient-alpha.html [ Pass ]
> fast/gradients/conic-gradient-extended-stops.html [ Pass ]
> fast/gradients/conic-gradient.html [ Pass ]
>-
>+fast/gradients/conic-two-hints.html [ Pass ]
>diff --git a/LayoutTests/platform/mac/TestExpectations b/LayoutTests/platform/mac/TestExpectations
>index 88f1ec8c91048e5cf121c2db8646f161e937d5f0..4722cdb46095eb14aa29aa49aab7bc2c92161ba9 100644
>--- a/LayoutTests/platform/mac/TestExpectations
>+++ b/LayoutTests/platform/mac/TestExpectations
>@@ -1767,5 +1767,6 @@ webkit.org/b/187393 imported/w3c/web-platform-tests/2dcontext/imagebitmap/create
> [ Mojave+ ] fast/gradients/conic-gradient-alpha.html [ Pass ]
> [ Mojave+ ] fast/gradients/conic-gradient-extended-stops.html [ Pass ]
> [ Mojave+ ] fast/gradients/conic-gradient.html [ Pass ]
>+[ Mojave+ ] fast/gradients/conic-two-hints.html [ Pass ]
> 
>

Flags:

simon.fraser: review+

Actions: View | Formatted Diff | Diff

Attachments on bug 189640: 349835 | 349841 | 349964