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 thr
ough CSS"); | 3 debug("Test getting |grid-definition-columns| and |grid-definition-rows| set thr
ough CSS"); |
4 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "7px
11px", "17px 2px"); | 4 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "7px
11px", "17px 2px"); |
5 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53
% 99%", "27% 52%", "424px 792px", "162px 312px"); | 5 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53
% 99%", "27% 52%", "424px 792px", "162px 312px"); |
6 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto
auto", "auto auto", "0px 17px", "0px 3px"); | 6 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto
auto", "auto auto", "0px 17px", "0px 3px"); |
7 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px 1
20px", "150px 170px"); | 7 testGridDefinitionsValues(document.getElementById("gridWithEMElement"), "100px 1
20px", "150px 170px"); |
8 testGridDefinitionsValues(document.getElementById("gridWithThreeItems"), "15px a
uto 100px", "120px 18px auto", "15px 0px 100px", "120px 18px 0px"); | 8 testGridDefinitionsValues(document.getElementById("gridWithThreeItems"), "15px a
uto 100px", "120px 18px auto", "15px 0px 100px", "120px 18px 0px"); |
9 testGridDefinitionsValues(document.getElementById("gridWithPercentAndViewportPer
cent"), "50% 120px", "35% 168px", "400px 120px", "210px 168px"); | 9 testGridDefinitionsValues(document.getElementById("gridWithPercentAndViewportPer
cent"), "50% 120px", "35% 168px", "400px 120px", "210px 168px"); |
10 testGridDefinitionsValues(document.getElementById("gridWithFitContentAndFitAvail
able"), "none", "none"); | 10 testGridDefinitionsValues(document.getElementById("gridWithFitContentAndFitAvail
able"), "none", "none"); |
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
56 testGridDefinitionsSetBadJSValues("10px minmax(16px, -1vw)", "minmax(-1%, 15%) 1
0vw"); | 56 testGridDefinitionsSetBadJSValues("10px minmax(16px, -1vw)", "minmax(-1%, 15%) 1
0vw"); |
57 | 57 |
58 function testInherit() | 58 function testInherit() |
59 { | 59 { |
60 var parentElement = document.createElement("div"); | 60 var parentElement = document.createElement("div"); |
61 document.body.appendChild(parentElement); | 61 document.body.appendChild(parentElement); |
62 parentElement.style.display = "grid"; | 62 parentElement.style.display = "grid"; |
63 parentElement.style.width = "800px"; | 63 parentElement.style.width = "800px"; |
64 parentElement.style.height = "600px"; | 64 parentElement.style.height = "600px"; |
65 parentElement.style.font = "10px Ahem"; // Used to resolve em font consisten
tly. | 65 parentElement.style.font = "10px Ahem"; // Used to resolve em font consisten
tly. |
66 parentElement.style.gridDefinitionColumns = "50px 1fr 'last'"; | 66 parentElement.style.gridDefinitionColumns = "50px 1fr (last)"; |
67 parentElement.style.gridDefinitionRows = "2em 'middle' 45px"; | 67 parentElement.style.gridDefinitionRows = "2em (middle) 45px"; |
68 testGridDefinitionsValues(parentElement, "50px 750px last", "20px middle 45p
x"); | 68 testGridDefinitionsValues(parentElement, "50px 750px last", "20px middle 45p
x"); |
69 | 69 |
70 element = document.createElement("div"); | 70 element = document.createElement("div"); |
71 parentElement.appendChild(element); | 71 parentElement.appendChild(element); |
72 element.style.display = "grid"; | 72 element.style.display = "grid"; |
73 element.style.gridDefinitionColumns = "inherit"; | 73 element.style.gridDefinitionColumns = "inherit"; |
74 element.style.gridDefinitionRows = "inherit"; | 74 element.style.gridDefinitionRows = "inherit"; |
75 testGridDefinitionsValues(element, "50px 0px last", "20px middle 45px"); | 75 testGridDefinitionsValues(element, "50px 0px last", "20px middle 45px"); |
76 | 76 |
77 document.body.removeChild(parentElement); | 77 document.body.removeChild(parentElement); |
78 } | 78 } |
79 debug(""); | 79 debug(""); |
80 debug("Test setting grid-definition-columns and grid-definition-rows to 'inherit
' through JS"); | 80 debug("Test setting grid-definition-columns and grid-definition-rows to 'inherit
' through JS"); |
81 testInherit(); | 81 testInherit(); |
82 | 82 |
83 function testInitial() | 83 function testInitial() |
84 { | 84 { |
85 element = document.createElement("div"); | 85 element = document.createElement("div"); |
86 document.body.appendChild(element); | 86 document.body.appendChild(element); |
87 element.style.display = "grid"; | 87 element.style.display = "grid"; |
88 element.style.width = "800px"; | 88 element.style.width = "800px"; |
89 element.style.height = "600px"; | 89 element.style.height = "600px"; |
90 element.style.gridDefinitionColumns = "150% 'middle' 55px"; | 90 element.style.gridDefinitionColumns = "150% (middle) 55px"; |
91 element.style.gridDefinitionRows = "1fr 'line' 2fr 'line'"; | 91 element.style.gridDefinitionRows = "1fr (line) 2fr (line)"; |
92 testGridDefinitionsValues(element, "1200px middle 55px", "200px line 400px l
ine"); | 92 testGridDefinitionsValues(element, "1200px middle 55px", "200px line 400px l
ine"); |
93 | 93 |
94 element.style.gridDefinitionColumns = "initial"; | 94 element.style.gridDefinitionColumns = "initial"; |
95 element.style.gridDefinitionRows = "initial"; | 95 element.style.gridDefinitionRows = "initial"; |
96 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'none'"); | 96 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'none'"); |
97 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'none'"); | 97 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'none'"); |
98 | 98 |
99 document.body.removeChild(element); | 99 document.body.removeChild(element); |
100 } | 100 } |
101 debug(""); | 101 debug(""); |
102 debug("Test setting grid-definition-columns and grid-definition-rows to 'initial
' through JS"); | 102 debug("Test setting grid-definition-columns and grid-definition-rows to 'initial
' through JS"); |
103 testInitial(); | 103 testInitial(); |
OLD | NEW |