OLD | NEW |
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
5 <style> | 5 <style> |
6 .gridAutoFixedFixed { | 6 .gridAutoFixedFixed { |
7 grid-auto-rows: 30px; | 7 grid-auto-rows: 30px; |
8 grid-auto-columns: 50px; | 8 grid-auto-columns: 50px; |
9 } | 9 } |
10 | 10 |
(...skipping 19 matching lines...) Expand all Loading... |
30 grid-auto-columns: minmax(10vw, auto); | 30 grid-auto-columns: minmax(10vw, auto); |
31 } | 31 } |
32 | 32 |
33 .gridAutoMultipleTracks { | 33 .gridAutoMultipleTracks { |
34 width: 100px; | 34 width: 100px; |
35 height: 50px; | 35 height: 50px; |
36 grid-auto-rows: 10px 20px 30px; | 36 grid-auto-rows: 10px 20px 30px; |
37 grid-auto-columns: 25px 50px 100px; | 37 grid-auto-columns: 25px 50px 100px; |
38 } | 38 } |
39 | 39 |
| 40 .gridAutoFitContent { |
| 41 height: 50px; |
| 42 grid-auto-columns: fit-content(30px); |
| 43 grid-auto-rows: fit-content(50%); |
| 44 } |
| 45 |
40 </style> | 46 </style> |
41 <script src="../../resources/js-test.js"></script> | 47 <script src="../../resources/js-test.js"></script> |
42 <script src="resources/grid-definitions-parsing-utils.js"></script> | 48 <script src="resources/grid-definitions-parsing-utils.js"></script> |
43 </head> | 49 </head> |
44 <body> | 50 <body> |
45 <div class="grid gridAutoFixedFixed" id="gridAutoFixedFixed"></div> | 51 <div class="grid gridAutoFixedFixed" id="gridAutoFixedFixed"></div> |
46 <div class="grid gridAutoMinMax" id="gridAutoMinMax"></div> | 52 <div class="grid gridAutoMinMax" id="gridAutoMinMax"></div> |
47 <div class="grid gridAutoMinMaxContent" id="gridAutoMinMaxContent"></div> | 53 <div class="grid gridAutoMinMaxContent" id="gridAutoMinMaxContent"></div> |
48 <div class="grid gridAutoAutoInMinMax" id="gridAutoAutoInMinMax"></div> | 54 <div class="grid gridAutoAutoInMinMax" id="gridAutoAutoInMinMax"></div> |
49 <div class="grid gridAutoFixedFixed" id="gridAutoFixedFixedWithChildren"> | 55 <div class="grid gridAutoFixedFixed" id="gridAutoFixedFixedWithChildren"> |
50 <div class="sizedToGridArea firstRowFirstColumn"></div> | 56 <div class="sizedToGridArea firstRowFirstColumn"></div> |
51 </div> | 57 </div> |
52 <div class="grid gridAutoFixedFixedWithFixedFixed" id="gridAutoFixedFixedWithFix
edFixedWithChildren"> | 58 <div class="grid gridAutoFixedFixedWithFixedFixed" id="gridAutoFixedFixedWithFix
edFixedWithChildren"> |
53 <div class="sizedToGridArea thirdRowAutoColumn"></div> | 59 <div class="sizedToGridArea thirdRowAutoColumn"></div> |
54 <div class="sizedToGridArea autoRowThirdColumn"></div> | 60 <div class="sizedToGridArea autoRowThirdColumn"></div> |
55 </div> | 61 </div> |
56 <div class="grid gridAutoMultipleTracks" id="gridAutoMultipleTracks"> | 62 <div class="grid gridAutoMultipleTracks" id="gridAutoMultipleTracks"> |
57 <div style="grid-column: 1; grid-row: 1"></div> | 63 <div style="grid-column: 1; grid-row: 1"></div> |
58 <div style="grid-column: 2; grid-row: 2"></div> | 64 <div style="grid-column: 2; grid-row: 2"></div> |
59 <div style="grid-column: 3; grid-row: 3"></div> | 65 <div style="grid-column: 3; grid-row: 3"></div> |
60 <div style="grid-column: 4; grid-row: 4"></div> | 66 <div style="grid-column: 4; grid-row: 4"></div> |
61 </div> | 67 </div> |
62 <div class="grid gridAutoMultipleTracks" id="gridAutoMultipleTracksNegativeIndex
es"> | 68 <div class="grid gridAutoMultipleTracks" id="gridAutoMultipleTracksNegativeIndex
es"> |
63 <div style="grid-column: -2; grid-row: -2"></div> | 69 <div style="grid-column: -2; grid-row: -2"></div> |
64 <div style="grid-column: -3; grid-row: -3"></div> | 70 <div style="grid-column: -3; grid-row: -3"></div> |
65 <div style="grid-column: -4; grid-row: -4"></div> | 71 <div style="grid-column: -4; grid-row: -4"></div> |
66 <div style="grid-column: -5; grid-row: -5"></div> | 72 <div style="grid-column: -5; grid-row: -5"></div> |
67 </div> | 73 </div> |
| 74 <div class="grid gridAutoFitContent" id="gridAutoFitContent"></div> |
68 | 75 |
69 <script> | 76 <script> |
70 description('Test that setting and getting grid-auto-columns and grid-auto-rows
works as expected'); | 77 description('Test that setting and getting grid-auto-columns and grid-auto-rows
works as expected'); |
71 | 78 |
72 debug("Test getting grid-auto-columns and grid-auto-rows set through CSS"); | 79 debug("Test getting grid-auto-columns and grid-auto-rows set through CSS"); |
73 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixed"), "30
px", "50px"); | 80 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixed"), "30
px", "50px"); |
74 testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMax"), "minmax
(10%, 15px)", "minmax(30%, 100px)"); | 81 testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMax"), "minmax
(10%, 15px)", "minmax(30%, 100px)"); |
75 testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMaxContent"),
"min-content", "max-content"); | 82 testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMaxContent"),
"min-content", "max-content"); |
76 testGridAutoDefinitionsValues(document.getElementById("gridAutoAutoInMinMax"), "
minmax(auto, 48px)", "minmax(80px, auto)"); | 83 testGridAutoDefinitionsValues(document.getElementById("gridAutoAutoInMinMax"), "
minmax(auto, 48px)", "minmax(80px, auto)"); |
| 84 testGridAutoDefinitionsValues(document.getElementById("gridAutoFitContent"), "fi
t-content(50%)", "fit-content(30px)"); |
77 | 85 |
78 debug(""); | 86 debug(""); |
79 debug("Test that getting grid-template-columns and grid-template-rows set throug
h CSS lists every track listed whether implicitly or explicitly created"); | 87 debug("Test that getting grid-template-columns and grid-template-rows set throug
h CSS lists every track listed whether implicitly or explicitly created"); |
80 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChi
ldren"), "30px", "50px"); | 88 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChi
ldren"), "30px", "50px"); |
81 testGridDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChildre
n"), "50px", "30px"); | 89 testGridDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChildre
n"), "50px", "30px"); |
82 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFix
edFixedWithChildren"), "30px", "40px"); | 90 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFix
edFixedWithChildren"), "30px", "40px"); |
83 testGridDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFi
xedWithChildren"), "20px 40px 40px", "15px 30px 30px"); | 91 testGridDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFi
xedWithChildren"), "20px 40px 40px", "15px 30px 30px"); |
84 testGridDefinitionsValues(document.getElementById("gridAutoMultipleTracks"), "25
px 50px 100px 25px", "10px 20px 30px 10px"); | 92 testGridDefinitionsValues(document.getElementById("gridAutoMultipleTracks"), "25
px 50px 100px 25px", "10px 20px 30px 10px"); |
85 testGridDefinitionsValues(document.getElementById("gridAutoMultipleTracksNegativ
eIndexes"), "100px 25px 50px 100px", "30px 10px 20px 30px"); | 93 testGridDefinitionsValues(document.getElementById("gridAutoMultipleTracksNegativ
eIndexes"), "100px 25px 50px 100px", "30px 10px 20px 30px"); |
86 | 94 |
(...skipping 19 matching lines...) Expand all Loading... |
106 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid
-auto-columns')", computedAutoCols || autoCols); | 114 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid
-auto-columns')", computedAutoCols || autoCols); |
107 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid
-auto-rows')", computedAutoRows || autoRows); | 115 shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid
-auto-rows')", computedAutoRows || autoRows); |
108 } | 116 } |
109 | 117 |
110 debug(""); | 118 debug(""); |
111 debug("Test getting and setting grid-auto-columns and grid-auto-rows through JS"
); | 119 debug("Test getting and setting grid-auto-columns and grid-auto-rows through JS"
); |
112 testAutoValues("18em", "66em", "180px", "660px"); | 120 testAutoValues("18em", "66em", "180px", "660px"); |
113 testAutoValues("minmax(min-content, 8vh)", "minmax(10vw, min-content)", "minmax(
min-content, 48px)", "minmax(80px, min-content)"); | 121 testAutoValues("minmax(min-content, 8vh)", "minmax(10vw, min-content)", "minmax(
min-content, 48px)", "minmax(80px, min-content)"); |
114 testAutoValues("minmax(min-content, max-content)", "minmax(max-content, min-cont
ent)"); | 122 testAutoValues("minmax(min-content, max-content)", "minmax(max-content, min-cont
ent)"); |
115 testAutoValues("minmax(min-content, 10px) 48px 5%", "auto 30px minmax(10%, 60%)"
); | 123 testAutoValues("minmax(min-content, 10px) 48px 5%", "auto 30px minmax(10%, 60%)"
); |
| 124 testAutoValues("fit-content(10px) fit-content(30%)", "fit-content(5%) fit-conten
t(calc(20px + 2em))", "fit-content(10px) fit-content(30%)", "fit-content(5%) fit
-content(40px)"); |
116 | 125 |
117 debug(""); | 126 debug(""); |
118 debug("Test setting grid-auto-columns and grid-auto-rows to bad minmax value thr
ough JS"); | 127 debug("Test setting grid-auto-columns and grid-auto-rows to bad minmax value thr
ough JS"); |
119 testAutoValues("minmax(10px 20px)", "minmax(10px)", "auto", "auto"); | 128 testAutoValues("minmax(10px 20px)", "minmax(10px)", "auto", "auto"); |
120 testAutoValues("minmax(minmax(10px, 20px), 20px)", "minmax(10px, 20px, 30px)", "
auto", "auto"); | 129 testAutoValues("minmax(minmax(10px, 20px), 20px)", "minmax(10px, 20px, 30px)", "
auto", "auto"); |
121 testAutoValues("minmax()", "minmax(30px 30% 30em)", "auto", "auto"); | 130 testAutoValues("minmax()", "minmax(30px 30% 30em)", "auto", "auto"); |
122 testAutoValues("none", "none", "auto", "auto"); | 131 testAutoValues("none", "none", "auto", "auto"); |
123 testAutoValues("10px [a] 20px", "[z] auto [y] min-content", "auto", "auto"); | 132 testAutoValues("10px [a] 20px", "[z] auto [y] min-content", "auto", "auto"); |
124 testAutoValues("repeat(2, 10px [a] 20px)", "[z] repeat(auto-fit, 100px)", "auto"
, "auto"); | 133 testAutoValues("repeat(2, 10px [a] 20px)", "[z] repeat(auto-fit, 100px)", "auto"
, "auto"); |
| 134 testAutoValues("fit-content(min-content) fit-content(auto)", "fit-content(fit-co
ntent(3%)) fit-content(minmax(2px, 30px))", "auto", "auto"); |
125 | 135 |
126 function testInherit() | 136 function testInherit() |
127 { | 137 { |
128 var parentElement = document.createElement("div"); | 138 var parentElement = document.createElement("div"); |
129 document.body.appendChild(parentElement); | 139 document.body.appendChild(parentElement); |
130 parentElement.style.gridAutoColumns = "50px"; | 140 parentElement.style.gridAutoColumns = "50px"; |
131 parentElement.style.gridAutoRows = "101%"; | 141 parentElement.style.gridAutoRows = "101%"; |
132 | 142 |
133 element = document.createElement("div"); | 143 element = document.createElement("div"); |
134 parentElement.appendChild(element); | 144 parentElement.appendChild(element); |
(...skipping 23 matching lines...) Expand all Loading... |
158 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')",
"'auto'"); | 168 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')",
"'auto'"); |
159 | 169 |
160 document.body.removeChild(element); | 170 document.body.removeChild(element); |
161 } | 171 } |
162 debug(""); | 172 debug(""); |
163 debug("Test setting grid-auto-columns and grid-auto-rows to 'initial' through JS
"); | 173 debug("Test setting grid-auto-columns and grid-auto-rows to 'initial' through JS
"); |
164 testInitial(); | 174 testInitial(); |
165 </script> | 175 </script> |
166 </body> | 176 </body> |
167 </html> | 177 </html> |
OLD | NEW |