disabled.html (4111B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Selector: pseudo-classes (:disabled)</title> 4 <link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org" id=link1> 5 <link rel=help href="https://html.spec.whatwg.org/multipage/#pseudo-classes" id=link2> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="utils.js"></script> 9 <style> 10 #input4 {display:none;} 11 </style> 12 <div id="log"></div> 13 <button id=button1 type=submit>button1</button> 14 <button id=button2 disabled>button2</button> 15 <input id=input1> 16 <input id=input2 disabled> 17 <input id=input3 readonly> 18 <input id=input4> 19 <select id=select1> 20 <optgroup label="options" id=optgroup1> 21 <option value="option1" id=option1 selected>option1 22 </select> 23 <select disabled id=select2> 24 <optgroup label="options" disabled id=optgroup2> 25 <option value="option2" disabled id=option2>option2 26 </select> 27 <textarea id=textarea1>textarea1</textarea> 28 <textarea disabled id=textarea2>textarea2</textarea> 29 <fieldset id=fieldset1></fieldset> 30 <fieldset disabled id=fieldset2> 31 <legend><input type=checkbox id=club></legend> 32 <p><label>Name on card: <input id=clubname required></label></p> 33 <p><label>Card number: <input id=clubnum required pattern="[-0-9]+"></label></p> 34 </fieldset> 35 <label disabled></label> 36 <object disabled></object> 37 <output disabled></output> 38 <img disabled/> 39 <meter disabled></meter> 40 <progress disabled></progress> 41 42 <script> 43 testSelectorIdsMatch(":disabled", ["button2", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should match only disabled elements"); 44 45 document.getElementById("button2").removeAttribute("disabled"); 46 testSelectorIdsMatch(":disabled", ["input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should not match elements whose disabled attribute has been removed"); 47 48 document.getElementById("button1").setAttribute("disabled", "disabled"); 49 testSelectorIdsMatch(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should also match elements whose disabled attribute has been set"); 50 51 document.getElementById("button1").setAttribute("disabled", "disabled"); 52 testSelectorIdsMatch(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should also match elements whose disabled attribute has been set twice"); 53 54 document.getElementById("input2").setAttribute("type", "submit"); // change input type to submit 55 testSelectorIdsMatch(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should also match disabled elements whose type has changed"); 56 57 var input = document.createElement("input"); 58 input.setAttribute("disabled", "disabled"); 59 testSelectorIdsMatch(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should not match elements not in the document"); 60 61 var fieldset = document.createElement("fieldset"); 62 fieldset.id = "fieldset_nested"; 63 fieldset.innerHTML = ` 64 <input id=input_nested> 65 <button id=button_nested>button nested</button> 66 <select id=select_nested> 67 <optgroup label="options" id=optgroup_nested> 68 <option value="options" id=option_nested>option nested</option> 69 </optgroup> 70 </select> 71 <textarea id=textarea_nested>textarea nested</textarea> 72 <object id=object_nested></object> 73 <output id=output_nested></output> 74 <fieldset id=fieldset_nested2> 75 <input id=input_nested2> 76 </fieldset> 77 `; 78 document.getElementById("fieldset2").appendChild(fieldset); 79 testSelectorIdsMatch("#fieldset2 :disabled", ["clubname", "clubnum", "fieldset_nested", "input_nested", "button_nested", "select_nested", "textarea_nested", "fieldset_nested2", "input_nested2"], "':disabled' should match elements that are appended to a disabled fieldset dynamically"); 80 </script>