WebCore/manual-tests/item-background.html
changeset 0 4f2f89ce4247
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/WebCore/manual-tests/item-background.html	Fri Sep 17 09:02:29 2010 +0300
@@ -0,0 +1,155 @@
+<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>