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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: minimum contribution with percentages</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-grid/#minimum-contribution">
<meta name="assert" content="Checks that the minimum contribution is the minimum size when the preferred size is 'auto' or contains a percentage.">
<style>
#grid {
display: grid;
height: 50px;
width: 50px;
grid: auto / auto;
}
#item {
background: cyan;
}
#content {
height: 100px;
width: 100px;
}
.min {
min-height: calc(100% + 50px);
min-width: calc(100% + 50px);
}
.max {
max-height: calc(100% - 50px);
max-width: calc(100% - 50px);
}
.size {
height: calc(100% + 10px);
width: calc(100% + 10px);
}
</style>
<div id="log"></div>
<div id="grid">
<div id="item">
<div id="content"></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
"use strict";
const cs = getComputedStyle(document.getElementById("grid"));
const item = document.getElementById("item");
function check(name, size) {
item.className = name;
test(function() {
assert_equals(cs.gridTemplateColumns, size + "px", "grid-template-columns");
}, name + " - columns");
test(function() {
assert_equals(cs.gridTemplateRows, size + "px", "grid-template-rows");
}, name + " - rows");
}
// The minimum contribution is the automatic minimum size (100px)
// because the preferred size is 'auto'.
check("auto", 100);
// The minimum contribution is the minimum size (50px)
// because the preferred size is 'auto'.
check("min", 50);
// The minimum contribution is the automatic minimum size (100px)
// because the preferred size is 'auto'.
check("max", 100);
// The minimum contribution is the automatic minimum size (100px)
// because the preferred size depends on the containing block.
check("size", 100);
// The minimum contribution is the minimum size (50px)
// because the preferred size is 'auto'.
check("min max", 50);
// The minimum contribution is the minimum size (50px)
// because the preferred size depends on the containing block.
check("min size", 50);
// The minimum contribution is the automatic minimum size (100px)
// because the preferred size depends on the containing block.
check("max size", 100);
// The minimum contribution is the minimum size (50px)
// because the preferred size depends on the containing block.
check("min max size", 50);
</script>
|
