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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline.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
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-expected.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-grid {
8 display: inline-flex; 8 display: inline-grid;
9 background-color: lightgrey; 9 background-color: lightgrey;
10 margin-top: 5px; 10 margin-top: 5px;
11 } 11 }
12 .flexbox { 12 .grid {
13 display: flex; 13 display: grid;
14 background-color: grey; 14 background-color: grey;
15 margin-top: 10px; 15 margin-top: 10px;
16 } 16 }
17 .column { 17 .column {
18 flex-flow: column; 18 grid-auto-flow: column;
19 } 19 }
20 .column-reverse { 20 .row {
21 flex-flow: column-reverse; 21 grid-auto-flow: row;
22 }
23 .firstRowFirstColumn {
Manuel Rego 2016/10/25 19:42:08 Nit: You could reuse these classes from grid.css.
jfernandez 2016/10/26 14:22:31 I wasn't interested on the background-color. Since
24 grid-column: 1;
25 grid-row: 1;
26 }
27 .secondRowFirstColumn {
28 grid-column: 1;
29 grid-row: 2;
22 } 30 }
23 </style> 31 </style>
24 32
25 <body style="position: relative"> 33 <body style="position: relative">
26 34
27 <!-- If any of the flex items on the flex container's first line participate 35 <!-- If any of the grid items whose areas intersect the grid container's first
28 in baseline alignment, the flex container's main-axis baseline is the baseline 36 row/column participate in baseline alignment, the grid container's baseline is
29 of those flex items. --> 37 the baseline of those grid items. -->
30 <div> 38 <div>
31 before text 39 before text
32 <div class="inline-flexbox" style="height: 50px;"> 40 <div class="inline-grid column" style="grid-auto-rows: 50px;">
33 <div style="align-self: flex-end">below</div> 41 <div style="align-self: end">below</div>
34 <div style="align-self: baseline; margin-top: 15px">baseline</div> 42 <div style="align-self: baseline; margin-top: 15px">baseline</div>
35 <div style="align-self: flex-start">above</div> 43 <div style="align-self: start">above</div>
36 </div> 44 </div>
37 after text 45 after text
38 </div> 46 </div>
39 47
40 <!-- This flexbox has a baseline flexitem, but it's orthogonal so it doesn't 48 <!-- This grid has a baseline item, but it's orthogonal so it doesn't
41 participate in baseline alignment. Instead, the baseline is the first flex 49 participate in baseline alignment. Instead, the baseline is the first grid
42 item's baseline. --> 50 item's baseline. -->
43 <div> 51 <div>
44 before text 52 before text
45 <div class="inline-flexbox" style="height: 40px"> 53 <div class="inline-grid column" style="grid-auto-rows: 40px">
46 <div style="align-self: flex-end">baseline</div> 54 <div style="align-self: end">baseline</div>
47 <div style="align-self: baseline; writing-mode: vertical-rl"></div> 55 <div style="align-self: baseline; writing-mode: vertical-rl"></div>
48 <div style="align-self: flex-start">above</div> 56 <div style="align-self: start">above</div>
49 </div> 57 </div>
50 after text 58 after text
51 </div> 59 </div>
52 60
53 <div> 61 <div>
54 before text 62 before text
55 <div class="inline-flexbox"> 63 <div class="inline-grid column">
56 <h2>h2 baseline</h2> 64 <h2>h2 baseline</h2>
57 <div>above</div> 65 <div>above</div>
58 </div> 66 </div>
59 after text 67 after text
60 </div> 68 </div>
61 69
62 <div> 70 <div>
63 before text 71 before text
64 <div class="inline-flexbox"> 72 <div class="inline-grid column">
65 <div>baseline</div> 73 <div>baseline</div>
66 <h2>h2 below</h2> 74 <h2>h2 below</h2>
67 </div> 75 </div>
68 after text 76 after text
69 </div> 77 </div>
70 78
71 <!-- If the first flex item has an orthogonal baseline, use the synthesized 79 <!-- If the first grid item has an orthogonal baseline, use the synthesized
72 baseline (bottom of the content box of the first item). --> 80 baseline (bottom of the content box of the first item). -->
73 <div> 81 <div>
74 should align with the middle 82 should align with the middle
75 <div class="inline-flexbox" style="width: 40px; height: 40px"> 83 <div class="inline-grid" style="width: 40px; height: 40px">
76 <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bot tom: 1px solid black"></div> 84 <div style="writing-mode: vertical-rl; height: 20px; width: 40px; border-bot tom: 1px solid black"></div>
77 </div> 85 </div>
78 of the grey flexbox 86 of the grey box
79 </div> 87 </div>
80 88
81 <!-- If there are no flexitems, align to the bottom of the box. --> 89 <!-- If there are no griditems, align to the bottom of the box. -->
82 <div> 90 <div>
83 should align with the bottom 91 should align with the bottom
84 <div class="inline-flexbox" style="width: 30px; height: 30px"> 92 <div class="inline-grid" style="width: 30px; height: 30px">
85 </div> 93 </div>
86 of the grey flexbox 94 of the grey box
87 </div> 95 </div>
88 96
89 97 <!-- column-axis test cases. -->
90 <!-- cross-axis (column) test cases. -->
91 <div> 98 <div>
92 before text 99 before text
93 <div class="inline-flexbox column"> 100 <div class="inline-grid">
94 <div>baseline</div> 101 <div class="firstRowFirstColumn">baseline</div>
95 <div>below</div> 102 <div class="secondRowFirstColumn">below</div>
96 </div> 103 </div>
97 after text 104 after text
98 </div> 105 </div>
99 106
107 <!-- TODO: Grid spec does not allow block-axis baseline alignment, which is what apparently flexbox does.
Manuel Rego 2016/10/25 19:42:08 I think this test is unrelated to block-axis basel
jfernandez 2016/10/26 14:22:31 Done.
108 See https://github.com/w3c/csswg-drafts/issues/197 for details. -->
109 <!--
100 <div> 110 <div>
101 before text 111 before text
102 <div class="inline-flexbox column-reverse"> 112 <div class="inline-grid">
103 <div>baseline</div> 113 <div class="secondRowFirstColumn">baseline</div>
104 <div>above</div> 114 <div class="firstRowFirstColumn">above</div>
105 </div> 115 </div>
106 after text 116 after text
107 </div> 117 </div>
118 -->
108 119
109 <!-- If the first flex item has an orthogonal baseline, use the synthesized 120 <!-- If the first grid item has an orthogonal baseline, use the synthesized
110 baseline (bottom of the content box of the first item). --> 121 baseline (bottom of the content box of the first item). -->
111 <div> 122 <div>
112 should align with the middle 123 should align with the middle
113 <div class="inline-flexbox column" style="width: 40px; height: 40px;"> 124 <div class="inline-grid column" style="width: 40px; height: 40px;">
114 <div style="writing-mode: vertical-rl; width: 40px; height: 20px; border-bot tom: 1px solid black"></div> 125 <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> 126 <div style="writing-mode: vertical-rl; width: 40px; height: 19px"></div>
116 </div> 127 </div>
117 of the grey flexbox 128 of the grey box
118 </div> 129 </div>
119 130
120 <!-- If there are no flexitems, align to the bottom of the box. --> 131 <!-- If there are no griditems, align to the bottom of the box. -->
121 <div> 132 <div>
122 should align with the bottom 133 should align with the bottom
123 <div class="inline-flexbox column" style="width: 30px; height: 30px"> 134 <div class="inline-grid" style="width: 30px; height: 30px">
124 </div> 135 </div>
125 of the grey flexbox 136 of the grey box
126 </div> 137 </div>
127 138
128 <!-- More tests on the right side of the page. --> 139 <!-- More tests on the right side of the page. -->
129 <div style="position: absolute; top: 0; left: 400px; width: 360px"> 140 <div style="position: absolute; top: 0; left: 400px; width: 360px">
130 141
131 <!-- Ignore absolutely positioned flex items. --> 142 <!-- Ignore absolutely positioned flex items. -->
132 <div> 143 <div>
133 before text 144 before text
134 <div class="inline-flexbox"> 145 <div class="inline-grid column">
135 <div style="position: absolute">absolute</div> 146 <div style="position: absolute">absolute</div>
136 <div style="margin-top: 30px">baseline</div> 147 <div style="margin-top: 30px">baseline</div>
137 </div> 148 </div>
138 after text 149 after text
139 </div> 150 </div>
140 151
141 <!-- We don't participate in baseline alignment if there's an auto margin. --> 152 <!-- We don't participate in baseline alignment if there's an auto margin. -->
142 <div> 153 <div>
143 before text 154 before text
144 <div class="inline-flexbox" style="height: 40px;"> 155 <div class="inline-grid column" style="grid-auto-rows: 40px;">
145 <div>baseline</div> 156 <div>baseline</div>
146 <div style="align-self: baseline; margin-top: auto">below</div> 157 <div style="align-self: baseline; margin-top: auto">below</div>
147 </div> 158 </div>
148 after text 159 after text
149 </div> 160 </div>
150 161
151 <div> 162 <div>
152 before text 163 before text
153 <div style="display: inline-block"> 164 <div style="display: inline-block">
154 <div class="inline-flexbox" style="height: 40px;"> 165 <div class="inline-grid column" style="height: 40px;">
155 <div>above</div> 166 <div>above</div>
156 <div style="align-self: baseline; margin-top: 10px">baseline</div> 167 <div style="align-self: baseline; margin-top: 10px">baseline</div>
157 <div>above</div> 168 <div>above</div>
158 </div> 169 </div>
159 after 170 after
160 </div> 171 </div>
161 text 172 text
162 </div> 173 </div>
163 174
164 <!-- The spec is a little unclear what should happen here. For now, align to 175 <!-- The spec is a little unclear what should happen here. For now,
165 the last line box. --> 176 align to the last line box. -->
166 <div> 177 <div>
167 before text 178 before text
168 <div style="display: inline-block"> 179 <div style="display: inline-block">
169 <div class="flexbox" style="height: 30px;"> 180 <div class="grid column" style="height: 30px;">
170 baseline 181 baseline
182 </div>
183 </div>
184 after text
171 </div> 185 </div>
172 </div> 186
173 after text 187 <!-- 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 Done.
174 </div> 188 See https://github.com/w3c/csswg-drafts/issues/197 for details. -->
189 <!--
190 <table style="background-color: lightgrey; margin-top: 5px">
191 <tr style="height: 50px">
192 <td style="vertical-align: bottom">bottom</td>
193 <td style="vertical-align: baseline">baseline</td>
194 <td style="vertical-align: top">top</td>
195 <td style="vertical-align: baseline"><div class="grid">
196 <div class="firstRowFirstColumn">baseline</div>
197 <div class="secondRowFirstColumn">below</div>
198 </div></td>
199 <td style="vertical-align: baseline"><div class="grid">
200 <div class="secondRowFirstColumn">baseline</div>
201 <div class="firstRowFirstColumn">above</div>
202 </div></td>
203 </tr>
204 </table>
205 -->
175 206
176 <table style="background-color: lightgrey; margin-top: 5px"> 207 <table style="background-color: lightgrey; margin-top: 5px">
177 <tr style="height: 50px"> 208 <tr style="height: 50px">
178 <td style="vertical-align: bottom">bottom</td> 209 <td style="vertical-align: bottom">bottom</td>
179 <td style="vertical-align: baseline">baseline</td> 210 <td style="vertical-align: baseline">baseline</td>
180 <td style="vertical-align: top">top</td> 211 <td style="vertical-align: top">top</td>
181 <td style="vertical-align: baseline"><div class="flexbox column"> 212 <td style="vertical-align: baseline"><div class="grid column">
182 <div>baseline</div>
183 <div>below</div>
184 </div></td>
185 <td style="vertical-align: baseline"><div class="flexbox column-reverse">
186 <div>baseline</div>
187 <div>above</div>
188 </div></td>
189 </tr>
190 </table>
191
192 <table style="background-color: lightgrey; margin-top: 5px">
193 <tr style="height: 50px">
194 <td style="vertical-align: bottom">bottom</td>
195 <td style="vertical-align: baseline">baseline</td>
196 <td style="vertical-align: top">top</td>
197 <td style="vertical-align: baseline"><div class="flexbox">
198 <h2>h2 baseline</h2> 213 <h2>h2 baseline</h2>
199 <div>above</div> 214 <div>above</div>
200 </div></td> 215 </div></td>
201 </table> 216 </table>
202 217
203 <!-- If a box contributing a baseline has a scrollbar, the box must be treated 218 <!-- If a box contributing a baseline has a scrollbar, the box must be treated
204 as being in its initial scroll position when computing the baseline. --> 219 as being in its initial scroll position when computing the baseline. -->
205 <div> 220 <div>
206 before text 221 before text
207 <div id="flexbox-with-scrollbar" class="inline-flexbox" style="height: 65px; wid th: 150px"> 222 <div id="grid-with-scrollbar" class="inline-grid column" style="height: 65px; wi dth: 150px">
208 <div id="flexitem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;"> 223 <div id="griditem-with-scrollbar" style="align-self: baseline; padding-top: 15px; height: 50px; overflow-y: scroll;">
209 The baseline is based on<br> 224 The baseline is based on<br>
210 the non-scrolled position;<br> 225 the non-scrolled position;<br>
211 this won't line up. 226 this won't line up.
212 </div> 227 </div>
213 </div> 228 </div>
214 after text 229 after text
215 </div> 230 </div>
216 231
217 </div> 232 </div>
218 233
219 <script> 234 <script>
220 document.getElementById("flexitem-with-scrollbar").scrollTop = 999; 235 document.getElementById("griditem-with-scrollbar").scrollTop = 999;
221 document.getElementById("flexbox-with-scrollbar").style.width = "auto"; 236 document.getElementById("grid-with-scrollbar").style.width = "auto";
222 </script> 237 </script>
223 238
224 </body> 239 </body>
225 </html> 240 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-expected.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698