forked from mirrors/gecko-dev
6d52394b7b
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
56 lines
1.2 KiB
HTML
56 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<style>
|
|
.row-wrapper, .column-wrapper {
|
|
margin: 4px 0;
|
|
overflow: auto;
|
|
direction: rtl;
|
|
border: 2px solid black;
|
|
}
|
|
|
|
.column-wrapper {
|
|
width: 300px;
|
|
}
|
|
|
|
.row-wrapper {
|
|
height: 300px;
|
|
writing-mode: vertical-rl;
|
|
}
|
|
|
|
.column-wrapper > div {
|
|
/* 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;
|
|
}
|
|
|
|
.h-overflow {
|
|
width: 500px;
|
|
}
|
|
|
|
.row-wrapper > div {
|
|
/* As noted above, this is a mockup for the "margin:4px" in the testcase. */
|
|
border: 4px solid white;
|
|
width: 30px;
|
|
background: #CCC;
|
|
}
|
|
|
|
.v-overflow {
|
|
height: 500px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div class=column-wrapper>
|
|
<div>one</div>
|
|
<div class=h-overflow>two</div>
|
|
</div>
|
|
|
|
<div class=row-wrapper>
|
|
<div>one</div>
|
|
<div class=v-overflow>two</div>
|
|
</div>
|