commit f4944870263721268967d7829f8296a88ad70c0b
parent 6bbcf4b20183dfdabced33bd00d2a01bd3da796a
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date: Fri, 31 Oct 2025 05:58:41 +0000
Bug 1997145 - [devtools] Add test for CSSRule.selectorMatchesElement for view-transition pseudo element rules. r=firefox-style-system-reviewers,layout-reviewers,view-transitions-reviewers,emilio
Differential Revision: https://phabricator.services.mozilla.com/D270550
Diffstat:
1 file changed, 38 insertions(+), 0 deletions(-)
diff --git a/layout/inspector/tests/test_selectormatcheselement.html b/layout/inspector/tests/test_selectormatcheselement.html
@@ -38,6 +38,10 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1037519
#bar::first-letter {
font-variant: small-caps;
}
+
+ ::view-transition-group(root), #bar {
+ animation-duration: 3600s;
+ }
</style>
</head>
<body>
@@ -106,6 +110,40 @@ add_task(async () => {
"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";
+ } 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"
+ );
});
</script>
