disabled-elements-01.html (3187B)
1 <!DOCTYPE html> 2 <title>HTMLFormElement: the disabled attribute</title> 3 <link rel="author" title="Eric Casler" href="mailto:ericorange@gmail.com"> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/#enabling-and-disabling-form-controls:-the-disabled-attribute"> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <div id="log"></div> 8 <div id="root"></div> 9 <script> 10 // Elements tested for in this file 11 var types = ["button", "input", "select", "textarea"]; 12 // no tests for: optgroup, option, fieldset 13 14 var root = document.getElementById("root"); 15 for (var element_type = 0; element_type < types.length; element_type++) { 16 test(function() { 17 root.innerHTML = "<"+types[element_type]+" + id='elem'></"+types[element_type]+">"; 18 19 var elem = document.getElementById("elem"); 20 assert_false(elem.disabled); 21 }, 22 "Test ["+types[element_type]+"]: default behaviour is NOT disabled"); 23 24 test(function() { 25 var formats = ["disabled", 26 "disabled=disabled", "disabled='disabled'", 27 "disabled='true'", "disabled=true", 28 "disabled='false'", "disabled=false"]; 29 30 for (var f = 0; f < formats.length; f++) { 31 root.innerHTML = "<"+types[element_type]+" id='elem' " + formats[f] + "></"+types[element_type]+">"; 32 33 var elem = document.getElementById("elem"); 34 assert_true(elem.disabled); 35 } 36 }, 37 "Test ["+types[element_type]+"]: verify disabled acts as boolean attribute"); 38 39 test(function() { 40 root.innerHTML = "<"+types[element_type]+" id='elem'></"+types[element_type]+"><input id='other' value='no event dispatched'></input>"; 41 var elem = document.getElementById("elem"), 42 other = document.getElementById("other"); 43 44 assert_equals(other.value, "no event dispatched"); 45 46 elem.disabled = true; 47 assert_true(elem.disabled); 48 49 elem.onclick = function () { 50 // change value of other element, to avoid *.value returning "" for disabled elements 51 document.getElementById("other").value = "event dispatched"; 52 }; 53 54 // Check if dispatched event executes 55 var evObj = document.createEvent('Events'); 56 evObj.initEvent("click", true, false); 57 elem.dispatchEvent(evObj); 58 assert_equals(other.value, "event dispatched"); 59 }, 60 "Test ["+types[element_type]+"]: synthetic click events should be dispatched"); 61 62 test(function() { 63 root.innerHTML = "<"+types[element_type]+" id='elem'></"+types[element_type]+"><input id='other' value='no event dispatched'></input>"; 64 var elem = document.getElementById("elem"), 65 other = document.getElementById("other"); 66 67 assert_equals(other.value, "no event dispatched"); 68 69 elem.disabled = true; 70 assert_true(elem.disabled); 71 72 elem.onclick = function () { 73 // change value of other element, to avoid *.value returning "" for disabled elements 74 document.getElementById("other").value = "event dispatched"; 75 }; 76 77 // Check that click() on a disabled element doesn't dispatch a click event. 78 elem.click(); 79 assert_equals(other.value, "no event dispatched"); 80 }, 81 "Test ["+types[element_type]+"]: click() should not dispatch a click event"); 82 } 83 root.innerHTML = ""; 84 </script>