grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html (11122B)
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 .min-content-rows { grid-template-rows: min-content; } 30 .max-content-rows { grid-template-rows: max-content; } 31 .fit-content-rows { grid-template-rows: fit-content; } 32 33 .flex-columns { grid-template-columns: 1fr; } 34 .max-flex-columns { grid-template-columns: minmax(0px, 1fr); } 35 .flex-rows { grid-template-rows: 1fr; } 36 .max-flex-rows { grid-template-rows: minmax(0px, 1fr); } 37 .auto-rows { grid-template-rows: auto 100px; } 38 39 .height25 { height: 25px; } 40 .height50 { height: 50px; } 41 .height200 { height: 200px; } 42 .width25 { width: 25px; } 43 .width50 { width: 50px; } 44 .width200 { width: 200px; } 45 46 .height200Percent { height: 200%; } 47 .width200Percent { width: 200%; } 48 </style> 49 <script src="/resources/testharness.js"></script> 50 <script src="/resources/testharnessreport.js"></script> 51 <script src="/resources/check-layout-th.js"></script> 52 <script type="text/javascript"> 53 setup({ explicit_done: true }); 54 </script> 55 <body onload="document.fonts.ready.then(() => { checkLayout('.inline-grid'); })"> 56 <!-- 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. --> 57 <div style="height: 125px"> 58 <pre>auto-sized rows - items with relative height</pre> 59 <div class="inline-grid alignItemsBaseline columns"> 60 <div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> 61 <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> 62 <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div> 63 </div> 64 </div> 65 66 <div style="height: 200px"> 67 <pre>min-content-sized rows - items with relative height</pre> 68 <div class="inline-grid alignItemsBaseline columns min-content-rows"> 69 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 70 <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div> 71 <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="75" data-expected-width="200" data-expected-height="25"></div> 72 </div> 73 </div> 74 75 <div style="height: 200px"> 76 <pre>max-content-sized rows - items with relative height</pre> 77 <div class="inline-grid alignItemsBaseline columns max-content-rows"> 78 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 79 <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div> 80 <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="75" data-expected-width="200" data-expected-height="25"></div> 81 </div> 82 </div> 83 84 <div style="height: 200px"> 85 <pre>fit-content-sized rows - items with relative height</pre> 86 <div class="inline-grid alignItemsBaseline columns fit-content-rows"> 87 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 88 <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div> 89 <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="75" data-expected-width="200" data-expected-height="25"></div> 90 </div> 91 </div> 92 93 <div style="height: 125px"> 94 <pre>flexible-sized rows - items with relative height</pre> 95 <div class="inline-grid alignItemsBaseline columns flex-rows"> 96 <div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> 97 <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> 98 <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div> 99 </div> 100 </div> 101 102 <div style="height: 125px"> 103 <pre>flex max-function rows - items with relative height</pre> 104 <div class="inline-grid alignItemsBaseline columns max-flex-rows"> 105 <div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> 106 <div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> 107 <div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div> 108 </div> 109 </div> 110 111 <div style="height: 250px"> 112 <pre>auto-sized columns - items with relative width</pre> 113 <div class="inline-grid justifyItemsBaseline rows"> 114 <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> 115 <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 116 <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 117 </div> 118 </div> 119 120 <div style="height: 250px"> 121 <pre>min-content-sized columns - items with relative width</pre> 122 <div class="inline-grid justifyItemsBaseline rows min-content-columns"> 123 <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 124 <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="150" data-expected-height="100"></div> 125 <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 126 </div> 127 </div> 128 129 <div style="height: 250px"> 130 <pre>max-content-sized columns - items with relative width</pre> 131 <div class="inline-grid justifyItemsBaseline rows max-content-columns"> 132 <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 133 <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="150" data-expected-height="100"></div> 134 <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 135 </div> 136 </div> 137 138 <div style="height: 250px"> 139 <pre>fit-content-sized columns - items with relative width</pre> 140 <div class="inline-grid justifyItemsBaseline rows fit-content-columns"> 141 <div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div> 142 <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="150" data-expected-height="100"></div> 143 <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 144 </div> 145 </div> 146 147 <div style="height: 250px"> 148 <pre>flexible-sized columns - items with relative width</pre> 149 <div class="inline-grid justifyItemsBaseline rows flex-columns"> 150 <div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> 151 <div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> 152 <div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div> 153 </div> 154 </div> 155 156 <div style="height: 250px"> 157 <pre>flex max-function columns - items with relative width<br>baseline is not applied initially, but orthogonal items in an auto-sized row force repeating the track sizing and height is not indefinite in that phase.</pre> 158 <!-- https://github.com/w3c/csswg-drafts/issues/3046 --> 159 <div class="inline-grid justifyItemsBaseline auto-rows max-flex-columns"> 160 <div class="firstRowFirstColumn verticalLR width50 height50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> 161 <div class="secondRowFirstColumn verticalLR width200Percent height50" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> 162 <div class="firstRowSpanning2AutoColumn verticalLR width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="150"></div> 163 </div> 164 </div> 165 166 </body>