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

   1 <!DOCTYPE html>
   2 <head>
   3 <script src="../../resources/js-test.js"></script>
   4 </head>
   5 <div><!-- Extra divs so it's clear when we're doing a full document recalc -->
   6     <div></div>
   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>
  17 <div class="foo">foo</div>
  18 <div class="foo">foo</div>
  19 <div class="foo">foo</div>
  20 <div class="bar">bar</div>
  21 <div class="bar">bar</div>
  22 <div class="bar">bar</div>
  23 <div class="baz">baz</div>
  24 <div class="baz">baz</div>
  25 <div class="baz">baz</div>
  26 <script>
  27 function createSheet(selector)
  28 {
  29     var sheet = document.createElement('style');
  30     sheet.textContent = selector + ' { color: red }';
  31     return sheet;
  32 }
  33
  34 function addSheet(selector)
  35 {
  36     var sheet = createSheet(selector);
  37     document.head.appendChild(sheet);
  38     return sheet;
  39 }
  40
  41 if (window.internals) {
  42     // Add sheet with non-existant classname.
  43     document.documentElement.offsetTop;
  44     var nonexistantSheet = addSheet('.nonexistant');
  45     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "0");
  46
  47     // Remove sheet with non-existant classname.
  48     document.documentElement.offsetTop;
  49     nonexistantSheet.remove();
  50     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "0");
  51
  52     // Add sheet that matches one node.
  53     document.documentElement.offsetTop;
  54     var barSheet = addSheet('.bar');
  55     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3");
  56
  57     // Remove sheet that matches one node.
  58     document.documentElement.offsetTop;
  59     barSheet.remove();
  60     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3");
  61
  62     // Add two sheets that each match one node.
  63     document.documentElement.offsetTop;
  64     var barSheet = addSheet('.bar');
  65     var bazSheet = addSheet('.baz');
  66     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");
  67
  68     // Remove two sheets that each match one node.
  69     document.documentElement.offsetTop;
  70     barSheet.remove();
  71     bazSheet.remove();
  72     // Recalc 6 elements + documentElement.
  73     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");
  74
  75     // Add two sheets that each match one node. Add one to the beginning of the stylesheet list.
  76     document.documentElement.offsetTop;
  77     var barSheet = addSheet('.bar');
  78     var bazSheet = createSheet('.baz');
  79     document.head.insertBefore(bazSheet, document.head.firstChild);
  80     // Recalc 6 elements + documentElement.
  81     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");
  82
  83     // Remove two sheets that each match one node. One is from the beginning of the stylesheet list.
  84     document.documentElement.offsetTop;
  85     barSheet.remove();
  86     bazSheet.remove();
  87     // Recalc 6 elements + documentElement.
  88     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");
  89
  90     // Add and remove sheets in the same run.
  91     document.documentElement.offsetTop;
  92     var fooSheet = addSheet('.foo');
  93     var barSheet = addSheet('.bar');
  94     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");
  95     document.documentElement.offsetTop;
  96     var bazSheet = addSheet('.baz');
  97     barSheet.remove();
  98     // Recalc 6 elements + documentElement.
  99     shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");
 100 }
 101 </script>