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