Bug 1450760 [wpt PR 10274] - Add a gradient color-stops parsing test, a=testonly
authorEmilio Cobos Álvarez <emilio@crisal.io>
Wed, 06 Jun 2018 15:51:54 +0000
changeset 422169 04e1a9eb6203ff16bd485a9a449c4ac09694ae61
parent 422168 6a95f950cf63b66df782e579b47e571f48f9f617
child 422170 fa46b0f623b6fb0c79a3fc2093e67b7d0856a15a
push id34122
push userebalazs@mozilla.com
push dateMon, 11 Jun 2018 09:37:00 +0000
treeherdermozilla-central@9941eb8c3b29 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1450760, 10274
milestone62.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1450760 [wpt PR 10274] - Add a gradient color-stops parsing test, a=testonly Automatic update from web-platform-testsMerge pull request #10274 from fmalita/gradient-color-stops Add a gradient color-stops parsing test -- wpt-commits: 7b40de789ad1910e10140bd4dc748b21305e5788 wpt-pr: 10274
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-images/gradient/color-stops-parsing.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -316963,16 +316963,22 @@
     ]
    ],
    "css/css-grid/layout-algorithm/grid-intrinsic-size-with-orthogonal-items.html": [
     [
      "/css/css-grid/layout-algorithm/grid-intrinsic-size-with-orthogonal-items.html",
      {}
     ]
    ],
+   "css/css-images/gradient/color-stops-parsing.html": [
+    [
+     "/css/css-images/gradient/color-stops-parsing.html",
+     {}
+    ]
+   ],
    "css/css-images/parsing/gradient-position-invalid.html": [
     [
      "/css/css-images/parsing/gradient-position-invalid.html",
      {}
     ]
    ],
    "css/css-images/parsing/gradient-position-valid.html": [
     [
@@ -510392,16 +510398,20 @@
   "css/css-images/gradient-move-stops-ref.html": [
    "bb2fca5aaeb7fe1abf30620695ad3fd832c0d089",
    "support"
   ],
   "css/css-images/gradient-move-stops.html": [
    "4df2c7e3981c94f0f18d5d22a4f5f97a1c834a0f",
    "reftest"
   ],
+  "css/css-images/gradient/color-stops-parsing.html": [
+   "472c308fa44d50952ff76dc7b512d49c99c4a686",
+   "testharness"
+  ],
   "css/css-images/gradients-with-border-ref.html": [
    "1646e30542dfab7813e663bb75fa51e35195aa8a",
    "support"
   ],
   "css/css-images/gradients-with-border.html": [
    "a4ed2b29eef39f7ed54add4ab45807665022f5b8",
    "reftest"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/color-stops-parsing.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Color-stops parsing</title>
+        <link rel="author" title="Florin Malita" href="mailto:fmalita@chromium.org">
+        <link rel="help" href="http://www.w3.org/TR/css-images-4/#color-stop-syntax">
+        <meta name="assert" content="General color stop parsing (applicable to all gradients) follows CSS Images 4 rules.">
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+    </head>
+    <body>
+        <script>
+                var tests = [
+                        // invalid stops
+                        { stops: ""                        , parse: false },
+                        { stops: "black"                   , parse: false },
+                        { stops: "black 0%"                , parse: false },
+                        { stops: "black, 25%"              , parse: false },
+                        { stops: "black, invalid"          , parse: false },
+                        { stops: "black, , white"          , parse: false },
+                        { stops: "black, white, 75%"       , parse: false },
+                        { stops: "black, 25% 50%, white"   , parse: false },
+                        { stops: "black, 25%, 50%, white"  , parse: false },
+                        { stops: "black 10% 25% 50%, white", parse: false },
+                        { stops: ",black, white"           , parse: false },
+                        { stops: "0%, black, white"        , parse: false },
+
+                        // basic stops
+                        { stops: "black, white"                    , parse: true },
+                        { stops: "black 0, white"                  , parse: true },
+                        { stops: "black 0%, white"                 , parse: true },
+                        { stops: "black 0%, white 100%"            , parse: true },
+                        { stops: "black, green, white"             , parse: true },
+                        { stops: "black 0%, green 50%, white 100%" , parse: true },
+                        { stops: "black 50%, green 10%, white 100%", parse: true },
+
+                        // interpolation hints
+                        { stops: "black, 25%, white"                        , parse: true },
+                        { stops: "black 0%, 25%, white 100%"                , parse: true },
+                        { stops: "black 0%, 15%, green 50%, 60%, white 100%", parse: true },
+
+                        // dual-positioning
+                        { stops: "black 0% 50%, white"                        , parse: true },
+                        { stops: "black 0% 50%, white 50% 100%"               , parse: true },
+                        { stops: "black 0% 50%, green 25% 75%, white 50% 100%", parse: true },
+
+                        // kitchen sink
+                        { stops: "black 0% calc(100% / 5), 25%, green 30% 60%, calc(100% * 3 / 4), white calc(100% - 20%) 100%", parse: true },
+                ];
+
+                function check_gradient(gradient, stops, shouldParse) {
+                        var div = document.createElement('div');
+                        div.setAttribute("style", "background-image: " + gradient + "(" + stops + ")");
+
+                        var inline_style = div.style.getPropertyValue("background-image");
+                        assert_equals(inline_style.startsWith(gradient), shouldParse);
+
+                        document.body.appendChild(div);
+                        var computed_style = getComputedStyle(div).getPropertyValue("background-image");
+                        assert_equals(computed_style.startsWith(gradient), shouldParse);
+
+                        div.remove();
+                }
+
+                [ "linear-gradient",
+                  "repeating-linear-gradient",
+                  "radial-gradient",
+                  "repeating-radial-gradient",
+                  "conic-gradient",
+                  "repeating-conic-gradient"
+                ].forEach(function(gradient) {
+                        tests.forEach(function(tst) {
+                                test(function() {
+                                        check_gradient(gradient, tst.stops, tst.parse);
+                                }, gradient + "(" + tst.stops + ") " + (tst.parse ? "[ parsable ]" : "[ unparsable ]"));
+                        });
+                });
+        </script>
+    </body>
+</html>