1 files changed, 85 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssHSL.html b/testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssHSL.html
new file mode 100644
index 0000000000..b38d740383
--- /dev/null
+++ b/testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssHSL.html
@@ -0,0 +1,85 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSSHSL tests</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#csshsl">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../resources/testhelper.js"></script>
+<script>
+'use strict';
+
+const gUndefinedKeyword = new CSSKeywordValue("undefined");
+
+const gValidHueInputs = [
+  {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: CSS.px(1), desc: "css pixels"},
+  {hue: CSS.em(1), desc: "css em"},
+]
+
+for (const {hue, desc, expected} of gValidHueInputs) {
+  test(() => {
+    const result = new CSSHSL(hue, 0.5, 0.5);
+    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, expected);
+  }, `CSSHSL.h can be updated with a ${desc}.`);
+}
+
+for (const {hue, desc} of gInvalidHueInputs) {
+  test(() => {
+    assert_throws_dom("SyntaxError", () => new CSSHSL(hue, 0, 0));
+  }, `Constructing a CSSHSL with ${desc} for hue throws a SyntaxError.`);
+}
+
+test(() => {
+  const result = new CSSHSL(CSS.deg(27), 0.7, CSS.percent(91));
+  assert_color_channel_approx_equals(result.h, CSS.deg(27));
+  assert_color_channel_approx_equals(result.s, CSS.percent(70));
+  assert_color_channel_approx_equals(result.l, CSS.percent(91));
+  assert_color_channel_approx_equals(result.alpha, CSS.percent(100));
+}, 'CSSHSL can be constructed from three numbers and will get an alpha of 100%.');
+
+test(() => {
+  const result = new CSSHSL(CSS.grad(101), 0.2, 0.3, CSS.percent(0.4));
+  assert_color_channel_approx_equals(result.h, CSS.grad(101));
+  assert_color_channel_approx_equals(result.s, CSS.percent(20));
+  assert_color_channel_approx_equals(result.l, CSS.percent(30));
+  assert_color_channel_approx_equals(result.alpha, CSS.percent(0.4));
+}, 'CSSHSL can be constructed from four numbers.');
+
+test(() => {
+  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_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);
+    result[attr] = 0.5;
+    assert_color_channel_approx_equals(result[attr], CSS.percent(50));
+  }, 'CSSHSL.' + attr + ' can be updated to a number.');
+
+  test(() => {
+    const result = new CSSHSL(CSS.deg(0), 0, 0);
+    result[attr] = CSS.percent(50);
+    assert_color_channel_approx_equals(result[attr], CSS.percent(50));
+  }, 'CSSHSL.' + attr + ' can be updated with a CSS percent.');
+}
+</script>