diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/abspos')
273 files changed, 18255 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001-ref.html new file mode 100644 index 0000000000..07e297f18e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Absolute positioning changing containing block reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +.wrapper { + width: 100px; + height: 100px; + margin-bottom: 25px; + background: purple; +} + +.grid { + width: 50px; + height: 50px; + background: lightblue; +} + +.item { + width: 75%; + height: 75%; + background: orange; +} +</style> + +<p>The test PASS if you see an orange box inside a purple box on top and a small orange box inside a light blue box inside a purple box on bottom.</p> + +<div class="wrapper"> + <div class="item"></div> +</div> +<div class="wrapper"> + <div class="grid"> + <div class="item"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001.html new file mode 100644 index 0000000000..31030835c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-changing-containing-block-001.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html lang=en class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Absolute positioning changing containing block</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="absolute-positioning-changing-containing-block-001-ref.html"> +<meta name="assert" content="This test checks that absolutelly positioned children of a grid are properly sized when the containing block switches between the grid container and a grid ancestor."> +<style> +.wrapper { + width: 100px; + height: 100px; + margin-bottom: 25px; + background: purple; + position: relative; +} + +.grid { + display: grid; + grid-template: 10px / 10px; + width: 50px; + height: 50px; + background: lightblue; +} + +.item { + width: 75%; + height: 75%; + background: orange; + position: absolute; +} +</style> + +<p>The test PASS if you see an orange box inside a purple box on top and a small orange box inside a light blue box inside a purple box on bottom.</p> + +<div class="wrapper"> + <div id="grid-as-cb" class="grid" style="position: relative;"> + <div class="item"></div> + </div> +</div> +<div class="wrapper"> + <div id="grid-as-parent" class="grid"> + <div class="item"></div> + </div> +</div> + +<script> + window.requestAnimationFrame(() => { + document.getElementById("grid-as-cb").style.position = "initial"; + document.getElementById("grid-as-parent").style.position = "relative"; + document.body.offsetLeft; + document.documentElement.classList.remove('reftest-wait'); + }); +</script> + +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-definite-sizes-001.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-definite-sizes-001.html new file mode 100644 index 0000000000..c2b6aeecd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-definite-sizes-001.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Absolute positioning definite sizes</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Items should extend to fill the width of the absolutely positioned grid container."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.grid { + display: grid; + grid-template: 50px 1fr / 1fr; + + position: absolute; + left: 50px; + top: 50px; + + width: 200px; + height: 200px; + + border: 7px solid #ccc; + font: 10px/1 Ahem; +} + +.row1 { + grid-row-start: 1; + background-color: yellow; +} + +.row2 { + grid-row-start: 2; + background-color: cyan; +} +</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"> + <div class="row1" data-expected-height="50" data-expected-width="200">XXX X</div> + <div class="row2" data-expected-height="150" data-expected-width="200">XX XXX XX</div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-containing-block-001.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-containing-block-001.html new file mode 100644 index 0000000000..0e52b19997 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-containing-block-001.html @@ -0,0 +1,356 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Absolute positioning grid container containing block</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="This test checks the behavior of the absolutely positioned elements with a grid container as containing block."> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + +.grid { + grid-template-columns: 50px 100px 150px 200px; + grid-template-rows: 50px 100px 150px 200px; + width: 500px; + height: 500px; + border: 5px solid black; + margin: 30px; + padding: 15px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.absolute { + position: absolute; +} + +.thirdRowThirdColumnSpanning2Rows { + grid-column: 3; + grid-row: 3 / span 2; + background-color: maroon; +} + +.thirdRowThirdColumnSpanning2Rows2Columns { + grid-column: 3 / span 2; + grid-row: 3 / span 2; + background-color: aqua; +} + +.endFirstRowEndFirstColumn { + background-color: blue; + grid-column-end: 2; + grid-row-end: 2; +} + +.endFirstRowEndSecondColumn { + background-color: lime; + grid-column-end: 3; + grid-row-end: 2; +} + +.endSecondRowEndFirstColumn { + background-color: purple; + grid-column-end: 2; + grid-row-end: 3; +} + +.endThirdRowEndThirdColumnSpanning2Rows { + grid-column-end: 4; + grid-row: span 2 / 4; + background-color: maroon; +} + +.endThirdRowEndThirdColumnSpanning2Rows2Columns { + grid-column: span 2 / 4; + grid-row: span 2 / 4; + background-color: aqua; +} + +.onlyThirdRowOnlyThirdColumnSpanning2Rows { + grid-column: 3 / 4; + grid-row: 3 / 5; + background-color: maroon; +} + +.onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns { + grid-column: 3 / 5; + grid-row: 3 / 5; + background-color: aqua; +} + +.offsetLeft25 { + left: 25px; +} + +.offsetRight50 { + right: 50px; +} + +.offsetTop75 { + top: 75px; +} + +.offsetBottom100 { + bottom: 100px; +} + +.offsetLeftMinus20 { + left: -20px; +} + +.offsetRightMinus40 { + right: -40px; +} + +.offsetTopMinus60 { + top: -60px; +} + +.offsetBottomMinus80 { + bottom: -80px; +} + +</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"> + <div class="sizedToGridArea absolute autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="530"> + </div> + <div class="sizedToGridArea absolute firstRowFirstColumn" + data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="515"> + </div> + <div class="sizedToGridArea absolute secondRowFirstColumn" + data-offset-x="15" data-offset-y="65" data-expected-width="515" data-expected-height="465"> + </div> + <div class="sizedToGridArea absolute firstRowSecondColumn" + data-offset-x="65" data-offset-y="15" data-expected-width="465" data-expected-height="515"> + </div> + <div class="sizedToGridArea absolute secondRowSecondColumn" + data-offset-x="65" data-offset-y="65" data-expected-width="465" data-expected-height="465"> + </div> + <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows" + data-offset-x="165" data-offset-y="165" data-expected-width="365" data-expected-height="350"> + </div> + <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns" + data-offset-x="165" data-offset-y="165" data-expected-width="350" data-expected-height="350"> + </div> +</div> + +<div class="grid"> + <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows" + data-offset-x="0" data-offset-y="65" data-expected-width="315" data-expected-height="250"> + </div> + <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns" + data-offset-x="65" data-offset-y="65" data-expected-width="250" data-expected-height="250"> + </div> + <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expected-height="165"> + </div> + <div class="sizedToGridArea absolute endSecondRowEndFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expected-height="165"> + </div> + <div class="sizedToGridArea absolute endFirstRowEndSecondColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expected-height="65"> + </div> + <div class="sizedToGridArea absolute endFirstRowEndFirstColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expected-height="65"> + </div> +</div> + +<div class="grid"> + <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn" + data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="50"> + </div> + <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn" + data-offset-x="15" data-offset-y="65" data-expected-width="50" data-expected-height="100"> + </div> + <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn" + data-offset-x="65" data-offset-y="15" data-expected-width="100" data-expected-height="50"> + </div> + <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" + data-offset-x="65" data-offset-y="65" data-expected-width="100" data-expected-height="100"> + </div> + <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns" + data-offset-x="165" data-offset-y="165" data-expected-width="350" data-expected-height="350"> + </div> + <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows" + data-offset-x="165" data-offset-y="165" data-expected-width="150" data-expected-height="350"> + </div> +</div> + +<div class="grid"> + <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75" + data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530"> + </div> + <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80" + data-offset-x="55" data-offset-y="95" data-expected-width="515" data-expected-height="515"> + </div> + <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100" + data-offset-x="-35" data-offset-y="-35" data-expected-width="515" data-expected-height="465"> + </div> + <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60" + data-offset-x="45" data-offset-y="-45" data-expected-width="465" data-expected-height="515"> + </div> + <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75" + data-offset-x="15" data-offset-y="140" data-expected-width="465" data-expected-height="465"> + </div> + <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100" + data-offset-x="190" data-offset-y="65" data-expected-width="365" data-expected-height="350"> + </div> + <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" + data-offset-x="145" data-offset-y="105" data-expected-width="350" data-expected-height="350"> + </div> +</div> + +<div class="grid"> + <div> + <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75" + data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530"> + </div> + <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80" + data-offset-x="55" data-offset-y="95" data-expected-width="515" data-expected-height="515"> + </div> + <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100" + data-offset-x="-35" data-offset-y="-35" data-expected-width="515" data-expected-height="465"> + </div> + <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60" + data-offset-x="45" data-offset-y="-45" data-expected-width="465" data-expected-height="515"> + </div> + <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75" + data-offset-x="15" data-offset-y="140" data-expected-width="465" data-expected-height="465"> + </div> + <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100" + data-offset-x="190" data-offset-y="65" data-expected-width="365" data-expected-height="350"> + </div> + <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" + data-offset-x="145" data-offset-y="105" data-expected-width="350" data-expected-height="350"> + </div> + </div> +</div> + +<div class="grid directionRTL"> + <div class="sizedToGridArea absolute autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="530"> + </div> + <div class="sizedToGridArea absolute firstRowFirstColumn" + data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="515"> + </div> + <div class="sizedToGridArea absolute secondRowFirstColumn" + data-offset-x="0" data-offset-y="65" data-expected-width="515" data-expected-height="465"> + </div> + <div class="sizedToGridArea absolute firstRowSecondColumn" + data-offset-x="0" data-offset-y="15" data-expected-width="465" data-expected-height="515"> + </div> + <div class="sizedToGridArea absolute secondRowSecondColumn" + data-offset-x="0" data-offset-y="65" data-expected-width="465" data-expected-height="465"> + </div> + <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows" + data-offset-x="0" data-offset-y="165" data-expected-width="365" data-expected-height="350"> + </div> + <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns" + data-offset-x="15" data-offset-y="165" data-expected-width="350" data-expected-height="350"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows" + data-offset-x="215" data-offset-y="65" data-expected-width="315" data-expected-height="250"> + </div> + <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2Columns" + data-offset-x="215" data-offset-y="65" data-expected-width="250" data-expected-height="250"> + </div> + <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" + data-offset-x="365" data-offset-y="0" data-expected-width="165" data-expected-height="165"> + </div> + <div class="sizedToGridArea absolute endSecondRowEndFirstColumn" + data-offset-x="465" data-offset-y="0" data-expected-width="65" data-expected-height="165"> + </div> + <div class="sizedToGridArea absolute endFirstRowEndSecondColumn" + data-offset-x="365" data-offset-y="0" data-expected-width="165" data-expected-height="65"> + </div> + <div class="sizedToGridArea absolute endFirstRowEndFirstColumn" + data-offset-x="465" data-offset-y="0" data-expected-width="65" data-expected-height="65"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn" + data-offset-x="465" data-offset-y="15" data-expected-width="50" data-expected-height="50"> + </div> + <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn" + data-offset-x="465" data-offset-y="65" data-expected-width="50" data-expected-height="100"> + </div> + <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn" + data-offset-x="365" data-offset-y="15" data-expected-width="100" data-expected-height="50"> + </div> + <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" + data-offset-x="365" data-offset-y="65" data-expected-width="100" data-expected-height="100"> + </div> + <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns" + data-offset-x="15" data-offset-y="165" data-expected-width="350" data-expected-height="350"> + </div> + <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Rows" + data-offset-x="215" data-offset-y="165" data-expected-width="150" data-expected-height="350"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75" + data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530"> + </div> + <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80" + data-offset-x="40" data-offset-y="95" data-expected-width="515" data-expected-height="515"> + </div> + <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100" + data-offset-x="-50" data-offset-y="-35" data-expected-width="515" data-expected-height="465"> + </div> + <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60" + data-offset-x="-20" data-offset-y="-45" data-expected-width="465" data-expected-height="515"> + </div> + <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75" + data-offset-x="-50" data-offset-y="140" data-expected-width="465" data-expected-height="465"> + </div> + <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100" + data-offset-x="25" data-offset-y="65" data-expected-width="365" data-expected-height="350"> + </div> + <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" + data-offset-x="-35" data-offset-y="105" data-expected-width="350" data-expected-height="350"> + </div> +</div> + +<div class="grid directionRTL"> + <div> + <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTop75" + data-offset-x="25" data-offset-y="75" data-expected-width="530" data-expected-height="530"> + </div> + <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80" + data-offset-x="40" data-offset-y="95" data-expected-width="515" data-expected-height="515"> + </div> + <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100" + data-offset-x="-50" data-offset-y="-35" data-expected-width="515" data-expected-height="465"> + </div> + <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60" + data-offset-x="-20" data-offset-y="-45" data-expected-width="465" data-expected-height="515"> + </div> + <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75" + data-offset-x="-50" data-offset-y="140" data-expected-width="465" data-expected-height="465"> + </div> + <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offsetLeft25 offsetBottom100" + data-offset-x="25" data-offset-y="65" data-expected-width="365" data-expected-height="350"> + </div> + <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Columns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" + data-offset-x="-35" data-offset-y="105" data-expected-width="350" data-expected-height="350"> + </div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html new file mode 100644 index 0000000000..9e7172db43 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.html @@ -0,0 +1,118 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Absolute positioning grid container parent</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="This test checks the behavior of the absolutely positioned elements with a grid container as parent."> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + +.grid { + grid-template-columns: 50px 100px 150px; + grid-template-rows: 25px 50px 100px; + width: 300px; + height: 200px; + border: 5px solid black; + margin: 20px 30px; + padding: 5px 15px; +} + +.container { + width: 500px; + height: 400px; +} + +.relative { + /* Ensures that the element is the containing block of the absolutely positioned elements. */ + position: relative; +} + +.absolute { + position: absolute; +} + +</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('.container'); })"> + +<div id="log"></div> + +<div class="container relative"> + <div class="grid"> + <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div> + </div> +</div> + +<div class="container relative"> + <div class="grid"> + <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div> + </div> +</div> + +<div class="container relative"> + <div class="grid"> + <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="50" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div> + </div> +</div> + +<div class="container"> + <div class="grid relative"> + <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="330" data-expected-height="210"></div> + </div> +</div> + +<div class="container"> + <div class="grid relative"> + <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="15" data-offset-y="5" data-expected-width="315" data-expected-height="205"></div> + </div> +</div> + +<div class="container"> + <div class="grid relative"> + <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="65" data-offset-y="30" data-expected-width="265" data-expected-height="180"></div> + </div> +</div> + +<div class="container relative"> + <div class="grid directionRTL"> + <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div> + </div> +</div> + +<div class="container relative"> + <div class="grid directionRTL"> + <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div> + </div> +</div> + +<div class="container relative"> + <div class="grid directionRTL"> + <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="-150" data-offset-y="10" data-expected-width="500" data-expected-height="400"></div> + </div> +</div> + +<div class="container"> + <div class="grid relative directionRTL"> + <div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="330" data-expected-height="210"></div> + </div> +</div> + +<div class="container"> + <div class="grid relative directionRTL"> + <div class="sizedToGridArea absolute firstRowFirstColumn" data-offset-x="0" data-offset-y="5" data-expected-width="315" data-expected-height="205"></div> + </div> +</div> + +<div class="container"> + <div class="grid relative directionRTL"> + <div class="sizedToGridArea absolute secondRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="265" data-expected-height="180"></div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-002-ref.html new file mode 100644 index 0000000000..0c09ca180f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-002-ref.html @@ -0,0 +1,56 @@ + +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Absolute positioning grid container parent</title> + +<style> + + .grid { + display: grid; + background-color: gray; + grid-template-columns: 50px 100px 150px; + grid-template-rows: 25px 50px 100px; + width: 300px; + height: 200px; + border: 5px solid black; + margin: 20px 30px; + padding: 5px 15px; + } + + .container { + width: 500px; + height: 400px; + /* Ensures that the element is the containing block of the absolutely positioned elements. */ + position: relative; + } + + #item { + width: 100%; + height: 100%; + padding: 10px; + background-color: blue; + grid-column: 1; + grid-row: 1; + } + + #absolute { + position: absolute; + width: 100%; + height: 100%; + background-color: pink; + grid-column: auto; + grid-row: auto; + top: 20px; + left: 60px; + } + +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div class="container"> + <div class="grid"> + <div id="item"></div> + <div id="absolute"></div> + </div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-002.html b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-002.html new file mode 100644 index 0000000000..22c58c9c80 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/absolute-positioning-grid-container-parent-002.html @@ -0,0 +1,46 @@ + +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Absolute positioning grid container parent</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="This test checks the behavior of the absolutely positioned descendant elements with a grid container as parent."> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/grid.css"> + +<style> + + .grid { + grid-template-columns: 50px 100px 150px; + grid-template-rows: 25px 50px 100px; + width: 300px; + height: 200px; + border: 5px solid black; + margin: 20px 30px; + padding: 5px 15px; + } + + .container { + width: 500px; + height: 400px; + } + + .relative { + /* Ensures that the element is the containing block of the absolutely positioned elements. */ + position: relative; + } + + .absolute { + position: absolute; + } + +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div class="container relative"> + <div class="grid"> + <div class="sizedToGridArea firstRowFirstColumn" style="padding: 10px;"> + <div class="sizedToGridArea autoRowAutoColumn absolute"></div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001-ref.html new file mode 100644 index 0000000000..05cdb41b31 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001-ref.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Grid Layout Reference: Grid aligned descendants with static position</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +.grid { + position: relative; + display: grid; + grid: 40px / 40px; + border: 2px solid; + border-top-width: 5px; + border-left-width: 3px; + width: 20px; + padding: 2px 4px 6px 1px; +} +.absolute { + position: absolute; + grid-column: 1 / 2; +} +.content { + float: left; + width: 20px; + height: 40px; + background: green; +} +.content:nth-child(2) { + background: grey; +} + +</style></head> +<body> +There should be no red: + +<div class="grid"> + <div class="absolute" style="margin-top:2px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px"> + <div class="absolute" style="margin-top:2px; margin-left:3px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px"> + <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="padding-bottom: 14px"> + <div class="absolute" style="margin-top:10px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px; padding-left:8px"> + <div class="absolute" style="margin-top:2px; margin-left:3px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001.html new file mode 100644 index 0000000000..ec19e4acff --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-001.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid aligned descendants with static position</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology"> +<link rel="match" href="descendant-static-position-001-ref.html"> +<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct."> +<style> +.grid { + position: relative; + display: grid; + grid: 40px / 40px; + border: 2px solid; + border-top-width: 5px; + border-left-width: 3px; + width: 20px; + padding: 2px 4px 6px 1px; +} +.grid > div { + background: red; + background-clip: content-box; +} +.absolute { + position: absolute; + background: red; + grid-column: 1 / 2; +} +.content { + float: left; + width: 20px; + height: 40px; + background: green; +} +.content:nth-child(2) { + background: grey; +} + +</style></head> +<body> +There should be no red: + +<div class="grid"> + <div> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px"> + <div style="padding-left:3px"> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px"> + <div style="border-left:2px solid black; padding-left:1px"> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="padding-top:10px"> + <div> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 10px 33px; padding-left:8px"> + <div style="padding-left:3px"> + <div class="absolute" style="grid-column: 2 / 3"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002-ref.html new file mode 100644 index 0000000000..f1a3d9efeb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002-ref.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Grid Layout Reference: Grid aligned descendants with static position (direction: rtl)</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +.grid { + position: relative; + display: grid; + grid: 40px / 40px; + border: 2px solid; + border-top-width: 5px; + border-left-width: 3px; + width: 20px; + padding: 2px 4px 6px 1px; + direction: rtl; + margin-left: 40px; +} +.absolute { + position: absolute; + grid-column: 1 / 2; +} +.content { + float: right; + width: 20px; + height: 40px; + background: green; +} +.content:nth-child(2) { + background: grey; +} + +</style></head> +<body> +There should be no red: + +<div class="grid"> + <div class="absolute" style="margin-top:2px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px"> + <div class="absolute" style="margin-top:2px; margin-left:3px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px"> + <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="padding-bottom: 14px"> + <div class="absolute" style="margin-top:10px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px; padding-right:8px"> + <div class="absolute" style="margin-top:2px; margin-left:3px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px; padding-right:8px; padding-left:10px"> + <div class="absolute" style="margin-top:2px;"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002.html new file mode 100644 index 0000000000..97fa299c0a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-002.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid aligned descendants with static position (direction: rtl)</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology"> +<link rel="match" href="descendant-static-position-002-ref.html"> +<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct."> +<style> +.grid { + position: relative; + display: grid; + grid: 40px / 40px; + border: 2px solid; + border-top-width: 5px; + border-left-width: 3px; + width: 20px; + padding: 2px 4px 6px 1px; + direction: rtl; + margin-left: 40px; +} +.grid > div { + background: red; + background-clip: content-box; +} +.absolute { + position: absolute; + background: red; + grid-column: 1 / 2; +} +.content { + float: right; + width: 20px; + height: 40px; + background: green; +} +.content:nth-child(2) { + background: grey; +} + +</style></head> +<body> +There should be no red: + +<div class="grid"> + <div> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px"> + <div style="padding-left:3px"> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px"> + <div style="border-left:2px solid black; padding-left:1px"> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="padding-top:10px"> + <div> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px"> + <div style="padding-left:3px"> + <div class="absolute" style="grid-column: 2 / 3"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px; padding-left:10px"> + <div style="padding-left:3px"> + <div class="absolute" style="grid-column: 2 / 3"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003-ref.html new file mode 100644 index 0000000000..953d45de01 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Grid Layout Reference: Grid aligned descendants with static position</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +.grid { + position: relative; + display: grid; + grid: 40px / 40px; + border: 2px solid; + border-top-width: 5px; + border-left-width: 3px; + width: 100px; + justify-content: end; + padding: 2px 4px 6px 1px; +} +.absolute { + position: absolute; + grid-column: 1 / 2; +} +.content { + float: left; + width: 20px; + height: 40px; + background: green; +} +.content:nth-child(2) { + background: grey; +} + +</style></head> +<body> +There should be no red: + +<div class="grid"> + <div class="absolute" style="margin-top:2px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px"> + <div class="absolute" style="margin-top:2px; margin-left:3px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px"> + <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:1px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="padding-bottom: 14px"> + <div class="absolute" style="margin-top:10px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px; padding-left:8px"> + <div class="absolute" style="margin-top:2px; margin-left:3px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003.html new file mode 100644 index 0000000000..399ade2e87 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-003.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid aligned descendants with static position</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology"> +<link rel="match" href="descendant-static-position-003-ref.html"> +<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct."> +<style> +.grid { + position: relative; + display: grid; + grid: 40px / 40px; + border: 2px solid; + border-top-width: 5px; + border-left-width: 3px; + width: 100px; + justify-content: end; + padding: 2px 4px 6px 1px; +} +.grid > div { + background: red; + background-clip: content-box; +} +.absolute { + position: absolute; + background: red; + grid-column: 1 / 2; +} +.content { + float: left; + width: 20px; + height: 40px; + background: green; +} +.content:nth-child(2) { + background: grey; +} + +</style></head> +<body> +There should be no red: + +<div class="grid"> + <div> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px"> + <div style="padding-left:3px"> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px"> + <div style="border-left:2px solid black; padding-left:1px"> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="padding-top:10px"> + <div> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 10px 33px; padding-left:8px"> + <div style="padding-left:3px"> + <div class="absolute" style="grid-column: 2 / 3"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004-ref.html new file mode 100644 index 0000000000..3da40c17eb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004-ref.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Grid Layout Reference: Grid aligned descendants with static position (direction: rtl)</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +.grid { + position: relative; + display: grid; + grid: 40px / 40px; + border: 2px solid; + border-top-width: 5px; + border-left-width: 3px; + width: 100px; + justify-content: center; + padding: 2px 4px 6px 1px; + direction: rtl; + margin-left: 40px; +} +.absolute { + position: absolute; + grid-column: 1 / 2; +} +.content { + float: right; + width: 20px; + height: 40px; + background: green; +} +.content:nth-child(2) { + background: grey; +} + +</style></head> +<body> +There should be no red: + +<div class="grid"> + <div class="absolute" style="margin-top:2px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 44px"> + <div class="absolute" style="margin-top:2px; margin-left:4px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 44px"> + <div class="absolute" style="margin-top:2px; border-left:2px solid black; padding-left:2px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="padding-bottom: 14px"> + <div class="absolute" style="margin-top:10px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px; padding-right:8px"> + <div class="absolute" style="margin-top:2px; margin-left:3px"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 43px; padding-right:8px; padding-left:10px"> + <div class="absolute" style="margin-top:2px;"> + <div class="content"></div> + <div class="content"></div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004.html b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004.html new file mode 100644 index 0000000000..5f87dccd80 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/descendant-static-position-004.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid aligned descendants with static position (direction: rtl)</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-align-3/#staticpos-rect" title="Appendix A: Static Position Terminology"> +<link rel="match" href="descendant-static-position-004-ref.html"> +<meta name="assert" content="This test checks that the position and size of the abs.pos. descendant is correct."> +<style> +.grid { + position: relative; + display: grid; + grid: 40px / 40px; + border: 2px solid; + border-top-width: 5px; + border-left-width: 3px; + width: 100px; + justify-content: center; + padding: 2px 4px 6px 1px; + direction: rtl; + margin-left: 40px; +} +.grid > div { + background: red; + background-clip: content-box; +} +.absolute { + position: absolute; + background: red; + grid-column: 1 / 2; +} +.content { + float: right; + width: 20px; + height: 40px; + background: green; +} +.content:nth-child(2) { + background: grey; +} + +</style></head> +<body> +There should be no red: + +<div class="grid"> + <div> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 44px"> + <div style="padding-left:4px"> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 44px"> + <div style="border-left:2px solid black; padding-left:2px"> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="padding-top:10px"> + <div> + <div class="absolute"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px"> + <div style="padding-left:3px"> + <div class="absolute" style="grid-column: 2 / 3"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +<div class="grid" style="grid-template-columns: 10px 33px; padding-right:8px; padding-left:10px"> + <div style="padding-left:3px"> + <div class="absolute" style="grid-column: 2 / 3"> + <div class="content"></div> + <div class="content"></div> + </div> + </div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/empty-grid-001.html b/testing/web-platform/tests/css/css-grid/abspos/empty-grid-001.html new file mode 100644 index 0000000000..10702c76e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/empty-grid-001.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<title>CSS Grid: empty grid without explicit tracks.</title> +<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos"/> +<link rel="issue" href="https://crrev.com/562167"/> +<meta name="assert" content="Test ensures that the grids with no in-flow items are actually empty."/> + +<link href="/css/support/grid.css" rel="stylesheet"/> +<link href="/css/support/width-keyword-classes.css" rel="stylesheet"/> +<link href="/fonts/ahem.css" rel="stylesheet" type="text/css"/> +<style> +.gridWithAbsolutePositionedItem { + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.grid { + grid-auto-columns: 200px; + grid-auto-rows: 200px; +} + +.item { + position: absolute; + 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> +function addRemoveItem() +{ + var gridItem = document.createElement("div"); + gridItem.style.width = "100px"; + gridItem.style.height = "100px"; + gridItem.style.backgroundColor = "red"; + var gridElement = document.getElementById("dynamicGrid"); + gridElement.appendChild(gridItem); + gridElement.removeChild(gridItem); +} + +setup({ explicit_done: true }); + +function doTest() { + addRemoveItem(); + checkLayout(".grid"); +} +</script> + +<body onload="document.fonts.ready.then(() => { doTest(); })"> + +<div class="grid min-content" data-expected-width="0" data-expected-height="0"></div> + +<div class="grid min-content gridWithAbsolutePositionedItem" data-expected-width="0" data-expected-height="0"> + <div class="item" data-expected-width="40" data-expected-height="10">XXXX</div> +</div> + +<div id="dynamicGrid" class="grid min-content" data-expected-width="0" data-expected-height="0"></div> + +<div class="grid min-content" style="grid-template-rows: 100px;" data-expected-width="0" data-expected-height="100"></div> +<div class="grid min-content" style="grid-template-rows: auto;" data-expected-width="0" data-expected-height="0"></div> +<div class="grid min-content" style="grid-template-rows: 1fr;" data-expected-width="0" data-expected-height="0"></div> + +<div class="grid min-content" style="grid-template-columns: 100px;" data-expected-width="100" data-expected-height="0"></div> +<div class="grid min-content" style="grid-template-columns: auto;" data-expected-width="0" data-expected-height="0"></div> +<div class="grid min-content" style="grid-template-columns: 1fr;" data-expected-width="0" data-expected-height="0"></div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-001-ref.html new file mode 100644 index 0000000000..cb6d12be4e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-001-ref.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + margin-left: 3px; + } + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-001.html new file mode 100644 index 0000000000..8fd4eca36c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-001.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-001-ref.html"> + <style> + .container { + display: grid; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-002-ref.html new file mode 100644 index 0000000000..ddb89d1fb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-002-ref.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignStart { margin-top: 0px; } + .big .alignCenter { margin-top: 12px; } + .big .alignEnd { margin-top: 24px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-002.html new file mode 100644 index 0000000000..a78dfc4245 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-002.html @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-002-ref.html"> + <style> + .container { + display: grid; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-001-ref.html new file mode 100644 index 0000000000..06d9d36612 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-001-ref.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 40px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + margin-left: 3px; + display: block; + } + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -7px; } + .small .alignEnd { margin-top: -14px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--right--></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--right--></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-001.html new file mode 100644 index 0000000000..cb5906603b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-001.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos replaced children in a grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-img-001-ref.html"> + <style> + .container { + display: grid; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 40px; + width: 22px; + grid: 2px 30px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: right"></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: right"></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-002-ref.html new file mode 100644 index 0000000000..368f1a7a5d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-002-ref.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 40px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + margin-bottom: 25px; /* to reduce overlap between overflowing images */ + } + + .container > * { + display: block; + } + .big .alignStart { margin-top: 0px; } + .big .alignCenter { margin-top: 12px; } + .big .alignEnd { margin-top: 24px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -7px; } + .small .alignEnd { margin-top: -14px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--right--></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--right--></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-002.html new file mode 100644 index 0000000000..5b029df849 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-002.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos replaced children in a static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-img-002-ref.html"> + <style> + .container { + display: grid; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 40px; + width: 22px; + grid: 2px 30px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + margin-bottom: 25px; /* to reduce overlap between overflowing images */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: right"></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: right"></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-001-ref.html new file mode 100644 index 0000000000..37655b038c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-001-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 40px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + margin-left: 3px; + display: block; + } + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -7px; } + .small .alignEnd { margin-top: -14px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + </div> + <div class="small"> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-001.html new file mode 100644 index 0000000000..35fb55cfe9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-001.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos replaced children in a grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-img-last-baseline-001-ref.html"> + <style> + .container { + display: grid; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 40px; + width: 22px; + grid: 2px 30px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: last baseline"></div> + </div> + <div class="small"> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: last baseline"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-002-ref.html new file mode 100644 index 0000000000..f35fb48ce1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-002-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 40px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + display: block; + } + .big .alignEnd { margin-top: 24px; } + .small .alignEnd { margin-top: -14px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + </div> + <div class="small"> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-002.html new file mode 100644 index 0000000000..028781586c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-img-last-baseline-002.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos replaced children in a static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-img-last-baseline-002-ref.html"> + <style> + .container { + display: grid; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 40px; + width: 22px; + grid: 2px 30px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: last baseline"></div> + </div> + <div class="small"> + <div class="container"><img src="support/colors-8x16.png" + style="align-self: last baseline"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-001-ref.html new file mode 100644 index 0000000000..6bc5ba4f8c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-001-ref.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + margin-left: 3px; + } + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-001.html new file mode 100644 index 0000000000..da6ce34a89 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-001.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-last-baseline-001-ref.html"> + <style> + .container { + display: grid; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-002-ref.html new file mode 100644 index 0000000000..d023258177 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-002-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big .alignEnd { margin-top: 24px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-002.html new file mode 100644 index 0000000000..54fb9ae77b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-last-baseline-002.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-last-baseline-002-ref.html"> + <style> + .container { + display: grid; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + align-items: center; /* To exercise 'align-self: auto' on children */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-001-ref.html new file mode 100644 index 0000000000..a5ad3a3427 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-001-ref.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 11px; } + .small > .container > * { margin-left: -7px; } + + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-001.html new file mode 100644 index 0000000000..31def24fe8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-001.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a RTL grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-rtl-001-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-002-ref.html new file mode 100644 index 0000000000..a5ad3a3427 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-002-ref.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 11px; } + .small > .container > * { margin-left: -7px; } + + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-002.html new file mode 100644 index 0000000000..21936e964d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-002.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos LTR children in a RTL grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-rtl-002-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + direction: ltr; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-003-ref.html new file mode 100644 index 0000000000..dde6f96745 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-003-ref.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 14px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { margin-top: 0px; } + .big .alignCenter { margin-top: 12px; } + .big .alignEnd { margin-top: 24px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-003.html new file mode 100644 index 0000000000..e53bd19338 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-003.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a RTL static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-rtl-003-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-004-ref.html new file mode 100644 index 0000000000..dde6f96745 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-004-ref.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 14px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { margin-top: 0px; } + .big .alignCenter { margin-top: 12px; } + .big .alignEnd { margin-top: 24px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-004.html new file mode 100644 index 0000000000..12805427e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-004.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos LTR children in a RTL static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-rtl-004-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + direction: ltr; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-001-ref.html new file mode 100644 index 0000000000..9c838e9eaf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-001-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 11px; } + .small > .container > * { margin-left: -7px; } + + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-001.html new file mode 100644 index 0000000000..8804a39a56 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-001.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a RTL grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-rtl-last-baseline-001-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-002-ref.html new file mode 100644 index 0000000000..9c838e9eaf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-002-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 11px; } + .small > .container > * { margin-left: -7px; } + + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-002.html new file mode 100644 index 0000000000..e63bfa2813 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-002.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos LTR children in a RTL grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-rtl-last-baseline-002-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + direction: ltr; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-003-ref.html new file mode 100644 index 0000000000..61d6d59fdf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-003-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 14px; } + .small > .container > * { margin-left: -4px; } + + .big .alignEnd { margin-top: 24px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-003.html new file mode 100644 index 0000000000..7f07b13524 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-003.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a RTL static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-rtl-last-baseline-003-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-004-ref.html new file mode 100644 index 0000000000..61d6d59fdf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-004-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 14px; } + .small > .container > * { margin-left: -4px; } + + .big .alignEnd { margin-top: 24px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-004.html new file mode 100644 index 0000000000..b40e60488f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-rtl-last-baseline-004.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos LTR children in a RTL static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-rtl-last-baseline-004-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + direction: ltr; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-safe-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-safe-001-ref.html new file mode 100644 index 0000000000..5e7fd9f9a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-safe-001-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>Reference: Testing safe overflow-position for align-self and justify-self in absolutely positioned boxes in grid containers in both horizontal and vertical writing modes</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <style> + .container { + display: grid; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + width: 30px; + height: 25px; + grid: 3px 14px 3px / 2px 20px 2px; + } + br { clear: both } + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 21px; + height: 21px; + justify-self: start; + align-self: start; + } + .vertRL { + writing-mode: vertical-rl; + } + .relPos { + position: relative; + } + .relPos > * { + height: 35px; + width: 33px; + } + </style> +</head> +<body> + <div class="container vertRL"><div></div></div> + <div class="container"><div></div></div> + <div class="container relPos vertRL"><div></div></div> + <div class="container relPos"><div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-safe-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-safe-001.html new file mode 100644 index 0000000000..58ccaaf01d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-safe-001.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Testing safe overflow-position for align-self and justify-self in absolutely positioned boxes in grid containers in both horizontal and vertical writing modes</title> + <link rel="author" title="Mihir Iyer" href="mailto:miyer@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-flexbox/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-safe-001-ref.html"> + <style> + .container { + display: grid; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + width: 30px; + height: 25px; + grid: 3px 14px 3px / 2px 20px 2px; + } + br { clear: both } + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 21px; + height: 21px; + justify-self: safe end; + align-self: safe center; + } + .vertRL { + writing-mode: vertical-rl; + } + .relPos { + position: relative; + } + .relPos > * { + height: 35px; + width: 33px; + } + </style> +</head> +<body> + <div class="container vertRL"><div></div></div> + <div class="container"><div></div></div> + <div class="container relPos vertRL"><div></div></div> + <div class="container relPos"><div></div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-001-ref.html new file mode 100644 index 0000000000..dd151d46fd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-001-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 22px; } + .big .alignCenter { margin-left: 15px; } + .big .alignEnd { margin-left: 8px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-001.html new file mode 100644 index 0000000000..2feeb2c3a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-001.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a vertical-rl grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-001-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-002-ref.html new file mode 100644 index 0000000000..60bd0cec26 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-002-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 22px; } + .big .alignCenter { margin-left: 15px; } + .big .alignEnd { margin-left: 8px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-002.html new file mode 100644 index 0000000000..659f6b727e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-002.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-002-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + writing-mode: horizontal-tb; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-003-ref.html new file mode 100644 index 0000000000..dbbb29e457 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-003-ref.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignStart { margin-left: 24px; } + .big .alignCenter { margin-left: 12px; } + .big .alignEnd { margin-left: 0px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-003.html new file mode 100644 index 0000000000..61bdc0496e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-003.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a vertical-rl static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-003-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-004-ref.html new file mode 100644 index 0000000000..c6346bbe43 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-004-ref.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignStart { margin-left: 24px; } + .big .alignCenter { margin-left: 12px; } + .big .alignEnd { margin-left: 0px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-004.html new file mode 100644 index 0000000000..84e9265aad --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-004.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos horizontal-tb children in a static-pos vertical-rl grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-004-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + writing-mode: horizontal-tb; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various align-self values, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="align-self: auto"></div></div> + <div class="container"><div style="align-self: normal"></div></div> + <div class="container"><div style="align-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="align-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="align-self: center"></div></div> + <div class="container"><div style="align-self: start"></div></div> + <div class="container"><div style="align-self: end"></div></div> + <div class="container"><div style="align-self: self-start"></div></div> + <div class="container"><div style="align-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="align-self: flex-start"></div></div> + <div class="container"><div style="align-self: flex-end"></div></div> + <div class="container"><div style="align-self: left"></div></div> + <div class="container"><div style="align-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-001-ref.html new file mode 100644 index 0000000000..abd41fca4f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-001-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 22px; } + .big .alignCenter { margin-left: 15px; } + .big .alignEnd { margin-left: 8px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-001.html new file mode 100644 index 0000000000..be1bc8cce9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-001.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a vertical-rl grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-last-baseline-001-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-002-ref.html new file mode 100644 index 0000000000..abd41fca4f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-002-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 22px; } + .big .alignCenter { margin-left: 15px; } + .big .alignEnd { margin-left: 8px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-002.html new file mode 100644 index 0000000000..26e1b8dadf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-002.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-last-baseline-002-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + writing-mode: horizontal-tb; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-003-ref.html new file mode 100644 index 0000000000..afa9b43fce --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-003-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignEnd { margin-left: 0px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-003.html new file mode 100644 index 0000000000..7023e2ef4f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-003.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a vertical-rl static-pos grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-last-baseline-003-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-004-ref.html new file mode 100644 index 0000000000..afa9b43fce --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-004-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignEnd { margin-left: 0px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-004.html new file mode 100644 index 0000000000..e39e6b391a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-align-self-vertWM-last-baseline-004.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos horizontal-tb children in a static-pos vertical-rl grid container, with various "align-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-align-self-vertWM-last-baseline-004-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 2px 20px 2px / 3px 14px 3px; + } + .small > .container { + grid: 0px 2px 0px / 3px 2px 3px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + writing-mode: horizontal-tb; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="align-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-001-ref.html new file mode 100644 index 0000000000..982e0c6784 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-001-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 2px; } + .big .alignCenter { margin-left: 9px; } + .big .alignEnd { margin-left: 16px; } + .small .alignStart { margin-left: 0px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-001.html new file mode 100644 index 0000000000..3f9a59f6b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-001.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-001-ref.html"> + <style> + .container { + display: grid; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + justify-items: center; /* To exercise 'justify-self: auto' on children */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-002-ref.html new file mode 100644 index 0000000000..cb0fb93ba4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-002-ref.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignStart { margin-left: 0px; } + .big .alignCenter { margin-left: 12px; } + .big .alignEnd { margin-left: 24px; } + .small .alignStart { margin-left: 0px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignCenter"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-002.html new file mode 100644 index 0000000000..d0b607565e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-002.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-002-ref.html"> + <style> + .container { + display: grid; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + justify-items: center; /* To exercise 'justify-self: auto' on children */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-001-ref.html new file mode 100644 index 0000000000..29a2961e1d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-001-ref.html @@ -0,0 +1,123 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 40px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + margin-top: 3px; + display: block; + } + .big .alignStart { margin-left: 2px; } + .big .alignCenter { margin-left: 13px; } + .big .alignEnd { margin-left: 24px; } + .small .alignStart { margin-left: 0px; } + .small .alignCenter { margin-left: -3px; } + .small .alignEnd { margin-left: -6px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--right--></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--right--></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-001.html new file mode 100644 index 0000000000..d402fd889a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-001.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos replaced children in a grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-img-001-ref.html"> + <style> + .container { + display: grid; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 40px; + height: 22px; + grid: 3px 14px 3px / 2px 30px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: right"></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: right"></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-002-ref.html new file mode 100644 index 0000000000..50ea8ba321 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-002-ref.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 9px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 40px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + display: block; + } + .big .alignStart { margin-left: 0px; } + .big .alignCenter { margin-left: 16px; } + .big .alignEnd { margin-left: 32px; } + .small .alignStart { margin-left: 0px; } + .small .alignCenter { margin-left: -3px; } + .small .alignEnd { margin-left: -6px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--right--></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--auto--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--normal--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--stretch--></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--baseline--></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignCenter"><!--center--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--self-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--self-end--></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--flex-start--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--flex-end--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignStart"><!--left--></div> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--right--></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-002.html new file mode 100644 index 0000000000..6f4e865732 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-002.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos replaced children in a static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-img-002-ref.html"> + <style> + .container { + display: grid; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 9px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 40px; + height: 22px; + grid: 3px 14px 3px / 2px 30px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: right"></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: auto"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: normal"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: stretch"></div> + <br> + <!-- <baseline-position> --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: baseline"></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: center"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: self-end"></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-start"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: flex-end"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: left"></div> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: right"></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-001-ref.html new file mode 100644 index 0000000000..401cc7cc41 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-001-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 40px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + margin-top: 3px; + display: block; + } + .big .alignStart { margin-left: 2px; } + .big .alignCenter { margin-left: 13px; } + .big .alignEnd { margin-left: 24px; } + .small .alignStart { margin-left: 0px; } + .small .alignCenter { margin-left: -3px; } + .small .alignEnd { margin-left: -6px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + </div> + <div class="small"> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-001.html new file mode 100644 index 0000000000..76e8a62c26 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-001.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos replaced children in a grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-img-last-baseline-001-ref.html"> + <style> + .container { + display: grid; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 40px; + height: 22px; + grid: 3px 14px 3px / 2px 30px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: last baseline"></div> + </div> + <div class="small"> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: last baseline"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-002-ref.html new file mode 100644 index 0000000000..62c9fe896c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-002-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 9px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 40px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + display: block; + } + .big .alignEnd { margin-left: 32px; } + .small .alignEnd { margin-left: -6px; } + </style> +</head> +<body> + <div class="big"> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + </div> + <div class="small"> + <div class="container"><img src="support/colors-8x16.png" + class="alignEnd"><!--last baseline--></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-002.html new file mode 100644 index 0000000000..57c738d89a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-img-last-baseline-002.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos replaced children in a static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-img-last-baseline-002-ref.html"> + <style> + .container { + display: grid; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 9px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 40px; + height: 22px; + grid: 3px 14px 3px / 2px 30px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-bottom: 20px; /* to reduce overlap between overflowing images */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: last baseline"></div> + </div> + <div class="small"> + <div class="container"><img src="support/colors-8x16.png" + style="justify-self: last baseline"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-001-ref.html new file mode 100644 index 0000000000..d19b16591c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-001-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 2px; } + .big .alignCenter { margin-left: 9px; } + .big .alignEnd { margin-left: 16px; } + .small .alignStart { margin-left: 0px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: -4px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-001.html new file mode 100644 index 0000000000..2328268a63 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-001.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-last-baseline-001-ref.html"> + <style> + .container { + display: grid; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + justify-items: center; /* To exercise 'justify-self: auto' on children */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-002-ref.html new file mode 100644 index 0000000000..299abbae3a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-002-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignEnd { margin-left: 24px; } + .small .alignEnd { margin-left: -4px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-002.html new file mode 100644 index 0000000000..4ae8b5de87 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-last-baseline-002.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-last-baseline-002-ref.html"> + <style> + .container { + display: grid; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + justify-items: center; /* To exercise 'justify-self: auto' on children */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-001-ref.html new file mode 100644 index 0000000000..32c9ed2751 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-001-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 22px; } + .big .alignCenter { margin-left: 15px; } + .big .alignEnd { margin-left: 8px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-001.html new file mode 100644 index 0000000000..3080c49453 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-001.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a RTL grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-001-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-002-ref.html new file mode 100644 index 0000000000..4dea2074a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-002-ref.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 22px; } + .big .alignCenter { margin-left: 15px; } + .big .alignEnd { margin-left: 8px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-002.html new file mode 100644 index 0000000000..4c3a4a849e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-002.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos LTR children in a RTL grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-002-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + direction: ltr; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-003-ref.html new file mode 100644 index 0000000000..602d0a51b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-003-ref.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignStart { margin-left: 24px; } + .big .alignCenter { margin-left: 12px; } + .big .alignEnd { margin-left: 0px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-003.html new file mode 100644 index 0000000000..f27bb62c04 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-003.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a RTL static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-003-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-004-ref.html new file mode 100644 index 0000000000..ebf46d7626 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-004-ref.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignStart { margin-left: 24px; } + .big .alignCenter { margin-left: 12px; } + .big .alignEnd { margin-left: 0px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignEnd"><!--self-start--></div></div> + <div class="container"><div class="alignStart"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignEnd"><!--left--></div></div> + <div class="container"><div class="alignStart"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-004.html new file mode 100644 index 0000000000..a8647bbe87 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-004.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos LTR children in a RTL static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-004-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + direction: ltr; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-001-ref.html new file mode 100644 index 0000000000..d051371aaa --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-001-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 22px; } + .big .alignCenter { margin-left: 15px; } + .big .alignEnd { margin-left: 8px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-001.html new file mode 100644 index 0000000000..1f2be10532 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-001.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a RTL grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-last-baseline-001-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-002-ref.html new file mode 100644 index 0000000000..d051371aaa --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-002-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + margin-top: 3px; + } + .big .alignStart { margin-left: 22px; } + .big .alignCenter { margin-left: 15px; } + .big .alignEnd { margin-left: 8px; } + .small .alignStart { margin-left: -4px; } + .small .alignCenter { margin-left: -2px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-002.html new file mode 100644 index 0000000000..519c96f27b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-002.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos LTR children in a RTL grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-last-baseline-002-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + direction: ltr; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-003-ref.html new file mode 100644 index 0000000000..c70533d399 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-003-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignEnd { margin-left: 0px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-003.html new file mode 100644 index 0000000000..90af5052cc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-003.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a RTL static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-last-baseline-003-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-004-ref.html new file mode 100644 index 0000000000..c70533d399 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-004-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + } + .small > .container { + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + background: teal; + width: 6px; + height: 8px; + } + .big .alignEnd { margin-left: 0px; } + .small .alignEnd { margin-left: 0px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-004.html new file mode 100644 index 0000000000..66df456e7b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-rtl-last-baseline-004.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos LTR children in a RTL static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-rtl-last-baseline-004-ref.html"> + <style> + .container { + display: grid; + direction: rtl; + padding: 2px 1px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + width: 30px; + height: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + width: 2px; + height: 4px; + margin-right: 10px; /* To avoid overlap between overflowing kids */ + } + + .container > * { + position: absolute; + direction: ltr; + grid-area: 2 / 2 / 3 / 3; + background: teal; + width: 6px; + height: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-001-ref.html new file mode 100644 index 0000000000..1914d557a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-001-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + margin-top: 3px; + } + .big > .container > * { margin-left: 11px; } + .small > .container > * { margin-left: -7px; } + + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-001.html new file mode 100644 index 0000000000..ef5af105f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-001.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a vertical-rl grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-001-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-002-ref.html new file mode 100644 index 0000000000..1914d557a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-002-ref.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + margin-top: 3px; + } + .big > .container > * { margin-left: 11px; } + .small > .container > * { margin-left: -7px; } + + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-002.html new file mode 100644 index 0000000000..bed8a0a75c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-002.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-002-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + writing-mode: horizontal-tb; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-003-ref.html new file mode 100644 index 0000000000..a13d8fd959 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-003-ref.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 14px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { margin-top: 0px; } + .big .alignCenter { margin-top: 12px; } + .big .alignEnd { margin-top: 24px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-003.html new file mode 100644 index 0000000000..2626c49d22 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-003.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a vertical-rl static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-003-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-004-ref.html new file mode 100644 index 0000000000..a13d8fd959 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-004-ref.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 14px; } + .small > .container > * { margin-left: -4px; } + + .big .alignStart { margin-top: 0px; } + .big .alignCenter { margin-top: 12px; } + .big .alignEnd { margin-top: 24px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div class="alignStart"><!--auto--></div></div> + <div class="container"><div class="alignStart"><!--normal--></div></div> + <div class="container"><div class="alignStart"><!--stretch--></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div class="alignStart"><!--baseline--></div></div> + <br> + <!-- <self-position>, part 1: --> + <div class="container"><div class="alignCenter"><!--center--></div></div> + <div class="container"><div class="alignStart"><!--start--></div></div> + <div class="container"><div class="alignEnd"><!--end--></div></div> + <div class="container"><div class="alignStart"><!--self-start--></div></div> + <div class="container"><div class="alignEnd"><!--self-end--></div></div> + <br> + <!-- <self-position>, part 2: --> + <div class="container"><div class="alignStart"><!--flex-start--></div></div> + <div class="container"><div class="alignEnd"><!--flex-end--></div></div> + <div class="container"><div class="alignStart"><!--left--></div></div> + <div class="container"><div class="alignEnd"><!--right--></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-004.html new file mode 100644 index 0000000000..4574da3a82 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-004.html @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-004-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + writing-mode: horizontal-tb; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <div class="big"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> + <div class="small"> + <!-- The various justify-self values, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <!-- auto | normal | stretch --> + <div class="container"><div style="justify-self: auto"></div></div> + <div class="container"><div style="justify-self: normal"></div></div> + <div class="container"><div style="justify-self: stretch"></div></div> + <br> + <!-- <baseline-position> --> + <div class="container"><div style="justify-self: baseline"></div></div> + <br> + <!-- <self-position>, part 1 --> + <div class="container"><div style="justify-self: center"></div></div> + <div class="container"><div style="justify-self: start"></div></div> + <div class="container"><div style="justify-self: end"></div></div> + <div class="container"><div style="justify-self: self-start"></div></div> + <div class="container"><div style="justify-self: self-end"></div></div> + <br> + <!-- <self-position>, part 2 --> + <div class="container"><div style="justify-self: flex-start"></div></div> + <div class="container"><div style="justify-self: flex-end"></div></div> + <div class="container"><div style="justify-self: left"></div></div> + <div class="container"><div style="justify-self: right"></div></div> + <br> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-001-ref.html new file mode 100644 index 0000000000..7857835a31 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-001-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + margin-top: 3px; + } + .big > .container > * { margin-left: 11px; } + .small > .container > * { margin-left: -7px; } + + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-align-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-001.html new file mode 100644 index 0000000000..f7ada7a8e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-001.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a vertical-rl grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-last-baseline-001-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-002-ref.html new file mode 100644 index 0000000000..fb1c5fda3b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-002-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + margin-top: 3px; + } + .big > .container > * { margin-left: 11px; } + .small > .container > * { margin-left: -7px; } + + .big .alignStart { margin-top: 2px; } + .big .alignCenter { margin-top: 9px; } + .big .alignEnd { margin-top: 16px; } + .small .alignStart { margin-top: 0px; } + .small .alignCenter { margin-top: -2px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-002.html new file mode 100644 index 0000000000..aa1303d353 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-002.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-last-baseline-002-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + position: relative; + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + writing-mode: horizontal-tb; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-003-ref.html new file mode 100644 index 0000000000..83b9391ef3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-003-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 14px; } + .small > .container > * { margin-left: -4px; } + + .big .alignEnd { margin-top: 24px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-003.html new file mode 100644 index 0000000000..4ab166e688 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-003.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos children in a vertical-rl static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-last-baseline-003-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-004-ref.html new file mode 100644 index 0000000000..83b9391ef3 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-004-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + .container { + display: block; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + } + .small > .container { + height: 2px; + width: 4px; + } + + .container > * { + background: teal; + height: 6px; + width: 8px; + } + .big > .container > * { margin-left: 14px; } + .small > .container > * { margin-left: -4px; } + + .big .alignEnd { margin-top: 24px; } + .small .alignEnd { margin-top: -4px; } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> + <div class="small"> + <div class="container"><div class="alignEnd"><!--last baseline--></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-004.html new file mode 100644 index 0000000000..26e7e66b0a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-abspos-staticpos-justify-self-vertWM-last-baseline-004.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: Static position of abspos horizontal-tb children in a vertical-rl static-pos grid container, with various "justify-self" values</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://drafts.csswg.org/css-grid/#abspos-items"> + <link rel="match" href="grid-abspos-staticpos-justify-self-vertWM-last-baseline-004-ref.html"> + <style> + .container { + display: grid; + writing-mode: vertical-rl; + padding: 1px 2px; + border: 1px solid black; + background: yellow; + margin-bottom: 5px; + margin-right: 5px; + float: left; /* For testing in "rows" of containers */ + } + br { clear: both } + + .big > .container { + height: 30px; + width: 22px; + grid: 3px 14px 3px / 2px 20px 2px; + } + .small > .container { + grid: 3px 2px 3px / 0px 2px 0px; + height: 2px; + width: 4px; + } + + .container > * { + position: absolute; + writing-mode: horizontal-tb; + grid-area: 2 / 2 / 3 / 3; + background: teal; + height: 6px; + width: 8px; + } + </style> +</head> +<body> + <!-- The last baseline value, from + https://www.w3.org/TR/css-align-3/#propdef-justify-self --> + <div class="big"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> + <div class="small"> + <div class="container"><div style="justify-self: last baseline"></div></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-item-absolute-positioning-dynamic-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-item-absolute-positioning-dynamic-001.html new file mode 100644 index 0000000000..bcd5dbaab5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-item-absolute-positioning-dynamic-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html lang=en class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid item absolute positioning dynamic</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<meta name="assert" content="This test checks that a grid item which becomes an absolutelly positioned children of a grid."> +<style> +#wrapper { + width: 200px; + height: 200px; + position: relative; + background: red; +} + +#grid { + display: grid; + grid: 100px / 100px; +} + +#item { + background: green; + width: 100%; + height: 100%; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="wrapper"> + <div id="grid"> + <div id="item"></div> + </div> +</div> + +<script> + window.requestAnimationFrame(() => { + document.getElementById("item").style.position = "absolute"; + document.body.offsetLeft; + document.documentElement.classList.remove('reftest-wait'); + }); +</script> + +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-paint-positioned-children-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-paint-positioned-children-001-ref.html new file mode 100644 index 0000000000..ac2a95e796 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-paint-positioned-children-001-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid paint positioned children reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +.grid { + border: 2px solid black; + width: 100px; + height: 40px; + background: gray; +} + +.abs { + height: 5px; + float: left; +} + +#item { + width: 90px; + height: 30px; + margin-top: 10px; +} +</style> + +<p>This test passes if you see a gray box with a black border color with 5 rectangles inside. The first line contains a purple, orange, yellow and magenta boxes. Bellow them you should see a 90px cyan box.</p> + +<div class="grid"> + <div class="abs" style="background: purple; width: 10px;"></div> + <div class="abs" style="background: orange; width: 20px;"></div> + <div class="abs" style="background: yellow; width: 30px;"></div> + <div class="abs" style="background: magenta; width: 40px;"></div> + <div id="item" style="background: cyan;"</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-paint-positioned-children-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-paint-positioned-children-001.html new file mode 100644 index 0000000000..549335e49f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-paint-positioned-children-001.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid paint positioned children</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="grid-paint-positioned-children-001-ref.html"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.grid { + border: 2px solid black; + position: relative; + width: 100px; + + grid-template-columns: 10px 20px 30px 40px; + + padding-top: 10px; +} + +.abs { + height: 5px; + position: absolute; + width: 100%; +} + +#item { + width: 90px; + height: 30px; +} + +</style> + +<p>This test passes if you see a gray box with a black border color with 5 rectangles inside. The first line contains a purple, orange, yellow and magenta boxes. Bellow them you should see a 90px cyan box.</p> + +<div class="grid"> + <div id="item" style="grid-column: 1 / -1; background: cyan;"></div> + <div class="abs" style="grid-column: 1 / 2; background: purple;"></div> + <div class="abs" style="grid-column: 2 / 3; background: orange;"></div> + <div class="abs" style="grid-column: 3 / 4; background: yellow;"></div> + <div class="abs" style="grid-column: 4 / 5; background: magenta;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-children-writing-modes-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-children-writing-modes-001-ref.html new file mode 100644 index 0000000000..2794df263e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-children-writing-modes-001-ref.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned children writing modes reference test</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + +.grid { + display: block; + margin: 5px; + width: 100px; + height: 75px; + padding: 5px 10px 15px 20px; + border-style: solid; + border-width: 5px 10px 15px 20px; + float: left; +} + +.green { + background-color: green; + width: 30px; + height: 20px; + font: 10px/1 Ahem; +} + +.verticalSize { + width: 20px; + height: 30px; +} + +</style> + +<p>For the test to pass you should see no red and only green boxes. The black box will be positioned depending on the writing mode and text direction values.</p> + +<div class="grid"> + <div class="green">XX</div> +</div> + +<div class="grid verticalRL"> + <div class="green verticalSize">XX</div> +</div> + +<div class="grid verticalLR"> + <div class="green verticalSize">XX</div> +</div> + +<div class="grid directionRTL"> + <div class="green">XX</div> +</div> + +<div class="grid verticalRL directionRTL"> + <div class="green verticalSize">XX</div> +</div> + +<div class="grid verticalLR directionRTL"> + <div class="green verticalSize">XX</div> +</div> + +<div class="grid"> + <div class="green">XX</div> +</div> + +<div class="grid verticalRL"> + <div class="green verticalSize">XX</div> +</div> + +<div class="grid verticalLR"> + <div class="green verticalSize">XX</div> +</div> + +<div class="grid directionRTL"> + <div class="green">XX</div> +</div> + +<div class="grid verticalRL directionRTL"> + <div class="green verticalSize">XX</div> +</div> + +<div class="grid verticalLR directionRTL"> + <div class="green verticalSize">XX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-children-writing-modes-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-children-writing-modes-001.html new file mode 100644 index 0000000000..8b9df8beba --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-children-writing-modes-001.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned children writing modes</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="grid-positioned-children-writing-modes-001-ref.html"> +<meta name="assert" content="This test checks the behavior of the positioned grid children in combination with the writing modes and text direction properties."> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + +.grid { + margin: 5px; + width: 100px; + height: 75px; + grid: 20px / 30px; + padding: 5px 10px 15px 20px; + border-style: solid; + border-width: 5px 10px 15px 20px; + float: left; + /* Ensures that the grid container is the containing block of the grid children. */ + position: relative; +} + +.absolute { + position: absolute; +} + +.onlyFirstRowOnlyFirstColumn { + background-color: green; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +.offsets { + left: 0; + top: 0; +} + +.red { + background-color: red; +} + +</style> + +<p>For the test to pass you should see no red and only green boxes. The black box will be positioned depending on the writing mode and text direction values.</p> + +<div class="grid"> + <div class="red"></div> + <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div> +</div> + +<div class="grid verticalRL"> + <div class="red"></div> + <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div> +</div> + +<div class="grid verticalLR"> + <div class="red"></div> + <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div> +</div> + +<div class="grid directionRTL"> + <div class="red"></div> + <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div> +</div> + +<div class="grid verticalRL directionRTL"> + <div class="red"></div> + <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div> +</div> + +<div class="grid verticalLR directionRTL"> + <div class="red"></div> + <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn">XX</div> +</div> + +<div class="grid"> + <div class="red"></div> + <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div> +</div> + +<div class="grid verticalRL"> + <div class="red"></div> + <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div> +</div> + +<div class="grid verticalLR"> + <div class="red"></div> + <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div> +</div> + +<div class="grid directionRTL"> + <div class="red"></div> + <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div> +</div> + +<div class="grid verticalRL directionRTL"> + <div class="red"></div> + <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div> +</div> + +<div class="grid verticalLR directionRTL"> + <div class="red"></div> + <div class="sizedToGridArea absolute offsets onlyFirstRowOnlyFirstColumn">XX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-001.html new file mode 100644 index 0000000000..ff0c04e24e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-001.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang=en class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned item dynamic change</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test checks that positioned items can be dynamically changed."> +<style> +.grid { + display: grid; + grid: 50px 50px / 50px 50px; + position: relative; +} + +.green { + background: green; +} + +.red { + background: red; +} + +#item { + position: absolute; + width: 100%; + height: 100%; + grid-column: 1 / 2; + grid-row: 1 / 2; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="grid"> + <div class="green"></div> + <div class="green"></div> + <div class="green"></div> + <div class="red"></div> + <div id="item" class="green"></div> +</div> + +<script> + document.body.offsetLeft; + + var item = document.getElementById("item"); + item.style.gridColumn = "2 / 3"; + item.style.gridRow = "2 / 3"; + + document.documentElement.classList.remove('reftest-wait'); +</script> + +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-002.html new file mode 100644 index 0000000000..8fe117b0b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-002.html @@ -0,0 +1,55 @@ + +<!DOCTYPE html> +<html lang=en class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned item dynamic change</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test checks that descendant positioned items can be dynamically changed."> +<style> +.grid { + display: grid; + grid: 50px 50px / 50px 50px; + position: relative; +} + +.green { + background: green; +} + +.red { + background: red; +} + +#item { + position: absolute; + width: 100%; + height: 100%; + grid-column: 1 / 2; + grid-row: 1 / 2; + top: 0; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div class="grid"> + <div class="green"></div> + <div class="green"> + <div id="item" class="green"></div> + </div> + <div class="green"></div> + <div class="red"></div> +</div> + +<script> + document.body.offsetLeft; + + var item = document.getElementById("item"); + item.style.gridColumn = "2 / 3"; + item.style.gridRow = "2 / 3"; + + document.documentElement.classList.remove('reftest-wait'); +</script> + +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-003.html new file mode 100644 index 0000000000..c28f7ccc2c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-003.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html lang=en class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="This test checks that positioned items can be dynamically assigned."> +<style> +.grid { + display: inline-grid; + grid: 100px / 100px; + background-color: red; +} + +#item { + width: 100px; + height: 100px; + background-color: green; +} +</style> + +<body onload=updatePositionType()> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div class="grid"> + <div id="item"></div> + </div> + +</body> + +<script> + function updatePositionType() { + document.body.offsetLeft; + + var item = document.getElementById("item"); + item.style.position= "absolute"; + + document.documentElement.classList.remove('reftest-wait'); + } +</script> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-004-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-004-ref.html new file mode 100644 index 0000000000..985e8f8525 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-004-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<style> +#grid { + display: grid; + width: 100px; + height: 100px; + position: relative; + border: solid; + grid-template: 50px 50px / 50px 50px; +} + +#abspos { + position: absolute; + top: 15px; + left: 15px; + grid-area: 2 / 2 / 2 / 2; + width: 20px; + height: 20px; + background: lime; +} +</style> + +<body> + + <p>Test passes if it matches the reference.</p> + + <div id="grid"> + <div id="abspos"></div> + </div> + +</body> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-004.html new file mode 100644 index 0000000000..87dd679890 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-004.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html lang=en class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<link rel="match" href="grid-positioned-item-dynamic-change-004-ref.html"> +<meta name="assert" content="This test checks that positioned items can be dynamically changed."> +<style> +#grid { + display: grid; + width: 100px; + height: 100px; + position: relative; + border: solid; + grid-template: 50px 50px / 50px 50px; +} + +#abspos { + position: absolute; + top: 0px; + left: 10px; + grid-area: 2 / 2 / 2 / 2; + width: 20px; + height: 20px; + background: lime; +} +</style> + +<body onload=updatePosition()> + + <p>Test passes if it matches the reference.</p> + + <div id="grid"> + <div id="abspos"></div> + </div> + +</body> + +<script> + function updatePosition() { + document.body.offsetTop; + + document.getElementById('abspos').style.top = '15px'; + document.getElementById('abspos').style.left = '15px'; + + document.documentElement.classList.remove('reftest-wait'); + } +</script> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-005-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-005-ref.html new file mode 100644 index 0000000000..22efed2e03 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-005-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<style> + #grid { + display: inline-grid; + grid-template-columns: 50px 50px; + grid-template-rows: 50px 50px; + background-color: blue; + } + #child { + grid-area: 2 / 2 / 2 / 2; + width: 50px; + height: 50px; + background-color: green; + } + #grandchild { + width: 25px; + height: 25px; + background-color: red; + } +</style> + +<body> + + <p>Test passes if it matches the reference.</p> + + <div id="grid"> + <div id="child"> + <div id="grandchild"></div> + </div> + </div> + +</body> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-005.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-005.html new file mode 100644 index 0000000000..e943391d2c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-005.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html lang=en class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<link rel="match" href="grid-positioned-item-dynamic-change-005-ref.html"> +<meta name="assert" content="This test checks that positioned items can be dynamically changed."> +<style> + #grid { + display: inline-grid; + grid-template-columns: 50px 50px; + grid-template-rows: 50px 50px; + background-color: blue; + position: relative; + } + #child { + grid-area: 2 / 2 / 2 / 2; + width: 100%; + height: 100%; + background-color: green; + position: absolute; + } + #grandchild { + width: 50%; + height: 50%; + background-color: red; + } +</style> + + <body onload=updateConstraints()> + + <p>Test passes if it matches the reference.</p> + + <div id="grid"> + <div id="child"> + <marquee id="grandchild"></marquee> + </div> + </div> + +</body> + +<script> + function updateConstraints() { + document.body.offsetTop; + + document.getElementById('child').style.bottom = '0'; + document.getElementById('child').style.left = '0'; + document.getElementById('child').style.contain = 'strict'; + + document.documentElement.classList.remove('reftest-wait'); + } +</script> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-006-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-006-ref.html new file mode 100644 index 0000000000..0c65e560a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-006-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<style> +.reference { + display: grid; + background: green; + width: 100px; + height: 100px; +} +</style> +<body> +<p>Test passes if it matches the reference.</p> +<div class="reference"> +</div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-006.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-006.html new file mode 100644 index 0000000000..ee1581e2e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-006.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned item dynamic change.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<link rel="match" href="grid-positioned-item-dynamic-change-006-ref.html"> +<meta name="assert" content="This test checks that positioned items update upon dynamic changes."> +<style> +.absolute { + background: green; + position: absolute; + grid-row: 2 / 3; + grid-column: 1 / 2; + top: 0; + bottom: 0; + right: 0; + left: 0; +} +</style> +<body> +<p>Test passes if it matches the reference.</p> +<div style="display: grid; position: relative; width: 100px;"> + <div style="background: green;"> + <div id="target"></div> + </div> + <div style="background: red; height: 25px;"></div> + <div class="absolute"></div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.height = '75px'; +document.documentElement.classList.remove('reftest-wait'); +</script> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-007-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-007-ref.html new file mode 100644 index 0000000000..84e5c2e325 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-007-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang=en> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned item dynamic change</title> +<link rel="author" title="Filipp Riabchun" href="mailto:talpa@yandex.ru"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="This test checks that positioned items react to grid track size changes."> +<style> +.green { + background: green; + width: 100px; + height: 50px; + margin-bottom: 8px; +} + +.blue { + border: 3px solid blue; + box-sizing: border-box; + background: green; + width: 100px; + height: 100px; +} + +</style> + +<p>Test passes if there is a filled green rectangle on top and a green square with blue border on bottom.</p> + +<div class="green"></div> +<div class="blue"></div> + +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-007.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-007.html new file mode 100644 index 0000000000..3c5f227dd0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-item-dynamic-change-007.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html lang=en class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned item dynamic change</title> +<link rel="author" title="Filipp Riabchun" href="mailto:talpa@yandex.ru"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="grid-positioned-item-dynamic-change-007-ref.html"> +<meta name="assert" content="This test checks that positioned items react to grid track size changes."> +<style> +.grid { + display: inline-grid; + grid-gap: 8px; + position: relative; +} + +.green { + background: green; + width: 100px; + height: 100px; +} + +.blue { + position: absolute; + border: 3px solid blue; + top: 0; + right: 0; + bottom: 0; + left: 0; + box-sizing: border-box; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +</style> + +<p>Test passes if there is a filled green rectangle on top and a green square with blue border on bottom.</p> + +<div class="grid"> + <div class="green" id="item"></div> + <div class="green"></div> + <div class="blue"></div> +</div> + +<script> + document.body.offsetLeft; + + var item = document.getElementById("item"); + item.style.height = '50px'; + + document.documentElement.classList.remove('reftest-wait'); +</script> + +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-001.html new file mode 100644 index 0000000000..8d26215060 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-001.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items in auto-fit tracks</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/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit"> +<meta name="assert" content="This test checks that positioned items don't avoid auto-fit tracks to collapse."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.container { + width: 200px; +} +.grid { + position: relative; + grid: 10px / repeat(auto-fit, 30px); +} +span { + background: blue; +} +.abs { + position: absolute; + top:0; right:0; bottom:0; left:0; + background: pink; +} +</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> +<br> +<div class="container"> + <div class="grid"> + <span style="grid-column: 1 / 5" class="abs" data-expected-width="30" data-expected-height="10"></span> + <span style="grid-column: 1" data-expected-width="30" data-expected-height="10"></span> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-002.html new file mode 100644 index 0000000000..c44474962f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items in auto-fit tracks</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/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit"> +<meta name="assert" content="This test checks tracks before the first in-flow item also collapse and positioned items don't have any impact."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.container { + width: 200px; +} +.grid { + position: relative; + grid: 10px / repeat(auto-fit, 30px); +} +span { + background: blue; +} +.abs { + position: absolute; + top:0; right:0; bottom:0; left:0; + background: pink; +} +</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> +<br> +<div class="container"> + <div class="grid"> + <span style="grid-column: 1 / 5" class="abs" data-expected-width="30" data-expected-height="10"></span> + <span style="grid-column: 2" data-expected-width="30" data-expected-height="10"></span> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-003.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-003.html new file mode 100644 index 0000000000..cdfb84c0bf --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-003.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items in auto-fit tracks</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/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit"> +<meta name="assert" content="This test checks that positioned items will use the area defined by the in-flow items, ignoring any collapsed track."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.container { + width: 200px; +} +.grid { + position: relative; + grid: 10px / repeat(auto-fit, 30px); +} +span { + background: blue; +} +.abs { + position: absolute; + top:0; right:0; bottom:0; left:0; + background: pink; +} +</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> +<br> +<div class="container"> + <div class="grid"> + <span style="grid-column: 1 / 5" class="abs" data-expected-width="60" data-expected-height="10"></span> + <span style="grid-column: 2 / 4" data-expected-width="60" data-expected-height="10"></span> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-004.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-004.html new file mode 100644 index 0000000000..56e81c2cd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-004.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items in auto-fit tracks and gaps</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/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit"> +<meta name="assert" content="This test checks that positioned items ignore collapsed gaps."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.container { + width: 200px; +} +.grid { + position: relative; + grid: 10px / repeat(auto-fit, 30px); + grid-gap: 5px; +} +span { + background: blue; +} +.abs { + position: absolute; + top:0; right:0; bottom:0; left:0; + background: pink; +} +</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> +<br> +<div class="container"> + <div class="grid"> + <span style="grid-column: 1 / 5" class="abs" data-expected-width="30" data-expected-height="10"></span> + <span style="grid-column: 1" data-expected-width="30" data-expected-height="10"></span> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-005.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-005.html new file mode 100644 index 0000000000..c0dd121741 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-005.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items in auto-fit tracks and gaps</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/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit"> +<meta name="assert" content="This test checks that positioned items ignore collapsed gaps, both before and after the first in-flow item ."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.container { + width: 200px; +} +.grid { + position: relative; + grid: 10px / repeat(auto-fit, 30px); + grid-gap: 5px; +} +span { + background: blue; +} +.abs { + position: absolute; + top:0; right:0; bottom:0; left:0; + background: pink; +} +</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> +<br> +<div class="container"> + <div class="grid"> + <span style="grid-column: 1 / 5" class="abs" data-expected-width="30" data-expected-height="10"></span> + <span style="grid-column: 2" data-expected-width="30" data-expected-height="10"></span> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-006.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-006.html new file mode 100644 index 0000000000..3cd46f475b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-006.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items in auto-fit tracks and gaps</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/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit"> +<meta name="assert" content="This test checks that positioned items ignore collapsed gaps but consider those between in-flow items inside their grid area."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.container { + width: 200px; +} +.grid { + position: relative; + grid: 10px / repeat(auto-fit, 30px); + grid-gap: 5px; +} +span { + background: blue; +} +.abs { + position: absolute; + top:0; right:0; bottom:0; left:0; + background: pink; +} +</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> +<br> +<div class="container"> + <div class="grid"> + <span style="grid-column: 2 / 5" class="abs" data-expected-width="65" data-expected-height="10"></span> + <span style="grid-column: 2 / 4" data-expected-width="65" data-expected-height="10"></span> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-007.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-007.html new file mode 100644 index 0000000000..32de532c38 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-and-autofit-tracks-007.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items in auto-fit tracks and gaps</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/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#auto-repeat" title="7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fit"> +<meta name="assert" content="This test checks that positioned items ignore collapsed gaps even with non-empty tracks before and after."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> +.container { + width: 250px; +} +.grid { + position: relative; + grid: 10px / repeat(auto-fit, 30px) 50px; + grid-gap: 5px; +} +span { + background: blue; +} +.abs { + position: absolute; + top:0; right:0; bottom:0; left:0; + background: pink; +} +</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> +<br> +<div class="container"> + <div class="grid"> + <span style="grid-column: 2 / 5" class="abs" data-expected-width="65" data-expected-height="10"></span> + <span style="grid-column: 2 / 4" data-expected-width="65" data-expected-height="10"></span> + </div> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-001-ref.html new file mode 100644 index 0000000000..899dc98ec6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-001-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items background reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +.grid { + width: 500px; + height: 300px; + border: 5px solid black; + margin: 30px; + padding: 15px; +} + +.container { + position: relative; + float: left; +} + +.absolute { + position: absolute; +} + +.green { + background-color: green; +} +</style> + +<p>The test passes if you see 4 green boxes and no red.</p> + +<div class="container"> + <div class="grid"></div> + <div class="absolute green" style="left: 55px; top: 50px; width: 100px; height: 50px"></div> + <div class="absolute green" style="left: 290px; top: 50px; width: 50px; height: 20px"></div> + <div class="absolute green" style="left: 50px; top: 115px; width: 50px; height: 30px"></div> + <div class="absolute green" style="left: 175px; top: 135px; width: 145px; height: 75px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-001.html new file mode 100644 index 0000000000..f5e49fbffe --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-001.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items background</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="grid-positioned-items-background-001-ref.html"> +<meta name="assert" content="This test checks that the background of positioned items is painted in the right position"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + +.grid { + grid-template-columns: 100px 200px; + grid-template-rows: 50px 150px; + width: 500px; + height: 300px; + border: 5px solid black; + margin: 30px; + padding: 15px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; + background-color: transparent; +} + +.container { + position: relative; + float: left; +} + +.absolute { + position: absolute; +} + +.grid > div { + background-color: green; +} + +.lengthSize { + width: 50px; + height: 20px; +} + +.percentageSize { + width: 50%; + height: 20%; +} + +.offsetsSize { + left: 25px; + right: 30px; + top: 35px; + bottom: 40px; +} + +.red { + background-color: red; +} +</style> + +<p>The test passes if you see 4 green boxes and no red.</p> + +<div class="container"> + <div class="absolute red" style="left: 55px; top: 50px; width: 100px; height: 50px"></div> + <div class="absolute red" style="left: 290px; top: 50px; width: 50px; height: 20px"></div> + <div class="absolute red" style="left: 50px; top: 115px; width: 50px; height: 30px"></div> + <div class="absolute red" style="left: 175px; top: 135px; width: 145px; height: 75px"></div> + <div class="grid"> + <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" + style="left: 5px;"> + </div> + <div class="absolute onlyFirstRowOnlySecondColumn lengthSize" + style="right: 10px;"> + </div> + <div class="absolute onlySecondRowOnlyFirstColumn percentageSize" + style="top: 15px;"> + </div> + <div class="absolute onlySecondRowOnlySecondColumn offsetsSize"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-rtl-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-rtl-001-ref.html new file mode 100644 index 0000000000..f57f496e3b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-rtl-001-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items background RTL reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<html> +<style> +.grid { + width: 500px; + height: 300px; + border: 5px solid black; + margin: 30px; + padding: 15px; +} + +.container { + position: relative; + float: left; +} + +.absolute { + position: absolute; +} + +.green { + background-color: green; +} +</style> + +<p>The test passes if you see 4 green boxes and no red.</p> + +<div class="container"> + <div class="grid"></div> + <div class="absolute green" style="left: 455px; top: 50px; width: 100px; height: 50px"></div> + <div class="absolute green" style="left: 390px; top: 50px; width: 50px; height: 20px"></div> + <div class="absolute green" style="left: 500px; top: 115px; width: 50px; height: 30px"></div> + <div class="absolute green" style="left: 275px; top: 135px; width: 145px; height: 75px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-rtl-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-rtl-001.html new file mode 100644 index 0000000000..81f4f10f5c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-background-rtl-001.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items background RTL</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="grid-positioned-items-background-rtl-001-ref.html"> +<meta name="assert" content="This test checks that the background of positioned items is painted in the right position using RTL direction."> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + +.grid { + grid-template-columns: 100px 200px; + grid-template-rows: 50px 150px; + width: 500px; + height: 300px; + border: 5px solid black; + margin: 30px; + padding: 15px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; + background-color: transparent; +} + +.container { + position: relative; + float: left; +} + +.absolute { + position: absolute; +} + +.grid > div { + background-color: green; +} + +.lengthSize { + width: 50px; + height: 20px; +} + +.percentageSize { + width: 50%; + height: 20%; +} + +.offsetsSize { + left: 25px; + right: 30px; + top: 35px; + bottom: 40px; +} + +.red { + background-color: red; +} +</style> + +<p>The test passes if you see 4 green boxes and no red.</p> + +<div class="container"> + <div class="absolute red" style="left: 455px; top: 50px; width: 100px; height: 50px"></div> + <div class="absolute red" style="left: 390px; top: 50px; width: 50px; height: 20px"></div> + <div class="absolute red" style="left: 500px; top: 115px; width: 50px; height: 30px"></div> + <div class="absolute red" style="left: 275px; top: 135px; width: 145px; height: 75px"></div> + <div class="grid directionRTL"> + <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" + style="left: 5px;"> + </div> + <div class="absolute onlyFirstRowOnlySecondColumn lengthSize" + style="right: 10px;"> + </div> + <div class="absolute onlySecondRowOnlyFirstColumn percentageSize" + style="top: 15px;"> + </div> + <div class="absolute onlySecondRowOnlySecondColumn offsetsSize"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-content-alignment-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-content-alignment-001.html new file mode 100644 index 0000000000..421ac91aab --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-content-alignment-001.html @@ -0,0 +1,403 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items content alignment</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the justify-content and align-content properties"> +<meta name="assert" content="This test checks the behavior of the positioned items in a grid using content alignment."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<style> + +.grid { + grid-template-columns: 100px 50px; + grid-template-rows: 70px 30px; + width: 400px; + height: 200px; + margin: 5px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.grid > div { + position: absolute; + width: 100%; + height: 100%; + background-color: lime; +} + +.offsets { + left: 0; + top: 0; +} + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<div class="grid contentStart"> + <div style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentStart"> + <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentCenter"> + <div style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="125" data-offset-y="50" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentCenter"> + <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="125" data-offset-y="50" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentEnd"> + <div style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="250" data-offset-y="100" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentEnd"> + <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="250" data-offset-y="100" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentSpaceBetween"> + <div style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentSpaceBetween"> + <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentSpaceAround"> + <div style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="63" data-offset-y="25" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentSpaceAround"> + <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="63" data-offset-y="25" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentSpaceEvenly"> + <div style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="83" data-offset-y="33" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentSpaceEvenly"> + <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="83" data-offset-y="33" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentStart"> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="100" data-offset-y="70" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentStart"> + <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="100" data-offset-y="70" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentCenter"> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="225" data-offset-y="120" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentCenter"> + <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="225" data-offset-y="120" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentEnd"> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentEnd"> + <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentSpaceBetween"> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentSpaceBetween"> + <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentSpaceAround"> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="288" data-offset-y="145" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentSpaceAround"> + <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="288" data-offset-y="145" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentSpaceEvenly"> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="267" data-offset-y="137" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentSpaceEvenly"> + <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="267" data-offset-y="137" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentStart"> + <div style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentStart"> + <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentCenter"> + <div style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="225" data-expected-height="120"> + </div> +</div> + +<div class="grid contentCenter"> + <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="225" data-expected-height="120"> + </div> +</div> + +<div class="grid contentEnd"> + <div style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="170"> + </div> +</div> + +<div class="grid contentEnd"> + <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="350" data-expected-height="170"> + </div> +</div> + +<div class="grid contentSpaceBetween"> + <div style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentSpaceBetween"> + <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid contentSpaceAround"> + <div style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="163" data-expected-height="95"> + </div> +</div> + +<div class="grid contentSpaceAround"> + <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="163" data-expected-height="95"> + </div> +</div> + +<div class="grid contentSpaceEvenly"> + <div style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="183" data-expected-height="103"> + </div> +</div> + +<div class="grid contentSpaceEvenly"> + <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="183" data-expected-height="103"> + </div> +</div> + +<div class="grid contentStart"> + <div style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="100" data-offset-y="70" data-expected-width="300" data-expected-height="130"> + </div> +</div> + +<div class="grid contentStart"> + <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="100" data-offset-y="70" data-expected-width="300" data-expected-height="130"> + </div> +</div> + +<div class="grid contentCenter"> + <div style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="225" data-offset-y="120" data-expected-width="175" data-expected-height="80"> + </div> +</div> + +<div class="grid contentCenter"> + <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="225" data-offset-y="120" data-expected-width="175" data-expected-height="80"> + </div> +</div> + +<div class="grid contentEnd"> + <div style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentEnd"> + <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentSpaceBetween"> + <div style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentSpaceBetween"> + <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="350" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid contentSpaceAround"> + <div style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="288" data-offset-y="145" data-expected-width="112.5" data-expected-height="55"> + </div> +</div> + +<div class="grid contentSpaceAround"> + <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="288" data-offset-y="145" data-expected-width="112.5" data-expected-height="55"> + </div> +</div> + +<div class="grid contentSpaceEvenly"> + <div style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="267" data-offset-y="137" data-expected-width="133" data-expected-height="63"> + </div> +</div> + +<div class="grid contentSpaceEvenly"> + <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="267" data-offset-y="137" data-expected-width="133" data-expected-height="63"> + </div> +</div> + +<div class="grid contentStart"> + <div style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid contentStart"> + <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid contentCenter"> + <div style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid contentCenter"> + <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid contentEnd"> + <div style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid contentEnd"> + <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid contentSpaceBetween"> + <div style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid contentSpaceBetween"> + <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid contentSpaceAround"> + <div style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid contentSpaceAround"> + <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid contentSpaceEvenly"> + <div style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid contentSpaceEvenly"> + <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-content-alignment-rtl-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-content-alignment-rtl-001.html new file mode 100644 index 0000000000..694d3f77c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-content-alignment-rtl-001.html @@ -0,0 +1,403 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items content alignment RTL</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align" title="10.5. Aligning the Grid: the justify-content and align-content properties"> +<meta name="assert" content="This test checks the behavior of the positioned items in a grid using content alignment in RTL."> +<link rel="stylesheet" href="/css/support/grid.css"> +<link rel="stylesheet" href="../../support/alignment.css"> +<style> + +.grid { + grid-template-columns: 100px 50px; + grid-template-rows: 70px 30px; + width: 400px; + height: 200px; + margin: 5px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.grid > div { + position: absolute; + width: 100%; + height: 100%; + background-color: lime; +} + +.offsets { + left: 0; + top: 0; +} + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<div class="grid directionRTL contentStart"> + <div style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentStart"> + <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentCenter"> + <div style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="175" data-offset-y="50" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentCenter"> + <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="175" data-offset-y="50" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentEnd"> + <div style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentEnd"> + <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="50" data-offset-y="100" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentSpaceBetween"> + <div style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentSpaceBetween"> + <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentSpaceAround"> + <div style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="238" data-offset-y="25" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentSpaceAround"> + <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="238" data-offset-y="25" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentSpaceEvenly"> + <div style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="217" data-offset-y="33" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentSpaceEvenly"> + <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="217" data-offset-y="33" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentStart"> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="250" data-offset-y="70" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentStart"> + <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="250" data-offset-y="70" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentCenter"> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="125" data-offset-y="120" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentCenter"> + <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="125" data-offset-y="120" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentEnd"> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentEnd"> + <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentSpaceBetween"> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentSpaceBetween"> + <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentSpaceAround"> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="63" data-offset-y="145" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentSpaceAround"> + <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="63" data-offset-y="145" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentSpaceEvenly"> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="83" data-offset-y="137" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentSpaceEvenly"> + <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="83" data-offset-y="137" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentStart"> + <div style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentStart"> + <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentCenter"> + <div style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="175" data-offset-y="0" data-expected-width="225" data-expected-height="120"> + </div> +</div> + +<div class="grid directionRTL contentCenter"> + <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="175" data-offset-y="0" data-expected-width="225" data-expected-height="120"> + </div> +</div> + +<div class="grid directionRTL contentEnd"> + <div style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="50" data-offset-y="0" data-expected-width="350" data-expected-height="170"> + </div> +</div> + +<div class="grid directionRTL contentEnd"> + <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="50" data-offset-y="0" data-expected-width="350" data-expected-height="170"> + </div> +</div> + +<div class="grid directionRTL contentSpaceBetween"> + <div style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentSpaceBetween"> + <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="70"> + </div> +</div> + +<div class="grid directionRTL contentSpaceAround"> + <div style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="238" data-offset-y="0" data-expected-width="162.5" data-expected-height="95"> + </div> +</div> + +<div class="grid directionRTL contentSpaceAround"> + <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="238" data-offset-y="0" data-expected-width="162.5" data-expected-height="95"> + </div> +</div> + +<div class="grid directionRTL contentSpaceEvenly"> + <div style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="217" data-offset-y="0" data-expected-width="183" data-expected-height="103"> + </div> +</div> + +<div class="grid directionRTL contentSpaceEvenly"> + <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="217" data-offset-y="0" data-expected-width="183" data-expected-height="103"> + </div> +</div> + +<div class="grid directionRTL contentStart"> + <div style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="70" data-expected-width="300" data-expected-height="130"> + </div> +</div> + +<div class="grid directionRTL contentStart"> + <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="70" data-expected-width="300" data-expected-height="130"> + </div> +</div> + +<div class="grid directionRTL contentCenter"> + <div style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="120" data-expected-width="175" data-expected-height="80"> + </div> +</div> + +<div class="grid directionRTL contentCenter"> + <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="120" data-expected-width="175" data-expected-height="80"> + </div> +</div> + +<div class="grid directionRTL contentEnd"> + <div style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentEnd"> + <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentSpaceBetween"> + <div style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentSpaceBetween"> + <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="170" data-expected-width="50" data-expected-height="30"> + </div> +</div> + +<div class="grid directionRTL contentSpaceAround"> + <div style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="145" data-expected-width="113" data-expected-height="55"> + </div> +</div> + +<div class="grid directionRTL contentSpaceAround"> + <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="145" data-expected-width="113" data-expected-height="55"> + </div> +</div> + +<div class="grid directionRTL contentSpaceEvenly"> + <div style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="137" data-expected-width="133" data-expected-height="63"> + </div> +</div> + +<div class="grid directionRTL contentSpaceEvenly"> + <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="137" data-expected-width="133" data-expected-height="63"> + </div> +</div> + +<div class="grid directionRTL contentStart"> + <div style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid directionRTL contentStart"> + <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid directionRTL contentCenter"> + <div style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid directionRTL contentCenter"> + <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid directionRTL contentEnd"> + <div style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid directionRTL contentEnd"> + <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid directionRTL contentSpaceBetween"> + <div style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid directionRTL contentSpaceBetween"> + <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid directionRTL contentSpaceAround"> + <div style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid directionRTL contentSpaceAround"> + <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid directionRTL contentSpaceEvenly"> + <div style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +<div class="grid directionRTL contentSpaceEvenly"> + <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="200"> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-001.html new file mode 100644 index 0000000000..7fb11200d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-001.html @@ -0,0 +1,309 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items gaps</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters" title="10.1. Gutters: the row-gap, column-gap, and gap properties"> +<meta name="assert" content="This test checks the behavior of the positioned items in a grid container with gaps."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + +.grid { + grid-template-columns: 100px 100px 100px 100px; + grid-template-rows: 50px 50px; + grid-gap: 25px 50px; + width: 800px; + height: 200px; + border: 5px solid black; + margin: 30px; + padding: 15px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.grid > div { + position: absolute; + width: 100%; + height: 100%; + background-color: lime; +} + +.offsets { + left: 0; + top: 0; +} + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<div class="grid"> + <div style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 1 / auto; grid-row: 1 / auto;" + data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 1 / auto; grid-row: 1 / auto;" + data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 1 / 3; grid-row: 1 / 3;" + data-offset-x="15" data-offset-y="15" data-expected-width="250" data-expected-height="125"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 1 / 3; grid-row: 1 / 3;" + data-offset-x="15" data-offset-y="15" data-expected-width="250" data-expected-height="125"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 1 / 4; grid-row: 1 / 4;" + data-offset-x="15" data-offset-y="15" data-expected-width="400" data-expected-height="215"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 1 / 4; grid-row: 1 / 4;" + data-offset-x="15" data-offset-y="15" data-expected-width="400" data-expected-height="215"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 1 / 5; grid-row: 1 / 5;" + data-offset-x="15" data-offset-y="15" data-expected-width="550" data-expected-height="215"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 1 / 5; grid-row: 1 / 5;" + data-offset-x="15" data-offset-y="15" data-expected-width="550" data-expected-height="215"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 1 / 6; grid-row: 1 / 6;" + data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 1 / 6; grid-row: 1 / 6;" + data-offset-x="15" data-offset-y="15" data-expected-width="815" data-expected-height="215"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="165" data-offset-y="90" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="165" data-offset-y="90" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 2 / 4; grid-row: 2 / 4;" + data-offset-x="165" data-offset-y="90" data-expected-width="250" data-expected-height="140"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 2 / 4; grid-row: 2 / 4;" + data-offset-x="165" data-offset-y="90" data-expected-width="250" data-expected-height="140"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 2 / 5; grid-row: 2 / 5;" + data-offset-x="165" data-offset-y="90" data-expected-width="400" data-expected-height="140"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 2 / 5; grid-row: 2 / 5;" + data-offset-x="165" data-offset-y="90" data-expected-width="400" data-expected-height="140"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 2 / 6; grid-row: 2 / 6;" + data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 2 / 6; grid-row: 2 / 6;" + data-offset-x="165" data-offset-y="90" data-expected-width="665" data-expected-height="140"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 3 / auto; grid-row: 3 / auto;" + data-offset-x="315" data-offset-y="140" data-expected-width="515" data-expected-height="90"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 3 / auto; grid-row: 3 / auto;" + data-offset-x="315" data-offset-y="140" data-expected-width="515" data-expected-height="90"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 4 / auto; grid-row: 4 / auto;" + data-offset-x="465" data-offset-y="0" data-expected-width="365" data-expected-height="230"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 4 / auto; grid-row: 4 / auto;" + data-offset-x="465" data-offset-y="0" data-expected-width="365" data-expected-height="230"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 5 / auto; grid-row: 5 / auto;" + data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="230"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 5 / auto; grid-row: 5 / auto;" + data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="230"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: 6 / auto; grid-row: 6 / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: 6 / auto; grid-row: 6 / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: auto / 1; grid-row: auto / 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: auto / 1; grid-row: auto / 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="115" data-expected-height="65"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="115" data-expected-height="65"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: auto / 3; grid-row: auto / 3;" + data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="140"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: auto / 3; grid-row: auto / 3;" + data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="140"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: auto / 4; grid-row: auto / 4;" + data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="230"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: auto / 4; grid-row: auto / 4;" + data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="230"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: auto / 5; grid-row: auto / 5;" + data-offset-x="0" data-offset-y="0" data-expected-width="565" data-expected-height="230"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: auto / 5; grid-row: auto / 5;" + data-offset-x="0" data-offset-y="0" data-expected-width="565" data-expected-height="230"> + </div> +</div> + +<div class="grid"> + <div style="grid-column: auto / 6; grid-row: auto / 6;" + data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230"> + </div> +</div> + +<div class="grid"> + <div class="offsets" style="grid-column: auto / 6; grid-row: auto / 6;" + data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230"> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002-rtl.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002-rtl.html new file mode 100644 index 0000000000..9e1352b0de --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002-rtl.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items percentage and calc() gaps</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"> +<meta name="assert" content="This test checks the behavior of the positioned items in a grid container with percentage and calc() gaps."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + +.grid { + grid-template-columns: 100px 100px 100px 100px; + grid-template-rows: 50px 50px 50px 50px; + width: 800px; + height: 600px; + border: 5px solid black; + margin: 30px; + padding: 15px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.grid > div { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: lime; +} + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<div class="grid directionRTL" style="gap: 10%;"> + <div style="grid-column: 2 / 4; grid-row: 2 / 4;" + data-offset-x="355" data-offset-y="125" data-expected-width="280" data-expected-height="160"> + </div> +</div> + +<div class="grid directionRTL" style="gap: calc(10% + 25px);"> + <div style="grid-column: 2 / 4; grid-row: 2 / 4;" + data-offset-x="305" data-offset-y="150" data-expected-width="305" data-expected-height="185"> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002.html new file mode 100644 index 0000000000..46e8801bb6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-002.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items percentage and calc() gaps</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters"> +<meta name="assert" content="This test checks the behavior of the positioned items in a grid container with percentage and calc() gaps."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + +.grid { + grid-template-columns: 100px 100px 100px 100px; + grid-template-rows: 50px 50px 50px 50px; + width: 800px; + height: 600px; + border: 5px solid black; + margin: 30px; + padding: 15px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.grid > div { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: lime; +} + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<div class="grid" style="gap: 10%;"> + <div style="grid-column: 2 / 4; grid-row: 2 / 4;" + data-offset-x="195" data-offset-y="125" data-expected-width="280" data-expected-height="160"> + </div> +</div> + +<div class="grid" style="gap: calc(10% + 25px);"> + <div style="grid-column: 2 / 4; grid-row: 2 / 4;" + data-offset-x="220" data-offset-y="150" data-expected-width="305" data-expected-height="185"> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-rtl-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-rtl-001.html new file mode 100644 index 0000000000..8559ea583b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-gaps-rtl-001.html @@ -0,0 +1,309 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items gaps RTL</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#gutters" title="10.1. Gutters: the row-gap, column-gap, and gap properties"> +<meta name="assert" content="This test checks the behavior of the positioned items in a grid container with gaps in RTL."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + +.grid { + grid-template-columns: 100px 100px 100px 100px; + grid-template-rows: 50px 50px; + grid-gap: 25px 50px; + width: 800px; + height: 200px; + border: 5px solid black; + margin: 30px; + padding: 15px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.grid > div { + position: absolute; + width: 100%; + height: 100%; + background-color: lime; +} + +.offsets { + left: 0; + top: 0; +} + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<div class="grid directionRTL"> + <div style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: auto / auto; grid-row: auto / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 1 / auto; grid-row: 1 / auto;" + data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 1 / auto; grid-row: 1 / auto;" + data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="715" data-offset-y="15" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 1 / 2; grid-row: 1 / 2;" + data-offset-x="715" data-offset-y="15" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 1 / 3; grid-row: 1 / 3;" + data-offset-x="565" data-offset-y="15" data-expected-width="250" data-expected-height="125"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 1 / 3; grid-row: 1 / 3;" + data-offset-x="565" data-offset-y="15" data-expected-width="250" data-expected-height="125"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 1 / 4; grid-row: 1 / 4;" + data-offset-x="415" data-offset-y="15" data-expected-width="400" data-expected-height="215"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 1 / 4; grid-row: 1 / 4;" + data-offset-x="415" data-offset-y="15" data-expected-width="400" data-expected-height="215"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 1 / 5; grid-row: 1 / 5;" + data-offset-x="265" data-offset-y="15" data-expected-width="550" data-expected-height="215"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 1 / 5; grid-row: 1 / 5;" + data-offset-x="265" data-offset-y="15" data-expected-width="550" data-expected-height="215"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 1 / 6; grid-row: 1 / 6;" + data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 1 / 6; grid-row: 1 / 6;" + data-offset-x="0" data-offset-y="15" data-expected-width="815" data-expected-height="215"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="565" data-offset-y="90" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 2 / 3; grid-row: 2 / 3;" + data-offset-x="565" data-offset-y="90" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 2 / 4; grid-row: 2 / 4;" + data-offset-x="415" data-offset-y="90" data-expected-width="250" data-expected-height="140"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 2 / 4; grid-row: 2 / 4;" + data-offset-x="415" data-offset-y="90" data-expected-width="250" data-expected-height="140"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 2 / 5; grid-row: 2 / 5;" + data-offset-x="265" data-offset-y="90" data-expected-width="400" data-expected-height="140"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 2 / 5; grid-row: 2 / 5;" + data-offset-x="265" data-offset-y="90" data-expected-width="400" data-expected-height="140"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 2 / 6; grid-row: 2 / 6;" + data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 2 / 6; grid-row: 2 / 6;" + data-offset-x="0" data-offset-y="90" data-expected-width="665" data-expected-height="140"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 3 / auto; grid-row: 3 / auto;" + data-offset-x="0" data-offset-y="140" data-expected-width="515" data-expected-height="90"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 3 / auto; grid-row: 3 / auto;" + data-offset-x="0" data-offset-y="140" data-expected-width="515" data-expected-height="90"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 4 / auto; grid-row: 4 / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="365" data-expected-height="230"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 4 / auto; grid-row: 4 / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="365" data-expected-height="230"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 5 / auto; grid-row: 5 / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="230"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 5 / auto; grid-row: 5 / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="265" data-expected-height="230"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: 6 / auto; grid-row: 6 / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: 6 / auto; grid-row: 6 / auto;" + data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: auto / 1; grid-row: auto / 1;" + data-offset-x="815" data-offset-y="0" data-expected-width="15" data-expected-height="15"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: auto / 1; grid-row: auto / 1;" + data-offset-x="815" data-offset-y="0" data-expected-width="15" data-expected-height="15"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="715" data-offset-y="0" data-expected-width="115" data-expected-height="65"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="715" data-offset-y="0" data-expected-width="115" data-expected-height="65"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: auto / 3; grid-row: auto / 3;" + data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="140"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: auto / 3; grid-row: auto / 3;" + data-offset-x="565" data-offset-y="0" data-expected-width="265" data-expected-height="140"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: auto / 4; grid-row: auto / 4;" + data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="230"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: auto / 4; grid-row: auto / 4;" + data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="230"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: auto / 5; grid-row: auto / 5;" + data-offset-x="265" data-offset-y="0" data-expected-width="565" data-expected-height="230"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: auto / 5; grid-row: auto / 5;" + data-offset-x="265" data-offset-y="0" data-expected-width="565" data-expected-height="230"> + </div> +</div> + +<div class="grid directionRTL"> + <div style="grid-column: auto / 6; grid-row: auto / 6;" + data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="offsets" style="grid-column: auto / 6; grid-row: auto / 6;" + data-offset-x="0" data-offset-y="0" data-expected-width="830" data-expected-height="230"> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-001.html new file mode 100644 index 0000000000..e4629fbd20 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-001.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items implicit grid</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#implicit-grids" title="7.5. The Implicit Grid"> +<meta name="assert" content="This test checks the behavior of the absolutely positioned grid items placed on the implicit grid."> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + +.grid { + width: 200px; + height: 200px; + border: 5px solid black; + margin: 30px; + padding: 15px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.grid-columns-rows { + grid-template-columns: 100px; + grid-template-rows: 50px; +} + +.absolute { + position: absolute; +} + +</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"> + <div class="sizedToGridArea absolute secondRowSecondColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> + </div> + <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> + </div> + <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> + </div> +</div> + +<div class="grid grid-columns-rows"> + <div class="sizedToGridArea absolute secondRowSecondColumn" + data-offset-x="115" data-offset-y="65" data-expected-width="115" data-expected-height="165"> + </div> + <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> + </div> + <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" + data-offset-x="115" data-offset-y="65" data-expected-width="115" data-expected-height="165"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="sizedToGridArea absolute secondRowSecondColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> + </div> + <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> + </div> + <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> + </div> +</div> + +<div class="grid grid-columns-rows directionRTL"> + <div class="sizedToGridArea absolute secondRowSecondColumn" + data-offset-x="0" data-offset-y="65" data-expected-width="115" data-expected-height="165"> + </div> + <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="230" data-expected-height="230"> + </div> + <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" + data-offset-x="0" data-offset-y="65" data-expected-width="115" data-expected-height="165"> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-line-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-line-001.html new file mode 100644 index 0000000000..51e8ac1803 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-implicit-grid-line-001.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items implicit grid line</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#implicit-grids" title="7.5. The Implicit Grid"> +<meta name="assert" content="This test checks that grid placement properties of absolutely positioned items using implicit grid lines are treated as 'auto'."> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + +.grid { + grid-template-columns: 100px 200px; + grid-template-rows: 50px 150px; + width: 500px; + height: 300px; + border: 5px solid black; + margin: 30px; + padding: 15px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.absolute { + position: absolute; +} + +.startImplicitLine { + background-color: blue; + grid-column: 5; + grid-row: 8; +} + +.endImplicitLine { + background-color: orange; + grid-column: 1 / 5; + grid-row: 1 / 8; +} + +.startImplicitLineSpan { + background-color: blue; + grid-column: span 5; + grid-row: span 8; +} + +.endImplicitLineSpan { + background-color: orange; + grid-column: 1 / span 5; + grid-row: 1 / span 8; +} + +</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"> + <div class="absolute sizedToGridArea startImplicitLine" + data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330"> + </div> + <div class="absolute sizedToGridArea endImplicitLine" + data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315"> + </div> +</div> + +<div class="grid"> + <div class="absolute sizedToGridArea startImplicitLineSpan" + data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330"> + </div> + <div class="absolute sizedToGridArea endImplicitLineSpan" + data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="absolute sizedToGridArea startImplicitLine" + data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330"> + </div> + <div class="absolute sizedToGridArea endImplicitLine" + data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="absolute sizedToGridArea startImplicitLineSpan" + data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330"> + </div> + <div class="absolute sizedToGridArea endImplicitLineSpan" + data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315"> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-padding-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-padding-001.html new file mode 100644 index 0000000000..bfadcac7ac --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-padding-001.html @@ -0,0 +1,251 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items padding</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="This test checks that positioned grid items can be placed directly on the padding."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + +.grid { + grid-template-columns: 100px 200px; + grid-template-rows: 50px 150px; + width: 500px; + height: 300px; + border: 5px solid black; + margin: 30px; + padding: 15px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.autoFit { + grid-template-columns: repeat(auto-fit, 100px); + grid-template-rows: repeat(auto-fit, 100px); +} + +.absolute { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: lime; +} + +.gap { grid-gap: 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 id="log"></div> + +<div class="grid"> + <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: 1 / 2; grid-row: auto / 1;" + data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: auto / 1; grid-row: 1 / 2;" + data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50"> + </div> + <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;" + data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / auto;" + data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 3 / auto; grid-row: 2 / 3;" + data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150"> + </div> +</div> + +<div class="grid"> + <div class="absolute" style="grid-column: -5 / 1; grid-row: -5 / 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: 1 / 2; grid-row: -5 / 1;" + data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: -5 / 1; grid-row: 1 / 2;" + data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50"> + </div> + <div class="absolute" style="grid-column: 3 / 5; grid-row: 3 / 5;" + data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / 5;" + data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 3 / 5; grid-row: 2 / 3;" + data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150"> + </div> +</div> + +<div class="grid"> + <div class="absolute" style="grid-column: span 2 / 1; grid-row: span 2 / 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: 1 / 2; grid-row: span 2 / 1;" + data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: span 2 / 1; grid-row: 1 / 2;" + data-offset-x="0" data-offset-y="15" data-expected-width="15" data-expected-height="50"> + </div> + <div class="absolute" style="grid-column: 3 / span 2; grid-row: 3 / span 2;" + data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / span 2;" + data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 3 / span 2; grid-row: 2 / 3;" + data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150"> + </div> +</div> + +<div class="grid"> + <div class="absolute" style="grid-column: foo / 1; grid-row: foo / 1;" + data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315"> + </div> + <div class="absolute" style="grid-column: 1 / 2; grid-row: foo / 1;" + data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="315"> + </div> + <div class="absolute" style="grid-column: foo / 1; grid-row: 1 / 2;" + data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="50"> + </div> + <div class="absolute" style="grid-column: 3 / foo; grid-row: 3 / foo;" + data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / foo;" + data-offset-x="115" data-offset-y="215" data-expected-width="200" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 3 / foo; grid-row: 2 / 3;" + data-offset-x="315" data-offset-y="65" data-expected-width="215" data-expected-height="150"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;" + data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: 1 / 2; grid-row: auto / 1;" + data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: auto / 1; grid-row: 1 / 2;" + data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50"> + </div> + <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;" + data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / auto;" + data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 3 / auto; grid-row: 2 / 3;" + data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="absolute" style="grid-column: -5 / 1; grid-row: -5 / 1;" + data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: 1 / 2; grid-row: -5 / 1;" + data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: -5 / 1; grid-row: 1 / 2;" + data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50"> + </div> + <div class="absolute" style="grid-column: 3 / 5; grid-row: 3 / 5;" + data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / 5;" + data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 3 / 5; grid-row: 2 / 3;" + data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="absolute" style="grid-column: span 2 / 1; grid-row: span 2 / 1;" + data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: 1 / 2; grid-row: span 2 / 1;" + data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: span 2 / 1; grid-row: 1 / 2;" + data-offset-x="515" data-offset-y="15" data-expected-width="15" data-expected-height="50"> + </div> + <div class="absolute" style="grid-column: 3 / span 2; grid-row: 3 / span 2;" + data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / span 2;" + data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 3 / span 2; grid-row: 2 / 3;" + data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="absolute" style="grid-column: foo / 1; grid-row: foo / 1;" + data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315"> + </div> + <div class="absolute" style="grid-column: 1 / 2; grid-row: foo / 1;" + data-offset-x="415" data-offset-y="15" data-expected-width="100" data-expected-height="315"> + </div> + <div class="absolute" style="grid-column: foo / 1; grid-row: 1 / 2;" + data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="50"> + </div> + <div class="absolute" style="grid-column: 3 / foo; grid-row: 3 / foo;" + data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 2 / 3; grid-row: 3 / foo;" + data-offset-x="215" data-offset-y="215" data-expected-width="200" data-expected-height="115"> + </div> + <div class="absolute" style="grid-column: 3 / foo; grid-row: 2 / 3;" + data-offset-x="0" data-offset-y="65" data-expected-width="215" data-expected-height="150"> + </div> +</div> + +<div class="grid autoFit gap"> + <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: -1 / auto; grid-row: -1 / auto;" + data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315"> + </div> +</div> + +<div class="grid autoFit gap"> + <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="15" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: -2 / auto; grid-row: -2 / auto;" + data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315"> + </div> +</div> + +<div class="grid autoFit directionRTL gap"> + <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;" + data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: -1 / auto; grid-row: -1 / auto;" + data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315"> + </div> +</div> + +<div class="grid autoFit directionRTL gap"> + <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="515" data-offset-y="0" data-expected-width="15" data-expected-height="15"> + </div> + <div class="absolute" style="grid-column: -2 / auto; grid-row: -2 / auto;" + data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315"> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-unknown-named-grid-line-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-unknown-named-grid-line-001.html new file mode 100644 index 0000000000..7c95993eb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-unknown-named-grid-line-001.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items unknown named grid line</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="This test checks that grid placement properties of absolutely positioned items can reference implicit grid lines."> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + +.grid { + grid-template-columns: 100px 200px; + grid-template-rows: 50px 150px; + width: 500px; + height: 300px; + border: 5px solid black; + margin: 30px; + padding: 15px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.absolute { + position: absolute; +} + +.startUnknownLine { + background-color: blue; + grid-column: foo / 3; + grid-row: bar / 3; +} + +.endUnknownLine { + background-color: orange; + grid-column: 1 / foo; + grid-row: 1 / bar; +} + +.startAndEndUnknownLines { + background-color: green; + grid-column: foo / bar; + grid-row: foo / bar; +} + +</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"> + <div class="absolute sizedToGridArea startAndEndUnknownLines" + data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330"> + </div> + <div class="absolute sizedToGridArea endUnknownLine" + data-offset-x="15" data-offset-y="15" data-expected-width="515" data-expected-height="315"> + </div> + <div class="absolute sizedToGridArea startUnknownLine" + data-offset-x="315" data-offset-y="215" data-expected-width="215" data-expected-height="115"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="absolute sizedToGridArea startAndEndUnknownLines" + data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expected-height="330"> + </div> + <div class="absolute sizedToGridArea endUnknownLine" + data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expected-height="315"> + </div> + <div class="absolute sizedToGridArea startUnknownLine" + data-offset-x="0" data-offset-y="215" data-expected-width="215" data-expected-height="115"> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-within-grid-implicit-track-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-within-grid-implicit-track-001.html new file mode 100644 index 0000000000..18d2ebff01 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-positioned-items-within-grid-implicit-track-001.html @@ -0,0 +1,193 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid positioned items within grid implicit track</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#implicit-grids" title="7.5. The Implicit Grid"> +<meta name="assert" content="This test checks that positioned grid items are placed properly (including implicit tracks) even if the grid has implicit tracks."> +<link rel="stylesheet" href="/css/support/grid.css"> +<style> + +.grid { + grid-template-columns: 200px 300px; + grid-template-rows: 150px 250px; + grid-auto-columns: 100px; + grid-auto-rows: 50px; + width: 800px; + height: 600px; + border: 5px solid black; + margin: 30px; + padding: 15px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.absolute { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: cyan; +} + +.sixRowsAndSixColumns { + background: magenta; + grid-row: -5 / 5; + grid-column: -5 / 5; +} + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body onload="checkLayout('.grid')"> + +<div id="log"></div> + +<div class="grid"> + <div class="sixRowsAndSixColumns" + data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;" + data-offset-x="0" data-offset-y="0" data-expected-width="215" data-expected-height="115"> + </div> +</div> + +<div class="grid"> + <div class="sixRowsAndSixColumns" + data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="0" data-offset-y="0" data-expected-width="415" data-expected-height="265"> + </div> +</div> + +<div class="grid"> + <div class="sixRowsAndSixColumns" + data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;" + data-offset-x="715" data-offset-y="515" data-expected-width="115" data-expected-height="115"> + </div> +</div> + +<div class="grid"> + <div class="sixRowsAndSixColumns" + data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="415" data-offset-y="265" data-expected-width="415" data-expected-height="365"> + </div> +</div> + +<div class="grid"> + <div class="sixRowsAndSixColumns" + data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: -4 / 1; grid-row: -4 / 1;" + data-offset-x="115" data-offset-y="65" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid"> + <div class="sixRowsAndSixColumns" + data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: -4 / 2; grid-row: -4 / 2;" + data-offset-x="115" data-offset-y="65" data-expected-width="300" data-expected-height="200"> + </div> +</div> + +<div class="grid"> + <div class="sixRowsAndSixColumns" + data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: 3 / 4; grid-row: 3 / 4;" + data-offset-x="715" data-offset-y="515" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid"> + <div class="sixRowsAndSixColumns" + data-offset-x="15" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: 2 / 4; grid-row: 2 / 4;" + data-offset-x="415" data-offset-y="265" data-expected-width="400" data-expected-height="300"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="sixRowsAndSixColumns" + data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: auto / 1; grid-row: auto / 1;" + data-offset-x="615" data-offset-y="0" data-expected-width="215" data-expected-height="115"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="sixRowsAndSixColumns" + data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: auto / 2; grid-row: auto / 2;" + data-offset-x="415" data-offset-y="0" data-expected-width="415" data-expected-height="265"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="sixRowsAndSixColumns" + data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: 3 / auto; grid-row: 3 / auto;" + data-offset-x="0" data-offset-y="515" data-expected-width="115" data-expected-height="115"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="sixRowsAndSixColumns" + data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: 2 / auto; grid-row: 2 / auto;" + data-offset-x="0" data-offset-y="265" data-expected-width="415" data-expected-height="365"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="sixRowsAndSixColumns" + data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: -4 / 1; grid-row: -4 / 1;" + data-offset-x="615" data-offset-y="65" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="sixRowsAndSixColumns" + data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: -4 / 2; grid-row: -4 / 2;" + data-offset-x="415" data-offset-y="65" data-expected-width="300" data-expected-height="200"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="sixRowsAndSixColumns" + data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: 3 / 4; grid-row: 3 / 4;" + data-offset-x="15" data-offset-y="515" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid directionRTL"> + <div class="sixRowsAndSixColumns" + data-offset-x="-85" data-offset-y="15" data-expected-width="900" data-expected-height="600"> + </div> + <div class="absolute" style="grid-column: 2 / 4; grid-row: 2 / 4;" + data-offset-x="15" data-offset-y="265" data-expected-width="400" data-expected-height="300"> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/grid-sizing-positioned-items-001.html b/testing/web-platform/tests/css/css-grid/abspos/grid-sizing-positioned-items-001.html new file mode 100644 index 0000000000..de1869c70a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/grid-sizing-positioned-items-001.html @@ -0,0 +1,204 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Grid sizing positioned items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="This test checks the different size options for absolutely positioned grid items."> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + +.grid { + grid-template-columns: 100px 200px; + grid-template-rows: 50px 150px; + width: 100%; + height: 100%; + border: 5px solid black; + margin: 30px; + padding: 15px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.absolute { + position: absolute; +} + +.lengthSize { + width: 50px; + height: 20px; +} + +.percentageSize { + width: 50%; + height: 20%; +} + +.offsets { + left: 5px; + right: 10px; + top: 15px; + bottom: 20px; +} + +.onlyFirstRowOnlyFirstColumn { + background-color: blue; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +.endSecondRowEndSecondColumn { + background-color: orange; + grid-column-end: 3; + grid-row-end: 3; +} + +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<script type="text/javascript"> + setup({ explicit_done: true }); +</script> + +<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })"> + +<div id="log"></div> + +<div class="unconstrainedContainer"> + <div class="grid"> + <div class="absolute autoRowAutoColumn sizedToGridArea" + data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-expected-height="1030"> + </div> + <div class="absolute secondRowSecondColumn sizedToGridArea" + data-offset-x="115" data-offset-y="65" data-expected-width="915" data-expected-height="965"> + </div> + <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" + data-offset-x="15" data-offset-y="15" data-expected-width="100" data-expected-height="50"> + </div> + <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" + data-offset-x="0" data-offset-y="0" data-expected-width="315" data-expected-height="215"> + </div> + </div> +</div> + +<div class="unconstrainedContainer"> + <div class="grid"> + <div class="absolute autoRowAutoColumn lengthSize" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="20"> + </div> + <div class="absolute secondRowSecondColumn lengthSize" + data-offset-x="115" data-offset-y="65" data-expected-width="50" data-expected-height="20"> + </div> + <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" + data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="20"> + </div> + <div class="absolute endSecondRowEndSecondColumn lengthSize" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="20"> + </div> + </div> +</div> + +<div class="unconstrainedContainer"> + <div class="grid"> + <div class="absolute autoRowAutoColumn percentageSize" + data-offset-x="0" data-offset-y="0" data-expected-width="515" data-expected-height="206"> + </div> + <div class="absolute secondRowSecondColumn percentageSize" + data-offset-x="115" data-offset-y="65" data-expected-width="457.5" data-expected-height="193"> + </div> + <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" + data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expected-height="10"> + </div> + <div class="absolute endSecondRowEndSecondColumn percentageSize" + data-offset-x="0" data-offset-y="0" data-expected-width="157.5" data-expected-height="43"> + </div> + </div> +</div> + +<div class="unconstrainedContainer"> + <div class="grid"> + <div class="absolute autoRowAutoColumn offsets" + data-offset-x="5" data-offset-y="15" data-expected-width="1015" data-expected-height="995"> + </div> + <div class="absolute secondRowSecondColumn offsets" + data-offset-x="120" data-offset-y="80" data-expected-width="900" data-expected-height="930"> + </div> + <div class="absolute onlyFirstRowOnlyFirstColumn offsets" + data-offset-x="20" data-offset-y="30" data-expected-width="85" data-expected-height="15"> + </div> + <div class="absolute endSecondRowEndSecondColumn offsets" + data-offset-x="5" data-offset-y="15" data-expected-width="300" data-expected-height="180"> + </div> + </div> +</div> + +<div class="unconstrainedContainer"> + <div class="grid directionRTL"> + <div class="absolute autoRowAutoColumn sizedToGridArea" + data-offset-x="0" data-offset-y="0" data-expected-width="1030" data-expected-height="1030"> + </div> + <div class="absolute secondRowSecondColumn sizedToGridArea" + data-offset-x="0" data-offset-y="65" data-expected-width="915" data-expected-height="965"> + </div> + <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" + data-offset-x="915" data-offset-y="15" data-expected-width="100" data-expected-height="50"> + </div> + <div class="absolute endSecondRowEndSecondColumn sizedToGridArea" + data-offset-x="715" data-offset-y="0" data-expected-width="315" data-expected-height="215"> + </div> + </div> +</div> + +<div class="unconstrainedContainer"> + <div class="grid directionRTL"> + <div class="absolute autoRowAutoColumn lengthSize" + data-offset-x="980" data-offset-y="0" data-expected-width="50" data-expected-height="20"> + </div> + <div class="absolute secondRowSecondColumn lengthSize" + data-offset-x="865" data-offset-y="65" data-expected-width="50" data-expected-height="20"> + </div> + <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize" + data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="20"> + </div> + <div class="absolute endSecondRowEndSecondColumn lengthSize" + data-offset-x="980" data-offset-y="0" data-expected-width="50" data-expected-height="20"> + </div> + </div> +</div> + +<div class="unconstrainedContainer"> + <div class="grid directionRTL"> + <div class="absolute autoRowAutoColumn percentageSize" + data-offset-x="515" data-offset-y="0" data-expected-width="515" data-expected-height="206"> + </div> + <div class="absolute secondRowSecondColumn percentageSize" + data-offset-x="457.5" data-offset-y="65" data-expected-width="457.5" data-expected-height="193"> + </div> + <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize" + data-offset-x="965" data-offset-y="15" data-expected-width="50" data-expected-height="10"> + </div> + <div class="absolute endSecondRowEndSecondColumn percentageSize" + data-offset-x="873" data-offset-y="0" data-expected-width="157.5" data-expected-height="43"> + </div> + </div> +</div> + +<div class="unconstrainedContainer"> + <div class="grid directionRTL"> + <div class="absolute autoRowAutoColumn offsets" + data-offset-x="5" data-offset-y="15" data-expected-width="1015" data-expected-height="995"> + </div> + <div class="absolute secondRowSecondColumn offsets" + data-offset-x="5" data-offset-y="80" data-expected-width="900" data-expected-height="930"> + </div> + <div class="absolute onlyFirstRowOnlyFirstColumn offsets" + data-offset-x="920" data-offset-y="30" data-expected-width="85" data-expected-height="15"> + </div> + <div class="absolute endSecondRowEndSecondColumn offsets" + data-offset-x="720" data-offset-y="15" data-expected-width="300" data-expected-height="180"> + </div> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-001.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-001.html new file mode 100644 index 0000000000..57ac05abf0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto')."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + top: "auto", + right: "auto", + bottom: "auto", + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-002.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-002.html new file mode 100644 index 0000000000..d12482dc70 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto')."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: "auto", + right: "auto", + bottom: "auto", + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-003.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-003.html new file mode 100644 index 0000000000..7c4e8bdacb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-003.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto')."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + top: 30, + right: "auto", + bottom: "auto", + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-004.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-004.html new file mode 100644 index 0000000000..a2d1c00d1f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-004.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'right' offset and a static block position (top/bottom are 'auto')."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + top: "auto", + right: 35, + bottom: "auto", + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-005.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-005.html new file mode 100644 index 0000000000..2c57cda559 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-005.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'bottom' offset and a static inline position (left/right are 'auto')."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + right: "auto", + top: "auto", + bottom: 40, + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-006.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-006.html new file mode 100644 index 0000000000..81a03a216d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-006.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left' and 'top' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: 30, + right: "auto", + bottom: "auto", + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-007.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-007.html new file mode 100644 index 0000000000..e600c310e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-007.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto')."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: "auto", + right: 35, + bottom: "auto", + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-008.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-008.html new file mode 100644 index 0000000000..d30ce60313 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-008.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left' and 'bottom' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: "auto", + right: "auto", + bottom: 40, + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-009.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-009.html new file mode 100644 index 0000000000..a212f34b4f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-009.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'top' and 'right' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + top: 30, + right: 35, + bottom: "auto", + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-010.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-010.html new file mode 100644 index 0000000000..dbc9fe1e86 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-010.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto')."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + top: 30, + right: "auto", + bottom: 40, + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-011.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-011.html new file mode 100644 index 0000000000..81c6bc9eba --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-011.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'right' and 'bottom' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + top: "auto", + right: 35, + bottom: 40, + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-012.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-012.html new file mode 100644 index 0000000000..3ae22bad83 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-012.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left', 'top' and 'right' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: 30, + right: 35, + bottom: "auto", + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-013.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-013.html new file mode 100644 index 0000000000..2c6ea3cc39 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-013.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left', 'top' and 'bottom' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: 30, + right: "auto", + bottom: 40, + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-014.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-014.html new file mode 100644 index 0000000000..e3b861835a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-014.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left', 'right' and 'bottom' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: "auto", + right: 35, + bottom: 40, + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-015.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-015.html new file mode 100644 index 0000000000..986ad02dc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-015.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'top', 'right' and 'bottom' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + top: 30, + right: 35, + bottom: 40, + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-016.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-016.html new file mode 100644 index 0000000000..e06113bf6c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-descendants-016.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned orthogonal elements inside grid items are properly placed and sized when they have specific 'left, 'top', 'right' and 'bottom' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: 30, + right: 35, + bottom: 40, + orthogonal: true, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-001-ref.html new file mode 100644 index 0000000000..71baf6d14e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-001-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + place-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + writing-mode: vertical-lr; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-001.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-001.html new file mode 100644 index 0000000000..54f937defd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-001.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-001-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-002.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-002.html new file mode 100644 index 0000000000..50aea16502 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-002.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-001-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + left: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-003.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-003.html new file mode 100644 index 0000000000..4e118624b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-003.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-001-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + top: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-004.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-004.html new file mode 100644 index 0000000000..7a724092a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-004.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-001-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'left' and 'top' offsets."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + left: 0; + top: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-005-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-005-ref.html new file mode 100644 index 0000000000..0a19a463a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-005-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + justify-items: end; + align-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + writing-mode: vertical-lr; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-005.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-005.html new file mode 100644 index 0000000000..dacbc85289 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-005.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-005-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'right' offset and a static block position (top/bottom are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + right: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-006-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-006-ref.html new file mode 100644 index 0000000000..5de990f3e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-006-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + justify-items: start; + align-items: end; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + writing-mode: vertical-lr; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-006.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-006.html new file mode 100644 index 0000000000..00930da298 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-006.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-006-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'bottom' offset and a static inline position (left/right are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + bottom: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-007-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-007-ref.html new file mode 100644 index 0000000000..ddbf86e277 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-007-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + align-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + writing-mode: vertical-lr; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-007.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-007.html new file mode 100644 index 0000000000..a663f0fdb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-007.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-007-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + left: 0; + right: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-008-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-008-ref.html new file mode 100644 index 0000000000..231e3ed95f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-008-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + justify-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + writing-mode: vertical-lr; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-008.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-008.html new file mode 100644 index 0000000000..fab723d188 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-008.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-008-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + top: 0; + bottom: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-009-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-009-ref.html new file mode 100644 index 0000000000..b7b881a609 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-009-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + writing-mode: vertical-lr; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-009.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-009.html new file mode 100644 index 0000000000..dd1849e988 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-009.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-009-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'left, 'right', 'top' and 'bottom' offsets."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-010.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-010.html new file mode 100644 index 0000000000..b1d5353770 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-010.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-009-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto') and a specific size."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + width: 100%; + height: 100%; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-011-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-011-ref.html new file mode 100644 index 0000000000..7b7ce4848a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-011-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + place-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + writing-mode: vertical-lr; + margin-left: 10px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-011.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-011.html new file mode 100644 index 0000000000..c0772d46ab --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-011.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-011-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + left: 10px; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-012-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-012-ref.html new file mode 100644 index 0000000000..7f2828d4ab --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-012-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + justify-items: end; + align-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + writing-mode: vertical-lr; + margin-right: 5px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-012.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-012.html new file mode 100644 index 0000000000..8e29b822ab --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-012.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-012-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'right' offset and a static block position (top/bottom are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + right: 5px; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-013-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-013-ref.html new file mode 100644 index 0000000000..b822730f32 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-013-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + align-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + writing-mode: vertical-lr; + margin-left: 10px; + margin-right: 5px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-013.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-013.html new file mode 100644 index 0000000000..b78f706fd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-013.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-013-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + left: 10px; + right: 5px; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-014-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-014-ref.html new file mode 100644 index 0000000000..b5062f0db1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-014-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + place-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + writing-mode: vertical-lr; + margin-top: 15px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-014.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-014.html new file mode 100644 index 0000000000..37d643b9e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-014.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-014-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + top: 15px; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-015-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-015-ref.html new file mode 100644 index 0000000000..000fd63c22 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-015-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + justify-items: start; + align-items: end; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + writing-mode: vertical-lr; + margin-bottom: 20px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-015.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-015.html new file mode 100644 index 0000000000..a1da3f6f3f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-015.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-015-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have a specific 'bottom' offset and a static inline position (left/right are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + bottom: 20px; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-016-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-016-ref.html new file mode 100644 index 0000000000..dc1d958332 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-016-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + justify-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + writing-mode: vertical-lr; + margin-top: 15px; + margin-bottom: 20px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-016.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-016.html new file mode 100644 index 0000000000..06aedf3d2d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-016.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-016-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + top: 15px; + bottom: 20px; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-017-ref.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-017-ref.html new file mode 100644 index 0000000000..66c57511b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-017-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + writing-mode: vertical-lr; + margin-left: 10px; + margin-right: 5px; + margin-top: 15px; + margin-bottom: 20px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-017.html b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-017.html new file mode 100644 index 0000000000..f0f91ec321 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/orthogonal-positioned-grid-items-017.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Orthogonal positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="orthogonal-positioned-grid-items-017-ref.html"> +<meta name="assert" content="Checks that absolutely positioned orthogonal grid items are properly placed and sized when they have specific 'left, 'right', 'top' and 'bottom' offsets."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + writing-mode: vertical-lr; + position: absolute; + left: 10px; + right: 5px; + top: 15px; + bottom: 20px; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-001.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-001.html new file mode 100644 index 0000000000..8583f34cab --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto')."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + top: "auto", + right: "auto", + bottom: "auto", +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-002.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-002.html new file mode 100644 index 0000000000..7e6f65dba0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-002.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto')."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: "auto", + right: "auto", + bottom: "auto", +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-003.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-003.html new file mode 100644 index 0000000000..f0c6d4e321 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-003.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto')."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + top: 30, + right: "auto", + bottom: "auto", +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-004.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-004.html new file mode 100644 index 0000000000..2abfe22af1 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-004.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'right' offset and a static block position (top/bottom are 'auto')."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + top: "auto", + right: 35, + bottom: "auto", +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-005.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-005.html new file mode 100644 index 0000000000..ad19acbf25 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-005.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'bottom' offset and a static inline position (left/right are 'auto')."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + right: "auto", + top: "auto", + bottom: 40, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-006.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-006.html new file mode 100644 index 0000000000..f59ec88137 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-006.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left' and 'top' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: 30, + right: "auto", + bottom: "auto", +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-007.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-007.html new file mode 100644 index 0000000000..46e12d46bc --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-007.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto')."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: "auto", + right: 35, + bottom: "auto", +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-008.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-008.html new file mode 100644 index 0000000000..a8187cdb8e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-008.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left' and 'bottom' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: "auto", + right: "auto", + bottom: 40, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-009.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-009.html new file mode 100644 index 0000000000..abc7c95427 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-009.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'top' and 'right' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + top: 30, + right: 35, + bottom: "auto", +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-010.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-010.html new file mode 100644 index 0000000000..1a56fbe864 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-010.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto')."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + top: 30, + right: "auto", + bottom: 40, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-011.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-011.html new file mode 100644 index 0000000000..759db2b372 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-011.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'right' and 'bottom' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + top: "auto", + right: 35, + bottom: 40, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-012.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-012.html new file mode 100644 index 0000000000..35329ca7e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-012.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left', 'top' and 'right' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: 30, + right: 35, + bottom: "auto", +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-013.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-013.html new file mode 100644 index 0000000000..5af4078b3a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-013.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left', 'top' and 'bottom' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: 30, + right: "auto", + bottom: 40, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-014.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-014.html new file mode 100644 index 0000000000..07883438d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-014.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left', 'right' and 'bottom' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: "auto", + right: 35, + bottom: 40, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-015.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-015.html new file mode 100644 index 0000000000..08a261a818 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-015.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'top', 'right' and 'bottom' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: "auto", + top: 30, + right: 35, + bottom: 40, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-016.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-016.html new file mode 100644 index 0000000000..f691816880 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-016.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized when they have specific 'left, 'top', 'right' and 'bottom' offsets."> + +<link rel="stylesheet" href="/fonts/ahem.css"> +<link rel="stylesheet" href="support/positioned-grid-descendants.css" /> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> + +<body> +<div id="log"></div> +<script type="module"> +import {runTests} from "./support/positioned-grid-descendants.js"; +runTests({ + left: 25, + top: 30, + right: 35, + bottom: 40, +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-017-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-017-ref.html new file mode 100644 index 0000000000..c3f98bba97 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-017-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants eference file</title> +<style> + #grid { + display: inline-grid; + grid-template-columns: 50px 50px; + grid-template-rows: 50px 50px; + background-color: blue; + } + #child-1 { + grid-area: 1 / 1 / 1 / 1; + width: 50px; + height: 50px; + background-color: hotpink; + } + #child-2 { + grid-area: 2 / 2 / 2 / 2; + width: 50px; + height: 50px; + background-color: green; + } + #grandchild { + width: 25px; + height: 25px; + background-color: red; + } +</style> + + <p>Test passes if it matches the reference.</p> + + <div id="grid"> + <div id="child-1"></div> + <div id="child-2"> + <div id="grandchild"></div> + </div> + </div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-017.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-017.html new file mode 100644 index 0000000000..e1c23a2a0f --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-descendants-017.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid descendants</title> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-descendants-017-ref.html"> +<meta name="assert" content="Checks that absolutely positioned elements inside grid items are properly placed and sized."> +<style> + #grid { + display: inline-grid; + grid-template-columns: 50px 50px; + grid-template-rows: 50px 50px; + background-color: blue; + position: relative; + } + #child { + grid-area: 1 / 1 / 1 / 1; + background-color: hotpink; + } + #abspos { + grid-area: 2 / 2 / 2 / 2; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background-color: green; + contain: strict; + position: absolute; + } + #grandchild { + width: 50%; + height: 50%; + background-color: red; + } +</style> + + <p>Test passes if it matches the reference.</p> + + <div id="grid"> + <div id="child"> + <div id="abspos"> + <marquee id="grandchild"></marquee> + </div> + </div> + </div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-001-ref.html new file mode 100644 index 0000000000..5c01d89aeb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-001-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + place-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-001.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-001.html new file mode 100644 index 0000000000..48dee4bfc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-001.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-001-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-002.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-002.html new file mode 100644 index 0000000000..54c40b69e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-002.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-001-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + left: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-003.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-003.html new file mode 100644 index 0000000000..09583f4903 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-003.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-001-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + top: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-004.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-004.html new file mode 100644 index 0000000000..525fe05716 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-004.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-001-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have specific 'left' and 'top' offsets."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + left: 0; + top: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-005-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-005-ref.html new file mode 100644 index 0000000000..31960123f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-005-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + justify-items: end; + align-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-005.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-005.html new file mode 100644 index 0000000000..9767714c04 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-005.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-005-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'right' offset and a static block position (top/bottom are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + right: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-006-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-006-ref.html new file mode 100644 index 0000000000..a3f12bbf11 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-006-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + justify-items: start; + align-items: end; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-006.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-006.html new file mode 100644 index 0000000000..5ae2f2cd36 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-006.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-006-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'bottom' offset and a static inline position (left/right are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + bottom: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-007-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-007-ref.html new file mode 100644 index 0000000000..7c7307cb9a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-007-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + align-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-007.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-007.html new file mode 100644 index 0000000000..cf17b29746 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-007.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-007-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + left: 0; + right: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-008-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-008-ref.html new file mode 100644 index 0000000000..c7447aa30c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-008-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + justify-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-008.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-008.html new file mode 100644 index 0000000000..88d9572ed7 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-008.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-008-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + top: 0; + bottom: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-009-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-009-ref.html new file mode 100644 index 0000000000..5a2bc41506 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-009-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-009.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-009.html new file mode 100644 index 0000000000..bdfd41d8b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-009.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-009-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have specific 'left, 'right', 'top' and 'bottom' offsets."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-010.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-010.html new file mode 100644 index 0000000000..676deceb40 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-010.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-009-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a static position (left/rigth and top/bottom are 'auto') and a specific size."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + width: 100%; + height: 100%; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-011-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-011-ref.html new file mode 100644 index 0000000000..f98381f434 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-011-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + place-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + margin-left: 10px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-011.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-011.html new file mode 100644 index 0000000000..e13c39837e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-011.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-011-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'left' offset and a static block position (top/bottom are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + left: 10px; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-012-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-012-ref.html new file mode 100644 index 0000000000..eee7b3516d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-012-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + justify-items: end; + align-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + margin-right: 5px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-012.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-012.html new file mode 100644 index 0000000000..c9ff571653 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-012.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-012-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'right' offset and a static block position (top/bottom are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + right: 5px; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-013-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-013-ref.html new file mode 100644 index 0000000000..d616e3d27a --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-013-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + align-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + margin-left: 10px; + margin-right: 5px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> + diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-013.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-013.html new file mode 100644 index 0000000000..2bad6861b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-013.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-013-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have specific 'left' and 'right' offsets and a static block position (top/bottom are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + left: 10px; + right: 5px; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-014-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-014-ref.html new file mode 100644 index 0000000000..c950fcbfb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-014-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + place-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + margin-top: 15px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-014.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-014.html new file mode 100644 index 0000000000..aef497d541 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-014.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-014-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'top' offset and a static inline position (left/right are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + top: 15px; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-015-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-015-ref.html new file mode 100644 index 0000000000..5c6583bfa4 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-015-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + justify-items: start; + align-items: end; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + margin-bottom: 20px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-015.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-015.html new file mode 100644 index 0000000000..4de8be1a86 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-015.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-015-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have a specific 'bottom' offset and a static inline position (left/right are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + bottom: 20px; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-016-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-016-ref.html new file mode 100644 index 0000000000..05e708f492 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-016-ref.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + justify-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + margin-top: 15px; + margin-bottom: 20px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-016.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-016.html new file mode 100644 index 0000000000..bc3ac50d2b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-016.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-016-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have specific 'top' and 'bottom' offsets and a static inline position (left/right are 'auto')."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + top: 15px; + bottom: 20px; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-017-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-017-ref.html new file mode 100644 index 0000000000..2633ac41aa --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-017-ref.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; +} + +#grid > div { + margin-left: 10px; + margin-right: 5px; + margin-top: 15px; + margin-bottom: 20px; +} + +#firstItem { + background: magenta; +} + +#secondItem { + background: cyan; +} + +#thirdItem { + background: yellow; +} + +#fourthItem { + background: lime; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-017.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-017.html new file mode 100644 index 0000000000..115abf4971 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-017.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-017-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed and sized when they have specific 'left, 'right', 'top' and 'bottom' offsets."> +<style> +#grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; +} + +#grid > div { + position: absolute; + left: 10px; + right: 5px; + top: 15px; + bottom: 20px; +} + +#firstItem { + background: magenta; + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#secondItem { + background: cyan; + grid-column: 2 / 3; + grid-row: 1 / 2; +} + +#thirdItem { + background: yellow; + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; +} +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-018.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-018.html new file mode 100644 index 0000000000..0c9d21642e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-018.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="display: grid; grid-template-columns: 200px; grid-template-rows: 200px; max-width: 100px; max-height: 100px; position: relative;"> + <div style="background: green; position: absolute; width: 100%; height: 100%;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-019-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-019-ref.html new file mode 100644 index 0000000000..865b3d83a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-019-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Fixed positioned element in grid.</title> +<style> + + #grid { + display: inline-grid; + grid: 50px 50px / 50px 50px; + padding: 5px; + border: 5px solid; + background-color: gray; + margin: 50px; + } + + #fixed { + width: 50px; + height: 50px; + background-color: blue; + position: fixed; + top: 0px; + left: 0px; + } + +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="fixed"></div> +<div id="grid"></div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-019.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-019.html new file mode 100644 index 0000000000..b0aeac3a1d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-019.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Fixed positioned element in grid.</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-019-ref.html"> +<meta name="assert" content="This test checks the behavior of the fixed positioned elements with a grid container as parent."> +<style> + + #grid { + display: inline-grid; + grid: 50px 50px / 50px 50px; + padding: 5px; + border: 5px solid; + background-color: gray; + margin: 50px; + } + + #fixed { + width: 50px; + height: 50px; + background-color: blue; + position: fixed; + top: 0px; + left: 0px; + } + +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="fixed"></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-020.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-020.html new file mode 100644 index 0000000000..baddf0bed6 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-020.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized."> +<style> + #grid { + display: grid; + grid-auto-columns: 9px 14px 22px; + width: 100px; + height: 100px; + position: relative; + gap: 2px; + background-color: green; + } + + .absolute { + position: absolute; + width: 100%; + height: 100%; + grid-row: 1 / 2; + background-color: green; + } + + #item { + grid-column: 5 / span 2; + background-color: red; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div class="absolute" style="grid-column: 1 / 2"></div> + <div class="absolute" style="grid-column: 2 / 3"></div> + <div class="absolute" style="grid-column: 3 / 4"></div> + <div class="absolute" style="grid-column: 4 / 5"></div> + <div class="absolute" style="grid-column: 5 / 6"></div> + <div class="absolute" style="grid-column: 6 / 7"></div> + <div class="absolute" style="grid-column: 5 / 7"></div> + <div id="item"></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-021.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-021.html new file mode 100644 index 0000000000..1e3d89de6c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-021.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized."> +<style> + #grid { + display: grid; + width: 100px; + height: 100px; + position: relative; + } + + .absolute { + position: absolute; + width: 100%; + height: 100%; + grid-row: 1 / 2; + background-color: green; + } + + #item { + grid-column: 1 / span 3; + background-color: red; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div class="absolute" style="grid-column: 1 / 2"></div> + <div class="absolute" style="grid-column: 2 / 3"></div> + <div class="absolute" style="grid-column: 3 / 4"></div> + <div id="item"></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-022-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-022-ref.html new file mode 100644 index 0000000000..0b2cfdac07 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-022-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<style> + #grid { + width: 100px; + height: 100px; + background-color: blue; + position: relative; + padding: 5px; + } + + .abspos { + position: absolute; + bottom: 0px; right: 0px; + background-color: hotpink; + } + + #start { + top: 0px; left: 0px; + width: 5px; + height: 5px; + } + + #end { + top: 5px; left: 5px; + width: 105px; + height: 105px; + } + +</style> + + <p>The test passes if it has the same output than the reference.</p> + + <div id="grid"> + <div class="abspos" id="start"></div> + <div class="abspos" id="end"></div> + </div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-022.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-022.html new file mode 100644 index 0000000000..df35b546f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-022.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-022-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items are properly placed in an undefined grid."> +<style> + #grid { + display: grid; + width: 100px; + height: 100px; + background-color: blue; + position: relative; + padding: 5px; + } + + .abspos { + position: absolute; + top: 0px; bottom: 0px; left: 0px; right: 0px; + width: 100%; + height: 100%; + background-color: hotpink; + } + + #start { + grid-area: 1/1/auto/auto; + } + + #end { + grid-area: auto/auto/1/1; + } + +</style> + + <p>The test passes if it has the same output than the reference.</p> + + <div id="grid"> + <div class="abspos" id="start"></div> + <div class="abspos" id="end"></div> + </div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-023-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-023-ref.html new file mode 100644 index 0000000000..c94c7694ba --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-023-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<style> + #grid { + display: inline-grid; + grid-template-columns: 50px 50px; + grid-template-rows: 50px 50px; + background-color: blue; + } + #child { + grid-area: 2 / 2 / 2 / 2; + width: 50px; + height: 50px; + background-color: green; + } + #grandchild { + width: 25px; + height: 25px; + background-color: red; + } +</style> + + <p>Test passes if it matches the reference.</p> + + <div id="grid"> + <div id="child"> + <div id="grandchild"></div> + </div> + </div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-023.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-023.html new file mode 100644 index 0000000000..a30f20e33e --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-023.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-023-ref.html"> +<meta name="assert" content="Checks that absolutely positioned grid items with a strict contain attribute are properly placed in a grid."> +<style> + #grid { + display: inline-grid; + grid-template-columns: 50px 50px; + grid-template-rows: 50px 50px; + background-color: blue; + position: relative; + } + #child { + grid-area: 2 / 2 / 2 / 2; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background-color: green; + contain: strict; + position: absolute; + } + #grandchild { + width: 50%; + height: 50%; + background-color: red; + } +</style> + + <p>Test passes if it matches the reference.</p> + + <div id="grid"> + <div id="child"> + <marquee id="grandchild"></marquee> + </div> + </div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-024.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-024.html new file mode 100644 index 0000000000..b214787026 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-024.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized."> +<style> + #grid { + display: grid; + grid-template-columns: 50px 50px; + grid-template-rows: 50px 50px; + width: 100px; + height: 100px; + background-color: red; + position: relative; + } + + #grid > div { + background-color: green; + } + + #abspos { + position: absolute; + margin-top: auto; + margin-left: auto; + width: 50%; + height: 50%; + } +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<div id="grid"> + <div style="grid-column: 2 / 3; grid-row: 1 / 2;"></div> + <div style="grid-column: 1 / 2; grid-row: 2 / 3;"></div> + <div style="grid-column: 2 / 3; grid-row: 2 / 3;"></div> + <div id="abspos"></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-025-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-025-ref.html new file mode 100644 index 0000000000..b9e30e4286 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-025-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="author" title="Matt Woodrow" href="mwoodrow@apple.com"> +</head> +<body> + <div style="background-color:blue; height: 100px; width: 50px"></div> + <div style="background-color:blue; height: 100px; width: 80px; + position: relative; top: -100px; left: 200px;"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-025.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-025.html new file mode 100644 index 0000000000..d4c1b01a53 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-025.html @@ -0,0 +1,34 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<link rel="match" href="positioned-grid-items-025-ref.html"> +<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized."> +<style> + #grid { + display: grid; + grid-template-columns: 50px 100px; + height: 100px; + width: 150px; + direction: rtl; + padding-left: 50px; + padding-right: 80px; + position: absolute; + } + + #grid > div { + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + position: absolute; + background-color: blue; + } +</style> + +</head><body><div id="grid"> + <div style="grid-column: auto / 1;"></div> + <div style="grid-column: -1 / auto;"></div> +</div> +</body></html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-crash.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-crash.html new file mode 100644 index 0000000000..228a6264df --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-crash.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<title>CSS Grid Layout Test: Positioned grid items</title> +<link rel="author" title="Manuel Rego" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid/#abspos" title="9. Absolute Positioning"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=402504"> +<meta name="assert" content="Checks that positioned grid items (absolute or fixed) do not cause a crash."/> + +<link rel="stylesheet" href="/css/support/grid.css"> +<body> + <div class="grid"> + <div style="position: absolute;"></div> + <div style="position: fixed;"></div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-001-ref.html new file mode 100644 index 0000000000..2bbc3a9513 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-001-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items reference file</title> +<style> + #grid { + display: grid; + grid: 150px 100px / 200px 300px; + place-items: start; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + } + + #firstItem { + background: magenta; + } + + #secondItem { + background: cyan; + } + + #thirdItem { + background: yellow; + } + + #fourthItem { + background: lime; + } +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-001.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-001.html new file mode 100644 index 0000000000..f723b2486c --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-001.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Absolutely positioned items with negative indices</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<link rel="match" href="positioned-grid-items-negative-indices-001-ref.html"> +<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized when they have negative indices."> +<style> + #grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; + } + + #grid > div { + position: absolute; + } + + #firstItem { + background: magenta; + grid-column: -3 / -2; + grid-row: -3 / -2; + } + + #secondItem { + background: cyan; + grid-column: -2 / -1; + grid-row: -3 / -2; + } + + #thirdItem { + background: yellow; + grid-column: -3 / -2; + grid-row: -2 / -1; + } + + #fourthItem { + background: lime; + grid-column: -2 / -1; + grid-row: -2 / -1; + } +</style> + +<p>The test passes if it has the same output than the reference.</p> +<div id="grid"> + <div id="firstItem">First item</div> + <div id="secondItem">Second item</div> + <div id="thirdItem">Third item</div> + <div id="fourthItem">Fourth item</div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-002-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-002-ref.html new file mode 100644 index 0000000000..a5ee066e84 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-002-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Absolutely positioned items reference file</title> +<style> + #grid { + display: grid; + grid: 50px 50px / 50px 50px; + margin: 1px 2px 3px 4px; + padding: 100px 100px 100px 100px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 100px; + height: 100px; + position: relative; + background-color: gray; + } + + #grid > div { + position: absolute; + width: 100%; + height: 100%; + } + + #firstItem { + background: magenta; + grid-column: auto / 1; + grid-row: auto / 1; + } + + #secondItem { + background: cyan; + grid-column: 3 / auto; + grid-row: 3 / auto; + } + + #thirdItem { + background: yellow; + grid-column: 5 / 6; + grid-row: 5 / 6; + width: 25% !important; + height: 25% !important; + } + + #fourthItem { + background: lime; + grid-column: 2 / 3; + grid-row: 2 / 3; + } +</style> + +<p>The test passes if it has the same output than the reference.</p> +<div id="grid"> + <div id="firstItem"></div> + <div id="secondItem"></div> + <div id="thirdItem"></div> + <div id="fourthItem"></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-002.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-002.html new file mode 100644 index 0000000000..4a023e1c62 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-002.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Absolutely positioned items with negative indices</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<link rel="match" href="positioned-grid-items-negative-indices-002-ref.html"> +<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized when they have negative indices."> +<style> + #grid { + display: grid; + grid: 50px 50px / 50px 50px; + margin: 1px 2px 3px 4px; + padding: 100px 100px 100px 100px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 100px; + height: 100px; + position: relative; + background-color: gray; + } + + #grid > div { + position: absolute; + width: 100%; + height: 100%; + } + + #firstItem { + background: magenta; + grid-column: auto / -3; + grid-row: auto / -3; + } + + #secondItem { + background: cyan; + grid-column: -1 / auto; + grid-row: -1 / auto; + } + + #thirdItem { + background: yellow; + grid-column: -5 / -6; + grid-row: -5 / -6; + width: 25% !important; + height: 25% !important; + } + + #fourthItem { + background: lime; + grid-column: -2 / 3; + grid-row: 2 / -1; + } +</style> + +<p>The test passes if it has the same output than the reference.</p> +<div id="grid"> + <div id="firstItem"></div> + <div id="secondItem"></div> + <div id="thirdItem"></div> + <div id="fourthItem"></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-003-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-003-ref.html new file mode 100644 index 0000000000..4e8e9a4314 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-003-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Absolutely positioned items with negative indices</title> +<style> + #grid { + display: grid; + margin: 4px; + padding: 10px; + width: 500px; + height: 130px; + position: relative; + } + + #firstItem { + grid-column: 1 / span 2; + background-color: hotpink; + } + + #secondItem { + grid-column: 3 / span 6; + background-color: lightblue; + } + +</style> + +<p>The test passes if there are two tracks in hotpink and 6 in light blue.</p> +<div id="grid"> + <div id="firstItem"></div> + <div id="secondItem"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-003.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-003.html new file mode 100644 index 0000000000..099dd9ca06 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-negative-indices-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Absolutely positioned items with negative indices</title> +<link rel="help" href="https://drafts.csswg.org/css-grid-2/#abspos"> +<link rel="match" href="positioned-grid-items-negative-indices-003-ref.html"> +<meta name="assert" content="Checks that absolutely positioned items are properly placed and sized when they have negative indices in an undefined sized grid."> +<style> + #grid { + display: grid; + margin: 4px; + padding: 10px; + width: 500px; + height: 130px; + position: relative; + } + + #absolute { + position: absolute; + width: 100%; + height: 100%; + grid-column: -3 / span 6; + grid-row: 1 / 2; + background-color: lightblue; + } + + #item { + grid-column: -5 / span 8; + background-color: hotpink; + } + +</style> + +<p>The test passes if there are two tracks in hotpink and 6 in light blue.</p> +<div id="grid"> + <div id="absolute"></div> + <div id="item"></div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-create-implicit-tracks-001.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-create-implicit-tracks-001.html new file mode 100644 index 0000000000..08779ec1e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-create-implicit-tracks-001.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items should not create implicit tracks</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="This test checks that positioned items shouldn't create implicit tracks on the grid."> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + +.grid { + grid-auto-columns: 100px; + grid-auto-rows: 50px; + width: 400px; + height: 300px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.absolute { + position: absolute; +} + +.seventhRowFourthColumn { + background-color: coral; + grid-column: 4; + grid-row: 7; +} + +</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"> + <div class="sizedToGridArea absolute seventhRowFourthColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="400" data-expected-height="300"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"> + </div> + <div class="autoRowAutoColumn" + data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-take-up-space-001.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-take-up-space-001.html new file mode 100644 index 0000000000..bb3be69cfb --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-should-not-take-up-space-001.html @@ -0,0 +1,194 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items should not take up space</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<meta name="assert" content="This test checks that positioned items shouldn't take up space or otherwise participate in the layout of the grid."> +<link rel="stylesheet" href="/fonts/ahem.css"> +<link href="/css/support/grid.css" rel="stylesheet"> +<style> + +.grid { + grid-template-columns: 50px 100px; + grid-template-rows: 50px 100px; + width: 150px; + height: 150px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; + /* Ensures that the grid container is the containing block of the fixed positioned grid children. */ + transform: translate(10px, 20px); +} + +.absolute { + position: absolute; +} + +.fixed { + position: fixed; +} + +.offsetLeft100 { + left: 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> + +<p>Absolutely positioned:</p> + +<div class="grid"> + <div class="sizedToGridArea absolute autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150"> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> +</div> + +<div class="grid"> + <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100" + data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150"> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> +</div> + +<div class="grid"> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="sizedToGridArea absolute autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150"> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid"> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100" + data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150"> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid"> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> + <div class="sizedToGridArea absolute autoRowAutoColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="150" data-expected-height="150"> + </div> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"> + </div> +</div> + +<div class="grid"> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> + <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft100" + data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150"> + </div> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"> + </div> +</div> + +<p>Fixed positioned:</p> + +<div class="grid"> + <div class="sizedToGridArea fixed autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150"> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> +</div> + +<div class="grid"> + <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100" + data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150"> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> +</div> + +<div class="grid"> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="sizedToGridArea fixed autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="150"> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid"> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100" + data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150"> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> + </div> +</div> + +<div class="grid"> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> + <div class="sizedToGridArea fixed autoRowAutoColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="150" data-expected-height="150"> + </div> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"> + </div> +</div> + +<div class="grid"> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"> + <div class="sizedToGridArea fixed autoRowAutoColumn offsetLeft100" + data-offset-x="100" data-offset-y="0" data-expected-width="150" data-expected-height="150"> + </div> + </div> + <div class="sizedToGridArea autoRowAutoColumn" + data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"> + </div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-sizing-001-ref.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-sizing-001-ref.html new file mode 100644 index 0000000000..cd0e378e3b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-sizing-001-ref.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items sizing reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<meta name="flags" content="ahem"> +<link href="/css/support/grid.css" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + +.grid { + grid: 25px 50px / 100px 60px; + margin: 1px 2px 3px 4px; + padding: 6px 3px 9px 12px; + border: solid; + border-width: 8px 2px 4px 6px; + font: 10px/1 Ahem; + float: left; + inline-size: 200px; + block-size: 100px; + justify-items: start; + align-items: start; +} + +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div class="grid"> + <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div> +</div> + +<div class="grid directionRTL"> + <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div> +</div> + +<div class="grid verticalLR"> + <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div> +</div> + +<div class="grid verticalLR directionRTL"> + <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div> +</div> + +<div class="grid verticalRL directionRTL"> + <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-sizing-001.html b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-sizing-001.html new file mode 100644 index 0000000000..7fb303c0dd --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/positioned-grid-items-sizing-001.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Grid Layout Test: Positioned grid items sizing</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos" title="9. Absolute Positioning"> +<link rel="match" href="positioned-grid-items-sizing-001-ref.html"> +<meta name="assert" content="This test checks that the sizing of positioned grid items without specific dimensions or offsets is equivalent to the size of regular items."> +<meta name="flags" content="ahem"> +<link href="/css/support/grid.css" rel="stylesheet"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + +.grid { + grid: 25px 50px / 100px 60px; + margin: 1px 2px 3px 4px; + padding: 6px 3px 9px 12px; + border: solid; + border-width: 8px 2px 4px 6px; + font: 10px/1 Ahem; + float: left; + inline-size: 200px; + block-size: 100px; + /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ + position: relative; +} + +.grid > div { + position: absolute; +} + +</style> + +<p>The test passes if it has the same output than the reference.</p> + +<div class="grid"> + <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div> +</div> + +<div class="grid directionRTL"> + <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div> +</div> + +<div class="grid verticalLR"> + <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div> +</div> + +<div class="grid verticalLR directionRTL"> + <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div> +</div> + +<div class="grid verticalRL"> + <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div> +</div> + +<div class="grid verticalRL directionRTL"> + <div class="onlyFirstRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlyFirstRowOnlySecondColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlyFirstColumn">XXX XX X XX XXX</div> + <div class="onlySecondRowOnlySecondColumn">XXX XX X XX XXX</div> +</div> diff --git a/testing/web-platform/tests/css/css-grid/abspos/support/colors-8x16.png b/testing/web-platform/tests/css/css-grid/abspos/support/colors-8x16.png Binary files differnew file mode 100644 index 0000000000..596fdb389d --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/support/colors-8x16.png diff --git a/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.css b/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.css new file mode 100644 index 0000000000..9fa29a25ae --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.css @@ -0,0 +1,25 @@ +.grid { + display: grid; + grid: 150px 100px / 200px 300px; + margin: 1px 2px 3px 4px; + padding: 20px 15px 10px 5px; + border-width: 9px 3px 12px 6px; + border-style: solid; + width: 550px; + height: 400px; + position: relative; + font: 25px/1 Ahem; +} +.abspos { + position: absolute; + display: inline; +} +.orthogonal { + writing-mode: vertical-lr; +} +.grid > :nth-child(1) > .abspos { + color: cyan; +} +.grid > :nth-child(2) > .abspos { + color: yellow; +} diff --git a/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.js b/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.js new file mode 100644 index 0000000000..d45df4bc22 --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/abspos/support/positioned-grid-descendants.js @@ -0,0 +1,73 @@ +// Track sizes, including preceding padding and following remaining space +const colSizes = [5, 200, 300, 65]; +const rowSizes = [20, 150, 100, 160]; + +// Calculate track positions +const colOffsets = [0]; +const rowOffsets = [0]; +for (const size of colSizes) + colOffsets.push(size + colOffsets[colOffsets.length - 1]); +for (const size of rowSizes) + rowOffsets.push(size + rowOffsets[rowOffsets.length - 1]); + +export function runTests({left, top, right, bottom, orthogonal = false}) { + // Iterate all pairs of grid lines, where 0 and 4 represent "auto". + for (let colStart = 0; colStart < 4; ++colStart) + for (let colEnd = colStart + 1; colEnd <= 4; ++colEnd) + for (let rowStart = 0; rowStart < 4; ++rowStart) + for (let rowEnd = rowStart + 1; rowEnd <= 4; ++rowEnd) + { + // Create a 2x2 grid with two grid items, each one containing an abspos. + const grid = document.createElement("div"); + grid.className = "grid"; + for (let i = 1; i <= 2; ++i) { + // Create a grid item with some content before the abspos, so that the static + // position is shifted 50px to the right and 25px to the bottom. + const gridItem = document.createElement("div"); + gridItem.style.gridArea = `${i} / ${i}`; + grid.appendChild(gridItem); + gridItem.innerHTML = "X<br />XX"; + + // Create an abspos with content of 50px inline size, 25px block size. + const absPos = document.createElement("div"); + gridItem.appendChild(absPos); + absPos.className = "abspos"; + absPos.textContent = "XX"; + if (orthogonal) absPos.classList.add("orthogonal"); + + // Let the containing block be the grid area, and set offsets. + Object.assign(absPos.style, { + gridColumnStart: colStart || "auto", + gridColumnEnd: colEnd % 4 || "auto", + gridRowStart: rowStart || "auto", + gridRowEnd: rowEnd % 4 || "auto", + left: left == "auto" ? left : left + "px", + top: top == "auto" ? top : top + "px", + right: right == "auto" ? right : right + "px", + bottom: bottom == "auto" ? bottom : bottom + "px", + }); + + // Calculate expected position and size. + const expectedWidth = + left == "auto" || right == "auto" ? 25 * (orthogonal ? 1 : 2) : + Math.max(0, colOffsets[colEnd] - colOffsets[colStart] - left - right); + const expectedHeight = + top == "auto" || bottom == "auto" ? 25 * (orthogonal ? 2 : 1) : + Math.max(0, rowOffsets[rowEnd] - rowOffsets[rowStart] - top - bottom); + const offsetX = + left != "auto" ? colOffsets[colStart] + left : + right != "auto" ? colOffsets[colEnd] - right - expectedWidth : + colOffsets[i] + 25*2; + const offsetY = + top != "auto" ? rowOffsets[rowStart] + top : + bottom != "auto" ? rowOffsets[rowEnd] - bottom - expectedHeight : + rowOffsets[i] + 25; + Object.assign(absPos.dataset, {expectedWidth, expectedHeight, offsetX, offsetY}); + } + document.body.appendChild(grid); + } + + document.fonts.ready.then(() => { + checkLayout(".grid"); + }); +} |
