mozilla-central/devtools/client/inspector/shared/test/browser_styleinspector_output-parser.js (file symbol)

Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

/* Any copyright is dedicated to the Public Domain.
"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 FLEX_CLASS = "flex-class";
const GRID_CLASS = "grid-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:
test: fragment => {
is(countAll(fragment), 1);
is(
getUrl(fragment),
);
},
},
{
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:
test: fragment => {
is(countAll(fragment), 3);
is(countColors(fragment), 1);
},
},
{
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(())");
},
},
{
name: "display",
value: "flex",
test: fragment => {
is(countFlex(fragment), 1, "Got expected flex toggle button");
},
},
{
name: "display",
value: "grid",
test: fragment => {
is(countGrid(fragment), 1, "Got expected grid toggle button");
},
},
{
name: "display",
value: "flex",
parserOptions: { flexClass: null },
test: fragment => {
is(
countFlex(fragment),
0,
"No flex toggle button is created when flexClass is null"
);
},
},
{
name: "display",
value: "grid",
parserOptions: { gridClass: null },
test: fragment => {
is(
countGrid(fragment),
0,
"No grid toggle button is created when gridClass is null"
);
},
},
];
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,
flexClass: FLEX_CLASS,
gridClass: GRID_CLASS,
...(data.parserOptions || {}),
})
);
}
});
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 countFlex(fragment) {
return fragment.querySelectorAll("." + FLEX_CLASS).length;
}
function countGrid(fragment) {
return fragment.querySelectorAll("." + GRID_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;
}