grid-justify-baseline-002.html (1693B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-rules"> 3 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> 4 <style> 5 #target { 6 display: grid; 7 justify-items: last baseline; 8 width: 200px; 9 border: solid 3px; 10 position: relative; 11 } 12 #target > :nth-child(1) { 13 background: lime; 14 margin-right: 20px; 15 padding-right: 20px; 16 font-size: 20px; 17 line-height: 20px; 18 justify-self: first baseline; 19 writing-mode: vertical-rl; 20 } 21 #target > :nth-child(2) { 22 background: hotpink; 23 font-size: 30px; 24 line-height: 30px; 25 writing-mode: vertical-lr; 26 } 27 #target > :nth-child(3) { 28 background: papayawhip; 29 font-size: 16px; 30 line-height: 16px; 31 writing-mode: vertical-lr; 32 } 33 #target > :nth-child(4) { 34 background: orange; 35 margin-left: 20px; 36 padding-left: 20px; 37 font-size: 20px; 38 line-height: 20px; 39 justify-self: first baseline; 40 writing-mode: vertical-lr; 41 } 42 #target > :nth-child(5) { 43 background: cyan; 44 font-size: 30px; 45 line-height: 30px; 46 writing-mode: vertical-rl; 47 } 48 #target > :nth-child(6) { 49 background: papayawhip; 50 font-size: 16px; 51 line-height: 16px; 52 writing-mode: vertical-rl; 53 } 54 </style> 55 <script src="/resources/testharness.js"></script> 56 <script src="/resources/testharnessreport.js"></script> 57 <script src="/resources/check-layout-th.js"></script> 58 <body onload="checkLayout('#target > div')"> 59 60 <div id="target"> 61 <div data-offset-x="120">line1<br>line2</div> 62 <div data-offset-x="105">line1<br>line2</div> 63 <div data-offset-x="126">line1<br>line2</div> 64 <div data-offset-x="20">line1<br>line2</div> 65 <div data-offset-x="35">line1<br>line2</div> 66 <div data-offset-x="42">line1<br>line2</div> 67 </div>