Implement input validation for CSSColorValues

https://bugs.webkit.org/show_bug.cgi?id=247167 Reviewed by Antti Koivisto. Implement input validation for CSSColorValues: - https://drafts.css-houdini.org/css-typed-om/#csshsl - https://drafts.css-houdini.org/css-typed-om/#csshwb - https://drafts.css-houdini.org/css-typed-om/#csslab - https://drafts.css-houdini.org/css-typed-om/#csslch - https://drafts.css-houdini.org/css-typed-om/#cssoklab - https://drafts.css-houdini.org/css-typed-om/#cssoklch * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/resources/testhelper.js: (assert_color_channel_approx_equals): * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssHSL-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssHSL.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssHWB-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssHWB.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssLCH-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssLCH.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssLab-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssLab.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssOKLCH-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssOKLCH.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssOKLab-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssOKLab.html: Added. * Source/WebCore/css/typedom/color/CSSColorValue.cpp: (WebCore::CSSColorValue::rectifyCSSColorAngle): (WebCore::CSSColorValue::rectifyCSSColorNumber): (WebCore::CSSColorValue::toCSSColorPercent): (WebCore::CSSColorValue::toCSSColorAngle): (WebCore::CSSColorValue::toCSSColorNumber): * Source/WebCore/css/typedom/color/CSSColorValue.h: * Source/WebCore/css/typedom/color/CSSHSL.cpp: (WebCore::CSSHSL::create): (WebCore::CSSHSL::CSSHSL): (WebCore::CSSHSL::h const): (WebCore::CSSHSL::setH): (WebCore::CSSHSL::s const): (WebCore::CSSHSL::setS): (WebCore::CSSHSL::l const): (WebCore::CSSHSL::setL): (WebCore::CSSHSL::alpha const): (WebCore::CSSHSL::setAlpha): * Source/WebCore/css/typedom/color/CSSHSL.h: (WebCore::CSSHSL::create): Deleted. (WebCore::CSSHSL::h const): Deleted. (WebCore::CSSHSL::setH): Deleted. (WebCore::CSSHSL::s const): Deleted. (WebCore::CSSHSL::setS): Deleted. (WebCore::CSSHSL::l const): Deleted. (WebCore::CSSHSL::setL): Deleted. (WebCore::CSSHSL::alpha const): Deleted. (WebCore::CSSHSL::setAlpha): Deleted. * Source/WebCore/css/typedom/color/CSSHWB.cpp: (WebCore::CSSHWB::create): (WebCore::CSSHWB::CSSHWB): (WebCore::CSSHWB::h const): (WebCore::CSSHWB::setH): (WebCore::CSSHWB::w const): (WebCore::CSSHWB::setW): (WebCore::CSSHWB::b const): (WebCore::CSSHWB::setB): (WebCore::CSSHWB::alpha const): (WebCore::CSSHWB::setAlpha): * Source/WebCore/css/typedom/color/CSSHWB.h: (WebCore::CSSHWB::create): Deleted. (WebCore::CSSHWB::h const): Deleted. (WebCore::CSSHWB::setH): Deleted. (WebCore::CSSHWB::w const): Deleted. (WebCore::CSSHWB::setW): Deleted. (WebCore::CSSHWB::b const): Deleted. (WebCore::CSSHWB::setB): Deleted. (WebCore::CSSHWB::alpha const): Deleted. (WebCore::CSSHWB::setAlpha): Deleted. * Source/WebCore/css/typedom/color/CSSLCH.cpp: (WebCore::CSSLCH::create): (WebCore::CSSLCH::CSSLCH): (WebCore::CSSLCH::l const): (WebCore::CSSLCH::setL): (WebCore::CSSLCH::c const): (WebCore::CSSLCH::setC): (WebCore::CSSLCH::h const): (WebCore::CSSLCH::setH): (WebCore::CSSLCH::alpha const): (WebCore::CSSLCH::setAlpha): * Source/WebCore/css/typedom/color/CSSLCH.h: (WebCore::CSSLCH::create): Deleted. (WebCore::CSSLCH::l const): Deleted. (WebCore::CSSLCH::setL): Deleted. (WebCore::CSSLCH::c const): Deleted. (WebCore::CSSLCH::setC): Deleted. (WebCore::CSSLCH::h const): Deleted. (WebCore::CSSLCH::setH): Deleted. (WebCore::CSSLCH::alpha const): Deleted. (WebCore::CSSLCH::setAlpha): Deleted. * Source/WebCore/css/typedom/color/CSSLab.cpp: (WebCore::CSSLab::create): (WebCore::CSSLab::CSSLab): (WebCore::CSSLab::l const): (WebCore::CSSLab::setL): (WebCore::CSSLab::a const): (WebCore::CSSLab::setA): (WebCore::CSSLab::b const): (WebCore::CSSLab::setB): (WebCore::CSSLab::alpha const): (WebCore::CSSLab::setAlpha): * Source/WebCore/css/typedom/color/CSSLab.h: (WebCore::CSSLab::create): Deleted. (WebCore::CSSLab::l const): Deleted. (WebCore::CSSLab::setL): Deleted. (WebCore::CSSLab::a const): Deleted. (WebCore::CSSLab::setA): Deleted. (WebCore::CSSLab::b const): Deleted. (WebCore::CSSLab::setB): Deleted. (WebCore::CSSLab::alpha const): Deleted. (WebCore::CSSLab::setAlpha): Deleted. * Source/WebCore/css/typedom/color/CSSOKLCH.cpp: (WebCore::CSSOKLCH::create): (WebCore::CSSOKLCH::CSSOKLCH): (WebCore::CSSOKLCH::l const): (WebCore::CSSOKLCH::setL): (WebCore::CSSOKLCH::c const): (WebCore::CSSOKLCH::setC): (WebCore::CSSOKLCH::h const): (WebCore::CSSOKLCH::setH): (WebCore::CSSOKLCH::alpha const): (WebCore::CSSOKLCH::setAlpha): * Source/WebCore/css/typedom/color/CSSOKLCH.h: (WebCore::CSSOKLCH::create): Deleted. (WebCore::CSSOKLCH::l const): Deleted. (WebCore::CSSOKLCH::setL): Deleted. (WebCore::CSSOKLCH::c const): Deleted. (WebCore::CSSOKLCH::setC): Deleted. (WebCore::CSSOKLCH::h const): Deleted. (WebCore::CSSOKLCH::setH): Deleted. (WebCore::CSSOKLCH::alpha const): Deleted. (WebCore::CSSOKLCH::setAlpha): Deleted. * Source/WebCore/css/typedom/color/CSSOKLab.cpp: (WebCore::CSSOKLab::create): (WebCore::CSSOKLab::CSSOKLab): (WebCore::CSSOKLab::l const): (WebCore::CSSOKLab::setL): (WebCore::CSSOKLab::a const): (WebCore::CSSOKLab::setA): (WebCore::CSSOKLab::b const): (WebCore::CSSOKLab::setB): (WebCore::CSSOKLab::alpha const): (WebCore::CSSOKLab::setAlpha): * Source/WebCore/css/typedom/color/CSSOKLab.h: (WebCore::CSSOKLab::create): Deleted. (WebCore::CSSOKLab::l const): Deleted. (WebCore::CSSOKLab::setL): Deleted. (WebCore::CSSOKLab::a const): Deleted. (WebCore::CSSOKLab::setA): Deleted. (WebCore::CSSOKLab::b const): Deleted. (WebCore::CSSOKLab::setB): Deleted. (WebCore::CSSOKLab::alpha const): Deleted. (WebCore::CSSOKLab::setAlpha): Deleted. * Source/WebCore/css/typedom/color/CSSRGB.h: Canonical link: https://commits.webkit.org/256229@main
WebKit · Nov 2, 2022 · 4e3531dd8b179697e87ed54b0a601b4f4118629b · 4e3531d
1 parent fd2b5bf
commit 4e3531dd8b179697e87ed54b0a601b4f4118629b
Show file tree

Hide file tree

Showing 28 changed files with 1,084 additions and 147 deletions.
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/resources/testhelper.js b/LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/resources/testhelper.js
@@ -31,6 +31,9 @@ function assert_color_channel_approx_equals(a, b) {
         assert_approx_equals(a[i].value, b[i].value, epsilonForUnitType(a.unit));
       }
       break;
+    case 'CSSKeywordValue':
+        assert_equals(a.value, b.value);
+        break;
     default:
       assert_equals(a.unit, b.unit);
       assert_approx_equals(a.value, b.value, epsilonForUnitType(a.unit));

diff --git a/...mported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssHSL-expected.txt b/...mported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssHSL-expected.txt
@@ -1,23 +1,26 @@
 
+PASS Constructing a CSSHSL with a number for the hue works as intended.
+PASS CSSHSL.h can be updated with a a number.
 PASS Constructing a CSSHSL with degrees for the hue works as intended.
 PASS CSSHSL.h can be updated with a degrees.
 PASS Constructing a CSSHSL with radians for the hue works as intended.
 PASS CSSHSL.h can be updated with a radians.
 PASS Constructing a CSSHSL with gradians for the hue works as intended.
 PASS CSSHSL.h can be updated with a gradians.
-FAIL Constructing a CSSHSL with a number for hue throws a type error. assert_throws_js: function "() => new CSSHSL(hue, 0, 0)" did not throw
-FAIL Constructing a CSSHSL with css pixels for hue throws a type error. assert_throws_js: function "() => new CSSHSL(hue, 0, 0)" did not throw
-FAIL Constructing a CSSHSL with undefined for hue throws a type error. assert_throws_js: function "() => new CSSHSL(hue, 0, 0)" did not throw
-FAIL CSSHSL can be constructed from three numbers and will get an alpha of 100%. assert_equals: expected "CSSUnitValue" but got "Number"
-FAIL CSSHSL can be constructed from four numbers. assert_equals: expected "CSSUnitValue" but got "Number"
-FAIL Constructing a CSSHSL with CSS.number for s, l or alpha throws a TypeError assert_throws_js: function "() => new CSSHSL(CSS.deg(0), CSS.number(1), 0, 0)" did not throw
-FAIL Updating a CSSHSL with CSS.number for s throws a TypeError assert_throws_js: function "() => result[attr] = CSS.number(1)" did not throw
-FAIL CSSHSL.s can be updated to a number. assert_equals: expected "CSSUnitValue" but got "Number"
+PASS Constructing a CSSHSL with undefined for the hue works as intended.
+PASS CSSHSL.h can be updated with a undefined.
+PASS Constructing a CSSHSL with css pixels for hue throws a SyntaxError.
+PASS Constructing a CSSHSL with css em for hue throws a SyntaxError.
+PASS CSSHSL can be constructed from three numbers and will get an alpha of 100%.
+PASS CSSHSL can be constructed from four numbers.
+PASS Constructing a CSSHSL with CSS.number for s, l or alpha throws a TypeError
+PASS Updating a CSSHSL with CSS.number for s throws a SyntaxError
+PASS CSSHSL.s can be updated to a number.
 PASS CSSHSL.s can be updated with a CSS percent.
-FAIL Updating a CSSHSL with CSS.number for l throws a TypeError assert_throws_js: function "() => result[attr] = CSS.number(1)" did not throw
-FAIL CSSHSL.l can be updated to a number. assert_equals: expected "CSSUnitValue" but got "Number"
+PASS Updating a CSSHSL with CSS.number for l throws a SyntaxError
+PASS CSSHSL.l can be updated to a number.
 PASS CSSHSL.l can be updated with a CSS percent.
-FAIL Updating a CSSHSL with CSS.number for alpha throws a TypeError assert_throws_js: function "() => result[attr] = CSS.number(1)" did not throw
-FAIL CSSHSL.alpha can be updated to a number. assert_equals: expected "CSSUnitValue" but got "Number"
+PASS Updating a CSSHSL with CSS.number for alpha throws a SyntaxError
+PASS CSSHSL.alpha can be updated to a number.
 PASS CSSHSL.alpha can be updated with a CSS percent.
 
diff --git a/...tTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssHSL.html b/...tTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssHSL.html
@@ -8,35 +8,38 @@
 <script>
 'use strict';
 
+const gUndefinedKeyword = new CSSKeywordValue("undefined");
+
 const gValidHueInputs = [
-  {hue: CSS.deg(180), desc: 'degrees'},
-  {hue: CSS.rad(1), desc: 'radians'},
-  {hue: CSS.grad(81), desc: 'gradians'},
+  {hue: 180, desc: "a number", expected: CSS.deg(180)},
+  {hue: CSS.deg(180), desc: 'degrees', expected: CSS.deg(180)},
+  {hue: CSS.rad(1), desc: 'radians', expected: CSS.rad(1)},
+  {hue: CSS.grad(81), desc: 'gradians', expected: CSS.grad(81)},
+  {hue: undefined, desc: "undefined", expected: gUndefinedKeyword},
 ];
 
 const gInvalidHueInputs = [
-  {hue: 180, desc: "a number"},
   {hue: CSS.px(1), desc: "css pixels"},
-  {hue: undefined, desc: "undefined"},
+  {hue: CSS.em(1), desc: "css em"},
 ]
 
-for (const {hue, desc} of gValidHueInputs) {
+for (const {hue, desc, expected} of gValidHueInputs) {
   test(() => {
     const result = new CSSHSL(hue, 0.5, 0.5);
-    assert_color_channel_approx_equals(result.h, hue);
+    assert_color_channel_approx_equals(result.h, expected);
   }, `Constructing a CSSHSL with ${desc} for the hue works as intended.`);
 
   test(() => {
     const result = new CSSHSL(CSS.deg(0), 0.5, 0.5);
     result.h = hue;
-    assert_color_channel_approx_equals(result.h, hue);
+    assert_color_channel_approx_equals(result.h, expected);
   }, `CSSHSL.h can be updated with a ${desc}.`);
 }
 
 for (const {hue, desc} of gInvalidHueInputs) {
   test(() => {
-    assert_throws_js(TypeError, () => new CSSHSL(hue, 0, 0));
-  }, `Constructing a CSSHSL with ${desc} for hue throws a type error.`);
+    assert_throws_dom("SyntaxError", () => new CSSHSL(hue, 0, 0));
+  }, `Constructing a CSSHSL with ${desc} for hue throws a SyntaxError.`);
 }
 
 test(() => {
@@ -56,16 +59,16 @@
 }, 'CSSHSL can be constructed from four numbers.');
 
 test(() => {
-  assert_throws_js(TypeError, () => new CSSHSL(CSS.deg(0), CSS.number(1), 0, 0));
-  assert_throws_js(TypeError, () => new CSSHSL(CSS.deg(0), 0, CSS.number(1), 0));
-  assert_throws_js(TypeError, () => new CSSHSL(CSS.deg(0), 0, 0, CSS.number(1)));
+  assert_throws_dom("SyntaxError", () => new CSSHSL(CSS.deg(0), CSS.number(1), 0, 0));
+  assert_throws_dom("SyntaxError", () => new CSSHSL(CSS.deg(0), 0, CSS.number(1), 0));
+  assert_throws_dom("SyntaxError", () => new CSSHSL(CSS.deg(0), 0, 0, CSS.number(1)));
 }, `Constructing a CSSHSL with CSS.number for s, l or alpha throws a TypeError`);
 
 for (const attr of ['s', 'l', 'alpha']) {
   test(() => {
     const result = new CSSHSL(CSS.deg(0), 0, 0);
-    assert_throws_js(TypeError, () => result[attr] = CSS.number(1));
-  }, `Updating a CSSHSL with CSS.number for ${attr} throws a TypeError`);
+    assert_throws_dom("SyntaxError", () => result[attr] = CSS.number(1));
+  }, `Updating a CSSHSL with CSS.number for ${attr} throws a SyntaxError`);
 
   test(() => {
     const result = new CSSHSL(CSS.deg(0), 0, 0);
@@ -79,4 +82,4 @@
     assert_color_channel_approx_equals(result[attr], CSS.percent(50));
   }, 'CSSHSL.' + attr + ' can be updated with a CSS percent.');
 }
-</script>
+</script>
diff --git a/...mported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssHWB-expected.txt b/...mported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssHWB-expected.txt
@@ -5,19 +5,19 @@ PASS Constructing a CSSHWB with radians for the hue works as intended.
 PASS CSSHWB.h can be updated with a radians.
 PASS Constructing a CSSHWB with gradians for the hue works as intended.
 PASS CSSHWB.h can be updated with a gradians.
-PASS Constructing a CSSHWB with a number for hue throws a type error.
-FAIL Constructing a CSSHWB with css pixels for hue throws a type error. assert_throws_js: function "() => new CSSHWB(hue, 0, 0)" did not throw
-PASS Constructing a CSSHWB with undefined for hue throws a type error.
-FAIL CSSHWB can be constructed from three numbers and will get an alpha of 100%. assert_equals: expected "CSSUnitValue" but got "Number"
-FAIL CSSHWB can be constructed from four numbers. assert_equals: expected "CSSUnitValue" but got "Number"
-FAIL Constructing a CSSHWB with CSS.number for s, l or alpha throws a TypeError assert_throws_js: function "() => new CSSHWB(CSS.deg(0), CSS.number(1), 0, 0)" did not throw
-FAIL Updating a CSSHWB with CSS.number for w throws a TypeError assert_throws_js: function "() => result[attr] = CSS.number(1)" did not throw
-FAIL CSSHWB.w can be updated to a number. assert_equals: expected "CSSUnitValue" but got "Number"
+PASS Constructing a CSSHWB with a number for hue throws a TypeError.
+PASS Constructing a CSSHWB with undefined for hue throws a TypeError.
+PASS Constructing a CSSHWB with css pixels for hue throws a SyntaxError.
+PASS CSSHWB can be constructed from three numbers and will get an alpha of 100%.
+PASS CSSHWB can be constructed from four numbers.
+PASS Constructing a CSSHWB with CSS.number for s, l or alpha throws a SyntaxError
+PASS Updating a CSSHWB with CSS.number for w throws a SyntaxError
+PASS CSSHWB.w can be updated to a number.
 PASS CSSHWB.w can be updated with a CSS percent.
-FAIL Updating a CSSHWB with CSS.number for b throws a TypeError assert_throws_js: function "() => result[attr] = CSS.number(1)" did not throw
-FAIL CSSHWB.b can be updated to a number. assert_equals: expected "CSSUnitValue" but got "Number"
+PASS Updating a CSSHWB with CSS.number for b throws a SyntaxError
+PASS CSSHWB.b can be updated to a number.
 PASS CSSHWB.b can be updated with a CSS percent.
-FAIL Updating a CSSHWB with CSS.number for alpha throws a TypeError assert_throws_js: function "() => result[attr] = CSS.number(1)" did not throw
-FAIL CSSHWB.alpha can be updated to a number. assert_equals: expected "CSSUnitValue" but got "Number"
+PASS Updating a CSSHWB with CSS.number for alpha throws a SyntaxError
+PASS CSSHWB.alpha can be updated to a number.
 PASS CSSHWB.alpha can be updated with a CSS percent.
 
diff --git a/...tTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssHWB.html b/...tTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssHWB.html
@@ -14,12 +14,15 @@
   {hue: CSS.grad(81), desc: 'gradians'},
 ];
 
-const gInvalidHueInputs = [
+const gInvalidHueInputsNotNumericValue = [
   {hue: 180, desc: "a number"},
-  {hue: CSS.px(1), desc: "css pixels"},
   {hue: undefined, desc: "undefined"},
 ]
 
+const gInvalidHueInputsNumericValue = [
+  {hue: CSS.px(1), desc: "css pixels"},
+]
+
 for (const {hue, desc} of gValidHueInputs) {
   test(() => {
     const result = new CSSHWB(hue, 0.5, 0.5);
@@ -33,10 +36,16 @@
   }, `CSSHWB.h can be updated with a ${desc}.`);
 }
 
-for (const {hue, desc} of gInvalidHueInputs) {
+for (const {hue, desc} of gInvalidHueInputsNotNumericValue) {
   test(() => {
     assert_throws_js(TypeError, () => new CSSHWB(hue, 0, 0));
-  }, `Constructing a CSSHWB with ${desc} for hue throws a type error.`);
+  }, `Constructing a CSSHWB with ${desc} for hue throws a TypeError.`);
+}
+
+for (const {hue, desc} of gInvalidHueInputsNumericValue) {
+  test(() => {
+    assert_throws_dom("SyntaxError", () => new CSSHWB(hue, 0, 0));
+  }, `Constructing a CSSHWB with ${desc} for hue throws a SyntaxError.`);
 }
 
 test(() => {
@@ -56,16 +65,16 @@
 }, 'CSSHWB can be constructed from four numbers.');
 
 test(() => {
-  assert_throws_js(TypeError, () => new CSSHWB(CSS.deg(0), CSS.number(1), 0, 0));
-  assert_throws_js(TypeError, () => new CSSHWB(CSS.deg(0), 0, CSS.number(1), 0));
-  assert_throws_js(TypeError, () => new CSSHWB(CSS.deg(0), 0, 0, CSS.number(1)));
-}, `Constructing a CSSHWB with CSS.number for s, l or alpha throws a TypeError`);
+  assert_throws_dom("SyntaxError", () => new CSSHWB(CSS.deg(0), CSS.number(1), 0, 0));
+  assert_throws_dom("SyntaxError", () => new CSSHWB(CSS.deg(0), 0, CSS.number(1), 0));
+  assert_throws_dom("SyntaxError", () => new CSSHWB(CSS.deg(0), 0, 0, CSS.number(1)));
+}, `Constructing a CSSHWB with CSS.number for s, l or alpha throws a SyntaxError`);
 
 for (const attr of ['w', 'b', 'alpha']) {
   test(() => {
     const result = new CSSHWB(CSS.deg(0), 0, 0);
-    assert_throws_js(TypeError, () => result[attr] = CSS.number(1));
-  }, `Updating a CSSHWB with CSS.number for ${attr} throws a TypeError`);
+    assert_throws_dom("SyntaxError", () => result[attr] = CSS.number(1));
+  }, `Updating a CSSHWB with CSS.number for ${attr} throws a SyntaxError`);
 
   test(() => {
     const result = new CSSHWB(CSS.deg(0), 0, 0);
@@ -79,4 +88,4 @@
     assert_color_channel_approx_equals(result[attr], CSS.percent(50));
   }, 'CSSHWB.' + attr + ' can be updated with a CSS percent.');
 }
-</script>
+</script>
diff --git a/...mported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssLCH-expected.txt b/...mported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssLCH-expected.txt
@@ -0,0 +1,20 @@
+
+PASS Constructing a CSSLCH with percent for the lightness works as intended.
+PASS CSSLCH.l can be updated with a percent.
+PASS Constructing a CSSLCH with number for the lightness works as intended.
+PASS CSSLCH.l can be updated with a number.
+PASS Constructing a CSSLCH with css pixels for lightness throws a SyntaxError.
+PASS Constructing a CSSLCH with degrees for lightness throws a SyntaxError.
+PASS CSSLCH can be constructed from three numbers and will get an alpha of 100%.
+PASS CSSLCH can be constructed from four numbers.
+PASS Constructing a CSSLCH with CSS.number for l, c, h or alpha throws a SyntaxError
+PASS Updating a CSSLCH with CSS.number for l throws a SyntaxError
+PASS CSSLCH.l can be updated to a number.
+PASS CSSLCH.l can be updated with a CSS percent.
+PASS Updating a CSSLCH with CSS.number for c throws a SyntaxError
+PASS CSSLCH.c can be updated to a number.
+PASS CSSLCH.c can be updated with a CSS percent.
+PASS Updating a CSSLCH with CSS.number for alpha throws a SyntaxError
+PASS CSSLCH.alpha can be updated to a number.
+PASS CSSLCH.alpha can be updated with a CSS percent.
+
diff --git a/...tTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssLCH.html b/...tTests/imported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssLCH.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSLCH tests</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#csshwb">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/testhelper.js"></script>
+<script>
+'use strict';
+
+const gValidLightnessInputs = [
+  {lightness: CSS.percent(50), desc: 'percent', expected: CSS.percent(50)},
+  {lightness: 0.5, desc: 'number', expected: CSS.percent(50)},
+];
+
+const gInvalidLightnessInputs = [
+  {lightness: CSS.px(1), desc: "css pixels"},
+  {lightness: CSS.deg(180), desc: "degrees"},
+]
+
+for (const {lightness, desc, expected} of gValidLightnessInputs) {
+  test(() => {
+    const result = new CSSLCH(lightness, 0.5, 0.5);
+    assert_color_channel_approx_equals(result.l, expected);
+  }, `Constructing a CSSLCH with ${desc} for the lightness works as intended.`);
+
+  test(() => {
+    const result = new CSSLCH(CSS.percent(0), 0.5, 0.5);
+    result.l = lightness;
+    assert_color_channel_approx_equals(result.l, expected);
+  }, `CSSLCH.l can be updated with a ${desc}.`);
+}
+
+for (const {lightness, desc} of gInvalidLightnessInputs) {
+  test(() => {
+    assert_throws_dom("SyntaxError", () => new CSSLCH(lightness, 0, 0));
+  }, `Constructing a CSSLCH with ${desc} for lightness throws a SyntaxError.`);
+}
+
+test(() => {
+  const result = new CSSLCH(CSS.percent(27), 0.7, 8);
+  assert_color_channel_approx_equals(result.l, CSS.percent(27));
+  assert_color_channel_approx_equals(result.c, CSS.percent(70));
+  assert_color_channel_approx_equals(result.h, CSS.deg(8));
+  assert_color_channel_approx_equals(result.alpha, CSS.percent(100));
+}, 'CSSLCH can be constructed from three numbers and will get an alpha of 100%.');
+
+test(() => {
+  const result = new CSSLCH(0.2, 0.7, CSS.rad(8), CSS.percent(0.4));
+  assert_color_channel_approx_equals(result.l, CSS.percent(20));
+  assert_color_channel_approx_equals(result.c, CSS.percent(70));
+  assert_color_channel_approx_equals(result.h, CSS.rad(8));
+  assert_color_channel_approx_equals(result.alpha, CSS.percent(0.4));
+}, 'CSSLCH can be constructed from four numbers.');
+
+test(() => {
+  assert_throws_dom("SyntaxError", () => new CSSLCH(CSS.number(1), 0, 0, 0));
+  assert_throws_dom("SyntaxError", () => new CSSLCH(0, CSS.number(1), 0, 0));
+  assert_throws_dom("SyntaxError", () => new CSSLCH(0, 0, CSS.number(1), 0));
+  assert_throws_dom("SyntaxError", () => new CSSLCH(0, 0, 0, CSS.number(1)));
+}, `Constructing a CSSLCH with CSS.number for l, c, h or alpha throws a SyntaxError`);
+
+for (const attr of ['l', 'c', 'alpha']) {
+  test(() => {
+    const result = new CSSLCH(CSS.percent(0), 0, 0);
+    assert_throws_dom("SyntaxError", () => result[attr] = CSS.number(1));
+  }, `Updating a CSSLCH with CSS.number for ${attr} throws a SyntaxError`);
+
+  test(() => {
+    const result = new CSSLCH(CSS.percent(0), 0, 0);
+    result[attr] = 0.5;
+    assert_color_channel_approx_equals(result[attr], CSS.percent(50));
+  }, 'CSSLCH.' + attr + ' can be updated to a number.');
+
+  test(() => {
+    const result = new CSSLCH(CSS.percent(0), 0, 0);
+    result[attr] = CSS.percent(50);
+    assert_color_channel_approx_equals(result[attr], CSS.percent(50));
+  }, 'CSSLCH.' + attr + ' can be updated with a CSS percent.');
+}
+</script>
diff --git a/...mported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssLab-expected.txt b/...mported/w3c/web-platform-tests/css/css-typed-om/stylevalue-subclasses/cssLab-expected.txt
@@ -0,0 +1,17 @@
+
+PASS Constructing a CSSLab with percent for the lightness works as intended.
+PASS CSSLab.l can be updated with a percent.
+PASS Constructing a CSSLab with number for the lightness works as intended.
+PASS CSSLab.l can be updated with a number.
+PASS Constructing a CSSLab with css pixels for lightness throws a SyntaxError.
+PASS Constructing a CSSLab with degrees for lightness throws a SyntaxError.
+PASS CSSLab can be constructed from three numbers and will get an alpha of 100%.
+PASS CSSLab can be constructed from four numbers.
+PASS Constructing a CSSLab with CSS.number for l or alpha throws a SyntaxError
+PASS Updating a CSSLab with CSS.number for l throws a SyntaxError
+PASS CSSLab.l can be updated to a number.
+PASS CSSLab.l can be updated with a CSS percent.
+PASS Updating a CSSLab with CSS.number for alpha throws a SyntaxError
+PASS CSSLab.alpha can be updated to a number.
+PASS CSSLab.alpha can be updated with a CSS percent.
+