| <!DOCTYPE html> |
| <html> |
| <style> |
| table { border-collapse: collapse; padding: 5px;} |
| td { width: 20px; height: 20px;} |
| .bordered { border-left: 2px solid orange; border-right: 2px solid blue; border-top: 2px solid green; border-bottom: 2px solid yellow;} |
| #space {height: 5px;} |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(true); |
| </script> |
| <body> |
| <!--Test for Bugzilla <a href="https://bugs.webkit.org/show_bug.cgi?id=76246">Bug 76246</a>: Incorrect rendering of borders on <col> with span > 1--> |
| <!--The following tests verify the border-collapse behavior on tables with span specified for col/colgroups.--> |
| |
| <!-- This table has a colgroup with span. Individual borders for the spanned cells should not be painted. --> |
| <table> |
| <colgroup></colgroup> |
| <colgroup span=3 style="border: 1px solid blue;"></colgroup> |
| <colgroup></colgroup> |
| <tr> |
| <td></td><td></td><td></td><td></td><td></td> |
| </tr> |
| </table> |
| <div id="space"></div> |
| <!-- This table has a col with span. As per HTML5 specifications, the col element should be treated as if it was present as many number of times as its span attribute. We should thus expect the individual borders for the spanned cells to be painted for the following table. --> |
| <table> |
| <colgroup style="border: 1px solid yellow;" > |
| <col style="border: 1px solid green;"></col> |
| <col span=3 style="border: 1px solid orange;"></col> |
| </colgroup> |
| <colgroup style="border: 1px solid green;"> |
| <col style="border: 1px solid blue;"></col> |
| </colgroup> |
| <tr> |
| <td></td><td></td><td></td><td></td><td></td> |
| </tr> |
| <!-- No red colored bored should be visible for the following table. --> |
| </table> |
| <div id="space"></div> |
| <table> |
| <colgroup> |
| <col style="border-right: 1px solid red;"> |
| <col span="3" class="bordered"> |
| <col style="border-left: 2px solid red;"> |
| </colgroup> |
| <tr> |
| <td></td> |
| <td></td> |
| <td></td> |
| <td></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td></td> |
| <td></td> |
| <td></td> |
| <td></td> |
| <td></td> |
| </tr> |
| </table> |
| <div id="space"></div> |
| <!-- For the following table, the first border displayed should be transparent or invisible, the second in semi-transparent green color, the third in full green color and the fourth in black. No red color should be visible. This verifies the scenario when col element is present inside colgroup and we need to consider the enclosing colgroup's border. --> |
| <table> |
| <colgroup style="border-right: 5px solid rgba(0, 127, 0, 0);"><col/></colgroup> |
| <colgroup style="border-left: 5px solid red;"><col/></colgroup> |
| <colgroup style="border-right: 5px solid rgba(0, 127, 0, 0.5);"><col/></colgroup> |
| <colgroup style="border-left: 5px solid red;"><col/></colgroup> |
| <colgroup style="border-right: 5px solid rgba(0, 127, 0, 1);"><col/></colgroup> |
| <colgroup style="border-left: 5px solid red;"><col/></colgroup> |
| <colgroup style="border-right: 5px solid ;"><col/></colgroup> |
| <colgroup style="border-left: 5px solid rgba(225, 0, 0, 1);"><col/></colgroup> |
| <tr> |
| <td></td> |
| <td></td> |
| <td></td> |
| <td></td> |
| <td></td> |
| <td></td> |
| <td></td> |
| <td></td> |
| </tr> |
| </table> |
| <div id="space"></div> |
| <!-- For the following table, the first border displayed should be transparent or invisible, the second in semi-transparent green color, the third in full green color and the fourth in black. No red color should be visible. This verifies the scenario when only colgroup element is present. --> |
| <table> |
| <colgroup style="border-right: 5px solid rgba(0, 127, 0, 0);" /> |
| <colgroup style="border-left: 5px solid red;" /> |
| <colgroup style="border-right: 5px solid rgba(0, 127, 0, 0.5);" /> |
| <colgroup style="border-left: 5px solid red;" /> |
| <colgroup style="border-right: 5px solid rgba(0, 127, 0, 1);" /> |
| <colgroup style="border-left: 5px solid red;" /> |
| <colgroup style="border-right: 5px solid ;" /> |
| <colgroup style="border-left: 5px solid rgba(225, 0, 0, 1);" /> |
| <tr> |
| <td></td> |
| <td></td> |
| <td></td> |
| <td></td> |
| <td></td> |
| <td></td> |
| <td></td> |
| <td></td> |
| </tr> |
| </table> |
| </body> |
| </html> |
