test_bug1264157.html (3348B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=535043 5 --> 6 <head> 7 <title>Test for Bug 535043</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 { 13 outline: 2px solid lime; 14 } 15 input:in-range { 16 outline: 2px solid red; 17 } 18 input:out-of-range { 19 outline: 2px solid orange; 20 } 21 </style> 22 </head> 23 <body> 24 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=535043">Mozilla Bug 535043</a> 25 <p id="display"></p> 26 <div id="content"> 27 28 </head> 29 <body> 30 <input type="number" value=0 min=0 max=10> Active in-range 31 <br><br> 32 <input type="number" value=0 min=0 max=10 disabled> Disabled in-range 33 <br><br> 34 <input type="number" value=0 min=0 max=10 readonly> Read-only in-range 35 <br><br> 36 <input type="number" value=11 min=0 max=10> Active out-of-range 37 <br><br> 38 <input type="number" value=11 min=0 max=10 disabled> Disabled out-of-range 39 <br><br> 40 <input type="number" value=11 min=0 max=10 readonly> Read-only out-of-range 41 </div> 42 <pre id="test"> 43 <script> 44 45 /** Test for Bug 1264157 */ 46 SimpleTest.waitForFocus(function() { 47 // Check the initial values. 48 let active = [].slice.call(document.querySelectorAll("input:not(:disabled):not(:read-only)")); 49 let disabled = [].slice.call(document.querySelectorAll("input:disabled")); 50 let readonly = [].slice.call(document.querySelectorAll("input:read-only:not(:disabled)")); 51 is(active.length, 2, "Test is messed up: missing non-disabled/non-readonly inputs"); 52 is(disabled.length, 2, "Test is messed up: missing disabled inputs"); 53 is(readonly.length, 2, "Test is messed up: missing readonly inputs"); 54 55 is(document.querySelectorAll("input:in-range").length, 1, 56 "Wrong number of in-range elements selected."); 57 is(document.querySelectorAll("input:out-of-range").length, 1, 58 "Wrong number of out-of-range elements selected."); 59 60 // Dynamically change the values to see if that works too. 61 active[0].value = -1; 62 is(document.querySelectorAll("input:in-range").length, 0, 63 "Wrong number of in-range elements selected after value changed."); 64 is(document.querySelectorAll("input:out-of-range").length, 2, 65 "Wrong number of out-of-range elements selected after value changed."); 66 active[0].value = 0; 67 is(document.querySelectorAll("input:in-range").length, 1, 68 "Wrong number of in-range elements selected after value changed back."); 69 is(document.querySelectorAll("input:out-of-range").length, 1, 70 "Wrong number of out-of-range elements selected after value changed back."); 71 72 // Dynamically change the attributes to see if that works too. 73 disabled.forEach(function(e) { e.removeAttribute("disabled"); }); 74 readonly.forEach(function(e) { e.removeAttribute("readonly"); }); 75 active.forEach(function(e) { e.setAttribute("readonly", true); }); 76 77 is(document.querySelectorAll("input:in-range").length, 2, 78 "Wrong number of in-range elements selected after attribute changed."); 79 is(document.querySelectorAll("input:out-of-range").length, 2, 80 "Wrong number of out-of-range elements selected after attribute changed."); 81 82 SimpleTest.finish(); 83 }); 84 85 SimpleTest.waitForExplicitFinish(); 86 87 </script> 88 </pre> 89 </body> 90 </html>