OLD | NEW |
1 description('Test that setting and getting grid-definition-columns and grid-defi
nition-rows works as expected'); | 1 description('Test that setting and getting grid-definition-columns and grid-defi
nition-rows works as expected'); |
2 | 2 |
3 debug("Test getting grid-definition-columns and grid-definition-rows set through
CSS"); | 3 debug("Test getting grid-definition-columns and grid-definition-rows set through
CSS"); |
4 testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none"
, "none"); | 4 testGridDefinitionsValues(document.getElementById("gridWithNoneElement"), "none"
, "none"); |
5 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px
", "15px"); | 5 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "10px
", "15px"); |
6 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "40
0px", "150px"); | 6 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "40
0px", "150px"); |
7 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "0px",
"0px"); | 7 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "0px",
"0px"); |
8 testGridDefinitionsValues(document.getElementById("gridWithAutoWithoutSizeElemen
t"), "0px", "0px"); | 8 testGridDefinitionsValues(document.getElementById("gridWithAutoWithoutSizeElemen
t"), "0px", "0px"); |
9 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenEleme
nt"), "7px", "11px"); | 9 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenEleme
nt"), "7px", "11px"); |
10 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px",
"150px"); | 10 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px",
"150px"); |
(...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
77 | 77 |
78 debug(""); | 78 debug(""); |
79 debug("Test setting grid-definition-columns and grid-definition-rows back to 'no
ne' through JS"); | 79 debug("Test setting grid-definition-columns and grid-definition-rows back to 'no
ne' through JS"); |
80 testGridDefinitionsSetJSValues("18px", "66px"); | 80 testGridDefinitionsSetJSValues("18px", "66px"); |
81 testGridDefinitionsSetJSValues("none", "none"); | 81 testGridDefinitionsSetJSValues("none", "none"); |
82 | 82 |
83 function testInherit() | 83 function testInherit() |
84 { | 84 { |
85 var parentElement = document.createElement("div"); | 85 var parentElement = document.createElement("div"); |
86 document.body.appendChild(parentElement); | 86 document.body.appendChild(parentElement); |
87 parentElement.style.gridDefinitionColumns = "50px 'last'"; | 87 parentElement.style.gridDefinitionColumns = "50px (last)"; |
88 parentElement.style.gridDefinitionRows = "'first' 101%"; | 88 parentElement.style.gridDefinitionRows = "(first) 101%"; |
89 | 89 |
90 element = document.createElement("div"); | 90 element = document.createElement("div"); |
91 parentElement.appendChild(element); | 91 parentElement.appendChild(element); |
92 element.style.display = "grid"; | 92 element.style.display = "grid"; |
93 element.style.height = "100px"; | 93 element.style.height = "100px"; |
94 element.style.gridDefinitionColumns = "inherit"; | 94 element.style.gridDefinitionColumns = "inherit"; |
95 element.style.gridDefinitionRows = "inherit"; | 95 element.style.gridDefinitionRows = "inherit"; |
96 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'50px last'"); | 96 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'50px last'"); |
97 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'first 101px'"); | 97 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'first 101px'"); |
98 | 98 |
99 document.body.removeChild(parentElement); | 99 document.body.removeChild(parentElement); |
100 } | 100 } |
101 debug(""); | 101 debug(""); |
102 debug("Test setting grid-definition-columns and grid-definition-rows to 'inherit
' through JS"); | 102 debug("Test setting grid-definition-columns and grid-definition-rows to 'inherit
' through JS"); |
103 testInherit(); | 103 testInherit(); |
104 | 104 |
105 function testInitial() | 105 function testInitial() |
106 { | 106 { |
107 element = document.createElement("div"); | 107 element = document.createElement("div"); |
108 document.body.appendChild(element); | 108 document.body.appendChild(element); |
109 element.style.display = "grid"; | 109 element.style.display = "grid"; |
110 element.style.width = "300px"; | 110 element.style.width = "300px"; |
111 element.style.height = "150px"; | 111 element.style.height = "150px"; |
112 element.style.gridDefinitionColumns = "150% 'last'"; | 112 element.style.gridDefinitionColumns = "150% (last)"; |
113 element.style.gridDefinitionRows = "'first' 1fr"; | 113 element.style.gridDefinitionRows = "(first) 1fr"; |
114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'450px last'"); | 114 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'450px last'"); |
115 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'first 150px'"); | 115 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'first 150px'"); |
116 | 116 |
117 element.style.display = "grid"; | 117 element.style.display = "grid"; |
118 element.style.gridDefinitionColumns = "initial"; | 118 element.style.gridDefinitionColumns = "initial"; |
119 element.style.gridDefinitionRows = "initial"; | 119 element.style.gridDefinitionRows = "initial"; |
120 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'none'"); | 120 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'none'"); |
121 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'none'"); | 121 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'none'"); |
122 | 122 |
123 document.body.removeChild(element); | 123 document.body.removeChild(element); |
124 } | 124 } |
125 debug(""); | 125 debug(""); |
126 debug("Test setting grid-definition-columns and grid-definition-rows to 'initial
' through JS"); | 126 debug("Test setting grid-definition-columns and grid-definition-rows to 'initial
' through JS"); |
127 testInitial(); | 127 testInitial(); |
OLD | NEW |