blob: 14a84149b6a04ffcd6c1d9ea94455c8783d55608 [file] [log] [blame]
<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<script src="resources/shadow-dom.js"></script>
<body>
<pre id="console"></pre>
<input id="defaultFocus">
<div id="sandbox"></div>
</body>
<script>
description('Click inside focusable shadow host should focus the host.');
function prepareDOMTree(parent, delegatesFocus)
{
parent.innerHTML = '';
parent.appendChild(
createDOM('div', {'id': 'shadowHost', 'tabindex': '0'},
attachShadow({'mode': 'open', 'delegatesFocus': delegatesFocus},
createDOM('div', {'id': 'innerDiv'},
document.createTextNode('Blink')),
createDOM('input', {'id': 'inputA'}),
createDOM('input', {'id': 'inputB'}))));
parent.offsetLeft;
}
var host;
var innerDiv;
var inputA;
var inputB;
function clickOn(el) {
eventSender.mouseMoveTo(el.offsetLeft + 8, el.offsetTop + 8);
eventSender.mouseDown();
eventSender.mouseUp();
}
function resetFocus() {
document.querySelector('#defaultFocus').focus();
}
function checkInnermostActiveElement(id) {
if (isInnermostActiveElement(id))
debug('PASS innermost active element is ' + id);
}
function runTest() {
var sandbox = document.querySelector('#sandbox');
prepareDOMTree(sandbox, false);
resetFocus();
host = getNodeInComposedTree('shadowHost');
innerDiv = getNodeInComposedTree('shadowHost/innerDiv');
inputA = getNodeInComposedTree('shadowHost/inputA');
inputB = getNodeInComposedTree('shadowHost/inputB');
debug('click on inner div should focus shadow host');
clickOn(innerDiv);
checkInnermostActiveElement('shadowHost');
inputA.focus();
checkInnermostActiveElement('shadowHost/inputA');
clickOn(innerDiv);
checkInnermostActiveElement('shadowHost');
inputB.focus();
clickOn(innerDiv);
checkInnermostActiveElement('shadowHost');
debug('click on inner div should focus inner focusable (with delegatesFocus = true)');
prepareDOMTree(sandbox, true);
resetFocus();
host = getNodeInComposedTree('shadowHost');
innerDiv = getNodeInComposedTree('shadowHost/innerDiv');
inputA = getNodeInComposedTree('shadowHost/inputA');
inputB = getNodeInComposedTree('shadowHost/inputB');
inputA.value = 'wonderful'; // len = 9
inputB.value = 'beautiful';
clickOn(innerDiv);
checkInnermostActiveElement('shadowHost/inputA');
// If focus slides from shadow host, all the content will be selected.
shouldBe('inputA.selectionStart', '0');
shouldBe('inputA.selectionEnd', '9');
// Clicking on non-focusable area inside shadow should not change the focus state.
clickOn(innerDiv);
checkInnermostActiveElement('shadowHost/inputA');
shouldBe('inputA.selectionStart', '0');
shouldBe('inputA.selectionEnd', '9');
// Clicking on focusable directly will cause the element to be focused.
clickOn(inputA);
checkInnermostActiveElement('shadowHost/inputA');
clickOn(innerDiv);
checkInnermostActiveElement('shadowHost/inputA');
shouldBe('inputA.selectionStart', '1');
shouldBe('inputA.selectionEnd', '1');
clickOn(inputB);
checkInnermostActiveElement('shadowHost/inputB');
clickOn(innerDiv);
checkInnermostActiveElement('shadowHost/inputB');
shouldBe('inputB.selectionStart', '1');
shouldBe('inputB.selectionEnd', '1');
}
runTest();
</script>