2011-05-26  Keishi Hattori  <keishi@webkit.org>

        Reviewed by Kent Tamura.

        Add <input type=color> appearance.
        https://bugs.webkit.org/show_bug.cgi?id=61275

        * fast/forms/color/input-appearance-color.html: Added. Tests appearance of input type=color.
        * platform/chromium/test_expectations.txt: Expect FAIL for fast/forms/color
        * platform/mac/fast/forms/color/input-appearance-color-expected.png: Added.
        * platform/mac/fast/forms/color/input-appearance-color-expected.txt: Added.
2011-05-26  Keishi Hattori  <keishi@webkit.org>

        Reviewed by Kent Tamura.

        Add <input type=color> appearance.
        https://bugs.webkit.org/show_bug.cgi?id=61275

        Test: fast/forms/color/input-appearance-color.html

        * css/html.css:
        (input[type="color"]): Adds square-button appearance.
        (input[type="color"]::-webkit-color-swatch-wrapper):
        (input[type="color"]::-webkit-color-swatch):
        (input[type="color"][list]): Adds menulist appearance.
        (input[type="color"][list]::-webkit-color-swatch-wrapper):
        (input[type="color"][list]::-webkit-color-swatch):
        * html/ColorInputType.cpp:
        (WebCore::ColorInputType::createShadowSubtree): Creates -webkit-color-swatch inside -webkit-color-swatch-wrapper.
        (WebCore::ColorInputType::updateColorSwatch): Updates background color of shadowColorSwatch.
        (WebCore::ColorInputType::valueChanged): Calls updateColorSwatch.
        (WebCore::ColorInputType::shadowColorSwatch): Gets shadowColorSwatch element.
        * html/ColorInputType.h:
        (WebCore::ColorInputType::ColorInputType): Changed to inherit InputType.

git-svn-id: svn://svn.chromium.org/blink/trunk@87372 bbb929c8-8fbe-4397-9dbb-9b2b20218538
diff --git a/Source/WebCore/css/html.css b/Source/WebCore/css/html.css
index 88e83b0..0ec6603 100644
--- a/Source/WebCore/css/html.css
+++ b/Source/WebCore/css/html.css
@@ -583,6 +583,49 @@
     -webkit-box-sizing: border-box;
 }
 
+#if defined(ENABLE_INPUT_COLOR) && ENABLE_INPUT_COLOR
+
+input[type="color"] {
+    -webkit-appearance: square-button;
+    width: 44px;
+    height: 23px;
+}
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+    display:-webkit-box;
+    padding: 4px 2px;
+    -webkit-box-sizing: border-box;
+    width: 100%;
+    height: 100%
+}
+
+input[type="color"]::-webkit-color-swatch {
+    background-color: #000000;
+    border: 1px solid #777777;
+    -webkit-box-flex: 1;
+}
+
+#if defined(ENABLE_DATALIST) && ENABLE_DATALIST
+
+input[type="color"][list] {
+    -webkit-appearance: menulist;
+    width: 88px;
+    height: 23px;
+}
+
+input[type="color"][list]::-webkit-color-swatch-wrapper {
+    padding-left: 8px;
+    padding-right: 24px;
+}
+
+input[type="color"][list]::-webkit-color-swatch {
+    border-color: #000000;
+}
+
+#endif // defined(ENABLE_DATALIST) && ENABLE_DATALIST
+
+#endif // defined(ENABLE_INPUT_COLOR) && ENABLE_INPUT_COLOR
+
 select {
     -webkit-appearance: menulist;
     -webkit-box-sizing: border-box;