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