forked from mirrors/gecko-dev
3699230bff
This patch incorporates flex item's margin and flex container's padding when computing flex container's overflow area in both the inline axis and block axis. overflow-top-left.html starts to fail because the test has flex items with margin contributing to the overflow area now. We leave the test unchanged for now until the webcompat situation is clear (Bug1698428). flexbox-overflow-padding-002.html is based on flexbox-overflow-padding-001.html with `writing-mode: vertical-rl` and `direction: rtl` added to `.flexContainer`. Differential Revision: https://phabricator.services.mozilla.com/D107936
45 lines
1.4 KiB
HTML
45 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Flexible Box Layout Test: Test flex container's overflow rect</title>
|
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
<link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
|
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable">
|
|
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
|
<meta name="assert" content="When computing flex container's overflow area, its padding rect is added to flex item's margin-box, not flex item's overflow rect. This test verifies that last part; making sure it's not mistakenly added to the flex container's overflow rect.">
|
|
|
|
<style>
|
|
.scroll {
|
|
overflow: auto;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: red;
|
|
}
|
|
.flexContainer {
|
|
display: flex;
|
|
padding: 25px;
|
|
background: green;
|
|
}
|
|
.flexItem {
|
|
flex-shrink: 0;
|
|
width: 30px;
|
|
height: 30px;
|
|
margin: 10px;
|
|
}
|
|
.flexItemOverflow {
|
|
width: 65px;
|
|
height: 65px;
|
|
}
|
|
</style>
|
|
|
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
|
<div class="scroll">
|
|
<div class="flexContainer">
|
|
<div class="flexItem">
|
|
<!-- The item's right and bottom overflow edges should exactly touch the
|
|
flex container's right bottom left padding edges. -->
|
|
<div class="flexItemOverflow"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</html>
|