| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| table { border-collapse: collapse; } |
| thead, tbody, tfoot { border: 1em solid; } |
| .first { border-color: green; } |
| .second { border-color: blue; } |
| tbody { border-color: orange; } |
| td { width: 50px; height: 50px;} |
| </style> |
| </head> |
| |
| <body> |
| <p>Test for Bugzilla <a href="https://bugs.webkit.org/show_bug.cgi?id=86885">Bug 86885</a>: CSS2.1 failure: border-conflict-element021a.</p> |
| <p>When two adjacent table row groups (thead, tbody, tfoot) have the same border-width and the same border-style in a 'border-collapse: collapse' table, then the color of the border from the topmost table row group wins: so, a thead wins over a tbody which wins over tfoot.</p> |
| <p>This test verifies the aforementioned sceanario when more than one header and/or footer is specified. The first thead specified in the page should be rendered at the top of the table; similarly the first tfoot specified in the page should be rendered as the last section of the table. In this case both the top-most and the bottom-most sections should be displayed in green color. Also, there should be no overlap of border-colors at the corners.</p> |
| |
| <table> |
| <thead class="first"> |
| <tr><td></td></tr> |
| </thead> |
| <thead class="second"> |
| <tr><td></td></tr> |
| </thead> |
| <tbody> |
| <tr><td></td></tr> |
| </tbody> |
| <tfoot class="first"> |
| <tr><td></td></tr> |
| </tfoot> |
| <tfoot class="second"> |
| <tr><td></td></tr> |
| </tfoot> |
| </table> |
| |
| </body> |
| </html> |
