1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<!DOCTYPE html>
<html>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
grid-template-columns: 50px 100px;
grid-template-rows: 70px 140px;
}
#minHeightPercent {
height: 10px;
min-height: 50%;
}
#maxHeightPercent {
height: 100px;
max-height: 50%;
}
</style>
<script src="../../resources/check-layout.js"></script>
<script>
function testLayout(gridElementID, gridTracks, size)
{
var gridElement = document.getElementById(gridElementID);
gridElement.style.gridTemplateRows = gridTracks.rows;
var gridItem = gridElement.firstChild.nextSibling;
gridItem.setAttribute("data-expected-width", size.width);
gridItem.setAttribute("data-expected-height", size.height);
checkLayout("#" + gridElementID, document.getElementById("test-output"))
}
function runTests()
{
testLayout("gridWithMinHeightItem", { "rows": "70px 140px" }, { "width": "50", "height": "35" });
testLayout("gridWithMinHeightItem", { "rows": "100px 140px" }, { "width": "50", "height": "50" });
testLayout("gridWithMinHeightItem", { "rows": "100px 240px" }, { "width": "50", "height": "50" });
testLayout("gridWithMinHeightItem", { "rows": "10px 240px" }, { "width": "50", "height": "10" });
testLayout("gridWithMaxHeightItem", { "rows": "70px 140px" }, { "width": "50", "height": "35" });
testLayout("gridWithMaxHeightItem", { "rows": "100px 140px" }, { "width": "50", "height": "50" });
testLayout("gridWithMaxHeightItem", { "rows": "100px 240px" }, { "width": "50", "height": "50" });
testLayout("gridWithMaxHeightItem", { "rows": "1000px 240px" }, { "width": "50", "height": "100" });
}
window.addEventListener("load", runTests, false);
</script>
<body>
<p>Test that grid items with a percentage logical min-height or max-height resolve their size properly.</p>
<div id="gridWithMinHeightItem" class="grid">
<div id="minHeightPercent"></div>
</div>
<div id="gridWithMaxHeightItem" class="grid">
<div id="maxHeightPercent"></div>
</div>
<div id="test-output"></div>
</body>
</html>
|
