| Index: third_party/WebKit/LayoutTests/fast/dom/inert/inert-node-is-unfocusable.html
|
| diff --git a/third_party/WebKit/LayoutTests/fast/dom/inert/inert-node-is-unfocusable.html b/third_party/WebKit/LayoutTests/fast/dom/inert/inert-node-is-unfocusable.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..2ad866917c8df6175e81bb45037ebe6d3ea96121
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/fast/dom/inert/inert-node-is-unfocusable.html
|
| @@ -0,0 +1,73 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| +<script src="../../../resources/js-test.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>
|
| +description('Test that inert nodes are not focusable. The test passses if only the ' +
|
| + 'button outside of the inert container is focusable.');
|
| +
|
| +function testFocus(element, expectFocus) {
|
| + focusedElement = null;
|
| + element.addEventListener('focus', function() { focusedElement = element; }, false);
|
| + element.focus();
|
| + expected = expectFocus ? "true" : "false"
|
| + theElement = element;
|
| + shouldBe('"' + element.id + '"; focusedElement === theElement', expected);
|
| +}
|
| +
|
| +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);
|
| +}
|
| +
|
| +// Normal case: focusable
|
| +testFocus(document.getElementById('focusable'), true);
|
| +
|
| +// Inert directly on element: non-focusable
|
| +testFocus(document.getElementById('inert'), false);
|
| +
|
| +// Inert also inherits into descendant content
|
| +testTree(document.getElementById('container'), false);
|
| +
|
| +// Can get inert via property
|
| +shouldBe('"Inert not set explicitly is false"; document.getElementById("focusable").inert === false', 'true');
|
| +shouldBe('"Inert set explicitly is true"; document.getElementById("inert").inert === true', 'true');
|
| +shouldBe('"Inert set on container is true"; document.getElementById("container").inert === true', 'true');
|
| +
|
| +// Elements inside of inert subtrees return false when getting 'inert'
|
| +shouldBe('"Elements inside of inert subtrees return false when getting inert"; document.getElementById("text").inert=== false', 'true');
|
| +
|
| +// Setting inert via property correctly modifies inert state
|
| +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);
|
| +
|
| +</script>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 2088453002:
Implement the inert attribute (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master