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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-align-justify-overflow.html

Issue 614263005: [CSS Grid Layout] overflow-position keyword for align and justify properties. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Applied suggested changes. Created 6 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 | LayoutTests/fast/css-grid-layout/grid-align-justify-overflow-expected.txt » ('j') | Source/core/rendering/RenderGrid.cpp » ('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
11 .grid {
12 grid-template-columns: 150px 150px;
13 grid-template-rows: 120px 120px 120px;
14 width: -webkit-fit-content;
15 margin-bottom: 20px;
16 }
17
18 .cell1 {
19 width: 180px;
20 height: 40px;
21 }
22
23 .cell2 {
24 width: 50px;
25 height: 150px;
26 }
27
28 .cell {
Julien - ping for review 2014/10/23 00:57:24 cell1 -> cellOverflowWidth cell2 -> cellOverflowHe
jfernandez 2014/10/23 18:09:02 Done.
29 width: 50px;
30 height: 40px;
31 }
32
33 .alignItemsCenter {
34 align-items: center;
35 }
36
37 .alignItemsCenterSafe {
38 align-items: center safe;
39 }
40
41 .alignItemsCenterTrue {
42 align-items: center true;
43 }
44
45 .alignItemsEnd {
46 align-items: end;
47 }
48
49 .alignItemsEndSafe {
50 align-items: end safe;
51 }
52
53 .alignItemsEndTrue {
54 align-items: end true;
55 }
56
57 .alignSelfCenter {
58 align-self: center;
59 }
60
61 .alignSelfCenterSafe {
62 align-self: center safe;
63 }
64
65 .alignSelfCenterTrue {
66 align-self: center true;
67 }
68
69 .alignSelfEnd {
70 align-self: end;
71 }
72
73 .alignSelfEndSafe {
74 align-self: end safe;
75 }
76
77 .alignSelfEndTrue {
78 align-self: end true;
79 }
80
81 .justifyItemsCenter {
82 justify-items: center;
83 }
84
85 .justifyItemsCenterSafe {
86 justify-items: center safe;
87 }
88
89 .justifyItemsCenterTrue {
90 justify-items: center true;
91 }
92
93 .justifyItemsEnd {
94 justify-items: end;
95 }
96
97 .justifyItemsEndSafe {
98 justify-items: end safe;
99 }
100
101 .justifyItemsEndTrue {
102 justify-items: end true;
103 }
104
105 .justifySelfCenter {
106 justify-self: center;
107 }
108
109 .justifySelfCenterSafe {
110 justify-self: center safe;
111 }
112
113 .justifySelfCenterTrue {
114 justify-self: center true;
115 }
116
117 .justifySelfEnd {
118 justify-self: end;
119 }
120
121 .thirdRowFirstColumn {
122 background-color: green;
123 grid-column: 1;
124 grid-row: 3;
125 }
126
127 .thirdRowSecondColumn {
128 background-color: red;
129 grid-column: 2;
130 grid-row: 3;
131 }
132 </style>
133 </head>
134 <body onload="checkLayout('.grid')">
135
136 <p>This test checks that the 'overflow' keyword is applied correctly for 'align' and 'justify' properties.</p>
137
138 <div style="position: relative">
139 <div class="grid alignItemsCenter justifyItemsCenter" data-expected-width="3 00" data-expected-height="360">
140 <div class="cell1 firstRowFirstColumn" data-offset-x="-15" data-offset-y ="40" data-expected-width="180" data-expected-height="40"></div>
141 <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y ="160" data-expected-width="50" data-expected-height="40"></div>
142 <div class="cell thirdRowFirstColumn" data-offset-x="50" data-offset-y= "280" data-expected-width="50" data-expected-height="40"></div>
143 <div class="cell firstRowSecondColumn" data-offset-x="200" data-offset- y="40" data-expected-width="50" data-expected-height="40"></div>
144 <div class="cell1 secondRowSecondColumn" data-offset-x="135" data-offset -y="160" data-expected-width="180" data-expected-height="40"></div>
145 <div class="cell thirdRowSecondColumn" data-offset-x="200" data-offset- y="280" data-expected-width="50" data-expected-height="40"></div>
146 </div>
147 </div>
148
149 <div style="position: relative">
150 <div class="grid alignItemsCenterTrue justifyItemsCenterTrue" data-expected- width="300" data-expected-height="360">
151 <div class="cell2 firstRowFirstColumn" data-offset-x="50" data-offset-y= "-15" data-expected-width="50" data-expected-height="150"></div>
152 <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y ="160" data-expected-width="50" data-expected-height="40"></div>
153 <div class="cell thirdRowFirstColumn" data-offset-x="50" data-offset-y= "280" data-expected-width="50" data-expected-height="40"></div>
154 <div class="cell firstRowSecondColumn" data-offset-x="200" data-offset- y="40" data-expected-width="50" data-expected-height="40"></div>
155 <div class="cell2 secondRowSecondColumn" data-offset-x="200" data-offset -y="105" data-expected-width="50" data-expected-height="150"></div>
156 <div class="cell thirdRowSecondColumn" data-offset-x="200" data-offset- y="280" data-expected-width="50" data-expected-height="40"></div>
157 </div>
158 </div>
159
160 <div style="position: relative">
161 <div class="grid alignItemsCenterSafe justifyItemsCenterSafe" data-expected- width="300" data-expected-height="360">
162 <div class="cell1 firstRowFirstColumn" data-offset-x="0" data-offset-y=" 40" data-expected-width="180" data-expected-height="40"></div>
163 <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y ="160" data-expected-width="50" data-expected-height="40"></div>
164 <div class="cell thirdRowFirstColumn" data-offset-x="50" data-offset-y= "280" data-expected-width="50" data-expected-height="40"></div>
165 <div class="cell firstRowSecondColumn" data-offset-x="200" data-offset- y="40" data-expected-width="50" data-expected-height="40"></div>
166 <div class="cell1 secondRowSecondColumn" data-offset-x="150" data-offset -y="160" data-expected-width="180" data-expected-height="40"></div>
167 <div class="cell thirdRowSecondColumn" data-offset-x="200" data-offset- y="280" data-expected-width="50" data-expected-height="40"></div>
168 </div>
169 </div>
170
171 <div style="position: relative">
172 <div class="grid alignItemsCenterSafe justifyItemsCenterSafe" data-expected- width="300" data-expected-height="360">
173 <div class="cell2 firstRowFirstColumn" data-offset-x="50" data-offset-y= "0" data-expected-width="50" data-expected-height="150"></div>
174 <div class="cell secondRowFirstColumn" data-offset-x="50" data-offset-y ="160" data-expected-width="50" data-expected-height="40"></div>
175 <div class="cell thirdRowFirstColumn" data-offset-x="50" data-offset-y= "280" data-expected-width="50" data-expected-height="40"></div>
176 <div class="cell firstRowSecondColumn" data-offset-x="200" data-offset- y="40" data-expected-width="50" data-expected-height="40"></div>
177 <div class="cell2 secondRowSecondColumn alignSelfCenterSafe justifySelfC enterSafe" data-offset-x="200" data-offset-y="120" data-expected-width="50" data -expected-height="150"></div>
178 <div class="cell thirdRowSecondColumn" data-offset-x="200" data-offset- y="280" data-expected-width="50" data-expected-height="40"></div>
179 </div>
180 </div>
181
182 <div style="position: relative">
183 <div class="grid alignItemsEnd justifyItemsEnd" data-expected-width="300" da ta-expected-height="360">
184 <div class="cell1 firstRowFirstColumn" data-offset-x="-30" data-offset-y ="80" data-expected-width="180" data-expected-height="40"></div>
185 <div class="cell secondRowFirstColumn justifySelfCenter" data-offset-x= "50" data-offset-y="200" data-expected-width="50" data-expected-height="40"></di v>
186 <div class="cell thirdRowFirstColumn" data-offset-x="100" data-offset-y ="320" data-expected-width="50" data-expected-height="40"></div>
187 <div class="cell firstRowSecondColumn" data-offset-x="250" data-offset- y="80" data-expected-width="50" data-expected-height="40"></div>
188 <div class="cell1 secondRowSecondColumn" data-offset-x="120" data-offset -y="200" data-expected-width="180" data-expected-height="40"></div>
189 <div class="cell thirdRowSecondColumn" data-offset-x="250" data-offset- y="320" data-expected-width="50" data-expected-height="40"></div>
190 </div>
191 </div>
192
193 <div style="position: relative">
194 <div class="grid alignItemsEndTrue justifyItemsEndTrue" data-expected-width= "300" data-expected-height="360">
195 <div class="cell2 firstRowFirstColumn" data-offset-x="100" data-offset-y ="-30" data-expected-width="50" data-expected-height="150"></div>
196 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset- y="200" data-expected-width="50" data-expected-height="40"></div>
197 <div class="cell thirdRowFirstColumn" data-offset-x="100" data-offset-y ="320" data-expected-width="50" data-expected-height="40"></div>
198 <div class="cell firstRowSecondColumn alignSelfCenter" data-offset-x="2 50" data-offset-y="40" data-expected-width="50" data-expected-height="40"></div>
199 <div class="cell2 secondRowSecondColumn" data-offset-x="250" data-offset -y="90" data-expected-width="50" data-expected-height="150"></div>
200 <div class="cell thirdRowSecondColumn" data-offset-x="250" data-offset- y="320" data-expected-width="50" data-expected-height="40"></div>
201 </div>
202 </div>
203
204 <div style="position: relative">
205 <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width= "300" data-expected-height="360">
206 <div class="cell1 firstRowFirstColumn" data-offset-x="0" data-offset-y=" 80" data-expected-width="180" data-expected-height="40"></div>
207 <div class="cell secondRowFirstColumn justifySelfCenterTrue" data-offse t-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="40"> </div>
208 <div class="cell thirdRowFirstColumn" data-offset-x="100" data-offset-y ="320" data-expected-width="50" data-expected-height="40"></div>
209 <div class="cell firstRowSecondColumn" data-offset-x="250" data-offset- y="80" data-expected-width="50" data-expected-height="40"></div>
210 <div class="cell1 secondRowSecondColumn" data-offset-x="150" data-offset -y="200" data-expected-width="180" data-expected-height="40"></div>
211 <div class="cell thirdRowSecondColumn" data-offset-x="250" data-offset- y="320" data-expected-width="50" data-expected-height="40"></div>
212 </div>
213 </div>
214
215 <div style="position: relative">
216 <div class="grid alignItemsEndSafe justifyItemsEndSafe" data-expected-width= "300" data-expected-height="360">
217 <div class="cell2 firstRowFirstColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="50" data-expected-height="150"></div>
218 <div class="cell secondRowFirstColumn" data-offset-x="100" data-offset- y="200" data-expected-width="50" data-expected-height="40"></div>
219 <div class="cell thirdRowFirstColumn" data-offset-x="100" data-offset-y ="320" data-expected-width="50" data-expected-height="40"></div>
220 <div class="cell firstRowSecondColumn alignSelfCenterTrue" data-offset- x="250" data-offset-y="40" data-expected-width="50" data-expected-height="40"></ div>
221 <div class="cell2 secondRowSecondColumn" data-offset-x="250" data-offset -y="120" data-expected-width="50" data-expected-height="150"></div>
222 <div class="cell thirdRowSecondColumn" data-offset-x="250" data-offset- y="320" data-expected-width="50" data-expected-height="40"></div>
223 </div>
224 </div>
225
226 </body>
227 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-align-justify-overflow-expected.txt » ('j') | Source/core/rendering/RenderGrid.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698