| <!DOCTYPE html> |
| <html> |
| <head> |
| <script> |
| if (window.testRunner) |
| testRunner.overridePreference("WebKitCSSGridLayoutEnabled", true); |
| </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; |
| } |
| </style> |
| <script src="../js/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> |
| <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"); |
| var gridElement = document.getElementById("gridElement"); |
| shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-column')", "'auto'"); |
| shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-row')", "'auto'"); |
| |
| var gridItemWithPositiveInteger = document.getElementById("gridItemWithPositiveInteger"); |
| shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-column')", "'10'"); |
| shouldBe("getComputedStyle(gridItemWithPositiveInteger, '').getPropertyValue('-webkit-grid-row')", "'15'"); |
| |
| var gridItemWithNegativeInteger = document.getElementById("gridItemWithNegativeInteger"); |
| shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-column')", "'-10'"); |
| shouldBe("getComputedStyle(gridItemWithNegativeInteger, '').getPropertyValue('-webkit-grid-row')", "'-15'"); |
| |
| var gridItemWithAutoElement = document.getElementById("gridItemWithAutoElement"); |
| shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-column')", "'auto'"); |
| shouldBe("getComputedStyle(gridItemWithAutoElement, '').getPropertyValue('-webkit-grid-row')", "'auto'"); |
| |
| debug(""); |
| debug("Test the initial value"); |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto'"); |
| |
| debug(""); |
| debug("Test getting and setting grid-column and grid-row through JS"); |
| element.style.webkitGridColumn = "18"; |
| element.style.webkitGridRow = "66"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'18'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'66'"); |
| |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.webkitGridColumn = "-55"; |
| element.style.webkitGridRow = "-40"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'-55'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'-40'"); |
| |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.webkitGridColumn = "auto"; |
| element.style.webkitGridRow = "auto"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto'"); |
| |
| debug(""); |
| debug("Test setting grid-column and grid-row back to 'auto' through JS"); |
| element.style.webkitGridColumn = "18"; |
| element.style.webkitGridRow = "66"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'18'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'66'"); |
| element.style.webkitGridColumn = "auto"; |
| element.style.webkitGridRow = "auto"; |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-column')", "'auto'"); |
| shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-row')", "'auto'"); |
| </script> |
| <script src="../js/resources/js-test-post.js"></script> |
| </body> |
| </html> |
