src/third_party/WebKit/LayoutTests/compositing/squashing/repaint-via-layout-offset.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/run-after-display.js"></script>
   3 <style>
   4 #container {
   5   position: absolute;
   6   z-index: 0;
   7   left: 50px;
   8   top: 50px;
   9 }
  10
  11 .child {
  12   position: absolute;
  13   width: 40px;
  14   height: 40px;
  15   background-color: red;
  16 }
  17
  18 .embiggen {
  19   width: 50px;
  20   height: 50px;
  21   background-color: green;
  22 }
  23 </style>
  24 <div style="width:200px; height:200px; transform: translateZ(0px); background-color: lightblue"></div>
  25 <div id="container">
  26   <span class="child"></span>
  27   <span class="child"></span>
  28 </div>
  29 <pre></pre>
  30 <script>
  31 if (window.testRunner) {
  32     testRunner.dumpAsText();
  33     testRunner.waitUntilDone();
  34 }
  35
  36 runAfterDisplay(function() {
  37     document.querySelectorAll('.child')[0].classList.add('embiggen')
  38     runAfterDisplay(function() {
  39         if (window.internals)
  40             window.internals.startTrackingRepaints(document);
  41
  42         document.querySelectorAll('.child')[1].classList.add('embiggen')
  43
  44         if (window.internals) {
  45             var layerTree = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  46             window.internals.stopTrackingRepaints(document);
  47             document.querySelector('pre').textContent = layerTree;
  48         }
  49
  50         if (window.testRunner)
  51             testRunner.notifyDone();
  52     });
  53 });
  54 </script>