pattern_attribute.html (4817B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>pattern attribute</title> 4 <meta name=viewport content="width=device-width"> 5 <link rel="author" title="Fabrice Clari" href="mailto:f.clari@inno-group.com"> 6 <link rel="author" title="Dimitri Bocquet" href="mailto:Dimitri.Bocquet@mosquito-fp7.eu"> 7 <link rel="author" title="Mathias Bynens" href="https://mathiasbynens.be/"> 8 <link rel="help" href="https://html.spec.whatwg.org/multipage/#attr-input-pattern"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <h1><code>pattern</code> attribute</h1> 12 <div style="display: none"> 13 <input pattern="[a-z]{3}" value="abcd" id="basic"> 14 15 <input pattern="a.b" value="a𝌆b" id="unicode-code-points"> 16 <input pattern="\p{ASCII_Hex_Digit}+" value="c0ff33" id="unicode-property"> 17 18 <input pattern="\p{RGI_Emoji}+" value="😘💋" 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> 53 </div> 54 <div id="log"></div> 55 <script> 56 test(() => { 57 const input = document.querySelector("#basic"); 58 59 assert_idl_attribute(input, "pattern"); 60 assert_equals(input.pattern, "[a-z]{3}"); 61 62 assert_inherits(input, "validity"); 63 assert_false(input.validity.valid); 64 assert_true(input.validity.patternMismatch); 65 66 assert_true(input.matches(":invalid")); 67 }, "basic <input pattern> support"); 68 69 test(() => { 70 const input = document.querySelector("#unicode-code-points"); 71 assert_true(input.validity.valid); 72 assert_true(input.matches(":valid")); 73 assert_false(input.validity.patternMismatch); 74 }, "<input pattern> is Unicode code point-aware"); 75 76 test(() => { 77 const input = document.querySelector("#unicode-property"); 78 assert_true(input.validity.valid); 79 assert_true(input.matches(":valid")); 80 assert_false(input.validity.patternMismatch); 81 }, "<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"); 117 </script>