phantom-line-boxes-006.html (1600B)
1 <!DOCTYPE html> 2 <title>CSS Inline Layout Model: Phantom Line Boxes</title> 3 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-inline/#invisible-line-boxes"> 5 <link rel="help" href="https://drafts.csswg.org/css2/#collapsing-margins"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/9344"> 7 <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> 8 <meta name="assert" content="Non-zero inline-axis margins, padding, or borders 9 prevent a line box from becoming a phantom line box, and therefore prevent 10 the inline formatting context from collapsing margins through. 11 This test checks non-zero margins and padding in the same box side, which 12 add up to zero."> 13 14 <style> 15 .wrapper { 16 float: left; 17 width: 50px; 18 background: red; 19 } 20 .wrapper.phantom { 21 background: green; 22 } 23 .wrapper > div { 24 line-height: 0; 25 background: green; 26 } 27 .wrapper.phantom > div { 28 background: red 29 } 30 .wrapper > div::after { 31 content: ""; 32 display: flow-root; 33 margin-top: 200px; 34 } 35 </style> 36 37 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 38 39 <div class="wrapper phantom"> 40 <div><span style="padding-top: 1px; margin-top: -1px"></span></div> 41 </div> 42 <div class="wrapper phantom"> 43 <div><span style="padding-bottom: 1px; padding-bottom: -1px"></span></div> 44 </div> 45 <div class="wrapper"> 46 <div><span style="padding-left: 1px; margin-left: -1px"></span></div> 47 </div> 48 <div class="wrapper"> 49 <div><span style="padding-right: 1px; margin-right: -1px"></span></div> 50 </div>