[css-view-transitions-2] First pass at layered capture #11045

noamr · 2024-10-17T14:42:59Z

Describe how layered capture works, which CSS properties it targets and how it affects rendering. Based on this resolution.

This is a first pass, and still has open issues (will open separately):

Should there be a CSS property to decide on this? What should be the default?
How do we capture overflow/box-sizing?
(More capture questions if they come up)

Closes #10585

Describe how layered capture works, which CSS properties it targets and how it affects rendering. Based on [this resolution](w3c#10585 (comment)). This is a first pass, and still has open issues (will open separately): 1. Should there be a CSS property to decide on this? What should be the default? 2. How do we capture overflow/box-sizing? 3. (More capture questions if they come up) Closes w3c#10585

css-view-transitions-2/Overview.bs

khushalsagar · 2024-10-21T01:49:07Z

css-view-transitions-2/Overview.bs

+	- 'overflow-clip-margin'
+	- 'padding'
+
+	Issue: the behavior of 'overflow' is not entirely clear, especially with ''overflow/scroll'' and ''overflow-auto''. Should the scroll bars be part of the snapshot?


nit: Also containment. Not clear whether style, layout and size containment should be carried over.

khushalsagar · 2024-10-21T19:27:52Z

css-view-transitions-2/Overview.bs

+	- 'overflow-clip-margin'
+	- 'padding'
+
+	Issue: the behavior of 'overflow' needs to be clarified, especially with ''overflow/scroll'' and ''overflow-auto''. Should the scroll bars be part of the snapshot?


containment is also an open question. We likely only want to consider paint containment and set overflow to clip if it's there.

Added to the note, also moved the note

css-view-transitions-2/Overview.bs

khushalsagar · 2024-10-24T02:18:25Z

css-view-transitions-2/Overview.bs

+		:: A string.
+
+		: <dfn>transform from snapshot containing block</dfn>
+		: <dfn>old nested group transform


why do we need new transforms here...? we dealt with this for nesting, layered capture shouldn't need to track new transforms.

khushalsagar · 2024-10-24T02:23:56Z

css-view-transitions-2/Overview.bs

+
+### Render the snapshot with layered capture ### {#layered-capture-rendering}
+
+When capturing an element into a snapshot, apply the following style to the element in addition to the [=capture rendering characteristics=]:


I don't think this would be the right way to define this since we don't actually want to remove these styles. We could lean on the concept of "contents" defined in the contain spec: https://drafts.csswg.org/css-contain/#skips-its-contents:~:text=the%20flat%20tree%20descendants%20of%20the%20element%2C%20including%20both%20text%20and%20elements%2C%20or%20the%20replaced%20content%20of%20a%20replaced%20element to describe what should be painted when generating this snapshot. @vmpstr might have more input here.

Reworded, PTAL?

css-view-transitions-2/Overview.bs

khushalsagar · 2024-10-24T02:32:11Z

css-view-transitions-2/Overview.bs

+Note: we apply 'outline-color' and 'border-color' instead of 'outline' and 'border' so that layout is not affected by capturing.
+
+### Compute the nested group transform ### {#vt-compute-nested-group-transform}
+To compute the <dfn>nested group transform</dfn> given an {{Element}} |element|, return a [=matrix=] equivalent to a 2D translation of (|element|'s [=computed value|computed=] ''border-left-width'', |element|'s [=computed value|computed=] ''border-top-width'').


Ah, so this is for the border offset. could we cache a 2D offset instead of a transform, and just name it explicitly like border offset.

Co-authored-by: Khushal Sagar <[email protected]>

css-view-transitions-2/Overview.bs

khushalsagar · 2024-11-01T23:05:42Z

css-view-transitions-2/Overview.bs

+<div algorithm="adjust image capture size (layered)">
+When [=capturing the image=] given |element|:
+	1. Let |geometry| be |element|'s [=layered capture geometry=].
+	1. If |geometry| is not null and |geometry|'s [=layered box properties/box sizing=] is ''box-sizing/content-box'',


The snapshot capture is independent of box-sizing, box-sizing only impacts the CSS of the pseudos. But the snapshot would always be content box size because there's no reason to capture borders as a part of it. So it wouldn't make sense for the snapshot to be larger than the element's content.

You can fold this into the "layered-capture-rendering" algorithm below.

But this is the spot in L1 where we define the natural dimension of the image and how it's positioned...

Eh ok, my main point was about not making this conditional based on box-sizing. Does that make sense?

css-view-transitions-2/Overview.bs

khushalsagar · 2024-11-01T23:11:34Z

css-view-transitions-2/Overview.bs

+
+### Render the snapshot with layered capture ### {#layered-capture-rendering}
+
+When capturing an element into a snapshot, only the [=element contents=] are painted, without the element's effects and box decorations.


Would love to get @vmpstr's input on this phrasing too.

Taking inspiration from the wording in L1: https://drafts.csswg.org/css-view-transitions-1/#capture-the-image-algorithm:~:text=containing%20block.-,Otherwise,-%3A.

We want to say what is painted, which is covered here.

We want to say what the image size is internally in the UA which I think would be the union of ink overflow rectangles of all the descendants + size of replaced content..?

And we want to define the web observable size of the image which is covered above as content box.

khushalsagar · 2024-11-01T23:14:13Z

css-view-transitions-2/Overview.bs

+	1. Append the [=string/concatenate|concatentation=] of « `"::view-transition-group("`, |transitionName|, `") {"`, |style| , `"}"` » to the constructed user-agent stylesheet.
+	1. Let (|oldContentWidth|, |oldContentHeight|) be (|capturedElement|'s [=captured element/old width=], |capturedElement|'s [=captured element/old height=]) if |capturedElement|'s [=old box properties=] is null, otherwise  |capturedElement|'s [=old box properties=]'s [=layered box properties/content box=]'s size.
+	1. Let (|newContentWidth|, |newContentHeight|) be (|width|, |height|) if [=new box properties=] is null, otherwise |capturedElement|'s [=new box properties=]'s [=layered box properties/content box=]'s size.
+	1. Append the next string (with replaced variables) to the user agent stylesheet:


https://chromium-review.googlesource.com/c/chromium/src/+/5953705 is appending the extra styles for image-pair only if layered capture is in use. Did you mean to do the same here as well? No need to override the existing styles in image-pair in flat capture mode.

Yea, but we haven't resolved yet on "when are we in capture mode". So currently the capture mode spec changes assume that we're in that mode.

Hmmm ok. Then maybe a link to the issue saying this is tentative is good enough.

It's already there in the overview...

Co-authored-by: Khushal Sagar <[email protected]>

noamr

Revised box-sizing thing to only apply to the width/height rather than to the capture.

noamr · 2024-11-05T16:12:48Z

css-view-transitions-2/Overview.bs

+	1. Append the [=string/concatenate|concatentation=] of « `"::view-transition-group("`, |transitionName|, `") {"`, |style| , `"}"` » to the constructed user-agent stylesheet.
+	1. Let (|oldContentWidth|, |oldContentHeight|) be (|capturedElement|'s [=captured element/old width=], |capturedElement|'s [=captured element/old height=]) if |capturedElement|'s [=old box properties=] is null, otherwise  |capturedElement|'s [=old box properties=]'s [=layered box properties/content box=]'s size.
+	1. Let (|newContentWidth|, |newContentHeight|) be (|width|, |height|) if [=new box properties=] is null, otherwise |capturedElement|'s [=new box properties=]'s [=layered box properties/content box=]'s size.
+	1. Append the next string (with replaced variables) to the user agent stylesheet:


It's already there in the overview...

…1045)" This reverts commit 02eb632.

…" (#11228) This reverts commit 02eb632.

noamr requested a review from khushalsagar October 17, 2024 14:43

noamr force-pushed the vt2-capture-mode-initial branch from 11fb9a6 to ae59e4c Compare October 17, 2024 14:43

noamr added 3 commits October 21, 2024 13:19

Adjust border

dc36b7f

Adjust nested transform by border

7becb13

Add note about border-box

d27b3e2

khushalsagar reviewed Oct 24, 2024

View reviewed changes

noamr and others added 6 commits October 24, 2024 09:11

Update css-view-transitions-2/Overview.bs

3a61f64

Co-authored-by: Khushal Sagar <[email protected]>

Update css-view-transitions-2/Overview.bs

5fa8c28

Co-authored-by: Khushal Sagar <[email protected]>

Refactor a few things

530a121

note

e778d89

Overhaul nested geometry

831e641

Fold padding back into regular props

4119f4f

khushalsagar reviewed Nov 1, 2024

View reviewed changes

noamr and others added 3 commits November 3, 2024 10:32

Apply suggestions from code review

d26079e

Co-authored-by: Khushal Sagar <[email protected]>

Update Overview.bs

d5375d8

Apply box-sizing in the right place

747973b

noamr commented Nov 5, 2024

View reviewed changes

khushalsagar approved these changes Nov 5, 2024

View reviewed changes

noamr merged commit 02eb632 into w3c:main Nov 5, 2024
1 check passed

noamr deleted the vt2-capture-mode-initial branch November 6, 2024 09:28

noamr added a commit to noamr/csswg-drafts that referenced this pull request Nov 18, 2024

Revert "[css-view-transitions-2] First pass at layered capture (w3c#1…

c33ee7d

…1045)" This reverts commit 02eb632.

noamr added a commit that referenced this pull request Nov 18, 2024

Revert "[css-view-transitions-2] First pass at layered capture (#11045)…

a15fbbc

…" (#11228) This reverts commit 02eb632.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-view-transitions-2] First pass at layered capture #11045

[css-view-transitions-2] First pass at layered capture #11045

noamr commented Oct 17, 2024

khushalsagar Oct 21, 2024

khushalsagar Oct 21, 2024

noamr Oct 24, 2024

khushalsagar Oct 24, 2024

noamr Oct 24, 2024

khushalsagar Oct 24, 2024

noamr Oct 24, 2024

khushalsagar Oct 24, 2024

noamr Oct 24, 2024

khushalsagar Nov 1, 2024

noamr Nov 4, 2024

khushalsagar Nov 5, 2024

noamr Nov 5, 2024

khushalsagar Nov 1, 2024

khushalsagar Nov 1, 2024

noamr Nov 4, 2024

khushalsagar Nov 5, 2024

noamr Nov 5, 2024

noamr left a comment

noamr Nov 5, 2024


		### Render the snapshot with layered capture ### {#layered-capture-rendering}

		When capturing an element into a snapshot, apply the following style to the element in addition to the [=capture rendering characteristics=]:

[css-view-transitions-2] First pass at layered capture #11045

[css-view-transitions-2] First pass at layered capture #11045

Conversation

noamr commented Oct 17, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

noamr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment