diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-images/gradient')
8 files changed, 301 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops-ref.html b/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops-ref.html new file mode 100644 index 0000000000..28d57bc19c --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder"> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#color-scheme-prop"> +<link rel="help" href="https://www.w3.org/TR/css-color-4/#css-system-colors"> +<link rel="help" href="https://www.w3.org/TR/css-color-5/#light-dark"> +<link rel="help" href="https://www.w3.org/TR/css-color-5/#color-mix"> +<title>Reference: Test changing used color-scheme updates gradient with color-scheme dependent color stops.</title> +<style> + +.box { + color-scheme: dark; + + width: 100px; + height: 100px; +} + +#system-color { + background-image: linear-gradient(CanvasText, CanvasText); +} + +#system-color-in-color-mix { + background-image: linear-gradient(color-mix(in lch, Canvas, pink), color-mix(in lch, Canvas, pink)); +} + +#light-dark { + background-image: linear-gradient(light-dark(red, green), light-dark(red, green)); +} + +#light-dark-in-color-mix { + background-image: linear-gradient(color-mix(in lch, light-dark(red, green), pink), color-mix(in lch, light-dark(red, green), pink)); +} + +</style> +</head> +<body> +<p>Test system color</p> +<div id="system-color" class="box"></div> +<p>Test system color in color-mix()</p> +<div id="system-color-in-color-mix" class="box"></div> +<p>Test light-dark()</p> +<div id="light-dark" class="box"></div> +<p>Test light-dark() in color-mix()</p> +<div id="light-dark-in-color-mix" class="box"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops.html b/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops.html new file mode 100644 index 0000000000..f95a557703 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<head> +<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder"> +<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#color-scheme-prop"> +<link rel="help" href="https://www.w3.org/TR/css-color-4/#css-system-colors"> +<link rel="help" href="https://www.w3.org/TR/css-color-5/#light-dark"> +<link rel="help" href="https://www.w3.org/TR/css-color-5/#color-mix"> +<title>Test changing used color-scheme updates gradient with color-scheme dependent color stops.</title> +<link rel="match" href="color-scheme-dependent-color-stops-ref.html"> +<style> + +.dark { + color-scheme: dark; +} + +.box { + width: 100px; + height: 100px; +} + +#system-color { + background-image: linear-gradient(CanvasText, CanvasText); +} + +#system-color-in-color-mix { + background-image: linear-gradient(color-mix(in lch, Canvas, pink), color-mix(in lch, Canvas, pink)); +} + +#light-dark { + background-image: linear-gradient(light-dark(red, green), light-dark(red, green)); +} + +#light-dark-in-color-mix { + background-image: linear-gradient(color-mix(in lch, light-dark(red, green), pink), color-mix(in lch, light-dark(red, green), pink)); +} + +</style> +</head> +<body> +<p>Test system color</p> +<div id="system-color" class="box"></div> +<p>Test system color in color-mix()</p> +<div id="system-color-in-color-mix" class="box"></div> +<p>Test light-dark()</p> +<div id="light-dark" class="box"></div> +<p>Test light-dark() in color-mix()</p> +<div id="light-dark-in-color-mix" class="box"></div> +<script> + +requestAnimationFrame(() => { + document.querySelectorAll(".box").forEach((box) => { + box.classList.add("dark"); + }); + + document.documentElement.className = ''; +}); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl-ref.html new file mode 100644 index 0000000000..cf47c75834 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>Gradient in HSL space</title> + <style> + body { + background: #fff; + } + + div { + width: 300px; + height: 300px; + background-image: linear-gradient(in hsl shorter hue 0deg, hsl(0, 100%, 50%) 0%, hsl(120, 100%, 50%) 33.3333%, hsl(240, 100%, 50%) 66.6667%, hsl(0, 100%, 50%) 100%); + } + </style> +</head> + +<body> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl.html b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl.html new file mode 100644 index 0000000000..bbadccb53e --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl.html @@ -0,0 +1,28 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>Gradient in HSL space</title> + <meta name="fuzzy" content="maxDifference=0-15;totalPixels=0-90000"> + <link rel="author" title="Ashley Hale" href="mailto:ahale@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Tests that a multi-stop shorter hue gradient and a single-stop longer hue (wrapping) gradient match in appearance"> + <link rel="match" href="gradient-single-stop-longer-hue-hsl-ref.html"> + <style> + body { + background: #fff; + } + + div { + width: 300px; + height: 300px; + background-image: linear-gradient(in hsl longer hue 0deg, hsl(0, 100%, 50%) 0 0); + } + </style> +</head> + +<body> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch-ref.html b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch-ref.html new file mode 100644 index 0000000000..c3f51781c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>Gradient in OKLCH space</title> + <style> + body { + background: #fff; + } + + div { + width: 300px; + height: 300px; + background-image: linear-gradient(in oklch shorter hue 0deg, oklch(0.62796 0.25768 29.23388) 0%, oklch(0.62796 0.25768 149.23388) 33.3333%, oklch(0.62796 0.25768 269.23388) 66.6667%, oklch(0.62796 0.25768 29.23388) 100%); + } + </style> +</head> + +<body> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch.html b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch.html new file mode 100644 index 0000000000..abe6604fc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch.html @@ -0,0 +1,28 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>Gradient in OKLCH space</title> + <meta name="fuzzy" content="maxDifference=0-15;totalPixels=0-90000"> + <link rel="author" title="Ashley Hale" href="mailto:ahale@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Tests that a multi-stop shorter hue gradient and a single-stop longer hue (wrapping) gradient match in appearance"> + <link rel="match" href="gradient-single-stop-longer-hue-oklch-ref.html"> + <style> + body { + background: #fff; + } + + div { + width: 300px; + height: 300px; + background-image: linear-gradient(in oklch longer hue 0deg, oklch(0.62796 0.25768 29.23388) 0 0); + } + </style> +</head> + +<body> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch-ref.html b/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch-ref.html new file mode 100644 index 0000000000..a5e1554be1 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch-ref.html @@ -0,0 +1,47 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>Repeating linear gradients in HSL and OKLCH space</title> + <link rel="author" title="Ashley Hale" href="mailto:ahale@mozilla.com"> + <style> + body { + background: #fff; + } + + .a { + width: 100px; + height: 100px; + background: repeating-linear-gradient( + to bottom, + hsl(180 50% 70%) 0px 20px, + hsl(0 50% 50%) 20px 40px, + hsl(180 50% 70%) 40px 60px, + hsl(0 50% 50%) 60px 80px, + hsl(180 50% 70%) 80px 100px + ); + } + + .b { + width: 100px; + height: 100px; + background: repeating-linear-gradient( + to bottom, + oklch(70% 50% 180) 0px 20px, + oklch(50% 50% 0) 20px 40px, + oklch(70% 50% 180) 40px 60px, + oklch(50% 50% 0) 60px 80px, + oklch(70% 50% 180) 80px 100px + ); + } + </style> +</head> + +<body> + <p>repeating-linear-gradient with HSL</p> + <div class="a"></div> + <p>repeating-linear-gradient with OKLCH</p> + <div class="b"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch.html b/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch.html new file mode 100644 index 0000000000..71e615d919 --- /dev/null +++ b/testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch.html @@ -0,0 +1,44 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>Repeating linear gradients in HSL and OKLCH space</title> + <link rel="author" title="Ashley Hale" href="mailto:ahale@mozilla.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation"> + <meta name="assert" content="Tests that a multi-stop shorter hue gradient and a single-stop longer hue (wrapping) gradient match in appearance"> + <link rel="match" href="repeating-gradient-hsl-and-oklch-ref.html"> + <style> + body { + background: #fff; + } + + .a { + width: 100px; + height: 100px; + background: repeating-linear-gradient( + to bottom, + hsl(180 50% 70%) 0px 20px, + hsl(0 50% 50%) 20px 40px + ); + } + + .b { + width: 100px; + height: 100px; + background: repeating-linear-gradient( + to bottom, + oklch(70% 50% 180) 0px 20px, + oklch(50% 50% 0) 20px 40px + ); + } + </style> +</head> + +<body> + <p>repeating-linear-gradient with HSL</p> + <div class="a"></div> + <p>repeating-linear-gradient with OKLCH</p> + <div class="b"></div> +</body> +</html> |