ManualTests/item-background.html

<style>
    div.container { float: left; background-color: #eee; padding: 4px; margin: 4px; }
    div.swatch { width: 14px; height: 14px; background-color: white; position: relative; }
    div.swatch div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    select { display: block; margin-left: 14px; margin-bottom: 1px; }

    div.container.white > select,
    div.container.white > div.swatch > div
        { background-color: white; }

    div.container.black > select,
    div.container.black > div.swatch > div
        { background-color: black; }

    div.container.initial > select,
    div.container.initial > div.swatch > div
        { background-color: initial; }

    div.container.semiblue > select,
    div.container.semiblue > div.swatch > div
        { background-color: rgba(0, 0, 255, 0.5); }

    .solid { background-color: red; }
    .reddish { background-color: rgba(255, 0, 0, 0.75); }
    .semigreen { background-color: rgba(0, 255, 0, 0.5); }
    .darken { background-color: rgba(0, 0, 0, 0.67); }
</style>
<p>
    <strong>This test is for Windows only.</strong>
    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).
</p>
<div class="container white">
    Solid white menu:
    <select>
        <option>Default (transparent) option</option>
        <option class="solid">Solid red option</option>
        <option class="reddish">25% transparent red option</option>
        <option class="semigreen">50% transparent green option</option>
        <option class="darken">33% transparent black option</option>
    </select>
    <div class="swatch"></div>
    <div class="swatch">
        <div>
            <div class="solid"></div>
        </div>
    </div>
    <div class="swatch">
        <div>
            <div class="reddish"></div>
        </div>
    </div>
    <div class="swatch">
        <div>
            <div class="semigreen"></div>
        </div>
    </div>
    <div class="swatch">
        <div>
            <div class="darken"></div>
        </div>
    </div>
</div>
<div class="container black">
    Solid black menu:
    <select>
        <option>Default (transparent) option</option>
        <option class="solid">Solid red option</option>
        <option class="reddish">25% transparent red option</option>
        <option class="semigreen">50% transparent green option</option>
        <option class="darken">33% transparent black option</option>
    </select>
    <div class="swatch"></div>
    <div class="swatch">
        <div>
            <div class="solid"></div>
        </div>
    </div>
    <div class="swatch">
        <div>
            <div class="reddish"></div>
        </div>
    </div>
    <div class="swatch">
        <div>
            <div class="semigreen"></div>
        </div>
    </div>
    <div class="swatch">
        <div>
            <div class="darken"></div>
        </div>
    </div>
</div>
<div class="container initial">
    Transparent menu:
    <select>
        <option>Default (transparent) option</option>
        <option class="solid">Solid red option</option>
        <option class="reddish">25% transparent red option</option>
        <option class="semigreen">50% transparent green option</option>
        <option class="darken">33% transparent black option</option>
    </select>
    <div class="swatch"></div>
    <div class="swatch">
        <div>
            <div class="solid"></div>
        </div>
    </div>
    <div class="swatch">
        <div>
            <div class="reddish"></div>
        </div>
    </div>
    <div class="swatch">
        <div>
            <div class="semigreen"></div>
        </div>
    </div>
    <div class="swatch">
        <div>
            <div class="darken"></div>
        </div>
    </div>
</div>
<div class="container semiblue">
    50% blue menu:
    <select>
        <option>Default (transparent) option</option>
        <option class="solid">Solid red option</option>
        <option class="reddish">25% transparent red option</option>
        <option class="semigreen">50% transparent green option</option>
        <option class="darken">33% transparent black option</option>
    </select>
    <div class="swatch"></div>
    <div class="swatch">
        <div>
            <div class="solid"></div>
        </div>
    </div>
    <div class="swatch">
        <div>
            <div class="reddish"></div>
        </div>
    </div>
    <div class="swatch">
        <div>
            <div class="semigreen"></div>
        </div>
    </div>
    <div class="swatch">
        <div>
            <div class="darken"></div>
        </div>
    </div>
</div>