/
repeat-auto-fill-009.html
121 lines (109 loc) · 3.97 KB
/
repeat-auto-fill-009.html
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
<!DOCTYPE HTML>
<html>
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#resolved-track-list">
<head>
<style>
html,body {
color:black; background-color:white; font:10px/1 monospace; padding:0; margin:0;
}
.wrapper {
display: inline-block;
width: 110px;
border: 1px solid;
}
.grid {
display: grid;
grid-auto-rows: 8px;
background: grey;
}
.fill-0a { grid-template-columns: subgrid repeat(auto-fill, [y]) [z] }
.fill-0b { grid-template-columns: subgrid [x] repeat(auto-fill, [y]) [z] }
.fill-0c { grid-template-columns: subgrid [x] [y] repeat(auto-fill, [z]) }
.fill-0d { grid-template-columns: subgrid repeat(auto-fill, [x]) }
.fill-0e { grid-template-columns: subgrid [x] }
.grid > :nth-child(2n) { background: black; }
.grid > :nth-child(2n+1) { background: pink; }
</style>
</head>
<body>
<div class="wrapper"><div class="grid fill-0a">
<div style="grid-column:y 5"></div>
<div style="grid-column:y 4"></div>
<div style="grid-column:y 3"></div>
<div style="grid-column:y 2"></div>
<div style="grid-column:y 1"></div>
<div style="grid-column:y -1"></div>
<div style="grid-column:y -2"></div>
<div style="grid-column:y -3"></div>
<div style="grid-column:y -4"></div>
<div style="grid-column:y -5"></div>
</div></div>
<div class="wrapper"><div class="grid fill-0b">
<div style="grid-column:y 5"></div>
<div style="grid-column:y 4"></div>
<div style="grid-column:y 3"></div>
<div style="grid-column:y 2"></div>
<div style="grid-column:y 1"></div>
<div style="grid-column:y -1"></div>
<div style="grid-column:y -2"></div>
<div style="grid-column:y -3"></div>
<div style="grid-column:y -4"></div>
<div style="grid-column:y -5"></div>
</div></div>
<div class="wrapper"><div class="grid fill-0c">
<div style="grid-column:y 5"></div>
<div style="grid-column:y 4"></div>
<div style="grid-column:y 3"></div>
<div style="grid-column:y 2"></div>
<div style="grid-column:y 1"></div>
<div style="grid-column:y -1"></div>
<div style="grid-column:y -2"></div>
<div style="grid-column:y -3"></div>
<div style="grid-column:y -4"></div>
<div style="grid-column:y -5"></div>
</div></div>
<div class="wrapper"><div class="grid fill-0d">
<div style="grid-column:y 5"></div>
<div style="grid-column:y 4"></div>
<div style="grid-column:y 3"></div>
<div style="grid-column:y 2"></div>
<div style="grid-column:y 1"></div>
<div style="grid-column:y -1"></div>
<div style="grid-column:y -2"></div>
<div style="grid-column:y -3"></div>
<div style="grid-column:y -4"></div>
<div style="grid-column:y -5"></div>
</div></div>
<div class="wrapper"><div class="grid fill-0e">
<div style="grid-column:y 5"></div>
<div style="grid-column:y 4"></div>
<div style="grid-column:y 3"></div>
<div style="grid-column:y 2"></div>
<div style="grid-column:y 1"></div>
<div style="grid-column:y -1"></div>
<div style="grid-column:y -2"></div>
<div style="grid-column:y -3"></div>
<div style="grid-column:y -4"></div>
<div style="grid-column:y -5"></div>
</div></div>
<script>
const expectedResults = [
"10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
"10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
"10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
"10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
"10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px",
];
[...document.querySelectorAll('.grid')].forEach(function(grid, i) {
let actual = window.getComputedStyle(grid)['grid-template-columns'];
let expected = expectedResults[i];
if (actual != expected) {
let err = "Unexpected getComputedStyle value for grid " + i + " with className '" + grid.className + "':" +
" Actual: \"" + actual + "\", Expected: \"" + expected + "\"";
document.body.appendChild(document.createTextNode(err));
document.body.appendChild(document.createElement("br"));
}
});
</script>
</body>