Bug 1956140 - Implement active-view-transition pseudo class. r=view-transitions-reviewers,emilio

Swarup Ukil · sukil@mozilla.com · commit 8884dd6cc829 · 2025-06-11T20:41:05.000Z
Differential Revision: https://phabricator.services.mozilla.com/D253061
diff --git a/dom/base/Document.cpp b/dom/base/Document.cpp
@@ -18494,6 +18494,12 @@ already_AddRefed<ViewTransition> Document::StartViewTransition(
   // Step 6: Set document's active view transition to transition.
   mActiveViewTransition = transition;
 
+  // Enable :active-view-transition to allow associated styles to
+  // be applied during the view transition.
+  if (auto* root = this->GetRootElement()) {
+    root->AddStates(ElementState::ACTIVE_VIEW_TRANSITION);
+  }
+
   EnsureViewTransitionOperationsHappen();
 
   // Step 7: return transition
diff --git a/dom/base/rust/lib.rs b/dom/base/rust/lib.rs
@@ -137,6 +137,9 @@ bitflags! {
         /// https://drafts.csswg.org/selectors-4/#open-state
         /// Match whether an openable element is currently open
         const OPEN = 1u64 << 49;
+        /// For :active-view-transition.
+        /// <https://www.w3.org/TR/css-view-transitions-2/#the-active-view-transition-pseudo>
+        const ACTIVE_VIEW_TRANSITION = 1u64 << 50;
 
         /// Some convenience unions.
         const DIR_STATES = Self::LTR.bits() | Self::RTL.bits();
diff --git a/dom/view-transitions/ViewTransition.cpp b/dom/view-transitions/ViewTransition.cpp
@@ -1474,6 +1474,12 @@ void ViewTransition::ClearActiveTransition(bool aIsDocumentHidden) {
   MOZ_ASSERT(mDocument);
   MOZ_ASSERT(mDocument->GetActiveViewTransition() == this);
 
+  // Ensure that any styles associated with :active-view-transition no longer
+  // apply.
+  if (auto* root = mDocument->GetRootElement()) {
+    root->RemoveStates(ElementState::ACTIVE_VIEW_TRANSITION);
+  }
+
   // Step 3
   ClearNamedElements();
 
diff --git a/servo/components/style/gecko/non_ts_pseudo_class_list.rs b/servo/components/style/gecko/non_ts_pseudo_class_list.rs
@@ -45,6 +45,7 @@ macro_rules! apply_non_ts_list {
                 ("focus-visible", FocusVisible, FOCUSRING, _),
                 ("has-slotted", HasSlotted, HAS_SLOTTED, _),
                 ("hover", Hover, HOVER, _),
+                ("active-view-transition", ActiveViewTransition, ACTIVE_VIEW_TRANSITION, _),
                 ("-moz-drag-over", MozDragOver, DRAGOVER, _),
                 ("target", Target, URLTARGET, _),
                 ("indeterminate", Indeterminate, INDETERMINATE, _),
diff --git a/servo/components/style/gecko/selector_parser.rs b/servo/components/style/gecko/selector_parser.rs
@@ -157,6 +157,9 @@ impl NonTSPseudoClass {
         if matches!(*self, Self::HasSlotted) {
             return static_prefs::pref!("layout.css.has-slotted-selector.enabled");
         }
+        if matches!(*self, Self::ActiveViewTransition) {
+            return static_prefs::pref!("dom.viewTransitions.enabled");
+        }
         !self.has_any_flag(NonTSPseudoClassFlag::PSEUDO_CLASS_ENABLED_IN_UA_SHEETS_AND_CHROME)
     }
 
diff --git a/servo/components/style/gecko/wrapper.rs b/servo/components/style/gecko/wrapper.rs
@@ -2098,6 +2098,7 @@ impl<'le> ::selectors::Element for GeckoElement<'le> {
             NonTSPseudoClass::HasSlotted |
             NonTSPseudoClass::MozAutofillPreview |
             NonTSPseudoClass::MozRevealed |
+            NonTSPseudoClass::ActiveViewTransition |
             NonTSPseudoClass::MozValueEmpty => self.state().intersects(pseudo_class.state_flag()),
             NonTSPseudoClass::Dir(ref dir) => self.state().intersects(dir.element_state()),
             NonTSPseudoClass::AnyLink => self.is_link(),
diff --git a/testing/web-platform/meta/css/css-shadow-parts/__dir__.ini b/testing/web-platform/meta/css/css-shadow-parts/__dir__.ini
@@ -1 +1 @@
-prefs: [layout.css.details-content.enabled:true]
+prefs: [layout.css.details-content.enabled:true, dom.viewTransitions.enabled:true]
diff --git a/testing/web-platform/meta/css/css-shadow-parts/pseudo-classes-after-part.html.ini b/testing/web-platform/meta/css/css-shadow-parts/pseudo-classes-after-part.html.ini
@@ -20,8 +20,5 @@
   ["::part(mypart):has(:hover)" should be an invalid selector]
     expected: FAIL
 
-  ["::part(mypart):active-view-transition" should be a valid selector]
-    expected: FAIL
-
   ["::part(mypart):active-view-transition-type(mytype)" should be a valid selector]
     expected: FAIL
diff --git a/testing/web-platform/meta/css/css-view-transitions/active-view-transition-on-non-root.html.ini b/testing/web-platform/meta/css/css-view-transitions/active-view-transition-on-non-root.html.ini
diff --git a/testing/web-platform/meta/css/css-view-transitions/active-view-transition-pseudo-class-match.html.ini b/testing/web-platform/meta/css/css-view-transitions/active-view-transition-pseudo-class-match.html.ini

Original file line number	Diff line number	Diff line change
`@@ -157,6 +157,9 @@ impl NonTSPseudoClass {`
`157`	`157`	`if matches!(*self, Self::HasSlotted) {`
`158`	`158`	`return static_prefs::pref!("layout.css.has-slotted-selector.enabled");`
`159`	`159`	`}`
	`160`	`+ if matches!(*self, Self::ActiveViewTransition) {`
	`161`	`+ return static_prefs::pref!("dom.viewTransitions.enabled");`
	`162`	`+ }`
`160`	`163`	`!self.has_any_flag(NonTSPseudoClassFlag::PSEUDO_CLASS_ENABLED_IN_UA_SHEETS_AND_CHROME)`
`161`	`164`	`}`
`162`	`165`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-prefs: [layout.css.details-content.enabled:true]`
	`1`	`+prefs: [layout.css.details-content.enabled:true, dom.viewTransitions.enabled:true]`