diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssHSL.html')
-rw-r--r-- | testing/web-platform/tests/css/css-typed-om/stylevalue-subclasses/cssHSL.html | 85 |
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> |