Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(363)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows.html

Issue 842193004: [css-grid] Handle alignment with orthogonal flows (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@orthogonal-flows
Patch Set: Implemented logic for self-start/end values. Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-expected.txt » ('j') | LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
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;
9 }
10 .container {
11 position: relative;
12 }
13 .grid {
14 font: 10px/1 Ahem;
15 grid-template-columns: 20px 50px;
16 grid-template-rows: 150px 150px;
17 width: -webkit-fit-content;
18 }
19 .start {
20 align-self: start;
21 justify-self: start;
22 }
23 .end {
24 align-self: end;
25 justify-self: end;
26 }
27 .center {
28 align-self: center;
29 justify-self: center;
30 }
31 .right {
32 align-self: right;
33 justify-self: right;
34 }
35 .left {
36 align-self: left;
37 justify-self: left;
38 }
39 .selfStart {
40 align-self: self-start;
41 justify-self: self-start;
42 }
43 .selfEnd {
44 align-self: self-end;
45 justify-self: self-end;
46 }
47 .itemsCenter {
48 align-items: center;
49 justify-items: center;
50 }
51 </style>
52 </head>
53 <body onload="checkLayout('.grid')">
54
55 <p>This test checks that grid items positioning works as expected with orthogona l flows.</p>
56
57 <p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-RL</p>
58 <p>Direction: LTR vs LTR</p>
59 <div class="container">
60 <div class="grid directionLTR" data-expected-width="70" data-expected-height ="300">
61 <div class="firstRowFirstColumn directionLTR verticalRL end" data-offs et-x="10" data-offset-y="20" data-expected-width="10" data-expected-height="130" >XXXXXXXXXXXXX</div>
62 <div class="firstRowSecondColumn directionLTR verticalRL center" data-o ffset-x="40" data-offset-y="40" data-expected-width="10" data-expected-height="7 0">XXXXXXX</div>
63 <div class="secondRowFirstColumn directionLTR verticalRL left" data-off set-x="0" data-offset-y="150" data-expected-width="10" data-expected-height="130 ">XXXXXXXXXXXXX</div>
64 <div class="secondRowSecondColumn directionLTR verticalRL right" data-of fset-x="60" data-offset-y="150" data-expected-width="10" data-expected-height="7 0">XXXXXXX</div>
65 </div>
66 </div>
67 <div class="container">
68 <div class="grid directionLTR itemsCenter" data-expected-width="70" data-exp ected-height="300">
69 <div class="firstRowFirstColumn directionLTR verticalRL selfEnd" data- offset-x="0" data-offset-y="20" data-expected-width="10" data-expected-height="1 30">XXXXXXXXXXXXX</div>
70 <div class="firstRowSecondColumn directionLTR verticalRL" data-offset-x ="40" data-offset-y="40" data-expected-width="10" data-expected-height="70">XXXX XXX</div>
71 <div class="secondRowFirstColumn directionLTR verticalRL" data-offset-x ="5" data-offset-y="160" data-expected-width="10" data-expected-height="130">XXX XXXXXXXXXX</div>
72 <div class="secondRowSecondColumn directionLTR verticalRL selfStart" dat a-offset-x="60" data-offset-y="150" data-expected-width="10" data-expected-heigh t="70">XXXXXXX</div>
73 </div>
74 </div>
75
76 <p>Direction: RTL vs LTR</p>
77 <div class="container">
78 <div class="grid directionRTL" data-expected-width="70" data-expected-height ="300">
79 <div class="firstRowFirstColumn directionLTR verticalRL end" data-offs et-x="50" data-offset-y="20" data-expected-width="10" data-expected-height="130" >XXXXXXXXXXXXX</div>
80 <div class="firstRowSecondColumn directionLTR verticalRL center" data-o ffset-x="20" data-offset-y="40" data-expected-width="10" data-expected-height="7 0">XXXXXXX</div>
81 <div class="secondRowFirstColumn directionLTR verticalRL left" data-off set-x="50" data-offset-y="150" data-expected-width="10" data-expected-height="13 0">XXXXXXXXXXXXX</div>
82 <div class="secondRowSecondColumn directionLTR verticalRL right" data-of fset-x="40" data-offset-y="150" data-expected-width="10" data-expected-height="7 0">XXXXXXX</div>
83 </div>
84 </div>
85 <div class="container">
86 <div class="grid directionRTL itemsCenter" data-expected-width="70" data-exp ected-height="300">
87 <div class="firstRowFirstColumn directionLTR verticalRL selfEnd" data- offset-x="50" data-offset-y="20" data-expected-width="10" data-expected-height=" 130">XXXXXXXXXXXXX</div>
88 <div class="firstRowSecondColumn directionLTR verticalRL" data-offset-x ="20" data-offset-y="40" data-expected-width="10" data-expected-height="70">XXXX XXX</div>
89 <div class="secondRowFirstColumn directionLTR verticalRL" data-offset-x ="55" data-offset-y="160" data-expected-width="10" data-expected-height="130">XX XXXXXXXXXXX</div>
90 <div class="secondRowSecondColumn directionLTR verticalRL selfStart" dat a-offset-x="40" data-offset-y="150" data-expected-width="10" data-expected-heigh t="70">XXXXXXX</div>
91 </div>
92 </div>
93
94 <p>Direction: LTR vs RTL</p>
95 <div class="container">
96 <div class="grid directionLTR" data-expected-width="70" data-expected-height ="300">
97 <div class="firstRowFirstColumn directionRTL verticalRL end" data-offs et-x="10" data-offset-y="20" data-expected-width="10" data-expected-height="130" >XXXXXXXXXXXXX</div>
98 <div class="firstRowSecondColumn directionRTL verticalRL center" data-o ffset-x="40" data-offset-y="40" data-expected-width="10" data-expected-height="7 0">XXXXXXX</div>
99 <div class="secondRowFirstColumn directionRTL verticalRL left" data-off set-x="0" data-offset-y="150" data-expected-width="10" data-expected-height="130 ">XXXXXXXXXXXXX</div>
100 <div class="secondRowSecondColumn directionRTL verticalRL right" data-of fset-x="60" data-offset-y="150" data-expected-width="10" data-expected-height="7 0">XXXXXXX</div>
101 </div>
102 </div>
103 <div class="container">
104 <div class="grid directionLTR itemsCenter" data-expected-width="70" data-exp ected-height="300">
105 <div class="firstRowFirstColumn directionRTL verticalRL selfEnd" data- offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="13 0">XXXXXXXXXXXXX</div>
106 <div class="firstRowSecondColumn directionRTL verticalRL" data-offset-x ="40" data-offset-y="40" data-expected-width="10" data-expected-height="70">XXXX XXX</div>
107 <div class="secondRowFirstColumn directionRTL verticalRL" data-offset-x ="5" data-offset-y="160" data-expected-width="10" data-expected-height="130">XXX XXXXXXXXXX</div>
108 <div class="secondRowSecondColumn directionRTL verticalRL selfStart" dat a-offset-x="60" data-offset-y="230" data-expected-width="10" data-expected-heigh t="70">XXXXXXX</div>
109 </div>
110 </div>
111
112 <p>Direction: RTL vs RTL</p>
113 <div class="container">
114 <div class="grid directionRTL" data-expected-width="70" data-expected-height ="300">
115 <div class="firstRowFirstColumn directionRTL verticalRL end" data-offs et-x="50" data-offset-y="20" data-expected-width="10" data-expected-height="130" >XXXXXXXXXXXXX</div>
116 <div class="firstRowSecondColumn directionRTL verticalRL center" data-o ffset-x="20" data-offset-y="40" data-expected-width="10" data-expected-height="7 0">XXXXXXX</div>
117 <div class="secondRowFirstColumn directionRTL verticalRL left" data-off set-x="50" data-offset-y="150" data-expected-width="10" data-expected-height="13 0">XXXXXXXXXXXXX</div>
118 <div class="secondRowSecondColumn directionRTL verticalRL right" data-of fset-x="40" data-offset-y="150" data-expected-width="10" data-expected-height="7 0">XXXXXXX</div>
119 </div>
120 </div>
121 <div class="container">
122 <div class="grid directionRTL itemsCenter" data-expected-width="70" data-exp ected-height="300">
123 <div class="firstRowFirstColumn directionRTL verticalRL selfEnd" data- offset-x="50" data-offset-y="0" data-expected-width="10" data-expected-height="1 30">XXXXXXXXXXXXX</div>
124 <div class="firstRowSecondColumn directionRTL verticalRL" data-offset-x ="20" data-offset-y="40" data-expected-width="10" data-expected-height="70">XXXX XXX</div>
125 <div class="secondRowFirstColumn directionRTL verticalRL" data-offset-x ="55" data-offset-y="160" data-expected-width="10" data-expected-height="130">XX XXXXXXXXXXX</div>
126 <div class="secondRowSecondColumn directionRTL verticalRL selfStart" dat a-offset-x="40" data-offset-y="230" data-expected-width="10" data-expected-heigh t="70">XXXXXXX</div>
127 </div>
128 </div>
129
130 <!-- HORIZONTAL-TB vs VERTICAL-LR -->
131 <p>Orthogonal flows: HORIZONTAL-TB vs VERTICAL-LR</p>
132 <p>Direction: LTR vs LTR</p>
133 <div class="container">
134 <div class="grid" data-expected-width="70" data-expected-height="300">
135 <div class="firstRowFirstColumn verticalLR end" data-offset-x="10" dat a-offset-y="20" data-expected-width="10" data-expected-height="130">XXXXXXXXXXXX X</div>
136 <div class="firstRowSecondColumn verticalLR center" data-offset-x="40" data-offset-y="40" data-expected-width="10" data-expected-height="70">XXXXXXX</d iv>
137 <div class="secondRowFirstColumn verticalLR left" data-offset-x="0" dat a-offset-y="150" data-expected-width="10" data-expected-height="130">XXXXXXXXXXX XX</div>
138 <div class="secondRowSecondColumn verticalLR right" data-offset-x="60" d ata-offset-y="150" data-expected-width="10" data-expected-height="70">XXXXXXX</d iv>
139 </div>
140 </div>
141 <div class="container">
142 <div class="grid itemsCenter" data-expected-width="70" data-expected-height= "300">
143 <div class="firstRowFirstColumn verticalLR selfEnd" data-offset-x="10" data-offset-y="20" data-expected-width="10" data-expected-height="130">XXXXXXXX XXXXX</div>
144 <div class="firstRowSecondColumn verticalLR" data-offset-x="40" data-of fset-y="40" data-expected-width="10" data-expected-height="70">XXXXXXX</div>
145 <div class="secondRowFirstColumn verticalLR" data-offset-x="5" data-off set-y="160" data-expected-width="10" data-expected-height="130">XXXXXXXXXXXXX</d iv>
146 <div class="secondRowSecondColumn verticalLR selfStart" data-offset-x="2 0" data-offset-y="150" data-expected-width="10" data-expected-height="70">XXXXXX X</div>
147 </div>
148 </div>
149
150 <p>Direction: RTL vs LTR</p>
151 <div class="container">
152 <div class="grid directionRTL" data-expected-width="70" data-expected-height ="300">
153 <div class="firstRowFirstColumn directionLTR verticalLR end" data-offs et-x="50" data-offset-y="20" data-expected-width="10" data-expected-height="130" >XXXXXXXXXXXXX</div>
154 <div class="firstRowSecondColumn directionLTR verticalLR center" data-o ffset-x="20" data-offset-y="40" data-expected-width="10" data-expected-height="7 0">XXXXXXX</div>
155 <div class="secondRowFirstColumn directionLTR verticalLR left" data-off set-x="50" data-offset-y="150" data-expected-width="10" data-expected-height="13 0">XXXXXXXXXXXXX</div>
156 <div class="secondRowSecondColumn directionLTR verticalLR right" data-of fset-x="40" data-offset-y="150" data-expected-width="10" data-expected-height="7 0">XXXXXXX</div>
157 </div>
158 </div>
159 <div class="container">
160 <div class="grid directionRTL itemsCenter" data-expected-width="70" data-exp ected-height="300">
161 <div class="firstRowFirstColumn directionLTR verticalLR selfEnd" data- offset-x="60" data-offset-y="20" data-expected-width="10" data-expected-height=" 130">XXXXXXXXXXXXX</div>
162 <div class="firstRowSecondColumn directionLTR verticalLR" data-offset-x ="20" data-offset-y="40" data-expected-width="10" data-expected-height="70">XXXX XXX</div>
163 <div class="secondRowFirstColumn directionLTR verticalLR" data-offset-x ="55" data-offset-y="160" data-expected-width="10" data-expected-height="130">XX XXXXXXXXXXX</div>
164 <div class="secondRowSecondColumn directionLTR verticalLR selfStart" dat a-offset-x="00" data-offset-y="150" data-expected-width="10" data-expected-heigh t="70">XXXXXXX</div>
165 </div>
166 </div>
167
168 <p>Direction: RTL vs RTL</p>
169 <div class="container">
170 <div class="grid directionRTL" data-expected-width="70" data-expected-height ="300">
171 <div class="firstRowFirstColumn directionRTL verticalLR end" data-offs et-x="50" data-offset-y="20" data-expected-width="10" data-expected-height="130" >XXXXXXXXXXXXX</div>
172 <div class="firstRowSecondColumn directionRTL verticalLR center" data-o ffset-x="20" data-offset-y="40" data-expected-width="10" data-expected-height="7 0">XXXXXXX</div>
173 <div class="secondRowFirstColumn directionRTL verticalLR left" data-off set-x="50" data-offset-y="150" data-expected-width="10" data-expected-height="13 0">XXXXXXXXXXXXX</div>
174 <div class="secondRowSecondColumn directionRTL verticalLR right" data-of fset-x="40" data-offset-y="150" data-expected-width="10" data-expected-height="7 0">XXXXXXX</div>
175 </div>
176 </div>
177 <div class="container">
178 <div class="grid directionRTL itemsCenter" data-expected-width="70" data-exp ected-height="300">
179 <div class="firstRowFirstColumn directionRTL verticalLR selfEnd" data- offset-x="60" data-offset-y="0" data-expected-width="10" data-expected-height="1 30">XXXXXXXXXXXXX</div>
180 <div class="firstRowSecondColumn directionRTL verticalLR" data-offset-x ="20" data-offset-y="40" data-expected-width="10" data-expected-height="70">XXXX XXX</div>
181 <div class="secondRowFirstColumn directionRTL verticalLR" data-offset-x ="55" data-offset-y="160" data-expected-width="10" data-expected-height="130">XX XXXXXXXXXXX</div>
182 <div class="secondRowSecondColumn directionRTL verticalLR selfStart" dat a-offset-x="0" data-offset-y="230" data-expected-width="10" data-expected-height ="70">XXXXXXX</div>
183 </div>
184 </div>
185
186 </body>
187 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-expected.txt » ('j') | LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698