grid-align-baseline-flex-002.html (10298B)
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-inline: 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 } 22 23 span { 24 display: inline-block; 25 width: 1em; 26 height: 1em; 27 outline: solid cyan 3px; 28 outline-offset: -3px; 29 } 30 </style> 31 <script src="/resources/testharness.js"></script> 32 <script src="/resources/testharnessreport.js"></script> 33 <script src="/resources/check-layout-th.js"></script> 34 <body onload="checkLayout('.target > *')"> 35 36 <div class="target" style="align-items: first baseline;"> 37 <div data-offset-x="40"><span></span></div> 38 <div class="inner" data-offset-x="10"> 39 <div style="font-size: 10px;"><span></span></div> 40 <div style="font-size: 30px;"><span></span></div> 41 </div> 42 </div> 43 44 <div class="target" style="align-items: last baseline;"> 45 <div data-offset-x="30"><span></span></div> 46 <div class="inner" data-offset-x="10"> 47 <div style="font-size: 10px;"><span></span></div> 48 <div style="font-size: 30px;"><span></span></div> 49 </div> 50 </div> 51 52 <div class="target" style="align-items: first baseline;"> 53 <div data-offset-x="30"><span></span></div> 54 <div class="inner" style="flex-direction: row-reverse;" data-offset-x="10"> 55 <div style="font-size: 10px;"><span></span></div> 56 <div style="font-size: 30px;"><span></span></div> 57 </div> 58 </div> 59 60 <div class="target" style="align-items: last baseline;"> 61 <div data-offset-x="40"><span></span></div> 62 <div class="inner" style="flex-direction: row-reverse;" data-offset-x="10"> 63 <div style="font-size: 10px;"><span></span></div> 64 <div style="font-size: 30px;"><span></span></div> 65 </div> 66 </div> 67 68 <div class="target" style="align-items: first baseline;"> 69 <div data-offset-x="50"><span></span></div> 70 <div class="inner" style="flex-direction: column;" data-offset-x="10"> 71 <div style="font-size: 10px;"><span></span></div> 72 <div style="font-size: 30px;"><span></span></div> 73 </div> 74 </div> 75 76 <div class="target" style="align-items: last baseline;"> 77 <div data-offset-x="30"><span></span></div> 78 <div class="inner" style="flex-direction: column;" data-offset-x="10"> 79 <div style="font-size: 10px;"><span></span></div> 80 <div style="font-size: 30px;"><span></span></div> 81 </div> 82 </div> 83 84 <div class="target" style="align-items: first baseline;"> 85 <div data-offset-x="40"><span></span></div> 86 <div class="inner" style="flex-direction: column-reverse;" data-offset-x="10"> 87 <div style="font-size: 10px;"><span></span></div> 88 <div style="font-size: 30px;"><span></span></div> 89 </div> 90 </div> 91 92 <div class="target" style="align-items: last baseline;"> 93 <div data-offset-x="20"><span></span></div> 94 <div class="inner" style="flex-direction: column-reverse;" data-offset-x="10"> 95 <div style="font-size: 10px;"><span></span></div> 96 <div style="font-size: 30px;"><span></span></div> 97 </div> 98 </div> 99 100 <!-- flex-wrap: wrap --> 101 102 <div class="target" style="align-items: first baseline;"> 103 <div data-offset-x="70"><span></span></div> 104 <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10"> 105 <div style="font-size: 20px;"><span></span></div> 106 <div style="font-size: 30px;"><span></span></div> 107 <div style="font-size: 10px;"><span></span></div> 108 <div style="font-size: 35px;"><span></span></div> 109 </div> 110 </div> 111 112 <div class="target" style="align-items: last baseline;"> 113 <div data-offset-x="33"><span></span></div> 114 <div class="inner" style="flex-wrap: wrap; inline-size: 50px;" data-offset-x="10"> 115 <div style="font-size: 20px;"><span></span></div> 116 <div style="font-size: 30px;"><span></span></div> 117 <div style="font-size: 10px;"><span></span></div> 118 <div style="font-size: 35px;"><span></span></div> 119 </div> 120 </div> 121 122 <div class="target" style="align-items: first baseline;"> 123 <div data-offset-x="65"><span></span></div> 124 <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10"> 125 <div style="font-size: 20px;"><span></span></div> 126 <div style="font-size: 30px;"><span></span></div> 127 <div style="font-size: 10px;"><span></span></div> 128 <div style="font-size: 35px;"><span></span></div> 129 </div> 130 </div> 131 132 <div class="target" style="align-items: last baseline;"> 133 <div data-offset-x="45"><span></span></div> 134 <div class="inner" style="flex-wrap: wrap; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10"> 135 <div style="font-size: 20px;"><span></span></div> 136 <div style="font-size: 30px;"><span></span></div> 137 <div style="font-size: 10px;"><span></span></div> 138 <div style="font-size: 35px;"><span></span></div> 139 </div> 140 </div> 141 142 <div class="target" style="align-items: first baseline;"> 143 <div data-offset-x="55"><span></span></div> 144 <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10"> 145 <div style="font-size: 20px;"><span></span></div> 146 <div style="font-size: 30px;"><span></span></div> 147 <div style="font-size: 10px;"><span></span></div> 148 <div style="font-size: 35px;"><span></span></div> 149 </div> 150 </div> 151 152 <div class="target" style="align-items: last baseline;"> 153 <div data-offset-x="38"><span></span></div> 154 <div class="inner" style="flex-wrap: wrap; flex-direction: column; block-size: 50px;" data-offset-x="10"> 155 <div style="font-size: 20px;"><span></span></div> 156 <div style="font-size: 30px;"><span></span></div> 157 <div style="font-size: 10px;"><span></span></div> 158 <div style="font-size: 35px;"><span></span></div> 159 </div> 160 </div> 161 162 <div class="target" style="align-items: first baseline;"> 163 <div data-offset-x="50"><span></span></div> 164 <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10"> 165 <div style="font-size: 20px;"><span></span></div> 166 <div style="font-size: 30px;"><span></span></div> 167 <div style="font-size: 10px;"><span></span></div> 168 <div style="font-size: 35px;"><span></span></div> 169 </div> 170 </div> 171 172 <div class="target" style="align-items: last baseline;"> 173 <div data-offset-x="20"><span></span></div> 174 <div class="inner" style="flex-wrap: wrap; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10"> 175 <div style="font-size: 20px;"><span></span></div> 176 <div style="font-size: 30px;"><span></span></div> 177 <div style="font-size: 10px;"><span></span></div> 178 <div style="font-size: 35px;"><span></span></div> 179 </div> 180 </div> 181 182 <!-- flex-wrap: wrap-reverse --> 183 184 <div class="target" style="align-items: first baseline;"> 185 <div data-offset-x="75"><span></span></div> 186 <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10"> 187 <div style="font-size: 20px;"><span></span></div> 188 <div style="font-size: 30px;"><span></span></div> 189 <div style="font-size: 10px;"><span></span></div> 190 <div style="font-size: 35px;"><span></span></div> 191 </div> 192 </div> 193 194 <div class="target" style="align-items: last baseline;"> 195 <div data-offset-x="30"><span></span></div> 196 <div class="inner" style="flex-wrap: wrap-reverse; inline-size: 50px;" data-offset-x="10"> 197 <div style="font-size: 20px;"><span></span></div> 198 <div style="font-size: 30px;"><span></span></div> 199 <div style="font-size: 10px;"><span></span></div> 200 <div style="font-size: 35px;"><span></span></div> 201 </div> 202 </div> 203 204 <div class="target" style="align-items: first baseline;"> 205 <div data-offset-x="63"><span></span></div> 206 <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10"> 207 <div style="font-size: 20px;"><span></span></div> 208 <div style="font-size: 30px;"><span></span></div> 209 <div style="font-size: 10px;"><span></span></div> 210 <div style="font-size: 35px;"><span></span></div> 211 </div> 212 </div> 213 214 <div class="target" style="align-items: last baseline;"> 215 <div data-offset-x="35"><span></span></div> 216 <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: row-reverse; inline-size: 50px;" data-offset-x="10"> 217 <div style="font-size: 20px;"><span></span></div> 218 <div style="font-size: 30px;"><span></span></div> 219 <div style="font-size: 10px;"><span></span></div> 220 <div style="font-size: 35px;"><span></span></div> 221 </div> 222 </div> 223 224 <div class="target" style="align-items: first baseline;"> 225 <div data-offset-x="60"><span></span></div> 226 <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10"> 227 <div style="font-size: 20px;"><span></span></div> 228 <div style="font-size: 30px;"><span></span></div> 229 <div style="font-size: 10px;"><span></span></div> 230 <div style="font-size: 35px;"><span></span></div> 231 </div> 232 </div> 233 234 <div class="target" style="align-items: last baseline;"> 235 <div data-offset-x="30"><span></span></div> 236 <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column; block-size: 50px;" data-offset-x="10"> 237 <div style="font-size: 20px;"><span></span></div> 238 <div style="font-size: 30px;"><span></span></div> 239 <div style="font-size: 10px;"><span></span></div> 240 <div style="font-size: 35px;"><span></span></div> 241 </div> 242 </div> 243 244 <div class="target" style="align-items: first baseline;"> 245 <div data-offset-x="43"><span></span></div> 246 <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10"> 247 <div style="font-size: 20px;"><span></span></div> 248 <div style="font-size: 30px;"><span></span></div> 249 <div style="font-size: 10px;"><span></span></div> 250 <div style="font-size: 35px;"><span></span></div> 251 </div> 252 </div> 253 254 <div class="target" style="align-items: last baseline;"> 255 <div data-offset-x="25"><span></span></div> 256 <div class="inner" style="flex-wrap: wrap-reverse; flex-direction: column-reverse; block-size: 50px;" data-offset-x="10"> 257 <div style="font-size: 20px;"><span></span></div> 258 <div style="font-size: 30px;"><span></span></div> 259 <div style="font-size: 10px;"><span></span></div> 260 <div style="font-size: 35px;"><span></span></div> 261 </div> 262 </div>