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
This commit is contained in:
Emilio Cobos Álvarez
@@ -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
|
||||
|
||||
@@ -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(viewTransitionGroup, ":view-transition-group", 0)
|
||||
CSS_PSEUDO_ELEMENT(viewTransitionImagePair, ":view-transition-image-pair", 0)
|
||||
CSS_PSEUDO_ELEMENT(viewTransitionOld, ":view-transition-old", 0)
|
||||
CSS_PSEUDO_ELEMENT(viewTransitionNew, ":view-transition-new", 0)
|
||||
CSS_PSEUDO_ELEMENT(viewTransition, ":view-transition",
|
||||
CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS)
|
||||
CSS_PSEUDO_ELEMENT(viewTransitionGroup, ":view-transition-group",
|
||||
CSS_PSEUDO_ELEMENT_ENABLED_IN_UA_SHEETS)
|
||||
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?
|
||||
|
||||
@@ -387,19 +387,21 @@
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensure we recompute the default color for the root based on its
|
||||
* computed color-scheme. This matches other browsers.
|
||||
*
|
||||
* For the default background, we look at the root
|
||||
* element style frame in
|
||||
* PresShell::GetDefaultBackgroundColorToDraw, however we
|
||||
* can't make the initial style (the style the root element
|
||||
* inherits from) depend on the root element's style, as that
|
||||
* is trivially cyclic.
|
||||
*/
|
||||
:root {
|
||||
/**
|
||||
* Ensure we recompute the default color for the root based on its
|
||||
* computed color-scheme. This matches other browsers.
|
||||
*
|
||||
* For the default background, we look at the root
|
||||
* element style frame in
|
||||
* PresShell::GetDefaultBackgroundColorToDraw, however we
|
||||
* can't make the initial style (the style the root element
|
||||
* inherits from) depend on the root element's style, as that
|
||||
* is trivially cyclic.
|
||||
*/
|
||||
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 }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
)}
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
[active-view-transition-on-non-root.html]
|
||||
expected: FAIL
|
||||
@@ -1,2 +0,0 @@
|
||||
[fractional-translation-from-position.html]
|
||||
expected: FAIL
|
||||
@@ -1,2 +0,0 @@
|
||||
[fractional-translation-from-transform.html]
|
||||
expected: FAIL
|
||||
@@ -1,2 +0,0 @@
|
||||
[border-offset-with-padding-inline.tentative.html]
|
||||
expected: FAIL
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
[named-element-with-fix-pos-child-old.html]
|
||||
expected: FAIL
|
||||
@@ -1,2 +0,0 @@
|
||||
[new-and-old-sizes-match.html]
|
||||
expected: FAIL
|
||||
@@ -1,2 +0,0 @@
|
||||
[no-root-capture.html]
|
||||
expected: FAIL
|
||||
@@ -1,4 +0,0 @@
|
||||
[only-child-group.html]
|
||||
[:only-child should match because ::view-transition-group is generated for root element only]
|
||||
expected: FAIL
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
[only-child-image-pair.html]
|
||||
[:only-child should always match for ::view-transition-image-pair]
|
||||
expected: FAIL
|
||||
@@ -1,8 +1,4 @@
|
||||
[pseudo-element-animations-rerun.html]
|
||||
expected:
|
||||
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]
|
||||
expected: TIMEOUT
|
||||
[CSS Animations on view transitions are canceled and restarted when the view transition starts and ends.]
|
||||
expected: FAIL
|
||||
expected: TIMEOUT
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
[rtl-with-scrollbar.html]
|
||||
expected: FAIL
|
||||
@@ -1,2 +0,0 @@
|
||||
[scroller-child-abspos.html]
|
||||
expected: FAIL
|
||||
@@ -1,2 +0,0 @@
|
||||
[scroller-child.html]
|
||||
expected: FAIL
|
||||
@@ -1,2 +0,0 @@
|
||||
[scroller.html]
|
||||
expected: FAIL
|
||||
@@ -1,2 +0,0 @@
|
||||
[transformed-element-scroll-transform.html]
|
||||
expected: FAIL
|
||||
@@ -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"),
|
||||
|
||||
Reference in New Issue
Block a user