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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set.html

Issue 398013004: [CSS Grid Layout] Small refactoring in grid-auto-flow-get-set.html test (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Patch for landing Created 6 years, 5 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 | « no previous file | LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt » ('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 PUBLIC "-//IETF//DTD HTML//EN"> 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
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 <style> 5 <style>
6 .gridAutoFlowColumnDense { 6 .gridAutoFlowColumnDense {
7 grid-auto-flow: column dense; 7 grid-auto-flow: column dense;
8 } 8 }
9 .gridAutoFlowRowDense { 9 .gridAutoFlowRowDense {
10 grid-auto-flow: row dense; 10 grid-auto-flow: row dense;
(...skipping 71 matching lines...) Expand 10 before | Expand all | Expand 10 after
82 </div> 82 </div>
83 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div> 83 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div>
84 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> 84 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div>
85 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> 85 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div>
86 <div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div> 86 <div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div>
87 <div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div> 87 <div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div>
88 <div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div> 88 <div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div>
89 <div class="grid gridAutoFlowDenseColumnStack" id="gridAutoFlowDenseColumnStack" ></div> 89 <div class="grid gridAutoFlowDenseColumnStack" id="gridAutoFlowDenseColumnStack" ></div>
90 <div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div > 90 <div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div >
91 <div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></div> 91 <div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></div>
92 <script src="resources/grid-definitions-parsing-utils.js"></script>
92 <script> 93 <script>
93 description('Test that setting and getting grid-auto-flow works as expected' ); 94 description('Test that setting and getting grid-auto-flow works as expected' );
94 95
95 debug("Test getting auto-flow set through CSS"); 96 debug("Test getting grid-auto-flow set through CSS");
96 var gridAutoFlowColumnSparse = document.getElementById("gridAutoFlowColumnSp arse"); 97 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnSparse", "column");
97 shouldBe("window.getComputedStyle(gridAutoFlowColumnSparse, '').getPropertyV alue('grid-auto-flow')", "'column'"); 98 checkGridAutoFlowSetCSSValue("gridAutoFlowRowSparse", "row");
99 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnDense", "column dense");
100 checkGridAutoFlowSetCSSValue("gridAutoFlowRowDense", "row dense");
101 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumn", "column dense");
102 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRow", "row dense");
103 checkGridAutoFlowSetCSSValue("gridAutoFlowStack", "stack row");
104 checkGridAutoFlowSetCSSValue("gridAutoFlowStackColumn", "stack column");
105 checkGridAutoFlowSetCSSValue("gridAutoFlowStackRow", "stack row");
106 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnStack", "stack column");
107 checkGridAutoFlowSetCSSValue("gridAutoFlowRowStack", "stack row");
108 checkGridAutoFlowSetCSSValue("gridAutoFlowInherit", "column");
109 checkGridAutoFlowSetCSSValue("gridAutoFlowNoInherit", "row");
98 110
99 var gridAutoFlowRowSparse = document.getElementById("gridAutoFlowRowSparse") ; 111 debug("");
100 shouldBe("window.getComputedStyle(gridAutoFlowRowSparse, '').getPropertyValu e('grid-auto-flow')", "'row'"); 112 debug("Test getting grid-auto-flow bad values set through CSS");
101 113 checkGridAutoFlowSetCSSValue("gridAutoFlowNone", "row");
102 var gridAutoFlowColumnDense = document.getElementById("gridAutoFlowColumnDen se"); 114 checkGridAutoFlowSetCSSValue("gridAutoFlowColumns", "row");
103 shouldBe("window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyVa lue('grid-auto-flow')", "'column dense'"); 115 checkGridAutoFlowSetCSSValue("gridAutoFlowRows", "row");
104 116 checkGridAutoFlowSetCSSValue("gridAutoFlowDense", "row");
105 var gridAutoFlowRowDense = document.getElementById("gridAutoFlowRowDense"); 117 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnFoo", "row");
106 shouldBe("window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue ('grid-auto-flow')", "'row dense'"); 118 checkGridAutoFlowSetCSSValue("gridAutoFlowColumnColumn", "row");
107 119 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseColumnStack", "row");
108 var gridAutoFlowDenseColumn = document.getElementById("gridAutoFlowDenseColu mn"); 120 checkGridAutoFlowSetCSSValue("gridAutoFlowDenseRowStack", "row");
109 shouldBe("window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyVa lue('grid-auto-flow')", "'column dense'"); 121 checkGridAutoFlowSetCSSValue("gridAutoFlowStackRowRow", "row");
110
111 var gridAutoFlowDenseRow = document.getElementById("gridAutoFlowDenseRow");
112 shouldBe("window.getComputedStyle(gridAutoFlowDenseRow, '').getPropertyValue ('grid-auto-flow')", "'row dense'");
113
114 var gridAutoFlowStack = document.getElementById("gridAutoFlowStack");
115 shouldBe("window.getComputedStyle(gridAutoFlowStack, '').getPropertyValue('g rid-auto-flow')", "'stack row'");
116
117 var gridAutoFlowStackColumn = document.getElementById("gridAutoFlowStackColu mn");
118 shouldBe("window.getComputedStyle(gridAutoFlowStackColumn, '').getPropertyVa lue('grid-auto-flow')", "'stack column'");
119
120 var gridAutoFlowStackRow = document.getElementById("gridAutoFlowStackRow");
121 shouldBe("window.getComputedStyle(gridAutoFlowStackRow, '').getPropertyValue ('grid-auto-flow')", "'stack row'");
122
123 var gridAutoFlowColumnStack = document.getElementById("gridAutoFlowColumnSta ck");
124 shouldBe("window.getComputedStyle(gridAutoFlowColumnStack, '').getPropertyVa lue('grid-auto-flow')", "'stack column'");
125
126 var gridAutoFlowRowStack = document.getElementById("gridAutoFlowRowStack");
127 shouldBe("window.getComputedStyle(gridAutoFlowRowStack, '').getPropertyValue ('grid-auto-flow')", "'stack row'");
128
129 var gridAutoFlowNone = document.getElementById("gridAutoFlowNone");
130 shouldBe("window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('gr id-auto-flow')", "'row'");
131
132 var gridAutoFlowColumns = document.getElementById("gridAutoFlowColumns");
133 shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue( 'grid-auto-flow')", "'row'");
134
135 var gridAutoFlowRows = document.getElementById("gridAutoFlowRows");
136 shouldBe("window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('gr id-auto-flow')", "'row'");
137
138 var gridAutoFlowDense = document.getElementById("gridAutoFlowDense");
139 shouldBe("window.getComputedStyle(gridAutoFlowDense, '').getPropertyValue('g rid-auto-flow')", "'row'");
140
141 var gridAutoFlowColumnFoo = document.getElementById("gridAutoFlowColumnFoo") ;
142 shouldBe("window.getComputedStyle(gridAutoFlowColumnFoo, '').getPropertyValu e('grid-auto-flow')", "'row'");
143
144 var gridAutoFlowColumnColumn = document.getElementById("gridAutoFlowColumnCo lumn");
145 shouldBe("window.getComputedStyle(gridAutoFlowColumnColumn, '').getPropertyV alue('grid-auto-flow')", "'row'");
146
147 var gridAutoFlowDenseColumnStack = document.getElementById("gridAutoFlowDens eColumnStack");
148 shouldBe("window.getComputedStyle(gridAutoFlowDenseColumnStack, '').getPrope rtyValue('grid-auto-flow')", "'row'");
149
150 var gridAutoFlowDenseRowStack = document.getElementById("gridAutoFlowDenseRo wStack");
151 shouldBe("window.getComputedStyle(gridAutoFlowDenseRowStack, '').getProperty Value('grid-auto-flow')", "'row'");
152
153 var gridAutoFlowStackRowRow = document.getElementById("gridAutoFlowStackRowR ow");
154 shouldBe("window.getComputedStyle(gridAutoFlowStackRowRow, '').getPropertyVa lue('grid-auto-flow')", "'row'");
155
156 var gridAutoFlowInherit = document.getElementById("gridAutoFlowInherit");
157 shouldBe("window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue( 'grid-auto-flow')", "'column'");
158
159 var gridAutoFlowNoInherit = document.getElementById("gridAutoFlowNoInherit") ;
160 shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValu e('grid-auto-flow')", "'row'");
161 122
162 debug(""); 123 debug("");
163 debug("Test the initial value"); 124 debug("Test the initial value");
164 element = document.createElement("div"); 125 checkGridAutoFlowSetJSValue("", "", "row");
165 document.body.appendChild(element);
166 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
167 126
168 debug("");
169 debug("Test getting and setting grid-auto-flow through JS"); 127 debug("Test getting and setting grid-auto-flow through JS");
170 element.style.gridAutoFlow = "column"; 128 checkGridAutoFlowSetJSValue("column", "column", "column");
171 shouldBe("element.style.gridAutoFlow", "'column'"); 129 checkGridAutoFlowSetJSValue("column dense", "column dense", "column dense");
172 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column'"); 130 checkGridAutoFlowSetJSValue("row dense", "row dense", "row dense");
173 element.style.gridAutoFlow = "column dense"; 131 checkGridAutoFlowSetJSValue("dense column", "dense column", "column dense");
174 shouldBe("element.style.gridAutoFlow", "'column dense'"); 132 checkGridAutoFlowSetJSValue("dense row", "dense row", "row dense");
175 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column dense'"); 133 checkGridAutoFlowSetJSValue("row", "row", "row");
176 element.style.gridAutoFlow = "row dense"; 134 checkGridAutoFlowSetJSValue("stack", "stack", "stack row");
177 shouldBe("element.style.gridAutoFlow", "'row dense'"); 135 checkGridAutoFlowSetJSValue("stack column", "stack column", "stack column");
178 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row dense'"); 136 checkGridAutoFlowSetJSValue("stack row", "stack row", "stack row");
179 element.style.gridAutoFlow = "dense column"; 137 checkGridAutoFlowSetJSValue("column stack", "column stack", "stack column");
180 shouldBe("element.style.gridAutoFlow", "'dense column'"); 138 checkGridAutoFlowSetJSValue("row stack", "row stack", "stack row");
181 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column dense'");
182 element.style.gridAutoFlow = "dense row";
183 shouldBe("element.style.gridAutoFlow", "'dense row'");
184 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row dense'");
185 element.style.gridAutoFlow = "row";
186 shouldBe("element.style.gridAutoFlow", "'row'");
187 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
188 element.style.gridAutoFlow = "stack";
189 shouldBe("element.style.gridAutoFlow", "'stack'");
190 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack row'");
191 element.style.gridAutoFlow = "stack column";
192 shouldBe("element.style.gridAutoFlow", "'stack column'");
193 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack column'");
194 element.style.gridAutoFlow = "stack row";
195 shouldBe("element.style.gridAutoFlow", "'stack row'");
196 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack row'");
197 element.style.gridAutoFlow = "column stack";
198 shouldBe("element.style.gridAutoFlow", "'column stack'");
199 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack column'");
200 element.style.gridAutoFlow = "row stack";
201 shouldBe("element.style.gridAutoFlow", "'row stack'");
202 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack row'");
203 139
204 debug(""); 140 debug("");
205 debug("Test getting and setting bad values for grid-auto-flow through JS"); 141 debug("Test getting and setting bad values for grid-auto-flow through JS");
206 element = document.createElement("div"); 142 checkGridAutoFlowSetJSValue("noone", "", "row");
207 document.body.appendChild(element); 143 checkGridAutoFlowSetJSValue("dense", "", "row");
208 element.style.gridAutoFlow = "noone"; 144 checkGridAutoFlowSetJSValue("column column", "", "row");
209 shouldBe("element.style.gridAutoFlow", "''"); 145 checkGridAutoFlowSetJSValue("dense column stack", "", "row");
210 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); 146 checkGridAutoFlowSetJSValue("dense row stack", "", "row");
211 element.style.gridAutoFlow = "dense"; 147 checkGridAutoFlowSetJSValue("stack row row", "", "row");
212 shouldBe("element.style.gridAutoFlow", "''");
213 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
214 element.style.gridAutoFlow = "column column";
215 shouldBe("element.style.gridAutoFlow", "''");
216 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
217 element.style.gridAutoFlow = "dense column stack";
218 shouldBe("element.style.gridAutoFlow", "''");
219 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
220 element.style.gridAutoFlow = "dense row stack";
221 shouldBe("element.style.gridAutoFlow", "''");
222 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
223 element.style.gridAutoFlow = "stack row row";
224 shouldBe("element.style.gridAutoFlow", "''");
225 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
226 148
227 debug(""); 149 debug("");
228 debug("Test setting grid-auto-flow to 'initial' through JS"); 150 debug("Test setting grid-auto-flow to 'initial' through JS");
229 // Reusing the value so that we can check that it is set back to its initial value. 151 // Reusing the value so that we can check that it is set back to its initial value.
230 element.style.gridAutoFlow = "initial"; 152 checkGridAutoFlowSetJSValue("initial", "initial", "row");
231 shouldBe("element.style.gridAutoFlow", "'initial'");
232 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
233 </script> 153 </script>
234 </body> 154 </body>
235 </html> 155 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-auto-flow-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698