OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 |
| 3 <link href="resources/grid.css" rel="stylesheet"> |
| 4 <style> |
| 5 |
| 6 .grid { |
| 7 border: 2px solid magenta; |
| 8 width: 200px; |
| 9 position: relative; |
| 10 justify-content: start; |
| 11 grid-auto-columns: 157px; |
| 12 grid-auto-rows: 25px; |
| 13 } |
| 14 |
| 15 .gridOnlyAutoRepeat { grid-template-columns: repeat(auto-fill, 30px [autobar]);
} |
| 16 .gridAutoRepeatAndFixedBefore { grid-template-columns: 10px [foo] 20% [bar] repe
at(auto-fill, [autofoo] 35px); } |
| 17 .gridAutoRepeatAndFixedAfter { grid-template-columns: repeat(auto-fill, [first]
30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); } |
| 18 .gridAutoRepeatAndFixed { grid-template-columns: [start] repeat(2, 50px [a]) [mi
ddle] repeat(auto-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; } |
| 19 .gridMultipleNames { grid-template-columns: [start] 20px [foo] 50% repeat(auto-f
ill, [bar] 20px [start foo]) [foo] 10% [end bar]; } |
| 20 |
| 21 .item { background-color: cyan; } |
| 22 |
| 23 .gap { grid-column-gap: 20px; } |
| 24 |
| 25 </style> |
| 26 |
| 27 <script src="../../resources/testharness.js"></script> |
| 28 <script src="../../resources/testharnessreport.js"></script> |
| 29 <script src="../../resources/check-layout-th.js"></script> |
| 30 |
| 31 <body onload="checkLayout('.grid')"> |
| 32 <div id="log"></div> |
| 33 |
| 34 <p>This test checks that repeat(auto-fill, ) syntax works as expected.</p> |
| 35 |
| 36 <div class="grid gridOnlyAutoRepeat"> |
| 37 <div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-off
set-y="0" data-expected-width="180" data-expected-height="25"></div> |
| 38 </div> |
| 39 |
| 40 <div class="grid gridOnlyAutoRepeat"> |
| 41 <div class="item" style="grid-column: 1 / span 6 autobar" data-offset-x="0"
data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> |
| 42 </div> |
| 43 |
| 44 <div class="grid gridOnlyAutoRepeat gap"> |
| 45 <div class="item" style="grid-column: 1 / span 5" data-offset-x="0" data-off
set-y="0" data-expected-width="357" data-expected-height="25"></div> |
| 46 </div> |
| 47 |
| 48 <div class="grid gridOnlyAutoRepeat gap"> |
| 49 <div class="item" style="grid-column: autobar 2 / span 3" data-offset-x="100
" data-offset-y="0" data-expected-width="257" data-expected-height="25"></div> |
| 50 </div> |
| 51 |
| 52 <div class="grid gridAutoRepeatAndFixedBefore"> |
| 53 <div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-off
set-y="0" data-expected-width="190" data-expected-height="25"></div> |
| 54 </div> |
| 55 |
| 56 <div class="grid gridAutoRepeatAndFixedBefore"> |
| 57 <div class="item" style="grid-column: foo / autofoo" data-offset-x="10" data
-offset-y="0" data-expected-width="40" data-expected-height="25"></div> |
| 58 </div> |
| 59 |
| 60 <div class="grid gridAutoRepeatAndFixedBefore"> |
| 61 <div class="item" style="grid-column: bar / 5 autofoo" data-offset-x="50" da
ta-offset-y="0" data-expected-width="297" data-expected-height="25"></div> |
| 62 </div> |
| 63 |
| 64 <div class="grid gridAutoRepeatAndFixedBefore gap"> |
| 65 <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-off
set-y="0" data-expected-width="180" data-expected-height="25"></div> |
| 66 </div> |
| 67 |
| 68 <div class="grid gridAutoRepeatAndFixedBefore gap"> |
| 69 <div class="item" style="grid-column: span 3 / 2 autofoo" data-offset-x="0"
data-offset-y="0" data-expected-width="125" data-expected-height="25"></div> |
| 70 </div> |
| 71 |
| 72 <div class="grid gridAutoRepeatAndFixedBefore gap"> |
| 73 <div class="item" style="grid-column: notPresent / 3 autofoo" data-offset-x=
"377" data-offset-y="0" data-expected-width="157" data-expected-height="25"></di
v> |
| 74 </div> |
| 75 |
| 76 <div class="grid gridAutoRepeatAndFixedAfter"> |
| 77 <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-off
set-y="0" data-expected-width="185" data-expected-height="25"></div> |
| 78 </div> |
| 79 |
| 80 <div class="grid gridAutoRepeatAndFixedAfter"> |
| 81 <div class="item" style="grid-column: first / last 2" data-offset-x="0" data
-offset-y="0" data-expected-width="60" data-expected-height="25"></div> |
| 82 </div> |
| 83 |
| 84 <div class="grid gridAutoRepeatAndFixedAfter"> |
| 85 <div class="item" style="grid-column: last 2 / foo" data-offset-x="60" data-
offset-y="0" data-expected-width="80" data-expected-height="25"></div> |
| 86 </div> |
| 87 |
| 88 <div class="grid gridAutoRepeatAndFixedAfter gap"> |
| 89 <div class="item" style="grid-column: 1 / span 3" data-offset-x="0" data-off
set-y="0" data-expected-width="195" data-expected-height="25"></div> |
| 90 </div> |
| 91 |
| 92 <div class="grid gridAutoRepeatAndFixedAfter gap"> |
| 93 <div class="item" style="grid-column: 3 / span 1 bar" data-offset-x="130" da
ta-offset-y="0" data-expected-width="222" data-expected-height="25"></div> |
| 94 </div> |
| 95 |
| 96 <div class="grid gridAutoRepeatAndFixedAfter gap"> |
| 97 <div class="item" style="grid-column: first / foo" data-offset-x="0" data-of
fset-y="0" data-expected-width="30" data-expected-height="25"></div> |
| 98 </div> |
| 99 |
| 100 <div class="grid gridAutoRepeatAndFixed"> |
| 101 <div class="item" style="grid-column: 1 / span 8" data-offset-x="0" data-off
set-y="0" data-expected-width="195" data-expected-height="25"></div> |
| 102 </div> |
| 103 |
| 104 <div class="grid gridAutoRepeatAndFixed"> |
| 105 <div class="item" style="grid-column: a / autobar 2" data-offset-x="50" data
-offset-y="0" data-expected-width="80" data-expected-height="25"></div> |
| 106 </div> |
| 107 |
| 108 <div class="grid gridAutoRepeatAndFixed"> |
| 109 <div class="item" style="grid-column: autofoo / end" data-offset-x="100" dat
a-offset-y="0" data-expected-width="95" data-expected-height="25"></div> |
| 110 </div> |
| 111 |
| 112 <div class="grid gridAutoRepeatAndFixed gap"> |
| 113 <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-of
fset-y="0" data-expected-width="195" data-expected-height="25"></div> |
| 114 </div> |
| 115 |
| 116 <div class="grid gridAutoRepeatAndFixed gap"> |
| 117 <div class="item" style="grid-column: autobar / -1" data-offset-x="175" dat
a-offset-y="0" data-expected-width="20" data-expected-height="25"></div> |
| 118 </div> |
| 119 |
| 120 <div class="grid gridMultipleNames"> |
| 121 <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset
-y="0" data-expected-width="200" data-expected-height="25"></div> |
| 122 </div> |
| 123 |
| 124 <div class="grid gridMultipleNames"> |
| 125 <div class="item" style="grid-column: foo 3 / 4 bar" data-offset-x="160" da
ta-offset-y="0" data-expected-width="40" data-expected-height="25"></div> |
| 126 </div> |
| 127 |
| 128 <div class="grid gridMultipleNames"> |
| 129 <div class="item" style="grid-column: -6 / span 2 start" data-offset-x="20"
data-offset-y="0" data-expected-width="140" data-expected-height="25"></div> |
| 130 </div> |
| 131 |
| 132 <div class="grid gridMultipleNames gap"> |
| 133 <div class="item" style="grid-column: -4 / -2" data-offset-x="40" data-offs
et-y="0" data-expected-width="140" data-expected-height="25"></div> |
| 134 </div> |
| 135 |
| 136 <div class="grid gridMultipleNames gap"> |
| 137 <div class="item" style="grid-column: bar / foo 2" data-offset-x="160" data
-offset-y="0" data-expected-width="20" data-expected-height="25"></div> |
| 138 </div> |
| 139 |
| 140 <div class="grid gridMultipleNames gap"> |
| 141 <div class="item" style="grid-column: foo / bar 2" data-offset-x="40" data-
offset-y="0" data-expected-width="180" data-expected-height="25"></div> |
| 142 </div> |
| 143 |
| 144 </body> |
OLD | NEW |