blob: c8a6ea86dd94b69a9c74759904c367197c044e2c [file] [log] [blame]
<!doctype html>
<html>
<head>
<style>
.target::before {
content: "Target";
}
/* This rule has two .target, making it higher specificity than the rules below. */
.target:is(*, target, .target, *, target)::before {
background-color: green;
}
/* This rule has a tagname and a class name, making it higher specificity than ".target:is(*)::before". */
target:is(*, target, .target, *, target)::before {
color: white;
}
.target:is(*)::before {
background-color: red;
color: blue;
border: none;
}
/* This rule only has (0, 0, 3) and it superseded by the rule above. */
target:is(*, target, *)::before {
border: 25px solid purple;
}
/* This rule has lower specificity than all the rules above and its property never applies. */
:is(#target, target)::before {
content: "Not Target";
}
</style>
</head>
<body>
<p>This test checks the specificity of the rules inside :is() applying to the pseudo element ::before. The test succeed if the text "Target" is displayed in white on a green background.</p>
<target class="target"></target>
</body>
</html>