<!DOCTYPE html>

<html>
<head>
<style>
  table { border-collapse: collapse; }
  thead, tbody, tfoot { border: 1em solid green; }
  tbody { border-color: orange; }  
  td { width: 100px; height: 100px;}
</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>The bottom border of the first (green) box should be completely green in color (including the corners) and overlapping the top border of the second (orange) box. Similarly, the bottom border of the second (orange) box should be completely orange in color (including the corners) and overlapping the top border of the third (green) box.</p>
  
<table>
    <thead>
        <tr><td></td></tr>
    </thead>
    <tbody>
        <tr><td></td></tr>
    </tbody>
    <tfoot>
        <tr><td></td></tr>
    </tfoot>
</table>

</body>
</html>
