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

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

Powered by Google App Engine
This is Rietveld 408576698