Skip to content

Commit 1d3e3a2

Browse files
bfgeekchromium-wpt-export-bot
bfgeek
authored and
chromium-wpt-export-bot
committed
[flex-balance] Add a set of dynamic tests to the suite.
This patch adds a set of dynamic tests: - 001, flex-line-count changes from 3->2 - 002, flex-line-count changes from initial->2 - 003, flex-line-count changes from 3->initial - 004, flex-wrap changes from initial->balance - 005, flex-wrap changes from balance->wrap - 006, an item width changes from 0px->50px - 007, an item is appended to the flexbox Bug: 416755656 Change-Id: I7afc329564844030fa49dc8180b97b4323d47b04 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7851786 Reviewed-by: David Grogan <dgrogan@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1631580}
1 parent 04ab86b commit 1d3e3a2

7 files changed

Lines changed: 185 additions & 0 deletions

‎css/css-flexbox/balance/balance-dynamic-001.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-2/">
3+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
4+
<style>
5+
#flex {
6+
display: flex;
7+
flex-wrap: balance;
8+
width: 150px;
9+
flex-line-count: 3;
10+
}
11+
#flex > div {
12+
width: 50px;
13+
height: 50px;
14+
background: green;
15+
}
16+
</style>
17+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
18+
<div id="flex">
19+
<div></div>
20+
<div></div>
21+
<div></div>
22+
<div></div>
23+
</div>
24+
<script>
25+
document.body.offsetTop;
26+
document.getElementById('flex').style.flexLineCount = '2';
27+
</script>

‎css/css-flexbox/balance/balance-dynamic-002.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-2/">
3+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
4+
<style>
5+
#flex {
6+
display: flex;
7+
flex-wrap: balance;
8+
width: 200px;
9+
}
10+
#flex > div {
11+
width: 50px;
12+
height: 50px;
13+
background: green;
14+
}
15+
</style>
16+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17+
<div id="flex">
18+
<div></div>
19+
<div></div>
20+
<div></div>
21+
<div></div>
22+
</div>
23+
<script>
24+
document.body.offsetTop;
25+
document.getElementById('flex').style.flexLineCount = '2';
26+
</script>

‎css/css-flexbox/balance/balance-dynamic-003.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-2/">
3+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
4+
<style>
5+
#flex {
6+
display: flex;
7+
flex-wrap: balance;
8+
width: 120px;
9+
flex-line-count: 3;
10+
}
11+
#flex > div {
12+
width: 50px;
13+
height: 50px;
14+
background: green;
15+
}
16+
</style>
17+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
18+
<div id="flex">
19+
<div></div>
20+
<div></div>
21+
<div></div>
22+
<div></div>
23+
</div>
24+
<script>
25+
document.body.offsetTop;
26+
// Reset to the initial value.
27+
document.getElementById('flex').style.flexLineCount = '1';
28+
</script>

‎css/css-flexbox/balance/balance-dynamic-004.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-2/">
3+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
4+
<style>
5+
#flex {
6+
display: flex;
7+
width: 150px;
8+
flex-line-count: 2;
9+
}
10+
#flex > div {
11+
width: 50px;
12+
height: 50px;
13+
background: green;
14+
}
15+
</style>
16+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17+
<div id="flex">
18+
<div></div>
19+
<div></div>
20+
<div></div>
21+
<div></div>
22+
</div>
23+
<script>
24+
document.body.offsetTop;
25+
document.getElementById('flex').style.flexWrap = 'balance';
26+
</script>

‎css/css-flexbox/balance/balance-dynamic-005.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-2/">
3+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
4+
<style>
5+
#flex {
6+
display: flex;
7+
flex-wrap: balance;
8+
width: 100px;
9+
flex-line-count: 3;
10+
}
11+
#flex > div {
12+
width: 50px;
13+
height: 50px;
14+
background: green;
15+
}
16+
</style>
17+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
18+
<div id="flex">
19+
<div></div>
20+
<div></div>
21+
<div></div>
22+
<div></div>
23+
</div>
24+
<script>
25+
document.body.offsetTop;
26+
document.getElementById('flex').style.flexWrap = 'wrap';
27+
</script>

‎css/css-flexbox/balance/balance-dynamic-006.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-2/">
3+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
4+
<style>
5+
#flex {
6+
display: flex;
7+
flex-wrap: balance;
8+
width: 150px;
9+
}
10+
#flex > div {
11+
width: 50px;
12+
height: 50px;
13+
background: green;
14+
}
15+
</style>
16+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17+
<div id="flex">
18+
<div id="target" style="width: 0px;"></div>
19+
<div></div>
20+
<div></div>
21+
<div></div>
22+
</div>
23+
<script>
24+
document.body.offsetTop;
25+
document.getElementById('target').style.width = '50px';
26+
</script>

‎css/css-flexbox/balance/balance-dynamic-007.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-2/">
3+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
4+
<style>
5+
#flex {
6+
display: flex;
7+
flex-wrap: balance;
8+
width: 150px;
9+
}
10+
#flex > div {
11+
width: 50px;
12+
height: 50px;
13+
background: green;
14+
}
15+
</style>
16+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17+
<div id="flex">
18+
<div></div>
19+
<div></div>
20+
<div></div>
21+
</div>
22+
<script>
23+
document.body.offsetTop;
24+
document.getElementById('flex').appendChild(document.createElement('div'));
25+
</script>

0 commit comments

Comments
 (0)