Home | History | Annotate | Download | only in ManualTests 
      1 <style>
      2     div.container { float: left; background-color: #eee; padding: 4px; margin: 4px; }
      3     div.swatch { width: 14px; height: 14px; background-color: white; position: relative; }
      4     div.swatch div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
      5     select { display: block; margin-left: 14px; margin-bottom: 1px; }
      6 
      7     div.container.white > select,
      8     div.container.white > div.swatch > div
      9         { background-color: white; }
     10 
     11     div.container.black > select,
     12     div.container.black > div.swatch > div
     13         { background-color: black; }
     14 
     15     div.container.initial > select,
     16     div.container.initial > div.swatch > div
     17         { background-color: initial; }
     18 
     19     div.container.semiblue > select,
     20     div.container.semiblue > div.swatch > div
     21         { background-color: rgba(0, 0, 255, 0.5); }
     22 
     23     .solid { background-color: red; }
     24     .reddish { background-color: rgba(255, 0, 0, 0.75); }
     25     .semigreen { background-color: rgba(0, 255, 0, 0.5); }
     26     .darken { background-color: rgba(0, 0, 0, 0.67); }
     27 </style>
     28 <p>
     29     <strong>This test is for Windows only.</strong>
     30     When you pull down each menu, the items&rsquo; background colors should match up with the swatches on the left (except for the hovered item).
     31 </p>
     32 <div class="container white">
     33     Solid white menu:
     34     <select>
     35         <option>Default (transparent) option</option>
     36         <option class="solid">Solid red option</option>
     37         <option class="reddish">25% transparent red option</option>
     38         <option class="semigreen">50% transparent green option</option>
     39         <option class="darken">33% transparent black option</option>
     40     </select>
     41     <div class="swatch"></div>
     42     <div class="swatch">
     43         <div>
     44             <div class="solid"></div>
     45         </div>
     46     </div>
     47     <div class="swatch">
     48         <div>
     49             <div class="reddish"></div>
     50         </div>
     51     </div>
     52     <div class="swatch">
     53         <div>
     54             <div class="semigreen"></div>
     55         </div>
     56     </div>
     57     <div class="swatch">
     58         <div>
     59             <div class="darken"></div>
     60         </div>
     61     </div>
     62 </div>
     63 <div class="container black">
     64     Solid black menu:
     65     <select>
     66         <option>Default (transparent) option</option>
     67         <option class="solid">Solid red option</option>
     68         <option class="reddish">25% transparent red option</option>
     69         <option class="semigreen">50% transparent green option</option>
     70         <option class="darken">33% transparent black option</option>
     71     </select>
     72     <div class="swatch"></div>
     73     <div class="swatch">
     74         <div>
     75             <div class="solid"></div>
     76         </div>
     77     </div>
     78     <div class="swatch">
     79         <div>
     80             <div class="reddish"></div>
     81         </div>
     82     </div>
     83     <div class="swatch">
     84         <div>
     85             <div class="semigreen"></div>
     86         </div>
     87     </div>
     88     <div class="swatch">
     89         <div>
     90             <div class="darken"></div>
     91         </div>
     92     </div>
     93 </div>
     94 <div class="container initial">
     95     Transparent menu:
     96     <select>
     97         <option>Default (transparent) option</option>
     98         <option class="solid">Solid red option</option>
     99         <option class="reddish">25% transparent red option</option>
    100         <option class="semigreen">50% transparent green option</option>
    101         <option class="darken">33% transparent black option</option>
    102     </select>
    103     <div class="swatch"></div>
    104     <div class="swatch">
    105         <div>
    106             <div class="solid"></div>
    107         </div>
    108     </div>
    109     <div class="swatch">
    110         <div>
    111             <div class="reddish"></div>
    112         </div>
    113     </div>
    114     <div class="swatch">
    115         <div>
    116             <div class="semigreen"></div>
    117         </div>
    118     </div>
    119     <div class="swatch">
    120         <div>
    121             <div class="darken"></div>
    122         </div>
    123     </div>
    124 </div>
    125 <div class="container semiblue">
    126     50% blue menu:
    127     <select>
    128         <option>Default (transparent) option</option>
    129         <option class="solid">Solid red option</option>
    130         <option class="reddish">25% transparent red option</option>
    131         <option class="semigreen">50% transparent green option</option>
    132         <option class="darken">33% transparent black option</option>
    133     </select>
    134     <div class="swatch"></div>
    135     <div class="swatch">
    136         <div>
    137             <div class="solid"></div>
    138         </div>
    139     </div>
    140     <div class="swatch">
    141         <div>
    142             <div class="reddish"></div>
    143         </div>
    144     </div>
    145     <div class="swatch">
    146         <div>
    147             <div class="semigreen"></div>
    148         </div>
    149     </div>
    150     <div class="swatch">
    151         <div>
    152             <div class="darken"></div>
    153         </div>
    154     </div>
    155 </div>
    156