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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html

Issue 1342453004: [CSS Grid Layout] Combining Content and Self Alignment with span items (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Added comment. Created 5 years, 2 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 | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt » ('j') | no next file with comments »
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: 0px;
9 }
10
11 .grid {
12 grid-auto-columns: 20px;
13 grid-auto-rows: 40px;
14 grid-template-areas: "a a b"
15 "c d b";
16 position: relative;
17 width: 300px;
18 height: 200px;
19 }
20 .a {
21 grid-area: a;
22 background-color: blue;
23 }
24 .b {
25 grid-area: b;
26 background-color: lime;
27 }
28 .c {
29 grid-area: c;
30 background-color: purple;
31 }
32 .d {
33 grid-area: d;
34 background-color: orange;
35 }
36 .stretchedGrid {
37 grid-auto-columns: minmax(20px, auto);
38 grid-auto-rows: minmax(40px, auto);
39 }
40
41 .spaceBetween {
42 justify-content: space-between;
43 align-content: space-between;
44 }
45
46 .spaceAround {
47 justify-content: space-around;
48 align-content: space-around;
49 }
50
51 .spaceEvenly {
52 justify-content: space-evenly;
53 align-content: space-evenly;
54 }
55
56 .stretch {
57 justify-content: stretch;
58 align-content: stretch;
59 }
60
61 .cell {
62 width: 20px;
63 height: 40px;
64 }
65 .justifyCenter {
66 justify-self: center;
67 }
68 .alignCenter {
69 align-self: center;
70 }
71 .justifyEnd {
72 justify-self: end;
73 }
74 .alignEnd {
75 align-self: end;
76 }
77 </style>
78 </head>
79 <body onload="checkLayout('.grid')">
80
81 <p>This test checks that Content Distribution alignment works fine in combinatio n with Self Alignmet and items span more than one track.</p>
82
83 <div style="position: relative">
84 <p>direction: LTR | distribution: 'space-between' | self-alignment: center</ p>
85 <div class="grid spaceBetween" data-expected-width="300" data-expected-heigh t="200">
86 <div class="a cell justifyCenter" data-offset-x="70" data-offset-y="0" d ata-expected-width="20" data-expected-height="40"></div>
87 <div class="b cell alignCenter" data-offset-x="280" data-offset-y="80" d ata-expected-width="20" data-expected-height="40"></div>
88 <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width ="20" data-expected-height="40"></div>
89 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div>
90 </div>
91 </div>
92
93 <div style="position: relative">
94 <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p>
95 <div class="grid spaceBetween" data-expected-width="300" data-expected-heigh t="200">
96 <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="0" dat a-expected-width="20" data-expected-height="40"></div>
97 <div class="b cell alignEnd" data-offset-x="280" data-offset-y="160" dat a-expected-width="20" data-expected-height="40"></div>
98 <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width ="20" data-expected-height="40"></div>
99 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div>
100 </div>
101 </div>
102
103 <div style="position: relative">
104 <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p >
105 <div class="grid spaceAround" data-expected-width="300" data-expected-height ="200">
106 <div class="a cell justifyCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
107 <div class="b cell alignCenter" data-offset-x="240" data-offset-y="80" d ata-expected-width="20" data-expected-height="40"></div>
108 <div class="c" data-offset-x="40" data-offset-y="130" data-expected-widt h="20" data-expected-height="40"></div>
109 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div>
110 </div>
111 </div>
112
113 <div style="position: relative">
114 <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p>
115 <div class="grid spaceAround" data-expected-width="300" data-expected-height ="200">
116 <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="30" da ta-expected-width="20" data-expected-height="40"></div>
117 <div class="b cell alignEnd" data-offset-x="240" data-offset-y="130" dat a-expected-width="20" data-expected-height="40"></div>
118 <div class="c" data-offset-x="40" data-offset-y="130" data-expected-widt h="20" data-expected-height="40"></div>
119 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div>
120 </div>
121 </div>
122
123 <div style="position: relative">
124 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p >
125 <div class="grid spaceEvenly" data-expected-width="300" data-expected-height ="200">
126 <div class="a cell justifyCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
127 <div class="b cell alignCenter" data-offset-x="220" data-offset-y="80" d ata-expected-width="20" data-expected-height="40"></div>
128 <div class="c" data-offset-x="60" data-offset-y="120" data-expected-widt h="20" data-expected-height="40"></div>
129 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div>
130 </div>
131 </div>
132
133 <div style="position: relative">
134 <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p>
135 <div class="grid spaceEvenly" data-expected-width="300" data-expected-height ="200">
136 <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="40" da ta-expected-width="20" data-expected-height="40"></div>
137 <div class="b cell alignEnd" data-offset-x="220" data-offset-y="120" dat a-expected-width="20" data-expected-height="40"></div>
138 <div class="c" data-offset-x="60" data-offset-y="120" data-expected-widt h="20" data-expected-height="40"></div>
139 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div>
140 </div>
141 </div>
142
143 <div style="position: relative">
144 <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p>
145 <div class="grid stretchedGrid stretch" data-expected-width="300" data-expec ted-height="200">
146 <div class="a cell justifyCenter alignCenter" data-offset-x="90" data-of fset-y="30" data-expected-width="20" data-expected-height="40"></div>
147 <div class="b cell justifyCenter alignCenter" data-offset-x="240" data-o ffset-y="80" data-expected-width="20" data-expected-height="40"></div>
148 <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width ="100" data-expected-height="100"></div>
149 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div>
150 </div>
151 </div>
152
153 <div style="position: relative">
154 <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p>
155 <div class="grid stretchedGrid stretch" data-expected-width="300" data-expec ted-height="200">
156 <div class="a cell justifyEnd alignEnd" data-offset-x="180" data-offset- y="60" data-expected-width="20" data-expected-height="40"></div>
157 <div class="b cell justifyEnd alignEnd" data-offset-x="280" data-offset- y="160" data-expected-width="20" data-expected-height="40"></div>
158 <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width ="100" data-expected-height="100"></div>
159 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div>
160 </div>
161 </div>
162
163 <!-- RTL direction. -->
164 <div style="position: relative">
165 <p>direction: RTL | distribution: 'space-between' | self-alignment: center</ p>
166 <div class="grid spaceBetween directionRTL" data-expected-width="300" data-e xpected-height="200">
167 <div class="a cell justifyCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
168 <div class="b cell alignCenter" data-offset-x="0" data-offset-y="80" dat a-expected-width="20" data-expected-height="40"></div>
169 <div class="c" data-offset-x="280" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div>
170 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div>
171 </div>
172 </div>
173
174 <div style="position: relative">
175 <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p>
176 <div class="grid spaceBetween directionRTL" data-expected-width="300" data-e xpected-height="200">
177 <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="0" dat a-expected-width="20" data-expected-height="40"></div>
178 <div class="b cell alignEnd" data-offset-x="0" data-offset-y="160" data- expected-width="20" data-expected-height="40"></div>
179 <div class="c" data-offset-x="280" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div>
180 <div class="d" data-offset-x="140" data-offset-y="160" data-expected-wid th="20" data-expected-height="40"></div>
181 </div>
182 </div>
183
184 <div style="position: relative">
185 <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p >
186 <div class="grid spaceAround directionRTL" data-expected-width="300" data-ex pected-height="200">
187 <div class="a cell justifyCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div>
188 <div class="b cell alignCenter" data-offset-x="40" data-offset-y="80" da ta-expected-width="20" data-expected-height="40"></div>
189 <div class="c" data-offset-x="240" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div>
190 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div>
191 </div>
192 </div>
193
194 <div style="position: relative">
195 <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p>
196 <div class="grid spaceAround directionRTL" data-expected-width="300" data-ex pected-height="200">
197 <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="30" da ta-expected-width="20" data-expected-height="40"></div>
198 <div class="b cell alignEnd" data-offset-x="40" data-offset-y="130" data -expected-width="20" data-expected-height="40"></div>
199 <div class="c" data-offset-x="240" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div>
200 <div class="d" data-offset-x="140" data-offset-y="130" data-expected-wid th="20" data-expected-height="40"></div>
201 </div>
202 </div>
203
204 <div style="position: relative">
205 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p >
206 <div class="grid spaceEvenly directionRTL" data-expected-width="300" data-ex pected-height="200">
207 <div class="a cell justifyCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div>
208 <div class="b cell alignCenter" data-offset-x="60" data-offset-y="80" da ta-expected-width="20" data-expected-height="40"></div>
209 <div class="c" data-offset-x="220" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div>
210 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div>
211 </div>
212 </div>
213
214 <div style="position: relative">
215 <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p>
216 <div class="grid spaceEvenly directionRTL" data-expected-width="300" data-ex pected-height="200">
217 <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="40" da ta-expected-width="20" data-expected-height="40"></div>
218 <div class="b cell alignEnd" data-offset-x="60" data-offset-y="120" data -expected-width="20" data-expected-height="40"></div>
219 <div class="c" data-offset-x="220" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div>
220 <div class="d" data-offset-x="140" data-offset-y="120" data-expected-wid th="20" data-expected-height="40"></div>
221 </div>
222 </div>
223
224 <div style="position: relative">
225 <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p>
226 <div class="grid stretchedGrid stretch directionRTL" data-expected-width="30 0" data-expected-height="200">
227 <div class="a cell justifyCenter alignCenter" data-offset-x="190" data-o ffset-y="30" data-expected-width="20" data-expected-height="40"></div>
228 <div class="b cell justifyCenter alignCenter" data-offset-x="40" data-of fset-y="80" data-expected-width="20" data-expected-height="40"></div>
229 <div class="c" data-offset-x="200" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div>
230 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div>
231 </div>
232 </div>
233
234 <div style="position: relative">
235 <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p>
236 <div class="grid stretchedGrid stretch directionRTL" data-expected-width="30 0" data-expected-height="200">
237 <div class="a cell justifyEnd alignEnd" data-offset-x="100" data-offset- y="60" data-expected-width="20" data-expected-height="40"></div>
238 <div class="b cell justifyEnd alignEnd" data-offset-x="0" data-offset-y= "160" data-expected-width="20" data-expected-height="40"></div>
239 <div class="c" data-offset-x="200" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div>
240 <div class="d" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="100"></div>
241 </div>
242 </div>
243
244 </body>
245 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698