2015-11-04 23:59:48 +00:00
<!doctype html>
< html >
< head >
< script src = "../../http/tests/inspector/resources/inspector-test.js" > < / script >
< script >
function test()
{
function formatToString(format) {
switch (format) {
2017-08-02 03:09:57 +00:00
case WI.Color.Format.Original:
2015-11-04 23:59:48 +00:00
return "Original";
2017-08-02 03:09:57 +00:00
case WI.Color.Format.Keyword:
2016-01-05 01:48:00 +00:00
return "Keyword";
2017-08-02 03:09:57 +00:00
case WI.Color.Format.HEX:
2015-11-04 23:59:48 +00:00
return "HEX";
2017-08-02 03:09:57 +00:00
case WI.Color.Format.ShortHEX:
2015-11-04 23:59:48 +00:00
return "Short HEX";
2017-08-02 03:09:57 +00:00
case WI.Color.Format.HEXAlpha:
2015-11-04 23:59:48 +00:00
return "HEX with Alpha";
2017-08-02 03:09:57 +00:00
case WI.Color.Format.ShortHEXAlpha:
2015-11-04 23:59:48 +00:00
return "Short HEX with Alpha";
2017-08-02 03:09:57 +00:00
case WI.Color.Format.RGB:
2015-11-04 23:59:48 +00:00
return "RGB";
2017-08-02 03:09:57 +00:00
case WI.Color.Format.RGBA:
2015-11-04 23:59:48 +00:00
return "RGBA";
2017-08-02 03:09:57 +00:00
case WI.Color.Format.HSL:
2015-11-04 23:59:48 +00:00
return "HSL";
2017-08-02 03:09:57 +00:00
case WI.Color.Format.HSLA:
2015-11-04 23:59:48 +00:00
return "HSLA";
2019-11-01 19:34:09 +00:00
case WI.Color.Format.ColorFunction:
return "Function";
2015-11-04 23:59:48 +00:00
default:
return "Unexpected format";
}
}
2019-01-03 21:58:23 +00:00
let suite = InspectorTest.createSyncSuite("WI.Color");
2015-11-04 23:59:48 +00:00
suite.addTestCase({
2017-08-02 03:09:57 +00:00
name: "WI.Color.fromString",
2015-11-04 23:59:48 +00:00
description: "Test we can detect colors from strings.",
2019-01-03 21:58:23 +00:00
test() {
2015-11-04 23:59:48 +00:00
function testGood(string, expectedFormat) {
2017-08-02 03:09:57 +00:00
let color = WI.Color.fromString(string);
2019-01-26 23:54:29 +00:00
InspectorTest.assert(color instanceof WI.Color, `'${string}' should be detected`);
InspectorTest.assert(color.format === expectedFormat, `'${string}' was the expected '${formatToString(expectedFormat)}' format`);
InspectorTest.log(`"${string}" resolves to "${color.toString()}"`);
2015-11-04 23:59:48 +00:00
}
function testBad(string) {
2017-08-02 03:09:57 +00:00
let color = WI.Color.fromString(string);
2019-01-26 23:54:29 +00:00
InspectorTest.expectNull(color, `'${string}' should not be detected`);
if (color)
InspectorTest.log(`'${string}' detected with format '${formatToString(color.format)}'`);
2015-11-04 23:59:48 +00:00
}
2017-08-02 03:09:57 +00:00
testGood("#000", WI.Color.Format.ShortHEX);
testGood("#a0A", WI.Color.Format.ShortHEX);
testGood("#000000", WI.Color.Format.HEX);
testGood("#a0Aa0A", WI.Color.Format.HEX);
testGood("#0000", WI.Color.Format.ShortHEXAlpha);
testGood("#a0Af", WI.Color.Format.ShortHEXAlpha);
testGood("#00000000", WI.Color.Format.HEXAlpha);
testGood("#a0Aa0Aff", WI.Color.Format.HEXAlpha);
2019-01-26 23:54:29 +00:00
testGood("rgb(10,20,30)", WI.Color.Format.RGB);
testGood("RGB(10,20,30)", WI.Color.Format.RGB);
testGood("rgb( 10 , 20 , 30 )", WI.Color.Format.RGB);
2017-08-02 03:09:57 +00:00
testGood("rgb(999, 999, 999)", WI.Color.Format.RGB);
2019-01-26 23:54:29 +00:00
testGood("rgb(10 20 30)", WI.Color.Format.RGB);
testGood("RGB(10 20 30)", WI.Color.Format.RGB);
testGood("rgb( 10 20 30 )", WI.Color.Format.RGB);
testGood("rgb(999 999 999)", WI.Color.Format.RGB);
testGood("rgb(10,20,30,40)", WI.Color.Format.RGBA);
testGood("RGB(10,20,30,40)", WI.Color.Format.RGBA);
testGood("rgb( 10 , 20 , 30 , 40 )", WI.Color.Format.RGBA);
testGood("rgb(999, 999, 999, 999)", WI.Color.Format.RGBA);
testGood("rgb(10,20,30,40%)", WI.Color.Format.RGBA);
testGood("RGB(10,20,30,40%)", WI.Color.Format.RGBA);
testGood("rgb( 10 , 20 , 30 , 40% )", WI.Color.Format.RGBA);
testGood("rgb(999, 999, 999, 999%)", WI.Color.Format.RGBA);
testGood("rgb(10 20 30 / 40)", WI.Color.Format.RGBA);
testGood("RGB(10 20 30 / 40)", WI.Color.Format.RGBA);
testGood("rgb( 10 20 30 / 40 )", WI.Color.Format.RGBA);
testGood("rgb(999 999 999 / 999)", WI.Color.Format.RGBA);
testGood("rgb(10 20 30 / 40%)", WI.Color.Format.RGBA);
testGood("RGB(10 20 30 / 40%)", WI.Color.Format.RGBA);
testGood("rgb( 10 20 30 / 40% )", WI.Color.Format.RGBA);
testGood("rgb(999 999 999 / 999%)", WI.Color.Format.RGBA);
testGood("rgba(10,20,30,40)", WI.Color.Format.RGBA);
testGood("RGBA(10,20,30,40)", WI.Color.Format.RGBA);
testGood("rgba( 10 , 20 , 30 , 40 )", WI.Color.Format.RGBA);
2017-08-02 03:09:57 +00:00
testGood("rgba(999, 999, 999, 999)", WI.Color.Format.RGBA);
2019-01-26 23:54:29 +00:00
testGood("rgba(10,20,30,40%)", WI.Color.Format.RGBA);
testGood("RGBA(10,20,30,40%)", WI.Color.Format.RGBA);
testGood("rgba( 10 , 20 , 30 , 40% )", WI.Color.Format.RGBA);
testGood("rgba(999, 999, 999, 999%)", WI.Color.Format.RGBA);
testGood("rgba(10 20 30 / 40)", WI.Color.Format.RGBA);
testGood("RGBA(10 20 30 / 40)", WI.Color.Format.RGBA);
testGood("rgba( 10 20 30 / 40 )", WI.Color.Format.RGBA);
testGood("rgba(999 999 999 / 999)", WI.Color.Format.RGBA);
testGood("rgba(10 20 30 / 40%)", WI.Color.Format.RGBA);
testGood("RGBA(10 20 30 / 40%)", WI.Color.Format.RGBA);
testGood("rgba( 10 20 30 / 40% )", WI.Color.Format.RGBA);
testGood("rgba(999 999 999 / 999%)", WI.Color.Format.RGBA);
testGood("rgb(10%,20%,30%)", WI.Color.Format.RGB);
testGood("RGB(10%,20%,30%)", WI.Color.Format.RGB);
testGood("rgb( 10% , 20% , 30% )", WI.Color.Format.RGB);
testGood("rgb(999%, 999%, 999%)", WI.Color.Format.RGB);
testGood("rgb(10% 20% 30%)", WI.Color.Format.RGB);
testGood("RGB(10% 20% 30%)", WI.Color.Format.RGB);
testGood("rgb( 10% 20% 30% )", WI.Color.Format.RGB);
testGood("rgb(999% 999% 999%)", WI.Color.Format.RGB);
testGood("rgb(10%,20%,30%,40)", WI.Color.Format.RGBA);
testGood("RGB(10%,20%,30%,40)", WI.Color.Format.RGBA);
testGood("rgb( 10% , 20% , 30% , 40 )", WI.Color.Format.RGBA);
testGood("rgb(999%, 999%, 999%, 999%)", WI.Color.Format.RGBA);
testGood("rgb(10%,20%,30%,40%)", WI.Color.Format.RGBA);
testGood("RGB(10%,20%,30%,40%)", WI.Color.Format.RGBA);
testGood("rgb( 10% , 20% , 30% , 40% )", WI.Color.Format.RGBA);
testGood("rgb(999%, 999%, 999%, 999%)", WI.Color.Format.RGBA);
testGood("rgb(10% 20% 30% / 40)", WI.Color.Format.RGBA);
testGood("RGB(10% 20% 30% / 40)", WI.Color.Format.RGBA);
testGood("rgb( 10% 20% 30% / 40 )", WI.Color.Format.RGBA);
testGood("rgb(999% 999% 999% / 999%)", WI.Color.Format.RGBA);
testGood("rgb(10% 20% 30% / 40%)", WI.Color.Format.RGBA);
testGood("RGB(10% 20% 30% / 40%)", WI.Color.Format.RGBA);
testGood("rgb( 10% 20% 30% / 40% )", WI.Color.Format.RGBA);
testGood("rgb(999% 999% 999% / 999%)", WI.Color.Format.RGBA);
testGood("rgba(10%,20%,30%,40)", WI.Color.Format.RGBA);
testGood("RGBA(10%,20%,30%,40)", WI.Color.Format.RGBA);
testGood("rgba( 10% , 20% , 30% , 40 )", WI.Color.Format.RGBA);
testGood("rgba(999%, 999%, 999%, 999%)", WI.Color.Format.RGBA);
testGood("rgba(10%,20%,30%,40%)", WI.Color.Format.RGBA);
testGood("RGBA(10%,20%,30%,40%)", WI.Color.Format.RGBA);
testGood("rgba( 10% , 20% , 30% , 40% )", WI.Color.Format.RGBA);
testGood("rgba(999%, 999%, 999%, 999%)", WI.Color.Format.RGBA);
testGood("rgba(10% 20% 30% / 40)", WI.Color.Format.RGBA);
testGood("RGBA(10% 20% 30% / 40)", WI.Color.Format.RGBA);
testGood("rgba( 10% 20% 30% / 40 )", WI.Color.Format.RGBA);
testGood("rgba(999% 999% 999% / 999%)", WI.Color.Format.RGBA);
testGood("rgba(10% 20% 30% / 40%)", WI.Color.Format.RGBA);
testGood("RGBA(10% 20% 30% / 40%)", WI.Color.Format.RGBA);
testGood("rgba( 10% 20% 30% / 40% )", WI.Color.Format.RGBA);
testGood("rgba(999% 999% 999% / 999%)", WI.Color.Format.RGBA);
for (let unit of ["", "deg", "rad", "grad", "turn"]) {
testGood(`hsl(10${unit},20%,30%)`, WI.Color.Format.HSL);
testGood(`HSL(10${unit},20%,30%)`, WI.Color.Format.HSL);
testGood(`hsl( 10${unit} , 20% , 30% )`, WI.Color.Format.HSL);
testGood(`hsl(999${unit}, 999%, 999%)`, WI.Color.Format.HSL);
testGood(`hsl(10${unit} 20% 30%)`, WI.Color.Format.HSL);
testGood(`HSL(10${unit} 20% 30%)`, WI.Color.Format.HSL);
testGood(`hsl( 10${unit} 20% 30% )`, WI.Color.Format.HSL);
testGood(`hsl(999${unit} 999% 999%)`, WI.Color.Format.HSL);
testGood(`hsl(10${unit},20%,30%,40)`, WI.Color.Format.HSLA);
testGood(`HSL(10${unit},20%,30%,40)`, WI.Color.Format.HSLA);
testGood(`hsl( 10${unit} , 20% , 30% , 40 )`, WI.Color.Format.HSLA);
testGood(`hsl(999${unit}, 999%, 999%, 999)`, WI.Color.Format.HSLA);
testGood(`hsl(10${unit},20%,30%,40%)`, WI.Color.Format.HSLA);
testGood(`HSL(10${unit},20%,30%,40%)`, WI.Color.Format.HSLA);
testGood(`hsl( 10${unit} , 20% , 30% , 40% )`, WI.Color.Format.HSLA);
testGood(`hsl(999${unit}, 999%, 999%, 999%)`, WI.Color.Format.HSLA);
testGood(`hsl(10${unit} 20% 30% / 40)`, WI.Color.Format.HSLA);
testGood(`HSL(10${unit} 20% 30% / 40)`, WI.Color.Format.HSLA);
testGood(`hsl( 10${unit} 20% 30% / 40 )`, WI.Color.Format.HSLA);
testGood(`hsl(999${unit} 999% 999% / 999)`, WI.Color.Format.HSLA);
testGood(`hsl(10${unit} 20% 30% / 40%)`, WI.Color.Format.HSLA);
testGood(`HSL(10${unit} 20% 30% / 40%)`, WI.Color.Format.HSLA);
testGood(`hsl( 10${unit} 20% 30% / 40% )`, WI.Color.Format.HSLA);
testGood(`hsl(999${unit} 999% 999% / 999%)`, WI.Color.Format.HSLA);
testGood(`hsl(10${unit},20%,30%,40)`, WI.Color.Format.HSLA);
testGood(`HSL(10${unit},20%,30%,40)`, WI.Color.Format.HSLA);
testGood(`hsl( 10${unit} , 20% , 30% , 40 )`, WI.Color.Format.HSLA);
testGood(`hsl(999${unit}, 999%, 999%, 999)`, WI.Color.Format.HSLA);
testGood(`hsl(10${unit},20%,30%,40%)`, WI.Color.Format.HSLA);
testGood(`HSL(10${unit},20%,30%,40%)`, WI.Color.Format.HSLA);
testGood(`hsl( 10${unit} , 20% , 30% , 40% )`, WI.Color.Format.HSLA);
testGood(`hsl(999${unit}, 999%, 999%, 999%)`, WI.Color.Format.HSLA);
testGood(`hsla(10${unit},20%,30%,40)`, WI.Color.Format.HSLA);
testGood(`HSLA(10${unit},20%,30%,40)`, WI.Color.Format.HSLA);
testGood(`hsla( 10${unit} , 0% , 50% , 40 )`, WI.Color.Format.HSLA);
testGood(`hsla(999${unit}, 999%, 999%, 999)`, WI.Color.Format.HSLA);
testGood(`hsla(10${unit},20%,30%,40%)`, WI.Color.Format.HSLA);
testGood(`HSLA(10${unit},20%,30%,40%)`, WI.Color.Format.HSLA);
testGood(`hsla( 10${unit} , 20% , 30% , 40% )`, WI.Color.Format.HSLA);
testGood(`hsla(999${unit}, 999%, 999%, 999%)`, WI.Color.Format.HSLA);
testGood(`hsla(10${unit} 20% 30% / 40)`, WI.Color.Format.HSLA);
testGood(`HSLA(10${unit} 20% 30% / 40)`, WI.Color.Format.HSLA);
testGood(`hsla( 10${unit} 20% 30% / 40 )`, WI.Color.Format.HSLA);
testGood(`hsla(999${unit} 999% 999% / 999)`, WI.Color.Format.HSLA);
testGood(`hsla(10${unit} 20% 30% / 40%)`, WI.Color.Format.HSLA);
testGood(`HSLA(10${unit} 20% 30% / 40%)`, WI.Color.Format.HSLA);
testGood(`hsla( 10${unit} 20% 30% / 40% )`, WI.Color.Format.HSLA);
testGood(`hsla(999${unit} 999% 999% / 999%)`, WI.Color.Format.HSLA);
}
2015-11-04 23:59:48 +00:00
2019-11-01 19:34:09 +00:00
testGood("color(display-p3 0 1 0.5)", WI.Color.Format.ColorFunction);
testGood("COLOR(DISPLAY-P3 0 1 0.5)", WI.Color.Format.ColorFunction);
testGood("color(srgb 0.123 0.999 1)", WI.Color.Format.ColorFunction);
testGood("COLOR(SRGB 0.123 0.999 1)", WI.Color.Format.ColorFunction);
testGood("color( display-p3 0 1 0.5 )", WI.Color.Format.ColorFunction);
testGood("color(display-p3 999 999 999)", WI.Color.Format.ColorFunction);
testGood("color(srgb 0.123 0.999 1/0.5)", WI.Color.Format.ColorFunction);
testGood("COLOR(SRGB 0.123 0.999 1/0.5)", WI.Color.Format.ColorFunction);
testGood("color( display-p3 0 1 0.5/0.5)", WI.Color.Format.ColorFunction);
testGood("color(display-p3 999 999 999/999)", WI.Color.Format.ColorFunction);
testGood("color(srgb 0.123 0.999 1 / 0.5)", WI.Color.Format.ColorFunction);
testGood("COLOR(SRGB 0.123 0.999 1 / 0.5)", WI.Color.Format.ColorFunction);
testGood("color( display-p3 0 1 0.5 / 0.5)", WI.Color.Format.ColorFunction);
testGood("color(display-p3 999 999 999 / 999)", WI.Color.Format.ColorFunction);
testGood("color(srgb 0.123 0.999 1/33%)", WI.Color.Format.ColorFunction);
testGood("COLOR(SRGB 0.123 0.999 1/33%)", WI.Color.Format.ColorFunction);
testGood("color( display-p3 0 1 0.5/33%)", WI.Color.Format.ColorFunction);
testGood("color(display-p3 999 999 999/999%)", WI.Color.Format.ColorFunction);
testGood("color(srgb 0.123 0.999 1 / 33%)", WI.Color.Format.ColorFunction);
testGood("COLOR(SRGB 0.123 0.999 1 / 33%)", WI.Color.Format.ColorFunction);
testGood("color( display-p3 0 1 0.5 / 33%)", WI.Color.Format.ColorFunction);
testGood("color(display-p3 999 999 999 / 999%)", WI.Color.Format.ColorFunction);
2015-11-04 23:59:48 +00:00
InspectorTest.log("");
testBad(" #000 "); // whitespace
testBad("#rgb"); // bad hex
testBad("#1"); // 1
testBad("#12"); // 2
testBad("#12345"); // 5
testBad("#1234567"); // 7
testBad("#123456789"); // 9
2019-01-26 23:54:29 +00:00
testBad("rgb(255, 255, 255, 0.5, 1)"); // extra values
2015-11-04 23:59:48 +00:00
testBad("rgba(255, 255, 255, 0.5, 1)"); // extra values
2019-01-26 23:54:29 +00:00
testBad("hsl(0, 0%, 50%, 1, 2)"); // extra value
2015-11-04 23:59:48 +00:00
testBad("hsla(0, 0%, 50%, 1, 2)"); // extra values
2016-01-05 01:48:00 +00:00
testBad("superblue"); // not a keyword
2019-11-01 19:34:09 +00:00
testBad("color(display-p3 0 1)"); // 2
testBad("color(display-p3 0 1 2 4 5)"); // 5
2015-11-04 23:59:48 +00:00
// FIXME: currentColor?
// FIXME: Should we consider missing %s as bad? Currently we just strip them.
// testBad("hsl(0, 0, 50)"); // missing %s
// testBad("hsla(0, 0, 50, 1)"); // missing %s
2019-01-03 21:58:23 +00:00
return true;
2015-11-04 23:59:48 +00:00
}
});
suite.addTestCase({
2017-08-02 03:09:57 +00:00
name: "WI.Color properties",
2015-11-04 23:59:48 +00:00
description: "Test different color properties.",
2019-01-03 21:58:23 +00:00
test() {
2015-11-04 23:59:48 +00:00
let color;
2017-08-02 03:09:57 +00:00
color = WI.Color.fromString("red");
2015-11-04 23:59:48 +00:00
InspectorTest.expectThat(color.alpha === 1, "'red' should have alpha of 1.");
InspectorTest.expectThat(color.simple === true, "'red' should be simple.");
2016-01-05 01:48:00 +00:00
InspectorTest.expectThat(color.isKeyword() === true, "'red' should be a keyword.");
2017-09-14 22:01:25 +00:00
InspectorTest.expectShallowEqual(color.rgb, [255, 0, 0], "'red' has rgb of [255, 0, 0].");
InspectorTest.expectShallowEqual(color.rgba, [255, 0, 0, 1], "'red' has rgba of [255, 0, 0, 1].");
InspectorTest.expectShallowEqual(color.hsl, [0, 100, 50], "'red' has hsl of [0, 100, 50].");
InspectorTest.expectShallowEqual(color.hsla, [0, 100, 50, 1], "'red' has hsla of [0, 100, 50, 1].");
2016-01-05 01:48:00 +00:00
InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === true, "'red' should be serializable as a short Hex");
2015-11-04 23:59:48 +00:00
2017-08-02 03:09:57 +00:00
color = WI.Color.fromString("transparent");
2015-11-04 23:59:48 +00:00
InspectorTest.expectThat(color.alpha === 0, "'transparent' should have alpha of 0.");
2016-01-05 01:48:00 +00:00
InspectorTest.expectThat(color.simple === false, "'transparent' should not be simple.");
InspectorTest.expectThat(color.isKeyword() === true, "'transparent' should be a keyword.");
2017-09-14 22:01:25 +00:00
InspectorTest.expectShallowEqual(color.rgb, [0, 0, 0], "'transparent' has rgb of [0, 0, 0].");
InspectorTest.expectShallowEqual(color.rgba, [0, 0, 0, 0], "'transparent' has rgba of [0, 0, 0, 0].");
InspectorTest.expectShallowEqual(color.hsl, [0, 0, 0], "'transparent' has hsl of [0, 0, 0].");
InspectorTest.expectShallowEqual(color.hsla, [0, 0, 0, 0], "'transparent' has hsla of [0, 0, 0, 0].");
2016-01-05 01:48:00 +00:00
InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === true, "'transparent' should be serializable as a short Hex");
2017-08-02 03:09:57 +00:00
color = WI.Color.fromString("#11122233");
2016-01-05 01:48:00 +00:00
InspectorTest.expectThat(color.alpha !== 0, "'#11122233' should not have alpha of 0.");
InspectorTest.expectThat(color.simple === false, "'#11122233' should be not be simple.");
InspectorTest.expectThat(color.isKeyword() === false, "'#11122233' should not be a keyword.");
2017-09-14 22:01:25 +00:00
InspectorTest.expectShallowEqual(color.rgba, [17, 18, 34, 0.2], "'#11122233' has rgba of [17, 18, 34, 0.2].");
2019-01-03 21:58:23 +00:00
InspectorTest.expectShallowEqual(color.hsla.map((value) => value.maxDecimals(2)), [236.47, 33.33, 10, 0.2], "'#11122233' has hsla of [236.47, 33.33, 10, 0.2].");
2016-01-05 01:48:00 +00:00
InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === false, "'#11122233' should not be serializable as a short Hex");
2015-11-04 23:59:48 +00:00
2017-08-02 03:09:57 +00:00
color = WI.Color.fromString("#11223344");
2016-01-07 02:41:36 +00:00
InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === true, "'#11223344' should be serializable as a short Hex");
2017-08-02 03:09:57 +00:00
color = WI.Color.fromString("#11223345");
2016-01-07 02:41:36 +00:00
InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === false, "'#11223345' should not be serializable as a short Hex");
2019-11-01 19:34:09 +00:00
color = WI.Color.fromString("color(display-p3 0 1 0.5)");
InspectorTest.expectThat(color.alpha === 1, "'color(display-p3 0 1 0.5)' color should have a default alpha of 1");
InspectorTest.expectThat(color.isKeyword() === false, "color function is not a keyword");
2019-12-03 01:46:11 +00:00
InspectorTest.expectShallowEqual(color.normalizedRGB, [0, 1, 0.5], "'color(display-p3 0 1 0.5)' has normalized RGB of [0, 1, 0.5]");
InspectorTest.expectShallowEqual(color.normalizedRGBA, [0, 1, 0.5, 1], "'color(display-p3 0 1 0.5)' has normalized RGBA of [0, 1, 0.5, 1]");
2019-11-01 19:34:09 +00:00
color = WI.Color.fromString("color(display-p3 0 1 0.5 / 0.3)");
InspectorTest.expectThat(color.alpha === 0.3, "'color(display-p3 0 1 0.5 / 0.3)' should have an alpha of 0.3");
InspectorTest.expectThat(color.isKeyword() === false, "color function is not a keyword");
2019-12-03 01:46:11 +00:00
InspectorTest.expectShallowEqual(color.normalizedRGB, [0, 1, 0.5], "'color(display-p3 0 1 0.5 / 0.3)' has normalized RGB of [0, 1, 0.5]");
InspectorTest.expectShallowEqual(color.normalizedRGBA, [0, 1, 0.5, 0.3], "'color(display-p3 0 1 0.5 / 0.3)' has normalized RGBA of [0, 1, 0.5, 0.3]");
2019-11-01 19:34:09 +00:00
2019-01-03 21:58:23 +00:00
return true;
2015-11-04 23:59:48 +00:00
}
});
2017-09-14 22:01:25 +00:00
suite.addTestCase({
name: "WI.Color from components",
description: "Test different three- and four-component colors.",
2019-01-03 21:58:23 +00:00
test() {
2017-09-14 22:01:25 +00:00
function test(color, components) {
InspectorTest.log(`Check components for color '${color.toString()}'.`);
for (let key in components) {
let value = components[key];
2019-01-03 21:58:23 +00:00
InspectorTest.expectShallowEqual(color[key].map((value) => value.maxDecimals(2)), value, `Should have ${key} of ${JSON.stringify(value)}.`);
2017-09-14 22:01:25 +00:00
}
}
test(new WI.Color(WI.Color.Format.RGB, [255, 0, 0]), {
rgb: [255, 0, 0],
rgba: [255, 0, 0, 1],
hsl: [0, 100, 50],
hsla: [0, 100, 50, 1],
});
test(new WI.Color(WI.Color.Format.RGBA, [128, 128, 128, 0.5]), {
rgb: [128, 128, 128],
rgba: [128, 128, 128, 0.5],
2019-01-03 21:58:23 +00:00
hsl: [0, 0, 50.2],
hsla: [0, 0, 50.2, 0.5],
2017-09-14 22:01:25 +00:00
});
test(new WI.Color(WI.Color.Format.HSL, [0, 0, 50]), {
2019-01-03 21:58:23 +00:00
rgb: [127.5, 127.5, 127.5],
rgba: [127.5, 127.5, 127.5, 1],
2017-09-14 22:01:25 +00:00
hsl: [0, 0, 50],
hsla: [0, 0, 50, 1],
});
test(new WI.Color(WI.Color.Format.HSLA, [0, 0, 50, 0.5]), {
2019-01-03 21:58:23 +00:00
rgb: [127.5, 127.5, 127.5],
rgba: [127.5, 127.5, 127.5, 0.5],
2017-09-14 22:01:25 +00:00
hsl: [0, 0, 50],
hsla: [0, 0, 50, 0.5],
});
2019-01-03 21:58:23 +00:00
return true;
2017-09-14 22:01:25 +00:00
}
});
2015-11-04 23:59:48 +00:00
suite.addTestCase({
2017-08-02 03:09:57 +00:00
name: "WI.Color.prototype.nextFormat",
2015-11-04 23:59:48 +00:00
description: "Test we can cycle through color formats for different colors.",
2019-01-03 21:58:23 +00:00
test() {
2015-11-04 23:59:48 +00:00
function test(string, phases) {
2017-08-02 03:09:57 +00:00
let color = WI.Color.fromString(string);
color.format = WI.Color.Format.Original;
2015-11-04 23:59:48 +00:00
let pass = true;
for (let expectedNextFormat of phases) {
let nextFormat = color.nextFormat();
InspectorTest.assert(nextFormat === expectedNextFormat, `Next format '${formatToString(nextFormat)}' was not the expected '${formatToString(expectedNextFormat)}'`);
pass = pass & & nextFormat === expectedNextFormat;
color.format = nextFormat;
}
InspectorTest.expectThat(pass, `All format phases of '${string}' should be as expected.`);
}
// All with alpha.
test("transparent", [
2017-08-02 03:09:57 +00:00
WI.Color.Format.RGBA,
2019-12-03 01:46:11 +00:00
WI.Color.Format.ColorFunction,
2017-08-02 03:09:57 +00:00
WI.Color.Format.HSLA,
WI.Color.Format.Keyword,
WI.Color.Format.ShortHEXAlpha,
WI.Color.Format.HEXAlpha,
2015-11-04 23:59:48 +00:00
]);
// All without alpha.
test("red", [
2017-08-02 03:09:57 +00:00
WI.Color.Format.RGB,
2019-12-03 01:46:11 +00:00
WI.Color.Format.ColorFunction,
2017-08-02 03:09:57 +00:00
WI.Color.Format.HSL,
WI.Color.Format.Keyword,
WI.Color.Format.ShortHEX,
WI.Color.Format.HEX,
2015-11-04 23:59:48 +00:00
]);
2016-01-05 01:48:00 +00:00
// No short hex or keyword.
2015-11-04 23:59:48 +00:00
test("rgb(100, 150, 200)", [
2017-08-02 03:09:57 +00:00
WI.Color.Format.RGB,
2019-12-03 01:46:11 +00:00
WI.Color.Format.ColorFunction,
2017-08-02 03:09:57 +00:00
WI.Color.Format.HSL,
WI.Color.Format.HEX,
2015-11-04 23:59:48 +00:00
]);
2016-01-05 01:48:00 +00:00
// No short hex alpha or keyword.
2015-11-04 23:59:48 +00:00
test("rgba(100, 150, 200, 0.5)", [
2017-08-02 03:09:57 +00:00
WI.Color.Format.RGBA,
2019-12-03 01:46:11 +00:00
WI.Color.Format.ColorFunction,
2017-08-02 03:09:57 +00:00
WI.Color.Format.HSLA,
WI.Color.Format.HEXAlpha,
2015-11-04 23:59:48 +00:00
]);
2019-01-03 21:58:23 +00:00
return true;
2015-11-04 23:59:48 +00:00
}
});
suite.addTestCase({
2017-08-02 03:09:57 +00:00
name: "WI.Color.prototype.toString",
2015-11-04 23:59:48 +00:00
description: "Test the different toString outputs.",
2019-01-03 21:58:23 +00:00
test() {
2015-11-04 23:59:48 +00:00
let color;
function test(expected, format) {
let pass = color.toString(format) === expected;
InspectorTest.expectThat(pass, `Color as '${formatToString(format)}' should be '${expected}'`);
if (!pass) InspectorTest.log("WAS: " + color.toString(format));
}
// A color with all formats.
2017-08-02 03:09:57 +00:00
color = WI.Color.fromString("RED");
test("RED", WI.Color.Format.Original);
test("red", WI.Color.Format.Keyword);
test("#f00", WI.Color.Format.ShortHEX);
test("#ff0000", WI.Color.Format.HEX);
test("#f00f", WI.Color.Format.ShortHEXAlpha);
test("#ff0000ff", WI.Color.Format.HEXAlpha);
test("rgb(255, 0, 0)", WI.Color.Format.RGB);
test("rgba(255, 0, 0, 1)", WI.Color.Format.RGBA);
test("hsl(0, 100%, 50%)", WI.Color.Format.HSL);
test("hsla(0, 100%, 50%, 1)", WI.Color.Format.HSLA);
2015-11-04 23:59:48 +00:00
// A color which cannot be some formats, those fallback to something else.
2017-08-02 03:09:57 +00:00
color = WI.Color.fromString("rGbA( 100, 200, 255, 0.5 )");
test("rgba(100, 200, 255, 0.5)", WI.Color.Format.Original); // Original text ignored for some formats.
test("rgba(100, 200, 255, 0.5)", WI.Color.Format.Keyword); // fallback (rgba)
test("rgba(100, 200, 255, 0.5)", WI.Color.Format.ShortHEX); // fallback (rgba)
test("rgba(100, 200, 255, 0.5)", WI.Color.Format.HEX); // fallback (rgba)
test("#64c8ff80", WI.Color.Format.ShortHEXAlpha); // fallback (hex alpha)
test("#64c8ff80", WI.Color.Format.HEXAlpha);
test("rgba(100, 200, 255, 0.5)", WI.Color.Format.RGB); // fallback (rgba)
test("rgba(100, 200, 255, 0.5)", WI.Color.Format.RGBA);
2019-01-03 21:58:23 +00:00
test("hsla(201.29, 100%, 69.61%, 0.5)", WI.Color.Format.HSL); // fallback (hsla)
test("hsla(201.29, 100%, 69.61%, 0.5)", WI.Color.Format.HSLA);
2015-11-04 23:59:48 +00:00
// FIXME: Should we clamp rgb(300, 300, 300) => rgb(255, 255, 255) in toStrings?
// FIXME: Should we always stash the original string, no matter how poor?
2019-01-03 21:58:23 +00:00
return true;
2015-11-04 23:59:48 +00:00
}
});
2017-09-15 19:50:40 +00:00
function testColorConversion(func, value, expected) {
let actual = func(...value);
InspectorTest.expectShallowEqual(actual, expected, `Should convert ${JSON.stringify(value)} to ${JSON.stringify(expected)}.`);
}
suite.addTestCase({
2019-01-03 21:58:23 +00:00
name: "WI.Color.rgb2hsl",
description: "Test conversion from RGB to HSL.",
test() {
testColorConversion(WI.Color.rgb2hsl, [0, 0, 0], [0, 0, 0]);
testColorConversion(WI.Color.rgb2hsl, [255, 255, 255], [0, 0, 100]);
testColorConversion(WI.Color.rgb2hsl, [255, 0, 0], [0, 100, 50]);
testColorConversion(WI.Color.rgb2hsl, [0, 255, 0], [120, 100, 50]);
testColorConversion(WI.Color.rgb2hsl, [0, 0, 255], [240, 100, 50]);
2017-09-15 19:50:40 +00:00
// Out-of-bounds and floating point inputs.
2019-01-03 21:58:23 +00:00
testColorConversion(WI.Color.rgb2hsl, [-1, -1, -1], [0, 0, 0]);
testColorConversion(WI.Color.rgb2hsl, [256, 256, 256], [0, 0, 100]);
testColorConversion(WI.Color.rgb2hsl, [254.9, 0, 0], [0, 100, 50]);
2017-09-15 19:50:40 +00:00
2019-01-03 21:58:23 +00:00
return true;
}
});
suite.addTestCase({
name: "WI.Color.hsl2rgb",
description: "Test conversion from HSL to RGB.",
test() {
testColorConversion(WI.Color.hsl2rgb, [0, 0, 0], [0, 0, 0]);
testColorConversion(WI.Color.hsl2rgb, [0, 0, 100], [255, 255, 255]);
testColorConversion(WI.Color.hsl2rgb, [0, 100, 50], [255, 0, 0]);
testColorConversion(WI.Color.hsl2rgb, [120, 100, 50], [0, 255, 0]);
testColorConversion(WI.Color.hsl2rgb, [240, 100, 50], [0, 0, 255]);
// Out-of-bounds.
testColorConversion(WI.Color.hsl2rgb, [-1, -1, -1], [0, 0, 0]);
testColorConversion(WI.Color.hsl2rgb, [361, 101, 50], [255, 0, 0]);
testColorConversion(WI.Color.hsl2rgb, [361, 101, 101], [255, 255, 255]);
return true;
2017-09-15 19:50:40 +00:00
}
});
2019-10-31 22:26:12 +00:00
suite.addTestCase({
name: "WI.Color.hsv2hsl",
description: "Test conversion from HSV to HSL.",
test() {
testColorConversion(WI.Color.hsv2hsl, [42, 100, 0], [42, 0, 0]);
testColorConversion(WI.Color.hsv2hsl, [42, 50, 100], [42, 100, 75]);
testColorConversion(WI.Color.hsv2hsl, [42, 100, 50], [42, 100, 25]);
testColorConversion(WI.Color.hsv2hsl, [42, 50, 50], [42, 33.33333333333333, 37.5]);
testColorConversion(WI.Color.hsv2hsl, [42, 100, 100], [42, 100, 50]);
// Out-of-bounds.
testColorConversion(WI.Color.hsv2hsl, [-1, -1, -1], [0, 0, 0]);
testColorConversion(WI.Color.hsv2hsl, [361, 101, 50], [360, 100, 25]);
testColorConversion(WI.Color.hsv2hsl, [361, 101, 101], [360, 100, 50]);
return true;
}
});
2019-11-07 02:53:40 +00:00
suite.addTestCase({
name: "WI.Color.rgb2hsv",
description: "Test conversion from RGB to HSV.",
test() {
testColorConversion(WI.Color.rgb2hsv, [0, 0, 0], [0, 0, 0]);
testColorConversion(WI.Color.rgb2hsv, [1, 1, 1], [0, 0, 100]);
testColorConversion(WI.Color.rgb2hsv, [1, 0, 0], [0, 100, 100]);
testColorConversion(WI.Color.rgb2hsv, [0, 1, 0], [120, 100, 100]);
testColorConversion(WI.Color.rgb2hsv, [0, 0, 1], [240, 100, 100]);
// Out-of-bounds.
testColorConversion(WI.Color.rgb2hsv, [-1, -1, -1], [0, 0, 0]);
testColorConversion(WI.Color.rgb2hsv, [1.1, 1.1, 1.1], [0, 0, 100]);
return true;
}
});
suite.addTestCase({
name: "WI.Color.hsv2rgb",
description: "Test conversion from HSV to RGB.",
test() {
testColorConversion(WI.Color.hsv2rgb, [42, 100, 0], [0, 0, 0]);
testColorConversion(WI.Color.hsv2rgb, [42, 50, 100], [1, 0.8500000000000001, 0.5]);
testColorConversion(WI.Color.hsv2rgb, [42, 100, 50], [0.5, 0.3500000000000001, 0]);
testColorConversion(WI.Color.hsv2rgb, [42, 50, 50], [0.5, 0.42500000000000004, 0.25]);
testColorConversion(WI.Color.hsv2rgb, [42, 100, 100], [1, 0.7000000000000002, 0]);
// Out-of-bounds.
testColorConversion(WI.Color.hsv2rgb, [-1, -1, -1], [0, 0, 0]);
testColorConversion(WI.Color.hsv2rgb, [361, 101, 50], [0.5, 0, 0]);
testColorConversion(WI.Color.hsv2rgb, [361, 101, 101], [1, 0, 0]);
return true;
}
});
2017-09-15 19:50:40 +00:00
suite.addTestCase({
name: "WI.Color.cmyk2rgb",
description: "Test conversion from CMYK to RGB.",
2019-01-03 21:58:23 +00:00
test() {
2017-09-15 19:50:40 +00:00
testColorConversion(WI.Color.cmyk2rgb, [0, 0, 0, 1], [0, 0, 0]);
testColorConversion(WI.Color.cmyk2rgb, [1, 0, 0, 0], [0, 255, 255]);
testColorConversion(WI.Color.cmyk2rgb, [0, 1, 0, 0], [255, 0, 255]);
testColorConversion(WI.Color.cmyk2rgb, [0, 0, 1, 0], [255, 255, 0]);
testColorConversion(WI.Color.cmyk2rgb, [0, 0, 0, 0], [255, 255, 255]);
// Out-of-bounds inputs.
testColorConversion(WI.Color.cmyk2rgb, [2, 0, 0, 0], [0, 255, 255]);
testColorConversion(WI.Color.cmyk2rgb, [-1, 0, 0, 0], [255, 255, 255]);
2019-01-03 21:58:23 +00:00
return true;
2017-09-15 19:50:40 +00:00
}
});
suite.addTestCase({
name: "WI.Color.normalized2rgb",
description: "Test conversion from normalized RGB to RGB.",
2019-01-03 21:58:23 +00:00
test() {
2017-09-15 19:50:40 +00:00
testColorConversion(WI.Color.normalized2rgb, [0, 0, 0], [0, 0, 0]);
testColorConversion(WI.Color.normalized2rgb, [1, 1, 1], [255, 255, 255]);
testColorConversion(WI.Color.normalized2rgb, [0.24, 0.25, 0.26], [61, 64, 66]); // Values chosen to test round up/down behavior.
// Out-of-bounds inputs.
testColorConversion(WI.Color.normalized2rgb, [2, 0, 0], [255, 0, 0]);
testColorConversion(WI.Color.normalized2rgb, [-1, 0, 0], [0, 0, 0]);
2019-01-03 21:58:23 +00:00
return true;
2017-09-15 19:50:40 +00:00
}
});
2019-11-21 21:11:07 +00:00
suite.addTestCase({
name: "WI.Color.displayP3toSRGB",
description: "Test conversion from display-P3 gamut to sRGB.",
test() {
testColorConversion(WI.Color.displayP3toSRGB, [0, 0, 0], [0, 0, 0]);
2019-12-03 01:46:11 +00:00
testColorConversion(WI.Color.displayP3toSRGB, [1, 1, 1], [0.9999, 1, 1.0001]);
testColorConversion(WI.Color.displayP3toSRGB, [1, 0, 0], [1.093, -0.5434, -0.2538]);
testColorConversion(WI.Color.displayP3toSRGB, [0, 1, 0], [-2.9058, 1.0183, -1.0162]);
testColorConversion(WI.Color.displayP3toSRGB, [0, 0, 1], [0, 0, 1.0421]);
2019-11-21 21:11:07 +00:00
// Out-of-bounds inputs.
2019-12-03 01:46:11 +00:00
testColorConversion(WI.Color.displayP3toSRGB, [2, 0, 0], [1.093, -0.5434, -0.2538]);
2019-11-21 21:11:07 +00:00
testColorConversion(WI.Color.displayP3toSRGB, [-1, 0, 0], [0, 0, 0]);
return true;
}
});
2019-12-03 01:46:11 +00:00
suite.addTestCase({
name: "WI.Color.srgbToDisplayP3",
description: "Test conversion from sRGB gamut to display-P3.",
test() {
testColorConversion(WI.Color.srgbToDisplayP3, [0, 0, 0], [0, 0, 0]);
testColorConversion(WI.Color.srgbToDisplayP3, [1, 1, 1], [1.0001, 1, 0.9999]);
testColorConversion(WI.Color.srgbToDisplayP3, [1, 0, 0], [0.9176, 0.2003, 0.1386]);
testColorConversion(WI.Color.srgbToDisplayP3, [0, 1, 0], [0.4584, 0.9853, 0.2983]);
testColorConversion(WI.Color.srgbToDisplayP3, [0, 0, 1], [0, 0, 0.9595]);
// Out-of-bounds inputs.
testColorConversion(WI.Color.srgbToDisplayP3, [2, 0, 0], [0.9176, 0.2003, 0.1386]);
testColorConversion(WI.Color.srgbToDisplayP3, [-1, 0, 0], [0, 0, 0]);
return true;
}
});
suite.addTestCase({
name: "WI.Color.isOutsideSRGB",
description: "Test conversion from sRGB gamut to display-P3.",
test() {
function test(string) {
let color = WI.Color.fromString(string);
let result = color.isOutsideSRGB();
InspectorTest.log(`"${string}" is ${result ? "outside" : "inside"} sRGB.`);
}
test("color(display-p3 0 0 0)");
test("color(display-p3 1 1 1)");
test("color(display-p3 0.04 0.14 0.016)"); // Barely inside sRGB. Values chosen to test rounding behavior.
test("color(display-p3 1 0 0)");
test("color(display-p3 0.93 0.353 0.353)"); // Barely outside sRGB.
return true;
}
});
2021-02-02 09:02:31 +00:00
suite.addTestCase({
name: "WI.Color.toProtocol",
description: "Test serialization of WI.Color into DOM.RGBAColor.",
test() {
function testInput(input, expected) {
let color = WI.Color.fromString(input);
let actual = color.toProtocol();
InspectorTest.expectShallowEqual(actual, expected, `Should convert ${input} to ${JSON.stringify(expected)}.`);
}
testInput("rgba(10,20,30,40)", {r: 10, g: 20, b: 30, a: 1});
testInput("rgb(10 20 30 / 40%)", {r: 10, g: 20, b: 30, a: 0.4});
testInput("#a0Aa0A", {r: 160, g: 170, b: 10, a: 1});
testInput("rgb(10% 20% 30% / 40%)", {r: 25.5, g: 51, b: 76.5, a: 0.4});
return true;
}
});
2015-11-04 23:59:48 +00:00
suite.runTestCasesAndFinish();
}
< / script >
< / head >
< body onload = "runTest()" >
2017-08-02 03:09:57 +00:00
< p > Tests for the WI.Color model object.< / p >
2015-11-04 23:59:48 +00:00
< / body >
< / html >
