inert-with-modal-dialog-003.html (1694B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Interaction of 'inert' attribute with modal dialog</title> 4 <link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#inert"> 6 <meta name="assert" content="Checks that a modal dialog escapes inertness from ancestors."> 7 <div id="log"></div> 8 <div id="wrapper"> 9 find wrapper 10 <dialog id="dialog"> 11 find dialog 12 <span id="child"> 13 find child 14 </span> 15 </dialog> 16 </div> 17 <script src="/resources/testharness.js"></script> 18 <script src="/resources/testharnessreport.js"></script> 19 <script> 20 function cleanup() { 21 dialog.close(); 22 getSelection().removeAllRanges(); 23 } 24 25 function setupTest(element, context) { 26 element.inert = true; 27 dialog.showModal(); 28 context.add_cleanup(() => { 29 element.inert = false; 30 cleanup(); 31 }); 32 } 33 34 setup(() => { 35 dialog.showModal(); 36 add_completion_callback(cleanup); 37 }); 38 39 test(function() { 40 setupTest(child, this); 41 assert_false(window.find("wrapper")); 42 assert_true(window.find("dialog")); 43 assert_false(window.find("child")); 44 }, "Inner nodes with 'inert' attribute become inert anyways"); 45 46 test(function() { 47 setupTest(dialog, this); 48 assert_false(window.find("wrapper")); 49 assert_false(window.find("dialog")); 50 assert_false(window.find("child")); 51 }, "If the modal dialog has the 'inert' attribute, everything becomes inert"); 52 53 test(function() { 54 setupTest(wrapper, this); 55 assert_false(window.find("wrapper")); 56 assert_true(window.find("dialog")); 57 assert_true(window.find("child")); 58 }, "If an ancestor of the dialog has the 'inert' attribute, the dialog escapes inertness"); 59 </script>