Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/CSS2/normal-flow/block-in-inline-margin-after-relayout.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: a block in inline box's margin after is not also its container's after a relayout</title>
<meta name="assert" content="A block level box inside an inline box has a line following it, so its margin after is the spacing before that line and nothing else. It is not the container's margin after, and must not become one when the container is laid out again because content inside the block changed.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body { margin: 0; }
.container { font: 16px/18px monospace; }
.block { margin-bottom: 16px; }
</style>
<!-- The block is nested in an inline box, so the container lays out inline content. A line follows the
block, which is what makes the block's margin after purely the spacing before that line. -->
<div class="container" id="target"><span><div class="block"><span id="text">block</span></div></span>line after</div>
<div id="afterTarget">after</div>
<div class="container" id="reference"><span><div class="block"><span>block</span></div></span>line after</div>
<div id="afterReference">after</div>
<script>
const bottomGap = (containerId, afterId) => {
const container = document.getElementById(containerId).getBoundingClientRect();
const after = document.getElementById(afterId).getBoundingClientRect();
return Math.round(after.top - container.bottom);
};
test(() => {
// The container is the block, its margin after, and the line that follows: nothing spills past its
// bottom edge, so the next box sits flush against it.
assert_equals(bottomGap("reference", "afterReference"), 0, "sanity check: laid out once");
}, "A block in inline box's margin after does not extend past its container");
test(() => {
// Change the text inside the block. The block itself is unchanged, so the container is laid out again
// with only its block level child needing layout, which is the incremental path under test.
document.getElementById("text").firstChild.data = "blockk";
document.body.offsetTop;
assert_equals(bottomGap("target", "afterTarget"), 0,
"the block's margin after is still only the spacing before the following line");
}, "Laying out only the block level child does not turn its margin after into the container's");
</script>