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