table-justify-self-stretch.html (1749B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-abspos"> 3 <style> 4 body { 5 margin: 0; 6 } 7 8 .container { 9 writing-mode: horizontal-tb; 10 display: inline-block; 11 position: relative; 12 margin: 20px; 13 border: solid 4px; 14 width: 40px; 15 height: 40px; 16 } 17 18 .item { 19 writing-mode: horizontal-tb; 20 position: absolute; 21 background: green; 22 inset: 5px; 23 justify-self: stretch; 24 display: table; 25 } 26 27 .item::before { 28 content: ''; 29 display: block; 30 width: 10px; 31 height: 20px; 32 } 33 34 .big::before { 35 width: 50px; 36 height: 60px; 37 } 38 39 .vrl { 40 writing-mode: vertical-rl; 41 } 42 </style> 43 <script src="/resources/testharness.js"></script> 44 <script src="/resources/testharnessreport.js"></script> 45 <script src="/resources/check-layout-th.js"></script> 46 47 <body onload="checkLayout('.item')"> 48 49 <body> 50 51 <div class="container"> 52 <div class="item" data-expected-width="30" data-expected-height="20"></div> 53 </div> 54 55 <div class="container"> 56 <div class="item big" data-expected-width="50" data-expected-height="60"></div> 57 </div> 58 59 <div class="container"> 60 <div class="item vrl" data-expected-width="30" data-expected-height="20"></div> 61 </div> 62 63 <div class="container"> 64 <div class="item big vrl" data-expected-width="50" data-expected-height="60"></div> 65 </div> 66 67 <br> 68 69 <div class="container vrl"> 70 <div class="item" data-expected-width="10" data-expected-height="30"></div> 71 </div> 72 73 <div class="container vrl"> 74 <div class="item big" data-expected-width="50" data-expected-height="60"></div> 75 </div> 76 77 <div class="container vrl"> 78 <div class="item vrl" data-expected-width="10" data-expected-height="30"></div> 79 </div> 80 81 <div class="container vrl"> 82 <div class="item big vrl" data-expected-width="50" data-expected-height="60"></div> 83 </div>