block-container-block-start-child-with-border.html (1234B)
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="item with border should prevent trimming within itself"> 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 block-size: 50px; 18 background-color: green; 19 } 20 .collapsed { 21 margin-block: 50px; 22 block-size: 0px 23 } 24 .with-border-and-margin { 25 border: 1px solid black; 26 margin-block-start: 30px; 27 } 28 </style> 29 <script src="/resources/testharness.js"></script> 30 <script src="/resources/testharnessreport.js"></script> 31 <script src="/resources/check-layout-th.js"></script> 32 </head> 33 <body onload="checkLayout('item')"> 34 <container> 35 <item data-expected-margin-top="0" class="collapsed"> 36 <item data-expected-margin-top="0" class="collapsed"></item> 37 </item> 38 <item class="with-border-and-margin" data-expected-margin-top="0"> 39 <item class="with-border-and-margin" data-expected-margin-top="30"></item> 40 </item> 41 </container> 42 </body> 43 </html>