| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="resources/grid-item-column-row-parsing-utils.js"></script> |
| <style> |
| .grid { |
| grid-template-areas: "firstArea secondArea" |
| "thirdArea thirdArea"; |
| |
| grid-template-columns: [first nav] 10px 10px; |
| grid-template-rows: [last] 10px 10px; |
| } |
| |
| .gridItemWithPositiveInteger { |
| grid-column: 10; |
| grid-row: 15; |
| } |
| .gridItemWithNegativeInteger { |
| grid-column: -10; |
| grid-row: -15; |
| } |
| .gridItemWithAuto { |
| grid-column: auto; |
| grid-row: auto; |
| } |
| .gridItemWith2Integer { |
| grid-column: 10 / 15; |
| grid-row: 5 / 5; |
| } |
| .gridItemWithNegativePositiveInteger { |
| grid-column: 10 / -10; |
| grid-row: -8 / 5; |
| } |
| .gridItemWithBeforeSpan { |
| grid-column: span 2 / 4; |
| grid-row: 3 / span 5; |
| } |
| .gridItemWithAfterSpan { |
| grid-column: 2 span / 4; |
| grid-row: 3 / 5 span; |
| } |
| .gridItemWith2OnlySpan { |
| grid-column: span / span; |
| grid-row: span / span; |
| } |
| .gridItemWith2Auto { |
| grid-column: auto / auto; |
| grid-row: auto / auto; |
| } |
| .gridItemWithBothLongHand { |
| grid-column-end: 11; |
| grid-row-start: 4; |
| } |
| .gridItemWithNoSpace { |
| grid-column: auto/1; |
| grid-row: 5/auto; |
| } |
| .gridItemWithCustomIdent { |
| grid-column: first; |
| grid-row: last; |
| } |
| .gridItemWithNonExistingCustomIdent { |
| grid-column: nav; |
| grid-row: foo; |
| } |
| .gridItemWithSpanCustomIdent { |
| grid-column: 1 /span first; |
| grid-row: -1 / span last; |
| } |
| .gridItemWithSpanNumberCustomIdent { |
| grid-column: 1 /span 3 first; |
| grid-row: -1 / last 2 span ; |
| } |
| .gridItemWithSingleNamedGridArea { |
| grid-column: thirdArea; |
| grid-row: firstArea; |
| } |
| .gridItemWithNamedGridAreaAndSpan { |
| grid-column: thirdArea / span 1; |
| grid-row: firstArea / span 2; |
| } |
| </style> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <div class="grid"> |
| <!-- The first has no properties set on it. --> |
| <div id="gridItemWithNoCSSRule"></div> |
| <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div> |
| <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div> |
| <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div> |
| <div class="gridItemWith2Integer" id="gridItemWith2IntegerElement"></div> |
| <div class="gridItemWithNegativePositiveInteger" id="gridItemWithNegativePositiveIntegerElement"></div> |
| <div class="gridItemWith2Auto" id="gridItemWith2AutoElement"></div> |
| <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpanElement"></div> |
| <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpanElement"></div> |
| <div class="gridItemWith2OnlySpan" id="gridItemWith2OnlySpanElement"></div> |
| <div class="gridItemWithNegativePositiveInteger gridItemWithBothLongHand" id="gridItemWithBothShortLongHandElement"></div> |
| <div class="gridItemWithNoSpace" id="gridItemWithNoSpaceElement"></div> |
| <div class="gridItemWithCustomIdent" id="gridItemWithCustomIdent"></div> |
| <div class="gridItemWithNonExistingCustomIdent" id="gridItemWithNonExistingCustomIdent"></div> |
| <div class="gridItemWithSpanCustomIdent" id="gridItemWithSpanCustomIdent"></div> |
| <div class="gridItemWithSpanNumberCustomIdent" id="gridItemWithSpanNumberCustomIdent"></div> |
| <div class="gridItemWithSingleNamedGridArea" id="gridItemWithSingleNamedGridArea"></div> |
| <div class="gridItemWithNamedGridAreaAndSpan" id="gridItemWithNamedGridAreaAndSpan"></div> |
| </div> |
| <script> |
| description('Test that setting and getting grid-column and grid-row works as expected'); |
| |
| debug("Test getting grid-column and grid-row set through CSS"); |
| testColumnRowCSSParsing("gridItemWith2IntegerElement", "10 / 15", "5 / 5"); |
| testColumnRowCSSParsing("gridItemWithNegativePositiveIntegerElement", "10 / -10", "-8 / 5"); |
| testColumnRowCSSParsing("gridItemWithBeforeSpanElement", "span 2 / 4", "3 / span 5"); |
| testColumnRowCSSParsing("gridItemWithAfterSpanElement", "span 2 / 4", "3 / span 5"); |
| testColumnRowCSSParsing("gridItemWithBothShortLongHandElement", "10 / 11", "4 / 5"); |
| testColumnCSSParsing("gridItemWithNoSpaceElement", "auto / 1"); |
| testColumnRowCSSParsing("gridItemWithSpanCustomIdent", "1 / span first", "-1 / span last"); |
| testColumnRowCSSParsing("gridItemWithSpanNumberCustomIdent", "1 / span 3 first", "-1 / span 2 last"); |
| testColumnRowCSSParsing("gridItemWithNamedGridAreaAndSpan", "thirdArea / span 1", "firstArea / span 2"); |
| |
| debug(""); |
| debug("Test the initial value"); |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'"); |
| |
| debug(""); |
| debug("Test getting and setting grid-column and grid-row through JS"); |
| testColumnRowJSParsing("10 / 55", "1 / 10"); |
| testColumnRowJSParsing("span 5 / 5", "4 / span 4"); |
| testColumnRowJSParsing("-5 / 5", "4 / -4"); |
| testColumnRowJSParsing("auto / 5", "auto / 8"); |
| testColumnRowJSParsing("span 1 / 3", "5 / span 1", "span 1 / 3", "5 / span 1"); |
| testColumnRowJSParsing("first span / 3", "5 / last span", "span first / 3", "5 / span last"); |
| testColumnRowJSParsing("first / last", "nav / last span", "first / last", "nav / span last"); |
| testColumnRowJSParsing("3 first / 2 last", "5 nav / last 7 span", "3 first / 2 last", "5 nav / span 7 last"); |
| testColumnRowJSParsing("3 first span / -3 last", "last 2 span / -1 nav", "span 3 first / -3 last", "span 2 last / -1 nav"); |
| testColumnRowJSParsing("5 / none", "8 / foobar"); |
| testColumnRowJSParsing("nonExistent / none", "nonExistent / foobar"); |
| testColumnRowJSParsing("span first 3 / none", "last span / foobar", "span 3 first / none", "span last / foobar"); |
| testColumnRowJSParsing("5 span / span 2", "span first / last span", "span 5 / span 2", "span first / span last"); |
| testColumnRowJSParsing("span 5 first / span last 2", "3 first span / last 7 span", "span 5 first / span 2 last", "span 3 first / span 7 last"); |
| |
| debug(""); |
| debug("Test setting grid-column and grid-row back to 'auto' through JS"); |
| element.style.gridColumn = "18 / 19"; |
| element.style.gridRow = "66 / 68"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'18 / 19'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'18'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'19'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'66 / 68'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'66'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'68'"); |
| |
| element.style.gridColumn = "auto"; |
| element.style.gridRow = "auto"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-start')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-start')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'"); |
| |
| debug(""); |
| debug("Test getting and setting 'inherit' grid-column and grid-row through JS"); |
| testColumnRowInheritJSParsing("1 / span 2", "inherit"); |
| testColumnRowInheritJSParsing("inherit", "1 / span 2"); |
| testColumnRowInheritJSParsing("inherit", "inherit"); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
