Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: layout/inspector/tests/mochitest.toml
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test InspectorUtils::replaceBlockRuleBodyTextInStylesheet</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
<style>
#test-simple {
color: #f0c;
}
#test-unicode,[data-unicode="🦄👨👩👧👦"]::after {
content: /* test comment */ "👨👩👧👦🦄";
outline: 2px solid salmon;
}
#test-empty {} /* 🛠️⚒️🛠️ */ #test-same-line { font-size: 3em; }
#test-nested-parent {
color: tomato;
#test-nested-child {
background: gold;
}
}#test-after-closing-bracket{--modified:false}
</style>
<script>SimpleTest.waitForExplicitFinish();</script>
<script defer>
const InspectorUtils = SpecialPowers.InspectorUtils;
let stylesheet = document.styleSheets[1];
let authoredStyleSheetText = document.querySelector("style").textContent;
const existingRulesAuthoredText = [
`#test-simple {
color: #f0c;
}`,
`#test-unicode,[data-unicode="🦄👨👩👧👦"]::after {
content: /* test comment */ "👨👩👧👦🦄";
outline: 2px solid salmon;
}`,
`#test-empty {}`,
`#test-same-line { font-size: 3em; }`,
`#test-nested-parent {
color: tomato;
#test-nested-child {
background: gold;
}
}`,
`#test-nested-child {
background: gold;
}`,
`#test-after-closing-bracket{--modified:false}`,
];
const replaceBlockRuleBodyTextInStylesheet = (rule, newBodyText) => {
return InspectorUtils.replaceBlockRuleBodyTextInStylesheet(
authoredStyleSheetText,
InspectorUtils.getRelativeRuleLine(rule),
InspectorUtils.getRuleColumn(rule),
newBodyText
)};
info("Check a simple case");
let newBodyText = `border-color: cyan;`;
is(
replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[0], newBodyText),
authoredStyleSheetText.replace(
existingRulesAuthoredText[0],
`#test-simple {${newBodyText}}`,
),
"Got the expected result for #test-simple"
);
info("Check that the rule body can be emptied");
is(
replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[0], ""),
authoredStyleSheetText.replace(
existingRulesAuthoredText[0],
`#test-simple {}`,
),
"Successfuly removed rule content for #test-simple"
);
info("Check that it can handle unicode characters");
newBodyText = `content: "o 🦊 o";`;
is(
replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[1], newBodyText),
authoredStyleSheetText.replace(existingRulesAuthoredText[1],
`#test-unicode,[data-unicode="🦄👨👩👧👦"]::after {${newBodyText}}`,
),
"Got the expected result for #test-unicode"
);
info("Check that it can replace content of an empty rule");
newBodyText = `font-family: "Zilla;"`;
is(
replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[2], newBodyText),
authoredStyleSheetText.replace(
existingRulesAuthoredText[2],
`#test-empty {${newBodyText}}`,
),
"Got the expected result for #test-empty"
);
info("Check that it can handle a rule on a same line as another rule");
newBodyText = `color: pink;`;
is(
replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[3], newBodyText),
authoredStyleSheetText.replace(
existingRulesAuthoredText[3],
`#test-same-line {${newBodyText}}`,
),
"Got the expected result for #test-same-line"
);
info("Check that it can handle a rule with a child rule");
newBodyText = `background: silver;
& > span {
color: white;
}`;
is(
replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[4], newBodyText),
authoredStyleSheetText.replace(
existingRulesAuthoredText[4],
`#test-nested-parent {${newBodyText}}`,
),
"Got the expected result for #test-nested-parent"
);
info("Check that it can handle a nested rule");
newBodyText = `color: white;height: 100%;`;
is(
replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[4].cssRules[0], newBodyText),
authoredStyleSheetText.replace(
existingRulesAuthoredText[5],
`#test-nested-child {${newBodyText}}`,
),
"Got the expected result for #test-nested-child"
);
info("Check that it can handle rules whose declaration is directly after the } of the previous rule, without spaces");
isnot(
InspectorUtils.getRelativeRuleLine(stylesheet.cssRules[5]),
1,
"The rule should not be on the first line of the stylesheet to check the issue it covers"
);
newBodyText = `--modified:true`;
is(
replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[5], newBodyText),
authoredStyleSheetText.replace(
existingRulesAuthoredText[6],
`#test-after-closing-bracket{${newBodyText}}`,
),
"Got the expected result for #test-after-closing-bracket"
);
info("Checking fix for files with crlf EOL sequence");
let styleEl = document.createElement("style");
let ruleText = `#test-after-closing-bracket-crlf{--modified-crlf:false}`
authoredStyleSheetText = `\r\nhtml{}${ruleText}`;
styleEl.append(document.createTextNode(authoredStyleSheetText));
document.head.append(styleEl);
stylesheet = document.styleSheets[2];
isnot(
InspectorUtils.getRelativeRuleLine(stylesheet.cssRules[1]),
1,
"The rule should not be on the first line of the stylesheet to check the issue it covers"
);
newBodyText = `--modified-crlf:true`;
is(
replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[1], newBodyText),
authoredStyleSheetText.replace(
ruleText,
`#test-after-closing-bracket-crlf{${newBodyText}}`,
),
"Got the expected result for #test-after-closing-bracket-crlf"
);
info("Checking fix for files with cr EOL sequence");
ruleText = `#test-after-closing-bracket-cr{--modified-cr:false}`
authoredStyleSheetText = `\rhtml{}${ruleText}`;
styleEl.innerText = "";
styleEl.append(document.createTextNode(authoredStyleSheetText));
isnot(
InspectorUtils.getRelativeRuleLine(stylesheet.cssRules[1]),
1,
"The rule should not be on the first line of the stylesheet to check the issue it covers"
);
newBodyText = `--modified-cr:true`;
is(
replaceBlockRuleBodyTextInStylesheet(stylesheet.cssRules[1], newBodyText),
authoredStyleSheetText.replace(
ruleText,
`#test-after-closing-bracket-cr{${newBodyText}}`,
),
"Got the expected result for #test-after-closing-bracket-cr"
);
SimpleTest.finish();
</script>
</head>
<body>
<h1>Test InspectorUtils::replaceBlockRuleBodyTextInStylesheet</h1>
<p id="display"></p>
<div id="content" style="display: none">
</div>
<pre id="test">
</pre>
</body>
</html>