src/third_party/WebKit/LayoutTests/compositing/squashing/squashed-repaints.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../resources/run-after-display.js"></script>
   5 <style>
   6 div {
   7   position: absolute;
   8   z-index: 1;
   9   width: 100px;
  10   height: 100px;
  11 }
  12
  13 .composited {
  14   transform: translatez(0);
  15   top: 60px;
  16   left: 60px;
  17   background-color: gray;
  18 }
  19
  20 .overlap1 {
  21   top: 140px;
  22   left: 140px;
  23   background-color: blue;
  24 }
  25
  26 .overlap2 {
  27   top: 220px;
  28   left: 220px;
  29   background-color: lime;
  30 }
  31
  32 .overlap3 {
  33   top: 300px;
  34   left: 300px;
  35   background-color: magenta;
  36 }
  37
  38 div:hover {
  39   background-color: green;
  40 }
  41
  42 .green {
  43   background-color: green;
  44 }
  45
  46 #testResults {
  47   display: none;
  48 }
  49
  50 </style>
  51 <script>
  52     if (window.testRunner) {
  53         testRunner.dumpAsText();
  54         testRunner.waitUntilDone();
  55     }
  56
  57     if (window.internals)
  58         internals.settings.setLayerSquashingEnabled(true);
  59
  60     function runTest()
  61     {
  62         if (!window.internals)
  63             return;
  64         runAfterDisplay(executeTestCases);
  65     }
  66
  67     function executeTestCases()
  68     {
  69         // Case 1
  70         document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  71
  72         // Case 2
  73         window.internals.startTrackingRepaints(document);
  74         document.getElementById("A").style.backgroundColor = "green";
  75         document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  76         window.internals.stopTrackingRepaints(document);
  77
  78         // Case 3
  79         window.internals.startTrackingRepaints(document);
  80         document.getElementById("A").style.backgroundColor = "blue";
  81         document.getElementById("B").style.backgroundColor = "green";
  82         document.getElementById('Case3').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  83         window.internals.stopTrackingRepaints(document);
  84
  85         // Case 4
  86         window.internals.startTrackingRepaints(document);
  87         document.getElementById("B").style.backgroundColor = "blue";
  88         document.getElementById("C").style.backgroundColor = "green";
  89         document.getElementById('Case4').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  90         window.internals.stopTrackingRepaints(document);
  91
  92         // Case 5
  93         window.internals.startTrackingRepaints(document);
  94         document.getElementById("C").style.backgroundColor = "blue";
  95         document.getElementById("A").style.backgroundColor = "green";
  96         document.getElementById('Case5').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  97         window.internals.stopTrackingRepaints(document);
  98
  99         // Display the test results only after test is done so that it does not affect repaint rect results.
 100         document.getElementById('testResults').style.display = "block";
 101
 102         if (window.testRunner)
 103             testRunner.notifyDone();
 104     }
 105 </script>
 106 </head>
 107
 108 <body onload="runTest()">
 109
 110   <p>Basic repaint test for squashed layers. The entire squashing layer should not need repainting when
 111   only a portion of it is invalidated. Test interactively by using --show-paint-rects and hovering
 112   over elements to change their color.</p>
 113
 114   <div class="composited"></div>
 115   <div id="A" class="overlap1"></div>
 116   <div id="B" class="overlap2"></div>
 117   <div id="C" class="overlap3"></div>
 118
 119   <div id="testResults">
 120     CASE 1, original layer tree:
 121     <pre id="Case1"></pre>
 122
 123     CASE 2, overlap1 changes color:
 124     <pre id="Case2"></pre>
 125
 126     CASE 3, overlap1 and overlap2 change color:
 127     <pre id="Case3"></pre>
 128
 129     CASE 4, overlap2 and overlap3 change color:
 130     <pre id="Case4"></pre>
 131
 132     CASE 5, overlap3 and overlap1 change color:
 133     <pre id="Case5"></pre>
 134   </div>
 135
 136 </body>
 137
 138 </html>