Skip to content

Instantly share code, notes, and snippets.

@tomalec

tomalec/distribution-order-test.html

Last active August 29, 2015 14:22
Show Gist options
  • Save tomalec/3129b2474ff496c75fdc to your computer and use it in GitHub Desktop.
Save tomalec/3129b2474ff496c75fdc to your computer and use it in GitHub Desktop.
Download ZIP
[Shadow DOM spec]: Focus navigation in distributed content. This is a specific case with content distribution nodes that changes the order of light DOM nodes in composed tree.
Raw
distribution-order-test.html
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="resources/shadow-dom.js"></script>
</head>
<body>
<p>This tests that pressing Tab key should traverse into shadow DOM subtrees, and pressing Shift-Tab should reverse the order.</p>
<p>This is a specific case with content distribution nodes that changes the order of light DOM nodes in composed tree</p>
<pre id="console"></pre>
<script>
function prepareDOMTree(parent)
{
parent.appendChild(
// FIXME: Use more descriptive ids for each elements.
createDOM('div', {'id': 'top-div'},
createDOM('input', {'id': 'input-A-1', 'tabindex': 1}),
createDOM('div', {'id': 'host-A', 'tabindex': -1},
createShadowRoot(
createDOM('input', {'id': 'shadow-input-A-0', 'tabindex': 0}),
createDOM('input', {'id': 'shadow-input-A-1', 'tabindex': 1}),
createDOM('content', {'select': '#light-child-selected-A-0, #light-child-selected-B-1'}, 'tabindex': 1),
createDOM('input', {'id': 'shadow-input-B-0', 'tabindex': 0}),
createDOM('input', {'id': 'shadow-input-B-1', 'tabindex': 1})),
createDOM('content', {'select': '#light-child-selected-A-1'}, 'tabindex': 1),
createDOM('input', {'id': 'light-child-selected-A-0', 'tabindex': 0}),
createDOM('input', {'id': 'light-child-selected-A-1', 'tabindex': 1}),
createDOM('input', {'id': 'light-child-selected-B-1', 'tabindex': 1}),
createDOM('input', {'id': 'light-child-non-selected-1', 'tabindex': 1}))
createDOM('input', {'id': 'input-B-1', 'tabindex': 1}),
parent.offsetLeft;
}
function test() {
if (window.testRunner)
testRunner.dumpAsText();
if (!window.eventSender) {
testFailed('');
return;
}
prepareDOMTree(document.body);
// FIXME: Output inserted comments in this array to expected.txt for readability of the result.
var elementsInFocusNavigationOrder = [
'input-A-1',
// A non-focusable shadow host (id=host-A) will be "replaced" with its shadow DOM navigation.
// Enter the focus scope of the shadow root in the shadow host and traverse the first focusable node in the shadow DOM navigation.
'host-A/shadow-input-A-1',
'host-A/shadow-input-B-1',
'host-A/shadow-input-A-0',
'host-A/shadow-input-B-0',
// Exits the focus scope of the shadow root.
// We consider only host-A content which was distributed in shadow tree (which participate in the composed tree)
// but is traversed as part of outermost scope, disregarding shadow tree distribution nodes
'#light-child-selected-A-1',
'#light-child-selected-B-1',
// 'light-child-non-selected-1' should be skipped since it doesn't participate in the composed tree.
'input-B-1',
// All elements with tabindex=1 had been traversed in the outermost scope.
// So traverse elements with tabindex=0 in next.
'#light-child-selected-A-0',
// Wraps to the first element in the outermost focus scope.
'input-A-1',
];
testFocusNavigationForward(elementsInFocusNavigationOrder);
elementsInFocusNavigationOrder.reverse();
testFocusNavigationBackward(elementsInFocusNavigationOrder);
debug('Test finished.');
}
test();
</script>
</body>
</html>
Powered by Gitiles
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment