mirror of
https://github.com/servo/servo.git
synced 2025-07-01 04:23:39 +01:00
29 lines
1.4 KiB
HTML
29 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Containment Test: Layout containment independent formatting context</title>
|
|
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
|
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
|
<link rel="match" href="reference/contain-paint-013-ref.html">
|
|
<meta name=assert content="Layout containment elements establish an independent formatting context. The test checks that this feature of layout containment applies to blocks and inline blocks, but it doesn't apply to inline elements.">
|
|
<style>
|
|
.wrapper {
|
|
border: solid thick;
|
|
margin: 1em;
|
|
}
|
|
</style>
|
|
<p>Test passes if on the first two boxes the top and bottom margins of the text line are double size than on the last box.</p>
|
|
<div class="wrapper">
|
|
<div style="margin: 1em 0; contain: layout;">
|
|
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
|
</div>
|
|
</div>
|
|
<div class="wrapper">
|
|
<span style="display: inline-block; margin: 1em 0; contain: layout;">
|
|
<div style="margin: 1em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div>
|
|
</span>
|
|
</div>
|
|
<div class="wrapper">
|
|
<span style="margin: 1em 0; contain: layout;">
|
|
<div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div>
|
|
</span>
|
|
</div>
|