LibWeb: Implement the form-control willValidate property

This change — part of the HTML constraint-validation API (aka
“client-side form validation”) — implements the willValidate IDL/DOM
attribute/property for all form controls that support it.

Libraries/LibWeb/HTML/HTMLButtonElement.cpp

@@ -156,6 +156,13 @@ void HTMLButtonElement::activation_behavior(DOM::Event const& event)
         PopoverInvokerElement::popover_target_activation_behaviour(*this, as<DOM::Node>(*event.target()));
 }
 
+// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-willvalidate
+bool HTMLButtonElement::will_validate()
+{
+    // The willValidate attribute's getter must return true, if this element is a candidate for constraint validation
+    return is_candidate_for_constraint_validation();
+}
+
 bool HTMLButtonElement::is_focusable() const
 {
     return enabled();

Libraries/LibWeb/HTML/HTMLButtonElement.h

@@ -44,6 +44,8 @@ public:
 
     virtual void form_associated_element_attribute_changed(FlyString const& name, Optional<String> const& value, Optional<FlyString> const& namespace_) override;
 
+    bool will_validate();
+
     // ^EventTarget
     // https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute:the-button-element
     // https://html.spec.whatwg.org/multipage/interaction.html#focusable-area

Libraries/LibWeb/HTML/HTMLButtonElement.idl

@@ -26,7 +26,7 @@ interface HTMLButtonElement : HTMLElement {
     [CEReactions, ImplementedAs=type_for_bindings, Enumerated=ButtonTypeState] attribute DOMString type;
     [CEReactions, Reflect] attribute DOMString value;
 
-    [FIXME] readonly attribute boolean willValidate;
+    readonly attribute boolean willValidate;
     readonly attribute ValidityState validity;
     [FIXME] readonly attribute DOMString validationMessage;
     [FIXME] boolean checkValidity();

Libraries/LibWeb/HTML/HTMLFieldSetElement.cpp

@@ -88,4 +88,15 @@ GC::Ptr<Layout::Node> HTMLFieldSetElement::create_layout_node(GC::Ref<CSS::Compu
     return heap().allocate<Layout::FieldSetBox>(document(), *this, style);
 }
 
+// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-willvalidate
+bool HTMLFieldSetElement::will_validate()
+{
+    // The willValidate attribute's getter must return true, if this element is a candidate for constraint validation,
+    // and false otherwise (i.e., false if any conditions are barring it from constraint validation).
+    // A submittable element is a candidate for constraint validation
+    // https://html.spec.whatwg.org/multipage/forms.html#category-submit
+    // Submittable elements: button, input, select, textarea, form-associated custom elements [but not fieldset]
+    return false;
+}
+
 }

Libraries/LibWeb/HTML/HTMLFieldSetElement.h

@@ -42,6 +42,8 @@ public:
 
     virtual Optional<ARIA::Role> default_role() const override { return ARIA::Role::group; }
 
+    static bool will_validate();
+
     virtual GC::Ptr<Layout::Node> create_layout_node(GC::Ref<CSS::ComputedProperties>) override;
     Layout::FieldSetBox* layout_node();
     Layout::FieldSetBox const* layout_node() const;

Libraries/LibWeb/HTML/HTMLFieldSetElement.idl

@@ -14,7 +14,7 @@ interface HTMLFieldSetElement : HTMLElement {
 
     [SameObject] readonly attribute HTMLCollection elements;
 
-    [FIXME] readonly attribute boolean willValidate;
+    readonly attribute boolean willValidate;
     [FIXME, SameObject] readonly attribute ValidityState validity;
     [FIXME] readonly attribute DOMString validationMessage;
     [FIXME] boolean checkValidity();

Libraries/LibWeb/HTML/HTMLInputElement.cpp

@@ -2523,6 +2523,13 @@ WebIDL::ExceptionOr<void> HTMLInputElement::step_up_or_down(bool is_down, WebIDL
     return {};
 }
 
+// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-willvalidate
+bool HTMLInputElement::will_validate()
+{
+    // The willValidate attribute's getter must return true, if this element is a candidate for constraint validation
+    return is_candidate_for_constraint_validation();
+}
+
 // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-checkvalidity
 WebIDL::ExceptionOr<bool> HTMLInputElement::check_validity()
 {

Libraries/LibWeb/HTML/HTMLInputElement.h

@@ -149,6 +149,7 @@ public:
     WebIDL::ExceptionOr<void> step_up(WebIDL::Long n = 1);
     WebIDL::ExceptionOr<void> step_down(WebIDL::Long n = 1);
 
+    bool will_validate();
     WebIDL::ExceptionOr<bool> check_validity();
     WebIDL::ExceptionOr<bool> report_validity();
 

Libraries/LibWeb/HTML/HTMLInputElement.idl

@@ -51,7 +51,7 @@ interface HTMLInputElement : HTMLElement {
     undefined stepUp(optional long n = 1);
     undefined stepDown(optional long n = 1);
 
-    [FIXME] readonly attribute boolean willValidate;
+    readonly attribute boolean willValidate;
     readonly attribute ValidityState validity;
     [FIXME] readonly attribute DOMString validationMessage;
     boolean checkValidity();

Libraries/LibWeb/HTML/HTMLObjectElement.cpp

@@ -79,6 +79,17 @@ void HTMLObjectElement::visit_edges(Cell::Visitor& visitor)
     visitor.visit(m_document_observer);
 }
 
+// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-willvalidate
+bool HTMLObjectElement::will_validate()
+{
+    // The willValidate attribute's getter must return true, if this element is a candidate for constraint validation,
+    // and false otherwise (i.e., false if any conditions are barring it from constraint validation).
+    // A submittable element is a candidate for constraint validation
+    // https://html.spec.whatwg.org/multipage/forms.html#category-submit
+    // Submittable elements: button, input, select, textarea, form-associated custom elements [but not object]
+    return false;
+}
+
 void HTMLObjectElement::form_associated_element_attribute_changed(FlyString const& name, Optional<String> const&, Optional<FlyString> const&)
 {
     // https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element

Libraries/LibWeb/HTML/HTMLObjectElement.h

@@ -47,6 +47,8 @@ public:
 
     virtual void visit_edges(Cell::Visitor&) override;
 
+    static bool will_validate();
+
 private:
     HTMLObjectElement(DOM::Document&, DOM::QualifiedName);
 

Libraries/LibWeb/HTML/HTMLObjectElement.idl

@@ -18,7 +18,7 @@ interface HTMLObjectElement : HTMLElement {
     readonly attribute WindowProxy? contentWindow;
     Document? getSVGDocument();
 
-    [FIXME] readonly attribute boolean willValidate;
+    readonly attribute boolean willValidate;
     readonly attribute ValidityState validity;
     [FIXME] readonly attribute DOMString validationMessage;
     [FIXME] boolean checkValidity();

Libraries/LibWeb/HTML/HTMLOutputElement.cpp

@@ -110,4 +110,15 @@ void HTMLOutputElement::clear_algorithm()
     string_replace_all({});
 }
 
+// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-willvalidate
+bool HTMLOutputElement::will_validate()
+{
+    // The willValidate attribute's getter must return true, if this element is a candidate for constraint validation,
+    // and false otherwise (i.e., false if any conditions are barring it from constraint validation).
+    // A submittable element is a candidate for constraint validation
+    // https://html.spec.whatwg.org/multipage/forms.html#category-submit
+    // Submittable elements: button, input, select, textarea, form-associated custom elements [but not output]
+    return false;
+}
+
 }

Libraries/LibWeb/HTML/HTMLOutputElement.h

@@ -57,6 +57,8 @@ public:
     // https://www.w3.org/TR/html-aria/#el-output
     virtual Optional<ARIA::Role> default_role() const override { return ARIA::Role::status; }
 
+    static bool will_validate();
+
 private:
     HTMLOutputElement(DOM::Document&, DOM::QualifiedName);
 

Libraries/LibWeb/HTML/HTMLOutputElement.idl

@@ -15,7 +15,7 @@ interface HTMLOutputElement : HTMLElement {
     [CEReactions] attribute DOMString defaultValue;
     [CEReactions] attribute DOMString value;
 
-    [FIXME] readonly attribute boolean willValidate;
+    readonly attribute boolean willValidate;
     readonly attribute ValidityState validity;
     [FIXME] readonly attribute DOMString validationMessage;
     [FIXME] boolean checkValidity();

Libraries/LibWeb/HTML/HTMLSelectElement.cpp

@@ -695,6 +695,13 @@ void HTMLSelectElement::update_selectedness()
     update_inner_text_element();
 }
 
+// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-willvalidate
+bool HTMLSelectElement::will_validate()
+{
+    // The willValidate attribute's getter must return true, if this element is a candidate for constraint validation
+    return is_candidate_for_constraint_validation();
+}
+
 bool HTMLSelectElement::is_focusable() const
 {
     return enabled();

Libraries/LibWeb/HTML/HTMLSelectElement.h

@@ -58,6 +58,8 @@ public:
 
     Vector<GC::Root<HTMLOptionElement>> list_of_options() const;
 
+    bool will_validate();
+
     // ^EventTarget
     // https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute:the-select-element
     // https://html.spec.whatwg.org/multipage/interaction.html#focusable-area

Libraries/LibWeb/HTML/HTMLSelectElement.idl

@@ -31,7 +31,7 @@ interface HTMLSelectElement : HTMLElement {
     attribute long selectedIndex;
     attribute DOMString value;
 
-    [FIXME] readonly attribute boolean willValidate;
+    readonly attribute boolean willValidate;
     readonly attribute ValidityState validity;
     [FIXME] readonly attribute DOMString validationMessage;
     [FIXME] boolean checkValidity();

Libraries/LibWeb/HTML/HTMLTextAreaElement.cpp

@@ -237,6 +237,13 @@ u32 HTMLTextAreaElement::text_length() const
     return AK::utf16_code_unit_length_from_utf8(api_value());
 }
 
+// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-willvalidate
+bool HTMLTextAreaElement::will_validate()
+{
+    // The willValidate attribute's getter must return true, if this element is a candidate for constraint validation
+    return is_candidate_for_constraint_validation();
+}
+
 // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-cva-checkvalidity
 bool HTMLTextAreaElement::check_validity()
 {

Libraries/LibWeb/HTML/HTMLTextAreaElement.h

@@ -95,6 +95,7 @@ public:
 
     u32 text_length() const;
 
+    bool will_validate();
     bool check_validity();
     bool report_validity();
 

Libraries/LibWeb/HTML/HTMLTextAreaElement.idl

@@ -26,7 +26,7 @@ interface HTMLTextAreaElement : HTMLElement {
     [LegacyNullToEmptyString] attribute DOMString value;
     readonly attribute unsigned long textLength;
 
-    [FIXME] readonly attribute boolean willValidate;
+    readonly attribute boolean willValidate;
     readonly attribute ValidityState validity;
     [FIXME] readonly attribute DOMString validationMessage;
     boolean checkValidity();

Tests/LibWeb/Text/expected/wpt-import/html/semantics/forms/constraints/form-validation-willValidate.txt

@@ -0,0 +1,78 @@
+Harness status: OK
+
+Found 73 tests
+
+73 Pass
+Pass	[INPUT in HIDDEN status] Must be barred from the constraint validation
+Pass	[INPUT in BUTTON status] Must be barred from the constraint validation
+Pass	[INPUT in RESET status] Must be barred from the constraint validation
+Pass	[BUTTON in BUTTON status] Must be barred from the constraint validation
+Pass	[BUTTON in RESET status] Must be barred from the constraint validation
+Pass	[fieldset]  The willValidate attribute must be false since FIELDSET is not a submittable element
+Pass	[output]  The willValidate attribute must be false since OUTPUT is not a submittable element
+Pass	[object]  Must be barred from the constraint validation
+Pass	[INPUT in TEXT status] Must be barred from the constraint validation if it is disabled
+Pass	[INPUT in TEXT status] The willValidate attribute must be true if an element is mutable
+Pass	[INPUT in TEXT status] Must be barred from the constraint validation if it is readonly
+Pass	[INPUT in TEXT status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[INPUT in SEARCH status] Must be barred from the constraint validation if it is disabled
+Pass	[INPUT in SEARCH status] The willValidate attribute must be true if an element is mutable
+Pass	[INPUT in SEARCH status] Must be barred from the constraint validation if it is readonly
+Pass	[INPUT in SEARCH status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[INPUT in TEL status] Must be barred from the constraint validation if it is disabled
+Pass	[INPUT in TEL status] The willValidate attribute must be true if an element is mutable
+Pass	[INPUT in TEL status] Must be barred from the constraint validation if it is readonly
+Pass	[INPUT in TEL status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[INPUT in URL status] Must be barred from the constraint validation if it is disabled
+Pass	[INPUT in URL status] The willValidate attribute must be true if an element is mutable
+Pass	[INPUT in URL status] Must be barred from the constraint validation if it is readonly
+Pass	[INPUT in URL status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[INPUT in EMAIL status] Must be barred from the constraint validation if it is disabled
+Pass	[INPUT in EMAIL status] The willValidate attribute must be true if an element is mutable
+Pass	[INPUT in EMAIL status] Must be barred from the constraint validation if it is readonly
+Pass	[INPUT in EMAIL status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[INPUT in PASSWORD status] Must be barred from the constraint validation if it is disabled
+Pass	[INPUT in PASSWORD status] The willValidate attribute must be true if an element is mutable
+Pass	[INPUT in PASSWORD status] Must be barred from the constraint validation if it is readonly
+Pass	[INPUT in PASSWORD status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[INPUT in DATETIME-LOCAL status] Must be barred from the constraint validation if it is disabled
+Pass	[INPUT in DATETIME-LOCAL status] The willValidate attribute must be true if an element is mutable
+Pass	[INPUT in DATETIME-LOCAL status] Must be barred from the constraint validation if it is readonly
+Pass	[INPUT in DATETIME-LOCAL status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[INPUT in DATE status] Must be barred from the constraint validation if it is disabled
+Pass	[INPUT in DATE status] The willValidate attribute must be true if an element is mutable
+Pass	[INPUT in DATE status] Must be barred from the constraint validation if it is readonly
+Pass	[INPUT in DATE status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[INPUT in MONTH status] Must be barred from the constraint validation if it is disabled
+Pass	[INPUT in MONTH status] The willValidate attribute must be true if an element is mutable
+Pass	[INPUT in MONTH status] Must be barred from the constraint validation if it is readonly
+Pass	[INPUT in MONTH status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[INPUT in WEEK status] Must be barred from the constraint validation if it is disabled
+Pass	[INPUT in WEEK status] The willValidate attribute must be true if an element is mutable
+Pass	[INPUT in WEEK status] Must be barred from the constraint validation if it is readonly
+Pass	[INPUT in WEEK status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[INPUT in TIME status] Must be barred from the constraint validation if it is disabled
+Pass	[INPUT in TIME status] The willValidate attribute must be true if an element is mutable
+Pass	[INPUT in TIME status] Must be barred from the constraint validation if it is readonly
+Pass	[INPUT in TIME status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[INPUT in COLOR status] Must be barred from the constraint validation if it is disabled
+Pass	[INPUT in COLOR status] The willValidate attribute must be true if an element is mutable
+Pass	[INPUT in COLOR status] Must be barred from the constraint validation if it is readonly
+Pass	[INPUT in COLOR status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[INPUT in FILE status] Must be barred from the constraint validation if it is disabled
+Pass	[INPUT in FILE status] The willValidate attribute must be true if an element is mutable
+Pass	[INPUT in FILE status] Must be barred from the constraint validation if it is readonly
+Pass	[INPUT in FILE status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[INPUT in SUBMIT status] Must be barred from the constraint validation if it is disabled
+Pass	[INPUT in SUBMIT status] The willValidate attribute must be true if an element is mutable
+Pass	[INPUT in SUBMIT status] Must be barred from the constraint validation if it is readonly
+Pass	[INPUT in SUBMIT status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[BUTTON in SUBMIT status] Must be barred from the constraint validation
+Pass	[BUTTON in SUBMIT status] The willValidate attribute must be true if an element is mutable
+Pass	[BUTTON in SUBMIT status] The willValidate attribute must be false if it has a datalist ancestor
+Pass	[select]  Must be barred from the constraint validation
+Pass	[select]  The willValidate attribute must be true if an element is mutable
+Pass	[select]  The willValidate attribute must be false if it has a datalist ancestor
+Pass	[textarea]  Must be barred from the constraint validation
+Pass	[textarea]  The willValidate attribute must be true if an element is mutable
+Pass	[textarea]  The willValidate attribute must be false if it has a datalist ancestor

Tests/LibWeb/Text/expected/wpt-import/html/semantics/forms/the-select-element/select-willvalidate-readonly-attribute.txt

@@ -2,5 +2,5 @@ Harness status: OK
 
 Found 1 tests
 
-1 Fail
-Fail	Select element with "readonly" attribute shouldn't be barred from constraint validation
+1 Pass
+Pass	Select element with "readonly" attribute shouldn't be barred from constraint validation

Tests/LibWeb/Text/input/wpt-import/html/semantics/forms/constraints/form-validation-willValidate.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>The constraint validation API Test: element.willValidate</title>
+<link rel="author" title="Intel" href="http://www.intel.com/">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-cva-willvalidate">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+<script src="support/validator.js"></script>
+<div id="log"></div>
+<script>
+  var testElements = [
+    //input in hidden, button and reset status must be barred from the constraint validation
+    {
+      tag: "input",
+      types: ["hidden", "button", "reset"],
+      testData: [{conditions: {}, expected: false, name: "[target] Must be barred from the constraint validation"}]
+    },
+    //button in button and reset status must be barred from the constraint validation
+    {
+      tag: "button",
+      types: ["button", "reset"],
+      testData: [{conditions: {}, expected: false, name: "[target] Must be barred from the constraint validation"}]
+    },
+    // FIELDSET and OUTPUT elements are not "submittable elements" and therefore never validate.
+    {
+      tag: "fieldset",
+      types: [],
+      testData: [{conditions: {}, expected: false, name: "[target] The willValidate attribute must be false since FIELDSET is not a submittable element"}]
+    },
+    {
+      tag: "output",
+      types: [],
+      testData: [{conditions: {}, expected: false, name: "[target] The willValidate attribute must be false since OUTPUT is not a submittable element"}]
+    },
+    //OBJECT, KEYGEN, elements must be barred from the constraint validation
+    {
+      tag: "object",
+      types: [],
+      testData: [{conditions: {}, expected: false, name: "[target] Must be barred from the constraint validation"}]
+    },
+    //If an element is disabled, it is barred from constraint validation.
+    //The willValidate attribute must be true if an element is mutable
+    //If the readonly attribute is specified on an INPUT element, the element is barred from constraint validation.
+    {
+      tag: "input",
+      types: ["text", "search", "tel", "url", "email", "password", "datetime-local", "date", "month", "week", "time"],
+      testData: [
+        {conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation if it is disabled"},
+        {conditions: {disabled: false, readOnly: false}, expected: true, name: "[target] The willValidate attribute must be true if an element is mutable"},
+        {conditions: {readOnly: true}, expected: false, name: "[target] Must be barred from the constraint validation if it is readonly"},
+        {conditions: {disabled: false, readOnly: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"},
+      ]
+    },
+    //In the following cases, the readonly attribute does not apply, however we should still bar the element from constraint validation.
+    {
+      tag: "input",
+      types: ["color", "file", "submit"],
+      testData: [
+        {conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation if it is disabled"},
+        {conditions: {disabled: false, readOnly: false}, expected: true, name: "[target] The willValidate attribute must be true if an element is mutable"},
+        {conditions: {readOnly: true}, expected: false, name: "[target] Must be barred from the constraint validation if it is readonly"},
+        {conditions: {disabled: false, readOnly: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"},
+      ]
+    },
+    {
+      tag: "button",
+      types: ["submit"],
+      testData: [
+        {conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation"},
+        {conditions: {disabled: false}, expected: true, name: "[target] The willValidate attribute must be true if an element is mutable"},
+        {conditions: {disabled: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"}
+      ]
+    },
+    {
+      tag: "select",
+      types: [],
+      testData: [
+        {conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation"},
+        {conditions: {disabled: false}, expected: true, name: "[target] The willValidate attribute must be true if an element is mutable"},
+        {conditions: {disabled: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"}
+      ]
+    },
+    {
+      tag: "textarea",
+      types: [],
+      testData: [,
+        {conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation"},
+        {conditions: {disabled: false}, expected: true, name: "[target] The willValidate attribute must be true if an element is mutable"},
+        {conditions: {disabled: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"}
+      ]
+    }
+  ];
+
+  validator.run_test(testElements, "willValidate");
+</script>