third_party/WebKit/LayoutTests/fast/css/invalidation/targeted-class-style-invalidation.html

   1 <!DOCTYPE html>
   2 <script src="../../../resources/js-test.js"></script>
   3
   4 <style>
   5   div { width: 100px }
   6   .outer .inner { width: 200px }
   7   .outer2 { width: 150px }
   8   .outer3.nomatch {}
   9 </style>
  10
  11 <div id="outer">
  12     <div id="mid">
  13         <div id="inner" class="inner">
  14             <div id="innerChild">
  15             </div>
  16         </div>
  17         <div id="inner2">
  18         </div>
  19     </div>
  20 </div>
  21 <div id="outer2">
  22     <div id="inner3"></div>
  23 </div>
  24 <div id="outer3">
  25     <div class="nomatch"></div>
  26     <div class="outer3"></div>
  27 </div>
  28
  29 <script>
  30 description("Test that adding and removing class names only updates the elements that are affected.");
  31
  32 function insertStyleSheet(css)
  33 {
  34     var styleElement = document.createElement("style");
  35     styleElement.textContent = css;
  36     (document.head || document.documentElement).appendChild(styleElement);
  37 }
  38
  39 var outer = document.getElementById('outer');
  40 var inner = document.getElementById('inner');
  41 var outer2 = document.getElementById('outer2');
  42 var outer3 = document.getElementById('outer3');
  43
  44 // Style recalc should happen on "inner" and "outer", but not "inner2" or "mid".
  45 outer.offsetTop;
  46 outer.className = 'outer';
  47 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  48 shouldBe("getComputedStyle(inner).width", '"200px"');
  49
  50 // Style recalc should happen on "inner", but not "innerChild".
  51 inner.offsetTop;
  52 inner.className = '';
  53 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  54 shouldBe("getComputedStyle(inner).width", '"100px"');
  55
  56 // Style recalc should happen on "outer2", but not "inner3".
  57 outer2.offsetTop;
  58 outer2.className = 'outer2';
  59 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  60 shouldBe("getComputedStyle(outer2).width", '"150px"');
  61
  62 // Style recalc should happen on "outer3", but none of its children.
  63 outer3.offsetTop;
  64 outer3.className = 'outer3';
  65 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
  66 </script>