blob: ed04f0f67b1565c3df3116cce7c3368d738e6024 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="resources/shadow-dom.js"></script>
</head>
<body>
<input id="input1"></input>
<div id="sandbox"></div>
<div id="console"></div>
<script>
var sandbox = document.getElementById('sandbox');
// A test for a non-distributed node.
sandbox.appendChild(
createDOM('div', {'id': 'host'},
createDOM('input', {'id': 'non-distributed-node'}),
createShadowRoot({'id': 'shadow-root'})));
sandbox.offsetLeft;
document.getElementById('input1').focus();
shouldBeEqualToString('document.activeElement.id', 'input1');
document.getElementById('non-distributed-node').focus();
// Focus doesn't change because non-distributed-node can't get focused.
shouldBeEqualToString('document.activeElement.id', 'input1');
var shadowRoot = getNodeInComposedTree('host/');
shouldBeNull('shadowRoot.activeElement');
// A test for a distributed node.
sandbox.innerHTML = '';
sandbox.appendChild(
createDOM('div', {'id': 'host'},
createDOM('input', {'id': 'distributed-node'}),
createShadowRoot({'id': 'shadow-root'},
createDOM('div', {'id': 'content-parent'},
createDOM('content', {'id': 'content'})))));
sandbox.offsetLeft;
var distributedNode = document.getElementById('distributed-node');
distributedNode.focus();
shouldBeEqualToString('document.activeElement.id', 'distributed-node');
shadowRoot = getNodeInComposedTree("host/");
shouldBeEqualToString('shadowRoot.activeElement.id', 'distributed-node');
var contentParent = getNodeInComposedTree('host/content-parent');
contentParent.parentNode.removeChild(contentParent);
// This is a similar case where 'dispaly: none' is set to the focused element. We can't guarantee this case.
// The current implementation leaves the distributed node as document.activeElement.
// See the discussion from https://code.google.com/p/chromium/issues/detail?id=318448#c21.
shouldBeEqualToString('document.activeElement.id', 'distributed-node');
shouldBeNull('shadowRoot.activeElement');
var successfullyParsed = true;
</script>
</body>
</html>