readwrite-readonly.html (6809B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Selector: pseudo-classes (:read-write, :read-only)</title> 4 <link rel=help href="https://html.spec.whatwg.org/multipage/#pseudo-classes" id=link2> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="utils.js"></script> 8 <script> 9 class CustomElement extends HTMLElement { 10 static formAssociated = true; 11 12 constructor() { 13 super(); 14 } 15 } 16 17 window.customElements.define("custom-element", CustomElement); 18 </script> 19 <div id="log"></div> 20 21 <div id=set0> 22 <!-- The readonly attribute does not apply to the following input types --> 23 <input id=checkbox1 type=checkbox> 24 <input id=hidden1 type=hidden value=abc> 25 <input id=range1 type=range> 26 <input id=color1 type=color> 27 <input id=radio1 type=radio> 28 <input id=file1 type=file> 29 <input id=submit1 type=submit> 30 <input id=image1 type=image> 31 <input id=button1 type=button value="Button"> 32 <input id=reset1 type=reset> 33 </div> 34 35 <div id=set1> 36 <input id=input1> 37 <input id=input2 readonly> 38 <input id=input3 disabled> 39 <input id=input4 type=checkbox> 40 <input id=input5 type=checkbox readonly> 41 </div> 42 43 <div id=set2> 44 <textarea id=textarea1>textarea1</textarea> 45 <textarea readonly id=textarea2>textarea2</textarea> 46 </div> 47 48 <div id=set3> 49 <textarea id=textarea3>textarea3</textarea> 50 <textarea disabled id=textarea4>textarea4</textarea> 51 </div> 52 53 <div id=set4> 54 <p id=p1>paragraph1.</p> 55 <p id=p2 contenteditable>paragraph2.</p> 56 </div> 57 58 <div id=set5> 59 <div id=cd1 contenteditable> 60 <p id=p3></p> 61 <input id=ci1 readonly> 62 <input id=ci2 disabled> 63 <input id=ci3> 64 <input id=ci4> 65 <textarea id=ct1 readonly></textarea> 66 <textarea id=ct2 disabled></textarea> 67 <textarea id=ct3></textarea> 68 <textarea id=ct4></textarea> 69 </div> 70 </div> 71 72 <div id=set6> 73 <custom-element id=ce1>content</custom-element> 74 <custom-element id=ce2 contenteditable>content</custom-element> 75 <custom-element id=ce3 contenteditable readonly>content</custom-element> 76 <custom-element id=ce4 contenteditable disabled>content</custom-element> 77 <custom-element id=ce5 contenteditable readonly disabled>content</custom-element> 78 </div> 79 80 <script> 81 testSelectorIdsMatch("#set0 :read-write", [], "The :read-write pseudo-class must not match input elements to which the readonly attribute does not apply"); 82 83 testSelectorIdsMatch("#set0 :read-only", ["checkbox1", "hidden1", "range1", "color1", "radio1", "file1", "submit1", "image1", "button1", "reset1"], "The :read-only pseudo-class must match input elements to which the readonly attribute does not apply"); 84 85 testSelectorIdsMatch("#set1 :read-write", ["input1"], "The :read-write pseudo-class must match input elements to which the readonly attribute applies, and that are mutable"); 86 87 testSelectorIdsMatch("#set1 :read-only", ["input2", "input3", "input4", "input5"], "The :read-only pseudo-class must not match input elements to which the readonly attribute applies, and that are mutable"); 88 89 document.getElementById("input1").setAttribute("readonly", "readonly"); 90 testSelectorIdsMatch("#set1 :read-write", [], "The :read-write pseudo-class must not match input elements after the readonly attribute has been added"); 91 92 testSelectorIdsMatch("#set1 :read-only", ["input1", "input2", "input3", "input4", "input5"], "The :read-only pseudo-class must match input elements after the readonly attribute has been added"); 93 94 document.getElementById("input1").removeAttribute("readonly"); 95 testSelectorIdsMatch("#set1 :read-write", ["input1"], "The :read-write pseudo-class must not match input elements after the readonly attribute has been removed"); 96 97 testSelectorIdsMatch("#set1 :read-only", ["input2", "input3", "input4", "input5"], "The :read-only pseudo-class must match input elements after the readonly attribute has been removed"); 98 99 document.getElementById("input1").disabled = true; 100 testSelectorIdsMatch("#set1 :read-write", [], "The :read-write pseudo-class must not match input elements after the disabled attribute has been added"); 101 102 testSelectorIdsMatch("#set1 :read-only", ["input1", "input2", "input3", "input4", "input5"], "The :read-only pseudo-class must match input elements after the disabled attribute has been added"); 103 104 document.getElementById("input1").disabled = false; 105 106 testSelectorIdsMatch("#set1 :read-write", ["input1"], "The :read-write pseudo-class must match input elements after the disabled attribute has been removed"); 107 108 testSelectorIdsMatch("#set1 :read-only", ["input2", "input3", "input4", "input5"], "The :read-only pseudo-class must not match input elements after the disabled attribute has been removed"); 109 110 testSelectorIdsMatch("#set2 :read-write", ["textarea1"], "The :read-write pseudo-class must match textarea elements that do not have a readonly attribute, and that are not disabled"); 111 112 testSelectorIdsMatch("#set2 :read-only", ["textarea2"], "The :read-only pseudo-class must match textarea elements that have a readonly attribute, or that are disabled"); 113 114 document.getElementById("textarea1").setAttribute("readonly", "readonly"); 115 testSelectorIdsMatch("#set2 :read-write", [], "The :read-write pseudo-class must match textarea elements after the readonly attribute has been added"); 116 117 testSelectorIdsMatch("#set2 :read-only", ["textarea1", "textarea2"], "The :read-only pseudo-class must match textarea elements after the readonly attribute has been added"); 118 119 testSelectorIdsMatch("#set3 :read-write", ["textarea3"], "The :read-write pseudo-class must not match textarea elements that are disabled"); 120 121 testSelectorIdsMatch("#set3 :read-only", ["textarea4"], "The :read-only pseudo-class must match textarea elements that are disabled"); 122 123 testSelectorIdsMatch("#set4 :read-write", ["p2"], "The :read-write pseudo-class must match elements that are editable"); 124 125 testSelectorIdsMatch("#set4 :read-only", ["p1"], "The :read-only pseudo-class must not match elements that are editable"); 126 127 document.designMode = "on"; 128 129 testSelectorIdsMatch("#set4 :read-write", ["p1", "p2"], "The :read-write pseudo-class must match elements that are editing hosts"); 130 131 testSelectorIdsMatch("#set4 :read-only", [], "The :read-only pseudo-class must not match elements that are editing hosts"); 132 133 document.designMode = "off"; 134 135 testSelectorIdsMatch("#set5 :read-write", ["cd1", "p3", "ci3", "ci4", "ct3", "ct4"], "The :read-write pseudo-class must match elements that are inside editing hosts, but not match inputs and textareas inside that aren't"); 136 137 testSelectorIdsMatch("#set6 :read-only", ["ce1"], "The :read-only pseudo-class must match form-associated custom elements"); 138 139 testSelectorIdsMatch("#set6 :read-write", ["ce2", "ce3", "ce4", "ce5"], "The :read-write pseudo-class must match form-associated contenteditable custom elements"); 140 141 142 </script>