Skip to content

[css-view-transitions-1] Clarify that observable image size refers to the border-box, and observed natural size is not affected by hw constraints #8819

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 5 commits into from
May 11, 2023
Merged

[css-view-transitions-1] Clarify that observable image size refers to the border-box, and observed natural size is not affected by hw constraints #8819

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8c0e711
Clarify that observable image size refers to the border-box
noamr May 8, 2023
56f7ea4
Fix regarding texture size
noamr May 8, 2023
ab1332c
Add changelog entries
noamr May 11, 2023
f34963f
Apply nits
noamr May 11, 2023
385c134
clarify note
noamr May 11, 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
34 changes: 9 additions & 25 deletions css-view-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1570,10 +1570,10 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
over an infinite transparent canvas,
following the [=capture rendering characteristics=].

1. Let |interestRectangle| be the result of [=computing the interest rectangle=] for |element|.
1. Return the portion of the canvas that includes |element|'s [=ink overflow rectangle=] as an image.
The [=natural size=] of the image must be |element|'s [=border box=]'s [=size=],
and its origin corresponds to the |element|'s [=border box=]'s origin.

1. Return the portion of the canvas within |interestRectangle| as an image.
The natural size of the image is equal to the |interestRectangle| bounds.
</div>

### [=Capture rendering characteristics=] ### {#capture-rendering-characteristics-algorithm}
Expand All @@ -1590,6 +1590,10 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;

* Effects on the element, such as 'opacity' and 'filter' are applied to the capture.

* Implementations may clip the rendered contents if the [=ink overflow rectangle=] exceeds some [=implementation-defined=] maximum.
However, the captured image should include, at the very least, the contents of |element| that intersect with the [=snapshot root=].
Implementations may adjust the rasterization quality to account for elements with a large [=ink overflow area=] that are transformed into view.

* [=list/For each=] |descendant| of [=shadow-including descendant=] {{Element}} and [=pseudo-element=] of |element|,
if |descendant| has a [=computed value=] of 'view-transition-name' that is not ''view-transition-name/none'',
then skip painting |descendant|.
Expand All @@ -1601,28 +1605,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
Issue: Specify what happens with 'mix-blend-mode'.
</div>

### [=Compute the interest rectangle=] ### {#compute-the-interest-rectangle-algorithm}

<div algorithm>
To <dfn lt="computing the interest rectangle|compute the interest rectangle">compute the interest rectangle</dfn> of an {{Element}} |element|, perform the following steps.
They return a rectangle.

Note: The interest rectangle is the subset of |element|'s [=ink overflow rectangle=] that should be captured.
This is required for cases where an element's ink overflow rectangle needs to be clipped because of hardware constraints.
For example, if it exceeds the maximum texture size.

1. Assert: |element| is not |element|'s [=node document=]'s [=document element=].

Note: The [=document element=] is captured differently, as specified in [=capture the image=].

1. If |element|'s [=ink overflow area=] does not exceed an implementation-defined maximum size,
then return a rectangle that is equal to |element|'s [=ink overflow rectangle=].

1. Otherwise:

Issue: Define the algorithm used to clip the snapshot when it exceeds max size.
</div>

## [=Handle transition frame=] ## {#handle-transition-frame-algorithm}

<div algorithm>
Expand Down Expand Up @@ -1810,6 +1792,8 @@ Changes from <a href="https://www.w3.org/TR/2022/WD-css-view-transitions-1-20221
* Add support for :only-child. See <a href="https://github.com/w3c/csswg-drafts/issues/8057">issue 8057</a>.
* 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>.
* 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>
* 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>.
* 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>.

<h3 id="changes-since-2022-10-25">
Changes from <a href="https://www.w3.org/TR/2022/WD-css-view-transitions-1-20221025/">2022-10-25 Working Draft (FPWD)</a>
Expand Down