1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
<!DOCTYPE html>
<meta charset="utf-8">
<title>pattern attribute</title>
<meta name=viewport content="width=device-width">
<link rel="author" title="Fabrice Clari" href="mailto:f.clari@inno-group.com">
<link rel="author" title="Dimitri Bocquet" href="mailto:Dimitri.Bocquet@mosquito-fp7.eu">
<link rel="author" title="Mathias Bynens" href="https://mathiasbynens.be/">
<link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-input-pattern">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<h1><code>pattern</code> attribute</h1>
<div style="display: none">
<input pattern="[a-z]{3}" value="abcd" id="basic">
<input pattern="a.b" value="a𝌆b" id="unicode-code-points">
<input pattern="\p{ASCII_Hex_Digit}+" value="c0ff33" id="unicode-property">
<input pattern="\p{RGI_Emoji}+" value="😘💋" id="unicode-property-of-strings">
<input pattern="[\p{ASCII_Hex_Digit}--[Ff]]" value="0123456789abcdefABCDEF" id="set-difference">
<input pattern="[_\q{a|bc|def}]" value="q" id="string-literal">
<div class="breaking-changes-from-u-to-v">
<!-- Unescaped special characters in character classes. -->
<input pattern="[(]" value="foo">
<input pattern="[)]" value="foo">
<input pattern="[[]" value="foo">
<input pattern="[{]" value="foo">
<input pattern="[}]" value="foo">
<input pattern="[/]" value="foo">
<input pattern="[-]" value="foo">
<input pattern="[|]" value="foo">
<!-- Double punctuators in character classes. -->
<input pattern="[&&]" value="foo">
<input pattern="[!!]" value="foo">
<input pattern="[##]" value="foo">
<input pattern="[$$]" value="foo">
<input pattern="[%%]" value="foo">
<input pattern="[**]" value="foo">
<input pattern="[++]" value="foo">
<input pattern="[,,]" value="foo">
<input pattern="[..]" value="foo">
<input pattern="[::]" value="foo">
<input pattern="[;;]" value="foo">
<input pattern="[<<]" value="foo">
<input pattern="[==]" value="foo">
<input pattern="[>>]" value="foo">
<input pattern="[??]" value="foo">
<input pattern="[@@]" value="foo">
<input pattern="[``]" value="foo">
<input pattern="[~~]" value="foo">
<input pattern="[_^^]" value="foo">
</div>
</div>
<div id="log"></div>
<script>
test(() => {
const input = document.querySelector("#basic");
assert_idl_attribute(input, "pattern");
assert_equals(input.pattern, "[a-z]{3}");
assert_inherits(input, "validity");
assert_false(input.validity.valid);
assert_true(input.validity.patternMismatch);
assert_true(input.matches(":invalid"));
}, "basic <input pattern> support");
test(() => {
const input = document.querySelector("#unicode-code-points");
assert_true(input.validity.valid);
assert_true(input.matches(":valid"));
assert_false(input.validity.patternMismatch);
}, "<input pattern> is Unicode code point-aware");
test(() => {
const input = document.querySelector("#unicode-property");
assert_true(input.validity.valid);
assert_true(input.matches(":valid"));
assert_false(input.validity.patternMismatch);
}, "<input pattern> supports Unicode property escape syntax");
test(() => {
const input = document.querySelector("#unicode-property-of-strings");
assert_true(input.validity.valid);
assert_true(input.matches(":valid"));
assert_false(input.validity.patternMismatch);
}, "<input pattern> supports Unicode property escape syntax for properties of strings");
test(() => {
const input = document.querySelector("#set-difference");
assert_false(input.validity.valid);
assert_false(input.matches(":valid"));
assert_true(input.validity.patternMismatch);
}, "<input pattern> supports set difference syntax");
test(() => {
const input = document.querySelector("#string-literal");
assert_false(input.validity.valid);
assert_true(input.validity.patternMismatch);
assert_true(input.matches(":invalid"));
}, "<input pattern> supports string literal syntax");
test(() => {
const inputs = document.querySelectorAll(".breaking-changes-from-u-to-v input");
// These examples are all written such that they’re all `:invalid`
// when using `u`, but would become `:valid` when using `v` because
// the pattern would error, in turn resulting in
// `validity.valid === true`.
for (const input of inputs) {
const html = input.outerHTML;
assert_true(input.validity.valid, `${html} should be valid`);
assert_true(input.matches(":valid"), `${html} should match \`:valid\``);
assert_false(input.validity.patternMismatch, `${html} should not trigger a pattern mismatch`);
}
}, "<input pattern> enables the RegExp v flag");
</script>
|
