Skip to content

Commit 86046e4

Browse files
authored
[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. Closes w3c#8505 * Move stuff around * Add changelist entry * Heading name
1 parent f66b127 commit 86046e4

File tree

1 file changed

+30
-27
lines changed

1 file changed

+30
-27
lines changed

css-view-transitions-1/Overview.bs

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -621,13 +621,13 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
621621

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

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

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

630-
Its [=containing block=] is the [=snapshot root=].
630+
Its [=containing block=] is the [=snapshot containing block=].
631631

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

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

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

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

783783
The initial phase is the first item in the sequence.
784784

785-
## The snapshot root ## {#snapshot-root-concept}
785+
## The snapshot containing block ## {#snapshot-containing-block-concept}
786786

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.
788788
This area is consistent regardless of root scrollbars or interactive widgets.
789789

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

793793
<figure>
794794
<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">
796796
<figcaption>
797-
An example of the [=snapshot root=] on a mobile OS.
797+
An example of the [=snapshot containing block=] on a mobile OS.
798798
The snapshot includes the URL bar, as this can be scrolled away.
799799
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.
801801
</figcaption>
802802
</figure>
803803

804804
<figure>
805805
<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">
807807
<figcaption>
808-
An example of the [=snapshot root=] on a desktop OS.
808+
An example of the [=snapshot containing block=] on a desktop OS.
809809
This includes the scrollbars, but does not include the URL bar, as web content never appears in that area.
810810
</figcaption>
811811
</figure>
812812

813813
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=].
814814

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=].
816816

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.
818821

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

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

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=].
912915
</dl>
913916

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

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

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

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

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

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

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

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

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

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

12711274
: 'width'
12721275
: 'height'
1273-
:: The size of the [=snapshot root=] if |element| is the [=document element=],
1276+
:: The size of the [=snapshot containing block=] if |element| is the [=document element=],
12741277
otherwise, the width and height of |element|'s border box.
12751278

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

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

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

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

15611564
1. Return the canvas as an image.
1562-
The natural size of the image is equal to the [=snapshot root=].
1565+
The natural size of the image is equal to the [=snapshot containing block=].
15631566

15641567
1. Otherwise:
15651568

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

16361639
1. Return.
16371640

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

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

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

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.
16891692

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

@@ -1787,15 +1790,15 @@ Changes from <a href="https://www.w3.org/TR/2022/WD-css-view-transitions-1-20221
17871790
* 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>.
17881791
* Remove html specifics from UA stylesheet to support ViewTransitions on SVG Documents.
17891792
* 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=].
17911794
* Skip the transition if viewport size changes. See <a href="https://github.com/w3c/csswg-drafts/issues/8045">issue 8045</a>.
17921795
* Add support for :only-child. See <a href="https://github.com/w3c/csswg-drafts/issues/8057">issue 8057</a>.
17931796
* 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>.
17941797
* 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>
17951798
* 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>.
17961799
* 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>.
17971800
* 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>.
17991802
<h3 id="changes-since-2022-10-25">
18001803
Changes from <a href="https://www.w3.org/TR/2022/WD-css-view-transitions-1-20221025/">2022-10-25 Working Draft (FPWD)</a>
18011804
</h3>

0 commit comments

Comments
 (0)