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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 613273002: [CSS Grid Layout] Stretch value for align and justify properties. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: resolveAlignment and resolveJustification now defined in RenderStyle. 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-stretch.html » ('j') | Source/core/rendering/RenderGrid.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <link href="resources/grid.css" rel="stylesheet"> 4 <link href="resources/grid.css" rel="stylesheet">
5 <script src="../../resources/check-layout.js"></script> 5 <script src="../../resources/check-layout.js"></script>
6 <style> 6 <style>
7 body { 7 body {
8 margin: 0; 8 margin: 0;
9 } 9 }
10 10
(...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after
75 } 75 }
76 76
77 </style> 77 </style>
78 </head> 78 </head>
79 <body onload="checkLayout('.grid')"> 79 <body onload="checkLayout('.grid')">
80 80
81 <p>This test checks that the align-self property is applied correctly.</p> 81 <p>This test checks that the align-self property is applied correctly.</p>
82 82
83 <div style="position: relative"> 83 <div style="position: relative">
84 <div class="grid" data-expected-width="200" data-expected-height="400"> 84 <div class="grid" data-expected-width="200" data-expected-height="400">
85 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data -offset-y="0" data-expected-width="100" data-expected-height="0"></div> 85 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data -offset-y="0" data-expected-width="100" data-expected-height="200"></div>
86 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100 " data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 86 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="100 " data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
87 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 87 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
88 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> 88 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
89 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="10 0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> 89 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="10 0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
90 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="100 " data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> 90 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="100 " data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
91 </div> 91 </div>
92 </div> 92 </div>
93 93
94 <div style="position: relative"> 94 <div style="position: relative">
95 <div class="grid" data-expected-width="200" data-expected-height="400"> 95 <div class="grid" data-expected-width="200" data-expected-height="400">
96 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 96 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
97 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x= "100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div > 97 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x= "100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div >
98 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x= "0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div > 98 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x= "0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div >
99 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x=" 100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></di v> 99 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x=" 100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></di v>
100 </div> 100 </div>
101 </div> 101 </div>
102 102
103 <!-- Default alignment and initial values. --> 103 <!-- Default alignment and initial values. -->
104 <div style="position: relative"> 104 <div style="position: relative">
105 <div class="grid alignItemsCenter" data-expected-width="200" data-expected-h eight="400"> 105 <div class="grid alignItemsCenter" data-expected-width="200" data-expected-h eight="400">
106 <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" da ta-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 106 <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" da ta-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
107 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y ="80" data-expected-width="20" data-expected-height="40"></div> 107 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y ="80" data-expected-width="20" data-expected-height="40"></div>
108 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x= "0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div > 108 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x= "0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div >
109 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x=" 100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></di v> 109 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x=" 100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></di v>
110 </div> 110 </div>
111 </div> 111 </div>
112 112
113 <div style="position: relative"> 113 <div style="position: relative">
114 <div class="grid" data-expected-width="200" data-expected-height="400"> 114 <div class="grid" data-expected-width="200" data-expected-height="400">
115 <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" da ta-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 115 <div class="alignSelfAuto firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="100" data-expected-height="200"></div>
Julien - ping for review 2014/10/31 17:17:12 Why do we remove the cell class here?
jfernandez 2014/10/31 22:55:59 Well, 'auto' is resolved to 'stretch' for grid ite
116 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div> 116 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
117 <div class="cell alignSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> 117 <div class="cell alignSelfStart secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
118 <div class="cell alignSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div> 118 <div class="cell alignSelfEnd secondRowSecondColumn" data-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></div>
119 </div> 119 </div>
120 </div> 120 </div>
121 121
122 <!-- RTL direction (it should not affect the block-flow direction). --> 122 <!-- RTL direction (it should not affect the block-flow direction). -->
123 <div style="position: relative"> 123 <div style="position: relative">
124 <div class="grid directionRTL" data-expected-width="200" data-expected-heig ht="400"> 124 <div class="grid directionRTL" data-expected-width="200" data-expected-heig ht="400">
125 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" dat a-offset-y="0" data-expected-width="100" data-expected-height="0"></div> 125 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" dat a-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
126 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="10 0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 126 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="10 0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
127 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 127 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
128 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0 " data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> 128 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="0 " data-offset-y="280" data-expected-width="20" data-expected-height="40"></div>
129 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="1 00" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div > 129 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="1 00" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div >
130 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="10 0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div> 130 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="10 0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div>
131 </div> 131 </div>
132 </div> 132 </div>
133 133
134 <div style="position: relative"> 134 <div style="position: relative">
135 <div class="grid directionRTL" data-expected-width="200" data-expected-heig ht="400"> 135 <div class="grid directionRTL" data-expected-width="200" data-expected-heig ht="400">
136 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0 " data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 136 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="0 " data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
137 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x ="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></di v> 137 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x ="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></di v>
138 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x ="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></di v> 138 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x ="0" data-offset-y="200" data-expected-width="20" data-expected-height="40"></di v>
139 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x= "100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></d iv> 139 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x= "100" data-offset-y="360" data-expected-width="20" data-expected-height="40"></d iv>
140 </div> 140 </div>
141 </div> 141 </div>
142 142
143 <!-- RTL direction (it should not affect the block-flow) with opposite direction s grid container vs grid item. --> 143 <!-- RTL direction (it should not affect the block-flow) with opposite direction s grid container vs grid item. -->
144 <div style="position: relative"> 144 <div style="position: relative">
145 <div class="grid" data-expected-width="200" data-expected-height="400"> 145 <div class="grid" data-expected-width="200" data-expected-height="400">
146 <div class="alignSelfStretch firstRowFirstColumn directionRTL" data-off set-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0">< /div> 146 <div class="alignSelfStretch firstRowFirstColumn directionRTL" data-off set-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200" ></div>
147 <div class="cell alignSelfStart firstRowSecondColumn directionRTL" data -offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height= "40"></div> 147 <div class="cell alignSelfStart firstRowSecondColumn directionRTL" data -offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height= "40"></div>
148 <div class="cell alignSelfEnd firstRowSecondColumn directionRTL" data-o ffset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height= "40"></div> 148 <div class="cell alignSelfEnd firstRowSecondColumn directionRTL" data-o ffset-x="100" data-offset-y="160" data-expected-width="20" data-expected-height= "40"></div>
149 <div class="cell alignSelfCenter secondRowFirstColumn directionRTL" dat a-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height ="40"></div> 149 <div class="cell alignSelfCenter secondRowFirstColumn directionRTL" dat a-offset-x="0" data-offset-y="280" data-expected-width="20" data-expected-height ="40"></div>
150 <div class="cell alignSelfRight secondRowSecondColumn directionRTL" dat a-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-heig ht="40"></div> 150 <div class="cell alignSelfRight secondRowSecondColumn directionRTL" dat a-offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-heig ht="40"></div>
151 <div class="cell alignSelfLeft secondRowSecondColumn directionRTL" data -offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-heigh t="40"></div> 151 <div class="cell alignSelfLeft secondRowSecondColumn directionRTL" data -offset-x="100" data-offset-y="200" data-expected-width="20" data-expected-heigh t="40"></div>
152 </div> 152 </div>
153 </div> 153 </div>
154 154
155 <div style="position: relative"> 155 <div style="position: relative">
156 <div class="grid" data-expected-width="200" data-expected-height="400"> 156 <div class="grid" data-expected-width="200" data-expected-height="400">
157 <div class="cell alignSelfFlexEnd firstRowFirstColumn directionRTL" dat a-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height ="40"></div> 157 <div class="cell alignSelfFlexEnd firstRowFirstColumn directionRTL" dat a-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height ="40"></div>
158 <div class="cell alignSelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-hei ght="40"></div> 158 <div class="cell alignSelfFlexStart firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-hei ght="40"></div>
159 <div class="cell alignSelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-hei ght="40"></div> 159 <div class="cell alignSelfSelfStart secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-hei ght="40"></div>
160 <div class="cell alignSelfSelfEnd secondRowSecondColumn directionRTL" d ata-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-he ight="40"></div> 160 <div class="cell alignSelfSelfEnd secondRowSecondColumn directionRTL" d ata-offset-x="100" data-offset-y="360" data-expected-width="20" data-expected-he ight="40"></div>
161 </div> 161 </div>
162 </div> 162 </div>
163 163
164 <!-- Vertical RL writing mode. --> 164 <!-- Vertical RL writing mode. -->
165 <div style="position: relative"> 165 <div style="position: relative">
166 <div class="grid verticalRL" data-expected-width="400" data-expected-height= "200"> 166 <div class="grid verticalRL" data-expected-width="400" data-expected-height= "200">
167 <!-- FIXME: Why is offset-x 400? --> 167 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="200" da ta-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
168 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="400" da ta-offset-y="0" data-expected-width="0" data-expected-height="100"></div>
169 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="380 " data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 168 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="380 " data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
170 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 169 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
171 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="90 " data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 170 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="90 " data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
172 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="18 0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 171 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="18 0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
173 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="180 " data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 172 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="180 " data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
174 </div> 173 </div>
175 </div> 174 </div>
176 175
177 <div style="position: relative"> 176 <div style="position: relative">
178 <div class="grid verticalRL" data-expected-width="400" data-expected-height= "200"> 177 <div class="grid verticalRL" data-expected-width="400" data-expected-height= "200">
179 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="20 0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 178 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="20 0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
180 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x= "380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></d iv> 179 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x= "380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></d iv>
181 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x= "180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div > 180 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x= "180" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div >
182 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x=" 0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 181 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x=" 0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
183 </div> 182 </div>
184 </div> 183 </div>
185 184
186 <!-- Vertical LR writing mode. --> 185 <!-- Vertical LR writing mode. -->
187 <div style="position: relative"> 186 <div style="position: relative">
188 <div class="grid verticalLR" data-expected-width="400" data-expected-height= "200"> 187 <div class="grid verticalLR" data-expected-width="400" data-expected-height= "200">
189 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data -offset-y="0" data-expected-width="0" data-expected-height="100"></div> 188 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="0" data -offset-y="0" data-expected-width="200" data-expected-height="100"></div>
190 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 189 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
191 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 190 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
192 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="29 0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 191 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="29 0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
193 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="20 0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 192 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="20 0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
194 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="200 " data-offset-y="100" data-expected-width="20" data-expected-height="40"></div> 193 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="200 " data-offset-y="100" data-expected-width="20" data-expected-height="40"></div>
195 </div> 194 </div>
196 </div> 195 </div>
197 196
198 <div style="position: relative"> 197 <div style="position: relative">
199 <div class="grid verticalLR" data-expected-width="400" data-expected-height= "200"> 198 <div class="grid verticalLR" data-expected-width="400" data-expected-height= "200">
200 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="18 0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 199 <div class="cell alignSelfFlexEnd firstRowFirstColumn" data-offset-x="18 0" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
201 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x= "0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div > 200 <div class="cell alignSelfFlexStart firstRowSecondColumn" data-offset-x= "0" data-offset-y="100" data-expected-width="20" data-expected-height="40"></div >
202 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x= "200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div > 201 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x= "200" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div >
203 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x=" 380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></di v> 202 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x=" 380" data-offset-y="100" data-expected-width="20" data-expected-height="40"></di v>
204 </div> 203 </div>
205 </div> 204 </div>
206 205
207 <!-- Vertical RL writing mode with opposite block-flow directions grid container vs grid item. --> 206 <!-- Vertical RL writing mode with opposite block-flow directions grid container vs grid item. -->
208 <div style="position: relative"> 207 <div style="position: relative">
209 <div class="grid verticalRL" data-expected-width="400" data-expected-height= "200"> 208 <div class="grid verticalRL" data-expected-width="400" data-expected-height= "200">
210 <!-- FIXME: Why is offset-x 400? --> 209 <div class="alignSelfStretch firstRowFirstColumn verticalLR" data-offset -x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100">
211 <div class="alignSelfStretch firstRowFirstColumn verticalLR" data-offset -x="400" data-offset-y="0" data-expected-width="0" data-expected-height="100">
212 </div> 210 </div>
213 <div class="cell alignSelfStart firstRowSecondColumn verticalLR" data-of fset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height=" 40"> 211 <div class="cell alignSelfStart firstRowSecondColumn verticalLR" data-of fset-x="380" data-offset-y="100" data-expected-width="20" data-expected-height=" 40">
214 <div class="item"></div> 212 <div class="item"></div>
215 </div> 213 </div>
216 <div class="cell alignSelfEnd firstRowSecondColumn verticalLR" data-offs et-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40 "> 214 <div class="cell alignSelfEnd firstRowSecondColumn verticalLR" data-offs et-x="200" data-offset-y="100" data-expected-width="20" data-expected-height="40 ">
217 <div class="item"></div> 215 <div class="item"></div>
218 </div> 216 </div>
219 <div class="cell alignSelfCenter secondRowFirstColumn verticalLR" data-o ffset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40 "> 217 <div class="cell alignSelfCenter secondRowFirstColumn verticalLR" data-o ffset-x="90" data-offset-y="0" data-expected-width="20" data-expected-height="40 ">
220 <div class="item"></div> 218 <div class="item"></div>
221 </div> 219 </div>
(...skipping 19 matching lines...) Expand all
241 </div> 239 </div>
242 <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalLR" data -offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-heigh t="40"> 240 <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalLR" data -offset-x="180" data-offset-y="100" data-expected-width="20" data-expected-heigh t="40">
243 <div class="item"></div> 241 <div class="item"></div>
244 </div> 242 </div>
245 </div> 243 </div>
246 </div> 244 </div>
247 245
248 <!-- Vertical LR writing mode with opposite block-flow directions grid container vs grid item. --> 246 <!-- Vertical LR writing mode with opposite block-flow directions grid container vs grid item. -->
249 <div style="position: relative"> 247 <div style="position: relative">
250 <div class="grid verticalLR" data-expected-width="400" data-expected-height= "200"> 248 <div class="grid verticalLR" data-expected-width="400" data-expected-height= "200">
251 <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset -x="0" data-offset-y="0" data-expected-width="0" data-expected-height="100"> 249 <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset -x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
252 </div> 250 </div>
253 <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-of fset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40 "> 251 <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-of fset-x="0" data-offset-y="100" data-expected-width="20" data-expected-height="40 ">
254 <div class="item"></div> 252 <div class="item"></div>
255 </div> 253 </div>
256 <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offs et-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40 "> 254 <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offs et-x="180" data-offset-y="100" data-expected-width="20" data-expected-height="40 ">
257 <div class="item"></div> 255 <div class="item"></div>
258 </div> 256 </div>
259 <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-o ffset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="4 0"> 257 <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-o ffset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="4 0">
260 <div class="item"></div> 258 <div class="item"></div>
261 </div> 259 </div>
(...skipping 18 matching lines...) Expand all
280 <div class="item"></div> 278 <div class="item"></div>
281 </div> 279 </div>
282 <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalRL" data -offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-heigh t="40"> 280 <div class="cell alignSelfSelfEnd secondRowSecondColumn verticalRL" data -offset-x="200" data-offset-y="100" data-expected-width="20" data-expected-heigh t="40">
283 <div class="item"></div> 281 <div class="item"></div>
284 </div> 282 </div>
285 </div> 283 </div>
286 </div> 284 </div>
287 285
288 </body> 286 </body>
289 </html> 287 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-align-justify-stretch.html » ('j') | Source/core/rendering/RenderGrid.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698