diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-images/gradient | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-images/gradient')
35 files changed, 771 insertions, 0 deletions
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..2b1edca0da --- /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-12;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-ref.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/gradient-none-interpolation-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-none-interpolation-ref.html new file mode 100644 index 0000000000..89a1929e27 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-none-interpolation-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> + <head> + <style> + div { + height: 100px; + } + #basic { + /* "none" should split into two and take each neighboring value. */ + background: linear-gradient(to right in srgb, color(srgb 0.5 0 0), color(srgb 0.5 0.5 0.5) 50%, color(srgb 1 0.5 0.5) 50%, color(srgb 1 1 1)); + } + #multipleNone { + /* "none" and "none" gives zero. */ + background: linear-gradient(to right in srgb, color(srgb 0 0 0), color(srgb 0.0 0.5 0.5) 50%, color(srgb 1 0.5 0.5) 50%, color(srgb 1 1 1)); + } + #allNone { + /* "none" and "none" gives zero. */ + background: linear-gradient(to right in srgb, color(srgb 0 0 0), color(srgb 0 1 1)); + } + #noneHue { + background: linear-gradient(to right in oklch, oklch(0.2 0.1 90), oklch(0.8 0.4 90) 50%, oklch(0.8 0.4 180) 50%, oklch(0.3 0.2 180)); + } + #noneHueLonger { + background: linear-gradient(to right in oklch longer hue, oklch(0.2 0.1 90), oklch(0.5 0.3 90) 50%, oklch(0.5 0.3 180) 50%, oklch(0.8 0.4 180)); + } + #transparentHueIsPowerless { + /* oklch(0.627966 0.257704 29.2346) = "red" + oklch(0.451981 0.31321 264.051) = "blue" */ + background: linear-gradient(to right in oklch, oklch(0.627966 0.257704 29.2346), oklch(0 0 29.2346 / 0) 50%, oklch(0 0 264.051 / 0) 50%, oklch(0.451981 0.31321 264.051)); + } + </style> + </head> + <body> + <div id="basic"></div> + <div id="multipleNone"></div> + <div id="allNone"></div> + <div id="noneHue"></div> + <div id="noneHueLonger"></div> + <div id="transparentHueIsPowerless"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-none-interpolation.html b/testing/web-platform/tests/css/css-images/gradient/gradient-none-interpolation.html new file mode 100644 index 0000000000..06d7be6e66 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-none-interpolation.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> + <head> + <title>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="Color stops with missing components should split into two stops and take their neighboring values."> + <link rel="match" href="gradient-none-interpolation-ref.html"> + <meta name="fuzzy" content="maxDifference=1; totalPixels=0-5000"> + <style> + div { + height: 100px; + } + #basic { + /* "none" should split into two and take each neighboring value. */ + background: linear-gradient(to right in srgb, color(srgb 0.5 0 0), color(srgb none 0.5 0.5), color(srgb 1 1 1)); + } + #multipleNone { + /* "none" and "none" gives zero. */ + background: linear-gradient(to right in srgb, color(srgb none 0 0), color(srgb none 0.5 0.5), color(srgb 1 1 1)); + } + #allNone { + /* "none" and "none" gives zero. */ + background: linear-gradient(to right in srgb, color(srgb none 0 0), color(srgb none 1 1)); + } + #noneHue { + background: linear-gradient(to right in oklch, oklch(0.2 0.1 90), oklch(0.8 0.4 none), oklch(0.3 0.2 180)); + } + #noneHueLonger { + background: linear-gradient(to right in oklch longer hue, oklch(0.2 0.1 90), oklch(0.5 0.3 none), oklch(0.8 0.4 180)); + } + #transparentHueIsPowerless { + /* When "transparent" is converted to oklch, the hue of the resulting stop should act as if it were missing. */ + background: linear-gradient(to right in oklch, red, transparent, blue); + } + </style> + </head> + <body> + <div id="basic"></div> + <div id="multipleNone"></div> + <div id="allNone"></div> + <div id="noneHue"></div> + <div id="noneHueLonger"></div> + <div id="transparentHueIsPowerless"></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..e6af42103b --- /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-ref.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-ref.html b/testing/web-platform/tests/css/css-images/gradient/oklab-gradient-ref.html new file mode 100644 index 0000000000..ca2232e380 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/oklab-gradient-ref.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..338a0c9d3b --- /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-12;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-ref.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 Binary files differnew file mode 100644 index 0000000000..9e52fd9b84 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/resources/oklab-gradient.png 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 Binary files differnew file mode 100644 index 0000000000..e379a5df3e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/resources/red-green-gradient-linear-colorspace.png 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 Binary files differnew file mode 100644 index 0000000000..1fc6660919 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/resources/srgb-gradient.png 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 Binary files differnew file mode 100644 index 0000000000..eb3ab78936 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/resources/xyz-gradient.png diff --git a/testing/web-platform/tests/css/css-images/gradient/srgb-gradient-ref.html b/testing/web-platform/tests/css/css-images/gradient/srgb-gradient-ref.html new file mode 100644 index 0000000000..49a402d68e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/srgb-gradient-ref.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..4cdb0f17b7 --- /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-ref.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-ref.html b/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient-ref.html new file mode 100644 index 0000000000..34f660f6f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/srgb-linear-gradient-ref.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..a921c62445 --- /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-10;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-ref.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-ref.html b/testing/web-platform/tests/css/css-images/gradient/xyz-gradient-ref.html new file mode 100644 index 0000000000..a435bbfd58 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/xyz-gradient-ref.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..6c6a30db14 --- /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-10;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-ref.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> |
