4 <link href="resources/grid.css" rel="stylesheet">
7 grid-template-areas: "firstArea secondArea"
11 .gridItemWithPositiveInteger {
15 .gridItemWithNegativeInteger {
23 .gridItemWith2Integer {
27 .gridItemWithNegativePositiveInteger {
28 grid-column: 10 / -10;
31 .gridItemWithBeforeSpan {
32 grid-column: span 2 / 4;
35 .gridItemWithAfterSpan {
36 grid-column: 2 span / 4;
39 .gridItemWith2OnlySpan {
40 grid-column: span / span;
41 grid-row: span / span;
44 grid-column: auto / auto;
45 grid-row: auto / auto;
47 .gridItemWithBothLongHand {
51 .gridItemWithNoSpace {
59 .gridItemWithSpanString {
60 grid-column: 1 /span "first";
61 grid-row: -1 / span "last";
63 .gridItemWithSpanNumberString {
64 grid-column: 1 /span 3 "first";
65 grid-row: -1 / "last" 2 span ;
67 .gridItemWithSingleNamedGridArea {
68 grid-column: thirdArea;
71 .gridItemWithNamedGridAreaAndSpan {
72 grid-column: thirdArea / span;
73 grid-row: firstArea / span 2;
76 <script src="resources/grid-item-column-row-parsing-utils.js"></script>
77 <script src="../../resources/js-test.js"></script>
81 <!-- The first has no properties set on it. -->
82 <div id="gridItemWithNoCSSRule"></div>
83 <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div>
84 <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div>
85 <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div>
86 <div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div>
87 <div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePositiveIntegerElement"></div>
88 <div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div>
89 <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpanElement"></div>
90 <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpanElement"></div>
91 <div class="gridItemWith2OnlySpan" id="gridItemWith2OnlySpanElement"></div>
92 <div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id="gridItemWithBothShortLongHandElement"></div>
93 <div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div>
94 <div class="gridItemWithString" id="gridItemWithString"></div>
95 <div class="gridItemWithSpanString" id="gridItemWithSpanString"></div>
96 <div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberString"></div>
97 <div class="gridItemWithSingleNamedGridArea" id="gridItemWithSingleNamedGridArea"></div>
98 <div class="gridItemWithNamedGridAreaAndSpan" id="gridItemWithNamedGridAreaAndSpan"></div>
101 description('Test that setting and getting grid-column and grid-row works as expected');
103 debug("Test getting grid-column and grid-row set through CSS");
104 testColumnRowCSSParsing("gridItemWithNoCSSRule", "auto / auto", "auto / auto");
105 testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / auto");
106 testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto");
107 testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / auto");
108 testColumnRowCSSParsing("gridItemWith2IntegerElement", "10 / 15", "5 / 5");
109 testColumnRowCSSParsing("gridItemWithNegativePositiveIntegerElement", "10 / -10", "-8 / 5");
110 testColumnRowCSSParsing("gridItemWithBeforeSpanElement", "span 2 / 4", "3 / span 5");
111 testColumnRowCSSParsing("gridItemWith2OnlySpanElement", "auto / auto", "auto / auto");
112 testColumnRowCSSParsing("gridItemWith2AutoElement", "auto / auto" , "auto / auto");
113 testColumnRowCSSParsing("gridItemWithBothShortLongHandElement", "10 / 11", "4 / 5");
114 testColumnRowCSSParsing("gridItemWithNoSpaceElement", "auto / 1", "5 / auto");
115 testColumnRowCSSParsing("gridItemWithString", "1 first / auto", "1 last / auto");
116 testColumnRowCSSParsing("gridItemWithSpanString", "1 / span 1 first", "-1 / span 1 last");
117 testColumnRowCSSParsing("gridItemWithSpanNumberString", "1 / span 3 first", "-1 / span 2 last");
118 testColumnRowCSSParsing("gridItemWithSingleNamedGridArea", "thirdArea / thirdArea", "firstArea / firstArea");
119 testColumnRowCSSParsing("gridItemWithNamedGridAreaAndSpan", "thirdArea / span 1", "firstArea / span 2");
122 debug("Test the initial value");
123 var element = document.createElement("div");
124 document.body.appendChild(element);
125 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
126 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'");
127 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
128 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
129 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
130 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
133 debug("Test getting and setting grid-column and grid-row through JS");
134 testColumnRowJSParsing("18", "66", "18 / auto", "66 / auto");
135 testColumnRowJSParsing("-55", "-40", "-55 / auto", "-40 / auto");
136 testColumnRowJSParsing("auto", "auto", "auto / auto", "auto / auto");
137 testColumnRowJSParsing("10 / 55", "1 / 10");
138 testColumnRowJSParsing("span 5 / 5", "4 / span 4");
139 testColumnRowJSParsing("-5 / 5", "4 / -4");
140 testColumnRowJSParsing("4 / auto", "5 / auto");
141 testColumnRowJSParsing("auto / 5", "auto / 8");
142 testColumnRowJSParsing("span / 3", "5 / span", "span 1 / 3", "5 / span 1");
143 testColumnRowJSParsing("'first' span / 3", "5 / 'last' span", "span 1 first / 3", "5 / span 1 last");
144 testColumnRowJSParsing("'first' / 'last'", "'nav' / 'last' span", "1 first / 1 last", "1 nav / span 1 last");
145 testColumnRowJSParsing("3 'first' / 2 'last'", "5 'nav' / 'last' 7 span", "3 first / 2 last", "5 nav / span 7 last");
146 testColumnRowJSParsing("3 'first' span / -3 'last'", "'last' 2 span / -1 'nav'", "span 3 first / -3 last", "span 2 last / -1 nav");
147 testColumnRowJSParsing("5 / none", "8 / foobar", "5 / auto", "8 / auto");
148 testColumnRowJSParsing("nonExistent / none", "nonExistent / foobar", "auto / auto", "auto / auto");
149 testColumnRowJSParsing("span 'first' 3 / none", "'last' span / foobar", "span 3 first / auto", "span 1 last / auto");
152 debug("Test setting grid-column and grid-row back to 'auto' through JS");
153 element.style.gridColumn = "18 / 19";
154 element.style.gridRow = "66 / 68";
155 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'18 / 19'");
156 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'18'");
157 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'19'");
158 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / 68'");
159 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'66'");
160 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'68'");
162 element.style.gridColumn = "auto";
163 element.style.gridRow = "auto";
164 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'");
165 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'");
166 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'");
167 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'");
168 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'");
169 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'");
172 debug("Test getting and setting 'initial' grid-column and grid-row through JS");
173 testColumnRowInitialJSParsing();
176 debug("Test getting and setting 'inherit' grid-column and grid-row through JS");
177 testColumnRowInheritJSParsing("1 / auto", "inherit");
178 testColumnRowInheritJSParsing("inherit", "1 / auto");
179 testColumnRowInheritJSParsing("inherit", "inherit");
182 debug("Test getting and setting invalid grid-column and grid-row through JS");
183 testColumnRowInvalidJSParsing("4 5", "5 8");
184 testColumnRowInvalidJSParsing("4 /", "5 /");
185 testColumnRowInvalidJSParsing("5 5", "8 auto");
186 testColumnRowInvalidJSParsing("5 / /", "8 / /");
189 testColumnRowInvalidJSParsing("0 / 5", "0 / 6");
190 testColumnRowInvalidJSParsing("6 / 0", "8 / 0");
191 testColumnRowInvalidJSParsing("0", "0");
193 testColumnRowInvalidJSParsing("span span / span span", "span span / span span");
195 // More than 1 <integer> and / or <string>.
196 testColumnRowInvalidJSParsing("5 5 / span 2", "4 4 / 3 span");
197 testColumnRowInvalidJSParsing("5 'first' 'last' / span 2", "'first' 4 'last' / 3 span");
198 testColumnRowInvalidJSParsing("5 / 'first' 'last' 2", "4 / 'first' 3 'last'");
199 testColumnRowInvalidJSParsing("'first' 'last' / span 2", "'first' 'last' / 3 span");
200 testColumnRowInvalidJSParsing("5 / 'first' 'last'", "4 / 'first' 'last'");
201 testColumnRowInvalidJSParsing("5 5 span / 2", "span 4 4 / 3");
202 testColumnRowInvalidJSParsing("span 3 5 / 1", "5 span 4 / 3");
203 testColumnRowInvalidJSParsing("span 'last' 'first' / 1", "span 'first' 'last' / 3");
204 testColumnRowInvalidJSParsing("2 / span 'last' 'first'", "3 / span 'first' 'last'");
205 testColumnRowInvalidJSParsing("span 1 'last' 'first' / 1", "span 'first' 'last' 7 / 3");
206 testColumnRowInvalidJSParsing("2 / span 'last' 3 'first'", "3 / span 'first' 5 'last'");
207 testColumnRowInvalidJSParsing("1 span 2 'first' / 1", "1 span 'last' 7 / 3");
208 testColumnRowInvalidJSParsing("2 / 3 span 3 'first'", "3 / 5 span 'first' 5");
210 // Negative integer or 0 are invalid for spans.
211 testColumnRowInvalidJSParsing("span -1 / -2", "-3 span / -4");
212 testColumnRowInvalidJSParsing("-1 / -2 span", "-3 / span -4");
213 testColumnRowInvalidJSParsing("0 span / 0", "span 0 / 0");
214 testColumnRowInvalidJSParsing("0 / span 0", "0 / 0 span");
215 testColumnRowInvalidJSParsing("span -3 'first' / 3 'last'", "'last' -2 span / 1 'nav'");
217 // Spans for both initial / final values is not allowed.
218 testColumnRowInvalidJSParsing("5 span / span 2", "span 4 / 3 span");
219 testColumnRowInvalidJSParsing("'first' span / span 'last'", "span 4 'first' / 3 span 'last'");
220 testColumnRowInvalidJSParsing("'first' 3 span / span 'last'", "span 'first' / 2 span 'last'");
221 testColumnRowInvalidJSParsing("'first' -1 span / span 'last'", "span -2 'first' / span 'last'");
223 // We don't allow span to be between the <integer> and the <string>.
224 testColumnRowInvalidJSParsing("'first' span 1 / 'last'", "2 span 'first' / 'last'");
225 testColumnRowInvalidJSParsing("3 'first' / 2 span 'last'", "5 'nav' / 'last' span 7");
226 testColumnRowInvalidJSParsing("3 / 1 span 2", "5 / 3 span 3");