grid-align-baseline-flex-004.html (5776B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines"> 3 <style> 4 .target { 5 display: grid; 6 grid-auto-flow: column; 7 position: relative; 8 line-height: 0; 9 font-size: 20px; 10 inline-size: 200px; 11 margin-block: 10px; 12 padding: 10px; 13 border: solid 3px; 14 writing-mode: vertical-rl; 15 } 16 17 .inner { 18 display: flex; 19 border: solid 5px; 20 padding: 10px; 21 gap: 10px; 22 } 23 24 span { 25 display: inline-block; 26 width: 1em; 27 height: 1em; 28 outline: solid cyan 3px; 29 outline-offset: -3px; 30 } 31 </style> 32 <script src="/resources/testharness.js"></script> 33 <script src="/resources/testharnessreport.js"></script> 34 <script src="/resources/check-layout-th.js"></script> 35 <body onload="checkLayout('.target > *')"> 36 37 <div class="target" style="align-items: first baseline;"> 38 <div data-offset-x="110"><span></span></div> 39 <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10"> 40 <div style="font-size: 10px;"><span></span></div> 41 <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> 42 <div style="font-size: 50px;"><span></span></div> 43 <div style="font-size: 60px;"><span></span></div> 44 <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> 45 <div style="font-size: 20px;"><span></span></div> 46 </div> 47 </div> 48 49 <div class="target" style="align-items: first baseline;"> 50 <div data-offset-x="110"><span></span></div> 51 <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10"> 52 <div style="font-size: 10px;"><span></span></div> 53 <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> 54 <div style="font-size: 50px;"><span></span></div> 55 <div style="font-size: 60px;"><span></span></div> 56 <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> 57 <div style="font-size: 20px;"><span></span></div> 58 </div> 59 </div> 60 61 <div class="target" style="align-items: first baseline;"> 62 <div data-offset-x="105"><span></span></div> 63 <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10"> 64 <div style="font-size: 10px;"><span></span></div> 65 <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> 66 <div style="font-size: 50px;"><span></span></div> 67 <div style="font-size: 60px;"><span></span></div> 68 <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> 69 <div style="font-size: 20px;"><span></span></div> 70 </div> 71 </div> 72 73 <div class="target" style="align-items: first baseline;"> 74 <div data-offset-x="105"><span></span></div> 75 <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10"> 76 <div style="font-size: 10px;"><span></span></div> 77 <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> 78 <div style="font-size: 50px;"><span></span></div> 79 <div style="font-size: 60px;"><span></span></div> 80 <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> 81 <div style="font-size: 20px;"><span></span></div> 82 </div> 83 </div> 84 85 <div class="target" style="align-items: last baseline;"> 86 <div data-offset-x="45"><span></span></div> 87 <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10"> 88 <div style="font-size: 10px;"><span></span></div> 89 <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> 90 <div style="font-size: 50px;"><span></span></div> 91 <div style="font-size: 60px;"><span></span></div> 92 <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> 93 <div style="font-size: 20px;"><span></span></div> 94 </div> 95 </div> 96 97 <div class="target" style="align-items: last baseline;"> 98 <div data-offset-x="45"><span></span></div> 99 <div class="inner" style="inline-size: 140px; flex-wrap: wrap;" data-offset-x="10"> 100 <div style="font-size: 10px;"><span></span></div> 101 <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> 102 <div style="font-size: 50px;"><span></span></div> 103 <div style="font-size: 60px;"><span></span></div> 104 <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> 105 <div style="font-size: 20px;"><span></span></div> 106 </div> 107 </div> 108 109 <div class="target" style="align-items: last baseline;"> 110 <div data-offset-x="40"><span></span></div> 111 <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10"> 112 <div style="font-size: 10px;"><span></span></div> 113 <div style="font-size: 30px; margin-block: 10px; align-self: first baseline;"><span></span></div> 114 <div style="font-size: 50px;"><span></span></div> 115 <div style="font-size: 60px;"><span></span></div> 116 <div style="font-size: 40px; margin-block: 10px; align-self: first baseline;"><span></span></div> 117 <div style="font-size: 20px;"><span></span></div> 118 </div> 119 </div> 120 121 <div class="target" style="align-items: last baseline;"> 122 <div data-offset-x="40"><span></span></div> 123 <div class="inner" style="inline-size: 140px; flex-wrap: wrap-reverse;" data-offset-x="10"> 124 <div style="font-size: 10px;"><span></span></div> 125 <div style="font-size: 30px; margin-block: 10px; align-self: last baseline;"><span></span></div> 126 <div style="font-size: 50px;"><span></span></div> 127 <div style="font-size: 60px;"><span></span></div> 128 <div style="font-size: 40px; margin-block: 10px; align-self: last baseline;"><span></span></div> 129 <div style="font-size: 20px;"><span></span></div> 130 </div> 131 </div>