Skip to content

Commit

Permalink
WPT tests for gradients with "longer hue" interpolation.
Browse files Browse the repository at this point in the history 
The new tests here are reftest versions of the test swatches from
w3c/csswg-drafts#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

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1939948
gecko-commit: fcdb3710b9837f0de8fd19cfe533f9fba8d010d0
gecko-reviewers: longsonr
  • Loading branch information
@jfkthame @moz-wptsync-bot
jfkthame authored and moz-wptsync-bot committed Jan 7, 2025
1 parent 4fa8f72 commit 0efe156
Show file tree
Hide file tree
Showing 54 changed files with 2,126 additions and 6 deletions.
43 changes: 43 additions & 0 deletions css/css-images/gradient/gradient-longer-hue-hsl-001-ref.html
View file
Original file line number Diff line number Diff line change
@@ -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:[email protected]">

<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 changes: 45 additions & 0 deletions css/css-images/gradient/gradient-longer-hue-hsl-001.html
View file
Original file line number Diff line number Diff line change
@@ -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:[email protected]">
<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 changes: 43 additions & 0 deletions css/css-images/gradient/gradient-longer-hue-hsl-002-ref.html
View file
Original file line number Diff line number Diff line change
@@ -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:[email protected]">

<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 changes: 45 additions & 0 deletions css/css-images/gradient/gradient-longer-hue-hsl-002.html
View file
Original file line number Diff line number Diff line change
@@ -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:[email protected]">
<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 changes: 43 additions & 0 deletions css/css-images/gradient/gradient-longer-hue-hsl-003-ref.html
View file
Original file line number Diff line number Diff line change
@@ -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:[email protected]">

<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 changes: 46 additions & 0 deletions css/css-images/gradient/gradient-longer-hue-hsl-003.html
View file
Original file line number Diff line number Diff line change
@@ -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:[email protected]">
<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 changes: 43 additions & 0 deletions css/css-images/gradient/gradient-longer-hue-hsl-004-ref.html
View file
Original file line number Diff line number Diff line change
@@ -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:[email protected]">

<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 changes: 46 additions & 0 deletions css/css-images/gradient/gradient-longer-hue-hsl-004.html
View file
Original file line number Diff line number Diff line change
@@ -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:[email protected]">
<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>
Loading

0 comments on commit 0efe156

Please sign in to comment.