From c80b4fb01026d7f3e51d4db97a11b90ccc4d9e6a Mon Sep 17 00:00:00 2001 From: David Bokan Date: Tue, 17 Jan 2023 22:57:25 -0500 Subject: [PATCH 1/3] [CSS-VIEW-TRANSITIONS] Replace 'snapshot viewport' with 'snapshot root' --- css-view-transitions-1/Overview.bs | 50 +++++++++---------- ...top-browser-snapshot-viewport-original.svg | 2 +- ...one-browser-snapshot-viewport-original.svg | 2 +- ....svg => desktop-browser-snapshot-root.svg} | 2 +- ...rt.svg => phone-browser-snapshot-root.svg} | 2 +- 5 files changed, 29 insertions(+), 29 deletions(-) rename css-view-transitions-1/diagrams/{desktop-browser-snapshot-viewport.svg => desktop-browser-snapshot-root.svg} (94%) rename css-view-transitions-1/diagrams/{phone-browser-snapshot-viewport.svg => phone-browser-snapshot-root.svg} (98%) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 9b8e3141070..288da5cef81 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -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;
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=].
: ::view-transition-group( <> ) @@ -363,9 +363,9 @@ 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 snapshot viewport covers all areas of the window that could potentially display web content. + The snapshot root 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]]. @@ -373,29 +373,29 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn;
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 - 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 + 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
- 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.
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 - The previous diagram, but highlights the area that's the 'snapshot' viewport, which includes the web content area and the scrollbars + The previous diagram, but highlights the area that's the 'snapshot root', which includes the web content area and the scrollbars
- 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.
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 snapshot viewport origin refers to the start of the block and inline axes of the [=snapshot viewport=]. + The snapshot root origin refers to the top-left corner of the [=snapshot root=]. - The snapshot viewport size refers to the width and height of the [=snapshot viewport=] as a [=/tuple=] of two numbers. + The snapshot root size 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=]. # 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''. - : initial snapshot viewport size + : initial snapshot root size :: 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). @@ -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 CSS transform that maps the [=snapshot root origin=] to the top-left corner of + |element|'s [=border box=]. :: 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; 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=]. + 1. Set |transform| to a transform that maps the [=snapshot root origin=] to the top-left corner of the |capturedElement|'s [=new element=]'s [=border box=]. 1. Set |writingMode| to the [=computed value=] of 'writing-mode' on |capturedElement|'s [=new element=]. diff --git a/css-view-transitions-1/diagram-source/desktop-browser-snapshot-viewport-original.svg b/css-view-transitions-1/diagram-source/desktop-browser-snapshot-viewport-original.svg index 6b49849947f..6b0b0111df6 100644 --- a/css-view-transitions-1/diagram-source/desktop-browser-snapshot-viewport-original.svg +++ b/css-view-transitions-1/diagram-source/desktop-browser-snapshot-viewport-original.svg @@ -275,7 +275,7 @@ style="font-size:7.40833px;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.529167" x="63.195206" y="48.743584" - id="tspan36666">vieportrootviewportrootExampleexample.comSnapshotviewport +Exampleexample.comSnapshotroot diff --git a/css-view-transitions-1/diagrams/phone-browser-snapshot-viewport.svg b/css-view-transitions-1/diagrams/phone-browser-snapshot-root.svg similarity index 98% rename from css-view-transitions-1/diagrams/phone-browser-snapshot-viewport.svg rename to css-view-transitions-1/diagrams/phone-browser-snapshot-root.svg index 2d6f7104ac1..700a29b8a1f 100644 --- a/css-view-transitions-1/diagrams/phone-browser-snapshot-viewport.svg +++ b/css-view-transitions-1/diagrams/phone-browser-snapshot-root.svg @@ -1 +1 @@ -example.comQWERTYUIPOASDFGHJKLZXCVBNMspace12:42Snapshotviewport +example.comQWERTYUIPOASDFGHJKLZXCVBNMspace12:42Snapshotroot From ac2a36aff0a88356202437dbb5c8792048f90c39 Mon Sep 17 00:00:00 2001 From: David Bokan Date: Wed, 18 Jan 2023 13:56:15 -0500 Subject: [PATCH 2/3] Refine wording of setting transforms --- css-view-transitions-1/Overview.bs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 288da5cef81..c588858270f 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -762,8 +762,8 @@ 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 maps the [=snapshot root origin=] to the top-left corner of - |element|'s [=border box=]. + :: Set |transform| to a transform that would map |elements|'s [=border box=] from + the [=snapshot root origin=] to its current visual position. :: This value is identity for the [=document element=]. : 'width' @@ -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 [=snapshot root origin=] to the top-left corner of the |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 |writingMode| to the [=computed value=] of 'writing-mode' on |capturedElement|'s [=new element=]. From 75fa09b9c8e4946d6d0296dbde01b4bfc5bfe681 Mon Sep 17 00:00:00 2001 From: David Bokan Date: Wed, 18 Jan 2023 14:01:33 -0500 Subject: [PATCH 3/3] Fix up variables --- css-view-transitions-1/Overview.bs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index c588858270f..9c2963db39a 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -762,8 +762,8 @@ urlPrefix: https://html.spec.whatwg.org/multipage/rendering.html; type: dfn; 1. Set |capture|'s [=captured element/old styles=] to the following: : 'transform' - :: Set |transform| to a transform that would map |elements|'s [=border box=] from - the [=snapshot root origin=] to its current visual position. + :: 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'