Skip to content

Commit 5ce54e8

Browse files
jfkthamesadym-chromium
jfkthame
authored and
sadym-chromium
committed
WPT tests for gradients with "longer hue" interpolation.
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
1 parent cd0f313 commit 5ce54e8

File tree

54 files changed

+2126
-6
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+2126
-6
lines changed

‎css/css-images/gradient/gradient-longer-hue-hsl-001-ref.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
>
2+
<html lang="en">
3+
<meta charset="utf-8">
4+
<title>Gradient using "longer hue"title>
5+
<link rel="author" title="Jonathan Kew" href="mailto:[email protected]">
6+
7+
<style>
8+
div {
9+
margin: 20px 0px 20px 50px;
10+
height: 40px;
11+
width: 100px;
12+
position: relative;
13+
background: linear-gradient(to right in hsl,
14+
red var(--from),
15+
color-mix(in hsl longer hue, red, blue),
16+
blue var(--to));
17+
}
18+
19+
.swatch {
20+
--from: 0px;
21+
--to: 100px;
22+
}
23+
24+
.swatch::before {
25+
content: '\feff';
26+
position: absolute;
27+
bottom: 40px;
28+
height: 10px;
29+
left: calc(var(--from) - 0.5px);
30+
border: 0.5px solid red;
31+
}
32+
33+
.swatch::after {
34+
content: '\feff';
35+
position: absolute;
36+
top: 40px;
37+
height: 10px;
38+
left: calc(var(--to) - 0.5px);
39+
border: 0.5px solid blue;
40+
}
41+
style>
42+
43+
<div class="swatch">div>

‎css/css-images/gradient/gradient-longer-hue-hsl-001.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
>
2+
<html lang="en">
3+
<meta charset="utf-8">
4+
<title>Gradient using "longer hue"title>
5+
<link rel="author" title="Jonathan Kew" href="mailto:[email protected]">
6+
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
7+
<link rel="match" href="gradient-longer-hue-hsl-001-ref.html">
8+
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
9+
10+
<style>
11+
div {
12+
margin: 20px 0px 20px 50px;
13+
height: 40px;
14+
width: 100px;
15+
position: relative;
16+
background: linear-gradient(to right in hsl longer hue,
17+
red var(--from),
18+
blue var(--to));
19+
}
20+
21+
.swatch {
22+
--from: 0px;
23+
--to: 100px;
24+
}
25+
26+
.swatch::before {
27+
content: '\feff';
28+
position: absolute;
29+
bottom: 40px;
30+
height: 10px;
31+
left: calc(var(--from) - 0.5px);
32+
border: 0.5px solid red;
33+
}
34+
35+
.swatch::after {
36+
content: '\feff';
37+
position: absolute;
38+
top: 40px;
39+
height: 10px;
40+
left: calc(var(--to) - 0.5px);
41+
border: 0.5px solid blue;
42+
}
43+
style>
44+
45+
<div class="swatch">div>

‎css/css-images/gradient/gradient-longer-hue-hsl-002-ref.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
>
2+
<html lang="en">
3+
<meta charset="utf-8">
4+
<title>Gradient using "longer hue"title>
5+
<link rel="author" title="Jonathan Kew" href="mailto:[email protected]">
6+
7+
<style>
8+
div {
9+
margin: 20px 0px 20px 50px;
10+
height: 40px;
11+
width: 100px;
12+
position: relative;
13+
background: linear-gradient(to right in hsl,
14+
red var(--from),
15+
color-mix(in hsl longer hue, red, blue),
16+
blue var(--to));
17+
}
18+
19+
.swatch {
20+
--from: 0px;
21+
--to: 50px;
22+
}
23+
24+
.swatch::before {
25+
content: '\feff';
26+
position: absolute;
27+
bottom: 40px;
28+
height: 10px;
29+
left: calc(var(--from) - 0.5px);
30+
border: 0.5px solid red;
31+
}
32+
33+
.swatch::after {
34+
content: '\feff';
35+
position: absolute;
36+
top: 40px;
37+
height: 10px;
38+
left: calc(var(--to) - 0.5px);
39+
border: 0.5px solid blue;
40+
}
41+
style>
42+
43+
<div class="swatch">div>

‎css/css-images/gradient/gradient-longer-hue-hsl-002.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
>
2+
<html lang="en">
3+
<meta charset="utf-8">
4+
<title>Gradient using "longer hue"title>
5+
<link rel="author" title="Jonathan Kew" href="mailto:[email protected]">
6+
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
7+
<link rel="match" href="gradient-longer-hue-hsl-002-ref.html">
8+
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
9+
10+
<style>
11+
div {
12+
margin: 20px 0px 20px 50px;
13+
height: 40px;
14+
width: 100px;
15+
position: relative;
16+
background: linear-gradient(to right in hsl longer hue,
17+
red var(--from),
18+
blue var(--to));
19+
}
20+
21+
.swatch {
22+
--from: 0px;
23+
--to: 50px;
24+
}
25+
26+
.swatch::before {
27+
content: '\feff';
28+
position: absolute;
29+
bottom: 40px;
30+
height: 10px;
31+
left: calc(var(--from) - 0.5px);
32+
border: 0.5px solid red;
33+
}
34+
35+
.swatch::after {
36+
content: '\feff';
37+
position: absolute;
38+
top: 40px;
39+
height: 10px;
40+
left: calc(var(--to) - 0.5px);
41+
border: 0.5px solid blue;
42+
}
43+
style>
44+
45+
<div class="swatch">div>

‎css/css-images/gradient/gradient-longer-hue-hsl-003-ref.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
>
2+
<html lang="en">
3+
<meta charset="utf-8">
4+
<title>Gradient using "longer hue"title>
5+
<link rel="author" title="Jonathan Kew" href="mailto:[email protected]">
6+
7+
<style>
8+
div {
9+
margin: 20px 0px 20px 50px;
10+
height: 40px;
11+
width: 100px;
12+
position: relative;
13+
background: linear-gradient(to right in hsl,
14+
red var(--from),
15+
color-mix(in hsl longer hue, red, blue),
16+
blue var(--to));
17+
}
18+
19+
.swatch {
20+
--from: 20px;
21+
--to: 80px;
22+
}
23+
24+
.swatch::before {
25+
content: '\feff';
26+
position: absolute;
27+
bottom: 40px;
28+
height: 10px;
29+
left: calc(var(--from) - 0.5px);
30+
border: 0.5px solid red;
31+
}
32+
33+
.swatch::after {
34+
content: '\feff';
35+
position: absolute;
36+
top: 40px;
37+
height: 10px;
38+
left: calc(var(--to) - 0.5px);
39+
border: 0.5px solid blue;
40+
}
41+
style>
42+
43+
<div class="swatch">div>

‎css/css-images/gradient/gradient-longer-hue-hsl-003.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
>
2+
<html lang="en">
3+
<meta charset="utf-8">
4+
<title>Gradient using "longer hue"title>
5+
<link rel="author" title="Jonathan Kew" href="mailto:[email protected]">
6+
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
7+
<link rel="match" href="gradient-longer-hue-hsl-003-ref.html">
8+
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
9+
<meta name="fuzzy" content="maxDifference=0-9;totalPixels=0-2400">
10+
11+
<style>
12+
div {
13+
margin: 20px 0px 20px 50px;
14+
height: 40px;
15+
width: 100px;
16+
position: relative;
17+
background: linear-gradient(to right in hsl longer hue,
18+
red var(--from),
19+
blue var(--to));
20+
}
21+
22+
.swatch {
23+
--from: 20px;
24+
--to: 80px;
25+
}
26+
27+
.swatch::before {
28+
content: '\feff';
29+
position: absolute;
30+
bottom: 40px;
31+
height: 10px;
32+
left: calc(var(--from) - 0.5px);
33+
border: 0.5px solid red;
34+
}
35+
36+
.swatch::after {
37+
content: '\feff';
38+
position: absolute;
39+
top: 40px;
40+
height: 10px;
41+
left: calc(var(--to) - 0.5px);
42+
border: 0.5px solid blue;
43+
}
44+
style>
45+
46+
<div class="swatch">div>

‎css/css-images/gradient/gradient-longer-hue-hsl-004-ref.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
>
2+
<html lang="en">
3+
<meta charset="utf-8">
4+
<title>Gradient using "longer hue"title>
5+
<link rel="author" title="Jonathan Kew" href="mailto:[email protected]">
6+
7+
<style>
8+
div {
9+
margin: 20px 0px 20px 50px;
10+
height: 40px;
11+
width: 100px;
12+
position: relative;
13+
background: linear-gradient(to right in hsl,
14+
red var(--from),
15+
color-mix(in hsl longer hue, red, blue),
16+
blue var(--to));
17+
}
18+
19+
.swatch {
20+
--from: 50px;
21+
--to: 150px;
22+
}
23+
24+
.swatch::before {
25+
content: '\feff';
26+
position: absolute;
27+
bottom: 40px;
28+
height: 10px;
29+
left: calc(var(--from) - 0.5px);
30+
border: 0.5px solid red;
31+
}
32+
33+
.swatch::after {
34+
content: '\feff';
35+
position: absolute;
36+
top: 40px;
37+
height: 10px;
38+
left: calc(var(--to) - 0.5px);
39+
border: 0.5px solid blue;
40+
}
41+
style>
42+
43+
<div class="swatch">div>

‎css/css-images/gradient/gradient-longer-hue-hsl-004.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
>
2+
<html lang="en">
3+
<meta charset="utf-8">
4+
<title>Gradient using "longer hue"title>
5+
<link rel="author" title="Jonathan Kew" href="mailto:[email protected]">
6+
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
7+
<link rel="match" href="gradient-longer-hue-hsl-004-ref.html">
8+
<meta name="assert" content="Tests that gradient with 'longer hue' renders correctly">
9+
<meta name="fuzzy" content="maxDifference=0-4;totalPixels=0-1840">
10+
11+
<style>
12+
div {
13+
margin: 20px 0px 20px 50px;
14+
height: 40px;
15+
width: 100px;
16+
position: relative;
17+
background: linear-gradient(to right in hsl longer hue,
18+
red var(--from),
19+
blue var(--to));
20+
}
21+
22+
.swatch {
23+
--from: 50px;
24+
--to: 150px;
25+
}
26+
27+
.swatch::before {
28+
content: '\feff';
29+
position: absolute;
30+
bottom: 40px;
31+
height: 10px;
32+
left: calc(var(--from) - 0.5px);
33+
border: 0.5px solid red;
34+
}
35+
36+
.swatch::after {
37+
content: '\feff';
38+
position: absolute;
39+
top: 40px;
40+
height: 10px;
41+
left: calc(var(--to) - 0.5px);
42+
border: 0.5px solid blue;
43+
}
44+
style>
45+
46+
<div class="swatch">div>

0 commit comments

Comments
 (0)