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