| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="resources/grid-item-column-row-parsing-utils.js"></script> |
| <script> |
| if (window.testRunner) |
| testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); |
| </script> |
| <style> |
| .gridItemWithPositiveInteger { |
| -webkit-grid-column: 10; |
| -webkit-grid-row: 15; |
| } |
| .gridItemWithNegativeInteger { |
| -webkit-grid-column: -10; |
| -webkit-grid-row: -15; |
| } |
| .gridItemWithAuto { |
| -webkit-grid-column: auto; |
| -webkit-grid-row: auto; |
| } |
| .gridItemWith2Integer { |
| -webkit-grid-column: 10 / 15; |
| -webkit-grid-row: 5 / 5; |
| } |
| .gridItemWithNegativePositiveInteger { |
| -webkit-grid-column: 10 / -10; |
| -webkit-grid-row: -8 / 5; |
| } |
| .gridItemWithBeforeSpan { |
| -webkit-grid-column: span 2 / 4; |
| -webkit-grid-row: 3 / span 5; |
| } |
| .gridItemWithAfterSpan { |
| -webkit-grid-column: 2 span / 4; |
| -webkit-grid-row: 3 / 5 span; |
| } |
| .gridItemWith2OnlySpan { |
| -webkit-grid-column: span / span; |
| -webkit-grid-row: span / span; |
| } |
| .gridItemWith2Auto { |
| -webkit-grid-column: auto / auto; |
| -webkit-grid-row: auto / auto; |
| } |
| .gridItemWithBothLongHand { |
| -webkit-grid-column-end: 11; |
| -webkit-grid-row-start: 4; |
| } |
| .gridItemWithNoSpace { |
| -webkit-grid-column: auto/1; |
| -webkit-grid-row: 5/auto; |
| } |
| .gridItemWithString { |
| -webkit-grid-column: "first"; |
| -webkit-grid-row: "last"; |
| } |
| .gridItemWithSpanString { |
| -webkit-grid-column: 1 /span "first"; |
| -webkit-grid-row: -1 / span "last"; |
| } |
| .gridItemWithSpanNumberString { |
| -webkit-grid-column: 1 /span 3 "first"; |
| -webkit-grid-row: -1 / "last" 2 span ; |
| } |
| </style> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <!-- 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="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="gridItemWithString" id="gridItemWithString"></div> |
| <div class="gridItemWithSpanString" id="gridItemWithSpanString"></div> |
| <div class="gridItemWithSpanNumberString" id="gridItemWithSpanNumberString"></div> |
| <script> |
| description('Test that setting and getting grid-column and grid-row works as expected'); |
| |
| debug("Test getting -webkit-grid-column and -webkit-grid-row set through CSS"); |
| testColumnRowCSSParsing("gridElement", "auto / auto", "auto / auto"); |
| testColumnRowCSSParsing("gridItemWithPositiveInteger", "10 / auto", "15 / auto"); |
| testColumnRowCSSParsing("gridItemWithNegativeInteger", "-10 / auto", "-15 / auto"); |
| testColumnRowCSSParsing("gridItemWithAutoElement", "auto / auto", "auto / auto"); |
| 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("gridItemWith2OnlySpanElement", "auto / auto", "auto / auto"); |
| testColumnRowCSSParsing("gridItemWith2AutoElement", "auto / auto" , "auto / auto"); |
| testColumnRowCSSParsing("gridItemWithBothShortLongHandElement", "10 / 11", "4 / 5"); |
| testColumnRowCSSParsing("gridItemWithNoSpaceElement", "auto / 1", "5 / auto"); |
| testColumnRowCSSParsing("gridItemWithString", "1 first / auto", "1 last / auto"); |
| testColumnRowCSSParsing("gridItemWithSpanString", "1 / span 1 first", "-1 / span 1 last"); |
| testColumnRowCSSParsing("gridItemWithSpanNumberString", "1 / span 3 first", "-1 / span 2 last"); |
| |
| debug(""); |
| debug("Test the initial value"); |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end')", "'auto'"); |
| |
| debug(""); |
| debug("Test getting and setting grid-column and grid-row through JS"); |
| testColumnRowJSParsing("18", "66", "18 / auto", "66 / auto"); |
| testColumnRowJSParsing("-55", "-40", "-55 / auto", "-40 / auto"); |
| testColumnRowJSParsing("auto", "auto", "auto / auto", "auto / auto"); |
| testColumnRowJSParsing("10 / 55", "1 / 10"); |
| testColumnRowJSParsing("span 5 / 5", "4 / span 4"); |
| testColumnRowJSParsing("-5 / 5", "4 / -4"); |
| testColumnRowJSParsing("4 / auto", "5 / auto"); |
| testColumnRowJSParsing("auto / 5", "auto / 8"); |
| testColumnRowJSParsing("span / 3", "5 / span", "span 1 / 3", "5 / span 1"); |
| testColumnRowJSParsing("'first' span / 3", "5 / 'last' span", "span 1 first / 3", "5 / span 1 last"); |
| testColumnRowJSParsing("'first' / 'last'", "'nav' / 'last' span", "1 first / 1 last", "1 nav / span 1 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"); |
| |
| debug(""); |
| debug("Test setting grid-column and grid-row back to 'auto' through JS"); |
| element.style.webkitGridColumn = "18 / 19"; |
| element.style.webkitGridRow = "66 / 68"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'18 / 19'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start')", "'18'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end')", "'19'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'66 / 68'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start')", "'66'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end')", "'68'"); |
| |
| element.style.webkitGridColumn = "auto"; |
| element.style.webkitGridRow = "auto"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto / auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-start')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column-end')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto / auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-start')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row-end')", "'auto'"); |
| |
| debug(""); |
| debug("Test getting and setting invalid grid-column and grid-row through JS"); |
| testColumnRowInvalidJSParsing("4 5", "5 8"); |
| testColumnRowInvalidJSParsing("4 /", "5 /"); |
| testColumnRowInvalidJSParsing("5 / none", "8 / foobar"); |
| testColumnRowInvalidJSParsing("5 5", "8 auto"); |
| testColumnRowInvalidJSParsing("5 / /", "8 / /"); |
| |
| // 0 is invalid. |
| testColumnRowInvalidJSParsing("0 / 5", "0 / 6"); |
| testColumnRowInvalidJSParsing("6 / 0", "8 / 0"); |
| testColumnRowInvalidJSParsing("0", "0"); |
| |
| testColumnRowInvalidJSParsing("span span / span span", "span span / span span"); |
| |
| // More than 1 <integer> and / or <string>. |
| testColumnRowInvalidJSParsing("5 5 / span 2", "4 4 / 3 span"); |
| testColumnRowInvalidJSParsing("5 'first' 'last' / span 2", "'first' 4 'last' / 3 span"); |
| testColumnRowInvalidJSParsing("5 / 'first' 'last' 2", "4 / 'first' 3 'last'"); |
| testColumnRowInvalidJSParsing("'first' 'last' / span 2", "'first' 'last' / 3 span"); |
| testColumnRowInvalidJSParsing("5 / 'first' 'last'", "4 / 'first' 'last'"); |
| testColumnRowInvalidJSParsing("5 5 span / 2", "span 4 4 / 3"); |
| testColumnRowInvalidJSParsing("span 3 5 / 1", "5 span 4 / 3"); |
| testColumnRowInvalidJSParsing("span 'last' 'first' / 1", "span 'first' 'last' / 3"); |
| testColumnRowInvalidJSParsing("2 / span 'last' 'first'", "3 / span 'first' 'last'"); |
| testColumnRowInvalidJSParsing("span 1 'last' 'first' / 1", "span 'first' 'last' 7 / 3"); |
| testColumnRowInvalidJSParsing("2 / span 'last' 3 'first'", "3 / span 'first' 5 'last'"); |
| testColumnRowInvalidJSParsing("1 span 2 'first' / 1", "1 span 'last' 7 / 3"); |
| testColumnRowInvalidJSParsing("2 / 3 span 3 'first'", "3 / 5 span 'first' 5"); |
| |
| // Negative integer or 0 are invalid for spans. |
| testColumnRowInvalidJSParsing("span -1 / -2", "-3 span / -4"); |
| testColumnRowInvalidJSParsing("-1 / -2 span", "-3 / span -4"); |
| testColumnRowInvalidJSParsing("0 span / 0", "span 0 / 0"); |
| testColumnRowInvalidJSParsing("0 / span 0", "0 / 0 span"); |
| testColumnRowInvalidJSParsing("span -3 'first' / 3 'last'", "'last' -2 span / 1 'nav'"); |
| |
| // Spans for both initial / end values are not allowed. |
| testColumnRowInvalidJSParsing("5 span / span 2", "span 4 / 3 span"); |
| testColumnRowInvalidJSParsing("'first' span / span 'last'", "span 4 'first' / 3 span 'last'"); |
| testColumnRowInvalidJSParsing("'first' 3 span / span 'last'", "span 'first' / 2 span 'last'"); |
| testColumnRowInvalidJSParsing("'first' -1 span / span 'last'", "span -2 'first' / span 'last'"); |
| |
| // We don't allow span to be between the <integer> and the <string>. |
| testColumnRowInvalidJSParsing("'first' span 1 / 'last'", "2 span 'first' / 'last'"); |
| testColumnRowInvalidJSParsing("3 'first' / 2 span 'last'", "5 'nav' / 'last' span 7"); |
| testColumnRowInvalidJSParsing("3 / 1 span 2", "5 / 3 span 3"); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
