blob: b7e26db80b40439394096300df4d01a457a66e24 [file] [log] [blame]
<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<script src="resources/shadow-dom.js"></script>
<style>
div { background-color: white; }
div:focus { background-color: green; }
</style>
<body>
<div id="sandbox"></div>
</body>
<script>
description('Test if :focus matching state of shadow host is properly handled in case of DOM mutation.');
function buildTree(parent, delegatesFocus)
{
parent.innerHTML = '';
parent.appendChild(
createDOM('div', {id: 'host'},
createShadowRoot({delegatesFocus: delegatesFocus},
createDOM('input', {id: 'input'})),
createDOM('div', {id: 'dest'})));
parent.offsetTop;
}
var sandbox = document.getElementById('sandbox');
debug('(1/2) DOM mutation across shadow boundary with delegatesFocus=false');
buildTree(sandbox, false);
var host = getNodeInComposedTree('host');
var input = getNodeInComposedTree('host/input');
var dest = getNodeInComposedTree('dest');
backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
input.focus();
backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
dest.appendChild(input);
backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
input.focus();
host.shadowRoot.appendChild(input);
backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
debug('(2/2) DOM mutation across shadow boundary with delegatesFocus=true');
buildTree(sandbox, true);
var host = getNodeInComposedTree('host');
var input = getNodeInComposedTree('host/input');
var dest = getNodeInComposedTree('dest');
backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
input.focus();
backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
dest.appendChild(input);
backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
input.focus();
host.shadowRoot.appendChild(input);
// appendChild() will blur the focus from input element, thus input is no longer focused.
backgroundColorShouldBe('host', 'rgb(255, 255, 255)');
</script>