50 lines
1.4 KiB
HTML
50 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
|
</head>
|
|
<body>
|
|
<p>Test passes if you see a single 100px by 100px green box below.</p>
|
|
<style>
|
|
* { outline: none; }
|
|
div { width: 100px; height: 100px; background: gray; }
|
|
div:focus { background: red; }
|
|
div:focus-within { color: green; }
|
|
</style>
|
|
<script src="../../resources/ui-helper.js"></script>
|
|
<script>
|
|
|
|
const host = document.createElement('div');
|
|
document.body.appendChild(host);
|
|
|
|
const shadowRoot = host.attachShadow({mode: 'closed', delegatesFocus: true});
|
|
shadowRoot.innerHTML = `
|
|
<style>
|
|
:host { position: relative; }
|
|
div { position: absolute; width: 100px; height: 100px; left: 0px; top: 0px; }
|
|
div:focus { background: green; }
|
|
</style>
|
|
<div id="target" tabindex="0"></div>
|
|
<div>Click here</div>`;
|
|
|
|
async function runTest() {
|
|
testRunner.dumpAsText();
|
|
|
|
await UIHelper.activateElement(host);
|
|
await UIHelper.ensurePresentationUpdate();
|
|
await new Promise(requestAnimationFrame);
|
|
|
|
const pre = document.body.appendChild(document.createElement('pre'));
|
|
log = (text) => pre.textContent += text + '\n';
|
|
|
|
log('document.activeElement: ' + (document.activeElement == host ? 'PASS' : 'FAIL'));
|
|
log('host.activeElement: ' + (shadowRoot.activeElement == shadowRoot.getElementById('target') ? 'PASS' : 'FAIL'));
|
|
}
|
|
|
|
if (window.testRunner)
|
|
UIHelper.wait(runTest());
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|