Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/selectors/active-inside-link.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset="utf-8" />
<title>Selectors: :active applies to element clicked inside a link</title>
<link rel="author" href="mailto:wpt@keithcirkel.co.uk" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
#target {
width: 100px;
height: 100px;
}
</style>
<a id="link" href="#">
<div id="target">click me</div>
</a>
<script>
promise_test(async (t) => {
link.addEventListener("click", (e) => e.preventDefault(), {
signal: t.get_signal(),
});
t.add_cleanup(() => new test_driver.Actions().pointerUp().send());
await new test_driver.Actions()
.pointerMove(0, 0, { origin: target })
.pointerDown()
.send();
assert_true(
target.matches(":active"),
"clicked element inside link matches :active",
);
assert_true(link.matches(":active"), "ancestor link matches :active");
}, "element clicked inside a link matches :active");
</script>