border-conflict-element-001e.xht (7847B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Test: Border conflict resolution - adjacent cells with same border-style and border-width</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution" /> 11 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-color-properties" title="8.5.2 Border color" /> 12 <link rel="match" href="border-conflict-element-001e-ref.xht" /> 13 14 15 <meta content="image" name="flags" /> 16 <meta content="If a table cell's border color is not specified with a border property, then user agents must use the value of the element's 'color' property as the computed value for the border color. When two adjacent cells have the same border-width and the same border-style in a 'border-collapse: collapse' table, then the color of the border from the leftmost cell wins (if the table's 'direction' is 'ltr'; right, if it is 'rtl')." name="assert" /> 17 18 <style type="text/css"><![CDATA[ 19 table#test 20 { 21 border: red solid 1em; 22 } 23 24 table 25 { 26 border-collapse: collapse; 27 font: 1.25em/1 serif; 28 margin: auto auto 2em 2em; 29 } 30 31 table#test td 32 { 33 border: solid 1em; 34 padding: 0.5em; 35 } 36 37 td.blue {color: blue;} 38 39 td.yellow {color: yellow;} 40 41 td.orange {color: orange;} 42 43 table#reference td {padding: 0em;} 44 45 img 46 { 47 height: 1em; 48 vertical-align: bottom; 49 /* 50 With 'vertical-align: bottom', swatch-[color] images "sit" 51 at the bottom of the cell's line box and not on its baseline 52 */ 53 width: 1em; 54 } 55 ]]></style> 56 57 </head> 58 59 <body> 60 61 <p>Test passes if both grids are <strong>perfectly identical</strong>.</p> 62 63 <table id="test"> 64 <tr> 65 <td class="blue"></td> <td class="yellow"></td> <td class="yellow"></td> <td class="orange"></td> 66 </tr> 67 68 <tr> 69 <td class="blue"></td> <td class="yellow"></td> <td class="yellow"></td> <td class="orange"></td> 70 </tr> 71 72 <tr> 73 <td class="blue"></td> <td class="yellow"></td> <td class="yellow"></td> <td class="orange"></td> 74 </tr> 75 76 </table> 77 78 79 <table id="reference"> 80 81 <tr> 82 <td><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></td> 83 </tr> 84 85 <tr> 86 <td><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-white.png" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-white.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-white.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-white.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></td> 87 </tr> 88 89 <tr> 90 <td><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></td> 91 </tr> 92 93 <tr> 94 <td><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-white.png" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-white.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-white.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-white.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></td> 95 </tr> 96 97 <tr> 98 <td><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></td> 99 </tr> 100 101 <tr> 102 <td><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-white.png" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-white.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-white.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-white.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></td> 103 </tr> 104 105 <tr> 106 <td><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></td> 107 </tr> 108 109 </table> 110 111 </body> 112 </html>