David Grogan
b5dab7e391
Automatic update from web-platform-tests [layout] Implement stretch and margin collapsing interactions Normally stretched elements shrink to leave room for their margins. But in the case of collapsing margins, not always. If the parent block has no border, no margin, and is not a new BFC, don't leave room for the margin on that edge. Described in more detail at https://github.com/w3c/csswg-drafts/issues/11044#issuecomment-2599101601 This behavior is still behind a flag. Change-Id: I3397cd051e777f9c0a346094fa23c5b042d82c2c Bug: 41253915 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6180930 Commit-Queue: David Grogan <dgrogan@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1428087} -- wpt-commits: a220728d2ef826fb20651217b1f167590285c2ff wpt-pr: 51117
64 lines
1.7 KiB
HTML
64 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help"
|
|
href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing">
|
|
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11044">
|
|
<script src='/resources/testharness.js'></script>
|
|
<script src='/resources/testharnessreport.js'></script>
|
|
<script src="/resources/check-layout-th.js"></script>
|
|
<meta name="assert"
|
|
content="stretch sizing treating margins as 0 isn't affected by preceding floats">
|
|
|
|
<style>
|
|
.outer {
|
|
width: 100px;
|
|
height: 100px;
|
|
outline: solid;
|
|
position: relative;
|
|
}
|
|
|
|
.float {
|
|
float: left;
|
|
width: 30px;
|
|
height: 30px;
|
|
background: skyblue;
|
|
}
|
|
</style>
|
|
|
|
<p>These tests assert the behavior described at
|
|
https://github.com/w3c/csswg-drafts/issues/11044#issuecomment-2599101601
|
|
</p>
|
|
|
|
<div class="outer">
|
|
<div class="float"></div>
|
|
<div
|
|
style="height: stretch; width: 30px; margin-top: 50px; display: flow-root; border: solid magenta;"
|
|
data-expected-height="100" data-offset-y="0">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="outer">
|
|
<div class="float"></div>
|
|
<div
|
|
style="height: stretch; width: 90px; margin-top: 50px; display: flow-root; border: solid cyan;"
|
|
data-expected-height="100" data-offset-y="30">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="outer">
|
|
<div class="float"></div>
|
|
<div
|
|
style="height: stretch; width: 90px; margin-top: 50px; border: solid green;"
|
|
data-expected-height="100" data-offset-y="0">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="outer">
|
|
<div class="float"></div>
|
|
<div
|
|
style="height: stretch; width: 90px; clear: both; margin-top: 50px; border: solid orange;"
|
|
data-expected-height="100" data-offset-y="30">
|
|
</div>
|
|
</div>
|
|
|
|
<script>checkLayout(".float + div")</script>
|