<!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");
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");
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");
item.style.gridArea = "1 / 3";
shouldBeEqualToString("item.style.gridArea", "1 / 3");
item.style.gridArea = "1 / span 2";
shouldBeEqualToString("item.style.gridArea", "1 / span 2");
item.style.gridArea = "foo / foo";
shouldBeEqualToString("item.style.gridArea", "foo");
item.style.gridArea = "foo / bar";
shouldBeEqualToString("item.style.gridArea", "foo / bar");
item.style.gridArea = "2 foo / span 3 bar";
shouldBeEqualToString("item.style.gridArea", "2 foo / span 3 bar");
item.style.gridArea = "1 / 2 / 3";
shouldBeEqualToString("item.style.gridArea", "1 / 2 / 3");
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>