test_bug561640.html (1878B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=561640 5 --> 6 <head> 7 <title>Test for Bug 561640</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 <style> 11 input, textarea { background-color: rgb(0,0,0) !important; } 12 :-moz-any(input,textarea):valid { background-color: rgb(0,255,0) !important; } 13 :-moz-any(input,textarea):invalid { background-color: rgb(255,0,0) !important; } 14 </style> 15 </head> 16 <body> 17 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=561640">Mozilla Bug 561640</a> 18 <p id="display"></p> 19 <div id="content" style="display: none"> 20 </div> 21 <pre id="test"> 22 <script type="application/javascript"> 23 24 /** Test for Bug 561640 */ 25 26 var elements = [ 'input', 'textarea' ]; 27 var content = document.getElementById('content'); 28 29 function checkValid(elmt) 30 { 31 ok(!elmt.validity.tooLong, "element should not be too long"); 32 is(window.getComputedStyle(elmt).getPropertyValue('background-color'), 33 "rgb(0, 255, 0)", ":valid pseudo-class should apply"); 34 } 35 36 function checkInvalid(elmt) 37 { 38 todo(elmt.validity.tooLong, "element should be too long"); 39 todo_is(window.getComputedStyle(elmt).getPropertyValue('background-color'), 40 "rgb(255, 0, 0)", ":invalid pseudo-class should apply"); 41 } 42 43 for (var elmtName of elements) { 44 var elmt = document.createElement(elmtName); 45 content.appendChild(elmt); 46 47 if (elmtName == 'textarea') { 48 elmt.textContent = 'foo'; 49 } else { 50 elmt.setAttribute('value', 'foo'); 51 } 52 elmt.maxLength = 2; 53 checkValid(elmt); 54 55 elmt.value = 'a'; 56 checkValid(elmt); 57 58 if (elmtName == 'textarea') { 59 elmt.textContent = 'f'; 60 } else { 61 elmt.setAttribute('value', 'f'); 62 } 63 elmt.value = 'bar'; 64 checkInvalid(elmt); 65 66 content.removeChild(elmt); 67 } 68 69 </script> 70 </pre> 71 </body> 72 </html>