third_party/WebKit/LayoutTests/fast/css/invalidation/clears-invalidation-whole-tree.html

   1 <!DOCTYPE html>
   2 <head>
   3 <script src="../../../resources/js-test.js"></script>
   4 <style>
   5   div { width: 100px }
   6   div:-webkit-any(.outer) { width: 200px }
   7   div:-webkit-any(.inner) { width: 300px }
   8   div:-webkit-any(.inner2) { width: 150px }
   9 </style>
  10 </head>
  11 <body>
  12 <div id="outer">
  13   <div id="mid">
  14     <div id="inner">
  15     </div>
  16   </div>
  17 </div>
  18
  19 <script>
  20 description("Tests that a style recalc on the inner element after the outer one works correctly. See also crbug.com/346928.");
  21
  22 function insertStyleSheet(css)
  23 {
  24     var styleElement = document.createElement("style");
  25     styleElement.textContent = css;
  26     (document.head || document.documentElement).appendChild(styleElement);
  27 }
  28
  29 var outer = document.getElementById('outer');
  30 var inner = document.getElementById('inner');
  31
  32 outer.offsetHeight;
  33
  34 outer.className = 'outer';
  35 inner.className = 'inner';
  36
  37 shouldBe("getComputedStyle(outer).width", '"200px"');
  38
  39 inner.className = 'inner2';
  40 shouldBe("getComputedStyle(inner).width", '"150px"');
  41
  42 </script>
  43
  44 </body>