mirror of
https://github.com/servo/servo.git
synced 2025-08-16 10:55:34 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!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.">
|
||||
<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>
|
||||
|
||||
<body onload="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>
|
||||
|
|
@ -0,0 +1,352 @@
|
|||
<!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="../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>
|
||||
<body onload="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>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<!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="../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>
|
||||
<body onload="checkLayout('.container')">
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<div class="container relative">
|
||||
<div class="grid">
|
||||
<div class="sizedToGridArea absolute autoRowAutoColumn" data-offset-x="35" data-offset-y="5" 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="35" data-offset-y="5" 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="35" data-offset-y="5" 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="-135" data-offset-y="5" 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="-135" data-offset-y="5" 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="-135" data-offset-y="5" 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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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="../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>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!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="../support/grid.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>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!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="../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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!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="../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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!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="../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>
|
||||
|
|
@ -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="../support/grid.css">
|
||||
<link rel="stylesheet" href="../support/grid-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" 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" 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>
|
||||
|
|
@ -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="../support/grid.css">
|
||||
<link rel="stylesheet" href="../support/grid-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" 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" 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>
|
||||
|
|
@ -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="../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>
|
||||
|
|
@ -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="../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>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!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="../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>
|
||||
|
||||
<body onload="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>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!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="../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>
|
||||
|
||||
<body onload="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>
|
||||
|
|
@ -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="../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="0" data-offset-y="0" data-expected-width="15" data-expected-height="15">
|
||||
</div>
|
||||
<div class="absolute" style="grid-column: 1 / 2; grid-row: foo / 1;"
|
||||
data-offset-x="15" data-offset-y="0" data-expected-width="100" data-expected-height="15">
|
||||
</div>
|
||||
<div class="absolute" style="grid-column: foo / 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 / 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="515" data-offset-y="0" data-expected-width="15" data-expected-height="15">
|
||||
</div>
|
||||
<div class="absolute" style="grid-column: 1 / 2; grid-row: foo / 1;"
|
||||
data-offset-x="415" data-offset-y="0" data-expected-width="100" data-expected-height="15">
|
||||
</div>
|
||||
<div class="absolute" style="grid-column: foo / 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 / 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>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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 using unknown named grid lines are treated as 'auto'.">
|
||||
<link rel="stylesheet" href="../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>
|
||||
|
||||
<body onload="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="0" data-offset-y="0" data-expected-width="315" data-expected-height="215">
|
||||
</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="215" data-offset-y="0" data-expected-width="315" data-expected-height="215">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -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="../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>
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
<!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 href="../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>
|
||||
|
||||
<body onload="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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!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 href="../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>
|
||||
|
||||
<body onload="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>
|
||||
|
|
@ -0,0 +1,190 @@
|
|||
<!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 href="../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>
|
||||
|
||||
<body onload="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>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<!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="../support/grid.css" rel="stylesheet">
|
||||
<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>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!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="../support/grid.css" rel="stylesheet">
|
||||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue