Skip to content

Commit 000b1c6

Browse files
mathiasbynensmathiasbynens
authored
HTML: tests for <input pattern> using the RegExp v flag
HTML PR: whatwg/html#7908.
1 parent e5b0389 commit 000b1c6

File tree

2 files changed

+85
-8
lines changed

2 files changed

+85
-8
lines changed

‎html/semantics/forms/constraints/form-validation-validity-patternMismatch.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,14 +17,15 @@
1717
{conditions: {pattern: null, value: "abc"}, expected: false, name: "[target] The pattern attribute is not set"},
1818
{conditions: {pattern: "[A-Z]+", value: ""}, expected: false, name: "[target] The value attibute is empty string"},
1919
{conditions: {pattern: "[A-Z]{1}", value: "A"}, expected: false, name: "[target] The value attribute matches the pattern attribute"},
20-
{conditions: {pattern: "[A-Z]+", value: "\u0041\u0042\u0043"}, expected: false, name: "[target] The value(ABC) in unicode attribute matches the pattern attribute"},
20+
{conditions: {pattern: "[A-Z]+", value: "\x41\x42\x43"}, expected: false, name: "[target] The value(ABC) in unicode attribute matches the pattern attribute"},
2121
{conditions: {pattern: "[a-z]{3,}", value: "ABCD"}, expected: true, name: "[target] The value attribute mismatches the pattern attribute"},
2222
{conditions: {pattern: "[A-Z]+", value: "ABC123"}, expected: true, name: "[target] The value attribute mismatches the pattern attribute even when a subset matches"},
2323
{conditions: {pattern: "(abc", value: "de"}, expected: false, name: "[target] Invalid regular expression gets ignored"},
24+
{conditions: {pattern: "[(]", value: "x"}, expected: false, name: "[target] Invalid `v` regular expression gets ignored"},
2425
{conditions: {pattern: "a)(b", value: "de"}, expected: false, name: "[target] The pattern attribute tries to escape a group"},
2526
{conditions: {pattern: "a\\u{10FFFF}", value: "a\u{10FFFF}"}, expected: false, name: "[target] The pattern attribute uses Unicode features"},
26-
{conditions: {pattern: "\\u1234\\cx[5-[]{2}", value: "\u1234\x18[6"}, expected: false, name: "[target] The value attribute matches JavaScript-specific regular expression"},
27-
{conditions: {pattern: "\\u1234\\cx[5-[]{2}", value: "\u1234\x18[4"}, expected: true, name: "[target] The value attribute mismatches JavaScript-specific regular expression"},
27+
{conditions: {pattern: "\\u1234\\cx[5-\\[]{2}", value: "\u1234\x18[6"}, expected: false, name: "[target] The value attribute matches JavaScript-specific regular expression"},
28+
{conditions: {pattern: "\\u1234\\cx[5-\\[]{2}", value: "\u1234\x18[4"}, expected: true, name: "[target] The value attribute mismatches JavaScript-specific regular expression"},
2829
]
2930
},
3031
{
@@ -34,14 +35,15 @@
3435
{conditions: {multiple: true, pattern: null, value: "abc,abc"}, expected: false, name: "[target] The pattern attribute is not set, if multiple is present"},
3536
{conditions: {multiple: true, pattern: "[A-Z]+", value: ""}, expected: false, name: "[target] The value attibute is empty string, if multiple is present"},
3637
{conditions: {multiple: true, pattern: "[A-Z]{1}", value: "A,A"}, expected: false, name: "[target] The value attribute matches the pattern attribute, if multiple is present"},
37-
{conditions: {multiple: true, pattern: "[A-Z]+", value: "\u0041\u0042\u0043,\u0041\u0042\u0043"}, expected: false, name: "[target] The value(ABC) in unicode attribute matches the pattern attribute, if multiple is present"},
38+
{conditions: {multiple: true, pattern: "[A-Z]+", value: "\x41\x42\x43,\x41\x42\x43"}, expected: false, name: "[target] The value(ABC) in unicode attribute matches the pattern attribute, if multiple is present"},
3839
{conditions: {multiple: true, pattern: "[a-z]{3,}", value: "abcd,ABCD"}, expected: true, name: "[target] The value attribute mismatches the pattern attribute, if multiple is present"},
3940
{conditions: {multiple: true, pattern: "[A-Z]+", value: "ABCD,ABC123"}, expected: true, name: "[target] The value attribute mismatches the pattern attribute even when a subset matches, if multiple is present"},
4041
{conditions: {multiple: true, pattern: "(abc", value: "de,de"}, expected: false, name: "[target] Invalid regular expression gets ignored, if multiple is present"},
42+
{conditions: {multiple: true, pattern: "[(]", value: "x"}, expected: false, name: "[target] Invalid `v` regular expression gets ignored, if multiple is present"},
4143
{conditions: {multiple: true, pattern: "a)(b", value: "de,de"}, expected: false, name: "[target] The pattern attribute tries to escape a group, if multiple is present"},
4244
{conditions: {multiple: true, pattern: "a\\u{10FFFF}", value: "a\u{10FFFF},a\u{10FFFF}"}, expected: false, name: "[target] The pattern attribute uses Unicode features, if multiple is present"},
43-
{conditions: {multiple: true, pattern: "\\u1234\\cx[5-[]{2}", value: "\u1234\x18[6,\u1234\x18[Z"}, expected: false, name: "[target] The value attribute matches JavaScript-specific regular expression, if multiple is present"},
44-
{conditions: {multiple: true, pattern: "\\u1234\\cx[5-[]{2}", value: "\u1234\x18[4,\u1234\x18[6"}, expected: true, name: "[target] The value attribute mismatches JavaScript-specific regular expression, if multiple is present"},
45+
{conditions: {multiple: true, pattern: "\\u1234\\cx[5-\\[]{2}", value: "\u1234\x18[6,\u1234\x18[Z"}, expected: false, name: "[target] The value attribute matches JavaScript-specific regular expression, if multiple is present"},
46+
{conditions: {multiple: true, pattern: "\\u1234\\cx[5-\\[]{2}", value: "\u1234\x18[4,\u1234\x18[6"}, expected: true, name: "[target] The value attribute mismatches JavaScript-specific regular expression, if multiple is present"},
4547
{conditions: {multiple: true, pattern: "a,", value: "a,"}, expected: true, name: "[target] Commas should be stripped from regex input, if multiple is present"},
4648
]
4749
}

‎html/semantics/forms/the-input-element/pattern_attribute.html‎

Lines changed: 77 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,45 @@
1111
<h1><code>pattern</code> attribute</h1>
1212
<div style="display: none">
1313
<input pattern="[a-z]{3}" value="abcd" id="basic">
14+
1415
<input pattern="a.b" value="a&#x1D306;b" id="unicode-code-points">
15-
<input pattern="\p{ASCII_Hex_Digit}+" value="c0ff33" id="unicode-property-escape">
16+
<input pattern="\p{ASCII_Hex_Digit}+" value="c0ff33" id="unicode-property">
17+
18+
<input pattern="\p{RGI_Emoji}+" value="&#x1F618;&#x1F48B;" id="unicode-property-of-strings">
19+
<input pattern="[\p{ASCII_Hex_Digit}--[Ff]]" value="0123456789abcdefABCDEF" id="set-difference">
20+
<input pattern="[_\q{a|bc|def}]" value="q" id="string-literal">
21+
22+
<div class="breaking-changes-from-u-to-v">
23+
<!-- Unescaped special characters in character classes. -->
24+
<input pattern="[(]" value="foo">
25+
<input pattern="[)]" value="foo">
26+
<input pattern="[[]" value="foo">
27+
<input pattern="[{]" value="foo">
28+
<input pattern="[}]" value="foo">
29+
<input pattern="[/]" value="foo">
30+
<input pattern="[-]" value="foo">
31+
<input pattern="[|]" value="foo">
32+
<!-- Double punctuators in character classes. -->
33+
<input pattern="[&&]" value="foo">
34+
<input pattern="[!!]" value="foo">
35+
<input pattern="[##]" value="foo">
36+
<input pattern="[$$]" value="foo">
37+
<input pattern="[%%]" value="foo">
38+
<input pattern="[**]" value="foo">
39+
<input pattern="[++]" value="foo">
40+
<input pattern="[,,]" value="foo">
41+
<input pattern="[..]" value="foo">
42+
<input pattern="[::]" value="foo">
43+
<input pattern="[;;]" value="foo">
44+
<input pattern="[<<]" value="foo">
45+
<input pattern="[==]" value="foo">
46+
<input pattern="[>>]" value="foo">
47+
<input pattern="[??]" value="foo">
48+
<input pattern="[@@]" value="foo">
49+
<input pattern="[``]" value="foo">
50+
<input pattern="[~~]" value="foo">
51+
<input pattern="[_^^]" value="foo">
52+
</div>
1653
</div>
1754
<div id="log"></div>
1855
<script>
@@ -24,6 +61,7 @@ <h1><code>pattern</code> attribute</h1>
2461

2562
assert_inherits(input, "validity");
2663
assert_false(input.validity.valid);
64+
assert_true(input.validity.patternMismatch);
2765

2866
assert_true(input.matches(":invalid"));
2967
}, "basic <input pattern> support");
@@ -32,11 +70,48 @@ <h1><code>pattern</code> attribute</h1>
3270
const input = document.querySelector("#unicode-code-points");
3371
assert_true(input.validity.valid);
3472
assert_true(input.matches(":valid"));
73+
assert_false(input.validity.patternMismatch);
3574
}, "<input pattern> is Unicode code point-aware");
3675

3776
test(() => {
38-
const input = document.querySelector("#unicode-property-escape");
77+
const input = document.querySelector("#unicode-property");
3978
assert_true(input.validity.valid);
4079
assert_true(input.matches(":valid"));
80+
assert_false(input.validity.patternMismatch);
4181
}, "<input pattern> supports Unicode property escape syntax");
82+
83+
test(() => {
84+
const input = document.querySelector("#unicode-property-of-strings");
85+
assert_true(input.validity.valid);
86+
assert_true(input.matches(":valid"));
87+
assert_false(input.validity.patternMismatch);
88+
}, "<input pattern> supports Unicode property escape syntax for properties of strings");
89+
90+
test(() => {
91+
const input = document.querySelector("#set-difference");
92+
assert_false(input.validity.valid);
93+
assert_false(input.matches(":valid"));
94+
assert_true(input.validity.patternMismatch);
95+
}, "<input pattern> supports set difference syntax");
96+
97+
test(() => {
98+
const input = document.querySelector("#string-literal");
99+
assert_false(input.validity.valid);
100+
assert_true(input.validity.patternMismatch);
101+
assert_true(input.matches(":invalid"));
102+
}, "<input pattern> supports string literal syntax");
103+
104+
test(() => {
105+
const inputs = document.querySelectorAll(".breaking-changes-from-u-to-v input");
106+
// These examples are all written such that they’re all `:invalid`
107+
// when using `u`, but would become `:valid` when using `v` because
108+
// the pattern would error, in turn resulting in
109+
// `validity.valid === true`.
110+
for (const input of inputs) {
111+
const html = input.outerHTML;
112+
assert_true(input.validity.valid, `${html} should be valid`);
113+
assert_true(input.matches(":valid"), `${html} should match \`:valid\``);
114+
assert_false(input.validity.patternMismatch, `${html} should not trigger a pattern mismatch`);
115+
}
116+
}, "<input pattern> enables the RegExp v flag");
42117
</script>

0 commit comments

Comments
 (0)