Remove explicit clamp to SRGB for Lab colors on CG platforms that sup…

…port wide color https://bugs.webkit.org/show_bug.cgi?id=220684 Reviewed by Simon Fraser. LayoutTests/imported/w3c: Update existing lab/lch tests to match new more precise values from web-platform-tests/wpt#27202 and add two new tests for colors outside the sRGB gamut that will be upstreamed to WPT after landing. * web-platform-tests/css/css-color/lab-001.html: * web-platform-tests/css/css-color/lab-002.html: * web-platform-tests/css/css-color/lab-003.html: * web-platform-tests/css/css-color/lab-004-expected.html: * web-platform-tests/css/css-color/lab-004.html: * web-platform-tests/css/css-color/lab-005-expected.html: * web-platform-tests/css/css-color/lab-005.html: * web-platform-tests/css/css-color/lab-006-expected.html: * web-platform-tests/css/css-color/lab-006.html: * web-platform-tests/css/css-color/lab-007-expected.html: * web-platform-tests/css/css-color/lab-007.html: * web-platform-tests/css/css-color/lab-008-expected.html: Added. * web-platform-tests/css/css-color/lab-008.html: Added. * web-platform-tests/css/css-color/lch-001.html: * web-platform-tests/css/css-color/lch-002.html: * web-platform-tests/css/css-color/lch-003.html: * web-platform-tests/css/css-color/lch-004-expected.html: * web-platform-tests/css/css-color/lch-004.html: * web-platform-tests/css/css-color/lch-005-expected.html: * web-platform-tests/css/css-color/lch-005.html: * web-platform-tests/css/css-color/lch-006-expected.html: * web-platform-tests/css/css-color/lch-006.html: * web-platform-tests/css/css-color/lch-007-expected.html: * web-platform-tests/css/css-color/lch-007.html: * web-platform-tests/css/css-color/lch-008-expected.html: Added. * web-platform-tests/css/css-color/lch-008.html: Added. Source/WebCore: To avoid clamping device independent colors to sRGB we convert colors without a direct CoreGraphics representation to ExtendedSRGB to ensure the full gamut is preserved. While CoreGraphics does support the Lab colorspace on some systems (Big Sur and later), to ensure all versions of WebKit can support wide color Lab this approach provides the most coverage. * platform/graphics/ColorConversion.cpp: * platform/graphics/ColorConversion.h: * platform/graphics/ColorTypes.h: Add support for ExtendedSRGBA and LinearExtendedSRGBA color types. * platform/graphics/cg/ColorCG.cpp: (WebCore::leakCGColor): Update fallback conversion to convert to an extended color space to avoid premature clamping. Canonical link: https://commits.webkit.org/233219@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@271712 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Jan 21, 2021 · 2ebcb2f · 2ebcb2f
1 parent 1cc6052
commit 2ebcb2f
Show file tree

Hide file tree

Showing 32 changed files with 377 additions and 89 deletions.
diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
@@ -1,3 +1,40 @@
+2021-01-21  Sam Weinig  <weinig@apple.com>
+
+        Remove explicit clamp to SRGB for Lab colors on CG platforms that support wide color
+        https://bugs.webkit.org/show_bug.cgi?id=220684
+
+        Reviewed by Simon Fraser.
+
+        Update existing lab/lch tests to match new more precise values from https://github.com/web-platform-tests/wpt/pull/27202
+        and add two new tests for colors outside the sRGB gamut that will be upstreamed to WPT after landing.
+
+        * web-platform-tests/css/css-color/lab-001.html:
+        * web-platform-tests/css/css-color/lab-002.html:
+        * web-platform-tests/css/css-color/lab-003.html:
+        * web-platform-tests/css/css-color/lab-004-expected.html:
+        * web-platform-tests/css/css-color/lab-004.html:
+        * web-platform-tests/css/css-color/lab-005-expected.html:
+        * web-platform-tests/css/css-color/lab-005.html:
+        * web-platform-tests/css/css-color/lab-006-expected.html:
+        * web-platform-tests/css/css-color/lab-006.html:
+        * web-platform-tests/css/css-color/lab-007-expected.html:
+        * web-platform-tests/css/css-color/lab-007.html:
+        * web-platform-tests/css/css-color/lab-008-expected.html: Added.
+        * web-platform-tests/css/css-color/lab-008.html: Added.
+        * web-platform-tests/css/css-color/lch-001.html:
+        * web-platform-tests/css/css-color/lch-002.html:
+        * web-platform-tests/css/css-color/lch-003.html:
+        * web-platform-tests/css/css-color/lch-004-expected.html:
+        * web-platform-tests/css/css-color/lch-004.html:
+        * web-platform-tests/css/css-color/lch-005-expected.html:
+        * web-platform-tests/css/css-color/lch-005.html:
+        * web-platform-tests/css/css-color/lch-006-expected.html:
+        * web-platform-tests/css/css-color/lch-006.html:
+        * web-platform-tests/css/css-color/lch-007-expected.html:
+        * web-platform-tests/css/css-color/lch-007.html:
+        * web-platform-tests/css/css-color/lch-008-expected.html: Added.
+        * web-platform-tests/css/css-color/lch-008.html: Added.
+
 2021-01-21  Tyler Wilcock  <twilco.o@protonmail.com>
 
         Import css-variables WPTs

diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-001.html
@@ -6,12 +6,10 @@
 <link rel="match" href="greensquare-ref.html">
 <meta name="assert" content="lab() with no alpha">
 <style>
-    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
-    .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0}
-    .test { background-color: lab(46.277% -47.562 48.583)} /* green (sRGB #008000) converted to Lab */
+    .test { background-color: red; width: 12em; height: 12em; }
+    .test { background-color: lab(46.2775% -47.5621 48.5837); } /* green (sRGB #008000) converted to Lab */
 </style>
 <body>
     <p>Test passes if you see a green square, and no red.</p>
-    <p class="ref"> </p>
-    <p class="test"> </p>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-002.html
@@ -3,13 +3,13 @@
 <title>CSS Color 4: Specifying Lab and LCH</title>
 <link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
 <link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch">
-<link rel="match" href="blackblock-ref.html">
+<link rel="match" href="blacksquare-ref.html">
 <meta name="assert" content="lab() with no alpha">
 <style>
     .test { background-color: red; width: 12em; height: 12em; }
-    .test { background-color: lab(0% 0 0) } /* black (sRGB #000000) converted to Lab */
+    .test { background-color: lab(0% 0 0); } /* black (sRGB #000000) converted to Lab */
 </style>
 <body>
     <p>Test passes if you see a black square, and no red.</p>
-    <p class="test"> </p>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-003.html
@@ -3,14 +3,14 @@
 <title>CSS Color 4: Specifying Lab and LCH</title>
 <link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
 <link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch">
-<link rel="match" href="whiteblock-ref.html">
+<link rel="match" href="whitesquare-ref.html">
 <meta name="assert" content="lab() with no alpha">
 <style>
     body { background-color: grey; }
     .test { background-color: red; width: 12em; height: 12em; }
-    .test { background-color: lab(100% 0 0);} /* white (sRGB #FFFFFF) converted to Lab */
+    .test { background-color: lab(100% 0 0); } /* white (sRGB #FFFFFF) converted to Lab */
 </style>
 <body>
     <p>Test passes if you see a white square, and no red.</p>
-    <p class="test"> </p>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-004-expected.html
@@ -2,9 +2,9 @@
 <meta charset="utf-8">
 <title>CSS Color 4: Specifying Lab and LCH</title>
 <style>
-    .test { background-color:rgb(75.62% 30.45% 47.56%); width: 12em; height: 12em;} /* lab(50 50 0) converted to sRGB */
+    .test { background-color: rgb(75.6208% 30.4487% 47.5634%); width: 12em; height: 12em; } /* lab(50% 50 0) converted to sRGB */
 </style>
 <body>
     <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
-    <p class="test"> </p>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-004.html
@@ -6,12 +6,12 @@
 <link rel="match" href="lab-004-ref.html">
 <meta name="assert" content="lab() with no alpha, positive a axis">
 <style>
-    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
-    .ref { background-color: rgb(75.62%, 30.45%, 47.56%); width: 12em; height: 6em; margin-bottom: 0}/* lab(50 50 0) converted to sRGB */
-    .test { background-color: lab(50% 50 0)} 
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(75.6208% 30.4487% 47.5634%); width: 12em; height: 6em; margin-bottom: 0; }/* lab(50% 50 0) converted to sRGB */
+    .test { background-color: lab(50% 50 0); }
 </style>
 <body>
     <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
-    <p class="ref"> </p>
-    <p class="test"> </p>
+    <div class="ref"></div>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-005-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-005-expected.html
@@ -2,9 +2,9 @@
 <meta charset="utf-8">
 <title>CSS Color 4: Specifying Lab and LCH</title>
 <style>
-    .test { background-color: rgb(10.79%, 75.55%, 66.40%); width: 12em; height: 12em;} /* lab(70 -45 0) converted to sRGB */
+    .test { background-color: rgb(10.7906% 75.5567% 66.3982%); width: 12em; height: 12em; } /* lab(70% -45 0) converted to sRGB */
 </style>
 <body>
     <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
-    <p class="test"> </p>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-005.html
@@ -6,12 +6,12 @@
 <link rel="match" href="lab-005-ref.html">
 <meta name="assert" content="lab() with no alpha, negative a axis">
 <style>
-    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
-    .ref { background-color: rgb(10.79%, 75.55%, 66.40%); width: 12em; height: 6em; margin-bottom: 0} /* lab(70 -45 0) converted to sRGB */
-    .test { background-color: lab(70% -45 0)} 
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(10.7906% 75.5567% 66.3982%); width: 12em; height: 6em; margin-bottom: 0; } /* lab(70% -45 0) converted to sRGB */
+    .test { background-color: lab(70% -45 0); }
 </style>
 <body>
     <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
-    <p class="ref"> </p>
-    <p class="test"> </p>
+    <div class="ref"></div>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-006-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-006-expected.html
@@ -2,9 +2,9 @@
 <meta charset="utf-8">
 <title>CSS Color 4: Specifying Lab and LCH</title>
 <style>
-    .test { background-color: rgb(76.62%, 66.36%, 5.58%); width: 12em; height: 12em;} /* lab(70 0 70) converted to sRGB */
+    .test { background-color: rgb(76.6254% 66.3607% 5.5775%); width: 12em; height: 12em; } /* lab(70% 0 70) converted to sRGB */
 </style>
 <body>
     <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
-    <p class="test"> </p>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-006.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-006.html
@@ -6,12 +6,12 @@
 <link rel="match" href="lab-006-ref.html">
 <meta name="assert" content="lab() with no alpha, positive b axis">
 <style>
-    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
-    .ref { background-color: rgb(76.62%, 66.36%, 5.58%); width: 12em; height: 6em; margin-bottom: 0} /* lab(70 0 70) converted to sRGB */
-    .test { background-color: lab(70% 0 70)} 
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(76.6254% 66.3607% 5.5775%); width: 12em; height: 6em; margin-bottom: 0; } /* lab(70% 0 70) converted to sRGB */
+    .test { background-color: lab(70% 0 70); }
 </style>
 <body>
     <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
-    <p class="ref"> </p>
-    <p class="test"> </p>
+    <div class="ref"></div>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-007-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-007-expected.html
@@ -2,9 +2,9 @@
 <meta charset="utf-8">
 <title>CSS Color 4: Specifying Lab and LCH</title>
 <style>
-    .test { background-color: rgb(12.81%, 53.10%, 92.76%); width: 12em; height: 12em;} /* lab(55 0 -60) converted to sRGB */
+    .test { background-color: rgb(12.8128% 53.105% 92.7645%); width: 12em; height: 12em; } /* lab(55% 0 -60) converted to sRGB */
 </style>
 <body>
     <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
-    <p class="test"> </p>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-007.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-007.html
@@ -6,12 +6,12 @@
 <link rel="match" href="lab-007-ref.html">
 <meta name="assert" content="lab() with no alpha, negative b axis">
 <style>
-    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
-    .ref { background-color: rgb(12.81%, 53.10%, 92.76%); width: 12em; height: 6em; margin-bottom: 0} /* lab(55 0 -60) converted to sRGB */
-    .test { background-color: lab(55% 0 -60)} 
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(12.8128% 53.105% 92.7645%); width: 12em; height: 6em; margin-bottom: 0; } /* lab(55% 0 -60) converted to sRGB */
+    .test { background-color: lab(55% 0 -60); }
 </style>
 <body>
     <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
-    <p class="ref"> </p>
-    <p class="test"> </p>
+    <div class="ref"></div>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-008-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-008-expected.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: Specifying Lab and LCH</title>
+<style>
+    .test { background-color: color(display-p3 0 1 0); width: 12em; height: 12em; }
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <p class="test"> </p>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-008.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lab-008.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: Specifying Lab and LCH</title>
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch">
+<link rel="match" href="lab-008-ref.html">
+<meta name="assert" content="lab() outside the sRGB gamut">
+<style>
+    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
+    .ref { background-color: color(display-p3 0 1 0); width: 12em; height: 6em; margin-bottom: 0; }
+    .test { background-color: lab(86.6146% -106.5599 102.8717); }
+</style>
+<body>
+    <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
+    <p class="ref"> </p>
+    <p class="test"> </p>
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-001.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-001.html
@@ -3,15 +3,13 @@
 <title>CSS Color 4: Specifying Lab and LCH</title>
 <link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
 <link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch">
-<link rel="match" href="greenblock-ref.html">
+<link rel="match" href="greensquare-ref.html">
 <meta name="assert" content="lch() with no alpha">
 <style>
-    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
-    .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0}
-    .test { background-color: lch(46.277% 67.945 134.427)} /* green (sRGB #008000) converted to LCH */
+    .test { background-color: red; width: 12em; height: 12em; }
+    .test { background-color: lch(46.2775% 67.9892 134.3912); } /* green (sRGB #008000) converted to LCH */
 </style>
 <body>
     <p>Test passes if you see a green square, and no red.</p>
-    <p class="ref"> </p>
-    <p class="test"> </p>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-002.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-002.html
@@ -3,13 +3,13 @@
 <title>CSS Color 4: Specifying Lab and LCH</title>
 <link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
 <link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch">
-<link rel="match" href="blackblock-ref.html">
+<link rel="match" href="blacksquare-ref.html">
 <meta name="assert" content="lch() with no alpha">
 <style>
     .test { background-color: red; width: 12em; height: 12em; }
-    .test { background-color: lch(0% 0 0) } /* black (sRGB #000000) converted to Lab */
+    .test { background-color: lch(0% 0 0); } /* black (sRGB #000000) converted to LCH */
 </style>
 <body>
     <p>Test passes if you see a black square, and no red.</p>
-    <p class="test"> </p>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-003.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-003.html
@@ -3,14 +3,14 @@
 <title>CSS Color 4: Specifying Lab and LCH</title>
 <link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
 <link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch">
-<link rel="match" href="whitetext-ref.html">
+<link rel="match" href="whitesquare-ref.html">
 <meta name="assert" content="lch() with no alpha">
 <style>
     body { background-color: grey; }
     .test { background-color: red; width: 12em; height: 12em; }
-    .test { background-color: lch(100% 0 0);} /* white (sRGB #FFFFFF) converted to Lab */
+    .test { background-color: lch(100% 0 0); } /* white (sRGB #FFFFFF) converted to LCH */
 </style>
 <body>
     <p>Test passes if you see a white square, and no red.</p>
-    <p class="test"> </p>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-004-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-004-expected.html
@@ -2,9 +2,9 @@
 <meta charset="utf-8">
 <title>CSS Color 4: Specifying Lab and LCH</title>
 <style>
-    .test { background-color:rgb(75.62% 30.45% 47.56%); width: 12em; height: 12em;} /* lch(50 50 0) converted to sRGB (happens to be the same as lab(50 50 0)*/
+    .test { background-color: rgb(75.6208% 30.4487% 47.5634%); width: 12em; height: 12em; } /* lch(50% 50 0) converted to sRGB (happens to be the same as lab(50% 50 0)) */
 </style>
 <body>
     <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
-    <p class="test"> </p>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-004.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-004.html
@@ -4,14 +4,14 @@
 <link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
 <link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch">
 <link rel="match" href="lch-004-ref.html">
-<meta name="assert" content="lch() with no alpha, positive a axis">
+<meta name="assert" content="lch() with no alpha, positive a axis (when converted to Lab)">
 <style>
-    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
-    .ref { background-color: rgb(75.62%, 30.45%, 47.56%); width: 12em; height: 6em; margin-bottom: 0} /* lch(50 50 0) converted to sRGB (happens to be the same as lab(50 50 0)*/
-    .test { background-color: lch(50% 50 0)} 
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(75.6208% 30.4487% 47.5634%); width: 12em; height: 6em; margin-bottom: 0; } /* lch(50% 50 0) converted to sRGB (happens to be the same as lab(50% 50 0)) */
+    .test { background-color: lch(50% 50 0); }
 </style>
 <body>
     <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
-    <p class="ref"> </p>
-    <p class="test"> </p>
+    <div class="ref"></div>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-005-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-005-expected.html
@@ -2,9 +2,9 @@
 <meta charset="utf-8">
 <title>CSS Color 4: Specifying Lab and LCH</title>
 <style>
-    .test { background-color: rgb(10.79%, 75.55%, 66.40%); width: 12em; height: 12em;} /* lch(70 45 180) converted to sRGB */
+    .test { background-color: rgb(10.7906% 75.5567% 66.3982%); width: 12em; height: 12em; } /* lch(70% 45 180) converted to sRGB */
 </style>
 <body>
     <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
-    <p class="test"> </p>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-005.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-005.html
@@ -4,14 +4,14 @@
 <link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
 <link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch">
 <link rel="match" href="lch-005-ref.html">
-<meta name="assert" content="lch() with no alpha, negative a axis">
+<meta name="assert" content="lch() with no alpha, negative a axis (when converted to Lab)">
 <style>
-    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
-    .ref { background-color: rgb(10.79%, 75.55%, 66.40%); width: 12em; height: 6em; margin-bottom: 0} /* lch(70 45 180) converted to sRGB */
-    .test { background-color: lch(70% 45 -180)} 
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(10.7906% 75.5567% 66.3982%); width: 12em; height: 6em; margin-bottom: 0; } /* lch(70% 45 180) converted to sRGB */
+    .test { background-color: lch(70% 45 -180); }
 </style>
 <body>
     <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
-    <p class="ref"> </p>
-    <p class="test"> </p>
+    <div class="ref"></div>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-006-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-006-expected.html
@@ -2,9 +2,9 @@
 <meta charset="utf-8">
 <title>CSS Color 4: Specifying Lab and LCH</title>
 <style>
-    .test { background-color: rgb(76.62%, 66.36%, 5.58%); width: 12em; height: 12em;} /* lch(70 70 90) converted to sRGB */
+    .test { background-color: rgb(76.6254% 66.3607% 5.5775%); width: 12em; height: 12em; } /* lch(70% 70 90) converted to sRGB */
 </style>
 <body>
     <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
-    <p class="test"> </p>
+    <div class="test"></div>
 </body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-006.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-color/lch-006.html
@@ -4,14 +4,14 @@
 <link rel="author" title="Chris Lilley" href="mailto:chris@w3.org">
 <link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch">
 <link rel="match" href="lch-006-ref.html">
-<meta name="assert" content="lch() with no alpha, positive b axis">
+<meta name="assert" content="lch() with no alpha, positive b axis (when converted to Lab)">
 <style>
-    .test { background-color: red; width: 12em; height: 6em; margin-top:0}
-    .ref { background-color: rgb(76.62%, 66.36%, 5.58%); width: 12em; height: 6em; margin-bottom: 0} /* lch(70 70 90) converted to sRGB */
-    .test { background-color: lch(70% 70 90)} 
+    .test { background-color: red; width: 12em; height: 6em; margin-top: 0; }
+    .ref { background-color: rgb(76.6254% 66.3607% 5.5775%); width: 12em; height: 6em; margin-bottom: 0; } /* lch(70% 70 90) converted to sRGB */
+    .test { background-color: lch(70% 70 90); }
 </style>
 <body>
     <p>Test passes if you see a single square, and not two rectangles of different colors.</p>
-    <p class="ref"> </p>
-    <p class="test"> </p>
+    <div class="ref"></div>
+    <div class="test"></div>
 </body>