Fix painting of composited overflow controls with visibility:hidden

We can have a composited scroller with visibility:hidden if it has visibility:visible descendants. We should skip painting of overflow controls in the case. Ideally we should not create composited overflow control layers, but I would not touch the pre-CompositeAfterPaint code for the rare case. Bug: 1187818, 1185968 Change-Id: If59049a685fa153b6538f8ca2424792904096000 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2761470 Reviewed-by: Philip Rogers <[email protected]> Commit-Queue: Xianzhu Wang <[email protected]> Cr-Commit-Position: refs/heads/master@{#863011}
web-platform-tests · Mar 15, 2021 · 5cea710 · 5cea710
1 parent 9c1c8b4
commit 5cea710
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/css/css-overflow/overflow-scroll-resize-visibility-hidden-ref.html b/css/css-overflow/overflow-scroll-resize-visibility-hidden-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<style>
+.scroller {
+  width: 100px;
+  height: 100px;
+  overflow: scroll;
+  /* to make the scroller a white mask over the content */
+  filter: brightness(0) invert(1);
+  position: relative;
+  top: -200px;
+}
+.content {
+  width: 100px;
+  height: 100px;
+  background: green;
+}
+</style>
+<div class="content"></div>
+<div class="content"></div>
+<div class="scroller"></div>
+<div class="scroller"></div>
diff --git a/css/css-overflow/overflow-scroll-resize-visibility-hidden.html b/css/css-overflow/overflow-scroll-resize-visibility-hidden.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>CSS Overflow: overflow: scroll with resize: both and visibility: hidden</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3#propdef-overflow">
+<link rel="match" href="overflow-scroll-resize-visibility-hidden-ref.html">
+<style>
+.scroller {
+  overflow: scroll;
+  width: 100px;
+  height: 100px;
+  resize: both;
+  visibility: hidden;
+}
+.content {
+  width: 1000px;
+  height: 1000px;
+  background: green;
+  visibility: visible;
+}
+</style>
+<div class="scroller">
+  <div class="content"></div>
+</div>
+<div class="scroller" style="will-change: transform">
+  <div class="content"></div>
+</div>