Skip to content

Commit 03c7a06

Browse files
sammygillsammygill
authored
1 parent c658198 commit 03c7a06

File tree

1 file changed

+125
-0
lines changed

1 file changed

+125
-0
lines changed

‎css/css-flexbox/percent-height-flex-items-cross-sizes-with-mutations.html

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="author" title="Sammy Gill" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#layout-algorithm">
6+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
7+
<meta name="assert" content="Tests that the cross size of flexboxes and flex items with % height are computed correctly with various mutations."
8+
<style>
9+
.flexbox {
10+
display: flex;
11+
font: 10px Ahem;
12+
outline: 1px solid black;
13+
}
14+
.grid {
15+
display: grid;
16+
outline: 1px solid magenta;
17+
}
18+
.flexbox > div {
19+
width: min-content;
20+
outline: 1px solid blue;
21+
}
22+
.percent-height {
23+
min-height: 100%;
24+
}
25+
.fixed-height {
26+
height: 100px;
27+
}
28+
.align-start {
29+
align-items: start;
30+
}
31+
</style>
32+
<script src="/resources/testharness.js"></script>
33+
<script src="/resources/testharnessreport.js"></script>
34+
<script>
35+
function mutateContent() {
36+
document.querySelectorAll("#one, #two, #three").forEach((element) => {
37+
element.innerHTML += " a";
38+
});
39+
40+
document.querySelector("#four").style.width = "auto";
41+
document.querySelector("#five").style.height = "auto";
42+
document.querySelector("#six").style.height = "100px";
43+
44+
document.querySelectorAll("#seven, #eight").forEach((element) => {
45+
element.style.alignItems = "start";
46+
});
47+
}
48+
</script>
49+
</head>
50+
<body>
51+
52+
<!-- Non-percent height flex item is mutated and percent height flex item should be
53+
stretched up. -->
54+
<div class="flexbox test" data-expected-height="40">
55+
<div id="one" class="test" data-expected-height="40">a a a</div>
56+
<div class="percent-height test" data-expected-height="40">a</div>
57+
</div>
58+
59+
<!-- Non-percent height flex item content is mutated and should be stretched to percent
60+
height flex item's size. -->
61+
<div class="flexbox test" data-expected-height="40">
62+
<div id="two" class="min-content percent-height test" data-expected-height="40">a a a</div>
63+
<div class="test" data-expected-height="40">a</div>
64+
</div>
65+
66+
<!-- Percent height flex item content is mutated and increased flexbox's cross axis size. -->
67+
<div class="flexbox test" data-expected-height="30">
68+
<div class="min-content percent-height test" data-expected-height="30">a a a</div>
69+
<div id="three" data-expected-height="30">a</div>
70+
</div>
71+
72+
<!-- Percent height flex item's main axis size changes from min-content to auto which
73+
should result in different cross size. -->
74+
<div class="flexbox test" data-expected-height="10">
75+
<div class="min-content percent-height test" id="four" data-expected-height="10">a a a</div>
76+
</div>
77+
78+
<!-- Flexbox with align-items: flex-start changes from definite to indefinite cross size
79+
which results in different hypothetical cross size for flex item.-->
80+
<div class="flexbox fixed-height align-start test" id="five" data-expected-height="30">
81+
<div class="min-content percent-height test" data-expected-height="30">a a a</div>
82+
<div class="test" data-expected-height="10">a</div>
83+
</div>
84+
85+
86+
<!-- Flexbox with align-items: flex-start changes from indefinite to definite cross size
87+
which results in different hypothetical cross size for the flex item. -->
88+
<div class="flexbox align-start test" id="six" data-expected-height="100">
89+
<div class="min-content percent-height test" data-expected-height="100">a a a</div>
90+
</div>
91+
92+
<!-- Outer flexbox goes from stretching its content to no longer stretching with a
93+
definite cross size. The inner flexbox is no longer stretching which affects the
94+
hypothetical cross axis size of its flex item. -->
95+
<div class="flexbox fixed-height test" id="seven" data-expected-height="100"">
96+
<div class="flexbox align-start test" data-expected-height="30">
97+
<div class="min-content percent-height test" data-expected-height="30">a a a</div>
98+
</div>
99+
</div>
100+
101+
<!-- Grid goes from stretching its content to no longer stretching with a definite cross
102+
size. The flexbox is no longer stretching which affects the hypothetical cross axis
103+
size of tis flex item.-->
104+
<div class="grid fixed-height test" id="eight" data-expected-height="100">
105+
<div class="flexbox align-start test" data-expected-height="30">
106+
<div class="min-content percent-height test" data-expected-height="30">a a a</div>
107+
</div>
108+
</div>
109+
110+
</body>
111+
<script>
112+
document.body.offsetHeight;
113+
mutateContent();
114+
document.body.offsetHeight;
115+
116+
let tests = document.querySelectorAll(".test");
117+
tests.forEach((element) => {
118+
test(function() {
119+
let expectedHeight = element.getAttribute("data-expected-height");
120+
assert_equals(element.offsetHeight, Number(expectedHeight), "height");
121+
});
122+
});
123+
</script>
124+
</html>
125+

0 commit comments

Comments
 (0)