| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html id="htmlTag"> | 2 <html id="htmlTag"> |
| 3 | 3 |
| 4 <head> | 4 <head> |
| 5 <script src="../../resources/run-after-display.js"></script> |
| 5 <style> | 6 <style> |
| 6 #fixed { | 7 #fixed { |
| 7 -webkit-transform: translatez(0); | 8 -webkit-transform: translatez(0); |
| 8 position: fixed; | 9 position: fixed; |
| 9 z-index: 1; | 10 z-index: 1; |
| 10 width: 400px; | 11 width: 400px; |
| 11 height: 200px; | 12 height: 200px; |
| 12 background-color: blue; | 13 background-color: blue; |
| 13 } | 14 } |
| 14 | 15 |
| (...skipping 25 matching lines...) Expand all Loading... |
| 40 display: none; | 41 display: none; |
| 41 } | 42 } |
| 42 | 43 |
| 43 body { | 44 body { |
| 44 margin: 0; | 45 margin: 0; |
| 45 } | 46 } |
| 46 | 47 |
| 47 </style> | 48 </style> |
| 48 | 49 |
| 49 <script> | 50 <script> |
| 50 if (window.testRunner) | 51 if (window.testRunner) { |
| 51 testRunner.dumpAsText(); | 52 testRunner.dumpAsText(); |
| 53 testRunner.waitUntilDone(); |
| 54 } |
| 52 | 55 |
| 53 if (window.internals) | 56 if (window.internals) |
| 54 internals.settings.setLayerSquashingEnabled(true); | 57 internals.settings.setLayerSquashingEnabled(true); |
| 55 | 58 |
| 56 function runTest() | 59 function runTest() |
| 57 { | 60 { |
| 58 if (!window.internals) | 61 if (!window.internals) |
| 59 return; | 62 return; |
| 60 | 63 |
| 61 // Display the test results only after test is done so that it does not
affect repaint rect results. | 64 // Display the test results only after test is done so that it does not
affect repaint rect results. |
| 62 document.getElementById('testResults').style.display = "block"; | 65 document.getElementById('testResults').style.display = "block"; |
| 63 // Case 1 | 66 // Case 1 |
| 64 document.getElementById('Case1').textContent = window.internals.layerTre
eAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS); | 67 document.getElementById('Case1').textContent = window.internals.layerTre
eAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS); |
| 65 | 68 |
| 66 // Case 2 | 69 // Case 2 |
| 67 window.scrollTo(0, 80); | 70 window.scrollTo(0, 80); |
| 68 document.getElementById('Case2').textContent = window.internals.layerTre
eAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS); | 71 runAfterDisplay(function() { |
| 72 document.getElementById('Case2').textContent = window.internals.layerT
reeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS); |
| 73 if (window.testRunner) { |
| 74 testRunner.notifyDone(); |
| 75 } |
| 76 }); |
| 69 } | 77 } |
| 70 </script> | 78 </script> |
| 71 </head> | 79 </head> |
| 72 | 80 |
| 73 <body onload="runTest()"> | 81 <body onload="runTest()"> |
| 74 <div id="description"> | 82 <div id="description"> |
| 75 <p>This scenario verifies that the cyan "container" element scrolls properly
with squashing enabled.</p> | 83 <p>This scenario verifies that the cyan "container" element scrolls properly
with squashing enabled.</p> |
| 76 </div> | 84 </div> |
| 77 | 85 |
| 78 <div id="fixed"> | 86 <div id="fixed"> |
| 79 <div id="compositedInsideFixed"></div> | 87 <div id="compositedInsideFixed"></div> |
| 80 </div> | 88 </div> |
| 81 | 89 |
| 82 <div id="container"></div> | 90 <div id="container"></div> |
| 83 | 91 |
| 84 <div id="testResults"> | 92 <div id="testResults"> |
| 85 CASE 1, original layer tree: | 93 CASE 1, original layer tree: |
| 86 <pre id="Case1"></pre> | 94 <pre id="Case1"></pre> |
| 87 | 95 |
| 88 CASE 2, scrolling y to 80, the "container" element should remain positioned
with respect to the scrolled document, the fixed-pos layer compensates for the n
ew scroll position: | 96 CASE 2, scrolling y to 80, the "container" element should remain positioned
with respect to the scrolled document, the fixed-pos layer compensates for the n
ew scroll position: |
| 89 <pre id="Case2"></pre> | 97 <pre id="Case2"></pre> |
| 90 </div> | 98 </div> |
| 91 | 99 |
| 92 </body> | 100 </body> |
| 93 </html> | 101 </html> |
| OLD | NEW |