diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-changes-001.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-changes-001.html | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-changes-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-changes-001.html new file mode 100644 index 0000000000..b32d24859e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-changes-001.html @@ -0,0 +1,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> |