block-container-block-start-self-collapsing-nested.html (1463B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-box-4/#margin-trim-block"> 6 <meta name="assert" content="self-collapsing items at block start should have margins trimmed along with first non self-collapsing child block-start margins"> 7 <style> 8 container { 9 display: block; 10 margin-trim: block; 11 border: 1px solid black; 12 margin-block-start: 10px; 13 } 14 item { 15 display: block; 16 inline-size: 50px; 17 background-color: green; 18 } 19 .collapsed { 20 margin-block-start: 50px; 21 block-size: 0px 22 } 23 </style> 24 <script src="/resources/testharness.js"></script> 25 <script src="/resources/testharnessreport.js"></script> 26 <script src="/resources/check-layout-th.js"></script> 27 </head> 28 <body onload=" checkLayout('container, item');"> 29 <container data-expected-margin-top="10"> 30 <item data-expected-margin-top="0" class="collapsed"> 31 <item data-expected-margin-top="0" class="collapsed"></item> 32 </item> 33 <item data-expected-margin-top="0" style="margin-block: 40px"> 34 <item data-expected-margin-top="0" data-expected-margin-bottom="0" class="collapsed"></item> 35 <item data-expected-margin-top="0" style="margin-top: 30px;"> 36 <item data-expected-margin-top="0" style="margin-block-start: 100px; height: 50px;"></item> 37 </item> 38 </item> 39 </container> 40 </body> 41 </html>