corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1939948 - WPT tests for gradients with "longer hue" interpolation. r=longsonr

Browse Source 
The new tests here are reftest versions of the test swatches from
https://github.com/w3c/csswg-drafts/issues/11381.

The references for existing "single-stop-longer" tests are also changed,
because they were based on a faulty interpretation; the spec does not
call for any kind of gradient to be extrapolated beyond the first and
last defined color stop positions, so a "single stop" gradient actually
renders a single solid color.

Differential Revision: https://phabricator.services.mozilla.com/D233217
This commit is contained in:
Jonathan Kew
2025-01-06 15:21:01 +00:00
parent a97df157e7
commit 947a0667d9
55 changed files with 2126 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
testing/web-platform/meta/css/css-images/gradient/gradient-single-stop-longer-hue-oklch.html.ini
View File

@@ -1,2 +0,0 @@
[gradient-single-stop-longer-hue-oklch.html]
fuzzy: 0-26;0-63300

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-001-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl,
red var(--from),
color-mix(in hsl longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 0px;
--to: 100px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-001.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-hsl-001-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 0px;
--to: 100px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-002-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl,
red var(--from),
color-mix(in hsl longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 0px;
--to: 50px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-002.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-hsl-002-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 0px;
--to: 50px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-003-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl,
red var(--from),
color-mix(in hsl longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 20px;
--to: 80px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

46
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-003.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-hsl-003-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<meta name="fuzzy" content="maxDifference=0-9;totalPixels=0-2400">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 20px;
--to: 80px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-004-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl,
red var(--from),
color-mix(in hsl longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 50px;
--to: 150px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

46
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-004.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-hsl-004-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<meta name="fuzzy" content="maxDifference=0-4;totalPixels=0-1840">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 50px;
--to: 150px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-005-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl,
red var(--from),
color-mix(in hsl longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: -20px;
--to: 30px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

46
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-005.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-hsl-005-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<meta name="fuzzy" content="maxDifference=0-9;totalPixels=0-1120">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: -20px;
--to: 30px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-006-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl,
red var(--from),
color-mix(in hsl longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 50px;
--to: 100px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-006.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-hsl-006-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 50px;
--to: 100px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-007-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl,
red var(--from),
color-mix(in hsl longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 51px;
--to: 101px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

46
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-007.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-hsl-007-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<meta name="fuzzy" content="maxDifference=0-8;totalPixels=0-1920">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 51px;
--to: 101px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-008-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl,
red var(--from),
color-mix(in hsl longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 0px;
--to: 0px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-008.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-hsl-008-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 0px;
--to: 0px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-009-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl,
red var(--from),
color-mix(in hsl longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 50px;
--to: 50px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-009.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-hsl-009-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 50px;
--to: 50px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-010-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl,
red var(--from),
color-mix(in hsl longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 100px;
--to: 100px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-010.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-hsl-010-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 100px;
--to: 100px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-011-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl,
red var(--from),
color-mix(in hsl longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 120px;
--to: 120px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-011.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-hsl-011-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 120px;
--to: 120px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-012-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl,
red var(--from),
color-mix(in hsl longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: -20px;
--to: -20px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-hsl-012.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-hsl-012-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in hsl longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: -20px;
--to: -20px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-001-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch,
red var(--from),
color-mix(in lch longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 0px;
--to: 100px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-001.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-lch-001-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 0px;
--to: 100px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-002-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch,
red var(--from),
color-mix(in lch longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 0px;
--to: 50px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-002.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-lch-002-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 0px;
--to: 50px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-003-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch,
red var(--from),
color-mix(in lch longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 20px;
--to: 80px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

46
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-003.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-lch-003-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<meta name="fuzzy" content="maxDifference=0-19;totalPixels=0-2120">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 20px;
--to: 80px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-004-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch,
red var(--from),
color-mix(in lch longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 50px;
--to: 150px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

46
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-004.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-lch-004-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<meta name="fuzzy" content="maxDifference=0-9;totalPixels=0-1240">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 50px;
--to: 150px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-005-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch,
red var(--from),
color-mix(in lch longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: -20px;
--to: 30px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

46
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-005.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-lch-005-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<meta name="fuzzy" content="maxDifference=0-14;totalPixels=0-1040">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: -20px;
--to: 30px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-006-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch,
red var(--from),
color-mix(in lch longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 50px;
--to: 100px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-006.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-lch-006-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 50px;
--to: 100px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-007-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch,
red var(--from),
color-mix(in lch longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 51px;
--to: 101px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

46
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-007.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-lch-007-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<meta name="fuzzy" content="maxDifference=0-18;totalPixels=0-1440">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 51px;
--to: 101px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-008-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch,
red var(--from),
color-mix(in lch longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 0px;
--to: 0px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-008.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-lch-008-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 0px;
--to: 0px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-009-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch,
red var(--from),
color-mix(in lch longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 50px;
--to: 50px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-009.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-lch-009-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 50px;
--to: 50px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-010-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch,
red var(--from),
color-mix(in lch longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 100px;
--to: 100px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-010.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-lch-010-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 100px;
--to: 100px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-011-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch,
red var(--from),
color-mix(in lch longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: 120px;
--to: 120px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-011.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-lch-011-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: 120px;
--to: 120px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

43
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-012-ref.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch,
red var(--from),
color-mix(in lch longer hue, red, blue),
blue var(--to));
}
.swatch {
--from: -20px;
--to: -20px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

45
testing/web-platform/tests/css/css-images/gradient/gradient-longer-hue-lch-012.html Normal file
View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Gradient using "longer hue"</title>
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
<link rel="match" href="gradient-longer-hue-lch-012-ref.html">
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
<style>
div {
margin: 20px 0px 20px 50px;
height: 40px;
width: 100px;
position: relative;
background: linear-gradient(to right in lch longer hue,
red var(--from),
blue var(--to));
}
.swatch {
--from: -20px;
--to: -20px;
}
.swatch::before {
content: '\feff';
position: absolute;
bottom: 40px;
height: 10px;
left: calc(var(--from) - 0.5px);
border: 0.5px solid red;
}
.swatch::after {
content: '\feff';
position: absolute;
top: 40px;
height: 10px;
left: calc(var(--to) - 0.5px);
border: 0.5px solid blue;
}
</style>
<div class="swatch"></div>

2
testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl-002-ref.html
View File

@@ -14,7 +14,7 @@
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%);
background-color: red;
}
</style>
</head>

2
testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl-002.html
View File

@@ -7,7 +7,7 @@
<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">
<meta name="assert" content="Tests that a single-stop longer-hue gradient renders a solid color, for various stop positions">
<link rel="match" href="gradient-single-stop-longer-hue-hsl-002-ref.html">
<style>
body {

2
testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl-ref.html
View File

@@ -12,7 +12,7 @@
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%);
background-color: hsl(0, 100%, 50%);
}
</style>
</head>

2
testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-hsl.html
View File

@@ -7,7 +7,7 @@
<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">
<meta name="assert" content="Tests that a single-stop longer-hue gradient just renders a solid color">
<link rel="match" href="gradient-single-stop-longer-hue-hsl-ref.html">
<style>
body {

2
testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch-ref.html
View File

@@ -12,7 +12,7 @@
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%);
background-color: oklch(0.62796 0.25768 29.23388);
}
</style>
</head>

2
testing/web-platform/tests/css/css-images/gradient/gradient-single-stop-longer-hue-oklch.html
View File

@@ -7,7 +7,7 @@
<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">
<meta name="assert" content="Tests that a single-stop longer-hue gradient just renders a solid color">
<link rel="match" href="gradient-single-stop-longer-hue-oklch-ref.html">
<style>
body {