| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>Selector: pseudo-classes (:disabled)</title> |
| <link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org" id=link1> |
| <link rel=help href="https://html.spec.whatwg.org/multipage/#pseudo-classes" id=link2> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="utils.js"></script> |
| <style> |
| #input4 {display:none;} |
| </style> |
| <div id="log"></div> |
| <button id=button1 type=submit>button1</button> |
| <button id=button2 disabled>button2</button> |
| <input id=input1> |
| <input id=input2 disabled> |
| <input id=input3 readonly> |
| <input id=input4> |
| <select id=select1> |
| <optgroup label="options" id=optgroup1> |
| <option value="option1" id=option1 selected>option1 |
| </select> |
| <select disabled id=select2> |
| <optgroup label="options" disabled id=optgroup2> |
| <option value="option2" disabled id=option2>option2 |
| </select> |
| <textarea id=textarea1>textarea1</textarea> |
| <textarea disabled id=textarea2>textarea2</textarea> |
| <fieldset id=fieldset1></fieldset> |
| <fieldset disabled id=fieldset2> |
| <legend><input type=checkbox id=club></legend> |
| <p><label>Name on card: <input id=clubname required></label></p> |
| <p><label>Card number: <input id=clubnum required pattern="[-0-9]+"></label></p> |
| </fieldset> |
| <label disabled></label> |
| <object disabled></object> |
| <output disabled></output> |
| <img disabled/> |
| <meter disabled></meter> |
| <progress disabled></progress> |
| |
| <script> |
| testSelector(":disabled", ["button2", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should match only disabled elements"); |
| |
| document.getElementById("button2").removeAttribute("disabled"); |
| testSelector(":disabled", ["input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should not match elements whose disabled attribute has been removed"); |
| |
| document.getElementById("button1").setAttribute("disabled", "disabled"); |
| testSelector(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should also match elements whose disabled attribute has been set"); |
| |
| document.getElementById("button1").setAttribute("disabled", "disabled"); |
| testSelector(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should also match elements whose disabled attribute has been set twice"); |
| |
| document.getElementById("input2").setAttribute("type", "submit"); // change input type to submit |
| testSelector(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should also match disabled elements whose type has changed"); |
| |
| var input = document.createElement("input"); |
| input.setAttribute("disabled", "disabled"); |
| testSelector(":disabled", ["button1", "input2", "select2", "optgroup2", "option2", "textarea2", "fieldset2", "clubname", "clubnum"], "':disabled' should not match elements not in the document"); |
| </script> |
