| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <head> | 2 <head> |
| 3 <script src="../../resources/run-after-display.js"></script> | 3 <script src="../../resources/run-after-display.js"></script> |
| 4 <style> | 4 <style> |
| 5 .composited { | 5 .composited { |
| 6 -webkit-transform: translatez(0); | 6 -webkit-transform: translatez(0); |
| 7 } | 7 } |
| 8 | 8 |
| 9 .box { | 9 .box { |
| 10 width: 100px; | 10 width: 100px; |
| 11 height: 100px; | 11 height: 100px; |
| 12 } | 12 } |
| 13 | 13 |
| 14 .behind { | 14 .behind { |
| 15 position: absolute; | 15 position: absolute; |
| 16 z-index: 1; | 16 z-index: 0; |
| 17 top: 50px; | 17 top: 50px; |
| 18 left: 50px; | 18 left: 50px; |
| 19 background-color: blue; | 19 background-color: blue; |
| 20 } | 20 } |
| 21 | 21 |
| 22 .middle { |
| 23 position: absolute; |
| 24 z-index: 1; |
| 25 top: 20px; |
| 26 left: 100px; |
| 27 background-color: cyan; |
| 28 } |
| 29 |
| 22 .top { | 30 .top { |
| 23 position: absolute; | 31 position: absolute; |
| 24 z-index: 1; | 32 z-index: 2; |
| 25 top: 130px; | 33 top: 130px; |
| 26 left: 130px; | 34 left: 130px; |
| 27 background-color: cyan; | 35 background-color: cyan; |
| 28 } | 36 } |
| 29 | 37 |
| 30 #inner { | 38 .inner { |
| 31 position:absolute; | 39 position:absolute; |
| 32 top:10px; | 40 top:10px; |
| 33 left: 10px; | 41 left: 10px; |
| 34 height: 50px; width: 50px; | 42 height: 50px; width: 50px; |
| 35 background-color: lightslategray; | 43 background-color: lightslategray; |
| 36 z-index: 2 | 44 z-index: 3; |
| 37 } | 45 } |
| 38 | 46 |
| 39 </style> | 47 </style> |
| 40 <script> | 48 <script> |
| 41 if (window.internals) | 49 if (window.internals) |
| 42 internals.settings.setLayerSquashingEnabled(true); | 50 internals.settings.setLayerSquashingEnabled(true); |
| 43 if (window.testRunner) { | 51 if (window.testRunner) { |
| 44 testRunner.dumpAsText(); | 52 testRunner.dumpAsText(); |
| 45 testRunner.waitUntilDone(); | 53 testRunner.waitUntilDone(); |
| 46 } | 54 } |
| 47 | 55 |
| 48 function runTest() | 56 function runTest() |
| 49 { | 57 { |
| 50 runAfterDisplay(executeTestCases); | 58 runAfterDisplay(executeTestCases); |
| 51 } | 59 } |
| 52 | 60 |
| 53 function executeTestCases() | 61 function executeTestCases() |
| 54 { | 62 { |
| 55 window.internals.startTrackingRepaints(document); | 63 document.getElementById('Case1').textContent = window.internals.layerTre
eAsText(document); |
| 56 document.getElementById('Case1').textContent = window.internals.layerTre
eAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS); | |
| 57 window.internals.stopTrackingRepaints(document); | |
| 58 | 64 |
| 59 window.internals.startTrackingRepaints(document); | 65 document.querySelector("#top").style.overflow = 'hidden'; |
| 60 document.querySelector("#inner").style.backgroundColor = 'red'; | 66 document.getElementById('Case2').textContent = window.internals.layerTre
eAsText(document); |
| 61 document.getElementById('Case2').textContent = window.internals.layerTre
eAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS); | |
| 62 window.internals.stopTrackingRepaints(document); | |
| 63 | 67 |
| 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"; | 68 document.getElementById('testResults').style.display = "block"; |
| 66 | 69 |
| 67 if (window.testRunner) | 70 if (window.testRunner) |
| 68 testRunner.notifyDone(); | 71 testRunner.notifyDone(); |
| 69 } | 72 } |
| 70 </script> | 73 </script> |
| 71 </head> | 74 </head> |
| 72 <body onload="runTest()"> | 75 <body onload="runTest()"> |
| 73 <div class="composited box behind"></div> | 76 <div class="composited box behind"></div> |
| 74 | 77 |
| 75 <div class="box top"> | 78 <div class="box middle"> |
| 76 <div id="inner"> | 79 </div> |
| 80 |
| 81 <div id="top" class="box top"> |
| 82 <div class="inner"> |
| 77 </div> | 83 </div> |
| 78 </div> | 84 </div> |
| 79 | 85 |
| 80 <div id="testResults" style="display:none"> | 86 <div id="testResults" style="display:none"> |
| 81 CASE 1, original layer tree | 87 CASE 1, original layer tree |
| 82 <pre id="Case1"></pre> | 88 <pre id="Case1"></pre> |
| 83 | 89 |
| 84 CASE 2, change color of "inner" to red | 90 CASE 2, layer tree with overflow:hidden on the parent of a composited box. P
arent is no longer squashed. |
| 85 <pre id="Case2"></pre> | 91 <pre id="Case2"></pre> |
| 86 </div> | 92 </div> |
| 87 </body> | 93 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 260113004:
Don't squash layers that have a clip or overflow clip. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk