1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
<!DOCTYPE HTML>
<html>
<head>
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<link href="resources/grid.css" rel="stylesheet">
<link href="resources/grid-alignment.css" rel="stylesheet">
<style>
.definite {
/* Give an explicit size to the grid so that percentage grid tracks have a consistent resolution */
width: 800px;
height: 600px;
}
.gridItem {
grid-column: 1;
grid-row: 1;
height: 22px;
width: 77px;
}
.gridWithFixed {
grid-template-columns: [first] 10px;
grid-template-rows: [first] 15px;
}
.gridWithPercent {
grid-template-columns: 53% [last];
grid-template-rows: 27% [last];
}
.gridWithAuto {
grid-template-columns: [first] auto;
grid-template-rows: auto [last];
}
.gridWithMinMax {
grid-template-columns: [first] minmax(10%, 15px);
grid-template-rows: minmax(20px, 50%) [last];
}
.gridWithFixedMultiple {
grid-template-columns: [first nav] 10px [last];
grid-template-rows: [first nav] 15px [last];
}
.gridWithPercentageSameStringMultipleTimes {
grid-template-columns: [first nav] 10% [nav] 15% [last];
grid-template-rows: [first nav2] 25% [nav2] 75% [last];
}
.gridWithRepeat {
grid-template-columns: [first] 10px repeat(2, [nav nav2] 50%);
grid-template-rows: 100px repeat(2, [nav nav2] 25%) [last];
}
.gridWithEmptyBrackets {
grid-template-columns: [] 10px;
grid-template-rows: 20px [ ] 50px [];
}
.gridWithoutBrackets {
grid-template-columns: first nav 10px;
grid-template-rows: first 50% last;
}
.gridWithInvalidNestedBrackets {
grid-template-columns: [first [nav]] 10px [last];
grid-template-rows: [first] 50% [last [nav] nav2];
}
.gridWithUnbalancedBrackets {
grid-template-columns: [first nav 10px;
grid-template-rows: [first] 50% last];
}
.gridWithMisplacedBrackets {
grid-template-columns: [first 10px] 50%;
grid-template-rows: [first] [nav 50%];
}
.gridWithContiguousBrackets {
grid-template-columns: [first] [nav] 10px;
grid-template-rows: 50px [nav nav2] [middle] 10px;
}
.gridWithInvalidCustomIdents {
grid-template-columns: [first span] 10px;
grid-template-rows: 50px [inherit] 10px;
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div class="grid definite gridWithFixed" id="gridWithFixedElement"></div>
<div class="grid definite gridWithPercent" id="gridWithPercentElement"></div>
<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSize"></div>
<div class="grid min-content gridWithPercent" id="gridWithPercentWithoutSizeWithChildren">
<div class="gridItem"></div>
</div>
<div class="grid definite gridWithAuto contentStart" id="gridWithAutoElement"></div>
<div class="grid definite gridWithAuto contentStart" id="gridWithAutoWithChildrenElement">
<div class="gridItem"></div>
</div>
<div class="grid definite gridWithMinMax" id="gridWithMinMax"></div>
<div class="grid definite gridWithFixedMultiple" id="gridWithFixedMultiple"></div>
<div class="grid definite gridWithPercentageSameStringMultipleTimes" id="gridWithPercentageSameStringMultipleTimes"></div>
<div class="grid definite gridWithRepeat" id="gridWithRepeatElement"></div>
<div class="grid definite gridWithEmptyBrackets" id="gridWithEmptyBrackets"></div>
<div class="grid definite gridWithoutBrackets" id="gridWithoutBrackets"></div>
<div class="grid definite gridWithInvalidNestedBrackets" id="gridWithInvalidNestedBrackets"></div>
<div class="grid definite gridWithUnbalancedBrackets" id="gridWithUnbalancedBrackets"></div>
<div class="grid definite gridWithMisplacedBrackets" id="gridWithMisplacedBrackets"></div>
<div class="grid definite gridWithContiguousBrackets" id="gridWithContiguousBrackets"></div>
<div class="grid definite gridWithInvalidCustomIdents" id="gridWithInvalidCustomIdents"></div>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script>
description('Test that setting and getting grid-template-columns and grid-template-rows works as expected');
debug("Test getting grid-template-columns and grid-template-rows set through CSS");
testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), "[first] 10px", "[first] 15px");
testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px [last]", "162px [last]");
testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSize"), "0px [last]", "0px [last]");
testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSizeWithChildren"), "77px [last]", "22px [last]");
testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[first] 0px", "0px [last]");
testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenElement"), "[first] 77px", "22px [last]");
testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first] 80px", "300px [last]");
testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]");
testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStringMultipleTimes"), "[first nav] 80px [nav] 120px [last]", "[first nav2] 150px [nav2] 450px [last]");
testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "[first] 10px [nav nav2] 400px [nav nav2] 400px", "100px [nav nav2] 150px [nav nav2] 150px [last]");
testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"), "10px", "20px 50px");
debug("");
debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
testGridDefinitionsSetJSValues("[first] 18px", "66px [last]", "[first] 18px", "66px [last]", "[first] 18px", "66px [last]");
testGridDefinitionsSetJSValues("[first] 55%", "40% [last]", "[first] 440px", "240px [last]", "[first] 55%", "40% [last]");
testGridDefinitionsSetJSValues("[first] auto", "auto [last]", "[first] 0px", "0px [last]", "[first] auto", "auto [last]");
testGridDefinitionsSetJSValues("[first] min-content", "min-content [last]", "[first] 0px", "0px [last]", "[first] min-content", "min-content [last]");
testGridDefinitionsSetJSValues("[first] max-content", "max-content [last]", "[first] 0px", "0px [last]", "[first] max-content", "max-content [last]");
testGridDefinitionsSetJSValues("[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]", "[first] 440px", "240px [last]", "[first] minmax(55%, 45px)", "minmax(30px, 40%) [last]");
testGridDefinitionsSetJSValues("[first] minmax(22em, max-content)", "minmax(max-content, 5em) [last]", "[first] 220px", "50px [last]", "[first] minmax(22em, max-content)", "minmax(max-content, 5em) [last]");
testGridDefinitionsSetJSValues("[first] minmax(22em, min-content)", "minmax(min-content, 5em) [last]", "[first] 220px", "50px [last]", "[first] minmax(22em, min-content)", "minmax(min-content, 5em) [last]");
testGridDefinitionsSetJSValues("[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]", "[first] 0px", "0px [last]", "[first] minmax(min-content, max-content)", "minmax(max-content, min-content) [last]");
testGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]", "[first nav] 0px [last]", "[first nav] 0px [last]", "[first nav] minmax(min-content, max-content) [last]", "[first nav] minmax(max-content, min-content) [last]");
testGridDefinitionsSetJSValues("[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]", "[first nav] 0px [nav] 0px [last]", "[first nav2] 0px [nav2] 15px [last]", "[first nav] minmax(min-content, max-content) [nav] auto [last]", "[first nav2] minmax(max-content, min-content) [nav2] minmax(10px, 15px) [last]");
testGridDefinitionsSetJSValues("[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] 0px [foo] 0px [bar]", "[foo bar] 0px [foo] 0px [bar]", "[foo bar] auto [foo] auto [bar]", "[foo bar] auto [foo] auto [bar]");
testGridDefinitionsSetJSValues("[first] auto repeat(2, [foo bar] 20px)", "220px [foo] repeat(1, 50% [baz]", "[first] 0px [foo bar] 20px [foo bar] 20px", "220px [foo] 300px [baz]", "[first] auto [foo bar] 20px [foo bar] 20px", "220px [foo] 50% [baz]");
debug("");
debug("Test getting invalid grid-template-columns and grid-template-rows set through CSS");
testGridDefinitionsValues(document.getElementById("gridWithoutBrackets"), "none", "none");
testGridDefinitionsValues(document.getElementById("gridWithInvalidNestedBrackets"), "none", "none");
testGridDefinitionsValues(document.getElementById("gridWithUnbalancedBrackets"), "none", "none");
testGridDefinitionsValues(document.getElementById("gridWithMisplacedBrackets"), "none", "none");
testGridDefinitionsValues(document.getElementById("gridWithContiguousBrackets"), "none", "none");
testGridDefinitionsValues(document.getElementById("gridWithInvalidCustomIdents"), "none", "none");
debug("");
debug("Test getting and setting invalid grid-template-columns and grid-template-rows through JS");
testGridDefinitionsSetBadJSValues("[foo]", "[bar");
testGridDefinitionsSetBadJSValues("[foo bar]", "[bar foo]");
testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em");
testGridDefinitionsSetBadJSValues("[foo [bar]] 10px", "50% [[baz bar] foo] 2em");
testGridDefinitionsSetBadJSValues("[foo bar 10px", "50% [baz bar] foo] 2em");
testGridDefinitionsSetBadJSValues("[foo 10px] 2em", "[50% bar] [foo]");
testGridDefinitionsSetBadJSValues("[auto] 2em", "50% [bar initial]");
</script>
</body>
</html>
|
