blob: b6888d97c603f698d62c69955f9e6f9af7c25420 [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 buildSingleShadowTree(delegatesFocus) {
var sandbox = document.querySelector('#sandbox');
sandbox.innerHTML = '';
sandbox.appendChild(
createDOM('div', {},
createDOM('input', {'id': 'outer-input'}),
createDOM('div', {'id': 'shadow-host'},
createDOM('input', {'id': 'lightdom-input'}),
attachShadow(
{'mode': 'open', 'delegatesFocus': delegatesFocus},
createDOM('slot'),
createDOM('input', {'id': 'inner-input'})))));
}
function testSingleShadow() {
debug('(1/6) Testing how :focus matches on shadow host with delegatesFocus=false.');
buildSingleShadowTree(false);
var host = document.querySelector('#shadow-host');
var lightdomInput = document.querySelector('#lightdom-input');
var innerInput = getNodeInComposedTree('shadow-host/inner-input');
var outerInput = document.querySelector('#outer-input');
outerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
lightdomInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
innerInput.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('(2/6) Testing how :focus matches on shadow host with tabindex=-1, delegatesFocus=false.');
host.tabIndex = -1;
outerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
lightdomInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
innerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
host.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
debug('(3/6) Testing how :focus matches on shadow host with tabindex=0, delegatesFocus=false.');
host.tabIndex = 0;
outerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
lightdomInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
innerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
host.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
debug('(4/6) Testing how :focus matches on shadow host with delegatesFocus=true.');
buildSingleShadowTree(true);
var host = document.querySelector('#shadow-host');
var lightdomInput = document.querySelector('#lightdom-input');
var innerInput = getNodeInComposedTree('shadow-host/inner-input');
var outerInput = document.querySelector('#outer-input');
outerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
lightdomInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
innerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
host.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
debug('(5/6) Testing how :focus matches on shadow host with tabindex=-1, delegatesFocus=true.');
host.tabIndex = -1;
outerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
lightdomInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
innerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
host.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
debug('(6/6) Testing how :focus matches on shadow host with tabindex=0, delegatesFocus=true.');
host.tabIndex = 0;
outerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
lightdomInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(255, 255, 255)');
innerInput.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
host.focus();
backgroundColorShouldBe('shadow-host', 'rgb(0, 128, 0)');
}
testSingleShadow();
</script>