OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
5 <link href="resources/grid-alignment.css" rel="stylesheet"> | 5 <link href="resources/grid-alignment.css" rel="stylesheet"> |
6 <script src="../../resources/check-layout.js"></script> | 6 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
7 <style> | 7 <style> |
8 body { | 8 body { |
9 margin: 0; | 9 margin: 0; |
10 } | 10 } |
| 11 .container { |
| 12 position: relative; |
| 13 float: left; |
| 14 } |
| 15 |
| 16 .title { |
| 17 } |
11 | 18 |
12 .grid { | 19 .grid { |
13 grid-template-columns: 50px 50px; | 20 grid-template-columns: 50px 50px; |
14 grid-template-rows: 100px 100px; | 21 grid-template-rows: 100px 100px; |
15 } | 22 } |
16 | 23 |
| 24 .contentSizedTracks { |
| 25 grid-template: max-content 100px / max-content 50px; |
| 26 } |
| 27 |
17 .overflowWidth { | 28 .overflowWidth { |
18 width: 60px; | 29 width: 60px; |
19 height: 300px; | 30 height: 300px; |
20 } | 31 } |
21 | 32 |
22 .overflowHeight { | 33 .overflowHeight { |
23 width: 200px; | 34 width: 200px; |
24 height: 150px; | 35 height: 150px; |
25 } | 36 } |
| 37 |
| 38 .item1 { |
| 39 width: 50px; |
| 40 height: 150px; |
| 41 } |
| 42 .item2 { |
| 43 width: 150px; |
| 44 height: 100px; |
| 45 } |
| 46 |
| 47 .minSize { |
| 48 min-width: 300px; |
| 49 min-height: 400px; |
| 50 } |
| 51 .maxSize { |
| 52 max-width: 100px; |
| 53 max-height: 100px; |
| 54 } |
26 </style> | 55 </style> |
| 56 <script src="../../resources/testharness.js"></script> |
| 57 <script src="../../resources/testharnessreport.js"></script> |
| 58 <script src="../../resources/check-layout-th.js"></script> |
27 </head> | 59 </head> |
28 <body onload="checkLayout('.grid')"> | 60 <body onload="checkLayout('.grid')"> |
29 | 61 |
30 <p>This test checks that the 'overflow' keyword is applied correctly for Content
Alignment properties.</p> | 62 <p>This test checks that the 'overflow' keyword is applied correctly for Content
Alignment properties.</p> |
31 | 63 |
32 <div style="position: relative"> | 64 <div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
33 <div class="grid overflowWidth contentCenter" data-expected-width="60" data-
expected-height="300"> | 65 <div class="grid overflowWidth contentCenter" data-expected-width="60" data-
expected-height="300"> |
34 <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50"
data-expected-width="50" data-expected-height="100"></div> | 66 <div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50"
data-expected-width="50" data-expected-height="100"></div> |
35 <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150
" data-expected-width="50" data-expected-height="100"></div> | 67 <div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150
" data-expected-width="50" data-expected-height="100"></div> |
36 <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50"
data-expected-width="50" data-expected-height="100"></div> | 68 <div class="firstRowSecondColumn" data-offset-x="30" data-offset-y="50"
data-expected-width="50" data-expected-height="100"></div> |
37 <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150
" data-expected-width="50" data-expected-height="100"></div> | 69 <div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150
" data-expected-width="50" data-expected-height="100"></div> |
38 </div> | 70 </div> |
39 </div> | 71 </div> |
| 72 <div class="title">Grid container width of 60px not enough for 2 column tracks o
f 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>default<
/b></div> |
40 | 73 |
41 <div style="position: relative"> | 74 <br clear="all"> |
| 75 |
| 76 <div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
42 <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="20
0" data-expected-height="150"> | 77 <div class="grid overflowHeight contentCenterUnsafe" data-expected-width="20
0" data-expected-height="150"> |
43 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25"
data-expected-width="50" data-expected-height="100"></div> | 78 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25"
data-expected-width="50" data-expected-height="100"></div> |
44 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75"
data-expected-width="50" data-expected-height="100"></div> | 79 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75"
data-expected-width="50" data-expected-height="100"></div> |
45 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25
" data-expected-width="50" data-expected-height="100"></div> | 80 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="-25
" data-expected-width="50" data-expected-height="100"></div> |
46 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75
" data-expected-width="50" data-expected-height="100"></div> | 81 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75
" data-expected-width="50" data-expected-height="100"></div> |
47 </div> | 82 </div> |
48 </div> | 83 </div> |
| 84 <div class="title">Grid container height of 150px not enough for 2 row tracks of
100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</
b></div> |
49 | 85 |
50 <div style="position: relative"> | 86 <br clear="all"> |
| 87 |
| 88 <div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
51 <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" d
ata-expected-height="300"> | 89 <div class="grid overflowWidth contentCenterSafe" data-expected-width="60" d
ata-expected-height="300"> |
52 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" da
ta-expected-width="50" data-expected-height="100"></div> | 90 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" da
ta-expected-width="50" data-expected-height="100"></div> |
53 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150"
data-expected-width="50" data-expected-height="100"></div> | 91 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150"
data-expected-width="50" data-expected-height="100"></div> |
54 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50"
data-expected-width="50" data-expected-height="100"></div> | 92 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="50"
data-expected-width="50" data-expected-height="100"></div> |
55 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="150
" data-expected-width="50" data-expected-height="100"></div> | 93 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="150
" data-expected-width="50" data-expected-height="100"></div> |
56 </div> | 94 </div> |
57 </div> | 95 </div> |
| 96 <div class="title">Grid container width of 60px not enough for 2 column tracks o
f 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b>
</div> |
58 | 97 |
59 <div style="position: relative"> | 98 <br clear="all"> |
| 99 |
| 100 <div class="container" style="margin-bottom: 75px; margin-right: 25px;"> |
60 <div class="grid overflowHeight contentCenterSafe" data-expected-width="200"
data-expected-height="150"> | 101 <div class="grid overflowHeight contentCenterSafe" data-expected-width="200"
data-expected-height="150"> |
61 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" da
ta-expected-width="50" data-expected-height="100"></div> | 102 <div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" da
ta-expected-width="50" data-expected-height="100"></div> |
62 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | 103 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> |
63 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0"
data-expected-width="50" data-expected-height="100"></div> | 104 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0"
data-expected-width="50" data-expected-height="100"></div> |
64 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="10
0" data-expected-width="50" data-expected-height="100"></div> | 105 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="10
0" data-expected-width="50" data-expected-height="100"></div> |
65 </div> | 106 </div> |
66 </div> | 107 </div> |
| 108 <div class="title">Grid container height of 150px not enough for 2 row tracks of
100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b>
</div> |
67 | 109 |
68 <div style="position: relative"> | 110 <br clear="all"> |
| 111 |
| 112 <div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
69 <div class="grid overflowWidth contentEnd" data-expected-width="60" data-exp
ected-height="300"> | 113 <div class="grid overflowWidth contentEnd" data-expected-width="60" data-exp
ected-height="300"> |
70 <div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | 114 <div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> |
71 <div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200
" data-expected-width="50" data-expected-height="100"></div> | 115 <div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200
" data-expected-width="50" data-expected-height="100"></div> |
72 <div class="firstRowSecondColumn" data-offset-x="10" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | 116 <div class="firstRowSecondColumn" data-offset-x="10" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> |
73 <div class="secondRowSecondColumn" data-offset-x="10" data-offset-y="200
" data-expected-width="50" data-expected-height="100"></div> | 117 <div class="secondRowSecondColumn" data-offset-x="10" data-offset-y="200
" data-expected-width="50" data-expected-height="100"></div> |
74 </div> | 118 </div> |
75 </div> | 119 </div> |
| 120 <div class="title">Grid container width of 60px not enough for 2 column tracks o
f 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>default</b>
</div> |
76 | 121 |
77 <div style="position: relative"> | 122 <br clear="all"> |
| 123 |
| 124 <div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
78 <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200"
data-expected-height="150"> | 125 <div class="grid overflowHeight contentEndUnsafe" data-expected-width="200"
data-expected-height="150"> |
79 <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50"
data-expected-width="50" data-expected-height="100"></div> | 126 <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50"
data-expected-width="50" data-expected-height="100"></div> |
80 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50"
data-expected-width="50" data-expected-height="100"></div> | 127 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50"
data-expected-width="50" data-expected-height="100"></div> |
81 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="-50
" data-expected-width="50" data-expected-height="100"></div> | 128 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="-50
" data-expected-width="50" data-expected-height="100"></div> |
82 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="50
" data-expected-width="50" data-expected-height="100"></div> | 129 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="50
" data-expected-width="50" data-expected-height="100"></div> |
83 </div> | 130 </div> |
84 </div> | 131 </div> |
| 132 <div class="title">Grid container height of 150px not enough for 2 row tracks of
100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b><
/div> |
85 | 133 |
86 <div style="position: relative"> | 134 <br clear="all"> |
| 135 |
| 136 <div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
87 <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data
-expected-height="300"> | 137 <div class="grid overflowWidth contentEndSafe" data-expected-width="60" data
-expected-height="300"> |
88 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" d
ata-expected-width="50" data-expected-height="100"></div> | 138 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" d
ata-expected-width="50" data-expected-height="100"></div> |
89 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200"
data-expected-width="50" data-expected-height="100"></div> | 139 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200"
data-expected-width="50" data-expected-height="100"></div> |
90 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> | 140 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> |
91 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="200
" data-expected-width="50" data-expected-height="100"></div> | 141 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="200
" data-expected-width="50" data-expected-height="100"></div> |
92 </div> | 142 </div> |
93 </div> | 143 </div> |
| 144 <div class="title">Grid container width of 60px not enough for 2 column tracks o
f 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></d
iv> |
94 | 145 |
95 <div style="position: relative"> | 146 <br clear="all"> |
| 147 |
| 148 <div class="container" style="margin-bottom: 75px; margin-right: 25px;"> |
96 <div class="grid overflowHeight contentEndSafe" data-expected-width="200" da
ta-expected-height="150"> | 149 <div class="grid overflowHeight contentEndSafe" data-expected-width="200" da
ta-expected-height="150"> |
97 <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> | 150 <div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> |
98 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100
" data-expected-width="50" data-expected-height="100"></div> | 151 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100
" data-expected-width="50" data-expected-height="100"></div> |
99 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0"
data-expected-width="50" data-expected-height="100"></div> | 152 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0"
data-expected-width="50" data-expected-height="100"></div> |
100 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="10
0" data-expected-width="50" data-expected-height="100"></div> | 153 <div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="10
0" data-expected-width="50" data-expected-height="100"></div> |
101 </div> | 154 </div> |
102 </div> | 155 </div> |
| 156 <div class="title">Grid container height of 150px not enough for 2 row tracks of
100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></d
iv> |
| 157 |
| 158 <br clear="all"> |
| 159 |
| 160 <div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
| 161 <div class="grid fit-content contentEndUnsafe" data-expected-width="100" dat
a-expected-height="200"> |
| 162 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="50" data-expected-height="100"></div> |
| 163 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> |
| 164 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> |
| 165 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100
" data-expected-width="50" data-expected-height="100"></div> |
| 166 </div> |
| 167 </div> |
| 168 <div clas="title">Grid container indefinite size using fit-content, hence no pos
sible overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>uns
afe</b></div> |
| 169 |
| 170 <br clear="all"> |
| 171 |
| 172 <div class="container" style="margin-bottom: 200px; margin-right: 25px;"> |
| 173 <div class="grid fit-content contentCenterUnsafe" data-expected-width="100"
data-expected-height="200"> |
| 174 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat
a-expected-width="50" data-expected-height="100"></div> |
| 175 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100"
data-expected-width="50" data-expected-height="100"></div> |
| 176 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d
ata-expected-width="50" data-expected-height="100"></div> |
| 177 <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100
" data-expected-width="50" data-expected-height="100"></div> |
| 178 </div> |
| 179 </div> |
| 180 <div class="title">Grid container indefinite size using fit-content, hence no po
ssible overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b
>unsafe</b></div> |
| 181 |
| 182 <br clear="all"> |
| 183 |
| 184 <div class="container" style="margin-bottom: 100px; margin-right: 25px;"> |
| 185 <div class="grid contentSizedTracks fit-content maxSize contentEndUnsafe" da
ta-expected-width="100" data-expected-height="100"> |
| 186 <div class="item1 firstRowSecondColumn" data-offset-x="50" data-offset-y
="-150" data-expected-width="50" data-expected-height="150"></div> |
| 187 <div class="item2 secondRowFirstColumn" data-offset-x="-100" data-offset
-y="0" data-expected-width="150" data-expected-height="100"></div> |
| 188 </div> |
| 189 </div> |
| 190 <div class="title">Grid container indefinite size using fit-content, but max-siz
e constraints implies that the content-sized tracks overflow.<br> Content-Alignm
ent: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div> |
| 191 |
| 192 <br clear="all"> |
| 193 |
| 194 <div class="container" style="margin-bottom: 100px; margin-right: 75px;"> |
| 195 <div class="grid contentSizedTracks fit-content maxSize contentCenterUnsafe"
data-expected-width="100" data-expected-height="100"> |
| 196 <div class="item1 firstRowSecondColumn" data-offset-x="100" data-offset-
y="-75" data-expected-width="50" data-expected-height="150"></div> |
| 197 <div class="item2 secondRowFirstColumn" data-offset-x="-50" data-offset-
y="75" data-expected-width="150" data-expected-height="100"></div> |
| 198 </div> |
| 199 </div> |
| 200 <div class="title">Grid container indefinite size using fit-content, but max-siz
e constraints implies that the content-sized tracks overflow.<br> Content-Alignm
ent: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div> |
| 201 |
| 202 <br clear="all"> |
| 203 |
| 204 <div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
| 205 <div class="grid contentSizedTracks fit-content minSize contentEndUnsafe" da
ta-expected-width="300" data-expected-height="400"> |
| 206 <div class="item1 firstRowSecondColumn" data-offset-x="250" data-offset-
y="150" data-expected-width="50" data-expected-height="150"></div> |
| 207 <div class="item2 secondRowFirstColumn" data-offset-x="100" data-offset-
y="300" data-expected-width="150" data-expected-height="100"></div> |
| 208 </div> |
| 209 </div> |
| 210 <div class="title">Grid container indefinite size using fit-content, but min-siz
e constraints implies that the content-sized tracks don't overflow.<br> Content-
Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div> |
| 211 |
| 212 <br clear="all"> |
| 213 |
| 214 <div class="container" style="margin-right: 25px;"> |
| 215 <div class="grid contentSizedTracks fit-content minSize contentCenterUnsafe"
data-expected-width="300" data-expected-height="400"> |
| 216 <div class="item1 firstRowSecondColumn" data-offset-x="200" data-offset-
y="75" data-expected-width="50" data-expected-height="150"></div> |
| 217 <div class="item2 secondRowFirstColumn" data-offset-x="50" data-offset-y
="225" data-expected-width="150" data-expected-height="100"></div> |
| 218 </div> |
| 219 </div> |
| 220 <div class="title">Grid container indefinite size using fit-content, but min-siz
e constraints implies that the content-sized tracks don't overflow.<br> Content-
Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div> |
| 221 |
| 222 <br clear="all"> |
103 | 223 |
104 </body> | 224 </body> |
105 </html> | 225 </html> |
OLD | NEW |