Chromium Code Reviews 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| 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; |
| 36 /*overflow:hidden;*/ | |
|
abarth-chromium
2014/04/28 23:29:57
Remove commented out code?
chrishtr
2014/04/28 23:31:30
Done.
| |
| 28 } | 37 } |
| 29 | 38 |
| 30 #inner { | 39 .inner { |
| 31 position:absolute; | 40 position:absolute; |
| 32 top:10px; | 41 top:10px; |
| 33 left: 10px; | 42 left: 10px; |
| 34 height: 50px; width: 50px; | 43 height: 50px; width: 50px; |
| 35 background-color: lightslategray; | 44 background-color: lightslategray; |
| 36 z-index: 2 | 45 z-index: 3; |
| 37 } | 46 } |
| 38 | 47 |
| 39 </style> | 48 </style> |
| 40 <script> | 49 <script> |
| 41 if (window.internals) | 50 if (window.internals) |
| 42 internals.settings.setLayerSquashingEnabled(true); | 51 internals.settings.setLayerSquashingEnabled(true); |
| 43 if (window.testRunner) { | 52 if (window.testRunner) { |
| 44 testRunner.dumpAsText(); | 53 testRunner.dumpAsText(); |
| 45 testRunner.waitUntilDone(); | 54 testRunner.waitUntilDone(); |
| 46 } | 55 } |
| 47 | 56 |
| 48 function runTest() | 57 function runTest() |
| 49 { | 58 { |
| 50 runAfterDisplay(executeTestCases); | 59 runAfterDisplay(executeTestCases); |
| 51 } | 60 } |
| 52 | 61 |
| 53 function executeTestCases() | 62 function executeTestCases() |
| 54 { | 63 { |
| 55 window.internals.startTrackingRepaints(document); | 64 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 | 65 |
| 59 window.internals.startTrackingRepaints(document); | 66 document.querySelector("#top").style.overflow = 'hidden'; |
| 60 document.querySelector("#inner").style.backgroundColor = 'red'; | 67 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 | 68 |
| 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"; | 69 document.getElementById('testResults').style.display = "block"; |
| 66 | 70 |
| 67 if (window.testRunner) | 71 if (window.testRunner) |
| 68 testRunner.notifyDone(); | 72 testRunner.notifyDone(); |
| 69 } | 73 } |
| 70 </script> | 74 </script> |
| 71 </head> | 75 </head> |
| 72 <body onload="runTest()"> | 76 <body onload="runTest()"> |
| 73 <div class="composited box behind"></div> | 77 <div class="composited box behind"></div> |
| 74 | 78 |
| 75 <div class="box top"> | 79 <div class="box middle"> |
| 76 <div id="inner"> | 80 </div> |
| 81 | |
| 82 <div id="top" class="box top"> | |
| 83 <div class="inner"> | |
| 77 </div> | 84 </div> |
| 78 </div> | 85 </div> |
| 79 | 86 |
| 80 <div id="testResults" style="display:none"> | 87 <div id="testResults" style="display:none"> |
| 81 CASE 1, original layer tree | 88 CASE 1, original layer tree |
| 82 <pre id="Case1"></pre> | 89 <pre id="Case1"></pre> |
| 83 | 90 |
| 84 CASE 2, change color of "inner" to red | 91 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> | 92 <pre id="Case2"></pre> |
| 86 </div> | 93 </div> |
| 87 </body> | 94 </body> |
| OLD | NEW |
