third_party/WebKit/LayoutTests/fast/css/invalidation/style-update-with-added-stylesheet.html

   1 <!DOCTYPE html>
   2 <head>
   3 <script src="../../../resources/js-test.js"></script>
   4 <style id="s1">span { color: red}</style>
   5 <style id="s2">span { color: red}</style>
   6
   7 <style>
   8   div { width: 100px }
   9   .class { width: 200px }
  10 </style>
  11 </head>
  12 <body>
  13 <div id="target">
  14 <div id="other">
  15 </div>
  16
  17 <script>
  18 description("Test that adding a class then synchronously adding a style sheet produces correct styles. See also crbug.com/346873");
  19
  20 var target = document.getElementById("target");
  21 target.offsetHeight;
  22
  23 // Set the class, which should schedule an async style recalc to change width to 200px.
  24 target.className = 'class';
  25
  26 var styleElement = document.createElement("style");
  27 styleElement.textContent = '#useless {width: 300px}';
  28 // Insert before style sheet s2 in order to trigger style resolver reconstruction.
  29 document.getElementById('s2').insertBefore(styleElement, null);
  30
  31 shouldBe("getComputedStyle(target).width", '"200px"');
  32
  33 </script>