Adjust WPT reference case "overflow-top-left-ref.html" to use a white border as a mockup for the testcase's margins.
Per https://drafts.csswg.org/css-overflow-3/#scrollable , the scrollable
overflow area of a scrollable flex container is supposed to contain "the margin
areas of...flex item boxes for which the box establishes a containing block."
Before this patch, the reference case didn't properly require this behavior (in
its mockup of the inline-end edge of the testcase's flex containers). The
reference case was using "margin" on blocks in a block container to represent
this space, and that didn't match the testcase because margins behave
differently in block layout vs. flex layout with respect to creating scrollable
overflow in their container.
This patch changes the reference case to use borders to represent this space.
This works better because borders do reliably create scrollable
overflow. (Also, borders don't collapse like margins do in block layout; this
lets us remove an extra hack that the reference case was having to use to
counteract this.)
Differential Revision: https://phabricator.services.mozilla.com/D111025
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1698428
gecko-commit: eb8042bd69cc1d8295f7f6b5a265eb40248969a7
gecko-reviewers: TYLin
diff --git a/css/css-flexbox/overflow-top-left-ref.html b/css/css-flexbox/overflow-top-left-ref.html
index 48b2aa8..8e58953 100644
--- a/css/css-flexbox/overflow-top-left-ref.html
+++ b/css/css-flexbox/overflow-top-left-ref.html
@@ -17,21 +17,24 @@
}
.column-wrapper > div {
- margin: 4px;
+ /* This border represents the expected rendering of the testcase's
+ "margin:4px". This border should occupy the same space as that margin
+ would, and it should create the same amount of scrollable overflow. (We
+ can't just use "margin:4px" here, because this reference case uses block
+ layout, and margins have different behavior with respect to collapsing and
+ scrollable-overflow impact in block vs. flexbox layout.) */
+ border: 4px solid white;
height: 30px;
background: #CCC;
}
-.column-wrapper > .h-overflow {
- margin-top: 8px; // Compensate for margin collapsing.
-}
-
.h-overflow {
width: 500px;
}
.row-wrapper > div {
- margin: 4px;
+ /* As noted above, this is a mockup for the "margin:4px" in the testcase. */
+ border: 4px solid white;
width: 30px;
background: #CCC;
}
@@ -40,10 +43,6 @@
height: 500px;
}
-.row-wrapper > .v-overflow {
- margin-right: 8px; // Compensate for margin collapsing.
-}
-
</style>
<div class=column-wrapper>
