grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html (20525B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title> 4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align"> 8 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items"> 9 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items"> 10 <link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment"> 11 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline"> 12 <link rel="stylesheet" href="/css/support/grid.css"> 13 <link rel="stylesheet" href="../../support/alignment.css"> 14 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 15 <style> 16 .inline-grid { 17 position: relative; 18 border: solid; 19 text-orientation: sideways; 20 font: 15px/1 Ahem; 21 } 22 23 .columns { grid-template-columns: 100px 100px; } 24 .rows { grid-template-rows: 100px 100px; } 25 26 .min-content-columns { grid-template-columns: min-content; } 27 .max-content-columns { grid-template-columns: max-content; } 28 .fit-content-columns { grid-template-columns: fit-content; } 29 .flex-columns { grid-template-columns: 1fr; } 30 .max-flex-columns { grid-template-columns: minmax(0px, 1fr); } 31 .auto-columns { grid-template-columns: auto 100px; } 32 33 .min-content-rows { grid-template-rows: min-content; } 34 .max-content-rows { grid-template-rows: max-content; } 35 .fit-content-rows { grid-template-rows: fit-content; } 36 .flex-rows { grid-template-rows: 1fr; } 37 .max-flex-rows { grid-template-rows: minmax(0px, 1fr); } 38 .auto-rows { grid-template-rows: auto 100px; } 39 40 .height25 { height: 25px; } 41 .height50 { height: 50px; } 42 .height200 { height: 200px; } 43 .width25 { width: 25px; } 44 .width50 { width: 50px; } 45 .width200 { width: 200px; } 46 47 .bigFont { font-size: 50px; } 48 .paddingLeft { padding-left: 25px; } 49 .paddingBottom { padding-bottom: 25px; } 50 .paddingRight { padding-right: 25px; } 51 </style> 52 <script src="/resources/testharness.js"></script> 53 <script src="/resources/testharnessreport.js"></script> 54 <script src="/resources/check-layout-th.js"></script> 55 <script type="text/javascript"> 56 setup({ explicit_done: true }); 57 </script> 58 <body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })"> 59 60 <!-- NOTE: previously this test was asserting some "cyclic" behaviour where an item would switch baseline alignment participation - this is no longer the case per spec. --> 61 <pre>auto-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre> 62 <div class="inline-grid alignItemsBaseline columns height200"> 63 <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="95" data-expected-width="100" data-expected-height="75">É</div> 64 <div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="135">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 65 <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="135" data-expected-width="200" data-expected-height="25"></div> 66 </div> 67 68 <pre>min-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre> 69 <div class="inline-grid alignItemsBaseline columns min-content-rows"> 70 <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="55" data-expected-width="100" data-expected-height="75">É</div> 71 <div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 72 <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="95" data-expected-width="200" data-expected-height="25"></div> 73 </div> 74 75 <pre>max-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre> 76 <div class="inline-grid alignItemsBaseline columns max-content-rows"> 77 <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="55" data-expected-width="100" data-expected-height="75">É</div> 78 <div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 79 <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="95" data-expected-width="200" data-expected-height="25"></div> 80 </div> 81 82 <pre>fit-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre> 83 <div class="inline-grid alignItemsBaseline columns fit-content-rows"> 84 <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="55" data-expected-width="100" data-expected-height="75">É</div> 85 <div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 86 <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="95" data-expected-width="200" data-expected-height="25"></div> 87 </div> 88 89 <pre>flex-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre> 90 <div class="inline-grid alignItemsBaseline columns flex-rows"> 91 <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="55" data-expected-width="100" data-expected-height="75">É</div> 92 <div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 93 <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="95" data-expected-width="200" data-expected-height="25"></div> 94 </div> 95 96 <pre>max-flex-sized rows - horizonal grid and verticalLR item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre> 97 <!-- https://github.com/w3c/csswg-drafts/issues/3046 --> 98 <div class="inline-grid alignItemsBaseline columns auto-rows"> 99 <div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="55" data-expected-width="100" data-expected-height="75">É</div> 100 <div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="95">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 101 <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="95" data-expected-width="200" data-expected-height="25"></div> 102 </div> 103 104 <pre>auto-sized columns - horizontal grid item - row-axis baseline</pre> 105 <div class="inline-grid justifyItemsBaseline rows width200"> 106 <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> 107 <div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 108 <div class="firstRowSpanning2AutoColumn width25" data-offset-x="175" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 109 </div> 110 111 <pre>min-content-sized columns - horizontal grid item - row-axis baseline</pre> 112 <div class="inline-grid justifyItemsBaseline rows min-content-columns"> 113 <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> 114 <div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 115 <div class="firstRowSpanning2AutoColumn width25" data-offset-x="95" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 116 </div> 117 118 <pre>max-content-sized columns - horizontal grid item - row-axis baseline</pre> 119 <div class="inline-grid justifyItemsBaseline rows max-content-columns"> 120 <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> 121 <div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 122 <div class="firstRowSpanning2AutoColumn width25" data-offset-x="425" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 123 </div> 124 125 <pre>fit-content-sized columns - horizontal grid item - row-axis baseline</pre> 126 <div class="inline-grid justifyItemsBaseline rows fit-content-columns"> 127 <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> 128 <div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 129 <div class="firstRowSpanning2AutoColumn width25" data-offset-x="425" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 130 </div> 131 132 <pre>flex-sized columns - horizontal grid item - row-axis baseline</pre> 133 <div class="inline-grid justifyItemsBaseline rows flex-columns"> 134 <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> 135 <div class="secondRowFirstColumn" data-offset-x="35" data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 136 <div class="firstRowSpanning2AutoColumn width25" data-offset-x="425" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 137 </div> 138 139 <pre>max-flex-sized columns - horizontal grid item - row-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre> 140 <!-- https://github.com/w3c/csswg-drafts/issues/3046 --> 141 <div class="inline-grid justifyItemsBaseline auto-rows max-flex-columns"> 142 <div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div> 143 <div class="secondRowFirstColumn verticalLR" data-offset-x="32" data-offset-y="50" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 144 <div class="firstRowSpanning2AutoColumn width25" data-offset-x="107" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div> 145 </div> 146 147 <pre>auto-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre> 148 <div class="inline-grid verticalLR alignItemsBaseline columns width200"> 149 <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> 150 <div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 151 <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="175" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 152 </div> 153 154 <pre>min-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre> 155 <div class="inline-grid verticalLR alignItemsBaseline columns min-content-rows"> 156 <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> 157 <div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 158 <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="95" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 159 </div> 160 161 <pre>max-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre> 162 <div class="inline-grid verticalLR alignItemsBaseline columns max-content-rows"> 163 <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> 164 <div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 165 <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="425" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 166 </div> 167 168 <pre>fit-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre> 169 <div class="inline-grid verticalLR alignItemsBaseline columns fit-content-rows"> 170 <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> 171 <div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 172 <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="425" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 173 </div> 174 175 <pre>flex-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre> 176 <div class="inline-grid verticalLR alignItemsBaseline columns flex-rows"> 177 <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> 178 <div class="firstRowSecondColumn horizontalTB" data-offset-x="35" data-offset-y="100" data-expected-width="390" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 179 <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="425" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 180 </div> 181 182 <pre>max-flex-sized rows - verticalLR grid and horizontal item - column-axis baseline<br>baseline is not applied initially, but orthogonal items force repeating the track sizing and height is not indefinite in that phase.</pre> 183 <!-- https://github.com/w3c/csswg-drafts/issues/3046 --> 184 <div class="inline-grid verticalLR alignItemsBaseline auto-columns max-flex-rows"> 185 <div class="firstRowFirstColumn bigFont" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">É</div> 186 <div class="firstRowSecondColumn horizontalBT" data-offset-x="7" data-offset-y="50" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 187 <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="82" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div> 188 </div> 189 190 <pre>auto-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre> 191 <pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre> 192 <div class="inline-grid verticalRL alignItemsBaseline columns width200"> 193 <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="30" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> 194 <div class="firstRowSecondColumn horizontalTB" data-offset-x="65" data-offset-y="100" data-expected-width="135" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 195 <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="40" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 196 </div> 197 198 <pre>min-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre> 199 <pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre> 200 <div class="inline-grid verticalRL alignItemsBaseline columns min-content-rows"> 201 <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> 202 <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 203 <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 204 </div> 205 206 <pre>max-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre> 207 <pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre> 208 <div class="inline-grid verticalRL alignItemsBaseline columns max-content-rows"> 209 <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div> 210 <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 211 <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 212 </div> 213 214 <pre>fit-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre> 215 <pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre> 216 <div class="inline-grid verticalRL alignItemsBaseline auto-columns fit-content-rows"> 217 <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div> 218 <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 219 <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div> 220 </div> 221 222 <pre>flex-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre> 223 <pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre> 224 <div class="inline-grid verticalRL alignItemsBaseline auto-columns flex-rows"> 225 <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div> 226 <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 227 <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div> 228 </div> 229 230 <pre>max-flex-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre> 231 <pre>baseline alignment is not supported, because the RL items do not share an alignment context with the LR items</pre> 232 <div class="inline-grid verticalRL alignItemsBaseline auto-columns max-flex-rows"> 233 <div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="-10" data-offset-y="0" data-expected-width="75" data-expected-height="50">É</div> 234 <div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="50" data-expected-width="95" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 235 <div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div> 236 </div> 237 238 </body>