Bug 1914323 - Import static UA sheet for view transitions. r=view-transitions-reviewers,firefox-style-system-reviewers,boris

Enable the relevant features in UA sheets unconditionally.

Differential Revision: https://phabricator.services.mozilla.com/D235573

browser/base/content/test/static/browser_parsable_css.js

@@ -15,7 +15,7 @@ let ignoreList = [
   // UA-only media features.
   {
     sourceName:
-      /\b(contenteditable|EditorOverride|svg|forms|html|mathml|ua)\.css$/i,
+      /\b(contenteditable|EditorOverride|svg|forms|html|mathml|ua|scrollbars|xul)\.css$/i,
     errorMessage: /Unknown pseudo-class.*-moz-/i,
     isFromDevTools: false,
   },
@@ -25,11 +25,6 @@ let ignoreList = [
     errorMessage: /Unknown property.*-moz-/i,
     isFromDevTools: false,
   },
-  {
-    sourceName: /(scrollbars|xul)\.css$/i,
-    errorMessage: /Unknown pseudo-class.*-moz-/i,
-    isFromDevTools: false,
-  },
   // content: -moz-alt-content is UA-only.
   {
     sourceName: /\b(html)\.css$/i,
@@ -76,6 +71,20 @@ if (!Services.prefs.getBoolPref("layout.css.scroll-anchoring.enabled")) {
   });
 }
 
+if (!Services.prefs.getBoolPref("dom.viewTransitions.enabled")) {
+  // view-transition selectors
+  ignoreList.push({
+    sourceName: /\b(ua)\.css$/i,
+    errorMessage: /Unknown pseudo-class.*view-transition/i,
+    isFromDevTools: false,
+  });
+  ignoreList.push({
+    sourceName: /\b(ua)\.css$/i,
+    errorMessage: /Unknown property.*view-transition/i,
+    isFromDevTools: false,
+  });
+}
+
 let propNameAllowlist = [
   // These custom properties are retrieved directly from CSSOM
   // in videocontrols.xml to get pre-defined style instead of computed

layout/style/nsCSSPseudoElementList.h

@@ -53,11 +53,16 @@ CSS_PSEUDO_ELEMENT(selection, ":selection",
 
 CSS_PSEUDO_ELEMENT(targetText, ":target-text", 0)
 
-CSS_PSEUDO_ELEMENT(viewTransition, ":view-transition", 0)
+CSS_PSEUDO_ELEMENT(viewTransition, ":view-transition",
-CSS_PSEUDO_ELEMENT(viewTransitionGroup, ":view-transition-group", 0)
+                   CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS)
-CSS_PSEUDO_ELEMENT(viewTransitionImagePair, ":view-transition-image-pair", 0)
+CSS_PSEUDO_ELEMENT(viewTransitionGroup, ":view-transition-group",
-CSS_PSEUDO_ELEMENT(viewTransitionOld, ":view-transition-old", 0)
+                   CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS)
-CSS_PSEUDO_ELEMENT(viewTransitionNew, ":view-transition-new", 0)
+CSS_PSEUDO_ELEMENT(viewTransitionImagePair, ":view-transition-image-pair",
+                   CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS)
+CSS_PSEUDO_ELEMENT(viewTransitionOld, ":view-transition-old",
+                   CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS)
+CSS_PSEUDO_ELEMENT(viewTransitionNew, ":view-transition-new",
+                   CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS)
 
 // XXXbz should we really allow random content to style these?  Maybe
 // use our flags to prevent that?

layout/style/res/ua.css

@@ -387,7 +387,8 @@
   user-select: text;
 }
 
-/**
+:root {
+  /**
    * Ensure we recompute the default color for the root based on its
    * computed color-scheme. This matches other browsers.
    *
@@ -398,8 +399,9 @@
    * inherits from) depend on the root element's style, as that
    * is trivially cyclic.
    */
-:root {
   color: CanvasText;
+  /* https://drafts.csswg.org/css-view-transitions-1/#ua-styles */
+  view-transition-name: root;
 }
 
 ::backdrop {
@@ -466,3 +468,64 @@ parsererror|sourcetext {
    * when user inserts something. */
   overflow-anchor: none;
 }
+
+/* https://drafts.csswg.org/css-view-transitions-1/#ua-styles */
+
+/* :root section moved to the other root selectors for performance */
+
+:root::view-transition {
+  position: fixed;
+  inset: 0;
+
+  /* Gecko implementation detail to make sure view transitions render in the
+   * top layer */
+  -moz-top-layer: auto !important;
+}
+
+:root::view-transition-group(*) {
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  animation-duration: 0.25s;
+  animation-fill-mode: both;
+}
+
+:root::view-transition-image-pair(*) {
+  position: absolute;
+  inset: 0;
+
+  animation-duration: inherit;
+  animation-fill-mode: inherit;
+  animation-delay: inherit;
+}
+
+:root::view-transition-old(*),
+:root::view-transition-new(*) {
+  position: absolute;
+  inset-block-start: 0;
+  inline-size: 100%;
+  block-size: auto;
+
+  animation-duration: inherit;
+  animation-fill-mode: inherit;
+  animation-delay: inherit;
+}
+
+/* Avoid exposing these keyframe names when view transitions are disabled */
+/* stylelint-disable-next-line media-query-no-invalid */
+@media (-moz-bool-pref: "dom.viewTransitions.enabled") {
+  /* Default cross-fade transition */
+  @keyframes -ua-view-transition-fade-out {
+    to { opacity: 0; }
+  }
+  @keyframes -ua-view-transition-fade-in {
+    from { opacity: 0; }
+  }
+
+  /* Keyframes for blending when there are 2 images */
+  @keyframes -ua-mix-blend-mode-plus-lighter {
+    from { mix-blend-mode: plus-lighter }
+    to { mix-blend-mode: plus-lighter }
+  }
+}

servo/components/style/properties/longhands/ui.mako.rs

@@ -437,4 +437,5 @@ ${helpers.predefined_type(
     gecko_pref="dom.viewTransitions.enabled",
     spec="https://drafts.csswg.org/css-view-transitions-1/#view-transition-name-prop",
     affects="",
+    enabled_in="ua",
 )}

testing/web-platform/meta/css/css-view-transitions/active-view-transition-on-non-root.html.ini

@@ -1,2 +0,0 @@
-[active-view-transition-on-non-root.html]
-  expected: FAIL

testing/web-platform/meta/css/css-view-transitions/fractional-translation-from-position.html.ini

@@ -1,2 +0,0 @@
-[fractional-translation-from-position.html]
-  expected: FAIL

testing/web-platform/meta/css/css-view-transitions/fractional-translation-from-transform.html.ini

@@ -1,2 +0,0 @@
-[fractional-translation-from-transform.html]
-  expected: FAIL

testing/web-platform/meta/css/css-view-transitions/layered-capture/border-offset-with-padding-inline.tentative.html.ini

@@ -1,2 +0,0 @@
-[border-offset-with-padding-inline.tentative.html]
-  expected: FAIL

testing/web-platform/meta/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-new.html.ini

@@ -1,2 +1,4 @@
 [massive-element-left-of-viewport-partially-onscreen-new.html]
-  expected: FAIL
+  bug: Probably missing meta viewport
+  expected:
+    if os == "android": FAIL

testing/web-platform/meta/css/css-view-transitions/massive-element-left-of-viewport-partially-onscreen-old.html.ini

@@ -1,2 +1,4 @@
 [massive-element-left-of-viewport-partially-onscreen-old.html]
-  expected: FAIL
+  bug: Probably missing meta viewport
+  expected:
+    if os == "android": FAIL

testing/web-platform/meta/css/css-view-transitions/named-element-with-fix-pos-child-old.html.ini

@@ -1,2 +0,0 @@
-[named-element-with-fix-pos-child-old.html]
-  expected: FAIL

testing/web-platform/meta/css/css-view-transitions/new-and-old-sizes-match.html.ini

@@ -1,2 +0,0 @@
-[new-and-old-sizes-match.html]
-  expected: FAIL

testing/web-platform/meta/css/css-view-transitions/no-root-capture.html.ini

@@ -1,2 +0,0 @@
-[no-root-capture.html]
-  expected: FAIL

testing/web-platform/meta/css/css-view-transitions/only-child-group.html.ini

@@ -1,4 +0,0 @@
-[only-child-group.html]
-  [:only-child should match because ::view-transition-group is generated for root element only]
-    expected: FAIL
-

testing/web-platform/meta/css/css-view-transitions/only-child-image-pair.html.ini

@@ -1,3 +0,0 @@
-[only-child-image-pair.html]
-  [:only-child should always match for ::view-transition-image-pair]
-    expected: FAIL

testing/web-platform/meta/css/css-view-transitions/pseudo-element-animations-rerun.html.ini

@@ -1,8 +1,4 @@
 [pseudo-element-animations-rerun.html]
-  expected:
+  expected: TIMEOUT
-    if asan and fission: [OK, CRASH, ERROR]
-    if asan and not fission: [OK, ERROR, CRASH]
-    if not asan and tsan: [CRASH, OK, ERROR]
-    [OK, ERROR]
   [CSS Animations on view transitions are canceled and restarted when the view transition starts and ends.]
-    expected: FAIL
+    expected: TIMEOUT

testing/web-platform/meta/css/css-view-transitions/rtl-with-scrollbar.html.ini

@@ -1,2 +0,0 @@
-[rtl-with-scrollbar.html]
-  expected: FAIL

testing/web-platform/meta/css/css-view-transitions/scroller-child-abspos.html.ini

@@ -1,2 +0,0 @@
-[scroller-child-abspos.html]
-  expected: FAIL

testing/web-platform/meta/css/css-view-transitions/scroller-child.html.ini

@@ -1,2 +0,0 @@
-[scroller-child.html]
-  expected: FAIL

testing/web-platform/meta/css/css-view-transitions/scroller.html.ini

@@ -1,2 +0,0 @@
-[scroller.html]
-  expected: FAIL

testing/web-platform/meta/css/css-view-transitions/transformed-element-scroll-transform.html.ini

@@ -1,2 +0,0 @@
-[transformed-element-scroll-transform.html]
-  expected: FAIL

xpcom/ds/StaticAtoms.py

@@ -1731,6 +1731,7 @@ STATIC_ATOMS = [
     Atom("displaystyle_", "displaystyle"),
     Atom("divergence_", "divergence"),
     Atom("divide_", "divide"),
+    Atom("dom_viewTransitions_enabled", "dom.viewTransitions.enabled"),
     Atom("domain_", "domain"),
     Atom("domainofapplication_", "domainofapplication"),
     Atom("edge_", "edge"),
@@ -2500,6 +2501,9 @@ STATIC_ATOMS = [
     Atom("DirectoryService_Appdata", "AppData"),
     Atom("DirectoryService_LocalAppdata", "LocalAppData"),
     Atom("DirectoryService_WinCookiesDirectory", "CookD"),
+    Atom("_ua_view_transition_fade_out", "-ua-view-transition-fade-out"),
+    Atom("_ua_view_transition_fade_in", "-ua-view-transition-fade-in"),
+    Atom("_ua_mix_blend_mode_plus_lighter", "-ua-mix-blend-mode-plus-lighter"),
     # CSS pseudo-elements -- these must appear in the same order as
     # in nsCSSPseudoElementList.h
     PseudoElementAtom("PseudoElement_after", ":after"),