mozilla-central/devtools/client/inspector/rules/test/browser_rules_variables_01.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 for variables in rule view.
const TEST_URI = URL_ROOT + "doc_variables_1.html";
add_task(async function () {
await addTab(TEST_URI);
const { inspector, view } = await openRuleView();
await selectNode("#target", inspector);
info(
"Tests basic support for CSS Variables for both single variable " +
"and double variable. Formats tested: var(x, constant), var(x, var(y))"
);
const unsetColor = getRuleViewProperty(
view,
"div",
"color"
).valueSpan.querySelector(".inspector-unmatched");
is(unsetColor.textContent, " red", "red is unmatched in color");
await assertVariableTooltipForProperty(view, "div", "color", {
header:
// prettier-ignore
'<span xmlns="http://www.w3.org/1999/xhtml" data-color="chartreuse" class="color-swatch-container">' +
'<span class="inspector-swatch inspector-colorswatch" style="background-color:chartreuse">' +
'</span>' +
'<span class="ruleview-color">chartreuse</span>' +
'</span>',
// Computed value isn't displayed when it's the same as we put in the header
computed: null,
});
await assertVariableTooltipForProperty(view, "div", "background-color", {
index: 0,
header: "--not-set is not set",
headerClasses: [],
isMatched: false,
});
await assertVariableTooltipForProperty(view, "div", "background-color", {
index: 1,
header:
// prettier-ignore
'<span xmlns="http://www.w3.org/1999/xhtml" data-color="seagreen" class="color-swatch-container">' +
'<span class="inspector-swatch inspector-colorswatch" style="background-color:seagreen">' +
'</span>' +
'<span class="ruleview-color">seagreen</span>' +
'</span>',
// Computed value isn't displayed when it's the same as we put in the header
computed: null,
});
await assertVariableTooltipForProperty(view, "div", "outline-color", {
header:
// prettier-ignore
'<span xmlns="http://www.w3.org/1999/xhtml" data-color="chartreuse" class="color-swatch-container">' +
'<span class="inspector-swatch inspector-colorswatch" style="background-color:chartreuse">' +
'</span>' +
'<span class="ruleview-color">' +
'var(' +
'<span data-variable="chartreuse" class="inspector-variable">--color</span>' +
')' +
'</span>' +
'</span>',
computed:
// prettier-ignore
`<span xmlns="http://www.w3.org/1999/xhtml" data-color="chartreuse" class="color-swatch-container">` +
`<span ` +
`class="inspector-swatch inspector-colorswatch" ` +
`style="background-color:chartreuse">` +
`</span>` +
`<span class="ruleview-color">chartreuse</span>` +
`</span>`,
});
await assertVariableTooltipForProperty(view, "div", "border-color", {
header:
// prettier-ignore
'<span xmlns="http://www.w3.org/1999/xhtml">' +
'var(' +
'<span data-variable="light-dark(var(--color), var(--bg))" class="inspector-variable" data-variable-computed="light-dark(chartreuse, seagreen)">' +
'--theme-color' +
'</span>' +
')' +
'</span>',
computed:
// prettier-ignore
`light-dark(` +
`<span xmlns="http://www.w3.org/1999/xhtml" data-color="chartreuse" class="color-swatch-container">` +
`<span ` +
`class="inspector-swatch inspector-colorswatch" ` +
`style="background-color:chartreuse" ` +
`data-color-function="light-dark">` +
`</span>` +
`<span class="ruleview-color">chartreuse</span>` +
`</span>, ` +
`<span xmlns="http://www.w3.org/1999/xhtml" data-color="seagreen" class="color-swatch-container inspector-unmatched">` +
`<span ` +
`class="inspector-swatch inspector-colorswatch" ` +
`style="background-color:seagreen" ` +
`data-color-function="light-dark">` +
`</span>` +
`<span class="ruleview-color">seagreen</span>` +
`</span>` +
`)`,
});
await assertVariableTooltipForProperty(view, "div", "background", {
header:
// prettier-ignore
'<span xmlns="http://www.w3.org/1999/xhtml">' +
'var(' +
'<span data-variable="" class="inspector-variable">' +
'--empty' +
'</span>' +
')' +
'</span>',
computed: "&lt;empty&gt;",
computedClasses: ["empty-css-variable"],
});
await assertVariableTooltipForProperty(view, "*", "--nested-with-empty", {
header: "&lt;empty&gt;",
headerClasses: ["empty-css-variable"],
});
});