Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(77)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-position-changed-dynamic.html

Issue 1576993003: [css-grid] Fix placement for unknown named grid lines (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fixing last review comments Created 4 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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
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>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-negative-position-resolution.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-unknown-named-grid-line-resolution.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698