third_party/WebKit/LayoutTests/css2.1/20110323/border-conflict-element-001d.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 cells with same border-style and border-width</title>
   7   <script src="../../resources/ahem.js"></script>
   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   <meta content="ahem image" name="flags">
  12   <meta content="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') and the color of the border from the topmost cell wins." name="assert">
  13
  14   <style type="text/css">
  15   table
  16   {
  17   border-collapse: collapse;
  18   color: white;
  19   font: 1.25em/1 Ahem;
  20   margin: auto auto 2em 2em;
  21   }
  22
  23   td {padding: 0px;}
  24
  25   table#test td
  26   {
  27   border-style: solid;
  28   border-width: 1em;
  29   }
  30
  31   td#one {border-color: blue blue blue blue;}
  32   td#two {border-color: yellow yellow yellow red;}
  33   td#three {border-color: green green green red;}
  34   td#four {border-color: orange orange orange red;}
  35
  36   td#five {border-color: red yellow yellow yellow;}
  37   td#six {border-color: red green green red;}
  38   td#seven {border-color: red orange orange red;}
  39   td#eight {border-color: red blue blue red;}
  40
  41   td#nine {border-color: red green green green;}
  42   td#ten {border-color: red orange orange red;}
  43   td#eleven {border-color: red blue blue red;}
  44   td#twelve {border-color: red yellow yellow red;}
  45
  46   td#thirteen {border-color: red orange orange orange;}
  47   td#fourteen {border-color: red blue blue red;}
  48   td#fifteen {border-color: red yellow yellow red;}
  49   td#sixteen {border-color: red green green red;}
  50
  51   img
  52   {
  53   height: 1em;
  54   vertical-align: bottom;
  55   /*
  56   With 'vertical-align: bottom', swatch-[color] images "sit"
  57   at the bottom of the cell's line box and not on its baseline
  58   */
  59   width: 1em;
  60   }
  61   </style>
  62
  63  </head>
  64
  65  <body>
  66
  67   <p>Test passes if both grids are <strong>perfectly identical</strong>.</p>
  68
  69   <table id="test">
  70
  71    <tr>
  72     <td id="one">B</td> <td id="two">Y</td> <td id="three">G</td> <td id="four">O</td>
  73    </tr>
  74
  75    <tr>
  76      <td id="five">Y</td> <td id="six">G</td> <td id="seven">O</td> <td id="eight">B</td>
  77    </tr>
  78
  79    <tr>
  80      <td id="nine">G</td> <td id="ten">O</td> <td id="eleven">B</td> <td id="twelve">Y</td>
  81    </tr>
  82
  83    <tr>
  84      <td id="thirteen">O</td> <td id="fourteen">B</td> <td id="fifteen">Y</td> <td id="sixteen">G</td>
  85    </tr>
  86
  87   </table>
  88
  89
  90   <table id="reference">
  91
  92    <tr>
  93     <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-green.png" alt="Image download support must be enabled"><img src="support/swatch-green.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>
  94    </tr>
  95
  96    <tr>
  97     <td><img src="support/swatch-blue.png" alt="Image download support must be enabled">B<img src="support/swatch-blue.png" alt="Image download support must be enabled">Y<img src="support/swatch-yellow.png" alt="Image download support must be enabled">G<img src="support/swatch-green.png" alt="Image download support must be enabled">O<img src="support/swatch-orange.png" alt="Image download support must be enabled"></td>
  98    </tr>
  99
 100    <tr>
 101     <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-green.png" alt="Image download support must be enabled"><img src="support/swatch-green.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>
 102    </tr>
 103
 104    <tr>
 105     <td><img src="support/swatch-yellow.png" alt="Image download support must be enabled">Y<img src="support/swatch-yellow.png" alt="Image download support must be enabled">G<img src="support/swatch-green.png" alt="Image download support must be enabled">O<img src="support/swatch-orange.png" alt="Image download support must be enabled">B<img src="support/swatch-blue.png" alt="Image download support must be enabled"></td>
 106    </tr>
 107
 108    <tr>
 109     <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-green.png" alt="Image download support must be enabled"><img src="support/swatch-green.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-blue.png" alt="Image download support must be enabled"><img src="support/swatch-blue.png" alt="Image download support must be enabled"></td>
 110    </tr>
 111
 112    <tr>
 113     <td><img src="support/swatch-green.png" alt="Image download support must be enabled">G<img src="support/swatch-green.png" alt="Image download support must be enabled">O<img src="support/swatch-orange.png" alt="Image download support must be enabled">B<img src="support/swatch-blue.png" alt="Image download support must be enabled">Y<img src="support/swatch-yellow.png" alt="Image download support must be enabled"></td>
 114    </tr>
 115
 116    <tr>
 117     <td><img src="support/swatch-green.png" alt="Image download support must be enabled"><img src="support/swatch-green.png" alt="Image download support must be enabled"><img src="support/swatch-green.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-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"></td>
 118    </tr>
 119
 120    <tr>
 121     <td><img src="support/swatch-orange.png" alt="Image download support must be enabled">O<img src="support/swatch-orange.png" alt="Image download support must be enabled">B<img src="support/swatch-blue.png" alt="Image download support must be enabled">Y<img src="support/swatch-yellow.png" alt="Image download support must be enabled">G<img src="support/swatch-green.png" alt="Image download support must be enabled"></td>
 122    </tr>
 123
 124    <tr>
 125     <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-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-green.png" alt="Image download support must be enabled"><img src="support/swatch-green.png" alt="Image download support must be enabled"></td>
 126    </tr>
 127
 128   </table>
 129
 130  </body>
 131 </html>