Re: [csswg-drafts] [css-animations-2, css-transitions-2] Entry and exit animations for top-layer elements (#8189)

Here is what I wrote up about spec changes for CSS and HTML that would support transitions of top layer elements with a top-layer property. It matches the implementation we have behind a flag in Blink.

**TL;DR** Outline spec changes needed to introduce the top layer concept in CSS with a `top-layer` property as well as specifying how ordering of top layer candidate elements can be provided by the host languages like HTML.

## Background

* The order of elements in the top layer is currently given by the host language via the HTML and Fullscreen specifications.
* Currently, those specifications also say which elements are actually rendered in the top layer or not.
* An element is currently still considered to be in the top layer in a given order even when not rendered. A dialog can e.g. be in the top layer even when it is deep down in a `display: none` subtree.
* Moving elements in and out of the top layer happens synchronously per current specifications and is not connected to the update rendering step in the HTML specification.
* There is a proposal to be able to transition elements out of the top layer and have the element still be rendered in the top layer during the transition.
* The `top-layer` property proposal is in [issue #8189](https://github.com/w3c/csswg-drafts/issues/8189)
* There is a [long-standing request in the fullscreen specification](https://fullscreen.spec.whatwg.org/#rendering) to define the top layer concept in CSS as part of the stacking context model.

## Proposed Changes

### CSS Specification

* Introduce the concept of rendering elements in the top layer, how such elements interact with the box tree, stacking, positioning, etc. The current [Fullscreen specification](https://fullscreen.spec.whatwg.org/#new-stacking-layer) can be used as a starting point.
* Introduce a `top-layer` property taking the values `none` and `browser`.
* Require that the host language provides an ordered list of elements from the DOM, along with the DOM, which are candidates for being rendered in the CSS top layer.
* If the computed value of the `top-layer` property for an element in that ordered list is `browser`, render the element in the top layer. If the element is in that list but the `top-layer` property computes to `none`, do normal rendering as part of the DOM tree.
* It is up to the host language to specify UA styles.
* It is up to the host language to move elements in and out of the ordered list of candidates for top layer rendering.


### HTML Specification

* Add two collections of top layer elements
    1. The ordered list of top layer candidate elements to be passed to the CSS implementation.
    2. A set of candidates to be removed from list (i) after the rendering has been updated. This is a subset of the elements in (i).
* When the current HTML specification says to add an element to the top layer:
    1. If the element is in the top layer candidate elements list, and not in the set of candidate elements to be removed, do nothing.
    2. Otherwise add it to the end of the candidate element list, but remove it from the candidate list first if already present.
* When the current HTML specification says to remove an element to the top layer, add the element to the set of candidates to be removed instead.
* After the update rendering step, remove all elements in the set of candidates to be removed for which either apply (remove both from the to-be-removed set and the ordered candidate list):
    1. The element is not rendered
    2. The computed value of `top-layer` is `none`
* Introduce UA styles as outlined in [issue #8189](https://github.com/w3c/csswg-drafts/issues/8189) to not allow author to generally override top layer rendering while allowing the author to keep elements in the top layer for exit transitions by adding `transition-property: top-layer`


### Fullscreen Specification

* Interacts with the HTML specification. Possibly some details about immediately removing elements from the top layer candidate list if top layer transitions should not work for fullscreen'ed elements.



-- 
GitHub Notification of comment by lilles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8189#issuecomment-1447989290 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 28 February 2023 11:08:08 UTC