Source/WebCore: REGRESSION (r137215): WebKit stretches and shrinks a part of screen on scroll
https://bugs.webkit.org/show_bug.cgi?id=104626
Reviewed by Beth Dakin.
r137215 removed a compositing layer repaint on size changes. However, there
are cases where the compositing code constrains layer size by clipping
with the viewport and a clipping ancestor. When that happens, we must
invalidate the layer on a size change to avoid showing stretched or
shrunken content.
Test: compositing/repaint/clipped-layer-size-change.html
* rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::RenderLayerBacking):
(WebCore::RenderLayerBacking::updateCompositedBounds):
(WebCore::RenderLayerBacking::updateGraphicsLayerGeometry):
* rendering/RenderLayerBacking.h:
(RenderLayerBacking):
LayoutTests: REGRESSION(r137215): WebKit stretches and shrinks a part of screen on scroll
https://bugs.webkit.org/show_bug.cgi?id=104626
Reviewed by Beth Dakin.
Testcase that scrolls an overflow area containing a compositing layer.
* compositing/repaint/clipped-layer-size-change-expected.html: Added.
* compositing/repaint/clipped-layer-size-change.html: Added.
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@137248 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/compositing/repaint/clipped-layer-size-change.html b/LayoutTests/compositing/repaint/clipped-layer-size-change.html
new file mode 100644
index 0000000..29c100e
--- /dev/null
+++ b/LayoutTests/compositing/repaint/clipped-layer-size-change.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+ <style>
+ #container {
+ width: 200px;
+ height: 200px;
+ overflow: hidden;
+ border: 1px solid black;
+ }
+
+ .scroll-content {
+ height: 600px;
+ }
+
+ .inner {
+ position: relative;
+ width: 150px;
+ height: 150px;
+ margin-top: -10px; /* force overlap with the composited element */
+ margin-left: 10px;
+ box-sizing: border-box;
+ border: 40px solid black;
+ }
+
+ .composited {
+ height: 150px;
+ width: 100px;
+ -webkit-transform: translateZ(0);
+ }
+ </style>
+ <script>
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+
+ function doTest()
+ {
+ window.setTimeout(function() {
+ var container = document.getElementById('container');
+ window.console.log('scrolling')
+ container.scrollTop = 100;
+ if (window.testRunner)
+ testRunner.notifyDone();
+ }, 0);
+ }
+ window.addEventListener('load', doTest, false);
+ </script>
+</head>
+<body>
+
+ <div id="container">
+ <div class="scroll-content">
+ <div class="composited"></div>
+ <div class="inner"></div>
+ </div>
+ </div>
+</body>
+</html>
