| 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-grid { |
| 8 display: inline-flex; | 8 display: inline-grid; |
| 9 background-color: lightgrey; | 9 background-color: lightgrey; |
| 10 margin-top: 5px; | 10 margin-top: 5px; |
| 11 } | 11 } |
| 12 .flexbox { | 12 .grid { |
| 13 display: flex; | 13 display: grid; |
| 14 background-color: grey; | 14 background-color: grey; |
| 15 margin-top: 10px; | 15 margin-top: 10px; |
| 16 } | 16 } |
| 17 .column { | 17 .column { |
| 18 flex-flow: column; | 18 grid-auto-flow: column; |
| 19 } | 19 } |
| 20 .column-reverse { | 20 .firstRowFirstColumn { |
| 21 flex-flow: column-reverse; | 21 grid-column: 1; |
| 22 grid-row: 1; |
| 23 } |
| 24 .secondRowFirstColumn { |
| 25 grid-column: 1; |
| 26 grid-row: 2; |
| 22 } | 27 } |
| 23 </style> | 28 </style> |
| 24 | 29 |
| 25 <body style="position: relative"> | 30 <body style="position: relative"> |
| 26 | 31 |
| 27 <!-- If any of the flex items on the flex container's first line participate | 32 <!-- If any of the grid items whose areas intersect the grid container's first |
| 28 in baseline alignment, the flex container's main-axis baseline is the baseline | 33 row/column participate in baseline alignment, the grid container's baseline is |
| 29 of those flex items. --> | 34 the baseline of those grid items. --> |
| 30 <div> | 35 <div> |
| 31 before text | 36 before text |
| 32 <div class="inline-flexbox" style="height: 50px;"> | 37 <div class="inline-grid column" style="grid-auto-rows: 50px;"> |
| 33 <div style="align-self: flex-end">below</div> | 38 <div style="align-self: end">below</div> |
| 34 <div style="align-self: baseline; margin-top: 15px">baseline</div> | 39 <div style="align-self: baseline; margin-top: 15px">baseline</div> |
| 35 <div style="align-self: flex-start">above</div> | 40 <div style="align-self: start">above</div> |
| 36 </div> | 41 </div> |
| 37 after text | 42 after text |
| 38 </div> | 43 </div> |
| 39 | 44 |
| 40 <!-- This flexbox has a baseline flexitem, but it's orthogonal so it doesn't | 45 <!-- This grid has a baseline item, but it's orthogonal so it doesn't |
| 41 participate in baseline alignment. Instead, the baseline is the first flex | 46 participate in baseline alignment. Instead, the baseline is the first grid |
| 42 item's baseline. --> | 47 item's baseline. --> |
| 43 <div> | 48 <div> |
| 44 before text | 49 before text |
| 45 <div class="inline-flexbox" style="height: 40px"> | 50 <div class="inline-grid column" style="grid-auto-rows: 40px"> |
| 46 <div style="align-self: flex-end">baseline</div> | 51 <div style="align-self: end">baseline</div> |
| 47 <div style="align-self: baseline; -webkit-writing-mode: vertical-rl"></div> | 52 <div style="align-self: baseline; -webkit-writing-mode: vertical-rl"></div> |
| 48 <div style="align-self: flex-start">above</div> | 53 <div style="align-self: start">above</div> |
| 49 </div> | 54 </div> |
| 50 after text | 55 after text |
| 51 </div> | 56 </div> |
| 52 | 57 |
| 53 <div> | 58 <div> |
| 54 before text | 59 before text |
| 55 <div class="inline-flexbox"> | 60 <div class="inline-grid column"> |
| 56 <h2>h2 baseline</h2> | 61 <h2>h2 baseline</h2> |
| 57 <div>above</div> | 62 <div>above</div> |
| 58 </div> | 63 </div> |
| 59 after text | 64 after text |
| 60 </div> | 65 </div> |
| 61 | 66 |
| 62 <div> | 67 <div> |
| 63 before text | 68 before text |
| 64 <div class="inline-flexbox"> | 69 <div class="inline-grid column"> |
| 65 <div>baseline</div> | 70 <div>baseline</div> |
| 66 <h2>h2 below</h2> | 71 <h2>h2 below</h2> |
| 67 </div> | 72 </div> |
| 68 after text | 73 after text |
| 69 </div> | 74 </div> |
| 70 | 75 |
| 71 <!-- If the first flex item has an orthogonal baseline, use the synthesized | 76 <!-- If the first grid item has an orthogonal baseline, use the synthesized |
| 72 baseline (bottom of the content box of the first item). --> | 77 baseline (bottom of the content box of the first item). --> |
| 73 <div> | 78 <div> |
| 74 should align with the middle | 79 should align with the middle |
| 75 <div class="inline-flexbox" style="width: 40px; height: 40px"> | 80 <div class="inline-grid" style="width: 40px; height: 40px"> |
| 76 <div style="-webkit-writing-mode: vertical-rl; height: 20px; width: 40px; bo
rder-bottom: 1px solid black"></div> | 81 <div style="-webkit-writing-mode: vertical-rl; height: 20px; width: 40px; bo
rder-bottom: 1px solid black"></div> |
| 77 </div> | 82 </div> |
| 78 of the grey flexbox | 83 of the grey grid |
| 79 </div> | 84 </div> |
| 80 | 85 |
| 81 <!-- If there are no flexitems, align to the bottom of the box. --> | 86 <!-- If there are no griditems, align to the bottom of the box. --> |
| 82 <div> | 87 <div> |
| 83 should align with the bottom | 88 should align with the bottom |
| 84 <div class="inline-flexbox" style="width: 30px; height: 30px"> | 89 <div class="inline-grid" style="width: 30px; height: 30px"> |
| 85 </div> | 90 </div> |
| 86 of the grey flexbox | 91 of the grey grid |
| 87 </div> | 92 </div> |
| 88 | 93 |
| 89 | 94 <!-- column-axis test cases. --> |
| 90 <!-- cross-axis (column) test cases. --> | |
| 91 <div> | 95 <div> |
| 92 before text | 96 before text |
| 93 <div class="inline-flexbox column"> | 97 <div class="inline-grid"> |
| 94 <div>baseline</div> | 98 <div class="firstRowFirstColumn">baseline</div> |
| 95 <div>below</div> | 99 <div class="secondRowFirstColumn">below</div> |
| 96 </div> | 100 </div> |
| 97 after text | 101 after text |
| 98 </div> | 102 </div> |
| 99 | 103 |
| 100 <div> | 104 <div> |
| 101 before text | 105 before text |
| 102 <div class="inline-flexbox column-reverse"> | 106 <div class="inline-grid"> |
| 103 <div>baseline</div> | 107 <div class="secondRowFirstColumn">baseline</div> |
| 104 <div>above</div> | 108 <div class="firstRowFirstColumn">above</div> |
| 105 </div> | 109 </div> |
| 106 after text | 110 after text |
| 107 </div> | 111 </div> |
| 108 | 112 |
| 109 <!-- If the first flex item has an orthogonal baseline, use the synthesized | 113 <!-- If the first grid item has an orthogonal baseline, use the synthesized |
| 110 baseline (bottom of the content box of the first item). --> | 114 baseline (bottom of the content box of the first item). --> |
| 111 <div> | 115 <div> |
| 112 should align with the middle | 116 should align with the middle |
| 113 <div class="inline-flexbox column" style="width: 40px; height: 40px;"> | 117 <div class="inline-grid" style="width: 40px; height: 40px;"> |
| 114 <div style="-webkit-writing-mode: vertical-rl; width: 40px; height: 20px; bo
rder-bottom: 1px solid black"></div> | 118 <div style="-webkit-writing-mode: vertical-rl; width: 40px; height: 20px; bo
rder-bottom: 1px solid black"></div> |
| 115 <div style="-webkit-writing-mode: vertical-rl; width: 40px; height: 20px"></
div> | 119 <div style="-webkit-writing-mode: vertical-rl; width: 40px; height: 20px"></
div> |
| 116 </div> | 120 </div> |
| 117 of the grey flexbox | 121 of the grey grid |
| 118 </div> | 122 </div> |
| 119 | 123 |
| 120 <!-- If there are no flexitems, align to the bottom of the box. --> | 124 <!-- If there are no griditems, align to the bottom of the box. --> |
| 121 <div> | 125 <div> |
| 122 should align with the bottom | 126 should align with the bottom |
| 123 <div class="inline-flexbox column" style="width: 30px; height: 30px"> | 127 <div class="inline-grid" style="width: 30px; height: 30px"> |
| 124 </div> | 128 </div> |
| 125 of the grey flexbox | 129 of the grey grid |
| 126 </div> | 130 </div> |
| 127 | 131 |
| 128 <!-- More tests on the right side of the page. --> | 132 <!-- More tests on the right side of the page. --> |
| 129 <div style="position: absolute; top: 0; left: 400px; width: 360px"> | 133 <div style="position: absolute; top: 0; left: 400px; width: 360px"> |
| 130 | 134 |
| 131 <!-- Ignore absolutely positioned flex items. --> | 135 <!-- Ignore absolutely positioned flex items. --> |
| 132 <div> | 136 <div> |
| 133 before text | 137 before text |
| 134 <div class="inline-flexbox"> | 138 <div class="inline-grid column"> |
| 135 <div style="position: absolute">absolute</div> | 139 <div style="position: absolute">absolute</div> |
| 136 <div style="margin-top: 30px">baseline</div> | 140 <div style="margin-top: 30px">baseline</div> |
| 137 </div> | 141 </div> |
| 138 after text | 142 after text |
| 139 </div> | 143 </div> |
| 140 | 144 |
| 141 <!-- We don't participate in baseline alignment if there's an auto margin. --> | 145 <!-- We don't participate in baseline alignment if there's an auto margin. --> |
| 142 <div> | 146 <div> |
| 143 before text | 147 before text |
| 144 <div class="inline-flexbox" style="height: 40px;"> | 148 <div class="inline-grid column" style="grid-auto-rows: 40px;"> |
| 145 <div>baseline</div> | 149 <div>baseline</div> |
| 146 <div style="align-self: baseline; margin-top: auto">below</div> | 150 <div style="align-self: baseline; margin-top: auto">below</div> |
| 147 </div> | 151 </div> |
| 148 after text | 152 after text |
| 149 </div> | 153 </div> |
| 150 | 154 |
| 151 <div> | 155 <div> |
| 152 before text | 156 before text |
| 153 <div style="display: inline-block"> | 157 <div style="display: inline-block"> |
| 154 <div class="inline-flexbox" style="height: 40px;"> | 158 <div class="inline-grid column" style="height: 40px;"> |
| 155 <div>above</div> | 159 <div>above</div> |
| 156 <div style="align-self: baseline; margin-top: 10px">baseline</div> | 160 <div style="align-self: baseline; margin-top: 10px">baseline</div> |
| 157 <div>above</div> | 161 <div>above</div> |
| 158 </div> | 162 </div> |
| 159 after | 163 after |
| 160 </div> | 164 </div> |
| 161 text | 165 text |
| 162 </div> | 166 </div> |
| 163 | 167 |
| 164 <!-- The spec is a little unclear what should happen here. For now, align to | 168 <!-- The spec is a little unclear what should happen here. For now, |
| 165 the last line box. --> | 169 align to the last line box. --> |
| 166 <div> | 170 <div> |
| 167 before text | 171 before text |
| 168 <div style="display: inline-block"> | 172 <div style="display: inline-block"> |
| 169 <div class="flexbox" style="height: 30px;"> | 173 <div class="grid column" style="height: 30px;"> |
| 170 baseline | 174 baseline |
| 171 </div> | 175 </div> |
| 172 </div> | 176 </div> |
| 173 after text | 177 after text |
| 174 </div> | 178 </div> |
| 175 | 179 |
| 176 <table style="background-color: lightgrey; margin-top: 5px"> | 180 <table style="background-color: lightgrey; margin-top: 5px"> |
| 177 <tr style="height: 50px"> | 181 <tr style="height: 50px"> |
| 178 <td style="vertical-align: bottom">bottom</td> | 182 <td style="vertical-align: bottom">bottom</td> |
| 179 <td style="vertical-align: baseline">baseline</td> | 183 <td style="vertical-align: baseline">baseline</td> |
| 180 <td style="vertical-align: top">top</td> | 184 <td style="vertical-align: top">top</td> |
| 181 <td style="vertical-align: baseline"><div class="flexbox column"> | 185 <td style="vertical-align: baseline"><div class="grid"> |
| 182 <div>baseline</div> | 186 <div class="firstRowFirstColumn">baseline</div> |
| 183 <div>below</div> | 187 <div class="secondRowFirstColumn">below</div> |
| 184 </div></td> | 188 </div></td> |
| 185 <td style="vertical-align: baseline"><div class="flexbox column-reverse"> | 189 <td style="vertical-align: baseline"><div class="grid"> |
| 186 <div>baseline</div> | 190 <div class="secondRowFirstColumn">baseline</div> |
| 187 <div>above</div> | 191 <div class="firstRowFirstColumn">above</div> |
| 188 </div></td> | 192 </div></td> |
| 189 </tr> | 193 </tr> |
| 190 </table> | 194 </table> |
| 191 | 195 |
| 192 <table style="background-color: lightgrey; margin-top: 5px"> | 196 <table style="background-color: lightgrey; margin-top: 5px"> |
| 193 <tr style="height: 50px"> | 197 <tr style="height: 50px"> |
| 194 <td style="vertical-align: bottom">bottom</td> | 198 <td style="vertical-align: bottom">bottom</td> |
| 195 <td style="vertical-align: baseline">baseline</td> | 199 <td style="vertical-align: baseline">baseline</td> |
| 196 <td style="vertical-align: top">top</td> | 200 <td style="vertical-align: top">top</td> |
| 197 <td style="vertical-align: baseline"><div class="flexbox"> | 201 <td style="vertical-align: baseline"><div class="grid column"> |
| 198 <h2>h2 baseline</h2> | 202 <h2>h2 baseline</h2> |
| 199 <div>above</div> | 203 <div>above</div> |
| 200 </div></td> | 204 </div></td> |
| 201 </table> | 205 </table> |
| 202 | 206 |
| 203 <!-- If a box contributing a baseline has a scrollbar, the box must be treated | 207 <!-- 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. --> | 208 as being in its initial scroll position when computing the baseline. --> |
| 205 <div> | 209 <div> |
| 206 before text | 210 before text |
| 207 <div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; wid
th: 150px"> | 211 <div id="grid-with-scrollbar" class="inline-grid column" style="height: 65px; wi
dth: 150px"> |
| 208 <div id="flexitem-with-scrollbar" style="align-self: baseline; padding-top:
15px; height: 50px; overflow-y: scroll;"> | 212 <div id="griditem-with-scrollbar" style="align-self: baseline; padding-top:
15px; height: 50px; overflow-y: scroll;"> |
| 209 The baseline is based on<br> | 213 The baseline is based on<br> |
| 210 the non-scrolled position;<br> | 214 the non-scrolled position;<br> |
| 211 this won't line up. | 215 this won't line up. |
| 212 </div> | 216 </div> |
| 213 </div> | 217 </div> |
| 214 after text | 218 after text |
| 215 </div> | 219 </div> |
| 216 | 220 |
| 217 </div> | 221 </div> |
| 218 | 222 |
| 219 <script> | 223 <script> |
| 220 document.getElementById("flexitem-with-scrollbar").scrollTop = 999; | 224 document.getElementById("griditem-with-scrollbar").scrollTop = 999; |
| 221 document.getElementById("flexbox-with-scrollbar").style.width = "auto"; | 225 document.getElementById("grid-with-scrollbar").style.width = "auto"; |
| 222 </script> | 226 </script> |
| 223 | 227 |
| 224 </body> | 228 </body> |
| 225 </html> | 229 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1407633003:
[css-grid] Implementation of Baseline Self-Alignment (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master