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-template-columns and grid-templa
te-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-template-columns| and |grid-template-rows| set through
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%"); | 5 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "53
% 99%", "27% 52%"); |
6 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto
auto", "auto auto"); | 6 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "auto
auto", "auto auto"); |
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"); | 8 testGridDefinitionsValues(document.getElementById("gridWithThreeItems"), "15px a
uto 100px", "120px 18px auto"); |
9 testGridDefinitionsValues(document.getElementById("gridWithPercentAndViewportPer
cent"), "50% 120px", "35% 168px"); | 9 testGridDefinitionsValues(document.getElementById("gridWithPercentAndViewportPer
cent"), "50% 120px", "35% 168px"); |
10 testGridDefinitionsValues(document.getElementById("gridWithFitContentAndFitAvail
able"), "none", "none"); | 10 testGridDefinitionsValues(document.getElementById("gridWithFitContentAndFitAvail
able"), "none", "none"); |
11 testGridDefinitionsValues(document.getElementById("gridWithMinMaxContent"), "min
-content max-content", "max-content min-content"); | 11 testGridDefinitionsValues(document.getElementById("gridWithMinMaxContent"), "min
-content max-content", "max-content min-content"); |
12 testGridDefinitionsValues(document.getElementById("gridWithMinMaxAndFixed"), "mi
nmax(45px, 30%) 15px", "120px minmax(35%, 10px)"); | 12 testGridDefinitionsValues(document.getElementById("gridWithMinMaxAndFixed"), "mi
nmax(45px, 30%) 15px", "120px minmax(35%, 10px)"); |
13 testGridDefinitionsValues(document.getElementById("gridWithMinMaxAndMinMaxConten
t"), "minmax(min-content, 30%) 15px", "120px minmax(35%, max-content)"); | 13 testGridDefinitionsValues(document.getElementById("gridWithMinMaxAndMinMaxConten
t"), "minmax(min-content, 30%) 15px", "120px minmax(35%, max-content)"); |
14 testGridDefinitionsValues(document.getElementById("gridWithFractionFraction"), "
1fr 2fr", "3fr 4fr"); | 14 testGridDefinitionsValues(document.getElementById("gridWithFractionFraction"), "
1fr 2fr", "3fr 4fr"); |
15 testGridDefinitionsValues(document.getElementById("gridWithFractionMinMax"), "mi
nmax(min-content, 45px) 2fr", "3fr minmax(14px, max-content)"); | 15 testGridDefinitionsValues(document.getElementById("gridWithFractionMinMax"), "mi
nmax(min-content, 45px) 2fr", "3fr minmax(14px, max-content)"); |
16 testGridDefinitionsValues(document.getElementById("gridWithCalcCalc"), "200px 10
0px", "150px 75px"); | 16 testGridDefinitionsValues(document.getElementById("gridWithCalcCalc"), "200px 10
0px", "150px 75px"); |
17 testGridDefinitionsValues(document.getElementById("gridWithCalcAndFixed"), "50%
80px", "88px 25%"); | 17 testGridDefinitionsValues(document.getElementById("gridWithCalcAndFixed"), "50%
80px", "88px 25%"); |
18 testGridDefinitionsValues(document.getElementById("gridWithCalcAndMinMax"), "cal
c(30px + 20%) minmax(min-content, 80px)", "minmax(25%, max-content) calc(10% - 7
px)"); | 18 testGridDefinitionsValues(document.getElementById("gridWithCalcAndMinMax"), "cal
c(30px + 20%) minmax(min-content, 80px)", "minmax(25%, max-content) calc(10% - 7
px)"); |
19 testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMax"), "
minmax(calc(23px + 10%), 400px) 120px", "150px minmax(5%, calc(50% - 125px))"); | 19 testGridDefinitionsValues(document.getElementById("gridWithCalcInsideMinMax"), "
minmax(calc(23px + 10%), 400px) 120px", "150px minmax(5%, calc(50% - 125px))"); |
20 | 20 |
21 debug(""); | 21 debug(""); |
22 debug("Test the initial value"); | 22 debug("Test the initial value"); |
23 var element = document.createElement("div"); | 23 var element = document.createElement("div"); |
24 document.body.appendChild(element); | 24 document.body.appendChild(element); |
25 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-column
s')", "'none'"); | 25 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-columns'
)", "'none'"); |
26 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-rows')
", "'none'"); | 26 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows')",
"'none'"); |
27 | 27 |
28 debug(""); | 28 debug(""); |
29 debug("Test getting and setting grid-definition-rows and grid-definition-columns
through JS"); | 29 debug("Test getting and setting grid-template-rows and grid-template-columns thr
ough JS"); |
30 testNonGridDefinitionsSetJSValues("18px 22px", "66px 70px"); | 30 testNonGridDefinitionsSetJSValues("18px 22px", "66px 70px"); |
31 testNonGridDefinitionsSetJSValues("55% 80%", "40% 63%"); | 31 testNonGridDefinitionsSetJSValues("55% 80%", "40% 63%"); |
32 testNonGridDefinitionsSetJSValues("auto auto", "auto auto"); | 32 testNonGridDefinitionsSetJSValues("auto auto", "auto auto"); |
33 testNonGridDefinitionsSetJSValues("auto 16em 22px", "56% 10em auto", "auto 160px
22px", "56% 100px auto"); | 33 testNonGridDefinitionsSetJSValues("auto 16em 22px", "56% 10em auto", "auto 160px
22px", "56% 100px auto"); |
34 testNonGridDefinitionsSetJSValues("16em minmax(16px, 20px)", "minmax(10%, 15%) a
uto", "160px minmax(16px, 20px)"); | 34 testNonGridDefinitionsSetJSValues("16em minmax(16px, 20px)", "minmax(10%, 15%) a
uto", "160px minmax(16px, 20px)"); |
35 testNonGridDefinitionsSetJSValues("16em 2fr", "14fr auto", "160px 2fr"); | 35 testNonGridDefinitionsSetJSValues("16em 2fr", "14fr auto", "160px 2fr"); |
36 testNonGridDefinitionsSetJSValues("50% 12vw", "5% 85vh", "50% 96px", "5% 510px")
; | 36 testNonGridDefinitionsSetJSValues("50% 12vw", "5% 85vh", "50% 96px", "5% 510px")
; |
37 | 37 |
38 debug(""); | 38 debug(""); |
39 debug("Test getting wrong values set from CSS"); | 39 debug("Test getting wrong values set from CSS"); |
40 var gridWithNoneAndAuto = document.getElementById("gridWithNoneAndAuto"); | 40 var gridWithNoneAndAuto = document.getElementById("gridWithNoneAndAuto"); |
41 shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-defin
ition-columns')", "'none'"); | 41 shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-templ
ate-columns')", "'none'"); |
42 shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-defin
ition-rows')", "'none'"); | 42 shouldBe("getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('grid-templ
ate-rows')", "'none'"); |
43 | 43 |
44 var gridWithNoneAndFixed = document.getElementById("gridWithNoneAndFixed"); | 44 var gridWithNoneAndFixed = document.getElementById("gridWithNoneAndFixed"); |
45 shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-defi
nition-columns')", "'none'"); | 45 shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-temp
late-columns')", "'none'"); |
46 shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-defi
nition-rows')", "'none'"); | 46 shouldBe("getComputedStyle(gridWithNoneAndFixed, '').getPropertyValue('grid-temp
late-rows')", "'none'"); |
47 | 47 |
48 debug(""); | 48 debug(""); |
49 debug("Test setting and getting wrong values from JS"); | 49 debug("Test setting and getting wrong values from JS"); |
50 testGridDefinitionsSetBadJSValues("none auto", "none auto"); | 50 testGridDefinitionsSetBadJSValues("none auto", "none auto"); |
51 testGridDefinitionsSetBadJSValues("none 16em", "none 56%"); | 51 testGridDefinitionsSetBadJSValues("none 16em", "none 56%"); |
52 testGridDefinitionsSetBadJSValues("none none", "none none"); | 52 testGridDefinitionsSetBadJSValues("none none", "none none"); |
53 testGridDefinitionsSetBadJSValues("auto none", "auto none"); | 53 testGridDefinitionsSetBadJSValues("auto none", "auto none"); |
54 testGridDefinitionsSetBadJSValues("auto none 16em", "auto 18em none"); | 54 testGridDefinitionsSetBadJSValues("auto none 16em", "auto 18em none"); |
55 testGridDefinitionsSetBadJSValues("-webkit-fit-content -webkit-fit-content", "-w
ebkit-fit-available -webkit-fit-available"); | 55 testGridDefinitionsSetBadJSValues("-webkit-fit-content -webkit-fit-content", "-w
ebkit-fit-available -webkit-fit-available"); |
56 testGridDefinitionsSetBadJSValues("auto minmax(16px, auto)", "minmax(auto, 15%)
10vw"); | 56 testGridDefinitionsSetBadJSValues("auto minmax(16px, auto)", "minmax(auto, 15%)
10vw"); |
57 // Negative values are not allowed. | 57 // Negative values are not allowed. |
58 testGridDefinitionsSetBadJSValues("-10px minmax(16px, 32px)", "minmax(10%, 15%)
-10vw"); | 58 testGridDefinitionsSetBadJSValues("-10px minmax(16px, 32px)", "minmax(10%, 15%)
-10vw"); |
59 testGridDefinitionsSetBadJSValues("10px minmax(16px, -1vw)", "minmax(-1%, 15%) 1
0vw"); | 59 testGridDefinitionsSetBadJSValues("10px minmax(16px, -1vw)", "minmax(-1%, 15%) 1
0vw"); |
60 | 60 |
61 function testInherit() | 61 function testInherit() |
62 { | 62 { |
63 var parentElement = document.createElement("div"); | 63 var parentElement = document.createElement("div"); |
64 document.body.appendChild(parentElement); | 64 document.body.appendChild(parentElement); |
65 parentElement.style.gridDefinitionColumns = "50px 1fr (last)"; | 65 parentElement.style.gridTemplateColumns = "50px 1fr (last)"; |
66 parentElement.style.gridDefinitionRows = "101% (middle) 45px"; | 66 parentElement.style.gridTemplateRows = "101% (middle) 45px"; |
67 testGridDefinitionsValues(parentElement, "50px 1fr (last)", "101% (middle) 4
5px"); | 67 testGridDefinitionsValues(parentElement, "50px 1fr (last)", "101% (middle) 4
5px"); |
68 | 68 |
69 element = document.createElement("div"); | 69 element = document.createElement("div"); |
70 parentElement.appendChild(element); | 70 parentElement.appendChild(element); |
71 element.style.gridDefinitionColumns = "inherit"; | 71 element.style.gridTemplateColumns = "inherit"; |
72 element.style.gridDefinitionRows = "inherit"; | 72 element.style.gridTemplateRows = "inherit"; |
73 testGridDefinitionsValues(element, "50px 1fr (last)", "101% (middle) 45px"); | 73 testGridDefinitionsValues(element, "50px 1fr (last)", "101% (middle) 45px"); |
74 | 74 |
75 document.body.removeChild(parentElement); | 75 document.body.removeChild(parentElement); |
76 } | 76 } |
77 debug(""); | 77 debug(""); |
78 debug("Test setting grid-definition-columns and grid-definition-rows to 'inherit
' through JS"); | 78 debug("Test setting grid-template-columns and grid-template-rows to 'inherit' th
rough JS"); |
79 testInherit(); | 79 testInherit(); |
80 | 80 |
81 function testInitial() | 81 function testInitial() |
82 { | 82 { |
83 element = document.createElement("div"); | 83 element = document.createElement("div"); |
84 document.body.appendChild(element); | 84 document.body.appendChild(element); |
85 element.style.gridDefinitionColumns = "150% (middle) 55px"; | 85 element.style.gridTemplateColumns = "150% (middle) 55px"; |
86 element.style.gridDefinitionRows = "1fr (line) 2fr (line)"; | 86 element.style.gridTemplateRows = "1fr (line) 2fr (line)"; |
87 testGridDefinitionsValues(element, "150% (middle) 55px", "1fr (line) 2fr (li
ne)"); | 87 testGridDefinitionsValues(element, "150% (middle) 55px", "1fr (line) 2fr (li
ne)"); |
88 | 88 |
89 element.style.gridDefinitionColumns = "initial"; | 89 element.style.gridTemplateColumns = "initial"; |
90 element.style.gridDefinitionRows = "initial"; | 90 element.style.gridTemplateRows = "initial"; |
91 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-co
lumns')", "'none'"); | 91 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu
mns')", "'none'"); |
92 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-definition-ro
ws')", "'none'"); | 92 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows
')", "'none'"); |
93 | 93 |
94 document.body.removeChild(element); | 94 document.body.removeChild(element); |
95 } | 95 } |
96 debug(""); | 96 debug(""); |
97 debug("Test setting grid-definition-columns and grid-definition-rows to 'initial
' through JS"); | 97 debug("Test setting grid-template-columns and grid-template-rows to 'initial' th
rough JS"); |
98 testInitial(); | 98 testInitial(); |
OLD | NEW |