summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-images
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/css/css-images')
-rw-r--r--testing/web-platform/tests/css/css-images/cross-fade-computed-value.html12
-rw-r--r--testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops-ref.html47
-rw-r--r--testing/web-platform/tests/css/css-images/gradient/color-scheme-dependent-color-stops.html61
-rw-r--r--testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl-ref.html23
-rw-r--r--testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl.html28
-rw-r--r--testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch-ref.html23
-rw-r--r--testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch.html28
-rw-r--r--testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch-ref.html47
-rw-r--r--testing/web-platform/tests/css/css-images/gradient/repeating-gradient-hsl-and-oklch.html44
9 files changed, 307 insertions, 6 deletions
diff --git a/testing/web-platform/tests/css/css-images/cross-fade-computed-value.html b/testing/web-platform/tests/css/css-images/cross-fade-computed-value.html
index efb3b58d61..dbecb4a654 100644
--- a/testing/web-platform/tests/css/css-images/cross-fade-computed-value.html
+++ b/testing/web-platform/tests/css/css-images/cross-fade-computed-value.html
@@ -24,29 +24,29 @@
test_computed_value(
'background-image',
'cross-fade(30% color-mix(in srgb, currentcolor, blue), white)',
- 'cross-fade(30% color(srgb 0.5 0 0.5), rgb(255, 255, 255))');
+ 'cross-fade(color(srgb 0.5 0 0.5) 30%, rgb(255, 255, 255))');
// Unneccessary percentages should be kept.
test_computed_value('background-image', 'cross-fade(50% red, 50% green)',
- 'cross-fade(50% rgb(255, 0, 0), 50% rgb(0, 128, 0))');
+ 'cross-fade(rgb(255, 0, 0) 50%, rgb(0, 128, 0) 50%)');
// Percentage normalization should not be visible computed-value time.
test_computed_value('background-image', 'cross-fade(20% red, 20% green)',
- 'cross-fade(20% rgb(255, 0, 0), 20% rgb(0, 128, 0))');
+ 'cross-fade(rgb(255, 0, 0) 20%, rgb(0, 128, 0) 20%)');
// More than two values.
test_computed_value('background-image',
'cross-fade(50% red, 50% green, 50% blue)',
- 'cross-fade(50% rgb(255, 0, 0), 50% rgb(0, 128, 0), 50% rgb(0, 0, 255))');
+ 'cross-fade(rgb(255, 0, 0) 50%, rgb(0, 128, 0) 50%, rgb(0, 0, 255) 50%)');
// More-than-100% should be invalid, but in calc() we can't reject it parse-time;
// it will be clamped on serialization.
test_computed_value('background-image',
'cross-fade(calc(101%) red, green)',
- 'cross-fade(100% rgb(255, 0, 0), rgb(0, 128, 0))');
+ 'cross-fade(rgb(255, 0, 0) 100%, rgb(0, 128, 0))');
test_computed_value('background-image',
'cross-fade(calc(-200%) red, green)',
- 'cross-fade(0% rgb(255, 0, 0), rgb(0, 128, 0))');
+ 'cross-fade(rgb(255, 0, 0) 0%, rgb(0, 128, 0))');
</script>
</body>
</html>
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>