commit 12b27d7b843bf3ded526dfd8112a1fcb5d9ba6f4
parent e8164014e07cf35ba0766973fc335a9c3928daba
Author: David Shin <dshin@mozilla.com>
Date: Tue, 30 Sep 2025 20:30:46 +0000
Bug 1990786: Don't transform empty overflow. r=layout-reviewers,emilio
Differential Revision: https://phabricator.services.mozilla.com/D266907
Diffstat:
2 files changed, 51 insertions(+), 1 deletion(-)
diff --git a/layout/generic/nsIFrame.cpp b/layout/generic/nsIFrame.cpp
@@ -11010,7 +11010,12 @@ bool nsIFrame::FinishAndStoreOverflow(OverflowAreas& aOverflowAreas,
TransformReferenceBox refBox(this);
for (const auto otype : AllOverflowTypes()) {
nsRect& o = aOverflowAreas.Overflow(otype);
- o = nsDisplayTransform::TransformRect(o, this, refBox);
+ // If the overflow is empty, it can still have a non-zero length in one
+ // axis. Transforming such axis-bound rect can cause the resulting rect
+ // to be non-empty, e.g. by rotating the rect.
+ if (!o.IsEmpty()) {
+ o = nsDisplayTransform::TransformRect(o, this, refBox);
+ }
}
/* If we're the root of the 3d context, then we want to include the
diff --git a/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-011.html b/testing/web-platform/tests/css/css-overflow/scrollable-overflow-transform-011.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<title>CSS Overflow: Scrollable Overflow Transform Zero Area Overflow</title>
+<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1990786" />
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<style>
+.transformed {
+ height: 0;
+ width: 0;
+ transform: rotate(89deg);
+ text-indent: 250px;
+}
+
+.transformed::after {
+ text-indent: 0;
+ content: "";
+}
+
+.outer {
+ width: 100px;
+ height: 100px;
+ overflow: hidden;
+ background: red;
+}
+
+.good {
+ width: 200px;
+ height: 200px;
+ background: green;
+}
+
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div id=dut class=outer>
+ <div class=good></div>
+ <div class=transformed></div>
+</div>
+<script>
+dut.scrollTo(0, dut.scrollHeight)
+document.documentElement.classList.remove('reftest-wait');
+</script>
+</html>
