products/Sources/formale Sprachen/C/Firefox/layout/inspector/tests/test_selectormatcheselement.html
<!DOCTYPE HTML >
<html >
<!--
https : / / bugzilla . mozilla . org / show_bug . cgi ? id = 1037519
-->
<head >
<title >Test for CSSStyleRule::selectorMatchesElement</title >
<script src="/tests/SimpleTest/SimpleTest.js" ></script >
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
<style type="text/css" >
#foo,
#bar,
#foo::before {
color: red;
}
#foo {
div & {
outline: 1 px solid gold;
}
}
#foo::before,
#bar::before {
content: 'foo-before' ;
color: green;
}
#foo::after,
#bar::after {
content: 'foo-after' ;
color: blue;
}
#foo::first-line,
#bar::first-line {
text-decoration: underline;
}
#foo::first-letter,
#bar::first-letter {
font -variant: small -caps;
}
::view-transition-group(root), #bar, ::view-transition-group(*) {
animation-duration: 3600 s ;
}
</style >
</head >
<body >
<div id="foo" >foo content</div >
<script >
const InspectorUtils = SpecialPowers.InspectorUtils;
add_task(async () => {
const element = document.querySelector("#foo" );
const elementRules = InspectorUtils.getMatchingCSSRules(element);
const multiSelectorRule = elementRules[2 ];
is(
multiSelectorRule.selectorText,
`#foo, #bar, #foo::before`,
"Got expected multi-selector rule"
);
ok(
multiSelectorRule.selectorMatchesElement(0 , element),
"Matches #foo"
);
ok(
!multiSelectorRule.selectorMatchesElement(1 , element),
"Doesn't match #bar"
);
ok(
!multiSelectorRule.selectorMatchesElement(0 , element, ":bogus" ),
"Doesn't match #foo with a bogus pseudo"
);
ok(
!multiSelectorRule.selectorMatchesElement(2 , element, ":bogus" ),
"Doesn't match #foo::before with bogus pseudo"
);
ok(
!multiSelectorRule.selectorMatchesElement(0 , element, ":after" ),
"Does match #foo::before with the :after pseudo"
);
const nestedRule = elementRules[4 ];
is(nestedRule.selectorText, `div &`, "Got expected nested rule" );
ok(nestedRule.selectorMatchesElement(0 , element), "Matches div&" );
checkPseudo(":before" );
checkPseudo(":after" );
checkPseudo(":first-letter" );
checkPseudo(":first-line" );
function checkPseudo(pseudo) {
const rule = InspectorUtils.getMatchingCSSRules(element, pseudo).at(-1 );
ok(
!rule.selectorMatchesElement(0 , element),
"Doesn't match without " + pseudo
);
ok(
!rule.selectorMatchesElement(1 , element),
"Doesn't match without " + pseudo
);
ok(
rule.selectorMatchesElement(0 , element, pseudo),
"Matches on #foo" + pseudo
);
ok(
!rule.selectorMatchesElement(1 , element, pseudo),
"Doesn't match on #bar" + pseudo
);
}
info("Create a view transition" );
const transition = document.startViewTransition(() => {
element.replaceChildren("updated foo content" );
});
await transition.ready;
await transition.updateCallbackDone;
const viewTransitionGroupRule = InspectorUtils.getMatchingCSSRules(
document.documentElement,
"::view-transition-group(root)"
).find(rule => {
try {
return rule.selectorText === "::view-transition-group(root), #bar, ::view-transition-group(*)" ;
} catch {}
return false;
});
ok(
!!viewTransitionGroupRule,
"Got the expected ::view-transition-group rule"
);
ok(
viewTransitionGroupRule.selectorMatchesElement(
0 ,
document.documentElement,
"::view-transition-group(root)"
),
"Matches ::view-transition-group(root)"
);
ok(
!viewTransitionGroupRule.selectorMatchesElement(1 , document.documentElement),
"Doesn't match #bar"
);
ok(
viewTransitionGroupRule.selectorMatchesElement(
2 ,
document.documentElement,
"::view-transition-group(root)"
),
"Matches ::view-transition-group(*)"
);
});
</script >
</body >
</html >
Messung V0.5 in Prozent C=100 H=100 G=100
¤ Dauer der Verarbeitung: 0.21 Sekunden
(vorverarbeitet am 2026-08-22)
¤
*© Formatika GbR, Deutschland