inert-with-modal-dialog-001.html

Enable keyboard shortcuts

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

<!DOCTYPE html>

<meta charset="utf-8" />

<title>Interaction of 'inert' attribute with modal dialog</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 a modal dialog escapes inertness from ancestors.">

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

<div id="wrapper">

  wrapper

  <dialog id="dialog">

    dialog

    <span id="child">

      child

    </span>

  </dialog>

</div>

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

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

<script>

setup(() => {

  dialog.showModal();

  add_completion_callback(() => {

    dialog.close();

    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");

test(function() {

  wrapper.inert = true;

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

  checkSelection("dialog child");

}, "If an ancestor of the dialog has the 'inert' attribute, the dialog escapes inertness");

</script>