/
grid-template-columns-rows-changes-001.html
76 lines (69 loc) · 4.89 KB
/
grid-template-columns-rows-changes-001.html
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
<!DOCTYPE html>
<html>
<title>CSS Grid: grid-tempalte-{rows|colums} dynamic updates</title>
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=112501">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/css/support/alignment.css">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
<meta name="assert" content="This test checks that grid-tempalte-{rows|colums} dynamic updates properly relayout the grid items.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script>
setup({ explicit_done: true });
function testLayout(gridElementID, gridTracks, size, last = false)
{
var gridElement = document.getElementById(gridElementID);
gridElement.style.gridTemplateColumns = gridTracks.columns;
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, last);
}
function updateRowsColumns()
{
// In the constrained grid case, we will always end up sizing after the min width. This means we don't test max width changes as they would not be detectable.
testLayout("constrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '20' });
testLayout("constrainedGrid", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '40' });
testLayout("constrainedGrid", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '40' });
testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '20' });
testLayout("constrainedGrid", { 'rows': 'auto', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '10' });
testLayout("constrainedGrid", { 'rows': '70px', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '70' });
testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '50' });
testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(30px, 50px)' }, { 'width': '30', 'height': '50' });
testLayout("constrainedGridUndefinedHeight", { 'rows': 'minmax(40px, 50px)', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '50' });
testLayout("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'minmax(50px, 50px)' }, { 'width': '50', 'height': '20' });
testLayout("constrainedGridUndefinedHeight", { 'rows': 'auto', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '10' });
testLayout("constrainedGridUndefinedHeight", { 'rows': '70px', 'columns': 'minmax(max-content, 50px)' }, { 'width': '120', 'height': '70' });
testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(20px, 60px)' }, { 'width': '60', 'height': '50' });
testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 50px)', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '50' });
testLayout("unconstrainedGrid", { 'rows': 'minmax(20px, 30px)', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '30' });
testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, 40px)' }, { 'width': '40', 'height': '20' });
testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(20px, max-content)' }, { 'width': '120', 'height': '10' });
testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(150px, max-content)' }, { 'width': '150', 'height': '10' });
testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120', 'height': '10' });
testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(min-content, 1fr) 3fr' }, { 'width': '250', 'height': '10' });
testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(min-content, 3fr) 3fr' }, { 'width': '500', 'height': '10' }, true);
}
</script>
<body onload="document.fonts.ready.then(() => { updateRowsColumns(); })">
<div class="constrainedContainer">
<div class="grid" id="constrainedGrid" style="height: 100%">
<div class="sizedToGridArea">XXXXX XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid" id="constrainedGridUndefinedHeight">
<div class="sizedToGridArea">XXXXX XXXXXX</div>
</div>
</div>
<div class="unconstrainedContainer">
<div class="grid justifyContentStart" id="unconstrainedGrid">
<div class="sizedToGridArea">XXXXX XXXXXX</div>
</div>
</div>
</body>
</html>