From 8c0e7112216cd7901c032b5e2cc14f057bd34be6 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Mon, 8 May 2023 12:37:17 +0300 Subject: [PATCH 1/5] Clarify that observable image size refers to the border-box Ink-overflow is an implementation detail, and up to the UA to apply. object-view-box doesn't directly affect the ink-overflow rect. See [resolution](https://github.com/w3c/csswg-drafts/issues/8597#issuecomment-1488952275). Closes #8597 --- css-view-transitions-1/Overview.bs | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 73235024cd3..d10eea38a31 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -1500,8 +1500,10 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. [=Assert=]: |transition|'s [=ViewTransition/phase=] is not "`done`". - 1. If |transition|'s [=ViewTransition/phase=] is [=phases/before=] "`update-callback-called`", then [=queue a global task=] on the [=DOM manipulation task source=], - given |transition|'s [=relevant global object=], to [=call the update callback=] of |transition|. + 1. If |transition|'s [=ViewTransition/phase=] is [=phases/before=] "`update-callback-called`", + then [=queue a global task=] on the [=DOM manipulation task source=], + given |transition|'s [=relevant global object=], + to [=call the update callback=] of |transition|. 1. Set [=document/transition suppressing rendering=] to false. @@ -1581,7 +1583,14 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
The capture rendering characteristics are as follows: - * The origin of |element|'s [=ink overflow rectangle=] is anchored to canvas origin. + * The origin of |element|'s [=border box=] is anchored to canvas origin. + + * Expand the canvas to include |element|'s [=ink overflow rectangle=]. The captured image + should include the [=ink overflow region=], however the size of that region is + [=implementation-defined=] and is not web-observable. + + Note: This means that ''object-view-box'' applies to |element|'s [=border box=], and UAs + have to apply the [=ink overflow region=] to the canvas internally. * If the referenced element has a transform applied to it (or its ancestors), then the transform is ignored. @@ -1607,16 +1616,16 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; To compute the interest rectangle 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. + Note: The interest rectangle is the subset of |element|'s [=border box=] that should be captured. + This is required for cases where an element's border box 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. If |element|'s [=border area=] does not exceed an implementation-defined maximum size, + then return a rectangle that is equal to |element|'s [=border box=]. 1. Otherwise: From 56f7ea490b123c742d6454e82d4877dbfdcd9ac5 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Mon, 8 May 2023 16:30:31 +0300 Subject: [PATCH 2/5] Fix regarding texture size --- css-view-transitions-1/Overview.bs | 45 ++++++------------------------ 1 file changed, 8 insertions(+), 37 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index d10eea38a31..449816b4c50 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -1500,10 +1500,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. [=Assert=]: |transition|'s [=ViewTransition/phase=] is not "`done`". - 1. If |transition|'s [=ViewTransition/phase=] is [=phases/before=] "`update-callback-called`", - then [=queue a global task=] on the [=DOM manipulation task source=], - given |transition|'s [=relevant global object=], - to [=call the update callback=] of |transition|. + 1. If |transition|'s [=ViewTransition/phase=] is [=phases/before=] "`update-callback-called`", then [=call the update callback=] of |transition|. 1. Set [=document/transition suppressing rendering=] to false. @@ -1572,10 +1569,9 @@ 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=]. - 1. Return the portion of the canvas within |interestRectangle| as an image. - The natural size of the image is equal to the |interestRectangle| bounds.
### [=Capture rendering characteristics=] ### {#capture-rendering-characteristics-algorithm} @@ -1583,14 +1579,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface;
The capture rendering characteristics are as follows: - * The origin of |element|'s [=border box=] is anchored to canvas origin. - - * Expand the canvas to include |element|'s [=ink overflow rectangle=]. The captured image - should include the [=ink overflow region=], however the size of that region is - [=implementation-defined=] and is not web-observable. - - Note: This means that ''object-view-box'' applies to |element|'s [=border box=], and UAs - have to apply the [=ink overflow region=] to the canvas internally. + * The origin of |element|'s [=ink overflow rectangle=] is anchored to canvas origin. * If the referenced element has a transform applied to it (or its ancestors), then the transform is ignored. @@ -1599,6 +1588,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 [=viewport=]. + Implementations may adjust the rasterization quality to account for elements with a large [=border box=] 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|. @@ -1610,28 +1603,6 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; Issue: Specify what happens with 'mix-blend-mode'.
-### [=Compute the interest rectangle=] ### {#compute-the-interest-rectangle-algorithm} - -
- To compute the interest rectangle of an {{Element}} |element|, perform the following steps. - They return a rectangle. - - Note: The interest rectangle is the subset of |element|'s [=border box=] that should be captured. - This is required for cases where an element's border box 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 [=border area=] does not exceed an implementation-defined maximum size, - then return a rectangle that is equal to |element|'s [=border box=]. - - 1. Otherwise: - - Issue: Define the algorithm used to clip the snapshot when it exceeds max size. -
- ## [=Handle transition frame=] ## {#handle-transition-frame-algorithm}
From ab1332cd49a7cf7d92c0b6ec6740ce62ad91e091 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 11 May 2023 20:43:39 +0300 Subject: [PATCH 3/5] Add changelog entries --- css-view-transitions-1/Overview.bs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 449816b4c50..a6709f114c9 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -1790,6 +1790,8 @@ Changes from issue 8057. * Add concept of a tree of pseudo-elements under [=pseudo-element root=]. See issue 8113. * When skipping a transition, the {{UpdateCallback}} is called in own task rather than synchronosly. See issue 7904 +* When capturing images, at least the in-viewport part of the image should be captured, downscale if needed. See issue 8561. +* Applying the [=ink overflow=] to the captured image is implementation defined, and doesn't affect the image's [=natural size=]. See issue 8597.

Changes from 2022-10-25 Working Draft (FPWD) From f34963fd3acab9a77ff9de6f6e89e8daae8e9b90 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 11 May 2023 20:49:19 +0300 Subject: [PATCH 4/5] Apply nits --- css-view-transitions-1/Overview.bs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index a6709f114c9..603a5044d79 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -1570,7 +1570,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; following the [=capture rendering characteristics=]. 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=]. + 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.

@@ -1589,7 +1590,7 @@ 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 [=viewport=]. + 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 [=border box=] that are transformed into view. * [=list/For each=] |descendant| of [=shadow-including descendant=] {{Element}} and [=pseudo-element=] of |element|, From 385c1347f05bdb3fc3090031c9752afc95a0b936 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Thu, 11 May 2023 20:50:43 +0300 Subject: [PATCH 5/5] clarify note --- css-view-transitions-1/Overview.bs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/css-view-transitions-1/Overview.bs b/css-view-transitions-1/Overview.bs index 603a5044d79..146e7e9f780 100644 --- a/css-view-transitions-1/Overview.bs +++ b/css-view-transitions-1/Overview.bs @@ -1500,7 +1500,8 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; 1. [=Assert=]: |transition|'s [=ViewTransition/phase=] is not "`done`". - 1. If |transition|'s [=ViewTransition/phase=] is [=phases/before=] "`update-callback-called`", then [=call the update callback=] of |transition|. + 1. If |transition|'s [=ViewTransition/phase=] is [=phases/before=] "`update-callback-called`", then [=queue a global task=] on the [=DOM manipulation task source=], + given |transition|'s [=relevant global object=], to [=call the update callback=] of |transition|. 1. Set [=document/transition suppressing rendering=] to false. @@ -1591,7 +1592,7 @@ urlPrefix: https://wicg.github.io/navigation-api/; type: interface; * 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 [=border box=] that are transformed into view. + 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'',