third_party/WebKit/LayoutTests/fast/css/add-remove-stylesheets-at-once-minimal-recalc-style.html

   1 <!DOCTYPE html>
   2 <head>
   3 <script src="../../resources/js-test.js"></script>
   4 </head>
   5 <div id="sheet-container"></div>
   6 <div><!-- Extra divs so it's clear when we're doing a full document recalc -->
   7     <div></div>
   8     <div></div>
   9     <div></div>
  10     <div></div>
  11     <div></div>
  12     <div></div>
  13     <div></div>
  14     <div></div>
  15     <div></div>
  16     <div></div>
  17 </div>
  18 <div class="foo">foo</div>
  19 <div class="foo">foo</div>
  20 <div class="foo">foo</div>
  21 <div class="bar">bar</div>
  22 <div class="bar">bar</div>
  23 <div class="bar">bar</div>
  24 <div class="baz">baz</div>
  25 <div class="baz">baz</div>
  26 <div class="baz">baz</div>
  27 <script>
  28 // Add and remove sheets in the same run.
  29 document.documentElement.offsetTop;
  30 var sheetContainer = document.getElementById('sheet-container');
  31 sheetContainer.innerHTML = '<style>.foo { color: green; }</style><style>.bar { color: red; }</style>'
  32 // 6 elements + documentElement + body get recalced.
  33 if (window.internals)
  34     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "8");
  35
  36 document.documentElement.offsetTop;
  37 sheetContainer.innerHTML = '<style>.baz { color: blue; }</style>'
  38
  39 // 9 elements + documentElement + body get recalced.
  40 if (window.internals)
  41     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "10");
  42
  43 shouldBe("getComputedStyle(document.querySelector('.foo')).color", '"rgb(0, 0, 0)"');
  44 shouldBe("getComputedStyle(document.querySelector('.baz')).color", '"rgb(0, 0, 255)"');
  45 shouldBe("getComputedStyle(document.querySelector('.bar')).color", '"rgb(0, 0, 0)"');
  46 </script>