blob: 8a2c1ca8b3c813bca6f9ddc4cda783db41237d6d [file] [log] [blame]
<!DOCTYPE html>
<script src="../resources/js-test.js"></script>
<script src="../fast/dom/shadow/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 testWithoutDelegatesFocus()
{
debug(':focus and shadow host without delegatesFocus for crbug/479050');
// Setting up the DOM tree
var sandbox = document.querySelector('#sandbox');
sandbox.innerHTML = '';
sandbox.appendChild(
createDOM('div', {},
createDOM('input', {'id': 'outer-input1'}),
createDOM('div', {'id': 'shadow-host'},
createDOM('input', {'id': 'lightdom-input'}),
createShadowRoot(
createDOM('content'),
createDOM('input', {'id': 'inner-input'}))),
createDOM('input', {'id': 'outer-input2'})));
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
var host = getNodeInComposedTree('shadow-host');
var innerInput = getNodeInComposedTree('shadow-host/inner-input');
var lightdomInput = getNodeInComposedTree('lightdom-input');
var outerInput1 = getNodeInComposedTree('outer-input1');
var outerInput2 = getNodeInComposedTree('outer-input2');
debug('Test shadow host without tabindex');
outerInput1.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
outerInput2.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
innerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
lightdomInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
host.focus(); // host will not get focus as it is not focusable.
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
debug('Test shadow host with tabindex=-1');
host.tabIndex = -1;
outerInput1.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
outerInput2.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
innerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
lightdomInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
host.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
debug('Test shadow host without tabindex=0');
host.tabIndex = 0;
outerInput1.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
outerInput2.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
innerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
lightdomInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
host.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
}
testWithoutDelegatesFocus();
</script>