Title: [236027] trunk/LayoutTests
Revision
236027
Author
[email protected]
Date
2018-09-14 17:33:58 -0700 (Fri, 14 Sep 2018)

Log Message

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:

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (236026 => 236027)


--- trunk/LayoutTests/ChangeLog	2018-09-15 00:22:46 UTC (rev 236026)
+++ trunk/LayoutTests/ChangeLog	2018-09-15 00:33:58 UTC (rev 236027)
@@ -1,3 +1,27 @@
+2018-09-14  Megan Gardner  <[email protected]>
+
+        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  <[email protected]>
 
         WebGL 2 conformance: rgb-format-support.html

Modified: trunk/LayoutTests/TestExpectations (236026 => 236027)


--- trunk/LayoutTests/TestExpectations	2018-09-15 00:22:46 UTC (rev 236026)
+++ trunk/LayoutTests/TestExpectations	2018-09-15 00:33:58 UTC (rev 236027)
@@ -2243,5 +2243,8 @@
 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 ]

Added: trunk/LayoutTests/fast/gradients/conic-gradient-alpha-expected.html (0 => 236027)


--- trunk/LayoutTests/fast/gradients/conic-gradient-alpha-expected.html	                        (rev 0)
+++ trunk/LayoutTests/fast/gradients/conic-gradient-alpha-expected.html	2018-09-15 00:33:58 UTC (rev 236027)
@@ -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>

Added: trunk/LayoutTests/fast/gradients/conic-gradient-alpha.html (0 => 236027)


--- trunk/LayoutTests/fast/gradients/conic-gradient-alpha.html	                        (rev 0)
+++ trunk/LayoutTests/fast/gradients/conic-gradient-alpha.html	2018-09-15 00:33:58 UTC (rev 236027)
@@ -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>

Added: trunk/LayoutTests/fast/gradients/conic-gradient-expected.html (0 => 236027)


--- trunk/LayoutTests/fast/gradients/conic-gradient-expected.html	                        (rev 0)
+++ trunk/LayoutTests/fast/gradients/conic-gradient-expected.html	2018-09-15 00:33:58 UTC (rev 236027)
@@ -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>

Added: trunk/LayoutTests/fast/gradients/conic-gradient-extended-stops-expected.html (0 => 236027)


--- trunk/LayoutTests/fast/gradients/conic-gradient-extended-stops-expected.html	                        (rev 0)
+++ trunk/LayoutTests/fast/gradients/conic-gradient-extended-stops-expected.html	2018-09-15 00:33:58 UTC (rev 236027)
@@ -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>

Added: trunk/LayoutTests/fast/gradients/conic-gradient-extended-stops.html (0 => 236027)


--- trunk/LayoutTests/fast/gradients/conic-gradient-extended-stops.html	                        (rev 0)
+++ trunk/LayoutTests/fast/gradients/conic-gradient-extended-stops.html	2018-09-15 00:33:58 UTC (rev 236027)
@@ -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>

Added: trunk/LayoutTests/fast/gradients/conic-gradient.html (0 => 236027)


--- trunk/LayoutTests/fast/gradients/conic-gradient.html	                        (rev 0)
+++ trunk/LayoutTests/fast/gradients/conic-gradient.html	2018-09-15 00:33:58 UTC (rev 236027)
@@ -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>

Modified: trunk/LayoutTests/platform/ios-12/TestExpectations (236026 => 236027)


--- trunk/LayoutTests/platform/ios-12/TestExpectations	2018-09-15 00:22:46 UTC (rev 236026)
+++ trunk/LayoutTests/platform/ios-12/TestExpectations	2018-09-15 00:33:58 UTC (rev 236027)
@@ -34,3 +34,7 @@
 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 ]
+

Modified: trunk/LayoutTests/platform/mac/TestExpectations (236026 => 236027)


--- trunk/LayoutTests/platform/mac/TestExpectations	2018-09-15 00:22:46 UTC (rev 236026)
+++ trunk/LayoutTests/platform/mac/TestExpectations	2018-09-15 00:33:58 UTC (rev 236027)
@@ -1764,5 +1764,8 @@
 [ 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 ]
 
 
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to