CGQAQ
d6f921199d
Automatic update from web-platform-tests Fix interpolation color space inconsistent issue Let say we have a gradient `linear-gradient(rgb(none 255 0), rgb(255 none, 0)`, in `FillSkiaStops`, We convert those color stops into `Oklab` because the `none` in `ConvertToColorSpace` is `Oklab` unconditionally. But later in `ResolveSkInterpolation`, we will resolve the `none` into `sRGB` because we don't have any non-legacy color space stops, this will end up leading to inconsistency interpolation color space(we basically interpolating Oklab colors using sRGB colorspace in the skia side). Even worse that we have Missing component carried forward[1] logic, sRGBLegacy and Oklab don't have `AnalogousMissingComponents`, the none will becaomes 0 instead of getting from neighbors. [1]https://www.w3.org/TR/css-color-4/#interpolation-missing Bug: 40238188 Change-Id: Ie2da9c63780685ec92cd07a276bb44af57397ba0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6351513 Reviewed-by: Aaron Krajeski <aaronhk@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Rune Lillesveen <futhark@chromium.org> Auto-Submit: Jason Leo <m.jason.liu@gmail.com> Cr-Commit-Position: refs/heads/main@{#1432090} -- wpt-commits: 41c1306d3ebc5ab92ff76861bbb19f426358ab81 wpt-pr: 51321
39 lines
1.3 KiB
HTML
39 lines
1.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Gradient analogous missing components carry forward logic tests</title>
|
|
<link rel="author" title="CGQAQ" href="mailto:m.jason.liu@gmail.com">
|
|
<link rel="author" title="一丝" href="mailto:yiorsi@gmail.com">
|
|
<style>
|
|
.test {
|
|
margin: 10px 50px;
|
|
width: 200px;
|
|
height: 50px;
|
|
border: 1px solid black;
|
|
--color: lime;
|
|
}
|
|
|
|
.test1 {
|
|
background: linear-gradient(to right, var(--color));
|
|
}
|
|
.test2 {
|
|
background: linear-gradient(to right in srgb, var(--color));
|
|
}
|
|
.test3 {
|
|
background: linear-gradient(to right in oklab, var(--color));
|
|
}
|
|
.test4 {
|
|
background: linear-gradient(to right in display-p3, var(--color));
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>They should be equivalent to `background: color-mix(in srgb, color(srgb none 1 none), lime)`</p>
|
|
<div class="test test1">This should be a lime background.</div>
|
|
<div class="test test2">This should be a lime background.</div>
|
|
<div class="test test3">This should be a lime background.</div>
|
|
<div class="test test4">This should be a lime background.</div>
|
|
</body>
|
|
</html>
|