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;