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
|
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<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;
width: 33px;
height: 44px;
}
.gridItem2 {
grid-column: 2;
grid-row: 2;
width: 66px;
height: 77px;
}
.singleSingleTrackRepeat {
grid-template-rows: repeat(1, 18px);
grid-template-columns: repeat(1, 15%);
}
.twoSingleTrackRepeat {
grid-template-rows: repeat(2, auto);
grid-template-columns: repeat(2, minmax(15px, 50%));
}
.twoDoubleTrackRepeat {
grid-template-rows: repeat(2, minmax(5px, 10px) auto);
grid-template-columns: repeat(2, auto minmax(100px, 120px));
}
.twoDoubleTrackWithNamedGridLineRepeat {
grid-template-rows: repeat(2, 10px [start] auto [end]);
grid-template-columns: repeat(2, auto [middle] 250px [end]);
}
.twoDoubleTrackWithTrailingNamedGridLineRepeat {
grid-template-rows: repeat(2, [before] 10px);
grid-template-columns: repeat(2, [before] auto);
}
.trailingNamedGridLineRepeat {
grid-template-rows: repeat(1, 10px) [end];
grid-template-columns: repeat(1, 250px) [end];
}
.leadingNamedGridLineRepeat {
grid-template-rows: [start] repeat(2, 10px);
grid-template-columns: [start] repeat(2, 250px);
}
.mixRepeatAfterNonRepeat {
grid-template-rows: auto repeat(2, 10px);
grid-template-columns: [start] 140px repeat(2, 250px);
}
.mixNonRepeatAfterRepeat {
grid-template-rows: repeat(2, 10px) [end] auto;
grid-template-columns: repeat(2, 250px) 15% [last];
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div class="grid definite singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize"></div>
<div class="grid min-content singleSingleTrackRepeat" id="singleSingleTrackRepeatWithoutSize"></div>
<div class="grid definite twoSingleTrackRepeat alignContentStart" id="twoSingleTrackRepeat"></div>
<div class="grid definite twoSingleTrackRepeat alignContentStart" id="twoSingleTrackRepeatWithChildren">
<div class="gridItem"></div>
<div class="gridItem2"></div>
</div>
<div class="grid definite twoDoubleTrackRepeat contentStart" id="twoDoubleTrackRepeat">
<div class="gridItem"></div>
<div class="gridItem2"></div>
</div>
<div class="grid definite twoDoubleTrackWithNamedGridLineRepeat contentStart" id="twoDoubleTrackWithNamedGridLineRepeat">
<div class="gridItem"></div>
<div class="gridItem2"></div>
</div>
<div class="grid definite twoDoubleTrackWithTrailingNamedGridLineRepeat justifyContentStart" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
<div class="grid definite trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
<div class="grid definite leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
<div class="grid definite mixRepeatAfterNonRepeat alignContentStart" id="mixRepeatAfterNonRepeat">
<div class="gridItem"></div>
</div>
<div class="grid definite mixNonRepeatAfterRepeat alignContentStart" id="mixNonRepeatAfterRepeat"></div>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script>
description('Test that setting and getting grid-template-columns and grid-template-rows with repeat() works as expected');
debug("Test getting grid-template-columns and grid-template-rows set through CSS");
testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWithSize"), "120px", "18px");
testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWithoutSize"), "0px", "18px");
testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), "400px 400px", "0px 0px");
testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeatWithChildren"), "400px 400px", "44px 77px");
testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), "33px 120px 0px 120px", "10px 77px 10px 0px");
testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGridLineRepeat"), "33px [middle] 250px [end] 0px [middle] 250px [end]", "10px [start] 77px [end] 10px [start] 0px [end]");
testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailingNamedGridLineRepeat"), "[before] 0px [before] 0px", "[before] 10px [before] 10px");
testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepeat"), "250px [end]", "10px [end]");
testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepeat"), "[start] 250px 250px", "[start] 10px 10px");
testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat"), "[start] 140px 250px 250px", "44px 10px 10px");
testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat"), "250px 250px 120px [last]", "10px 10px [end] 0px");
debug("");
debug("Test invalid repeat syntax.");
function testInvalidSyntax(gridColumn) {
element = document.createElement("div");
document.body.appendChild(element);
element.style.gridTemplateColumns = gridColumn;
shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyValue('grid-template-columns')", "none");
document.body.removeChild(element);
}
testInvalidSyntax("repeat(");
testInvalidSyntax("repeat()");
testInvalidSyntax("repeat(3 / auto)");
testInvalidSyntax("repeat(3 , ,)");
testInvalidSyntax("repeat(0, 15px)");
testInvalidSyntax("repeat(-1, auto)");
testInvalidSyntax("repeat(1, [foo])");
testInvalidSyntax("repeat(1, )");
testInvalidSyntax("repeat(1)");
// Nesting is no allowed.
testInvalidSyntax("repeat(2, repeat(1, auto))");
</script>
</body>
</html>
|
