From 43a97878ce14b72f0981164f87f2e35e14151312 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 11:22:09 +0200
Subject: Adding upstream version 110.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../css-images/gradient/color-stops-parsing.html   |  80 +++++++++++++++++++++
 ...s-color-4-colors-default-to-oklab-gradient.html |  21 ++++++
 .../css-images/gradient/gradient-eval-001-ref.html |  15 ++++
 .../css/css-images/gradient/gradient-eval-001.html |  27 +++++++
 .../css-images/gradient/gradient-eval-002-ref.html |  18 +++++
 .../css/css-images/gradient/gradient-eval-002.html |  27 +++++++
 .../css-images/gradient/gradient-eval-003-ref.html |  18 +++++
 .../css/css-images/gradient/gradient-eval-003.html |  27 +++++++
 .../css-images/gradient/gradient-eval-004-ref.html |  17 +++++
 .../css/css-images/gradient/gradient-eval-004.html |  28 ++++++++
 .../css-images/gradient/gradient-eval-005-ref.html |  18 +++++
 .../css/css-images/gradient/gradient-eval-005.html |  27 +++++++
 .../css-images/gradient/gradient-eval-006-ref.html |  18 +++++
 .../css/css-images/gradient/gradient-eval-006.html |  27 +++++++
 .../css-images/gradient/gradient-eval-007-ref.html |  18 +++++
 .../css/css-images/gradient/gradient-eval-007.html |  27 +++++++
 .../css-images/gradient/gradient-eval-008-ref.html |  18 +++++
 .../css/css-images/gradient/gradient-eval-008.html |  27 +++++++
 .../css-images/gradient/gradient-eval-009-ref.html |  18 +++++
 .../css/css-images/gradient/gradient-eval-009.html |  27 +++++++
 .../css-images/gradient/legacy-color-gradient.html |  21 ++++++
 .../gradient/oklab-gradient-expected.html          |  19 +++++
 .../css/css-images/gradient/oklab-gradient.html    |  21 ++++++
 .../gradient/resources/oklab-gradient.png          | Bin 0 -> 2386 bytes
 .../red-green-gradient-linear-colorspace.png       | Bin 0 -> 2556 bytes
 .../gradient/resources/srgb-gradient.png           | Bin 0 -> 1419 bytes
 .../css-images/gradient/resources/xyz-gradient.png | Bin 0 -> 2384 bytes
 .../gradient/srgb-gradient-expected.html           |  19 +++++
 .../css/css-images/gradient/srgb-gradient.html     |  21 ++++++
 .../gradient/srgb-linear-gradient-expected.html    |  19 +++++
 .../css-images/gradient/srgb-linear-gradient.html  |  21 ++++++
 .../css-images/gradient/xyz-gradient-expected.html |  19 +++++
 .../css/css-images/gradient/xyz-gradient.html      |  21 ++++++
 33 files changed, 684 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/color-stops-parsing.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/css-color-4-colors-default-to-oklab-gradient.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-001.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-002-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-002.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-003-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-003.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-004-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-004.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-005-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-005.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-006-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-006.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-007-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-007.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-008-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-008.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-009-ref.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/gradient-eval-009.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/legacy-color-gradient.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/oklab-gradient-expected.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/oklab-gradient.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/resources/oklab-gradient.png
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/resources/red-green-gradient-linear-colorspace.png
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/resources/srgb-gradient.png
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/resources/xyz-gradient.png
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/srgb-gradient-expected.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/srgb-gradient.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient-expected.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/xyz-gradient-expected.html
 create mode 100644 testing/web-platform/tests/css/css-images/gradient/xyz-gradient.html

(limited to 'testing/web-platform/tests/css/css-images/gradient')

diff --git a/testing/web-platform/tests/css/css-images/gradient/color-stops-parsing.html b/testing/web-platform/tests/css/css-images/gradient/color-stops-parsing.html
new file mode 100644
index 0000000000..a8baa63a67
--- /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>
diff --git a/testing/web-platform/tests/css/css-images/gradient/css-color-4-colors-default-to-oklab-gradient.html b/testing/web-platform/tests/css/css-images/gradient/css-color-4-colors-default-to-oklab-gradient.html
new file mode 100644
index 0000000000..63fdd6f4a4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/css-color-4-colors-default-to-oklab-gradient.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSS color 4 colors default to OKLab gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000">
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test that new color inputs default to OKLab for gradient interpolation when none is provided. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <link rel="match" href="oklab-gradient-expected.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: linear-gradient(to right, rgb(255, 0, 0), color(srgb 0 1 0));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001-ref.html
new file mode 100644
index 0000000000..8f3070fcbe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: rgb(0% 50% 0%);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001.html
new file mode 100644
index 0000000000..98a9d92345
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="A narrow segment of a wide gradient is essentially a single color, allowing for anti-aliasing">
+  <link rel="match" href="gradient-eval-001-ref.html">
+  <style>
+   :root {
+       --start: rgb(0% 0% 0%);
+       --end: rgb(0% 100% 0%);
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002-ref.html
new file mode 100644
index 0000000000..4db29f5ce9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: red;
+       background: lab(60% 0 0);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002.html
new file mode 100644
index 0000000000..5a0790ab0d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Tests gradient interpolation in Lab when endpoints are specified in Lab and in gamut">
+  <link rel="match" href="gradient-eval-002-ref.html">
+  <style>
+   :root {
+       --start: lab(60% -50 50);  /* rgb(20.71% 64.94% 17.04%) */
+       --end: lab(60% 50 -50);    /* rgb(76.52% 42.74% 91.9%) */
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(in lab, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003-ref.html
new file mode 100644
index 0000000000..4db29f5ce9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: red;
+       background: lab(60% 0 0);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003.html
new file mode 100644
index 0000000000..86f76a7365
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-003.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Gradient interpolation takes place in the specified space rather than in the colorspace of the endpoints">
+  <link rel="match" href="gradient-eval-003-ref.html">
+  <style>
+   :root {
+       --start: rgb(34.04% 57.84% 91.39%);      /* lab(60% 0 -50) */
+       --end: rgb(64.07% 56.14% 19.72%);        /* lab(60% 0 50) */
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(in lab, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004-ref.html
new file mode 100644
index 0000000000..f197386bcf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: rgb(0% 50% 50%);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004.html
new file mode 100644
index 0000000000..ada406fd2a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#missing">
+  <meta name="assert" content="Gradient evaluation when one of the components is none works as specified"/>
+  <link rel="match" href="gradient-eval-004-ref.html">
+  <style>
+   :root {
+       --start: rgb(0% 0% 50%);
+       --end: rgb(0% 100% none);
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005-ref.html
new file mode 100644
index 0000000000..b4a36ff6d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: red;
+       background: lch(60% 60 0);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005.html
new file mode 100644
index 0000000000..1165fcb5a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-005.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test gradient interpolation in LCH with both endpoints in gamut.">
+  <link rel="match" href="gradient-eval-005-ref.html">
+  <style>
+   :root {
+       --start: lch(60% 60 -70);
+       --end: lch(60% 60 70);
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(in lch, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006-ref.html
new file mode 100644
index 0000000000..8ed6e683b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: red;
+       background: lab(75% 0 0);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006.html
new file mode 100644
index 0000000000..e719d2e110
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-006.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Tests that interpolation between two out-of-gamut doesn't gamut-map the end-points before interpolation">
+  <link rel="match" href="gradient-eval-006-ref.html">
+  <style>
+   :root {
+       --start: lab(75% 50 86.6);       /* rgb(111.9% 55.94% -11.3%) */
+       --end: lab(75% -50 -86.6);       /* rgb(-76.3% 83.91% 135.5%) */
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(in lab, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007-ref.html
new file mode 100644
index 0000000000..b4a36ff6d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: red;
+       background: lch(60% 60 0);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007.html
new file mode 100644
index 0000000000..e85fec2b4d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-007.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test gradient interpolation in LCH uses the shorter hue-interpolation method if unspecified">
+  <link rel="match" href="gradient-eval-007-ref.html">
+  <style>
+   :root {
+       --start: lch(60% 60 70);
+       --end: lch(60% 60 290);
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(in lch, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008-ref.html
new file mode 100644
index 0000000000..b4a36ff6d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: red;
+       background: lch(60% 60 0);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008.html
new file mode 100644
index 0000000000..5201062f8e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-008.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test gradient interpolation in LCH respects the longer hue-interpolation method">
+  <link rel="match" href="gradient-eval-008-ref.html">
+  <style>
+   :root {
+       --start: lch(60% 60 170);
+       --end: lch(60% 60 190);
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(in lch longer hue, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009-ref.html
new file mode 100644
index 0000000000..b4a36ff6d0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <style>
+   .test {
+       width: 100px;
+       height: 100px;
+       background: red;
+       background: lch(60% 60 0);
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009.html b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009.html
new file mode 100644
index 0000000000..d361bdc3f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/gradient-eval-009.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
+  <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test gradient interpolation in LCH works if the hue angles are not normalized to 0..360">
+  <link rel="match" href="gradient-eval-009-ref.html"> <!-- could be 007, this is the same but with 3600 added to each component -->
+  <style>
+   :root {
+       --start: lch(60% 60 3670);
+       --end: lch(60% 60 3890);
+       --t: 0.5;
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(in lch, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/legacy-color-gradient.html b/testing/web-platform/tests/css/css-images/gradient/legacy-color-gradient.html
new file mode 100644
index 0000000000..8fe3ca83d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/legacy-color-gradient.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>Legacy color gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-24000">
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Legacy colors are interpolated in sRGB color space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <link rel="match" href="srgb-gradient-expected.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: linear-gradient(to right, rgb(255, 0, 0), rgb(0, 255, 0));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/oklab-gradient-expected.html b/testing/web-platform/tests/css/css-images/gradient/oklab-gradient-expected.html
new file mode 100644
index 0000000000..ca2232e380
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/oklab-gradient-expected.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>OKLab gradient interpolation</title>
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test OKLab as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: url("resources/oklab-gradient.png");
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/oklab-gradient.html b/testing/web-platform/tests/css/css-images/gradient/oklab-gradient.html
new file mode 100644
index 0000000000..71230ef599
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/oklab-gradient.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>OKLab gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000">
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test OKLab as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <link rel="match" href="oklab-gradient-expected.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: linear-gradient(to right in oklab, rgb(255, 0, 0), rgb(0, 255, 0));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/resources/oklab-gradient.png b/testing/web-platform/tests/css/css-images/gradient/resources/oklab-gradient.png
new file mode 100644
index 0000000000..9e52fd9b84
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/gradient/resources/oklab-gradient.png differ
diff --git a/testing/web-platform/tests/css/css-images/gradient/resources/red-green-gradient-linear-colorspace.png b/testing/web-platform/tests/css/css-images/gradient/resources/red-green-gradient-linear-colorspace.png
new file mode 100644
index 0000000000..e379a5df3e
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/gradient/resources/red-green-gradient-linear-colorspace.png differ
diff --git a/testing/web-platform/tests/css/css-images/gradient/resources/srgb-gradient.png b/testing/web-platform/tests/css/css-images/gradient/resources/srgb-gradient.png
new file mode 100644
index 0000000000..1fc6660919
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/gradient/resources/srgb-gradient.png differ
diff --git a/testing/web-platform/tests/css/css-images/gradient/resources/xyz-gradient.png b/testing/web-platform/tests/css/css-images/gradient/resources/xyz-gradient.png
new file mode 100644
index 0000000000..eb3ab78936
Binary files /dev/null and b/testing/web-platform/tests/css/css-images/gradient/resources/xyz-gradient.png differ
diff --git a/testing/web-platform/tests/css/css-images/gradient/srgb-gradient-expected.html b/testing/web-platform/tests/css/css-images/gradient/srgb-gradient-expected.html
new file mode 100644
index 0000000000..49a402d68e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/srgb-gradient-expected.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>sRGB gradient interpolation</title>
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test srgb as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: url("resources/srgb-gradient.png");
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/srgb-gradient.html b/testing/web-platform/tests/css/css-images/gradient/srgb-gradient.html
new file mode 100644
index 0000000000..e27c637e22
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/srgb-gradient.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>sRGb gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-24000">
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test srgb as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <link rel="match" href="srgb-gradient-expected.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: linear-gradient(to right in srgb, rgb(255 0 0), rgb(0 255 0));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient-expected.html b/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient-expected.html
new file mode 100644
index 0000000000..34f660f6f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient-expected.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>sRGB-linear gradient interpolation</title>
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test sRGB-linear as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: url("resources/red-green-gradient-linear-colorspace.png");
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient.html b/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient.html
new file mode 100644
index 0000000000..0869f3dfbf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>sRGB-linear gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000">
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test sRGB-linear as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <link rel="match" href="srgb-linear-gradient-expected.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: linear-gradient(to right in srgb-linear, rgb(255, 0, 0), rgb(0, 255, 0));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/xyz-gradient-expected.html b/testing/web-platform/tests/css/css-images/gradient/xyz-gradient-expected.html
new file mode 100644
index 0000000000..a435bbfd58
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/xyz-gradient-expected.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>XYZ gradient interpolation</title>
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test XYZ as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: url("resources/red-green-gradient-linear-colorspace.png");
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-images/gradient/xyz-gradient.html b/testing/web-platform/tests/css/css-images/gradient/xyz-gradient.html
new file mode 100644
index 0000000000..f760f148cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-images/gradient/xyz-gradient.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>XYZ gradient interpolation</title>
+  <meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000">
+  <link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
+  <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+  <meta name="assert" content="Test XYZ as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
+  <link rel="match" href="xyz-gradient-expected.html">
+  <style>
+   .test {
+       width: 480px;
+       height: 50px;
+       background: linear-gradient(to right in xyz, rgb(255, 0, 0), rgb(0, 255, 0));
+   }
+ </style>
+ </head>
+ <body>
+  <div class="test"></div>
+ </body>
+</html>
-- 
cgit v1.2.3