OLD | NEW |
(Empty) | |
| 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 testSelector(":disabled", ["button2", "input2", "select2", "optgroup2", "optio
n2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should match
only disabled elements"); |
| 44 |
| 45 document.getElementById("button2").removeAttribute("disabled"); |
| 46 testSelector(":disabled", ["input2", "select2", "optgroup2", "option2", "texta
rea2", "fieldset2", "clubname", "clubnum"], "':disabled' should not match elemen
ts whose disabled attribute has been removed"); |
| 47 |
| 48 document.getElementById("button1").setAttribute("disabled", "disabled"); |
| 49 testSelector(":disabled", ["button1", "input2", "select2", "optgroup2", "optio
n2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should also
match elements whose disabled attribute has been set"); |
| 50 |
| 51 document.getElementById("input2").setAttribute("type", "submit"); // change in
put type to submit |
| 52 testSelector(":disabled", ["button1", "input2", "select2", "optgroup2", "optio
n2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should also
match disabled elements whose type has changed"); |
| 53 |
| 54 var input = document.createElement("input"); |
| 55 input.setAttribute("disabled", "disabled"); |
| 56 testSelector(":disabled", ["button1", "input2", "select2", "optgroup2", "optio
n2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should not m
atch elements not in the document"); |
| 57 </script> |
OLD | NEW |