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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<style>
f {
display: flex;
background-color: grey;
width: 400px;
height: 20px;
margin-bottom: 5px;
}
b {
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 1;
background-color: gold;
}
c {
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 1;
background-color: yellow;
}
d {
flex: none;
background-color: orange;
}
b::after, c::after, d::after {
content: "";
display: block;
width: 10px;
height: 10px;
border: 1px solid teal;
}
.min50 {
min-width: 50px;
}
.min370 {
min-width: 370px;
}
.min400 {
min-width: 400px;
}
.max5 {
max-width: 5px;
}
.max50 {
max-width: 50px;
}
</style>
<script>
"use strict";
SimpleTest.waitForExplicitFinish();
const TEXT_NODE = Node.TEXT_NODE;
function testItemMatchesExpectedValues(item, values, index) {
is(item.clampState, values.cs, "Item index " + index + " should have expected clampState.");
}
function runTests() {
/**
* The expectedValues array contains one element for each flex container child of
* of the body. The values in this object are compared against the returned flex
* API values of the first flex item in the first line of the corresponding flex
* container. The "cs" value is compared against the flex item's clampState.
**/
const expectedValues = [
{ cs: "unclamped" },
{ cs: "unclamped" },
{ cs: "unclamped" },
{ cs: "unclamped" },
{ cs: "clamped_to_min" },
{ cs: "clamped_to_min" },
{ cs: "clamped_to_min" },
{ cs: "clamped_to_min" },
{ cs: "clamped_to_min" },
{ cs: "clamped_to_max" },
{ cs: "clamped_to_max" },
{ cs: "clamped_to_max" },
{ cs: "clamped_to_max" },
{ cs: "clamped_to_max" },
];
let children = document.body.children;
is(children.length, expectedValues.length, "Document should have expected number of flex containers.");
for (let i = 0; i < children.length; ++i) {
const flex = children.item(i).getAsFlexContainer();
ok(flex, "Document child index " + i + " should be a flex container.");
if (flex) {
const values = expectedValues[i];
const item = flex.getLines()[0].getItems()[0];
testItemMatchesExpectedValues(item, values, i);
}
}
SimpleTest.finish();
}
</script>
</head>
<body onLoad="runTests();">
<!-- unclamped cases -->
<!-- a flex:none item -->
<f><d></d></f>
<!-- a flex-grow item with room to grow -->
<f><b class="min370"></b></f>
<!-- a flex-shrink item with room to shrink -->
<f><b class="max50"></b><c class="min370"></c></f>
<!-- a flex-grow basis 100px item paired with a basis 200px item, where the second item is clamped,
and the first item then can grow past its minimum -->
<f><b style="min-width: 170px"></b><c class="max50" style="flex-basis:200px"></c></f>
<!-- clamped_to_min cases -->
<!-- a flex-grow item with a min smaller than the container -->
<f><b class="min370"></b><c></c></f>
<!-- a flex-shrink item with a min, paired with another that in total exceeds the container -->
<f><b class="min50"></b><c class="min370"></c></f>
<!-- a flex-shrink item shrunk to its (content-based) automatic minimum size -->
<f><b></b><c class="min400"></c></f>
<!-- a flex:none item with a min that is larger than its flex base size -->
<f><d class="min50"></d><c></c></f>
<!-- a flex-grow item paired with another flex-grow item that have equal-sized violations of
the first item's min with the second item's max -->
<f><b style="min-width: 200px"></b><c style="flex-basis:150px; max-width:200px"></c></f>
<!-- clamped_to_max cases -->
<!-- a flexible item with a max -->
<f><b class="max50"></b></f>
<!-- a flexible item with a max, paired with another flex-grow item -->
<f><b class="max50"></b><c></c></f>
<!-- a flexible item with a max smaller than its content size -->
<f><b class="max5"></b><c></c></f>
<!-- a flex:none item with a max smaller than its content size -->
<f><d class="max5"></d><c></c></f>
<!-- a flex-grow item paired with another flex-grow item that have equal-sized violations of
the first item's max with the second item's min -->
<f><b style="flex-basis:150px; max-width:200px"></b><c style="min-width: 200px"></c></f>
</body>
</html>
|
