<input type=color readonly> doesn't act per spec
authorcdumez@apple.com <cdumez@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 20 Feb 2017 00:46:27 +0000 (00:46 +0000)
committercdumez@apple.com <cdumez@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 20 Feb 2017 00:46:27 +0000 (00:46 +0000)
https://bugs.webkit.org/show_bug.cgi?id=168421
<rdar://problem/30593185>

Reviewed by Ryosuke Niwa.

Source/WebCore:

The 'readonly' attribute should not apply to <input type=color> as per the
HTML specification:
- https://html.spec.whatwg.org/#the-input-element:attr-input-readonly-3

Chrome / Firefox and Edge already behave as per the specification.

Tests: fast/forms/color/input-color-disabled.html
       fast/forms/color/input-color-readonly.html

* html/ColorInputType.cpp:
(WebCore::ColorInputType::handleDOMActivateEvent):
(WebCore::ColorInputType::didChooseColor):

LayoutTests:

Add layout test coverage.

* fast/forms/color/input-color-disabled-expected.txt: Added.
* fast/forms/color/input-color-disabled.html: Added.
* fast/forms/color/input-color-readonly-expected.txt: Added.
* fast/forms/color/input-color-readonly.html: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@212617 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/forms/color/input-color-disabled-expected.txt [new file with mode: 0644]
LayoutTests/fast/forms/color/input-color-disabled.html [new file with mode: 0644]
LayoutTests/fast/forms/color/input-color-readonly-expected.txt [new file with mode: 0644]
LayoutTests/fast/forms/color/input-color-readonly.html [new file with mode: 0644]
LayoutTests/platform/ios-simulator/TestExpectations
LayoutTests/platform/mac-wk1/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/html/ColorInputType.cpp

index 2e21ad1..2b05c19 100644 (file)
@@ -1,3 +1,18 @@
+2017-02-19  Chris Dumez  <cdumez@apple.com>
+
+        <input type=color readonly> doesn't act per spec
+        https://bugs.webkit.org/show_bug.cgi?id=168421
+        <rdar://problem/30593185>
+
+        Reviewed by Ryosuke Niwa.
+
+        Add layout test coverage.
+
+        * fast/forms/color/input-color-disabled-expected.txt: Added.
+        * fast/forms/color/input-color-disabled.html: Added.
+        * fast/forms/color/input-color-readonly-expected.txt: Added.
+        * fast/forms/color/input-color-readonly.html: Added.
+
 2017-02-19  Commit Queue  <commit-queue@webkit.org>
 
         Unreviewed, rolling out r212466.
diff --git a/LayoutTests/fast/forms/color/input-color-disabled-expected.txt b/LayoutTests/fast/forms/color/input-color-disabled-expected.txt
new file mode 100644 (file)
index 0000000..a63480b
--- /dev/null
@@ -0,0 +1,12 @@
+Tests that it is not possible to select a color on a input type=color that is marked as disabled.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS onChangeCount is 0
+PASS onChangeCount is 0
+PASS input.value is "#000000"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/forms/color/input-color-disabled.html b/LayoutTests/fast/forms/color/input-color-disabled.html
new file mode 100644 (file)
index 0000000..3ad2411
--- /dev/null
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../../resources/js-test.js"></script>
+</head>
+<body>
+<p id="description"></p>
+<div id="console"></div>
+<script>
+description("Tests that it is not possible to select a color on a input type=color that is marked as disabled.");
+
+var input = document.createElement('input');
+input.type = 'color';
+input.disabled = true;
+input.value = '#000000';
+document.body.appendChild(input);
+
+input.style.position = 'absolute';
+input.style.left = '0';
+input.style.top = '0';
+input.style.width = '20px';
+input.style.height = '20px';
+
+var onChangeCount = 0;
+input.onchange = function() {
+    debug("change event dispatched - value changed to " + input.value);
+    onChangeCount++;
+};
+
+input.oninput = function() {
+    debug("input event dispatched - value is:  " + input.value);
+};
+
+eventSender.mouseMoveTo(10, 10);
+eventSender.mouseDown();
+eventSender.mouseUp();
+
+shouldBe('onChangeCount', '0');
+internals.selectColorInColorChooser(input, '#ff0000');
+shouldBe('onChangeCount', '0');
+shouldBeEqualToString('input.value', '#000000');
+</script>
+</body>
+</html>
diff --git a/LayoutTests/fast/forms/color/input-color-readonly-expected.txt b/LayoutTests/fast/forms/color/input-color-readonly-expected.txt
new file mode 100644 (file)
index 0000000..86b8dc7
--- /dev/null
@@ -0,0 +1,14 @@
+Tests that it is possible to select a color on a input type=color that is marked as readOnly.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS onChangeCount is 0
+input event dispatched - value is:  #ff0000
+change event dispatched - value changed to #ff0000
+PASS onChangeCount is 1
+PASS input.value is "#ff0000"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/forms/color/input-color-readonly.html b/LayoutTests/fast/forms/color/input-color-readonly.html
new file mode 100644 (file)
index 0000000..1875d51
--- /dev/null
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../../resources/js-test.js"></script>
+</head>
+<body>
+<p id="description"></p>
+<div id="console"></div>
+<script>
+description("Tests that it is possible to select a color on a input type=color that is marked as readOnly.");
+
+var input = document.createElement('input');
+input.type = 'color';
+input.readOnly = true;
+input.value = '#000000';
+document.body.appendChild(input);
+
+input.style.position = 'absolute';
+input.style.left = '0';
+input.style.top = '0';
+input.style.width = '20px';
+input.style.height = '20px';
+
+var onChangeCount = 0;
+input.onchange = function() {
+    debug("change event dispatched - value changed to " + input.value);
+    onChangeCount++;
+};
+
+input.oninput = function() {
+    debug("input event dispatched - value is:  " + input.value);
+};
+
+eventSender.mouseMoveTo(10, 10);
+eventSender.mouseDown();
+eventSender.mouseUp();
+
+shouldBe('onChangeCount', '0');
+
+// input.onchange should be called
+internals.selectColorInColorChooser(input, '#ff0000');
+shouldBe('onChangeCount', '1');
+shouldBeEqualToString('input.value', '#ff0000');
+</script>
+</body>
+</html>
index 1487682..72d6817 100644 (file)
@@ -1328,9 +1328,12 @@ fast/flexbox/vertical-box-form-controls.html [ Failure ]
 fast/forms/autofocus-opera-003.html [ Failure ]
 fast/forms/button-inner-block-reuse.html [ Failure ]
 fast/forms/button-with-float.html [ ImageOnlyFailure ]
-fast/forms/color/color-setrangetext.html [ Failure ]
+
+# <input type=color> is not supported on iOS.
 fast/forms/color/input-color-onchange-event.html [ Failure ]
+fast/forms/color/input-color-readonly.html [ Failure ]
 fast/forms/color/input-value-sanitization-color.html [ Failure ]
+fast/forms/color/color-setrangetext.html [ Failure ]
 
 fast/forms/datalist/datalist-fallback-content.html [ ImageOnlyFailure ]
 fast/forms/datalist/datalist-nonoption-child.html [ Failure ]
index f8d8297..263dafe 100644 (file)
@@ -77,6 +77,7 @@ plugins/unavailable-plugin-indicator-obscurity.html
 # Color input is not yet implemented on Mac WK1. Currently, using it erroneously triggers an ASSERT_NOT_REACHED.
 webkit.org/b/119094 fast/forms/color/input-color-onchange-event.html [ Skip ]
 webkit.org/b/119094 fast/forms/color/color-suggestion-picker-crash-on-set-value.html [ Skip ]
+webkit.org/b/119094 fast/forms/color/input-color-readonly.html [ Skip ]
 
 # DumpRenderTree doesn't support logging calls to runOpenPanel.
 fast/forms/file/open-file-panel.html [ Skip ]
index e8fea24..bcb7d7b 100644 (file)
@@ -1,3 +1,24 @@
+2017-02-19  Chris Dumez  <cdumez@apple.com>
+
+        <input type=color readonly> doesn't act per spec
+        https://bugs.webkit.org/show_bug.cgi?id=168421
+        <rdar://problem/30593185>
+
+        Reviewed by Ryosuke Niwa.
+
+        The 'readonly' attribute should not apply to <input type=color> as per the
+        HTML specification:
+        - https://html.spec.whatwg.org/#the-input-element:attr-input-readonly-3
+
+        Chrome / Firefox and Edge already behave as per the specification.
+
+        Tests: fast/forms/color/input-color-disabled.html
+               fast/forms/color/input-color-readonly.html
+
+        * html/ColorInputType.cpp:
+        (WebCore::ColorInputType::handleDOMActivateEvent):
+        (WebCore::ColorInputType::didChooseColor):
+
 2017-02-19  Commit Queue  <commit-queue@webkit.org>
 
         Unreviewed, rolling out r212466.
index 50e1fcb..d03f678 100644 (file)
@@ -148,7 +148,7 @@ void ColorInputType::setValue(const String& value, bool valueChanged, TextFieldE
 
 void ColorInputType::handleDOMActivateEvent(Event& event)
 {
-    if (element().isDisabledOrReadOnly() || !element().renderer())
+    if (element().isDisabledFormControl() || !element().renderer())
         return;
 
     if (!ScriptController::processingUserGesture())
@@ -186,7 +186,7 @@ bool ColorInputType::shouldResetOnDocumentActivation()
 
 void ColorInputType::didChooseColor(const Color& color)
 {
-    if (element().isDisabledOrReadOnly() || color == valueAsColor())
+    if (element().isDisabledFormControl() || color == valueAsColor())
         return;
     EventQueueScope scope;
     element().setValueFromRenderer(color.serialized());