124 lines
8.4 KiB
HTML
124 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<link href="resources/grid.css" rel="stylesheet">
|
|
<link href="resources/grid-alignment.css" rel="stylesheet">
|
|
<style>
|
|
.gridFixedContent {
|
|
grid-template-columns: 50px minmax(min-content, 50px) minmax(max-content, 50px) minmax(50px, min-content);
|
|
grid-template-rows: 70px minmax(max-content, 70px) minmax(50px, min-content) minmax(65px, max-content);
|
|
}
|
|
</style>
|
|
<script src="../../resources/check-layout.js"></script>
|
|
<script>
|
|
function testPosition(gridElementID, position, size)
|
|
{
|
|
gridItem = document.getElementById(gridElementID).firstChild;
|
|
gridItem.style.gridColumn = position.column;
|
|
gridItem.style.gridRow = position.row;
|
|
gridItem.setAttribute("data-expected-width", size.width);
|
|
gridItem.setAttribute("data-expected-height", size.height);
|
|
checkLayout("#" + gridElementID);
|
|
}
|
|
|
|
function updateImplicitGridColumn()
|
|
{
|
|
testPosition("constrainedGrid", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
|
|
testPosition("constrainedGrid", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '30' });
|
|
testPosition("constrainedGrid", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
|
|
testPosition("constrainedGrid", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
|
|
testPosition("constrainedGrid", { 'column': '1', 'row': '5' }, { 'width': '50', 'height': '30' });
|
|
|
|
testPosition("constrainedGrid", { 'column': '2', 'row': '1' }, { 'width': '40', 'height': '70' });
|
|
testPosition("constrainedGrid", { 'column': '2', 'row': '2' }, { 'width': '40', 'height': '30' });
|
|
testPosition("constrainedGrid", { 'column': '2', 'row': '3' }, { 'width': '40', 'height': '50' });
|
|
testPosition("constrainedGrid", { 'column': '2', 'row': '4' }, { 'width': '40', 'height': '65' });
|
|
testPosition("constrainedGrid", { 'column': '2', 'row': '5' }, { 'width': '40', 'height': '30' });
|
|
|
|
testPosition("constrainedGrid", { 'column': '3', 'row': '1' }, { 'width': '140', 'height': '70' });
|
|
testPosition("constrainedGrid", { 'column': '3', 'row': '2' }, { 'width': '140', 'height': '10' });
|
|
testPosition("constrainedGrid", { 'column': '3', 'row': '3' }, { 'width': '140', 'height': '50' });
|
|
testPosition("constrainedGrid", { 'column': '3', 'row': '4' }, { 'width': '140', 'height': '65' });
|
|
testPosition("constrainedGrid", { 'column': '3', 'row': '5' }, { 'width': '140', 'height': '10' });
|
|
|
|
testPosition("constrainedGrid", { 'column': '4', 'row': '1' }, { 'width': '50', 'height': '70' });
|
|
testPosition("constrainedGrid", { 'column': '4', 'row': '2' }, { 'width': '50', 'height': '30' });
|
|
testPosition("constrainedGrid", { 'column': '4', 'row': '3' }, { 'width': '50', 'height': '50' });
|
|
testPosition("constrainedGrid", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' });
|
|
testPosition("constrainedGrid", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' });
|
|
|
|
testPosition("constrainedGrid", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });
|
|
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '1', 'row': '5' }, { 'width': '50', 'height': '30' });
|
|
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '1' }, { 'width': '40', 'height': '70' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '2' }, { 'width': '40', 'height': '70' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '3' }, { 'width': '40', 'height': '50' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '4' }, { 'width': '40', 'height': '65' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '2', 'row': '5' }, { 'width': '40', 'height': '30' });
|
|
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '1' }, { 'width': '140', 'height': '70' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '2' }, { 'width': '140', 'height': '70' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '3' }, { 'width': '140', 'height': '50' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '4' }, { 'width': '140', 'height': '65' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '3', 'row': '5' }, { 'width': '140', 'height': '10' });
|
|
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '1' }, { 'width': '50', 'height': '70' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '2' }, { 'width': '50', 'height': '70' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '3' }, { 'width': '50', 'height': '50' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '4' }, { 'width': '50', 'height': '65' });
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '4', 'row': '5' }, { 'width': '50', 'height': '30' });
|
|
|
|
testPosition("constrainedGridUndefinedHeight", { 'column': '10', 'row': '15' }, { 'width': '40', 'height': '30' });
|
|
|
|
testPosition("unconstrainedGrid", { 'column': '1', 'row': '1' }, { 'width': '50', 'height': '70' });
|
|
testPosition("unconstrainedGrid", { 'column': '2', 'row': '1' }, { 'width': '60', 'height': '70' });
|
|
testPosition("unconstrainedGrid", { 'column': '3', 'row': '1' }, { 'width': '130', 'height': '70' });
|
|
testPosition("unconstrainedGrid", { 'column': '4', 'row': '1' }, { 'width': '60', 'height': '70' });
|
|
testPosition("unconstrainedGrid", { 'column': '5', 'row': '1' }, { 'width': '130', 'height': '70' });
|
|
|
|
testPosition("unconstrainedGrid", { 'column': '1', 'row': '2' }, { 'width': '50', 'height': '70' });
|
|
testPosition("unconstrainedGrid", { 'column': '2', 'row': '2' }, { 'width': '60', 'height': '70' });
|
|
testPosition("unconstrainedGrid", { 'column': '3', 'row': '2' }, { 'width': '130', 'height': '70' });
|
|
testPosition("unconstrainedGrid", { 'column': '4', 'row': '2' }, { 'width': '60', 'height': '70' });
|
|
testPosition("unconstrainedGrid", { 'column': '5', 'row': '2' }, { 'width': '130', 'height': '70' });
|
|
|
|
testPosition("unconstrainedGrid", { 'column': '1', 'row': '3' }, { 'width': '50', 'height': '50' });
|
|
testPosition("unconstrainedGrid", { 'column': '2', 'row': '3' }, { 'width': '60', 'height': '50' });
|
|
testPosition("unconstrainedGrid", { 'column': '3', 'row': '3' }, { 'width': '130', 'height': '50' });
|
|
testPosition("unconstrainedGrid", { 'column': '4', 'row': '3' }, { 'width': '60', 'height': '50' });
|
|
testPosition("unconstrainedGrid", { 'column': '5', 'row': '3' }, { 'width': '130', 'height': '50' });
|
|
|
|
testPosition("unconstrainedGrid", { 'column': '1', 'row': '4' }, { 'width': '50', 'height': '65' });
|
|
testPosition("unconstrainedGrid", { 'column': '2', 'row': '4' }, { 'width': '60', 'height': '65' });
|
|
testPosition("unconstrainedGrid", { 'column': '3', 'row': '4' }, { 'width': '130', 'height': '65' });
|
|
testPosition("unconstrainedGrid", { 'column': '4', 'row': '4' }, { 'width': '60', 'height': '65' });
|
|
testPosition("unconstrainedGrid", { 'column': '5', 'row': '4' }, { 'width': '130', 'height': '65' });
|
|
|
|
testPosition("unconstrainedGrid", { 'column': '10', 'row': '15' }, { 'width': '130', 'height': '10' });
|
|
}
|
|
window.addEventListener("load", updateImplicitGridColumn, false);
|
|
</script>
|
|
<body>
|
|
|
|
<p>This test checks that we properly recompute our grid tracks' sizes when a grid item changes its grid-row or grid-column.</p>
|
|
|
|
<div class="constrainedContainer">
|
|
<div class="grid gridFixedContent" id="constrainedGrid" style="height: 100%"><div class="sizedToGridArea">XXXX XXXX XXXX</div></div>
|
|
</div>
|
|
|
|
<div class="constrainedContainer">
|
|
<div class="grid gridFixedContent" id="constrainedGridUndefinedHeight"><div class="sizedToGridArea">XXXX XXXX XXXX</div></div>
|
|
</div>
|
|
|
|
<!-- Allow the extra logical space distribution to occur. -->
|
|
<div style="width: 1000px; height: 1000px">
|
|
<div class="grid gridFixedContent justifyContentStart" id="unconstrainedGrid"><div class="sizedToGridArea">XXXXXX XXXXXX</div></div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|