Skip to content

Commit ea4e8c9

Browse files
AlaskanEmilymoz-wptsync-bot
AlaskanEmily
authored and
moz-wptsync-bot
committed
Add WPT relating to stretching of <img> and intrinsic sizing of grid tracks based on <img> as grid items.
The test grid-item-minmax-img-001.html ensures both that the stretch behavior is correct for <img> under initial justify/align situations, and that the img does not contribute to the track sizes (a red box will appear if the img has a non-zero size contribution to its track). The test grid-item-minmax-img-002.html validates the grid item sizing under several justify/align values. Differential Revision: https://phabricator.services.mozilla.com/D256881 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1976768 gecko-commit: 74728edfc0f22fe2f60b97cd12bfa2b6f2c55e7e gecko-reviewers: dholbert
1 parent c009695 commit ea4e8c9

File tree

3 files changed

+100
-0
lines changed

3 files changed

+100
-0
lines changed

‎css/css-grid/grid-items/grid-item-minmax-img-001.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<!-- Any copyright is dedicated to the Public Domain.
3+
- https://creativecommons.org/publicdomain/zero/1.0/ -->
4+
<meta charset="utf-8">
5+
<title>Image within a grid with a size that depends on the containing block should stretch, but not size the grid tracks</title>
6+
<link rel="author" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-stretch">
8+
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-single-span-items">
9+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
10+
<style>
11+
#grid {
12+
display: inline-grid;
13+
grid-template-columns: minmax(auto, 0);
14+
grid-template-rows: minmax(auto, 0);
15+
width: 200px;
16+
}
17+
</style>
18+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
19+
<div id="grid">
20+
<img id="img" src="support/100x100-green.png">
21+
<div style="background-color: red; aspect-ratio: 1;">
22+
</div>

‎css/css-grid/grid-items/grid-item-minmax-img-002-ref.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<!-- Any copyright is dedicated to the Public Domain.
3+
- https://creativecommons.org/publicdomain/zero/1.0/ -->
4+
<meta charset="utf-8">
5+
<title>Reference: Test how images are stretched with different align/justify flags.</title>
6+
<link rel="author" href="mailto:[email protected]">
7+
<style>
8+
.grid {
9+
display: inline-grid;
10+
grid-template-columns: 4px;
11+
grid-template-rows: 4px;
12+
border: 5px solid goldenrod;
13+
}
14+
.spacer{
15+
height: 10px;
16+
}
17+
.img{
18+
background-image: url("support/100x100-green.png");
19+
width: 100px;
20+
height: 100px;
21+
}
22+
.img, .empty{
23+
border: 2px solid indigo;
24+
}
25+
</style>
26+
<div class="grid">
27+
<div class="img"></div>
28+
</div>
29+
<div class="spacer"></div>
30+
<div class="grid">
31+
<div class="empty"></div>
32+
</div>
33+
<div class="spacer"></div>
34+
<div class="grid">
35+
<div class="img"></div>
36+
</div>

‎css/css-grid/grid-items/grid-item-minmax-img-002.html

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<!-- Any copyright is dedicated to the Public Domain.
3+
- https://creativecommons.org/publicdomain/zero/1.0/ -->
4+
<meta charset="utf-8">
5+
<title>Test how images are stretched with different align/justify flags.</title>
6+
<link rel="author" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-stretch">
8+
<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-single-span-items">
9+
<link rel="match" href="grid-item-minmax-img-002-ref.html">
10+
<style>
11+
.grid {
12+
display: inline-grid;
13+
grid-template-columns: minmax(auto, 0);
14+
grid-template-rows: minmax(auto, 0);
15+
border: 5px solid goldenrod;
16+
}
17+
.spacer{
18+
height: 10px;
19+
}
20+
img {
21+
border: 2px solid indigo;
22+
}
23+
.stretch {
24+
align-self: stretch;
25+
justify-self: stretch;
26+
}
27+
.start {
28+
align-self: start;
29+
justify-self: start;
30+
}
31+
</style>
32+
<div class="grid">
33+
<img src="support/100x100-green.png">
34+
</div>
35+
<div class="spacer"></div>
36+
<div class="grid">
37+
<img class="stretch" src="support/100x100-green.png">
38+
</div>
39+
<div class="spacer"></div>
40+
<div class="grid">
41+
<img class="start" src="support/100x100-green.png">
42+
</div>

0 commit comments

Comments
 (0)