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