enabled-disabled.html (1751B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Selectors Invalidation: :enabled and :disabled</title> 6 <link rel="help" href="https://drafts.csswg.org/selectors-4/#enableddisabled"> 7 <link rel="help" href="https://html.spec.whatwg.org/#enabling-and-disabling-form-controls:-the-disabled-attribute"> 8 <meta name="assert" content="This tests that the :enabled and :disabled selectors are effective, and that the enabled/disabled status of an element is changed when updating its 'disabled' attribute by script."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <style> 12 input { 13 position: absolute; 14 left: 200px; 15 top: 300px; 16 } 17 18 :enabled { 19 left: 100px; 20 } 21 22 :disabled { 23 top: 400px; 24 } 25 </style> 26 </head> 27 <body> 28 <input id="first" type="button" value="First"></input> 29 <input id="second" type="button" value="Second" disabled></input> 30 31 <script> 32 test(() => { 33 assert_equals(getComputedStyle(first).left, '100px'); 34 assert_equals(getComputedStyle(first).top, '300px'); 35 36 first.disabled = true; 37 assert_equals(getComputedStyle(first).left, '200px'); 38 assert_equals(getComputedStyle(first).top, '400px'); 39 }, "Element updates when disabled"); 40 41 test(() => { 42 assert_equals(getComputedStyle(second).left, '200px'); 43 assert_equals(getComputedStyle(second).top, '400px'); 44 45 second.disabled = false; 46 assert_equals(getComputedStyle(second).left, '100px'); 47 assert_equals(getComputedStyle(second).top, '300px'); 48 }, "Element updates when enabled"); 49 </script> 50 </body> 51 </html>