diff options
Diffstat (limited to 'devtools/client/shared/test/browser_css_color.js')
-rw-r--r-- | devtools/client/shared/test/browser_css_color.js | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/devtools/client/shared/test/browser_css_color.js b/devtools/client/shared/test/browser_css_color.js new file mode 100644 index 000000000..c0846c362 --- /dev/null +++ b/devtools/client/shared/test/browser_css_color.js @@ -0,0 +1,137 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const TEST_URI = "data:text/html;charset=utf-8,browser_css_color.js"; +var {colorUtils} = require("devtools/shared/css/color"); +/* global getFixtureColorData */ +loadHelperScript("helper_color_data.js"); + +add_task(function* () { + yield addTab("about:blank"); + let [host,, doc] = yield createHost("bottom", TEST_URI); + + info("Creating a test canvas element to test colors"); + let canvas = createTestCanvas(doc); + info("Starting the test"); + testColorUtils(canvas); + + host.destroy(); + gBrowser.removeCurrentTab(); +}); + +function createTestCanvas(doc) { + let canvas = doc.createElement("canvas"); + canvas.width = canvas.height = 10; + doc.body.appendChild(canvas); + return canvas; +} + +function testColorUtils(canvas) { + let data = getFixtureColorData(); + + for (let {authored, name, hex, hsl, rgb} of data) { + let color = new colorUtils.CssColor(authored); + + // Check all values. + info("Checking values for " + authored); + is(color.name, name, "color.name === name"); + is(color.hex, hex, "color.hex === hex"); + is(color.hsl, hsl, "color.hsl === hsl"); + is(color.rgb, rgb, "color.rgb === rgb"); + + testToString(color, name, hex, hsl, rgb); + testColorMatch(name, hex, hsl, rgb, color.rgba, canvas); + } + + testSetAlpha(); +} + +function testToString(color, name, hex, hsl, rgb) { + color.colorUnit = colorUtils.CssColor.COLORUNIT.name; + is(color.toString(), name, "toString() with authored type"); + + color.colorUnit = colorUtils.CssColor.COLORUNIT.hex; + is(color.toString(), hex, "toString() with hex type"); + + color.colorUnit = colorUtils.CssColor.COLORUNIT.hsl; + is(color.toString(), hsl, "toString() with hsl type"); + + color.colorUnit = colorUtils.CssColor.COLORUNIT.rgb; + is(color.toString(), rgb, "toString() with rgb type"); +} + +function testColorMatch(name, hex, hsl, rgb, rgba, canvas) { + let target; + let ctx = canvas.getContext("2d"); + + let clearCanvas = function () { + canvas.width = 1; + }; + let setColor = function (color) { + ctx.fillStyle = color; + ctx.fillRect(0, 0, 1, 1); + }; + let setTargetColor = function () { + clearCanvas(); + // All colors have rgba so we can use this to compare against. + setColor(rgba); + let [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data; + target = {r: r, g: g, b: b, a: a}; + }; + let test = function (color, type) { + // hsla -> rgba -> hsla produces inaccurate results so we + // need some tolerence here. + let tolerance = 3; + clearCanvas(); + + setColor(color); + let [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data; + + let rgbFail = Math.abs(r - target.r) > tolerance || + Math.abs(g - target.g) > tolerance || + Math.abs(b - target.b) > tolerance; + ok(!rgbFail, "color " + rgba + " matches target. Type: " + type); + if (rgbFail) { + info(`target: ${target.toSource()}, color: [r: ${r}, g: ${g}, b: ${b}, a: ${a}]`); + } + + let alphaFail = a !== target.a; + ok(!alphaFail, "color " + rgba + " alpha value matches target."); + }; + + setTargetColor(); + + test(name, "name"); + test(hex, "hex"); + test(hsl, "hsl"); + test(rgb, "rgb"); +} + +function testSetAlpha() { + let values = [ + ["longhex", "#ff0000", 0.5, "rgba(255, 0, 0, 0.5)"], + ["hex", "#f0f", 0.2, "rgba(255, 0, 255, 0.2)"], + ["rgba", "rgba(120, 34, 23, 1)", 0.25, "rgba(120, 34, 23, 0.25)"], + ["rgb", "rgb(120, 34, 23)", 0.25, "rgba(120, 34, 23, 0.25)"], + ["hsl", "hsl(208, 100%, 97%)", 0.75, "rgba(240, 248, 255, 0.75)"], + ["hsla", "hsla(208, 100%, 97%, 1)", 0.75, "rgba(240, 248, 255, 0.75)"], + ["alphahex", "#f08f", 0.6, "rgba(255, 0, 136, 0.6)"], + ["longalphahex", "#00ff80ff", 0.2, "rgba(0, 255, 128, 0.2)"] + ]; + values.forEach(([type, value, alpha, expected]) => { + is(colorUtils.setAlpha(value, alpha), expected, + "correctly sets alpha value for " + type); + }); + + try { + colorUtils.setAlpha("rgb(24, 25%, 45, 1)", 1); + ok(false, "Should fail when passing in an invalid color."); + } catch (e) { + ok(true, "Fails when setAlpha receives an invalid color."); + } + + is(colorUtils.setAlpha("#fff"), "rgba(255, 255, 255, 1)", + "sets alpha to 1 if invalid."); +} |