justify-self-block-in-inline.html (1135B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align/#justify-self-property"> 3 <link rel="help" href="https://crbug.com/374034249"> 4 <meta name="assert" 5 content="block-in-inline width is stretched to its parent width, not sized as 'fit-content'" /> 6 7 <style> 8 .inline-block { 9 display: inline-block; 10 height: 50px; 11 background: lightblue; 12 } 13 </style> 14 <script src="/resources/testharness.js"></script> 15 <script src="/resources/testharnessreport.js"></script> 16 <script src="/resources/check-layout-th.js"></script> 17 18 19 <div style="justify-self: start; border: 1px solid;"> 20 <span class="inline-block" style="width: 200px;">wide inline-block</span> 21 <div style="background: orange; height: 50px;" class="block-in-inline" 22 data-expected-width="200"> 23 block-in-inline 24 </div> 25 <span class="inline-block" style="width: 100px;">inline-block</span> 26 </div> 27 28 <div style="width: 100px; justify-self: left;"> 29 <span> 30 <div class="block-in-inline" 31 style="height: 100px; background: green;" 32 data-expected-width="100"> 33 </div> 34 </span> 35 </div> 36 37 <script>checkLayout('.block-in-inline')</script>