| <!DOCTYPE html> |
| <p>There should be two squares below, of different size and color.</p> |
| |
| <!-- This test assumes that the implementation refrains from distributing space |
| over all rows spanned by a tall rowspanned cell, when that cell crosses a |
| fragmentainer boundary, and furthermore, also makes sure that subsequent |
| rowspanned cells stay away from those rows. |
| |
| This isn't specced anywhere, but it's probably the most sensible behavior, |
| given that we don't want the fragmentation machinery and the vertical |
| alignment machinery to meet. --> |
| |
| <div id="multicol" style="position:relative; columns:3; column-fill:auto; orphans:1; widows:1; line-height:20px; height:200px;"> |
| <div style="height:170px;"></div> |
| <table cellspacing="0" cellpadding="0"> |
| <tr data-expected-height="50"> |
| <td rowspan="3" data-expected-height="110"> |
| <div data-offset-y="170" style="position:relative; width:50px;"><br></div> |
| <div data-offset-y="0" style="position:relative; width:50px; background:blue;"><br></div> |
| <div data-offset-y="20" style="position:relative; width:50px; background:blue;"><br></div> |
| <div data-offset-y="40" style="position:relative; width:50px; background:blue;"><br></div> |
| <div data-offset-y="60" style="position:relative; width:50px; background:blue;"><br></div> |
| </td> |
| <td data-expected-height="50"> |
| <br> |
| <div style="width:30px; background:blue;"><br></div> |
| </td> |
| <td data-expected-height="50"><br><br></td> |
| <td data-expected-height="50"><br><br></td> |
| <td data-expected-height="50"><br></td> |
| </tr> |
| <tr data-expected-height="20"> |
| <td data-expected-height="20" style="background:blue;"><br></td> |
| <td data-expected-height="20"><br></td> |
| <td data-expected-height="20"><br></td> |
| <td data-expected-height="20"><br></td> |
| </tr> |
| <tr data-expected-height="40"> |
| <td data-expected-height="40" style="background:blue;"> |
| <br> |
| </td> |
| <td data-expected-height="40"> |
| <div style="width:50px; height:1px;"></div> |
| </td> |
| <td data-expected-height="40" style="background:hotpink;"> |
| <div style="width:50px;"><br></div> |
| </td> |
| <td data-expected-height="120" rowspan="2" style="background:hotpink;"> |
| <div style="width:70px; background:hotpink;"><br></div> |
| <div style="width:70px; background:hotpink;"><br></div> |
| <div style="width:70px; background:hotpink;"><br></div> |
| <div style="width:70px; background:hotpink;"><br></div> |
| <div style="width:70px; background:hotpink;"><br></div> |
| <div style="width:70px; background:hotpink;"><br></div> |
| </td> |
| </tr> |
| <tr data-expected-height="80"> |
| <td data-expected-height="80"><br></td> |
| <td data-expected-height="80"><br></td> |
| <td data-expected-height="80"><br></td> |
| <td data-expected-height="80" style="background:hotpink;"><br></td> |
| </tr> |
| </table> |
| </div> |
| |
| <script src="../resources/check-layout.js"></script> |
| <script> |
| checkLayout("#multicol"); |
| </script> |
