| <!DOCTYPE html> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <div class="grid"> |
| <div id="item"></div> |
| </div> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| description('Test that the format of grid shorthands style uses slashes as expected'); |
| |
| var item = document.getElementById("item"); |
| |
| debug("Test grid-column shorthand"); |
| item.style.gridColumn = "1"; |
| shouldBeEqualToString("item.style.gridColumn", "1 / auto"); |
| item.style.gridColumn = "1 / 3"; |
| shouldBeEqualToString("item.style.gridColumn", "1 / 3"); |
| item.style.gridColumn = "1 / span 2"; |
| shouldBeEqualToString("item.style.gridColumn", "1 / span 2"); |
| item.style.gridColumn = "foo / bar"; |
| shouldBeEqualToString("item.style.gridColumn", "foo / bar"); |
| item.style.gridColumn = "foo / span bar"; |
| shouldBeEqualToString("item.style.gridColumn", "foo / span bar"); |
| item.style.gridColumn = "2 foo / span 3 bar"; |
| shouldBeEqualToString("item.style.gridColumn", "2 foo / span 3 bar"); |
| |
| debug("Test grid-row shorthand"); |
| item.style.gridRow = "1"; |
| shouldBeEqualToString("item.style.gridRow", "1 / auto"); |
| item.style.gridRow = "1 / 3"; |
| shouldBeEqualToString("item.style.gridRow", "1 / 3"); |
| item.style.gridRow = "1 / span 2"; |
| shouldBeEqualToString("item.style.gridRow", "1 / span 2"); |
| item.style.gridRow = "foo / bar"; |
| shouldBeEqualToString("item.style.gridRow", "foo / bar"); |
| item.style.gridRow = "foo / span bar"; |
| shouldBeEqualToString("item.style.gridRow", "foo / span bar"); |
| item.style.gridRow = "2 foo / span 3 bar"; |
| shouldBeEqualToString("item.style.gridRow", "2 foo / span 3 bar"); |
| |
| debug("Test grid-area shorthand"); |
| item.style.gridArea = "1"; |
| shouldBeEqualToString("item.style.gridArea", "1 / auto / auto / auto"); |
| item.style.gridArea = "1 / 3"; |
| shouldBeEqualToString("item.style.gridArea", "1 / 3 / auto / auto"); |
| item.style.gridArea = "1 / span 2"; |
| shouldBeEqualToString("item.style.gridArea", "1 / span 2 / auto / auto"); |
| item.style.gridArea = "foo / foo"; |
| shouldBeEqualToString("item.style.gridArea", "foo / foo / foo / foo"); |
| item.style.gridArea = "foo / bar"; |
| shouldBeEqualToString("item.style.gridArea", "foo / bar / foo / bar"); |
| item.style.gridArea = "2 foo / span 3 bar"; |
| shouldBeEqualToString("item.style.gridArea", "2 foo / span 3 bar / auto / auto"); |
| item.style.gridArea = "1 / 2 / 3"; |
| shouldBeEqualToString("item.style.gridArea", "1 / 2 / 3 / auto"); |
| item.style.gridArea = "1 / 3 / 2 / 4"; |
| shouldBeEqualToString("item.style.gridArea", "1 / 3 / 2 / 4"); |
| item.style.gridArea = "1 / span 2 / 1 / span 2"; |
| shouldBeEqualToString("item.style.gridArea", "1 / span 2 / 1 / span 2"); |
| item.style.gridArea = "foo / bar / baz / qux"; |
| shouldBeEqualToString("item.style.gridArea", "foo / bar / baz / qux"); |
| item.style.gridArea = "foo / span bar / baz / span qux"; |
| shouldBeEqualToString("item.style.gridArea", "foo / span bar / baz / span qux"); |
| item.style.gridArea = "2 foo / span 3 bar / 3 baz / span 2 qux"; |
| shouldBeEqualToString("item.style.gridArea", "2 foo / span 3 bar / 3 baz / span 2 qux"); |
| |
| </script> |
