diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/layout-algorithm')
57 files changed, 4516 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/auto-margins-ignored-during-track-sizing-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/auto-margins-ignored-during-track-sizing-001.html new file mode 100644 index 0000000000..2a23b1bd20 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/auto-margins-ignored-during-track-sizing-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<title>CSS Grid: grid items using 'auto' margins.</title> +<link rel="author" title="Javier Fernendez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-margins"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="match" href="references/auto-margins-ignored-during-track-sizing-001-ref.html"> +<meta name="assert" content="This test ensures that 'auto' margin is treated as 0px during the tracks sizing algorithm."/> +<style> +body { overflow: hidden; } +.grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +.margin-center { + margin-top: 10px; + margin-left: auto; + margin-right: auto; +} +.i1 { background: magenta; } +.i2 { background: cyan; } +.i3 { background: yellow; } +.i4 { background: lime; } +</style> +<p>This test pass if the 3 items in the first row have the same size filling the whole viewport's width and the item in the second row is centered in the first column.<p> +<div class="grid"> + <div class="i1"> + In a few questions, you will get an expert-designed investment portfolio to fit your financial needs. + </div> + <div class="i2"> + Open and fund your account with 10,000 or more and we will put your money to work. + </div> + <div class="i3"> + We will take it from here, monitoring your portfolio daily to help keep it on track. + </div> + <div class="i4 margin-center">Learn More</a> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-001.html new file mode 100644 index 0000000000..f6ec2bb997 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-001.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks"/> +<style> +.grid { + position: relative; + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + height: 350px; + font-family: Ahem; + line-height: 1; + grid-auto-flow: row; +} +.grid > :nth-child(1) { font-size:20px; } +.grid > :nth-child(2) { font-size:30px; } +.grid > :nth-child(3) { font-size:50px; } +.grid > :nth-child(4) { font-size:60px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 50px; } +.extraRightPadding { padding-right: 50px; } +</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(() => { runTests(); })"> + +<p>Horizontal 4x1 grid with parallel and orthogonal items.</p> +<div id="grid1" class="grid contentStart itemsBaseline" data-expected-width="112"> + <div class="item" data-offset-x="36" data-offset-y="10" data-expected-width="40" data-expected-height="38">É</div> + <div class="item verticalLR" data-offset-x="18" data-offset-y="62" data-expected-width="50" data-expected-height="48">É</div> + <div class="item" data-offset-x="36" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div> + <div class="item verticalLR" data-offset-x="12" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div> +</div> +<div id="grid2" class="grid contentStart itemsBaseline" data-expected-width="165"> + <div class="item extraRightPadding" data-offset-x="72" data-offset-y="10" data-expected-width="87" data-expected-height="38">É</div> + <div class="item verticalLR extraLeftPadding" data-offset-x="12" data-offset-y="62" data-expected-width="92" data-expected-height="48">É</div> + <div class="item" data-offset-x="72" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div> + <div class="item verticalLR" data-offset-x="48" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div> +</div> +<div id="grid3" class="grid contentStart itemsBaseline" data-expected-width="98"> + <div class="item" data-offset-x="12" data-offset-y="10" data-expected-width="40" data-expected-height="38">É</div> + <div class="item verticalRL" data-offset-x="18" data-offset-y="62" data-expected-width="50" data-expected-height="48">É</div> + <div class="item" data-offset-x="12" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div> + <div class="item verticalRL" data-offset-x="12" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div> +</div> +<div id="grid4" class="grid contentStart itemsBaseline" data-expected-width="134"> + <div class="item extraRightPadding" data-offset-x="12" data-offset-y="10" data-expected-width="87" data-expected-height="38">É</div> + <div class="item verticalRL extraLeftPadding" data-offset-x="12" data-offset-y="62" data-expected-width="92" data-expected-height="48">É</div> + <div class="item" data-offset-x="12" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div> + <div class="item verticalRL" data-offset-x="48" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div> +</div> + +<br clear="all"> + +<script> + "use strict"; + function runTests() { + + let values = [ "auto", "min-content", "max-content" ]; + let minValues = values.concat([ "0px" ]); + + var grid1 = document.getElementById("grid1"); + var grid2 = document.getElementById("grid2"); + var grid3 = document.getElementById("grid3"); + var grid4 = document.getElementById("grid4"); + + minValues.forEach(function (minValue) { + values.forEach(function (maxValue) { + + grid1.id = "grid1-" + minValue + "-" + maxValue + grid2.id = "grid2-" + minValue + "-" + maxValue + grid3.id = "grid3-" + minValue + "-" + maxValue + grid4.id = "grid4-" + minValue + "-" + maxValue + + grid1.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + grid2.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + grid3.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + grid4.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + + checkLayout("#" + grid1.id, false); + checkLayout("#" + grid2.id, false); + checkLayout("#" + grid3.id, false); + checkLayout("#" + grid4.id, false); + }); + }); + + done(); + } +</script> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-002.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-002.html new file mode 100644 index 0000000000..c48bedccd5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-002.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks" /> +<style> +.grid { + position: relative; + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + height: 350px; + font-family: Ahem; + line-height: 1; + grid-auto-flow: row; +} +.grid > :nth-child(1) { font-size:20px; } +.grid > :nth-child(2) { font-size:30px; } +.grid > :nth-child(3) { font-size:50px; } +.grid > :nth-child(4) { font-size:60px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraLeftPadding { padding-left: 50px; } +.extraRightPadding { padding-right: 50px; } +</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(() => { runTests(); })"> + +<p>4x1 with orthogonal items.</p> +<div id="grid1" class="grid contentStart itemsBaseline" data-expected-width="98"> + <div class="item verticalLR" data-offset-x="20" data-offset-y="10" data-expected-width="40" data-expected-height="38">É</div> + <div class="item verticalLR" data-offset-x="18" data-offset-y="62" data-expected-width="50" data-expected-height="48">É</div> + <div class="item verticalLR" data-offset-x="14" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div> + <div class="item verticalLR" data-offset-x="12" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div> +</div> +<div id="grid2" class="grid contentStart itemsBaseline" data-expected-width="149"> + <div class="item verticalLR extraRightPadding" data-offset-x="56" data-offset-y="10" data-expected-width="87" data-expected-height="38">É</div> + <div class="item verticalLR extraLeftPadding" data-offset-x="12" data-offset-y="62" data-expected-width="92" data-expected-height="48">É</div> + <div class="item verticalLR" data-offset-x="50" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div> + <div class="item verticalLR" data-offset-x="48" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div> +</div> +<div id="grid3" class="grid contentStart itemsBaseline" data-expected-width="98"> + <div class="item verticalRL" data-offset-x="20" data-offset-y="10" data-expected-width="40" data-expected-height="38">É</div> + <div class="item verticalRL" data-offset-x="18" data-offset-y="62" data-expected-width="50" data-expected-height="48">É</div> + <div class="item verticalRL" data-offset-x="14" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div> + <div class="item verticalRL" data-offset-x="12" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div> +</div> +<div id="grid4" class="grid contentStart itemsBaseline" data-expected-width="149"> + <div class="item verticalRL extraRightPadding" data-offset-x="56" data-offset-y="10" data-expected-width="87" data-expected-height="38">É</div> + <div class="item verticalRL extraLeftPadding" data-offset-x="12" data-offset-y="62" data-expected-width="92" data-expected-height="48">É</div> + <div class="item verticalRL" data-offset-x="50" data-offset-y="124" data-expected-width="70" data-expected-height="68">É</div> + <div class="item verticalRL" data-offset-x="48" data-offset-y="206" data-expected-width="80" data-expected-height="78">É</div> +</div> + +<br clear="all"> + +<script> + "use strict"; + function runTests() { + + let values = [ "auto", "min-content", "max-content" ]; + let minValues = values.concat([ "0px" ]); + + var grid1 = document.getElementById("grid1"); + var grid2 = document.getElementById("grid2"); + var grid3 = document.getElementById("grid3"); + var grid4 = document.getElementById("grid4"); + + minValues.forEach(function (minValue) { + values.forEach(function (maxValue) { + + grid1.id = "grid1-" + minValue + "-" + maxValue + grid2.id = "grid2-" + minValue + "-" + maxValue + grid3.id = "grid3-" + minValue + "-" + maxValue + grid4.id = "grid4-" + minValue + "-" + maxValue + + grid1.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + grid2.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + grid3.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + grid4.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + + checkLayout("#" + grid1.id, false); + checkLayout("#" + grid2.id, false); + checkLayout("#" + grid3.id, false); + checkLayout("#" + grid4.id, false); + }); + }); + + done(); + } +</script> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-003.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-003.html new file mode 100644 index 0000000000..3024534785 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-003.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks"/> +<style> +body { margin: 0; } +.grid { + position: relative; + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + font-family: Ahem; + line-height: 1; + grid-auto-flow: row; +} +.grid > :nth-child(1) { font-size:20px; } +.grid > :nth-child(2) { font-size:30px; } +.grid > :nth-child(3) { font-size:50px; } +.grid > :nth-child(4) { font-size:60px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 50px; } +.extraBottomPadding { padding-bottom: 50px; } +</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(() => { runTests(); })"> + +<p>Vertical LR 4x1 grid with parallel and orthogonal items.</p> +<div id="grid1" class="grid verticalLR contentStart itemsBaseline" data-expected-height="104"> + <div class="item" data-offset-x="12" data-offset-y="40" data-expected-width="40" data-expected-height="38">É</div> + <div class="item horizontalTB" data-offset-x="70" data-offset-y="46" data-expected-width="50" data-expected-height="48">É</div> + <div class="item" data-offset-x="138" data-offset-y="10" data-expected-width="70" data-expected-height="68">É</div> + <div class="item horizontalTB" data-offset-x="226" data-offset-y="22" data-expected-width="80" data-expected-height="78">É</div> +</div> +<div id="grid2" class="grid verticalLR contentStart itemsBaseline" data-expected-height="155"> + <div class="item extraTopPadding" data-offset-x="12" data-offset-y="10" data-expected-width="40" data-expected-height="82">É</div> + <div class="item horizontalTB extraBottomPadding" data-offset-x="70" data-offset-y="60" data-expected-width="50" data-expected-height="91">É</div> + <div class="item" data-offset-x="138" data-offset-y="24" data-expected-width="70" data-expected-height="68">É</div> + <div class="item horizontalTB" data-offset-x="226" data-offset-y="36" data-expected-width="80" data-expected-height="78">É</div> +</div> + +<br clear="all"> + +<script> + "use strict"; + function runTests() { + + let values = [ "auto", "min-content", "max-content" ]; + let minValues = values.concat([ "0px" ]); + + var grid1 = document.getElementById("grid1"); + var grid2 = document.getElementById("grid2"); + + minValues.forEach(function (minValue) { + values.forEach(function (maxValue) { + + grid1.id = "grid1-" + minValue + "-" + maxValue + grid2.id = "grid2-" + minValue + "-" + maxValue + + grid1.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + grid2.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + + checkLayout("#" + grid1.id, false); + checkLayout("#" + grid2.id, false); + }); + }); + + done(); + } +</script> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-004.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-004.html new file mode 100644 index 0000000000..3fb71ab90d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-004.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks"/> +<style> +.grid { + position: relative; + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + font-family: Ahem; + line-height: 1; + grid-auto-flow: row; +} +.grid > :nth-child(1) { font-size:20px; } +.grid > :nth-child(2) { font-size:30px; } +.grid > :nth-child(3) { font-size:50px; } +.grid > :nth-child(4) { font-size:60px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 50px; } +.extraBottomPadding { padding-bottom: 50px; } +</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(() => { runTests(); })"> + +<p>Vertical RL 4x1 grid with parallel and orthogonal items.</p> +<div id="grid1" class="grid verticalRL contentStart itemsBaseline" data-expected-height="104"> + <div class="item" data-offset-x="304" data-offset-y="40" data-expected-width="40" data-expected-height="38">É</div> + <div class="item horizontalTB" data-offset-x="236" data-offset-y="46" data-expected-width="50" data-expected-height="48">É</div> + <div class="item" data-offset-x="148" data-offset-y="10" data-expected-width="70" data-expected-height="68">É</div> + <div class="item horizontalTB" data-offset-x="50" data-offset-y="22" data-expected-width="80" data-expected-height="78">É</div> +</div> +<div id="grid2" class="grid verticalRL contentStart itemsBaseline" data-expected-height="155"> + <div class="item extraTopPadding" data-offset-x="304" data-offset-y="10" data-expected-width="40" data-expected-height="82">É</div> + <div class="item horizontalTB extraBottomPadding" data-offset-x="236" data-offset-y="60" data-expected-width="50" data-expected-height="91">É</div> + <div class="item" data-offset-x="148" data-offset-y="24" data-expected-width="70" data-expected-height="68">É</div> + <div class="item horizontalTB" data-offset-x="50" data-offset-y="36" data-expected-width="80" data-expected-height="78">É</div> +</div> + +<br clear="all"> + +<script> + "use strict"; + function runTests() { + + let values = [ "auto", "min-content", "max-content" ]; + let minValues = values.concat([ "0px" ]); + + var grid1 = document.getElementById("grid1"); + var grid2 = document.getElementById("grid2"); + + minValues.forEach(function (minValue) { + values.forEach(function (maxValue) { + + grid1.id = "grid1-" + minValue + "-" + maxValue + grid2.id = "grid2-" + minValue + "-" + maxValue + + grid1.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + grid2.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + + checkLayout("#" + grid1.id, false); + checkLayout("#" + grid2.id, false); + }); + }); + + done(); + } +</script> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-005.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-005.html new file mode 100644 index 0000000000..19404aa022 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-005.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks"/> +<style> +.grid { + position: relative; + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + font-family: Ahem; + line-height: 1; + grid-auto-flow: row; +} +.grid > :nth-child(1) { font-size:20px; } +.grid > :nth-child(2) { font-size:30px; } +.grid > :nth-child(3) { font-size:50px; } +.grid > :nth-child(4) { font-size:60px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 50px; } +.extraBottomPadding { padding-bottom: 50px; } +</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(() => { runTests(); })"> + +<p>Vertical LR 4x1 grid with orthogonal items.</p> +<div id="grid1" class="grid verticalLR contentStart itemsBaseline" data-expected-height="92"> + <div class="item horizontalTB" data-offset-x="12" data-offset-y="42" data-expected-width="40" data-expected-height="38">É</div> + <div class="item horizontalTB" data-offset-x="70" data-offset-y="34" data-expected-width="50" data-expected-height="48">É</div> + <div class="item horizontalTB" data-offset-x="138" data-offset-y="18" data-expected-width="70" data-expected-height="68">É</div> + <div class="item horizontalTB" data-offset-x="226" data-offset-y="10" data-expected-width="80" data-expected-height="78">É</div> +</div> +<div id="grid2" class="grid verticalLR contentStart itemsBaseline" data-expected-height="141"> + <div class="item horizontalTB extraTopPadding" data-offset-x="12" data-offset-y="10" data-expected-width="40" data-expected-height="82">É</div> + <div class="item horizontalTB extraBottomPadding" data-offset-x="70" data-offset-y="46" data-expected-width="50" data-expected-height="91">É</div> + <div class="item horizontalTB" data-offset-x="138" data-offset-y="30" data-expected-width="70" data-expected-height="68">É</div> + <div class="item horizontalTB" data-offset-x="226" data-offset-y="22" data-expected-width="80" data-expected-height="78">É</div> +</div> + +<br clear="all"> + +<script> + "use strict"; + function runTests() { + + let values = [ "auto", "min-content", "max-content" ]; + let minValues = values.concat([ "0px" ]); + + var grid1 = document.getElementById("grid1"); + var grid2 = document.getElementById("grid2"); + + minValues.forEach(function (minValue) { + values.forEach(function (maxValue) { + + grid1.id = "grid1-" + minValue + "-" + maxValue + grid2.id = "grid2-" + minValue + "-" + maxValue + + grid1.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + grid2.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + + checkLayout("#" + grid1.id, false); + checkLayout("#" + grid2.id, false); + }); + }); + + done(); + } +</script> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-006.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-006.html new file mode 100644 index 0000000000..3e05ed758c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/baseline-alignment-affects-intrinsic-size-006.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: evaluate how the baseline affects the grid intrinsic size</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#alignment"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/alignment.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<meta name="assert" content="The grid intrinsic size is comptuted correctly, considering the effect of baseline alignment in the size of the column tracks"/> +<style> +.grid { + position: relative; + background: grey; + float: left; + margin: 5px; + text-orientation: sideways; + width: 350px; + font-family: Ahem; + line-height: 1; + grid-auto-flow: row; +} +.grid > :nth-child(1) { font-size:20px; } +.grid > :nth-child(2) { font-size:30px; } +.grid > :nth-child(3) { font-size:50px; } +.grid > :nth-child(4) { font-size:60px; } +.item { + border-width: 2px 5px 3px 4px; + border-style: solid; + padding: 6px 3px 7px 8px; + margin: 10px 6px 4px 12px; +} +.extraTopPadding { padding-top: 50px; } +.extraBottomPadding { padding-bottom: 50px; } +</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(() => { runTests(); })"> + +<p>Vertical RL 4x1 grid with orthogonal items.</p> +<div id="grid1" class="grid verticalRL contentStart itemsBaseline" data-expected-height="92"> + <div class="item horizontalTB" data-offset-x="304" data-offset-y="42" data-expected-width="40" data-expected-height="38">É</div> + <div class="item horizontalTB" data-offset-x="236" data-offset-y="34" data-expected-width="50" data-expected-height="48">É</div> + <div class="item horizontalTB" data-offset-x="148" data-offset-y="18" data-expected-width="70" data-expected-height="68">É</div> + <div class="item horizontalTB" data-offset-x="50" data-offset-y="10" data-expected-width="80" data-expected-height="78">É</div> +</div> +<div id="grid2" class="grid verticalRL contentStart itemsBaseline" data-expected-height="141"> + <div class="item horizontalTB extraTopPadding" data-offset-x="304" data-offset-y="10" data-expected-width="40" data-expected-height="82">É</div> + <div class="item horizontalTB extraBottomPadding" data-offset-x="236" data-offset-y="46" data-expected-width="50" data-expected-height="91">É</div> + <div class="item horizontalTB" data-offset-x="148" data-offset-y="30" data-expected-width="70" data-expected-height="68">É</div> + <div class="item horizontalTB" data-offset-x="50" data-offset-y="22" data-expected-width="80" data-expected-height="78">É</div> +</div> + +<br clear="all"> + +<script> + "use strict"; + function runTests() { + + let values = [ "auto", "min-content", "max-content" ]; + let minValues = values.concat([ "0px" ]); + + var grid1 = document.getElementById("grid1"); + var grid2 = document.getElementById("grid2"); + + minValues.forEach(function (minValue) { + values.forEach(function (maxValue) { + + grid1.id = "grid1-" + minValue + "-" + maxValue + grid2.id = "grid2-" + minValue + "-" + maxValue + + grid1.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + grid2.style.gridTemplateColumns = "minmax(" + minValue + ", " + maxValue + ")"; + + checkLayout("#" + grid1.id, false); + checkLayout("#" + grid2.id, false); + }); + }); + + done(); + } +</script> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-and-intrinsic-sizes-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-and-intrinsic-sizes-001.html new file mode 100644 index 0000000000..dd6f602ce7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-and-intrinsic-sizes-001.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<title>CSS Grid: track sizing algo with size restrictions 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/#layout-algorithm"/> +<meta name="assert" content="This test ensures that fr tracks are properly sized whenever grid has intrinsic sizes."/> +<link rel="issue" href="https://crbug.com/423743"/> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/> +<link href="/css/support/height-keyword-classes.css" rel="stylesheet"/> +<link href="/css/support/grid.css" rel="stylesheet"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + +<style> +.container { + width: 100px; + height: 100px; +} + +.grid { + grid-template-columns: 1fr; + grid-template-rows: 1fr; +} + +div { font: 10px/1 Ahem; } +</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="container"> + <div class="grid" data-expected-width="100" data-expected-height="10"> + <div>XXX XXX</div> + </div> +</div> + +<div class="container"> + <div class="grid min-content" data-expected-width="30" data-expected-height="20"> + <div>XXX XXX</div> + </div> +</div> + +<div class="container"> + <div class="grid min-content" data-expected-width="0" data-expected-height="20" style="grid-template-columns:minmax(0, 1fr);"> + <div>XXX XXX</div> + </div> +</div> + +<div class="container"> + <div class="grid max-content" data-expected-width="70" data-expected-height="10"> + <div>XXX XXX</div> + </div> +</div> + +<div class="container"> + <div class="grid fit-content" data-expected-width="70" data-expected-height="10"> + <div>XXX XXX</div> + </div> +</div> + +<div class="min-content"> + <div class="grid" data-expected-width="40" data-expected-height="50"> + <div>XXX XXXX XX X XX XXX</div> + </div> +</div> + +<div class="grid container" data-expected-width="100" data-expected-height="100"> + <div style="display: grid; grid-template-columns: 3fr; grid-template-rows: 2fr;" data-expected-width="100" data-expected-height="100"> + <div>XXX XXXX XX X XX XXX</div> + </div> +</div> + +<div class="grid" style="grid; grid: 1fr 2fr / 2fr 1fr; width: 300px; height: 300px;" data-expected-width="300" data-expected-height="300"> + <div class="firstRowFirstColumn" style="display: grid; grid: 1fr 3fr / 3fr 1fr;" data-expected-width="200" data-expected-height="100"> + <div style="border: 2px solid magenta;" data-expected-width="150" data-expected-height="25">XXXX</div> + <div class="secondRowSecondColumn" style="border: 2px solid cyan;" data-expected-width="50" data-expected-height="75">XXXX XX XX</div> + </div> + <div class="secondRowSecondColumn" style="display: grid; grid: 3fr 4fr / 4fr 3fr;" data-expected-width="100" data-expected-height="200"> + <div style="border: 2px solid lime;" data-expected-width="56" data-expected-height="86">XXX XX X</div> + <div class="secondRowSecondColumn" style="border: 2px solid navy;" data-expected-width="44" data-expected-height="114">XXXX XXX XXXX XXX XXXX</div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-and-intrinsic-sizes-002.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-and-intrinsic-sizes-002.html new file mode 100644 index 0000000000..6b2df4e572 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-and-intrinsic-sizes-002.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>Auto Min Size is Zeroed When Spanning Flexible Tracks</title> +<link rel="author" title="Tab Atkins-Bittner" href="https://xanthir.com/contact/"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#min-size-auto"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="An item spanning >1 track, at least one of which is flexible, must have a zero automatic minimum size (and thus, not grow to accommodate its children)."> + +<style> +.grid { display: grid; grid-template-columns: repeat(12, 1fr); height: 100px; width: 100px; } +.test { grid-column: 1 / span 8; grid-row: 1; background: red; } +.over { grid-column: 1 / span 8; grid-row: 1; background: green; } +.under { grid-column: 9 / span 4; grid-row: 1; background: green; } +.big-child { width: 500px; height: 100px; } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="grid"> + <div class="under"></div> + <div class="test"> + <div class=big-child></div> + </div> + <div class="over"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-columns-min-max-width-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-columns-min-max-width-001.html new file mode 100644 index 0000000000..097468b7c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-columns-min-max-width-001.html @@ -0,0 +1,94 @@ +<!DOCTYPE HTML> +<title>CSS Grid Layout Test: min and max width when computing the flex column</title> +<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks"/> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=660690"/> +<link href="/css/support/grid.css" rel="stylesheet"/> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"> +<meta name="assert" content="This test ensures that minimum and maximum widths are used to compute the flex fraction for grid columns."/> +<style> +.grid { + margin: 3px; + grid: 50px / minmax(10px, 1fr) minmax(10px, 4fr); + grid-column-gap: 33px; + border: 5px dashed; + padding: 2px; +} + +.float { float: left; } + +.item:nth-child(1) { background-color: purple; } +.item:nth-child(2) { background-color: blue; } +</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>This test PASS if all the grids in the same row look the same.</p> + +<div class="grid float" style="max-width: 70px" data-expected-height="64" data-expected-width="84"> + <div class="item" data-expected-height="50" data-expected-width="10"></div> + <div class="item" data-expected-height="50" data-expected-width="27"></div> +</div> +<div class="grid float" style="min-width: 70px; max-width: 60px" data-expected-height="64" data-expected-width="84"> + <div class="item" data-expected-height="50" data-expected-width="10"></div> + <div class="item" data-expected-height="50" data-expected-width="27"></div> +</div> +<div class="grid float" style="width: 70px" data-expected-height="64" data-expected-width="84"> + <div class="item" data-expected-height="50" data-expected-width="10"></div> + <div class="item" data-expected-height="50" data-expected-width="27"></div> +</div> + +<br clear="all"> + +<div class="grid float" style="min-width: 108px" data-expected-height="64" data-expected-width="122"> + <div class="item" data-expected-height="50" data-expected-width="15"></div> + <div class="item" data-expected-height="50" data-expected-width="60"></div> +</div> +<div class="grid float" style="min-width: 108px; max-width: 60px" data-expected-height="64" data-expected-width="122"> + <div class="item" data-expected-height="50" data-expected-width="15"></div> + <div class="item" data-expected-height="50" data-expected-width="60"></div> +</div> +<div class="grid float" style="width: 108px" data-expected-height="64" data-expected-width="122"> + <div class="item" data-expected-height="50" data-expected-width="15"></div> + <div class="item" data-expected-height="50" data-expected-width="60"></div> +</div> + +<br clear="all"> + +<div class="grid float min-width-max-content" data-expected-height="64" data-expected-width="97"> + <div class="item" data-expected-height="50" data-expected-width="10"></div> + <div class="item" data-expected-height="50" data-expected-width="40"></div> +</div> +<div class="grid float min-width-max-content max-width-min-content" data-expected-height="64" data-expected-width="97"> + <div class="item" data-expected-height="50" data-expected-width="10"></div> + <div class="item" data-expected-height="50" data-expected-width="40"></div> +</div> +<div class="grid float max-content" data-expected-height="64" data-expected-width="97"> + <div class="item" data-expected-height="50" data-expected-width="10"></div> + <div class="item" data-expected-height="50" data-expected-width="40"></div> +</div> + +<br clear="all"> + +<div class="float min-content"> + <div class="grid min-width-max-content" data-expected-height="64" data-expected-width="97"> + <div class="item" data-expected-height="50" data-expected-width="10"></div> + <div class="item" data-expected-height="50" data-expected-width="40"></div> + </div> +</div> +<div class="float max-content"> + <div class="grid min-width-max-content max-width-min-content" data-expected-height="64" data-expected-width="97"> + <div class="item" data-expected-height="50" data-expected-width="10"></div> + <div class="item" data-expected-height="50" data-expected-width="40"></div> + </div> +</div> +<div class="float fit-content"> + <div class="grid max-content" data-expected-height="64" data-expected-width="97"> + <div class="item" data-expected-height="50" data-expected-width="10"></div> + <div class="item" data-expected-height="50" data-expected-width="40"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-rows-indefinite-height.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-rows-indefinite-height.html new file mode 100644 index 0000000000..6625a321d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-rows-indefinite-height.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1149627"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4309" /> +<style> +.grid { + display: inline-grid; + position: relative; + grid-template-columns: minmax(0, .5fr); + grid-template-rows: minmax(0, .5fr); +} +.item { + width: 200px; + height: 200px; + background: linear-gradient(green, green) no-repeat; + background-size: 100px 100px; +} +.abspos { + grid-area: 1 / 1 / 2 / 2; + position: absolute; + width: 200%; + height: 200%; + background: red; + z-index: -1; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div class="item"></div> + <div class="abspos"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-rows-min-max-height-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-rows-min-max-height-001.html new file mode 100644 index 0000000000..0789e40530 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-sizing-rows-min-max-height-001.html @@ -0,0 +1,96 @@ +<!DOCTYPE HTML> +<title>CSS Grid Layout Test: min and max height when computing the flex row</title> +<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks"/> +<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=660690"/> +<link href="/css/support/grid.css" rel="stylesheet"/> +<link href="/css/support/height-keyword-classes.css" rel="stylesheet"> +<meta name="assert" content="This test ensures that minimum and maximum heights are used to compute the flex fraction for grid rows."/> +<style> +.grid { + margin: 3px; + grid: minmax(10px, 1fr) minmax(10px, 4fr) / 50px; + grid-row-gap: 33px; + border: 5px dashed; + padding: 2px; +} + +.float { float: left; } + +.item:nth-child(1) { background-color: purple; } +.item:nth-child(2) { background-color: blue; } +</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 PASS if all the grids in the same row look the same.</p> + +<div class="grid float" style="max-height: 70px" data-expected-width="64" data-expected-height="84"> + <div class="item" data-expected-width="50" data-expected-height="10"></div> + <div class="item" data-expected-width="50" data-expected-height="27"></div> +</div> +<div class="grid float" style="min-height: 70px; max-height: 60px" data-expected-width="64" data-expected-height="84"> + <div class="item" data-expected-width="50" data-expected-height="10"></div> + <div class="item" data-expected-width="50" data-expected-height="27"></div> +</div> +<div class="grid float" style="height: 70px" data-expected-width="64" data-expected-height="84"> + <div class="item" data-expected-width="50" data-expected-height="10"></div> + <div class="item" data-expected-width="50" data-expected-height="27"></div> +</div> + +<br clear="all"> + +<div class="grid float" style="min-height: 108px" data-expected-width="64" data-expected-height="122"> + <div class="item" data-expected-width="50" data-expected-height="15"></div> + <div class="item" data-expected-width="50" data-expected-height="60"></div> +</div> +<div class="grid float" style="min-height: 108px; max-height: 60px" data-expected-width="64" data-expected-height="122"> + <div class="item" data-expected-width="50" data-expected-height="15"></div> + <div class="item" data-expected-width="50" data-expected-height="60"></div> +</div> +<div class="grid float" style="height: 108px" data-expected-width="64" data-expected-height="122"> + <div class="item" data-expected-width="50" data-expected-height="15"></div> + <div class="item" data-expected-width="50" data-expected-height="60"></div> +</div> + +<br clear="all"> + +<div class="grid float min-height-max-content" data-expected-width="64" data-expected-height="97"> + <div class="item" data-expected-width="50" data-expected-height="10"></div> + <div class="item" data-expected-width="50" data-expected-height="40"></div> +</div> +<div class="grid float min-height-max-content max-height-min-content" data-expected-width="64" data-expected-height="97"> + <div class="item" data-expected-width="50" data-expected-height="10"></div> + <div class="item" data-expected-width="50" data-expected-height="40"></div> +</div> +<div class="grid float max-content" data-expected-width="64" data-expected-height="97"> + <div class="item" data-expected-width="50" data-expected-height="10"></div> + <div class="item" data-expected-width="50" data-expected-height="40"></div> +</div> + +<br clear="all"> + +<div class="float min-content"> + <div class="grid min-height-max-content" data-expected-width="64" data-expected-height="97"> + <div class="item" data-expected-width="50" data-expected-height="10"></div> + <div class="item" data-expected-width="50" data-expected-height="40"></div> + </div> +</div> +<div class="float max-content"> + <div class="grid min-height-max-content max-height-min-content" data-expected-width="64" data-expected-height="97"> + <div class="item" data-expected-width="50" data-expected-height="10"></div> + <div class="item" data-expected-width="50" data-expected-height="40"></div> + </div> +</div> +<div class="float fit-content"> + <div class="grid max-content" data-expected-width="64" data-expected-height="97"> + <div class="item" data-expected-width="50" data-expected-height="10"></div> + <div class="item" data-expected-width="50" data-expected-height="40"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-tracks-with-fractional-size.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-tracks-with-fractional-size.html new file mode 100644 index 0000000000..994149faa6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/flex-tracks-with-fractional-size.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html lang=en class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Expand flexible tracks with a fractional size</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-flex-tracks" title="12.7. Expand Flexible Tracks"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1249750"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that flexible tracks correctly distribute fractional shares of a grid's available size"> +<style> +.grid { + width: 100px; + height: 50px; + display: grid; + background: red; +} +.grid > div { + background: green; +} +#cols { + grid-template-rows: auto 0px; + grid-template-columns: repeat(973, 1fr); +} +#rows { + grid-auto-flow: column; + grid-template-columns: auto 0px; + grid-template-rows: repeat(973, 1fr); +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="cols" class="grid"> + <div style="grid-column: 1 / -1"></div> +</div> +<div id="rows" class="grid"> + <div style="grid-row: 1 / -1"></div> +</div> +<script> +var cols_grid = document.getElementById("cols"); +var rows_grid = document.getElementById("rows"); +for (var i = 0; i < 973; ++i) { + cols_grid.appendChild(document.createElement("div")); + rows_grid.appendChild(document.createElement("div")); +} +document.documentElement.classList.remove('reftest-wait'); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-001.html new file mode 100644 index 0000000000..e0665d56a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-content"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item's inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')"> +<style> + body { overflow: hidden; } + .flexbox { + display: flex; + flex-flow: column nowrap; + align-content: flex-start; + width: 100px; + height: 100px; + background: red; + } + .grid { + display: grid; + align-items: baseline; + } + .gridItem { + background: green; + height: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flexbox"> + <div class="grid"> + <div class="gridItem"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-002.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-002.html new file mode 100644 index 0000000000..4ddafecb84 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-002.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-content"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The align-content: 'stretch' prevents the multi-line column flexbox to shrink-to-fit (default behavior), hence the grid container will be stretched, honoring its align-self: 'normal (behaves as 'stretch'), as well as its grid item, honoring its justify-self: 'normal' (behaves as 'stretch') "> +<style> + body { overflow: hidden; } + .flexbox { + display: flex; + flex-flow: column wrap; + align-content: stretch; + width: 100px; + height: 100px; + background: red; + } + .grid { + display: grid; + align-items: baseline; + } + .gridItem { + background: green; + height: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flexbox"> + <div class="grid"> + <div class="gridItem"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-003.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-003.html new file mode 100644 index 0000000000..73d204490a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-003.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-content"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The vertical grid item's inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')"> +<style> + body { overflow: hidden; } + .flexbox { + display: flex; + flex-flow: column nowrap; + align-content: flex-start; + width: 100px; + height: 100px; + background: red; + } + .grid { + display: grid; + align-items: baseline; + } + .gridItem { + background: green; + height: 100px; + writing-mode: vertical-lr; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flexbox"> + <div class="grid"> + <div class="gridItem"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-004.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-004.html new file mode 100644 index 0000000000..c3f9d9c0d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-004.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-content"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The align-content: 'stretch' prevents the multi-line column flexbox to shrink-to-fit (default behavior), hence the grid container will be stretched, honoring its align-self: 'normal (behaves as 'stretch'), as well as its vertical grid item, honoring its justify-self: 'normal' (behaves as 'stretch') "> +<style> + body { overflow: hidden; } + .flexbox { + display: flex; + flex-flow: column wrap; + align-content: stretch; + width: 100px; + height: 100px; + background: red; + } + .grid { + display: grid; + } + .gridItem { + background: green; + height: 100px; + writing-mode: vertical-lr; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flexbox"> + <div class="grid"> + <div class="gridItem"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-005.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-005.html new file mode 100644 index 0000000000..4443314950 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-005.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-content"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item's inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')"> +<style> + body { overflow: hidden; } + .flexbox { + display: flex; + flex-flow: column nowrap; + align-content: flex-start; + width: 100px; + height: 100px; + background: red; + } + .grid { + display: grid; + align-items: start; + } + .gridItem { + background: green; + height: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flexbox"> + <div class="grid"> + <div class="gridItem"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-006.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-006.html new file mode 100644 index 0000000000..7be46cd3b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-006.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-justify-content"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The align-content: 'stretch' prevents the multi-line column flexbox to shrink-to-fit (default behavior), hence the grid container will be stretched, honoring its align-self: 'normal (behaves as 'stretch'), as well as grid item, honoring its justify-self: 'normal' (behaves as 'stretch') "> +<style> + body { overflow: hidden; } + .flexbox { + display: flex; + flex-flow: column wrap; + justify-content: stretch; + width: 100px; + height: 100px; + background: red; + } + .grid { + display: grid; + align-items: start; + } + .gridItem { + background: green; + height: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flexbox"> + <div class="grid"> + <div class="gridItem"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-007.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-007.html new file mode 100644 index 0000000000..ab0e591b8f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-007.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-content"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item's relative block size will be resolved againts the grid's row size, while its inline-size should be stretched as well, honoring its justify-self: 'normal' (behaves as 'stretch')"> +<style> + body { overflow: hidden; } + .flexbox { + display: flex; + flex-flow: column nowrap; + align-content: flex-start; + width: 100px; + height: 100px; + background: red; + } + .grid { + display: grid; + align-items: baseline; + grid-template-rows: 100px; + } + .gridItem { + background: green; + height: 100%; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flexbox"> + <div class="grid"> + <div class="gridItem"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-008.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-008.html new file mode 100644 index 0000000000..183a607f53 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-as-flex-item-should-not-shrink-to-fit-008.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Evaluate the behavior of a grid container as Flexbox item</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-lines"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-wrap"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-content"> +<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#propdef-align-self"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-flex"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-grid"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="A single-line column flexbox shouldn't shrink-to-fit since its flex item is stretching in the main-axis, honoring the 'align-self: normal (behaves as 'stretch')'. The grid item has a relative inline-size, which should be resolved against the stretched grid's inline-size."> +<style> + body { overflow: hidden; } + .flexbox { + display: flex; + flex-flow: column nowrap; + width: 100px; + height: 100px; + background: red; + } + .grid { + display: grid; + justify-self: start; + align-items: baseline; + } + .gridItem { + background: green; + width: 100%; + height: 100px; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="flexbox"> + <div class="grid"> + <div class="gridItem"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-columns-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-columns-001.html new file mode 100644 index 0000000000..0bac13960b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-columns-001.html @@ -0,0 +1,294 @@ +<!DOCTYPE html> +<title>CSS Grid: automatic minimum in 'auto' columns</title> +<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=464287"> +<meta name="assert" content="Check that grid item's 'min-width' is honored when sizing 'auto' columns."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/fonts/ahem.css"> + +<style> +.grid { font: 10px/1 Ahem; } + +.minWidth10 { min-width: 10px; } +.minWidth20 { min-width: 20px; } +.minWidth30 { min-width: 30px; } +.minWidth40 { min-width: 40px; } +.minWidth50 { min-width: 50px; } +.minWidth60 { min-width: 60px; } +.minWidth70 { min-width: 70px; } +.minWidth90 { min-width: 90px; } +.minWidthMaxContent { min-width: max-content; } + +.width50 { width: 50px; } +.width60 { width: 60px; } +.width200 { width: 200px; } + +.border5 { border: 5px solid #abc; } +.padding8 { padding: 0px 8px 0px; } + +/* All these 4 cases are equivalent. We use them interchangeably. */ +.gridAuto { grid-template-columns: auto; } +.gridMinMaxAutoAuto { grid-template-columns: minmax(auto, auto); } +.gridMinMaxAutoMaxContent { grid-template-columns: minmax(auto, max-content); } +.gridMinMaxMinContentAuto { grid-template-columns: minmax(min-content, auto); } + +/* All these 3 cases are equivalent. We use them interchangeably. */ +.gridAutoAndAuto { grid-template-columns: auto auto; } +.gridAutoAndMinMaxAutoAuto { grid-template-columns: auto minmax(auto, auto); } +.gridMinMaxAutoMaxContentAndAuto { grid-template-columns: minmax(auto, max-content) auto; } +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAuto"> + <div class="firstRowFirstColumn minWidth40">XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoItemSmallerThanMinSize"> + <div class="firstRowFirstColumn minWidth40">XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMinMaxAutoAuto" id="gridMinMaxAutoAuto"> + <div class="firstRowFirstColumn minWidth40">XX XX XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMinMaxAutoMaxContent" id="gridMinMaxAutoMaxContent"> + <div class="firstRowFirstColumn minWidth40">XXX XX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMinMaxMinContentAuto" id="gridMinMaxMinContentAuto"> + <div class="firstRowFirstColumn minWidth40">X X X X X X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoMultipleItems"> + <div class="firstRowFirstColumn minWidth30">XX</div> + <div class="secondRowFirstColumn minWidth20"">XXXX XXXX</div> + <div class="thirdRowAutoColumn minWidth10">XX XXXXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMinMaxAutoAuto" id="gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth"> + <div class="firstRowFirstColumn minWidth30">XX</div> + <div class="secondRowFirstColumn">XXXXXX</div> + <div class="thirdRowAutoColumn minWidth20">XXXX XXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMinMaxAutoMaxContent" id="gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth"> + <div class="firstRowFirstColumn minWidth30">XX</div> + <div class="secondRowFirstColumn">XX XXXXXXXX</div> + <div class="thirdRowAutoColumn minWidth20">XXXX XXXX</div> + </div> +</div> + + +<div class="constrainedContainer"> + <div class="grid gridAutoAndAuto" id="gridAutoAndAutoFixedWidthChildren"> + <div class="firstRowFirstColumn width200 minWidth50"></div> + <div class="firstRowSecondColumn width50"></div> + </div> +</div> + + +<div class="constrainedContainer"> + <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig"> + <div class="firstRowFirstColumn">XX XX</div> + <div class="secondRowBothColumn minWidth50">XXXXXX X XXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningMultipleNonSpanning"> + <div class="secondRowBothColumn minWidth60">XX XX XX</div> + <div class="firstRowSecondColumn">X X</div> + <div class="firstRowSecondColumn">XXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning"> + <div class="firstRowSecondColumn">X XXX XX</div> + <div class="secondRowBothColumn minWidth70">XXX XXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoMultipleSpanning"> + <div class="secondRowBothColumn minWidth70">XX XX XX</div> + <div class="firstRowBothColumn">XXXXX X XXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning"> + <div class="firstRowSecondColumn minWidth60">X XXX XX</div> + <div class="secondRowBothColumn minWidth90">XXXXX XXXXX</div> + <div class="firstRowFirstColumn">XX XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning"> + <div class="secondRowBothColumn">XX XX XX XX</div> + <div class="firstRowFirstColumn minWidth40">XXX</div> + <div class="firstRowBothColumn minWidth90">X XX XXX</div> + <div class="firstRowSecondColumn">X XX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoWithFixedWidthChild"> + <div class="firstRowFirstColumn width60">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoWithFixedWidthChildAndMinWidth"> + <div class="firstRowFirstColumn width60 minWidth40">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoWithFixedWidthChildAndHigherMinWidth"> + <div class="firstRowFirstColumn width60 minWidth90">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidth"> + <div class="firstRowBothColumn width50">XX XXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidthAndMinWidth"> + <div class="firstRowBothColumn width60 minWidth50">XX XXX XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth"> + <div class="firstRowBothColumn width60 minWidth70">XX XXX XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoFixedMinWidthWithBorder"> + <div class="firstRowFirstColumn minWidth40 border5">XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoFixedMinWidthWithPadding"> + <div class="firstRowFirstColumn minWidth40 padding8">XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoFixedMinWidthWithBorderAndPadding"> + <div class="firstRowFirstColumn minWidth40 border5 padding8">XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoAutoMinWidthWithBorder"> + <div class="firstRowFirstColumn border5">XX XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoAutoMinWidthWithPadding"> + <div class="firstRowFirstColumn padding8">XX XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoAutoMinWidthWithBorderAndPadding"> + <div class="firstRowFirstColumn border5 padding8">XX XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithBorder"> + <div class="firstRowFirstColumn minWidthMaxContent border5">X XXXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithPadding"> + <div class="firstRowFirstColumn minWidthMaxContent padding8">X XXXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithBorderAndPadding"> + <div class="firstRowFirstColumn border5 padding8 minWidthMaxContent">X XXXX X</div> + </div> +</div> + +<script> +function testGridColumnsValues(id, computedColumnValue) +{ + assert_equals(window.getComputedStyle(document.getElementById(id)) + .getPropertyValue('grid-template-columns'), computedColumnValue); +} + +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + test(() => { + testGridColumnsValues('gridAuto', '40px'); + testGridColumnsValues('gridAutoItemSmallerThanMinSize', '40px'); + testGridColumnsValues('gridMinMaxAutoAuto', '40px'); + testGridColumnsValues('gridMinMaxAutoMaxContent', '40px'); + testGridColumnsValues('gridMinMaxMinContentAuto', '40px'); + testGridColumnsValues('gridAutoMultipleItems', '30px'); + testGridColumnsValues('gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth', '60px'); + testGridColumnsValues('gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth', '80px'); + testGridColumnsValues('gridAutoAndAutoFixedWidthChildren', '200px 50px'); + }, 'Check that min-width is honored when sizing auto columns.'); + test(() => { + testGridColumnsValues('gridAutoAndAutoOneSpanningOneNonSpannig', '35px 15px'); + testGridColumnsValues('gridAutoAndAutoOneSpanningMultipleNonSpanning', '20px 40px'); + testGridColumnsValues('gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning', '20px 50px'); + testGridColumnsValues('gridAutoAndMinMaxAutoAutoMultipleSpanning', '35px 35px'); + testGridColumnsValues('gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning', '25px 65px'); + testGridColumnsValues('gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning', '40px 50px'); + }, 'Check that min-width is honored when sizing auto columns and spanning grid items.'); + test(() => { + testGridColumnsValues('gridAutoWithFixedWidthChild', '60px'); + testGridColumnsValues('gridAutoWithFixedWidthChildAndMinWidth', '60px'); + testGridColumnsValues('gridAutoWithFixedWidthChildAndHigherMinWidth', '90px'); + testGridColumnsValues('gridAutoAndAutoOneSpanningFixedWidth', '25px 25px'); + testGridColumnsValues('gridAutoAndAutoOneSpanningFixedWidthAndMinWidth', '30px 30px'); + testGridColumnsValues('gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth', '35px 35px'); + }, 'Check the interactions between width and min-width and auto tracks.'); + test(() => { + testGridColumnsValues('gridAutoFixedMinWidthWithBorder', '50px'); + testGridColumnsValues('gridAutoFixedMinWidthWithPadding', '56px'); + testGridColumnsValues('gridAutoFixedMinWidthWithBorderAndPadding', '66px'); + testGridColumnsValues('gridAutoAutoMinWidthWithBorder', '40px'); + testGridColumnsValues('gridAutoAutoMinWidthWithPadding', '46px'); + testGridColumnsValues('gridAutoAutoMinWidthWithBorderAndPadding', '56px'); + testGridColumnsValues('gridAutoMaxContentMinWidthWithBorder', '90px'); + testGridColumnsValues('gridAutoMaxContentMinWidthWithPadding', '96px'); + testGridColumnsValues('gridAutoMaxContentMinWidthWithBorderAndPadding', '106px'); + }, 'Check that borders and paddings are considering when computing min sizes.'); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html new file mode 100644 index 0000000000..77e9c22294 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html @@ -0,0 +1,278 @@ +<!DOCTYPE html> +<title>CSS Grid: automatic minimum in 'auto' rows</title> +<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=464287"> +<meta name="assert" content="Check that grid item's 'min-width' is honored when sizing 'auto' rows."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="/fonts/ahem.css"> + +<style> +.grid { font: 10px/1 Ahem; } + +.minHeight10 { min-height: 10px; } +.minHeight20 { min-height: 20px; } +.minHeight30 { min-height: 30px; } +.minHeight40 { min-height: 40px; } +.minHeight50 { min-height: 50px; } +.minHeight60 { min-height: 60px; } +.minHeight70 { min-height: 70px; } +.minHeight90 { min-height: 90px; } +.minHeightMaxContent { min-height: max-content; } + +.height30 { height: 30px; } +.height50 { height: 50px; } +.height60 { height: 60px; } +.height200 { height: 200px; } + +.border5 { border: 5px solid #abc; } +.padding8 { padding: 8px 0px; } + +/* All these 4 cases are equivalent. We use them interchangeably. */ +.gridAuto { grid-template-rows: auto; } +.gridMinMaxAutoAuto { grid-template-rows: minmax(auto, auto); } +.gridMinMaxAutoMaxContent { grid-template-rows: minmax(auto, max-content); } +.gridMinMaxMinContentAuto { grid-template-rows: minmax(min-content, auto); } + +/* All these 3 cases are equivalent. We use them interchangeably. */ +.gridAutoAndAuto { grid-template-rows: auto auto; } +.gridAutoAndMinMaxAutoAuto { grid-template-rows: auto minmax(auto, auto); } +.gridMinMaxAutoMaxContentAndAuto { grid-template-rows: minmax(auto, max-content) auto; } + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div class="grid gridAuto constrainedContainer" id="gridAuto"> + <div class="firstRowFirstColumn minHeight40">XX<br>XXX<br>XX<br>XXX<br>XXXX</div> +</div> + +<div class="grid gridAuto constrainedContainer" id="gridAutoItemSmallerThanMinSize"> + <div class="firstRowFirstColumn minHeight40">XX</div> +</div> + +<div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAuto"> + <div class="firstRowFirstColumn minHeight40">XX<br>XX</div> +</div> + +<div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContent"> + <div class="firstRowFirstColumn minHeight20 height30"></div> +</div> + +<div class="grid gridMinMaxMinContentAuto constrainedContainer" id="gridMinMaxMinContentAuto"> + <div class="firstRowFirstColumn minHeight60">X</div> +</div> + +<div class="grid gridAuto constrainedContainer" id="gridAutoMultipleItems"> + <div class="firstRowFirstColumn minHeight60">X<br>X</div> + <div class="firstRowSecondColumn minHeight20"">XXX<br>X<br>XX<br>XX</div> + <div class="firstRowAutoColumn minConstrainedContainer height50"></div> +</div> + +<div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight"> + <div class="firstRowFirstColumn height30">X<br>X</div> + <div class="firstRowSecondColumn minHeight50"></div> + <div class="firstRowAutoColumn minHeight20">XXXX<br>X<br>XX<br>XXX</div> +</div> + +<div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight"> + <div class="firstRowFirstColumn minHeight30">X<br>X</div> + <div class="firstRowSecondColumn height60">XX</div> + <div class="firstRowAutoColumn minHeight20">XXX<br>XX<br>XXX<br>XX</div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndAuto" id="gridAutoAndAutoFixedHeightChildren"> + <div class="firstRowFirstColumn height200"></div> + <div class="secondRowFirstColumn height50"></div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig"> + <div class="firstRowFirstColumn">XX XX</div> + <div class="bothRowFirstColumn minHeight50">XXXXXX X XXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningMultipleNonSpanning"> + <div class="bothRowSecondColumn minHeight60">XX XX XX</div> + <div class="firstRowFirstColumn">X X X X</div> + <div class="firstRowFirstColumn">XX XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning"> + <div class="secondRowFirstColumn">X XXX XX</div> + <div class="bothRowSecondColumn minHeight70">XXX XXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoMultipleSpanning"> + <div class="bothRowSecondColumn minHeight70">XX XX XX</div> + <div class="bothRowFirstColumn">XXXXX X XXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMinMaxAutoMaxContentAndAuto" + id="gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning"> + <div class="secondRowFirstColumn minHeight60">X XXX XX</div> + <div class="bothRowSecondColumn minHeight90">XXXXX XXXXX</div> + <div class="firstRowFirstColumn">XX XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridMinMaxAutoMaxContentAndAuto" + id="gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning"> + <div class="bothRowSecondColumn">XX XX XX XX</div> + <div class="firstRowFirstColumn minHeight40">XXX</div> + <div class="bothRowFirstColumn minHeight90">X XX XXX</div> + <div class="secondRowFirstColumn">X XX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoWithFixedHeightChild"> + <div class="firstRowFirstColumn height60">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto height30" id="gridAutoWithFixedHeightChildAndMinHeight"> + <div class="firstRowFirstColumn height60 minHeight40">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoWithFixedHeightChildAndHigherMinHeight"> + <div class="firstRowFirstColumn height60 minHeight90">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeight"> + <div class="bothRowFirstColumn height50">XX XXX XX XXX XX XXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndAuto height30" id="gridAutoAndAutoOneSpanningFixedHeightAndMinHeight"> + <div class="bothRowFirstColumn height60 minHeight50">XX XXX XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight"> + <div class="bothRowFirstColumn height60 minHeight70">XX XXX XX X XX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorder"> + <div class="firstRowFirstColumn minHeight40 border5">XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoFixedMinHeightWithPadding"> + <div class="firstRowFirstColumn minHeight40 padding8">XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorderAndPadding"> + <div class="firstRowFirstColumn minHeight40 border5 padding8">XXXXXX</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorder"> + <div class="firstRowFirstColumn border5">XX<br>XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoAutoMinHeightWithPadding"> + <div class="firstRowFirstColumn padding8">XX<br>XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorderAndPadding"> + <div class="firstRowFirstColumn border5 padding8">XX<br>XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorder"> + <div class="firstRowFirstColumn minHeightMaxContent border5">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithPadding"> + <div class="firstRowFirstColumn minHeightMaxContent padding8">XXX X</div> + </div> +</div> + +<div class="constrainedContainer"> + <div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorderAndPadding"> + <div class="firstRowFirstColumn border5 padding8 minHeightMaxContent">XXX X</div> + </div> +</div> + +<script> +function testGridRowsValues(id, computedRowValue) +{ + assert_equals(window.getComputedStyle(document.getElementById(id)) + .getPropertyValue('grid-template-rows')", computedRowValue); +} + +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + test(() => { + testGridRowsValues('gridAuto', '40px'); + testGridRowsValues('gridAutoItemSmallerThanMinSize', '40px'); + testGridRowsValues('gridMinMaxAutoAuto', '40px'); + testGridRowsValues('gridMinMaxAutoMaxContent', '30px'); + testGridRowsValues('gridMinMaxMinContentAuto', '60px'); + testGridRowsValues('gridAutoMultipleItems', '60px'); + testGridRowsValues('gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight', '50px'); + testGridRowsValues('gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight', '60px'); + testGridRowsValues('gridAutoAndAutoFixedHeightChildren', '200px 50px'); + }, 'Check that min-height is honored when sizing auto rows.'); + test(() => { + testGridRowsValues('gridAutoAndAutoOneSpanningOneNonSpannig', '10px 40px'); + testGridRowsValues('gridAutoAndAutoOneSpanningMultipleNonSpanning', '40px 20px'); + testGridRowsValues('gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning', '40px 30px'); + testGridRowsValues('gridAutoAndMinMaxAutoAutoMultipleSpanning', '35px 35px'); + testGridRowsValues('gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning', '25px 65px'); + testGridRowsValues('gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning', '50px 40px'); + }, 'Check that min-height is honored when sizing auto rows and spanning grid items.'); + test(() => { + testGridRowsValues('gridAutoWithFixedHeightChild', '60px'); + testGridRowsValues('gridAutoWithFixedHeightChildAndMinHeight', '60px'); + testGridRowsValues('gridAutoWithFixedHeightChildAndHigherMinHeight', '90px'); + testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeight', '25px 25px'); + testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeightAndMinHeight', '30px 30px'); + testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight', '35px 35px'); + }, 'Check the interactions between height and min-height and auto tracks.'); + test(() => { + testGridRowsValues('gridAutoFixedMinHeightWithBorder', '50px'); + testGridRowsValues('gridAutoFixedMinHeightWithPadding', '56px'); + testGridRowsValues('gridAutoFixedMinHeightWithBorderAndPadding', '66px'); + testGridRowsValues('gridAutoAutoMinHeightWithBorder', '40px'); + testGridRowsValues('gridAutoAutoMinHeightWithPadding', '46px'); + testGridRowsValues('gridAutoAutoMinHeightWithBorderAndPadding', '56px'); + testGridRowsValues('gridAutoMaxContentMinHeightWithBorder', '30px'); + testGridRowsValues('gridAutoMaxContentMinHeightWithPadding', '36px'); + testGridRowsValues('gridAutoMaxContentMinHeightWithBorderAndPadding', '46px'); + }, 'Check that borders and paddings are considering when computing min sizes.'); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-container-percentage-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-container-percentage-001.html new file mode 100644 index 0000000000..511e0cd99e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-container-percentage-001.html @@ -0,0 +1,262 @@ +<!DOCTYPE html> +<title>CSS Grid: indefinite grid container and percentage columns.</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-grid-template-columns-length-percentage"/> +<meta name="assert" content="Checks that percentage columns are only indefinite during intrinsic size computation. Aftewards, they are properly resolved against the grid container intrinsic sizes."/> +<link rel="issue" href="https://crbug.com/616716"/> +<link rel="stylesheet" href="/css/support/grid.css"/> +<link rel="stylesheet" href="/css/support/width-keyword-classes.css"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> +<style> +.wrapper { + position: relative; + clear: both; +} + +.grid { + font: 10px/1 Ahem; +} + +.float { + float: left; +} + +.abspos { + position: absolute; +} + +.fixedSize { + width: 200px; + height: 200px; +} + +.oneColumn100 { + grid-template-columns: 100%; +} + +.oneColumn50 { + grid-template-columns: 50%; +} + +.twoColumns { + grid-template-columns: 50% 100px; +} +</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="wrapper"> + <div class="grid float oneColumn100" data-expected-width="40" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid abspos oneColumn100" data-expected-width="40" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid max-content oneColumn100" data-expected-width="40" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid fit-content oneColumn100" data-expected-width="40" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid min-content oneColumn100" data-expected-width="20" data-expected-height="20"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid float oneColumn50" data-expected-width="40" data-expected-height="20"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid abspos oneColumn50" data-expected-width="40" data-expected-height="20"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid max-content oneColumn50" data-expected-width="40" data-expected-height="20"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid fit-content oneColumn50" data-expected-width="40" data-expected-height="20"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="20"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid min-content oneColumn50" data-expected-width="20" data-expected-height="20"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="20"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid float twoColumns" data-expected-width="140" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10"> + XX X + </div> + <div class="firstRowSecondColumn" + data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10"> + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid abspos twoColumns" data-expected-width="140" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10"> + XX X + </div> + <div class="firstRowSecondColumn" + data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10"> + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid max-content twoColumns" data-expected-width="140" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10"> + XX X + </div> + <div class="firstRowSecondColumn" + data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10"> + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid fit-content twoColumns" data-expected-width="140" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="10"> + XX X + </div> + <div class="firstRowSecondColumn" + data-offset-x="70" data-offset-y="0" data-expected-width="100" data-expected-height="10"> + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid min-content twoColumns" data-expected-width="120" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10"> + XX X + </div> + <div class="firstRowSecondColumn" + data-offset-x="60" data-offset-y="0" data-expected-width="100" data-expected-height="10"> + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid float twoColumns" data-expected-width="100" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10"> + </div> + <div class="firstRowSecondColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid abspos twoColumns" data-expected-width="100" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10"> + </div> + <div class="firstRowSecondColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid max-content twoColumns" data-expected-width="100" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10"> + </div> + <div class="firstRowSecondColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid min-content twoColumns" data-expected-width="100" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10"> + </div> + <div class="firstRowSecondColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid fit-content twoColumns" data-expected-width="100" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10"> + </div> + <div class="firstRowSecondColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="10"> + XX X + </div> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-container-percentage-002.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-container-percentage-002.html new file mode 100644 index 0000000000..34a52937a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-container-percentage-002.html @@ -0,0 +1,305 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid: indefinite grid container and percentage rows.</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="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-length-percentage"/> +<meta name="assert" content="This test checks that percentage rows behave as 'auto' if the height of the grid container is indefinite to compute the grid container intrinsic height, but are afterwards resolved against that size."/> +<link rel="issue" href="https://crbug.com/616716"/> +<link rel="stylesheet" href="/css/support/grid.css"/> +<link rel="stylesheet" href="/css/support/height-keyword-classes.css"/> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> +<style> +.wrapper { + position: relative; + clear: both; +} + +.grid { + font: 10px/1 Ahem; + width: fit-content; +} + +.abspos { + position: absolute; +} + +.fixedSize { + width: 200px; + height: 200px; +} + +.oneRow100 { + grid-template-rows: 100%; +} + +.oneRow50 { + grid-template-rows: 50%; +} + +.twoRows { + grid-template-rows: 100px 50%; +} +</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="wrapper"> + <div class="grid oneRow100" data-expected-width="40" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid fixedSize oneRow100" data-expected-width="200" data-expected-height="200"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid abspos oneRow100" data-expected-width="40" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid max-content oneRow100" data-expected-width="40" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid fit-content oneRow100" data-expected-width="40" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid min-content oneRow100" data-expected-width="40" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid oneRow50" data-expected-width="40" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid fixedSize oneRow50" data-expected-width="200" data-expected-height="200"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid abspos oneRow50" data-expected-width="40" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid max-content oneRow50" data-expected-width="40" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid fit-content oneRow50" data-expected-width="40" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid min-content oneRow50" data-expected-width="40" data-expected-height="10"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid twoRows" data-expected-width="40" data-expected-height="110"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> + </div> + <div class="secondRowFirstColumn" + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid fixedSize twoRows" data-expected-width="200" data-expected-height="200"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"> + </div> + <div class="secondRowFirstColumn" + data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid abspos twoRows" data-expected-width="40" data-expected-height="110"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> + </div> + <div class="secondRowFirstColumn" + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid max-content twoRows" data-expected-width="40" data-expected-height="110"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> + </div> + <div class="secondRowFirstColumn" + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid fit-content twoRows" data-expected-width="40" data-expected-height="110"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> + </div> + <div class="secondRowFirstColumn" + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid min-content twoRows" data-expected-width="40" data-expected-height="110"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> + </div> + <div class="secondRowFirstColumn" + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55"> + XX X + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid twoRows" data-expected-width="40" data-expected-height="100"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> + XX X + </div> + <div class="secondRowFirstColumn" + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50"> + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid fixedSize twoRows" data-expected-width="200" data-expected-height="200"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"> + XX X + </div> + <div class="secondRowFirstColumn" + data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"> + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid abspos twoRows" data-expected-width="40" data-expected-height="100"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> + XX X + </div> + <div class="secondRowFirstColumn" + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50"> + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid max-content twoRows" data-expected-width="40" data-expected-height="100"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> + XX X + </div> + <div class="secondRowFirstColumn" + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50"> + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid fit-content twoRows" data-expected-width="40" data-expected-height="100"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> + XX X + </div> + <div class="secondRowFirstColumn" + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50"> + </div> + </div> +</div> + +<div class="wrapper"> + <div class="grid min-content twoRows" data-expected-width="40" data-expected-height="100"> + <div class="firstRowFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> + XX X + </div> + <div class="secondRowFirstColumn" + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50"> + </div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-001.html new file mode 100644 index 0000000000..907ef68668 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-001.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution and the track sizing algorithm</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-content-space-between"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Content Distribution on the inline-axis may affect to the row track's size."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + display: inline-grid; + background: grey; + grid-template-columns: 50px 50px; + font: 20px/1 Ahem; + width: 200px; +} + +.item { + grid-column: span 2; + background: green; +} +</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 justifyContentSpaceBetween" data-expected-width="200" data-expected-height="40"> + <div class="item" data-expected-width="200" data-expected-height="40">XXX XX X XX X XXX</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-002.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-002.html new file mode 100644 index 0000000000..a88d0a5025 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution and the track sizing algorithm</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-content-space-between"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Content Distribution on the block-axis may affect to the column track's size."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + display: inline-grid; + background: grey; + grid-template-rows: 50px 50px; + font: 20px/1 Ahem; + height: 200px; +} + +.item { + grid-row: span 2; + background: green; + 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 type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<!-- Heuristic for estimating row-size for orthogonal items should +also consider Content Alignment, so that grid container width is 40px. +https://github.com/w3c/csswg-drafts/issues/2697 --> +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + <div class="grid justifyContentStart alignContentSpaceBetween" data-expected-width="40" data-expected-height="200"> + <div class="item" data-expected-width="40" data-expected-height="200">XXX XX X XX X XXX</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html new file mode 100644 index 0000000000..b3c692c852 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-003.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution and the track sizing algorithm</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-content-space-around"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Content Distribution offset doesn't account for tracks with non-spanning items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + display: inline-grid; + background: grey; + grid-template-columns: 100px; + font: 20px/1 Ahem; + width: 200px; +} +.item1 { + background: green; + grid-column: 1; + grid-row: 1; +} +.item2 { + background: blue; + grid-column: 1; + grid-row: 2; +} +</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 justifyContentSpaceAround" data-expected-width="200" data-expected-height="60"> + <div class="item1" data-expected-width="100" data-expected-height="40">XXXX XXX</div> + <div class="item2" data-expected-width="100" data-expected-height="20">XXX</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html new file mode 100644 index 0000000000..045e080a4e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-content-distribution-must-account-for-track-sizing-004.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Content Distribution and the track sizing algorithm</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-align"> +<link rel="help" href="https://drafts.csswg.org/css-align/#content-distribution"> +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-content-space-between"> +<link rel="stylesheet" href="../../support/alignment.css"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Content Distribution offset doesn't account for relative sized tracks with non-spanning items."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + display: inline-grid; + background: grey; + grid-template-columns: 50%; + font: 20px/1 Ahem; +} + +.item1 { + background: green; + grid-column: 1; + grid-row: 1; +} +.item2 { + background: blue; + grid-column: 2; + 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="grid justifyContentSpaceBetween" data-expected-width="220" data-expected-height="40"> + <div class="item1" data-expected-width="110" data-expected-height="40">XXXX XXX</div> + <div class="item2" data-expected-width="60" data-expected-height="40">XXX</div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-001.html new file mode 100644 index 0000000000..150878b80a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-001.html @@ -0,0 +1,169 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid Track Sizing Algorithm Flexible Tracks and Gutters</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#gutters"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-find-fr-size"> +<meta name="assert" content="This test checks that the size of flexible tracks is properly computed when you have gaps (with and without spanning items)."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: grid; + grid-gap: 10px 20px; + font: 10px/1 Ahem; + margin: 50px; +} + +.fixedSize { + width: 200px; + height: 100px; +} + +.contentBasedSize { + float: left; + height: auto; +} + +.grid div:nth-child(1) { background: magenta; } +.grid div:nth-child(2) { background: cyan; } +.grid div:nth-child(3) { background: yellow; } +.grid div:nth-child(4) { background: lime; } +</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 fixedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div> + <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div> + <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div> +</div> + +<div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-column: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div> + <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div> + <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div> +</div> + +<div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-column: 1; grid-row: 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div style="grid-column: 2; grid-row: 1;" + data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div> + <div style="grid-column: span 2;" + data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="40"></div> +</div> + +<div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-row: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> + <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div> + <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div> +</div> + +<div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-column: 1; grid-row: 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div style="grid-column: 1; grid-row: 2;" + data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div> + <div style="grid-row: span 2;" + data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="100"></div> +</div> + +<div class="grid fixedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-row: span 2; grid-column: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> +</div> + +<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XXXXXXXX</div> + <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40">X<br>X<br>X<br>X</div> + <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div> +</div> + +<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div> + <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div> + <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40">XXXXXXXX<br>X<br>X<br>X</div> +</div> + +<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-column: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div> + <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40">X<br>X<br>X<br>X</div> + <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40">XXXXXXXX</div> +</div> + +<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-column: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50">XXXXXXXXXXXXXXXXXXXX</div> + <div data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40">X<br>X<br>X<br>X</div> + <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div> +</div> + +<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-column: 1; grid-row: 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div style="grid-column: 2; grid-row: 1;" + data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XXXXXXXX</div> + <div style="grid-column: span 2;" + data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="40">X<br>X<br>X<br>X</div> +</div> + +<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-column: 1; grid-row: 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div style="grid-column: 2; grid-row: 1;" + data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50"></div> + <div style="grid-column: span 2;" + data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="40">XXXXXXXXXXXXXXXXXXXX<br>X<br>X<br>X</div> +</div> + +<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-row: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div> + <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XXXXXXXX</div> + <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40">X<br>X<br>X<br>X</div> +</div> + +<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-row: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100">X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X</div> + <div data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="50">XXXXXXXX</div> + <div data-offset-x="120" data-offset-y="60" data-expected-width="80" data-expected-height="40"></div> +</div> + +<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-column: 1; grid-row: 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div style="grid-column: 1; grid-row: 2;" + data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40">X<br>X<br>X<br>X</div> + <div style="grid-row: span 2;" + data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="100">XXXXXXXX</div> +</div> + +<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-column: 1; grid-row: 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div style="grid-column: 1; grid-row: 2;" + data-offset-x="0" data-offset-y="60" data-expected-width="100" data-expected-height="40"></div> + <div style="grid-row: span 2;" + data-offset-x="120" data-offset-y="0" data-expected-width="80" data-expected-height="100">XXXXXXXX<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X</div> +</div> + +<div class="grid contentBasedSize" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-row: span 2; grid-column: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"> +XXXXXXXXXXXXXXXXXXXX<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-002.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-002.html new file mode 100644 index 0000000000..f3c2087e27 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-gutters-002.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid Track Sizing Algorithm Flexible Tracks and Gutters</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#gutters"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-find-fr-size"> +<meta name="assert" content="This test checks that the size of flexible tracks is properly computed when the grid container is content based and you have items spanning flexbile tracks that are smaller than the gutter sizes."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + position: relative; + display: inline-grid; + grid-gap: 50px 100px; + font: 10px/1 Ahem; + margin: 50px; +} + +.grid div:nth-child(1) { background: magenta; } +</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: 50px 1fr / 100px 1fr;"> + <div style="grid-column: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50">X</div> +</div> + +<div class="grid" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-row: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100">X</div> +</div> + +<div class="grid" style="grid: 50px 1fr / 100px 1fr;"> + <div style="grid-column: span 2; grid-row: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">X</div> +</div> + +<div class="grid" style="grid: 0px 1fr / 0px 1fr;"> + <div style="grid-column: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0">X</div> +</div> + +<div class="grid" style="grid: 0px 1fr / 0px 1fr;"> + <div style="grid-row: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="0" data-expected-height="50">X</div> +</div> + +<div class="grid" style="grid: 0px 1fr / 0px 1fr;"> + <div style="grid-column: span 2; grid-row: span 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-restart-algorithm.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-restart-algorithm.html new file mode 100644 index 0000000000..fc2ebeb103 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-find-fr-size-restart-algorithm.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Restart the algorithm to find the size of an 'fr'</title> +<link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-find-fr-size" title="12.7.1. Find the Size of an 'fr'"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="If the product of the hypothetical fr size and a flexible track’s flex factor is less than the track’s base size, restart this algorithm treating all such tracks as inflexible."> +<style> +.grid { + width: 100px; + height: 100px; + background: red; + + display: grid; + grid-template-rows: 1fr; + grid-template-columns: repeat(2, 0fr 1fr); +} + +div > div { background: green } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <div></div> + <div style="width: 30px"></div> + <div style="width: 50px"></div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html new file mode 100644 index 0000000000..ab55502487 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-fit-content-percentage.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: indefinite percentage in fit-content()</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizes" title="7.2.1. Track Sizes"> +<meta name="assert" content="Checks that an indefinite percentage in fit-content lets the grid container grow enough to contain the max-content contribution of its grid items."> +<style> +.container { + width: 200px; + margin-top: 10px; +} +.grid { + display: inline-grid; + background: blue; +} +.item { + background: orange; +} +.item::before, .item::after { + content: ''; + float: left; + width: 50px; + height: 50px; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> + +<script> +"use strict"; +function clamp(value, min, max) { + return Math.max(min, Math.min(max, value)); +} +const minContent = 50; +const maxContent = 100; +for (const percentage of [0, 50, 75, 100, 150]) { + const container = document.createElement("div"); + container.className = "container"; + document.body.appendChild(container); + const grid = document.createElement("div"); + grid.className = "grid"; + grid.style.gridTemplateColumns = `fit-content(${percentage}%)`; + container.appendChild(grid); + const item = document.createElement("div"); + item.className = "item"; + grid.appendChild(item); + test(function() { + const colSize = clamp(percentage * maxContent / 100, minContent, maxContent); + const height = colSize < maxContent ? maxContent : minContent; + assert_equals(item.offsetWidth, colSize, "Grid item width"); + assert_equals(item.offsetHeight, height, "Grid item height"); + assert_equals(grid.offsetWidth, maxContent, "Grid container width"); + assert_equals(grid.offsetHeight, height, "Grid container height"); + assert_equals(getComputedStyle(grid).gridTemplateColumns, colSize + "px", + "Grid column size"); + }, `fit-content(${percentage}%)`); +} +</script> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-001.html new file mode 100644 index 0000000000..f983a4b2c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-001.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Intrinsic contribution of an item with flex tracks</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-spanning-items" title="11.5.3 Increase sizes to accommodate spanning items crossing content-sized tracks"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-spanning-flex-items" title="11.5.4 Increase sizes to accommodate spanning items crossing flexible tracks"> +<meta name="assert" content="This test checks that the intrinsic contribution of a single grid item is distributed correctly among the tracks it spans when flexible tracks are involved."> +<style> +#grid { + display: grid; + width: 50px; + height: 50px; + border: solid; +} +#item { + width: 100px; + height: 100px; + background: blue; +} +</style> + +<div id="log"></div> + +<div id="grid"> + <div id="item"></div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../grid-definition/support/testing-utils.js"></script> +<script> +const item = document.getElementById("item"); +function checkTrackSizes(span, trackList, expected) { + item.style.gridColumn = item.style.gridRow = `span ${span}`; + TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expected, expected); +} + +// Item spanning an intrinsic flexible track +checkTrackSizes(1, "0fr", "100px"); +checkTrackSizes(1, "1fr", "100px"); +checkTrackSizes(1, "2fr", "100px"); + +// Item spanning a fixed flexible track +checkTrackSizes(1, "minmax(0, 0fr)", "0px"); +checkTrackSizes(1, "minmax(0, .5fr)", "25px"); +checkTrackSizes(1, "minmax(0, 1fr)", "50px"); +checkTrackSizes(1, "minmax(0, 2fr)", "50px"); +checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); + +// Item spanning 2 intrinsic flexible tracks +checkTrackSizes(2, "0fr 0fr", "50px 50px"); +checkTrackSizes(2, "0fr 1fr", "0px 100px"); +checkTrackSizes(2, "1fr 0fr", "100px 0px"); +checkTrackSizes(2, "1fr 1fr", "50px 50px"); +checkTrackSizes(2, "1fr 3fr", "25px 75px"); +checkTrackSizes(2, "0fr 0fr 1fr", "50px 50px 0px"); + +// Item spanning 2 fixed flexible tracks +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 50px"); +checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 35px"); +checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "25px 25px"); +checkTrackSizes(2, "minmax(30px, 1fr) minmax(0, 1fr)", "30px 20px"); + +// Item spanning an intrinsic flexible track and a fixed flexible track +checkTrackSizes(2, "0fr minmax(0, 0fr)", "100px 0px"); +checkTrackSizes(2, "0fr minmax(0, 1fr)", "100px 0px"); +checkTrackSizes(2, "1fr minmax(0, 1fr)", "100px 0px"); +checkTrackSizes(2, "1fr minmax(25px, 1fr)", "75px 25px"); + +// Item spanning an intrinsic flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "0fr auto", "100px 0px"); +checkTrackSizes(2, "1fr auto", "100px 0px"); +checkTrackSizes(2, "1fr max-content", "100px 0px"); + +// Item spanning a fixed flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 50px"); +checkTrackSizes(2, "minmax(0, 1fr) auto", "50px 0px"); +checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 25px"); +checkTrackSizes(2, "minmax(25px, 1fr) auto", "50px 0px"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-002.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-002.html new file mode 100644 index 0000000000..a8506e67ef --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-002.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Intrinsic contributions of 2 items with flex tracks</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-spanning-items" title="11.5.3 Increase sizes to accommodate spanning items crossing content-sized tracks"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-spanning-flex-items" title="11.5.4 Increase sizes to accommodate spanning items crossing flexible tracks"> +<meta name="assert" content="This test checks that the intrinsic contributions of 2 items are distributed in the right order when flexible tracks are involved."> +<style> +#grid { + display: grid; + grid-template-areas: ". . . ." + ". a . ." + ". . . ." + ". . . b"; + width: 50px; + height: 50px; + border: solid; +} +#item1 { + grid-column: 1 / a; + grid-row: 1 / a; + width: 60px; + height: 60px; + background: blue; +} +#item2 { + grid-column: a / b; + grid-row: a / b; + width: 150px; + height: 150px; + background: yellow; +} +</style> + +<div id="log"></div> + +<div id="grid"> + <div id="item1"></div> + <div id="item2"></div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../grid-definition/support/testing-utils.js"></script> +<script> +function checkTrackSizes(trackList, expected) { + TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expected, expected); +} + +// We have a symmetric grid with 2 items and 4 tracks, as follows: +// ╔═╤═╗─┬─┐ +// ╟─╔═╬═╪═╗ +// ╚═╬═╝─┼─╢ +// ├─╫─┼─┼─╢ +// └─╚═╧═╧═╝ + +// The 1st item spans a flexible track, therefore its contribution (60px) is distributed last. +// The 2nd item distributes its contribution (150px) among the 2nd, 3rd and 4th tracks. +// Then the 1st item only needs to distribute 60px-50px=10px to the 1st track. +checkTrackSizes("1fr auto auto auto", "10px 50px 50px 50px"); + +// Now the 1st item still spans a flexible track, but it's not intrinsic. +// Therefore, no track receives its intrinsic contribution. +checkTrackSizes("minmax(0, 1fr) auto auto auto", "0px 50px 50px 50px"); + +// Now both items span a flexible track, so their contributions are handled simultaneously, +// even if the 1st item still spans less tracks than the 2nd one. +// Therefore the distribution is as follows: +// - 1st track: 60px/2 = 30px +// - 2nd track: max(60px/2, 150px/3) = 50px +// - 3rd track: 150px/3 = 50px +// - 4th track: 150px/3 = 50px +checkTrackSizes("1fr 1fr 1fr 1fr", "30px 50px 50px 50px"); + +// Like the previous case, but with different flex ratios: +// - 1st track: 60px/2 = 30px +// - 2nd track: max(60px/2, 150px/6) = 30px +// - 3rd track: 150px/6 = 25px +// - 4th track: 150px*4/6 = 100px +checkTrackSizes("1fr 1fr 1fr 4fr", "30px 30px 25px 100px"); + +// Change the grid as follows: +// ╔═╦═╤═╗ +// ╠═╝─┼─╢ +// ╟─┼─┼─╢ +// ╚═╧═╧═╝ +document.getElementById("grid").style.gridTemplateAreas = ` + "a . ." + ". . ." + ". . b"`; + +// Now the 1st item has a span of 1, so usually we would handle its contribution +// at the very beginning, before items that span multiple tracks. +// But not if its track is flexible, then it's still handled at the end, +// simultaneously with other items that span some flexible track. +// - 1nd track: max(60px, 150px/3) = 60px +// - 2nd track: 150px/3 = 50px +// - 3rd track: 150px/3 = 50px +checkTrackSizes("1fr 1fr 1fr", "60px 50px 50px"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-003.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-003.html new file mode 100644 index 0000000000..13c968e915 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-flex-track-intrinsic-sizes-003.html @@ -0,0 +1,202 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Intrinsic contribution of an item with flex tracks</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="author" title="Tab Atkins-Bittner" href="mailto:jackalmage@gmail.com"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-spanning-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-spanning-flex-items"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#min-size-auto"> +<meta name="assert" content="This test checks that the intrinsic contribution of a single grid item is distributed correctly among the tracks it spans when flexible tracks are involved, and the item's size is determined by its children rather than explicitly."> +<style> +#grid { + display: grid; + width: 60px; + height: 60px; + border: solid; +} +#item { + background: blue; +} +#item::before { + content: ""; + display: block; + width: 100px; + height: 100px; +} +</style> + +<div id="log"></div> + +<div id="grid"> + <div id="item"></div> +</div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../grid-definition/support/testing-utils.js"></script> +<script> +const item = document.getElementById("item"); +let testset = "unlabeled"; +function checkTrackSizes(span, trackList, expected) { + item.style.gridColumn = item.style.gridRow = `span ${span}`; + TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expected, expected, testset); +} + +// First check for distributing auto minimum /////////////////////////////////// +testset = "auto min item"; + +// Item spanning an auto flexible track +checkTrackSizes(1, "0fr", "100px"); +checkTrackSizes(1, "1fr", "100px"); +checkTrackSizes(1, "2fr", "100px"); + +// Item spanning a fixed flexible track +checkTrackSizes(1, "minmax(0, 0fr)", "0px"); +checkTrackSizes(1, "minmax(0, .5fr)", "30px"); +checkTrackSizes(1, "minmax(0, 1fr)", "60px"); +checkTrackSizes(1, "minmax(0, 2fr)", "60px"); +checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); + +// Item spanning 2 auto flexible tracks +checkTrackSizes(2, "0fr 0fr", "0px 0px"); +checkTrackSizes(2, "0fr 1fr", "0px 60px"); +checkTrackSizes(2, "1fr 0fr", "60px 0px"); +checkTrackSizes(2, "1fr 1fr", "30px 30px"); +checkTrackSizes(2, "1fr 3fr", "15px 45px"); +checkTrackSizes(2, "0fr 0fr 1fr", "0px 0px 60px"); + +// Item spanning 2 fixed flexible tracks +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px"); +checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px"); +checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px"); +checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px"); + +// Item spanning an auto flexible track and a fixed flexible track +checkTrackSizes(2, "0fr minmax(0, 0fr)", "0px 0px"); +checkTrackSizes(2, "0fr minmax(0, 1fr)", "0px 60px"); +checkTrackSizes(2, "1fr minmax(0, 1fr)", "30px 30px"); +checkTrackSizes(2, "1fr minmax(25px, 1fr)", "30px 30px"); + +// Item spanning an auto flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "0fr min-content", "0px 0px"); +checkTrackSizes(2, "0fr auto", "0px 60px"); +checkTrackSizes(2, "0.5fr auto", "30px 30px"); +checkTrackSizes(2, "1fr auto", "60px 0px"); +checkTrackSizes(2, "1fr max-content", "60px 0px"); +checkTrackSizes(2, "1fr min-content", "60px 0px"); + +// Item spanning a fixed flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px"); +checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px"); +checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px"); +checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px"); + +// Now check for distributing min content ////////////////////////////////////// +item.style.minWidth = "min-content"; // min-content = 100px > grid +item.style.minHeight = "100px"; // min-content doesn't resolve in block axis (yet?) +testset = "min-content min item"; + +// Item spanning an auto flexible track +checkTrackSizes(1, "0fr", "100px"); +checkTrackSizes(1, "1fr", "100px"); +checkTrackSizes(1, "2fr", "100px"); + +// Item spanning a fixed flexible track +checkTrackSizes(1, "minmax(0, 0fr)", "0px"); +checkTrackSizes(1, "minmax(0, .5fr)", "30px"); +checkTrackSizes(1, "minmax(0, 1fr)", "60px"); +checkTrackSizes(1, "minmax(0, 2fr)", "60px"); +checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); + +// Item spanning 2 auto flexible tracks +checkTrackSizes(2, "0fr 0fr", "50px 50px"); +checkTrackSizes(2, "0fr 1fr", "0px 100px"); +checkTrackSizes(2, "1fr 0fr", "100px 0px"); +checkTrackSizes(2, "1fr 1fr", "50px 50px"); +checkTrackSizes(2, "1fr 3fr", "25px 75px"); +checkTrackSizes(2, "0fr 0fr 1fr", "50px 50px 0px"); + +// Item spanning 2 fixed flexible tracks +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px"); +checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px"); +checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px"); +checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px"); + +// Item spanning an auto flexible track and a fixed flexible track +checkTrackSizes(2, "0fr minmax(0, 0fr)", "100px 0px"); +checkTrackSizes(2, "0fr minmax(0, 1fr)", "100px 0px"); +checkTrackSizes(2, "1fr minmax(0, 1fr)", "100px 0px"); +checkTrackSizes(2, "1fr minmax(25px, 1fr)", "75px 25px"); + +// Item spanning an auto flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "0fr min-content", "100px 0px"); +checkTrackSizes(2, "0fr auto", "100px 0px"); +checkTrackSizes(2, "0.5fr auto", "100px 0px"); +checkTrackSizes(2, "1fr auto", "100px 0px"); +checkTrackSizes(2, "1fr max-content", "100px 0px"); +checkTrackSizes(2, "1fr min-content", "100px 0px"); + +// Item spanning a fixed flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px"); +checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px"); +checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px"); +checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px"); + +// Now check for distributing fixed min //////////////////////////////////////// +item.style.minWidth = "50px"; // minimum < grid < min-content +item.style.minHeight = "50px"; // minimum < grid < min-content +testset = "50px min item"; + +// Item spanning an auto flexible track +checkTrackSizes(1, "0fr", "50px"); +checkTrackSizes(1, "1fr", "60px"); +checkTrackSizes(1, "2fr", "60px"); + +// Item spanning a fixed flexible track +checkTrackSizes(1, "minmax(0, 0fr)", "0px"); +checkTrackSizes(1, "minmax(0, .5fr)", "30px"); +checkTrackSizes(1, "minmax(0, 1fr)", "60px"); +checkTrackSizes(1, "minmax(0, 2fr)", "60px"); +checkTrackSizes(1, "minmax(75px, 1fr)", "75px"); + +// Item spanning 2 auto flexible tracks +checkTrackSizes(2, "0fr 0fr", "25px 25px"); +checkTrackSizes(2, "0fr 1fr", "0px 60px"); +checkTrackSizes(2, "1fr 0fr", "60px 0px"); +checkTrackSizes(2, "1fr 1fr", "30px 30px"); +checkTrackSizes(2, "1fr 3fr", "15px 45px"); +checkTrackSizes(2, "0fr 0fr 1fr", "25px 25px 10px"); + +// Item spanning 2 fixed flexible tracks +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 0fr)", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) minmax(0, 1fr)", "0px 60px"); +checkTrackSizes(2, "minmax(15px, 0fr) minmax(0, 1fr)", "15px 45px"); +checkTrackSizes(2, "minmax(20px, 1fr) minmax(0, 1fr)", "30px 30px"); +checkTrackSizes(2, "minmax(40px, 1fr) minmax(0, 1fr)", "40px 20px"); + +// Item spanning an auto flexible track and a fixed flexible track +checkTrackSizes(2, "0fr minmax(0, 0fr)", "50px 0px"); +checkTrackSizes(2, "0fr minmax(0, 1fr)", "50px 10px"); +checkTrackSizes(2, "1fr minmax(0, 1fr)", "50px 10px"); +checkTrackSizes(2, "1fr minmax(25px, 1fr)", "30px 30px"); + +// Item spanning an auto flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "0fr min-content", "50px 0px"); +checkTrackSizes(2, "0fr auto", "50px 10px"); +checkTrackSizes(2, "0.5fr auto", "50px 10px"); +checkTrackSizes(2, "1fr auto", "60px 0px"); +checkTrackSizes(2, "1fr max-content", "60px 0px"); +checkTrackSizes(2, "1fr min-content", "60px 0px"); + +// Item spanning a fixed flexible track and an intrinsic non-flexible track +checkTrackSizes(2, "minmax(0, 0fr) min-content", "0px 0px"); +checkTrackSizes(2, "minmax(0, 0fr) auto", "0px 60px"); +checkTrackSizes(2, "minmax(0, 1fr) auto", "60px 0px"); +checkTrackSizes(2, "minmax(25px, 0fr) auto", "25px 35px"); +checkTrackSizes(2, "minmax(25px, 1fr) auto", "60px 0px"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-dynamic-block-size.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-dynamic-block-size.html new file mode 100644 index 0000000000..4db5080f93 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-dynamic-block-size.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=719441"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div id="target"> + <div style="display: inline-grid; height: 100%; background: green;"> + <canvas width=60 height=60 style="height: 100%; min-width: 0;"></canvas> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '100px'; +</script> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-with-orthogonal-items.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-with-orthogonal-items.html new file mode 100644 index 0000000000..63d6844cb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-size-with-orthogonal-items.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Compute the grid's intrinsic size when there are orthogonal items</title> +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#algo-overview"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#establish-an-orthogonal-flow"> +<meta name="assert" content="The test checks that using track's max sizing function to estimate orthogonal items' block-axis size to compute the grid's intrinsic size may lead to content overflow."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + display: inline-grid; + font: 25px/1 Ahem; + background: green; + height: 150px; +} + +.item { writing-mode: vertical-lr; } + +.minmax-100-200 { grid: minmax(100px, 200px) / auto; } +.minmax-auto-200 { grid: minmax(100px, 200px) / auto; } +.minmax-auto-100 { grid: minmax(auto, 100px) / auto; } +.minmax-100-auto { grid: minmax(100px, auto) / auto; } +.minmax-100-fitcontent { grid: minmax(100px, fit-content) / auto; } +.minmax-100-1fr { grid: minmax(100px, 1fr) / auto; } +</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'); })"> + +<pre>rows: auto</pre> + +<div class="grid" data-expected-width="75" data-expected-height="150"> + <div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div> +</div> + +<pre>rows: minmax(100px, 200px)</pre> + +<div class="grid minmax-100-200" data-expected-width="75" data-expected-height="150"> + <div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div> +</div> + +<pre>rows: minmax(auto, 200px)</pre> + +<div class="grid minmax-auto-200" data-expected-width="75" data-expected-height="150"> + <div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div> +</div> + +<pre>rows: minmax(100px, auto)</pre> + +<div class="grid minmax-100-auto" data-expected-width="75" data-expected-height="150"> + <div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div> +</div> + +<pre>rows: minmax(auto, 100px)</pre> + +<div class="grid minmax-auto-100" data-expected-width="100" data-expected-height="150"> + <div class="item" data-expected-width="100" data-expected-height="100">XXX XX X XXX XX X</div> +</div> + +<pre>rows: minmax(100px, fit-content)</pre> + +<div class="grid minmax-auto-fitcontent" data-expected-width="75" data-expected-height="150"> + <div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div> +</div> + +<pre>rows: minmax(100px, 1fr)</pre> + +<div class="grid minmax-auto-1fr" data-expected-width="75" data-expected-height="150"> + <div class="item" data-expected-width="75" data-expected-height="150">XXX XX X XXX XX X</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001.html new file mode 100644 index 0000000000..5c740681f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-intrinsic-track-sizes-001.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Intrinsic contribution of a small item to intrinsic tracks</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-content"> +<meta name="assert" content="This test checks that the intrinsic contribution of a single grid item smaller than its container is distributed correctly among the tracks it spans when intrinsic tracks are involved."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#grid { + display: grid; + width: 120px; + height: 120px; + border: solid; + font: 10px/1 Ahem; +} +#item { + background: blue; + /* make min-content contribution differ from minimum contribution */ + min-width: 12px; + min-height: 12px; +} +</style> + +<div id="grid"> + <div id="item">XXX XX<br>XX<br>XX</div> +</div> + +<div id="log"></div> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="../grid-definition/support/testing-utils.js"></script> +<script> +const item = document.getElementById("item"); +function checkTrackSizes(span, trackList, expectedCols, expectedRows) { + item.style.gridColumn = item.style.gridRow = `span ${span}`; + if (!expectedRows) { + expectedRows = expectedCols; + } + TestingUtils.testGridTemplateColumnsRows("grid", trackList, trackList, expectedCols, expectedRows); +} + +setup({ explicit_done: true }); +document.fonts.ready.then(() => { + // Item spanning a single track + checkTrackSizes(1, "auto", "120px"); + checkTrackSizes(1, "min-content", "30px", "40px"); + checkTrackSizes(1, "max-content", "60px", "30px"); + + checkTrackSizes(1, "minmax(0, auto)", "120px"); + checkTrackSizes(1, "minmax(0, min-content)", "30px", "40px"); + checkTrackSizes(1, "minmax(0, max-content)", "60px", "30px"); + + checkTrackSizes(1, "minmax(auto, 10px)", "12px"); + checkTrackSizes(1, "minmax(min-content, 10px)", "30px", "40px"); + checkTrackSizes(1, "minmax(max-content, 10px)", "60px", "30px"); + + // Item spanning two identical tracks + + checkTrackSizes(2, "auto auto", "60px 60px"); + checkTrackSizes(2, "min-content min-content", "15px 15px", "20px 20px"); + checkTrackSizes(2, "max-content max-content", "30px 30px", "15px 15px"); + + checkTrackSizes(2, "minmax(0, auto) minmax(0, auto)", "60px 60px"); + checkTrackSizes(2, "minmax(0, min-content) minmax(0, min-content)", "15px 15px", "20px 20px"); + checkTrackSizes(2, "minmax(0, max-content) minmax(0, max-content)", "30px 30px", "15px 15px"); + + checkTrackSizes(2, "minmax(auto, 4px) minmax(auto, 4px)", "6px 6px"); + checkTrackSizes(2, "minmax(auto, 10px) minmax(auto, 10px)", "10px 10px"); + checkTrackSizes(2, "minmax(min-content, 10px) minmax(min-content, 10px)", "15px 15px", "20px 20px"); + checkTrackSizes(2, "minmax(max-content, 10px) minmax(max-content, 10px)", "30px 30px", "15px 15px"); + + // Item spanning a fixed track also + checkTrackSizes(2, "20px auto", "20px 100px"); + checkTrackSizes(2, "20px min-content", "20px 10px", "20px 20px"); + checkTrackSizes(2, "20px max-content", "20px 40px", "20px 10px"); + + checkTrackSizes(2, "20px minmax(0, auto)", "20px 100px"); + checkTrackSizes(2, "20px minmax(0, min-content)", "20px 10px", "20px 20px"); + checkTrackSizes(2, "20px minmax(0, max-content)", "20px 40px", "20px 10px"); + + checkTrackSizes(2, "20px minmax(auto, 30px)", "20px 30px"); + checkTrackSizes(2, "20px minmax(min-content, 6px)", "20px 10px", "20px 20px"); + checkTrackSizes(2, "20px minmax(min-content, 40px)", "20px 40px", "20px 40px"); + checkTrackSizes(2, "20px minmax(max-content, 6px)", "20px 40px", "20px 10px"); + checkTrackSizes(2, "20px minmax(max-content, 30px)", "20px 40px", "20px 30px"); + + // Item spanning two mismatched intrinsic tracks + checkTrackSizes(2, "max-content min-content", "45px 15px", "15px 15px"); + + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-001.html new file mode 100644 index 0000000000..6ae1c50c22 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-001.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<title>CSS Grid: 'auto' sizes with item's margins</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=357419"> +<meta name="assert" content="Check that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins."/> +<link href="/css/support/grid.css" rel="stylesheet"> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"> + +<style> +.grid { + grid-template-rows: auto auto; + grid-template-columns: auto auto; +} + +.gridItem { + width: 20px; + height: 40px; +} + +.marginTop { + margin-top: 20px; +} + +.marginBottom { + margin-bottom: 20px; +} + +.borderTop { + border-top: 5px solid; +} + +.borderBottom { + border-bottom: 5px solid; +} + +.paddingTop { + padding-top: 10px; +} + +.paddingBottom { + padding-bottom: 10px; +} +</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> + <div class="grid fit-content" data-expected-width="40" data-expected-height="120"> + <div class="gridItem marginTop firstRowFirstColumn"></div> + <div class="gridItem firstRowSecondColumn"></div> + <div class="gridItem marginBottom secondRowFirstColumn"></div> + <div class="gridItem secondRowSecondColumn"></div> + </div> +</div> + +<div> + <div class="grid fit-content" data-expected-width="40" data-expected-height="120"> + <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div> + <div class="gridItem firstRowSecondColumn"></div> + <div class="gridItem borderTop borderBottom secondRowFirstColumn"></div> + <div class="gridItem secondRowSecondColumn"></div> + </div> +</div> + +<div> + <div class="grid fit-content" data-expected-width="40" data-expected-height="120"> + <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div> + <div class="gridItem firstRowSecondColumn"></div> + <div class="gridItem borderTop borderBottom secondRowFirstColumn"></div> + <div class="gridItem secondRowSecondColumn"></div> + </div> +</div> + +<div> + <div class="grid fit-content" data-expected-width="40" data-expected-height="120"> + <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div> + <div class="gridItem firstRowSecondColumn"></div> + <div class="gridItem paddingBottom secondRowFirstColumn"></div> + <div class="gridItem secondRowSecondColumn"></div> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-lr-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-lr-001.html new file mode 100644 index 0000000000..63bf55f293 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-lr-001.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<title>CSS Grid: 'auto' sizes with item's margins with vertical-lr</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=357419"> +<meta name="assert" content="Check that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins when using vertical-lr writing mode."/> +<link href="/css/support/grid.css" rel="stylesheet"> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"> + +<style> +.grid { + grid-template-rows: auto auto; + grid-template-columns: auto auto; +} + +.gridItem { + width: 20px; + height: 40px; +} + +.marginTop { + margin-top: 20px; +} + +.marginBottom { + margin-bottom: 20px; +} + +.borderTop { + border-top: 5px solid; +} + +.borderBottom { + border-bottom: 5px solid; +} + +.paddingTop { + padding-top: 10px; +} + +.paddingBottom { + padding-bottom: 10px; +} +</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> + <div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120"> + <div class="gridItem marginTop firstRowFirstColumn"></div> + <div class="gridItem marginBottom firstRowSecondColumn"></div> + <div class="gridItem secondRowFirstColumn"></div> + <div class="gridItem secondRowSecondColumn"></div> + </div> +</div> + +<div> + <div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120"> + <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div> + <div class="gridItem borderTop borderBottom firstRowSecondColumn"></div> + <div class="gridItem secondRowFirstColumn"></div> + <div class="gridItem secondRowSecondColumn"></div> + </div> +</div> + +<div> + <div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120"> + <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div> + <div class="gridItem borderTop borderBottom firstRowSecondColumn"></div> + <div class="gridItem secondRowFirstColumn"></div> + <div class="gridItem secondRowSecondColumn"></div> + </div> +</div> + +<div> + <div class="grid fit-content verticalLR" data-expected-width="40" data-expected-height="120"> + <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div> + <div class="gridItem paddingBottom firstRowSecondColumn"></div> + <div class="gridItem secondRowFirstColumn"></div> + <div class="gridItem secondRowSecondColumn"></div> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-rl-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-rl-001.html new file mode 100644 index 0000000000..d6767e3f4a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-item-margin-auto-columns-rows-vertical-rl-001.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<title>CSS Grid: 'auto' sizes with item's margins with vertical-rl</title> +<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=357419"> +<meta name="assert" content="Check that the grid's rows and columns 'auto' sizes are updated accordingly to its grid-item's before and start margins when using vertical-rl writing mode."/> +<link href="/css/support/grid.css" rel="stylesheet"> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"> + +<style> +.grid { + grid-template-rows: auto auto; + grid-template-columns: auto auto; +} + +.gridItem { + width: 20px; + height: 40px; +} + +.marginTop { + margin-top: 20px; +} + +.marginBottom { + margin-bottom: 20px; +} + +.borderTop { + border-top: 5px solid; +} + +.borderBottom { + border-bottom: 5px solid; +} + +.paddingTop { + padding-top: 10px; +} + +.paddingBottom { + padding-bottom: 10px; +} +</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 fit-content verticalRL" data-expected-width="40" data-expected-height="120"> + <div class="gridItem marginTop firstRowFirstColumn"></div> + <div class="gridItem marginBottom firstRowSecondColumn"></div> + <div class="gridItem secondRowFirstColumn"></div> + <div class="gridItem secondRowSecondColumn"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120"> + <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div> + <div class="gridItem borderTop borderBottom firstRowSecondColumn"></div> + <div class="gridItem secondRowFirstColumn"></div> + <div class="gridItem secondRowSecondColumn"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120"> + <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div> + <div class="gridItem borderTop borderBottom firstRowSecondColumn"></div> + <div class="gridItem secondRowFirstColumn"></div> + <div class="gridItem secondRowSecondColumn"></div> + </div> +</div> + +<div style="position: relative"> + <div class="grid fit-content verticalRL" data-expected-width="40" data-expected-height="120"> + <div class="gridItem marginTop paddingTop firstRowFirstColumn"></div> + <div class="gridItem paddingBottom firstRowSecondColumn"></div> + <div class="gridItem secondRowFirstColumn"></div> + <div class="gridItem secondRowSecondColumn"></div> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-layout-free-space-unit.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-layout-free-space-unit.html new file mode 100644 index 0000000000..10649a9639 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-layout-free-space-unit.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <title>CSS Grid Layout Test: free space unit</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/#free-space"> + <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: 1fr 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/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr.html new file mode 100644 index 0000000000..3d1949fc3f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-lr.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes"> +<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area."> +<style> +.grid { + display: grid; + position: relative; + font-size: 0; + height: 0; + width: 0; + margin-bottom: 125px; + grid-template-rows: 50px 50px; + justify-items: baseline; +} +.item1, .item2 { + writing-mode: vertical-lr; +} +.item1 { + padding-left: 25px; + background: yellow; +} +.item2 { + padding-right: 25px; + background: magenta; +} +.item1::before, .item2::before { + content: ''; + display: inline-block; + width: 25px; + height: 25px; + vertical-align: top; +} +.item2::before { + vertical-align: bottom; +} +.area { + position: absolute; + z-index: -1; + left: 0; + right: 0; + top: 0; + bottom: 0; + grid-column: 1 / 2; + grid-row: 1 / 3; + background: cyan; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<div id="log"></div> + +<div class="grid" style="grid-template-columns: minmax(auto, 0px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="75" data-expected-height="100"></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(auto, 75px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="75" data-expected-height="100"></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(auto, 88px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="88" data-expected-height="100"></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(auto, 100px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(auto, 150px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(auto, auto);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<script> +checkLayout(".grid"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html new file mode 100644 index 0000000000..cd80fd3873 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim-vertical-rl.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes"> +<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area."> +<style> +.grid { + display: grid; + position: relative; + font-size: 0; + height: 0; + width: 0; + margin-bottom: 125px; + grid-template-rows: 50px 50px; + justify-items: baseline; +} +.item1, .item2 { + writing-mode: vertical-rl; +} +.item1 { + padding-left: 25px; + background: yellow; +} +.item2 { + padding-right: 25px; + background: magenta; +} +.item1::before, .item2::before { + content: ''; + display: inline-block; + width: 25px; + height: 25px; + vertical-align: top; +} +.item2::before { + vertical-align: bottom; +} +.area { + position: absolute; + z-index: -1; + left: 0; + right: 0; + top: 0; + bottom: 0; + grid-column: 1 / 2; + grid-row: 1 / 3; + background: cyan; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<div id="log"></div> + +<div class="grid" style="grid-template-columns: minmax(auto, 0px);"> + <div class="item1" data-offset-x="-25" data-offset-y="0"></div> + <div class="item2" data-offset-x="25" data-offset-y="50"></div> + <div class="area" data-expected-width="75" data-expected-height="100"></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(auto, 75px);"> + <div class="item1" data-offset-x="-25" data-offset-y="0"></div> + <div class="item2" data-offset-x="25" data-offset-y="50"></div> + <div class="area" data-expected-width="75" data-expected-height="100"></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(auto, 88px);"> + <div class="item1" data-offset-x="-12" data-offset-y="0"></div> + <div class="item2" data-offset-x="38" data-offset-y="50"></div> + <div class="area" data-expected-width="88" data-expected-height="100"></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(auto, 100px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(auto, 150px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<div class="grid" style="grid-template-columns: minmax(auto, auto);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<script> +checkLayout(".grid"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim.html new file mode 100644 index 0000000000..2bd37eb0f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-minimum-contribution-baseline-shim.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: minimum contribution with baseline-alignment shim</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-content" title="11.5. Resolve Intrinsic Track Sizes"> +<meta name="assert" content="Checks that the minimum contribution takes the baseline-alignment shim into account when calculating the outer size that grid items would have if their preferred size were their minimum size. Also checks that the shim is used again when clamping the automatic minimum size to less than or equal to the stretch fit into the grid area."> +<style> +.grid { + display: grid; + position: relative; + font-size: 0; + height: 0; + width: 0; + margin-bottom: 125px; + grid-template-columns: 50px 50px; + align-items: baseline; +} +.item1 { + padding-top: 25px; + background: yellow; +} +.item2 { + padding-bottom: 25px; + background: magenta; +} +.item1::before, .item2::before { + content: ''; + display: inline-block; + width: 25px; + height: 25px; + vertical-align: bottom; +} +.item2::before { + vertical-align: top; +} +.area { + position: absolute; + z-index: -1; + left: 0; + right: 0; + top: 0; + bottom: 0; + grid-column: 1 / 3; + grid-row: 1 / 2; + background: cyan; +} +</style> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<div id="log"></div> + +<div class="grid" style="grid-template-rows: minmax(auto, 0px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="75"></div> +</div> + +<div class="grid" style="grid-template-rows: minmax(auto, 75px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="75"></div> +</div> + +<div class="grid" style="grid-template-rows: minmax(auto, 88px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="88"></div> +</div> + +<div class="grid" style="grid-template-rows: minmax(auto, 100px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<div class="grid" style="grid-template-rows: minmax(auto, 150px);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<div class="grid" style="grid-template-rows: minmax(auto, auto);"> + <div class="item1" data-offset-x="0" data-offset-y="0"></div> + <div class="item2" data-offset-x="50" data-offset-y="50"></div> + <div class="area" data-expected-width="100" data-expected-height="100"></div> +</div> + +<script> +checkLayout(".grid"); +</script> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-cols-filled-shrinkwrap-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-cols-filled-shrinkwrap-001.html new file mode 100644 index 0000000000..8402238f2b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-cols-filled-shrinkwrap-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Filled Percentage Column, Shrinkwrap Width (via float)</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview"> +<link rel="match" href="references/grid-percent-cols-filled-shrinkwrap-001-ref.html"> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: grid; + float: left; + margin: 1em; + grid-template-columns: auto 20% auto; + border: solid silver; + font: 20px/1 Ahem; + color: transparent; + } + .grid > div { + background: blue; + } + .b { + grid-column: 3; + } + .c { + grid-column: 2; + } + + .ref { + grid-template-columns: 40px 20px 40px; + } +</style> + +<p>Test passes if the two shapes below are identical + +<div class="grid"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">XXX</div> +</div> + +<div class="grid ref"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-cols-spanned-shrinkwrap-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-cols-spanned-shrinkwrap-001.html new file mode 100644 index 0000000000..ec84108cf1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-cols-spanned-shrinkwrap-001.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Spanned Percentage Column, Shrinkwrap Width (via float)</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview"> +<link rel="match" href="references/grid-percent-cols-spanned-shrinkwrap-001-ref.html"> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: grid; + float: left; + margin: 1em; + grid-template-columns: auto 20% auto; + border: solid silver; + font: 20px/1 Ahem; + color: transparent; + } + .grid > div { + background: blue; + } + .b { + grid-column: 3; + } + .c { + grid-column: span 3; + } + + .ref { + grid-template-columns: 40px 20px 40px; + } +</style> + +<p>Test passes if the two shapes below are identical + +<div class="grid"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">XXXXX</div> +</div> + +<div class="grid ref"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">XXXXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-rows-filled-shrinkwrap-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-rows-filled-shrinkwrap-001.html new file mode 100644 index 0000000000..a55c24f77d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-rows-filled-shrinkwrap-001.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Filled Percentage Row, Shrinkwrap Height</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview"> +<link rel="match" href="references/grid-percent-rows-filled-shrinkwrap-001-ref.html"> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: grid; + float: left; + margin: 1em; + grid-template-rows: auto 20% auto; + grid-auto-flow: column; + border: solid silver; + font: 20px/1 Ahem; + color: transparent; + } + .grid > div { + background: blue; + } + .b { + grid-row: 3; + } + .c { + grid-row: 2; + } + + .ref { + grid-template-rows: 40px 20px 40px; + } +</style> + +<p>Test passes if the two shapes below are identical + +<div class="grid"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">X<br>X<br>X</div> +</div> + +<div class="grid ref"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-rows-spanned-shrinkwrap-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-rows-spanned-shrinkwrap-001.html new file mode 100644 index 0000000000..0c51f08f82 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-percent-rows-spanned-shrinkwrap-001.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Spanned Percentage Row, Shrinkwrap Height</title> +<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview"> +<link rel="match" href="references/grid-percent-rows-spanned-shrinkwrap-001-ref.html"> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: grid; + float: left; + margin: 1em; + grid-template-rows: auto 20% auto; + grid-auto-flow: column; + justify-content: center; + border: solid silver; + font: 20px/1 Ahem; + color: transparent; + } + .grid > div { + background: blue; + } + .b { + grid-row: 3; + } + .c { + grid-row: span 3; + } + + .ref { + grid-template-rows: 40px 20px 40px; + } +</style> + +<p>Test passes if the two shapes below are identical + +<div class="grid"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">X<br>X<br>X<br>X<br>X</div> +</div> + +<div class="grid ref"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">X<br>X<br>X<br>X<br>X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-stretch-respects-min-size-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-stretch-respects-min-size-001.html new file mode 100644 index 0000000000..29eca9dbc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-stretch-respects-min-size-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: stretch alignment respects min size constraints of the 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/#algo-stretch"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The test checks that during the last step of the track sizing algorithm (stretch auto tracks), the min-width/height constraints of the grid container are respected."> +<style> + #reference-overlapped-red { + position: absolute; + background-color: red; + width: 100px; + height: 100px; + z-index: -1; + } + + #constrained-wrapper { + width: 50px; + height: 50px; + } + + #grid { + display: grid; + min-width: 100px; + min-height: 100px; + } + + #test-item-overlapping-green { + background: green; + } +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="reference-overlapped-red"></div> +<div id="constrained-wrapper"> + <div id="grid"> + <div id="test-item-overlapping-green"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-template-flexible-rerun-track-sizing.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-template-flexible-rerun-track-sizing.html new file mode 100644 index 0000000000..2db9d64347 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-template-flexible-rerun-track-sizing.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1149627"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4309" /> +<style> +.grid { + display: inline-grid; + position: relative; + grid-template-columns: minmax(0, .5fr); + grid-template-rows: minmax(0, .5fr); +} +.item { + width: 200px; + height: 200px; + background: linear-gradient(green, green) no-repeat; + background-size: 100px 100px; +} +.abspos { + grid-area: 1 / 1 / 2 / 2; + position: absolute; + width: 200%; + height: 200%; + background: red; + z-index: -1; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="grid"> + <span class="item"></span> + <span class="abspos"></span> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/references/auto-margins-ignored-during-track-sizing-001-ref.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/auto-margins-ignored-during-track-sizing-001-ref.html new file mode 100644 index 0000000000..b06d891151 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/auto-margins-ignored-during-track-sizing-001-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<style> +body { overflow: hidden; } +.grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} +.margin { margin-top: 10px; } +.center { justify-self: center; } +.i1 { background: magenta; } +.i2 { background: cyan; } +.i3 { background: yellow; } +.i4 { background: lime; } +</style> +<p>This test pass if the 3 items in the first row have the same size filling the whole viewport's width and the item in the second row is centered in the first column.<p> +<div class="grid"> + <div class="i1"> + In a few questions, you will get an expert-designed investment portfolio to fit your financial needs. + </div> + <div class="i2"> + Open and fund your account with 10,000 or more and we will put your money to work. + </div> + <div class="i3"> + We will take it from here, monitoring your portfolio daily to help keep it on track. + </div> + <div class="i4 margin center">Learn More</a> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-cols-filled-shrinkwrap-001-ref.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-cols-filled-shrinkwrap-001-ref.html new file mode 100644 index 0000000000..97bc5da725 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-cols-filled-shrinkwrap-001-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>Reference</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: grid; + float: left; + margin: 1em; + grid-template-columns: 40px 20px 40px; + align-content: center; + border: solid silver; + font: 20px/1 Ahem; + color: transparent; + } + .grid > div { + background: blue; + } + .b { + grid-column: 3; + } + .c { + grid-column: 2; + } +</style> + +<p>Test passes if the two shapes below are identical + +<div class="grid"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">XXX</div> +</div> + +<div class="grid ref"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-cols-spanned-shrinkwrap-001-ref.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-cols-spanned-shrinkwrap-001-ref.html new file mode 100644 index 0000000000..37d516ee28 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-cols-spanned-shrinkwrap-001-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<title>Reference</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: grid; + float: left; + margin: 1em; + grid-template-columns: 40px 20px 40px; + align-content: center; + border: solid silver; + font: 20px/1 Ahem; + color: transparent; + } + .grid > div { + background: blue; + } + .b { + grid-column: 3; + } + .c { + grid-column: span 3; + } +</style> + +<p>Test passes if the two shapes below are identical + +<div class="grid"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">XXXXX</div> +</div> + +<div class="grid ref"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">XXXXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-rows-filled-shrinkwrap-001-ref.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-rows-filled-shrinkwrap-001-ref.html new file mode 100644 index 0000000000..2c756ba8bc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-rows-filled-shrinkwrap-001-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>Reference</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: grid; + float: left; + margin: 1em; + grid-template-rows: 40px 20px 40px; + grid-auto-flow: column; + justify-content: center; + border: solid silver; + font: 20px/1 Ahem; + color: transparent; + } + .grid > div { + background: blue; + } + .b { + grid-row: 3; + } + .c { + grid-row: 2; + } +</style> + +<p>Test passes if the two shapes below are identical + +<div class="grid"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">X<br>X<br>X</div> +</div> + +<div class="grid ref"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">X</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-rows-spanned-shrinkwrap-001-ref.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-rows-spanned-shrinkwrap-001-ref.html new file mode 100644 index 0000000000..8d09dc1a69 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/references/grid-percent-rows-spanned-shrinkwrap-001-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>Reference</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + .grid { + display: grid; + float: left; + margin: 1em; + grid-template-rows: 40px 20px 40px; + grid-auto-flow: column; + justify-content: center; + border: solid silver; + font: 20px/1 Ahem; + color: transparent; + } + .grid > div { + background: blue; + } + .b { + grid-row: 3; + } + .c { + grid-row: span 3; + } +</style> + +<p>Test passes if the two shapes below are identical + +<div class="grid"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">X<br>X<br>X<br>X<br>X</div> +</div> + +<div class="grid ref"> + <div class="a">X</div> + <div class="b">X</div> + <div class="c">X<br>X<br>X<br>X<br>X</div> +</div> |