border-conflict-style-107.html (2706B)
1 <!DOCTYPE html> 2 <title>CSS Test: border conflict resolution - border styles that differ only in color</title> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution"> 5 <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> 6 <meta name="assert" content="If border styles differ only in color, 7 then a style set on a cell wins over one on a row, 8 which wins over a row group, column, column group and, lastly, table. 9 "> 10 <style> 11 br { clear: both } 12 table { border-collapse: collapse; float: left; } 13 td { padding: 0 } 14 .loser { border: 25px solid red } 15 .winner { border: 25px solid green } 16 </style> 17 18 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 19 20 <!-- Cell wins over row --> 21 <table> 22 <tr class="loser"> 23 <td class="winner"></td> 24 </tr> 25 </table> 26 27 <!-- Cell wins over row group --> 28 <table> 29 <tbody class="loser"> 30 <td class="winner"></td> 31 </tbody> 32 </table> 33 34 <!-- Cell wins over column --> 35 <table> 36 <col class="loser"></col> 37 <td class="winner"></td> 38 </table> 39 40 <!-- Cell wins over column group --> 41 <table> 42 <colgroup class="loser"></col> 43 <td class="winner"></td> 44 </table> 45 46 <br> 47 48 <!-- Cell wins over table --> 49 <table class="loser"> 50 <td class="winner"></td> 51 </table> 52 53 <!-- Row wins over row group --> 54 <table> 55 <tbody class="loser"></col> 56 <tr class="winner"> 57 <td></td> 58 </tr> 59 </tbody> 60 </table> 61 62 <!-- Row wins over column --> 63 <table> 64 <col class="loser"></col> 65 <tr class="winner"> 66 <td></td> 67 </tr> 68 </table> 69 70 <!-- Row wins over column group --> 71 <table> 72 <colgroup class="loser"></colgroup> 73 <tr class="winner"> 74 <td></td> 75 </tr> 76 </table> 77 78 <br> 79 80 <!-- Row wins over table --> 81 <table class="loser"> 82 <tr class="winner"> 83 <td></td> 84 </tr> 85 </table> 86 87 <!-- Row group wins over column --> 88 <table> 89 <col class="loser"></col> 90 <tbody class="winner"></col> 91 <td></td> 92 </tbody> 93 </table> 94 95 <!-- Row group wins over column group --> 96 <table> 97 <colgroup class="loser"></colgroup> 98 <tbody class="winner"></col> 99 <td></td> 100 </tbody> 101 </table> 102 103 <!-- Row group wins over table --> 104 <table class="loser"> 105 <tbody class="winner"></col> 106 <td></td> 107 </tbody> 108 </table> 109 110 <br> 111 112 <!-- Column wins over column group --> 113 <table> 114 <colgroup class="loser"> 115 <col class="winner"></col> 116 </colgroup> 117 <td></td> 118 </table> 119 120 <!-- Column wins over table --> 121 <table class="loser"> 122 <col class="winner"></col> 123 <td></td> 124 </table> 125 126 <!-- Column group wins over table --> 127 <table class="loser"> 128 <colgroup class="winner"></colgroup> 129 <td></td> 130 </table> 131 132 <!-- Table wins when alone --> 133 <table class="winner"> 134 <td></td> 135 </table>