OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <link href="resources/grid.css" rel="stylesheet"> | 3 <link href="resources/grid.css" rel="stylesheet"> |
4 <style> | 4 <style> |
5 .grid { | 5 .grid { |
6 grid-template-columns: [col] 50px [col] 100px [col] 200px [col]; | 6 grid-template-columns: [col] 50px [col] 100px [col] 200px [col]; |
7 grid-template-rows: [row] 70px [row] 140px [row] 280px [row]; | 7 grid-template-rows: [row] 70px [row] 140px [row] 280px [row]; |
| 8 grid-auto-columns: 5px; |
| 9 grid-auto-rows: 10px; |
8 } | 10 } |
9 .differentNamedGridLines { | 11 .differentNamedGridLines { |
10 grid-template-columns: [col1] 50px [col2] 100px [col3] 200px [col4]; | 12 grid-template-columns: [col1] 50px [col2] 100px [col3] 200px [col4]; |
11 grid-template-rows: [row1] 70px [row2] 140px [row3] 280px [row4]; | 13 grid-template-rows: [row1] 70px [row2] 140px [row3] 280px [row4]; |
12 } | 14 } |
13 </style> | 15 </style> |
14 <script src="../../resources/check-layout.js"></script> | 16 <script src="../../resources/check-layout.js"></script> |
15 <script> | 17 <script> |
16 function testPosition(position, size) | 18 function testPosition(position, size) |
17 { | 19 { |
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
60 testPosition({ 'column': '1 / 2 col', 'row': '1 / 2 row' }, { 'width': '50',
'height': '70' }); | 62 testPosition({ 'column': '1 / 2 col', 'row': '1 / 2 row' }, { 'width': '50',
'height': '70' }); |
61 | 63 |
62 testPosition({ 'column': '1 col / 4', 'row': '1 row / 4' }, { 'width': '350'
, 'height': '490' }); | 64 testPosition({ 'column': '1 col / 4', 'row': '1 row / 4' }, { 'width': '350'
, 'height': '490' }); |
63 testPosition({ 'column': '2 col / 4', 'row': '1 row / 4' }, { 'width': '300'
, 'height': '490' }); | 65 testPosition({ 'column': '2 col / 4', 'row': '1 row / 4' }, { 'width': '300'
, 'height': '490' }); |
64 | 66 |
65 testPosition({ 'column': '2 col / 4', 'row': '2 row / 4' }, { 'width': '300'
, 'height': '420' }); | 67 testPosition({ 'column': '2 col / 4', 'row': '2 row / 4' }, { 'width': '300'
, 'height': '420' }); |
66 testPosition({ 'column': '2 col / 4', 'row': '1 row / 4' }, { 'width': '300'
, 'height': '490' }); | 68 testPosition({ 'column': '2 col / 4', 'row': '1 row / 4' }, { 'width': '300'
, 'height': '490' }); |
67 | 69 |
68 // 4. Named grid lines, changing the name of the grid lines. | 70 // 4. Named grid lines, changing the name of the grid lines. |
69 testPosition({ 'column': '1 / 3 col', 'row': '1 / 2 row' }, { 'width': '150'
, 'height': '70' }); | 71 testPosition({ 'column': '1 / 3 col', 'row': '1 / 2 row' }, { 'width': '150'
, 'height': '70' }); |
70 testPosition({ 'column': '1 / 3 invalid', 'row': '1 / 2 row' }, { 'width': '
50', 'height': '70' }); | 72 testPosition({ 'column': '1 / 3 invalid', 'row': '1 / 2 row' }, { 'width': '
365', 'height': '70' }); |
71 | 73 |
72 testPosition({ 'column': '1 / 4 col', 'row': '1 / 4 invalid' }, { 'width': '
350', 'height': '70' }); | 74 testPosition({ 'column': '1 / 4 col', 'row': '1 / 4 invalid' }, { 'width': '
350', 'height': '530' }); |
73 testPosition({ 'column': '1 / 4 col', 'row': '1 / 4 row' }, { 'width': '350'
, 'height': '490' }); | 75 testPosition({ 'column': '1 / 4 col', 'row': '1 / 4 row' }, { 'width': '350'
, 'height': '490' }); |
74 | 76 |
75 testPosition({ 'column': '2 invalid / 4', 'row': '1 row / 4' }, { 'width': '
350', 'height': '490' }); | 77 testPosition({ 'column': '2 invalid / 4', 'row': '1 row / 4' }, { 'width': '
10', 'height': '490' }); |
76 testPosition({ 'column': '2 col / 4', 'row': '1 row / 4' }, { 'width': '300'
, 'height': '490' }); | 78 testPosition({ 'column': '2 col / 4', 'row': '1 row / 4' }, { 'width': '300'
, 'height': '490' }); |
77 | 79 |
78 testPosition({ 'column': '2 col / 4', 'row': '2 row / 4' }, { 'width': '300'
, 'height': '420' }); | 80 testPosition({ 'column': '2 col / 4', 'row': '2 row / 4' }, { 'width': '300'
, 'height': '420' }); |
79 testPosition({ 'column': '2 col / 4', 'row': '2 invalid / 4' }, { 'width': '
300', 'height': '490' }); | 81 testPosition({ 'column': '2 col / 4', 'row': '2 invalid / 4' }, { 'width': '
300', 'height': '20' }); |
80 | 82 |
81 // 5. Span named grid lines, changing the grid line number. | 83 // 5. Span named grid lines, changing the grid line number. |
82 testPosition({ 'column': '1 / span 3 col', 'row': '1 / span 2 row' }, { 'wid
th': '350', 'height': '210' }); | 84 testPosition({ 'column': '1 / span 3 col', 'row': '1 / span 2 row' }, { 'wid
th': '350', 'height': '210' }); |
83 testPosition({ 'column': '1 / span 2 col', 'row': '1 / span 2 row' }, { 'wid
th': '150', 'height': '210' }); | 85 testPosition({ 'column': '1 / span 2 col', 'row': '1 / span 2 row' }, { 'wid
th': '150', 'height': '210' }); |
84 | 86 |
85 testPosition({ 'column': '2 / span 3 col', 'row': '1 / span 2 row' }, { 'wid
th': '300', 'height': '210' }); | 87 testPosition({ 'column': '2 / span 3 col', 'row': '1 / span 2 row' }, { 'wid
th': '305', 'height': '210' }); |
86 testPosition({ 'column': '2 / span 3 col', 'row': '1 / span 1 row' }, { 'wid
th': '300', 'height': '70' }); | 88 testPosition({ 'column': '2 / span 3 col', 'row': '1 / span 1 row' }, { 'wid
th': '305', 'height': '70' }); |
87 | 89 |
88 testPosition({ 'column': 'span 2 col / 3', 'row': 'span 2 row / 4' }, { 'wid
th': '150', 'height': '420' }); | 90 testPosition({ 'column': 'span 2 col / 3', 'row': 'span 2 row / 4' }, { 'wid
th': '150', 'height': '420' }); |
89 testPosition({ 'column': 'span 1 col / 3', 'row': 'span 2 row / 4' }, { 'wid
th': '100', 'height': '420' }); | 91 testPosition({ 'column': 'span 1 col / 3', 'row': 'span 2 row / 4' }, { 'wid
th': '100', 'height': '420' }); |
90 | 92 |
91 testPosition({ 'column': 'span 2 col / 3', 'row': 'span 2 row / 4' }, { 'wid
th': '150', 'height': '420' }); | 93 testPosition({ 'column': 'span 2 col / 3', 'row': 'span 2 row / 4' }, { 'wid
th': '150', 'height': '420' }); |
92 testPosition({ 'column': 'span 2 col / 3', 'row': 'span 3 row / 4' }, { 'wid
th': '150', 'height': '490' }); | 94 testPosition({ 'column': 'span 2 col / 3', 'row': 'span 3 row / 4' }, { 'wid
th': '150', 'height': '490' }); |
93 | 95 |
94 // Test transition across grid lines types. | 96 // Test transition across grid lines types. |
95 // 1. Explicit <-> spans. | 97 // 1. Explicit <-> spans. |
96 testPosition({ 'column': '1 / 3', 'row': '1 / 2' }, { 'width': '150', 'heigh
t': '70' }); | 98 testPosition({ 'column': '1 / 3', 'row': '1 / 2' }, { 'width': '150', 'heigh
t': '70' }); |
97 testPosition({ 'column': '1 / span 3', 'row': '1 / 2' }, { 'width': '350', '
height': '70' }); | 99 testPosition({ 'column': '1 / span 3', 'row': '1 / 2' }, { 'width': '350', '
height': '70' }); |
98 | 100 |
99 testPosition({ 'column': '1 / 3', 'row': '1 / span 2' }, { 'width': '150', '
height': '210' }); | 101 testPosition({ 'column': '1 / 3', 'row': '1 / span 2' }, { 'width': '150', '
height': '210' }); |
100 testPosition({ 'column': '1 / 3', 'row': '1 / 2' }, { 'width': '150', 'heigh
t': '70' }); | 102 testPosition({ 'column': '1 / 3', 'row': '1 / 2' }, { 'width': '150', 'heigh
t': '70' }); |
101 | 103 |
102 testPosition({ 'column': 'span 1 / 3', 'row': '1 / 2' }, { 'width': '100', '
height': '70' }); | 104 testPosition({ 'column': 'span 1 / 3', 'row': '1 / 2' }, { 'width': '100', '
height': '70' }); |
103 testPosition({ 'column': '1 / 3', 'row': '1 / 2' }, { 'width': '150', 'heigh
t': '70' }); | 105 testPosition({ 'column': '1 / 3', 'row': '1 / 2' }, { 'width': '150', 'heigh
t': '70' }); |
104 | 106 |
105 testPosition({ 'column': '1 / 3', 'row': '1 / 4' }, { 'width': '150', 'heigh
t': '490' }); | 107 testPosition({ 'column': '1 / 3', 'row': '1 / 4' }, { 'width': '150', 'heigh
t': '490' }); |
106 testPosition({ 'column': '1 / 3', 'row': 'span 2 / 4' }, { 'width': '150', '
height': '420' }); | 108 testPosition({ 'column': '1 / 3', 'row': 'span 2 / 4' }, { 'width': '150', '
height': '420' }); |
107 | 109 |
108 // 2. Span <-> named grid lines. | 110 // 2. Span <-> named grid lines. |
109 testPosition({ 'column': '1 / col 3', 'row': '1 / span 4' }, { 'width': '150
', 'height': '490' }); | 111 testPosition({ 'column': '1 / col 3', 'row': '1 / span 4' }, { 'width': '150
', 'height': '500' }); |
110 testPosition({ 'column': '1 / span 3', 'row': '1 / span 4' }, { 'width': '35
0', 'height': '490' }); | 112 testPosition({ 'column': '1 / span 3', 'row': '1 / span 4' }, { 'width': '35
0', 'height': '500' }); |
111 | 113 |
112 testPosition({ 'column': '1 / col 3', 'row': '1 / span 3' }, { 'width': '150
', 'height': '490' }); | 114 testPosition({ 'column': '1 / col 3', 'row': '1 / span 3' }, { 'width': '150
', 'height': '490' }); |
113 testPosition({ 'column': '1 / col 3', 'row': '1 / row 3' }, { 'width': '150'
, 'height': '210' }); | 115 testPosition({ 'column': '1 / col 3', 'row': '1 / row 3' }, { 'width': '150'
, 'height': '210' }); |
114 | 116 |
115 testPosition({ 'column': 'span 1 / 3', 'row': 'span 2 / 4' }, { 'width': '10
0', 'height': '420' }); | 117 testPosition({ 'column': 'span 1 / 3', 'row': 'span 2 / 4' }, { 'width': '10
0', 'height': '420' }); |
116 testPosition({ 'column': '1 col / 3', 'row': 'span 2 / 4' }, { 'width': '150
', 'height': '420' }); | 118 testPosition({ 'column': '1 col / 3', 'row': 'span 2 / 4' }, { 'width': '150
', 'height': '420' }); |
117 | 119 |
118 testPosition({ 'column': 'span 1 / 3', 'row': 'col 1 / 4' }, { 'width': '100
', 'height': '490' }); | 120 testPosition({ 'column': 'span 1 / 3', 'row': 'col 1 / 4' }, { 'width': '100
', 'height': '10' }); |
119 testPosition({ 'column': 'span 1 / 3', 'row': 'span 1 / 4' }, { 'width': '10
0', 'height': '280' }); | 121 testPosition({ 'column': 'span 1 / 3', 'row': 'span 1 / 4' }, { 'width': '10
0', 'height': '280' }); |
120 | 122 |
121 // 3. Named grid lines to span named grid line. | 123 // 3. Named grid lines to span named grid line. |
122 testPosition({ 'column': '1 / col 3', 'row': '1 / span 4' }, { 'width': '150
', 'height': '490' }); | 124 testPosition({ 'column': '1 / col 3', 'row': '1 / span 4' }, { 'width': '150
', 'height': '500' }); |
123 testPosition({ 'column': '1 / span col 3', 'row': '1 / span 4' }, { 'width':
'350', 'height': '490' }); | 125 testPosition({ 'column': '1 / span col 3', 'row': '1 / span 4' }, { 'width':
'350', 'height': '500' }); |
124 | 126 |
125 testPosition({ 'column': '1 / col 3', 'row': '1 / span row 3' }, { 'width':
'150', 'height': '490' }); | 127 testPosition({ 'column': '1 / col 3', 'row': '1 / span row 3' }, { 'width':
'150', 'height': '490' }); |
126 testPosition({ 'column': '1 / col 3', 'row': '1 / row 3' }, { 'width': '150'
, 'height': '210' }); | 128 testPosition({ 'column': '1 / col 3', 'row': '1 / row 3' }, { 'width': '150'
, 'height': '210' }); |
127 | 129 |
128 testPosition({ 'column': 'span col 1 / 3', 'row': 'span 2 / 4' }, { 'width':
'100', 'height': '420' }); | 130 testPosition({ 'column': 'span col 1 / 3', 'row': 'span 2 / 4' }, { 'width':
'100', 'height': '420' }); |
129 testPosition({ 'column': '1 col / 3', 'row': 'span 2 / 4' }, { 'width': '150
', 'height': '420' }); | 131 testPosition({ 'column': '1 col / 3', 'row': 'span 2 / 4' }, { 'width': '150
', 'height': '420' }); |
130 | 132 |
131 testPosition({ 'column': 'span col 1 / 3', 'row': 'col 1 / 4' }, { 'width':
'100', 'height': '490' }); | 133 testPosition({ 'column': 'span col 1 / 3', 'row': 'col 1 / 4' }, { 'width':
'100', 'height': '10' }); |
132 testPosition({ 'column': 'span col 1 / 3', 'row': 'span col 1 / 4' }, { 'wid
th': '100', 'height': '280' }); | 134 testPosition({ 'column': 'span col 1 / 3', 'row': 'span col 1 / 4' }, { 'wid
th': '100', 'height': '500' }); |
133 | 135 |
134 // 4. Explicit <-> named grid lines. | 136 // 4. Explicit <-> named grid lines. |
135 // We need to modify the grid's definitions so that we have explicit and nam
ed grid lines not match anymore. | 137 // We need to modify the grid's definitions so that we have explicit and nam
ed grid lines not match anymore. |
136 var gridElement = document.getElementsByClassName("grid")[0]; | 138 var gridElement = document.getElementsByClassName("grid")[0]; |
137 gridElement.classList.add("differentNamedGridLines"); | 139 gridElement.classList.add("differentNamedGridLines"); |
138 | 140 |
139 testPosition({ 'column': '1 / col4 3', 'row': '1 / 4' }, { 'width': '350', '
height': '490' }); | 141 testPosition({ 'column': '1 / col4 3', 'row': '1 / 4' }, { 'width': '360', '
height': '490' }); |
140 testPosition({ 'column': '1 / 3', 'row': '1 / 4' }, { 'width': '150', 'heigh
t': '490' }); | 142 testPosition({ 'column': '1 / 3', 'row': '1 / 4' }, { 'width': '150', 'heigh
t': '490' }); |
141 | 143 |
142 testPosition({ 'column': '1 / col4 3', 'row': '1 / 4' }, { 'width': '350', '
height': '490' }); | 144 testPosition({ 'column': '1 / col4 3', 'row': '1 / 4' }, { 'width': '360', '
height': '490' }); |
143 testPosition({ 'column': '1 / col4 3', 'row': '1 / row3 4' }, { 'width': '35
0', 'height': '210' }); | 145 testPosition({ 'column': '1 / col4 3', 'row': '1 / row3 4' }, { 'width': '36
0', 'height': '520' }); |
144 | 146 |
145 testPosition({ 'column': 'col2 1 / 4', 'row': '1 row2 / 4' }, { 'width': '30
0', 'height': '420' }); | 147 testPosition({ 'column': 'col2 1 / 4', 'row': '1 row2 / 4' }, { 'width': '30
0', 'height': '420' }); |
146 testPosition({ 'column': '1 / 4', 'row': '1 row2 / 4' }, { 'width': '350', '
height': '420' }); | 148 testPosition({ 'column': '1 / 4', 'row': '1 row2 / 4' }, { 'width': '350', '
height': '420' }); |
147 | 149 |
148 testPosition({ 'column': 'col2 1 / 4', 'row': '1 / 4' }, { 'width': '300', '
height': '490' }); | 150 testPosition({ 'column': 'col2 1 / 4', 'row': '1 / 4' }, { 'width': '300', '
height': '490' }); |
149 testPosition({ 'column': 'col2 1 / 4', 'row': '1 row2 / 4' }, { 'width': '30
0', 'height': '420' }); | 151 testPosition({ 'column': 'col2 1 / 4', 'row': '1 row2 / 4' }, { 'width': '30
0', 'height': '420' }); |
150 | 152 |
151 // 5. Span <-> span named grid lines. | 153 // 5. Span <-> span named grid lines. |
152 testPosition({ 'column': '1 / span col4 2', 'row': '3 / span 1' }, { 'width'
: '350', 'height': '280' }); | 154 testPosition({ 'column': '1 / span col4 2', 'row': '3 / span 1' }, { 'width'
: '355', 'height': '280' }); |
153 testPosition({ 'column': '1 / span 2', 'row': '3 / span 1' }, { 'width': '15
0', 'height': '280' }); | 155 testPosition({ 'column': '1 / span 2', 'row': '3 / span 1' }, { 'width': '15
0', 'height': '280' }); |
154 | 156 |
155 testPosition({ 'column': '1 / span col4 3', 'row': '1 / span 4' }, { 'width'
: '350', 'height': '490' }); | 157 testPosition({ 'column': '1 / span col4 3', 'row': '1 / span 4' }, { 'width'
: '360', 'height': '500' }); |
156 testPosition({ 'column': '1 / span col4 3', 'row': '1 / span row3 4' }, { 'w
idth': '350', 'height': '210' }); | 158 testPosition({ 'column': '1 / span col4 3', 'row': '1 / span row3 4' }, { 'w
idth': '360', 'height': '520' }); |
157 | 159 |
158 testPosition({ 'column': 'span 2 / 4', 'row': 'span 1 / 4' }, { 'width': '30
0', 'height': '280' }); | 160 testPosition({ 'column': 'span 2 / 4', 'row': 'span 1 / 4' }, { 'width': '30
0', 'height': '280' }); |
159 testPosition({ 'column': 'span col1 2 / 4', 'row': 'span 1 / 4' }, { 'width'
: '350', 'height': '280' }); | 161 testPosition({ 'column': 'span col1 2 / 4', 'row': 'span 1 / 4' }, { 'width'
: '355', 'height': '280' }); |
160 | 162 |
161 testPosition({ 'column': 'span 2 / 4', 'row': 'span 1 / 4' }, { 'width': '30
0', 'height': '280' }); | 163 testPosition({ 'column': 'span 2 / 4', 'row': 'span 1 / 4' }, { 'width': '30
0', 'height': '280' }); |
162 testPosition({ 'column': 'span 2 / 4', 'row': 'span row2 1 / 4' }, { 'width'
: '300', 'height': '420' }); | 164 testPosition({ 'column': 'span 2 / 4', 'row': 'span row2 1 / 4' }, { 'width'
: '300', 'height': '420' }); |
163 | 165 |
164 // 6. Explicit to span named grid line. | 166 // 6. Explicit to span named grid line. |
165 testPosition({ 'column': '1 / 2', 'row': '2 / span row3 1' }, { 'width': '50
', 'height': '140' }); | 167 testPosition({ 'column': '1 / 2', 'row': '2 / span row3 1' }, { 'width': '50
', 'height': '140' }); |
166 testPosition({ 'column': '1 / span col3 2', 'row': '2 / span row3 1' }, { 'w
idth': '150', 'height': '140' }); | 168 testPosition({ 'column': '1 / span col3 2', 'row': '2 / span row3 1' }, { 'w
idth': '355', 'height': '140' }); |
167 | 169 |
168 testPosition({ 'column': '1 / 2', 'row': '2 / span row3 4' }, { 'width': '50
', 'height': '140' }); | 170 testPosition({ 'column': '1 / 2', 'row': '2 / span row3 4' }, { 'width': '50
', 'height': '450' }); |
169 testPosition({ 'column': '1 / 2', 'row': '2 / 4' }, { 'width': '50', 'height
': '420' }); | 171 testPosition({ 'column': '1 / 2', 'row': '2 / 4' }, { 'width': '50', 'height
': '420' }); |
170 | 172 |
171 testPosition({ 'column': 'span col2 1 / 4', 'row': 'span row1 3 / 4' }, { 'w
idth': '300', 'height': '490' }); | 173 testPosition({ 'column': 'span col2 1 / 4', 'row': 'span row1 3 / 4' }, { 'w
idth': '300', 'height': '510' }); |
172 testPosition({ 'column': '1 / 4', 'row': 'span row1 3 / 4' }, { 'width': '35
0', 'height': '490' }); | 174 testPosition({ 'column': '1 / 4', 'row': 'span row1 3 / 4' }, { 'width': '35
0', 'height': '510' }); |
173 | 175 |
174 testPosition({ 'column': 'span col2 1 / 4', 'row': 'span row1 3 / 4' }, { 'w
idth': '300', 'height': '490' }); | 176 testPosition({ 'column': 'span col2 1 / 4', 'row': 'span row1 3 / 4' }, { 'w
idth': '300', 'height': '510' }); |
175 testPosition({ 'column': 'span col2 1 / 4', 'row': '3 / 4' }, { 'width': '30
0', 'height': '280' }); | 177 testPosition({ 'column': 'span col2 1 / 4', 'row': '3 / 4' }, { 'width': '30
0', 'height': '280' }); |
176 } | 178 } |
177 window.addEventListener("load", updateGridItemPosition, false); | 179 window.addEventListener("load", updateGridItemPosition, false); |
178 </script> | 180 </script> |
179 <body> | 181 <body> |
180 | 182 |
181 <p>This test checks that we properly recompute our internal grid when a grid ite
m is moved.</p> | 183 <p>This test checks that we properly recompute our internal grid when a grid ite
m is moved.</p> |
182 | 184 |
183 <div class="grid"><div class="sizedToGridArea"></div></div> | 185 <div class="grid"><div class="sizedToGridArea"></div></div> |
184 | 186 |
185 </body> | 187 </body> |
186 </html> | 188 </html> |
OLD | NEW |