third_party/WebKit/LayoutTests/fast/table/border-collapsing/adjacent-row-groups-multi.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5 <style>
   6   table { border-collapse: collapse; }
   7   thead, tbody, tfoot { border: 1em solid; }
   8   .first { border-color: green; }
   9   .second { border-color: blue; }
  10   tbody { border-color: orange; }
  11   td { width: 50px; height: 50px;}
  12 </style>
  13 </head>
  14
  15 <body>
  16 <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>
  17 <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>
  18 <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>
  19
  20 <table>
  21     <thead class="first">
  22         <tr><td></td></tr>
  23     </thead>
  24         <thead class="second">
  25         <tr><td></td></tr>
  26     </thead>
  27     <tbody>
  28         <tr><td></td></tr>
  29     </tbody>
  30     <tfoot class="first">
  31         <tr><td></td></tr>
  32     </tfoot>
  33     <tfoot class="second">
  34         <tr><td></td></tr>
  35     </tfoot>
  36 </table>
  37
  38 </body>
  39 </html>