Skip to content

Commit adc85ef

Browse files
sammygillsammygill
authored
1 parent 6763c9e commit adc85ef

4 files changed

Lines changed: 110 additions & 0 deletions

‎css/css-grid/layout-algorithm/flexible-column-track-intrinsic-sizing-001-crash.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-find-fr-size">
5+
<meta name="assert" content="A grid whose first column is a flexible (fr) track can be sized under a max-content constraint when a grid item's max-content contribution is smaller than the flexible track's base size, without crashing.">
6+
<style>
7+
#grid {
8+
display: grid;
9+
grid-template-columns: 1fr;
10+
width: fit-content;
11+
}
12+
#grid > div {
13+
height: 50px;
14+
background: green;
15+
}
16+
#grid > div > div {
17+
height: 50px;
18+
}
19+
.wide { width: 100px; }
20+
.narrow { width: 40px; }
21+
</style>
22+
<p>Test passes if there is a filled green square.</p>
23+
<div id="grid">
24+
<div><div class="wide"></div></div>
25+
<div><div class="narrow"></div></div>
26+
</div>

‎css/css-grid/layout-algorithm/flexible-column-track-intrinsic-sizing-002-crash.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-flex-tracks">
5+
<meta name="assert" content="When a grid with multiple flexible (fr) columns is sized under a definite length, the leading track (column index 0) can be treated as inflexible while a later track stays flexible, without crashing.">
6+
<style>
7+
#grid {
8+
display: grid;
9+
grid-template-columns: 1fr 1fr;
10+
width: 100px;
11+
}
12+
#grid > div {
13+
height: 50px;
14+
background: green;
15+
}
16+
#grid > div > div {
17+
height: 50px;
18+
}
19+
.wide { width: 80px; }
20+
.narrow { width: 10px; }
21+
</style>
22+
<p>Test passes if there is a filled green square.</p>
23+
<div id="grid">
24+
<div><div class="wide"></div></div>
25+
<div><div class="narrow"></div></div>
26+
<div></div>
27+
<div></div>
28+
</div>

‎css/css-grid/layout-algorithm/flexible-column-track-intrinsic-sizing-003-crash.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-find-fr-size">
5+
<meta name="assert" content="A grid whose first column is a flexible (fr) track can be sized under a max-content constraint when a grid item's max-content contribution is smaller than the flexible track's base size, without crashing.">
6+
<style>
7+
#grid {
8+
display: grid;
9+
grid-template-columns: 1fr;
10+
width: fit-content;
11+
justify-items: stretch;
12+
}
13+
#grid > div {
14+
height: 50px;
15+
background: green;
16+
}
17+
#grid > div > div {
18+
height: 50px;
19+
}
20+
.wide { width: 100px; }
21+
.narrow { width: 40px; }
22+
</style>
23+
<p>Test passes if there is a filled green square.</p>
24+
<div id="grid">
25+
<div><div class="wide"></div></div>
26+
<div><div class="narrow"></div></div>
27+
</div>

‎css/css-grid/layout-algorithm/flexible-column-track-intrinsic-sizing-004-crash.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-flex-tracks">
5+
<meta name="assert" content="When a grid with multiple flexible (fr) columns is sized under a definite length, the leading track (column index 0) can be treated as inflexible while a later track stays flexible, without crashing.">
6+
<style>
7+
#grid {
8+
display: grid;
9+
grid-template-columns: 1fr 1fr;
10+
width: 100px;
11+
justify-items: stretch;
12+
}
13+
#grid > div {
14+
height: 50px;
15+
background: green;
16+
}
17+
#grid > div > div {
18+
height: 50px;
19+
}
20+
.wide { width: 80px; }
21+
.narrow { width: 10px; }
22+
</style>
23+
<p>Test passes if there is a filled green square.</p>
24+
<div id="grid">
25+
<div><div class="wide"></div></div>
26+
<div><div class="narrow"></div></div>
27+
<div></div>
28+
<div></div>
29+
</div>

0 commit comments

Comments
 (0)