Add reftest for single-stop wrapping (longer hue) gradients with vary…

…ing stop placement. Without the patch, the example gradients are increasingly broken as the stop position advances through the range. Differential Revision: https://phabricator.services.mozilla.com/D231943 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1936569 gecko-commit: 3b9b9357ef56d8ad413f51b6da801e815285a98d gecko-reviewers: gfx-reviewers, lsalzman
tkntjsdw · Dec 14, 2024 · 0e89687 · 0e89687
1 parent e415e6c
commit 0e89687
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 0 deletions.
diff --git a/css/css-images/gradient/gradient-single-stop-longer-hue-hsl-002-ref.html b/css/css-images/gradient/gradient-single-stop-longer-hue-hsl-002-ref.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Gradient in HSL space - reference</title>
+    <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+    <style>
+        body {
+            background: #fff;
+        }
+
+        div {
+            width: 200px;
+            height: 50px;
+            margin: 10px;
+            background-image: linear-gradient(to right in hsl longer hue, red 0%, red var(--pos) var(--pos), red 100%);
+        }
+    </style>
+</head>
+
+<body>
+    <div style="--pos: 0%"></div>
+    <div style="--pos: 25%"></div>
+    <div style="--pos: 50%"></div>
+    <div style="--pos: 75%"></div>
+    <div style="--pos: 100%"></div>
+</body>
+</html>
diff --git a/css/css-images/gradient/gradient-single-stop-longer-hue-hsl-002.html b/css/css-images/gradient/gradient-single-stop-longer-hue-hsl-002.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Gradient in HSL space</title>
+    <meta name="fuzzy" content="maxDifference=0-8;totalPixels=0-9050">
+    <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+    <link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
+    <meta name="assert" content="Tests that a single-stop longer-hue (wrapping) gradient renders as expected for various stop positions">
+    <link rel="match" href="gradient-single-stop-longer-hue-hsl-002-ref.html">
+    <style>
+        body {
+            background: #fff;
+        }
+
+        div {
+            width: 200px;
+            height: 50px;
+            margin: 10px;
+            background-image: linear-gradient(to right in hsl longer hue, red var(--pos) var(--pos));
+        }
+    </style>
+</head>
+
+<body>
+    <div style="--pos: 0%"></div>
+    <div style="--pos: 25%"></div>
+    <div style="--pos: 50%"></div>
+    <div style="--pos: 75%"></div>
+    <div style="--pos: 100%"></div>
+</body>
+</html>