Skip to content

Commit cb9c3e8

Browse files
sammygillsammygill
authored
1 parent 79b11cf commit cb9c3e8

2 files changed

Lines changed: 60 additions & 0 deletions

File tree

‎css/css-grid/grid-items/grid-item-fixed-max-height-001.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>Grid item with a fixed max-height is clamped by it.</title>
4+
<link rel="author" title="Yulun Wu" href="mailto:yulun_wu@apple.com">
5+
<link rel="help" href="https://www.w3.org/TR/css-grid-2/#grid-item-sizing">
6+
<meta name="assert" content="A grid item with an automatic block size which is stretched into its grid area is clamped by its fixed max-height, so its used block size is the max-height rather than the block size of the grid area.">
7+
<link rel="stylesheet" href="/css/support/grid.css">
8+
<style>
9+
.grid {
10+
grid-template-columns: 50px;
11+
grid-template-rows: 100px;
12+
/* Layout-preserving: keeps the grid on the modern grid path. */
13+
justify-items: normal;
14+
}
15+
.item {
16+
max-height: 50px;
17+
}
18+
</style>
19+
<script src="/resources/testharness.js"></script>
20+
<script src="/resources/testharnessreport.js"></script>
21+
<script src="/resources/check-layout-th.js"></script>
22+
23+
<body onload="checkLayout('.grid')">
24+
<div id="log"></div>
25+
26+
<div class="grid">
27+
<div class="item" data-expected-height="50"></div>
28+
</div>
29+
30+
</body>

‎css/css-grid/grid-items/grid-item-fixed-max-width-001.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>Grid item with a fixed max-width is clamped by it.</title>
4+
<link rel="author" title="Yulun Wu" href="mailto:yulun_wu@apple.com">
5+
<link rel="help" href="https://www.w3.org/TR/css-grid-2/#grid-item-sizing">
6+
<meta name="assert" content="A grid item with an automatic inline size which is stretched into its grid area is clamped by its fixed max-width, so its used inline size is the max-width rather than the inline size of the grid area.">
7+
<link rel="stylesheet" href="/css/support/grid.css">
8+
<style>
9+
.grid {
10+
grid-template-columns: 100px;
11+
/* Layout-preserving: keeps the grid on the modern grid path. */
12+
justify-items: normal;
13+
}
14+
.item {
15+
max-width: 50px;
16+
height: 50px;
17+
}
18+
</style>
19+
<script src="/resources/testharness.js"></script>
20+
<script src="/resources/testharnessreport.js"></script>
21+
<script src="/resources/check-layout-th.js"></script>
22+
23+
<body onload="checkLayout('.grid')">
24+
<div id="log"></div>
25+
26+
<div class="grid">
27+
<div class="item" data-expected-width="50"></div>
28+
</div>
29+
30+
</body>

0 commit comments

Comments
 (0)