Don't inflate overflow areas with stale positions of pushed floats that we drained but weren't able to place.
Before this patch, there's an edge case where we may drain a pushed float (with
a stale position), and then discover that it won't fit in the current block (so
we push it and leave its position untouched), but we still inadvertently
include its rect in the current block's overflow areas. This means we're
feeding stale/bogus position into the overflow areas, which can make them
unnecessarily huge.
This patch accounts for this by only considering overflow from floats that we
actually successfully placed, in ReflowPushedFloats.
(Also: this patch removes a stale bit of documentation about aLineLayout being
possibly-null in AddFloat. In actuality, AddFloat has a fatal assertion that
mandates that this arg is non-null.)
Differential Revision: https://phabricator.services.mozilla.com/D117218
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1695509
gecko-commit: 1f62700d85c2a6d2bab864d4e71586726f713457
gecko-reviewers: TYLin
diff --git a/css/css-flexbox/flex-fragmented-with-float-descendant-001-ref.html b/css/css-flexbox/flex-fragmented-with-float-descendant-001-ref.html
new file mode 100644
index 0000000..ead53ad
--- /dev/null
+++ b/css/css-flexbox/flex-fragmented-with-float-descendant-001-ref.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Reference Case</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <style>
+ .multicol {
+ width: 300px;
+ columns: 100px auto;
+ max-height: 160px;
+ border: 3px solid pink;
+ }
+ .container {
+ display: flex;
+ }
+ .weird-flex-item {
+ border: 4px solid teal;
+ outline: 4px solid blue;
+ }
+ .tallFloat {
+ float: left;
+ border: 3px solid black;
+ height: 500px;
+ width: 100px;
+ background: yellow;
+ }
+ .float {
+ /* In this reference case, this is not actually a float. */
+ background: cyan;
+ width: 100px;
+ }
+ .inside-float {
+ height: 30px;
+ width: 30px;
+ background: purple;
+ display: inline-block;
+ }
+ </style>
+</head>
+<body>
+ <div class="multicol">
+ <div class="container">
+ <div class="weird-flex-item">
+ <div class="tallFloat"></div>
+ <br>
+ <div class="float">
+ <div class="inside-float">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/css/css-flexbox/flex-fragmented-with-float-descendant-001.html b/css/css-flexbox/flex-fragmented-with-float-descendant-001.html
new file mode 100644
index 0000000..f4cb7a8
--- /dev/null
+++ b/css/css-flexbox/flex-fragmented-with-float-descendant-001.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>CSS Test: Floats in fragmented flex container shouldn't improperly inflate overflow areas</title>
+ <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+ <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1695509">
+ <link rel="match" href="flex-fragmented-with-float-descendant-001-ref.html">
+ <!-- This is a regression test for a Firefox bug where Firefox was improperly
+ contributing a float's stale position (at an intermediate point in
+ layout where it's pushed off the bottom of one column) to the overflow
+ areas. This test checks for this by using "outline" to visualize the
+ overflow areas, to ensure they're not unexpectedly large. -->
+ <style>
+ .multicol {
+ width: 300px;
+ columns: 100px auto;
+ max-height: 160px;
+ border: 3px solid pink;
+ }
+ .container {
+ display: flex;
+ }
+ .weird-flex-item {
+ border: 4px solid teal;
+ outline: 4px solid blue;
+ }
+ .tallFloat {
+ float: left;
+ border: 3px solid black;
+ height: 500px;
+ width: 100px;
+ background: yellow;
+ }
+ .float {
+ float: left;
+ background: cyan;
+ width: 100px;
+ }
+ .inside-float {
+ height: 30px;
+ width: 30px;
+ background: purple;
+ display: inline-block;
+ }
+ </style>
+</head>
+<body>
+ <div class="multicol">
+ <div class="container">
+ <div class="weird-flex-item">
+ <div class="tallFloat"></div>
+ <br>
+ <div class="float">
+ <div class="inside-float">
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
