block-container-block-end-self-collapsing-children-offsets-vert-lr.html (1156B)
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 children at end of block with margin-trim block-end should be positioned at the bottom of the block container"> 7 <style> 8 body { 9 writing-mode: vertical-lr; 10 } 11 container { 12 display: block; 13 margin-trim: block; 14 margin-block-end: 10px; 15 } 16 item { 17 display: block; 18 margin-block-end: 40px; 19 inline-size: 50px; 20 block-size: 50px; 21 background-color: green; 22 } 23 .collapsed { 24 margin-block-start: 50px; 25 block-size: 0px; 26 } 27 </style> 28 <script src="/resources/testharness.js"></script> 29 <script src="/resources/testharnessreport.js"></script> 30 <script src="/resources/check-layout-th.js"></script> 31 </head> 32 <body onload="checkLayout('container > item')"> 33 <div id="target"> 34 <container> 35 <item data-offset-x="8"></item> 36 <item data-offset-x="58" class="collapsed"></item> 37 <item data-offset-x="58" class="collapsed"></item> 38 </container> 39 </div> 40 </body> 41 </html>