/
grid-support-grid-auto-columns-rows-003.html
130 lines (116 loc) · 4.3 KB
/
grid-support-grid-auto-columns-rows-003.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
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Support for 'grid-auto-columns' and
'grid-auto-rows' properties with implicit tracks after and before the
explicit grid</title>
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-tracks">
<link rel="match" href="../reference/grid-support-grid-auto-columns-rows-003-ref.html">
<style>
#wrapper {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
}
/* Implicit and explicit grid track sizes */
.grid {
display: grid;
grid-auto-rows: 2px 3px;
grid-auto-columns: 2px 3px;
}
#one .grid { grid-template: 5px / 5px; }
#two .grid { grid-template: 5px 5px / 5px 5px; }
#three .grid { grid-template: 5px 5px 5px / 5px 5px 5px; }
/* Grid item positions. */
.item-left1 { grid-area: auto / auto / 1 / 1; }
.item-explicit { grid-area: 1 / 1 / -1 / -1; }
.item-right1 { grid-area: -1 / -1; }
#zero .item-left3 { grid-area: auto / auto / -3 / -3; }
#zero .item-left2 { grid-area: auto / auto / -2 / -2; }
#zero .item-right2 { grid-area: 2 / 2; }
#zero .item-right3 { grid-area: 3 / 3; }
#one .item-left3 { grid-area: auto / auto / -4 / -4; }
#one .item-left2 { grid-area: auto / auto / -3 / -3; }
#one .item-right2 { grid-area: 3 / 3; }
#one .item-right3 { grid-area: 4 / 4; }
#two .item-left3 { grid-area: auto / auto / -5 / -5; }
#two .item-left2 { grid-area: auto / auto / -4 / -4; }
#two .item-right2 { grid-area: 4 / 4; }
#two .item-right3 { grid-area: 5 / 5; }
#three .item-left3 { grid-area: auto / auto / -6 / -6; }
#three .item-left2 { grid-area: auto / auto / -5 / -5; }
#three .item-right2 { grid-area: 5 / 5; }
#three .item-right3 { grid-area: 6 / 6; }
/* Colors */
.item-left3 { background: #ff0; }
.item-left2 { background: #ff0; }
.item-left1 { background: #ff0; }
.item-explicit { background: #f0f; }
.item-right1 { background: #0ff; }
.item-right2 { background: #0ff; }
.item-right3 { background: #0ff; }
</style>
<script>
function createDivWithClass(className, parent) {
let element = document.createElement('div');
element.className = className || '';
if (!parent) {
parent = document.body;
}
parent.appendChild(element);
return element;
}
function generate(parentId) {
let parent = document.getElementById(parentId);
for (let leftNum = 0; leftNum <= 3; ++leftNum) {
for (let rightNum = 0; rightNum <= 3; ++rightNum) {
let grid = leftNum + rightNum > 0
? createDivWithClass("grid", parent)
: null;
for (let i = 1; i <= leftNum; ++i) {
createDivWithClass("item-left" + i, grid);
}
if (leftNum + rightNum > 0) {
createDivWithClass("item-explicit", grid);
}
for (let i = 1; i <= rightNum; ++i) {
createDivWithClass("item-right" + i, grid);
}
}
}
}
function run() {
// This is equal to something like this:
// <div class="grid">
// <div class="item-left3"></div>
// <div class="item-left2"></div>
// <div class="item-left1"></div>
// <div class="item-explicit"></div>
// <div class="item-right1"></div>
// <div class="item-right2"></div>
// <div class="item-right3"></div>
// </div>
// Generate the grid examples with 0~3 left items and 0~3 right items.
// The item-explicit is placed inside the 0x0 ~ 3x3 explicit tracks.
generate("zero");
generate("one");
generate("two");
generate("three");
document.documentElement.offsetHeight;
document.documentElement.classList.remove('reftest-wait');
}
</script>
</head>
<body onload="run()">
<div id="wrapper">
<!-- Zero explicit track -->
<div id="zero"></div>
<!-- One explicit track -->
<div id="one"></div>
<!-- Two explicit tracks -->
<div id="two"></div>
<!-- Three explicit tracks -->
<div id="three"></div>
</div>
</body>
</html>