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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set.html

Issue 2335673002: [css-grid] New syntax for the 'grid' shorthand (Closed)
Patch Set: Applied suggested changes. Created 4 years, 3 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 | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-shorthand-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> 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 <style> 5 <style>
6 #gridWithNone { 6 #gridWithNone {
7 grid: none; 7 grid: none;
8 } 8 }
9 .gridWithTemplate { 9 .gridWithTemplate {
10 grid: 10px / 15px; 10 grid: 10px / 15px;
11 } 11 }
12 .gridWithInherit { 12 .gridWithInherit {
13 grid: inherit; 13 grid: inherit;
14 } 14 }
15 #gridWithAutoFlowAndRows { 15 #gridColumnsAndAutoFlow {
16 grid: column 10px; 16 grid: auto-flow / 10px;
17 } 17 }
18 #gridWithAutoFlowNone { 18 #gridWithAutoFlowAndAutoRows {
19 grid: none 10px; 19 grid: auto-flow 10px / none;
20 } 20 }
21 #gridWithAutoFlowColumnDense { 21 #gridWithAutoFlowColumnDense {
22 grid: column dense 10px; 22 grid: none / auto-flow dense;
23 } 23 }
24 #gridWithAutoFlowDenseRow { 24 #gridWithAutoFlowDenseRow {
25 grid: dense row 10px; 25 grid: auto-flow dense / none;
26 } 26 }
27 #gridWithAutoFlowAndRowsAndColumns { 27 #gridWithAutoFlowAndAutoRowsAndColumns {
28 grid: column 10px / 20px; 28 grid: auto-flow 10px / 20px;
29 } 29 }
30 #gridWithAutoFlowAndMultipleAutoTracks { 30 #gridWithAutoFlowAndMultipleAutoTracks {
31 grid: row 20px 10px / 100px 10%; 31 grid: auto-flow 20px 10px / 100px 50px;
32 }
33 #gridWithRowsAndAutoFlow {
34 grid: 10px / auto-flow;
35 }
36 #gridWithRowsNoneAndAutoFlowAndAutoColumn {
37 grid: none / auto-flow 10px;
38 }
39 #gridWithRowsAndAutoFlowDenseColumn {
40 grid: 10px / auto-flow dense;
41 }
42 #gridWithColumnsAndDenseAutoFlow {
43 grid: dense auto-flow / 10px;
44 }
45 #gridWithRowsAndAutoFlowAndAutoColumns {
46 grid: 20px / auto-flow 10px;
47 }
48 #gridWithRowsAndAutoFlowAndMultipleAutoTracks {
49 grid: 100px 50px / auto-flow 20px 10px;
32 } 50 }
33 51
34 /* Bad values. */ 52 /* Bad values. */
35 53
36 #gridWithExplicitAndImplicit { 54 #gridWithMisplacedAutoColumn {
37 grid: 10px / 20px column; 55 grid: 10px / 20px auto-flow;
38 } 56 }
39 #gridWithMisplacedNone1 { 57 #gridWithMisplacedNone1 {
40 grid: column 10px / none 20px; 58 grid: auto-flow 10px / none 20px;
41 } 59 }
42 #gridWithMisplacedNone2 { 60 #gridWithMisplacedNone2 {
43 grid: 10px / 20px none; 61 grid: 10px / 20px none;
44 } 62 }
45 #gridWithMisplacedDense { 63 #gridWithMisplacedDense {
46 grid: dense column dense; 64 grid: dense 10px / auto-flow 20px;
65 }
66 #gridWithDuplicatedDense {
67 grid: dense auto-flow dense / 10px;
68 }
69 #gridWithOnlyDense {
70 grid: dense / 10px;
71 }
72 #gridWithoutColumnInfo {
73 grid: auto-flow dense 10px;
74 }
75 #gridWithTwoAutoFlow {
76 grid: auto-flow / auto-flow 20px;
77 }
78 #gridWithImplicitAndNoExplicit {
79 grid: column 20px / 10px;
80 }
81 #gridWithExtraIdBeforeAutoFlowColumn {
82 grid: 10px / a auto-flow 20px;
83 }
84 #gridWithExtraIdBeforeAutoFlowRow {
85 grid: a auto-flow 10px / 20px;
86 }
87 #gridWithExtraIdBeforeAutoColumn {
88 grid: 10px / auto-flow a 20px;
89 }
90 #gridWithExtraIdAfterAutoColumn {
91 grid: 10px / auto-flow 20px a;
92 }
93 #gridWithExtraIdBeforeAutoRow {
94 grid: auto-flow a 20px / 10px;
95 }
96 #gridWithExtraIdAfterAutoRow {
97 grid: auto-flow 20px a / 10px;
47 } 98 }
48 </style> 99 </style>
49 <script src="../../resources/js-test.js"></script> 100 <script src="../../resources/js-test.js"></script>
50 </head> 101 </head>
51 <body> 102 <body>
52 <div class="grid" id="gridWithNone"></div> 103 <div class="grid" id="gridWithNone"></div>
53 <div class="grid gridWithTemplate" id="gridWithTemplate"></div> 104 <div class="grid gridWithTemplate" id="gridWithTemplate"></div>
54 <div class="grid gridWithTemplate"> 105 <div class="grid gridWithTemplate">
55 <div class="grid gridWithInherit" id="gridInherit"></div> 106 <div class="grid gridWithInherit" id="gridInherit"></div>
56 </div> 107 </div>
57 <div class="grid" class="gridWithTemplate"> 108 <div class="grid" class="gridWithTemplate">
58 <div><div class="grid gridWithInherit" id="gridNoInherit"></div></div> 109 <div><div class="grid gridWithInherit" id="gridNoInherit"></div></div>
59 </div--> 110 </div-->
60 <div class="grid" id="gridWithAutoFlowAndRows"></div> 111 <div class="grid" id="gridColumnsAndAutoFlow"></div>
61 <div class="grid" id="gridWithAutoFlowNone"></div> 112 <div class="grid" id="gridWithAutoFlowAndAutoRows"></div>
62 <div class="grid" id="gridWithAutoFlowColumnDense"></div> 113 <div class="grid" id="gridWithAutoFlowColumnDense"></div>
63 <div class="grid" id="gridWithAutoFlowDenseRow"></div> 114 <div class="grid" id="gridWithAutoFlowDenseRow"></div>
64 <div class="grid" id="gridWithAutoFlowAndRowsAndColumns"></div> 115 <div class="grid" id="gridWithAutoFlowAndAutoRowsAndColumns"></div>
65 <div class="grid" id="gridWithAutoFlowAndMultipleAutoTracks"></div> 116 <div class="grid" id="gridWithAutoFlowAndMultipleAutoTracks"></div>
66 <div class="grid" id="gridWithExplicitAndImplicit"></div> 117 <div class="grid" id="gridWithRowsAndAutoFlow"></div>
118 <div class="grid" id="gridWithRowsNoneAndAutoFlowAndAutoColumn"></div>
119 <div class="grid" id="gridWithRowsAndAutoFlowDenseColumn"></div>
120 <div class="grid" id="gridWithColumnsAndDenseAutoFlow"></div>
121 <div class="grid" id="gridWithRowsAndAutoFlowAndAutoColumns"></div>
122 <div class="grid" id="gridWithRowsAndAutoFlowAndMultipleAutoTracks"></div>
123 <div class="grid" id="gridWithMisplacedAutoColumn"></div>
67 <div class="grid" id="gridWithMisplacedNone1"></div> 124 <div class="grid" id="gridWithMisplacedNone1"></div>
68 <div class="grid" id="gridWithMisplacedNone2"></div> 125 <div class="grid" id="gridWithMisplacedNone2"></div>
69 <div class="grid" id="gridWithMisplacedDense"></div> 126 <div class="grid" id="gridWithMisplacedDense"></div>
127 <div class="grid" id="gridWithDuplicatedDense"></div>
128 <div class="grid" id="gridWithOnlyDense"></div>
129 <div class="grid" id="gridWithoutColumnInfo"></div>
130 <div class="grid" id="gridWithTwoAutoFlow"></div>
131 <div class="grid" id="gridWithImplicitAndNoExplicit"></div>
132 <div class="grid" id="gridWithExtraIdBeforeAutoFlowColumn"></div>
133 <div class="grid" id="gridWithExtraIdBeforeAutoFlowRow"></div>
134 <div class="grid" id="gridWithExtraIdBeforeAutoColumn"></div>
135 <div class="grid" id="gridWithExtraIdAfterAutoColumn"></div>
136 <div class="grid" id="gridWithExtraIdBeforeAutoRow"></div>
137 <div class="grid" id="gridWithExtraIdAfterAutoRow"></div>
70 <script src="resources/grid-shorthand-parsing-utils.js"></script> 138 <script src="resources/grid-shorthand-parsing-utils.js"></script>
71 <script> 139 <script>
72 description("This test checks that the 'grid' shorthand is properly parsed a nd the longhand properties correctly assigned."); 140 description("This test checks that the 'grid' shorthand is properly parsed a nd the longhand properties correctly assigned.");
73 141
74 debug("Test getting the longhand values when shorthand is set through CSS.") ; 142 debug("Test getting the longhand values when shorthand is set through CSS.") ;
75 testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", " none", "none", "row", "auto", "auto"); 143 testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", " none", "none", "row", "auto", "auto");
76 testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px ", "10px", "none", "row", "auto", "auto"); 144 testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px ", "10px", "none", "row", "auto", "auto");
77 testGridDefinitionsValues(document.getElementById("gridInherit"), "15px", "1 0px", "none", "row", "auto", "auto"); 145 testGridDefinitionsValues(document.getElementById("gridInherit"), "15px", "1 0px", "none", "row", "auto", "auto");
78 testGridDefinitionsValues(document.getElementById("gridNoInherit"), "none", "none", "none", "row", "auto", "auto"); 146 testGridDefinitionsValues(document.getElementById("gridNoInherit"), "none", "none", "none", "row", "auto", "auto");
79 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRows") , "none", "none", "none", "column", "10px", "10px"); 147 testGridDefinitionsValues(document.getElementById("gridColumnsAndAutoFlow"), "10px", "none", "none", "row", "auto", "auto");
80 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), " none", "none", "none", "row", "auto", "auto"); 148 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndAutoRo ws"), "none", "none", "none", "row", "auto", "10px");
81 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDen se"), "none", "none", "none", "column dense", "10px", "10px"); 149 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDen se"), "none", "none", "none", "column dense", "auto", "auto");
82 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow" ), "none", "none", "none", "row dense", "10px", "10px"); 150 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow" ), "none", "none", "none", "row dense", "auto", "auto");
83 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRowsAn dColumns"), "none", "none", "none", "column", "20px", "10px"); 151 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndAutoRo wsAndColumns"), "20px", "none", "none", "row", "auto", "10px");
84 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndMultip leAutoTracks"), "none", "none", "none", "row", "100px 10%", "20px 10px"); 152 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndMultip leAutoTracks"), "100px 50px", "none", "none", "row", "auto", "20px 10px");
153
154 testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlow") , "none", "10px", "none", "column", "auto", "auto");
155 testGridDefinitionsValues(document.getElementById("gridWithRowsNoneAndAutoFl owAndAutoColumn"), "none", "none", "none", "column", "10px", "auto");
156 testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowDe nseColumn"), "none", "10px", "none", "column dense", "auto", "auto");
157 testGridDefinitionsValues(document.getElementById("gridWithColumnsAndDenseAu toFlow"), "10px", "none", "none", "row dense", "auto", "auto");
158 testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowAn dAutoColumns"), "none", "20px", "none", "column", "10px", "auto");
159 testGridDefinitionsValues(document.getElementById("gridWithRowsAndAutoFlowAn dMultipleAutoTracks"), "none", "100px 50px", "none", "column", "20px 10px", "aut o");
85 160
86 debug(""); 161 debug("");
87 debug("Test getting wrong values for 'grid' shorthand through CSS (they shou ld resolve to the default: 'none')"); 162 debug("Test getting wrong values for 'grid' shorthand through CSS (they shou ld resolve to the default: 'none')");
88 testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplic it"), "none", "none", "none", "row", "auto", "auto"); 163 testGridDefinitionsValues(document.getElementById("gridWithMisplacedAutoColu mn"), "none", "none", "none", "row", "auto", "auto");
89 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "row", "auto", "auto"); 164 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "row", "auto", "auto");
90 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "row", "auto", "auto"); 165 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "row", "auto", "auto");
91 testGridDefinitionsValues(document.getElementById("gridWithMisplacedDense"), "none", "none", "none", "row", "auto", "auto"); 166 testGridDefinitionsValues(document.getElementById("gridWithMisplacedDense"), "none", "none", "none", "row", "auto", "auto");
167 testGridDefinitionsValues(document.getElementById("gridWithDuplicatedDense") , "none", "none", "none", "row", "auto", "auto");
168 testGridDefinitionsValues(document.getElementById("gridWithOnlyDense"), "non e", "none", "none", "row", "auto", "auto");
169 testGridDefinitionsValues(document.getElementById("gridWithoutColumnInfo"), "none", "none", "none", "row", "auto", "auto");
170 testGridDefinitionsValues(document.getElementById("gridWithTwoAutoFlow"), "n one", "none", "none", "row", "auto", "auto");
171 testGridDefinitionsValues(document.getElementById("gridWithImplicitAndNoExpl icit"), "none", "none", "none", "row", "auto", "auto");
172 testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAuto FlowColumn"), "none", "none", "none", "row", "auto", "auto");
173 testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAuto FlowRow"), "none", "none", "none", "row", "auto", "auto");
174 testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAuto Column"), "none", "none", "none", "row", "auto", "auto");
175 testGridDefinitionsValues(document.getElementById("gridWithExtraIdAfterAutoC olumn"), "none", "none", "none", "row", "auto", "auto");
176 testGridDefinitionsValues(document.getElementById("gridWithExtraIdBeforeAuto Row"), "none", "none", "none", "row", "auto", "auto");
177 testGridDefinitionsValues(document.getElementById("gridWithExtraIdAfterAutoR ow"), "none", "none", "none", "row", "auto", "auto");
92 178
93 debug(""); 179 debug("");
94 debug("Test getting and setting 'grid' shorthand through JS"); 180 debug("Test getting and setting 'grid' shorthand through JS");
95 testGridDefinitionsSetJSValues("20px / 10px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial"); 181 testGridDefinitionsSetJSValues("20px / 10px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");
96 testGridDefinitionsSetJSValues("[line] 'a' 20px / 10px", "10px", "[line] 20p x", "\"a\"", "row", "auto", "auto", "10px", "[line] 20px", "\"a\"", "initial", " initial", "initial"); 182 testGridDefinitionsSetJSValues("[line] 'a' 20px / 10px", "10px", "[line] 20p x", "\"a\"", "row", "auto", "auto", "10px", "[line] 20px", "\"a\"", "initial", " initial", "initial");
97 testGridDefinitionsSetJSValues("row dense 20px", "none", "none", "none", "ro w dense", "20px", "20px", "initial", "initial", "initial", "row dense", "20px", "20px"); 183 testGridDefinitionsSetJSValues("auto-flow dense 20px / none", "none", "none" , "none", "row dense", "auto", "20px", "none", "initial", "initial", "row dense" , "initial", "20px");
98 testGridDefinitionsSetJSValues("column 20px / 10px", "none", "none", "none", "column", "10px", "20px", "initial", "initial", "initial", "column", "10px", "2 0px"); 184 testGridDefinitionsSetJSValues("20px / auto-flow 10px", "none", "20px", "non e", "column", "10px", "auto", "initial", "20px", "initial", "column", "10px", "i nitial");
185 testGridDefinitionsSetJSValues("none / auto-flow dense 20px", "none", "none" , "none", "column dense", "20px", "auto", "initial", "none", "initial", "column dense", "20px", "initial");
186 testGridDefinitionsSetJSValues("10px / auto-flow 20px", "none", "10px", "non e", "column", "20px", "auto", "initial", "10px", "initial", "column", "20px", "i nitial");
99 187
100 debug(""); 188 debug("");
101 debug("Test the initial value"); 189 debug("Test the initial value");
102 var element = document.createElement("div"); 190 var element = document.createElement("div");
103 document.body.appendChild(element); 191 document.body.appendChild(element);
104 testGridDefinitionsValues(element, "none", "none", "none", "row", "auto", "a uto"); 192 testGridDefinitionsValues(element, "none", "none", "none", "row", "auto", "a uto");
105 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'none'"); 193 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'none'");
106 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'none'"); 194 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'none'");
107 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area s')", "'none'"); 195 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area s')", "'none'");
108 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); 196 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'");
109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns' )", "'auto'"); 197 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns' )", "'auto'");
110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'"); 198 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
111 199
112 debug(""); 200 debug("");
113 debug("Test setting grid-template-columns and grid-template-rows back to 'no ne' through JS"); 201 debug("Test setting grid-template-columns and grid-template-rows back to 'no ne' through JS");
114 testGridDefinitionsSetJSValues("column 10px / 20px", "none", "none", "none", "column", "20px", "10px", "initial", "initial", "initial", "column", "20px", "1 0px"); 202 testGridDefinitionsSetJSValues("10px / auto-flow 20px", "none", "10px", "non e", "column", "20px", "auto", "initial", "10px", "initial", "column", "20px", "i nitial");
203 testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto" , "auto", "none", "none", "none", "initial", "initial", "initial");
204 testGridDefinitionsSetJSValues("20px / auto-flow 10px", "none", "20px", "non e", "column", "10px", "auto", "initial", "20px", "initial", "column", "10px", "i nitial");
115 testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto" , "auto", "none", "none", "none", "initial", "initial", "initial"); 205 testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto" , "auto", "none", "none", "none", "initial", "initial", "initial");
116 206
117 debug(""); 207 debug("");
118 debug("Test the inherit value on reset-only subproperties (grid-*-gap)"); 208 debug("Test the inherit value on reset-only subproperties (grid-*-gap)");
119 document.body.style.gridRowGap = "100px"; 209 document.body.style.gridRowGap = "100px";
120 document.body.style.gridColumnGap = "20px"; 210 document.body.style.gridColumnGap = "20px";
121 var anotherElement = document.createElement("div"); 211 var anotherElement = document.createElement("div");
122 document.body.appendChild(anotherElement); 212 document.body.appendChild(anotherElement);
123 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-column-gap')", "0px"); 213 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-column-gap')", "0px");
124 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-row-gap')", "0px"); 214 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-row-gap')", "0px");
125 anotherElement.style.grid = "inherit"; 215 anotherElement.style.grid = "inherit";
126 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-column-gap')", "20px"); 216 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-column-gap')", "20px");
127 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-row-gap')", "100px"); 217 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-row-gap')", "100px");
128 </script> 218 </script>
129 </body> 219 </body>
130 </html> 220 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698