blob: e3da19a70c03822910629f79ec68baafa4b74258 (
plain)
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
|
<!DOCTYPE html>
<html>
<link href="resources/grid.css" rel="stylesheet">
<style>
.gridMinMaxMinMax {
grid-template-columns: 50px 100px;
grid-template-rows: minmax(10px, min-content) minmax(50px, 100px);
}
.gridAutoAuto {
grid-template-columns: 50px 100px;
grid-template-rows: auto auto;
}
.sizedToGridAreaMinSizes {
font: 10px/1 Ahem;
min-width: 100%;
min-height: 100%;
}
.sizedToGridAreaMaxSizes {
font: 10px/1 Ahem;
max-width: 100%;
max-height: 100%;
}
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid')">
<p>Test that grid items with a percentage logical height inside a grid without explicit sizes resolve their size properly.</p>
<div class="unconstrainedContainer" style="position: relative">
<div class="grid gridMinMaxMinMax">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="grid gridMinMaxMinMax">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
</div>
</div>
<div style="position: relative;">
<div class="grid gridMinMaxMinMax" style="height: 100px;">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80">XXXXX XXXXXX</div>
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="80">XXXXX XXXXXX</div>
</div>
</div>
<div class="unconstrainedContainer" style="position: relative">
<div class="grid gridAutoAuto">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXXX</div>
<div class="sizedToGridArea secondRowSecondColumn" data-expected-width="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div>
</div>
</div>
<div class="unconstrainedContainer" style="position: relative">
<div class="grid gridMinMaxMinMax">
<div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="grid gridMinMaxMinMax">
<div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
</div>
</div>
<div style="position: relative;">
<div class="grid gridMinMaxMinMax" style="height: 100px;">
<div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="80">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="80">XXXXX XXXXXX</div>
</div>
</div>
<div class="unconstrainedContainer" style="position: relative">
<div class="grid gridAutoAuto">
<div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div>
<div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div>
</div>
</div>
<div class="unconstrainedContainer" style="position: relative">
<div class="grid gridMinMaxMinMax">
<div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
</div>
</div>
<div style="position: relative; height: 100px;">
<div class="grid gridMinMaxMinMax">
<div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div>
</div>
</div>
<div style="position: relative;">
<div class="grid gridMinMaxMinMax" style="height: 100px;">
<div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="80">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="80">XXXXX XXXXXX</div>
</div>
</div>
<div class="unconstrainedContainer" style="position: relative">
<div class="grid gridAutoAuto">
<div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div>
<div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXXX</div>
<div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div>
</div>
</div>
</body>
</html>
|
