[css-grid] Move grid-item-alignment tests to WPT folder
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 30 Jan 2020 10:27:25 +0000 (10:27 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 30 Jan 2020 10:27:25 +0000 (10:27 +0000)
https://bugs.webkit.org/show_bug.cgi?id=206831

Patch by Rossana Monteriso <rmonteriso@igalia.com> on 2020-01-30
Reviewed by Javier Fernandez.

LayoutTests/imported/w3c:

Add grid-item-alignment tests, checked and adapted, to WPT.
Add .thirdRowFirstColumn class to grid.css support file and update all tests using this class by removing the duplicated class
from their <style> section.
Imported to WPT with this PR: https://github.com/web-platform-tests/wpt/pull/21440

* web-platform-tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html:
* web-platform-tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html:
* web-platform-tests/css/css-grid/alignment/grid-align-content-distribution.html:
* web-platform-tests/css/css-grid/alignment/grid-align-justify-overflow.html:
* web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-expected.txt: Added.
* web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr-expected.txt: Added.
* web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl-expected.txt: Added.
* web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html: Added.
* web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html: Added.
* web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html: Added.
* web-platform-tests/css/support/grid.css:
(.thirdRowFirstColumn):

LayoutTests:

Remove from css-grid-layout folder some grid-item-alignment tests, that are being replaced by adapted tests in the corresponding WPT test folder.

* fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-expected.txt: Removed.
* fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr-expected.txt: Removed.
* fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html: Removed.
* fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl-expected.txt: Removed.
* fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html: Removed.
* fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows.html: Removed.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@255419 268f45cc-cd09-0410-ab3c-d52691b4dbfc

16 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html [deleted file]
LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html [deleted file]
LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows.html [deleted file]
LayoutTests/imported/w3c/ChangeLog
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-align-content-distribution.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-align-justify-overflow.html
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-expected.txt [moved from LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-expected.txt with 80% similarity]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr-expected.txt [moved from LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr-expected.txt with 80% similarity]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl-expected.txt [moved from LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl-expected.txt with 80% similarity]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html [new file with mode: 0644]
LayoutTests/imported/w3c/web-platform-tests/css/support/grid.css

index 82ecdc5..38359ba 100644 (file)
@@ -1,3 +1,19 @@
+2020-01-30  Rossana Monteriso  <rmonteriso@igalia.com>
+
+        [css-grid] Move grid-item-alignment tests to WPT folder
+        https://bugs.webkit.org/show_bug.cgi?id=206831
+
+        Reviewed by Javier Fernandez.
+
+        Remove from css-grid-layout folder some grid-item-alignment tests, that are being replaced by adapted tests in the corresponding WPT test folder.
+
+        * fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-expected.txt: Removed.
+        * fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr-expected.txt: Removed.
+        * fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html: Removed.
+        * fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl-expected.txt: Removed.
+        * fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html: Removed.
+        * fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows.html: Removed.
+
 2020-01-29  Ryosuke Niwa  <rniwa@webkit.org>
 
         REGRESSION: [Mac wk1] imported/w3c/web-platform-tests/mathml/presentation-markup/scripts/underover-parameters-3.html is a flakey failure
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html b/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html
deleted file mode 100644 (file)
index 8cf9379..0000000
+++ /dev/null
@@ -1,102 +0,0 @@
-<!DOCTYPE html>
-<link href="resources/grid.css" rel="stylesheet">
-<link href="resources/grid-alignment.css" rel="stylesheet">
-<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
-<script src="../../resources/check-layout.js"></script>
-<style>
-body {
-    margin: 0;
-}
-.container {
-    position: relative;
-}
-.grid {
-    grid-template-columns: 100px 100px;
-    grid-template-rows: 150px 150px;
-    font-size: 10px;
-}
-.item {
-   width: 50px;
-   height: 20px;
-}
-</style>
-<body onload="checkLayout('.grid')">
-
-<p>This test checks that grid items alignment works as expected with VERTICAL-LR vs HORIZONTAL-TB orthogonal flows.</p>
-
-<p>Direction: LTR vs LTR</p>
-<div class="container">
-    <div class="grid fit-content verticalLR directionLTR">
-        <div class="item firstRowFirstColumn   horizontalTB selfEnd"    data-offset-x="100" data-offset-y="80">end</div>
-        <div class="item firstRowSecondColumn  horizontalTB selfCenter" data-offset-x="50"  data-offset-y="140">center</div>
-        <div class="item secondRowFirstColumn  horizontalTB selfLeft"   data-offset-x="150" data-offset-y="0">left</div>
-        <div class="item secondRowSecondColumn horizontalTB selfRight"  data-offset-x="150" data-offset-y="180">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content verticalLR directionLTR">
-        <div class="item firstRowFirstColumn   horizontalTB selfSelfEnd"   data-offset-x="100" data-offset-y="80">s-end</div>
-        <div class="item firstRowSecondColumn  horizontalTB selfStart"     data-offset-x="0"   data-offset-y="100">start</div>
-        <div class="item secondRowFirstColumn  horizontalTB"               data-offset-x="150" data-offset-y="0">default</div>
-        <div class="item secondRowSecondColumn horizontalTB selfSelfStart" data-offset-x="150" data-offset-y="100">s-start</div>
-    </div>
-</div>
-
-<p>Direction: RTL vs LTR</p>
-<div class="container">
-    <div class="grid fit-content verticalLR directionRTL">
-        <div class="item firstRowFirstColumn   directionLTR horizontalTB selfEnd"    data-offset-x="100" data-offset-y="100">end</div>
-        <div class="item firstRowSecondColumn  directionLTR horizontalTB selfCenter" data-offset-x="50"  data-offset-y="40">center</div>
-        <div class="item secondRowFirstColumn  directionLTR horizontalTB selfLeft"   data-offset-x="150" data-offset-y="100">left</div>
-        <div class="item secondRowSecondColumn directionLTR horizontalTB selfRight"  data-offset-x="150" data-offset-y="80">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content verticalLR directionRTL">
-        <div class="item firstRowFirstColumn   directionLTR horizontalTB selfSelfEnd"   data-offset-x="100" data-offset-y="180">s-end</div>
-        <div class="item firstRowSecondColumn  directionLTR horizontalTB selfStart"     data-offset-x="0"   data-offset-y="80">start</div>
-        <div class="item secondRowFirstColumn  directionLTR horizontalTB"               data-offset-x="150" data-offset-y="180">default</div>
-        <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfStart" data-offset-x="150" data-offset-y="0">s-start</div>
-    </div>
-</div>
-
-<p>Direction: LTR vs RTL</p>
-<div class="container">
-    <div class="grid fit-content verticalLR directionLTR">
-        <div class="item firstRowFirstColumn   directionRTL horizontalTB selfEnd"    data-offset-x="100" data-offset-y="80">end</div>
-        <div class="item firstRowSecondColumn  directionRTL horizontalTB selfCenter" data-offset-x="50"  data-offset-y="140">center</div>
-        <div class="item secondRowFirstColumn  directionRTL horizontalTB selfLeft"   data-offset-x="150" data-offset-y="0">left</div>
-        <div class="item secondRowSecondColumn directionRTL horizontalTB selfRight"  data-offset-x="150" data-offset-y="180">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content verticalLR directionLTR">
-        <div class="item firstRowFirstColumn   directionRTL horizontalTB selfSelfEnd"   data-offset-x="0"   data-offset-y="80">s-end</div>
-        <div class="item firstRowSecondColumn  directionRTL horizontalTB selfStart"     data-offset-x="0"   data-offset-y="100">start</div>
-        <div class="item secondRowFirstColumn  directionRTL horizontalTB"               data-offset-x="150" data-offset-y="0">default</div>
-        <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfStart" data-offset-x="250" data-offset-y="100">s-start</div>
-    </div>
-</div>
-
-<p>Direction: RTL vs RTL</p>
-<div class="container">
-    <div class="grid fit-content verticalLR directionRTL">
-        <div class="item firstRowFirstColumn   horizontalTB selfEnd"    data-offset-x="100" data-offset-y="100">end</div>
-        <div class="item firstRowSecondColumn  horizontalTB selfCenter" data-offset-x="50"  data-offset-y="40">center</div>
-        <div class="item secondRowFirstColumn  horizontalTB selfLeft"   data-offset-x="150" data-offset-y="100">left</div>
-        <div class="item secondRowSecondColumn horizontalTB selfRight"  data-offset-x="150" data-offset-y="80">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content verticalLR directionRTL">
-        <div class="item firstRowFirstColumn   horizontalTB selfSelfEnd"   data-offset-x="0"   data-offset-y="180">s-end</div>
-        <div class="item firstRowSecondColumn  horizontalTB selfStart"     data-offset-x="0"   data-offset-y="80">start</div>
-        <div class="item secondRowFirstColumn  horizontalTB"               data-offset-x="150" data-offset-y="180">default</div>
-        <div class="item secondRowSecondColumn horizontalTB selfSelfStart" data-offset-x="250" data-offset-y="0">s-start</div>
-    </div>
-</div>
-</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html b/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html
deleted file mode 100644 (file)
index 727a9af..0000000
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<link href="resources/grid.css" rel="stylesheet">
-<link href="resources/grid-alignment.css" rel="stylesheet">
-<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
-<script src="../../resources/check-layout.js"></script>
-<style>
-body {
-    margin: 0;
-}
-.container {
-    position: relative;
-}
-.grid {
-    grid-template-columns: 100px 100px;
-    grid-template-rows: 150px 150px;
-    font-size: 10px;
-}
-.item {
-   width: 50px;
-   height: 20px;
-}
-</style>
-<body onload="checkLayout('.grid')">
-
-<p>This test checks that grid items alignment works as expected with VERTICAL-RL vs HORIZONTAL-TB orthogonal flows.</p>
-
-<p>Direction: LTR vs LTR</p>
-<div class="container">
-    <div class="grid fit-content verticalRL directionLTR">
-        <div class="item firstRowFirstColumn   horizontalTB selfEnd"    data-offset-x="150" data-offset-y="80">end</div>
-        <div class="item firstRowSecondColumn  horizontalTB selfCenter" data-offset-x="200" data-offset-y="140">center</div>
-        <div class="item secondRowFirstColumn  horizontalTB selfLeft"   data-offset-x="100" data-offset-y="0">left</div>
-        <div class="item secondRowSecondColumn horizontalTB selfRight"  data-offset-x="100" data-offset-y="180">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content verticalRL directionLTR">
-        <div class="item firstRowFirstColumn   horizontalTB selfSelfEnd"   data-offset-x="250" data-offset-y="80">s-end</div>
-        <div class="item firstRowSecondColumn  horizontalTB selfStart"     data-offset-x="250" data-offset-y="100">start</div>
-        <div class="item secondRowFirstColumn  horizontalTB"               data-offset-x="100" data-offset-y="0">default</div>
-        <div class="item secondRowSecondColumn horizontalTB selfSelfStart" data-offset-x="0"   data-offset-y="100">s-start</div>
-    </div>
-</div>
-
-<p>Direction: RTL vs LTR</p>
-<div class="container">
-    <div class="grid fit-content verticalRL directionRTL">
-        <div class="item firstRowFirstColumn   directionLTR horizontalTB selfEnd"    data-offset-x="150" data-offset-y="100">end</div>
-        <div class="item firstRowSecondColumn  directionLTR horizontalTB selfCenter" data-offset-x="200" data-offset-y="40">center</div>
-        <div class="item secondRowFirstColumn  directionLTR horizontalTB selfLeft"   data-offset-x="100" data-offset-y="100">left</div>
-        <div class="item secondRowSecondColumn directionLTR horizontalTB selfRight"  data-offset-x="100" data-offset-y="80">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content verticalRL directionRTL">
-        <div class="item firstRowFirstColumn   directionLTR horizontalTB selfSelfEnd"   data-offset-x="250" data-offset-y="180">s-end</div>
-        <div class="item firstRowSecondColumn  directionLTR horizontalTB selfStart"     data-offset-x="250" data-offset-y="80">start</div>
-        <div class="item secondRowFirstColumn  directionLTR horizontalTB"               data-offset-x="100" data-offset-y="180">default</div>
-        <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfStart" data-offset-x="0"   data-offset-y="0">s-start</div>
-    </div>
-</div>
-
-<p>Direction: LTR vs RTL</p>
-<div class="container">
-    <div class="grid fit-content verticalRL directionLTR">
-        <div class="item firstRowFirstColumn   directionRTL horizontalTB selfEnd"    data-offset-x="150" data-offset-y="80">end</div>
-        <div class="item firstRowSecondColumn  directionRTL horizontalTB selfCenter" data-offset-x="200" data-offset-y="140">center</div>
-        <div class="item secondRowFirstColumn  directionRTL horizontalTB selfLeft"   data-offset-x="100" data-offset-y="0">left</div>
-        <div class="item secondRowSecondColumn directionRTL horizontalTB selfRight"  data-offset-x="100" data-offset-y="180">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content verticalRL directionLTR">
-        <div class="item firstRowFirstColumn   directionRTL horizontalTB selfSelfEnd"   data-offset-x="150" data-offset-y="80">s-end</div>
-        <div class="item firstRowSecondColumn  directionRTL horizontalTB selfStart"     data-offset-x="250" data-offset-y="100">start</div>
-        <div class="item secondRowFirstColumn  directionRTL horizontalTB"               data-offset-x="100" data-offset-y="0">default</div>
-        <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="100">s-start</div>
-    </div>
-</div>
-
-<p>Direction: RTL vs RTL</p>
-<div class="container">
-    <div class="grid fit-content verticalRL directionRTL">
-        <div class="item firstRowFirstColumn   horizontalTB selfEnd"    data-offset-x="150" data-offset-y="100">end</div>
-        <div class="item firstRowSecondColumn  horizontalTB selfCenter" data-offset-x="200" data-offset-y="40">center</div>
-        <div class="item secondRowFirstColumn  horizontalTB selfLeft"   data-offset-x="100" data-offset-y="100">left</div>
-        <div class="item secondRowSecondColumn horizontalTB selfRight"  data-offset-x="100" data-offset-y="80">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content verticalRL directionRTL">
-        <div class="item firstRowFirstColumn   horizontalTB selfSelfEnd"   data-offset-x="150" data-offset-y="180">s-end</div>
-        <div class="item firstRowSecondColumn  horizontalTB selfStart"     data-offset-x="250" data-offset-y="80">start</div>
-        <div class="item secondRowFirstColumn  horizontalTB"               data-offset-x="100" data-offset-y="180">default</div>
-        <div class="item secondRowSecondColumn horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="0">s-start</div>
-    </div>
-</div>
-
-</body>
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows.html b/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows.html
deleted file mode 100644 (file)
index a3b908f..0000000
+++ /dev/null
@@ -1,162 +0,0 @@
-<!DOCTYPE html>
-<link href="resources/grid.css" rel="stylesheet">
-<link href="resources/grid-alignment.css" rel="stylesheet">
-<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
-<script src="../../resources/check-layout.js"></script>
-<style>
-body {
-    margin: 0;
-}
-.container {
-    position: relative;
-}
-.grid {
-    grid-template-columns: 100px 100px;
-    grid-template-rows: 150px 150px;
-    font-size: 10px;
-}
-.item {
-   width: 20px;
-   height: 50px;
-}
-</style>
-<body onload="checkLayout('.grid')">
-<div id="log"></div>
-<p>This test checks that grid items alignment works as expected with HORIZONTAL-TB vs VERTICAL-RL orthogonal flows.</p>
-
-<p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-RL</p>
-<p>Direction: LTR vs LTR</p>
-<div class="container">
-    <div class="grid fit-content directionLTR">
-        <div class="item firstRowFirstColumn   verticalRL selfEnd"    data-offset-x="80"  data-offset-y="100">end</div>
-        <div class="item firstRowSecondColumn  verticalRL selfCenter" data-offset-x="140" data-offset-y="50">center</div>
-        <div class="item secondRowFirstColumn  verticalRL selfLeft"   data-offset-x="0"   data-offset-y="150">left</div>
-        <div class="item secondRowSecondColumn verticalRL selfRight"  data-offset-x="180" data-offset-y="150">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content directionLTR">
-        <div class="item firstRowFirstColumn   verticalRL selfSelfEnd"   data-offset-x="0"   data-offset-y="100">s-end</div>
-        <div class="item firstRowSecondColumn  verticalRL selfStart"     data-offset-x="100" data-offset-y="0">start</div>
-        <div class="item secondRowFirstColumn  verticalRL"               data-offset-x="0"   data-offset-y="150">default</div>
-        <div class="item secondRowSecondColumn verticalRL selfSelfStart" data-offset-x="180" data-offset-y="150">s-start</div>
-    </div>
-</div>
-
-<p>Direction: RTL vs LTR</p>
-<div class="container">
-    <div class="grid fit-content directionRTL">
-        <div class="item firstRowFirstColumn   directionLTR verticalRL selfEnd"    data-offset-x="100" data-offset-y="100">end</div>
-        <div class="item firstRowSecondColumn  directionLTR verticalRL selfCenter" data-offset-x="40"  data-offset-y="50">center</div>
-        <div class="item secondRowFirstColumn  directionLTR verticalRL selfLeft"   data-offset-x="100" data-offset-y="150">left</div>
-        <div class="item secondRowSecondColumn directionLTR verticalRL selfRight"  data-offset-x="80"  data-offset-y="150">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content directionRTL">
-        <div class="item firstRowFirstColumn   directionLTR verticalRL selfSelfEnd"   data-offset-x="100" data-offset-y="100">s-end</div>
-        <div class="item firstRowSecondColumn  directionLTR verticalRL selfStart"     data-offset-x="80"  data-offset-y="0">start</div>
-        <div class="item secondRowFirstColumn  directionLTR verticalRL"               data-offset-x="180" data-offset-y="150">default</div>
-        <div class="item secondRowSecondColumn directionLTR verticalRL selfSelfStart" data-offset-x="80"  data-offset-y="150">s-start</div>
-    </div>
-</div>
-
-<p>Direction: LTR vs RTL</p>
-<div class="container">
-    <div class="grid fit-content directionLTR">
-        <div class="item firstRowFirstColumn   directionRTL verticalRL selfEnd"    data-offset-x="80"  data-offset-y="100">end</div>
-        <div class="item firstRowSecondColumn  directionRTL verticalRL selfCenter" data-offset-x="140" data-offset-y="50">center</div>
-        <div class="item secondRowFirstColumn  directionRTL verticalRL selfLeft"   data-offset-x="0"   data-offset-y="150">left</div>
-        <div class="item secondRowSecondColumn directionRTL verticalRL selfRight"  data-offset-x="180" data-offset-y="150">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content directionLTR">
-        <div class="item firstRowFirstColumn   directionRTL verticalRL selfSelfEnd"   data-offset-x="0"  data-offset-y="0">s-end</div>
-        <div class="item firstRowSecondColumn  directionRTL verticalRL selfStart"     data-offset-x="100" data-offset-y="0">start</div>
-        <div class="item secondRowFirstColumn  directionRTL verticalRL"               data-offset-x="0"   data-offset-y="150">default</div>
-        <div class="item secondRowSecondColumn directionRTL verticalRL selfSelfStart" data-offset-x="180" data-offset-y="250">s-start</div>
-    </div>
-</div>
-
-<p>Direction: RTL vs RTL</p>
-<div class="container">
-    <div class="grid fit-content directionRTL">
-        <div class="item firstRowFirstColumn   verticalRL selfEnd"    data-offset-x="100" data-offset-y="100">end</div>
-        <div class="item firstRowSecondColumn  verticalRL selfCenter" data-offset-x="40"  data-offset-y="50">center</div>
-        <div class="item secondRowFirstColumn  verticalRL selfLeft"   data-offset-x="100" data-offset-y="150">left</div>
-        <div class="item secondRowSecondColumn verticalRL selfRight"  data-offset-x="80"  data-offset-y="150">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content directionRTL">
-        <div class="item firstRowFirstColumn   verticalRL selfSelfEnd"   data-offset-x="100" data-offset-y="0">s-end</div>
-        <div class="item firstRowSecondColumn  verticalRL selfStart"     data-offset-x="80"  data-offset-y="0">start</div>
-        <div class="item secondRowFirstColumn  verticalRL"               data-offset-x="180" data-offset-y="150">default</div>
-        <div class="item secondRowSecondColumn verticalRL selfSelfStart" data-offset-x="80"  data-offset-y="250">s-start</div>
-    </div>
-</div>
-
-<!-- HORIZONTAL-TB vs VERTICAL-LR -->
-<p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-LR</p>
-<p>Direction: LTR vs LTR</p>
-<div class="container">
-    <div class="grid fit-content drectionLTR">
-        <div class="item firstRowFirstColumn   verticalLR selfEnd"    data-offset-x="80"  data-offset-y="100">end</div>
-        <div class="item firstRowSecondColumn  verticalLR selfCenter" data-offset-x="140" data-offset-y="50">center</div>
-        <div class="item secondRowFirstColumn  verticalLR selfLeft"   data-offset-x="0"   data-offset-y="150">left</div>
-        <div class="item secondRowSecondColumn verticalLR selfRight"  data-offset-x="180" data-offset-y="150">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content drectionLTR">
-        <div class="item firstRowFirstColumn   verticalLR selfSelfEnd"   data-offset-x="80"   data-offset-y="100">s-end</div>
-        <div class="item firstRowSecondColumn  verticalLR selfStart"     data-offset-x="100" data-offset-y="0">start</div>
-        <div class="item secondRowFirstColumn  verticalLR"               data-offset-x="0"   data-offset-y="150">default</div>
-        <div class="item secondRowSecondColumn verticalLR selfSelfStart" data-offset-x="100" data-offset-y="150">s-start</div>
-    </div>
-</div>
-
-<p>Direction: RTL vs LTR</p>
-<div class="container">
-    <div class="grid fit-content directionRTL">
-        <div class="item firstRowFirstColumn   directionLTR verticalLR selfEnd"    data-offset-x="100" data-offset-y="100">end</div>
-        <div class="item firstRowSecondColumn  directionLTR verticalLR selfCenter" data-offset-x="40"  data-offset-y="50">center</div>
-        <div class="item secondRowFirstColumn  directionLTR verticalLR selfLeft"   data-offset-x="100"   data-offset-y="150">left</div>
-        <div class="item secondRowSecondColumn directionLTR verticalLR selfRight"  data-offset-x="80"   data-offset-y="150">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content directionRTL">
-        <div class="item firstRowFirstColumn   directionLTR verticalLR selfSelfEnd"   data-offset-x="180" data-offset-y="100">s-end</div>
-        <div class="item firstRowSecondColumn  directionLTR verticalLR selfStart"     data-offset-x="80"  data-offset-y="0">start</div>
-        <div class="item secondRowFirstColumn  directionLTR verticalLR"               data-offset-x="180" data-offset-y="150">default</div>
-        <div class="item secondRowSecondColumn directionLTR verticalLR selfSelfStart" data-offset-x="0"   data-offset-y="150">s-start</div>
-    </div>
-</div>
-
-<p>Direction: RTL vs RTL</p>
-<div class="container">
-    <div class="grid fit-content directionRTL">
-        <div class="item firstRowFirstColumn   verticalLR selfEnd"    data-offset-x="100" data-offset-y="100">end</div>
-        <div class="item firstRowSecondColumn  verticalLR selfCenter" data-offset-x="40"  data-offset-y="50">center</div>
-        <div class="item secondRowFirstColumn  verticalLR selfLeft"   data-offset-x="100" data-offset-y="150">left</div>
-        <div class="item secondRowSecondColumn verticalLR selfRight"  data-offset-x="80"  data-offset-y="150">right</div>
-    </div>
-</div>
-<br>
-<div class="container">
-    <div class="grid fit-content directionRTL">
-        <div class="item firstRowFirstColumn   verticalLR selfSelfEnd"   data-offset-x="180" data-offset-y="0">s-end</div>
-        <div class="item firstRowSecondColumn  verticalLR selfStart"     data-offset-x="80"  data-offset-y="0">start</div>
-        <div class="item secondRowFirstColumn  verticalLR"               data-offset-x="180" data-offset-y="150">default</div>
-        <div class="item secondRowSecondColumn verticalLR selfSelfStart" data-offset-x="0"  data-offset-y="250">s-start</div>
-    </div>
-</div>
-</body>
index 07309b5..4066356 100644 (file)
@@ -1,3 +1,28 @@
+2020-01-30  Rossana Monteriso  <rmonteriso@igalia.com>
+
+        [css-grid] Move grid-item-alignment tests to WPT folder
+        https://bugs.webkit.org/show_bug.cgi?id=206831
+
+        Reviewed by Javier Fernandez.
+
+        Add grid-item-alignment tests, checked and adapted, to WPT.
+        Add .thirdRowFirstColumn class to grid.css support file and update all tests using this class by removing the duplicated class
+        from their <style> section.
+        Imported to WPT with this PR: https://github.com/web-platform-tests/wpt/pull/21440
+
+        * web-platform-tests/css/css-grid/alignment/grid-align-content-distribution-vertical-lr.html:
+        * web-platform-tests/css/css-grid/alignment/grid-align-content-distribution-vertical-rl.html:
+        * web-platform-tests/css/css-grid/alignment/grid-align-content-distribution.html:
+        * web-platform-tests/css/css-grid/alignment/grid-align-justify-overflow.html:
+        * web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-expected.txt: Added.
+        * web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr-expected.txt: Added.
+        * web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl-expected.txt: Added.
+        * web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html: Added.
+        * web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html: Added.
+        * web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html: Added.
+        * web-platform-tests/css/support/grid.css:
+        (.thirdRowFirstColumn):
+
 2020-01-29  Sunny He  <sunny_he@apple.com>
 
         Clamp paddingBoxWidth/Height to a minimum of zero
index 864ed24..aa4332c 100644 (file)
     height: 400px;
 }
 
-.thirdRowFirstColumn {
-    background-color: green;
-    grid-column: 1;
-    grid-row: 3;
-}
-
-.fourthRowFirstColumn {
-    background-color: deepskyblue;
-    grid-column: 1;
-    grid-row: 4;
-}
-
-.fourthRowSecondColumn {
-    background-color: maroon;
-    grid-column: 2;
-    grid-row: 4;
-}
-
-.thirdRowFirstColumn {
-    background-color: green;
-    grid-column: 1;
-    grid-row: 3;
-}
-
 .fourthRowFirstColumn {
     background-color: deepskyblue;
     grid-column: 1;
index 26b6e91..1b495c4 100644 (file)
     height: 400px;
 }
 
-.thirdRowFirstColumn {
-    background-color: green;
-    grid-column: 1;
-    grid-row: 3;
-}
-
-.fourthRowFirstColumn {
-    background-color: deepskyblue;
-    grid-column: 1;
-    grid-row: 4;
-}
-
-.fourthRowSecondColumn {
-    background-color: maroon;
-    grid-column: 2;
-    grid-row: 4;
-}
-
-.thirdRowFirstColumn {
-    background-color: green;
-    grid-column: 1;
-    grid-row: 3;
-}
-
 .fourthRowFirstColumn {
     background-color: deepskyblue;
     grid-column: 1;
index b936917..444e46b 100644 (file)
     grid-auto-rows: auto;
 }
 
-.thirdRowFirstColumn {
-    background-color: green;
-    grid-column: 1;
-    grid-row: 3;
-}
-
-.fourthRowFirstColumn {
-    background-color: deepskyblue;
-    grid-column: 1;
-    grid-row: 4;
-}
-
-.fourthRowSecondColumn {
-    background-color: maroon;
-    grid-column: 2;
-    grid-row: 4;
-}
-
-.thirdRowFirstColumn {
-    background-color: green;
-    grid-column: 1;
-    grid-row: 3;
-}
-
 .fourthRowFirstColumn {
     background-color: deepskyblue;
     grid-column: 1;
index f0d9419..3f8eb18 100644 (file)
     width: 50px;
     height: 40px;
 }
-.thirdRowFirstColumn {
-    background-color: green;
-    grid-column: 1;
-    grid-row: 3;
-}
 </style>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
@@ -6,92 +6,66 @@ Direction: LTR vs LTR
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
 Direction: RTL vs LTR
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
 Direction: LTR vs RTL
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
 Direction: RTL vs RTL
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
 Orthogonal flows: HORIZONTAL-TB vs VERTICAL-LR
 
 Direction: LTR vs LTR
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
 Direction: RTL vs LTR
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
 Direction: RTL vs RTL
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
+
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
+PASS .grid 4 
+PASS .grid 5 
+PASS .grid 6 
+PASS .grid 7 
+
@@ -4,51 +4,37 @@ Direction: LTR vs LTR
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
 Direction: RTL vs LTR
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
 Direction: LTR vs RTL
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
 Direction: RTL vs RTL
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
+
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
+PASS .grid 4 
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-lr.html
new file mode 100644 (file)
index 0000000..32c2efb
--- /dev/null
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test:item alignment with orthogonal flows, vertical-lr writing mode</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
+<meta name="assert" content="This test checks that grid item alignment works as expected with vertical-lr and horizontal-tb orthogonal flows">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.container {
+    position: relative;
+}
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 150px 150px 150px;
+    font-size: 10px;
+}
+.item {
+   width: 50px;
+   height: 20px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that grid items alignment works as expected with VERTICAL-LR vs HORIZONTAL-TB orthogonal flows.</p>
+
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+    <div class="grid fit-content verticalLR directionLTR">
+        <div class="item firstRowFirstColumn   horizontalTB selfEnd"       data-offset-x="100" data-offset-y="80">end</div>
+        <div class="item firstRowSecondColumn  horizontalTB selfCenter"    data-offset-x="50"  data-offset-y="140">center</div>
+        <div class="item secondRowFirstColumn  horizontalTB selfStart"     data-offset-x="150"   data-offset-y="0">start</div>
+        <div class="item secondRowSecondColumn horizontalTB selfSelfEnd"   data-offset-x="250" data-offset-y="180">s-end</div>
+        <div class="item thirdRowFirstColumn   horizontalTB selfSelfStart" data-offset-x="300" data-offset-y="0">s-start</div>
+        <div class="item thirdRowSecondColumn  horizontalTB"               data-offset-x="300" data-offset-y="100">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+    <div class="grid fit-content verticalLR directionRTL">
+        <div class="item firstRowFirstColumn   directionLTR horizontalTB selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionLTR horizontalTB selfCenter"    data-offset-x="50"  data-offset-y="40">center</div>
+        <div class="item secondRowFirstColumn  directionLTR horizontalTB selfStart"     data-offset-x="150"   data-offset-y="180">start</div>
+        <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfEnd"   data-offset-x="250" data-offset-y="80">s-end</div>
+        <div class="item thirdRowFirstColumn   directionLTR horizontalTB selfSelfStart" data-offset-x="300" data-offset-y="100">s-start</div>
+        <div class="item thirdRowSecondColumn  directionLTR horizontalTB"               data-offset-x="300" data-offset-y="80">default</div>
+    </div>
+</div>
+
+<p>Direction: LTR vs RTL</p>
+<div class="container">
+    <div class="grid fit-content verticalLR directionLTR">
+        <div class="item firstRowFirstColumn   directionRTL horizontalTB selfEnd"       data-offset-x="100" data-offset-y="80">end</div>
+        <div class="item firstRowSecondColumn  directionRTL horizontalTB selfCenter"    data-offset-x="50"  data-offset-y="140">center</div>
+        <div class="item secondRowFirstColumn  directionRTL horizontalTB selfStart"     data-offset-x="150"   data-offset-y="0">start</div>
+        <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfEnd"   data-offset-x="150"   data-offset-y="180">s-end</div>
+        <div class="item thirdRowFirstColumn   directionRTL horizontalTB selfSelfStart" data-offset-x="400" data-offset-y="0">s-start</div>
+        <div class="item thirdRowSecondColumn  directionRTL horizontalTB"               data-offset-x="300" data-offset-y="100">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+    <div class="grid fit-content verticalLR directionRTL">
+        <div class="item firstRowFirstColumn   horizontalTB selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  horizontalTB selfCenter"    data-offset-x="50"  data-offset-y="40">center</div>
+        <div class="item secondRowFirstColumn  horizontalTB selfStart"     data-offset-x="150"   data-offset-y="180">start</div>
+        <div class="item secondRowSecondColumn horizontalTB selfSelfEnd"   data-offset-x="150"   data-offset-y="80">s-end</div>
+        <div class="item thirdRowFirstColumn   horizontalTB selfSelfStart" data-offset-x="400" data-offset-y="100">s-start</div>
+        <div class="item thirdRowSecondColumn  horizontalTB"               data-offset-x="300" data-offset-y="80">default</div>
+    </div>
+</div>
+
+</body>
@@ -4,51 +4,37 @@ Direction: LTR vs LTR
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
 Direction: RTL vs LTR
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
 Direction: LTR vs RTL
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
 Direction: RTL vs RTL
 
 end
 center
-left
-right
-PASS
-
-s-end
 start
-default
+s-end
 s-start
-PASS
+default
+
+PASS .grid 1 
+PASS .grid 2 
+PASS .grid 3 
+PASS .grid 4 
+
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows-vertical-rl.html
new file mode 100644 (file)
index 0000000..845c6ce
--- /dev/null
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test:item alignment with orthogonal flows, vertical-rl writing mode</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
+<meta name="assert" content="This test checks that grid item alignment works as expected with vertical-rl and horizontal-tb orthogonal flows">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.container {
+    position: relative;
+}
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 150px 150px 150px;
+    font-size: 10px;
+}
+.item {
+   width: 50px;
+   height: 20px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that grid items alignment works as expected with VERTICAL-RL vs HORIZONTAL-TB orthogonal flows.</p>
+
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+    <div class="grid fit-content verticalRL directionLTR">
+        <div class="item firstRowFirstColumn   horizontalTB selfEnd"       data-offset-x="300" data-offset-y="80">end</div>
+        <div class="item firstRowSecondColumn  horizontalTB selfCenter"    data-offset-x="350" data-offset-y="140">center</div>
+        <div class="item secondRowFirstColumn  horizontalTB selfStart"     data-offset-x="250" data-offset-y="0">start</div>
+        <div class="item secondRowSecondColumn horizontalTB selfSelfEnd"   data-offset-x="250" data-offset-y="180">s-end</div>
+        <div class="item thirdRowFirstColumn horizontalTB selfSelfStart" data-offset-x="0"   data-offset-y="0">s-start</div>
+        <div class="item thirdRowSecondColumn  horizontalTB"               data-offset-x="100" data-offset-y="100">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+    <div class="grid fit-content verticalRL directionRTL">
+        <div class="item firstRowFirstColumn   directionLTR horizontalTB selfEnd"       data-offset-x="300" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionLTR horizontalTB selfCenter"    data-offset-x="350" data-offset-y="40">center</div>
+        <div class="item secondRowFirstColumn  directionLTR horizontalTB selfStart"     data-offset-x="250" data-offset-y="180">start</div>
+        <div class="item secondRowSecondColumn directionLTR horizontalTB selfSelfEnd"   data-offset-x="250" data-offset-y="80">s-end</div>
+        <div class="item thirdRowFirstColumn   directionLTR horizontalTB selfSelfStart" data-offset-x="0"   data-offset-y="100">s-start</div>
+        <div class="item thirdRowSecondColumn  directionLTR horizontalTB"               data-offset-x="100" data-offset-y="80">default</div>
+    </div>
+</div>
+
+<p>Direction: LTR vs RTL</p>
+<div class="container">
+    <div class="grid fit-content verticalRL directionLTR">
+        <div class="item firstRowFirstColumn   directionRTL horizontalTB selfEnd"       data-offset-x="300" data-offset-y="80">end</div>
+        <div class="item firstRowSecondColumn  directionRTL horizontalTB selfCenter"    data-offset-x="350" data-offset-y="140">center</div>
+        <div class="item secondRowFirstColumn  directionRTL horizontalTB selfStart"     data-offset-x="250" data-offset-y="0">start</div>
+        <div class="item secondRowSecondColumn directionRTL horizontalTB selfSelfEnd"   data-offset-x="150" data-offset-y="180">s-end</div>
+        <div class="item thirdRowFirstColumn   directionRTL horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="0">s-start</div>
+        <div class="item thirdRowSecondColumn  directionRTL horizontalTB"               data-offset-x="100" data-offset-y="100">default</div>
+
+    </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+    <div class="grid fit-content verticalRL directionRTL">
+        <div class="item firstRowFirstColumn   horizontalTB selfEnd"       data-offset-x="300" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  horizontalTB selfCenter"    data-offset-x="350" data-offset-y="40">center</div>
+        <div class="item secondRowFirstColumn  horizontalTB selfStart"     data-offset-x="250" data-offset-y="180">start</div>
+        <div class="item secondRowSecondColumn horizontalTB selfSelfEnd"   data-offset-x="150" data-offset-y="80">s-end</div>
+        <div class="item thirdRowFirstColumn   horizontalTB selfSelfStart" data-offset-x="100" data-offset-y="100">s-start</div>
+        <div class="item thirdRowSecondColumn  horizontalTB"               data-offset-x="100" data-offset-y="80">default</div>
+    </div>
+</div>
+
+</body>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-item-alignment-with-orthogonal-flows.html
new file mode 100644 (file)
index 0000000..c506547
--- /dev/null
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout test: item alignment with orthogonal flows</title>
+<link rel="author" title="Rossana Monteriso" href="mailto:rmonteriso@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#alignment-values">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#orthogonal-flows">
+<meta name="assert" content="This test checks that grid item alignment works as expected with horizontal-tb and vertical-rl/vertical-lr orthogonal flows">
+<meta name="flags" content="ahem">
+<link rel="stylesheet" href="/css/support/grid.css">
+<link rel="stylesheet" href="/css/support/alignment.css">
+<link rel="stylesheet" href="/css/support/width-keyword-classes.css">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.container {
+    position: relative;
+}
+.grid {
+    grid-template-columns: 100px 100px;
+    grid-template-rows: 150px 150px 150px;
+    font-size: 10px;
+}
+.item {
+   width: 20px;
+   height: 50px;
+}
+</style>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that grid items alignment works as expected with HORIZONTAL-TB vs VERTICAL-RL orthogonal flows.</p>
+
+<p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-RL</p>
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+    <div class="grid fit-content directionLTR">
+        <div class="item firstRowFirstColumn   verticalRL selfEnd"       data-offset-x="80"   data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  verticalRL selfCenter"    data-offset-x="140"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  verticalRL selfStart"     data-offset-x="0"    data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn verticalRL selfSelfEnd"   data-offset-x="100"  data-offset-y="250">s-end</div>
+        <div class="item thirdRowFirstColumn   verticalRL selfSelfStart" data-offset-x="80"   data-offset-y="300">s-start</div>
+        <div class="item thirdRowSecondColumn  verticalRL"               data-offset-x= "100" data-offset-y="300">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+    <div class="grid fit-content directionRTL">
+        <div class="item firstRowFirstColumn   directionLTR verticalRL selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionLTR verticalRL selfCenter"    data-offset-x="40"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  directionLTR verticalRL selfStart"     data-offset-x="180"  data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn directionLTR verticalRL selfSelfEnd"   data-offset-x="0" data-offset-y="250">s-end</div>
+        <div class="item thirdRowFirstColumn   directionLTR verticalRL selfSelfStart" data-offset-x="180"  data-offset-y="300">s-start</div>
+        <div class="item thirdRowSecondColumn  directionLTR verticalRL"               data-offset-x="80" data-offset-y="300">default</div>
+
+    </div>
+</div>
+
+<p>Direction: LTR vs RTL</p>
+<div class="container">
+    <div class="grid fit-content directionLTR">
+        <div class="item firstRowFirstColumn   directionRTL verticalRL selfEnd"       data-offset-x="80"  data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionRTL verticalRL selfCenter"    data-offset-x="140" data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  directionRTL verticalRL selfStart"     data-offset-x="0" data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn directionRTL verticalRL selfSelfEnd"   data-offset-x="100"   data-offset-y="150">s-end</div>
+        <div class="item thirdRowFirstColumn   directionRTL verticalRL selfSelfStart" data-offset-x="80" data-offset-y="400">s-start</div>
+        <div class="item thirdRowSecondColumn  directionRTL verticalRL"               data-offset-x="100"   data-offset-y="300">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+    <div class="grid fit-content directionRTL">
+        <div class="item firstRowFirstColumn   verticalRL selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  verticalRL selfCenter"    data-offset-x="40"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  verticalRL selfStart"     data-offset-x="180" data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn verticalRL selfSelfEnd"   data-offset-x="0"   data-offset-y="150">s-end</div>
+        <div class="item thirdRowFirstColumn   verticalRL selfSelfStart" data-offset-x="180" data-offset-y="400">s-start</div>
+        <div class="item thirdRowSecondColumn  verticalRL"               data-offset-x="80"  data-offset-y="300">default</div>
+    </div>
+</div>
+
+<!-- HORIZONTAL-TB vs VERTICAL-LR -->
+<p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-LR</p>
+<p>Direction: LTR vs LTR</p>
+<div class="container">
+    <div class="grid fit-content drectionLTR">
+        <div class="item firstRowFirstColumn   verticalLR selfEnd"       data-offset-x="80"  data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  verticalLR selfCenter"    data-offset-x="140" data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  verticalLR selfStart"     data-offset-x="0"   data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn verticalLR selfSelfEnd"   data-offset-x="180" data-offset-y="250">s-end</div>
+        <div class="item thirdRowFirstColumn   verticalLR selfSelfStart" data-offset-x="0"   data-offset-y="300">s-start</div>
+        <div class="item thirdRowSecondColumn  verticalLR"               data-offset-x="100" data-offset-y="300">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs LTR</p>
+<div class="container">
+    <div class="grid fit-content directionRTL">
+        <div class="item firstRowFirstColumn   directionLTR verticalLR selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  directionLTR verticalLR selfCenter"    data-offset-x="40"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  directionLTR verticalLR selfStart"     data-offset-x="180" data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn directionLTR verticalLR selfSelfEnd"   data-offset-x="80"  data-offset-y="250">s-end</div>
+        <div class="item thirdRowFirstColumn   directionLTR verticalLR selfSelfStart" data-offset-x="100" data-offset-y="300">s-start</div>
+        <div class="item thirdRowSecondColumn  directionLTR verticalLR"               data-offset-x="80"  data-offset-y="300">default</div>
+    </div>
+</div>
+
+<p>Direction: RTL vs RTL</p>
+<div class="container">
+    <div class="grid fit-content directionRTL">
+        <div class="item firstRowFirstColumn   verticalLR selfEnd"       data-offset-x="100" data-offset-y="100">end</div>
+        <div class="item firstRowSecondColumn  verticalLR selfCenter"    data-offset-x="40"  data-offset-y="50">center</div>
+        <div class="item secondRowFirstColumn  verticalLR selfStart"     data-offset-x="180" data-offset-y="150">start</div>
+        <div class="item secondRowSecondColumn verticalLR selfSelfEnd"   data-offset-x="80"  data-offset-y="150">s-end</div>
+        <div class="item thirdRowFirstColumn   verticalLR selfSelfStart" data-offset-x="100" data-offset-y="400">s-start</div>
+        <div class="item thirdRowSecondColumn  verticalLR"               data-offset-x="80"  data-offset-y="300">default</div>
+    </div>
+</div>
+
+</body>
index 5cfb15e..4007ebb 100644 (file)
   grid-row: 2;
 }
 
+.thirdRowFirstColumn {
+  background-color: green;
+  grid-column: 1;
+  grid-row: 3;
+}
+
 .thirdRowSecondColumn {
   background-color: red;
   grid-column: 2;