| <!DOCTYPE html> |
| <html> |
| <head> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| .grid { |
| grid-template-areas: "firstArea secondArea" |
| "thirdArea thirdArea"; |
| } |
| |
| .gridItemWithPositiveInteger { |
| grid-column-end: 10; |
| grid-row-end: 15; |
| } |
| .gridItemWithNegativeInteger { |
| grid-column-end: -10; |
| grid-row-end: -15; |
| } |
| .gridItemWithBeforeSpan { |
| grid-column-end: span 2; |
| grid-row-end: span 9; |
| } |
| .gridItemWithAfterSpan { |
| grid-column-end: 2 span; |
| grid-row-end: 9 span; |
| } |
| .gridItemWithOnlySpan { |
| grid-column-end: span; |
| grid-row-end: span; |
| } |
| .gridItemWithAuto { |
| grid-column-end: auto; |
| grid-row-end: auto; |
| } |
| .gridItemWithCustomIdent { |
| grid-column-end: first; |
| grid-row-end: last; |
| } |
| .gridItemWithNumberCustomIdent { |
| grid-column-end: first 2; |
| grid-row-end: 3 last; |
| } |
| .gridItemWithSpanCustomIdent { |
| grid-column-end: first span; |
| grid-row-end: span last; |
| } |
| .gridItemWithSpanNumberCustomIdent { |
| grid-column-end: 2 first span; |
| grid-row-end: last 3 span; |
| } |
| .gridItemWithArea { |
| grid-column-end: firstArea; |
| grid-row-end: thirdArea; |
| } |
| .gridItemWithCSSWideKeyword { |
| grid-column-end: 2 inherit; |
| grid-row-end: 2 initial; |
| } |
| .gridItemWithCSSWideKeyword2 { |
| grid-column-end: 2 unset; |
| grid-row-end: 2 default; |
| } |
| .gridItemWithSpanAuto { |
| grid-column-end: span auto; |
| grid-row-end: auto span; |
| } |
| .gridItemWithOneAuto { |
| grid-column-end: 1 auto; |
| grid-row-end: auto 1; |
| } |
| .gridItemWithSpanAutoOne { |
| grid-column-end: span 1 auto; |
| grid-row-end: span auto 1; |
| } |
| </style> |
| <script src="resources/grid-item-column-row-parsing-utils.js"></script> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div class="grid"> |
| <!-- The first has no properties set on it. --> |
| <div id="gridElement"></div> |
| <div class="gridItemWithPositiveInteger" id="gridItemWithPositiveInteger"></div> |
| <div class="gridItemWithNegativeInteger" id="gridItemWithNegativeInteger"></div> |
| <div class="gridItemWithBeforeSpan" id="gridItemWithBeforeSpan"></div> |
| <div class="gridItemWithAfterSpan" id="gridItemWithAfterSpan"></div> |
| <div class="gridItemWithOnlySpan" id="gridItemWithOnlySpan"></div> |
| <div class="gridItemWithAuto" id="gridItemWithAutoElement"></div> |
| <div class="gridItemWithCustomIdent" id="gridItemWithCustomIdent"></div> |
| <div class="gridItemWithNumberCustomIdent" id="gridItemWithNumberCustomIdent"></div> |
| <div class="gridItemWithSpanCustomIdent" id="gridItemWithSpanCustomIdentElement"></div> |
| <div class="gridItemWithSpanNumberCustomIdent" id="gridItemWithSpanNumberCustomIdentElement"></div> |
| <div class="gridItemWithArea" id="gridItemWithArea"></div> |
| <div class="gridItemWithCSSWideKeyword" id="gridItemWithCSSWideKeyword"></div> |
| <div class="gridItemWithCSSWideKeyword2" id="gridItemWithCSSWideKeyword2"></div> |
| <div class="gridItemWithSpanAuto" id="gridItemWithSpanAuto"></div> |
| <div class="gridItemWithOneAuto" id="gridItemWithOneAuto"></div> |
| <div class="gridItemWithSpanAutoOne" id="gridItemWithSpanAutoOne"></div> |
| </div> |
| <script> |
| description('Test that setting and getting grid-column-end and grid-row-end works as expected'); |
| |
| debug("Test getting grid-column-end and grid-row-end set through CSS"); |
| testColumnRowCSSParsing("gridElement", "auto / auto", "auto / auto"); |
| testColumnRowCSSParsing("gridItemWithPositiveInteger", "auto / 10", "auto / 15"); |
| testColumnRowCSSParsing("gridItemWithNegativeInteger", "auto / -10", "auto / -15"); |
| testColumnRowCSSParsing("gridItemWithBeforeSpan", "auto / span 2", "auto / span 9"); |
| testColumnRowCSSParsing("gridItemWithAfterSpan", "auto / span 2", "auto / span 9"); |
| testColumnRowCSSParsing("gridItemWithOnlySpan", "auto / auto", "auto / auto"); |
| testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / auto"); |
| testColumnRowCSSParsing("gridItemWithCustomIdent", "auto / first", "auto / last"); |
| testColumnRowCSSParsing("gridItemWithNumberCustomIdent", "auto / 2 first", "auto / 3 last"); |
| testColumnRowCSSParsing("gridItemWithSpanCustomIdentElement", "auto / span 1 first", "auto / span 1 last"); |
| testColumnRowCSSParsing("gridItemWithSpanNumberCustomIdentElement", "auto / span 2 first", "auto / span 3 last"); |
| testColumnRowCSSParsing("gridItemWithArea", "auto / firstArea", "auto / thirdArea"); |
| testColumnRowCSSParsing("gridItemWithCSSWideKeyword", "auto / auto", "auto / auto"); |
| testColumnRowCSSParsing("gridItemWithCSSWideKeyword2", "auto / auto", "auto / auto"); |
| testColumnRowCSSParsing("gridItemWithSpanAuto", "auto / auto", "auto / auto"); |
| testColumnRowCSSParsing("gridItemWithOneAuto", "auto / auto", "auto / auto"); |
| testColumnRowCSSParsing("gridItemWithSpanAutoOne", "auto / auto", "auto / auto"); |
| |
| debug(""); |
| debug("Test the initial value"); |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'"); |
| |
| debug(""); |
| debug("Test getting and setting grid-column-end and grid-row-end through JS"); |
| testColumnEndRowEndJSParsing("18", "66"); |
| testColumnEndRowEndJSParsing("-55", "-40"); |
| testColumnEndRowEndJSParsing("first", "last", "first", "last"); |
| testColumnEndRowEndJSParsing("span 7", "span 2"); |
| testColumnEndRowEndJSParsing("span first", "span last", "span 1 first", "span 1 last"); |
| testColumnEndRowEndJSParsing("auto", "auto"); |
| testColumnEndRowEndJSParsing("thirdArea", "secondArea"); |
| testColumnEndRowEndJSParsing("nonExistentArea", "secondArea"); |
| testColumnEndRowEndJSParsing("secondArea", "nonExistentArea"); |
| |
| debug(""); |
| debug("Test setting grid-column-start and grid-row-start to 'inherit' through JS"); |
| testColumnEndRowEndInheritJSParsing("inherit", "18"); |
| testColumnEndRowEndInheritJSParsing("2", "inherit"); |
| testColumnEndRowEndInheritJSParsing("inherit", "inherit"); |
| |
| debug(""); |
| debug("Test setting grid-column-start and grid-row-start to 'initial' through JS"); |
| testEndAfterInitialJSParsing(); |
| |
| debug(""); |
| debug("Test setting grid-column-end and grid-row-end back to 'auto' through JS"); |
| element.style.gridColumnEnd = "18"; |
| element.style.gridRowEnd = "66"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'18'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / 18'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'66'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / 66'"); |
| element.style.gridColumnEnd = "auto"; |
| element.style.gridRowEnd = "auto"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column-end')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-column')", "'auto / auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row-end')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('grid-row')", "'auto / auto'"); |
| </script> |
| </body> |
| </html> |
