| <!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 src="../resources/text-based-repaint.js"></script> |
| <script type="text/javascript"> |
| if (window.internals) |
| internals.settings.setPreferCompositingToLCDTextEnabled(true); |
| |
| window.addEventListener('load', function() { |
| 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; |
| |
| runRepaintAndPixelTest(); |
| }); |
| |
| function repaintTest() { |
| var scroller = document.getElementById('scroller'); |
| var indicator = document.getElementById('indicator'); |
| |
| indicator.style.background = 'green'; |
| |
| // Scroll back up so that the updated (green) indicator is visible. |
| scroller.scrollTop = 0; |
| } |
| </script> |
| </head> |
| <body> |
| <div id="scroller"> |
| <div id="indicator"></div> |
| <div id="content"></div> |
| </div> |
| </body> |
| </html> |
