third_party/WebKit/LayoutTests/css2.1/20110323/border-conflict-element-021a.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3
   4  <head>
   5
   6   <title>CSS Test: Border conflict resolution - adjacent table row groups with same border-style and border-width</title>
   7
   8   <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
   9   <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution" title="17.6.2.1 Border conflict resolution">
  10
  11   <meta content="image" name="flags">
  12   <meta content="When two adjacent table row groups (eg. 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." name="assert">
  13
  14   <style type="text/css">
  15   table#test {border: red solid 1em;}
  16
  17   table
  18   {
  19   border-collapse: collapse;
  20   color: white;
  21   font: 1.25em/1 Ahem;
  22   margin: auto auto 2em 2em;
  23   }
  24
  25   thead, tbody, tfoot {border: solid 1em;}
  26
  27   thead {border-color: blue;}
  28   tbody {border-color: yellow;}
  29   tfoot {border-color: orange;}
  30
  31   td {padding: 0px;}
  32
  33   table#reference > tbody {border: red none 0em;}
  34
  35   img
  36   {
  37   height: 1em;
  38   vertical-align: bottom;
  39   /*
  40   With 'vertical-align: bottom', swatch-[color] images "sit"
  41   at the bottom of the cell's line box and not on its baseline
  42   */
  43   width: 1em;
  44   }
  45   </style>
  46
  47  </head>
  48
  49  <body>
  50
  51   <p>Test passes if both multi-colored rectangular structures are <strong>perfectly identical</strong>.</p>
  52
  53   <table id="test">
  54
  55         <thead>
  56                 <tr><td>B</td><td>L</td><td>U</td><td>E</td></tr>
  57         </thead>
  58
  59         <tfoot>
  60                 <tr><td>O</td><td>R</td><td>A</td><td>N</td></tr>
  61         </tfoot>
  62
  63         <tbody>
  64                 <tr><td>Y</td><td>E</td><td>L</td><td>L</td></tr>
  65         </tbody>
  66
  67   </table>
  68
  69
  70   <table id="reference">
  71
  72     <tr>
  73       <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-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"></td>
  74     </tr>
  75
  76     <tr>
  77       <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-white.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-white.png" alt="Image download support must be enabled"><img src="support/swatch-blue.png" alt="Image download support must be enabled"></td>
  78     </tr>
  79
  80     <tr>
  81       <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-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"></td>
  82     </tr>
  83
  84     <tr>
  85       <td><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-white.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-white.png" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" alt="Image download support must be enabled"></td>
  86     </tr>
  87
  88     <tr>
  89       <td><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-yellow.png" alt="Image download support must be enabled"><img src="support/swatch-yellow.png" alt="Image download support must be enabled"></td>
  90     </tr>
  91
  92     <tr>
  93       <td><img src="support/swatch-orange.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-white.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-white.png" alt="Image download support must be enabled"><img src="support/swatch-orange.png" alt="Image download support must be enabled"></td>
  94     </tr>
  95
  96     <tr>
  97       <td><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"><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"><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>
  98     </tr>
  99
 100   </table>
 101
 102  </body>
 103 </html>