You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[css-view-transitions-1] Rename snapshot-root to snapshot containing block (w3c#8814)
* Rename snapshot-root to snapshot containing block
Also determine that the snapshot CB is an absolute/fixed positioning
containing block for its descendants.
Closesw3c#8505
* Move stuff around
* Add changelist entry
* Heading name
The initial phase is the first item in the sequence.
784
784
785
-
## The snapshot root ## {#snapshot-root-concept}
785
+
## The snapshot containing block ## {#snapshot-containing-block-concept}
786
786
787
-
The <dfn>snapshot root</dfn> is a rectangle that covers all areas of the window that could potentially display web content.
787
+
The <dfn>snapshot containing block</dfn> is a rectangle that covers all areas of the window that could potentially display web content.
788
788
This area is consistent regardless of root scrollbars or interactive widgets.
789
789
790
790
Issue: "Interactive widgets" refers to UI described within a property definition in [[css-viewport#interactive-widget-section]].
791
791
This should be extracted into an exported definition that can be used independently of the property.
792
792
793
793
<figure>
794
794
<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">
795
-
<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">
795
+
<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">
796
796
<figcaption>
797
-
An example of the [=snapshot root=] on a mobile OS.
797
+
An example of the [=snapshot containing block=] on a mobile OS.
798
798
The snapshot includes the URL bar, as this can be scrolled away.
799
799
The keyboard is included as this appears and disappears.
800
-
The top and bottom bars are part of the OS rather than the browser, so they're not included in the snapshot root.
800
+
The top and bottom bars are part of the OS rather than the browser, so they're not included in the snapshot containing block.
801
801
</figcaption>
802
802
</figure>
803
803
804
804
<figure>
805
805
<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">
806
-
<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">
806
+
<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">
807
807
<figcaption>
808
-
An example of the [=snapshot root=] on a desktop OS.
808
+
An example of the [=snapshot containing block=] on a desktop OS.
809
809
This includes the scrollbars, but does not include the URL bar, as web content never appears in that area.
810
810
</figcaption>
811
811
</figure>
812
812
813
813
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=].
814
814
815
-
The <dfn>snapshot root origin</dfn> refers to the top-left corner of the [=snapshot root=].
815
+
The <dfn>snapshot containing block origin</dfn> refers to the top-left corner of the [=snapshot containing block=].
816
816
817
-
The <dfn>snapshot root size</dfn> refers to the width and height of the [=snapshot root=] as a [=/tuple=] of two numbers.
817
+
The <dfn>snapshot containing block size</dfn> refers to the width and height of the [=snapshot containing block=] as a [=/tuple=] of two numbers.
818
+
819
+
The [=snapshot containing block=] is considered to be an [=absolute positioning containing block=]
820
+
and a [=fixed positioning containing block=] for ''::view-transition'' and its descendants.
818
821
819
822
## The [=view-transition layer=] stacking layer ## {#view-transition-stacking-layer}
When this is true, [=this=]'s [=active view transition=]'s [=ViewTransition/transition root pseudo-element=] renders as a child of [=this=]'s [=document element=],
909
912
and [=this=]'s [=document element=] is its [=originating element=].
910
913
911
-
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=].
914
+
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=].
1. Set |height| to the current height of |capturedElement|'s [=new element=]'s [=border box=].
1687
1690
1688
-
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.
1691
+
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.
1689
1692
1690
1693
1. Set |writingMode| to the [=computed value=] of 'writing-mode' on |capturedElement|'s [=new element=].
1691
1694
@@ -1787,15 +1790,15 @@ Changes from <a href="https://www.w3.org/TR/2022/WD-css-view-transitions-1-20221
1787
1790
* 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>.
1788
1791
* Remove html specifics from UA stylesheet to support ViewTransitions on SVG Documents.
1789
1792
* Rename updateDOMCallback to {{UpdateCallback}}. See <a href="https://github.com/w3c/csswg-drafts/issues/8144">issue 8144</a>.
1790
-
* Rename snapshot viewport to [=snapshot root=].
1793
+
* Rename snapshot viewport to [=snapshot containing block=].
1791
1794
* Skip the transition if viewport size changes. See <a href="https://github.com/w3c/csswg-drafts/issues/8045">issue 8045</a>.
1792
1795
* Add support for :only-child. See <a href="https://github.com/w3c/csswg-drafts/issues/8057">issue 8057</a>.
1793
1796
* 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>.
1794
1797
* 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>
1795
1798
* 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>.
1796
1799
* 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>.
1797
1800
* Fragmented elements don't participate in view transitions. See <a href="https://github.com/w3c/csswg-drafts/issues/8339">issue 8339</a>.
1798
-
1801
+
* 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>.
1799
1802
<h3 id="changes-since-2022-10-25">
1800
1803
Changes from <a href="https://www.w3.org/TR/2022/WD-css-view-transitions-1-20221025/">2022-10-25 Working Draft (FPWD)</a>
0 commit comments