Index: third_party/WebKit/LayoutTests/paint/invalidation/compositing/updating-scrolling-content.html |
diff --git a/third_party/WebKit/LayoutTests/paint/invalidation/compositing/updating-scrolling-content.html b/third_party/WebKit/LayoutTests/paint/invalidation/compositing/updating-scrolling-content.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..4c5b709d011b0d8d27701fe080450277b97ae8e1 |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/paint/invalidation/compositing/updating-scrolling-content.html |
@@ -0,0 +1,64 @@ |
+<!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) |
+ window.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> |