block-container-block-end-nested-last-child-with-border.html (1824B)
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="border should protect the margins inside a nested block from trimming"> 7 <style> 8 .trim { 9 margin-trim: block; 10 outline: 1px solid blue; 11 } 12 container { 13 display: block; 14 width: min-content; 15 } 16 item { 17 display: block; 18 inline-size: 50px; 19 block-size: 10px; 20 background-color: green; 21 } 22 .collapsed { 23 block-size: 0px; 24 margin-block: 10px; 25 } 26 .border { 27 block-size: auto; 28 border: 10px solid black; 29 margin-block-end: 25px; 30 } 31 </style> 32 <script src="/resources/testharness.js"></script> 33 <script src="/resources/testharnessreport.js"></script> 34 <script src="/resources/check-layout-th.js"></script> 35 </head> 36 <body onload="checkLayout('.collapsed')"> 37 <div id="target"> 38 <container class="trim"> 39 <container> 40 <item></item> 41 42 <!-- This item's block-end margin should be trimmed 43 since it will collapse through to the outer container--> 44 <container style="margin-block-end: 300px;"> 45 <!-- However the margins inside this item cannot collapse through due to 46 the border and should not be trimmed --> 47 <container class="border"> 48 <item style="margin-block-end: 20px;"></item> 49 <item data-offset-y="58" class="collapsed"></item> 50 </container> 51 <item data-offset-y="68" class="collapsed"></item> 52 </container> 53 </container> 54 <item data-offset-y="68" class="collapsed"></item> 55 </container> 56 </div> 57 </body> 58 </html>