Files
sousa-gecko/testing/web-platform/tests/css/css-images/gradient/gradient-eval-004.html
T
CGQAQ e32de8998f Bug 1955549 [wpt PR 51511] - Fix rgb/hsl/hwb not using the OKLAB as the interpolation color space when it contains none, a=testonly
Automatic update from web-platform-tests
Fix rgb/hsl/hwb not using the OKLAB as the interpolation color space when it contains `none`

When a color's component is missing, we should not interpolate it with
`sRGB` as the legacy color space doesn't allow the `none` keyword.

Changed the `gradient-eval-004.html` as it's not correct.[1]

[1]https://github.com/web-platform-tests/wpt/pull/34858#pullrequestreview-2629019871

Bug: 403764638
Change-Id: I20fb023fe96cf5db3a75efb27b167b2f7781d3ec
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6354097
Reviewed-by: Aaron Krajeski <aaronhk@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1435912}

--

wpt-commits: a84da9fe4a1e0e06dd60fc5a2b59dd11935a13e7
wpt-pr: 51511
2025-03-23 08:13:17 +00:00

30 lines
1.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Gradient interpolation</title>
<meta name="fuzzy" content="maxDifference=1-2;totalPixels=0-2000">
<link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com">
<link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.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% 100%);
--end: rgb(0% 0% none); /* none should resolve to 0 as rgb don't have analogous components with oklab */
--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>