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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html

Issue 2417853002: [css-grid] Implementing the grid's first line baseline. (Closed)
Patch Set: Patch for landing. Created 4 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
« third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins.html » ('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 <style> 3 <style>
4 body { 4 body {
5 margin: 0; 5 margin: 0;
6 } 6 }
7 .inline-flexbox { 7 .inline-flexbox {
8 display: inline-flex; 8 display: inline-flex;
9 background-color: lightgrey; 9 background-color: lightgrey;
10 margin-top: 5px; 10 margin-top: 5px;
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after
68 after text 68 after text
69 </div> 69 </div>
70 70
71 <!-- If the first flex item has an orthogonal baseline, use the synthesized 71 <!-- If the first flex item has an orthogonal baseline, use the synthesized
72 baseline (bottom of the content box of the first item). --> 72 baseline (bottom of the content box of the first item). -->
73 <div> 73 <div>
74 should align with the middle 74 should align with the middle
75 <div class="inline-flexbox" style="width: 40px; height: 40px"> 75 <div class="inline-flexbox" style="width: 40px; height: 40px">
76 <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bot tom: 1px solid black"></div> 76 <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bot tom: 1px solid black"></div>
77 </div> 77 </div>
78 of the grey flexbox 78 of the grey box
79 </div> 79 </div>
80 80
81 <!-- If there are no flexitems, align to the bottom of the box. --> 81 <!-- If there are no flexitems, align to the bottom of the box. -->
82 <div> 82 <div>
83 should align with the bottom 83 should align with the bottom
84 <div class="inline-flexbox" style="width: 30px; height: 30px"> 84 <div class="inline-flexbox" style="width: 30px; height: 30px">
85 </div> 85 </div>
86 of the grey flexbox 86 of the grey box
87 </div> 87 </div>
88 88
89
90 <!-- cross-axis (column) test cases. --> 89 <!-- cross-axis (column) test cases. -->
91 <div> 90 <div>
92 before text 91 before text
93 <div class="inline-flexbox column"> 92 <div class="inline-flexbox column">
94 <div>baseline</div> 93 <div>baseline</div>
95 <div>below</div> 94 <div>below</div>
96 </div> 95 </div>
97 after text 96 after text
98 </div> 97 </div>
99 98
99 <!-- TODO: Grid spec does not allow block-axis baseline alignment, which is what apparently flexbox does.
Manuel Rego 2016/10/25 19:42:08 Ditto.
jfernandez 2016/10/26 14:22:31 Acknowledged.
100 See https://github.com/w3c/csswg-drafts/issues/197 for details. -->
101 <!--
100 <div> 102 <div>
101 before text 103 before text
102 <div class="inline-flexbox column-reverse"> 104 <div class="inline-flexbox column-reverse">
103 <div>baseline</div> 105 <div>baseline</div>
104 <div>above</div> 106 <div>above</div>
105 </div> 107 </div>
106 after text 108 after text
107 </div> 109 </div>
110 -->
108 111
109 <!-- If the first flex item has an orthogonal baseline, use the synthesized 112 <!-- If the first flex item has an orthogonal baseline, use the synthesized
110 baseline (bottom of the content box of the first item). --> 113 baseline (bottom of the content box of the first item). -->
111 <div> 114 <div>
112 should align with the middle 115 should align with the middle
113 <div class="inline-flexbox column" style="width: 40px; height: 40px;"> 116 <div class="inline-flexbox column" style="width: 40px; height: 40px;">
114 <div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bot tom: 1px solid black"></div> 117 <div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bot tom: 1px solid black"></div>
115 <div style="writing-mode: vertical-rl; width: 40px; height: 20px"></div> 118 <div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div>
116 </div> 119 </div>
117 of the grey flexbox 120 of the grey box
118 </div> 121 </div>
119 122
120 <!-- If there are no flexitems, align to the bottom of the box. --> 123 <!-- If there are no flexitems, align to the bottom of the box. -->
121 <div> 124 <div>
122 should align with the bottom 125 should align with the bottom
123 <div class="inline-flexbox column" style="width: 30px; height: 30px"> 126 <div class="inline-flexbox column" style="width: 30px; height: 30px">
124 </div> 127 </div>
125 of the grey flexbox 128 of the grey box
126 </div> 129 </div>
127 130
128 <!-- More tests on the right side of the page. --> 131 <!-- More tests on the right side of the page. -->
129 <div style="position: absolute; top: 0; left: 400px; width: 360px"> 132 <div style="position: absolute; top: 0; left: 400px; width: 360px">
130 133
131 <!-- Ignore absolutely positioned flex items. --> 134 <!-- Ignore absolutely positioned flex items. -->
132 <div> 135 <div>
133 before text 136 before text
134 <div class="inline-flexbox"> 137 <div class="inline-flexbox">
135 <div style="position: absolute">absolute</div> 138 <div style="position: absolute">absolute</div>
(...skipping 30 matching lines...) Expand all
166 <div> 169 <div>
167 before text 170 before text
168 <div style="display: inline-block"> 171 <div style="display: inline-block">
169 <div class="flexbox" style="height: 30px;"> 172 <div class="flexbox" style="height: 30px;">
170 baseline 173 baseline
171 </div> 174 </div>
172 </div> 175 </div>
173 after text 176 after text
174 </div> 177 </div>
175 178
179 <!-- TODO: Grid spec does not allow block-axis baseline alignment, which is what apparently flexbox does.
Manuel Rego 2016/10/25 19:42:08 Ditto.
jfernandez 2016/10/26 14:22:31 Acknowledged.
180 See https://github.com/w3c/csswg-drafts/issues/197 for details. -->
181 <!--
176 <table style="background-color: lightgrey; margin-top: 5px"> 182 <table style="background-color: lightgrey; margin-top: 5px">
177 <tr style="height: 50px"> 183 <tr style="height: 50px">
178 <td style="vertical-align: bottom">bottom</td> 184 <td style="vertical-align: bottom">bottom</td>
179 <td style="vertical-align: baseline">baseline</td> 185 <td style="vertical-align: baseline">baseline</td>
180 <td style="vertical-align: top">top</td> 186 <td style="vertical-align: top">top</td>
181 <td style="vertical-align: baseline"><div class="flexbox column"> 187 <td style="vertical-align: baseline"><div class="flexbox column">
182 <div>baseline</div> 188 <div>baseline</div>
183 <div>below</div> 189 <div>below</div>
184 </div></td> 190 </div></td>
185 <td style="vertical-align: baseline"><div class="flexbox column-reverse"> 191 <td style="vertical-align: baseline"><div class="flexbox column-reverse">
186 <div>baseline</div> 192 <div>baseline</div>
187 <div>above</div> 193 <div>above</div>
188 </div></td> 194 </div></td>
189 </tr> 195 </tr>
190 </table> 196 </table>
197 -->
191 198
192 <table style="background-color: lightgrey; margin-top: 5px"> 199 <table style="background-color: lightgrey; margin-top: 5px">
193 <tr style="height: 50px"> 200 <tr style="height: 50px">
194 <td style="vertical-align: bottom">bottom</td> 201 <td style="vertical-align: bottom">bottom</td>
195 <td style="vertical-align: baseline">baseline</td> 202 <td style="vertical-align: baseline">baseline</td>
196 <td style="vertical-align: top">top</td> 203 <td style="vertical-align: top">top</td>
197 <td style="vertical-align: baseline"><div class="flexbox"> 204 <td style="vertical-align: baseline"><div class="flexbox">
198 <h2>h2 baseline</h2> 205 <h2>h2 baseline</h2>
199 <div>above</div> 206 <div>above</div>
200 </div></td> 207 </div></td>
(...skipping 15 matching lines...) Expand all
216 223
217 </div> 224 </div>
218 225
219 <script> 226 <script>
220 document.getElementById("flexitem-with-scrollbar").scrollTop = 999; 227 document.getElementById("flexitem-with-scrollbar").scrollTop = 999;
221 document.getElementById("flexbox-with-scrollbar").style.width = "auto"; 228 document.getElementById("flexbox-with-scrollbar").style.width = "auto";
222 </script> 229 </script>
223 230
224 </body> 231 </body>
225 </html> 232 </html>
OLDNEW
« third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698