grid-justify-baseline-005.html (1046B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> 3 <style> 4 #target { 5 display: grid; 6 grid-template: 50px 50px 50px 50px / 50px 50px 50px; 7 width: 200px; 8 border: solid 3px; 9 position: relative; 10 line-height: 20px; 11 } 12 #target > div { 13 writing-mode: vertical-rl; 14 } 15 </style> 16 <script src="/resources/testharness.js"></script> 17 <script src="/resources/testharnessreport.js"></script> 18 <script src="/resources/check-layout-th.js"></script> 19 <body onload="checkLayout('#target > div')"> 20 21 <div id="target"> 22 <div style="grid-row: 1; grid-column: 3; justify-self: baseline; margin-right: 10px;" data-offset-x="100">line1<br>line2</div> 23 <div style="grid-row: 2; grid-column: span 3; justify-self: baseline;" data-offset-x="100">line1<br>line2</div> 24 <div style="grid-row: 3; grid-column: 1; justify-self: last baseline; margin-left: 10px;" data-offset-x="10">line1<br>line2</div> 25 <div style="grid-row: 4; grid-column: span 3; justify-self: last baseline;" data-offset-x="10">line1<br>line2</div> 26 </div>