Skip to content

[css-view-transitions-1][css-viewport] Resolve a few missing types #8901

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 3 commits into from
Jun 1, 2023
Merged

[css-view-transitions-1][css-viewport] Resolve a few missing types #8901

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a12c26
Update date for publishing
noamr Jun 1, 2023
792989f
Define missing types
noamr Jun 1, 2023
1b896fa
Remove all view-box stuff
noamr Jun 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 34 additions & 80 deletions css-view-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ Shortname: css-view-transitions
Level: 1
Status: WD
Group: csswg
Date: 2023-05-29
Date: 2023-05-30
Prepare for TR: yes
ED: https://drafts.csswg.org/css-view-transitions-1/
TR: https://www.w3.org/TR/css-view-transitions-1/
Expand Down Expand Up @@ -785,10 +785,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
## The snapshot containing block ## {#snapshot-containing-block-concept}

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.
This area is consistent regardless of root scrollbars or [=interactive-widget|interactive widgets=].

<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">
Expand Down Expand Up @@ -833,28 +830,33 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
The [=view-transition layer=] is a sibling of this stacking context.

- The [=view-transition layer=] paints after the stacking context for the [=document element=] and [/=document=]'s [=Document/top layer=].
This includes the filters and effects that are applied to the [=document element=].

Note: The intent of the feature is to be able to capture the contents of the page, which includes the top layer elements.
In order to accomplish that, the [=view-transition layer=] cannot be a part of the captured top layer context,
since that results in a circular dependency.
Instead, this stacking context is a sibling of other page contents.

Issue: Do we need to clarify that the stacking context for the root and top layer elements has filters and effects coming from the [=document element=]'s style?

## [=Captured elements=] ## {#captured-elements}

A <dfn>captured element</dfn> is a [=struct=] with the following:

<dl dfn-for="captured element">
: <dfn>old image</dfn>
:: an image or null. Initially null.
:: an {{ImageData}} or null. Initially null.

Issue: The type of "image" needs to be linked or defined.
: <dfn>old width</dfn>
: <dfn>old height</dfn>
:: an {{unrestricted double}}, initially zero.

: <dfn>old styles</dfn>
:: a set of styles or null. Initially null.
: <dfn>old transform</dfn>
:: a <a data-xref-type="css-type">&lt;transform-function&gt;</a>, initially the [=identity transform function=].

Issue: The type of "a set of styles" needs to be linked or defined.
: <dfn>old writing-mode</dfn>
:: Null or a 'writing-mode', initially null.

: <dfn>old direction</dfn>
:: Null or a 'direction', initially null.

: <dfn>new element</dfn>
:: an [=/element=] or null. Initially null.
Expand All @@ -872,12 +874,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
: <dfn>group styles rule</dfn>
:: A {{CSSStyleRule}} or null. Initially null.

: <dfn>old view-box rule</dfn>
:: A {{CSSStyleRule}} or null. Initially null.

: <dfn>new view-box rule</dfn>
:: A {{CSSStyleRule}} or null. Initially null.

: <dfn>image pair isolation rule</dfn>
:: A {{CSSStyleRule}} or null. Initially null.

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

1. If |element| has more than one [=box fragment=], then [=continue=].

Issue: We might want to enable transitions for fragmented elements in future versions.
Note: We might want to enable transitions for fragmented elements in future versions.
See [#8900](https://github.com/w3c/csswg-drafts/issues/8900).

1. Let |transitionName| be the [=computed value=] of 'view-transition-name' for |element|.

Expand All @@ -1264,31 +1261,21 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. Set |capture|'s [=old image=] to the result of [=capturing the image=] of |element|.

1. Set |capture|'s [=captured element/old styles=] to the following:
1. Let |originalRect| be [=snapshot containing block=] if |element| is the [=document element=],
otherwise, the element|'s [=border box=].

: 'transform'
:: A transform that would map |element|'s [=border box=] from
the [=snapshot containing block origin=] to its current visual position.
:: This value is identity for the [=document element=].
1. Set |capture|'s [=captured element/old width=] to |originalRect|'s {{DOMRect/width}}.

: 'width'
: 'height'
:: The size of the [=snapshot containing block=] if |element| is the [=document element=],
otherwise, the width and height of |element|'s border box.
1. Set |capture|'s [=captured element/old height=] to |originalRect|'s {{DOMRect/height}}.

: 'object-view-box'
:: ''object-view-box/none'' if |element| is the [=document element=],
otherwise, an 'object-view-box' value that, when applied to the old image,
will cause the view box to coincide with |element|'s [=border box=] in the image.
This must be expressed using ''&lt;basic-shape&gt;/inset()''.
1. Set |capture|'s [=captured element/old transform=] to a
<a data-xref-type="css-type">&lt;transform-function&gt;</a> that would map
|element|'s [=border box=] from the [=snapshot containing block origin=] to its
current visual position.

: 'writing-mode'
:: The 'writing-mode' of |element|.
1. Set |capture|'s [=captured element/old writing-mode] to the [=computed value=] of 'writing-mode' on |element|.

: 'direction'
:: The 'direction' of |element|.

Issue: This needs proper types.
1. Set |capture|'s [=captured element/old direction] to the [=computed value=] of 'direction' on |element|.

1. Set |namedElements|[|transitionName|] to |capture|.
</div>
Expand Down Expand Up @@ -1363,20 +1350,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. Append |old| to |imagePair|.

1. Let |oldViewBox| be |capturedElement|'s [=captured element/old styles=] 'object-view-box' property.

1. Set |capturedElement|'s [=captured element/old view-box rule=] to a new {{CSSStyleRule}} representing the following CSS,
and append it to |document|'s [=document/view transition style sheet=].

<!-- deliberately using <pre> so the example can contain <var> references -->
<pre highlight="css">
:root::view-transition-old(<var>transitionName</var>) {
object-view-box: <var>oldViewBox</var>;
}
</pre>

Note: The above code example contains variables to be replaced.

1. If |capturedElement|'s [=new element=] is not null, then:

1. Let |new| be a new ''::view-transition-new()'',
Expand All @@ -1395,11 +1368,11 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
1. If both of |capturedElement|'s [=captured element/old image=] and [=captured element/new element=]
are not null, then:

1. Let |transform| be |capturedElement|'s [=captured element/old styles=]'s 'transform' property.
1. Let |transform| be |capturedElement|'s [=captured element/old transform=].

1. Let |width| be |capturedElement|'s [=captured element/old styles=]'s 'width' property.
1. Let |width| be |capturedElement|'s [=captured element/old width=].

1. Let |height| be |capturedElement|'s [=captured element/old styles=]'s 'height' property.
1. Let |height| be |capturedElement|'s [=captured element/old height=].

1. Set |capturedElement|'s [=captured element/group keyframes=] to a new {{CSSKeyframesRule}} representing the following CSS,
and append it to |document|'s [=document/view transition style sheet=]:
Expand Down Expand Up @@ -1663,15 +1636,15 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. If |capturedElement|'s [=new element=] is null, then:

1. Set |width| to |capturedElement|'s [=captured element/old styles=] 'width' property.
1. Set |width| to |capturedElement|'s [=captured element/old width=].

1. Set |height| to |capturedElement|'s [=captured element/old styles=] 'height' property.
1. Set |height| to |capturedElement|'s [=captured element/old height=].

1. Set |transform| to |capturedElement|'s [=captured element/old styles=] 'transform' property.
1. Set |transform| to |capturedElement|'s [=captured element/old transform=].

1. Set |writingMode| to |capturedElement|'s [=captured element/old styles=] 'writing-mode' property.
1. Set |writingMode| to |capturedElement|'s [=captured element/old writing-mode=].

1. Set |direction| to |capturedElement|'s [=captured element/old styles=] 'direction' property.
1. Set |direction| to |capturedElement|'s [=captured element/old direction=].

1. Otherwise:

Expand Down Expand Up @@ -1719,25 +1692,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

1. Set |new|'s [=replaced element=] content to the result of [=capturing the image=] of |capturedElement|'s [=new element=].

1. Let |newViewBox| be an ''object-view-box'' value that when applied to |new|,
will cause the view box to coincide with |capturedElement|'s [=new element=]'s [=border box=] in the image.
This must be expressed using ''&lt;basic-shape&gt;/inset()''.

1. If |capturedElement|'s [=captured element/new view-box rule=] is null,
then set |capturedElement|'s [=captured element/new view-box rule=] to a new {{CSSStyleRule}} representing the following CSS,
and append it to |document|'s [=document/view transition style sheet=].

Otherwise, update |capturedElement|'s [=captured element/new view-box rule=] to match the following CSS:

<!-- deliberately using <pre> so the example can contain <var> references -->
<pre highlight="css">
:root::view-transition-new(<var>transitionName</var>) {
object-view-box: <var>newViewBox</var>;
}
</pre>

Note: The above code example contains variables to be replaced.

This algorithm must be executed to update styles in [=user-agent origin=] if its effects can be observed by a web API.

Note: An example of such a web API is `window.getComputedStyle(document.documentElement, "::view-transition")`.
Expand Down
2 changes: 1 addition & 1 deletion css-viewport/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ Issue: Specify extend-to-zoom behavior by the viewport meta tag

Issue: Move the definition of ''visual viewport'' from CSSOM-View to this spec.

The <dfn><code>interactive-widget</code></dfn> property specifies the effect that interactive UI
The <dfn export><code>interactive-widget</code></dfn> property specifies the effect that interactive UI
widgets have on the page's viewports. It defines whether widgets overlay a given viewport or whether
the viewport is shrunken so that it remains fully visible while the widget is showing. Interactive
UI widgets are transient user agent or operating system UI through which a user can provide input.
Expand Down