<button> and <select> elements with "readonly" attribute shouldn't be…

… barred from constraint validation https://bugs.webkit.org/show_bug.cgi?id=250037 Reviewed by Aditya Keerthi. Per spec, only <input> [1], <textarea> [2], and form-associated custom elements [3] are barred from constraint validation if "readonly" attribute is present. This change makes "readonly" attribute check conditional based on readOnlyBarsFromConstraintValidation(). We can't use supportsReadonly() instead as it reports `false` for certain <input> types, violating the spec [1]. Aligns WebKit with Gecko and the spec. Tests: imported/w3c/web-platform-tests/html/semantics/forms/the-button-element/button-willvalidate-readonly-attribute.html imported/w3c/web-platform-tests/html/semantics/forms/the-select-element/select-willvalidate-readonly-attribute.html [1] https://html.spec.whatwg.org/multipage/input.html#the-readonly-attribute:barred-from-constraint-validation [2] https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element:barred-from-constraint-validation [3] https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-core-concepts:barred-from-constraint-validation * LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-button-element/button-willvalidate-readonly-attribute-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-button-element/button-willvalidate-readonly-attribute.html: Added. * LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-select-element/select-willvalidate-readonly-attribute-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/html/semantics/forms/the-select-element/select-willvalidate-readonly-attribute.html: Added. * Source/WebCore/html/HTMLFormControlElement.h * Source/WebCore/html/HTMLFormControlElement.cpp: (WebCore::HTMLFormControlElement::computeWillValidate const): * Source/WebCore/html/HTMLTextFormControlElement.h: Canonical link: https://commits.webkit.org/258485@main
WebKit · Jan 5, 2023 · a4eb84d · a4eb84d
1 parent 096f188
commit a4eb84d
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 2 deletions.
diff --git a/...ml/semantics/forms/the-button-element/button-willvalidate-readonly-attribute-expected.txt b/...ml/semantics/forms/the-button-element/button-willvalidate-readonly-attribute-expected.txt
@@ -0,0 +1,4 @@
+1 2
+
+PASS Button element with "readonly" attribute shouldn't be barred from constraint validation
+
diff --git a/...tests/html/semantics/forms/the-button-element/button-willvalidate-readonly-attribute.html b/...tests/html/semantics/forms/the-button-element/button-willvalidate-readonly-attribute.html
@@ -0,0 +1,14 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Button element with "readonly" attribute shouldn't be barred from constraint validation</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<button id="implicitSubmitButton" readonly>1</button>
+<button id="explicitSubmitButton" readonly type="submit">2</button>
+<script>
+  test(() => {
+    assert_true(implicitSubmitButton.willValidate);
+    assert_true(explicitSubmitButton.willValidate);
+  });
+</script>
diff --git a/...ml/semantics/forms/the-select-element/select-willvalidate-readonly-attribute-expected.txt b/...ml/semantics/forms/the-select-element/select-willvalidate-readonly-attribute-expected.txt
@@ -0,0 +1,4 @@
+
+
+PASS Select element with "readonly" attribute shouldn't be barred from constraint validation
+
diff --git a/...tests/html/semantics/forms/the-select-element/select-willvalidate-readonly-attribute.html b/...tests/html/semantics/forms/the-select-element/select-willvalidate-readonly-attribute.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<meta charset="utf-8">
+<title>Select element with "readonly" attribute shouldn't be barred from constraint validation</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<select id="singleSelect" readonly>
+  <option>1
+  <option>2
+</select>
+
+<select id="multiSelect" readonly multiple>
+  <option>a
+  <option>b
+  <option>c
+  <option>d
+</select>
+
+<script>
+  test(() => {
+    assert_true(singleSelect.willValidate);
+    assert_true(multiSelect.willValidate);
+  });
+</script>
diff --git a/Source/WebCore/html/HTMLFormControlElement.cpp b/Source/WebCore/html/HTMLFormControlElement.cpp
@@ -401,8 +401,9 @@ bool HTMLFormControlElement::computeWillValidate() const
         m_dataListAncestorState = NotInsideDataList;
 #endif
     }
-    // readonly bars constraint validation for *all* <input> elements, regardless of the <input> type, for compat reasons.
-    return m_dataListAncestorState == NotInsideDataList && !isDisabledFormControl() && !m_hasReadOnlyAttribute;
+    // readonly attribute bars *all* <input> elements from constraint validation, regardless of the <input> type, for compat reasons:
+    // https://html.spec.whatwg.org/multipage/input.html#the-readonly-attribute:barred-from-constraint-validation
+    return m_dataListAncestorState == NotInsideDataList && !isDisabledFormControl() && !(m_hasReadOnlyAttribute && readOnlyBarsFromConstraintValidation());
 }
 
 bool HTMLFormControlElement::willValidate() const

diff --git a/Source/WebCore/html/HTMLFormControlElement.h b/Source/WebCore/html/HTMLFormControlElement.h
@@ -163,6 +163,7 @@ class HTMLFormControlElement : public LabelableElement, public FormListedElement
     // This must be called any time the result of willValidate() has changed.
     void updateWillValidateAndValidity();
     virtual bool computeWillValidate() const;
+    virtual bool readOnlyBarsFromConstraintValidation() const { return false; }
 
     bool validationMessageShadowTreeContains(const Node&) const;
 

diff --git a/Source/WebCore/html/HTMLTextFormControlElement.h b/Source/WebCore/html/HTMLTextFormControlElement.h
@@ -117,6 +117,7 @@ class HTMLTextFormControlElement : public HTMLFormControlElementWithState {
 
     void disabledStateChanged() override;
     void readOnlyStateChanged() override;
+    bool readOnlyBarsFromConstraintValidation() const final { return true; }
 
     void updateInnerTextElementEditability();