| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <style> | 3 <style> |
| 4 body { | 4 body { |
| 5 margin: 0; | 5 margin: 0; |
| 6 } | 6 } |
| 7 .inline-flexbox { | 7 .inline-flexbox { |
| 8 display: inline-flex; | 8 display: inline-flex; |
| 9 background-color: lightgrey; | 9 background-color: lightgrey; |
| 10 margin-top: 5px; | 10 margin-top: 5px; |
| 11 } | 11 } |
| 12 .flexbox { | 12 .flexbox { |
| 13 display: flex; | 13 display: flex; |
| 14 background-color: grey; | 14 background-color: grey; |
| 15 margin-top: 10px; | 15 margin-top: 10px; |
| 16 } | 16 } |
| 17 .empty { |
| 18 border-style: solid; |
| 19 border-width: 5px 0px 10px; |
| 20 padding: 2px 0px 4px; |
| 21 margin: 10px 0px 20px; |
| 22 } |
| 17 .column { | 23 .column { |
| 18 flex-flow: column; | 24 flex-flow: column; |
| 19 } | 25 } |
| 20 .column-reverse { | 26 .column-reverse { |
| 21 flex-flow: column-reverse; | 27 flex-flow: column-reverse; |
| 22 } | 28 } |
| 23 </style> | 29 </style> |
| 24 | 30 |
| 25 <body style="position: relative"> | 31 <body style="position: relative"> |
| 26 | 32 |
| (...skipping 41 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 68 after text | 74 after text |
| 69 </div> | 75 </div> |
| 70 | 76 |
| 71 <!-- If the first flex item has an orthogonal baseline, use the synthesized | 77 <!-- If the first flex item has an orthogonal baseline, use the synthesized |
| 72 baseline (bottom of the content box of the first item). --> | 78 baseline (bottom of the content box of the first item). --> |
| 73 <div> | 79 <div> |
| 74 should align with the middle | 80 should align with the middle |
| 75 <div class="inline-flexbox" style="width: 40px; height: 40px"> | 81 <div class="inline-flexbox" style="width: 40px; height: 40px"> |
| 76 <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bot
tom: 1px solid black"></div> | 82 <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bot
tom: 1px solid black"></div> |
| 77 </div> | 83 </div> |
| 78 of the grey flexbox | 84 of the grey box |
| 79 </div> | 85 </div> |
| 80 | 86 |
| 81 <!-- If there are no flexitems, align to the bottom of the box. --> | 87 <!-- If there are no flexitems, align to the bottom of the box. --> |
| 82 <div> | 88 <div> |
| 83 should align with the bottom | 89 should align with the bottom |
| 84 <div class="inline-flexbox" style="width: 30px; height: 30px"> | 90 <div class="empty inline-flexbox" style="width: 30px; height: 30px"> |
| 85 </div> | 91 </div> |
| 86 of the grey flexbox | 92 of the grey box |
| 87 </div> | 93 </div> |
| 88 | 94 |
| 95 <!-- If the griditem has not a natural baseline, align to the bottom of the box.
--> |
| 96 <div> |
| 97 should align with the bottom |
| 98 <div class="inline-flexbox" style="width: 40px; height: 40px;"> |
| 99 <div style="width: 20px; height: 20px; border: 5px solid; background: red; "
></div> |
| 100 </div> |
| 101 of the red box |
| 102 </div> |
| 89 | 103 |
| 90 <!-- cross-axis (column) test cases. --> | 104 <!-- cross-axis (column) test cases. --> |
| 91 <div> | 105 <div> |
| 92 before text | 106 before text |
| 93 <div class="inline-flexbox column"> | 107 <div class="inline-flexbox column"> |
| 94 <div>baseline</div> | 108 <div>baseline</div> |
| 95 <div>below</div> | 109 <div>below</div> |
| 96 </div> | 110 </div> |
| 97 after text | 111 after text |
| 98 </div> | 112 </div> |
| 99 | |
| 100 <div> | |
| 101 before text | |
| 102 <div class="inline-flexbox column-reverse"> | |
| 103 <div>baseline</div> | |
| 104 <div>above</div> | |
| 105 </div> | |
| 106 after text | |
| 107 </div> | |
| 108 | 113 |
| 109 <!-- If the first flex item has an orthogonal baseline, use the synthesized | 114 <!-- If the first flex item has an orthogonal baseline, use the synthesized |
| 110 baseline (bottom of the content box of the first item). --> | 115 baseline (bottom of the content box of the first item). --> |
| 111 <div> | 116 <div> |
| 112 should align with the middle | 117 should align with the middle |
| 113 <div class="inline-flexbox column" style="width: 40px; height: 40px;"> | 118 <div class="inline-flexbox column" style="width: 40px; height: 40px;"> |
| 114 <div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bot
tom: 1px solid black"></div> | 119 <div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bot
tom: 1px solid black"></div> |
| 115 <div style="writing-mode: vertical-rl; width: 40px; height: 20px"></div> | 120 <div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div> |
| 116 </div> | 121 </div> |
| 117 of the grey flexbox | 122 of the grey box |
| 118 </div> | |
| 119 | |
| 120 <!-- If there are no flexitems, align to the bottom of the box. --> | |
| 121 <div> | |
| 122 should align with the bottom | |
| 123 <div class="inline-flexbox column" style="width: 30px; height: 30px"> | |
| 124 </div> | |
| 125 of the grey flexbox | |
| 126 </div> | 123 </div> |
| 127 | 124 |
| 128 <!-- More tests on the right side of the page. --> | 125 <!-- More tests on the right side of the page. --> |
| 129 <div style="position: absolute; top: 0; left: 400px; width: 360px"> | 126 <div style="position: absolute; top: 0; left: 400px; width: 360px"> |
| 130 | 127 |
| 131 <!-- Ignore absolutely positioned flex items. --> | 128 <!-- Ignore absolutely positioned flex items. --> |
| 132 <div> | 129 <div> |
| 133 before text | 130 before text |
| 134 <div class="inline-flexbox"> | 131 <div class="inline-flexbox"> |
| 135 <div style="position: absolute">absolute</div> | 132 <div style="position: absolute">absolute</div> |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 171 </div> | 168 </div> |
| 172 </div> | 169 </div> |
| 173 after text | 170 after text |
| 174 </div> | 171 </div> |
| 175 | 172 |
| 176 <table style="background-color: lightgrey; margin-top: 5px"> | 173 <table style="background-color: lightgrey; margin-top: 5px"> |
| 177 <tr style="height: 50px"> | 174 <tr style="height: 50px"> |
| 178 <td style="vertical-align: bottom">bottom</td> | 175 <td style="vertical-align: bottom">bottom</td> |
| 179 <td style="vertical-align: baseline">baseline</td> | 176 <td style="vertical-align: baseline">baseline</td> |
| 180 <td style="vertical-align: top">top</td> | 177 <td style="vertical-align: top">top</td> |
| 181 <td style="vertical-align: baseline"><div class="flexbox column"> | |
| 182 <div>baseline</div> | |
| 183 <div>below</div> | |
| 184 </div></td> | |
| 185 <td style="vertical-align: baseline"><div class="flexbox column-reverse"> | |
| 186 <div>baseline</div> | |
| 187 <div>above</div> | |
| 188 </div></td> | |
| 189 </tr> | |
| 190 </table> | |
| 191 | |
| 192 <table style="background-color: lightgrey; margin-top: 5px"> | |
| 193 <tr style="height: 50px"> | |
| 194 <td style="vertical-align: bottom">bottom</td> | |
| 195 <td style="vertical-align: baseline">baseline</td> | |
| 196 <td style="vertical-align: top">top</td> | |
| 197 <td style="vertical-align: baseline"><div class="flexbox"> | 178 <td style="vertical-align: baseline"><div class="flexbox"> |
| 198 <h2>h2 baseline</h2> | 179 <h2>h2 baseline</h2> |
| 199 <div>above</div> | 180 <div>above</div> |
| 200 </div></td> | 181 </div></td> |
| 201 </table> | 182 </table> |
| 202 | 183 |
| 203 <!-- If a box contributing a baseline has a scrollbar, the box must be treated | 184 <!-- If a box contributing a baseline has a scrollbar, the box must be treated |
| 204 as being in its initial scroll position when computing the baseline. --> | 185 as being in its initial scroll position when computing the baseline. --> |
| 205 <div> | 186 <div> |
| 206 before text | 187 before text |
| 207 <div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; wid
th: 150px"> | 188 <div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; wid
th: 150px"> |
| 208 <div id="flexitem-with-scrollbar" style="align-self: baseline; padding-top:
15px; height: 50px; overflow-y: scroll;"> | 189 <div id="flexitem-with-scrollbar" style="align-self: baseline; padding-top:
15px; height: 50px; overflow-y: scroll;"> |
| 209 The baseline is based on<br> | 190 The baseline is based on<br> |
| 210 the non-scrolled position;<br> | 191 the non-scrolled position;<br> |
| 211 this won't line up. | 192 this won't line up. |
| 212 </div> | 193 </div> |
| 213 </div> | 194 </div> |
| 214 after text | 195 after text |
| 215 </div> | 196 </div> |
| 216 | 197 |
| 217 </div> | 198 </div> |
| 218 | 199 |
| 219 <script> | 200 <script> |
| 220 document.getElementById("flexitem-with-scrollbar").scrollTop = 999; | 201 document.getElementById("flexitem-with-scrollbar").scrollTop = 999; |
| 221 document.getElementById("flexbox-with-scrollbar").style.width = "auto"; | 202 document.getElementById("flexbox-with-scrollbar").style.width = "auto"; |
| 222 </script> | 203 </script> |
| 223 | 204 |
| 224 </body> | 205 </body> |
| 225 </html> | 206 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2417853002:
[css-grid] Implementing the grid's first line baseline. (Closed)
