Support title attribute for pattern validation errors

https://bugs.webkit.org/show_bug.cgi?id=258301
rdar://111394402

Reviewed by Aditya Keerthi.

The HTML Standard suggests that the title attribute can be used to
augment the message presented to the end user. As this is not trusted
UI space this seems reasonable (JavaScript has full control over this
UI) and also matches other browsers.

* LayoutTests/fast/forms/validation-messages-expected.txt:
* LayoutTests/fast/forms/validation-messages.html:
* LayoutTests/platform/ios-wk2/fast/forms/validation-messages-expected.txt:
* Source/WebCore/en.lproj/Localizable.strings:
* Source/WebCore/html/InputType.cpp:
(WebCore::InputType::validationMessage const):
* Source/WebCore/platform/LocalizedStrings.cpp:
(WebCore::validationMessagePatternMismatchText):
* Source/WebCore/platform/LocalizedStrings.h:

Canonical link: https://commits.webkit.org/266311@main

LayoutTests/fast/forms/validation-messages-expected.txt

@@ -6,6 +6,7 @@ Required file input:
 Required email input:
 Required url input:
 Required input with pattern:
+Required input with pattern and title:
 Required input with minlength=100:
 Required range with min=5:
 Required range with max=5:
@@ -21,6 +22,7 @@ PASS message is "Select a file"
 PASS message is "Enter an email address"
 PASS message is "Enter a URL"
 PASS message is "Match the requested format"
+PASS message is "Match the requested format: UI testing is awesome"
 PASS message is "Use at least 100 characters"
 PASS message is "Value must be greater than or equal to 5"
 PASS message is "Value must be less than or equal to 5"

LayoutTests/fast/forms/validation-messages.html

@@ -26,6 +26,16 @@
 <form>
   Required input with pattern: <input type="text" value="1" pattern="[a-z]" required><input id="input_with_pattern_submit" type="submit">
 </form>
+<form>
+  Required input with pattern and title: <input type="text" value="1" pattern="[a-z]" required title="   
+  UI
+  
+  testing
+  
+      is
+      
+          awesome    "><input id="input_with_pattern_title_submit" type="submit">
+</form>
 <form>
   Required input with minlength=100: <input type="text" minlength=100 id="field_with_minlength" required><input id="input_with_minlength_submit" type="submit">
 </form>
@@ -52,6 +62,7 @@
     ['required_email_submit', 'Enter an email address'],
     ['required_url_submit', 'Enter a URL'],
     ['input_with_pattern_submit', 'Match the requested format'],
+    ['input_with_pattern_title_submit', 'Match the requested format: UI testing is awesome'],
     ['input_with_minlength_submit', 'Use at least 100 characters'],
     ['range_with_min_submit', 'Value must be greater than or equal to 5'],
     ['range_with_max_submit', 'Value must be less than or equal to 5'],

LayoutTests/platform/ios-wk2/fast/forms/validation-messages-expected.txt

@@ -6,6 +6,7 @@ Required file input:
 Required email input:
 Required url input:
 Required input with pattern:
+Required input with pattern and title:
 Required input with minlength=100:
 Required range with min=5:
 Required range with max=5:
@@ -21,6 +22,7 @@ PASS message is "Select a file"
 PASS message is "Enter an email address"
 PASS message is "Enter a URL"
 PASS message is "Match the requested format"
+PASS message is "Match the requested format: UI testing is awesome"
 FAIL message should be Use at least 100 characters. Was Fill out this field.
 PASS message is "Value must be greater than or equal to 5"
 PASS message is "Value must be less than or equal to 5"

Source/WebCore/en.lproj/Localizable.strings

@@ -757,6 +757,12 @@
 /* Validation message for input form controls requiring a constrained value according to pattern */
 "Match the requested format" = "Match the requested format";
 
+/* Validation message for input form controls requiring a constrained value according to pattern followed by a website-provided description of the pattern */
+"Match the requested format: %@" = "Match the requested format: %@";
+
+/* Validation message for input form controls requiring a constrained value according to pattern followed by a website-provided description of the pattern */
+"Match the requested format: %s" = "Match the requested format: %s";
+
 /* Malware confirmation dialog */
 "Merely visiting a site is sufficient for malware to install itself and harm your computer." = "Merely visiting a site is sufficient for malware to install itself and harm your computer.";
 

Source/WebCore/html/InputType.cpp

@@ -564,8 +564,12 @@ String InputType::validationMessage() const
     if (typeMismatch())
         return typeMismatchText();
 
-    if (patternMismatch(value))
-        return validationMessagePatternMismatchText();
+    if (patternMismatch(value)) {
+        auto title = element()->attributeWithoutSynchronization(HTMLNames::titleAttr).string().trim(isASCIIWhitespace).simplifyWhiteSpace(isASCIIWhitespace);
+        if (title.isEmpty())
+            return validationMessagePatternMismatchText();
+        return validationMessagePatternMismatchText(title);
+    }
 
     if (element()->tooShort())
         return validationMessageTooShortText(value.length(), element()->minLength());

Source/WebCore/platform/LocalizedStrings.cpp

@@ -1195,6 +1195,18 @@ String validationMessagePatternMismatchText()
     return WEB_UI_STRING("Match the requested format", "Validation message for input form controls requiring a constrained value according to pattern");
 }
 
+String validationMessagePatternMismatchText(const String& title)
+{
+#if PLATFORM(COCOA)
+    return WEB_UI_FORMAT_CFSTRING("Match the requested format: %@", "Validation message for input form controls requiring a constrained value according to pattern followed by a website-provided description of the pattern", title.createCFString().get());
+#elif USE(GLIB)
+    return WEB_UI_FORMAT_STRING("Match the requested format: %s", "Validation message for input form controls requiring a constrained value according to pattern followed by a website-provided description of the pattern", title.utf8().data());
+#else
+    UNUSED_PARAM(title);
+    return validationMessagePatternMismatchText();
+#endif
+}
+
 #if !PLATFORM(GTK)
 String validationMessageTooShortText(int, int minLength)
 {

Source/WebCore/platform/LocalizedStrings.h

@@ -320,6 +320,7 @@ namespace WebCore {
     String validationMessageTypeMismatchForMultipleEmailText();
     String validationMessageTypeMismatchForURLText();
     String validationMessagePatternMismatchText();
+    String validationMessagePatternMismatchText(const String& title);
     String validationMessageTooShortText(int valueLength, int minLength);
     String validationMessageTooLongText(int valueLength, int maxLength);
     String validationMessageRangeUnderflowText(const String& minimum);