test_stylesheet_additions.html (2474B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title> 4 Test for bug 1273303: Stylesheet additions and removals known to not 5 affect the document don't trigger restyles 6 </title> 7 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <div class="classScope"> 10 <div></div> 11 </div> 12 <div id="idScope"> 13 <div></div> 14 </div> 15 <!-- 16 We do it this way, using `disabled`, because appending stylesheets to the 17 document marks a restyle for that <style> element as needed, so we can't 18 accurately measure whether we've restyled or not. 19 --> 20 <style id="target" disabled></style> 21 <script> 22 SimpleTest.waitForExplicitFinish(); 23 const utils = SpecialPowers.getDOMWindowUtils(window); 24 const TESTS = [ 25 { selector: ".nonexistentClassScope", restyle: false }, 26 { selector: ".nonexistentClassScope + div", restyle: true }, 27 { selector: ".nonexistentClassScope div + div", restyle: false }, 28 { selector: ".classScope", restyle: true }, 29 { selector: ".classScope div", restyle: true }, 30 { selector: "#idScope", restyle: true }, 31 { selector: "#nonexistentIdScope", restyle: false }, 32 { selector: "#nonexistentIdScope div + bar", restyle: false }, 33 { selector: "baz", restyle: false }, 34 { cssText: " ", restyle: false }, 35 { cssText: "@keyframes foo { from { color: green } to { color: red } } #whatever { animation-name: foo; }", restyle: false }, 36 ]; 37 38 for (const test of TESTS) { 39 let cssText = test.cssText ? test.cssText : (test.selector + " { color: green; }"); 40 target.innerHTML = cssText; 41 42 document.body.offsetWidth; 43 const prevGeneration = utils.restyleGeneration; 44 45 target.disabled = true; 46 47 document.body.offsetWidth; 48 (test.restyle ? isnot : is)(utils.restyleGeneration, prevGeneration, 49 `Stylesheet removal with ${cssText} should ${test.restyle ? "have" : "not have"} caused a restyle`); 50 51 target.disabled = false; // Make the stylesheet effective. 52 53 if (test.selector) { 54 let element = document.querySelector(test.selector); 55 if (element) { 56 is(test.restyle, true, "How could we not expect a restyle?"); 57 is(getComputedStyle(element).color, "rgb(0, 128, 0)", 58 "Element style should've changed appropriately"); 59 } 60 } 61 62 document.body.offsetWidth; 63 (test.restyle ? isnot : is)(utils.restyleGeneration, prevGeneration, 64 `Stylesheet addition with ${cssText} should ${test.restyle ? "have" : "not have"} caused a restyle`); 65 } 66 67 SimpleTest.finish(); 68 </script>