[css-grid] Import additional grid layout tests and update TestExpectations
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-shorthands-style-format.html
1 <!DOCTYPE html>
2 <link href="resources/grid.css" rel="stylesheet">
3 <div class="grid">
4     <div id="item"></div>
5 </div>
6 <script src="../../resources/js-test.js"></script>
7 <script>
8     description('Test that the format of grid shorthands style uses slashes as expected');
9
10     var item = document.getElementById("item");
11
12     debug("Test grid-column shorthand");
13     item.style.gridColumn = "1";
14     shouldBeEqualToString("item.style.gridColumn", "1 / auto");
15     item.style.gridColumn = "1 / 3";
16     shouldBeEqualToString("item.style.gridColumn", "1 / 3");
17     item.style.gridColumn = "1 / span 2";
18     shouldBeEqualToString("item.style.gridColumn", "1 / span 2");
19     item.style.gridColumn = "foo / bar";
20     shouldBeEqualToString("item.style.gridColumn", "foo / bar");
21     item.style.gridColumn = "foo / span bar";
22     shouldBeEqualToString("item.style.gridColumn", "foo / span bar");
23     item.style.gridColumn = "2 foo / span 3 bar";
24     shouldBeEqualToString("item.style.gridColumn", "2 foo / span 3 bar");
25
26     debug("Test grid-row shorthand");
27     item.style.gridRow = "1";
28     shouldBeEqualToString("item.style.gridRow", "1 / auto");
29     item.style.gridRow = "1 / 3";
30     shouldBeEqualToString("item.style.gridRow", "1 / 3");
31     item.style.gridRow = "1 / span 2";
32     shouldBeEqualToString("item.style.gridRow", "1 / span 2");
33     item.style.gridRow = "foo / bar";
34     shouldBeEqualToString("item.style.gridRow", "foo / bar");
35     item.style.gridRow = "foo / span bar";
36     shouldBeEqualToString("item.style.gridRow", "foo / span bar");
37     item.style.gridRow = "2 foo / span 3 bar";
38     shouldBeEqualToString("item.style.gridRow", "2 foo / span 3 bar");
39
40     debug("Test grid-area shorthand");
41     item.style.gridArea = "1";
42     shouldBeEqualToString("item.style.gridArea", "1 / auto / auto / auto");
43     item.style.gridArea = "1 / 3";
44     shouldBeEqualToString("item.style.gridArea", "1 / 3 / auto / auto");
45     item.style.gridArea = "1 / span 2";
46     shouldBeEqualToString("item.style.gridArea", "1 / span 2 / auto / auto");
47     item.style.gridArea = "foo / foo";
48     shouldBeEqualToString("item.style.gridArea", "foo / foo / foo / foo");
49     item.style.gridArea = "foo / bar";
50     shouldBeEqualToString("item.style.gridArea", "foo / bar / foo / bar");
51     item.style.gridArea = "2 foo / span 3 bar";
52     shouldBeEqualToString("item.style.gridArea", "2 foo / span 3 bar / auto / auto");
53     item.style.gridArea = "1 / 2 / 3";
54     shouldBeEqualToString("item.style.gridArea", "1 / 2 / 3 / auto");
55     item.style.gridArea = "1 / 3 / 2 / 4";
56     shouldBeEqualToString("item.style.gridArea", "1 / 3 / 2 / 4");
57     item.style.gridArea = "1 / span 2 / 1 / span 2";
58     shouldBeEqualToString("item.style.gridArea", "1 / span 2 / 1 / span 2");
59     item.style.gridArea = "foo / bar / baz / qux";
60     shouldBeEqualToString("item.style.gridArea", "foo / bar / baz / qux");
61     item.style.gridArea = "foo / span bar / baz / span qux";
62     shouldBeEqualToString("item.style.gridArea", "foo / span bar / baz / span qux");
63     item.style.gridArea = "2 foo / span 3 bar / 3 baz / span 2 qux";
64     shouldBeEqualToString("item.style.gridArea", "2 foo / span 3 bar / 3 baz / span 2 qux");
65
66 </script>