inert-with-modal-dialog-002.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /inert/inert-with-modal-dialog-002.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8" />

<title>Interaction of 'inert' attribute with modal dialog, when the dialog is the root element</title>

<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">

<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#inert">

<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.">

<div id="log"></div>

<dialog id="dialog">

  dialog

  <span id="child">

    child

  </span>

</dialog>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

const dialog = document.getElementById("dialog");

const root = document.documentElement;

setup(() => {

  root.remove();

  document.append(dialog);

  dialog.showModal();

  add_completion_callback(() => {

    getSelection().removeAllRanges();

});

});

function checkSelection(expectedText) {

  const selection = getSelection();

  selection.selectAllChildren(document.documentElement);

  const actualText = selection.toString().trim();

  assert_equals(actualText, expectedText);

test(function() {

  checkSelection("dialog child");

}, "Modal dialog only marks outside nodes as inert");

test(function() {

  child.inert = true;

  this.add_cleanup(() => { child.inert = false; });

  checkSelection("dialog");

}, "Inner nodes with 'inert' attribute become inert anyways");

test(function() {

  dialog.inert = true;

  this.add_cleanup(() => { dialog.inert = false; });

  checkSelection("");

}, "If the modal dialog has the 'inert' attribute, everything becomes inert");

// Ideally this would happen in a completion callback, but then it would

// be too late: the results would have been shown inside the dialog.

dialog.remove();

document.append(root);

</script>