diff options
Diffstat (limited to 'devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js')
-rw-r--r-- | devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js | 381 |
1 files changed, 381 insertions, 0 deletions
diff --git a/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js b/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js new file mode 100644 index 0000000000..1aa2879ee2 --- /dev/null +++ b/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js @@ -0,0 +1,381 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test expected outputs of the output-parser's parseCssProperty function. + +// This is more of a unit test than a mochitest-browser test, but can't be +// tested with an xpcshell test as the output-parser requires the DOM to work. + +const OutputParser = require("resource://devtools/client/shared/output-parser.js"); + +const COLOR_CLASS = "color-class"; +const URL_CLASS = "url-class"; +const CUBIC_BEZIER_CLASS = "bezier-class"; +const ANGLE_CLASS = "angle-class"; +const LINEAR_EASING_CLASS = "linear-easing-class"; + +const TEST_DATA = [ + { + name: "width", + value: "100%", + test: fragment => { + is(countAll(fragment), 0); + is(fragment.textContent, "100%"); + }, + }, + { + name: "width", + value: "blue", + test: fragment => { + is(countAll(fragment), 0); + }, + }, + { + name: "content", + value: "'red url(test.png) repeat top left'", + test: fragment => { + is(countAll(fragment), 0); + }, + }, + { + name: "content", + value: '"blue"', + test: fragment => { + is(countAll(fragment), 0); + }, + }, + { + name: "margin-left", + value: "url(something.jpg)", + test: fragment => { + is(countAll(fragment), 0); + }, + }, + { + name: "background-color", + value: "transparent", + test: fragment => { + is(countAll(fragment), 2); + is(countColors(fragment), 1); + is(fragment.textContent, "transparent"); + }, + }, + { + name: "color", + value: "red", + test: fragment => { + is(countColors(fragment), 1); + is(fragment.textContent, "red"); + }, + }, + { + name: "color", + value: "#F06", + test: fragment => { + is(countColors(fragment), 1); + is(fragment.textContent, "#F06"); + }, + }, + { + name: "border", + value: "80em dotted pink", + test: fragment => { + is(countAll(fragment), 2); + is(countColors(fragment), 1); + is(getColor(fragment), "pink"); + }, + }, + { + name: "color", + value: "red !important", + test: fragment => { + is(countColors(fragment), 1); + is(fragment.textContent, "red !important"); + }, + }, + { + name: "background", + value: "red url(test.png) repeat top left", + test: fragment => { + is(countColors(fragment), 1); + is(countUrls(fragment), 1); + is(getColor(fragment), "red"); + is(getUrl(fragment), "test.png"); + is(countAll(fragment), 3); + }, + }, + { + name: "background", + value: "blue url(test.png) repeat top left !important", + test: fragment => { + is(countColors(fragment), 1); + is(countUrls(fragment), 1); + is(getColor(fragment), "blue"); + is(getUrl(fragment), "test.png"); + is(countAll(fragment), 3); + }, + }, + { + name: "list-style-image", + value: 'url("images/arrow.gif")', + test: fragment => { + is(countAll(fragment), 1); + is(getUrl(fragment), "images/arrow.gif"); + }, + }, + { + name: "list-style-image", + value: 'url("images/arrow.gif")!important', + test: fragment => { + is(countAll(fragment), 1); + is(getUrl(fragment), "images/arrow.gif"); + is(fragment.textContent, 'url("images/arrow.gif")!important'); + }, + }, + { + name: "background", + value: + "linear-gradient(to right, rgba(183,222,237,1) 0%, " + + "rgba(33,180,226,1) 30%, rgba(31,170,217,.5) 44%, " + + "#F06 75%, red 100%)", + test: fragment => { + is(countAll(fragment), 10); + const allSwatches = fragment.querySelectorAll("." + COLOR_CLASS); + is(allSwatches.length, 5); + is(allSwatches[0].textContent, "rgba(183,222,237,1)"); + is(allSwatches[1].textContent, "rgba(33,180,226,1)"); + is(allSwatches[2].textContent, "rgba(31,170,217,.5)"); + is(allSwatches[3].textContent, "#F06"); + is(allSwatches[4].textContent, "red"); + }, + }, + { + name: "background", + value: + "radial-gradient(circle closest-side at center, orange 0%, red 100%)", + test: fragment => { + is(countAll(fragment), 4); + const colorSwatches = fragment.querySelectorAll("." + COLOR_CLASS); + is(colorSwatches.length, 2); + is(colorSwatches[0].textContent, "orange"); + is(colorSwatches[1].textContent, "red"); + }, + }, + { + name: "background", + value: "white url(http://test.com/wow_such_image.png) no-repeat top left", + test: fragment => { + is(countAll(fragment), 3); + is(countUrls(fragment), 1); + is(countColors(fragment), 1); + }, + }, + { + name: "background", + value: + 'url("http://test.com/wow_such_(oh-noes)image.png?testid=1&color=red#w00t")', + test: fragment => { + is(countAll(fragment), 1); + is( + getUrl(fragment), + "http://test.com/wow_such_(oh-noes)image.png?testid=1&color=red#w00t" + ); + }, + }, + { + name: "background-image", + value: "url(this-is-an-incredible-image.jpeg)", + test: fragment => { + is(countAll(fragment), 1); + is(getUrl(fragment), "this-is-an-incredible-image.jpeg"); + }, + }, + { + name: "background", + value: + 'red url( "http://wow.com/cool/../../../you\'re(doingit)wrong" ) repeat center', + test: fragment => { + is(countAll(fragment), 3); + is(countColors(fragment), 1); + is(getUrl(fragment), "http://wow.com/cool/../../../you're(doingit)wrong"); + }, + }, + { + name: "background-image", + value: + "url(../../../look/at/this/folder/structure/../" + + "../red.blue.green.svg )", + test: fragment => { + is(countAll(fragment), 1); + is( + getUrl(fragment), + "../../../look/at/this/folder/structure/../" + "../red.blue.green.svg" + ); + }, + }, + { + name: "transition-timing-function", + value: "linear", + test: fragment => { + is(countCubicBeziers(fragment), 1); + is(getCubicBezier(fragment), "linear"); + }, + }, + { + name: "animation-timing-function", + value: "ease-in-out", + test: fragment => { + is(countCubicBeziers(fragment), 1); + is(getCubicBezier(fragment), "ease-in-out"); + }, + }, + { + name: "animation-timing-function", + value: "cubic-bezier(.1, 0.55, .9, -3.45)", + test: fragment => { + is(countCubicBeziers(fragment), 1); + is(getCubicBezier(fragment), "cubic-bezier(.1, 0.55, .9, -3.45)"); + }, + }, + { + name: "animation-timing-function", + value: "CUBIC-BEZIER(.1, 0.55, .9, -3.45)", + test: fragment => { + is(countCubicBeziers(fragment), 1); + is(getCubicBezier(fragment), "CUBIC-BEZIER(.1, 0.55, .9, -3.45)"); + }, + }, + { + name: "animation", + value: "move 3s cubic-bezier(.1, 0.55, .9, -3.45)", + test: fragment => { + is(countCubicBeziers(fragment), 1); + is(getCubicBezier(fragment), "cubic-bezier(.1, 0.55, .9, -3.45)"); + }, + }, + { + name: "transition", + value: "top 1s ease-in", + test: fragment => { + is(countCubicBeziers(fragment), 1); + is(getCubicBezier(fragment), "ease-in"); + }, + }, + { + name: "animation-timing-function", + value: "linear(0, 1 50% 100%)", + test: fragment => { + is(countLinears(fragment), 1); + is(getLinear(fragment), "linear(0, 1 50% 100%)"); + }, + }, + { + name: "animation-timing-function", + value: "LINEAR(0, 1 50% 100%)", + test: fragment => { + is(countLinears(fragment), 1); + is(getLinear(fragment), "LINEAR(0, 1 50% 100%)"); + }, + }, + { + name: "transition", + value: "top 3s steps(4, end)", + test: fragment => { + is(countAll(fragment), 0); + }, + }, + { + name: "transition", + value: "top 3s step-start", + test: fragment => { + is(countAll(fragment), 0); + }, + }, + { + name: "transition", + value: "top 3s step-end", + test: fragment => { + is(countAll(fragment), 0); + }, + }, + { + name: "background", + value: "rgb(255, var(--g-value), 192)", + test: fragment => { + is(fragment.textContent, "rgb(255, var(--g-value), 192)"); + }, + }, + { + name: "background", + value: "rgb(255, var(--g-value, 0), 192)", + test: fragment => { + is(fragment.textContent, "rgb(255, var(--g-value, 0), 192)"); + }, + }, + { + name: "--url", + value: "url(())", + test: fragment => { + is(countAll(fragment), 0); + is(fragment.textContent, "url(())"); + }, + }, +]; + +add_task(async function () { + const cssProperties = getClientCssProperties(); + const parser = new OutputParser(document, cssProperties); + for (let i = 0; i < TEST_DATA.length; i++) { + const data = TEST_DATA[i]; + info( + "Output-parser test data " + + i + + ". {" + + data.name + + " : " + + data.value + + ";}" + ); + data.test( + parser.parseCssProperty(data.name, data.value, { + colorClass: COLOR_CLASS, + urlClass: URL_CLASS, + bezierClass: CUBIC_BEZIER_CLASS, + angleClass: ANGLE_CLASS, + linearEasingClass: LINEAR_EASING_CLASS, + }) + ); + } +}); + +function countAll(fragment) { + return fragment.querySelectorAll("*").length; +} +function countColors(fragment) { + return fragment.querySelectorAll("." + COLOR_CLASS).length; +} +function countUrls(fragment) { + return fragment.querySelectorAll("." + URL_CLASS).length; +} +function countCubicBeziers(fragment) { + return fragment.querySelectorAll("." + CUBIC_BEZIER_CLASS).length; +} +function countLinears(fragment) { + return fragment.querySelectorAll("." + LINEAR_EASING_CLASS).length; +} +function getColor(fragment, index) { + return fragment.querySelectorAll("." + COLOR_CLASS)[index || 0].textContent; +} +function getUrl(fragment, index) { + return fragment.querySelectorAll("." + URL_CLASS)[index || 0].textContent; +} +function getCubicBezier(fragment, index) { + return fragment.querySelectorAll("." + CUBIC_BEZIER_CLASS)[index || 0] + .textContent; +} +function getLinear(fragment, index = 0) { + return fragment.querySelectorAll("." + LINEAR_EASING_CLASS)[index] + .textContent; +} |