pseudo-enabled-disabled.html (1861B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/selectors-4/#enableddisabled"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <body> 6 <div id="container"> 7 <button id="button_enabled"></button> 8 <button id="button_disabled" disabled></button> 9 <input id="input_enabled"> 10 <input id="input_disabled" disabled> 11 <select id="select_enabled"></select> 12 <select id="select_disabled" disabled></select> 13 <textarea id="textarea_enabled"></textarea> 14 <textarea id="textarea_disabled" disabled></textarea> 15 <span id="incapable"></span> 16 </div> 17 18 <script> 19 test(() => { 20 const container = document.querySelector('#container'); 21 const matched = container.querySelectorAll(':enabled'); 22 for (let element of matched) { 23 assert_true(element.id.endsWith('_enabled'), element.id); 24 } 25 }, ':enabeld should match to enabled controls'); 26 27 test(() => { 28 const container = document.querySelector('#container'); 29 const matched = container.querySelectorAll(':disabled'); 30 for (let element of matched) { 31 assert_true(element.id.endsWith('_disabled'), element.id); 32 } 33 }, ':disabled should match to enabled controls'); 34 35 test(() => { 36 const container = document.querySelector('#container'); 37 const matched = container.querySelectorAll(':not(:enabled)'); 38 for (let element of matched) { 39 assert_true(element.id.endsWith('_disabled') || element.id == 'incapable', element.id); 40 } 41 }, ':not(:enabeld) should match to disabled controls and non-controls'); 42 43 test(() => { 44 const container = document.querySelector('#container'); 45 const matched = container.querySelectorAll(':not(:disabled)'); 46 for (let element of matched) { 47 assert_true(element.id.endsWith('_enabled') || element.id == 'incapable', element.id); 48 } 49 }, ':not(:disabled) should match to enabled controls and non-controls'); 50 </script> 51 </body>