Skip to content

Commit 1c4ecac

Browse files
BorisChioumoz-wptsync-bot
BorisChiou
authored and
moz-wptsync-bot
committed
Part 5: Implement the intrinsic size contribution for fit-content().
We simplified to just rely on the behavior of the plain argument. That is, width: fit-content(50%) behaves the same as width: 50%; in all circumstances, just clamped by min/max-content. Note: for block axis, we treat fit-content() as initial value its minimal and maximal value are identical and equal to the initial value in block axis. From: w3c/csswg-drafts#3731 (comment) Note: this patch doesn't include any update on flex and grid layout. We may have to come back to check it. Differential Revision: https://phabricator.services.mozilla.com/D113199 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1312588 gecko-commit: 41792e6152e6b5e8ad472e6cc21ce07352447bb8 gecko-reviewers: TYLin, emilio
1 parent f4582bc commit 1c4ecac

6 files changed

+212
-0
lines changed

‎css/css-sizing/fit-content-length-percentage-011.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<title>CSS fit-content(): min-content contribution</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage">
4+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution">
5+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
6+
<style>
7+
#reference-overlapped-red {
8+
position: absolute;
9+
background-color: red;
10+
width: 100px;
11+
height: 100px;
12+
z-index: -1;
13+
}
14+
</style>
15+
16+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17+
18+
<div id="reference-overlapped-red"></div>
19+
20+
<div style="width: min-content; height: 50px; background: green;">
21+
<div style="width: fit-content(100px);">
22+
<div style="display: inline-block; width: 60px;"></div>
23+
<div style="display: inline-block; width: 60px;"></div>
24+
</div>
25+
</div>
26+
27+
<!-- Cyclic percentage intrinsic size contribution, we treat width as the
28+
initial value (i.e. auto) for min content contribution -->
29+
<div style="width: min-content; height: 50px; background: green;">
30+
<div style="width: fit-content(50%);">
31+
<div style="display: inline-block; width: 100px;"></div>
32+
<div style="display: inline-block; width: 100px;"></div>
33+
</div>
34+
</div>

‎css/css-sizing/fit-content-length-percentage-012.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<title>CSS fit-content(): min-content contribution for min-size</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage">
4+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution">
5+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
6+
<style>
7+
#reference-overlapped-red {
8+
position: absolute;
9+
background-color: red;
10+
width: 100px;
11+
height: 100px;
12+
z-index: -1;
13+
}
14+
</style>
15+
16+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17+
18+
<div id="reference-overlapped-red"></div>
19+
20+
<div style="width: min-content; height: 50px; background: green;">
21+
<div style="width: 50px; min-width: fit-content(100px);">
22+
<div style="display: inline-block; width: 60px;"></div>
23+
<div style="display: inline-block; width: 60px;"></div>
24+
</div>
25+
</div>
26+
27+
<!-- Cyclic percentage intrinsic size contribution, we treat min-width as 0
28+
for min content contribution. However, fit-content() should be clamped by
29+
min-content size and max-content size, so the result min-width is equal to
30+
min-content size here -->
31+
<div style="width: min-content; height: 50px; background: green;">
32+
<div style="width: 50px; min-width: fit-content(50%);">
33+
<div style="display: inline-block; width: 100px;"></div>
34+
<div style="display: inline-block; width: 100px;"></div>
35+
</div>
36+
</div>

‎css/css-sizing/fit-content-length-percentage-013.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<title>CSS fit-content(): min-content contribution for max-size</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage">
4+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution">
5+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
6+
<style>
7+
#reference-overlapped-red {
8+
position: absolute;
9+
background-color: red;
10+
width: 100px;
11+
height: 100px;
12+
z-index: -1;
13+
}
14+
</style>
15+
16+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17+
18+
<div id="reference-overlapped-red"></div>
19+
20+
<div style="width: min-content; height: 50px; background: green;">
21+
<div style="width: 200px; max-width: fit-content(100px);">
22+
<div style="display: inline-block; width: 60px;"></div>
23+
<div style="display: inline-block; width: 60px;"></div>
24+
</div>
25+
</div>
26+
27+
<!-- Cyclic percentage intrinsic size contribution, we treat max-width as the
28+
initial value for min content contribution. The initial value is None and
29+
fit-content() should be clamped by min-content size and max-content size, so
30+
the result max-width is equal to max-content size here -->
31+
<div style="width: min-content; height: 50px; background: green;">
32+
<div style="width: 200px; max-width: fit-content(50%); font-size: 0;">
33+
<div style="display: inline-block; width: 50px;"></div>
34+
<div style="display: inline-block; width: 50px;"></div>
35+
</div>
36+
</div>

‎css/css-sizing/fit-content-length-percentage-014.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<title>CSS fit-content(): max-content contribution</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage">
4+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution">
5+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
6+
<style>
7+
#reference-overlapped-red {
8+
position: absolute;
9+
background-color: red;
10+
width: 100px;
11+
height: 100px;
12+
z-index: -1;
13+
}
14+
</style>
15+
16+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17+
18+
<div id="reference-overlapped-red"></div>
19+
20+
<div style="width: max-content; height: 50px; background: green;">
21+
<div style="width: fit-content(100px);">
22+
<div style="display: inline-block; width: 60px;"></div>
23+
<div style="display: inline-block; width: 60px;"></div>
24+
</div>
25+
</div>
26+
27+
<!-- Cyclic percentage intrinsic size contribution, we treat width as the
28+
initial value (i.e. auto) for max content contribution -->
29+
<div style="width: max-content; height: 50px; background: green;">
30+
<div style="width: fit-content(50%); font-size: 0;">
31+
<div style="display: inline-block; width: 50px;"></div>
32+
<div style="display: inline-block; width: 50px;"></div>
33+
</div>
34+
</div>

‎css/css-sizing/fit-content-length-percentage-015.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<title>CSS fit-content(): max-content contribution for min-size</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage">
4+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution">
5+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
6+
<style>
7+
#reference-overlapped-red {
8+
position: absolute;
9+
background-color: red;
10+
width: 100px;
11+
height: 100px;
12+
z-index: -1;
13+
}
14+
</style>
15+
16+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17+
18+
<div id="reference-overlapped-red"></div>
19+
20+
<div style="width: max-content; height: 50px; background: green;">
21+
<div style="width: 50px; min-width: fit-content(100px);">
22+
<div style="display: inline-block; width: 60px;"></div>
23+
<div style="display: inline-block; width: 60px;"></div>
24+
</div>
25+
</div>
26+
27+
<!-- Cyclic percentage intrinsic size contribution, we treat min-width as 0
28+
for max content contribution. However, fit-content() should be clamped by
29+
min-content size and max-content size, so the result min-width is equal to
30+
min-content size here -->
31+
<div style="width: max-content; height: 50px; background: green;">
32+
<div style="width: 50px; min-width: fit-content(50%);">
33+
<div style="display: inline-block; width: 100px;"></div>
34+
<div style="display: inline-block; width: 100px;"></div>
35+
</div>
36+
</div>

‎css/css-sizing/fit-content-length-percentage-016.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<title>CSS fit-content(): max-content contribution for max-size</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-fit-content-length-percentage">
4+
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic-contribution">
5+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
6+
<style>
7+
#reference-overlapped-red {
8+
position: absolute;
9+
background-color: red;
10+
width: 100px;
11+
height: 100px;
12+
z-index: -1;
13+
}
14+
</style>
15+
16+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
17+
18+
<div id="reference-overlapped-red"></div>
19+
20+
<div style="width: max-content; height: 50px; background: green;">
21+
<div style="width: 200px; max-width: fit-content(100px);">
22+
<div style="display: inline-block; width: 60px;"></div>
23+
<div style="display: inline-block; width: 60px;"></div>
24+
</div>
25+
</div>
26+
27+
<!-- Cyclic percentage intrinsic size contribution, we treat max-width as the
28+
initial value for max content contribution. The initial value is None and
29+
fit-content() should be clamped by min-content size and max-content size, so
30+
the result max-width is equal to max-content size here -->
31+
<div style="width: max-content; height: 50px; background: green;">
32+
<div style="width: 200px; max-width: fit-content(50%); font-size: 0;">
33+
<div style="display: inline-block; width: 50px;"></div>
34+
<div style="display: inline-block; width: 50px;"></div>
35+
</div>
36+
</div>

0 commit comments

Comments
 (0)