[LayoutNG] Fix ScrollableOverflowForPropagation()

NGPhysicalFragment::ScrollableOverflowForPropagation() had an important different compared to LayoutBox::LayoutOverflowRectForPropagation() as it was not including the border box when computing the overflow for propagation. This was causing issues in some cases calculating the overflow of replaced elements in LayoutNG, legacy was working fine. This patch changes AdjustScrollableOverflowForPropagation() to also include the element's border box. Note that we cannot do this for ruby boxes as they have some special behavior (see crbug.com/1082087 and r784709 for details). We need new rebaselines for the following test fast/replaced/border-radius-clip.html This is because when you scroll down you can see the border of the embed object (which was hidden before). BUG=1128984 TEST=css/css-overflow/overflow-replaced-element-001.html Change-Id: I038ccb46db7e00a922e33a387cf10e3c805b81c6
web-platform-tests · Sep 18, 2020 · 7b93848 · 7b93848
1 parent 0b61dee
commit 7b93848
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/css/css-overflow/overflow-replaced-element-001.html b/css/css-overflow/overflow-replaced-element-001.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>CSS Overflow: overflow replaced element with borders and negative end margins</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow/#scrollable">
+<meta name="assert" content="Checks that the scrollable overflow of a replaced elements with borders is properly computed even when it has a negative margin-right and margin-bottom.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('#wrapper');">
+  <div id="wrapper" style="width: 200px; height: 100px; overflow: scroll;"
+      data-expected-scroll-width="400" data-expected-scroll-height="300">
+    <img style="border: 50px solid green; width: 300px; height: 200px;
+                margin-right: -100px; margin-bottom: -200px;" />
+  </div>
+</body>