grid-auto-fill-rows-001.html (10664B)
1 <!DOCTYPE html> 2 <title>CSS Grid: auto-fill rows</title> 3 <link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fill"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows"> 7 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows"> 8 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-row"> 9 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-row-gap"> 10 <link rel="help" href="https://crbug.com/619930"> 11 <link rel="help" href="https://crbug.com/589460"> 12 <link rel="help" href="https://crbug.com/648814"> 13 <meta name="assert" content="Check that auto-fill rows are properly computed in a grid container"/> 14 <link href="/css/support/grid.css" rel="stylesheet"> 15 <style> 16 17 .grid { 18 border: 2px solid magenta; 19 height: 200px; 20 width: 25px; 21 align-content: start; 22 grid-auto-rows: 157px; 23 grid-auto-columns: 25px; 24 25 float: left; 26 position: relative; 27 margin-right: 2px; 28 } 29 30 .gridOnlyAutoRepeat { grid-template-rows: repeat(auto-fill, 30px [autobar]); } 31 .gridPercentAutoRepeat { grid-template-rows: repeat(auto-fill, 30%); padding: 13px 0; } 32 .gridMinMaxAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(13px, 30px)); } 33 .gridMaxMinAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(30px, 13px)); } 34 .gridMaxMinPercentAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(30px, 6.5%)); } 35 .gridAutoRepeatAndFixedBefore { grid-template-rows: 10px [foo] 20% [bar] repeat(auto-fill, [autofoo] 35px); } 36 .gridAutoRepeatAndFixedAfter { grid-template-rows: repeat(auto-fill, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); } 37 .gridAutoRepeatAndFixed { grid-template-rows: [start] repeat(2, 50px [a]) [middle] repeat(auto-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; } 38 .gridMultipleNames { grid-template-rows: [start] 20px [foo] 50% repeat(auto-fill, [bar] 20px [start foo]) [foo] 10% [end bar]; } 39 .gridMultipleTracks { grid-template-rows: [start] 20px repeat(auto-fill, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; } 40 41 .item { background: blue; } 42 .item:nth-child(2) { background: green; } 43 .item:nth-child(3) { background: orange; } 44 45 .gap { grid-row-gap: 20px; } 46 </style> 47 48 <script src="/resources/testharness.js"></script> 49 <script src="/resources/testharnessreport.js"></script> 50 <script src="/resources/check-layout-th.js"></script> 51 52 <body onload="checkLayout('.grid')"> 53 <div id="log"></div> 54 55 <p>This test checks that repeat(auto-fill, ) syntax works as expected.</p> 56 57 <div class="grid gridOnlyAutoRepeat"> 58 <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> 59 </div> 60 61 <div class="grid gridPercentAutoRepeat"> 62 <div class="item" style="grid-row: 1 / -1" data-offset-y="13" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> 63 </div> 64 65 <div class="grid gridMinMaxAutoRepeat"> 66 <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> 67 </div> 68 69 <div class="grid gridMaxMinAutoRepeat"> 70 <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> 71 </div> 72 73 <div class="grid gridMaxMinPercentAutoRepeat"> 74 <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> 75 </div> 76 77 <div class="grid gridOnlyAutoRepeat"> 78 <div class="item" style="grid-row: 1 / span 6 autobar" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> 79 </div> 80 81 <div class="grid gridOnlyAutoRepeat gap"> 82 <div class="item" style="grid-row: 1 / span 5" data-offset-y="0" data-offset-x="0" data-expected-height="357" data-expected-width="25"></div> 83 </div> 84 85 <div class="grid gridOnlyAutoRepeat gap"> 86 <div class="item" style="grid-row: autobar 2 / span 3" data-offset-y="100" data-offset-x="0" data-expected-height="257" data-expected-width="25"></div> 87 </div> 88 89 <div class="grid gridOnlyAutoRepeat gap" style="height: auto; max-height: 90px;" data-expected-height="94" data-expected-width="29"> 90 <div class="item" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div> 91 <div class="item" data-offset-y="50" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div> 92 <div class="item" data-offset-y="100" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div> 93 </div> 94 95 <div class="grid gridOnlyAutoRepeat gap" style="height: auto; max-height: 90px; min-height: 130px;" data-expected-height="134" data-expected-width="29"> 96 <div class="item" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div> 97 <div class="item" data-offset-y="50" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div> 98 <div class="item" data-offset-y="100" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div> 99 </div> 100 101 <div class="grid gridAutoRepeatAndFixedBefore"> 102 <div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="190" data-expected-width="25"></div> 103 </div> 104 105 <div class="grid gridAutoRepeatAndFixedBefore"> 106 <div class="item" style="grid-row: foo / autofoo" data-offset-y="10" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div> 107 </div> 108 109 <div class="grid gridAutoRepeatAndFixedBefore"> 110 <div class="item" style="grid-row: bar / 5 autofoo" data-offset-y="50" data-offset-x="0" data-expected-height="297" data-expected-width="25"></div> 111 </div> 112 113 <div class="grid gridAutoRepeatAndFixedBefore gap"> 114 <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> 115 </div> 116 117 <div class="grid gridAutoRepeatAndFixedBefore gap"> 118 <div class="item" style="grid-row: span 3 / 2 autofoo" data-offset-y="0" data-offset-x="0" data-expected-height="125" data-expected-width="25"></div> 119 </div> 120 121 <div class="grid gridAutoRepeatAndFixedBefore gap"> 122 <div class="item" style="grid-row: notPresent / 3 autofoo" data-offset-y="377" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div> 123 </div> 124 125 <div class="grid gridAutoRepeatAndFixedAfter"> 126 <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="185" data-expected-width="25"></div> 127 </div> 128 129 <div class="grid gridAutoRepeatAndFixedAfter"> 130 <div class="item" style="grid-row: first / last 2" data-offset-y="0" data-offset-x="0" data-expected-height="60" data-expected-width="25"></div> 131 </div> 132 133 <div class="grid gridAutoRepeatAndFixedAfter"> 134 <div class="item" style="grid-row: last 2 / foo" data-offset-y="60" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div> 135 </div> 136 137 <div class="grid gridAutoRepeatAndFixedAfter gap"> 138 <div class="item" style="grid-row: 1 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div> 139 </div> 140 141 <div class="grid gridAutoRepeatAndFixedAfter gap"> 142 <div class="item" style="grid-row: 3 / span 1 bar" data-offset-y="130" data-offset-x="0" data-expected-height="222" data-expected-width="25"></div> 143 </div> 144 145 <div class="grid gridAutoRepeatAndFixedAfter gap"> 146 <div class="item" style="grid-row: first / foo" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div> 147 </div> 148 149 <div class="grid gridAutoRepeatAndFixed"> 150 <div class="item" style="grid-row: 1 / span 8" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div> 151 </div> 152 153 <div class="grid gridAutoRepeatAndFixed"> 154 <div class="item" style="grid-row: a / autobar 2" data-offset-y="50" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div> 155 </div> 156 157 <div class="grid gridAutoRepeatAndFixed"> 158 <div class="item" style="grid-row: autofoo / end" data-offset-y="100" data-offset-x="0" data-expected-height="95" data-expected-width="25"></div> 159 </div> 160 161 <div class="grid gridAutoRepeatAndFixed gap"> 162 <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div> 163 </div> 164 165 <div class="grid gridAutoRepeatAndFixed gap"> 166 <div class="item" style="grid-row: autobar / -1" data-offset-y="175" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div> 167 </div> 168 169 <div class="grid gridMultipleNames"> 170 <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="200" data-expected-width="25"></div> 171 </div> 172 173 <div class="grid gridMultipleNames"> 174 <div class="item" style="grid-row: foo 3 / 4 bar" data-offset-y="160" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div> 175 </div> 176 177 <div class="grid gridMultipleNames"> 178 <div class="item" style="grid-row: -6 / span 2 start" data-offset-y="20" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div> 179 </div> 180 181 <div class="grid gridMultipleNames gap"> 182 <div class="item" style="grid-row: -4 / -2" data-offset-y="40" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div> 183 </div> 184 185 <div class="grid gridMultipleNames gap"> 186 <div class="item" style="grid-row: bar / foo 2" data-offset-y="160" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div> 187 </div> 188 189 <div class="grid gridMultipleNames gap"> 190 <div class="item" style="grid-row: foo / bar 2" data-offset-y="40" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> 191 </div> 192 193 <div class="grid gridMultipleTracks"> 194 <div class="item" style="grid-row: a / 2 c" data-offset-y="20" data-offset-x="0" data-expected-height="84" data-expected-width="25"></div> 195 <div class="item" style="grid-row: 3 / e; grid-column: 2;" data-offset-y="52" data-offset-x="25" data-expected-height="72" data-expected-width="25"></div> 196 </div> 197 198 <div class="grid gridMultipleTracks gap"> 199 <div class="item" style="grid-row: a / c" data-offset-y="40" data-offset-x="0" data-expected-height="32" data-expected-width="25"></div> 200 <div class="item" style="grid-row: 3 / last; grid-column: 2;" data-offset-y="92" data-offset-x="25" data-expected-height="115" data-expected-width="25"></div> 201 </div> 202 203 </body>