diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/grid-definition')
80 files changed, 9729 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/explicit-grid-size-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/explicit-grid-size-001.html new file mode 100644 index 0000000000..266c6a568c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/explicit-grid-size-001.html @@ -0,0 +1,176 @@ +<!DOCTYPE html> +<title>CSS Grid: grid size with explicit grid-template-areas.</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-definition"/> +<link rel="issue" href="https://crrev.com/603160"/> +<meta name="assert" content="Test ensures that the explicit grid size is set by the maximum of the grid-template-columns|rows properties and grid-template-areas."/> + +<link href="/css/support/grid.css" rel="stylesheet"/> +<style> + +.grid { + grid-auto-columns: 10px; + grid-auto-rows: 10px; + position: relative; +} + +.oneColumnOneRow { + grid-template-columns: 50px; + grid-template-rows: 50px; +} + +.twoColumnsOneRow { + grid-template-columns: 50px 50px; + grid-template-rows: 50px; +} + +.oneColumnTwoRows { + grid-template-columns: 50px; + grid-template-rows: 50px 50px; +} + +.twoColumnsTwoRows { + grid-template-columns: 50px 50px; + grid-template-rows: 50px 50px; +} + +.oneColumnOneRowAreas { + grid-template-areas: "a"; +} + +.twoColumnsOneRowAreas { + grid-template-areas: "a b"; +} + +.oneColumnTwoRowsAreas { + grid-template-areas: "a" + "b"; +} + +.twoColumnsTwoRowsAreas { + grid-template-areas: "a b" + "c d"; +} + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.grid')"> +<div id="log"></div> + +<div class="grid"> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10"> + </div> +</div> + +<div class="grid oneColumnOneRow"> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> +</div> + +<div class="grid oneColumnOneRowAreas"> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10"> + </div> +</div> + +<div class="grid oneColumnTwoRows"> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"> + </div> +</div> + +<div class="grid oneColumnTwoRowsAreas"> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="10" data-expected-width="10" data-expected-height="10"> + </div> +</div> + +<div class="grid twoColumnsOneRow"> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> +</div> + +<div class="grid twoColumnsOneRowAreas"> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="10"> + </div> +</div> + +<div class="grid twoColumnsTwoRows"> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"> + </div> +</div> + +<div class="grid twoColumnsTwoRowsAreas"> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="10" data-offset-y="0" data-expected-width="10" data-expected-height="10"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="10" data-expected-width="10" data-expected-height="10"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="10" data-offset-y="10" data-expected-width="10" data-expected-height="10"> + </div> +</div> + +<div class="grid oneColumnOneRow twoColumnsTwoRowsAreas"> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="10" data-expected-height="50"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="10"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="50" data-offset-y="50" data-expected-width="10" data-expected-height="10"> + </div> +</div> + +<div class="grid twoColumnsTwoRows oneColumnOneRowAreas"> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="50" data-offset-y="50" data-expected-width="50" data-expected-height="50"> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-distribution-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-distribution-001.html new file mode 100644 index 0000000000..62fb46deeb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-distribution-001.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<title>CSS Grid Layout Test: free space computation with flex lengths.</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-flex-tracks"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit"> +<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=150359"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<meta name="assert" content="Test that free space is properly computed after computing fr tracks so that we could use it for content distribution." /> + +<style> +.freeSpaceForColumnsGrid { + grid-template: 100% / minmax(20px, 0.7fr); + width: 50px; + height: 100px; +} + +.freeSpaceForRowsGrid { + grid-template: minmax(20px, 0.7fr) / 100%; + width: 50px; + height: 100px; +} + +.container { position: relative; } + +.item { + width: 100%; + height: 50px; + background-color: red; +} + +.item2 { + width: 50px; + height: 100%; + background-color: red; +} + +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid');"> + +<p>Grid with justify-content: start.</p> +<div class="container"> + <div class="grid freeSpaceForColumnsGrid justifyContentStart"> + <div class="item" data-offset-x="0" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div> + </div> +</div> + +<p>Grid with justify-content: center.</p> +<div class="container"> + <div class="grid freeSpaceForColumnsGrid justifyContentCenter"> + <div class="item" data-offset-x="8" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div> + </div> +</div> + +<p>Grid with justify-content: end.</p> +<div class="container"> + <div class="grid freeSpaceForColumnsGrid justifyContentEnd"> + <div class="item" data-offset-x="15" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div> + </div> +</div> + +<p>Grid with align-content: start.</p> +<div class="container"> + <div class="grid freeSpaceForRowsGrid alignContentStart"> + <div class="item2" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="70"></div> + </div> +</div> + +<p>Grid with align-content: center.</p> +<div class="container"> + <div class="grid freeSpaceForRowsGrid alignContentCenter"> + <div class="item2" data-offset-x="0" data-offset-y="15" data-expected-width="50" data-expected-height="70"></div> + </div> +</div> + +<p>Grid with align-content: end.</p> +<div class="container"> + <div class="grid freeSpaceForRowsGrid alignContentEnd"> + <div class="item2" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="70"></div> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-columns-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-columns-001.html new file mode 100644 index 0000000000..ce70aa31de --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-columns-001.html @@ -0,0 +1,182 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-columns and flexible lengths.</title> +<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that resolving auto tracks on grid items using <flex> values with grid-template-columns works properly." /> + +<style> +.gridFlexContent { + grid-template-columns: 1fr 1fr; + grid-template-rows: 50px; +} +.gridMaxFlexContent { + grid-template-columns: minmax(30px, 2fr); + grid-template-rows: 50px; +} +.gridTwoMaxFlexContent { + grid-template-columns: minmax(10px, 1fr) minmax(10px, 2fr); + grid-template-rows: 50px; +} +.gridTwoDoubleMaxFlexContent { + grid-template-columns: minmax(10px, 0.5fr) minmax(10px, 2fr); + grid-template-rows: 50px; +} +.gridIgnoreSecondGridItem { + grid-template-columns: minmax(300px, 3fr) minmax(150px, 1fr); + grid-template-rows: 50px; +} +.gridRespectBaseSize { + grid-template-columns: minmax(75px, 1fr) minmax(0px, 2fr); + grid-template-rows: 50px; +} +.gridRespectProportions { + grid-template-columns: minmax(0px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr); + grid-template-rows: 50px; +} +.gridRespectBaseSizeProportions { + grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr); + grid-template-rows: 50px; +} +.gridRespectBaseSizeBeforeProportions { + grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr); + grid-template-rows: 50px; +} +.firstRowThirdColumn { + background-color: yellow; + grid-column: 3; + grid-row: 1; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div class="constrainedContainer" style="position: relative"> + <div class="grid gridFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="50">XXX</div> + <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="30" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50"></div> + </div> +</div> + +<!-- Allow the extra logical space distribution to occur. --> +<div style="width: 40px; height: 10px"> + <div class="grid gridMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div> + </div> +</div> + +<div style="width: 100px; height: 10px;"> + <div class="grid gridMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + + +<div class="constrainedContainer"> + <div class="grid gridTwoMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div> + </div> +</div> + +<!-- Allow the extra logical space distribution to occur. --> +<div style="width: 60px; height: 10px"> + <div class="grid gridTwoMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="40" data-expected-height="50"></div> + </div> +</div> + +<div style="width: 120px; height: 10px;"> + <div class="grid gridTwoMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50"></div> + </div> +</div> + + +<div class="constrainedContainer"> + <div class="grid gridTwoDoubleMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div> + </div> +</div> + +<!-- Allow the extra logical space distribution to occur. --> +<div style="width: 60px; height: 10px"> + <div class="grid gridTwoDoubleMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="12" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="48" data-expected-height="50"></div> + </div> +</div> + +<div style="width: 120px; height: 10px;"> + <div class="grid gridTwoDoubleMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="24" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="96" data-expected-height="50"></div> + </div> +</div> + + +<!-- Custom test for a corner case. --> +<div style="width: 570px; height: 10px;"> + <div class="grid gridIgnoreSecondGridItem"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="420" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="150" data-expected-height="50"></div> + </div> +</div> + +<!-- Flex track length must be at least its baseSize. --> +<div style="width: 100px; height: 10px;"> + <div class="grid gridRespectBaseSize"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="75" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="25" data-expected-height="50"></div> + </div> +</div> + +<!-- Flex track lengths must be proportional to their flex factors.. --> +<div style="width: 275px; height: 10px;"> + <div class="grid gridRespectProportions"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="25" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50"></div> + </div> +</div> + +<!-- Flex track lengths must be proportional but still respecting their base sizes. --> +<div style="width: 350px; height: 10px;"> + <div class="grid gridRespectBaseSizeProportions"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50"></div> + </div> +</div> + +<!-- Not enough space to respect proportions, because minTrackBreadh it's a harder requirement --> +<div style="width: 275px; height: 10px;"> + <div class="grid gridRespectBaseSizeBeforeProportions"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="75" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="150" data-expected-height="50"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-columns-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-columns-002.html new file mode 100644 index 0000000000..b92eb9f0dd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-columns-002.html @@ -0,0 +1,159 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-columns and minmax sizes.</title> +<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that resolving auto tracks on grid items inside containers using minmax() with grid-template-columns works properly." /> + +<style> +.gridMaxMaxContent { + grid-template-columns: minmax(10px, max-content) minmax(10px, 1fr); + grid-template-rows: 50px; +} + +.gridMinMinContent { + grid-template-columns: minmax(10px, 1fr) minmax(min-content, 50px); + grid-template-rows: 50px; +} + +.gridWithIntrinsicSizeBiggerThanFlex { + grid-template-columns: minmax(min-content, 0.5fr) minmax(18px, 2fr); + grid-template-rows: 50px; +} + +.gridShrinkBelowItemsIntrinsicSize { + grid-template-columns: minmax(0px, 1fr) minmax(0px, 2fr); + grid-template-rows: 50px; +} + +.gridWithNonFlexingItems { + grid-template-columns: 40px minmax(min-content, 1fr) auto minmax(20px, 2fr); + grid-template-rows: 50px; +} + +.firstRowThirdColumn { + grid-column: 3; + grid-row: 1; +} +.firstRowFourthColumn { + grid-column: 4; + grid-row: 1; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div class="constrainedContainer"> + <div class="grid gridMaxMaxContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XXXXX</div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div> + </div> +</div> + +<!-- Allow the extra logical space distribution to occur. --> +<div style="width: 40px; height: 10px"> + <div class="grid gridMaxMaxContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50">XXXXX</div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div> + </div> +</div> + +<div style="width: 110px; height: 10px;"> + <div class="grid gridMaxMaxContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX</div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="60" data-expected-height="50"></div> + </div> +</div> + + +<div class="constrainedContainer"> + <div class="grid gridMinMinContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XX XX</div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50">XX XX</div> + </div> +</div> + +<!-- Allow the extra logical space distribution to occur. --> +<div style="width: 40px; height: 10px"> + <div class="grid gridMinMinContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XX XX</div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="30" data-expected-height="50">XX XX</div> + </div> +</div> + +<div style="width: 110px; height: 10px;"> + <div class="grid gridMinMinContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50">XX XX</div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="50">XX XX</div> + </div> +</div> + + +<div style="width: 220px; height: 10px;"> + <div class="grid gridWithIntrinsicSizeBiggerThanFlex"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="200" data-expected-height="50"> + <div style="display: inline-block; width: 200px;"></div> + </div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div> + </div> +</div> + + +<div style="width: 120px; height: 10px;"> + <div class="grid gridShrinkBelowItemsIntrinsicSize"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"> + <div style="display: inline-block; width: 200px;"></div> + </div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50">XXXXXXXXXX</div> + </div> +</div> + + +<!-- No space available for the <flex> --> +<div style="width: 220px; height: 10px;"> + <div class="grid gridWithNonFlexingItems"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"> + <div style="display: inline-block; width: 100px;"></div> + </div> + <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="100" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div> + <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="20" data-expected-height="50"></div> + </div> +</div> + +<!-- The second track should be sized after the min-content as the <flex> value should be too small. --> +<div style="width: 380px; height: 10px;"> + <div class="grid gridWithNonFlexingItems"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"> + <div style="display: inline-block; width: 100px;"></div> + </div> + <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div> + <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="40" data-expected-height="50"></div> + </div> +</div> + +<div style="width: 400px; height: 10px;"> + <div class="grid gridWithNonFlexingItems"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"> + <div style="display: inline-block; width: 100px;"></div> + </div> + <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div> + <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="60" data-expected-height="50"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-rows-001.html new file mode 100644 index 0000000000..d10b84014d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-rows-001.html @@ -0,0 +1,253 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-rows and flexible lengths.</title> +<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that resolving auto tracks on grid items using <flex> values with grid-template-rows works properly." /> + +<style> +.gridFlexContent { + grid-template-columns: 50px; + grid-template-rows: 1fr 1fr; +} +.gridMaxFlexContent { + grid-template-columns: 50px; + grid-template-rows: minmax(30px, 2fr); +} +.gridTwoMaxFlexContent { + grid-template-columns: 50px; + grid-template-rows: minmax(10px, 1fr) minmax(10px, 2fr); +} +.gridTwoDoubleMaxFlexContent { + grid-template-columns: 50px; + grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr); +} +.gridRespectBaseSize { + grid-template-columns: 50px; + grid-template-rows: minmax(75px, 1fr) minmax(0px, 2fr); +} +.gridRespectProportions { + grid-template-columns: 50px; + grid-template-rows: minmax(25px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr); +} +.gridRespectBaseSizeProportions { + grid-template-columns: 50px; + grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr); +} +.gridRespectBaseSizeBeforeProportions { + grid-template-columns: 50px; + grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr); +} +.thirdRowFirstColumn { + background-color: yellow; + grid-column: 1; + grid-row: 3; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div class="grid gridFlexContent constrainedContainer" style="position: relative;"> + <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div> + <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="50">X<br>X<br>X<br>X<br>X</div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div> + </div> +</div> + +<!-- Allow the extra logical space distribution to occur. --> +<div style="width: 10px; height: 40px"> + <div class="grid gridMaxFlexContent" style="height: 100%;"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> + </div> +</div> + +<div style="width: 10px; height: 40px"> + <div class="grid gridMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div> + </div> +</div> + +<div style="width: 10px; height: 100px;"> + <div class="grid gridMaxFlexContent" style="height: 100%;"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> + +<div style="width: 10px; height: 100px;"> + <div class="grid gridMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridTwoMaxFlexContent" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridTwoMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> + </div> +</div> + +<!-- Allow the extra logical space distribution to occur. --> +<div style="width: 10px; height: 60px"> + <div class="grid gridTwoMaxFlexContent" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> + </div> +</div> + +<div style="width: 10px; height: 60px"> + <div class="grid gridTwoMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> + </div> +</div> + +<div style="width: 10px; height: 120px;"> + <div class="grid gridTwoMaxFlexContent" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div> + </div> +</div> + +<div style="width: 10px; height: 120px;"> + <div class="grid gridTwoMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + </div> +</div> + +<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. --> +<div class="constrainedContainer"> + <div class="grid gridTwoDoubleMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> + </div> +</div> + +<!-- Allow the extra logical space distribution to occur. --> +<div style="width: 10px; height: 60px"> + <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="12"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="48"></div> + </div> +</div> + +<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. --> +<div style="width: 10px; height: 60px"> + <div class="grid gridTwoDoubleMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> + </div> +</div> + +<div style="width: 10px; height: 120px;"> + <div class="grid gridTwoDoubleMaxFlexContent" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="24"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="96"></div> + </div> +</div> + +<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. --> +<div style="width: 10px; height: 120px;"> + <div class="grid gridTwoDoubleMaxFlexContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> + </div> +</div> + +<!-- Flex track length must be at least its baseSize. --> +<div style="width: 10px; height: 100px;"> + <div class="grid gridRespectBaseSize" style="height: 100%;"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="75"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div> + </div> +</div> + +<div style="width: 10px; height: 100px;"> + <div class="grid gridRespectBaseSize"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="75"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="150"></div> + </div> +</div> + +<!-- Flex track lengths must be proportional to their flex factors.. --> +<div style="width: 10px; height: 275px;"> + <div class="grid gridRespectProportions" style="height: 100%;"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> + <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div> + </div> +</div> + +<div style="width: 10px; height: 275px;"> + <div class="grid gridRespectProportions"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="13"></div> + <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> + </div> +</div> + +<!-- Flex track lengths must be proportional but still respecting their base sizes. --> +<div style="width: 10px; height: 350px;"> + <div class="grid gridRespectBaseSizeProportions" style="height: 100%;"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div> + <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div> + </div> +</div> + +<div style="width: 10px; height: 350px;"> + <div class="grid gridRespectBaseSizeProportions"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div> + <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> + </div> +</div> + +<!-- Not enough space to respect proportions, because minTrackBreadh it's a harder requirement --> +<div style="width: 10px; height: 275px;"> + <div class="grid gridRespectBaseSizeBeforeProportions" style="height: 100%;"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div> + <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="150"></div> + </div> +</div> + +<div style="width: 10px; height: 275px;"> + <div class="grid gridRespectBaseSizeBeforeProportions"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div> + <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-rows-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-rows-002.html new file mode 100644 index 0000000000..d668a93a32 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/flex-content-resolution-rows-002.html @@ -0,0 +1,220 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid Layout Test: Auto repeat tracks, grid-template-rows and minmax sizes.</title> +<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizes"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=235258"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that resolving auto tracks on grid items inside containers using minmax() with grid-template-rows works properly." /> + +<style> +.gridMaxMaxContent { + grid-template-columns: 50px; + grid-template-rows: minmax(10px, max-content) minmax(10px, 1fr); +} + +.gridMinMinContent { + grid-template-columns: 50px; + grid-template-rows: minmax(10px, 1fr) minmax(min-content, 50px); +} + +.gridWithIntrinsicSizeBiggerThanFlex { + grid-template-columns: 50px; + grid-template-rows: minmax(min-content, 0.5fr) minmax(18px, 2fr); +} + +.gridShrinkBelowItemsIntrinsicSize { + grid-template-columns: 50px; + grid-template-rows: minmax(0px, 1fr) minmax(0px, 2fr); +} + +.gridWithNonFlexingItems { + grid-template-columns: 50px; + grid-template-rows: 40px minmax(min-content, 1fr) auto minmax(20px, 2fr); +} + +.thirdRowFirstColumn { + grid-column: 1; + grid-row: 3; +} +.fourthRowFirstColumn { + grid-column: 1; + grid-row: 4; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div class="constrainedContainer"> + <div class="grid gridMaxMaxContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + </div> +</div> + +<!-- Allow the extra logical space distribution to occur. --> +<div style="width: 10px; height: 40px"> + <div class="grid gridMaxMaxContent" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div> + </div> +</div> + +<div style="width: 10px; height: 40px"> + <div class="grid gridMaxMaxContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + </div> +</div> + +<div style="width: 10px; height: 110px;"> + <div class="grid gridMaxMaxContent" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div> + </div> +</div> + +<div style="width: 10px; height: 110px;"> + <div class="grid gridMaxMaxContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMinMinContent" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMinMinContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div> + </div> +</div> + +<!-- Allow the extra logical space distribution to occur. --> +<div style="width: 10px; height: 40px"> + <div class="grid gridMinMinContent" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div> + </div> +</div> + +<div class="grid gridMinMinContent" style="height: 40px"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div> +</div> + +<div style="width: 10px; height: 110px;"> + <div class="grid gridMinMinContent" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div> + </div> +</div> + +<div style="width: 10px; height: 110px;"> + <div class="grid gridMinMinContent"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div> + </div> +</div> + +<div style="width: 10px; height: 60px;"> + <div class="grid gridWithIntrinsicSizeBiggerThanFlex" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> + </div> +</div> + +<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. --> +<div style="width: 10px; height: 60px;"> + <div class="grid gridWithIntrinsicSizeBiggerThanFlex"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div> + </div> +</div> + +<div style="width: 10px; height: 60px;"> + <div class="grid gridShrinkBelowItemsIntrinsicSize" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> + </div> +</div> + +<div style="width: 10px; height: 60px;"> + <div class="grid gridShrinkBelowItemsIntrinsicSize"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> + </div> +</div> + +<!-- No space available for the <flex> --> +<div style="width: 10px; height: 100px;"> + <div class="grid gridWithNonFlexingItems" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> + </div> +</div> + +<div style="width: 10px; height: 100px;"> + <div class="grid gridWithNonFlexingItems"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div> + </div> +</div> + +<!-- The second track should be sized after the min-content as the <flex> value should be too small. --> +<div style="width: 10px; height: 180px;"> + <div class="grid gridWithNonFlexingItems" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> + </div> +</div> + +<div style="width: 10px; height: 180px;"> + <div class="grid gridWithNonFlexingItems"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div> + </div> +</div> + +<div style="width: 10px; height: 400px;"> + <div class="grid gridWithNonFlexingItems" style="height: 100%"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="200"></div> + </div> +</div> + +<div style="width: 10px; height: 400px;"> + <div class="grid gridWithNonFlexingItems"> + <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div> + <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="80"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/flex-factor-sum-less-than-1-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/flex-factor-sum-less-than-1-001.html new file mode 100644 index 0000000000..ad7af2d846 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/flex-factor-sum-less-than-1-001.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid Layout Test: flex factor sum smaller than 1.</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-find-fr-size"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#fr-unit"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=520477"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="Test that resolving auto tracks on grid items works properly even when the flex factor sum is less than 1." /> + +<style> +.onlyColumnFractionFlexFactors { + grid-template-columns: minmax(0, 0.1fr) minmax(0, 0.2fr) minmax(0, 0.3fr); + grid-template-rows: 50px; + width: 100px; +} +.onlyRowFractionFlexFactors { + grid-template-columns: 50px; + grid-template-rows: minmax(0, 0.1fr) minmax(0, 0.2fr) minmax(0, 0.3fr); + width: 50px; + height: 100px; +} +.fixedAndfractionFlexFactors { + grid-template-columns: 50px minmax(0, 0.2fr) 30px; + grid-template-rows: minmax(0, 0.1fr) 50px minmax(0, 0.3fr); + width: 100px; + height: 100px; +} +.zeroValueFlexFactor { + grid-template-columns: .0fr .2fr .3fr; + grid-template-rows: 50px; + width: 100px; +} +.firstRowThirdColumn { + background-color: yellow; + grid-column: 3; + grid-row: 1; +} +.secondRowThirdColumn { + background-color: yellow; + grid-column: 3; + grid-row: 2; +} +.thirdRowFirstColumn { + background-color: brown; + grid-column: 1; + grid-row: 3; +} +.thirdRowThirdColumn { + background-color: magenta; + grid-column: 3; + grid-row: 3; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid');"> + +<div style="position: relative;"> + <div class="grid onlyColumnFractionFlexFactors"> + <div class="firstRowFirstColumn" data-expected-width="10" data-expected-height="50"></div> + <div class="firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div> + <div class="firstRowThirdColumn" data-expected-width="30" data-expected-height="50"></div> + </div> +</div> + +<div style="position: relative;"> + <div class="grid onlyRowFractionFlexFactors"> + <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div> + <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div> + <div class="thirdRowFirstColumn" data-expected-width="50" data-expected-height="30"></div> + </div> +</div> + +<div style="position: relative;"> + <div class="grid zeroValueFlexFactor"> + <div class="firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div> + <div class="firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div> + <div class="firstRowThirdColumn" data-expected-width="30" data-expected-height="50"></div> + </div> +</div> + +<div style="position: relative;"> + <div class="grid fixedAndfractionFlexFactors"> + <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="5"></div> + <div class="firstRowSecondColumn" data-expected-width="4" data-expected-height="5"></div> + <div class="firstRowThirdColumn" data-expected-width="30" data-expected-height="5"></div> + <div class="secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div> + <div class="secondRowSecondColumn" data-expected-width="4" data-expected-height="50"></div> + <div class="secondRowThirdColumn" data-expected-width="30" data-expected-height="50"></div> + <div class="thirdRowFirstColumn" data-expected-width="50" data-expected-height="15"></div> + <div class="thirdRowSecondColumn" data-expected-width="4" data-expected-height="15"></div> + <div class="thirdRowThirdColumn" data-expected-width="30" data-expected-height="15"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/flex-item-grid-container-percentage-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/flex-item-grid-container-percentage-rows-001.html new file mode 100644 index 0000000000..ba655ce8a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/flex-item-grid-container-percentage-rows-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>CSS Grid Layout Test: Percentage rows resolution in a flex item grid container</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox/#definite-sizes"> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=617876"> +<link rel="match" href="../reference/flex-item-grid-container-percentage-rows-001-ref.html"> +<meta name="assert" content="This test ensures that percentage rows are properly resolved for a grid container that is a flex item with a definite height."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.flex { + display: flex; + flex-direction: column; + width: 200px; + height: 200px; + border: 5px solid; +} + +.flexitem { + flex: 1; + background: magenta; +} + +.grid { + display: grid; + grid: 50% / 1fr; +} + +.griditem { + background: cyan; +} +</style> + +<p>Test passes if you see a 200x200 box with top half cyan and bottom half magenta.</p> + +<div class="flex"> + <div class="flexitem grid"> + <div class="griditem"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/fr-unit-with-percentage.html b/testing/web-platform/tests/css/css-grid/grid-definition/fr-unit-with-percentage.html new file mode 100644 index 0000000000..82c97abdd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/fr-unit-with-percentage.html @@ -0,0 +1,102 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS3 Grid Layout: Flexible Length</title> + <link rel="author" title="swain" href="mailto:swainet@126.com"/> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 --> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit"/> + <link rel="match" href="../reference/fr-unit-with-percentage-ref.html"> + <style type="text/css"> + #container { + position:relative; + width:400px; + height:100px; + } + + #grid { + display:grid; + grid-template-columns:1fr 75%; + grid-template-rows:1fr 70%; + width:100%; + height:100%; + } + + #cell1 { + grid-column:1; + grid-row:1; + } + + #cell2 { + grid-column:2; + grid-row:1; + } + + #cell3 { + grid-column:1; + grid-row:2; + height:100%; + } + + #cell4 { + grid-column:2; + grid-row:2; + background-color:green; + height:100%; + } + + .error { + position:absolute; + top:0; + left:0; + height:100%; + width:100%; + z-index:-1; + } + + #table { + width:100%; + height:100%; + border-collapse:collapse; + } + + #table td { + padding:0; + vertical-align:top; + } + + #table td:first-child { + width:100px; + } + + #table tr:first-child td { + height:30px; + } + </style> +</head> +<body> +<p>Test passes if there is a green square and no red.</p> + +<div id="container"> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + <div id="cell3">cell3</div> + <div id="cell4">cell4</div> + </div> + <div class="error"> + <table id="table"> + <tbody> + <tr> + <td> </td> + <td> </td> + </tr> + <tr> + <td> </td> + <td style="background-color:red"> </td> + </tr> + </tbody> + </table> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/fr-unit.html b/testing/web-platform/tests/css/css-grid/grid-definition/fr-unit.html new file mode 100644 index 0000000000..00ef5a5974 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/fr-unit.html @@ -0,0 +1,105 @@ +<!DOCTYPE HTML> +<html> +<head> + <title>CSS3 Grid Layout: Flexible Length</title> + <link rel="author" title="swain" href="mailto:swainet@126.com"/> + <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"/> <!-- 2013-09-22 --> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit"/> + <link rel="match" href="../reference/fr-unit-ref.html"> + <meta name="assert" content="'fr' unit represents a fraction of the free space in the grid container."/> + <style type="text/css"> + #container { + position:relative; + width:400px; + height:100px; + } + + #grid { + display:grid; + grid-template-columns:100px 1fr; + grid-template-rows:30px 1fr; + width:100%; + height:100%; + } + + #cell1 { + grid-column:1; + grid-row:1; + height:30px; + } + + #cell2 { + grid-column:2; + grid-row:1; + height:30px; + } + + #cell3 { + grid-column:1; + grid-row:2; + height:100%; + } + + #cell4 { + grid-column:2; + grid-row:2; + background-color:green; + height:100%; + } + + .error { + position:absolute; + top:0; + left:0; + height:100%; + width:100%; + z-index:-1; + } + + #table { + width:100%; + height:100%; + border-collapse:collapse; + } + + #table td { + padding:0; + vertical-align:top; + } + + #table td:first-child { + width:100px; + } + + #table tr:first-child td { + height:30px; + } + </style> +</head> +<body> +<p>Test passes if there is a green square and no red.</p> + +<div id="container"> + <div id="grid"> + <div id="cell1">cell1</div> + <div id="cell2">cell2</div> + <div id="cell3">cell3</div> + <div id="cell4">cell4</div> + </div> + <div class="error"> + <table id="table"> + <tbody> + <tr> + <td> </td> + <td> </td> + </tr> + <tr> + <td> </td> + <td style="background-color:red"> </td> + </tr> + </tbody> + </table> + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-add-item-with-positioned-items-crash.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-add-item-with-positioned-items-crash.html new file mode 100644 index 0000000000..7b2ed99f22 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-add-item-with-positioned-items-crash.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Grid Layout Test: no crash with adding positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-definition"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=273898"> +<meta name="assert" content="Test that adding grid items when some of them are positioned does not crash." /> + +<style> +#grid { + display: grid; + grid-auto-flow: dense; +} + +.absolute { + position: absolute; +} +</style> +</head> + +<body> +<div id="grid"> + <div></div> + <div class="absolute"></div> +</div> + +<script> + var grid = document.getElementById("grid"); + grid.offsetTop; + var newItem1 = document.createElement("div"); + grid.appendChild(newItem1); + var newItem2 = document.createElement("div"); + newItem2.className = "absolute"; + grid.appendChild(newItem2); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-add-positioned-block-item-after-inline-item-crash.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-add-positioned-block-item-after-inline-item-crash.html new file mode 100644 index 0000000000..4b7aa9913a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-add-positioned-block-item-after-inline-item-crash.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Grid Layout Test: no crash with positioned block grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-definition"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=273898"> +<meta name="assert" content="Test that adding a positioned block grid item after an inline grid item does not crash." /> + +<style> +#grid { + display: grid; + grid-auto-flow: dense; +} + +embed { + position: absolute; +} +</style> +</head> + +<body> +<div id="grid"> + test +</div> + +<script> + var grid = document.getElementById("grid"); + grid.offsetTop; + var embed = document.createElement("embed"); + embed.setAttribute("type", "image/png"); + grid.appendChild(embed); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-explicit-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-explicit-rows-001.html new file mode 100644 index 0000000000..81b531ca34 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-explicit-rows-001.html @@ -0,0 +1,39 @@ +<!doctype html> +<title>grid-auto applies to explicit rows</title> + +<link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/"> +<link rel=help href="https://www.w3.org/TR/css-grid-1/#implicit-grids"> +<meta name=assert content="grid-auto-rows/columns should dictate the size of all rows past grid-template-rows/columns, even if they are part of the explicit grid as established by grid-template-areas; they're not just limited to implicit tracks."> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<style> +.grid { + display: grid; + grid-template-areas: "a b c" "d e f" "g e h"; + grid-template-rows: 11px 13px; + grid-auto-rows: 17px 19px; + grid-template-columns: 23px 29px; + grid-auto-columns: 31px 37px; +} + +.grid > div { + background: rgba(0, 0, 0, .2); +} +#c1 { grid-area: 1 / 1 / 2 / 2; } +#c2 { grid-area: 1 / 1 / 3 / 3; } +#c3 { grid-area: 1 / 1 / 4 / 4; } +#c4 { grid-area: 1 / 1 / 5 / 5; } +</style> + +<div class=grid> + <div id=c1 data-expected-width=23 data-expected-height=11></div> + <div id=c2 data-expected-width=52 data-expected-height=24></div> + <div id=c3 data-expected-width=83 data-expected-height=41></div> + <div id=c4 data-expected-width=120 data-expected-height=60></div> +</div> + +<script> +checkLayout('.grid'); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fill-columns-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fill-columns-001.html new file mode 100644 index 0000000000..44c6080101 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fill-columns-001.html @@ -0,0 +1,185 @@ +<!DOCTYPE html> +<title>CSS Grid: auto-fill columns</title> +<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fill"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-column-gap"> +<link rel="help" href="https://crbug.com/619930"> +<link rel="help" href="https://crbug.com/589460"> +<meta name="assert" content="Check that auto-fill columns are properly computed in a grid container"/> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + +.grid { + border: 2px solid magenta; + width: 200px; + position: relative; + justify-content: start; + grid-auto-columns: 157px; + grid-auto-rows: 25px; +} + +.gridOnlyAutoRepeat { grid-template-columns: repeat(auto-fill, 30px [autobar]); } +.gridPercentAutoRepeat { grid-template-columns: repeat(auto-fit, 30% [autobar]); padding: 0 13px; } +.gridMinMaxAutoRepeat { grid-template-columns: repeat(auto-fill, minmax(13px, 30px)); } +.gridMaxMinAutoRepeat { grid-template-columns: repeat(auto-fill, minmax(30px, 13px)); } +.gridMaxMinPercentAutoRepeat { grid-template-columns: repeat(auto-fill, minmax(30px, 6.5%)); } +.gridAutoRepeatAndFixedBefore { grid-template-columns: 10px [foo] 20% [bar] repeat(auto-fill, [autofoo] 35px); } +.gridAutoRepeatAndFixedAfter { grid-template-columns: repeat(auto-fill, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); } +.gridAutoRepeatAndFixed { grid-template-columns: [start] repeat(2, 50px [a]) [middle] repeat(auto-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; } +.gridMultipleNames { grid-template-columns: [start] 20px [foo] 50% repeat(auto-fill, [bar] 20px [start foo]) [foo] 10% [end bar]; } +.gridMultipleTracks { grid-template-columns: [start] 20px repeat(auto-fill, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; } + +.item { background: cyan; } + +.gap { grid-column-gap: 20px; } + +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> +<div id="log"></div> + +<p>This test checks that repeat(auto-fill, ) syntax works as expected.</p> + +<div class="grid gridOnlyAutoRepeat"> + <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridPercentAutoRepeat"> + <div class="item" style="grid-column: 1 / -1" data-offset-x="13" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridMinMaxAutoRepeat"> + <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridMaxMinAutoRepeat"> + <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridMaxMinPercentAutoRepeat"> + <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridOnlyAutoRepeat"> + <div class="item" style="grid-column: 1 / span 6 autobar" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridOnlyAutoRepeat gap"> + <div class="item" style="grid-column: 1 / span 5" data-offset-x="0" data-offset-y="0" data-expected-width="357" data-expected-height="25"></div> +</div> + +<div class="grid gridOnlyAutoRepeat gap"> + <div class="item" style="grid-column: autobar 2 / span 3" data-offset-x="100" data-offset-y="0" data-expected-width="257" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore"> + <div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore"> + <div class="item" style="grid-column: foo / autofoo" data-offset-x="10" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore"> + <div class="item" style="grid-column: bar / 5 autofoo" data-offset-x="50" data-offset-y="0" data-expected-width="297" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore gap"> + <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore gap"> + <div class="item" style="grid-column: span 3 / 2 autofoo" data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore gap"> + <div class="item" style="grid-column: notPresent / 3 autofoo" data-offset-x="377" data-offset-y="0" data-expected-width="157" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter"> + <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="185" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter"> + <div class="item" style="grid-column: first / last 2" data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter"> + <div class="item" style="grid-column: last 2 / foo" data-offset-x="60" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter gap"> + <div class="item" style="grid-column: 1 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter gap"> + <div class="item" style="grid-column: 3 / span 1 bar" data-offset-x="130" data-offset-y="0" data-expected-width="222" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter gap"> + <div class="item" style="grid-column: first / foo" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed"> + <div class="item" style="grid-column: 1 / span 8" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed"> + <div class="item" style="grid-column: a / autobar 2" data-offset-x="50" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed"> + <div class="item" style="grid-column: autofoo / end" data-offset-x="100" data-offset-y="0" data-expected-width="95" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed gap"> + <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed gap"> + <div class="item" style="grid-column: autobar / -1" data-offset-x="175" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleNames"> + <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleNames"> + <div class="item" style="grid-column: foo 3 / 4 bar" data-offset-x="160" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleNames"> + <div class="item" style="grid-column: -6 / span 2 start" data-offset-x="20" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleNames gap"> + <div class="item" style="grid-column: -4 / -2" data-offset-x="40" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleNames gap"> + <div class="item" style="grid-column: bar / foo 2" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleNames gap"> + <div class="item" style="grid-column: foo / bar 2" data-offset-x="40" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleTracks"> + <div class="item" style="grid-column: a / 2 c" data-offset-x="20" data-offset-y="0" data-expected-width="84" data-expected-height="25"></div> + <div class="item" style="grid-column: 3 / e; grid-row: 2;" data-offset-x="52" data-offset-y="25" data-expected-width="72" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleTracks gap"> + <div class="item" style="grid-column: a / c" data-offset-x="40" data-offset-y="0" data-expected-width="32" data-expected-height="25"></div> + <div class="item" style="grid-column: 3 / last; grid-row: 2;" data-offset-x="92" data-offset-y="25" data-expected-width="115" data-expected-height="25"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fill-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fill-rows-001.html new file mode 100644 index 0000000000..55462fa8d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fill-rows-001.html @@ -0,0 +1,203 @@ +<!DOCTYPE html> +<title>CSS Grid: auto-fill rows</title> +<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fill"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-row"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-row-gap"> +<link rel="help" href="https://crbug.com/619930"> +<link rel="help" href="https://crbug.com/589460"> +<link rel="help" href="https://crbug.com/648814"> +<meta name="assert" content="Check that auto-fill rows are properly computed in a grid container"/> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + +.grid { + border: 2px solid magenta; + height: 200px; + width: 25px; + align-content: start; + grid-auto-rows: 157px; + grid-auto-columns: 25px; + + float: left; + position: relative; + margin-right: 2px; +} + +.gridOnlyAutoRepeat { grid-template-rows: repeat(auto-fill, 30px [autobar]); } +.gridPercentAutoRepeat { grid-template-rows: repeat(auto-fill, 30%); padding: 13px 0; } +.gridMinMaxAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(13px, 30px)); } +.gridMaxMinAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(30px, 13px)); } +.gridMaxMinPercentAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(30px, 6.5%)); } +.gridAutoRepeatAndFixedBefore { grid-template-rows: 10px [foo] 20% [bar] repeat(auto-fill, [autofoo] 35px); } +.gridAutoRepeatAndFixedAfter { grid-template-rows: repeat(auto-fill, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); } +.gridAutoRepeatAndFixed { grid-template-rows: [start] repeat(2, 50px [a]) [middle] repeat(auto-fill, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; } +.gridMultipleNames { grid-template-rows: [start] 20px [foo] 50% repeat(auto-fill, [bar] 20px [start foo]) [foo] 10% [end bar]; } +.gridMultipleTracks { grid-template-rows: [start] 20px repeat(auto-fill, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; } + +.item { background: blue; } +.item:nth-child(2) { background: green; } +.item:nth-child(3) { background: orange; } + +.gap { grid-row-gap: 20px; } +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> +<div id="log"></div> + +<p>This test checks that repeat(auto-fill, ) syntax works as expected.</p> + +<div class="grid gridOnlyAutoRepeat"> + <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridPercentAutoRepeat"> + <div class="item" style="grid-row: 1 / -1" data-offset-y="13" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridMinMaxAutoRepeat"> + <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridMaxMinAutoRepeat"> + <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridMaxMinPercentAutoRepeat"> + <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridOnlyAutoRepeat"> + <div class="item" style="grid-row: 1 / span 6 autobar" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridOnlyAutoRepeat gap"> + <div class="item" style="grid-row: 1 / span 5" data-offset-y="0" data-offset-x="0" data-expected-height="357" data-expected-width="25"></div> +</div> + +<div class="grid gridOnlyAutoRepeat gap"> + <div class="item" style="grid-row: autobar 2 / span 3" data-offset-y="100" data-offset-x="0" data-expected-height="257" data-expected-width="25"></div> +</div> + +<div class="grid gridOnlyAutoRepeat gap" style="height: auto; max-height: 90px;" data-expected-height="94" data-expected-width="29"> + <div class="item" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div> + <div class="item" data-offset-y="50" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div> + <div class="item" data-offset-y="100" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div> +</div> + +<div class="grid gridOnlyAutoRepeat gap" style="height: auto; max-height: 90px; min-height: 130px;" data-expected-height="134" data-expected-width="29"> + <div class="item" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div> + <div class="item" data-offset-y="50" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div> + <div class="item" data-offset-y="100" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore"> + <div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="190" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore"> + <div class="item" style="grid-row: foo / autofoo" data-offset-y="10" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore"> + <div class="item" style="grid-row: bar / 5 autofoo" data-offset-y="50" data-offset-x="0" data-expected-height="297" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore gap"> + <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore gap"> + <div class="item" style="grid-row: span 3 / 2 autofoo" data-offset-y="0" data-offset-x="0" data-expected-height="125" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore gap"> + <div class="item" style="grid-row: notPresent / 3 autofoo" data-offset-y="377" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter"> + <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="185" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter"> + <div class="item" style="grid-row: first / last 2" data-offset-y="0" data-offset-x="0" data-expected-height="60" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter"> + <div class="item" style="grid-row: last 2 / foo" data-offset-y="60" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter gap"> + <div class="item" style="grid-row: 1 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter gap"> + <div class="item" style="grid-row: 3 / span 1 bar" data-offset-y="130" data-offset-x="0" data-expected-height="222" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter gap"> + <div class="item" style="grid-row: first / foo" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed"> + <div class="item" style="grid-row: 1 / span 8" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed"> + <div class="item" style="grid-row: a / autobar 2" data-offset-y="50" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed"> + <div class="item" style="grid-row: autofoo / end" data-offset-y="100" data-offset-x="0" data-expected-height="95" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed gap"> + <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed gap"> + <div class="item" style="grid-row: autobar / -1" data-offset-y="175" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleNames"> + <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="200" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleNames"> + <div class="item" style="grid-row: foo 3 / 4 bar" data-offset-y="160" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleNames"> + <div class="item" style="grid-row: -6 / span 2 start" data-offset-y="20" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleNames gap"> + <div class="item" style="grid-row: -4 / -2" data-offset-y="40" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleNames gap"> + <div class="item" style="grid-row: bar / foo 2" data-offset-y="160" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleNames gap"> + <div class="item" style="grid-row: foo / bar 2" data-offset-y="40" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleTracks"> + <div class="item" style="grid-row: a / 2 c" data-offset-y="20" data-offset-x="0" data-expected-height="84" data-expected-width="25"></div> + <div class="item" style="grid-row: 3 / e; grid-column: 2;" data-offset-y="52" data-offset-x="25" data-expected-height="72" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleTracks gap"> + <div class="item" style="grid-row: a / c" data-offset-y="40" data-offset-x="0" data-expected-height="32" data-expected-width="25"></div> + <div class="item" style="grid-row: 3 / last; grid-column: 2;" data-offset-y="92" data-offset-x="25" data-expected-height="115" data-expected-width="25"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fit-columns-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fit-columns-001.html new file mode 100644 index 0000000000..b19881f5ac --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fit-columns-001.html @@ -0,0 +1,197 @@ +<!DOCTYPE html> +<title>CSS Grid: auto-fit columns</title> + +<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-column-gap"> +<link rel="help" href="https://crbug.com/619930"> +<link rel="help" href="https://crbug.com/589460"> +<link rel="help" href="https://crbug.com/645746"> +<meta name="assert" content="Check that auto-fit columns are properly computed in a grid container"/> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + +.grid { + border: 2px solid magenta; + width: 200px; + position: relative; + justify-content: start; + grid-auto-columns: 157px; + grid-auto-rows: 25px; +} + +.gridOnlyAutoRepeat { grid-template-columns: repeat(auto-fit, 30px [autobar]); } +.gridPercentAutoRepeat { grid-template-columns: repeat(auto-fit, 30% [autobar]); padding: 0 13px; } +.gridMinMaxAutoRepeat { grid-template-columns: repeat(auto-fill, minmax(13px, 30px)); } +.gridMaxMinAutoRepeat { grid-template-columns: repeat(auto-fill, minmax(30px, 13px)); } +.gridMaxMinPercentAutoRepeat { grid-template-columns: repeat(auto-fill, minmax(30px, 6.5%)); } +.gridAutoRepeatAndFixedBefore { grid-template-columns: 10px [foo] 20% [bar] repeat(auto-fit, [autofoo] 35px); } +.gridAutoRepeatAndFixedAfter { grid-template-columns: repeat(auto-fit, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); } +.gridAutoRepeatAndFixed { grid-template-columns: [start] repeat(2, 50px [a]) [middle] repeat(auto-fit, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; } +.gridMultipleNames { grid-template-columns: [start] 20px [foo] 50% repeat(auto-fit, [bar] 20px [start foo]) [foo] 10% [end bar]; } +.gridMultipleTracks { grid-template-columns: [start] 20px repeat(auto-fit, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; } +.gridMinMaxFixedFlex { grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); } + +.item { background: cyan; } +.item:nth-child(2n) { background: green; } + +.gap { grid-column-gap: 20px; } + +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> +<div id="log"></div> + +<p>This test checks that repeat(auto-fit, ) syntax works as expected.</p> + +<div class="grid gridOnlyAutoRepeat"> + <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridPercentAutoRepeat"> + <div class="item" style="grid-column: 1 / -1" data-offset-x="13" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridMinMaxAutoRepeat"> + <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridMaxMinAutoRepeat"> + <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridMaxMinPercentAutoRepeat"> + <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridOnlyAutoRepeat"> + <div class="item" style="grid-column: 1 / span 6 autobar" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridOnlyAutoRepeat gap"> + <div class="item" style="grid-column: 1 / span 5" data-offset-x="0" data-offset-y="0" data-expected-width="357" data-expected-height="25"></div> +</div> + +<div class="grid gridOnlyAutoRepeat gap"> + <div class="item" style="grid-column: autobar 2 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="257" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore"> + <div class="item" style="grid-column: 1 / span 6" data-offset-x="0" data-offset-y="0" data-expected-width="190" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore"> + <div class="item" style="grid-column: foo / autofoo" data-offset-x="10" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore"> + <div class="item" style="grid-column: bar / 5 autofoo" data-offset-x="50" data-offset-y="0" data-expected-width="297" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore gap"> + <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore gap"> + <div class="item" style="grid-column: span 3 / 2 autofoo" data-offset-x="0" data-offset-y="0" data-expected-width="125" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore gap"> + <div class="item" style="grid-column: notPresent / 3 autofoo" data-offset-x="267" data-offset-y="0" data-expected-width="157" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter"> + <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="185" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter"> + <div class="item" style="grid-column: first / last 2" data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter"> + <div class="item" style="grid-column: last 2 / foo" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter gap"> + <div class="item" style="grid-column: 1 / span 3" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter gap"> + <div class="item" style="grid-column: 3 / span 1 bar" data-offset-x="80" data-offset-y="0" data-expected-width="222" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter gap"> + <div class="item" style="grid-column: first / foo" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed"> + <div class="item" style="grid-column: 1 / span 8" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed"> + <div class="item" style="grid-column: a / autobar 2" data-offset-x="50" data-offset-y="0" data-expected-width="80" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed"> + <div class="item" style="grid-column: autofoo / end" data-offset-x="100" data-offset-y="0" data-expected-width="95" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed gap"> + <div class="item" style="grid-column: 1 / span 4" data-offset-x="0" data-offset-y="0" data-expected-width="195" data-expected-height="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed gap"> + <div class="item" style="grid-column: autobar / -1" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleNames"> + <div class="item" style="grid-column: 1 / -1" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleNames"> + <div class="item" style="grid-column: foo 3 / 4 bar" data-offset-x="120" data-offset-y="0" data-expected-width="40" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleNames"> + <div class="item" style="grid-column: -6 / span 2 start" data-offset-x="20" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleNames gap"> + <div class="item" style="grid-column: -4 / -2" data-offset-x="40" data-offset-y="0" data-expected-width="140" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleNames gap"> + <div class="item" style="grid-column: bar / foo 2" data-offset-x="160" data-offset-y="0" data-expected-width="20" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleNames gap"> + <div class="item" style="grid-column: foo / bar 2" data-offset-x="40" data-offset-y="0" data-expected-width="180" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleTracks"> + <div class="item" style="grid-column: e / last;" data-offset-x="52" data-offset-y="0" data-expected-width="148" data-expected-height="25"></div> + <div class="item" style="grid-column: start / b;" data-offset-x="0" data-offset-y="25" data-expected-width="52" data-expected-height="25"></div> +</div> + +<div class="grid gridMultipleTracks gap"> + <div class="item" style="grid-column: c / -1;" data-offset-x="40" data-offset-y="0" data-expected-width="160" data-expected-height="25"></div> +</div> + +<div class="grid gridMinMaxFixedFlex gap"> + <div class="item" style="grid-column-start: 1" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="25"></div> +</div> + +<div class="grid gridMinMaxFixedFlex gap"> + <div class="item" style="grid-column-start: 1" data-offset-x="0" data-offset-y="0" data-expected-width="90" data-expected-height="25"></div> + <div class="item" style="grid-column-start: 2" data-offset-x="110" data-offset-y="0" data-expected-width="90" data-expected-height="25"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fit-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fit-rows-001.html new file mode 100644 index 0000000000..627a980c08 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-fit-rows-001.html @@ -0,0 +1,189 @@ +<!DOCTYPE html> +<title>CSS Grid: auto-fit rows</title> +<link rel="author" title="Sergio Villar" href="mailto: svillar@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-columns"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-row"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-grid-row-gap"> +<link rel="help" href="https://crbug.com/619930"> +<link rel="help" href="https://crbug.com/589460"> +<meta name="assert" content="Check that auto-fit rows are properly computed in a grid container"/> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + +.grid { + border: 2px solid magenta; + height: 200px; + width: 25px; + align-content: start; + grid-auto-rows: 157px; + grid-auto-columns: 25px; + + float: left; + position: relative; + margin-right: 2px; +} + +.gridOnlyAutoRepeat { grid-template-rows: repeat(auto-fit, 30px [autobar]); } +.gridPercentAutoRepeat { grid-template-rows: repeat(auto-fill, 30%); padding: 13px 0; } +.gridMinMaxAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(13px, 30px)); } +.gridMaxMinAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(30px, 13px)); } +.gridMaxMinPercentAutoRepeat { grid-template-rows: repeat(auto-fill, minmax(30px, 6.5%)); } +.gridAutoRepeatAndFixedBefore { grid-template-rows: 10px [foo] 20% [bar] repeat(auto-fit, [autofoo] 35px); } +.gridAutoRepeatAndFixedAfter { grid-template-rows: repeat(auto-fit, [first] 30px [last]) [foo] minmax(60px, 80px) [bar] minmax(45px, max-content); } +.gridAutoRepeatAndFixed { grid-template-rows: [start] repeat(2, 50px [a]) [middle] repeat(auto-fit, [autofoo] 15px [autobar]) minmax(5%, 10%) [end]; } +.gridMultipleNames { grid-template-rows: [start] 20px [foo] 50% repeat(auto-fit, [bar] 20px [start foo]) [foo] 10% [end bar]; } +.gridMultipleTracks { grid-template-rows: [start] 20px repeat(auto-fit, [a] 2em [b c] 10% [d]) [e] minmax(75px, 1fr) [last]; } + +.item { background: cyan; } +.item:nth-child(2n) { background: green; } + +.gap { grid-row-gap: 20px; } + +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> +<div id="log"></div> + +<p>This test checks that repeat(auto-fit, ) syntax works as expected.</p> + +<div class="grid gridOnlyAutoRepeat"> + <div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridPercentAutoRepeat"> + <div class="item" style="grid-row: 1 / -1" data-offset-y="13" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridMinMaxAutoRepeat"> + <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridMaxMinAutoRepeat"> + <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridMaxMinPercentAutoRepeat"> + <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridOnlyAutoRepeat"> + <div class="item" style="grid-row: 1 / span 6 autobar" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridOnlyAutoRepeat gap"> + <div class="item" style="grid-row: 1 / span 5" data-offset-y="0" data-offset-x="0" data-expected-height="357" data-expected-width="25"></div> +</div> + +<div class="grid gridOnlyAutoRepeat gap"> + <div class="item" style="grid-row: autobar 2 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="257" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore"> + <div class="item" style="grid-row: 1 / span 6" data-offset-y="0" data-offset-x="0" data-expected-height="190" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore"> + <div class="item" style="grid-row: foo / autofoo" data-offset-y="10" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore"> + <div class="item" style="grid-row: bar / 5 autofoo" data-offset-y="50" data-offset-x="0" data-expected-height="297" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore gap"> + <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore gap"> + <div class="item" style="grid-row: span 3 / 2 autofoo" data-offset-y="0" data-offset-x="0" data-expected-height="125" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedBefore gap"> + <div class="item" style="grid-row: notPresent / 3 autofoo" data-offset-y="267" data-offset-x="0" data-expected-height="157" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter"> + <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="185" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter"> + <div class="item" style="grid-row: first / last 2" data-offset-y="0" data-offset-x="0" data-expected-height="60" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter"> + <div class="item" style="grid-row: last 2 / foo" data-offset-y="0" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter gap"> + <div class="item" style="grid-row: 1 / span 3" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter gap"> + <div class="item" style="grid-row: 3 / span 1 bar" data-offset-y="80" data-offset-x="0" data-expected-height="222" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixedAfter gap"> + <div class="item" style="grid-row: first / foo" data-offset-y="0" data-offset-x="0" data-expected-height="30" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed"> + <div class="item" style="grid-row: 1 / span 8" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed"> + <div class="item" style="grid-row: a / autobar 2" data-offset-y="50" data-offset-x="0" data-expected-height="80" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed"> + <div class="item" style="grid-row: autofoo / end" data-offset-y="100" data-offset-x="0" data-expected-height="95" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed gap"> + <div class="item" style="grid-row: 1 / span 4" data-offset-y="0" data-offset-x="0" data-expected-height="195" data-expected-width="25"></div> +</div> + +<div class="grid gridAutoRepeatAndFixed gap"> + <div class="item" style="grid-row: autobar / -1" data-offset-y="140" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleNames"> + <div class="item" style="grid-row: 1 / -1" data-offset-y="0" data-offset-x="0" data-expected-height="200" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleNames"> + <div class="item" style="grid-row: foo 3 / 4 bar" data-offset-y="120" data-offset-x="0" data-expected-height="40" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleNames"> + <div class="item" style="grid-row: -6 / span 2 start" data-offset-y="20" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleNames gap"> + <div class="item" style="grid-row: -4 / -2" data-offset-y="40" data-offset-x="0" data-expected-height="140" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleNames gap"> + <div class="item" style="grid-row: bar / foo 2" data-offset-y="160" data-offset-x="0" data-expected-height="20" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleNames gap"> + <div class="item" style="grid-row: foo / bar 2" data-offset-y="40" data-offset-x="0" data-expected-height="180" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleTracks"> + <div class="item" style="grid-row: e / last;" data-offset-y="52" data-offset-x="0" data-expected-height="148" data-expected-width="25"></div> + <div class="item" style="grid-row: start / b;" data-offset-y="0" data-offset-x="0" data-expected-height="52" data-expected-width="25"></div> +</div> + +<div class="grid gridMultipleTracks gap"> + <div class="item" style="grid-row: c / -1;" data-offset-y="40" data-offset-x="0" data-expected-height="160" data-expected-width="25"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-001.html new file mode 100644 index 0000000000..bd744cf0cb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-001.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks."> +<p>Test passes if there is a filled green square.</p> +<div style="display: inline-grid; background: green; aspect-ratio: 1/1; min-height: 60px; grid-template-columns: repeat(auto-fill, 50px);"></div> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-002.html new file mode 100644 index 0000000000..3b74e79224 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-aspect-ratio-002.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Checks that the min-height is reflected through the aspect-ratio for determining auto repeat tracks."> +<p>Test passes if there is a filled green square.</p> +<div style="width: min-content; height: 100px; background: green;"> + <div style="height: 100%;"> + <div style="display: grid; aspect-ratio: 1/1; min-height: 60%; grid-template-columns: repeat(auto-fill, 50px);"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-001.html new file mode 100644 index 0000000000..2537892887 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Checks that a dynamic change in containing block width changes the number of auto repeat columns."> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="width: 0px; height: 100px;"> + <div style="display: inline-grid; background: green; height: 100px; min-width: 60%; grid-template-columns: repeat(auto-fill, 50px);"></div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.width = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-002.html new file mode 100644 index 0000000000..8df2158d1f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-002.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Checks that a dynamic change in containing block height changes the number of auto repeat rows."> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="width: 100px; height: 0px;"> + <div style="display: inline-grid; background: green; width: 100px; min-height: 60%; grid-template-rows: repeat(auto-fill, 50px);"></div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-003.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-003.html new file mode 100644 index 0000000000..c2fe3ff98a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-dynamic-003.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<meta name="assert" content="Checks that a dynamic change in containing block height changes the number of auto repeat columns."> +<p>Test passes if there is a filled green square.</p> +<div id="target" style="width: 100px; height: 0px;"> + <div style="display: inline-grid; background: green; min-height: 60%; grid-template-columns: repeat(auto-fill, 50px); grid-template-rows: 100px; aspect-ratio: 1/1;"></div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html new file mode 100644 index 0000000000..ba65e9a7e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-intrinsic-001.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<title>CSS Grid: auto repeat computation for intrinsic sizes.</title> +<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-notation"/> +<meta name="assert" content="Checks that auto repeat tracks are properly recomputed and items are properly repositioned when grids have intrinsic inline sizes."/> +<link rel="issue" href="https://crbug.com/621517"/> +<link href="/css/support/grid.css" rel="stylesheet"/> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/> + +<style> +.grid { + border: 2px solid black; + position: relative; + padding-top: 10px; + justify-items: start; +} + +.item { + background: cyan; + height: 20px; +} + +.gridAutoFillFixed { grid-template-columns: repeat(auto-fill, 20px) minmax(min-content, 40px); } +.gridAutoFillAuto { grid-template-columns: repeat(auto-fill, 10px) minmax(60px, auto); } +.gridAutoFitFixed { grid-template-columns: repeat(auto-fit, 20px) minmax(min-content, 40px); } +.gridAutoFitAuto { grid-template-columns: repeat(auto-fit, 10px) minmax(60px, auto); } + +.paddingTop { padding-top: 10px; } + +.abs { + height: 5px; + position: absolute; + width: 100%; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div class="grid gridAutoFillFixed paddingTop max-content" data-expected-width="104" data-expected-height="34"> + <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div> + <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div> + <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div> + <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div> + <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div> +</div> + +<div class="grid gridAutoFillFixed paddingTop min-content" data-expected-width="104" data-expected-height="34"> + <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div> + <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div> + <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div> + <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div> + <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div> +</div> + +<div class="grid gridAutoFillAuto paddingTop max-content" data-expected-width="104" data-expected-height="34"> + <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div> + <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div> + <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div> + <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div> + <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-offset-x="30" data-offset-y="0"></div> +</div> + +<div class="grid gridAutoFillAuto paddingTop min-content" data-expected-width="74" data-expected-height="34"> + <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div> + <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div> + <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div> + <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-offset-x="70" data-offset-y="0"></div> + <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div> +</div> + +<!-- auto-fill --> + +<div class="grid gridAutoFitFixed paddingTop max-content" data-expected-width="104" data-expected-height="34"> + <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div> + <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div> + <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div> + <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div> + <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div> +</div> + +<div class="grid gridAutoFitFixed paddingTop min-content" data-expected-width="104" data-expected-height="34"> + <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div> + <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="20" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div> + <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="20" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div> + <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="20" data-expected-height="5" data-offset-x="40" data-offset-y="0"></div> + <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="40" data-expected-height="5" data-offset-x="60" data-offset-y="0"></div> +</div> + +<div class="grid gridAutoFitAuto paddingTop max-content" data-expected-width="104" data-expected-height="34"> + <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div> + <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div> + <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="10" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div> + <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="10" data-expected-height="5" data-offset-x="20" data-offset-y="0"></div> + <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="10" data-expected-height="5" data-offset-x="30" data-offset-y="0"></div> +</div> + +<div class="grid gridAutoFitAuto paddingTop min-content" data-expected-width="74" data-expected-height="34"> + <div class="item" style="grid-column: 1 / -1; width: 100px;" data-expected-width="100" data-expected-height="20" data-offset-x="0" data-offset-y="10"></div> + <div class="abs" style="grid-column: 1 / 2; background: purple;" data-expected-width="10" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div> + <div class="abs" style="grid-column: 2 / 3; background: orange;" data-expected-width="60" data-expected-height="5" data-offset-x="10" data-offset-y="0"></div> + <div class="abs" style="grid-column: 3 / 4; background: yellow;" data-expected-width="0" data-expected-height="5" data-offset-x="70" data-offset-y="0"></div> + <div class="abs" style="grid-column: 4 / 5; background: green;" data-expected-width="70" data-expected-height="5" data-offset-x="0" data-offset-y="0"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.tentative.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.tentative.html new file mode 100644 index 0000000000..144ded9f36 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-001.tentative.html @@ -0,0 +1,141 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Auto repeat tracks and max sizes</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8963"> +<meta name="assert" content="This test checks that auto repeat tracks use max size when size is indefinite to compute the number of tracks."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + position: relative; + display: grid; + grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px); + max-width: 300px; + max-height: 200px; +} +.border { + border: 10px solid; +} +.border-box { + box-sizing: border-box; +} +.item { + background: lime; + /* Place item on the last cell. */ + grid-column: -2; + grid-row: -2; +} +.pad-calc { + border-width: 0; + padding: calc(10% + 20px); +} +.pad-percent { + border-width: 0; + padding: 10%; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.grid');"> + +<div id="log"></div> + +<div class="grid" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid border" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid border" style="width: 200px; height: 100px;" data-expected-width="220" data-expected-height="120"> + <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid border border-box" data-expected-width="300" data-expected-height="170"> + <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div style="width:min-content" data-expected-width="300" data-expected-height="160"> + <div class="grid border border-box pad-percent" data-expected-width="300" data-expected-height="160"> + <div class="item" data-offset-x="130" data-offset-y="80" data-expected-width="100" data-expected-height="50">x</div> + </div> +</div> + +<div style="width:min-content" data-expected-width="240" data-expected-height="188"> + <div class="grid border border-box pad-calc" data-expected-width="240" data-expected-height="188"> + <div class="item" data-offset-x="44" data-offset-y="94" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +<div class="grid border border-box" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div style="width:min-content" data-expected-width="200" data-expected-height="100"> + <div class="grid border border-box pad-percent" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-offset-x="20" data-offset-y="20" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +<div style="width:min-content" data-expected-width="200" data-expected-height="100"> + <div class="grid border border-box pad-calc" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-offset-x="40" data-offset-y="40" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +<div class="grid border border-box" style="width: min-content; height: min-content;" data-expected-width="220" data-expected-height="170"> + <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div style="width:min-content" data-expected-width="300" data-expected-height="160"> + <div class="grid border border-box pad-percent" style="width: min-content; height: min-content;" data-expected-width="260" data-expected-height="160" title="Percentage padding, min-content"> + <div class="item" data-offset-x="130" data-offset-y="80" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +<div style="width:min-content" data-expected-width="240" data-expected-height="188"> + <div class="grid border border-box pad-calc" style="width: min-content; height: min-content;" data-expected-width="288" data-expected-height="188"> + <div class="item" data-offset-x="144" data-offset-y="94" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +<div class="grid border border-box" style="width: max-content; height: max-content;" data-expected-width="220" data-expected-height="170"> + <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div style="width:min-content" data-expected-width="300" data-expected-height="160"> + <div class="grid border border-box pad-percent" style="width: max-content; height: max-content;" data-expected-width="260" data-expected-height="160" title="Percentage padding, max-content"> + <div class="item" data-offset-x="130" data-offset-y="80" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +<div style="width:min-content" data-expected-width="240" data-expected-height="188"> + <div class="grid border border-box pad-calc" style="width: max-content; height: max-content;" data-expected-width="288" data-expected-height="188"> + <div class="item" data-offset-x="144" data-offset-y="94" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html new file mode 100644 index 0000000000..9fc0c98311 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-max-size-002.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Auto repeat tracks and percentage max sizes</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat"> +<meta name="assert" content="This test checks that auto repeat tracks use percentage max size when size is indefinite to compute the number of tracks."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + position: relative; + display: grid; + grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px); + max-width: 50%; + max-height: 80%; +} +.wrapper { + width: 600px; + height: 250px; +} +.item { + background: lime; + /* Place item on the last cell. */ + grid-column: -2; + grid-row: -2; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.grid');"> + +<div id="log"></div> + +<div class="wrapper"> + <div class="grid" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid" style="width: 200px; height: 100px;" data-expected-width="200" data-expected-height="100"> + <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html new file mode 100644 index 0000000000..7ff8b2ca23 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-max-size-001.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Auto repeat tracks with min and max sizes</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat"> +<meta name="assert" content="This test checks that auto repeat tracks don't overflow the grid container size when max size is definite, even if min size is bigger than that."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + position: relative; + display: grid; + grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px); + max-width: 100px; + min-width: 250px; + max-height: 50px; + min-height: 125px; + float: left; +} +.border { + border: 10px solid; +} +.border-box { + box-sizing: border-box; +} +.item { + background: lime; + /* Place item on the last cell. */ + grid-column: -2; + grid-row: -2; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.grid');"> + +<div id="log"></div> + +<div class="grid" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid" style="width: 200px; height: 100px;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid" style="width: min-content; height: min-content;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid" style="width: max-content; height: max-content;" data-expected-width="250" data-expected-height="125"> + <div class="item" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html new file mode 100644 index 0000000000..cb29eed153 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-001.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Auto repeat tracks and min sizes</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat"> +<meta name="assert" content="This test checks that auto repeat tracks use min size when available to compute the number of tracks."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + position: relative; + display: grid; + grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px); + min-width: 300px; + min-height: 200px; + float: left; +} +.border { + border: 10px solid; +} +.border-box { + box-sizing: border-box; +} +.item { + background: lime; + /* Place item on the last cell. */ + grid-column: -2; + grid-row: -2; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.grid');"> + +<div id="log"></div> + +<div class="grid" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid border" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid border" style="width: 200px; height: 100px;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid border" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid border" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid border border-box" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid border border-box" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid border border-box" style="width: min-content; height: min-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +<div class="grid border border-box" style="width: max-content; height: max-content;" data-expected-width="320" data-expected-height="220"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html new file mode 100644 index 0000000000..4c73da7773 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-002.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Auto repeat tracks and percentage min sizes</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat"> +<meta name="assert" content="This test checks that auto repeat tracks use percentage min size when available to compute the number of tracks."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + position: relative; + display: grid; + grid: repeat(auto-fill, 50px) / repeat(auto-fill, 100px); + min-width: 50%; + min-height: 80%; + float: left; +} +.wrapper { + width: 600px; + height: 250px; +} +.item { + background: lime; + /* Place item on the last cell. */ + grid-column: -2; + grid-row: -2; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<body onload="checkLayout('.grid');"> + +<div id="log"></div> + +<div class="wrapper"> + <div class="grid" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid" style="width: 200px; height: 100px;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid" style="width: min-content; height: min-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +<div class="wrapper"> + <div class="grid" style="width: max-content; height: max-content;" data-expected-width="300" data-expected-height="200"> + <div class="item" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-003.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-003.html new file mode 100644 index 0000000000..ffaaab33ae --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-003.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Auto repeat tracks and percentage min sizes with percentage track sizes</title> +<link rel="author" title="Jacques Newman" href="mailto:janewman@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat"> +<meta name="assert" + content="This test checks that auto repeat tracks can use percentage track + size when only a min size is available to compute the number of tracks."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + .grid { + position: relative; + display: inline-grid; + grid-template-columns: repeat(auto-fill, 25%); + grid-auto-rows: 100px; + min-width: 50%; + float: left; + } + + .wrapper { + width: 600px; + } + + #cell { + background: lime; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid');"> + + <div id="log"></div> + + <div class="wrapper"> + <div class="grid" data-expected-width="300" data-expected-height="200"> + <div id="cell" data-expected-width="75">Cell 1</div> + <div id="cell" data-expected-width="75">Cell 2</div> + <div id="cell" data-expected-width="75">Cell 3</div> + <div id="cell" data-expected-width="75">Cell 4</div> + <div id="cell" data-expected-width="75">Cell 5</div> + </div> + </div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-004.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-004.html new file mode 100644 index 0000000000..8d2eda7902 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-min-size-004.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Auto repeat tracks and percentage min sizes with percentage track sizes</title> +<link rel="author" title="Jacques Newman" href="mailto:janewman@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat"> +<meta name="assert" + content="This test checks that auto repeat tracks can use percentage track + size when only a min size is available to compute the number of tracks."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + .grid { + position: relative; + display: inline-grid; + grid-template-rows: repeat(auto-fill, 20%); + grid-auto-columns: 100px; + min-height: 50%; + float: left; + } + + .wrapper { + height: 1000px; + } + + #cell { + background-color: lime; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid');"> + <div id="log"></div> + <div class="wrapper"> + <div class="grid" data-expected-width="100" data-expected-height="500"> + <div id="cell" data-expected-width="100" data-expected-height="100">Cell 1</div> + <div id="cell" data-expected-width="100" data-expected-height="100">Cell 2</div> + <div id="cell" data-expected-width="100" data-expected-height="100">Cell 3</div> + <div id="cell" data-expected-width="100" data-expected-height="100">Cell 4</div> + <div id="cell" data-expected-width="100" data-expected-height="100">Cell 5</div> + </div> + </div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-minmax.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-minmax.html new file mode 100644 index 0000000000..f6c7af1e70 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-minmax.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=973906"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: grid; width: 100px; grid-template: 50px 50px / repeat(auto-fill, minmax(50px, 25px));"> + <div style="background: green;"></div> + <div style="background: green;"></div> + <div style="background: green;"></div> + <div style="background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-001.html new file mode 100644 index 0000000000..085d94996f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-001.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>CSS Grid Layout Test: Auto Repaeat with Multiple Tracks and Gutters</title> + <link rel="author" title="Yu Shen" href="shenyu.tcv@gmail.com"> + <link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation"> + <link rel="match" href="../reference/grid-auto-repeat-multiple-values-001-ref.html"> + <style> + .grid-container { + display: grid; + border: solid thick; + margin: 10px; + } + + .columns { + grid-template-columns: repeat(auto-fill, 50px 50px); + grid-auto-rows: 25px; + grid-column-gap: 100px; + width: 300px; + } + + .rows { + grid-auto-flow: column; + grid-template-rows: repeat(auto-fill, 50px 50px); + grid-auto-columns: 25px; + grid-row-gap: 100px; + width: min-content; + height: 300px; + } + + .grid-container>div { + background: lime; + } + </style> +</head> + +<body> + <p>The test passes if it has the same visual effect as reference.</p> + <div class="grid-container columns"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <div class="grid-container rows"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</body> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-002-ref.html new file mode 100644 index 0000000000..754fec3fa0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-002-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#typedef-auto-repeat"> +<head> + <style> + +.grid-container { + height: 30px; + width: 300px; + border-bottom: 2px solid #cfbfcf; +} + +.grid-container > * { float: left; height: 30px; } +.grid-container > :nth-child(2n) { background: sienna; } +.grid-container > :nth-child(2n + 1) { background: orange; } + +</style> +</head> + +<body> + <p>The test passes if it has the same visual effect as reference.</p> + <div class="grid-container"> + <div style="width: 10px;"></div> + <div style="width: 20px;"></div> + <div style="width: 30px;"></div> + <div style="width: 40px;"></div> + <div style="width: 30px;"></div> + <div style="width: 40px;"></div> + </div> + <div class="grid-container"> + <div style="width: 10px;"></div> + <div style="width: 20px;"></div> + <div style="width: 30px;"></div> + <div style="width: 40px;"></div> + <div style="width: 30px;"></div> + <div style="width: 50px; margin-left: 40px;"></div> + </div> + <div class="grid-container"> + <div style="width: 20px; margin-left: 10px"></div> + <div style="width: 30px;"></div> + <div style="width: 30px; margin-left: 40px;"></div> + <div style="width: 40px;"></div> + <div style="width: 50px;"></div> + <div style="width: 60px;"></div> + </div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-002.html new file mode 100644 index 0000000000..723d876a6a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-002.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#typedef-auto-repeat"> +<link rel="match" href="grid-auto-repeat-multiple-values-002-ref.html"> +<head> + <style> + +.holder { + height: 30px; + width: 300px; + border-bottom: 2px solid #cfbfcf; +} + +.grid-container { + display: grid; + grid-template-columns: 10px 20px repeat(auto-fill, 30px 40px) 50px 60px; + grid-template-rows: repeat(auto-fill, minmax(30px, auto)); +} + +.grid-container > :nth-child(2n) { background: sienna; } +.grid-container > :nth-child(2n+1) { background: orange; } + </style> +</head> + +<body> + <p>The test passes if it has the same visual effect as reference.</p> + <div class="holder"> + <div class="grid-container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </div> + + <div class="holder"> + <div class="grid-container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div style="grid-column: 7;"></div> + </div> + </div> + + <div class="holder"> + <div class="grid-container"> + <div style="grid-column: 2;"></div> + <div></div> + <div style="grid-column: 5;"></div> + <div></div> + <div></div> + <div></div> + </div> + </div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-003-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-003-ref.html new file mode 100644 index 0000000000..975c94b795 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-003-ref.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<html> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#typedef-auto-repeat"> +<head> + <style> + +.grid-container { + height: 30px; + width: 300px; + border-bottom: 2px solid #cfbfcf; +} + +.grid-container > * { float: left; height: 30px; } +.grid-container > :nth-child(2n) { background: sienna; } +.grid-container > :nth-child(2n + 1) { background: orange; } + +.auto-fit-long { + width: 650px; +} + +.auto-fit-long > :nth-child(2n) { width: 30px; } +.auto-fit-long > :nth-child(2n+1) { width: 40px; } + +.auto-medium-fit { + width: 510px; +} + +</style> +</head> + +<body> + <p>The test passes if it has the same visual effect as reference.</p> + <div class="grid-container"> + <div style="width: 10px;"></div> + <div style="width: 20px;"></div> + <div style="width: 30px;"></div> + <div style="width: 40px;"></div> + <div style="width: 30px;"></div> + <div style="width: 40px;"></div> + </div> + <div class="grid-container"> + <div style="width: 10px;"></div> + <div style="width: 20px;"></div> + <div style="width: 30px;"></div> + <div style="width: 40px;"></div> + <div style="width: 30px;"></div> + <div style="width: 50px;"></div> + </div> + <div class="grid-container auto-fit-long"> + <div style="width: 20px; margin-left: 10px"></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <div class="grid-container auto-fit-long"> + <div style="width: 20px; margin-left: 10px"></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <div class="grid-container auto-fit-long"> + <div style="width: 20px; margin-left: 10px"></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + <div class="grid-container"> + <div style="width: 20px; margin-left: 10px"></div> + <div style="width: 30px;"></div> + <div style="width: 30px;"></div> + <div style="width: 40px;"></div> + <div style="width: 50px;"></div> + <div style="width: 60px;"></div> + </div> + <div class="grid-container"> + <div style="width: 10px;"></div> + <div style="width: 20px;"></div> + <div style="width: 30px;"></div> + <div style="width: 40px;"></div> + <div style="width: 50px;"></div> + <div style="width: 60px;"></div> + </div> + <div class="grid-container"> + <div style="width: 40px; margin-left: 30px"></div> + <div style="width: 30px;"></div> + <div style="width: 40px;"></div> + <div style="width: 50px;"></div> + <div style="width: 60px;"></div> + </div> + <div class="grid-container auto-medium-fit"> + <div style="width: 10px;"></div> + <div style="width: 110px; margin-left: 20px"></div> + <div style="width: 30px;"></div> + </div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-003.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-003.html new file mode 100644 index 0000000000..486259a5d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-003.html @@ -0,0 +1,127 @@ +<!DOCTYPE html> +<html> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#typedef-auto-repeat"> +<link rel="match" href="grid-auto-repeat-multiple-values-003-ref.html"> +<head> + <style> + +.holder { + height: 30px; + width: 300px; + border-bottom: 2px solid #cfbfcf; +} + +.wide-holder { + height: 30px; + width: 650px; + border-bottom: 2px solid #cfbfcf; +} + +.grid-container { + display: grid; + grid-template-columns: 10px 20px repeat(auto-fit, 30px 40px) 50px 60px; + grid-template-rows: repeat(auto-fill, minmax(30px, auto)); +} + +.grid-container > :nth-child(2n) { background: sienna; } +.grid-container > :nth-child(2n+1) { background: orange; } + </style> +</head> + +<body> + <p>The test passes if it has the same visual effect as reference.</p> + <div class="holder"> + <div class="grid-container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </div> + + <div class="holder"> + <div class="grid-container"> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div style="grid-column: 7;"></div> + </div> + </div> + <!-- Test correct tracking of collapsed tracks --> + <div class="holder" style="width: 650px"> + <div class="grid-container"> + <div style="grid-column: 2;"></div> + <div></div> + <div style="grid-column: 6;"></div> + <div></div> + <div></div> + <div></div> + </div> + </div> + <div class="holder" style="width: 650px"> + <div class="grid-container"> + <div style="grid-column: 2;"></div> + <div></div> + <div style="grid-column: 10;"></div> + <div></div> + <div></div> + <div></div> + </div> + </div> + <div class="holder" style="width: 650px"> + <div class="grid-container"> + <div style="grid-column: 2;"></div> + <div></div> + <div style="grid-column: 12;"></div> + <div></div> + <div></div> + <div></div> + </div> + </div> + <div class="holder"> + <div class="grid-container"> + <div style="grid-column: 2;"></div> + <div></div> + <div style="grid-column: 5;"></div> + <div></div> + <div></div> + <div></div> + </div> + </div> + <div class="holder"> + <div class="grid-container"> + <div></div> + <div></div> + <div style="grid-column: 5;"></div> + <div></div> + <div></div> + <div></div> + </div> + </div> + <!-- Test correct tracking of collapsed tracks when the grid begins in the middle of the repeat. --> + <div class="holder"> + <div class="grid-container"> + <div style="grid-column: 4;"></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </div> + <!-- Test grid span with correct tracking of collapsed tracks. --> + <div class="holder" style="width: 510px"> + <div class="grid-container"> + <div></div> + <div style="grid-column: 4 / 7;"></div> + <div></div> + </div> + </div> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-004-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-004-ref.html new file mode 100644 index 0000000000..650b7d9eaf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-004-ref.html @@ -0,0 +1,167 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Layout Test: auto-repeat with multiple tracks and line names reference</title> + <link rel="author" title="Mozilla" href="https://mozilla.org"> + <style> + .columns { + border: 1px solid black; + width: 5px; + display: grid; + grid-template-columns: [u v] 10px [w] 10px [x] 10px [y v] 10px [w] 10px [x] 10px [y z]; + grid-auto-rows: 5px; + grid-column-gap: 3px; + /* Does not fit a whole-number of repetitions */ + width: 94px; + } + div > div { + background: blue; + } + </style> +</head> +<body> + <!-- u --> + <div class="columns"> + <div style="grid-column-start: u"></div> + </div> + <!-- Non-existant line name --> + <div class="columns"> + <div style="grid-column-start: nonesuch"></div> + </div> + <div class="columns"> + <div style="grid-column-start: u 1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: u -1"></div> + </div> + <!-- Also non-existant, there is only one u --> + <div class="columns"> + <div style="grid-column-start: u 4"></div> + </div> + <div class="columns"> + <div style="grid-column-start: u 9"></div> + </div> + <div class="columns"> + <div style="grid-column-start: u 2"></div> + </div> + <div class="columns"> + <div style="grid-column-start: u -2"></div> + </div> + <div class="columns"> + <div style="grid-column-start: u -6"></div> + </div> + <div class="columns"> + <div style="grid-column-start: u -7"></div> + </div> + <!-- v --> + <div class="columns"> + <div style="grid-column-start: v"></div> + </div> + <div class="columns"> + <div style="grid-column-start: v 1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: v 2"></div> + </div> + <div class="columns"> + <div style="grid-column-start: v -1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: v -2"></div> + </div> + <!-- Also non-existant, there are only two v's --> + <div class="columns"> + <div style="grid-column-start: v 3"></div> + </div> + <div class="columns"> + <div style="grid-column-start: v -3"></div> + </div> + <!-- w --> + <div class="columns"> + <div style="grid-column-start: w"></div> + </div> + <div class="columns"> + <div style="grid-column-start: w 1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: w 2"></div> + </div> + <div class="columns"> + <div style="grid-column-start: w -1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: w -2"></div> + </div> + <!-- Also non-existant, there are only two w's --> + <div class="columns"> + <div style="grid-column-start: w 3"></div> + </div> + <div class="columns"> + <div style="grid-column-start: w -3"></div> + </div> + <!-- x --> + <div class="columns"> + <div style="grid-column-start: x"></div> + </div> + <div class="columns"> + <div style="grid-column-start: x 1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: x 2"></div> + </div> + <div class="columns"> + <div style="grid-column-start: x -1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: x -2"></div> + </div> + <!-- Also non-existant, there are only two x's --> + <div class="columns"> + <div style="grid-column-start: x 3"></div> + </div> + <div class="columns"> + <div style="grid-column-start: x -3"></div> + </div> + <!-- y --> + <div class="columns"> + <div style="grid-column-start: y"></div> + </div> + <div class="columns"> + <div style="grid-column-start: y 1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: y 2"></div> + </div> + <div class="columns"> + <div style="grid-column-start: y -1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: y -2"></div> + </div> + <!-- Also non-existant, there are only two y's --> + <div class="columns"> + <div style="grid-column-start: y -3"></div> + </div> + <div class="columns"> + <div style="grid-column-start: y 3"></div> + </div> + <!-- z --> + <div class="columns"> + <div style="grid-column-start: z"></div> + </div> + <div class="columns"> + <div style="grid-column-start: z 1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: z -1"></div> + </div> + <!-- Also non-existant, there is only one z --> + <div class="columns"> + <div style="grid-column-start: z 2"></div> + </div> + <div class="columns"> + <div style="grid-column-start: z -2"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-004.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-004.html new file mode 100644 index 0000000000..460de5f9e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-004.html @@ -0,0 +1,168 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Layout Test: auto-repeat with multiple tracks and line names</title> + <link rel="author" title="Mozilla" href="https://mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation"> + <link rel="match" href="grid-auto-repeat-multiple-values-004-ref.html"> + <style> + .columns { + border: 1px solid black; + display: grid; + grid-template-columns: [u] repeat(auto-fill, [v] 10px [w] 10px [x] 10px [y]) [z]; + grid-auto-rows: 5px; + grid-column-gap: 3px; + /* Does not fit a whole-number of repetitions */ + width: 94px; + } + div > div { + background: blue; + } + </style> +</head> +<body> + <!-- u --> + <div class="columns"> + <div style="grid-column-start: u"></div> + </div> + <!-- Non-existant line name --> + <div class="columns"> + <div style="grid-column-start: nonesuch"></div> + </div> + <div class="columns"> + <div style="grid-column-start: u 1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: u -1"></div> + </div> + <!-- Also non-existant, there is only one u --> + <div class="columns"> + <div style="grid-column-start: u 4"></div> + </div> + <div class="columns"> + <div style="grid-column-start: u 9"></div> + </div> + <div class="columns"> + <div style="grid-column-start: u 2"></div> + </div> + <div class="columns"> + <div style="grid-column-start: u -2"></div> + </div> + <div class="columns"> + <div style="grid-column-start: u -6"></div> + </div> + <div class="columns"> + <div style="grid-column-start: u -7"></div> + </div> + <!-- v --> + <div class="columns"> + <div style="grid-column-start: v"></div> + </div> + <div class="columns"> + <div style="grid-column-start: v 1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: v 2"></div> + </div> + <div class="columns"> + <div style="grid-column-start: v -1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: v -2"></div> + </div> + <!-- Also non-existant, there are only two v's --> + <div class="columns"> + <div style="grid-column-start: v 3"></div> + </div> + <div class="columns"> + <div style="grid-column-start: v -3"></div> + </div> + <!-- w --> + <div class="columns"> + <div style="grid-column-start: w"></div> + </div> + <div class="columns"> + <div style="grid-column-start: w 1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: w 2"></div> + </div> + <div class="columns"> + <div style="grid-column-start: w -1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: w -2"></div> + </div> + <!-- Also non-existant, there are only two w's --> + <div class="columns"> + <div style="grid-column-start: w 3"></div> + </div> + <div class="columns"> + <div style="grid-column-start: w -3"></div> + </div> + <!-- x --> + <div class="columns"> + <div style="grid-column-start: x"></div> + </div> + <div class="columns"> + <div style="grid-column-start: x 1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: x 2"></div> + </div> + <div class="columns"> + <div style="grid-column-start: x -1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: x -2"></div> + </div> + <!-- Also non-existant, there are only two x's --> + <div class="columns"> + <div style="grid-column-start: x 3"></div> + </div> + <div class="columns"> + <div style="grid-column-start: x -3"></div> + </div> + <!-- y --> + <div class="columns"> + <div style="grid-column-start: y"></div> + </div> + <div class="columns"> + <div style="grid-column-start: y 1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: y 2"></div> + </div> + <div class="columns"> + <div style="grid-column-start: y -1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: y -2"></div> + </div> + <!-- Also non-existant, there are only two y's --> + <div class="columns"> + <div style="grid-column-start: y -3"></div> + </div> + <div class="columns"> + <div style="grid-column-start: y 3"></div> + </div> + <!-- z --> + <div class="columns"> + <div style="grid-column-start: z"></div> + </div> + <div class="columns"> + <div style="grid-column-start: z 1"></div> + </div> + <div class="columns"> + <div style="grid-column-start: z -1"></div> + </div> + <!-- Also non-existant, there is only one z --> + <div class="columns"> + <div style="grid-column-start: z 2"></div> + </div> + <div class="columns"> + <div style="grid-column-start: z -2"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-005-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-005-ref.html new file mode 100644 index 0000000000..305d256fcb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-005-ref.html @@ -0,0 +1,161 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Layout Test: auto-repeat with multiple tracks and line names reference</title> + <link rel="author" title="Mozilla" href="https://mozilla.org"> + <style> + .rows { + border: 1px solid black; + display: inline-grid; + grid-auto-flow: column; + grid-template-rows: [u v] 10px [w] 10px [x] 10px [y v] 10px [w] 10px [x] 10px [y z]; + grid-auto-columns: 5px; + grid-row-gap: 3px; + width: min-content; + /* Does not fit a whole-number of repetitions */ + height: 94px; + } + div > div { + background: blue; + } + </style> +</head> +<body> + <div class="rows"> + <div style="grid-row-start: u"></div> + </div> + <!-- Non-existant line name --> + <div class="rows"> + <div style="grid-row-start: nonesuch"></div> + </div> + <div class="rows"> + <div style="grid-row-start: u 1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: u -1"></div> + </div> + <!-- Also non-existant, there is only one u --> + <div class="rows"> + <div style="grid-row-start: u 2"></div> + </div> + <div class="rows"> + <div style="grid-row-start: u -2"></div> + </div> + <div class="rows"> + <div style="grid-row-start: u -6"></div> + </div> + <div class="rows"> + <div style="grid-row-start: u -7"></div> + </div> + <!-- v --> + <div class="rows"> + <div style="grid-row-start: v"></div> + </div> + <div class="rows"> + <div style="grid-row-start: v 1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: v 2"></div> + </div> + <div class="rows"> + <div style="grid-row-start: v -1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: v -2"></div> + </div> + <!-- Also non-existant, there are only two v's --> + <div class="rows"> + <div style="grid-row-start: v 3"></div> + </div> + <div class="rows"> + <div style="grid-row-start: v -3"></div> + </div> + <!-- w --> + <div class="rows"> + <div style="grid-row-start: w"></div> + </div> + <div class="rows"> + <div style="grid-row-start: w 1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: w 2"></div> + </div> + <div class="rows"> + <div style="grid-row-start: w -1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: w -2"></div> + </div> + <!-- Also non-existant, there are only two w's --> + <div class="rows"> + <div style="grid-row-start: w 3"></div> + </div> + <div class="rows"> + <div style="grid-row-start: w -3"></div> + </div> + <!-- x --> + <div class="rows"> + <div style="grid-row-start: x"></div> + </div> + <div class="rows"> + <div style="grid-row-start: x 1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: x 2"></div> + </div> + <div class="rows"> + <div style="grid-row-start: x -1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: x -2"></div> + </div> + <!-- Also non-existant, there are only two x's --> + <div class="rows"> + <div style="grid-row-start: x 3"></div> + </div> + <div class="rows"> + <div style="grid-row-start: x -3"></div> + </div> + <!-- y --> + <div class="rows"> + <div style="grid-row-start: y"></div> + </div> + <div class="rows"> + <div style="grid-row-start: y 1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: y 2"></div> + </div> + <div class="rows"> + <div style="grid-row-start: y -1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: y -2"></div> + </div> + <!-- Also non-existant, there are only two y's --> + <div class="rows"> + <div style="grid-row-start: y 3"></div> + </div> + <div class="rows"> + <div style="grid-row-start: y -3"></div> + </div> + <!-- z --> + <div class="rows"> + <div style="grid-row-start: z"></div> + </div> + <div class="rows"> + <div style="grid-row-start: z 1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: z -1"></div> + </div> + <!-- Also non-existant, there is only one z --> + <div class="rows"> + <div style="grid-row-start: z 2"></div> + </div> + <div class="rows"> + <div style="grid-row-start: z -2"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-005.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-005.html new file mode 100644 index 0000000000..8671df79b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-multiple-values-005.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Grid Layout Test: auto-repeat with multiple tracks and line names</title> + <link rel="author" title="Mozilla" href="https://mozilla.org"> + <link rel="help" href="https://www.w3.org/TR/css-grid-1/#repeat-notation"> + <link rel="match" href="grid-auto-repeat-multiple-values-005-ref.html"> + <style> + .rows { + border: 1px solid black; + display: inline-grid; + grid-auto-flow: column; + grid-template-rows: [u] repeat(auto-fill, [v] 10px [w] 10px [x] 10px [y]) [z]; + grid-auto-columns: 5px; + grid-row-gap: 3px; + width: min-content; + /* Does not fit a whole-number of repetitions */ + height: 94px; + } + div > div { + background: blue; + } + </style> +</head> +<body> + <div class="rows"> + <div style="grid-row-start: u"></div> + </div> + <!-- Non-existant line name --> + <div class="rows"> + <div style="grid-row-start: nonesuch"></div> + </div> + <div class="rows"> + <div style="grid-row-start: u 1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: u -1"></div> + </div> + <!-- Also non-existant, there is only one u --> + <div class="rows"> + <div style="grid-row-start: u 2"></div> + </div> + <div class="rows"> + <div style="grid-row-start: u -2"></div> + </div> + <div class="rows"> + <div style="grid-row-start: u -6"></div> + </div> + <div class="rows"> + <div style="grid-row-start: u -7"></div> + </div> + <!-- v --> + <div class="rows"> + <div style="grid-row-start: v"></div> + </div> + <div class="rows"> + <div style="grid-row-start: v 1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: v 2"></div> + </div> + <div class="rows"> + <div style="grid-row-start: v -1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: v -2"></div> + </div> + <!-- Also non-existant, there are only two v's --> + <div class="rows"> + <div style="grid-row-start: v 3"></div> + </div> + <div class="rows"> + <div style="grid-row-start: v -3"></div> + </div> + <!-- w --> + <div class="rows"> + <div style="grid-row-start: w"></div> + </div> + <div class="rows"> + <div style="grid-row-start: w 1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: w 2"></div> + </div> + <div class="rows"> + <div style="grid-row-start: w -1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: w -2"></div> + </div> + <!-- Also non-existant, there are only two w's --> + <div class="rows"> + <div style="grid-row-start: w 3"></div> + </div> + <div class="rows"> + <div style="grid-row-start: w -3"></div> + </div> + <!-- x --> + <div class="rows"> + <div style="grid-row-start: x"></div> + </div> + <div class="rows"> + <div style="grid-row-start: x 1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: x 2"></div> + </div> + <div class="rows"> + <div style="grid-row-start: x -1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: x -2"></div> + </div> + <!-- Also non-existant, there are only two x's --> + <div class="rows"> + <div style="grid-row-start: x 3"></div> + </div> + <div class="rows"> + <div style="grid-row-start: x -3"></div> + </div> + <!-- y --> + <div class="rows"> + <div style="grid-row-start: y"></div> + </div> + <div class="rows"> + <div style="grid-row-start: y 1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: y 2"></div> + </div> + <div class="rows"> + <div style="grid-row-start: y -1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: y -2"></div> + </div> + <!-- Also non-existant, there are only two y's --> + <div class="rows"> + <div style="grid-row-start: y 3"></div> + </div> + <div class="rows"> + <div style="grid-row-start: y -3"></div> + </div> + <!-- z --> + <div class="rows"> + <div style="grid-row-start: z"></div> + </div> + <div class="rows"> + <div style="grid-row-start: z 1"></div> + </div> + <div class="rows"> + <div style="grid-row-start: z -1"></div> + </div> + <!-- Also non-existant, there is only one z --> + <div class="rows"> + <div style="grid-row-start: z 2"></div> + </div> + <div class="rows"> + <div style="grid-row-start: z -2"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-positioned-container-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-positioned-container-001-ref.html new file mode 100644 index 0000000000..a017563aa3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-positioned-container-001-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link href="/css/support/grid.css" rel="stylesheet"/> +<style> + +.grid { + width: 100px; + grid: repeat(5, 20px) / repeat(4, 25px); + justify-content: start; + align-content: start; +} + +.item { + background: green; +} +</style> + +<p>Test passes if you get a grid with 5 rows of 20px and 4 columns of 25px.</p> + +<pre id="log">grid: 20px 20px 20px 20px 20px / 25px 25px 25px 25px;</pre> + +<div class="wrapper"> + <div id="grid" class="grid"> + <div class="item" style="grid-area: 1 / 1;"></div> + <div class="item" style="grid-area: 2 / 2;"></div> + <div class="item" style="grid-area: 3 / 3;"></div> + <div class="item" style="grid-area: 4 / 4;"></div> + <div class="item" style="grid-row: 5; grid-column: 1 / -1;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-positioned-container-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-positioned-container-001.html new file mode 100644 index 0000000000..309ad85671 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-auto-repeat-positioned-container-001.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<title>CSS Grid: auto-repeat tracks on a positioned grid container.</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/> +<link rel="issue" href="https://crbug.com/624301"/> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-notation"/> +<link rel="match" href="grid-auto-repeat-positioned-container-001-ref.html"/> +<meta name="assert" content="Checks that auto repeat tracks are properly computed for a positioned grid container with a definite width and height."/> +<link href="/css/support/grid.css" rel="stylesheet"/> +<style> +.wrapper { + position: relative; + width: 100px; + height: 100px; +} + +.grid { + position: absolute; + left: 0; right: 0; top: 0; bottom: 0; + grid: repeat(auto-fill, 20px) / repeat(auto-fill, 25px); + justify-content: start; + align-content: start; +} + +.item { + background: green; +} +</style> + +<p>Test passes if you get a grid with 5 rows of 20px and 4 columns of 25px.</p> + +<pre id="log"></pre> + +<div class="wrapper"> + <div id="grid" class="grid"> + <div class="item" style="grid-area: 1 / 1;"></div> + <div class="item" style="grid-area: 2 / 2;"></div> + <div class="item" style="grid-area: 3 / 3;"></div> + <div class="item" style="grid-area: 4 / 4;"></div> + <div class="item" style="grid-row: 5; grid-column: 1 / -1;"></div> + </div> +</div> + +<script> + var log = document.getElementById("log"); + + var grid = document.getElementById("grid"); + var computedStyle = getComputedStyle(grid); + + log.innerHTML = "grid: " + computedStyle.getPropertyValue("grid-template-rows") + " / " + computedStyle.getPropertyValue("grid-template-columns") + ";"; +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html new file mode 100644 index 0000000000..c2d17ec615 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-auto-repeat-tracks.html @@ -0,0 +1,178 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation"> +<meta name="assert" content="This test checks that grid-template-{rows|columns} with auto-repeat tracks recomputes the positions of automatically placed grid items."> + +<link href="/css/support/grid.css" rel="stylesheet"> +<style> +.grid { + grid-auto-rows: 25px; + grid-auto-columns: 25px; + margin-bottom: 10px; +} +.fixedWidth { + width: 50px; + grid-auto-flow: row; + grid-template-columns: repeat(auto-fill, 25px); +} +.fixedHeight { + width: 100px; + height: 50px; + grid-auto-flow: column; + grid-template-rows: repeat(auto-fill, 25px); +} +#i1-1, #i2-1 { + grid-row: auto; + grid-column: 1; + background-color: orange; +} +#i1-2, #i2-2 { + grid-row: 1; + grid-column: auto; + background-color: green; +} +#i1-3, #i2-3 { + grid-row: auto; + grid-column: auto; + background-color: blue; +} +</style> + +<div id="log"></div> + +<div style="position: relative"> + <div id="grid1" class="grid fixedWidth"> + <div id="i1-1"></div> + <div id="i1-2"></div> + <div id="i1-3"></div> + </div> +</div> +<div style="position: relative"> + <div id="grid2" class="grid fixedHeight"> + <div id="i2-1"></div> + <div id="i2-2"></div> + <div id="i2-3"></div> + </div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +function setGridTemplate(id, gridTemplateRows, gridTemplateColumns) { + let gridElement = document.getElementById(id); + gridElement.style.gridTemplateRows = gridTemplateRows; + gridElement.style.gridTemplateColumns = gridTemplateColumns; +} + +function setGridSize(id, width, height) { + let gridElement = document.getElementById(id); + gridElement.style.width = width; + gridElement.style.height = height; +} + +function setGridItemPlacement(id, gridRow, gridColumn) { + let gridItem = document.getElementById(id); + gridItem.style.gridRow = gridRow; + gridItem.style.gridColumn = gridColumn; +} + +function testGridDefinitions(...gridItemDataList) { + for (let gridItemData of gridItemDataList) { + let gridItem = document.getElementById(gridItemData.id); + gridItem.setAttribute("data-expected-width", gridItemData.width); + gridItem.setAttribute("data-expected-height", gridItemData.height); + gridItem.setAttribute("data-offset-x", gridItemData.x); + gridItem.setAttribute("data-offset-y", gridItemData.y); + } + checkLayout(".grid", false); +} + +// Test changing the number of auto-repeat tracks. +setGridTemplate('grid1', 'none', 'repeat(auto-fill, 25px)'); +setGridTemplate('grid2', 'repeat(auto-fill, 25px)', 'none'); +testGridDefinitions( + { id: 'i1-1', width: '25', height: '25', x: '0', y: '25' }, + { id: 'i1-2', width: '25', height: '25', x: '0', y: '0' }, + { id: 'i1-3', width: '25', height: '25', x: '25', y: '25' }, + { id: 'i2-1', width: '25', height: '25', x: '0', y: '0' }, + { id: 'i2-2', width: '25', height: '25', x: '25', y: '0' }, + { id: 'i2-3', width: '25', height: '25', x: '25', y: '25' }); + +setGridTemplate('grid1', 'none', 'none'); +setGridTemplate('grid2', 'none', 'none'); +testGridDefinitions( + { id: 'i1-1', width: '25', height: '25', x: '0', y: '25' }, + { id: 'i1-2', width: '25', height: '25', x: '0', y: '0' }, + { id: 'i1-3', width: '25', height: '25', x: '0', y: '50' }, + { id: 'i2-1', width: '25', height: '25', x: '0', y: '0' }, + { id: 'i2-2', width: '25', height: '25', x: '25', y: '0' }, + { id: 'i2-3', width: '25', height: '25', x: '50', y: '0' }); + +setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 20px)'); +setGridTemplate('grid2', 'repeat(auto-fill, 20px) 3px', 'none'); +testGridDefinitions( + { id: 'i1-1', width: '5', height: '25', x: '0', y: '25' }, + { id: 'i1-2', width: '5', height: '25', x: '0', y: '0' }, + { id: 'i1-3', width: '20', height: '25', x: '5', y: '25' }, + { id: 'i2-1', width: '25', height: '20', x: '0', y: '0' }, + { id: 'i2-2', width: '25', height: '20', x: '25', y: '0' }, + { id: 'i2-3', width: '25', height: '20', x: '25', y: '20' }); + +setGridTemplate('grid1', 'none', '5px repeat(auto-fill, 22px)'); +setGridTemplate('grid2', 'repeat(auto-fill, 18px) 3px', 'none'); +testGridDefinitions( + { id: 'i1-1', width: '5', height: '25', x: '0', y: '25' }, + { id: 'i1-2', width: '5', height: '25', x: '0', y: '0' }, + { id: 'i1-3', width: '22', height: '25', x: '5', y: '25' }, + { id: 'i2-1', width: '25', height: '18', x: '0', y: '0' }, + { id: 'i2-2', width: '25', height: '18', x: '25', y: '0' }, + { id: 'i2-3', width: '25', height: '18', x: '25', y: '18' }); + +setGridTemplate('grid1', 'none', 'repeat(auto-fill, 45px)'); +setGridTemplate('grid2', 'repeat(auto-fill, 45px)', 'none'); +testGridDefinitions( + { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' }, + { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' }, + { id: 'i1-3', width: '45', height: '25', x: '0', y: '50' }, + { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' }, + { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' }, + { id: 'i2-3', width: '25', height: '45', x: '50', y: '0' }); + +// Test changing the size of the grid. +setGridSize('grid1', '100px', 'auto'); +setGridSize('grid2', '100px', '100px'); +testGridDefinitions( + { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' }, + { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' }, + { id: 'i1-3', width: '45', height: '25', x: '45', y: '25' }, + { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' }, + { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' }, + { id: 'i2-3', width: '25', height: '45', x: '25', y: '45' }); + +// Move the third item so that there is an empty track between it and the others. +setGridItemPlacement('i1-3', 'auto', '3'); +setGridItemPlacement('i2-3', '3', 'auto'); +testGridDefinitions( + { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' }, + { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' }, + { id: 'i1-3', width: '25', height: '25', x: '90', y: '25' }, + { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' }, + { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' }, + { id: 'i2-3', width: '25', height: '25', x: '25', y: '90' }); + +// Set the same templates, but using auto-fit instead of auto-fill. The empty track should collapse. +setGridTemplate('grid1', 'none', 'repeat(auto-fit, 45px)'); +setGridTemplate('grid2', 'repeat(auto-fit, 45px)', 'none'); +testGridDefinitions( + { id: 'i1-1', width: '45', height: '25', x: '0', y: '25' }, + { id: 'i1-2', width: '45', height: '25', x: '0', y: '0' }, + { id: 'i1-3', width: '25', height: '25', x: '45', y: '25' }, + { id: 'i2-1', width: '25', height: '45', x: '0', y: '0' }, + { id: 'i2-2', width: '25', height: '45', x: '25', y: '0' }, + { id: 'i2-3', width: '25', height: '25', x: '25', y: '45' }); + +done(); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html new file mode 100644 index 0000000000..d697af4743 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-fit-content-argument-001.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Change fit-content() argument</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing"> +<meta name="assert" content="This test checks that grid-template-{rows|columns} with fit-content() tracks recomputes the tracks when the fit-content() argument is modified."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + width: fit-content; + position: relative; + justify-content: start; + align-content: start; + font: 25px/1 Ahem; +} + +.verticalLR { + writing-mode: vertical-lr; +} +</style> +<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 setGridTemplate(id, gridTemplateRows, gridTemplateColumns) +{ + var gridElement = document.getElementById(id); + gridElement.style.gridTemplateRows = gridTemplateRows; + gridElement.style.gridTemplateColumns = gridTemplateColumns; +} + +function testGridItemDefinitions(gridItemData) +{ + var item = document.getElementById(gridItemData.id); + item.setAttribute("data-expected-width", gridItemData.width); + item.setAttribute("data-expected-height", gridItemData.height); + item.setAttribute("data-offset-x", gridItemData.x); + item.setAttribute("data-offset-y", gridItemData.y); + + checkLayout(".grid", false); +} + +function testChangingGridDefinitions() +{ + // Test changing the argument of fit-content() tracks. + setGridTemplate("grid1", "none", "fit-content(100px)"); + testGridItemDefinitions({"id": "item1", "width": "100", "height": "100", "x": "0", "y": "0" }); + + setGridTemplate("grid1", "none", "fit-content(150px)"); + testGridItemDefinitions({"id": "item1", "width": "150", "height": "75", "x": "0", "y": "0" }); + + setGridTemplate("grid2", "fit-content(100px)", "none"); + testGridItemDefinitions({"id": "item2", "width": "100", "height": "100", "x": "0", "y": "0" }); + + setGridTemplate("grid2", "fit-content(150px)", "none"); + testGridItemDefinitions({"id": "item2", "width": "75", "height": "150", "x": "0", "y": "0" }); + + done(); +} +</script> + +<body onload="document.fonts.ready.then(() => { testChangingGridDefinitions(); })"> +<div id="grid1" class="grid"> + <div id="item1" class="autoRowAutoColumn">XXXX XXX XX X X</div> +</div> + +<div id="grid2" class="grid"> + <div id="item2" class="autoRowAutoColumn verticalLR">XXXX XXX XX X X</div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-intrinsic-size-with-auto-repeat-tracks-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-intrinsic-size-with-auto-repeat-tracks-001.html new file mode 100644 index 0000000000..437ad81879 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-change-intrinsic-size-with-auto-repeat-tracks-001.html @@ -0,0 +1,151 @@ +<!DOCTYPE html> +<title>CSS Grid: auto-repeat tracks and intrinsic sizes.</title> +<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-notation"/> +<meta name="assert" content="Test ensure that grids properly recompute the number of auto repeat tracks when the min|max-content contributions of grid items changed."/> +<link rel="issue" href="https://crbug.com/621517"/> +<link rel="issue" href="https://crbug.com/633474"/> +<link href="/css/support/grid.css" rel="stylesheet"/> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/> +<style> +.grid { + border: 2px solid black; + position: relative; + min-width: 30px; + + grid-auto-columns: 20px; + + padding-top: 10px; + margin-bottom: 10px; +} + +.abs { height: 5px; position: absolute; width: 100%; } + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script> +function setGridTemplate(id, gridTemplateRows, gridTemplateColumns) +{ + var gridElement = document.getElementById(id); + gridElement.style.gridTemplateRows = gridTemplateRows; + gridElement.style.gridTemplateColumns = gridTemplateColumns; +} + +function setItemSize(id, width, height) +{ + var gridElement = document.getElementById(id); + gridElement.style.width = width; + gridElement.style.height = height; +} + +function testGridDefinitions(gridItemsData) +{ + var length = gridItemsData.length; + for (i = 0; i < length; ++i) { + var item = document.getElementById(gridItemsData[i].id); + item.setAttribute("data-expected-width", gridItemsData[i].width); + item.setAttribute("data-expected-height", gridItemsData[i].height); + item.setAttribute("data-offset-x", gridItemsData[i].x); + item.setAttribute("data-offset-y", gridItemsData[i].y); + } + + checkLayout(".grid", false); +} + +function testChangingGridDefinitions() +{ + setGridTemplate('grid1', 'none', 'repeat(auto-fill, 20px) minmax(min-content, 40px)'); + + setItemSize('item', '100px', '30px'); + testGridDefinitions([ + { 'id': 'item', 'width': '100', 'height': '30', 'x': '0', 'y': '10' }, + { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, + { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, + { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' }, + { 'id': 'a4', 'width': '40', 'height': '5', 'x': '60', 'y': '0' } + ]); + + setItemSize('item', '80px', '30px'); + testGridDefinitions([ + { 'id': 'item', 'width': '80', 'height': '30', 'x': '0', 'y': '10' }, + { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, + { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, + { 'id': 'a3', 'width': '40', 'height': '5', 'x': '40', 'y': '0' }, + { 'id': 'a4', 'width': '0', 'height': '5', 'x': '80', 'y': '0' } + ]); + + setItemSize('item', '15px', '30px'); + testGridDefinitions([ + { 'id': 'item', 'width': '15', 'height': '30', 'x': '0', 'y': '10' }, + { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, + { 'id': 'a2', 'width': '40', 'height': '5', 'x': '20', 'y': '0' }, + { 'id': 'a3', 'width': '0', 'height': '5', 'x': '60', 'y': '0' }, + { 'id': 'a4', 'width': '60', 'height': '5', 'x': '0', 'y': '0' } + ]); + + setItemSize('item', '120px', '30px'); + testGridDefinitions([ + { 'id': 'item', 'width': '120', 'height': '30', 'x': '0', 'y': '10' }, + { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, + { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, + { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' }, + { 'id': 'a4', 'width': '20', 'height': '5', 'x': '60', 'y': '0' } + ]); + + var grid = document.getElementById('grid1'); + grid.className = grid.className.replace('max-content', 'min-content'); + + setItemSize('item', '100px', '30px'); + testGridDefinitions([ + { 'id': 'item', 'width': '100', 'height': '30', 'x': '0', 'y': '10' }, + { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, + { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, + { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' }, + { 'id': 'a4', 'width': '40', 'height': '5', 'x': '60', 'y': '0' } + ]); + + setItemSize('item', '80px', '30px'); + testGridDefinitions([ + { 'id': 'item', 'width': '80', 'height': '30', 'x': '0', 'y': '10' }, + { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, + { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, + { 'id': 'a3', 'width': '40', 'height': '5', 'x': '40', 'y': '0' }, + { 'id': 'a4', 'width': '0', 'height': '5', 'x': '80', 'y': '0' } + ]); + + setItemSize('item', '15px', '30px'); + testGridDefinitions([ + { 'id': 'item', 'width': '15', 'height': '30', 'x': '0', 'y': '10' }, + { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, + { 'id': 'a2', 'width': '10', 'height': '5', 'x': '20', 'y': '0' }, + { 'id': 'a3', 'width': '0', 'height': '5', 'x': '30', 'y': '0' }, + { 'id': 'a4', 'width': '30', 'height': '5', 'x': '0', 'y': '0' } + ]); + + setItemSize('item', '120px', '30px'); + testGridDefinitions([ + { 'id': 'item', 'width': '120', 'height': '30', 'x': '0', 'y': '10' }, + { 'id': 'a1', 'width': '20', 'height': '5', 'x': '0', 'y': '0' }, + { 'id': 'a2', 'width': '20', 'height': '5', 'x': '20', 'y': '0' }, + { 'id': 'a3', 'width': '20', 'height': '5', 'x': '40', 'y': '0' }, + { 'id': 'a4', 'width': '20', 'height': '5', 'x': '60', 'y': '0' } + ]); + + done(); +} + +window.addEventListener("load", testChangingGridDefinitions, false); +</script> + +<div>This test checks that changing the min|max-content contributions of grid items properly recomputes both track sizes and grid positions in grids with auto repeat tracks.</div> +<div id="log"></div> + +<div id="grid1" class="grid max-content"> + <div id="item" style="grid-column: 1 / -1; background: cyan;"></div> + <div id="a1" class="abs" style="grid-column: 1 / 2; background: purple;"></div> + <div id="a2" class="abs" style="grid-column: 2 / 3; background: orange;"></div> + <div id="a3" class="abs" style="grid-column: 3 / 4; background: yellow;"></div> + <div id="a4" class="abs" style="grid-column: 4 / 5; background: magenta;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001.html new file mode 100644 index 0000000000..deda565667 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-auto-repeat-001.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: auto repeat tracks in indefinite containers with minimum size</title> +<link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-syntax"> +<meta name="assert" content="This test checks that we properly compute the number of required auto repeat tracks in indefinite sized containers with minimum sizes."> +<link rel="stylesheet" href="/css/support/grid.css"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<style> +.grid { + display: inline-grid; + grid: 20px / 20px; + min-width: 20px; + min-height: 20px; + justify-content: start; + align-content: start; +} +</style> +<div id="log"></div> + +<div id="autoFillColumns" class="grid"></div> +<div id="autoFitColumns" class="grid"></div> + +<div id="autoFillRows" class="grid"></div> +<div id="autoFitRows" class="grid"></div> + +<script> +// Exact fit +TestingUtils.testGridTemplateColumnsRows("autoFillColumns", "repeat(auto-fill, 10px)", "20px", ["repeat(2, 10px)", "10px 10px"], "20px"); +TestingUtils.testGridTemplateColumnsRows("autoFitColumns", "repeat(auto-fit, 10px)", "20px", ["repeat(2, 0px)", "0px 0px"], "20px"); +TestingUtils.testGridTemplateColumnsRows("autoFillRows", "20px", "repeat(auto-fill, 10px)", "20px", ["repeat(2, 10px)", "10px 10px"]); +TestingUtils.testGridTemplateColumnsRows("autoFitRows", "20px", "repeat(auto-fit, 10px)", "20px", ["repeat(2, 0px)", "0px 0px"]); + +// Require an extra track +TestingUtils.testGridTemplateColumnsRows("autoFillColumns", "repeat(auto-fill, 9px)", "20px", ["repeat(3, 9px)", "9px 9px 9px"], "20px"); +TestingUtils.testGridTemplateColumnsRows("autoFitColumns", "repeat(auto-fit, 9px)", "20px", ["repeat(2, 0px)", "0px 0px"], "20px"); +TestingUtils.testGridTemplateColumnsRows("autoFillRows", "20px", "repeat(auto-fill, 9px)", "20px", ["repeat(3, 9px)", "9px 9px 9px"]); +TestingUtils.testGridTemplateColumnsRows("autoFitRows", "20px", "repeat(auto-fit, 9px)", "20px", ["repeat(3, 0px)", "0px 0px 0px"]); + +// A single repetition is enough to fill in all the available space +TestingUtils.testGridTemplateColumnsRows("autoFillColumns", "repeat(auto-fill, 30px)", "20px", "30px", "20px"); +TestingUtils.testGridTemplateColumnsRows("autoFitColumns", "repeat(auto-fit, 30px)", "20px", "0px", "20px"); +TestingUtils.testGridTemplateColumnsRows("autoFillRows", "20px", "repeat(auto-fill, 30px)", "20px", "30px"); +TestingUtils.testGridTemplateColumnsRows("autoFitRows", "20px", "repeat(auto-fit, 30px)", "20px", "0px"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-flexible-lengths-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-flexible-lengths-001.html new file mode 100644 index 0000000000..3a2c942389 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-flexible-lengths-001.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit" title="5.1.3 Flexible Lengths: the fr unit"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit) within an inline grid, so you can use it to represent a fraction of the free space in the grid container."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .inline-grid { + display: inline-grid; + width: 800px; + height: 600px; + font: 10px/1 Ahem; + justify-content: start; + align-content: start; + } +</style> +<div id="log"></div> + +<div id="emptyGrid" class="inline-grid"></div> +<div id="grid" class="inline-grid"> + <div>GRID ITEM</div> +</div> + +<script> +setup({explicit_done: true}); +document.fonts.ready.then(()=> { + // Valid values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "2fr", "2fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "2fr", "2fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "10fr", "10fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "10fr", "10fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.5fr", "0.5fr", "400px", "300px"); + TestingUtils.testGridTemplateColumnsRows("grid", "0.5fr", "0.5fr", "400px", "300px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", ".5fr", ".5fr", "400px", "300px"); + TestingUtils.testGridTemplateColumnsRows("grid", ".5fr", ".5fr", "400px", "300px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px"); + TestingUtils.testGridTemplateColumnsRows("grid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px"); + TestingUtils.testGridTemplateColumnsRows("grid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "0px 80px 320px 240px 160px", "0px 60px 240px 180px 120px"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "90px 71px 284px 213px 142px", "10px 59px 236px 177px 118px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px"); + TestingUtils.testGridTemplateColumnsRows("grid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content 1fr", "max-content 1fr", "0px 800px", "0px 600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "max-content 1fr", "max-content 1fr", "90px 710px", "10px 590px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr", "min-content 1fr", "0px 800px", "0px 600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr", "min-content 1fr", "40px 760px", "20px 580px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr auto", "1fr auto", "800px 0px", "600px 0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "1fr auto", "1fr auto", "800px 0px", "600px 0px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px"); + TestingUtils.testGridTemplateColumnsRows("grid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px"); + TestingUtils.testGridTemplateColumnsRows("grid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]); + + // Reset values. + document.getElementById("emptyGrid").style.gridTemplateColumns = ""; + document.getElementById("emptyGrid").style.gridTemplateRows = ""; + document.getElementById("grid").style.gridTemplateColumns = ""; + document.getElementById("grid").style.gridTemplateRows = ""; + + // Wrong values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "90px", "10px"); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-grid-template-areas-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-grid-template-areas-001.html new file mode 100644 index 0000000000..1573fa496f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-grid-template-areas-001.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for 'grid-template-ares' property within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property" title="5.2 Named Areas: the 'grid-template-areas' property"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that 'grid-template-areas' is supported in an inline grid. So you can define the grid structure."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<style> + #inline-grid { + display: inline-grid; + } +</style> +<div id="log"></div> + +<div id="inline-grid"></div> + +<script> + // Single values. + TestingUtils.testGridTemplateAreas('inline-grid', 'none', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a"', '"a"'); + TestingUtils.testGridTemplateAreas('inline-grid', '"."', '"."'); + TestingUtils.testGridTemplateAreas('inline-grid', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b"', '"a b"'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c d"', '"a b" "c d"'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c d"', ['"a b" "c d"', '"a b" "c d"']); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b""c d"', '"a b" "c d"'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b"\t"c d"', '"a b" "c d"'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b"\n"c d"', '"a b" "c d"'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "a b"', '"a b" "a b"'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a a" "b b"', '"a a" "b b"'); + TestingUtils.testGridTemplateAreas('inline-grid', '". a ." "b a c"', '". a ." "b a c"'); + TestingUtils.testGridTemplateAreas('inline-grid', '".. a ..." "b a c"', ['". a ." "b a c"', '".. a ..." "b a c"']); + TestingUtils.testGridTemplateAreas('inline-grid', '".a..." "b a c"', ['". a ." "b a c"', '".a..." "b a c"']); + TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot ."', '"head head" "nav main" "foot ."'); + TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot ...."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foot ...."']); + TestingUtils.testGridTemplateAreas('inline-grid', '"head head" "nav main" "foot."', ['"head head" "nav main" "foot ."', '"head head" "nav main" "foot."']); + TestingUtils.testGridTemplateAreas('inline-grid', '". header header ." "nav main main main" "nav footer footer ."', '". header header ." "nav main main main" "nav footer footer ."'); + TestingUtils.testGridTemplateAreas('inline-grid', '"... header header ...." "nav main main main" "nav footer footer ...."', ['". header header ." "nav main main main" "nav footer footer ."', '"... header header ...." "nav main main main" "nav footer footer ...."']); + TestingUtils.testGridTemplateAreas('inline-grid', '"...header header...." "nav main main main" "nav footer footer...."', ['". header header ." "nav main main main" "nav footer footer ."', '"...header header...." "nav main main main" "nav footer footer...."']); + TestingUtils.testGridTemplateAreas('inline-grid', '"title stats" "score stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ctrls ctrls"'); + TestingUtils.testGridTemplateAreas('inline-grid', '"title board" "stats board" "score ctrls"', '"title board" "stats board" "score ctrls"'); + TestingUtils.testGridTemplateAreas('inline-grid', '". a" "b a" ". a"', '". a" "b a" ". a"'); + TestingUtils.testGridTemplateAreas('inline-grid', '".. a" "b a" "... a"', ['". a" "b a" ". a"', '".. a" "b a" "... a"']); + TestingUtils.testGridTemplateAreas('inline-grid', '"..a" "b a" ".a"', ['". a" "b a" ". a"', '"..a" "b a" ".a"']); + TestingUtils.testGridTemplateAreas('inline-grid', '"a a a" "b b b"', '"a a a" "b b b"'); + TestingUtils.testGridTemplateAreas('inline-grid', '". ." "a a"', '". ." "a a"'); + TestingUtils.testGridTemplateAreas('inline-grid', '"... ...." "a a"', ['". ." "a a"', '"... ...." "a a"']); + + // Reset values. + document.getElementById('inline-grid').style.gridTemplateAreas = ''; + + // Wrong values. + TestingUtils.testGridTemplateAreas('inline-grid', 'a', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a" "b c"', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "c" "d e"', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b c" "d e"', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b"-"c d"', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b" - "c d"', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b" . "c d"', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b a"', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a" "b" "a"', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "b b"', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"b a" "b b"', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a b" "b a"', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"a ." ". a"', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '","', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"10%"', 'none'); + TestingUtils.testGridTemplateAreas('inline-grid', '"USD$"', 'none'); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-grid-template-columns-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-grid-template-columns-rows-001.html new file mode 100644 index 0000000000..32733e238f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-grid-template-columns-rows-001.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing" title="5.1 Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in an inline grid. So you can use the different syntax options to define the trak list."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .inline-grid { + display: inline-grid; + width: 800px; + height: 600px; + font: 10px/1 Ahem; + justify-content: start; + align-content: start; + } +</style> +<div id="log"></div> + +<div id="emptyGrid" class="inline-grid"></div> +<div id="grid" class="inline-grid"> + <div id="item">GRID ITEM</div> +</div> + +<script> +setup({explicit_done: true}); +document.fonts.ready.then(()=> { + // Single values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px"); + TestingUtils.testGridTemplateColumnsRows("grid", "500px", "300px", "500px", "300px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em", "20em", "400px", "200px"); + TestingUtils.testGridTemplateColumnsRows("grid", "40em", "20em", "400px", "200px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "25%", "50%", "200px", "300px"); + TestingUtils.testGridTemplateColumnsRows("grid", "25%", "50%", "200px", "300px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px"); + TestingUtils.testGridTemplateColumnsRows("grid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content", "max-content", "0px", "0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "max-content", "max-content", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content", "min-content", "0px", "0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "min-content", "min-content", "40px", "20px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px"); + + // Multiple values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px"); + TestingUtils.testGridTemplateColumnsRows("grid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px"); + TestingUtils.testGridTemplateColumnsRows("grid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px"); + TestingUtils.testGridTemplateColumnsRows("grid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px"); + TestingUtils.testGridTemplateColumnsRows("grid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "0px 200px 100px 500px", "0px 450px 100px 50px"); + TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "40px 160px 100px 500px", "20px 430px 100px 50px"); + + // Reset values. + document.getElementById("emptyGrid").style.gridTemplateColumns = ""; + document.getElementById("emptyGrid").style.gridTemplateRows = ""; + document.getElementById("grid").style.gridTemplateColumns = ""; + document.getElementById("grid").style.gridTemplateRows = ""; + + // Wrong values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px"); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-named-grid-lines-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-named-grid-lines-001.html new file mode 100644 index 0000000000..fc4caf2823 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-named-grid-lines-001.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(<custom-ident\>*)' syntax"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties within an inline grid."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .inline-grid { + display: inline-grid; + width: 800px; + height: 600px; + font: 10px/1 Ahem; + justify-content: start; + align-content: start; + } +</style> +<div id="log"></div> + +<div id="emptyGrid" class="inline-grid"></div> +<div id="grid" class="inline-grid"> + <div id="item">GRID ITEM</div> +</div> + +<script> +setup({explicit_done: true}); +document.fonts.ready.then(()=> { + // Valid values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto [last]", "[first] auto [last]", "[first] 0px [last]", "[first] 0px [last]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto [last]", "[first] auto [last]", "[first] 90px [last]", "[first] 10px [last]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 90px [L4st-L1_n3]", "[F1rst-L1_n3] 10px [L4st-L1_n3]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[] auto [ ]", "[ ] auto []", "0px", "0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "[] auto [ ]", "[ ] auto []", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto", "[first] auto", "[first] 0px", "[first] 0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto", "[first] auto", "[first] 90px", "[first] 10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [last]", "auto [last]", "0px [last]", "0px [last]"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto [last]", "auto [last]", "90px [last]", "10px [last]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[line] auto [line]", "[line] auto [line]", "[line] 0px [line]", "[line] 0px [line]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[line] auto [line]", "[line] auto [line]", "[line] 90px [line]", "[line] 10px [line]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 0px [last line]", "[first line] 0px [last line]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 90px [last line]", "[first line] 10px [last line]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 0px [b] 0px [c]", "[a] 0px [b] 0px [c]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 90px [b] 0px [c]", "[a] 10px [b] 0px [c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto [c]", "auto [b] auto [c]", "0px [b] 0px [c]", "0px [b] 0px [c]"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto [c]", "auto [b] auto [c]", "90px [b] 0px [c]", "10px [b] 0px [c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto [c]", "[a] auto auto [c]", ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"], ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto [c]", "[a] auto auto [c]", "[a] 90px 0px [c]", "[a] 10px 0px [c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 0px [b] 0px", "[a] 0px [b] 0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 90px [b] 0px", "[a] 10px [b] 0px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto", "[a] auto auto", ["[a] 0px 0px", "[a] repeat(2, 0px)"], ["[a] 0px 0px", "[a] repeat(2, 0px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto", "[a] auto auto", "[a] 90px 0px", "[a] 10px 0px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto", "auto [b] auto", "0px [b] 0px", "0px [b] 0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto", "auto [b] auto", "90px [b] 0px", "10px [b] 0px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto auto [c]", "auto auto [c]", ["0px 0px [c]", "repeat(2, 0px) [c]"], ["0px 0px [c]", "repeat(2, 0px) [c]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "auto auto [c]", "auto auto [c]", "90px 0px [c]", "10px 0px [c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"], ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", "[a] 90px [a] 0px [a]", "[a] 10px [a] 0px [a]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", ["[a b c] 0px [a b c] 0px [a b c]", "repeat(2, [a b c] 0px) [a b c]"], "[a b c] 0px [a b c] 0px [a b c]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", "[a b c] 90px [a b c] 0px [a b c]", "[a b c] 10px [a b c] 0px [a b c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 0px [b] 200px [c] 100px [d] 500px [e]", "[z] 0px [y] 450px [x] 100px [w] 50px [v]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 40px [b] 160px [c] 100px [d] 500px [e]", "[z] 20px [y] 430px [x] 100px [w] 50px [v]"); + + // Reset values. + document.getElementById("emptyGrid").style.gridTemplateColumns = ""; + document.getElementById("emptyGrid").style.gridTemplateRows = ""; + document.getElementById("grid").style.gridTemplateColumns = ""; + document.getElementById("grid").style.gridTemplateRows = ""; + + // Wrong values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px"); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-repeat-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-repeat-001.html new file mode 100644 index 0000000000..465e5e8cd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-support-repeat-001.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties within an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation within an inline grid, so you can use it to represents a repeated fragment of the track list."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .inline-grid { + display: inline-grid; + width: 800px; + height: 600px; + font: 10px/1 Ahem; + justify-content: start; + align-content: start; + } +</style> +<div id="log"></div> + +<div id="emptyGrid" class="inline-grid"></div> +<div id="grid" class="inline-grid"> + <div id="item">GRID ITEM</div> +</div> + +<script> +setup({explicit_done: true}); +document.fonts.ready.then(()=> { + // Valid values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(1, auto)", "repeat(1, auto)", "0px", "0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%)))", "repeat(2, minmax(50px, calc(50px + 50%)))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%)))", "repeat(2, minmax(50px, calc(50px + 50%)))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]); + TestingUtils.testGridTemplateColumnsRows("grid", "max-content repeat(2, 25%) 1fr", "max-content repeat(2, 25%) 1fr", ["90px 200px 200px 310px", "90px repeat(2, 200px) 310px"], ["10px 150px 150px 290px", "10px repeat(2, 150px) 290px"]); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", ["0px 50px 0px 50px", "repeat(2, 0px 50px)"], ["0px 50px 0px 50px", "repeat(2, 0px 50px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", "40px 50px 0px 50px", "20px 50px 0px 50px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]"); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"], ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", "[a] 90px [b] 100px 0px [b] 100px [c]", "[a] 10px [b] 100px 0px [b] 100px [c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"], ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 90px [b] 100px [b] 100px [c]", "[a] 90px repeat(2, [b] 100px) [c]"], ["[a] 10px [b] 100px [b] 100px [c]", "[a] 10px repeat(2, [b] 100px) [c]"]); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 0px [b] 0px [b] 100px [c]", "[a] 0px [b] 0px [b] 100px [c]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 90px [b] 0px [b] 100px [c]", "[a] 10px [b] 0px [b] 100px [c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"], ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", "[a b] 90px [c b] 0px [c d]", "[a b] 10px [c b] 0px [c d]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 0px [b] 50px [c] 100px [b] 50px [c] 100px [d] 500px [e]", "[a] 0px repeat(2, [b] 50px [c] 100px) [d] 500px [e]"], ["[z] 0px [y] 175px [x] 100px [y] 175px [x] 100px [w] 50px [v]", "[z] 0px repeat(2, [y] 175px [x] 100px) [w] 50px [v]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 40px [b] 30px [c] 100px [b] 30px [c] 100px [d] 500px [e]", "[a] 40px repeat(2, [b] 30px [c] 100px) [d] 500px [e]"], ["[z] 20px [y] 165px [x] 100px [y] 165px [x] 100px [w] 50px [v]", "[z] 20px repeat(2, [y] 165px [x] 100px) [w] 50px [v]"]); + + // Reset values. + document.getElementById("emptyGrid").style.gridTemplateColumns = ""; + document.getElementById("emptyGrid").style.gridTemplateRows = ""; + document.getElementById("grid").style.gridTemplateColumns = ""; + document.getElementById("grid").style.gridTemplateRows = ""; + + // Wrong values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px"); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.html new file mode 100644 index 0000000000..ff1f814309 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks in an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created in an inline grid."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .inline-grid { + display: inline-grid; + width: 800px; + height: 600px; + font: 10px/1 Ahem; + justify-content: start; + align-content: start; + } + + .fifthColumn { + grid-column: 5; + } + + .fourthRow { + grid-row: 4; + } + + .gridAutoFlowColumn { + grid-auto-flow: column; + } +</style> +<div id="log"></div> + +<div id="grid" class="inline-grid"> + <div>FIRST ITEM</div> + <div>SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<div id="gridItemsPositions" class="inline-grid"> + <div class="fifthColumn">FIRST ITEM</div> + <div class="fourthRow">SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<div id="gridAutoFlowColumn" class="inline-grid gridAutoFlowColumn"> + <div>FIRST ITEM</div> + <div>SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<div id="gridAutoFlowColumnItemsPositions" class="inline-grid gridAutoFlowColumn"> + <div class="fifthColumn">FIRST ITEM</div> + <div class="fourthRow">SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<script> +setup({explicit_done: true}); +document.fonts.ready.then(()=> { + // Valid values. + TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]); + TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px"); + TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px"); + TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px"); + TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px"); + TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px"); + TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px"); + + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px"); + + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px"); + + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px"); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.tentative.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.tentative.html new file mode 100644 index 0000000000..44abd5ee8a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-inline-template-columns-rows-resolved-values-001.tentative.html @@ -0,0 +1,277 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks in an inline grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4475"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' don't include implicitly created tracks in an inline grid."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .inline-grid { + display: inline-grid; + width: 800px; + height: 600px; + font: 10px/1 Ahem; + justify-content: start; + align-content: start; + position: relative; + } + + .fifthColumn { + grid-column: 5; + } + + .fourthRow { + grid-row: 4; + } + + .gridAutoFlowColumn { + grid-auto-flow: column; + } +</style> +<div id="log"></div> + +<div id="grid" class="inline-grid"> + <div>FIRST ITEM</div> + <div>SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<div id="gridItemsPositions" class="inline-grid"> + <div class="fifthColumn">FIRST ITEM</div> + <div class="fourthRow">SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<div id="gridAutoFlowColumn" class="inline-grid gridAutoFlowColumn"> + <div>FIRST ITEM</div> + <div>SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<div id="gridAutoFlowColumnItemsPositions" class="inline-grid gridAutoFlowColumn"> + <div class="fifthColumn">FIRST ITEM</div> + <div class="fourthRow">SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<script> +function testSizeAndPositionOfItems(gridId, expectedItemData) { + let grid = document.getElementById(gridId); + assert_equals(grid.childElementCount, expectedItemData.length, "childElementCount"); + let props = ["offsetWidth", "offsetTop", "offsetHeight"]; + for (let i = 0; i < expectedItemData.length; ++i) + for (let prop of props) + assert_equals(grid.children[i][prop], expectedItemData[i][prop], "children[" + i + "]." + prop); +} + +function testGrid(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue, expectedItemData) { + TestingUtils.testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue); + test(function() { + testSizeAndPositionOfItems(gridId, expectedItemData); + }, "Children of '" + gridId + "' with: grid-template-columns: " + columnsStyle + "; and grid-template-rows: " + rowsStyle + ";"); +} + +setup({explicit_done: true}); +document.fonts.ready.then(()=> { + // Valid values. + testGrid("grid", "", "", "none", "none", [ + {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 20}, + ]); + testGrid("grid", "auto auto", "", "100px 110px", "none", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 10}, + {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 100, offsetTop: 10, offsetHeight: 20}, + ]); + testGrid("grid", "60px", "", "60px", "none", [ + {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 40, offsetHeight: 20}, + ]); + testGrid("grid", "100px 60px", "", "100px 60px", "none", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 100, offsetTop: 20, offsetHeight: 20}, + ]); + testGrid("grid", "", "50px", "none", "50px", [ + {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20}, + ]); + testGrid("grid", "", "50px 30px", "none", "50px 30px", [ + {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 20}, + ]); + testGrid("grid", "60px", "50px", "60px", "50px", [ + {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 70, offsetHeight: 20}, + ]); + testGrid("grid", "60px", "50px 30px", "60px", "50px 30px", [ + {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20}, + ]); + testGrid("grid", "100px 60px", "50px", "100px 60px", "50px", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 20}, + ]); + testGrid("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30}, + ]); + + testGrid("gridItemsPositions", "", "", "none", "none", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 30, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 20}, + ]); + testGrid("gridItemsPositions", "60px", "", "60px", "none", [ + {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20}, + ]); + testGrid("gridItemsPositions", "60px 50px", "", "60px 50px", "none", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20}, + ]); + testGrid("gridItemsPositions", "", "60px", "none", "60px", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20}, + ]); + testGrid("gridItemsPositions", "", "60px 50px", "none", "60px 50px", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 110, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 50}, + ]); + testGrid("gridItemsPositions", "60px", "60px", "60px", "60px", [ + {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20}, + ]); + testGrid("gridItemsPositions", "60px", "60px 50px", "60px", "60px 50px", [ + {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50}, + ]); + testGrid("gridItemsPositions", "60px 50px", "60px", "60px 50px", "60px", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20}, + ]); + testGrid("gridItemsPositions", "60px 50px", "60px 50px", "60px 50px", "60px 50px", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50}, + ]); + + testGrid("gridAutoFlowColumn", "", "", "none", "none", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, + ]); + testGrid("gridAutoFlowColumn", "", "auto auto", "none", "20px 10px", [ + {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10}, + {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, + ]); + testGrid("gridAutoFlowColumn", "60px", "", "60px", "none", [ + {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, + ]); + testGrid("gridAutoFlowColumn", "100px 60px", "", "100px 60px", "none", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, + ]); + testGrid("gridAutoFlowColumn", "", "50px", "none", "50px", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, + ]); + testGrid("gridAutoFlowColumn", "", "50px 30px", "none", "50px 30px", [ + {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30}, + {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, + ]); + testGrid("gridAutoFlowColumn", "60px", "50px", "60px", "50px", [ + {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, + ]); + testGrid("gridAutoFlowColumn", "60px", "50px 30px", "60px", "50px 30px", [ + {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30}, + {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, + ]); + testGrid("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px", "50px", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, + ]); + testGrid("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30}, + {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + ]); + + testGrid("gridAutoFlowColumnItemsPositions", "", "", "none", "none", [ + {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10}, + {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "60px", "", "60px", "none", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20}, + {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "", "60px 70px", "none", [ + {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20}, + {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 20}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "", "60px", "none", "60px", [ + {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 10}, + {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "", "60px 70px", "none", "60px 70px", [ + {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 130, offsetHeight: 10}, + {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px", "60px", "60px", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20}, + {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", "60px", "60px 70px", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20}, + {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", "60px 70px", "60px", [ + {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20}, + {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", "60px 70px", "60px 70px", [ + {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20}, + {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60}, + ]); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-auto-tracks.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-auto-tracks.html new file mode 100644 index 0000000000..2cc3614d9e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-auto-tracks.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Test: auto tracks</title> + <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing"> + <link rel="match" href="../reference/grid-layout-auto-tracks-ref.html"> + <meta name="assert" content="the layout should behave the same as reference."> + <style> + body { + margin: 0; + padding: 0; + } + #caseTitle { + margin: 10px; + height: 40px; + } + #grid { + height: auto; + width: 100px; + background: #eee; + display: grid; + grid-template-columns: 100px; + grid-template-rows: auto; + } + .a { + background: blue; + grid-column: 1; + grid-row: 1; + } + .b { + background: yellow; + grid-column: 2; + grid-row: 1; + } + .c { + background: pink; + grid-column: 1; + grid-row: 2; + } + </style> + </head> + <body> + <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div class="a"> </div> + <div class="b"><div style="width:50px"> </div></div> + <div class="c"> </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-basic.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-basic.html new file mode 100644 index 0000000000..578f70173b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-basic.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Test: basic</title> + <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing"> + <link rel="match" href="../reference/grid-layout-basic-ref.html"> + <meta name="assert" content="the layout should behave the same as reference."> + <style> + body { + margin: 0; + padding: 0; + } + #caseTitle { + margin: 10px; + height: 40px; + } + #grid { + width: 150px; + background: #eee; + display: grid; + grid-template-columns: 100px 50px; + } + .a { + background: blue; + grid-column: 1; + grid-row: 1; + } + .b { + background: yellow; + grid-column: 2; + grid-row: 1; + } + </style> + </head> + <body> + <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div class="a"> </div> + <div class="b"> </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-repeat-notation.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-repeat-notation.html new file mode 100644 index 0000000000..ac0273f83a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-layout-repeat-notation.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Test: repeat notation</title> + <link rel="author" title="Leo Deng" href="mailto:myst.dg@gmail.com"> + <link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation"> + <link rel="match" href="../reference/grid-layout-repeat-notation-ref.html"> + <meta name="assert" content="the subgrid layout should behave the same as reference."> + <style> + body { + margin: 0; + padding: 0; + } + #caseTitle { + margin: 10px; + height: 40px; + } + #grid { + width: 450px; + background: #eee; + display: grid; + grid-template-columns: repeat(4, 100px) 50px; + } + .a { + background: blue; + grid-column: 1; + } + .b { + background: yellow; + grid-column: 2; + } + .c { + background: orange; + grid-column: 3; + } + .d { + background: cyan; + grid-column: 4; + } + .e { + background: pink; + grid-column: 5; + } + </style> + </head> + <body> + <p id="caseTitle">The test passes if it has the same visual effect as reference.</p> + <div id="grid"> + <div class="a"> </div> + <div class="b"> </div> + <div class="c"> </div> + <div class="d"> </div> + <div class="e"> </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-limits-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-limits-001.html new file mode 100644 index 0000000000..fe0d01492b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-limits-001.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid/#overlarge-grids"> +<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact"> +<link rel="author" title="Elika J Etemad" href="http://inkedblade.net/contact"> +<meta name="flags" content="should"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../../support/computed-testcommon.js"></script> +<div id=target> + <div id=child1></div> + <div id=child2></div> +</div> +<style> + #target { + display: grid; + position: absolute; + } +</style> +<script> +const target = document.querySelector("#target"); +const child1 = document.querySelector("#child1"); +const child2 = document.querySelector("#child2"); + +test(()=>{ + target.style.gridTemplateRows = "repeat(9999, 1px)"; + target.style.gridTemplateColumns = "repeat(9999, 1px)"; + + const height = getComputedStyle(target).height; + const width = getComputedStyle(target).width; + + assert_equals(height, "9999px", "repeat(9999, 1px) should make grid height 9999px"); + assert_equals(width, "9999px", "repeat(9999, 1px) should make grid width 9999px"); + + target.removeAttribute('style'); +}, "repeat(9999) should be supported in both axises"); + +test(()=>{ + // Start from no explicit grid, so only implicit tracks happen + target.style.gridAutoRows = "1px"; + target.style.gridAutoColumns = "1px"; + + child1.style.gridRowEnd = "10000"; + child1.style.gridColumnEnd = "10000"; + + child2.style.gridRowStart = "-10000"; + child2.style.gridColumnStart = "-10000"; + + const height = getComputedStyle(target).height; + const width = getComputedStyle(target).width; + + assert_equals(height, "19998px", "Positioning children at lines -10k and 10k should generate 19998 implicit 1px tracks."); + assert_equals(width, "19998px", "Positioning children at lines -10k and 10k should generate 19998 implicit 1px tracks."); + + target.removeAttribute('style'); + child1.removeAttribute('style'); + child2.removeAttribute('style'); +}, "Implicit grid should support lines [-10k, 10k]."); +</script>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html new file mode 100644 index 0000000000..146956c295 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-minimum-contribution-with-percentages.html @@ -0,0 +1,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> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html new file mode 100644 index 0000000000..c0be13ead8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html @@ -0,0 +1,576 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Percentage rows indefinite height</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing"> +<meta name="assert" content="This test checks that percentage rows on grid containers with indefinite height are treated as 'auto' to compute the intrinsic height, but are later resolved against the intrinsic height during layout."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + font: 25px/1 Ahem; + margin: 50px 0; +} + +.border { + border: 10px solid; +} + +.padding { + padding: 5px; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<p>grid-template-rows: 60%;</p> + +<div class="grid" style="grid-template-rows: 60%;" data-expected-height="0"> + <div class="firstRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid" style="grid-template-rows: 60%;" data-expected-height="25"> + <div class="firstRowFirstColumn" data-expected-height="15">X</div> +</div> + +<div class="grid" style="grid-template-rows: 60%;" data-expected-height="50"> + <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div> +</div> + +<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="20"> + <div class="firstRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="45"> + <div class="firstRowFirstColumn" data-expected-height="15">X</div> +</div> + +<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="70"> + <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div> +</div> + +<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="10"> + <div class="firstRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="35"> + <div class="firstRowFirstColumn" data-expected-height="15">X</div> +</div> + +<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="60"> + <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="30"> + <div class="firstRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="55"> + <div class="firstRowFirstColumn" data-expected-height="15">X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="80"> + <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div> +</div> + +<p>grid-template-rows: 140%;</p> + +<div class="grid" style="grid-template-rows: 140%;" data-expected-height="0"> + <div class="firstRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid" style="grid-template-rows: 140%;" data-expected-height="25"> + <div class="firstRowFirstColumn" data-expected-height="35">X</div> +</div> + +<div class="grid" style="grid-template-rows: 140%;" data-expected-height="50"> + <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div> +</div> + +<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="20"> + <div class="firstRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="45"> + <div class="firstRowFirstColumn" data-expected-height="35">X</div> +</div> + +<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="70"> + <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div> +</div> + +<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="10"> + <div class="firstRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="35"> + <div class="firstRowFirstColumn" data-expected-height="35">X</div> +</div> + +<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="60"> + <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="30"> + <div class="firstRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="55"> + <div class="firstRowFirstColumn" data-expected-height="35">X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="80"> + <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div> +</div> + +<p>grid-template-rows: 100px 60%;</p> + +<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="100"> + <div class="secondRowFirstColumn" data-expected-height="60"></div> +</div> + +<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="125"> + <div class="secondRowFirstColumn" data-expected-height="75">X</div> +</div> + +<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="150"> + <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div> +</div> + +<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="100"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="60"></div> +</div> + +<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="125"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="75">X</div> +</div> + +<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="150"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div> +</div> + +<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="120"> + <div class="secondRowFirstColumn" data-expected-height="60"></div> +</div> + +<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="145"> + <div class="secondRowFirstColumn" data-expected-height="75">X</div> +</div> + +<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="170"> + <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div> +</div> + +<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="120"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="60"></div> +</div> + +<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="145"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="75">X</div> +</div> + +<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="170"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div> +</div> + +<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="110"> + <div class="secondRowFirstColumn" data-expected-height="60"></div> +</div> + +<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="135"> + <div class="secondRowFirstColumn" data-expected-height="75">X</div> +</div> + +<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="160"> + <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div> +</div> + +<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="110"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="60"></div> +</div> + +<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="135"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="75">X</div> +</div> + +<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="160"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="130"> + <div class="secondRowFirstColumn" data-expected-height="60"></div> +</div> + +<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="155"> + <div class="secondRowFirstColumn" data-expected-height="75">X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="180"> + <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="130"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="60"></div> +</div> + +<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="155"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="75">X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="180"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div> +</div> + +<p>grid-template-rows: 100px 140%;</p> + +<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="100"> + <div class="secondRowFirstColumn" data-expected-height="140"></div> +</div> + +<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="125"> + <div class="secondRowFirstColumn" data-expected-height="175">X</div> +</div> + +<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="150"> + <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div> +</div> + +<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="100"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="140"></div> +</div> + +<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="125"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="175">X</div> +</div> + +<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="150"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div> +</div> + +<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="120"> + <div class="secondRowFirstColumn" data-expected-height="140"></div> +</div> + +<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="145"> + <div class="secondRowFirstColumn" data-expected-height="175">X</div> +</div> + +<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="170"> + <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div> +</div> + +<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="120"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="140"></div> +</div> + +<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="145"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="175">X</div> +</div> + +<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="170"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div> +</div> + +<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="110"> + <div class="secondRowFirstColumn" data-expected-height="140"></div> +</div> + +<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="135"> + <div class="secondRowFirstColumn" data-expected-height="175">X</div> +</div> + +<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="160"> + <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div> +</div> + +<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="110"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="140"></div> +</div> + +<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="135"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="175">X</div> +</div> + +<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="160"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="130"> + <div class="secondRowFirstColumn" data-expected-height="140"></div> +</div> + +<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="155"> + <div class="secondRowFirstColumn" data-expected-height="175">X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="180"> + <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="130"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="140"></div> +</div> + +<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="155"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="175">X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="180"> + <div class="firstRowFirstColumn" data-expected-height="100">X</div> + <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div> +</div> + +<p>grid-template-rows: auto 60%;</p> + +<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="0"> + <div class="secondRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="25"> + <div class="secondRowFirstColumn" data-expected-height="15">X</div> +</div> + +<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="50"> + <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div> +</div> + +<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="25"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="15"></div> +</div> + +<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="50"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="30">X</div> +</div> + +<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="75"> + <div class="firstRowFirstColumn" data-expected-height="30">X</div> + <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div> +</div> + +<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="20"> + <div class="secondRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="45"> + <div class="secondRowFirstColumn" data-expected-height="15">X</div> +</div> + +<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="70"> + <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div> +</div> + +<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="45"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="15"></div> +</div> + +<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="70"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="30">X</div> +</div> + +<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="95"> + <div class="firstRowFirstColumn" data-expected-height="30">X</div> + <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div> +</div> + +<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="10"> + <div class="secondRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="35"> + <div class="secondRowFirstColumn" data-expected-height="15">X</div> +</div> + +<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="60"> + <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div> +</div> + +<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="35"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="15"></div> +</div> + +<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="60"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="30">X</div> +</div> + +<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="85"> + <div class="firstRowFirstColumn" data-expected-height="30">X</div> + <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="30"> + <div class="secondRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="55"> + <div class="secondRowFirstColumn" data-expected-height="15">X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="80"> + <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="55"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="15"></div> +</div> + +<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="80"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="30">X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="105"> + <div class="firstRowFirstColumn" data-expected-height="30">X</div> + <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div> +</div> + +<p>grid-template-rows: auto 140%;</p> + +<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="0"> + <div class="secondRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="25"> + <div class="secondRowFirstColumn" data-expected-height="35">X</div> +</div> + +<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="50"> + <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div> +</div> + +<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="25"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="35"></div> +</div> + +<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="50"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="70">X</div> +</div> + +<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="75"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div> +</div> + +<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="20"> + <div class="secondRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="45"> + <div class="secondRowFirstColumn" data-expected-height="35">X</div> +</div> + +<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="70"> + <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div> +</div> + +<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="45"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="35"></div> +</div> + +<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="70"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="70">X</div> +</div> + +<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="95"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div> +</div> + +<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="10"> + <div class="secondRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="35"> + <div class="secondRowFirstColumn" data-expected-height="35">X</div> +</div> + +<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="60"> + <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div> +</div> + +<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="35"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="35"></div> +</div> + +<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="60"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="70">X</div> +</div> + +<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="85"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="30"> + <div class="secondRowFirstColumn" data-expected-height="0"></div> +</div> + +<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="55"> + <div class="secondRowFirstColumn" data-expected-height="35">X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="80"> + <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="55"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="35"></div> +</div> + +<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="80"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="70">X</div> +</div> + +<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="105"> + <div class="firstRowFirstColumn" data-expected-height="25">X</div> + <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html new file mode 100644 index 0000000000..4b14f9c6ee --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-002.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Percentage rows indefinite height 2nd pass</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing"> +<meta name="assert" content="This test checkds that when we have percentage rows in indefinite height grid containers, we need to do a second pass of the track sizing algorithm to get the expected results."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + display: grid; + border: solid 5px; + position: relative; + font: 25px/1 Ahem; + margin: 50px 0; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<div class="grid" style="grid-template-rows: auto 60% auto;" data-expected-height="35"> + <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="5" data-offset-y="0"></div> + <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="25" data-offset-y="0">X</div> + <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="5" data-offset-y="20"></div> +</div> + +<div class="grid" style="grid-template-rows: auto 20% auto;" data-expected-height="60"> + <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="25" data-offset-y="0">X</div> + <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="60" data-offset-y="0">X</div> + <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="25" data-offset-y="35">X</div> +</div> + +<div class="grid" style="grid-template-rows: auto 10% auto; grid-template-columns: repeat(3, 50px);" data-expected-height="110"> + <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="45"></div> + <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="100">X X X X</div> + <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="45"></div> +</div> + +<div class="grid" style="grid-template-rows: auto 10% auto; grid-template-columns: repeat(3, 50px);" data-expected-height="110"> + <div style="grid-row: 1; grid-column: 1; background: cyan;" data-expected-height="45">X</div> + <div style="grid-row: 1 / 4; grid-column: 2; background: magenta;" data-expected-height="100">X X X X</div> + <div style="grid-row: 3; grid-column: 3; background: lime;" data-expected-height="45">X</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-repeat-max-width-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-repeat-max-width-001.html new file mode 100644 index 0000000000..15a9f8a14c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-repeat-max-width-001.html @@ -0,0 +1,53 @@ +<!doctype html> +<title>Grid repeat(auto) with max-width shouldn't pay attention only to that</title> +<link rel=author title="Tab Atkins-Bittner" href="https://www.xanthir.com/contact/"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-repeat"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<!-- + The auto-repeat section says to calculate how many repetitions fill the grid container's content area + when the grid has a definite width or max-width. + It does *not* say to *use* the grid container's width/max-width, necessarily; + it should still depend on normal layout. + + This test will render correctly if the actual laid-out width of the grid container is used + to calculate the number of repetitions + (resulting in a single columns), + but will fail if the max-width is used + (resulting in the grid container assuming that there will be two columns while sizing itself, + but then only using one column when actually laying out its contents). +--> +<style> +.wrapper { + width: 190px; + display: grid; + justify-content: start; +} +.grid { + max-width: 200px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(0, 100px)); + background: red; +} +.item { + background: green; + width: 100px; + height: 50px; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div class=wrapper> + <div class=grid> + <div class=item></div> + <div class=item></div> + </div> +</div> + +<script> + let grid = document.getElementsByClassName("grid")[0]; + // Force a layout. + grid.offsetLeft = grid.offsetLeft; + if (window.getComputedStyle(grid).gridTemplateColumns === "100px") { + // Test passes - only one repeat of 100px was computed. + grid.style.width = "min-content"; + } +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-shorthand-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-shorthand-001.html new file mode 100644 index 0000000000..476415e8df --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-shorthand-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'grid' shorthand does not reset gutter properties</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-shorthand"> +<meta name="flags" content="dom"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #grid { + display: grid; + grid-column-gap: 10px; + grid-row-gap: 20px; + } +</style> +<div id="grid"></div> +<script> + var grid = document.getElementById("grid"); + + test( + () => { + assert_equals(window.getComputedStyle(grid)["grid-template-columns"], "none"); + assert_equals(window.getComputedStyle(grid)["grid-template-rows"], "none"); + assert_equals(window.getComputedStyle(grid)["grid-column-gap"], "10px"); + assert_equals(window.getComputedStyle(grid)["grid-row-gap"], "20px"); + }, "Check gutter properties initial values"); + + grid.style.grid = "100px / 200px"; + + test( + () => { + assert_equals(window.getComputedStyle(grid)["grid-template-columns"], "200px"); + assert_equals(window.getComputedStyle(grid)["grid-template-rows"], "100px"); + assert_equals(window.getComputedStyle(grid)["grid-column-gap"], "10px"); + assert_equals(window.getComputedStyle(grid)["grid-row-gap"], "20px"); + }, "Check gutter properties after setting 'grid' shorthand"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-flexible-lengths-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-flexible-lengths-001.html new file mode 100644 index 0000000000..0dae45b39d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-flexible-lengths-001.html @@ -0,0 +1,105 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support flexible lengths for 'grid-template-columns' and 'grid-template-rows' properties</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#fr-unit" title="5.1.3 Flexible Lengths: the fr unit"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support flexible lengths (the 'fr' unit), so you can use it to represent a fraction of the free space in the grid container."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: grid; + width: 800px; + height: 600px; + font: 10px/1 Ahem; + justify-content: start; + align-content: start; + } +</style> +<div id="log"></div> + +<div id="emptyGrid" class="grid"></div> +<div id="grid" class="grid"> + <div>GRID ITEM</div> +</div> + +<script> +setup({explicit_done: true}); +document.fonts.ready.then(()=> { + // Valid values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "2fr", "2fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "2fr", "2fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "10fr", "10fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "10fr", "10fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.5fr", "0.5fr", "400px", "300px"); + TestingUtils.testGridTemplateColumnsRows("grid", "0.5fr", "0.5fr", "400px", "300px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", ".5fr", ".5fr", "400px", "300px"); + TestingUtils.testGridTemplateColumnsRows("grid", ".5fr", ".5fr", "400px", "300px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 1fr)", "minmax(100px, 1fr)", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1fr)", "minmax(1fr, 1fr)", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "1fr 1fr", "1fr 1fr", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px"); + TestingUtils.testGridTemplateColumnsRows("grid", "0.25fr 0.75fr", "0.25fr 0.75fr", "200px 600px", "150px 450px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px"); + TestingUtils.testGridTemplateColumnsRows("grid", "1fr 2fr 1fr", "1fr 2fr 1fr", "200px 400px 200px", "150px 300px 150px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "0px 80px 320px 240px 160px", "0px 60px 240px 180px 120px"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr 4fr 3fr 2fr", "auto 1fr 4fr 3fr 2fr", "90px 71px 284px 213px 142px", "10px 59px 236px 177px 118px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px"); + TestingUtils.testGridTemplateColumnsRows("grid", "1fr 4fr 100px 3fr 2fr", "1fr 4fr 100px 3fr 2fr", "70px 280px 100px 210px 140px", "50px 200px 100px 150px 100px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content 1fr", "max-content 1fr", "0px 800px", "0px 600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "max-content 1fr", "max-content 1fr", "90px 710px", "10px 590px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr", "min-content 1fr", "0px 800px", "0px 600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr", "min-content 1fr", "40px 760px", "20px 580px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr auto", "1fr auto", "800px 0px", "600px 0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "1fr auto", "1fr auto", "800px 0px", "600px 0px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px"); + TestingUtils.testGridTemplateColumnsRows("grid", "300px 1fr", "200px 1fr", "300px 500px", "200px 400px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "800px 1fr", "600px 1fr", "800px 0px", "600px 0px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "1000px 1fr", "700px 1fr", "1000px 0px", "700px 0px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px"); + TestingUtils.testGridTemplateColumnsRows("grid", "calc(50px + 50%) 1fr", "calc(50px + 50%) 1fr", "450px 350px", "350px 250px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 300px) 1fr", "minmax(100px, 200px) 1fr", "300px 500px", "200px 400px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(4, 1fr)", "repeat(4, 1fr)", ["200px 200px 200px 200px", "repeat(4, 200px)"], ["150px 150px 150px 150px", "repeat(4, 150px)"]); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(4, [b] 1fr [c]) [d]", "[z] repeat(4, [y] 1fr) [x]", ["[a b] 200px [c b] 200px [c b] 200px [c b] 200px [c d]", "[a] repeat(4, [b] 200px [c]) [d]"], ["[z y] 150px [y] 150px [y] 150px [y] 150px [x]", "[z] repeat(4, [y] 150px) [x]"]); + + // Reset values. + document.getElementById("emptyGrid").style.gridTemplateColumns = ""; + document.getElementById("emptyGrid").style.gridTemplateRows = ""; + document.getElementById("grid").style.gridTemplateColumns = ""; + document.getElementById("grid").style.gridTemplateRows = ""; + + // Wrong values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "fr", "fr", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "fr", "fr", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1 fr", "1 fr", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "1 fr", "1 fr", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1free-space", "1free-space", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "1free-space", "1free-space", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "-2fr", "-2fr", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "-2fr", "-2fr", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "0,5fr", "0,5fr", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "0,5fr", "0,5fr", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(1fr + 100px)", "calc(1fr + 100px)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "calc(1fr + 100px)", "calc(1fr + 100px)", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(1fr) auto", "(1fr) auto", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "(1fr) auto", "(1fr) auto", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(1fr, 1000px)", "minmax(1fr, 700px)", "90px", "10px"); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-grid-template-areas-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-grid-template-areas-001.html new file mode 100644 index 0000000000..ed4c500a19 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-grid-template-areas-001.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for 'grid-template-ares' property</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-template-areas-property" title="5.2 Named Areas: the 'grid-template-areas' property"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that 'grid-template-areas' is supported in a grid. So you can define the grid structure."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<style> + #grid { + display: grid; + } +</style> +<div id="log"></div> + +<div id="grid"></div> + +<script> + // Single values. + TestingUtils.testGridTemplateAreas('grid', 'none', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"a"', '"a"'); + TestingUtils.testGridTemplateAreas('grid', '"."', '"."'); + TestingUtils.testGridTemplateAreas('grid', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"', '"lower UPPER 10 -minus _low 1-st ©copy_right line¶"'); + TestingUtils.testGridTemplateAreas('grid', '"a b"', '"a b"'); + TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"', '"a b" "c d"'); + TestingUtils.testGridTemplateAreas('grid', '"a b" "c d"', '"a b" "c d"'); + TestingUtils.testGridTemplateAreas('grid', '"a b""c d"', '"a b" "c d"'); + TestingUtils.testGridTemplateAreas('grid', '"a b"\t"c d"', '"a b" "c d"'); + TestingUtils.testGridTemplateAreas('grid', '"a b"\n"c d"', '"a b" "c d"'); + TestingUtils.testGridTemplateAreas('grid', '"a b" "a b"', '"a b" "a b"'); + TestingUtils.testGridTemplateAreas('grid', '"a a" "b b"', '"a a" "b b"'); + TestingUtils.testGridTemplateAreas('grid', '". a ." "b a c"', '". a ." "b a c"'); + TestingUtils.testGridTemplateAreas('grid', '".. a ..." "b a c"', '". a ." "b a c"'); + TestingUtils.testGridTemplateAreas('grid', '".a..." "b a c"', '". a ." "b a c"'); + TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ."', '"head head" "nav main" "foot ."'); + TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot ...."', '"head head" "nav main" "foot ."'); + TestingUtils.testGridTemplateAreas('grid', '"head head" "nav main" "foot."', '"head head" "nav main" "foot ."'); + TestingUtils.testGridTemplateAreas('grid', '". header header ." "nav main main main" "nav footer footer ."', '". header header ." "nav main main main" "nav footer footer ."'); + TestingUtils.testGridTemplateAreas('grid', '"... header header ...." "nav main main main" "nav footer footer ...."', '". header header ." "nav main main main" "nav footer footer ."'); + TestingUtils.testGridTemplateAreas('grid', '"...header header...." "nav main main main" "nav footer footer...."', '". header header ." "nav main main main" "nav footer footer ."'); + TestingUtils.testGridTemplateAreas('grid', '"title stats" "score stats" "board board" "ctrls ctrls"', '"title stats" "score stats" "board board" "ctrls ctrls"'); + TestingUtils.testGridTemplateAreas('grid', '"title board" "stats board" "score ctrls"', '"title board" "stats board" "score ctrls"'); + TestingUtils.testGridTemplateAreas('grid', '". a" "b a" ". a"', '". a" "b a" ". a"'); + TestingUtils.testGridTemplateAreas('grid', '".. a" "b a" "... a"', '". a" "b a" ". a"'); + TestingUtils.testGridTemplateAreas('grid', '"..a" "b a" ".a"', '". a" "b a" ". a"'); + TestingUtils.testGridTemplateAreas('grid', '"a a a" "b b b"', '"a a a" "b b b"'); + TestingUtils.testGridTemplateAreas('grid', '". ." "a a"', '". ." "a a"'); + TestingUtils.testGridTemplateAreas('grid', '"... ...." "a a"', '". ." "a a"'); + + // Reset values. + document.getElementById('grid').style.gridTemplateAreas = ''; + + // Wrong values. + TestingUtils.testGridTemplateAreas('grid', 'a', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"a" "b c"', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"a b" "c" "d e"', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"a b c" "d e"', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"a b"-"c d"', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"a b" - "c d"', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"a b" . "c d"', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"a b a"', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"a" "b" "a"', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"a b" "b b"', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"b a" "b b"', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"a b" "b a"', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"a ." ". a"', 'none'); + TestingUtils.testGridTemplateAreas('grid', '","', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"10%"', 'none'); + TestingUtils.testGridTemplateAreas('grid', '"USD$"', 'none'); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-grid-template-columns-rows-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-grid-template-columns-rows-001.html new file mode 100644 index 0000000000..bf818cd85e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-grid-template-columns-rows-001.html @@ -0,0 +1,89 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for 'grid-template-columns' and 'grid-template-rows' properties</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#track-sizing" title="5.1 Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties are supported in a grid. So you can use the different syntax options to define the trak list."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: grid; + width: 800px; + height: 600px; + font: 10px/1 Ahem; + justify-content: start; + align-content: start; + } +</style> +<div id="log"></div> + +<div id="emptyGrid" class="grid"></div> +<div id="grid" class="grid"> + <div id="item">GRID ITEM</div> +</div> + +<script> +setup({explicit_done: true}); +document.fonts.ready.then(()=> { + // Single values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "none", "none", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "none", "none", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto", "auto", "0px", "0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto", "auto", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px", "300px", "500px", "300px"); + TestingUtils.testGridTemplateColumnsRows("grid", "500px", "300px", "500px", "300px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em", "20em", "400px", "200px"); + TestingUtils.testGridTemplateColumnsRows("grid", "40em", "20em", "400px", "200px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "25%", "50%", "200px", "300px"); + TestingUtils.testGridTemplateColumnsRows("grid", "25%", "50%", "200px", "300px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px"); + TestingUtils.testGridTemplateColumnsRows("grid", "calc(200px + 10%)", "calc(25% + 50px)", "280px", "200px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr", "1fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "1fr", "1fr", "800px", "600px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content", "max-content", "0px", "0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "max-content", "max-content", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content", "min-content", "0px", "0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "min-content", "min-content", "40px", "20px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(200px, 400px)", "minmax(50px, 100px)", "400px", "100px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(calc(10% + 200px), calc(800px - 20%))", "minmax(calc(20% + 50px), calc(600px - 10%))", "640px", "540px"); + + // Multiple values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px"); + TestingUtils.testGridTemplateColumnsRows("grid", "500px 200px 50px", "100px 300px", "500px 200px 50px", "100px 300px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px"); + TestingUtils.testGridTemplateColumnsRows("grid", "40em 100px 15%", "50px 20em 10%", "400px 100px 120px", "50px 200px 60px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px"); + TestingUtils.testGridTemplateColumnsRows("grid", "200px 1fr", "1fr 100px", "200px 600px", "500px 100px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto 1fr", "auto 1fr", "0px 800px", "0px 600px"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto 1fr", "auto 1fr", "90px 710px", "10px 590px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px"); + TestingUtils.testGridTemplateColumnsRows("grid", "1fr 3fr", "2fr 1fr", "200px 600px", "400px 200px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(25px, 75px) 750px", "minmax(50px, 150px) 500px", "50px 750px", "100px 500px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "0px 200px 100px 500px", "0px 450px 100px 50px"); + TestingUtils.testGridTemplateColumnsRows("grid", "min-content 1fr calc(20px + 10%) minmax(30em, 50em)", "min-content 1fr calc(10% + 40px) minmax(3em, 5em)", "40px 160px 100px 500px", "20px 430px 100px 50px"); + + // Reset values. + document.getElementById("emptyGrid").style.gridTemplateColumns = ""; + document.getElementById("emptyGrid").style.gridTemplateRows = ""; + document.getElementById("grid").style.gridTemplateColumns = ""; + document.getElementById("grid").style.gridTemplateRows = ""; + + // Wrong values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "foo", "bar", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "foo", "bar", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto none", "none auto", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto none", "none auto", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px, 200px", "300px, 400px", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "100px, 200px", "300px, 400px", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "minmax(100px, 200px, 300px)", "minmax(100px, 200px, 300px)", "90px", "10px"); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-001.html new file mode 100644 index 0000000000..bff5e8151c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-001.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for named grid lines in 'grid-template-columns' and 'grid-template-rows' properties</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(<custom-ident\>*)' syntax"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that grid lines can be explicitly named in 'grid-template-columns' and 'grid-template-rows' properties."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: grid; + width: 800px; + height: 600px; + font: 10px/1 Ahem; + justify-content: start; + align-content: start; + } +</style> +<div id="log"></div> + +<div id="emptyGrid" class="grid"></div> +<div id="grid" class="grid"> + <div id="item">GRID ITEM</div> +</div> + +<script> +setup({explicit_done: true}); +document.fonts.ready.then(()=> { + // Valid values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto [last]", "[first] auto [last]", "[first] 0px [last]", "[first] 0px [last]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto [last]", "[first] auto [last]", "[first] 90px [last]", "[first] 10px [last]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]", "[F1rst-L1_n3] 0px [L4st-L1_n3]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] auto [L4st-L1_n3]", "[F1rst-L1_n3] 90px [L4st-L1_n3]", "[F1rst-L1_n3] 10px [L4st-L1_n3]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[] auto [ ]", "[ ] auto []", "0px", "0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "[] auto [ ]", "[ ] auto []", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first] auto", "[first] auto", "[first] 0px", "[first] 0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "[first] auto", "[first] auto", "[first] 90px", "[first] 10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [last]", "auto [last]", "0px [last]", "0px [last]"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto [last]", "auto [last]", "90px [last]", "10px [last]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[line] auto [line]", "[line] auto [line]", "[line] 0px [line]", "[line] 0px [line]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[line] auto [line]", "[line] auto [line]", "[line] 90px [line]", "[line] 10px [line]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 0px [last line]", "[first line] 0px [last line]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[first line] auto [last line]", "[first line] auto [last line]", "[first line] 90px [last line]", "[first line] 10px [last line]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 0px [b] 0px [c]", "[a] 0px [b] 0px [c]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto [c]", "[a] auto [b] auto [c]", "[a] 90px [b] 0px [c]", "[a] 10px [b] 0px [c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto [c]", "auto [b] auto [c]", "0px [b] 0px [c]", "0px [b] 0px [c]"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto [c]", "auto [b] auto [c]", "90px [b] 0px [c]", "10px [b] 0px [c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto [c]", "[a] auto auto [c]", ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"], ["[a] 0px 0px [c]", "[a] repeat(2, 0px) [c]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto [c]", "[a] auto auto [c]", "[a] 90px 0px [c]", "[a] 10px 0px [c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 0px [b] 0px", "[a] 0px [b] 0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [b] auto", "[a] auto [b] auto", "[a] 90px [b] 0px", "[a] 10px [b] 0px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto auto", "[a] auto auto", ["[a] 0px 0px", "[a] repeat(2, 0px)"], ["[a] 0px 0px", "[a] repeat(2, 0px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto auto", "[a] auto auto", "[a] 90px 0px", "[a] 10px 0px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto [b] auto", "auto [b] auto", "0px [b] 0px", "0px [b] 0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "auto [b] auto", "auto [b] auto", "90px [b] 0px", "10px [b] 0px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "auto auto [c]", "auto auto [c]", ["0px 0px [c]", "repeat(2, 0px) [c]"], ["0px 0px [c]", "repeat(2, 0px) [c]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "auto auto [c]", "auto auto [c]", "90px 0px [c]", "10px 0px [c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"], ["[a] 0px [a] 0px [a]", "repeat(2, [a] 0px) [a]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [a] auto [a]", "[a] auto [a] auto [a]", "[a] 90px [a] 0px [a]", "[a] 10px [a] 0px [a]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", ["[a b c] 0px [a b c] 0px [a b c]", "repeat(2, [a b c] 0px) [a b c]"], "[a b c] 0px [a b c] 0px [a b c]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a b c] auto [a b c] auto [a b c]", "[a b c] auto [a b c] auto [a b c]", "[a b c] 90px [a b c] 0px [a b c]", "[a b c] 10px [a b c] 0px [a b c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] 40em [b] 100px [c] 15% [d]", "[z] 50px [y] 20em [x] 10% [w]", "[a] 400px [b] 100px [c] 120px [d]", "[z] 50px [y] 200px [x] 60px [w]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] 200px [b] 1fr [c]", "[z] 1fr [y] 100px [x]", "[a] 200px [b] 600px [c]", "[z] 500px [y] 100px [x]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 0px [b] 200px [c] 100px [d] 500px [e]", "[z] 0px [y] 450px [x] 100px [w] 50px [v]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content [b] 1fr [c] calc(20px + 10%) [d] minmax(30em, 50em) [e]", "[z] min-content [y] 1fr [x] calc(10% + 40px) [w] minmax(3em, 5em) [v]", "[a] 40px [b] 160px [c] 100px [d] 500px [e]", "[z] 20px [y] 430px [x] 100px [w] 50px [v]"); + + // Reset values. + document.getElementById("emptyGrid").style.gridTemplateColumns = ""; + document.getElementById("emptyGrid").style.gridTemplateRows = ""; + document.getElementById("grid").style.gridTemplateColumns = ""; + document.getElementById("grid").style.gridTemplateRows = ""; + + // Wrong values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a]", "[a]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a]", "[a]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a b]", "[a b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a b]", "[a b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] none [b]", "[a] none [b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] none [b]", "[a] none [b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b]", "[a] [b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b]", "[a] [b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "a auto b", "a auto b", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "a auto b", "a auto b", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "(a) auto (b)", "(a) auto (b)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "(a) auto (b)", "(a) auto (b)", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "'a' auto 'b'", "'a' auto 'b'", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "'a' auto 'b'", "'a' auto 'b'", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "\"a\" auto \"b\"", "\"a\" auto \"b\"", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a, b] auto [a, b]", "[a, b] auto [a, b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] [b] auto [c d] [e]", "[a] [b] auto [c d] [e]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a [b]] auto [c]", "[a [b]] auto [c]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a [b]] auto [c]", "[a [b]] auto [c]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto [[b]]", "[a] auto [[b]]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto [[b]]", "[a] auto [[b]]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a auto [b]", "[a auto [b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a auto [b]", "[a auto [b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 100px] auto [b]", "[a 100px] auto [b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a 100px] auto [b]", "[a 100px] auto [b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a 50%] auto [b]", "[a 50%] auto [b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a 50%] auto [b]", "[a 50%] auto [b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[5] auto [10]", "[5] auto [10]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[5] auto [10]", "[5] auto [10]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a.] auto [b*]", "[a.] auto [b*]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a.] auto [b*]", "[a.] auto [b*]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[#a] auto [$b]", "[#a] auto [$b]", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[#a] auto [$b]", "[#a] auto [$b]", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[initial] auto", "[initial] auto", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[initial] auto", "[initial] auto", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[inherit] auto", "[inherit] auto", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[inherit] auto", "[inherit] auto", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[default] auto", "[default] auto", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "[default] auto", "[default] auto", "90px", "10px"); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002-ref.html new file mode 100644 index 0000000000..d65696428c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002-ref.html @@ -0,0 +1,216 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(<custom-ident\>*)' syntax"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill" title="7.2.2.2. Repeat-to-fill: 'auto-fill' and 'auto-fit' repetitions"> +<style> + +.holder { + width: 300px; + height: 20px; + border-bottom: 2px solid #cfbfcf; +} + +.holder > :nth-child(2) { + clear: left; /* Forces the div to a new line to simulate a new grid row. */ + padding-top: 2px; /* Simulates the grid row gap. */ +} + +.grid-container > * { float: left; height: 8px; } + +.grid-container > :nth-child(3n) { background: sienna; } +.grid-container > :nth-child(3n+1) { background: gold; } +.grid-container > :nth-child(3n+2) { background: orange; } + +.alt-color > :nth-child(2n) { background: sienna; } +.alt-color > :nth-child(2n+1) { background: orange; } + +.invis { width: 0px; visibility: none; } + +</style> + +<p>The test passes if it has the same visual effect as reference.</p> + +<div class="holder"> + <div class="grid-container"> + <div style="width:30px; margin-left:30px"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:50px; margin-left:170px"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:30px; margin-left:30px"></div> + <div style="width:30px; margin-left:40px"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + <div style="width:60px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:30px; margin-left:20px"></div> + <div style="width:30px; margin-left:40px"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + <div style="width:60px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:30px; margin-left:30px"></div> + <div style="width:50px; margin-left:110px"></div> + <div style="width:60px;"></div> + </div> + <div class="grid-container"> + <div style="width:10px"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:30px; margin-left:20px"></div> + <div style="width:50px; margin-left:110px"></div> + <div style="width:60px;"></div> + </div> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:50px; margin-left:10px;"></div> + <div style="width:40px;"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:90px; margin-left:10px;"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + <div style="width:60px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:90px;"></div> + <div class="invis"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div style="width:120px;"></div> + <div style="width:40px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:90px;"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:50px;"></div> + <div class="invis"></div> + <div style="width:40px;"></div> + <div style="width:30px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div style="width:90px;"></div> + <div style="width:30px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:50px;"></div> + <div style="width:40px;"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:20px;"></div> + <div style="width:140px;"></div> + <div style="width:50px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:20px;"></div> + <div class="invis"></div> + <div style="width:140px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div style="width:30px;"></div> + <div style="width:140px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:140px; margin-left:20px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:210px;"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002.html new file mode 100644 index 0000000000..6b3b19ef97 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-002.html @@ -0,0 +1,219 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for named grid lines when 'grid-template-columns' and 'grid-template-rows' have multiple values inside of a repeat.</title> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(<custom-ident\>*)' syntax"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill" title="7.2.2.2. Repeat-to-fill: 'auto-fill' and 'auto-fit' repetitions"> +<link rel="match" href="grid-support-named-grid-lines-002-ref.html"> +<style> + +.holder { + width: 300px; + height: 20px; + border-bottom: 2px solid #cfbfcf; +} + +.grid-container { + display: grid; + /* + Defines the grid areas 'repeat', which covers the repeat only, and + 'around-repeat' which covers the repeat and one track on either end. + + Provides the line name 'all' in every track, the line names 'v' and 'u' + which alternate in every grid line. + */ + grid-template-columns: [v] 10px [around-repeat-start a t-start w-start u all] 20px [repeat-start b] repeat(auto-fill, [all x v] 30px [all w-end y u] 40px [all t-end z]) [repeat-end c v] 50px [around-repeat-end all d u] 60px [e v]; + grid-template-rows: + [w-start t-start around-repeat-start repeat-start] + repeat(auto-fill, 8px) + [w-end t-end around-repeat-end repeat-end ] + 8px; + grid-row-gap: 2px; +} + +.grid-container > :nth-child(3n) { background: sienna; } +.grid-container > :nth-child(3n+1) { background: gold; } +.grid-container > :nth-child(3n+2) { background: orange; } + +/* Alternate colors for some grid containers, where sometimes multiple grid + items would appear as one item or the actual ordering would be ambiguous + otherwise. */ +.alt-color > :nth-child(2n) { background: sienna; } +.alt-color > :nth-child(2n+1) { background: orange; } + +</style> + +<p>The test passes if it has the same visual effect as reference.</p> + +<!-- Use the line names just before and just after the repeat. --> +<div class="holder"> + <div class="grid-container"> + <div style="grid-column:b / span 1"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="grid-column:c / span 1"></div> + </div> +</div> + +<!-- Use line names that are inside a repeat. --> +<div class="holder"> + <div class="grid-container"> + <div style="grid-column-start:x"></div> + <div style="grid-column-start:z"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div></div> + <div style="grid-column-start:x"></div> + <div style="grid-column-start:z"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="grid-column-start:x 1"></div> + <div style="grid-column-start:z 2"></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div></div> + <div style="grid-column-start:x 1"></div> + <div style="grid-column-start:z 2"></div> + <div></div> + <div></div> + </div> +</div> + +<!-- Using a span that goes from outside a repeat to inside the repeat. --> +<div class="holder"> + <div class="grid-container"> + <div style="grid-column:u / y"></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="grid-column:u / z"></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<!-- Using an area which has one end inside the repeat. --> +<div class="holder"> + <div class="grid-container"> + <div style="grid-area: t;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div style="grid-area: t;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div></div> + <div style="grid-area: t;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="grid-area: w;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div style="grid-area: w;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div></div> + <div style="grid-area: w;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<!-- Using an area which spans the entire repeat. --> +<div class="holder"> + <div class="grid-container"> + <div></div> + <div></div> + <div style="grid-area: repeat;"></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div></div> + <div style="grid-area: repeat;"></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div></div> + <div style="grid-area: repeat;"></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="grid-area: repeat;"></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="grid-area: around-repeat;"></div> + <div></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-003-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-003-ref.html new file mode 100644 index 0000000000..33f88bf374 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-003-ref.html @@ -0,0 +1,222 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(<custom-ident\>*)' syntax"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill" title="7.2.2.2. Repeat-to-fill: 'auto-fill' and 'auto-fit' repetitions"> +<style> + +.holder { + width: 300px; + height: 20px; + border-bottom: 2px solid #cfbfcf; +} + +.holder > :nth-child(2) { + clear: left; /* Forces the div to a new line to simulate a new grid row. */ + padding-top: 2px; /* Simulates the grid row gap. */ +} + +.grid-container > * { float: left; height: 8px; } + +.grid-container > :nth-child(3n) { background: sienna; } +.grid-container > :nth-child(3n+1) { background: gold; } +.grid-container > :nth-child(3n+2) { background: orange; } + +.alt-color > :nth-child(2n) { background: sienna; } +.alt-color > :nth-child(2n+1) { background: orange; } + +.invis { width: 0px; visibility: none; } + +</style> + +<p>The test passes if it has the same visual effect as reference.</p> + +<div class="holder"> + <div class="grid-container"> + <div style="width:30px; margin-left:30px"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + <div style="width:60px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:30px; margin-left:20px"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + <div style="width:60px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:30px; margin-left:30px"></div> + <div style="width:50px;"></div> + <div style="width:60px;"></div> + </div> + <div class="grid-container"> + <div style="width:10px"></div> + <div style="width:20px"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:30px; margin-left:20px;"></div> + <div style="width:50px;"></div> + <div style="width:60px;"></div> + </div> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px"></div> + <div style="width:20px"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:50px; margin-left:10px;"></div> + <div style="width:40px;"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:90px; margin-left:10px;"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + <div style="width:60px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:90px;"></div> + <div class="invis"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div style="width:120px;"></div> + <div style="width:40px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:90px;"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + <div style="width:50px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:50px;"></div> + <div class="invis"></div> + <div style="width:40px;"></div> + <div style="width:30px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div style="width:90px;"></div> + <div style="width:30px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:50px;"></div> + <div style="width:40px;"></div> + <div style="width:30px;"></div> + <div style="width:40px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:20px;"></div> + <div style="width:140px;"></div> + <div style="width:50px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:20px;"></div> + <div class="invis"></div> + <div style="width:140px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div style="width:30px;"></div> + <div style="width:140px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:140px; margin-left:20px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="width:10px;"></div> + <div style="width:210px;"></div> + <div style="width:60px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div style="width:10px;"></div> + <div style="width:210px;"></div> + <div style="width:60px;"></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div class="invis"></div> + <div style="width:10px;"></div> + <div class="invis"></div> + <div style="width:210px;"></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-003.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-003.html new file mode 100644 index 0000000000..c2c722485f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-named-grid-lines-003.html @@ -0,0 +1,224 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support for named grid lines when 'grid-template-columns' and 'grid-template-rows' have multiple values inside of a repeat.</title> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#named-lines" title="5.1.1. Named Grid Lines: the '(<custom-ident\>*)' syntax"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill" title="7.2.2.2. Repeat-to-fill: 'auto-fill' and 'auto-fit' repetitions"> +<link rel="match" href="grid-support-named-grid-lines-003-ref.html"> +<style> + +.holder { + width: 300px; + height: 20px; + border-bottom: 2px solid #cfbfcf; +} + +.grid-container { + display: grid; + /* + Defines the grid areas 'repeat', which covers the repeat only, and + 'around-repeat' which covers the repeat and one track on either end. + + Provides the line name 'all' in every track, the line names 'v' and 'u' + which alternates in every grid line. + */ + grid-template-columns: [v] 10px [around-repeat-start a t-start w-start u all] 20px [repeat-start b] repeat(auto-fit, [all x v] 30px [all w-end y u] 40px [all t-end z]) [repeat-end c v] 50px [around-repeat-end all d u] 60px [e v]; + grid-template-rows: + [w-start t-start around-repeat-start repeat-start] + repeat(auto-fit, 8px) + [w-end t-end around-repeat-end repeat-end ] + 8px; + grid-row-gap: 2px; +} + +.grid-container > :nth-child(3n) { background: sienna; } +.grid-container > :nth-child(3n+1) { background: gold; } +.grid-container > :nth-child(3n+2) { background: orange; } + +/* Alternate colors for some grid containers, where sometimes multiple grid + items would appear as one item or the actual ordering would be ambiguous + otherwise. */ +.alt-color > :nth-child(2n) { background: sienna; } +.alt-color > :nth-child(2n+1) { background: orange; } + +</style> + +<p>The test passes if it has the same visual effect as reference.</p> + +<!-- Use line names that are inside a repeat. --> +<div class="holder"> + <div class="grid-container"> + <div style="grid-column-start:x"></div> + <div style="grid-column-start:z"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div></div> + <div style="grid-column-start:x"></div> + <div style="grid-column-start:z"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="grid-column-start:x 1"></div> + <div style="grid-column-start:z 2"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div></div> + <div style="grid-column-start:x 1"></div> + <div style="grid-column-start:z 2"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<!-- Using a span that goes from outside a repeat to inside the repeat. --> +<div class="holder"> + <div class="grid-container"> + <div style="grid-column:u / y"></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="grid-column:u / z"></div> + <div></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<!-- Using an area which has one end inside the repeat. --> +<div class="holder"> + <div class="grid-container"> + <div style="grid-area: t;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div style="grid-area: t;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div></div> + <div style="grid-area: t;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="grid-area: w;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div style="grid-area: w;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div></div> + <div style="grid-area: w;"></div> + <div></div> + <div></div> + <div></div> + </div> +</div> + +<!-- Using an area which spans the entire repeat. --> +<div class="holder"> + <div class="grid-container"> + <div></div> + <div></div> + <div style="grid-area: repeat;"></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div></div> + <div style="grid-area: repeat;"></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div></div> + <div style="grid-area: repeat;"></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="grid-area: repeat;"></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div></div> + <div style="grid-area: around-repeat;"></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container alt-color"> + <div></div> + <div style="grid-area: around-repeat;"></div> + <div></div> + </div> +</div> + +<div class="holder"> + <div class="grid-container"> + <div style="grid-area: around-repeat;"></div> + <div></div> + </div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-001.html new file mode 100644 index 0000000000..c2c8be0c59 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-001.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation, so you can use it to represents a repeated fragment of the track list."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: grid; + width: 800px; + height: 600px; + font: 10px/1 Ahem; + justify-content: start; + align-content: start; + } +</style> +<div id="log"></div> + +<div id="emptyGrid" class="grid"></div> +<div id="grid" class="grid"> + <div id="item">GRID ITEM</div> +</div> + +<script> +setup({explicit_done: true}); +document.fonts.ready.then(()=> { + // Valid values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(1, auto)", "repeat(1, auto)", "0px", "0px"); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(1, auto)", "repeat(1, auto)", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, auto)", "repeat(2, auto)", ["0px 0px", "repeat(2, 0px)"], ["0px 0px", "repeat(2, 0px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, auto)", "repeat(2, auto)", "90px 0px", "10px 0px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, minmax(50px, calc(50px + 50%)))", "repeat(2, minmax(50px, calc(50px + 50%)))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, minmax(50px, calc(50px + 50%)))", "repeat(2, minmax(50px, calc(50px + 50%)))", ["400px 400px", "repeat(2, 400px)"], ["300px 300px", "repeat(2, 300px)"]); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(5, 10%)", "repeat(5, 10%)", ["80px 80px 80px 80px 80px", "repeat(5, 80px)"], ["60px 60px 60px 60px 60px", "repeat(5, 60px)"]); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "max-content repeat(2, 25%) 1fr", "100px repeat(2, 25%) 1fr", ["0px 200px 200px 400px", "0px repeat(2, 200px) 400px"], ["100px 150px 150px 200px", "100px repeat(2, 150px) 200px"]); + TestingUtils.testGridTemplateColumnsRows("grid", "max-content repeat(2, 25%) 1fr", "max-content repeat(2, 25%) 1fr", ["90px 200px 200px 310px", "90px repeat(2, 200px) 310px"], ["10px 150px 150px 290px", "10px repeat(2, 150px) 290px"]); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", ["0px 50px 0px 50px", "repeat(2, 0px 50px)"], ["0px 50px 0px 50px", "repeat(2, 0px 50px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, min-content 50px)", "repeat(2, min-content 50px)", "40px 50px 0px 50px", "20px 50px 0px 50px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]"); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "repeat(2, [a] minmax(50px, 100px) [b] 25em [c])", "[a] 100px [b] 250px [c a] 100px [b] 250px [c]", "[a] 50px [b] 250px [c a] 50px [b] 250px [c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"], ["[a] 0px [b] 100px 0px [b] 100px [c]", "[a] repeat(2, 0px [b] 100px) [c]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b] 100px) [c]", "[a] repeat(2, auto [b] 100px) [c]", "[a] 90px [b] 100px 0px [b] 100px [c]", "[a] 10px [b] 100px 0px [b] 100px [c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"], ["[a] 0px [b] 100px [b] 100px [c]", "[a] 0px repeat(2, [b] 100px) [c]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] auto repeat(2, [b] 100px) [c]", "[a] auto repeat(2, [b] 100px) [c]", ["[a] 90px [b] 100px [b] 100px [c]", "[a] 90px repeat(2, [b] 100px) [c]"], ["[a] 10px [b] 100px [b] 100px [c]", "[a] 10px repeat(2, [b] 100px) [c]"]); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 0px [b] 0px [b] 100px [c]", "[a] 0px [b] 0px [b] 100px [c]"); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, auto [b]) 100px [c]", "[a] repeat(2, auto [b]) 100px [c]", "[a] 90px [b] 0px [b] 100px [c]", "[a] 10px [b] 0px [b] 100px [c]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] 100px)", "[a] repeat(2, [b] 100px)", ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"], ["[a b] 100px [b] 100px", "[a] repeat(2, [b] 100px)"]); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"], ["[a b] 0px [c b] 0px [c d]", "[a] repeat(2, [b] 0px [c]) [d]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] repeat(2, [b] auto [c]) [d]", "[a] repeat(2, [b] auto [c]) [d]", "[a b] 90px [c b] 0px [c d]", "[a b] 10px [c b] 0px [c d]"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 0px [b] 50px [c] 100px [b] 50px [c] 100px [d] 500px [e]", "[a] 0px repeat(2, [b] 50px [c] 100px) [d] 500px [e]"], ["[z] 0px [y] 175px [x] 100px [y] 175px [x] 100px [w] 50px [v]", "[z] 0px repeat(2, [y] 175px [x] 100px) [w] 50px [v]"]); + TestingUtils.testGridTemplateColumnsRows("grid", "[a] min-content repeat(2, [b] 1fr [c] calc(20px + 10%)) [d] minmax(30em, 50em) [e]", "[z] min-content repeat(2, [y] 1fr [x] calc(10% + 40px)) [w] minmax(3em, 5em) [v]", ["[a] 40px [b] 30px [c] 100px [b] 30px [c] 100px [d] 500px [e]", "[a] 40px repeat(2, [b] 30px [c] 100px) [d] 500px [e]"], ["[z] 20px [y] 165px [x] 100px [y] 165px [x] 100px [w] 50px [v]", "[z] 20px repeat(2, [y] 165px [x] 100px) [w] 50px [v]"]); + + // Reset values. + document.getElementById("emptyGrid").style.gridTemplateColumns = ""; + document.getElementById("emptyGrid").style.gridTemplateRows = ""; + document.getElementById("grid").style.gridTemplateColumns = ""; + document.getElementById("grid").style.gridTemplateRows = ""; + + // Wrong values. + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(-1, auto)", "repeat(-1, auto)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(-1, auto)", "repeat(-1, auto)", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(auto, 2)", "repeat(auto, 2)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(auto, 2)", "repeat(auto, 2)", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat 2, auto", "repeat 2, auto", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat 2, auto", "repeat 2, auto", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2 auto)", "repeat(2 auto)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2 auto)", "repeat(2 auto)", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px (repeat 2, auto)", "(repeat 2, auto)", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "100px (repeat 2, auto)", "(repeat 2, auto)", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "repeat(2, 50px repeat(2, 100px))", "repeat(2, 50px repeat(2, 100px))", "90px", "10px"); + TestingUtils.testGridTemplateColumnsRows("emptyGrid", "100px repeat(2, [a])", "100px repeat(2, [a])", "none", "none"); + TestingUtils.testGridTemplateColumnsRows("grid", "100px repeat(2, [a])", "100px repeat(2, [a])", "90px", "10px"); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-002.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-002.html new file mode 100644 index 0000000000..a5174fe6f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-support-repeat-002.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Support 'repeat()' notation for 'grid-template-columns' and 'grid-template-rows' properties</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#repeat-notation" title="5.1.2 Repeating Rows and Columns: the 'repeat()' notation"> +<meta name="assert" content="This test checks that 'grid-template-columns' and 'grid-template-rows' properties support 'repeat()' notation, and that their declared value serializes correctly."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#grid { + display: grid; + width: 800px; + height: 600px; + font: 10px/1 Ahem; + justify-content: start; + align-content: start; +} +</style> + +<div id="log"></div> + +<div id="grid"> + <div>GRID ITEM</div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +setup({explicit_done: true}); +var {style} = document.getElementById("grid"); + +function testGridTemplateColumnsRows(assignedValue, expectedValue = assignedValue) { + test(function() { + style.gridTemplateColumns = assignedValue; + style.gridTemplateRows = assignedValue; + assert_equals(style.gridTemplateColumns, expectedValue, "gridTemplateColumns"); + assert_equals(style.gridTemplateRows, expectedValue, "gridTemplateRows"); + }, `grid-template-columns: ${assignedValue}; and grid-template-rows: ${assignedValue};`); +} + +document.fonts.ready.then(() => { + // Valid values. + testGridTemplateColumnsRows("repeat(1, auto)"); + testGridTemplateColumnsRows("repeat(2, auto)"); + testGridTemplateColumnsRows("repeat(2, minmax(50px, calc(50% + 50px)))"); + testGridTemplateColumnsRows("repeat(5, 10%)"); + testGridTemplateColumnsRows("max-content repeat(2, 25%) 1fr"); + testGridTemplateColumnsRows("repeat(2, min-content 50px)"); + testGridTemplateColumnsRows("repeat(2, [a] minmax(50px, 100px) [b] 25em [c])"); + testGridTemplateColumnsRows("[a] repeat(2, auto [b] 100px) [c]"); + testGridTemplateColumnsRows("[a] auto repeat(2, [b] 100px) [c]"); + testGridTemplateColumnsRows("[a] repeat(2, auto [b]) 100px [c]"); + testGridTemplateColumnsRows("[a] repeat(2, [b] 100px)"); + testGridTemplateColumnsRows("[a] repeat(2, [b] auto [c]) [d]"); + testGridTemplateColumnsRows("[a] min-content repeat(2, [b] 1fr [c] calc(10% + 20px)) [d] minmax(30em, 50em) [e]"); + + // Reset values. + style.gridTemplateColumns = ""; + style.gridTemplateRows = ""; + + // Wrong values. + testGridTemplateColumnsRows("repeat(-1, auto)", ""); + testGridTemplateColumnsRows("repeat(auto, 2)", ""); + testGridTemplateColumnsRows("repeat 2, auto", ""); + testGridTemplateColumnsRows("repeat(2 auto)", ""); + testGridTemplateColumnsRows("100px (repeat 2, auto)", ""); + testGridTemplateColumnsRows("repeat(2, 50px repeat(2, 100px))", ""); + testGridTemplateColumnsRows("100px repeat(2, [a])", ""); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001-ref.html new file mode 100644 index 0000000000..13002a7037 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001-ref.html @@ -0,0 +1,334 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: grid-template-columns fit-content() reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + justify-content: start; + width: 100px; + position: relative; + padding-top: 10px; + margin-bottom: 5px; + grid-column-gap: 5px; +} + +.item { + font: 10px/1 Ahem; + background: cyan; + padding-top: 2px; +} + +.spanningItem { + font: 10px/1 Ahem; + grid-column: 1 / -1; + grid-row: 2; + background: salmon; + padding-top: 2px; +} + +.test { + position: absolute; + left: 0; right: 0; top: 0; + height: 5px; + background: purple; +} +.test:nth-child(2n) { background: orange; } + +.floatLeft { + float: left; + width: 190px; +} + +h3 { font-size: 1em; } +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div class="floatLeft"> + <h3>Only fit-content() and with fixed size tracks.</h3> + <div class="grid"> + <div class="item">XXX</div> + <div class="test autoRowFirstColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 30px 0px;"> + <div class="item">XXX</div> + <div class="spanningItem">XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 40px;"> + <div class="item">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: auto auto;"> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 40px auto;"> + <div class="item">XXX XXX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 80px;"> + <div class="item">XXX XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: auto auto;"> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 25px 70px;"> + <div class="item autoRowSecondColumn">XXX XXX XXX</div> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 20px 50px;"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 40px 40px;"> + <div class="item">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 15px 80px;"> + <div class="item autoRowSecondColumn">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + +</div> + +<div class="floatLeft"> + <h3>fit-content() with other content-sized tracks.</h3> + <div class="grid" style="grid-template-columns: 12.5px 82.5px;"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 50px 45px;"> + <div class="item">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 0px 95px;"> + <div class="item autoRowSecondColumn">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 12.5px 40px;"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 50px 40px;"> + <div class="item">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 0px 50px;"> + <div class="item autoRowSecondColumn">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: auto min-content max-content"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: min-content auto max-content"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: min-content max-content auto"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 30px 0px 60px;"> + <div class="item" style="grid-column: 1">XXX XX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 30px 0px 60px;"> + <div class="item" style="grid-column: 1">XXX XX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 0px 90px 0px;"> + <div class="item" style="grid-column: 2">XXX XX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> +</div> + +<div class="floatLeft"> + <h3>fit-content() with percentage arguments.</h3> + <div class="grid" style="grid-template-columns: 30px;"> + <div class="item">XXX</div> + <div class="test autoRowFirstColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 30px 0px;"> + <div class="item">XXX</div> + <div class="spanningItem">XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 30px;"> + <div class="item">XX XX</div> + <div class="test autoRowFirstColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 30px 30px;"> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 30px 30px;"> + <div class="item autoRowSecondColumn">X X X</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 90px;"> + <div class="item">XXX XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 47.5px 47.5px;"> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 15px 80px;"> + <div class="item autoRowSecondColumn">XXX XXX XXX</div> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> +</div> + +<div class="floatLeft"> + <h3>max-content < fit-content() argument.</h3> + + <div class="grid" style="grid-template-columns: 70px;"> + <div class="item">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 32.5px 32.5px;"> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 70px 0px;"> + <div class="item">XXX XXX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 32.5px 32.5px;"> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 45px 20px;"> + <div class="item autoRowSecondColumn">XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 92.5px 12.5px;"> + <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: 82.5px 12.5px;"> + <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: max-content auto max-content;"> + <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: min-content auto min-content;"> + <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: auto auto auto;"> + <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001.html new file mode 100644 index 0000000000..cecc53f896 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-fit-content-001.html @@ -0,0 +1,358 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: grid-template-columns fit-content()</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing"> +<link rel="match" href="grid-template-columns-fit-content-001-ref.html"> +<meta name="assert" content="This test checks that 'fit-content()' works as expected in grid-template-columns, i.e., it's similar to 'auto' ('minmax(auto, max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater than the 'auto' minimum)."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + justify-content: start; + width: 100px; + position: relative; + padding-top: 10px; + margin-bottom: 5px; + grid-column-gap: 5px; +} + +.fc0 { grid-template-columns: fit-content(0px);} +.fc40 { grid-template-columns: fit-content(40px); } +.fc80 { grid-template-columns: fit-content(80px); } +.fc110 { grid-template-columns: fit-content(110px); } + +.fc0x2 { grid-template-columns: repeat(2, fit-content(0px));} +.fc40x2 { grid-template-columns: repeat(2, fit-content(40px)); } +.fc80x2 { grid-template-columns: repeat(2, fit-content(80px)); } +.fc110x2 { grid-template-columns: repeat(2, fit-content(110px)); } + +.fc0p { grid-template-columns: fit-content(0%); } +.fc30p { grid-template-columns: fit-content(30%); } +.fc90p { grid-template-columns: fit-content(90%); } +.fc110p { grid-template-columns: fit-content(110%); } + +.fc0px2 { grid-template-columns: repeat(2, fit-content(0%)); } +.fc30px2 { grid-template-columns: repeat(2, fit-content(30%)); } +.fc90px2 { grid-template-columns: repeat(2, fit-content(90%)); } +.fc110px2 { grid-template-columns: repeat(2, fit-content(110%)); } + +.item { + font: 10px/1 Ahem; + background: cyan; + padding-top: 2px; +} + +.spanningItem { + font: 10px/1 Ahem; + grid-column: 1 / -1; + grid-row: 2; + background: salmon; + padding-top: 2px; +} + +.test { + position: absolute; + left: 0; right: 0; top: 0; + height: 5px; + background: purple; +} +.test:nth-child(2n) { background: orange; } + +.floatLeft { + float: left; + width: 190px; +} + +h3 { font-size: 1em; } + +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div class="floatLeft"> + <h3>Only fit-content() and with fixed size tracks.</h3> + <div class="grid fc0"> + <div class="item">XXX</div> + <div class="test autoRowFirstColumn"></div> + </div> + + <div class="grid fc0x2"> + <div class="item">XXX</div> + <div class="spanningItem">XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid fc40"> + <div class="item">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + </div> + + <div class="grid fc40x2"> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid fc40x2"> + <div class="item">XXX XXX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid fc80"> + <div class="item">XXX XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + </div> + + <div class="grid fc80x2"> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid fc80x2"> + <div class="item autoRowSecondColumn">XXX XXX XXX</div> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: fit-content(20px) 50%;"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: minmax(10px, 40px) fit-content(40px);"> + <div class="item">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: fit-content(40px) minmax(10%, 200px);"> + <div class="item autoRowSecondColumn">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + +</div> + +<div class="floatLeft"> + <h3>fit-content() with other content-sized tracks.</h3> + <div class="grid" style="grid-template-columns: fit-content(40px) max-content;"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: fit-content(40px) max-content;"> + <div class="item">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: fit-content(40px) max-content;"> + <div class="item autoRowSecondColumn">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: min-content fit-content(40px);"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: min-content fit-content(40px);"> + <div class="item">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: min-content fit-content(40px);"> + <div class="item autoRowSecondColumn">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: fit-content(30px) min-content max-content"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: min-content fit-content(30px) max-content"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: min-content max-content fit-content(30px)"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: fit-content(30px) min-content max-content"> + <div class="item" style="grid-column: 1">XXX XX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: min-content fit-content(30px) max-content"> + <div class="item" style="grid-column: 1">XXX XX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: min-content max-content fit-content(30px)"> + <div class="item" style="grid-column: 2">XXX XX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> +</div> + +<div class="floatLeft"> + <h3>fit-content() with percentage arguments.</h3> + <div class="grid fc0p"> + <div class="item">XXX</div> + <div class="test autoRowFirstColumn"></div> + </div> + + <div class="grid fc0px2"> + <div class="item">XXX</div> + <div class="spanningItem">XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid fc30p"> + <div class="item">XX XX</div> + <div class="test autoRowFirstColumn"></div> + </div> + + <div class="grid fc30px2"> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid fc30px2"> + <div class="item autoRowSecondColumn">X X X</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid fc90p"> + <div class="item">XXX XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + </div> + + <div class="grid fc90px2"> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid fc90px2"> + <div class="item autoRowSecondColumn">XXX XXX XXX</div> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> +</div> + +<div class="floatLeft"> + <h3>max-content < fit-content() argument.</h3> + + <div class="grid fc110"> + <div class="item">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + </div> + + <div class="grid fc110x2"> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid fc110x2"> + <div class="item">XXX XXX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: fit-content(110px) fit-content(40px);"> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: fit-content(110px) fit-content(40px);"> + <div class="item autoRowSecondColumn">XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: max-content fit-content(110px);"> + <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: fit-content(110px) min-content;"> + <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: max-content fit-content(110px) max-content;"> + <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: min-content fit-content(110px) min-content;"> + <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + + <div class="grid" style="grid-template-columns: auto fit-content(110px) auto;"> + <div class="spanningItem" style="grid-row: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test autoRowFirstColumn"></div> + <div class="test autoRowSecondColumn"></div> + <div class="test autoRowThirdColumn"></div> + </div> + +</div> 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> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.html new file mode 100644 index 0000000000..c992bf66d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' list tracks implicitly created."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: grid; + width: 800px; + height: 600px; + font: 10px/1 Ahem; + justify-content: start; + align-content: start; + } + + .fifthColumn { + grid-column: 5; + } + + .fourthRow { + grid-row: 4; + } + + .gridAutoFlowColumn { + grid-auto-flow: column; + } +</style> +<div id="log"></div> + +<div id="grid" class="grid"> + <div>FIRST ITEM</div> + <div>SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<div id="gridItemsPositions" class="grid"> + <div class="fifthColumn">FIRST ITEM</div> + <div class="fourthRow">SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<div id="gridAutoFlowColumn" class="grid gridAutoFlowColumn"> + <div>FIRST ITEM</div> + <div>SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<div id="gridAutoFlowColumnItemsPositions" class="grid gridAutoFlowColumn"> + <div class="fifthColumn">FIRST ITEM</div> + <div class="fourthRow">SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<script> +setup({explicit_done: true}); +document.fonts.ready.then(()=> { + // Valid values. + TestingUtils.testGridTemplateColumnsRows("grid", "", "", "110px", ["10px 10px 20px", "repeat(2, 10px) 20px"]); + TestingUtils.testGridTemplateColumnsRows("grid", "auto auto", "", "100px 110px", "10px 20px"); + TestingUtils.testGridTemplateColumnsRows("grid", "60px", "", "60px", ["20px 20px 20px", "repeat(3, 20px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "", "100px 60px", ["20px 20px", "repeat(2, 20px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "", "50px", "110px", "50px 10px 20px"); + TestingUtils.testGridTemplateColumnsRows("grid", "", "50px 30px", "110px", "50px 30px 20px"); + TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px", "60px", ["50px 20px 20px", "50px repeat(2, 20px)"]); + TestingUtils.testGridTemplateColumnsRows("grid", "60px", "50px 30px", "60px", "50px 30px 20px"); + TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px", "100px 60px", "50px 20px"); + TestingUtils.testGridTemplateColumnsRows("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px"); + + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "10px 20px 0px 10px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "10px 20px 0px 20px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "10px 20px 0px 20px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 20px 0px 10px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "", "60px 50px", ["110px 0px 0px 0px 100px", "110px repeat(3, 0px) 100px"], "60px 50px 0px 10px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 20px 0px 20px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px", "60px 50px", ["60px 0px 0px 0px 100px", "60px repeat(3, 0px) 100px"], "60px 50px 0px 20px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 20px 0px 20px"); + TestingUtils.testGridTemplateColumnsRows("gridItemsPositions", "60px 50px", "60px 50px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 50px 0px 20px"); + + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "", "100px 110px 50px", "20px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "auto auto", "110px 50px", "20px 10px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "", "60px 110px 50px", "20px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "", "100px 60px 50px", "20px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px", "100px 110px 50px", "50px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "", "50px 30px", "110px 50px", "50px 30px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px", "60px 110px 50px", "50px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "60px", "50px 30px", "60px 50px", "50px 30px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px 50px", "50px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px"); + + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 10px", "20px repeat(2, 0px) 10px"]); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["20px 0px 0px 20px", "20px repeat(2, 0px) 20px"]); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 10px", "60px repeat(2, 0px) 10px"]); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "", "60px 70px", ["110px 50px 0px 0px 100px", "110px 50px repeat(2, 0px) 100px"], "60px 70px 0px 10px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", ["60px 50px 0px 0px 100px", "60px 50px repeat(2, 0px) 100px"], "60px 70px 0px 20px"); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], ["60px 0px 0px 20px", "60px repeat(2, 0px) 20px"]); + TestingUtils.testGridTemplateColumnsRows("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", ["60px 70px 0px 0px 100px", "60px 70px repeat(2, 0px) 100px"], "60px 70px 0px 20px"); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.tentative.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.tentative.html new file mode 100644 index 0000000000..d3ab109329 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-columns-rows-resolved-values-001.tentative.html @@ -0,0 +1,277 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: 'grid-template-columns' and 'grid-template-rows' properties resolved values for implicit tracks</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css-grid-1/#resolved-track-list" title="5.1.5. Resolved Values"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4475"> +<meta name="flags" content="ahem dom"> +<meta name="assert" content="This test checks that resolved values for 'grid-template-columns' and 'grid-template-rows' don't include implicitly created tracks."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="support/testing-utils.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: grid; + width: 800px; + height: 600px; + font: 10px/1 Ahem; + justify-content: start; + align-content: start; + position: relative; + } + + .fifthColumn { + grid-column: 5; + } + + .fourthRow { + grid-row: 4; + } + + .gridAutoFlowColumn { + grid-auto-flow: column; + } +</style> +<div id="log"></div> + +<div id="grid" class="grid"> + <div>FIRST ITEM</div> + <div>SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<div id="gridItemsPositions" class="grid"> + <div class="fifthColumn">FIRST ITEM</div> + <div class="fourthRow">SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<div id="gridAutoFlowColumn" class="grid gridAutoFlowColumn"> + <div>FIRST ITEM</div> + <div>SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<div id="gridAutoFlowColumnItemsPositions" class="grid gridAutoFlowColumn"> + <div class="fifthColumn">FIRST ITEM</div> + <div class="fourthRow">SECOND ITEM</div> + <div>THIRD<br />ITEM</div> +</div> + +<script> +function testSizeAndPositionOfItems(gridId, expectedItemData) { + let grid = document.getElementById(gridId); + assert_equals(grid.childElementCount, expectedItemData.length, "childElementCount"); + let props = ["offsetWidth", "offsetTop", "offsetHeight"]; + for (let i = 0; i < expectedItemData.length; ++i) + for (let prop of props) + assert_equals(grid.children[i][prop], expectedItemData[i][prop], "children[" + i + "]." + prop); +} + +function testGrid(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue, expectedItemData) { + TestingUtils.testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue); + test(function() { + testSizeAndPositionOfItems(gridId, expectedItemData); + }, "Children of '" + gridId + "' with: grid-template-columns: " + columnsStyle + "; and grid-template-rows: " + rowsStyle + ";"); +} + +setup({explicit_done: true}); +document.fonts.ready.then(()=> { + // Valid values. + testGrid("grid", "", "", "none", "none", [ + {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 20}, + ]); + testGrid("grid", "auto auto", "", "100px 110px", "none", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 10}, + {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 100, offsetTop: 10, offsetHeight: 20}, + ]); + testGrid("grid", "60px", "", "60px", "none", [ + {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 40, offsetHeight: 20}, + ]); + testGrid("grid", "100px 60px", "", "100px 60px", "none", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 100, offsetTop: 20, offsetHeight: 20}, + ]); + testGrid("grid", "", "50px", "none", "50px", [ + {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20}, + ]); + testGrid("grid", "", "50px 30px", "none", "50px 30px", [ + {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 20}, + ]); + testGrid("grid", "60px", "50px", "60px", "50px", [ + {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 70, offsetHeight: 20}, + ]); + testGrid("grid", "60px", "50px 30px", "60px", "50px 30px", [ + {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20}, + ]); + testGrid("grid", "100px 60px", "50px", "100px 60px", "50px", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 20}, + ]); + testGrid("grid", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30}, + ]); + + testGrid("gridItemsPositions", "", "", "none", "none", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 30, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 10, offsetHeight: 20}, + ]); + testGrid("gridItemsPositions", "60px", "", "60px", "none", [ + {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20}, + ]); + testGrid("gridItemsPositions", "60px 50px", "", "60px 50px", "none", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 30, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 10, offsetHeight: 20}, + ]); + testGrid("gridItemsPositions", "", "60px", "none", "60px", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 80, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 20}, + ]); + testGrid("gridItemsPositions", "", "60px 50px", "none", "60px 50px", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 110, offsetHeight: 10}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 50}, + ]); + testGrid("gridItemsPositions", "60px", "60px", "60px", "60px", [ + {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20}, + ]); + testGrid("gridItemsPositions", "60px", "60px 50px", "60px", "60px 50px", [ + {offsetLeft: 60, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50}, + ]); + testGrid("gridItemsPositions", "60px 50px", "60px", "60px 50px", "60px", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 80, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20}, + ]); + testGrid("gridItemsPositions", "60px 50px", "60px 50px", "60px 50px", "60px 50px", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 110, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 50}, + ]); + + testGrid("gridAutoFlowColumn", "", "", "none", "none", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, + ]); + testGrid("gridAutoFlowColumn", "", "auto auto", "none", "20px 10px", [ + {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10}, + {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, + ]); + testGrid("gridAutoFlowColumn", "60px", "", "60px", "none", [ + {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, + ]); + testGrid("gridAutoFlowColumn", "100px 60px", "", "100px 60px", "none", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, + ]); + testGrid("gridAutoFlowColumn", "", "50px", "none", "50px", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 100, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 210, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, + ]); + testGrid("gridAutoFlowColumn", "", "50px 30px", "none", "50px 30px", [ + {offsetLeft: 0, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 50, offsetHeight: 30}, + {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, + ]); + testGrid("gridAutoFlowColumn", "60px", "50px", "60px", "50px", [ + {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 60, offsetWidth: 110, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 170, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, + ]); + testGrid("gridAutoFlowColumn", "60px", "50px 30px", "60px", "50px 30px", [ + {offsetLeft: 0, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 50, offsetHeight: 30}, + {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, + ]); + testGrid("gridAutoFlowColumn", "100px 60px", "50px", "100px 60px", "50px", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 160, offsetWidth: 50, offsetTop: 0, offsetHeight: 50}, + ]); + testGrid("gridAutoFlowColumn", "100px 60px", "50px 30px", "100px 60px", "50px 30px", [ + {offsetLeft: 0, offsetWidth: 100, offsetTop: 0, offsetHeight: 50}, + {offsetLeft: 0, offsetWidth: 100, offsetTop: 50, offsetHeight: 30}, + {offsetLeft: 100, offsetWidth: 60, offsetTop: 0, offsetHeight: 50}, + ]); + + testGrid("gridAutoFlowColumnItemsPositions", "", "", "none", "none", [ + {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 20, offsetHeight: 10}, + {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "60px", "", "60px", "none", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20}, + {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 20}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "", "60px 70px", "none", [ + {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 20}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 20, offsetHeight: 20}, + {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 20}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "", "60px", "none", "60px", [ + {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 60, offsetHeight: 10}, + {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "", "60px 70px", "none", "60px 70px", [ + {offsetLeft: 160, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 110, offsetTop: 130, offsetHeight: 10}, + {offsetLeft: 110, offsetWidth: 50, offsetTop: 0, offsetHeight: 60}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px", "60px", "60px", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20}, + {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "60px", "60px 70px", "60px", "60px 70px", [ + {offsetLeft: 110, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20}, + {offsetLeft: 60, offsetWidth: 50, offsetTop: 0, offsetHeight: 60}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px", "60px 70px", "60px", [ + {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 60, offsetHeight: 20}, + {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60}, + ]); + testGrid("gridAutoFlowColumnItemsPositions", "60px 70px", "60px 70px", "60px 70px", "60px 70px", [ + {offsetLeft: 130, offsetWidth: 100, offsetTop: 0, offsetHeight: 60}, + {offsetLeft: 0, offsetWidth: 60, offsetTop: 130, offsetHeight: 20}, + {offsetLeft: 60, offsetWidth: 70, offsetTop: 0, offsetHeight: 60}, + ]); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001-ref.html new file mode 100644 index 0000000000..dc39cccc68 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001-ref.html @@ -0,0 +1,331 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: grid-template-rows fit-content() reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + justify-content: start; + align-content: start; + height: 100px; + width: 40px; + position: relative; + padding-left: 10px; + margin-right: 5px; + grid-row-gap: 5px; + float: left; +} + +.item { + font: 10px/1 Ahem; + background: cyan; + padding-left: 2px; +} + +.spanningItem { + font: 10px/1 Ahem; + grid-row: 1 / -1; + grid-column: 2; + background: salmon; + padding-left: 2px; +} + +.test { + position: absolute; + left: 0; top: 0; bottom: 0; + width: 5px; + background: purple; +} +.test:nth-child(2n) { background: orange; } + +.firstRow { grid-row: 1 / 2; } +.secondRow { grid-row: 2 / 3; } +.thirdRow { grid-row: 3 / 4; } + +div.grid > div { writing-mode: vertical-lr; } + +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div class="grid" style="grid-template-rows: 30px;"> + <div class="item">XXX</div> + <div class="test firstRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 30px 0px;"> + <div class="item">XXX</div> + <div class="spanningItem">XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 40px;"> + <div class="item">XXX XXX</div> + <div class="test firstRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 32.5px 32.5px;"> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 40px 25px;"> + <div class="item">XXX XXX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 80px;"> + <div class="item">XXX XXX XXX</div> + <div class="test firstRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 47.5px 47.5px;"> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 25px 70px;"> + <div class="item secondRow">XXX XXX XXX</div> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 20px 50px;"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 40px 40px;"> + <div class="item">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 15px 80px;"> + <div class="item secondRow">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<br clear="all"> +<br clear="all"> + +<div class="grid" style="grid-template-rows: 12.5px 82.5px;"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 50px 45px;"> + <div class="item">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 0px 95px;"> + <div class="item secondRow">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 12.5px 40px;"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 50px 40px;"> + <div class="item">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 0px 50px;"> + <div class="item secondRow">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: auto min-content max-content"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<div class="grid" style="grid-template-rows: min-content auto max-content"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<div class="grid" style="grid-template-rows: min-content max-content auto"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 30px 0px 60px;"> + <div class="item" style="grid-row: 1">XXX XX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 30px 0px 60px;"> + <div class="item" style="grid-row: 1">XXX XX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 0px 90px 0px;"> + <div class="item" style="grid-row: 2">XXX XX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<br clear="all"> +<br clear="all"> + +<div class="grid" style="grid-template-rows: 30px;"> + <div class="item">XXX</div> + <div class="test firstRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 30px 0px;"> + <div class="item">XXX</div> + <div class="spanningItem">XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 30px;"> + <div class="item">XX XX</div> + <div class="test firstRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 30px 30px;"> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 30px 30px;"> + <div class="item secondRow">X X X</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 90px;"> + <div class="item">XXX XXX XXX</div> + <div class="test firstRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 47.5px 47.5px;"> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 15px 80px;"> + <div class="item secondRow">XXX XXX XXX</div> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<br clear="all"> +<br clear="all"> + +<div class="grid" style="grid-template-rows: 70px;"> + <div class="item">XXX XXX</div> + <div class="test firstRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 32.5px 32.5px;"> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 70px 0px;"> + <div class="item">XXX XXX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 32.5px 32.5px;"> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 45px 20px;"> + <div class="item secondRow">XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 92.5px 12.5px;"> + <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: 82.5px 12.5px;"> + <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: max-content auto max-content;"> + <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<div class="grid" style="grid-template-rows: min-content auto min-content;"> + <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<div class="grid" style="grid-template-rows: auto auto auto;"> + <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001.html b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001.html new file mode 100644 index 0000000000..14ac0c9c39 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/grid-template-rows-fit-content-001.html @@ -0,0 +1,358 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: grid-template-rows fit-content()</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing"> +<link rel="match" href="grid-template-rows-fit-content-001-ref.html"> +<meta name="assert" content="This test checks that 'fit-content()' works as expected in grid-template-rows, i.e., it's similar to 'auto' ('minmax(auto, max-content)') except that the growth limit is clamped at the argument of 'fit-content' (if greater than the 'auto' minimum)."> +<meta name="flags" content="ahem"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + justify-content: start; + align-content: start; + height: 100px; + width: 40px; + position: relative; + padding-left: 10px; + margin-right: 5px; + grid-row-gap: 5px; + float: left; +} + +.fc0 { grid-template-rows: fit-content(0px);} +.fc40 { grid-template-rows: fit-content(40px); } +.fc80 { grid-template-rows: fit-content(80px); } +.fc110 { grid-template-rows: fit-content(110px); } + +.fc0x2 { grid-template-rows: repeat(2, fit-content(0px));} +.fc40x2 { grid-template-rows: repeat(2, fit-content(40px)); } +.fc80x2 { grid-template-rows: repeat(2, fit-content(80px)); } +.fc110x2 { grid-template-rows: repeat(2, fit-content(110px)); } + +.fc0p { grid-template-rows: fit-content(0%); } +.fc30p { grid-template-rows: fit-content(30%); } +.fc90p { grid-template-rows: fit-content(90%); } +.fc110p { grid-template-rows: fit-content(110%); } + +.fc0px2 { grid-template-rows: repeat(2, fit-content(0%)); } +.fc30px2 { grid-template-rows: repeat(2, fit-content(30%)); } +.fc90px2 { grid-template-rows: repeat(2, fit-content(90%)); } +.fc110px2 { grid-template-rows: repeat(2, fit-content(110%)); } + +div.grid > div { writing-mode: vertical-lr; } + +.item { + font: 10px/1 Ahem; + background: cyan; + padding-left: 2px; +} + +.spanningItem { + font: 10px/1 Ahem; + grid-row: 1 / -1; + grid-column: 2; + background: salmon; + padding-left: 2px; +} + +.test { + position: absolute; + left: 0; bottom: 0; top: 0; + width: 5px; + background: purple; +} +.test:nth-child(2n) { background: orange; } + +.firstRow { grid-row: 1 / 2; } +.secondRow { grid-row: 2 / 3; } +.thirdRow { grid-row: 3 / 4; } + +h3 { font-size: 1em; } +.container { float: left; height: 110px;} + +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div class="grid fc0"> + <div class="item">XXX</div> + <div class="test firstRow"></div> +</div> + +<div class="grid fc0x2"> + <div class="item">XXX</div> + <div class="spanningItem">XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid fc40"> + <div class="item">XXX XXX</div> + <div class="test firstRow"></div> +</div> + +<div class="grid fc40x2"> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid fc40x2"> + <div class="item">XXX XXX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid fc80"> + <div class="item">XXX XXX XXX</div> + <div class="test firstRow"></div> +</div> + +<div class="grid fc80x2"> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid fc80x2"> + <div class="item secondRow">XXX XXX XXX</div> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: fit-content(20px) 50%;"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: minmax(10px, 40px) fit-content(40px);"> + <div class="item">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: fit-content(40px) minmax(10%, 200px);"> + <div class="item secondRow">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> +</div> + +<br clear ="all"> +<br clear ="all"> + +<div class="grid" style="grid-template-rows: fit-content(40px) max-content;"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: fit-content(40px) max-content;"> + <div class="item">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: fit-content(40px) max-content;"> + <div class="item secondRow">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: min-content fit-content(40px);"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: min-content fit-content(40px);"> + <div class="item">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: min-content fit-content(40px);"> + <div class="item secondRow">XXXXX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: fit-content(30px) min-content max-content"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<div class="grid" style="grid-template-rows: min-content fit-content(30px) max-content"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<div class="grid" style="grid-template-rows: min-content max-content fit-content(30px)"> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<div class="grid" style="grid-template-rows: fit-content(30px) min-content max-content"> + <div class="item" style="grid-row: 1">XXX XX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<div class="grid" style="grid-template-rows: min-content fit-content(30px) max-content"> + <div class="item" style="grid-row: 1">XXX XX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<div class="grid" style="grid-template-rows: min-content max-content fit-content(30px)"> + <div class="item" style="grid-row: 2">XXX XX</div> + <div class="spanningItem">XXX XX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<br clear="all"> +<br clear="all"> + +<div class="grid fc0p"> + <div class="item">XXX</div> + <div class="test firstRow"></div> +</div> + +<div class="grid fc0px2"> + <div class="item">XXX</div> + <div class="spanningItem">XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid fc30p"> + <div class="item">XX XX</div> + <div class="test firstRow"></div> +</div> + +<div class="grid fc30px2"> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid fc30px2"> + <div class="item secondRow">X X X</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid fc90p"> + <div class="item">XXX XXX XXX</div> + <div class="test firstRow"></div> +</div> + +<div class="grid fc90px2"> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid fc90px2"> + <div class="item secondRow">XXX XXX XXX</div> + <div class="spanningItem">XXX XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<br clear="all"> +<br clear="all"> + +<div class="grid fc110"> + <div class="item">XXX XXX</div> + <div class="test firstRow"></div> +</div> + +<div class="grid fc110x2"> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid fc110x2"> + <div class="item">XXX XXX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: fit-content(110px) fit-content(40px);"> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: fit-content(110px) fit-content(40px);"> + <div class="item secondRow">XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: max-content fit-content(110px);"> + <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: fit-content(110px) min-content;"> + <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> +</div> + +<div class="grid" style="grid-template-rows: max-content fit-content(110px) max-content;"> + <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<div class="grid" style="grid-template-rows: min-content fit-content(110px) min-content;"> + <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> + +<div class="grid" style="grid-template-rows: auto fit-content(110px) auto;"> + <div class="spanningItem" style="grid-column: 1;">XX XX XX XX</div> + <div class="spanningItem">XXX XXX</div> + <div class="test firstRow"></div> + <div class="test secondRow"></div> + <div class="test thirdRow"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/grid-definition/support/testing-utils.js b/testing/web-platform/tests/css/css-grid/grid-definition/support/testing-utils.js new file mode 100644 index 0000000000..30b944265b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/grid-definition/support/testing-utils.js @@ -0,0 +1,43 @@ +var TestingUtils = (function() { + + function checkGridTemplateColumns(element, value) { + if (!Array.isArray(value)) + value = new Array(value); + assert_in_array(getComputedStyle(element).gridTemplateColumns, value, "gridTemplateColumns"); + } + + function checkGridTemplateRows(element, value) { + if (!Array.isArray(value)) + value = new Array(value); + assert_in_array(getComputedStyle(element).gridTemplateRows, value, "gridTemplateRows"); + } + + function testGridTemplateColumnsRows(gridId, columnsStyle, rowsStyle, columnsComputedValue, rowsComputedValue, label) { + test(function() { + var grid = document.getElementById(gridId); + grid.style.gridTemplateColumns = columnsStyle; + grid.style.gridTemplateRows = rowsStyle; + checkGridTemplateColumns(grid, columnsComputedValue); + checkGridTemplateRows(grid, rowsComputedValue); + }, (label ? label + " " : "") + "'" + gridId + "' with: grid-template-columns: " + columnsStyle + "; and grid-template-rows: " + rowsStyle + ";"); + } + + function checkGridTemplateAreas(element, value) { + if (!Array.isArray(value)) + value = new Array(value); + assert_in_array(getComputedStyle(element).gridTemplateAreas, value, "gridTemplateAreas"); + } + + function testGridTemplateAreas(gridId, style, value) { + test(function() { + var grid = document.getElementById(gridId); + grid.style.gridTemplateAreas = style; + checkGridTemplateAreas(grid, value); + }, "'" + gridId + "' with: grid-template-areas: " + style + ";"); + } + + return { + testGridTemplateColumnsRows: testGridTemplateColumnsRows, + testGridTemplateAreas: testGridTemplateAreas + } +})(); |