Additional tests for conic gradients
authormegan_gardner@apple.com <megan_gardner@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 15 Sep 2018 00:33:58 +0000 (00:33 +0000)
committermegan_gardner@apple.com <megan_gardner@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 15 Sep 2018 00:33:58 +0000 (00:33 +0000)
https://bugs.webkit.org/show_bug.cgi?id=189566

Reviewed by Simon Fraser.

Adding tests that actually test the gradient nature of gradients.
This is done by using an svg filter to consolidate the sections
of the gradient to sections we can actuall test the color of. Also,
the seams are clipped out, to reduce noise. Since gradients are
highly noise prone, this is the best way to check and make sure
that gradients are functional without sevear noise issues.

* TestExpectations:
* fast/gradients/conic-gradient-alpha-expected.html: Added.
* fast/gradients/conic-gradient-alpha.html: Added.
* fast/gradients/conic-gradient-expected.html: Added.
* fast/gradients/conic-gradient-extended-stops-expected.html: Added.
* fast/gradients/conic-gradient-extended-stops.html: Added.
* fast/gradients/conic-gradient.html: Added.
* platform/ios-12/TestExpectations:
* platform/mac/TestExpectations:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@236027 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/TestExpectations
LayoutTests/fast/gradients/conic-gradient-alpha-expected.html [new file with mode: 0644]
LayoutTests/fast/gradients/conic-gradient-alpha.html [new file with mode: 0644]
LayoutTests/fast/gradients/conic-gradient-expected.html [new file with mode: 0644]
LayoutTests/fast/gradients/conic-gradient-extended-stops-expected.html [new file with mode: 0644]
LayoutTests/fast/gradients/conic-gradient-extended-stops.html [new file with mode: 0644]
LayoutTests/fast/gradients/conic-gradient.html [new file with mode: 0644]
LayoutTests/platform/ios-12/TestExpectations
LayoutTests/platform/mac/TestExpectations

index 320d7f1..0068093 100644 (file)
@@ -1,3 +1,27 @@
+2018-09-14  Megan Gardner  <megan_gardner@apple.com>
+
+        Additional tests for conic gradients
+        https://bugs.webkit.org/show_bug.cgi?id=189566
+
+        Reviewed by Simon Fraser.
+
+        Adding tests that actually test the gradient nature of gradients.
+        This is done by using an svg filter to consolidate the sections
+        of the gradient to sections we can actuall test the color of. Also,
+        the seams are clipped out, to reduce noise. Since gradients are 
+        highly noise prone, this is the best way to check and make sure
+        that gradients are functional without sevear noise issues.
+
+        * TestExpectations:
+        * fast/gradients/conic-gradient-alpha-expected.html: Added.
+        * fast/gradients/conic-gradient-alpha.html: Added.
+        * fast/gradients/conic-gradient-expected.html: Added.
+        * fast/gradients/conic-gradient-extended-stops-expected.html: Added.
+        * fast/gradients/conic-gradient-extended-stops.html: Added.
+        * fast/gradients/conic-gradient.html: Added.
+        * platform/ios-12/TestExpectations:
+        * platform/mac/TestExpectations:
+
 2018-09-14  Justin Fan  <justin_fan@apple.com>
 
         WebGL 2 conformance: rgb-format-support.html
index efcb4d0..07acdf0 100644 (file)
@@ -2243,5 +2243,8 @@ fast/gradients/conic-center-outside-box.html [ Skip ]
 fast/gradients/conic-extended-stops.html [ Skip ]
 fast/gradients/conic-from-angle.html [ Skip ]
 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 ]
 
 webkit.org/b/187773 http/tests/webAPIStatistics [ Skip ]
diff --git a/LayoutTests/fast/gradients/conic-gradient-alpha-expected.html b/LayoutTests/fast/gradients/conic-gradient-alpha-expected.html
new file mode 100644 (file)
index 0000000..53aef34
--- /dev/null
@@ -0,0 +1,67 @@
+<html>
+<head>
+    <style>
+        div {
+            width: 200px;
+            height: 200px;
+            float: left;
+        }
+        /*tweak this until it's actually right... */
+        #topleft {
+            width: 0; 
+            height: 0; 
+            border-left: 100px solid rgb(64,87,64);
+            border-top: 100px solid rgb(32,32,32);
+        }
+        #topright {
+            width: 0; 
+            height: 0; 
+            border-right: 100px solid rgb(225,246,225);
+            border-top: 100px solid rgb(254,254,254);
+        }
+        #bottomleft {
+            clear: left;
+            width: 0; 
+            height: 0; 
+            border-left: 100px solid rgb(96,135,96);
+            border-bottom: 100px solid rgb(128,175,128);
+        }
+        #bottomright {
+            width: 0; 
+            height: 0; 
+            border-right: 100px solid rgb(193,231,193);
+            border-bottom: 100px solid rgb(160,207,160);
+        }
+        .box {
+            position: absolute;
+        }
+        .x {
+            position: absolute;
+            -webkit-clip-path: polygon(0% 0%, 0% 8%, 42% 50%, 0% 92%, 0% 100%, 8% 100%, 50% 58%, 92% 100%, 100% 100%, 100% 92%, 58% 50%, 100% 8%, 100% 0%, 92% 0%, 50% 42%, 8% 0%);
+        }
+        #x {
+            background-color:white;
+        }
+        .plus {
+            position: absolute;
+            -webkit-clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
+        }
+        #plus {
+            background-color:white;
+        }
+        
+    </style>
+</head>
+<body>
+    <div>
+        <div class="box">
+            <div id="topleft"></div>
+            <div id="topright"></div>
+            <div id="bottomleft"></div>
+            <div id="bottomright"></div>
+        </div>
+        <div id="x" class="x"></div>
+        <div id="plus" class="plus"></div>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/gradients/conic-gradient-alpha.html b/LayoutTests/fast/gradients/conic-gradient-alpha.html
new file mode 100644 (file)
index 0000000..ff9a163
--- /dev/null
@@ -0,0 +1,56 @@
+<html>
+<head>
+<style>
+    svg {
+        width: 800px;
+        display: none;
+    }
+    div {
+        width: 200px;
+        height: 200px;
+    }
+    #gradient {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        background-image: conic-gradient(rgba(0,255,0,0), black);
+        filter: url(#posterize);
+    }
+
+    .x {
+        position: absolute;
+        -webkit-clip-path: polygon(0% 0%, 0% 8%, 42% 50%, 0% 92%, 0% 100%, 8% 100%, 50% 58%, 92% 100%, 100% 100%, 100% 92%, 58% 50%, 100% 8%, 100% 0%, 92% 0%, 50% 42%, 8% 0%);
+    }
+    #x {
+        background-color:white;
+    }
+    .plus {
+        position: absolute;
+        -webkit-clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
+    }
+    #plus {
+        background-color:white;
+    }
+</style>
+</head>
+
+<body>
+<svg viewBox="0 0 700 100">
+<defs>
+    <filter id="posterize" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
+        <feComponentTransfer>
+            <feFuncR type="discrete" tableValues="0 0.125 0.25 0.375 0.5 0.625 0.75 0.875"/>
+            <feFuncG type="discrete" tableValues="0 0.125 0.25 0.375 0.5 0.625 0.75 0.875"/>
+            <feFuncB type="discrete" tableValues="0 0.125 0.25 0.375 0.5 0.625 0.75 0.875"/>
+            <feFuncA type="discrete" tableValues="0 0.125 0.25 0.375 0.5 0.625 0.75 0.875"/>
+        </feComponentTransfer>
+    </filter>
+</defs>
+</svg>
+
+<div>
+    <div id="gradient"></div>
+    <div id="x" class="x"></div>
+    <div id="plus" class="plus"></div>
+</div>
+</html>
diff --git a/LayoutTests/fast/gradients/conic-gradient-expected.html b/LayoutTests/fast/gradients/conic-gradient-expected.html
new file mode 100644 (file)
index 0000000..322e169
--- /dev/null
@@ -0,0 +1,66 @@
+<html>
+<head>
+    <style>
+        div {
+            width: 200px;
+            height: 200px;
+            float: left;
+        }
+        #topleft {
+            width: 0; 
+            height: 0; 
+            border-left: 100px solid rgb(0,32,0);
+            border-top: 100px solid rgb(0,0,0);
+        }
+        #topright {
+            width: 0; 
+            height: 0; 
+            border-right: 100px solid rgb(0,192,0);
+            border-top: 100px solid rgb(0,224,0);
+        }
+        #bottomleft {
+            clear: left;
+            width: 0; 
+            height: 0; 
+            border-left: 100px solid rgb(0,64,0);
+            border-bottom: 100px solid rgb(0,96,0);
+        }
+        #bottomright {
+            width: 0; 
+            height: 0; 
+            border-right: 100px solid rgb(0,160,0);
+            border-bottom: 100px solid rgb(0,128,0);
+        }
+        .box {
+            position: absolute;
+        }
+        .x {
+            position: absolute;
+            -webkit-clip-path: polygon(0% 0%, 0% 5%, 45% 50%, 0% 95%, 0% 100%, 5% 100%, 50% 55%, 95% 100%, 100% 100%, 100% 95%, 55% 50%, 100% 5%, 100% 0%, 95% 0%, 50% 45%, 5% 0%);
+        }
+        #x {
+            background-color:black;
+        }
+        .plus {
+            position: absolute;
+            -webkit-clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
+        }
+        #plus {
+            background-color:black;
+        }
+        
+    </style>
+</head>
+<body>
+    <div>
+        <div class="box">
+            <div id="topleft"></div>
+            <div id="topright"></div>
+            <div id="bottomleft"></div>
+            <div id="bottomright"></div>
+        </div>
+        <div id="x" class="x"></div>
+        <div id="plus" class="plus"></div>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/gradients/conic-gradient-extended-stops-expected.html b/LayoutTests/fast/gradients/conic-gradient-extended-stops-expected.html
new file mode 100644 (file)
index 0000000..f9260b4
--- /dev/null
@@ -0,0 +1,66 @@
+<html>
+<head>
+    <style>
+        div {
+            width: 200px;
+            height: 200px;
+            float: left;
+        }
+        #topleft {
+            width: 0; 
+            height: 0; 
+            border-left: 100px solid rgb(0,80,0);
+            border-top: 100px solid rgb(0,64,0);
+        }
+        #topright {
+            width: 0; 
+            height: 0; 
+            border-right: 100px solid rgb(0,160,0);
+            border-top: 100px solid rgb(0,176,0);
+        }
+        #bottomleft {
+            clear: left;
+            width: 0; 
+            height: 0; 
+            border-left: 100px solid rgb(0,96,0);
+            border-bottom: 100px solid rgb(0,112,0);
+        }
+        #bottomright {
+            width: 0; 
+            height: 0; 
+            border-right: 100px solid rgb(0,144,0);
+            border-bottom: 100px solid rgb(0,128,0);
+        }
+        .box {
+            position: absolute;
+        }
+        .x {
+            position: absolute;
+            -webkit-clip-path: polygon(0% 0%, 0% 5%, 45% 50%, 0% 95%, 0% 100%, 5% 100%, 50% 55%, 95% 100%, 100% 100%, 100% 95%, 55% 50%, 100% 5%, 100% 0%, 95% 0%, 50% 45%, 5% 0%);
+        }
+        #x {
+            background-color:black;
+        }
+        .plus {
+            position: absolute;
+            -webkit-clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
+        }
+        #plus {
+            background-color:black;
+        }
+        
+    </style>
+</head>
+<body>
+    <div>
+        <div class="box">
+            <div id="topleft"></div>
+            <div id="topright"></div>
+            <div id="bottomleft"></div>
+            <div id="bottomright"></div>
+        </div>
+        <div id="x" class="x"></div>
+        <div id="plus" class="plus"></div>
+    </div>
+</body>
+</html>
diff --git a/LayoutTests/fast/gradients/conic-gradient-extended-stops.html b/LayoutTests/fast/gradients/conic-gradient-extended-stops.html
new file mode 100644 (file)
index 0000000..1bd4b59
--- /dev/null
@@ -0,0 +1,55 @@
+<html>
+<head>
+<style>
+    svg {
+        width: 800px;
+        display: none;
+    }
+    div {
+        width: 200px;
+        height: 200px;
+    }
+    #gradient {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        background-image: conic-gradient(lime -180deg, black 540deg);
+        filter: url(#posterize);
+    }
+
+    .x {
+        position: absolute;
+        -webkit-clip-path: polygon(0% 0%, 0% 5%, 45% 50%, 0% 95%, 0% 100%, 5% 100%, 50% 55%, 95% 100%, 100% 100%, 100% 95%, 55% 50%, 100% 5%, 100% 0%, 95% 0%, 50% 45%, 5% 0%);
+    }
+    #x {
+        background-color:black;
+    }
+    .plus {
+        position: absolute;
+        -webkit-clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
+    }
+    #plus {
+        background-color:black;
+    }
+</style>
+</head>
+
+<body>
+<svg viewBox="0 0 700 100">
+<defs>
+    <filter id="posterize" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
+        <feComponentTransfer>
+            <feFuncR type="discrete" tableValues="0 0.0625 0.125 0.1875 0.25 0.3125 0.375 0.4375 0.5 0.5625 0.625 0.6875 0.75 0.8125 0.875 0.9375"/>
+            <feFuncG type="discrete" tableValues="0 0.0625 0.125 0.1875 0.25 0.3125 0.375 0.4375 0.5 0.5625 0.625 0.6875 0.75 0.8125 0.875 0.9375"/>
+            <feFuncB type="discrete" tableValues="0 0.0625 0.125 0.1875 0.25 0.3125 0.375 0.4375 0.5 0.5625 0.625 0.6875 0.75 0.8125 0.875 0.9375"/>
+        </feComponentTransfer>
+    </filter>
+</defs>
+</svg>
+
+<div>
+    <div id="gradient"></div>
+    <div id="x" class="x"></div>
+    <div id="plus" class="plus"></div>
+</div>
+</html>
diff --git a/LayoutTests/fast/gradients/conic-gradient.html b/LayoutTests/fast/gradients/conic-gradient.html
new file mode 100644 (file)
index 0000000..7384702
--- /dev/null
@@ -0,0 +1,55 @@
+<html>
+<head>
+<style>
+    svg {
+        width: 800px;
+        display: none;
+    }
+    div {
+        width: 200px;
+        height: 200px;
+    }
+    #gradient {
+        position: absolute;
+        width: 200px;
+        height: 200px;
+        background-image: conic-gradient(lime, black);
+        filter: url(#posterize);
+    }
+
+    .x {
+        position: absolute;
+        -webkit-clip-path: polygon(0% 0%, 0% 5%, 45% 50%, 0% 95%, 0% 100%, 5% 100%, 50% 55%, 95% 100%, 100% 100%, 100% 95%, 55% 50%, 100% 5%, 100% 0%, 95% 0%, 50% 45%, 5% 0%);
+    }
+    #x {
+        background-color:black;
+    }
+    .plus {
+        position: absolute;
+        -webkit-clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
+    }
+    #plus {
+        background-color:black;
+    }
+</style>
+</head>
+
+<body>
+<svg viewBox="0 0 700 100">
+<defs>
+    <filter id="posterize" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox">
+        <feComponentTransfer>
+            <feFuncR type="discrete" tableValues="0 0.125 0.25 0.375 0.5 0.625 0.75 0.875"/>
+            <feFuncG type="discrete" tableValues="0 0.125 0.25 0.375 0.5 0.625 0.75 0.875"/>
+            <feFuncB type="discrete" tableValues="0 0.125 0.25 0.375 0.5 0.625 0.75 0.875"/>
+        </feComponentTransfer>
+    </filter>
+</defs>
+</svg>
+
+<div>
+    <div id="gradient"></div>
+    <div id="x" class="x"></div>
+    <div id="plus" class="plus"></div>
+</div>
+</html>
index 53ffd77..05511e5 100644 (file)
@@ -34,3 +34,7 @@ fast/gradients/conic-center-outside-box.html [ Pass ]
 fast/gradients/conic-extended-stops.html [ Pass ]
 fast/gradients/conic-from-angle.html [ Pass ]
 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 ]
+
index 096988b..88f1ec8 100644 (file)
@@ -1764,5 +1764,8 @@ webkit.org/b/187393 imported/w3c/web-platform-tests/2dcontext/imagebitmap/create
 [ Mojave+ ] fast/gradients/conic-extended-stops.html [ Pass ]
 [ Mojave+ ] fast/gradients/conic-from-angle.html [ Pass ]
 [ Mojave+ ] fast/gradients/conic-repeating-last-stop.html [ Pass ]
+[ Mojave+ ] fast/gradients/conic-gradient-alpha.html [ Pass ]
+[ Mojave+ ] fast/gradients/conic-gradient-extended-stops.html [ Pass ]
+[ Mojave+ ] fast/gradients/conic-gradient.html [ Pass ]