| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script src="../../resources/run-after-layout-and-paint.js"></script> | 4 <script src="../../resources/run-after-layout-and-paint.js"></script> |
| 5 <style> | 5 <style> |
| 6 .composited { | 6 .composited { |
| 7 transform: translatez(0); | 7 transform: translatez(0); |
| 8 } | 8 } |
| 9 | 9 |
| 10 .background { | 10 .background { |
| (...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 58 | 58 |
| 59 function runTest() | 59 function runTest() |
| 60 { | 60 { |
| 61 if (!window.internals) | 61 if (!window.internals) |
| 62 return; | 62 return; |
| 63 | 63 |
| 64 (function() { | 64 (function() { |
| 65 | 65 |
| 66 return new Promise(function(resolve) { | 66 return new Promise(function(resolve) { |
| 67 // Case 1 | 67 // Case 1 |
| 68 document.getElementById('Case1').textContent = window.internals.la
yerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS); | 68 document.getElementById('Case1').textContent = window.internals.la
yerTreeAsText(document, internals.LAYER_TREE_INCLUDES_PAINT_INVALIDATIONS); |
| 69 | 69 |
| 70 resolve(); | 70 resolve(); |
| 71 }); | 71 }); |
| 72 | 72 |
| 73 })().then(function() { | 73 })().then(function() { |
| 74 | 74 |
| 75 return new Promise(function(resolve) { | 75 return new Promise(function(resolve) { |
| 76 | 76 |
| 77 // Case 2 | 77 // Case 2 |
| 78 window.internals.startTrackingRepaints(document); | 78 window.internals.startTrackingRepaints(document); |
| 79 window.scrollTo(0, 80); | 79 window.scrollTo(0, 80); |
| 80 runAfterLayoutAndPaint(function() { | 80 runAfterLayoutAndPaint(function() { |
| 81 document.getElementById('Case2').textContent = window.intern
als.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS); | 81 document.getElementById('Case2').textContent = window.intern
als.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_PAINT_INVALIDATIONS)
; |
| 82 window.internals.stopTrackingRepaints(document); | 82 window.internals.stopTrackingRepaints(document); |
| 83 | 83 |
| 84 resolve(); | 84 resolve(); |
| 85 }); | 85 }); |
| 86 | 86 |
| 87 }); | 87 }); |
| 88 | 88 |
| 89 }).then(function() { | 89 }).then(function() { |
| 90 | 90 |
| 91 return new Promise(function(resolve) { | 91 return new Promise(function(resolve) { |
| 92 | 92 |
| 93 // Case 3 | 93 // Case 3 |
| 94 window.internals.startTrackingRepaints(document); | 94 window.internals.startTrackingRepaints(document); |
| 95 window.scrollTo(0, 120); | 95 window.scrollTo(0, 120); |
| 96 runAfterLayoutAndPaint(function() { | 96 runAfterLayoutAndPaint(function() { |
| 97 document.getElementById('Case3').textContent = window.intern
als.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS); | 97 document.getElementById('Case3').textContent = window.intern
als.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_PAINT_INVALIDATIONS)
; |
| 98 window.internals.stopTrackingRepaints(document); | 98 window.internals.stopTrackingRepaints(document); |
| 99 | 99 |
| 100 resolve(); | 100 resolve(); |
| 101 }); | 101 }); |
| 102 | 102 |
| 103 }); | 103 }); |
| 104 | 104 |
| 105 }).then(function() { | 105 }).then(function() { |
| 106 | 106 |
| 107 return new Promise(function(resolve) { | 107 return new Promise(function(resolve) { |
| 108 | 108 |
| 109 // Case 4 | 109 // Case 4 |
| 110 window.internals.startTrackingRepaints(document); | 110 window.internals.startTrackingRepaints(document); |
| 111 window.scrollTo(0, 170); | 111 window.scrollTo(0, 170); |
| 112 runAfterLayoutAndPaint(function() { | 112 runAfterLayoutAndPaint(function() { |
| 113 document.getElementById('Case4').textContent = window.intern
als.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS); | 113 document.getElementById('Case4').textContent = window.intern
als.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_PAINT_INVALIDATIONS)
; |
| 114 window.internals.stopTrackingRepaints(document); | 114 window.internals.stopTrackingRepaints(document); |
| 115 | 115 |
| 116 resolve(); | 116 resolve(); |
| 117 }); | 117 }); |
| 118 | 118 |
| 119 }); | 119 }); |
| 120 | 120 |
| 121 }).then(function() { | 121 }).then(function() { |
| 122 | 122 |
| 123 // Display the test results only after test is done so that it does no
t affect repaint rect results. | 123 // Display the test results only after test is done so that it does no
t affect repaint rect results. |
| (...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 176 CASE 3, scrolling y to 120, no repaints expected: | 176 CASE 3, scrolling y to 120, no repaints expected: |
| 177 <pre id="Case3"></pre> | 177 <pre id="Case3"></pre> |
| 178 | 178 |
| 179 CASE 4, scrolling y to 170 new layers will be squashed, so things repaint: | 179 CASE 4, scrolling y to 170 new layers will be squashed, so things repaint: |
| 180 <pre id="Case4"></pre> | 180 <pre id="Case4"></pre> |
| 181 </div> | 181 </div> |
| 182 | 182 |
| 183 </body> | 183 </body> |
| 184 | 184 |
| 185 </html> | 185 </html> |
| OLD | NEW |