<!DOCTYPE html>
<html id="html" tabindex="1">
<head>
<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#blocked-by-a-modal-dialog">
<meta name="assert" content="Checks that, when opening modal dialogs, inert nodes are not focusable.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body id="body" tabindex="1">
<style>
dialog {
  outline: none;
}
</style>
<dialog id="top-dialog" tabindex="1" style="width: 100px; top: 30px"><button id="top-dialog-button">I get focus</button></dialog>
<dialog id="bottom-dialog" tabindex="-1" style="width: 100px; bottom: 30px"><button id="bottom-dialog-button">I don't get focus.</button></dialog>
<div id="container">
    <input id="text" type="text">
    <input id="datetime" type="datetime">
    <input id="color" type="color">
    <select id="select">
        <optgroup id="optgroup">
            <option id="option">Option</option>
        </optgroup>
    </select>
    <div id="contenteditable-div" contenteditable>I'm editable</div>
    <span id="tabindex-span" tabindex="0">I'm tabindexed.</div>
    <embed id="embed" type="application/x-blink-test-plugin" width=100 height=100></embed>
    <a id="anchor" href="">Link</a>
</div>
<script>
"use strict";
// The test passses if only the topmost dialog and its button are focusable.

function testFocus(element, expectFocus) {
    test(function() {
        var focusedElement = null;
        element.addEventListener('focus', function() { focusedElement = element; }, false);
        element.focus();
        var theElement = element;
        if (expectFocus) {
            assert_equals(focusedElement, theElement);
        } else {
            assert_not_equals(focusedElement, theElement);
        }
    }, `#${CSS.escape(element.id)} is ${expectFocus ? "" : "not "} focusable`);
}

function testTree(element, expectFocus) {
    if (element.nodeType == Node.ELEMENT_NODE)
        testFocus(element, expectFocus);
    var childNodes = element.childNodes;
    for (var i = 0; i < childNodes.length; i++)
        testTree(childNodes[i], expectFocus);
}

var bottomDialog = document.getElementById('bottom-dialog');
var topDialog = document.getElementById('top-dialog');
setup(function() {
    bottomDialog.showModal();
    topDialog.showModal();
    add_completion_callback(function() {
        topDialog.close();
        bottomDialog.close();
    });
});

testFocus(document.documentElement, false);
testFocus(document.body, false);
testTree(topDialog, true);
testTree(bottomDialog, false);
testTree(document.getElementById('container'), false);
</script>
</body>
</html>
