test_computed_style_no_flush.html (1750B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title> 4 Test for bug 1363805: We only restyle as little as needed 5 </title> 6 <link rel="author" href="mailto:wpan@mozilla.com" title="Wei-Cheng Pan"> 7 <script src="/tests/SimpleTest/SimpleTest.js"></script> 8 <style> 9 .black { 10 background-color: black; 11 } 12 .black + div { 13 background-color: gray; 14 } 15 </style> 16 <div id="container"> 17 <div> 18 <div id="foo"> 19 </div> 20 <div id="bar"> 21 </div> 22 </div> 23 </div> 24 <script> 25 function flushStyle () { 26 getComputedStyle(document.body).width; 27 } 28 29 SimpleTest.waitForExplicitFinish(); 30 const utils = SpecialPowers.getDOMWindowUtils(window); 31 const container = document.querySelector('#container'); 32 const foo = document.querySelector('#foo'); 33 const bar = document.querySelector('#bar'); 34 35 flushStyle(); 36 let currentRestyleGeneration = utils.restyleGeneration; 37 38 // No style changed, so we should not restyle. 39 getComputedStyle(foo).backgroundColor; 40 is(utils.restyleGeneration, currentRestyleGeneration, 41 "Shouldn't restyle anything if no style changed"); 42 43 // foo's parent has changed, must restyle. 44 container.classList.toggle('black'); 45 getComputedStyle(foo).backgroundColor; 46 isnot(utils.restyleGeneration, currentRestyleGeneration, 47 "Should have restyled something"); 48 49 currentRestyleGeneration = utils.restyleGeneration; 50 51 // The change of foo should not affect its parent. 52 foo.classList.toggle('black'); 53 getComputedStyle(container).backgroundColor; 54 is(utils.restyleGeneration, currentRestyleGeneration, 55 "Shouldn't restyle anything if no style changed"); 56 57 // It should restyle for foo's later sibling. 58 getComputedStyle(bar).backgroundColor; 59 isnot(utils.restyleGeneration, currentRestyleGeneration, 60 "Should have restyled something"); 61 62 SimpleTest.finish(); 63 </script>