Skip to content
Permalink
Browse files
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
  • Loading branch information
cdumez committed Nov 2, 2022
1 parent fd2b5bf commit 4e3531dd8b179697e87ed54b0a601b4f4118629b
Show file tree
Hide file tree
Showing 28 changed files with 1,084 additions and 147 deletions.
@@ -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));
@@ -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.

@@ -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>
@@ -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.

@@ -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>
@@ -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.

@@ -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>
@@ -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.

0 comments on commit 4e3531d

Please sign in to comment.