Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /dom/nodes/ParentNode-querySelector-matches.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>Element.matches with various selector types</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="main">
<p class="foo">Foo</p>
<p>Bar</p>
</div>
<script>
"use strict";
test(() => {
const el = document.querySelector("#main .foo");
assert_true(el.matches("#main p"));
}, "matches with ancestor ID and descendant type selector");
test(() => {
const el = document.querySelector("#main .foo");
assert_false(el.matches("#nonexistent"));
}, "matches returns false for non-matching ID selector");
test(() => {
const el = document.querySelector("#main p:not(.foo)");
assert_true(el.matches("#main p:not(.foo)"));
}, "matches with :not() pseudo-class");
test(() => {
const el = document.querySelector("#main .foo");
assert_true(el.matches("p"));
}, "matches with simple type selector");
</script>