blob: 727a9af26d1153e3107af05285718fe94b3d7b1c [file] [log] [blame]
<!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>