diff --git a/css/css-images/gradient/gradient-eval-001.html b/css/css-images/gradient/gradient-eval-001.html
new file mode 100644
index 000000000000000..0899e4f4fdd7052
--- /dev/null
+++ b/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=2"/>
+  <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="../../reference/ref-filled-green-100px-square-only.html"/>
+  <style>
+   :root {
+       --start: #000;
+       --end: #0F0;
+       --t: 0.5; 
+       --big: 131070000px;
+   }
+   .test {
+       width: 100px;
+       height: 100px;
+       background: linear-gradient(90deg, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
+   }
+ </style>
+ </head>
+ <body>
+  <p>Test passes if there is a filled green square.</p>
+  <div class="test"></div>
+ </body>
+</html>
