-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix HSL/HWB/LCH/OKLCH gradient longer hue interpolation 1-stop case
Differential Revision: https://phabricator.services.mozilla.com/D206976 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1885716 gecko-commit: a65ef2dc959b5fe431d3fcaa757b423aeec2677b gecko-reviewers: emilio
- Loading branch information
1 parent
f436165
commit daa07cf
Showing
4 changed files
with
102 additions
and
0 deletions.
There are no files selected for viewing
23 changes: 23 additions & 0 deletions
23
css/css-images/gradient/gradient-single-stop-longer-hue-hsl-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Gradient in HSL space</title> | ||
| <style> | ||
| body { | ||
| background: #fff; | ||
| } | ||
|
|
||
| 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%); | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div></div> | ||
| </body> | ||
| </html> |
28 changes: 28 additions & 0 deletions
28
css/css-images/gradient/gradient-single-stop-longer-hue-hsl.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Gradient in HSL space</title> | ||
| <meta name="fuzzy" content="maxDifference=0-15;totalPixels=0-90000"> | ||
| <link rel="author" title="Ashley Hale" href="mailto:[email protected]"> | ||
| <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"> | ||
| <link rel="match" href="gradient-single-stop-longer-hue-hsl-ref.html"> | ||
| <style> | ||
| body { | ||
| background: #fff; | ||
| } | ||
|
|
||
| div { | ||
| width: 300px; | ||
| height: 300px; | ||
| background-image: linear-gradient(in hsl longer hue 0deg, hsl(0, 100%, 50%) 0 0); | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div></div> | ||
| </body> | ||
| </html> |
23 changes: 23 additions & 0 deletions
23
css/css-images/gradient/gradient-single-stop-longer-hue-oklch-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Gradient in OKLCH space</title> | ||
| <style> | ||
| body { | ||
| background: #fff; | ||
| } | ||
|
|
||
| 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%); | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div></div> | ||
| </body> | ||
| </html> |
28 changes: 28 additions & 0 deletions
28
css/css-images/gradient/gradient-single-stop-longer-hue-oklch.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Gradient in OKLCH space</title> | ||
| <meta name="fuzzy" content="maxDifference=0-15;totalPixels=0-90000"> | ||
| <link rel="author" title="Ashley Hale" href="mailto:[email protected]"> | ||
| <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"> | ||
| <link rel="match" href="gradient-single-stop-longer-hue-oklch-ref.html"> | ||
| <style> | ||
| body { | ||
| background: #fff; | ||
| } | ||
|
|
||
| div { | ||
| width: 300px; | ||
| height: 300px; | ||
| background-image: linear-gradient(in oklch longer hue 0deg, oklch(0.62796 0.25768 29.23388) 0 0); | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div></div> | ||
| </body> | ||
| </html> |