third_party/WebKit/LayoutTests/fast/css/invalidation/style-invalidation-before-attach.html

   1 <!DOCTYPE html>
   2 <style>
   3 [attr] div {
   4     color: red;
   5 }
   6 [attr] .baz {
   7     color: blue;
   8 }
   9 </style>
  10
  11 <div id="a"></div>
  12
  13 <script>
  14 onload = function() {
  15     document.body.offsetTop;
  16
  17     var foo = document.createElement("div");
  18     foo.id = "foo";
  19     foo.innerHTML = "<div id=bar><div id=baz>This should be blue.</div></div>";
  20
  21     // Append foo but not attach it.
  22     a.appendChild(foo);
  23
  24     // Schedule invalidation on bar which sets childNeedsStyleInvalidation on foo.
  25     bar.setAttribute("attr", "attr");
  26
  27     // Remove from the tree and clear all invalidation bits, but foo still has them
  28     // since it's not in the tree.
  29     foo.remove();
  30     document.body.offsetTop;
  31
  32     // Add foo back and attach it.
  33     a.appendChild(foo);
  34     document.body.offsetTop;
  35
  36     // Schedule invalidation, but it won't get above foo since the bits are
  37     // incorrectly set.
  38     baz.className = "baz";
  39 };
  40 </script>