Changeset 87372 in webkit

Timestamp:

May 26, 2011 2:58:25 AM (13 years ago)

Author:

keishi@webkit.org

Message:

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.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/fast/forms/color/input-appearance-color.html (added)
• LayoutTests/platform/chromium/test_expectations.txt (modified) (1 diff)
• LayoutTests/platform/mac/fast/forms/color (added)
• LayoutTests/platform/mac/fast/forms/color/input-appearance-color-expected.png (added)
• LayoutTests/platform/mac/fast/forms/color/input-appearance-color-expected.txt (added)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/css/html.css (modified) (1 diff)
• Source/WebCore/html/ColorInputType.cpp (modified) (2 diffs)
• Source/WebCore/html/ColorInputType.h (modified) (2 diffs)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+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  Kent Tamura  <tkent@chromium.org>
 

trunk/LayoutTests/platform/chromium/test_expectations.txt

@@ -4117 +4117 @@
 
 // New tests added in r87274
-BUGCR83865 : fast/forms/color/input-value-sanitization-color.html = FAIL PASS
+BUGCR83865 : fast/forms/color = FAIL PASS
 
 // New tests added in webkit r87284

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+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.
+
 2011-05-26  Kent Tamura  <tkent@chromium.org>
 

trunk/Source/WebCore/css/html.css

@@ -584 +584 @@
 }
 
+#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;

trunk/Source/WebCore/html/ColorInputType.cpp

@@ -33 +33 @@
 
 #include "Color.h"
+#include "ElementWithPseudoId.h"
 #include "HTMLInputElement.h"
+#include "ShadowRoot.h"
 #include <wtf/PassOwnPtr.h>
 #include <wtf/text/WTFString.h>
@@ -91 +93 @@
 }
 
+void ColorInputType::createShadowSubtree()
+{
+    Document* document = element()->document();
+    RefPtr<HTMLElement> wrapperElement = ElementWithPseudoId::create(document, "-webkit-color-swatch-wrapper");
+    ExceptionCode ec = 0;
+    wrapperElement->appendChild(ElementWithPseudoId::create(document, "-webkit-color-swatch"), ec);
+    element()->ensureShadowRoot()->appendChild(wrapperElement.release(), ec);
+    
+    updateColorSwatch();
+}
+
+void ColorInputType::valueChanged()
+{
+    updateColorSwatch();
+}
+
+void ColorInputType::updateColorSwatch()
+{
+    HTMLElement* colorSwatch = shadowColorSwatch();
+    if (!colorSwatch)
+        return;
+
+    ExceptionCode ec;
+    colorSwatch->style()->setProperty("background-color", element()->value(), ec);
+}
+
+HTMLElement* ColorInputType::shadowColorSwatch() const
+{
+    Node* shadow = element()->shadowRoot();
+    return shadow ? toHTMLElement(shadow->firstChild()->firstChild()) : 0;
+}
+
 } // namespace WebCore
 

trunk/Source/WebCore/html/ColorInputType.h

@@ -38 +38 @@
 namespace WebCore {
 
-class ColorInputType : public BaseButtonInputType {
+class ColorInputType : public InputType {
 public:
     static PassOwnPtr<InputType> create(HTMLInputElement*);
 
 private:
-    ColorInputType(HTMLInputElement* element) : BaseButtonInputType(element) { }
+    ColorInputType(HTMLInputElement* element) : InputType(element) { }
     virtual bool isColorControl() const;
     virtual const AtomicString& formControlType() const;
@@ -49 +49 @@
     virtual String fallbackValue();
     virtual String sanitizeValue(const String&);
+    virtual void createShadowSubtree();
+    virtual void valueChanged();
+
+    void updateColorSwatch();
+    HTMLElement* shadowColorSwatch() const;
 };