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