inert-with-modal-dialog-002.html (1827B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Interaction of 'inert' attribute with modal dialog, when the dialog is the root element</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 being part of a modal dialog does not protect a node from being marked inert by an 'inert' attribute."> 7 <div id="log"></div> 8 <dialog id="dialog"> 9 dialog 10 <span id="child"> 11 child 12 </span> 13 </dialog> 14 <script src="/resources/testharness.js"></script> 15 <script src="/resources/testharnessreport.js"></script> 16 <script> 17 const dialog = document.getElementById("dialog"); 18 const root = document.documentElement; 19 20 setup(() => { 21 root.remove(); 22 document.append(dialog); 23 dialog.showModal(); 24 add_completion_callback(() => { 25 getSelection().removeAllRanges(); 26 }); 27 }); 28 29 function checkSelection(expectedText) { 30 const selection = getSelection(); 31 selection.selectAllChildren(document.documentElement); 32 const actualText = selection.toString().trim(); 33 assert_equals(actualText, expectedText); 34 } 35 36 test(function() { 37 checkSelection("dialog child"); 38 }, "Modal dialog only marks outside nodes as inert"); 39 40 test(function() { 41 child.inert = true; 42 this.add_cleanup(() => { child.inert = false; }); 43 checkSelection("dialog"); 44 }, "Inner nodes with 'inert' attribute become inert anyways"); 45 46 test(function() { 47 dialog.inert = true; 48 this.add_cleanup(() => { dialog.inert = false; }); 49 checkSelection(""); 50 }, "If the modal dialog has the 'inert' attribute, everything becomes inert"); 51 52 // Ideally this would happen in a completion callback, but then it would 53 // be too late: the results would have been shown inside the dialog. 54 dialog.remove(); 55 document.append(root); 56 </script>