| <!-- webkit-test-runner [ useThreadedScrolling=false ] --> |
| <!DOCTYPE html> |
| |
| <!-- |
| This test checks that the contents of accelerated scrolling layers are properly |
| updated also outside the current overflow clip. See |
| https://bugs.webkit.org/show_bug.cgi?id=100524. |
| --> |
| |
| <html> |
| <head> |
| <style type="text/css"> |
| #scroller { |
| overflow: scroll; |
| -webkit-overflow-scrolling: touch; |
| width: 200px; |
| height: 200px; |
| } |
| |
| #indicator { |
| background: red; |
| height: 200px; |
| } |
| |
| #content { |
| height: 1000px; |
| } |
| </style> |
| <script type="text/javascript"> |
| if (window.internals) |
| window.internals.settings.setAcceleratedCompositingForOverflowScrollEnabled(true); |
| |
| window.addEventListener('load', function() { |
| if (!window.testRunner || !window.internals) { |
| alert('This test requires testRunner to run!'); |
| return; |
| } |
| testRunner.dumpAsText(false); |
| |
| var scroller = document.getElementById('scroller'); |
| var indicator = document.getElementById('indicator'); |
| |
| // Make sure the scrolling content is painted before we start. |
| scroller.offsetTop; |
| |
| // Scroll all the way to the bottom and change the color of the |
| // indicator (which is now outside the overflow clip). |
| scroller.scrollTop = 1000; |
| window.internals.startTrackingRepaints(); |
| indicator.style.background = 'green'; |
| |
| // Scroll back up so that the updated (green) indicator is visible. |
| var layerTree = document.getElementById('layerTree'); |
| scroller.scrollTop = 0; |
| layerTree.innerText = |
| window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS); |
| window.internals.stopTrackingRepaints(); |
| }); |
| </script> |
| </head> |
| <body> |
| <div id="scroller"> |
| <div id="indicator"></div> |
| <div id="content"></div> |
| </div> |
| <pre id="layerTree">This text will be replaced with the layer tree.</pre> |
| </body> |
| </html> |
