Implement the snapshot containing block concept
Categories
(Core :: CSS Parsing and Computation, task)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox140 | --- | fixed |
People
(Reporter: emilio, Assigned: boris)
References
(Blocks 1 open bug)
Details
(Whiteboard: [viewtransitions:m1], [wptsync upstream])
Attachments
(1 file)
https://drafts.csswg.org/css-view-transitions-1/#snapshot-containing-block
It's mostly the viewport, but with some extra bits on android perhaps to account for the dynamic toolbar?
|
Reporter | |
Updated•1 year ago
|
|
||
Updated•1 year ago
|
|
Assignee | |
Comment 1•1 year ago
|
||
Except for the Android stuff, we probably need to make sure some of the tests get passed, e.g. css/css-view-transitions/snapshot-containing-block-*.html.
https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-static.html
https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-absolute.html
.https://searchfox.org/mozilla-central/source/testing/web-platform/tests/css/css-view-transitions/snapshot-containing-block-includes-scrollbar-gutter.html
|
|
Assignee | |
Comment 2•1 year ago
•
|
||
| partly-obsolete | ||
I tried to do quick diagnosis from these tests (so we could know how many things we have to do in this bug or the separate bugs):
-
snapshot-containing-block-static.html [FAIL]
- The size of
::view-transitionis not correct. It seems we are using the viewport size. However, this test expects the size is the all scrollable area. The spec says: "The snapshot containing block is a rectangle that covers all areas of the window that could potentially display page content." - The element,
target, is overridden by others after scrolling.
- The size of
-
snapshot-containing-block-absolute.html [FAIL]
- The
position:absolutedoesn't work on::view-transition. We are still treat it asposition:static. - The target element is also overridden by others after scrolling.
- The
-
snapshot-containing-block-includes-scrollbar-gutter.html [PASS, FAIL]
There is an intermittent. I noticed there is a color-channel-difference by 1, per the result in Bug 1954576. For more specifically:
Image 1: #32cc32 rgb(50,204,50)
Image 2: #32cd32 rgb(50,205,50)
Maximum difference per channel 1, 40000 pixels differ
The 2nd channel is different by 1. So this may be a test issue (i.e. we may tweak the animation-duration or animation-timing-function to avoid it).
|
|
Reporter | |
Comment 3•1 year ago
|
||
I'm confused, the view transition pseudo should always be out of flow (fixed or absolute) due to it being in the top layer: https://searchfox.org/mozilla-central/rev/b42dbdf31bc27acaf3dbcb9d069c55ddfa2cd34e/layout/style/res/ua.css#476
I guess the expectation is that there's an extra box actually on the top layer wrapping that or so?
| Comment hidden (obsolete) |
|
|
Assignee | |
Comment 5•1 year ago
•
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #3)
I'm confused, the view transition pseudo should always be out of flow (fixed or absolute) due to it being in the top layer: https://searchfox.org/mozilla-central/rev/b42dbdf31bc27acaf3dbcb9d069c55ddfa2cd34e/layout/style/res/ua.css#476
I guess the expectation is that there's an extra box actually on the top layer wrapping that or so?
Yes. We need an abstract box (or just put a block frame directly) on the top the ::view-transition, so we can change the position property of :view-transition. This is the initial purpose of introducing snapshot containing block (https://github.com/w3c/csswg-drafts/issues/8505).
Note: I just realized I misunderstood this concept in the beginning. I though it is identical to ::view-transition.
So, perhaps just create an extra box and force to use position:fixed.
However, the mobile is quite different, so I think it'd be better to handle desktop OS only in this bug, and use another bug, for mobile OS, to take the dynamic toolbar into account.
|
|
Assignee | |
Updated•1 year ago
|
|
|
Assignee | |
Updated•1 year ago
|
|
|
Assignee | |
Comment 6•1 year ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #0)
https://drafts.csswg.org/css-view-transitions-1/#snapshot-containing-block
It's mostly the viewport, but with some extra bits on android perhaps to account for the dynamic toolbar?
Filed Bug 1960762 for handling Android case. So we focus on adding the extra box in this bug, for desktop OS first.
|
|
Assignee | |
Comment 7•1 year ago
|
||
We introduce ::-moz-snapshot-containing-block pseudo-element to wrap
the view transtiion pseudo-element tree. This pseudo-element is only for
internal usage and cannot be accessed from outside.
Note that the related wpt,
snapshot-containing-block-static.html
snapshot-containing-block-absolute.html
are still failed because of Bug 1960755.
|
||
Updated•1 year ago
|
Description
•