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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 333563003: [CSS Grid Layout] Update grid-auto-flow to the new syntax (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Attempt 2 to fix win_blink_rel 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 {
7 grid-auto-flow: column dense;
8 }
9 .gridAutoFlowRowDense {
10 grid-auto-flow: row dense;
11 }
12 .gridAutoFlowDenseColumn {
13 grid-auto-flow: dense column;
14 }
15 .gridAutoFlowDenseRow {
16 grid-auto-flow: dense row;
17 }
18 .gridAutoFlowStackColumn {
19 grid-auto-flow: stack column;
20 }
21 .gridAutoFlowStackRow {
22 grid-auto-flow: stack row;
23 }
24 .gridAutoFlowColumnStack {
25 grid-auto-flow: column stack;
26 }
27 .gridAutoFlowRowStack {
28 grid-auto-flow: row stack;
29 }
6 .gridAutoFlowInherit { 30 .gridAutoFlowInherit {
7 grid-auto-flow: inherit; 31 grid-auto-flow: inherit;
8 } 32 }
9 /* Bad values. */ 33 /* Bad values. */
34 .gridAutoFlowNone {
35 grid-auto-flow: none;
36 }
10 .gridAutoFlowRows { 37 .gridAutoFlowRows {
11 grid-auto-flow: rows; 38 grid-auto-flow: rows;
12 } 39 }
13 .gridAutoFlowColumns { 40 .gridAutoFlowColumns {
14 grid-auto-flow: columns; 41 grid-auto-flow: columns;
15 } 42 }
43 .gridAutoFlowDense {
44 grid-auto-flow: dense;
45 }
46 .gridAutoFlowColumnFoo {
47 grid-auto-flow: column foo;
48 }
49 .gridAutoFlowColumnColumn {
50 grid-auto-flow: column column;
51 }
52 .gridAutoFlowDenseColumnStack {
53 grid-auto-flow: dense column stack;
54 }
55 .gridAutoFlowDenseRowStack {
56 grid-auto-flow: dense row stack;
57 }
58 .gridAutoFlowStackRowRow {
59 grid-auto-flow: stack row row;
60 }
16 </style> 61 </style>
17 <script src="../../resources/js-test.js"></script> 62 <script src="../../resources/js-test.js"></script>
18 </head> 63 </head>
19 <body> 64 <body>
20 <div class="grid" id="gridInitial"></div> 65 <div class="grid" id="gridInitial"></div>
21 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div>
22 <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn"></div> 66 <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumn"></div>
23 <div class="grid gridAutoFlowRow" id="gridAutoFlowRow"></div> 67 <div class="grid gridAutoFlowRow" id="gridAutoFlowRow"></div>
68 <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnDense"></div>
69 <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowDense"></div>
70 <div class="grid gridAutoFlowDenseColumn" id="gridAutoFlowDenseColumn"></div>
71 <div class="grid gridAutoFlowDenseRow" id="gridAutoFlowDenseRow"></div>
72 <div class="grid gridAutoFlowStack" id="gridAutoFlowStack"></div>
73 <div class="grid gridAutoFlowStackColumn" id="gridAutoFlowStackColumn"></div>
74 <div class="grid gridAutoFlowStackRow" id="gridAutoFlowStackRow"></div>
75 <div class="grid gridAutoFlowColumnStack" id="gridAutoFlowColumnStack"></div>
76 <div class="grid gridAutoFlowRowStack" id="gridAutoFlowRowStack"></div>
24 <div class="grid gridAutoFlowColumn"> 77 <div class="grid gridAutoFlowColumn">
25 <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div> 78 <div class="grid gridAutoFlowInherit" id="gridAutoFlowInherit"></div>
26 </div> 79 </div>
27 <div class="grid gridAutoFlowColumn"> 80 <div class="grid gridAutoFlowColumn">
28 <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div> <div> 81 <div><div class="grid gridAutoFlowInherit" id="gridAutoFlowNoInherit"></div> <div>
29 </div> 82 </div>
83 <div class="grid gridAutoFlowNone" id="gridAutoFlowNone"></div>
30 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div> 84 <div class="grid gridAutoFlowColumns" id="gridAutoFlowColumns"></div>
31 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div> 85 <div class="grid gridAutoFlowRows" id="gridAutoFlowRows"></div>
86 <div class="grid gridAutoFlowDense" id="gridAutoFlowDense"></div>
87 <div class="grid gridAutoFlowColumnFoo" id="gridAutoFlowColumnFoo"></div>
88 <div class="grid gridAutoFlowColumnColumn" id="gridAutoFlowColumnColumn"></div>
89 <div class="grid gridAutoFlowDenseColumnStack" id="gridAutoFlowDenseColumnStack" ></div>
90 <div class="grid gridAutoFlowDenseRowStack" id="gridAutoFlowDenseRowStack"></div >
91 <div class="grid gridAutoFlowStackRowRow" id="gridAutoFlowStackRowRow"></div>
32 <script> 92 <script>
33 description('Test that setting and getting grid-auto-flow works as expected' ); 93 description('Test that setting and getting grid-auto-flow works as expected' );
34 94
35 debug("Test getting auto-flow set through CSS"); 95 debug("Test getting auto-flow set through CSS");
36 var gridAutoFlowNone = document.getElementById("gridAutoFlowNone");
37 shouldBe("window.getComputedStyle(gridAutoFlowNone, '').getPropertyValue('gr id-auto-flow')", "'none'");
38
39 var gridAutoFlowColumn = document.getElementById("gridAutoFlowColumn"); 96 var gridAutoFlowColumn = document.getElementById("gridAutoFlowColumn");
40 shouldBe("window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue(' grid-auto-flow')", "'column'"); 97 shouldBe("window.getComputedStyle(gridAutoFlowColumn, '').getPropertyValue(' grid-auto-flow')", "'column'");
41 98
42 var gridAutoFlowRow = document.getElementById("gridAutoFlowRow"); 99 var gridAutoFlowRow = document.getElementById("gridAutoFlowRow");
43 shouldBe("window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('gri d-auto-flow')", "'row'"); 100 shouldBe("window.getComputedStyle(gridAutoFlowRow, '').getPropertyValue('gri d-auto-flow')", "'row'");
44 101
102 var gridAutoFlowColumnDense = document.getElementById("gridAutoFlowColumnDen se");
103 shouldBe("window.getComputedStyle(gridAutoFlowColumnDense, '').getPropertyVa lue('grid-auto-flow')", "'column dense'");
104
105 var gridAutoFlowRowDense = document.getElementById("gridAutoFlowRowDense");
106 shouldBe("window.getComputedStyle(gridAutoFlowRowDense, '').getPropertyValue ('grid-auto-flow')", "'row dense'");
107
108 var gridAutoFlowDenseColumn = document.getElementById("gridAutoFlowDenseColu mn");
109 shouldBe("window.getComputedStyle(gridAutoFlowDenseColumn, '').getPropertyVa lue('grid-auto-flow')", "'column dense'");
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
45 var gridAutoFlowColumns = document.getElementById("gridAutoFlowColumns"); 132 var gridAutoFlowColumns = document.getElementById("gridAutoFlowColumns");
46 shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue( 'grid-auto-flow')", "'none'"); 133 shouldBe("window.getComputedStyle(gridAutoFlowColumns, '').getPropertyValue( 'grid-auto-flow')", "'row'");
47 134
48 var gridAutoFlowRows = document.getElementById("gridAutoFlowRows"); 135 var gridAutoFlowRows = document.getElementById("gridAutoFlowRows");
49 shouldBe("window.getComputedStyle(gridAutoFlowRows, '').getPropertyValue('gr id-auto-flow')", "'none'"); 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'");
50 155
51 var gridAutoFlowInherit = document.getElementById("gridAutoFlowInherit"); 156 var gridAutoFlowInherit = document.getElementById("gridAutoFlowInherit");
52 shouldBe("window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue( 'grid-auto-flow')", "'column'"); 157 shouldBe("window.getComputedStyle(gridAutoFlowInherit, '').getPropertyValue( 'grid-auto-flow')", "'column'");
53 158
54 var gridAutoFlowNoInherit = document.getElementById("gridAutoFlowNoInherit") ; 159 var gridAutoFlowNoInherit = document.getElementById("gridAutoFlowNoInherit") ;
55 shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValu e('grid-auto-flow')", "'none'"); 160 shouldBe("window.getComputedStyle(gridAutoFlowNoInherit, '').getPropertyValu e('grid-auto-flow')", "'row'");
56 161
57 debug(""); 162 debug("");
58 debug("Test the initial value"); 163 debug("Test the initial value");
59 element = document.createElement("div"); 164 element = document.createElement("div");
60 document.body.appendChild(element); 165 document.body.appendChild(element);
61 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'none'"); 166 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
62 167
63 debug(""); 168 debug("");
64 debug("Test getting and setting grid-auto-flow through JS"); 169 debug("Test getting and setting grid-auto-flow through JS");
65 element.style.gridAutoFlow = "column"; 170 element.style.gridAutoFlow = "column";
66 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column'"); 171 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column'");
67 172 element.style.gridAutoFlow = "column dense";
173 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column dense'");
174 element.style.gridAutoFlow = "row dense";
175 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row dense'");
176 element.style.gridAutoFlow = "dense column";
177 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'column dense'");
178 element.style.gridAutoFlow = "dense row";
179 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row dense'");
180 element.style.gridAutoFlow = "row";
181 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
182 element.style.gridAutoFlow = "stack";
183 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack row'");
184 element.style.gridAutoFlow = "stack column";
185 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack column'");
186 element.style.gridAutoFlow = "stack row";
187 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack row'");
188 element.style.gridAutoFlow = "column stack";
189 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack column'");
190 element.style.gridAutoFlow = "row stack";
191 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'stack row'");
192
193 debug("");
194 debug("Test getting and setting bad values for grid-auto-flow through JS");
68 element = document.createElement("div"); 195 element = document.createElement("div");
69 document.body.appendChild(element); 196 document.body.appendChild(element);
70 element.style.gridAutoFlow = "row";
71 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
72
73 debug("");
74 debug("Test getting and setting bad values for grid-auto-flow through JS");
75 element.style.gridAutoFlow = "noone"; 197 element.style.gridAutoFlow = "noone";
76 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'"); 198 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
199 element.style.gridAutoFlow = "dense";
200 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
201 element.style.gridAutoFlow = "column column";
202 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
203 element.style.gridAutoFlow = "dense column stack";
204 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
205 element.style.gridAutoFlow = "dense row stack";
206 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
207 element.style.gridAutoFlow = "stack row row";
208 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
77 209
78 debug(""); 210 debug("");
79 debug("Test setting grid-auto-flow to 'initial' through JS"); 211 debug("Test setting grid-auto-flow to 'initial' through JS");
80 // Reusing the value so that we can check that it is set back to its initial value. 212 // Reusing the value so that we can check that it is set back to its initial value.
81 element.style.gridAutoFlow = "initial"; 213 element.style.gridAutoFlow = "initial";
82 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'none'"); 214 shouldBe("window.getComputedStyle(element, '').getPropertyValue('grid-auto-f low')", "'row'");
83 </script> 215 </script>
84 </body> 216 </body>
85 </html> 217 </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