Bug 1494801: Don't add additional "contain:paint" clipping on scroll …

…frames. r=mattwoodrow The contain:paint clipping would be redundant and hence unnecessary in this scenario, because: - Scroll frames already clip their descendant frames. - contain:paint has other (non-clipping-related) effects that prevent descendant frames from escaping the scrollframe ancestor. So, no further clipping is required. This is a behavior change - it works around an issue that makes us fail to repaint mousewheel-scrolled content inside of any scrollframe that returns true from ShouldApplyOverflowClipping(). Differential Revision: https://phabricator.services.mozilla.com/D12056 --HG-- extra : moz-landing-system : lando
trman · Nov 19, 2018 · 03a5bc2 · 03a5bc2
1 parent 8ef2b84
commit 03a5bc2
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 3 deletions.
diff --git a/layout/generic/nsFrame.h b/layout/generic/nsFrame.h
@@ -625,9 +625,12 @@ class nsFrame : public nsBox
       return true;
     }
 
-    // contain: paint, which we should interpret as -moz-hidden-unscrollable
-    // by default.
-    if (aDisp->IsContainPaint()) {
+    // contain: paint, which we interpret as -moz-hidden-unscrollable
+    // Exception: for scrollframes, we don't need contain:paint to add any
+    // clipping, because the scrollable frame will already clip overflowing
+    // content, and because contain:paint should prevent all means of escaping
+    // that clipping (e.g. because it forms a fixed-pos containing block).
+    if (aDisp->IsContainPaint() && !aFrame->IsScrollFrame()) {
       return true;
     }
 

diff --git a/layout/reftests/async-scrolling/contain-paint-scrollable-frame-1-ref.html b/layout/reftests/async-scrolling/contain-paint-scrollable-frame-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+  <div style="width:400px; height:200px;
+              border:2px solid black; background: lime;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/contain-paint-scrollable-frame-1.html b/layout/reftests/async-scrolling/contain-paint-scrollable-frame-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html reftest-async-scroll>
+<body>
+  <div style="width:400px; height:200px; overflow:hidden;
+              border:2px solid black; background: red;
+              contain:paint;"
+       reftest-displayport-x="0" reftest-displayport-y="0"
+       reftest-displayport-w="800" reftest-displayport-h="2000"
+       reftest-async-scroll-x="0" reftest-async-scroll-y="100">
+    <!-- This element is what we're hoping will fill the scrollport
+         when the reftest snapshot is taken: -->
+    <div style="background: lime; margin-top: 100px; height: 600px"></div>
+
+    <!-- This element is just to be sure the scrollframe's "contain:paint"
+         styling is actually having an effect. "contain:paint" should make the
+         scrollframe become a containing block for this fixed-pos element, and
+         then this element will position itself off the bottom of the
+         scrollframe and will be entirely clipped. If we fail to honor
+         "contain:paint" for some reason, then this element will instead use
+         the *viewport* as its containing block, and it'll show up in the
+         reftest snapshot and cause the reftest to fail. -->
+    <div style="position: fixed; top: 320px; width: 50px; height: 50px;
+                background: purple;"></div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/async-scrolling/reftest.list b/layout/reftests/async-scrolling/reftest.list
@@ -13,6 +13,7 @@ skip-if(!asyncPan) == bg-fixed-child-no-culling-1.html bg-fixed-child-no-culling
 skip-if(!asyncPan) == bg-fixed-child-no-culling-2.html bg-fixed-child-no-culling-2-ref.html
 skip-if(!asyncPan) == bg-fixed-child-no-culling-3.html bg-fixed-child-no-culling-3-ref.html
 fuzzy-if(Android,0-2,0-4000) fuzzy-if(browserIsRemote&&cocoaWidget,0-2,0-179524) fuzzy-if(browserIsRemote&&winWidget,0-1,0-74590) fuzzy-if(gtkWidget&&layersGPUAccelerated,0-1,0-3528) skip-if(!asyncPan) == bg-fixed-transformed-image.html bg-fixed-transformed-image-ref.html
+test-pref(layout.css.contain.enabled,true) skip-if(!asyncPan) == contain-paint-scrollable-frame-1.html contain-paint-scrollable-frame-1-ref.html
 skip-if(!asyncPan) == element-1.html element-1-ref.html
 pref(layers.force-active,true) skip-if(!asyncPan) == iframe-1.html iframe-1-ref.html
 skip-if(!asyncPan) == nested-1.html nested-1-ref.html