test_bug558788-1.html (4556B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=558788 5 --> 6 <head> 7 <title>Test for Bug 558788</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <script src="/tests/SimpleTest/EventUtils.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 11 <style> 12 input, textarea { background-color: rgb(0,0,0) !important; } 13 :-moz-any(input,textarea):valid { background-color: rgb(0,255,0) !important; } 14 :-moz-any(input,textarea):invalid { background-color: rgb(255,0,0) !important; } 15 </style> 16 </head> 17 <body> 18 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=558788">Mozilla Bug 558788</a> 19 <p id="display"></p> 20 <div id="content"> 21 </div> 22 <pre id="test"> 23 <script type="application/javascript"> 24 25 /** Test for Bug 558788 */ 26 27 /** 28 * This test checks the behavior of :valid and :invalid pseudo-classes 29 * when the user is typing/interacting with the element. 30 * Only <input> and <textarea> elements can have there validity changed by an 31 * user input. 32 */ 33 34 var gContent = document.getElementById('content'); 35 36 function checkValidApplies(elmt) 37 { 38 is(window.getComputedStyle(elmt).getPropertyValue('background-color'), 39 "rgb(0, 255, 0)", ":valid pseudo-class should apply"); 40 } 41 42 function checkInvalidApplies(elmt, aTodo) 43 { 44 if (aTodo) { 45 todo_is(window.getComputedStyle(elmt).getPropertyValue('background-color'), 46 "rgb(255, 0, 0)", ":invalid pseudo-class should apply"); 47 return; 48 } 49 is(window.getComputedStyle(elmt).getPropertyValue('background-color'), 50 "rgb(255, 0, 0)", ":invalid pseudo-class should apply"); 51 } 52 53 function checkMissing(elementName) 54 { 55 var element = document.createElement(elementName); 56 element.required = true; 57 gContent.appendChild(element); 58 checkInvalidApplies(element); 59 60 element.focus(); 61 62 sendString("a"); 63 checkValidApplies(element); 64 65 synthesizeKey("KEY_Backspace"); 66 checkInvalidApplies(element); 67 68 gContent.removeChild(element); 69 } 70 71 function checkTooLong(elementName) 72 { 73 var element = document.createElement(elementName); 74 element.value = "foo"; 75 element.maxLength = 2; 76 gContent.appendChild(element); 77 checkInvalidApplies(element, true); 78 79 element.focus(); 80 81 synthesizeKey("KEY_Backspace"); 82 checkValidApplies(element); 83 gContent.removeChild(element); 84 } 85 86 function checkTextAreaMissing() 87 { 88 checkMissing('textarea'); 89 } 90 91 function checkTextAreaTooLong() 92 { 93 checkTooLong('textarea'); 94 } 95 96 function checkTextArea() 97 { 98 checkTextAreaMissing(); 99 checkTextAreaTooLong(); 100 } 101 102 function checkInputMissing() 103 { 104 checkMissing('input'); 105 } 106 107 function checkInputTooLong() 108 { 109 checkTooLong('input'); 110 } 111 112 function checkInputEmail() 113 { 114 var element = document.createElement('input'); 115 element.type = 'email'; 116 gContent.appendChild(element); 117 checkValidApplies(element); 118 119 element.focus(); 120 121 sendString("a"); 122 checkInvalidApplies(element); 123 124 sendString("@b.c"); 125 checkValidApplies(element); 126 127 synthesizeKey("KEY_Backspace"); 128 for (var i=0; i<4; ++i) { 129 if (i == 1) { 130 // a@b is a valid value. 131 checkValidApplies(element); 132 } else { 133 checkInvalidApplies(element); 134 } 135 synthesizeKey("KEY_Backspace"); 136 } 137 checkValidApplies(element); 138 139 gContent.removeChild(element); 140 } 141 142 function checkInputURL() 143 { 144 var element = document.createElement('input'); 145 element.type = 'url'; 146 gContent.appendChild(element); 147 checkValidApplies(element); 148 149 element.focus(); 150 151 sendString("h"); 152 checkInvalidApplies(element); 153 154 sendString("ttp://mozilla.org"); 155 checkValidApplies(element); 156 157 for (var i=0; i<10; ++i) { 158 synthesizeKey("KEY_Backspace"); 159 checkValidApplies(element); 160 } 161 162 synthesizeKey("KEY_Backspace"); 163 // "http://" is now invalid 164 for (var i=0; i<7; ++i) { 165 checkInvalidApplies(element); 166 synthesizeKey("KEY_Backspace"); 167 } 168 checkValidApplies(element); 169 170 gContent.removeChild(element); 171 } 172 173 function checkInputPattern() 174 { 175 var element = document.createElement('input'); 176 element.pattern = "[0-9]*" 177 gContent.appendChild(element); 178 checkValidApplies(element); 179 180 element.focus(); 181 182 sendString("0"); 183 checkValidApplies(element); 184 185 sendString("a"); 186 checkInvalidApplies(element); 187 188 synthesizeKey("KEY_Backspace"); 189 checkValidApplies(element); 190 191 synthesizeKey("KEY_Backspace"); 192 checkValidApplies(element); 193 194 gContent.removeChild(element); 195 } 196 197 function checkInput() 198 { 199 checkInputMissing(); 200 checkInputTooLong(); 201 checkInputEmail(); 202 checkInputURL(); 203 checkInputPattern(); 204 } 205 206 checkTextArea(); 207 checkInput(); 208 209 </script> 210 </pre> 211 </body> 212 </html>