third_party/WebKit/LayoutTests/compositing/squashing/add-remove-squashed-layers.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 div {
   6   position: absolute;
   7   z-index: 1;
   8   width: 100px;
   9   height: 100px;
  10 }
  11
  12 .composited {
  13   transform: translatez(0);
  14   top: 60px;
  15   left: 60px;
  16   width: 400px;
  17   height: 400px;
  18   background-color: gray;
  19 }
  20
  21 .overlap1 {
  22   top: 140px;
  23   left: 140px;
  24   background-color: blue;
  25 }
  26
  27 .overlap2 {
  28   top: 220px;
  29   left: 220px;
  30   background-color: lime;
  31 }
  32
  33 .overlap3 {
  34   top: 300px;
  35   left: 300px;
  36   background-color: magenta;
  37 }
  38
  39 div:hover {
  40   background-color: green;
  41 }
  42
  43 .green {
  44   background-color: green;
  45 }
  46
  47 #C {
  48   display: none;
  49 }
  50
  51 #testResults {
  52   display: none;
  53 }
  54
  55 </style>
  56 <script>
  57     if (window.testRunner)
  58         testRunner.dumpAsText();
  59
  60     var isInteractive = true;
  61
  62     if (window.internals)
  63         isInteractive = false;
  64
  65     function resetLayers()
  66     {
  67         document.getElementById("A").style.display = "block";
  68         document.getElementById("B").style.display = "block";
  69         document.getElementById("C").style.display = "none";
  70         if (isInteractive) {
  71             document.removeEventListener("click", resetLayers);
  72             document.addEventListener("click", addOverlap3);
  73         }
  74     }
  75
  76     function addOverlap2()
  77     {
  78         document.getElementById("B").style.display = "block";
  79         if (isInteractive) {
  80             document.removeEventListener("click", addOverlap2);
  81             document.addEventListener("click", resetLayers);
  82         }
  83     }
  84
  85     function removeOverlap1()
  86     {
  87         document.getElementById("A").style.display = "none";
  88         if (isInteractive) {
  89             document.removeEventListener("click", removeOverlap1);
  90             document.addEventListener("click", addOverlap2);
  91         }
  92     }
  93
  94
  95     function removeOverlap2()
  96     {
  97         document.getElementById("B").style.display = "none";
  98         if (isInteractive) {
  99             document.removeEventListener("click", removeOverlap2);
 100             document.addEventListener("click", removeOverlap1);
 101         }
 102     }
 103
 104     function addOverlap3()
 105     {
 106         document.getElementById("C").style.display = "block";
 107         if (isInteractive) {
 108             document.removeEventListener("click", addOverlap3);
 109             document.addEventListener("click", removeOverlap2);
 110         }
 111     }
 112
 113     document.addEventListener("click", addOverlap3);
 114
 115     function runTest()
 116     {
 117         if (!window.internals)
 118             return;
 119
 120         // Case 1
 121         document.getElementById('Case1').textContent = window.internals.layerTreeAsText(document);
 122
 123         // Case 2
 124         window.internals.startTrackingRepaints(document);
 125         addOverlap3();
 126         document.getElementById('Case2').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
 127         window.internals.stopTrackingRepaints(document);
 128
 129         // Case 3
 130         window.internals.startTrackingRepaints(document);
 131         removeOverlap2();
 132         document.getElementById('Case3').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
 133         window.internals.stopTrackingRepaints(document);
 134
 135         // Case 4
 136         window.internals.startTrackingRepaints(document);
 137         removeOverlap1();
 138         document.getElementById('Case4').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
 139         window.internals.stopTrackingRepaints(document);
 140
 141         // Case 5
 142         window.internals.startTrackingRepaints(document);
 143         addOverlap2();
 144         document.getElementById('Case5').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
 145         window.internals.stopTrackingRepaints(document);
 146
 147         // Case 6
 148         window.internals.startTrackingRepaints(document);
 149         resetLayers();
 150         document.getElementById('Case6').textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
 151         window.internals.stopTrackingRepaints(document);
 152
 153         // Display the test results only after test is done so that it does not affect repaint rect results.
 154         document.getElementById('testResults').style.display = "block";
 155     }
 156 </script>
 157 </head>
 158
 159 <body onload="runTest()">
 160
 161   <p>Test that layers can be nicely added or removed from a squashed layer, without unnecessary repaints on any layer.
 162      Click anywhere to test interactively; keep clicking to proceed through the test.</p>
 163
 164   <div class="composited"></div>
 165   <div id="A" class="overlap1"></div>
 166   <div id="B" class="overlap2"></div>
 167   <div id="C" class="overlap3"></div>
 168
 169   <div id="testResults">
 170     CASE 1, original layer tree with overlap1 and overlap2:
 171     <pre id="Case1"></pre>
 172
 173     CASE 2, overlap3 gets added:
 174     <pre id="Case2"></pre>
 175
 176     CASE 3, overlap2 gets removed.  Since this does not resize the layer, there should only be a repaint of overlap2:
 177     <pre id="Case3"></pre>
 178
 179     CASE 4, overlap1 gets removed:
 180     <pre id="Case4"></pre>
 181
 182     CASE 5, overlap2 gets added back:
 183     <pre id="Case5"></pre>
 184
 185     CASE 6, overlap1 gets added back, and overlap3 gets removed:
 186     <pre id="Case6"></pre>
 187   </div>
 188
 189 </body>
 190
 191 </html>