Map lightness 0/100 to black/white just before drawing
This allows external/wpt/css/css-color/lch-009.html,
external/wpt/css/css-color/lch-010.html,
external/wpt/css/css-color/oklch-009.html and
external/wpt/css/css-color/oklch-010.html to pass.
Since these tests all use "whitesquare-ref.html", I had to change some
of them to match the ref. I'm not sure why the drifted away from it.
All conversions, parsing and serialization do not take into account this
special gamut mapping, instead we convert (ok)lab/lch colors with
lightness <= 0 to black and lightness >= 100 to sRGB white just before
sending to paint_flags/cc/skia by leveraging the toSkColor4f function.
This extra gamut mapping step means that we had to get toSkColor4f out
of all internal conversions. Also, (ok)lab/lch colors with lightness
outside of the range (0, 100) can no longer be used as references.
Bug: 1440069
Change-Id: I1d1a8324d624df49ec3336f431430082062a6707
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4928209
Reviewed-by: Yi Xu <yiyix@chromium.org>
Commit-Queue: Aaron Krajeski <aaronhk@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1214225}
diff --git a/css/css-color/lch-009.html b/css/css-color/lch-009.html
index 472e7c1..375fd08 100644
--- a/css/css-color/lch-009.html
+++ b/css/css-color/lch-009.html
@@ -7,10 +7,10 @@
<meta name="assert" content="lch() with no alpha">
<style>
body { background-color: grey; }
- .test { background-color: hsl(47, 100%, 63%); width: 12em; height: 12em; }
+ .test { background-color: hsl(0, 100%, 63%); width: 12em; height: 12em; }
.test { background-color: lch(100% 110 60); } /* l = 100% should always be white */
</style>
<body>
- <p>Test passes if you see a white square, and no yellow.</p>
+ <p>Test passes if you see a white square, and no red.</p>
<div class="test"></div>
</body>
diff --git a/css/css-color/lch-010.html b/css/css-color/lch-010.html
index 527e9cc..965e05f 100644
--- a/css/css-color/lch-010.html
+++ b/css/css-color/lch-010.html
@@ -6,10 +6,10 @@
<link rel="match" href="blacksquare-ref.html">
<meta name="assert" content="lch() with no alpha">
<style>
- .test { background-color: hsl(360, 100%, 15%); width: 12em; height: 12em; }
+ .test { background-color: hsl(0, 100%, 63%); width: 12em; height: 12em; }
.test { background-color: lch(0% 110 60); } /* l = 0% should always be black */
</style>
<body>
- <p>Test passes if you see a black square, and no dark red.</p>
+ <p>Test passes if you see a black square, and no red.</p>
<div class="test"></div>
</body>
diff --git a/css/css-color/oklch-009.html b/css/css-color/oklch-009.html
index 5a4924a..1882c47 100644
--- a/css/css-color/oklch-009.html
+++ b/css/css-color/oklch-009.html
@@ -8,10 +8,10 @@
<meta name="assert" content="oklch() with no alpha">
<style>
body { background-color: grey; }
- .test { background-color: hsl(120, 100%, 50%); width: 12em; height: 12em; }
+ .test { background-color: hsl(0, 100%, 50%); width: 12em; height: 12em; }
.test { background-color: oklch(100% 110 60); } /* l = 100% should always be white */
</style>
<body>
- <p>Test passes if you see a white square, and no green.</p>
+ <p>Test passes if you see a white square, and no red.</p>
<div class="test"></div>
</body>
diff --git a/css/css-color/oklch-010.html b/css/css-color/oklch-010.html
index 091b760..b5f9ac2 100644
--- a/css/css-color/oklch-010.html
+++ b/css/css-color/oklch-010.html
@@ -7,10 +7,10 @@
<link rel="match" href="blacksquare-ref.html">
<meta name="assert" content="oklch() with no alpha">
<style>
- .test { background-color: hsl(120, 100%, 50%); width: 12em; height: 12em; }
+ .test { background-color: hsl(0, 100%, 50%); width: 12em; height: 12em; }
.test { background-color: oklch(0% 1.1 60); } /* l = 0% should always be black */
</style>
<body>
- <p>Test passes if you see a black square, and no green.</p>
+ <p>Test passes if you see a black square, and no red.</p>
<div class="test"></div>
</body>
diff --git a/css/css-color/xyz-d50-003-ref.html b/css/css-color/xyz-d50-003-ref.html
index 51f565e..4223a51 100644
--- a/css/css-color/xyz-d50-003-ref.html
+++ b/css/css-color/xyz-d50-003-ref.html
@@ -3,7 +3,7 @@
<title>CSS Color 4: CSS Color 4: xyz-d50</title>
<style>
body { background-color: grey; }
- .test { background-color: lab(100% 6.1097 -13.2268); width: 12em; height: 12em; } /* color(xyz-d50 1 1 1) converted to Lab */
+ .test { background-color: color(srgb 1.01139 0.987129 1.10222); width: 12em; height: 12em; } /* color(xyz-d50 1 1 1) converted to srgb*/
</style>
<body>
<p>Test passes if you see a single square, and not two rectangles of different colors.</p>
diff --git a/css/css-color/xyz-d50-003.html b/css/css-color/xyz-d50-003.html
index 036bcb6..7630115 100644
--- a/css/css-color/xyz-d50-003.html
+++ b/css/css-color/xyz-d50-003.html
@@ -8,7 +8,7 @@
<style>
body { background-color: grey; }
.test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
- .ref { background-color: lab(100% 6.1097 -13.2268); width: 12em; height: 6em; margin-bottom: 0; } /* color(xyz-d50 1 1 1) converted to Lab */
+ .ref { background-color: color(srgb 1.01139 0.987129 1.10222); width: 12em; height: 6em; margin-bottom: 0; } /* color(xyz-d50 1 1 1) converted to sRGB */
.test { background-color: color(xyz-d50 1 1 1); }
</style>
<body>
diff --git a/css/css-color/xyz-d50-004-ref.html b/css/css-color/xyz-d50-004-ref.html
index 9d211ae..4d1c08f 100644
--- a/css/css-color/xyz-d50-004-ref.html
+++ b/css/css-color/xyz-d50-004-ref.html
@@ -2,7 +2,7 @@
<meta charset="utf-8">
<title>CSS Color 4: CSS Color 4: xyz-d50</title>
<style>
- .test { background-color: lab(100% -431.0345 172.4138); width: 12em; height: 12em; } /* color(xyz-d50 0 1 0) converted to Lab */
+ .test { background-color: color(srgb -1.20716 1.3163 -0.489014); width: 12em; height: 12em; } /* color(xyz-d50 0 1 0) converted to srgb */
</style>
<body>
<p>Test passes if you see a single square, and not two rectangles of different colors.</p>
diff --git a/css/css-color/xyz-d50-004.html b/css/css-color/xyz-d50-004.html
index cc17859..f4aa9a0 100644
--- a/css/css-color/xyz-d50-004.html
+++ b/css/css-color/xyz-d50-004.html
@@ -7,7 +7,7 @@
<meta name="assert" content="xyz-d50 with no alpha">
<style>
.test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
- .ref { background-color: lab(100% -431.0345 172.4138); width: 12em; height: 6em; margin-bottom: 0; } /* color(xyz-d50 0 1 0) converted to Lab */
+ .ref { background-color: color(srgb -1.20716 1.3163 -0.489014); width: 12em; height: 6em; margin-bottom: 0; } /* color(xyz-d50 0 1 0) converted to sRGB */
.test { background-color: color(xyz-d50 0 1 0); }
</style>
<body>
