src/third_party/WebKit/LayoutTests/compositing/squashing/repaint-child-of-squashed.html

   1 <!DOCTYPE html>
   2 <head>
   3 <script src="../../resources/run-after-display.js"></script>
   4 <style>
   5 .composited {
   6 transform: translatez(0);
   7 }
   8
   9 .box {
  10   width: 100px;
  11   height: 100px;
  12 }
  13
  14 .behind {
  15   position: absolute;
  16   z-index: 1;
  17   top: 50px;
  18   left: 50px;
  19   background-color: blue;
  20 }
  21
  22 .top {
  23   position: absolute;
  24   z-index: 1;
  25   top: 130px;
  26   left: 130px;
  27   background-color: cyan;
  28 }
  29
  30 #inner {
  31   position:absolute;
  32   top:10px;
  33   left: 10px;
  34   height: 50px; width: 50px;
  35   background-color: lightslategray;
  36   z-index: 2
  37 }
  38
  39 </style>
  40 <script>
  41     if (window.internals)
  42         internals.settings.setLayerSquashingEnabled(true);
  43     if (window.testRunner) {
  44         testRunner.dumpAsText();
  45         testRunner.waitUntilDone();
  46     }
  47
  48     function runTest()
  49     {
  50         runAfterDisplay(executeTestCases);
  51     }
  52
  53     function executeTestCases()
  54     {
  55         window.internals.startTrackingRepaints(document);
  56         document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  57         window.internals.stopTrackingRepaints(document);
  58
  59         window.internals.startTrackingRepaints(document);
  60         document.querySelector("#inner").style.backgroundColor = 'red';
  61         document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  62         window.internals.stopTrackingRepaints(document);
  63
  64         // Display the test results only after test is done so that it does not affect repaint rect results.
  65         document.getElementById('testResults').style.display = "block";
  66
  67         if (window.testRunner)
  68             testRunner.notifyDone();
  69     }
  70 </script>
  71 </head>
  72 <body onload="runTest()">
  73   <div class="composited box behind"></div>
  74
  75   <div class="box top">
  76     <div id="inner">
  77     </div>
  78   </div>
  79
  80   <div id="testResults" style="display:none">
  81     CASE 1, original layer tree
  82     <pre id="Case1"></pre>
  83
  84     CASE 2, change color of "inner" to red
  85     <pre id="Case2"></pre>
  86   </div>
  87 </body>