116 lines
4.6 KiB
HTML
116 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<body>
|
|
<p>Tests for setting a negative tabindex on shadow host. Elements inside such a shadow tree should not be in the sequential navigation order.<br>
|
|
To manually test, press tab key four times. It should traverse focusable elements in the increasing numerical order.</p>
|
|
<div id="test-content">
|
|
<div id="first" tabindex="1">1. First sequentially focusable element</div>
|
|
<iframe src="about:blank">2. An iframe without a focusable element</iframe>
|
|
<iframe src="about:blank">An iframe with a focusable element should not be focused</iframe>
|
|
<iframe src="about:blank">5. An iframe without a focusable shadow host or shadow content</iframe>
|
|
<iframe src="about:blank">An iframe with a focusable shadow content should not be focused (1)</iframe>
|
|
<iframe src="about:blank">An iframe with a focusable shadow content should not be focused (2)</iframe>
|
|
</div>
|
|
<pre></pre>
|
|
<script>
|
|
|
|
var oldActiveElement = null;
|
|
function log()
|
|
{
|
|
setTimeout(function () {
|
|
var newActiveElement = document.activeElement;
|
|
|
|
if (newActiveElement instanceof HTMLIFrameElement) {
|
|
var contentDocument = newActiveElement.contentDocument;
|
|
var activeElementInsideFrame = contentDocument.activeElement;
|
|
if (activeElementInsideFrame != contentDocument.body && activeElementInsideFrame != contentDocument.documentElement /* Firefox */)
|
|
newActiveElement = activeElementInsideFrame;
|
|
}
|
|
|
|
if (newActiveElement.shadowRoot) {
|
|
var activeElementInShadow = newActiveElement.shadowRoot.activeElement;
|
|
if (activeElementInShadow)
|
|
newActiveElement = activeElementInShadow;
|
|
}
|
|
|
|
if (oldActiveElement == newActiveElement || newActiveElement == document.body)
|
|
return;
|
|
oldActiveElement = newActiveElement;
|
|
document.querySelector('pre').textContent += newActiveElement.textContent + '\n';
|
|
}, 0);
|
|
}
|
|
|
|
if (window.testRunner) {
|
|
testRunner.dumpAsText();
|
|
testRunner.waitUntilDone();
|
|
}
|
|
|
|
window.onload = function () {
|
|
document.onkeydown = log;
|
|
|
|
var iframes = document.querySelectorAll('iframe');
|
|
for (var i = 0; i < iframes.length; i++)
|
|
iframes[i].contentDocument.onkeydown = log;
|
|
|
|
iframes[0].contentDocument.body.innerHTML = 'Content of an iframe without a focusable element should not be focused';
|
|
iframes[1].contentDocument.body.innerHTML = `
|
|
<div tabindex="0" onfocus="top.log(this)">3. First focusable element inside an iframe</div>
|
|
<div tabindex="0" onfocus="top.log(this)">4. Second focusable element inside an iframe</div>`;
|
|
|
|
iframes[2].contentDocument.body.innerHTML = '<div>A non-focusable shadow host without a focusable content should not be focused</div>';
|
|
var host = iframes[2].contentDocument.body.querySelector('div');
|
|
var shadowRoot = host.attachShadow({mode: 'closed'});
|
|
shadowRoot.innerHTML = '<slot></slot>';
|
|
|
|
iframes[3].contentDocument.body.innerHTML = '<div></div>';
|
|
var host = iframes[3].contentDocument.querySelector('div');
|
|
var shadowRoot = host.attachShadow({mode: 'open'});
|
|
shadowRoot.innerHTML = '<div tabindex="0" onfocus="top.log(this)">6. Focusable content inside a shadow tree</div>';
|
|
|
|
iframes[4].contentDocument.body.innerHTML = '<div></div><i tabindex="1">7. A focusable element with a high tabindex</i><span></span>';
|
|
host = iframes[4].contentDocument.querySelector('div');
|
|
shadowRoot = host.attachShadow({mode: 'open'});
|
|
shadowRoot.innerHTML = '<div tabindex="0" onfocus="top.log(this)">8. Focusable content inside the first shadow tree</div>';
|
|
|
|
host = iframes[4].contentDocument.querySelector('span');
|
|
shadowRoot = host.attachShadow({mode: 'open'});
|
|
shadowRoot.innerHTML = '<div tabindex="0" onfocus="top.log(this)">9. Focusable content inside the second shadow tree</div>';
|
|
|
|
document.getElementById('first').focus();
|
|
document.onkeydown();
|
|
|
|
if (window.eventSender)
|
|
moveFocusForward(8);
|
|
}
|
|
|
|
function moveFocusForward(focusCount)
|
|
{
|
|
setTimeout(function () {
|
|
if (!focusCount)
|
|
return moveFocusBackward(8);
|
|
eventSender.keyDown('\t');
|
|
setTimeout(function () {
|
|
moveFocusForward(focusCount - 1);
|
|
}, 1);
|
|
}, 1);
|
|
}
|
|
|
|
function moveFocusBackward(focusCount)
|
|
{
|
|
setTimeout(function () {
|
|
if (!focusCount) {
|
|
document.getElementById('test-content').style.display = 'none';
|
|
testRunner.notifyDone();
|
|
return;
|
|
}
|
|
eventSender.keyDown('\t', ['shiftKey']);
|
|
setTimeout(function () {
|
|
moveFocusBackward(focusCount - 1);
|
|
}, 1);
|
|
}, 1);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|