mirror of
https://github.com/servo/servo.git
synced 2025-08-12 00:45:33 +01:00
Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'
This commit is contained in:
WPT Sync Bot
parent
ace9b32b1c
commit
df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS color 4 colors default to OKLab gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000">
|
||||
<link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Test that new color inputs default to OKLab for gradient interpolation when none is provided. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
|
||||
<link rel="match" href="oklab-gradient-expected.html">
|
||||
<style>
|
||||
.test {
|
||||
width: 480px;
|
||||
height: 50px;
|
||||
background: linear-gradient(to right, rgb(255, 0, 0), color(srgb 0 255 0));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: rgb(0% 50% 0%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<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="gradient-eval-001-ref.html">
|
||||
<style>
|
||||
:root {
|
||||
--start: rgb(0% 0% 0%);
|
||||
--end: rgb(0% 100% 0%);
|
||||
--t: 0.5;
|
||||
--big: 131070000px;
|
||||
}
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<style>
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
background: lab(60% 0 0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Tests gradient interpolation in Lab when endpoints are specified in Lab and in gamut">
|
||||
<link rel="match" href="gradient-eval-002-ref.html">
|
||||
<style>
|
||||
:root {
|
||||
--start: lab(60% -50 50); /* rgb(20.71% 64.94% 17.04%) */
|
||||
--end: lab(60% 50 -50); /* rgb(76.52% 42.74% 91.9%) */
|
||||
--t: 0.5;
|
||||
--big: 131070000px;
|
||||
}
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(in lab, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<style>
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
background: lab(60% 0 0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Gradient interpolation takes place in the specified space rather than in the colorspace of the endpoints">
|
||||
<link rel="match" href="gradient-eval-003-ref.html">
|
||||
<style>
|
||||
:root {
|
||||
--start: rgb(34.04% 57.84% 91.39%); /* lab(60% 0 -50) */
|
||||
--end: rgb(64.07% 56.14% 19.72%); /* lab(60% 0 50) */
|
||||
--t: 0.5;
|
||||
--big: 131070000px;
|
||||
}
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(in lab, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<style>
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: rgb(0% 50% 50%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#missing">
|
||||
<meta name="assert" content="Gradient evaluation when one of the components is none works as specified"/>
|
||||
<link rel="match" href="gradient-eval-004-ref.html">
|
||||
<style>
|
||||
:root {
|
||||
--start: rgb(0% 0% 50%);
|
||||
--end: rgb(0% 100% none);
|
||||
--t: 0.5;
|
||||
--big: 131070000px;
|
||||
}
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<style>
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
background: lch(60% 60 0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Test gradient interpolation in LCH with both endpoints in gamut.">
|
||||
<link rel="match" href="gradient-eval-005-ref.html">
|
||||
<style>
|
||||
:root {
|
||||
--start: lch(60% 60 -70);
|
||||
--end: lch(60% 60 70);
|
||||
--t: 0.5;
|
||||
--big: 131070000px;
|
||||
}
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(in lch, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<style>
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
background: lab(75% 0 0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Tests that interpolation between two out-of-gamut doesn't gamut-map the end-points before interpolation">
|
||||
<link rel="match" href="gradient-eval-006-ref.html">
|
||||
<style>
|
||||
:root {
|
||||
--start: lab(75% 50 86.6); /* rgb(111.9% 55.94% -11.3%) */
|
||||
--end: lab(75% -50 -86.6); /* rgb(-76.3% 83.91% 135.5%) */
|
||||
--t: 0.5;
|
||||
--big: 131070000px;
|
||||
}
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(in lab, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<style>
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
background: lch(60% 60 0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Test gradient interpolation in LCH uses the shorter hue-interpolation method if unspecified">
|
||||
<link rel="match" href="gradient-eval-007-ref.html">
|
||||
<style>
|
||||
:root {
|
||||
--start: lch(60% 60 70);
|
||||
--end: lch(60% 60 290);
|
||||
--t: 0.5;
|
||||
--big: 131070000px;
|
||||
}
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(in lch, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<style>
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
background: lch(60% 60 0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Test gradient interpolation in LCH respects the longer hue-interpolation method">
|
||||
<link rel="match" href="gradient-eval-008-ref.html">
|
||||
<style>
|
||||
:root {
|
||||
--start: lch(60% 60 170);
|
||||
--end: lch(60% 60 190);
|
||||
--t: 0.5;
|
||||
--big: 131070000px;
|
||||
}
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(in lch longer hue, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<style>
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
background: lch(60% 60 0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-10000">
|
||||
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Test gradient interpolation in LCH works if the hue angles are not normalized to 0..360">
|
||||
<link rel="match" href="gradient-eval-009-ref.html"> <!-- could be 007, this is the same but with 3600 added to each component -->
|
||||
<style>
|
||||
:root {
|
||||
--start: lch(60% 60 3670);
|
||||
--end: lch(60% 60 3890);
|
||||
--t: 0.5;
|
||||
--big: 131070000px;
|
||||
}
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(in lch, var(--start) calc(var(--big) * (0 - var(--t))), var(--end) calc(var(--big) * (1 - var(--t))));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Legacy color gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-24000">
|
||||
<link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Legacy colors are interpolated in sRGB color space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
|
||||
<link rel="match" href="srgb-gradient-expected.html">
|
||||
<style>
|
||||
.test {
|
||||
width: 480px;
|
||||
height: 50px;
|
||||
background: linear-gradient(to right, rgb(255, 0, 0), rgb(0, 255, 0));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OKLab gradient interpolation</title>
|
||||
<link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Test OKLab as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
|
||||
<style>
|
||||
.test {
|
||||
width: 480px;
|
||||
height: 50px;
|
||||
background: url("resources/oklab-gradient.png");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>OKLab gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000">
|
||||
<link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Test OKLab as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
|
||||
<link rel="match" href="oklab-gradient-expected.html">
|
||||
<style>
|
||||
.test {
|
||||
width: 480px;
|
||||
height: 50px;
|
||||
background: linear-gradient(to right in oklab, rgb(255, 0, 0), rgb(0, 255, 0));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>sRGB gradient interpolation</title>
|
||||
<link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Test srgb as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
|
||||
<style>
|
||||
.test {
|
||||
width: 480px;
|
||||
height: 50px;
|
||||
background: url("resources/srgb-gradient.png");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>sRGb gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-24000">
|
||||
<link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Test srgb as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
|
||||
<link rel="match" href="srgb-gradient-expected.html">
|
||||
<style>
|
||||
.test {
|
||||
width: 480px;
|
||||
height: 50px;
|
||||
background: linear-gradient(to right in srgb, rgb(255 0 0), rgb(0 255 0));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>sRGB-linear gradient interpolation</title>
|
||||
<link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Test sRGB-linear as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
|
||||
<style>
|
||||
.test {
|
||||
width: 480px;
|
||||
height: 50px;
|
||||
background: url("resources/red-green-gradient-linear-colorspace.png");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>sRGB-linear gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000">
|
||||
<link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Test sRGB-linear as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
|
||||
<link rel="match" href="srgb-linear-gradient-expected.html">
|
||||
<style>
|
||||
.test {
|
||||
width: 480px;
|
||||
height: 50px;
|
||||
background: linear-gradient(to right in srgb-linear, rgb(255, 0, 0), rgb(0, 255, 0));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>XYZ gradient interpolation</title>
|
||||
<link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Test XYZ as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
|
||||
<style>
|
||||
.test {
|
||||
width: 480px;
|
||||
height: 50px;
|
||||
background: url("resources/red-green-gradient-linear-colorspace.png");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>XYZ gradient interpolation</title>
|
||||
<meta name="fuzzy" content="maxDifference=1-8;totalPixels=0-24000">
|
||||
<link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-color-4/#interpolation">
|
||||
<meta name="assert" content="Test XYZ as a gradient interpolation space. Reference generated here: https://raphlinus.github.io/color/2021/01/18/oklab-critique.html">
|
||||
<link rel="match" href="xyz-gradient-expected.html">
|
||||
<style>
|
||||
.test {
|
||||
width: 480px;
|
||||
height: 50px;
|
||||
background: linear-gradient(to right in xyz, rgb(255, 0, 0), rgb(0, 255, 0));
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue