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

   1 <!DOCTYPE html>
   2 <head>
   3 <script src="../../resources/run-after-layout-and-paint.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.testRunner) {
  42         testRunner.dumpAsText();
  43         testRunner.waitUntilDone();
  44     }
  45
  46     function runTest()
  47     {
  48         runAfterLayoutAndPaint(executeTestCases);
  49     }
  50
  51     function executeTestCases()
  52     {
  53         window.internals.startTrackingRepaints(document);
  54         document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  55         window.internals.stopTrackingRepaints(document);
  56
  57         window.internals.startTrackingRepaints(document);
  58         document.querySelector("#inner").style.backgroundColor = 'red';
  59         document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  60         window.internals.stopTrackingRepaints(document);
  61
  62         // Display the test results only after test is done so that it does not affect repaint rect results.
  63         document.getElementById('testResults').style.display = "block";
  64
  65         if (window.testRunner)
  66             testRunner.notifyDone();
  67     }
  68 </script>
  69 </head>
  70 <body onload="runTest()">
  71   <div class="composited box behind"></div>
  72
  73   <div class="box top">
  74     <div id="inner">
  75     </div>
  76   </div>
  77
  78   <div id="testResults" style="display:none">
  79     CASE 1, original layer tree
  80     <pre id="Case1"></pre>
  81
  82     CASE 2, change color of "inner" to red
  83     <pre id="Case2"></pre>
  84   </div>
  85 </body>