ManualTests/item-background.html

   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>