| <!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> |
