mirror of
https://github.com/servo/servo.git
synced 2025-08-12 08:55:32 +01:00
Update web-platform-tests to revision 44702f2bc8ea98bc32b5b244f2fe63c6ce66d49d
This commit is contained in:
Josh Matthews
parent
85fa6409bb
commit
c227604a2c
997 changed files with 45660 additions and 14650 deletions
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<script src="../support/style-change.js"></script>
|
||||
<script>
|
||||
function runTest() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'start' value for align-self are flushed with its alignment container's 'start' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: start;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'end' value for align-self are flushed with its alignment container's 'end' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="140" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-left">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'left' value for align-self are flushed with its alignment container's 'left' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: left;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: left;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: left;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: left;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br></br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-right">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'right' value for align-self are flushed with its alignment container's 'right' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: right;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: right;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: right;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: right;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br></br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'center' value for align-self are 'centered' within its alignment container.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="70" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="60" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="180" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="70" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="60" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="180" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br></br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="70" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="195" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="170" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="160" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="45" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="30" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start">
|
||||
<meta name="assert" content="The 'flex-start' value of align-self behaves like 'start' for absolute positioned grid items.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: flex-start;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br></br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-end">
|
||||
<meta name="assert" content="The 'flex-end' value of align-self behaves like 'end' for absolute positioned grid items.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: flex-end;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br></br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="140" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-start;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br></br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'self-end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="140" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-start;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="140" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
align-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { height: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { width: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: auto / 1;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / auto;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: auto / auto;
|
||||
grid-column: 2 / 3;
|
||||
align-self: start;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="190" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="250" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="440" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="320" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
align-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { height: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { width: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: auto / 1;
|
||||
grid-column: 1 / 2;
|
||||
align-self: end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / auto;
|
||||
grid-column: 1 / 2;
|
||||
align-self: end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: auto / auto;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="0" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="190" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="440" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="350" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="200" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'center' value for align-self are 'centered' within its alignment container.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
align-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { height: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { width: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: auto / 1;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / auto;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: auto / auto;
|
||||
grid-column: 2 / 3;
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="0" data-offset-y="45" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="345" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="205" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="190" data-offset-y="45" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="345" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="205" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="45" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="160" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="345" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="205" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="395" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="260" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="95" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="205" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
align-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { height: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { width: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: auto / 1;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / auto;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: auto / auto;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-start;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="190" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="440" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="350" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="200" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
justify-items: start;
|
||||
align-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { height: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { width: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: auto / 1;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / auto;
|
||||
grid-column: 1 / 2;
|
||||
align-self: self-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: auto / auto;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="0" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="190" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="250" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="440" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="320" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js">"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
|
||||
<body onLoad="checkLayout('.grid');">
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Support for gap shorthand property of row-gap and column-gap</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
|
||||
<link rel="match" href="../reference/grid-equal-gutters-ref.html">
|
||||
<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width:200px;
|
||||
gap: 20px;
|
||||
grid-template-columns: 90px 90px;
|
||||
grid-template-rows: 90px 90px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Support for grid-gap shorthand property as an alias for gap</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="../reference/grid-equal-gutters-ref.html">
|
||||
<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width:200px;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: 90px 90px;
|
||||
grid-template-rows: 90px 90px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Support for gap shorthand property of row-gap and column-gap setting both to different values</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
|
||||
<link rel="match" href="../reference/grid-different-gutters-ref.html">
|
||||
<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width:200px;
|
||||
gap: 40px 20px;
|
||||
grid-template-columns: 90px 90px;
|
||||
grid-template-rows: 90px 90px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Support for grid-gap shorthand property as an alias for gap setting both to different values</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="../reference/grid-different-gutters-ref.html">
|
||||
<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width:200px;
|
||||
grid-gap: 40px 20px;
|
||||
grid-template-columns: 90px 90px;
|
||||
grid-template-rows: 90px 90px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Support for row-gap and column-gap properties</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="match" href="../reference/grid-different-gutters-ref.html">
|
||||
<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width:200px;
|
||||
row-gap: 40px;
|
||||
column-gap: 20px;
|
||||
grid-template-columns: 90px 90px;
|
||||
grid-template-rows: 90px 90px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Support for grid-row-gap alias for row-gap and grid-column-gap for column-gap</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="../reference/grid-different-gutters-ref.html">
|
||||
<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width:200px;
|
||||
grid-row-gap: 40px;
|
||||
grid-column-gap: 20px;
|
||||
grid-template-columns: 90px 90px;
|
||||
grid-template-rows: 90px 90px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Support for percentage values for gap with definite height and width for grid</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
|
||||
<link rel="match" href="../reference/grid-equal-gutters-ref.html">
|
||||
<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width:200px;
|
||||
height: 200px;
|
||||
gap: 10%;
|
||||
grid-template-columns: 90px 90px;
|
||||
grid-template-rows: 90px 90px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Support for aliased support to gap of percentage values for grid-gap</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
|
||||
<link rel="match" href="../reference/grid-equal-gutters-ref.html">
|
||||
<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width:200px;
|
||||
height: 200px;
|
||||
grid-gap: 10%;
|
||||
grid-template-columns: 90px 90px;
|
||||
grid-template-rows: 90px 90px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same visual effect as reference.</p>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Support for percentage values for gap with no defined height for the grid</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
|
||||
<link rel="match" href="../reference/grid-collapsed-row-gutters-ref.html">
|
||||
<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width: 200px;
|
||||
gap: 10%;
|
||||
grid-template-columns: 90px 90px;
|
||||
grid-template-rows: 90px 90px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same visual effect as reference. Column gap should be percentage of width. Row gap should resolve to auto, and therefore collapse to 0 height.</p>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Support for percentage values for grid-gap with no defined height for the grid as alias for gap</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#gutters">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-shorthand">
|
||||
<link rel="match" href="../reference/grid-collapsed-row-gutters-ref.html">
|
||||
<link rel="author" title="Rachel Andrew" href="mailto:me@rachelandrew.co.uk">
|
||||
<style>
|
||||
#grid {
|
||||
display: grid;
|
||||
width: 200px;
|
||||
grid-gap: 10%;
|
||||
grid-template-columns: 90px 90px;
|
||||
grid-template-rows: 90px 90px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#grid > div {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>The test passes if it has the same visual effect as reference. Column gap should be percentage of width. Row gap should resolve to auto, and therefore collapse to 0 height.</p>
|
||||
<div id="grid">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'start' value for justify-self are flushed with its alignment container's 'start' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: start;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'end' value for justify-self are flushed with its alignment container's 'end' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: end;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-left">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'left' value for justify-self are flushed with its alignment container's 'left' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: left;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: left;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: left;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: left;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-right">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'right' value for justify-self are flushed with its alignment container's 'right' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: right;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: right;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: right;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: right;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'center' value for justify-self are 'centered' within its alignment container.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: center;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: center;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="20" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="140" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="20" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="145" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="320" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="190" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="320" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="145" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="145" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start">
|
||||
<meta name="assert" content="The 'flex-start' value of justify-self behaves like 'start' for absolute positioned grid items.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: flex-start;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start">
|
||||
<meta name="assert" content="The 'flex-end' value of justify-self behaves like 'end' for absolute positioned grid items.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-start;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-end;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-start;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="40" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="300" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
}
|
||||
.grid.RTL { width: 400px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
justify-self: self-end;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="340" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="230" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { width: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { height: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: auto / 1;
|
||||
justify-self: start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / auto;
|
||||
justify-self: start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: auto / auto;
|
||||
justify-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: start;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="200" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="390" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="290" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { width: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { height: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: auto / 1;
|
||||
justify-self: end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / auto;
|
||||
justify-self: end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: auto / auto;
|
||||
justify-self: end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: end;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="380" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="140" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="350" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="250" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
|
||||
<meta name="assert" content="Absolute positioned grid items with 'center' value for justify-self are 'centered' within its alignment container.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { width: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { height: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: auto / 1;
|
||||
justify-self: center;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / auto;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: auto / auto;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: center;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="20" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="290" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="370" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="270" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
o
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="195" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="120" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="20" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="195" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="120" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { width: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { height: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: auto / 1;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / auto;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: auto / auto;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-start;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="380" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="140" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="350" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="250" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
|
||||
<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
align-items: start;
|
||||
justify-content: center;
|
||||
}
|
||||
.grid.LTR, .grid.RTL { width: 450px; }
|
||||
.grid.verticalLR, .grid.verticalRL { height: 450px; }
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: auto / 1;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / auto;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: auto / auto;
|
||||
justify-self: self-end;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
justify-self: self-end;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid LTR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="200" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="390" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="290" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="240" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="220" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="90" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Alignment properties don't apply on absolute positioned grid items with non-static position in the property's axis.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
left: 5px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
right: 10px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
top: 10px
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
left: 5px;
|
||||
top: 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 class="grid">
|
||||
<div data-offset-x="5" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="170" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="105" data-offset-y="160" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="155" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="70" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="5" data-offset-y="160" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="5" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="110" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="195" data-offset-y="10" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="155" data-offset-y="110" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="105" data-offset-y="40" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="210" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="45" data-offset-y="10" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="5" data-offset-y="110" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with margins.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div { margin: 5px 10px 15px 20px; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
left: 5px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
right: 10px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
top: 10px
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
left: 5px;
|
||||
top: 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 class="grid">
|
||||
<div data-offset-x="25" data-offset-y="5" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="160" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="20" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="125" data-offset-y="165" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="175" data-offset-y="5" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="180" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="25" data-offset-y="165" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="25" data-offset-y="25" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="200" data-offset-y="15" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="175" data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="125" data-offset-y="25" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="200" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="50" data-offset-y="15" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="25" data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with borders.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div {
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 5px 10px 15px 20px;
|
||||
}
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
left: 5px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
right: 10px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
top: 10px
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
left: 5px;
|
||||
top: 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 class="grid">
|
||||
<div data-offset-x="5" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="140" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="105" data-offset-y="160" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="155" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="40" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="160" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="5" data-offset-y="160" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="5" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="180" data-offset-y="10" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="155" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="105" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="30" data-offset-y="10" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="5" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with paddings.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div { padding: 5px 10px 15px 20px; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
left: 5px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
right: 10px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
top: 10px
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
left: 5px;
|
||||
top: 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 class="grid">
|
||||
<div data-offset-x="5" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="140" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="105" data-offset-y="160" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="155" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="40" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="160" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="5" data-offset-y="160" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="5" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="180" data-offset-y="10" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="155" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="105" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="30" data-offset-y="10" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="5" data-offset-y="110" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items with margins, borders and paddings.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div {
|
||||
margin: 2px 4px 6px 8px;
|
||||
padding: 3px 2px 4px 5px;
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px 6px 2px 3px;
|
||||
}
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
left: 5px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
right: 10px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
top: 10px
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
left: 5px;
|
||||
top: 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 class="grid">
|
||||
<div data-offset-x="13" data-offset-y="2" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="8" data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="113" data-offset-y="162" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="163" data-offset-y="2" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="50" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="170" data-offset-y="162" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="13" data-offset-y="162" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="13" data-offset-y="24" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="189" data-offset-y="12" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="163" data-offset-y="112" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="113" data-offset-y="24" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="190" data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="39" data-offset-y="12" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="13" data-offset-y="112" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned grid items when both grid and its items have margins, borders and paddings.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid {
|
||||
margin: 4px 2px 8px 3px;
|
||||
padding: 1px 4px 2px 3px;
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 5px 6px 4px 8px;
|
||||
}
|
||||
|
||||
.grid > div {
|
||||
margin: 2px 4px 6px 8px;
|
||||
padding: 3px 2px 4px 5px;
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px 6px 2px 3px;
|
||||
}
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
left: 5px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
right: 10px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
top: 10px
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
left: 5px;
|
||||
top: 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 class="grid">
|
||||
<div data-offset-x="16" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="153" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="11" data-offset-y="163" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="116" data-offset-y="163" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="166" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="53" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="173" data-offset-y="163" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="16" data-offset-y="163" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="16" data-offset-y="25" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="93" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="192" data-offset-y="13" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="166" data-offset-y="113" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="116" data-offset-y="25" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="193" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="42" data-offset-y="13" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="16" data-offset-y="113" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Alignment properties don't apply on absolute positioned orthogonal grid items with non-static position in the property's axis.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
.horizontal { writing-mode: horizontal-tb; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
left: 5px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
right: 10px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
top: 10px
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
left: 5px;
|
||||
top: 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 class="grid">
|
||||
<div data-offset-x="5" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="210" data-offset-y="80" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div>
|
||||
<div data-offset-x="105" data-offset-y="160" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="155" data-offset-y="0" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="110" data-offset-y="80" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="190" data-offset-y="160" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn LTR">X XX X</div>
|
||||
<div data-offset-x="5" data-offset-y="160" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="5" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="70" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="195" data-offset-y="10" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn verticalRL">X XX X</div>
|
||||
<div data-offset-x="155" data-offset-y="110" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="105" data-offset-y="90" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="170" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="20" data-offset-y="10" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn horizontal RTL">X XX X</div>
|
||||
<div data-offset-x="5" data-offset-y="110" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with margins.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div { margin: 5px 10px 15px 20px; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
.horizontal { writing-mode: horizontal-tb; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
left: 5px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
right: 10px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
top: 10px
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
left: 5px;
|
||||
top: 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 class="grid">
|
||||
<div data-offset-x="25" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="210" data-offset-y="65" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="20" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div>
|
||||
<div data-offset-x="125" data-offset-y="165" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="175" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="110" data-offset-y="65" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="180" data-offset-y="165" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn LTR">X XX X</div>
|
||||
<div data-offset-x="35" data-offset-y="165" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="25" data-offset-y="75" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="200" data-offset-y="15" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn verticalRL">X XX X</div>
|
||||
<div data-offset-x="175" data-offset-y="115" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="135" data-offset-y="75" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="170" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="25" data-offset-y="15" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn horizontal RTL">X XX X</div>
|
||||
<div data-offset-x="35" data-offset-y="115" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with borders.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div {
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 5px 10px 15px 20px;
|
||||
}
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
.horizontal { writing-mode: horizontal-tb; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
left: 5px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
right: 10px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
top: 10px
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
left: 5px;
|
||||
top: 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')">
|
||||
<!-- The test cases with vertical-rl wirting-mode will fail becauuse of bug 779105 -->
|
||||
<div class="grid">
|
||||
<div data-offset-x="5" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
|
||||
<div data-offset-x="105" data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="155" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="160" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div>
|
||||
<div data-offset-x="35" data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="5" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="40" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="180" data-offset-y="10" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div>
|
||||
<div data-offset-x="155" data-offset-y="110" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="105" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="140" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="5" data-offset-y="10" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div>
|
||||
<div data-offset-x="5" data-offset-y="115" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with paddings.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div { padding: 5px 10px 15px 20px; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
.horizontal { writing-mode: horizontal-tb; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
left: 5px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
right: 10px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
top: 10px
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
left: 5px;
|
||||
top: 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')">
|
||||
<!-- The test cases with vertical-rl wirting-mode will fail becauuse of bug 779105 -->
|
||||
<div class="grid">
|
||||
<div data-offset-x="5" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
|
||||
<div data-offset-x="105" data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="155" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="160" data-offset-y="160" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div>
|
||||
<div data-offset-x="35" data-offset-y="160" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="5" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="40" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="180" data-offset-y="10" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div>
|
||||
<div data-offset-x="155" data-offset-y="110" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="105" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="140" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="5" data-offset-y="10" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div>
|
||||
<div data-offset-x="5" data-offset-y="115" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of non-static absolute positioned items</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Alignment properties don't apply on non-static absolute positioned orthogonal grid items with margins, borders and paddings.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div {
|
||||
margin: 2px 4px 6px 8px;
|
||||
padding: 3px 2px 4px 5px;
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px 6px 2px 3px;
|
||||
}
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
.horizontal { writing-mode: horizontal-tb; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
left: 5px;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
right: 10px;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
top: 10px
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
left: 5px;
|
||||
top: 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')">
|
||||
<!-- The test cases with vertical-rl wirting-mode will fail becauuse of bug 779105 -->
|
||||
<div class="grid">
|
||||
<div data-offset-x="13" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="60" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="160" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
|
||||
<div data-offset-x="105" data-offset-y="160" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="155" data-offset-y="0" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="80" data-offset-y="60" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="160" data-offset-y="160" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div>
|
||||
<div data-offset-x="35" data-offset-y="160" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="5" data-offset-y="70" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="40" data-offset-y="150" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="180" data-offset-y="10" data-expected-width="26" data-expected-height="20" class="secondRowFirstColumn verticalRL">X XX X</div>
|
||||
<div data-offset-x="155" data-offset-y="110" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="105" data-offset-y="70" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="140" data-offset-y="150" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="5" data-offset-y="10" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div>
|
||||
<div data-offset-x="5" data-offset-y="115" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when grid and its items have margins, borders and paddings.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid {
|
||||
margin: 4px 2px 8px 3px;
|
||||
padding: 1px 4px 2px 3px;
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 5px 6px 4px 8px;
|
||||
}
|
||||
|
||||
.grid > div {
|
||||
margin: 2px 4px 6px 8px;
|
||||
padding: 3px 2px 4px 5px;
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px 6px 2px 3px;
|
||||
}
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
.horizontal { writing-mode: horizontal-tb; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
justify-self: left;
|
||||
}
|
||||
</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')">
|
||||
<!-- The test cases with vertical-rl wirting-mode will fail becauuse of bug 779105 -->
|
||||
<div class="grid">
|
||||
<div data-offset-x="70" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="154" data-offset-y="64" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="20" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
|
||||
<div data-offset-x="108" data-offset-y="152" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="220" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="54" data-offset-y="64" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="158" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div>
|
||||
<div data-offset-x="8" data-offset-y="152" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="8" data-offset-y="74" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="189" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn verticalRL">X XX X</div>
|
||||
<div data-offset-x="158" data-offset-y="102" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="170" data-offset-y="74" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="108" data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="14" data-offset-y="2" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div>
|
||||
<div data-offset-x="40" data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have margins.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div { margin: 5px 10px 15px 20px; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="30" data-offset-y="5" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="145" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="20" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="180" data-offset-y="5" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="45" data-offset-y="105" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="180" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="20" data-offset-y="195" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="20" data-offset-y="25" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="110" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="200" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="200" data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="230" data-offset-y="25" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="135" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="50" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="20" data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have borders.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div {
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 5px 10px 15px 20px;
|
||||
}
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="10" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="125" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="190" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="160" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="25" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="160" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="190" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="210" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have paddings.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div { padding: 5px 10px 15px 20px; }
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="10" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="125" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="0" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="190" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="160" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="25" data-offset-y="100" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="160" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="190" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="90" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="180" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="210" data-offset-y="20" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="130" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Absolute positioned grid items alignment works as expected when items have margins, borders and paddings.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div {
|
||||
margin: 2px 4px 6px 8px;
|
||||
padding: 3px 2px 4px 5px;
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px 6px 2px 3px;
|
||||
}
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="20" data-offset-y="2" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="134" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="8" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="108" data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="rid RTL">
|
||||
<div data-offset-x="170" data-offset-y="2" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="34" data-offset-y="104" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="170" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="8" data-offset-y="194" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="rid verticalLR">
|
||||
<div data-offset-x="8" data-offset-y="24" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="189" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="190" data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="rid verticalRL">
|
||||
<div data-offset-x="220" data-offset-y="24" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="108" data-offset-y="133" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="39" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="8" data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Absolute positioned grid items alignment works as expected when the grid and its items have margins, borders and paddings.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid {
|
||||
margin: 4px 2px 8px 3px;
|
||||
padding: 1px 4px 2px 3px;
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 5px 6px 4px 8px;
|
||||
}
|
||||
|
||||
.grid > div {
|
||||
margin: 2px 4px 6px 8px;
|
||||
padding: 3px 2px 4px 5px;
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px 6px 2px 3px;
|
||||
}
|
||||
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: left;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="23" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="137" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="11" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="111" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="173" data-offset-y="3" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="37" data-offset-y="105" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="173" data-offset-y="189" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="11" data-offset-y="195" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="11" data-offset-y="25" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="103" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="192" data-offset-y="3" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="193" data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="223" data-offset-y="25" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="111" data-offset-y="134" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="42" data-offset-y="3" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn">X XX X</div>
|
||||
<div data-offset-x="11" data-offset-y="103" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have margins.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div { margin: 5px 10px 15px 20px; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
.horizontal { writing-mode: horizontal-tb; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
justify-self: left;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="80" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="165" data-offset-y="65" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="30" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn RTL">X XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="155" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="230" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="65" data-offset-y="65" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="170" data-offset-y="190" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn LTR">X XX X</div>
|
||||
<div data-offset-x="20" data-offset-y="155" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="20" data-offset-y="75" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="70" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="200" data-offset-y="5" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn verticalRL">X XX X</div>
|
||||
<div data-offset-x="170" data-offset-y="105" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="180" data-offset-y="75" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="120" data-offset-y="155" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="25" data-offset-y="5" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn horizontal RTL">X XX X</div>
|
||||
<div data-offset-x="50" data-offset-y="105" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have borders.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div {
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 5px 10px 15px 20px;
|
||||
}
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
.horizontal { writing-mode: horizontal-tb; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
justify-self: left;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="60" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="145" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="10" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="210" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="45" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="160" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="5" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div>
|
||||
<div data-offset-x="30" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have paddings.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div { padding: 5px 10px 15px 20px; }
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
.horizontal { writing-mode: horizontal-tb; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
justify-self: left;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="60" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="145" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="10" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn RTL">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="210" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="45" data-offset-y="60" data-expected-width="60" data-expected-height="90" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="150" data-offset-y="185" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn LTR">X XX X</div>
|
||||
<div data-offset-x="0" data-offset-y="150" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="0" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="180" data-offset-y="0" data-expected-width="40" data-expected-height="80" class="secondRowFirstColumn verticalRL">X XX X</div>
|
||||
<div data-offset-x="150" data-offset-y="100" data-expected-width="90" data-expected-height="60" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="160" data-offset-y="70" data-expected-width="90" data-expected-height="30" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="5" data-offset-y="0" data-expected-width="90" data-expected-height="30" class="secondRowFirstColumn horizontal RTL">X XX X</div>
|
||||
<div data-offset-x="30" data-offset-y="100" data-expected-width="70" data-expected-height="80" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Self-Alignment of absolute positioned items with 'definite' grid positions and margin, border and padding</title>
|
||||
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
||||
<meta name="assert" content="Absolute positioned orthogonal grid items alignment works as expected when items have margins, borders and paddings.">
|
||||
<style>
|
||||
.grid {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
grid-template-columns: 100px 150px;
|
||||
grid-template-rows: 150px 100px;
|
||||
font: 10px/1 Ahem;
|
||||
background: grey;
|
||||
}
|
||||
.grid > div { position: absolute; }
|
||||
.grid > :nth-child(1) { background: green; }
|
||||
.grid > :nth-child(2) { background: blue; }
|
||||
.grid > :nth-child(3) { background: yellow; }
|
||||
.grid > :nth-child(4) { background: red; }
|
||||
|
||||
.grid > div {
|
||||
margin: 2px 4px 6px 8px;
|
||||
padding: 3px 2px 4px 5px;
|
||||
border-color: silver;
|
||||
border-style: solid;
|
||||
border-width: 1px 6px 2px 3px;
|
||||
}
|
||||
|
||||
.LTR { direction: ltr; }
|
||||
.RTL { direction: rtl; }
|
||||
.verticalLR { writing-mode: vertical-lr; }
|
||||
.verticalRL { writing-mode: vertical-rl; }
|
||||
.horizontal { writing-mode: horizontal-tb; }
|
||||
|
||||
.firstRowFirstColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 1 / 2;
|
||||
align-self: start;
|
||||
justify-self: right;
|
||||
}
|
||||
.firstRowSecondColumn {
|
||||
grid-row: 1 / 2;
|
||||
grid-column: 2 / 3;
|
||||
align-self: end;
|
||||
justify-self: center;
|
||||
}
|
||||
.secondRowFirstColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 1 / 2;
|
||||
align-self: center;
|
||||
justify-self: self-start;
|
||||
}
|
||||
.secondRowSecondColumn {
|
||||
grid-row: 2 / 3;
|
||||
grid-column: 2 / 3;
|
||||
align-self: self-end;
|
||||
justify-self: left;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/check-layout-th.js"></script>
|
||||
<body onload="checkLayout('.grid')">
|
||||
<div class="grid">
|
||||
<div data-offset-x="70" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="154" data-offset-y="64" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="20" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn RTL">X XX X</div>
|
||||
<div data-offset-x="108" data-offset-y="152" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid RTL">
|
||||
<div data-offset-x="220" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="firstRowFirstColumn verticalLR">X XX X</div>
|
||||
<div data-offset-x="54" data-offset-y="64" data-expected-width="46" data-expected-height="80" class="firstRowSecondColumn verticalRL">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="158" data-offset-y="188" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn LTR">X XX X</div>
|
||||
<div data-offset-x="8" data-offset-y="152" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalRL RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="grid verticalLR">
|
||||
<div data-offset-x="8" data-offset-y="74" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="60" data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="189" data-offset-y="2" data-expected-width="26" data-expected-height="70" class="secondRowFirstColumn verticalRL">X XX X</div>
|
||||
<div data-offset-x="158" data-offset-y="102" data-expected-width="76" data-expected-height="50" class="secondRowSecondColumn horizontal RTL">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid verticalRL">
|
||||
<div data-offset-x="170" data-offset-y="74" data-expected-width="76" data-expected-height="20" class="firstRowFirstColumn horizontal">X XX X</div>
|
||||
<div data-offset-x="108" data-offset-y="153" data-expected-width="86" data-expected-height="40" class="firstRowSecondColumn horizontal">XX X<br>X XXX X<br>XX XXX</div>
|
||||
<div data-offset-x="14" data-offset-y="2" data-expected-width="76" data-expected-height="20" class="secondRowFirstColumn horizontal RTL">X XX X</div>
|
||||
<div data-offset-x="40" data-offset-y="102" data-expected-width="56" data-expected-height="70" class="secondRowSecondColumn verticalLR">XX X<br>X XXX<br>X<br>XX XXX</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue