[css-grid] mimax(auto, <flex>) should be serialized as <flex>
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-auto-columns-rows-get-set.html
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
2 <html>
3 <head>
4 <link href="resources/grid.css" rel="stylesheet">
5 <style>
6 .gridAutoFixedFixed {
7     grid-auto-rows: 30px;
8     grid-auto-columns: 50px;
9 }
10
11 .gridAutoMinMax {
12     grid-auto-rows: minmax(10%, 15px);
13     grid-auto-columns: minmax(30%, 100px);
14 }
15
16 .gridAutoMinMaxContent {
17     grid-auto-rows: -webkit-min-content;
18     grid-auto-columns: -webkit-max-content;
19 }
20
21
22 .gridAutoFixedFixedWithFixedFixed {
23     grid-auto-rows: 30px;
24     grid-auto-columns: 40px;
25     grid-template-rows: 15px;
26     grid-template-columns: 20px;
27 }
28
29 .gridAutoAutoInMinMax {
30     grid-auto-rows: minmax(auto, 8vh);
31     grid-auto-columns: minmax(10vw, auto);
32 }
33
34 .gridAutoMultipleTracks {
35     width: 100px;
36     height: 50px;
37     grid-auto-rows: 10px 20px 30px;
38     grid-auto-columns: 25px 50px 100px;
39 }
40
41 .gridAutoFitContent {
42     height: 50px;
43     grid-auto-columns: fit-content(30px);
44     grid-auto-rows: fit-content(50%);
45 }
46
47 </style>
48 <script src="../../resources/js-test-pre.js"></script>
49 <script src="resources/grid-definitions-parsing-utils.js"></script>
50 </head>
51 <body>
52 <div class="grid gridAutoFixedFixed" id="gridAutoFixedFixed"></div>
53 <div class="grid gridAutoMinMax" id="gridAutoMinMax"></div>
54 <div class="grid gridAutoMinMaxContent" id="gridAutoMinMaxContent"></div>
55 <div class="grid gridAutoAutoInMinMax" id="gridAutoAutoInMinMax"></div>
56 <div class="grid gridAutoFixedFixed" id="gridAutoFixedFixedWithChildren">
57     <div class="sizedToGridArea firstRowFirstColumn"></div>
58 </div>
59 <div class="grid gridAutoFixedFixedWithFixedFixed" id="gridAutoFixedFixedWithFixedFixedWithChildren">
60     <div class="sizedToGridArea thirdRowAutoColumn"></div>
61     <div class="sizedToGridArea autoRowThirdColumn"></div>
62 </div>
63 <div class="grid gridAutoMultipleTracks" id="gridAutoMultipleTracks">
64     <div style="grid-column: 1; grid-row: 1"></div>
65     <div style="grid-column: 2; grid-row: 2"></div>
66     <div style="grid-column: 3; grid-row: 3"></div>
67     <div style="grid-column: 4; grid-row: 4"></div>
68 </div>
69 <div class="grid gridAutoMultipleTracks" id="gridAutoMultipleTracksNegativeIndexes">
70     <div style="grid-column: -2; grid-row: -2"></div>
71     <div style="grid-column: -3; grid-row: -3"></div>
72     <div style="grid-column: -4; grid-row: -4"></div>
73     <div style="grid-column: -5; grid-row: -5"></div>
74 </div>
75 <div class="grid gridAutoFitContent" id="gridAutoFitContent"></div>
76
77 <script>
78 description('Test that setting and getting grid-auto-columns and grid-auto-rows works as expected');
79
80 debug("Test getting grid-auto-columns and grid-auto-rows set through CSS");
81 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixed"), "30px", "50px");
82 testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMax"), "minmax(10%, 15px)", "minmax(30%, 100px)");
83 testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMaxContent"), "-webkit-min-content", "-webkit-max-content");
84 testGridAutoDefinitionsValues(document.getElementById("gridAutoAutoInMinMax"), "minmax(auto, 48px)", "minmax(80px, auto)");
85 testGridAutoDefinitionsValues(document.getElementById("gridAutoFitContent"), "fit-content(50%)", "fit-content(30px)");
86
87 debug("");
88 debug("Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created");
89 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithChildren"), "30px", "50px");
90 testGridTemplatesValues(document.getElementById("gridAutoFixedFixedWithChildren"), "50px", "30px");
91 testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "30px", "40px");
92 testGridTemplatesValues(document.getElementById("gridAutoFixedFixedWithFixedFixedWithChildren"), "20px", "15px", "20px 40px 40px", "15px 30px 30px");
93 testGridTemplatesValues(document.getElementById("gridAutoMultipleTracks"), "25px 50px 100px 25px", "10px 20px 30px 10px");
94 testGridTemplatesValues(document.getElementById("gridAutoMultipleTracksNegativeIndexes"), "100px 25px 50px 100px", "30px 10px 20px 30px");
95
96 debug("");
97 debug("Test that grid-template-* definitions are not affected by grid-auto-* definitions");
98 testGridTemplatesValues(document.getElementById("gridAutoFixedFixed"), "none", "none");
99 testGridTemplatesValues(document.getElementById("gridAutoMinMax"), "none", "none");
100 testGridTemplatesValues(document.getElementById("gridAutoMinMaxContent"), "none", "none");
101
102 debug("");
103 debug("Test the initial value");
104 var element = document.createElement("div");
105 document.body.appendChild(element);
106 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
107 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
108
109 function testAutoValues(autoCols, autoRows, computedAutoCols, computedAutoRows) {
110      element = document.createElement("div");
111      document.body.appendChild(element);
112      element.style.fontSize = "10px";
113      element.style.gridAutoColumns = autoCols;
114      element.style.gridAutoRows = autoRows;
115      shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", computedAutoCols || autoCols);
116      shouldBeEqualToString("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", computedAutoRows || autoRows);
117 }
118
119 debug("");
120 debug("Test getting and setting grid-auto-columns and grid-auto-rows through JS");
121 testAutoValues("18em", "66em", "180px", "660px");
122 testAutoValues("minmax(-webkit-min-content, 8vh)", "minmax(10vw, -webkit-min-content)", "minmax(-webkit-min-content, 48px)", "minmax(80px, -webkit-min-content)");
123 testAutoValues("minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content)");
124 testAutoValues("minmax(-webkit-min-content, 10px) 48px 5%", "auto 30px minmax(10%, 60%)");
125 testAutoValues("fit-content(10px) fit-content(30%)", "fit-content(5%) fit-content(calc(20px + 2em))", "fit-content(10px) fit-content(30%)", "fit-content(5%) fit-content(40px)");
126 testAutoValues("minmax(auto, 2fr)", "minmax(auto, 1fr)", "2fr", "1fr");
127
128 debug("");
129 debug("Test setting grid-auto-columns and grid-auto-rows to bad minmax value through JS");
130 testAutoValues("minmax(10px 20px)", "minmax(10px)", "auto", "auto");
131 testAutoValues("minmax(minmax(10px, 20px), 20px)", "minmax(10px, 20px, 30px)", "auto", "auto");
132 testAutoValues("minmax()", "minmax(30px 30% 30em)", "auto", "auto");
133 testAutoValues("none", "none", "auto", "auto");
134 testAutoValues("10px [a] 20px", "[z] auto [y] -webkit-min-content", "auto", "auto");
135 testAutoValues("repeat(2, 10px [a] 20px)", "[z] repeat(auto-fit, 100px)", "auto", "auto");
136 testAutoValues("fit-content(min-content) fit-content(auto)", "fit-content(fit-content(3%)) fit-content(minmax(2px, 30px))", "auto", "auto");
137
138 function testInherit()
139 {
140     var parentElement = document.createElement("div");
141     document.body.appendChild(parentElement);
142     parentElement.style.gridAutoColumns = "50px";
143     parentElement.style.gridAutoRows = "101%";
144
145     element = document.createElement("div");
146     parentElement.appendChild(element);
147     element.style.gridAutoColumns = "inherit";
148     element.style.gridAutoRows = "inherit";
149     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'50px'");
150     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'101%'");
151
152     document.body.removeChild(parentElement);
153 }
154 debug("");
155 debug("Test setting grid-auto-columns and grid-auto-rows to 'inherit' through JS");
156 testInherit();
157
158 function testInitial()
159 {
160     element = document.createElement("div");
161     document.body.appendChild(element);
162     element.style.gridAutoColumns = "150%";
163     element.style.gridAutoRows = "1fr";
164     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'150%'");
165     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'1fr'");
166
167     element.style.gridAutoColumns = "initial";
168     element.style.gridAutoRows = "initial";
169     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns')", "'auto'");
170     shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
171
172     document.body.removeChild(element);
173 }
174 debug("");
175 debug("Test setting grid-auto-columns and grid-auto-rows to 'initial' through JS");
176 testInitial();
177 </script>
178 <script src="../../resources/js-test-post.js"></script>
179 </body>
180 </html>