test_readonly.html (2021B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <div id="should-apply"> 6 <textarea></textarea> 7 <input type="text"> 8 <input type="password"> 9 <input type="search"> 10 <input type="tel"> 11 <input type="email"> 12 <input type="url"> 13 <input type="number"> 14 <input type="date"> 15 <input type="time"> 16 <input type="month"> 17 <input type="week"> 18 <input type="datetime-local"> 19 </div> 20 <div id="should-not-apply"> 21 <input type="hidden"> 22 <input type="button"> 23 <input type="image"> 24 <input type="reset"> 25 <input type="submit"> 26 <input type="radio"> 27 <input type="file"> 28 <input type="checkbox"> 29 <input type="range"> 30 <input type="color"> 31 </div> 32 <script> 33 for (const element of Array.from(document.querySelectorAll('#should-apply *'))) { 34 let elementDesc = element.tagName.toLowerCase(); 35 if (elementDesc === "input") 36 elementDesc += ` type="${element.type}"`; 37 test(function() { 38 assert_false(element.matches(':read-only'), "Shouldn't be initially read-only"); 39 assert_true(element.matches(':read-write'), "Thus should be read-write"); 40 element.setAttribute("readonly", "readonly"); 41 assert_true(element.matches(':read-only'), "Should become read-only"); 42 assert_false(element.matches(':read-write'), "Thus should stop being read-write"); 43 }, elementDesc); 44 } 45 46 for (const element of Array.from(document.querySelectorAll('#should-not-apply *'))) { 47 let elementDesc = element.tagName.toLowerCase(); 48 if (elementDesc === "input") 49 elementDesc += ` type="${element.type}"`; 50 test(function() { 51 assert_true(element.matches(':read-only'), "Should match read-only"); 52 assert_false(element.matches(':read-write'), "Should not be read-write"); 53 element.setAttribute("readonly", "readonly"); 54 assert_true(element.matches(':read-only'), "Should keep matching read-only"); 55 assert_false(element.matches(':read-write'), "Should still not be read-write"); 56 }, elementDesc); 57 } 58 </script>