OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <link href="resources/grid.css" rel="stylesheet"> |
| 3 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
| 4 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re
l="stylesheet"> |
| 5 <style> |
| 6 body { margin: 0; } |
| 7 .grid { font: 10px/1 Ahem; position: relative; } |
| 8 .widthAuto { width: auto; } |
| 9 .heightAuto { height: auto; } |
| 10 .width400 { width: 400px; } |
| 11 .width200 { width: 200px; } |
| 12 .height200 { height: 200px; } |
| 13 .height100 { height: 100px; } |
| 14 .columns100-100 { grid-template-columns: 100px 100px; } |
| 15 .rows50-50 { grid-template-rows: 50px 50px; } |
| 16 .autoRepeat { grid-template: repeat(auto-fill, 50px) / repeat(auto-fill, 100px);
} |
| 17 .columnGap10Percent { grid-column-gap: 10% } |
| 18 .rowGap20Percent { grid-row-gap: 20% } |
| 19 .positioned { position: absolute; width: 100%; height: 100%; } |
| 20 </style> |
| 21 |
| 22 <script src="../../resources/testharness.js"></script> |
| 23 <script src="../../resources/testharnessreport.js"></script> |
| 24 <script src="../../resources/check-layout-th.js"></script> |
| 25 |
| 26 <body onload="checkLayout('.grid')"> |
| 27 <div id="log"></div> |
| 28 |
| 29 <p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's
'auto' width, which will reduce the available space for tracks; however, they ca
n grow exceeding their content's max-width.</p> |
| 30 <div class="width400"> |
| 31 <div class="grid columnGap10Percent rowGap20Percent" data-expected-width="40
0" data-expected-height="20"> |
| 32 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"
data-expected-width="180" data-expected-height="10">XXX X XX X</div> |
| 33 <div class="firstRowSecondColumn" data-offset-x="220" data-offset-y="0"
data-expected-width="180" data-expected-height="10">XX XXX X X</div> |
| 34 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="10
" data-expected-width="180" data-expected-height="10">X XX XXX X</div> |
| 35 <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="10
" data-expected-width="180" data-expected-height="10">XXXXX X XX</div> |
| 36 </div> |
| 37 </div> |
| 38 |
| 39 <p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's
'instrinsic' width, which reduce the available space for tracks; however, since
we use 'fit-content' intrinsic size, first column's width is reduced and height
increased to let its content to fit.</p> |
| 40 <div class="width400"> |
| 41 <div class="grid fit-content heightAuto columnGap10Percent rowGap20Percent"
data-expected-width="200" data-expected-height="40"> |
| 42 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"
data-expected-width="80" data-expected-height="20">XXX X XX X</div> |
| 43 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0"
data-expected-width="100" data-expected-height="20">XX XXX X X</div> |
| 44 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="20
" data-expected-width="80" data-expected-height="20">X XX XXX X</div> |
| 45 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20
" data-expected-width="100" data-expected-height="20">XXXXX X XX</div> |
| 46 </div> |
| 47 </div> |
| 48 |
| 49 <p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's
'auto' width, which will reduce the available space for tracks; however, they ca
n grow exceeding their content's max-width.</p> |
| 50 <div class="width400"> |
| 51 <div class="grid fit-content widthAuto columnGap10Percent rowGap20Percent" d
ata-expected-width="400" data-expected-height="20"> |
| 52 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"
data-expected-width="180" data-expected-height="10">XXX X XX X</div> |
| 53 <div class="firstRowSecondColumn" data-offset-x="220" data-offset-y="0"
data-expected-width="180" data-expected-height="10">XX XXX X X</div> |
| 54 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="10
" data-expected-width="180" data-expected-height="10">X XX XXX X</div> |
| 55 <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="10
" data-expected-width="180" data-expected-height="10">XXXXX X XX</div> |
| 56 </div> |
| 57 </div> |
| 58 |
| 59 <p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's
'instrinsic' width, which reduce the available space for tracks; however, since
we use 'fit-content' intrinsic size, first column's width is reduced and height
increased to let its content to fit.</p> |
| 60 <div class="width400"> |
| 61 <div class="grid fit-content columnGap10Percent rowGap20Percent" data-expect
ed-width="200" data-expected-height="40"> |
| 62 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"
data-expected-width="80" data-expected-height="20">XXX X XX X</div> |
| 63 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0"
data-expected-width="100" data-expected-height="20">XX XXX X X</div> |
| 64 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="20
" data-expected-width="80" data-expected-height="20">X XX XXX X</div> |
| 65 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20
" data-expected-width="100" data-expected-height="20">XXXXX X XX</div> |
| 66 </div> |
| 67 </div> |
| 68 |
| 69 <p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's
'auto' width, which reduce the available space for tracks; however, they are fix
ed sized and fit.</p> |
| 70 <div class="width400"> |
| 71 <div class="grid columns100-100 rows50-50 columnGap10Percent rowGap20Percen
t" data-expected-width="400" data-expected-height="100"> |
| 72 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="100" data-expected-height="50">XXX X XX X</div> |
| 73 <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0
" data-expected-width="100" data-expected-height="50">XX XXX X X</div> |
| 74 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="5
0" data-expected-width="100" data-expected-height="50">X XX XXX X</div> |
| 75 <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="5
0" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> |
| 76 </div> |
| 77 </div> |
| 78 |
| 79 <p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's
'intrinsic' width, which reduce the available space for tracks; however, they ar
e fixed sized and don't fit so they overflow the grid container.</p> |
| 80 <div class="width400"> |
| 81 <div class="grid fit-content heightAuto columns100-100 rows50-50 columnGap1
0Percent rowGap20Percent" data-expected-width="200" data-expected-height="100"> |
| 82 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="100" data-expected-height="50">XXX X XX X</div> |
| 83 <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0
" data-expected-width="100" data-expected-height="50">XX XXX X X</div> |
| 84 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="5
0" data-expected-width="100" data-expected-height="50">X XX XXX X</div> |
| 85 <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="5
0" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> |
| 86 </div> |
| 87 </div> |
| 88 |
| 89 <p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's
'auto' width, which reduce the available space for tracks; however, they are fix
ed sized and fit.</p> |
| 90 <div class="width400"> |
| 91 <div class="grid fit-content widthAuto columns100-100 rows50-50 columnGap10
Percent rowGap20Percent" data-expected-width="400" data-expected-height="100"> |
| 92 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0
" data-expected-width="100" data-expected-height="50">XXX X XX X</div> |
| 93 <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0
" data-expected-width="100" data-expected-height="50">XX XXX X X</div> |
| 94 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="5
0" data-expected-width="100" data-expected-height="50">X XX XXX X</div> |
| 95 <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="5
0" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> |
| 96 </div> |
| 97 </div> |
| 98 |
| 99 <p>Both row and column gaps are based on definite sizes, but they will reduce th
e available space for tracks; however, since the container's specified inline si
ze is not enough, first column's width is reduced and height increased to let it
s content to fit.</p> |
| 100 <div class="width400"> |
| 101 <div class="grid width200 height100 columnGap10Percent rowGap20Percent" data
-expected-width="200" data-expected-height="100"> |
| 102 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"
data-expected-width="80" data-expected-height="40">XXX X XX X</div> |
| 103 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0"
data-expected-width="100" data-expected-height="40">XX XXX X X</div> |
| 104 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="60
" data-expected-width="80" data-expected-height="40">X XX XXX X</div> |
| 105 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="60
" data-expected-width="100" data-expected-height="40">XXXXX X XX</div> |
| 106 </div> |
| 107 </div> |
| 108 |
| 109 <p>Both row and column gaps are based on definite sizes, but they will reduce th
e available space for tracks; however, they can grow exceeding their content's m
ax-width.</p> |
| 110 <div class="width400"> |
| 111 <div class="grid width400 height200 columnGap10Percent rowGap20Percent" data
-expected-width="400" data-expected-height="200"> |
| 112 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"
data-expected-width="180" data-expected-height="80">XXX X XX X</div> |
| 113 <div class="firstRowSecondColumn" data-offset-x="220" data-offset-y="0"
data-expected-width="180" data-expected-height="80">XX XXX X X</div> |
| 114 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="12
0" data-expected-width="180" data-expected-height="80">X XX XXX X</div> |
| 115 <div class="secondRowSecondColumn" data-offset-x="220" data-offset-y="12
0" data-expected-width="180" data-expected-height="80">XXXXX X XX</div> |
| 116 </div> |
| 117 </div> |
| 118 |
| 119 <p>Both row and column gaps are based on definite sizes, they will reduce the av
ailable space for tracks; however, they are fixed sized and don't fit so they ov
erflow the grid container.</p> |
| 120 <div class="width400"> |
| 121 <div class="grid width200 height100 columns100-100 rows50-50 columnGap10Perc
ent rowGap20Percent" data-expected-width="200" data-expected-height="100"> |
| 122 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"
data-expected-width="100" data-expected-height="50">XXX X XX X</div> |
| 123 <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0"
data-expected-width="100" data-expected-height="50">XX XXX X X</div> |
| 124 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="70
" data-expected-width="100" data-expected-height="50">X XX XXX X</div> |
| 125 <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70
" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> |
| 126 </div> |
| 127 </div> |
| 128 |
| 129 <p>Both row and column gaps are based on definite sizes, they will reduce the av
ailable space for tracks; however, they are fixed sized and fit.</p> |
| 130 <div class="width400"> |
| 131 <div class="grid width400 height200 columns100-100 rows50-50 columnGap10Perc
ent rowGap20Percent" data-expected-width="400" data-expected-height="200"> |
| 132 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"
data-expected-width="100" data-expected-height="50">XXX X XX X</div> |
| 133 <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0"
data-expected-width="100" data-expected-height="50">XX XXX X X</div> |
| 134 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="90
" data-expected-width="100" data-expected-height="50">X XX XXX X</div> |
| 135 <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="90
" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> |
| 136 </div> |
| 137 </div> |
| 138 |
| 139 <p>Height is indefinite, so row gaps should be 0. Column gaps based on a grid's
'instrinsic' width, which reduce the available space for tracks; however, since
we use 'fit-content' intrinsic size, only 1 repeteation is allowed, so tracks ar
e adjusted to fit in the intrinsic size reduced by the gaps.</p> |
| 140 <div class="width400"> |
| 141 <div class="grid fit-content autoRepeat columnGap10Percent rowGap20Percent"
data-expected-width="200" data-expected-height="70"> |
| 142 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"
data-expected-width="100" data-expected-height="50">XXX X XX X</div> |
| 143 <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0"
data-expected-width="80" data-expected-height="50">XX XXX X X</div> |
| 144 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="50
" data-expected-width="100" data-expected-height="20">X XX XXX X</div> |
| 145 <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="50
" data-expected-width="80" data-expected-height="20">XXXXX X XX</div> |
| 146 </div> |
| 147 </div> |
| 148 |
| 149 <p>Both row and column gaps are based on definite sizes, they will reduce the av
ailable space for tracks; however, repeat auto-fill allows all of them to fit.</
p> |
| 150 <div class=""> |
| 151 <div class="grid width400 height200 autoRepeat columnGap10Percent rowGap20Pe
rcent" data-expected-width="400" data-expected-height="200"> |
| 152 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"
data-expected-width="100" data-expected-height="50">XXX X XX X</div> |
| 153 <div class="firstRowSecondColumn" data-offset-x="140" data-offset-y="0"
data-expected-width="100" data-expected-height="50">XX XXX X X</div> |
| 154 <div class="firstRowThirdColumn" data-offset-x="280" data-offset-y="0"
data-expected-width="100" data-expected-height="50">XX XXX X X</div> |
| 155 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="90
" data-expected-width="100" data-expected-height="50">X XX XXX X</div> |
| 156 <div class="secondRowSecondColumn" data-offset-x="140" data-offset-y="90
" data-expected-width="100" data-expected-height="50">XXXXX X XX</div> |
| 157 <div class="secondRowThirdColumn" data-offset-x="280" data-offset-y="90"
data-expected-width="100" data-expected-height="50">XXXXX X XX</div> |
| 158 </div> |
| 159 </div> |
| 160 |
| 161 <p>Both row and column gaps are based on definite sizes, they will reduce the av
ailable space for tracks; however, repeat auto-fill allows only 1 repetition.</p
> |
| 162 <div class=""> |
| 163 <div class="grid width200 height100 autoRepeat columnGap10Percent rowGap20Pe
rcent" data-expected-width="200" data-expected-height="100"> |
| 164 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0"
data-expected-width="100" data-expected-height="50">XXX X XX X</div> |
| 165 <div class="firstRowSecondColumn" data-offset-x="120" data-offset-y="0"
data-expected-width="80" data-expected-height="50">XX XXX X X</div> |
| 166 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="70
" data-expected-width="100" data-expected-height="30">X XX XXX X</div> |
| 167 <div class="secondRowSecondColumn" data-offset-x="120" data-offset-y="70
" data-expected-width="80" data-expected-height="30">XXXXX X XX</div> |
| 168 </div> |
| 169 </div> |
| 170 |
| 171 <p>Grid with positioned items. Height is indefinite, so row gaps should be 0. Co
lumn gaps based on a grid's 'auto' width, which reduce the available space for t
racks; however, they are fixed sized and fit.</p> |
| 172 <div class="width400"> |
| 173 <div class="grid columns100-100 rows50-50 columnGap10Percent rowGap20Percent
" data-expected-width="400" data-expected-height="100"> |
| 174 <div class="positioned onlyFirstRowOnlyFirstColumn" data-offset-x="0"
data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X X
X X</div> |
| 175 <div class="positioned onlyFirstRowOnlySecondColumn" data-offset-x="140
" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX
X X</div> |
| 176 <div class="positioned onlySecondRowOnlyFirstColumn" data-offset-x="0"
data-offset-y="50" data-expected-width="100" data-expected-height="50">X XX XX
X X</div> |
| 177 <div class="positioned onlySecondRowOnlySecondColumn" data-offset-x="140
" data-offset-y="50" data-expected-width="100" data-expected-height="50">XXXXX X
XX</div> |
| 178 </div> |
| 179 </div> |
| 180 |
| 181 <p>Grid with positioned items. Both row and column gaps are based on definite si
zes, they will reduce the available space for tracks; however, they are fixed si
zed and don't fit so they overflow the grid container.</p> |
| 182 <div class=""> |
| 183 <div class="grid width200 height100 columns100-100 rows50-50 columnGap10Perc
ent rowGap20Percent" data-expected-width="200" data-expected-height="100"> |
| 184 <div class="positioned onlyFirstRowOnlyFirstColumn" data-offset-x="0"
data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX X X
X X</div> |
| 185 <div class="positioned onlyFirstRowOnlySecondColumn" data-offset-x="120
" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX XXX
X X</div> |
| 186 <div class="positioned onlySecondRowOnlyFirstColumn" data-offset-x="0"
data-offset-y="70" data-expected-width="100" data-expected-height="50">X XX XX
X X</div> |
| 187 <div class="positioned onlySecondRowOnlySecondColumn" data-offset-x="120
" data-offset-y="70" data-expected-width="100" data-expected-height="50">XXXXX X
XX</div> |
| 188 </div> |
| 189 </div> |
| 190 |
| 191 </body> |
OLD | NEW |