зеркало из https://github.com/mozilla/gecko-dev.git
69 строки
2.4 KiB
HTML
69 строки
2.4 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<title>
|
|
Test for bug 1273303: Stylesheet additions and removals known to not
|
|
affect the document don't trigger restyles
|
|
</title>
|
|
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<div class="classScope">
|
|
<div></div>
|
|
</div>
|
|
<div id="idScope">
|
|
<div></div>
|
|
</div>
|
|
<!--
|
|
We do it this way, using `disabled`, because appending stylesheets to the
|
|
document marks a restyle for that <style> element as needed, so we can't
|
|
accurately measure whether we've restyled or not.
|
|
-->
|
|
<style id="target" disabled></style>
|
|
<script>
|
|
SimpleTest.waitForExplicitFinish();
|
|
const utils = SpecialPowers.getDOMWindowUtils(window);
|
|
const TESTS = [
|
|
{ selector: ".nonexistentClassScope", restyle: false },
|
|
{ selector: ".nonexistentClassScope + div", restyle: true },
|
|
{ selector: ".nonexistentClassScope div + div", restyle: false },
|
|
{ selector: ".classScope", restyle: true },
|
|
{ selector: ".classScope div", restyle: true },
|
|
{ selector: "#idScope", restyle: true },
|
|
{ selector: "#nonexistentIdScope", restyle: false },
|
|
{ selector: "#nonexistentIdScope div + bar", restyle: false },
|
|
{ selector: "baz", restyle: false },
|
|
{ cssText: " ", restyle: false },
|
|
{ cssText: "@keyframes foo { from { color: green } to { color: red } } #whatever { animation-name: foo; }", restyle: false },
|
|
];
|
|
|
|
for (const test of TESTS) {
|
|
let cssText = test.cssText ? test.cssText : (test.selector + " { color: green; }");
|
|
target.innerHTML = cssText;
|
|
|
|
document.body.offsetWidth;
|
|
const prevGeneration = utils.restyleGeneration;
|
|
|
|
target.disabled = true;
|
|
|
|
document.body.offsetWidth;
|
|
(test.restyle ? isnot : is)(utils.restyleGeneration, prevGeneration,
|
|
`Stylesheet removal with ${cssText} should ${test.restyle ? "have" : "not have"} caused a restyle`);
|
|
|
|
target.disabled = false; // Make the stylesheet effective.
|
|
|
|
if (test.selector) {
|
|
let element = document.querySelector(test.selector);
|
|
if (element) {
|
|
is(test.restyle, true, "How could we not expect a restyle?");
|
|
is(getComputedStyle(element).color, "rgb(0, 128, 0)",
|
|
"Element style should've changed appropriately");
|
|
}
|
|
}
|
|
|
|
document.body.offsetWidth;
|
|
(test.restyle ? isnot : is)(utils.restyleGeneration, prevGeneration,
|
|
`Stylesheet addition with ${cssText} should ${test.restyle ? "have" : "not have"} caused a restyle`);
|
|
}
|
|
|
|
SimpleTest.finish();
|
|
</script>
|