--- /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’ 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>