<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>inert nodes are unfocusable</title>
    <link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
  </head>
<body id="body" tabindex="1">
  <button id="focusable">Outside of inert container</button>
  <button inert id="inert">Inert button</button>
  <div inert 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>
function testFocus(element, expectFocus) {
    focusedElement = null;
    element.addEventListener('focus', function() { focusedElement = element; }, false);
    element.focus();
    theElement = element;
    assert_equals(focusedElement === theElement, expectFocus);
}

function testTree(element, expectFocus, excludeCurrent) {
    if (element.nodeType == Node.ELEMENT_NODE && !excludeCurrent)
        testFocus(element, expectFocus);
    if (element.tagName === "SELECT")
        return;
    var childNodes = element.childNodes;
    for (var i = 0; i < childNodes.length; i++)
        testTree(childNodes[i], expectFocus);
}


test(function() {
    testFocus(document.getElementById('focusable'), true);
}, "Button outside of inert container is focusable.");

test(function() {
    testFocus(document.getElementById('inert'), false);
}, "Button with inert atribute is unfocusable.");

test(function() {
    testTree(document.getElementById('container'), false);
}, "All focusable elements inside inert subtree are unfocusable");

test(function() {
    assert_false(document.getElementById("focusable").inert, "Inert not set explicitly is false")
    assert_true(document.getElementById("inert").inert, "Inert set explicitly is true");
    assert_true(document.getElementById("container").inert, "Inert set on container is true");
}, "Can get inert via property");

test(function() {
    assert_false(document.getElementById("text").inert, "Elements inside of inert subtrees return false when getting inert");
}, "Elements inside of inert subtrees return false when getting 'inert'");

test(function() {
    document.getElementById('focusable').inert = true;
    testFocus(document.getElementById('focusable'), false);
    document.getElementById('inert').inert = false;
    testFocus(document.getElementById('inert'), true);
    document.getElementById('container').inert = false;
    testTree(document.getElementById('container'), true, true);
}, "Setting inert via property correctly modifies inert state");
</script>
</body>
</html>