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