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