valid-invalid.html (6677B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8> 5 <title>Selector: pseudo-classes (:valid, :invalid)</title> 6 <link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org" id=link1> 7 <link rel=help href="https://html.spec.whatwg.org/multipage/#pseudo-classes" id=link2> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="utils.js"></script> 11 <style> 12 #styleTests form, #styleTests fieldset, #failExample { background-color:red; } 13 #styleTests > :valid, #validExample { background-color:green; } 14 #styleTests > :invalid, #invalidExample { background-color:lime; } 15 </style> 16 </head> 17 <body> 18 <div id="log"></div> 19 <div id='simpleConstraints'> 20 <input type=text id=text1 value="foobar" required> 21 <input type=text id=text2 required> 22 </div> 23 <div id='FormSelection'> 24 <form id=form1> 25 <input type=text id=text3 value="foobar" required> 26 </form> 27 <form id=form2> 28 <input type=text id=text4 required> 29 </form> 30 </div> 31 <div id='FieldSetSelection'> 32 <fieldset id=fieldset1> 33 <input type=text id=text5 value="foobar" required> 34 </fieldset> 35 <fieldset id=fieldset2> 36 <input type=text id=text6 required> 37 </fieldset> 38 </div> 39 <div id='patternConstraints'> 40 <input type=text id=text7 value="AAA" pattern="[0-9][A-Z]{3}"> 41 <input type=text id=text8 value="0AAA" pattern="[0-9][A-Z]{3}"> 42 </div> 43 <div id='numberConstraints'> 44 <input type=number id=number1 value=0 min=1> 45 <input type=number id=number2 value=1 min=1> 46 </div> 47 <div id='styleTests'> 48 <form> 49 </form> 50 <form> 51 <input type=text min=8 value=4> 52 </form> 53 <form> 54 <input type=number min=8 value=4> 55 </form> 56 <fieldset> 57 </fieldset> 58 <fieldset> 59 <input type=text min=8 value=4> 60 </fieldset> 61 <fieldset> 62 <input type=number min=8 value=4> 63 </fieldset> 64 <div id='validExample'></div> 65 <div id='invalidExample'></div> 66 <div id='failExample'></div> 67 </div> 68 <script> 69 testSelectorIdsMatch("#simpleConstraints :valid", ["text1"], "':valid' matches elements that satisfy their constraints"); 70 71 testSelectorIdsMatch("#FormSelection :valid", ["form1", "text3"], "':valid' matches form elements that are not the form owner of any elements that themselves are candidates for constraint validation but do not satisfy their constraints"); 72 73 testSelectorIdsMatch("#FieldSetSelection :valid", ["fieldset1", "text5"], "':valid' matches fieldset elements that have no descendant elements that themselves are candidates for constraint validation but do not satisfy their constraints"); 74 75 testSelectorIdsMatch("#patternConstraints :valid", [ "text8" ], "':valid' matches elements that satisfy their pattern constraints"); 76 77 testSelectorIdsMatch("#numberConstraints :valid", [ "number2" ], "':valid' matches elements that satisfy their number constraints"); 78 79 80 testSelectorIdsMatch("#simpleConstraints :invalid", ["text2"], "':invalid' matches elements that do not satisfy their simple text constraints"); 81 82 testSelectorIdsMatch("#FormSelection :invalid", ["form2", "text4"], "':invalid' matches form elements that are the form owner of one or more elements that themselves are candidates for constraint validation but do not satisfy their constraints"); 83 84 testSelectorIdsMatch("#FieldSetSelection :invalid", ["fieldset2", "text6"], "':invalid' matches fieldset elements that have of one or more descendant elements that themselves are candidates for constraint validation but do not satisfy their constraints"); 85 86 testSelectorIdsMatch("#patternConstraints :invalid", ["text7"], "':invalid' matches elements that do not satisfy their pattern constraints"); 87 88 testSelectorIdsMatch("#numberConstraints :invalid", ["number1"], "':invalid' matches elements that do not satisfy their number constraints"); 89 90 document.getElementById("text7").value="0BBB"; 91 testSelectorIdsMatch("#patternConstraints :valid", [ "text7", "text8" ], "':valid' matches new elements that satisfy their constraints"); 92 testSelectorIdsMatch("#patternConstraints :invalid", [], "':invalid' doesn't match new elements that satisfy their constraints"); 93 94 document.getElementById("text8").value="BBB"; 95 testSelectorIdsMatch("#patternConstraints :valid", ["text7"], "':valid' doesn't match new elements that do not satisfy their constraints"); 96 testSelectorIdsMatch("#patternConstraints :invalid", ["text8"], "':invalid' matches new elements that do not satisfy their constraints"); 97 98 function getBGColor(elem) { 99 return getComputedStyle(elem).backgroundColor; 100 } 101 102 function testStyles(type) { 103 var elems = document.querySelectorAll("#styleTests " + type), 104 empty = elems[0], 105 valid = elems[1], 106 invalid = elems[2], 107 validInput = valid.querySelector("input"), 108 invalidInput = invalid.querySelector("input"), 109 expectedValidBGColor = getBGColor(document.getElementById("validExample")), 110 expectedInvalidBGColor = getBGColor(document.getElementById("invalidExample")), 111 expectedFailBGColor = getBGColor(document.getElementById("failExample")); 112 113 test(function() { 114 assert_equals(getBGColor(empty), expectedValidBGColor, "wrong background-color"); 115 }, 'empty ' + type + ' correctly styled on page-load'); 116 117 test(function() { 118 assert_equals(getBGColor(valid), expectedValidBGColor, "wrong background-color"); 119 }, 'valid ' + type + ' correctly styled on page-load'); 120 test(function() { 121 assert_equals(getBGColor(invalid), expectedInvalidBGColor, "wrong background-color"); 122 }, 'invalid ' + type + ' correctly styled on page-load'); 123 124 test(function() { 125 empty.appendChild(validInput.cloneNode()); 126 assert_equals(getBGColor(empty), expectedValidBGColor, "wrong background-color"); 127 }, 'programmatically adding valid to empty ' + type + ' results in correct style'); 128 test(function() { 129 empty.appendChild(invalidInput.cloneNode()); 130 assert_equals(getBGColor(empty), expectedInvalidBGColor, "wrong background-color"); 131 }, 'programmatically adding invalid to empty ' + type + ' results in correct style'); 132 133 validInput.type = "number"; 134 invalidInput.type = "text"; 135 test(function() { 136 assert_equals(getBGColor(valid), expectedInvalidBGColor, "wrong background-color"); 137 }, 'programmatically-invalidated ' + type + ' correctly styled'); 138 test(function() { 139 assert_equals(getBGColor(invalid), expectedValidBGColor, "wrong background-color"); 140 }, 'programmatically-validated ' + type + ' correctly styled'); 141 } 142 test(testStyles.bind(undefined, "form"), ":valid/:invalid styling for <form>"); 143 test(testStyles.bind(undefined, "fieldset"), ":valid/:invalid styling for <fieldset>"); 144 </script> 145 </body> 146 </html>