diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-images/gradient')
33 files changed, 684 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..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 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-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> |
