72 lines
2.4 KiB
HTML
72 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8" />
|
|
<title>Dynamic inertness on focused element</title>
|
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
|
<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule">
|
|
<meta name="assert" content="If a focused element becomes inert, it stops being focused.">
|
|
<div id="log"></div>
|
|
|
|
<div class="test-wrapper" data-name="<input> that gets 'inert' attribute">
|
|
<input class="becomes-inert check-focus">
|
|
</div>
|
|
|
|
<div class="test-wrapper" data-name="<input> whose parent gets 'inert' attribute">
|
|
<div class="becomes-inert">
|
|
<input class="check-focus">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-wrapper" data-name="<button> that gets 'inert' attribute">
|
|
<button class="becomes-inert check-focus">foo</button>
|
|
</div>
|
|
|
|
<div class="test-wrapper" data-name="<div> that gets 'inert' attribute">
|
|
<div class="becomes-inert check-focus" tabindex="-1"></div>
|
|
</div>
|
|
|
|
<div class="test-wrapper" data-name="<div> whose parent gets 'inert' attribute">
|
|
<div class="becomes-inert">
|
|
<div class="check-focus" tabindex="-1">bar</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-wrapper" data-name="<div> whose grandparent gets 'inert' attribute">
|
|
<div class="becomes-inert">
|
|
<p>
|
|
<span class="check-focus" tabindex="-1">baz</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
function nextRepaint() {
|
|
return new Promise(resolve => {
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(resolve);
|
|
});
|
|
});
|
|
}
|
|
|
|
const loaded = new Promise(resolve => {
|
|
addEventListener("load", resolve, {once: true});
|
|
});
|
|
promise_setup(() => loaded);
|
|
|
|
for (const testWrapper of document.querySelectorAll(".test-wrapper")) {
|
|
const becomesInert = testWrapper.querySelector(".becomes-inert");
|
|
const checkFocus = testWrapper.querySelector(".check-focus");
|
|
promise_test(async function() {
|
|
checkFocus.focus();
|
|
assert_equals(document.activeElement, checkFocus, "The element is focused");
|
|
|
|
becomesInert.inert = true;
|
|
|
|
// The focus fixup rule should blur the element since it's no longer focusable.
|
|
// In Chromium this happens after a repaint (https://crbug.com/1275097).
|
|
await nextRepaint();
|
|
assert_equals(document.activeElement, document.body, "The element stops being focused");
|
|
}, testWrapper.dataset.name);
|
|
}
|
|
</script>
|