layout/style/test/test_computed_style_no_flush.html

   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>