Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / css-grid-layout / grid-align-content-vertical-rl.html
blob2fa908db569542f37aec94dadd8a1b0c90145b2b
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link href="resources/grid.css" rel="stylesheet">
5 <script src="../../resources/check-layout.js"></script>
6 <style>
7 body {
8 margin: 0;
11 .grid {
12 grid: 50px 50px / 100px 100px;
13 position: relative;
14 width: 300px;
15 height: 200px;
18 .cell {
19 width: 20px;
20 height: 40px;
23 .alignContentStart {
24 align-content: start;
27 .alignContentEnd {
28 align-content: end;
31 .alignContentCenter {
32 align-content: center;
35 .alignContentLeft {
36 align-content: left;
39 .alignContentRight {
40 align-content: right;
43 .alignContentFlexStart {
44 align-content: flex-start;
47 .alignContentFlexEnd {
48 align-content: flex-end;
51 </style>
52 </head>
53 <body onload="checkLayout('.grid')">
55 <p>This test checks that the align-content property is applied correctly in vertical-rl grids.</p>
57 <div style="position: relative">
58 <p>direction: LTR | align-content: 'center'</p>
59 <div class="grid verticalRL alignContentCenter" data-expected-width="300" data-expected-height="200">
60 <div class="cell firstRowFirstColumn" data-offset-x="230" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
61 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
62 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
63 <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
64 </div>
65 </div>
67 <div style="position: relative">
68 <p>direction: LTR | align-content: 'left'</p>
69 <div class="grid verticalRL alignContentLeft" data-expected-width="300" data-expected-height="200">
70 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
71 <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
72 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
73 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
74 </div>
75 </div>
77 <div style="position: relative">
78 <p>direction: LTR | align-content: 'right'</p>
79 <div class="grid verticalRL alignContentRight" data-expected-width="300" data-expected-height="200">
80 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
81 <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
82 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
83 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
84 </div>
85 </div>
87 <div style="position: relative">
88 <p>direction: LTR | align-content: 'start'</p>
89 <div class="grid verticalRL alignContentStart" data-expected-width="300" data-expected-height="200">
90 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
91 <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
92 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
93 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
94 </div>
95 </div>
97 <div style="position: relative">
98 <p>direction: LTR | align-content: 'end'</p>
99 <div class="grid verticalRL alignContentEnd" data-expected-width="300" data-expected-height="200">
100 <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
101 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
102 <div class="secondRowFirstColumn" data-offset-x="00" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
103 <div class="cell secondRowSecondColumn" data-offset-x="80" data-offset-y="50" data-expected-width="20" data-expected-height="40"></div>
104 </div>
105 </div>
107 <!-- RTL direction. -->
108 <div style="position: relative">
109 <p>direction: RTL | align-content: 'center'</p>
110 <div class="grid directionRTL verticalRL alignContentCenter" data-expected-width="300" data-expected-height="200">
111 <div class="cell firstRowFirstColumn" data-offset-x="230" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
112 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
113 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
114 <div class="cell secondRowSecondColumn" data-offset-x="130" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
115 </div>
116 </div>
118 <div style="position: relative">
119 <p>direction: RTL | align-content: 'left'</p>
120 <div class="grid directionRTL verticalRL alignContentLeft" data-expected-width="300" data-expected-height="200">
121 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
122 <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
123 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
124 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
125 </div>
126 </div>
128 <div style="position: relative">
129 <p>direction: RTL | align-content: 'right'</p>
130 <div class="grid directionRTL verticalRL alignContentRight" data-expected-width="300" data-expected-height="200">
131 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
132 <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
133 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
134 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
135 </div>
136 </div>
138 <div style="position: relative">
139 <p>direction: RTL | align-content: 'start'</p>
140 <div class="grid directionRTL verticalRL alignContentStart" data-expected-width="300" data-expected-height="200">
141 <div class="cell firstRowFirstColumn" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
142 <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
143 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
144 <div class="cell secondRowSecondColumn" data-offset-x="180" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
145 </div>
146 </div>
148 <div style="position: relative">
149 <p>direction: RTL | align-content: 'end'</p>
150 <div class="grid directionRTL verticalRL alignContentEnd" data-expected-width="300" data-expected-height="200">
151 <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
152 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
153 <div class="secondRowFirstColumn" data-offset-x="00" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
154 <div class="cell secondRowSecondColumn" data-offset-x="80" data-offset-y="110" data-expected-width="20" data-expected-height="40"></div>
155 </div>
156 </div>
158 </body>
159 </html>