Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-26 06:11:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1698428: Adjust WPT reference case "overflow-top-left-ref.html" to use a white border as a mockup for the testcase's margins. r=TYLin

Browse Source 
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
This commit is contained in:
Daniel Holbert 2021-04-10 06:00:05 +00:00
parent 26ac39c8d5
commit 6d52394b7b
2 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
testing/web-platform/meta/css/css-flexbox/overflow-top-left.html.ini
View File

@ -1,3 +1,3 @@
[overflow-top-left.html]
expected: FAIL
bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1698428
fuzzy: # The text antialiasing can cause some fuzz, on Windows w/o webrender.
if (os == "win") and not webrender: maxDifference=0-103;totalPixels=0-228

19
testing/web-platform/tests/css/css-flexbox/overflow-top-left-ref.html
View File

@ -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>