blob: 6170b7a1582f7a3ea51ce5c89f00f2582e0cf62c [file] [log] [blame]
<!DOCTYPE html>
<html>
<script>
if (window.testRunner)
testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
</script>
<link href="resources/grid.css" rel="stylesheet">
<script src="../../resources/check-layout.js"></script>
<script>
function testLayout(gridElementID, gridTracks, size)
{
var gridElement = document.getElementById(gridElementID);
gridElement.style.gridColumns = gridTracks.columns;
gridElement.style.gridRows = gridTracks.rows;
var gridItem = gridElement.firstChild.nextSibling;
gridItem.setAttribute("data-expected-width", size.width);
gridItem.setAttribute("data-expected-height", size.height);
checkLayout("#" + gridElementID);
}
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(-webkit-max-content, 50px)' }, { 'width': '120', 'height': '10' });
testLayout("constrainedGrid", { 'rows': '70px', 'columns': 'minmax(-webkit-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, -webkit-max-content)' }, { 'width': '120', 'height': '10' });
testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'minmax(150px, -webkit-max-content)' }, { 'width': '150', 'height': '10' });
testLayout("unconstrainedGrid", { 'rows': 'auto', 'columns': 'auto' }, { 'width': '120', 'height': '10' });
}
window.addEventListener("load", updateRowsColumns, false);
</script>
<body>
<div>This test checks that grid-{rows|columns} dynamic updates properly relayout the grid items.</div>
<div class="constrainedContainer">
<div class="grid" id="constrainedGrid">
<div class="sizedToGridArea">XXXXX XXXXXX</div>
</div>
</div>
<div class="unconstrainedContainer">
<div class="grid" id="unconstrainedGrid">
<div class="sizedToGridArea">XXXXX XXXXXX</div>
</div>
</div>
</body>
</html>