interactivity-inert-modal-dialog-ua.html (2105B)
1 <!DOCTYPE html> 2 <title>CSS Basic User Interface Test: UA style interactivity for dialog:modal</title> 3 <link rel="help" href="https://drafts.csswg.org/css-ui-4/#inertness"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <dialog id="t1"></dialog> 7 <dialog id="t2" inert></dialog> 8 <div inert> 9 <dialog id="t3"></dialog> 10 </div> 11 <dialog id="d4"> 12 <div id="t4" inert></div> 13 </dialog> 14 <dialog id="t5" style="interactivity:inert"></dialog> 15 <script> 16 test((t) => { 17 t.add_cleanup(() => { t1.close(); }); 18 assert_equals(getComputedStyle(t1).interactivity, "auto", "before showModal"); 19 t1.showModal(); 20 assert_equals(getComputedStyle(t1).interactivity, "auto", "after showModal"); 21 }, "UA dialog:modal interactivity rule"); 22 23 test((t) => { 24 t.add_cleanup(() => { t2.close(); }); 25 assert_equals(getComputedStyle(t2).interactivity, "inert", "before showModal"); 26 t2.showModal(); 27 assert_equals(getComputedStyle(t2).interactivity, "inert", "after showModal"); 28 }, "UA [inert] rule wins over UA dialog:modal inert rule"); 29 30 test((t) => { 31 t.add_cleanup(() => { t3.close(); }); 32 assert_equals(getComputedStyle(t3).interactivity, "inert", "before showModal"); 33 t3.showModal(); 34 assert_equals(getComputedStyle(t3).interactivity, "auto", "after showModal"); 35 }, "UA dialog:modal rule overriding inherited [inert] 'interactivity:inert' rule"); 36 37 test((t) => { 38 t.add_cleanup(() => { d4.close(); }); 39 assert_equals(getComputedStyle(t4).interactivity, "inert", "before showModal"); 40 d4.showModal(); 41 assert_equals(getComputedStyle(t4).interactivity, "inert", "after showModal"); 42 }, "UA [inert] rule overriding inherited dialog:modal 'interactivity:auto' rule"); 43 44 test((t) => { 45 t.add_cleanup(() => { t5.close(); }); 46 assert_equals(getComputedStyle(t5).interactivity, "inert", "before showModal"); 47 t5.showModal(); 48 assert_equals(getComputedStyle(t5).interactivity, "inert", "after showModal"); 49 }, "Author 'interactivity:inert' overrides UA dialog:modal 'interactivity:auto' rule"); 50 51 </script>