Index: LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html |
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 |
new file mode 100644 |
index 0000000000000000000000000000000000000000..2f8a3418899396177d57da0790f1ffbf93e23388 |
--- /dev/null |
+++ b/LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html |
@@ -0,0 +1,130 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+<link href="resources/grid.css" rel="stylesheet"> |
+<script src="../../resources/check-layout.js"></script> |
+<style> |
+body { |
+ margin: 0; |
+} |
+.container { |
+ position: relative; |
+} |
+.grid { |
+ font: 10px/1 Ahem; |
+ grid-template-columns: 20px 50px; |
+ grid-template-rows: 150px 150px; |
+ width: -webkit-fit-content; |
+} |
+.start { |
+ align-self: start; |
+ justify-self: start; |
+} |
+.end { |
+ align-self: end; |
+ justify-self: end; |
+} |
+.center { |
+ align-self: center; |
+ justify-self: center; |
+} |
+.right { |
+ align-self: right; |
+ justify-self: right; |
+} |
+.left { |
+ align-self: left; |
+ justify-self: left; |
+} |
+.selfStart { |
+ align-self: self-start; |
+ justify-self: self-start; |
+} |
+.selfEnd { |
+ align-self: self-end; |
+ justify-self: self-end; |
+} |
+.itemsCenter { |
+ align-items: center; |
+ justify-items: center; |
+} |
+</style> |
+</head> |
+<body onload="checkLayout('.grid')"> |
+ |
+<p>This test checks that grid items positioning works as expected with VERTICAL-LR vs HORIZONTAL-TB orthogonal flows.</p> |
+ |
+<p>Direction: LTR vs LTR</p> |
+<div class="container"> |
+ <div class="grid directionLTR verticalLR" data-expected-width="300" data-expected-height="70"> |
+ <div class="firstRowFirstColumn directionLTR horizontalTB end" data-offset-x="20" data-offset-y="10" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
Julien - ping for review
2015/01/26 10:42:06
'direction' is inherited by default so directionLT
jfernandez
2015/02/06 23:54:19
Done.
|
+ <div class="firstRowSecondColumn directionLTR horizontalTB center" data-offset-x="40" data-offset-y="40" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ <div class="secondRowFirstColumn directionLTR horizontalTB left" data-offset-x="150" data-offset-y="0" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="secondRowSecondColumn directionLTR horizontalTB right" data-offset-x="150" data-offset-y="60" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
Julien - ping for review
2015/01/26 10:42:06
Is this result really correct? I would have expect
jfernandez
2015/02/06 23:54:18
Well, I could be wrong, but since both left/right
|
+ </div> |
+</div> |
+<div class="container"> |
+ <div class="grid directionLTR verticalLR itemsCenter" data-expected-width="300" data-expected-height="70"> |
+ <div class="firstRowFirstColumn directionLTR horizontalTB selfEnd" data-offset-x="20" data-offset-y="10" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="firstRowSecondColumn directionLTR horizontalTB" data-offset-x="40" data-offset-y="40" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ <div class="secondRowFirstColumn directionLTR horizontalTB" data-offset-x="160" data-offset-y="5" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="secondRowSecondColumn directionLTR horizontalTB selfStart" data-offset-x="150" data-offset-y="20" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ </div> |
+</div> |
+ |
+<p>Direction: RTL vs LTR</p> |
+<div class="container"> |
+ <div class="grid directionRTL verticalLR" data-expected-width="300" data-expected-height="70"> |
+ <div class="firstRowFirstColumn directionLTR horizontalTB end" data-offset-x="20" data-offset-y="50" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="firstRowSecondColumn directionLTR horizontalTB center" data-offset-x="40" data-offset-y="20" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ <div class="secondRowFirstColumn directionLTR horizontalTB left" data-offset-x="150" data-offset-y="50" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="secondRowSecondColumn directionLTR horizontalTB right" data-offset-x="150" data-offset-y="40" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ </div> |
+</div> |
+<div class="container"> |
+ <div class="grid directionRTL verticalLR itemsCenter" data-expected-width="300" data-expected-height="70"> |
+ <div class="firstRowFirstColumn directionLTR horizontalTB selfEnd" data-offset-x="20" data-offset-y="60" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="firstRowSecondColumn directionLTR horizontalTB" data-offset-x="40" data-offset-y="20" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ <div class="secondRowFirstColumn directionLTR horizontalTB" data-offset-x="160" data-offset-y="55" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="secondRowSecondColumn directionLTR horizontalTB selfStart" data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ </div> |
+</div> |
+ |
+<p>Direction: LTR vs RTL </p> |
+<div class="container"> |
+ <div class="grid directionLTR verticalLR" data-expected-width="300" data-expected-height="70"> |
+ <div class="firstRowFirstColumn directionRTL horizontalTB end" data-offset-x="20" data-offset-y="10" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="firstRowSecondColumn directionRTL horizontalTB center" data-offset-x="40" data-offset-y="40" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ <div class="secondRowFirstColumn directionRTL horizontalTB left" data-offset-x="150" data-offset-y="0" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="secondRowSecondColumn directionRTL horizontalTB right" data-offset-x="150" data-offset-y="60" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ </div> |
+</div> |
+<div class="container"> |
+ <div class="grid directionLTR verticalLR itemsCenter" data-expected-width="300" data-expected-height="70"> |
+ <div class="firstRowFirstColumn directionRTL horizontalTB selfEnd" data-offset-x="0" data-offset-y="10" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="firstRowSecondColumn directionRTL horizontalTB" data-offset-x="40" data-offset-y="40" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ <div class="secondRowFirstColumn directionRTL horizontalTB" data-offset-x="160" data-offset-y="5" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="secondRowSecondColumn directionRTL horizontalTB selfStart" data-offset-x="230" data-offset-y="20" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ </div> |
+</div> |
+ |
+<p>Direction: RTL vs RTL </p> |
+<div class="container"> |
+ <div class="grid directionRTL verticalLR" data-expected-width="300" data-expected-height="70"> |
+ <div class="firstRowFirstColumn directionRTL horizontalTB end" data-offset-x="20" data-offset-y="50" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="firstRowSecondColumn directionRTL horizontalTB center" data-offset-x="40" data-offset-y="20" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ <div class="secondRowFirstColumn directionRTL horizontalTB left" data-offset-x="150" data-offset-y="50" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="secondRowSecondColumn directionRTL horizontalTB right" data-offset-x="150" data-offset-y="40" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ </div> |
+</div> |
+<div class="container"> |
+ <div class="grid directionRTL verticalLR itemsCenter" data-expected-width="300" data-expected-height="70"> |
+ <div class="firstRowFirstColumn directionRTL horizontalTB selfEnd" data-offset-x="0" data-offset-y="60" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="firstRowSecondColumn directionRTL horizontalTB" data-offset-x="40" data-offset-y="20" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ <div class="secondRowFirstColumn directionRTL horizontalTB" data-offset-x="160" data-offset-y="55" data-expected-width="130" data-expected-height="10">XXXXXXXXXXXXX</div> |
+ <div class="secondRowSecondColumn directionRTL horizontalTB selfStart" data-offset-x="230" data-offset-y="00" data-expected-width="70" data-expected-height="10">XXXXXXX</div> |
+ </div> |
+</div> |
+ |
+</body> |
+</html> |