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

Side by Side Diff: LayoutTests/fast/table/table-rowspan-height-distribution-in-rows-2.html

Issue 18050007: Height of fixed height cell is not proper when cell's row is under row spanning cell. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 7 years, 5 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
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <title>Table rowspan</title> 4 <title>Table rowspan</title>
5 <script src="../../resources/check-layout.js"></script> 5 <script src="../../resources/check-layout.js"></script>
6 <style> 6 <style>
7 td { font: 15px/1 Ahem } 7 td { font: 15px/1 Ahem }
8 #div-table { display: table; border-spacing: 2px } 8 #div-table { display: table; border-spacing: 2px }
9 #div-row, #span-row { display: table-row } 9 #div-row, #span-row { display: table-row }
10 #div-cell, #span-cell { display: table-cell } 10 #div-cell, #span-cell { display: table-cell }
11 #div-table, #div-row, #span-row, #div-cell, #span-cell{ border: 1px solid bl ack } 11 #div-table, #div-row, #span-row, #div-cell, #span-cell{ border: 1px solid bl ack }
12 </style> 12 </style>
13 </head> 13 </head>
14 <body onload="checkLayout('tr')"> 14 <body onload="checkLayout('tr')">
15 <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/d etail?id=78724">78724</a>. Extra logical height is not properly spread over the rows in a row-spanning cell.</h3> 15 <h3>Test for chromium bug : <a href="https://code.google.com/p/chromium/issues/d etail?id=254914">254914</a>. Height of fixed height cell is not proper when cell 's row is under row spanning cell.</h3>
16 <h4>Rows in rowspan should get proportional height.</h4> 16 <h4>Rows in rowspan should get proportional height.</h4>
17 <h5>Test 1 - One rowSpan cell</h5> 17 <h5>Test 1 - One rowSpan cell</h5>
18 <table border="1"> 18 <table border="1">
19 <tbody> 19 <tbody>
20 <tr> 20 <tr>
21 <td>row0 col0</td> 21 <td>row0 col0</td>
22 </tr> 22 </tr>
23 <tr data-expected-height="19"> 23 <tr data-expected-height="19">
24 <td rowspan="4">row1 col0 - rowspan=4</td> 24 <td rowspan="4">row1 col0 - rowspan=4</td>
25 <td>row1 col1</td> 25 <td>row1 col1</td>
(...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after
60 </tbody> 60 </tbody>
61 </table> 61 </table>
62 <h5>Test 3 - One rowSpan cell and specified rowSpan cell height</h5> 62 <h5>Test 3 - One rowSpan cell and specified rowSpan cell height</h5>
63 <table border="1"> 63 <table border="1">
64 <tbody> 64 <tbody>
65 <tr> 65 <tr>
66 <td>row0 col0</td> 66 <td>row0 col0</td>
67 </tr> 67 </tr>
68 <tr data-expected-height="57"> 68 <tr data-expected-height="57">
69 <td>row1 col0</td> 69 <td>row1 col0</td>
70 » <td rowspan="4" style="height:300px">row1 col1 - rowspan=4</td> 70 » <td rowspan="4" style="height:300px">row1 col1 - rowspan=4 height=300p x</td>
71 </tr> 71 </tr>
72 <tr data-expected-height="57"> 72 <tr data-expected-height="57">
73 <td>row2 col0</td> 73 <td>row2 col0</td>
74 </tr> 74 </tr>
75 <tr data-expected-height="74"> 75 <tr data-expected-height="74">
76 <td>row3 col0</td> 76 <td>row3 col0</td>
77 </tr> 77 </tr>
78 <tr data-expected-height="76"> 78 <tr data-expected-height="75">
79 <td>row4 col0</td> 79 <td>row4 col0</td>
80 </tr> 80 </tr>
81 <tr data-expected-height="19"> 81 <tr data-expected-height="19">
82 <td>row5 col0</td> 82 <td>row5 col0</td>
83 <td>row5 col1</td> 83 <td>row5 col1</td>
84 </tr> 84 </tr>
85 </tbody> 85 </tbody>
86 </table> 86 </table>
87 <h5>Test 4 - One rowSpan cell and specified cells height</h5> 87 <h5>Test 4 - One rowSpan cell and one cell have fixed height.</h5>
88 <table border="1"> 88 <table border="1">
89 <tbody> 89 <tbody>
90 <tr> 90 <tr>
91 <td>row0 col0</td>
92 </tr>
93 <tr data-expected-height="60">
94 <td>row1 col0</td>
95 <td rowspan="4" style="height:300px">row1 col1 - rowspan=4 height=300p x</td>
96 </tr>
97 <tr data-expected-height="60">
98 <td>row2 col0</td>
99 </tr>
100 <tr data-expected-height="44">
101 <td style="height:40px">row3 col0 height=40px</td>
102 </tr>
103 <tr data-expected-height="85">
104 <td>row4 col0</td>
105 </tr>
106 <tr data-expected-height="19">
107 <td>row5 col0</td>
108 <td>row5 col1</td>
109 </tr>
110 </tbody>
111 </table>
112 <h5>Test 5 - One rowSpan cell and one cell have percent height.</h5>
113 <table border="1">
114 <tbody>
115 <tr>
116 <td>row0 col0</td>
117 </tr>
118 <tr data-expected-height="23">
119 <td>row1 col0</td>
120 <td rowspan="4" style="height:300px">row1 col1 - rowspan=4 height=300p x</td>
121 </tr>
122 <tr data-expected-height="183">
123 <td style="height:40%">row2 col0 height=40%</td>
124 </tr>
125 <tr data-expected-height="41">
126 <td>row3 col0</td>
127 </tr>
128 <tr data-expected-height="47">
129 <td>row4 col0</td>
130 </tr>
131 <tr data-expected-height="19">
132 <td>row5 col0</td>
133 <td>row5 col1</td>
134 </tr>
135 </tbody>
136 </table>
137 <h5>Test 6 - One rowSpan cell, one cell have percent height and another one cell have fixed height.</h5>
138 <table border="1">
139 <tbody>
140 <tr>
141 <td>row0 col0</td>
142 </tr>
143 <tr data-expected-height="19">
144 <td>row1 col0</td>
145 <td rowspan="4" style="height:300px">row1 col1 - rowspan=4 height=300p x</td>
146 </tr>
147 <tr data-expected-height="183">
148 <td style="height:40%">row2 col0 height=40%</td>
149 </tr>
150 <tr data-expected-height="44">
151 <td style="height:40px">row3 col0 height=40px</td>
152 </tr>
153 <tr data-expected-height="49">
154 <td>row4 col0</td>
155 </tr>
156 <tr data-expected-height="19">
157 <td>row5 col0</td>
158 <td>row5 col1</td>
159 </tr>
160 </tbody>
161 </table>
162 <h5>Test 7 - One rowSpan cell and two cells have percent height but total percen t is less than 100.</h5>
163 <table border="1">
164 <tbody>
165 <tr>
91 <td>row0 col0</td> 166 <td>row0 col0</td>
92 </tr> 167 </tr>
93 <tr data-expected-height="33"> 168 <tr data-expected-height="33">
94 <td>row1 col0</td> 169 <td>row1 col0</td>
95 » <td rowspan="4" style="height:300px">row1 col1 - rowspan=4</td> 170 » <td rowspan="4" style="height:300px">row1 col1 - rowspan=4 height=300p x</td>
96 </tr> 171 </tr>
97 <tr data-expected-height="130"> 172 <tr data-expected-height="37">
98 <td style="height:70px">row2 col0</td> 173 <td>row2 col0</td>
99 </tr> 174 </tr>
100 <tr data-expected-height="43"> 175 <tr data-expected-height="131">
101 <td style="height:30px">row3 col0</td> 176 <td style="height:30%">row3 col0 height=30%</td>
102 </tr> 177 </tr>
103 <tr data-expected-height="136"> 178 <tr data-expected-height="142">
104 <td style="height:100px">row4 col0</td> 179 <td style="height:40%">row4 col0 height=40%</td>
105 </tr> 180 </tr>
106 <tr data-expected-height="54"> 181 <tr data-expected-height="19">
107 <td style="height:50px">row5 col0</td> 182 <td>row5 col0</td>
108 <td>row5 col1</td> 183 <td>row5 col1</td>
109 </tr> 184 </tr>
110 </tbody> 185 </tbody>
111 </table> 186 </table>
112 <h5>Test 5 - RowSpan and ColSpan. </h5> 187 <h5>Test 8 - One rowSpan cell and three cells have percent height but total perc ent is more than 100.</h5>
188 <table border="1">
189 <tbody>
190 <tr>
191 <td>row0 col0</td>
192 </tr>
193 <tr data-expected-height="203">
194 » <td style="height:60%">row1 col0 height=60%</td>
195 » <td rowspan="4" style="height:300px">row1 col1 - rowspan=4 height=300p x</td>
196 » </tr>
197 <tr data-expected-height="34">
198 <td style="height:40%">row2 col0 height=40%</td>
199 </tr>
200 <tr data-expected-height="19">
201 <td>row3 col0</td>
202 </tr>
203 <tr data-expected-height="34">
204 <td style="height:50%">row4 col0 height=50%</td>
205 </tr>
206 <tr data-expected-height="19">
207 <td>row5 col0</td>
208 <td>row5 col1</td>
209 </tr>
210 </tbody>
211 </table>
212 <h5>Test 9 - One rowSpan cell and specified cells height.</h5>
213 <table border="1">
214 <tbody>
215 <tr>
216 <td>row0 col0</td>
217 </tr>
218 <tr data-expected-height="74">
219 » <td style="height:70px">row1 col0 height=70px</td>
220 » <td rowspan="4" style="height:500px">row1 col1 - rowspan=4 height=500p x</td>
221 » </tr>
222 <tr data-expected-height="74">
223 <td style="height:70px">row2 col0 height=70px</td>
224 </tr>
225 <tr data-expected-height="59">
226 <td style="height:30px">row3 col0 height=30px</td>
227 </tr>
228 <tr data-expected-height="182">
229 <td style="height:100px">row4 col0 height=100px</td>
230 </tr>
231 <tr data-expected-height="54">
232 <td style="height:50px">row5 col0 height=50px</td>
233 <td>row5 col1</td>
234 </tr>
235 </tbody>
236 </table>
237 <h5>Test 10 - RowSpan and ColSpan. </h5>
113 <table border="1" width="607"> 238 <table border="1" width="607">
114 <tbody> 239 <tbody>
115 <tr data-expected-height="34"> 240 <tr data-expected-height="34">
116 <td>row0 col0</td> 241 <td>row0 col0</td>
117 <td rowspan="3" colspan="2">row0 col1 - rowspan=3 colspan=2</td> 242 <td rowspan="3" colspan="2">row0 col1 - rowspan=3 colspan=2</td>
118 <td>row0 col2</td> 243 <td>row0 col2</td>
119 </tr> 244 </tr>
120 <tr data-expected-height="34"> 245 <tr data-expected-height="34">
121 <td>row1 col0</td> 246 <td>row1 col0</td>
122 </tr> 247 </tr>
123 <tr data-expected-height="34"> 248 <tr data-expected-height="34">
124 <td>row2 col0</td> 249 <td>row2 col0</td>
125 </tr> 250 </tr>
126 <tr data-expected-height="19"> 251 <tr data-expected-height="19">
127 <td colspan="3">row3 col0 - colspan=3</td> 252 <td colspan="3">row3 col0 - colspan=3</td>
128 </tr> 253 </tr>
129 <tr data-expected-height="34"> 254 <tr data-expected-height="34">
130 <td>row4 col0</td> 255 <td>row4 col0</td>
131 </tr> 256 </tr>
132 </tbody> 257 </tbody>
133 </table> 258 </table>
134 <h5>Test 6 - Mix of baseline aligned and non-baseline aligned cells.</h5> 259 <h5>Test 11 - Mix of baseline aligned and non-baseline aligned cells.</h5>
135 <table border="1" width="607"> 260 <table border="1" width="607">
136 <tbody> 261 <tbody>
137 <tr data-expected-height="104"> 262 <tr data-expected-height="104">
138 <td style="height:100px">row0 col0</td> 263 <td style="height:100px">row0 col0</td>
139 <td style="vertical-align:top">row0 col1 vertical-align=top</td> 264 <td style="vertical-align:top">row0 col1 vertical-align=top</td>
140 <td style="vertical-align:bottom">row0 col2 vertical-align=bottom</td> 265 <td style="vertical-align:bottom">row0 col2 vertical-align=bottom</td>
141 </tr> 266 </tr>
142 <tr data-expected-height="19"> 267 <tr data-expected-height="19">
143 <td>row1 col0</td> 268 <td>row1 col0</td>
144 </tr> 269 </tr>
145 <tr data-expected-height="77"> 270 <tr data-expected-height="77">
146 <td rowspan="4" style="vertical-align:text-top; height:300px">row2 col0 - rowspan=4 vertical-align=text-top</td> 271 <td rowspan="4" style="vertical-align:text-top; height:300px">row2 col0 - rowspan=4 vertical-align=text-top</td>
147 <td style="vertical-align:sub">row2 col1 vertical-align=sub</td> 272 <td style="vertical-align:sub">row2 col1 vertical-align=sub</td>
148 </tr> 273 </tr>
149 <tr data-expected-height="77"> 274 <tr data-expected-height="77">
150 <td style="vertical-align:middle">row3 col1 vertical-align=middle</td> 275 <td style="vertical-align:middle">row3 col1 vertical-align=middle</td>
151 </tr> 276 </tr>
152 <tr data-expected-height="69"> 277 <tr data-expected-height="69">
153 <td style="vertical-align:super">row4 col1 vertical-align=super</td> 278 <td style="vertical-align:super">row4 col1 vertical-align=super</td>
154 </tr> 279 </tr>
155 <tr data-expected-height="91"> 280 <tr data-expected-height="91">
156 <td style="vertical-align:text-bottom">row5 col1 vertical-align=text-botto m</td> 281 <td style="vertical-align:text-bottom">row5 col1 vertical-align=text-botto m</td>
157 </tr> 282 </tr>
158 <tr data-expected-height="19"> 283 <tr data-expected-height="19">
159 <td>row6 col0</td> 284 <td>row6 col0</td>
160 </tr> 285 </tr>
161 </tbody> 286 </tbody>
162 </table> 287 </table>
163 <h5>Test 7 - CSS Table.</h5> 288 <h5>Test 12 - CSS Table.</h5>
164 <div id="div-table"> 289 <div id="div-table">
165 <span id="span-row"> 290 <span id="span-row">
166 <span id="span-cell">row0 col0</span> 291 <span id="span-cell">row0 col0</span>
167 <div id="div-cell">row0 col1</div> 292 <div id="div-cell">row0 col1</div>
168 <span id="span-cell">row0 col2</span> 293 <span id="span-cell">row0 col2</span>
169 </span> 294 </span>
170 <div id="div-row"> 295 <div id="div-row">
171 <div id="div-cell">row1 col0</div> 296 <div id="div-cell">row1 col0</div>
172 <span id="span-cell">row1 col1</span> 297 <span id="span-cell">row1 col1</span>
173 <div id="div-cell">row1 col2</div> 298 <div id="div-cell">row1 col2</div>
(...skipping 24 matching lines...) Expand all
198 <span id="span-row"> 323 <span id="span-row">
199 <span id="span-cell">row8 col0</span> 324 <span id="span-cell">row8 col0</span>
200 </span> 325 </span>
201 <div id="div-row"> 326 <div id="div-row">
202 <div id="div-cell">row9 col0</div> 327 <div id="div-cell">row9 col0</div>
203 </div> 328 </div>
204 <div id="div-row"> 329 <div id="div-row">
205 <div id="div-cell">row10 col0</div> 330 <div id="div-cell">row10 col0</div>
206 </div> 331 </div>
207 </div> 332 </div>
208 <h5>Test 8 - Table Similar to CSS table with rowspan.</h5> 333 <h5>Test 13 - Table Similar to CSS table with rowspan.</h5>
209 <table border="1px"> 334 <table border="1px">
210 <tr data-expected-height="39"> 335 <tr data-expected-height="39">
211 <td rowspan=5 style="height:300px">row0 col0</td> 336 <td rowspan=5 style="height:300px">row0 col0</td>
212 <td>row0 col1</td> 337 <td>row0 col1</td>
213 <td>row0 col2</td> 338 <td>row0 col2</td>
214 </tr> 339 </tr>
215 <tr data-expected-height="47"> 340 <tr data-expected-height="48">
216 <td rowspan=3 style="height:200px">row1 col1</td> 341 <td rowspan=3 style="height:200px">row1 col1</td>
217 <td rowspan=2 style="height:100px">row1 col2</td> 342 <td rowspan=2 style="height:100px">row1 col2</td>
218 <td>row1 col3</td> 343 <td>row1 col3</td>
219 </tr> 344 </tr>
220 <tr data-expected-height="47"> 345 <tr data-expected-height="47">
221 <td>row2 col3</td> 346 <td>row2 col3</td>
222 </tr> 347 </tr>
223 <tr data-expected-height="59"> 348 <tr data-expected-height="59">
224 <td>row3 col2</td> 349 <td>row3 col2</td>
225 </tr> 350 </tr>
(...skipping 19 matching lines...) Expand all
245 </tr> 370 </tr>
246 <tr data-expected-height="19"> 371 <tr data-expected-height="19">
247 <td>row9 col1</td> 372 <td>row9 col1</td>
248 </tr> 373 </tr>
249 <tr data-expected-height="19"> 374 <tr data-expected-height="19">
250 <td>row10 col1</td> 375 <td>row10 col1</td>
251 </tr> 376 </tr>
252 </table> 377 </table>
253 </body> 378 </body>
254 </html> 379 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698