blob: 8a436552884950b15655e51fab66e81efc22b8f1 [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#shadow-host:focus {
background-color: green;
}
</style>
<body>
<div id="sandbox"></div>
</body>
<script>
function testDistributedNodes() {
debug('Testing shadow host :focus and distributed nodes');
// Setting up the DOM tree
var sandbox = document.querySelector('#sandbox');
sandbox.innerHTML = '';
sandbox.appendChild(
createDOM('div', {},
createDOM('input', {'id': 'outer-input'}),
createDOM('div', {'id': 'shadow-host', 'tabindex': '0'},
createDOM('input', {'id': 'light-input'}),
createShadowRoot(
createDOM('content', {}),
createDOM('div', {'id': 'inner-div'},
document.createTextNode('Blink')),
createDOM('input', {'id': 'older-input'})),
createShadowRoot(
{'delegatesFocus': true},
createDOM('shadow', {}),
createDOM('div', {'id': 'inner-div2'},
document.createTextNode('Blink')),
createDOM('input', {'id': 'younger-input'})))));
sandbox.offsetTop;
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
var host = getNodeInComposedTree('shadow-host');
var outerInput = getNodeInComposedTree('outer-input');
var lightInput = getNodeInComposedTree('light-input');
var olderInput = getNodeInComposedTree('shadow-host/older-input');
var youngerInput = getNodeInComposedTree('shadow-host//younger-input');
debug('(1/3) shadow host without tabindex');
outerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
lightInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
olderInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
youngerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
host.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
debug('(2/3) shadow host with tabindex=-1');
host.tabIndex = -1;
outerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
lightInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
olderInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
youngerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
host.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
debug('(3/3) shadow host with tabindex=0');
host.tabIndex = 0;
outerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
lightInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
olderInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
youngerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
host.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
}
testDistributedNodes();
</script>