1description('Test that setting and getting grid-columns and grid-rows works as expected');
2
3debug("Test getting |display| set through CSS");
4var gridElement = document.getElementById("gridElement");
5shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-columns')", "'none'");
6shouldBe("getComputedStyle(gridElement, '').getPropertyValue('-webkit-grid-rows')", "'none'");
7
8var gridWithFixedElement = document.getElementById("gridWithFixedElement");
9shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-columns')", "'10px'");
10shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('-webkit-grid-rows')", "'15px'");
11
12var gridWithPercentElement = document.getElementById("gridWithPercentElement");
13shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-columns')", "'53%'");
14shouldBe("getComputedStyle(gridWithPercentElement, '').getPropertyValue('-webkit-grid-rows')", "'27%'");
15
16var gridWithAutoElement = document.getElementById("gridWithAutoElement");
17shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-columns')", "'auto'");
18shouldBe("getComputedStyle(gridWithAutoElement, '').getPropertyValue('-webkit-grid-rows')", "'auto'");
19
20var gridWithEMElement = document.getElementById("gridWithEMElement");
21shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-columns')", "'100px'");
22shouldBe("getComputedStyle(gridWithEMElement, '').getPropertyValue('-webkit-grid-rows')", "'150px'");
23
24debug("");
25debug("Test the initial value");
26var element = document.createElement("div");
27document.body.appendChild(element);
28shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'none'");
29shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'none'");
30
31debug("");
32debug("Test getting and setting display through JS");
33element.style.webkitGridColumns = "18px";
34element.style.webkitGridRows = "66px";
35shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'18px'");
36shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'66px'");
37
38element = document.createElement("div");
39document.body.appendChild(element);
40element.style.webkitGridColumns = "55%";
41element.style.webkitGridRows = "40%";
42shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'55%'");
43shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'40%'");
44
45element = document.createElement("div");
46document.body.appendChild(element);
47element.style.webkitGridColumns = "auto";
48element.style.webkitGridRows = "auto";
49shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-columns')", "'auto'");
50shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-rows')", "'auto'");