<!doctype html>
<meta charset="utf-8" />
<title>CSS Selectors: custom state pseudo selectors</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/8213" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<script>
test_valid_selector(":state(--foo)");
test_valid_selector(":state(bar)");
test_valid_selector(":state(--)");
test_valid_selector(":state(--0)");
test_valid_selector(":host(:state(--foo))");
test_valid_selector('my-input[type="foo"]:state(checked)');
test_valid_selector('my-input[type="foo"]:state(--0)::before');
test_valid_selector('my-input[type="foo"]:state(--0)::part(inner)');
test_valid_selector(
'my-input[type="foo"]:state(--0)::part(inner):state(bar)',
);
test_valid_selector('::part(inner):state(bar)::before');
test_valid_selector('::part(inner):state(bar)::after');
test_invalid_selector(":state");
test_invalid_selector(":state(");
test_invalid_selector(":state()");
test_invalid_selector(":state(0)");
test_invalid_selector(":state(0rem)");
test_invalid_selector(":state(url())");
test_invalid_selector(":state(foo(1))");
test_invalid_selector(":state(:host)");
test_invalid_selector("my-input::after:state(foo)");
test_invalid_selector('::part(inner):state(bar)::before:state(foo)');
test_invalid_selector('::part(inner):state(bar)::after:state(foo)');
test_invalid_selector("my-input::first-letter:state(foo)");
test_invalid_selector('::slotted(foo):state(foo)');
</script>