Skip to content

[css-view-transitions-1] Rename snapshot-root to snapshot containing block #8814

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 4 commits into from
May 18, 2023
Merged

[css-view-transitions-1] Rename snapshot-root to snapshot containing block #8814

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
225c067
Rename snapshot-root to snapshot containing block
noamr May 7, 2023
cf18886
Move stuff around
noamr May 9, 2023
096c140
Add changelist entry
noamr May 11, 2023
df44d21
Heading name
noamr May 18, 2023
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 30 additions & 27 deletions css-view-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -621,13 +621,13 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

### <dfn>::view-transition</dfn> ### {#::view-transition}

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

A [=tree-abiding pseudo-element=] that is also
a [=pseudo-element root=].
Its [=originating element=] is the document's [=document element=].

Its [=containing block=] is the [=snapshot root=].
Its [=containing block=] is the [=snapshot containing block=].

The following is added to the [=global view transition user agent style sheet=]:

Expand All @@ -639,8 +639,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
```

<div class="note">
The aim of the style is to size the pseudo-element to cover the [=snapshot root=]
and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot root origin=].
The aim of the style is to size the pseudo-element to cover the [=snapshot containing block=]
and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot containing block origin=].
</div>

### <dfn>::view-transition-group( <<pt-name-selector>> )</dfn> ### {#::view-transition-group}
Expand Down Expand Up @@ -782,39 +782,42 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

The initial phase is the first item in the sequence.

## The snapshot root ## {#snapshot-root-concept}
## The snapshot containing block ## {#snapshot-containing-block-concept}

The <dfn>snapshot root</dfn> is a rectangle that covers all areas of the window that could potentially display web content.
The <dfn>snapshot containing block</dfn> is a rectangle that covers all areas of the window that could potentially display web content.
This area is consistent regardless of root scrollbars or interactive widgets.

Issue: "Interactive widgets" refers to UI described within a property definition in [[css-viewport#interactive-widget-section]].
This should be extracted into an exported definition that can be used independently of the property.

<figure>
<img src="diagrams/phone-browser.svg" width="200" height="335" alt="A diagram of a phone screen, including a top status bar, a browser URL bar, web-content area with a floating scrollbar, a virtual keyboard, and a bottom bar with an OS back button">
<img src="diagrams/phone-browser-snapshot-root.svg" width="200" height="335" alt="The previous diagram, but highlights the area that's the 'snapshot root', which includes everything except the top status bar and the bottom bar with the OS back button">
<img src="diagrams/phone-browser-snapshot-root.svg" width="200" height="335" alt="The previous diagram, but highlights the area that's the 'snapshot containing block', which includes everything except the top status bar and the bottom bar with the OS back button">
<figcaption>
An example of the [=snapshot root=] on a mobile OS.
An example of the [=snapshot containing block=] on a mobile OS.
The snapshot includes the URL bar, as this can be scrolled away.
The keyboard is included as this appears and disappears.
The top and bottom bars are part of the OS rather than the browser, so they're not included in the snapshot root.
The top and bottom bars are part of the OS rather than the browser, so they're not included in the snapshot containing block.
</figcaption>
</figure>

<figure>
<img src="diagrams/desktop-browser.svg" width="132" height="79" alt="A diagram of a desktop browser window, including a tab bar, a URL bar, and a web-content area featuring both horizontal and vertical scrollbars" style="height:auto; width: 600px">
<img src="diagrams/desktop-browser-snapshot-root.svg" width="132" height="79" alt="The previous diagram, but highlights the area that's the 'snapshot root', which includes the web content area and the scrollbars" style="height:auto; width: 600px">
<img src="diagrams/desktop-browser-snapshot-root.svg" width="132" height="79" alt="The previous diagram, but highlights the area that's the 'snapshot containing block', which includes the web content area and the scrollbars" style="height:auto; width: 600px">
<figcaption>
An example of the [=snapshot root=] on a desktop OS.
An example of the [=snapshot containing block=] on a desktop OS.
This includes the scrollbars, but does not include the URL bar, as web content never appears in that area.
</figcaption>
</figure>

This means the snapshot canvas size is likely to be consistent for the [=document element=]'s [=captured element/old image=] and [=captured element/new element=].

The <dfn>snapshot root origin</dfn> refers to the top-left corner of the [=snapshot root=].
The <dfn>snapshot containing block origin</dfn> refers to the top-left corner of the [=snapshot containing block=].

The <dfn>snapshot root size</dfn> refers to the width and height of the [=snapshot root=] as a [=/tuple=] of two numbers.
The <dfn>snapshot containing block size</dfn> refers to the width and height of the [=snapshot containing block=] as a [=/tuple=] of two numbers.

The [=snapshot containing block=] is considered to be an [=absolute positioning containing block=]
and a [=fixed positioning containing block=] for ''::view-transition'' and its descendants.

## The [=view-transition layer=] stacking layer ## {#view-transition-stacking-layer}

Expand Down Expand Up @@ -908,7 +911,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
When this is true, [=this=]'s [=active view transition=]'s [=ViewTransition/transition root pseudo-element=] renders as a child of [=this=]'s [=document element=],
and [=this=]'s [=document element=] is its [=originating element=].

Note: The position of the [=ViewTransition/transition root pseudo-element=] within the [=document element=] does not matter, as the [=ViewTransition/transition root pseudo-element=]'s [=containing block=] is the [=snapshot root=].
Note: The position of the [=ViewTransition/transition root pseudo-element=] within the [=document element=] does not matter, as the [=ViewTransition/transition root pseudo-element=]'s [=containing block=] is the [=snapshot containing block=].
</dl>

# API # {#api}
Expand Down Expand Up @@ -1064,11 +1067,11 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
:: a ''::view-transition''.
Initially a new ''::view-transition''.

: <dfn>initial snapshot root size</dfn>
: <dfn>initial snapshot containing block size</dfn>
:: a [=tuple=] of two numbers (width and height), or null.
Initially null.

Note: This is used to detect changes in the [=snapshot root size=],
Note: This is used to detect changes in the [=snapshot containing block size=],
which causes the transition to [=skip the view transition|skip=].
[Discussion of this behavior](https://github.com/w3c/csswg-drafts/issues/8045).
</dl>
Expand Down Expand Up @@ -1189,7 +1192,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

Note: This happens if |transition| was [=skip the view transition|skipped=] before this point.

1. If |transition|'s [=ViewTransition/initial snapshot root size=] is not equal to the [=snapshot root size=],
1. If |transition|'s [=ViewTransition/initial snapshot containing block size=] is not equal to the [=snapshot containing block size=],
then [=skip the view transition=] for |transition|, and return.

1. Set [=document/transition suppressing rendering=] to false.
Expand Down Expand Up @@ -1232,7 +1235,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

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

1. Set |transition|'s [=ViewTransition/initial snapshot root size=] to the [=snapshot root size=].
1. Set |transition|'s [=ViewTransition/initial snapshot containing block size=] to the [=snapshot containing block size=].

1. [=list/For each=] |element| of every [=/element=] that is [=/connected=],
and has a [=node document=] equal to to |document|,
Expand Down Expand Up @@ -1265,12 +1268,12 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

: 'transform'
:: A transform that would map |element|'s [=border box=] from
the [=snapshot root origin=] to its current visual position.
the [=snapshot containing block origin=] to its current visual position.
:: This value is identity for the [=document element=].

: 'width'
: 'height'
:: The size of the [=snapshot root=] if |element| is the [=document element=],
:: The size of the [=snapshot containing block=] if |element| is the [=document element=],
otherwise, the width and height of |element|'s border box.

: 'object-view-box'
Expand Down Expand Up @@ -1530,8 +1533,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. If |element| is the [=document element=], then:

1. Render the region of the |element| and the [=top layer=] that intersects the [=snapshot root=],
on a transparent canvas the size of the [=snapshot root=],
1. Render the region of the |element| and the [=top layer=] that intersects the [=snapshot containing block=],
on a transparent canvas the size of the [=snapshot containing block=],
following the [=capture rendering characteristics=], and these additional characteristics:

- Areas outside |element|'s [=scrolling box=] should be rendered as if they were scrolled to, without moving or resizing the [=layout viewport=].
Expand Down Expand Up @@ -1559,7 +1562,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
</figure>

1. Return the canvas as an image.
The natural size of the image is equal to the [=snapshot root=].
The natural size of the image is equal to the [=snapshot containing block=].

1. Otherwise:

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

1. Return.

1. If |transition|'s [=ViewTransition/initial snapshot root size=] is not equal to the [=snapshot root size=],
1. If |transition|'s [=ViewTransition/initial snapshot containing block size=] is not equal to the [=snapshot containing block size=],
then [=skip the view transition=] for |transition|, and return.

1. [=Update pseudo-element styles=] for |transition|.
Expand Down Expand Up @@ -1685,7 +1688,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

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

1. Set |transform| to a transform that would map |capturedElement|'s [=new element=]'s [=border box=] from the [=snapshot root origin=] to its current visual position.
1. Set |transform| to a transform that would map |capturedElement|'s [=new element=]'s [=border box=] from the [=snapshot containing block origin=] to its current visual position.

1. Set |writingMode| to the [=computed value=] of 'writing-mode' on |capturedElement|'s [=new element=].

Expand Down Expand Up @@ -1787,15 +1790,15 @@ Changes from <a href="https://www.w3.org/TR/2022/WD-css-view-transitions-1-20221
* Add rendering constraints to elements participating in a transition. See <a href="https://github.com/w3c/csswg-drafts/issues/8139">issue 8139</a> and <a href="https://github.com/w3c/csswg-drafts/issues/7882">issue 7882</a>.
* Remove html specifics from UA stylesheet to support ViewTransitions on SVG Documents.
* Rename updateDOMCallback to {{UpdateCallback}}. See <a href="https://github.com/w3c/csswg-drafts/issues/8144">issue 8144</a>.
* Rename snapshot viewport to [=snapshot root=].
* Rename snapshot viewport to [=snapshot containing block=].
* Skip the transition if viewport size changes. See <a href="https://github.com/w3c/csswg-drafts/issues/8045">issue 8045</a>.
* Add support for :only-child. See <a href="https://github.com/w3c/csswg-drafts/issues/8057">issue 8057</a>.
* Add concept of a tree of pseudo-elements under [=pseudo-element root=]. See <a href="https://github.com/w3c/csswg-drafts/issues/8113">issue 8113</a>.
* When skipping a transition, the {{UpdateCallback}} is called in own task rather than synchronosly. See <a href="https://github.com/w3c/csswg-drafts/issues/7904">issue 7904</a>
* When capturing images, at least the in-viewport part of the image should be captured, downscale if needed. See <a href="https://github.com/w3c/csswg-drafts/issues/8561">issue 8561</a>.
* Applying the [=ink overflow=] to the captured image is implementation defined, and doesn't affect the image's [=natural size=]. See <a href="https://github.com/w3c/csswg-drafts/issues/8597">issue 8597</a>.
* Fragmented elements don't participate in view transitions. See <a href="https://github.com/w3c/csswg-drafts/issues/8339">issue 8339</a>.

* Rename "snapshot root" to "snapshot containing block", and make it an [=absolute positioning containing block=] and a [=fixed positioning containing block=] for its descendants. See <a href="https://github.com/w3c/csswg-drafts/issues/8505">issue 8505</a>.
<h3 id="changes-since-2022-10-25">
Changes from <a href="https://www.w3.org/TR/2022/WD-css-view-transitions-1-20221025/">2022-10-25 Working Draft (FPWD)</a>
</h3>
Expand Down