-
Notifications
You must be signed in to change notification settings - Fork 706
[css-view-transitions-1] Replace 'snapshot viewport' with 'snapshot root' #8324
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.
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
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -246,7 +246,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; | |
a [=pseudo-element root=]. | ||
Its [=originating element=] is the document's [=document element=]. | ||
|
||
Its [=containing block=] is the [=snapshot viewport=]. | ||
Its [=containing block=] is the [=snapshot root=]. | ||
|
||
The following is added to the [=HTML user agent style sheet=]: | ||
|
||
|
@@ -259,8 +259,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; | |
|
||
<div class="note"> | ||
This pseudo-element provides a containing block for all ''::view-transition-group()'' pseudo-elements. | ||
The aim of the style is to size the pseudo-element to cover the [=snapshot viewport=] | ||
and position all ''::view-transition-group()'' pseudo-elements relative to the [=snapshot viewport origin=]. | ||
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=]. | ||
</div> | ||
|
||
: <dfn>::view-transition-group( <<pt-name-selector>> )</dfn> | ||
|
@@ -363,39 +363,39 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; | |
|
||
The initial phase is the first item in the sequence. | ||
|
||
## The snapshot viewport ## {#snapshot-viewport-concept} | ||
## The snapshot root ## {#snapshot-root-concept} | ||
|
||
The <dfn>snapshot viewport</dfn> covers all areas of the window that could potentially display web content. | ||
The <dfn>snapshot root</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-viewport.svg" width="200" height="335" alt="The previous diagram, but highlights the area that's the 'snapshot' viewport, 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 root', which includes everything except the top status bar and the bottom bar with the OS back button"> | ||
<figcaption> | ||
An example of the [=snapshot viewport=] on a mobile OS. | ||
An example of the [=snapshot root=] 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 viewport. | ||
The top and bottom bars are part of the OS rather than the browser, so they're not included in the snapshot root. | ||
</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-viewport.svg" width="132" height="79" alt="The previous diagram, but highlights the area that's the 'snapshot' viewport, 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 root', which includes the web content area and the scrollbars" style="height:auto; width: 600px"> | ||
<figcaption> | ||
An example of the [=snapshot viewport=] on a desktop OS. | ||
An example of the [=snapshot root=] 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 viewport origin</dfn> refers to the start of the block and inline axes of the [=snapshot viewport=]. | ||
The <dfn>snapshot root origin</dfn> refers to the top-left corner of the [=snapshot root=]. | ||
|
||
The <dfn>snapshot viewport size</dfn> refers to the width and height of the [=snapshot viewport=] as a [=/tuple=] of two numbers. | ||
The <dfn>snapshot root size</dfn> refers to the width and height of the [=snapshot root=] as a [=/tuple=] of two numbers. | ||
|
||
## The [=view-transition layer=] stacking layer ## {#view-transition-stacking-layer} | ||
|
||
|
@@ -493,7 +493,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; | |
When this is true, [=this=]'s [=active DOM 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 viewport=]. | ||
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=]. | ||
</dl> | ||
|
||
# API # {#api} | ||
|
@@ -642,11 +642,11 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; | |
:: a ''::view-transition''. | ||
Initially a new ''::view-transition''. | ||
|
||
: <dfn>initial snapshot viewport size</dfn> | ||
: <dfn>initial snapshot root size</dfn> | ||
:: a [=tuple=] of two numbers (width and height), or null. | ||
Initially null. | ||
|
||
Note: This is used to detect changes in the [=snapshot viewport size=], | ||
Note: This is used to detect changes in the [=snapshot root size=], | ||
which causes the transition to [=skip the view transition|skip=]. | ||
[Discussion of this behavior](https://github.com/w3c/csswg-drafts/issues/8045). | ||
</dl> | ||
|
@@ -725,7 +725,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; | |
|
||
1. Let |document| be |transition|'s [=relevant global object's=] [=associated document=]. | ||
|
||
1. Set |transition|'s [=ViewTransition/initial snapshot viewport size=] to the [=snapshot viewport size=]. | ||
1. Set |transition|'s [=ViewTransition/initial snapshot root size=] to the [=snapshot root size=]. | ||
|
||
1. [=list/For each=] |element| of every {{Element}} and [=pseudo-element=] connected to |document|, | ||
in [paint order](https://drafts.csswg.org/css2/#painting-order): | ||
|
@@ -762,13 +762,13 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; | |
1. Set |capture|'s [=captured element/old styles=] to the following: | ||
|
||
: 'transform' | ||
:: A CSS transform that would place |element| | ||
from the [=snapshot viewport origin=] to its current quad. | ||
:: A transform that would map |element|'s [=border box=] from | ||
the [=snapshot root origin=] to its current visual position. | ||
:: This value is identity for the [=document element=]. | ||
|
||
: 'width' | ||
: 'height' | ||
:: The size of the [=snapshot viewport=] if |element| is the [=document element=], | ||
:: The size of the [=snapshot root=] if |element| is the [=document element=], | ||
otherwise, the width and height of |element|'s border box. | ||
|
||
: 'object-view-box' | ||
|
@@ -820,7 +820,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; | |
|
||
Note: This happens if |transition| was [=skip the view transition|skipped=] before this point. | ||
|
||
1. If |transition|'s [=ViewTransition/initial snapshot viewport size=] is not equal to the [=snapshot viewport size=], | ||
1. If |transition|'s [=ViewTransition/initial snapshot root size=] is not equal to the [=snapshot root size=], | ||
then [=skip the view transition=] for |transition|, and return. | ||
|
||
1. Set [=document/transition suppressing rendering=] to false. | ||
|
@@ -923,8 +923,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; | |
|
||
1. If |element| is the [=document element=], then: | ||
|
||
1. Render the region of the |element| and the [=top layer=] that intersects the [=snapshot viewport=], | ||
on a transparent canvas the size of the [=snapshot viewport=], | ||
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=], | ||
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=]. | ||
|
@@ -954,7 +954,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; | |
</figure> | ||
|
||
1. Return the canvas as an image. | ||
The natural size of the image is equal to the [=snapshot viewport=]. | ||
The natural size of the image is equal to the [=snapshot root=]. | ||
|
||
1. Otherwise: | ||
|
||
|
@@ -1029,7 +1029,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; | |
|
||
1. Return. | ||
|
||
1. If |transition|'s [=ViewTransition/initial snapshot viewport size=] is not equal to the [=snapshot viewport size=], | ||
1. If |transition|'s [=ViewTransition/initial snapshot root size=] is not equal to the [=snapshot root size=], | ||
then [=skip the view transition=] for |transition|, and return. | ||
|
||
1. [=Update pseudo-element styles=] for |transition|. | ||
|
@@ -1210,7 +1210,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; | |
|
||
1. Set |height| to the current height of |capturedElement|'s [=new element=]'s [=border box=]. | ||
|
||
1. Set |transform| to a transform that maps the |capturedElement|'s [=new element=]'s [=border box=] from document origin to its quad from the [=snapshot viewport origin=]. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm a bit confused by what was meant here so maybe I'm just misunderstanding but "its quad from the snapshot viewport origin" is what we're trying to compute here so it seems a bit circular. I also think the "border box from document origin" is wrong if we were to load the page scrolled (since the snapshot viewport is effectively fixed but the document origin is pushed up by the scroll)...instead we want to go from the snapshot rect origin to "element's border box relative to the snapshot rect origin". |
||
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 |writingMode| to the [=computed value=] of 'writing-mode' on |capturedElement|'s [=new element=]. | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is used only in reference to transforms which AFAIK are always based on x,y running positive starting from the top-left.