| <!doctype html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function test() |
| { |
| function formatToString(format) { |
| switch (format) { |
| case WI.Color.Format.Original: |
| return "Original"; |
| case WI.Color.Format.Keyword: |
| return "Keyword"; |
| case WI.Color.Format.HEX: |
| return "HEX"; |
| case WI.Color.Format.ShortHEX: |
| return "Short HEX"; |
| case WI.Color.Format.HEXAlpha: |
| return "HEX with Alpha"; |
| case WI.Color.Format.ShortHEXAlpha: |
| return "Short HEX with Alpha"; |
| case WI.Color.Format.RGB: |
| return "RGB"; |
| case WI.Color.Format.RGBA: |
| return "RGBA"; |
| case WI.Color.Format.HSL: |
| return "HSL"; |
| case WI.Color.Format.HSLA: |
| return "HSLA"; |
| default: |
| return "Unexpected format"; |
| } |
| } |
| |
| let suite = InspectorTest.createAsyncSuite("WI.Color"); |
| |
| suite.addTestCase({ |
| name: "WI.Color.fromString", |
| description: "Test we can detect colors from strings.", |
| test(resolve, reject) { |
| function testGood(string, expectedFormat) { |
| let color = WI.Color.fromString(string); |
| InspectorTest.expectThat(color instanceof WI.Color, `'${string}' should be detected`); |
| InspectorTest.expectThat(color && color.format === expectedFormat, `'${string}' was the expected '${formatToString(expectedFormat)}' format`); |
| } |
| |
| function testBad(string) { |
| let color = WI.Color.fromString(string); |
| InspectorTest.expectThat(color === null, `'${string}' should not be detected`); |
| if (color) InspectorTest.log(`'${string}' detected with format '${formatToString(color.format)}'`); |
| } |
| |
| 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); |
| |
| testGood("rgb(1,2,3)", WI.Color.Format.RGB); |
| testGood("RGB(1,2,3)", WI.Color.Format.RGB); |
| testGood("rgb(999, 999, 999)", WI.Color.Format.RGB); |
| testGood("rgb( 1 , 1 , 1 )", WI.Color.Format.RGB); |
| |
| testGood("rgba(1,2,3,0)", WI.Color.Format.RGBA); |
| testGood("RGBA(1,2,3,0)", WI.Color.Format.RGBA); |
| testGood("rgba(999, 999, 999, 999)", WI.Color.Format.RGBA); |
| testGood("rgba( 1 , 1 , 1 , 0.5 )", WI.Color.Format.RGBA); |
| |
| testGood("hsl(0, 0%, 50%)", WI.Color.Format.HSL); |
| testGood("HSL(0, 0%, 50%)", WI.Color.Format.HSL); |
| testGood("hsl(999, 999%, 999%)", WI.Color.Format.HSL); |
| testGood("hsl( 0 , 0% , 50% )", WI.Color.Format.HSL); |
| |
| testGood("hsla(0, 0%, 50%, 0)", WI.Color.Format.HSLA); |
| testGood("HSLA(0, 0%, 50%, 0)", WI.Color.Format.HSLA); |
| testGood("hsla(999, 999%, 999%, 999)", WI.Color.Format.HSLA); |
| testGood("hsla( 0 , 0% , 50% , 0.5 )", WI.Color.Format.HSLA); |
| |
| testGood("blue", WI.Color.Format.Keyword); |
| testGood("BLuE", WI.Color.Format.Keyword); |
| testGood("midnightblue", WI.Color.Format.Keyword); |
| testGood("royalblue", WI.Color.Format.Keyword); |
| testGood("steelblue", WI.Color.Format.Keyword); |
| testGood("transparent", WI.Color.Format.Keyword); |
| |
| InspectorTest.log(""); |
| |
| testBad(" #000 "); // whitespace |
| testBad("#rgb"); // bad hex |
| testBad("#1"); // 1 |
| testBad("#12"); // 2 |
| testBad("#12345"); // 5 |
| testBad("#1234567"); // 7 |
| testBad("#123456789"); // 9 |
| testBad("rgb(255, 255, 255, 0.5)"); // extra values |
| testBad("rgba(255, 255, 255, 0.5, 1)"); // extra values |
| testBad("hsl(0, 0%, 50%, 1)"); // extra value |
| testBad("hsla(0, 0%, 50%, 1, 2)"); // extra values |
| testBad("superblue"); // not a keyword |
| |
| // 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 |
| |
| resolve(); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "WI.Color properties", |
| description: "Test different color properties.", |
| test(resolve, reject) { |
| let color; |
| |
| color = WI.Color.fromString("red"); |
| InspectorTest.expectThat(color.alpha === 1, "'red' should have alpha of 1."); |
| InspectorTest.expectThat(color.simple === true, "'red' should be simple."); |
| InspectorTest.expectThat(color.isKeyword() === true, "'red' should be a keyword."); |
| 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]."); |
| InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === true, "'red' should be serializable as a short Hex"); |
| |
| color = WI.Color.fromString("transparent"); |
| InspectorTest.expectThat(color.alpha === 0, "'transparent' should have alpha of 0."); |
| InspectorTest.expectThat(color.simple === false, "'transparent' should not be simple."); |
| InspectorTest.expectThat(color.isKeyword() === true, "'transparent' should be a keyword."); |
| 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]."); |
| InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === true, "'transparent' should be serializable as a short Hex"); |
| |
| color = WI.Color.fromString("#11122233"); |
| 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."); |
| InspectorTest.expectShallowEqual(color.rgba, [17, 18, 34, 0.2], "'#11122233' has rgba of [17, 18, 34, 0.2]."); |
| InspectorTest.expectShallowEqual(color.hsla, [236, 33, 10, 0.2], "'#11122233' has hsla of [236, 33, 10, 0.2]."); |
| InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === false, "'#11122233' should not be serializable as a short Hex"); |
| |
| color = WI.Color.fromString("#11223344"); |
| InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === true, "'#11223344' should be serializable as a short Hex"); |
| |
| color = WI.Color.fromString("#11223345"); |
| InspectorTest.expectThat(color.canBeSerializedAsShortHEX() === false, "'#11223345' should not be serializable as a short Hex"); |
| |
| resolve(); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "WI.Color from components", |
| description: "Test different three- and four-component colors.", |
| test(resolve, reject) { |
| function test(color, components) { |
| InspectorTest.log(`Check components for color '${color.toString()}'.`); |
| for (let key in components) { |
| let value = components[key]; |
| InspectorTest.expectShallowEqual(color[key], value, `Should have ${key} of ${JSON.stringify(value)}.`); |
| } |
| } |
| |
| 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], |
| hsl: [0, 0, 50], |
| hsla: [0, 0, 50, 0.5], |
| }); |
| |
| test(new WI.Color(WI.Color.Format.HSL, [0, 0, 50]), { |
| rgb: [128, 128, 128], |
| rgba: [128, 128, 128, 1], |
| hsl: [0, 0, 50], |
| hsla: [0, 0, 50, 1], |
| }); |
| |
| test(new WI.Color(WI.Color.Format.HSLA, [0, 0, 50, 0.5]), { |
| rgb: [128, 128, 128], |
| rgba: [128, 128, 128, 0.5], |
| hsl: [0, 0, 50], |
| hsla: [0, 0, 50, 0.5], |
| }); |
| |
| resolve(); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "WI.Color.prototype.nextFormat", |
| description: "Test we can cycle through color formats for different colors.", |
| test(resolve, reject) { |
| function test(string, phases) { |
| let color = WI.Color.fromString(string); |
| color.format = WI.Color.Format.Original; |
| |
| 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", [ |
| WI.Color.Format.RGBA, |
| WI.Color.Format.HSLA, |
| WI.Color.Format.Keyword, |
| WI.Color.Format.ShortHEXAlpha, |
| WI.Color.Format.HEXAlpha, |
| ]); |
| |
| // All without alpha. |
| test("red", [ |
| WI.Color.Format.RGB, |
| WI.Color.Format.HSL, |
| WI.Color.Format.Keyword, |
| WI.Color.Format.ShortHEX, |
| WI.Color.Format.HEX, |
| ]); |
| |
| // No short hex or keyword. |
| test("rgb(100, 150, 200)", [ |
| WI.Color.Format.RGB, |
| WI.Color.Format.HSL, |
| WI.Color.Format.HEX, |
| ]); |
| |
| // No short hex alpha or keyword. |
| test("rgba(100, 150, 200, 0.5)", [ |
| WI.Color.Format.RGBA, |
| WI.Color.Format.HSLA, |
| WI.Color.Format.HEXAlpha, |
| ]); |
| |
| resolve(); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "WI.Color.prototype.toString", |
| description: "Test the different toString outputs.", |
| test(resolve, reject) { |
| 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. |
| 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); |
| |
| // A color which cannot be some formats, those fallback to something else. |
| 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); |
| test("hsla(201, 100%, 70%, 0.5)", WI.Color.Format.HSL); // fallback (hsla) |
| test("hsla(201, 100%, 70%, 0.5)", WI.Color.Format.HSLA); |
| |
| // 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? |
| |
| resolve(); |
| } |
| }); |
| |
| function testColorConversion(func, value, expected) { |
| let actual = func(...value); |
| InspectorTest.expectShallowEqual(actual, expected, `Should convert ${JSON.stringify(value)} to ${JSON.stringify(expected)}.`); |
| } |
| |
| suite.addTestCase({ |
| name: "WI.Color.rgb2hsv", |
| description: "Test conversion from RGB to HSV.", |
| test(resolve, reject) { |
| testColorConversion(WI.Color.rgb2hsv, [0, 0, 0], [0, 0, 0]); |
| testColorConversion(WI.Color.rgb2hsv, [255, 255, 255], [0, 0, 1]); |
| testColorConversion(WI.Color.rgb2hsv, [255, 0, 0], [0, 1, 1]); |
| testColorConversion(WI.Color.rgb2hsv, [0, 255, 0], [120, 1, 1]); |
| testColorConversion(WI.Color.rgb2hsv, [0, 0, 255], [240, 1, 1]); |
| |
| // Out-of-bounds and floating point inputs. |
| testColorConversion(WI.Color.rgb2hsv, [-1, -1, -1], [0, 0, 0]); |
| testColorConversion(WI.Color.rgb2hsv, [256, 256, 256], [0, 0, 1]); |
| testColorConversion(WI.Color.rgb2hsv, [254.9, 0, 0], [0, 1, 1]); |
| |
| resolve(); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "WI.Color.cmyk2rgb", |
| description: "Test conversion from CMYK to RGB.", |
| test(resolve, reject) { |
| 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]); |
| |
| resolve(); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "WI.Color.normalized2rgb", |
| description: "Test conversion from normalized RGB to RGB.", |
| test(resolve, reject) { |
| 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]); |
| |
| resolve(); |
| } |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>Tests for the WI.Color model object.</p> |
| </body> |
| </html> |
