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