[css-view-transitions-1] Scope of the "user-agent origin" stylesheet

[jakearchibald]

In view transitions, we dynamically update styles in the user-agent origin. (I'm not happy with the prose of that section, so don't worry too much about that)

In Chrome, there's an instance of the user-agent origin stylesheet per document, so the modifications we make only impact the current document. However, the cascade spec suggest there may only be one user-agent origin stylesheet, therefore the modifications we make in the view transitions spec would impact other documents, which is bad.

My gut instinct is that we should spec a new cascading origin for view transitions, and specify that there's one instance per document, so modifications will only apply to that document. The cascade spec already mentions an "animation origin" and a "transition origin", which feel similar, although I don't see any usage of those in the linked specs.

@mirisuzanne: I think you might know the right way to spec this.

[mirisuzanne]

I don't think that the current spec for the user-agent origin is meant to imply something specific about how-many default stylesheets are applied by the user-agent, or what their scope is - though I didn't write that section initially. As far as the cascade is concerned, I don't see any issue with user agents adding per-document dynamic styles in the user-agent origin. That seems like the right approach to me.

The transition and animation origins are not for declarations/at-rules that describe a transition or animation - but for intermediate/iterpolated styles caused by transitions and animations. So the following could be applied by a browser, as part of the user-agent origin:

html::view-transition-old(*) {
	animation: -ua-view-transition-fade-out 0.25s both;
}

Authors would be able to override that from the author origin, if they want:

html::view-transition-old(*) {
	animation: custom-fade-out 0.25s both;
}

First the animation declarations are compared by the cascade. They are coming from the user-agent and author origins. The author declaration will 'win' between those. Then the animation needs to actually run, and it will likely change/interpolate opacity from e.g. 1 to 0 along the way. Those interpolated values of opacity are applied from the animation origin, a higher cascade priority than all other normal origins, and lower than important origins.

Does that answer the question? Unless there's an issue from the implementation side, I would consider these generated rules to be additional user agent default styles - and part of the user agent origin.

[tabatkins]

As the UA stylesheet is never directly observable, we have never had to make a statement about the existence of one or several UA stylesheets, or even if a single document can have several. "The UA stylesheet" is just the theoretical source of the declarations that get put in the UA origin for a given document, no more and no less.

The "UA stylesheet" also exists in every shadow root (for the same theoretical reasons), and again whether it's the same sheet or a new one per shadow has never been relevant and so never been defined, as the UA sheets have always been static.

[jakearchibald]

As the UA stylesheet is never directly observable, we have never had to make a statement about the existence of one or several UA stylesheets

Right, but if we say in prose "when this function is called, add a rule to the user-agent origin stylesheet to make divs have a green background", the effect of that is observable. Would it make all divs in the document green? All divs in the origin? All divs in every open window in the browser? Does that rule survive restarts?

I'm thinking the VT spec should say that each document has a "view transition stylesheet", which sits in the UA origin layer. Then the scope and lifecycle of dynamic rules is specified.

[jakearchibald]

@mirisuzanne ahh, ok, I think the problem is we're using the term "user-agent origin" to mean "the user agent stylesheet". As in, we're treating the "user-agent origin" as something styles can be inserted into.

But, from your comment, it seems like "user-agent origin" is more a description of the cascade layer.

Would it be better to say that a stylesheet may exist in the "user-agent origin". Then, the scope and lifecycle of the stylesheet can be defined.

Maybe spec text like this:

Each document has an active view transition stylesheet which is in the user-agent origin. Its rules appear after those in the user-agent stylesheet.

Then later, rules can be added and removed from that stylesheet for dynamic things. Because it's owned by the document, it's clear that the rules added will only affect the current document.

[mirisuzanne]

@jakearchibald That approach makes sense to me.