inert-with-modal-dialog-001.html (1711B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Interaction of 'inert' attribute with modal dialog</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.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 wrapper 10 <dialog id="dialog"> 11 dialog 12 <span id="child"> 13 child 14 </span> 15 </dialog> 16 </div> 17 <script src="/resources/testharness.js"></script> 18 <script src="/resources/testharnessreport.js"></script> 19 <script> 20 setup(() => { 21 dialog.showModal(); 22 add_completion_callback(() => { 23 dialog.close(); 24 getSelection().removeAllRanges(); 25 }); 26 }); 27 28 function checkSelection(expectedText) { 29 const selection = getSelection(); 30 selection.selectAllChildren(document.documentElement); 31 const actualText = selection.toString().trim(); 32 assert_equals(actualText, expectedText); 33 } 34 35 test(function() { 36 checkSelection("dialog child"); 37 }, "Modal dialog only marks outside nodes as inert"); 38 39 test(function() { 40 child.inert = true; 41 this.add_cleanup(() => { child.inert = false; }); 42 checkSelection("dialog"); 43 }, "Inner nodes with 'inert' attribute become inert anyways"); 44 45 test(function() { 46 dialog.inert = true; 47 this.add_cleanup(() => { dialog.inert = false; }); 48 checkSelection(""); 49 }, "If the modal dialog has the 'inert' attribute, everything becomes inert"); 50 51 test(function() { 52 wrapper.inert = true; 53 this.add_cleanup(() => { wrapper.inert = false; }); 54 checkSelection("dialog child"); 55 }, "If an ancestor of the dialog has the 'inert' attribute, the dialog escapes inertness"); 56 </script>