Alexandre Poirot
4efe3e761d
So that we avoid doing too many hardcoded checks against the DOM hiearchy used by the frontend. Differential Revision: https://phabricator.services.mozilla.com/D284539
120 lines
3.1 KiB
JavaScript
120 lines
3.1 KiB
JavaScript
/* Any copyright is dedicated to the Public Domain.
|
|
http://creativecommons.org/publicdomain/zero/1.0/ */
|
|
|
|
"use strict";
|
|
|
|
// Test that the rule-view content is correct when the page defines layers.
|
|
|
|
const TEST_URI = `
|
|
<style type="text/css">
|
|
@import url(${URL_ROOT_COM_SSL}doc_imported_anonymous_layer.css) layer;
|
|
@import url(${URL_ROOT_COM_SSL}doc_imported_named_layer.css) layer(importedLayer);
|
|
@import url(${URL_ROOT_COM_SSL}doc_imported_no_layer.css);
|
|
|
|
@layer myLayer {
|
|
h1, [test-hint=named-layer] {
|
|
background-color: tomato;
|
|
color: lightgreen;
|
|
}
|
|
}
|
|
|
|
@layer {
|
|
h1, [test-hint=anonymous-layer] {
|
|
color: green;
|
|
font-variant: small-caps
|
|
}
|
|
}
|
|
|
|
h1, [test-hint=no-rule-layer] {
|
|
color: pink;
|
|
}
|
|
</style>
|
|
<h1>Hello @layer!</h1>
|
|
`;
|
|
|
|
add_task(async function () {
|
|
await addTab(
|
|
"https://example.com/document-builder.sjs?html=" +
|
|
encodeURIComponent(TEST_URI)
|
|
);
|
|
const { inspector, view } = await openRuleView();
|
|
|
|
await selectNode("h1", inspector);
|
|
|
|
checkRuleViewContent(view, [
|
|
{ selector: "element", selectorEditable: false, ancestorRulesData: null },
|
|
{
|
|
selector: `h1, ~~[test-hint="no-rule-layer"]~~`,
|
|
ancestorRulesData: null,
|
|
},
|
|
{
|
|
selector: `h1, ~~[test-hint="imported-no-layer--no-rule-layer"]~~`,
|
|
ancestorRulesData: null,
|
|
},
|
|
{
|
|
selector: `h1, ~~[test-hint="anonymous-layer"]~~`,
|
|
ancestorRulesData: ["@layer {"],
|
|
},
|
|
{
|
|
selector: `h1, ~~[test-hint="named-layer"]~~`,
|
|
ancestorRulesData: ["@layer myLayer {"],
|
|
},
|
|
{
|
|
selector: `h1, ~~[test-hint="imported-named-layer--no-rule-layer"]~~`,
|
|
ancestorRulesData: ["@layer importedLayer {", " @media screen {"],
|
|
},
|
|
{
|
|
selector: `h1, ~~[test-hint="imported-named-layer--named-layer"]~~`,
|
|
ancestorRulesData: [
|
|
"@layer importedLayer {",
|
|
" @media screen {",
|
|
" @layer in-imported-stylesheet {",
|
|
],
|
|
},
|
|
{
|
|
selector: `h1, ~~[test-hint="imported-nested-named-layer--named-layer"]~~`,
|
|
ancestorRulesData: [
|
|
"@layer importedLayer {",
|
|
" @layer importedNestedLayer {",
|
|
" @layer in-imported-nested-stylesheet {",
|
|
],
|
|
},
|
|
{
|
|
selector: `h1, ~~[test-hint="imported-anonymous-layer--no-rule-layer"]~~`,
|
|
ancestorRulesData: ["@layer {"],
|
|
},
|
|
]);
|
|
});
|
|
|
|
add_task(async function editStylesheetLayerRule() {
|
|
await addTab(
|
|
"https://example.com/document-builder.sjs?html=" +
|
|
encodeURIComponent(`
|
|
<link rel="stylesheet" href="${URL_ROOT_COM_SSL}doc_layer_edit.css">
|
|
<h1>Editing @layer stylesheet</h1>
|
|
`)
|
|
);
|
|
|
|
const { inspector, view } = await openRuleView();
|
|
|
|
info("Select h1 node");
|
|
await selectNode("h1", inspector);
|
|
|
|
is(
|
|
await getComputedStyleProperty("h1", null, "font-size"),
|
|
"20px",
|
|
"original font-size value for h1 is 20px"
|
|
);
|
|
|
|
const prop = getTextProperty(view, 1, { "font-size": "20px" });
|
|
|
|
info("Change font-size");
|
|
await setProperty(view, prop, "42px");
|
|
|
|
is(
|
|
await getComputedStyleProperty("h1", null, "font-size"),
|
|
"42px",
|
|
"h1 font-size was properly set"
|
|
);
|
|
});
|