| mstensho | 89137220 | 2016-10-20 20:55:38 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <p>There should be two squares below, of different size and color.</p> |
| 3 | |
| 4 | <!-- This test assumes that the implementation refrains from distributing space |
| 5 | over all rows spanned by a tall rowspanned cell, when that cell crosses a |
| 6 | fragmentainer boundary, and furthermore, also makes sure that subsequent |
| 7 | rowspanned cells stay away from those rows. |
| 8 | |
| 9 | This isn't specced anywhere, but it's probably the most sensible behavior, |
| 10 | given that we don't want the fragmentation machinery and the vertical |
| 11 | alignment machinery to meet. --> |
| 12 | |
| 13 | <div id="multicol" style="position:relative; columns:3; column-fill:auto; orphans:1; widows:1; line-height:20px; height:200px;"> |
| 14 | <div style="height:170px;"></div> |
| 15 | <table cellspacing="0" cellpadding="0"> |
| 16 | <tr data-expected-height="50"> |
| 17 | <td rowspan="3" data-expected-height="110"> |
| 18 | <div data-offset-y="170" style="position:relative; width:50px;"><br></div> |
| 19 | <div data-offset-y="0" style="position:relative; width:50px; background:blue;"><br></div> |
| 20 | <div data-offset-y="20" style="position:relative; width:50px; background:blue;"><br></div> |
| 21 | <div data-offset-y="40" style="position:relative; width:50px; background:blue;"><br></div> |
| 22 | <div data-offset-y="60" style="position:relative; width:50px; background:blue;"><br></div> |
| 23 | </td> |
| 24 | <td data-expected-height="50"> |
| 25 | <br> |
| 26 | <div style="width:30px; background:blue;"><br></div> |
| 27 | </td> |
| 28 | <td data-expected-height="50"><br><br></td> |
| 29 | <td data-expected-height="50"><br><br></td> |
| 30 | <td data-expected-height="50"><br></td> |
| 31 | </tr> |
| 32 | <tr data-expected-height="20"> |
| 33 | <td data-expected-height="20" style="background:blue;"><br></td> |
| 34 | <td data-expected-height="20"><br></td> |
| 35 | <td data-expected-height="20"><br></td> |
| 36 | <td data-expected-height="20"><br></td> |
| 37 | </tr> |
| 38 | <tr data-expected-height="40"> |
| 39 | <td data-expected-height="40" style="background:blue;"> |
| 40 | <br> |
| 41 | </td> |
| 42 | <td data-expected-height="40"> |
| 43 | <div style="width:50px; height:1px;"></div> |
| 44 | </td> |
| 45 | <td data-expected-height="40" style="background:hotpink;"> |
| 46 | <div style="width:50px;"><br></div> |
| 47 | </td> |
| 48 | <td data-expected-height="120" rowspan="2" style="background:hotpink;"> |
| 49 | <div style="width:70px; background:hotpink;"><br></div> |
| 50 | <div style="width:70px; background:hotpink;"><br></div> |
| 51 | <div style="width:70px; background:hotpink;"><br></div> |
| 52 | <div style="width:70px; background:hotpink;"><br></div> |
| 53 | <div style="width:70px; background:hotpink;"><br></div> |
| 54 | <div style="width:70px; background:hotpink;"><br></div> |
| 55 | </td> |
| 56 | </tr> |
| 57 | <tr data-expected-height="80"> |
| 58 | <td data-expected-height="80"><br></td> |
| 59 | <td data-expected-height="80"><br></td> |
| 60 | <td data-expected-height="80"><br></td> |
| 61 | <td data-expected-height="80" style="background:hotpink;"><br></td> |
| 62 | </tr> |
| 63 | </table> |
| 64 | </div> |
| 65 | |
| 66 | <script src="../resources/check-layout.js"></script> |
| 67 | <script> |
| 68 | checkLayout("#multicol"); |
| 69 | </script> |
