<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

 <head>
  <style>
  table
  {
    border-collapse: collapse;
    color: white;
    font: 1.25em/1 Ahem;
    margin: auto auto 2em 2em;
  }

  .blue {border: solid 1em blue;}
  .yellow {border: solid 1em yellow;}
  .orange {border: solid 1em orange;}

  table#reference > tbody {border: red none 0em;}

  td {padding: 0px;}
  
  img
  {
  height: 1em;
  vertical-align: bottom; 
  /* 
  With 'vertical-align: bottom', swatch-[color] images "sit" 
  at the bottom of the cell's line box and not on its baseline 
  */
  width: 1em;
  }
  </style>
 </head>

 <body>
  <p>Test passes if both multi-colored rectangular structures are <strong>perfectly identical</strong>.</p>

  <table>
    <tr><td class="blue">BLUE</td></tr>
	<tr><td class="yellow">YELL</td></tr>
    <tr><td class="orange">ORAN</td></tr>
  </table>

  
  <table id="reference">
    <tr>
      <td><img src="support/swatch-blue.png"><img src="support/swatch-blue.png"><img src="support/swatch-blue.png"><img src="support/swatch-blue.png"><img src="support/swatch-blue.png"><img src="support/swatch-blue.png"></td>
    </tr>
    <tr>
      <td><img src="support/swatch-blue.png"><img src="support/swatch-white.png"><img src="support/swatch-white.png"><img src="support/swatch-white.png"><img src="support/swatch-white.png"><img src="support/swatch-blue.png"></td>
    </tr>
    <tr>
      <td><img src="support/swatch-blue.png"><img src="support/swatch-blue.png"><img src="support/swatch-blue.png"><img src="support/swatch-blue.png"><img src="support/swatch-blue.png"><img src="support/swatch-blue.png"></td>
    </tr>
    <tr>
      <td><img src="support/swatch-yellow.png"><img src="support/swatch-white.png"><img src="support/swatch-white.png"><img src="support/swatch-white.png"><img src="support/swatch-white.png"><img src="support/swatch-yellow.png"></td>
    </tr>
    <tr>
      <td><img src="support/swatch-yellow.png"><img src="support/swatch-yellow.png"><img src="support/swatch-yellow.png"><img src="support/swatch-yellow.png"><img src="support/swatch-yellow.png"><img src="support/swatch-yellow.png"></td>
    </tr>
    <tr>
      <td><img src="support/swatch-orange.png"><img src="support/swatch-white.png"><img src="support/swatch-white.png"><img src="support/swatch-white.png"><img src="support/swatch-white.png"><img src="support/swatch-orange.png"></td>
    </tr>
    <tr>
      <td><img src="support/swatch-orange.png"><img src="support/swatch-orange.png"><img src="support/swatch-orange.png"><img src="support/swatch-orange.png"><img src="support/swatch-orange.png"><img src="support/swatch-orange.png"></td>
    </tr>
  </table>

 </body>
</html>