Skip to content

[css-view-transitions-1] Handling rendering constaints #8540

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Apr 19, 2023
Merged

[css-view-transitions-1] Handling rendering constaints #8540

Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
58641dc
Layout impact of view-transition-name
jakearchibald Mar 7, 2023
2bbe632
Handle cases where constraints are broken mid-transition
jakearchibald Mar 7, 2023
539608e
wut?
jakearchibald Mar 7, 2023
081c3d5
Remove old reference to layout containment
jakearchibald Mar 7, 2023
8cbae03
Merge remote-tracking branch 'upstream/main' into rendering-constraints
jakearchibald Apr 18, 2023
a03f318
Updates following CSSWG resolution
jakearchibald Apr 18, 2023
4588753
Avoid checking all constraints
jakearchibald Apr 18, 2023
001da03
Line breaks
jakearchibald Apr 18, 2023
b218fae
Update css-view-transitions-1/Overview.bs
jakearchibald Apr 19, 2023
6b6e085
Switch to CSS's element definition throughout
jakearchibald Apr 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 59 additions & 31 deletions css-view-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Shortname: css-view-transitions
Level: 1
Status: WD
Group: csswg
Date: 2023-03-07
Date: 2023-04-18
Prepare for TR: yes
ED: https://drafts.csswg.org/css-view-transitions-1/
TR: https://www.w3.org/TR/css-view-transitions-1/
Expand All @@ -24,7 +24,9 @@ spec:css-position-3; type:property
spec:css-shapes-3; type:function; text:rect()
spec:webidl; type:interface; text:Promise
spec:css-images-4; type:function; text:element()
spec:dom; type:dfn; text:document
spec:dom; type:dfn;
text:document
text:element
spec:css-2022; type:dfn; text:style sheet
spec:selectors-4; type:dfn; text:type selector
spec:css-box-4; type:dfn; text:border box
Expand Down Expand Up @@ -497,6 +499,18 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
This may be confusing, since the elements themselves are not necessarily referring to the same object,
but it is a useful model to consider them to be visual states of the same conceptual page entity, that we happen to call "element".

# Layout and rendering changes # {#layout-rendering-changes}

Both {{Element}}s and [=pseudo-elements=] have a <dfn>involved in a view transition</dfn>, a boolean. Initially false.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nitty nit, feel free to ignore. :)

Suggested change
Both {{Element}}s and [=pseudo-elements=] have a <dfn>involved in a view transition</dfn>, a boolean. Initially false.
Both {{Element}}s and [=pseudo-elements=] have a boolean: <dfn>involved in a view transition</dfn>. Initially false.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, all other concept definitions in the spec are "name, a type. Initially value"

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool. If this is already a pattern in the spec, SGTM.


[=/Elements=] and [=pseudo-elements=] that either have a 'view-transition-name' [=computed value=] that is not ''view-transition-name/none'', or are [=involved in a view transition=], form:

- a [=stacking context=].

- a [[css-transforms-2#grouping-property-values|group]].

- a [=backdrop root=].

# User-agent styles # {#ua-styles}

The <dfn>global view transition user agent style sheet</dfn> is a style sheet in the [=user-agent origin=], used in all namespaces.
Expand Down Expand Up @@ -593,7 +607,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
This enables full customization of the transition.
</div>

### <dfn>::view-transition</dfn>
### <dfn>::view-transition</dfn> ### {#::view-transition}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just fixing some bikeshed errors while I'm here


<div class=note>This element provides a containing block for all ''::view-transition-group()'' pseudo-elements.</div>

Expand All @@ -617,7 +631,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot root origin=].
</div>

### <dfn>::view-transition-group( <<pt-name-selector>> )</dfn>
### <dfn>::view-transition-group( <<pt-name-selector>> )</dfn> ### {#::view-transition-group}

<div class=note>
This element initially mirrors the size and position of the "old" element,
Expand Down Expand Up @@ -652,7 +666,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
}
```

### <dfn>::view-transition-image-pair( <<pt-name-selector>> )</dfn>
### <dfn>::view-transition-image-pair( <<pt-name-selector>> )</dfn> ### {#::view-transition-image-pair}

<div class=note>
This element is a child of the group element and provides ''isolation: isolate'' for its children.
Expand All @@ -679,7 +693,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
}
```

### <dfn>::view-transition-old( <<pt-name-selector>> )</dfn>
### <dfn>::view-transition-old( <<pt-name-selector>> )</dfn> ### {#::view-transition-old}

<div class=note>

Expand Down Expand Up @@ -726,7 +740,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

Note: Additional styles in the [=document/view transition style sheet=] added to animate these pseudo-elements are detailed in [=setup transition pseudo-elements=] and [=update pseudo-element styles=].

### <dfn>::view-transition-new( <<pt-name-selector>> )</dfn>
### <dfn>::view-transition-new( <<pt-name-selector>> )</dfn> ### {#::view-transition-new}

Identical to ''::view-transition-old()'',
except the following styles added to the [=global view transition user agent style sheet=]:
Expand Down Expand Up @@ -828,9 +842,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
Issue: The type of "a set of styles" needs to be linked or defined.

: <dfn>new element</dfn>
:: an element or null. Initially null.

Issue: The type of "element" needs to be linked or defined.
:: an {{Element}}, [=pseudo-element=], or null. Initially null.
</dl>

In addition, a [=captured element=] has the following <dfn for="captured element">style definitions</dfn>:
Expand Down Expand Up @@ -1175,10 +1187,17 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
If failure is returned, then [=skip the view transition=] for |transition| with an "{{InvalidStateError}}" {{DOMException}} in |transition|'s [=relevant Realm=],
and return.

1. [=list/For each=] |capturedElement| of |transition|'s [=ViewTransition/named elements=]' [=map/values=]:

1. If |capturedElement|'s [=captured element/new element=] is not null, then set |capturedElement|'s [=captured element/new element=]'s [=involved in a view transition=] to true.

1. [=Setup transition pseudo-elements=] for |transition|.

1. [=Update pseudo-element styles=] for |transition|.

If failure is returned, then [=skip the view transition=] for |transition| with an "{{InvalidStateError}}" {{DOMException}} in |transition|'s [=relevant Realm=],
and return.

Note: The above steps will require running document lifecycle phases,
to compute information calculated during style/layout.

Expand Down Expand Up @@ -1220,8 +1239,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

* |usedTransitionNames| [=list/contains=] |transitionName|.

* |element| is not |element|'s [=tree/root=] and |element| does not have [=layout containment=].

* |element| is not |element|'s [=tree/root=] and |element| allows [=fragmentation=].

Then return failure.
Expand Down Expand Up @@ -1268,6 +1285,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=].

1. Let |namedElements| be |transition|'s [=ViewTransition/named elements=].

Comment on lines +1292 to +1293
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quick fix of something that was missed in an earlier refactor

1. Let |usedTransitionNames| be a new [=/set=] of strings.

1. [=list/For each=] |element| of every {{Element}} and [=pseudo-element=] connected to |document|,
Expand All @@ -1284,26 +1303,15 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
or |element| is [=element-not-rendered|not rendered=],
then [=continue=].

1. If any of the following is true:

* |usedTransitionNames| [=list/contains=] |transitionName|.

* |element| is not |element|'s [=tree/root=]
and |element| does not have [=layout containment=].

* |element| is not |element|'s [=tree/root=]
and |element| allows [=fragmentation=].

Then return failure.
1. If |usedTransitionNames| [=list/contains=] |transitionName|,
then return failure.

1. [=set/Append=] |transitionName| to |usedTransitionNames|.

1. If |namedElements|[|transitionName|] does not [=map/exist=],
then set |namedElements|[|transitionName|] to a new [=captured element=] struct.

1. Let |capture| be |namedElements|[|transitionName|].

1. Let |capture|'s [=new element=] item be |element|.
1. Set |namedElements|[|transitionName|]'s [=new element=] to |element|.
</div>

### [=Setup transition pseudo-elements=] ### {#setup-transition-pseudo-elements-algorithm}
Expand Down Expand Up @@ -1356,8 +1364,9 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1. If |capturedElement|'s [=new element=] is not null, then:

1. Let |new| be a new ''::view-transition-new()'',
with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|,
displaying the [=capture the image=] of |capturedElement|'s [=new element=].
with its [=named view-transition pseudo-element/view-transition name=] set to |transitionName|.

Note: The styling of this pseudo is handled in [=update pseudo-element styles=].

1. Append |new| to |imagePair|.

Expand Down Expand Up @@ -1636,6 +1645,9 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. [=Update pseudo-element styles=] for |transition|.

If failure is returned, then [=skip the view transition=] for |transition| with an "{{InvalidStateError}}" {{DOMException}} in |transition|'s [=relevant Realm=],
and return.

Note: The above implies that a change in incoming element's size or position will cause a new keyframe to be generated.
This can cause a visual jump.
We could retarget smoothly but don't have a use-case to justify the complexity.
Expand Down Expand Up @@ -1665,6 +1677,20 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. Otherwise:

1. If any of the following is true:

- Any [=flat tree=] ancestor of |capturedElement|'s [=new element=] [=skips its contents=].

- |capturedElement|'s [=new element=] is [=element-not-rendered|not rendered=].

- |capturedElement|'s [=new element=] does not form a [=stacking context=].

- |capturedElement|'s [=new element=] does not form a [[css-transforms-2#grouping-property-values|group]].

- |capturedElement|'s [=new element=] does not form a [=backdrop root=].

Then return failure.

1. Set |width| to the current width of |capturedElement|'s [=new element=]'s [=border box=].

1. Set |height| to the current height of |capturedElement|'s [=new element=]'s [=border box=].
Expand Down Expand Up @@ -1696,9 +1722,9 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. If |capturedElement|'s [=new element=] is not null, then:

1. Let |new| be the ''::view-transition-new()'' [=replaced element=] pseudo-element,
with the name |transitionName|,
displaying the [=capture the image=] of |capturedElement|'s [=new element=].
1. Let |new| be the ''::view-transition-new()'' with the [=view-transition name=] |transitionName|.

1. Set |new|'s [=replaced element=] content to the result of [=capturing the image=] of |capturedElement|'s [=new element=].

1. Let |newViewBox| be an ''object-view-box'' value that when applied to |new|,
will cause the view box to coincide with |capturedElement|'s [=new element=]'s [=border box=] in the image.
Expand Down Expand Up @@ -1735,6 +1761,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. [=list/For each=] |capturedElement| of |transition|'s [=ViewTransition/named elements=]' [=map/values=]:

1. If |capturedElement|'s [=captured element/new element=] is not null, then set |capturedElement|'s [=captured element/new element=]'s [=involved in a view transition=] to false.

1. [=list/For each=] |style| of |capturedElement|'s [=captured element/style definitions=]:

1. If |style| is not null,
Expand Down