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
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>
CSS Grid Layout Test: Grid Item (First) Baseline Alignment Row Cyclic Sizing Exclusions
</title>
<meta name="assert" content="
A grid item whose size is input
to the size of the track
on which its size depends
cannot participate in baseline alignment, unless
the grid algorithm requires
another pass, where the track
sizing can be resovled.
">
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#row-align">
<link rel="match" href="references/grid-baseline-align-cycles-001-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.grid {
border: solid silver;
margin: 1em 0.25em;
display: inline-grid;
grid-template-columns: repeat(2, auto);
font: 20px/1 Ahem;
height: 5em;
}
.grid > div {
border: 1em aqua;
border-style: solid none;
}
.index {
padding: 1em 0;
}
.percent {
height: 20%;
}
.orthogonal {
writing-mode: vertical-rl;
}
.self > div {
align-self: baseline;
}
.content > div {
align-content: baseline;
}
.self.ref > div {
align-self: start;
}
.content.ref > div {
align-content: start;
}
</style>
<p>Test passes if the upper set of boxes is identical to the lower set.
<div class="grid self">
<div class="index">
X
</div>
<div class="percent orthogonal">
X
</div>
</div>
<div class="grid self">
<div class="index">
X
</div>
<div class="orthogonal">
X
</div>
</div>
<div class="grid content">
<div class="index">
X
</div>
<div class="percent">
X
</div>
</div>
<div class="grid content">
<div class="index">
X
</div>
<div class="orthogonal">
X
</div>
</div>
<br>
<div class="grid self ref">
<div class="index">
X
</div>
<div class="percent">
X
</div>
</div>
<div class="grid self ref">
<div class="index">
X
</div>
<div class="orthogonal">
X
</div>
</div>
<div class="grid content ref">
<div class="index">
X
</div>
<div class="percent">
X
</div>
</div>
<div class="grid content ref">
<div class="index">
X
</div>
<div class="orthogonal">
X
</div>
</div>
|
