- From: Dael Jackson <daelcss@gmail.com>
- Date: Thu, 9 Dec 2021 07:12:06 -0500
- To: www-style@w3.org
=========================================
These are the official CSSWG minutes.
Unless you're correcting the minutes,
Please respond by starting a new thread
with an appropriate subject line.
=========================================
Publications
------------
- RESOLVED: Transforms 2 to "rough interop" (Issue #6243: Snapshot
2021)
- RESOLVED: Other specs as proposed, except for Color 4 and
overscroll-behavior (Issue #6243)
- RESOLVED: Publish Snapshot 2021 as a NOTE after edits (Issue #6243)
- RESOLVED: Publish Color 4 and Color 5 as WD (Issue #6854: Color 4
and Color 5 Publication)
Proposal: Shared Element Transitions
------------------------------------
- khush presented the proposal for shared element transitions (slides
available here:
https://docs.google.com/presentation/d/15y60zFddT859VHKNeH6bjJyrZ1wIr8W7VUfRfr-icIk/edit#slide=id.p
)
- There was broad interest in the proposal and questions to help
refine it further. Discussion will continue in the GitHub repo
( https://github.com/WICG/shared-element-transitions ) and
specific issues will be added to the CSS agenda as they're ready
for discussion.
===== FULL MINUTES BELOW ======
Agenda: https://github.com/w3c/csswg-drafts/projects/27
Present:
Rachel Andrew
Adam Argyle
Tab Atkins-Bittner
Delan Azabani
Oriol Brufau
Tantek Çelik
Emilio Cobos Álvarez
Elika Etemad
Megan Gardner
Chris Harrelson
Daniel Holbert
Brian Kardell
Jonathan Kew
Vladimir Levin
Rune Lillesveen
Chris Lilley
Alison Maher
François Remy
Florian Rivoal
Dominik Röttsches
Cassondra Roberts
Khushal Sagar
Jen Simmons
Alan Stearns
Miriam Suzanne
Lea Verou
Scribe: fantasai
Scribe's scribe: TabAtkins
Publications
============
Snapshot 2021
-------------
github: https://github.com/w3c/csswg-drafts/issues/6243
florian: fantasai and I prepared a draft for this year
florian: More or less identical to last year other than dates
florian: Went through list of specs to propose
florian: Reminder there's 3 buckets
florian: Stable = things that are REC or almost REC
florian: Rough Interop = roughly interoperable, but spec is in rough
shape and lots of issues, but things are shipping
florian: Awaiting Implementations = spec is "done" as far as can be
without implementation work, but don't have enough
implementation to know if stable yet
florian: We've made a list of some things that might go into the 2021
snapshot
florian: First is, Lists 3 specification
florian: Other than the marker-side property, seems that everything
is implemented even though spec is not completely finished,
not that far away
florian: so is that one ready for Rough Interop?
florian: Next is Counter Styles 3, seems ready for Stable (Official
Definition)
florian: Logical Properties should be in "rough interop"
florian: One we have a question, what is the status of
"overscroll-behavior", should it be in "rough interop" or
not yet?
florian: Next is css-position-3, seems to be "rough interop"
florian: Scrollbars 1 now CR should be in "Awaiting Implementations"
bucket
florian: css-sizing-3 in Rough Interop
florian: Another question: what's status of resize-observer? Should
it go into "rough interop"?
florian: Same question for Web Animations 1
astearns: Also suggestion for css-fonts-4 to "rough interop"
astearns: and css-color-4 to official
<chris> https://test.csswg.org/harness/results/css-fonts-4_dev/grouped/
<chris> https://test.csswg.org/harness/results/css-color-4_dev/grouped/
jensimmons: Spec considering in Interop 2022, which is cross-browser
effort to focus on testing and interop fixes
jensimmons: overscroll-behavior
florian: Does it mean that after next year it will be in "rough
interop"?
jensimmons: No I think now
emilio: ...
emilio: propagation from the body
emilio: basically Blink implements the spec wrong
emilio: In order to make it work on Blink, you have to set it on BODY
and for everyone need to set it on root
emilio: *other* than that it's roughly interoperable
<chris> are suggestions for color 4 and fonts 4 accepted?
<fantasai> I think color 4 should go to CR first before going
official; Fonts 4 to rough interop seems fine
smfr: I would hold off on overscroll-behavior
astearns: OK, overscroll-behavior off the list
astearns: css-sizing-3?
astearns: Should we push it down to rough interop? It's currently in
stable but not CR
* fantasai is surprised it was in stable
chris: Color 4 should be in CR
chris: have shipping implementations, lots of interp
chris: anachronistic to link to Color 3
florian: Still have open issues, not a lot, but right now at 7
florian: so certainly qualifies under the 2nd bucket, but official
definition, maybe not so much
fantasai: I would prefer to wait until next year. Top bucket specs
should be in CR or later.
<chris> ok, agreed re color-4
astearns: Take sizing to rough interop for the same reasons
astearns: Anyone with opinions about resize-observer or web
animations?
smfr: Both of those into rough interop
astearns: anyone disagree?
astearns: OK, I think we're at consensus for the list of things in
the issue.
astearns: What about Transforms 2?
astearns: It was suggested to add it to stable last year?
fantasai: It's pretty rough, should go into rough interop.
smfr: sgtm
dbaron: There are some pieces not interoperable and many pieces that
are, so sounds good to me
astearns: My suggested resolution is to take all of the suggested
edits, including moving transforms 2 to rough interop,
except for color 4 and overscroll-behavior
<chris> +1
RESOLVED: Transforms 2 to "rough interop"
RESOLVED: Other specs as proposed, except for Color 4 and
overscroll-behavior
astearns: Proposed to publish Snapshot 2021 as a Note
RESOLVED: Publish Snapshot 2021 as a NOTE after edits
astearns: How much time until end of year publishing moratorium?
florian: Should be fine, will be done quickly
Color 4 and Color 5 Publication
-------------------------------
github: https://github.com/w3c/csswg-drafts/issues/6854
chris: Fairly major changes with WG consensus, including shifting
stuff
chris: Significant edits in last 6 months
chris: Regular WD
chris: For Color 4, hopefully last publication as a WD
astearns: Any objections?
RESOLVED: Publish Color 4 and Color 5 as WD
fantasai: Should publish more frequently
fantasai: Nobody outside people reviewing new spec text should need
to look at ED, ideally TR is up to date
fantasai: will take us awhile to get there with all our specs, but
that should be the goal
Proposal: Shared Element Transitions
====================================
github: https://github.com/w3c/csswg-drafts/issues/6464
<khush> Here are the slides:
https://docs.google.com/presentation/d/15y60zFddT859VHKNeH6bjJyrZ1wIr8W7VUfRfr-icIk/edit#slide=id.p
khush: Going to use a very simple example
[slide 2]
khush: ...
khush: Core design in both states
khush: what to highlight new CSS attribute called page transitions tag
khush: During transition we create alternate representation of DOM
after snapshotting
khush: Page tells us which parts to snapshot as independent pieces
khush: This is saying root element should also be captured
khush: Other aspect is properties that are changing
[slide 3]
khush: This slide shows box tree during transition
khush: have root stacking context, author dom underneath
khush: during transition we create tree of pseudo-elements that is
sibling of root stacking context
khush: highlight fact that this transition stacking context, it
paints as a sibling of the root context
khush: reason is, these content elements are displaying images from
author dom
khush: it's displaying root stacking context
khush: Initially tried to place n top layer, but ran into circular
dependencies
khush: wanted to capture other elements in top layer
khush: so put it in an independent stacking context as sibling of root
[slide 4]
khush: On the left dom structure, on the right stylesheet from UA
khush: focus on container element
khush: we have layout computed properties for each element with a
page-transition tag
khush: and we have transform that maps into ?? space
khush: UA that generates, box renders at same spot that renders in
author DOM
khush: Last is z-index for paint ordering
khush: we compute that and use z-index to paint in same order in
pseudo tree
khush: container get us box that maps to actual element's box
khush: content of element comes from old-content and new-content
properties
khush: Using element in CSS to get a painted representation of the
DOM element's contents
khush: this is a snapshot of element in the new dom
khush: the old one is snapshot of old content with cacehed element
khush: we cache a static paint to retain the content of the old dom
khush: then DOM changed to new state
[slide 5]
khush: Previous slide showed transition pseudo element tree and how
to make it look like author dom
khush: this shows the animations showing change from old to new state
khush: first animates box from old size and position to new size and
position
khush: for the content just do a swap, old content fadesin / new
content fades out
khush: because of all the pseudo elements exposed to developer, can
customize any way they want
[slide 6]
khush: This slide meant to highlight the ...
khush: Want to approximate the rendering as much as possible
khush: issue with inherited properties
khush: Won't retain inherited from ancestors, but will retain
positioning and screen space transforms
khush: When generating snapshot, doesn't include any effects from
ancestors
khush: Everything with a page-transition tag paints in same order in
pseudo-element tree
khush: but if element ?? wasn't tagged, then its content is in the
root element image
khush: and this will cause a paint order change
khush: Last is the liveness of DOM, old DOM is static, but new dom is
live-updated
khush: By design; that's how element() function works today
[slide 7]
khush: List of spec changes
khush: First is to update the element() spec
khush: Right now element() generates an element that is size of
element's bounding box
khush: ink overflow is getting clipped
fantasai: Don't think you can include the ink overflow
fantasai: because then size of image is unpredictable, and can't be
accurately positioned by the author
fantasai: and ink overflow is potentially infinite, and where it gets
clipped will vary by implementation
khush: Next is standardizing the pseudo-element tree
khush: so need to spec that
khush: then need to define new stacking context for transitions
khush: and because of ink overflow, need to define that replaced
element can overflow its box
khush: blending pixels, have a proposal to allow that
khush: Right now actively implementing this
khush: want to get feedback in WICG on issues like fantasai raised
khush: as implementation matures will discuss issues
astearns: Suggest participating in repo, would like to get this
feature right
astearns: On the call want to discuss if any serious concerns with
the direction being proposed
smfr: Various limitations in escaping ancestor effects like opacity
and filters
smfr: makes me think people will write pages ...
smfr: pop out of ancestor opacity and then move
smfr: Seems limitation of implementation, only snapshotting things
and not the whole tree?
khush: 2 additions
khush: right now snapshotting the whole element
khush: but added a mode where only snapshotting ?? and keep
decorations and other things
khush: the other mode also snapshots highlighting etc. (????)
khush: Want to get there, but incrementally
khush: can point to explainer
khush: don't have issue of ancestor effects not being preserved
smfr: Showed pseudo-element hierarchy
smfr: you're snapshotting old content
smfr: using pseudo-elements to define animations
smfr: but no DOM node behind that
khush: Once cached the state, need to be able to represent
khush: to get the rendering to look like author DOM, we made a tree
of pseudo-elements
smfr: There are some similarities with things like animation-worklet
smfr: where you have a little JS world where you are limited in what
you can do, but this is a little different
khush: Because pseudo-elements, limits in what you can do
khush: e.g. introducing own notes in tree or changing structure of
tree
khush: getting to work with those requests is difficult
khush: limitations are defined here by what you can do with
pseudo-elements
khush: so you can change their style, but not their structure
khush: Can animate using CSS animations
smfr: Can you apply arbitrary properties?
khush: Yes
smfr: So you are running layout on the tree
khush: We had cases where box aspect ratio was changing, wanted not
to stretch but to clip, so set 'object-fit' and it just work
smfr: When p-e tree is showing, is it sitting on top and cans ee
document underneath?
khush: In UA stylesheet we set 'visibility: hidden' on elements with
page-transition tag
khush: don't actually show the page content, but still there
khush: If changing small part of page, don't put page-transition tag
on the root
khush: so that keeps showing new DOM
khush: but see the transitions on top of it
smfr: Is the old page content a snapshot?
khush: Yes
khush: and then we save the hierarchy as well
smfr: So if page content has animation, that will freeze
khush: Yes
khush: New DOM is live, but old DOM is frozen
astearns: Suggest putting links to the specific parts of explainer/
issue that respond to the things discussed here
<fremy> just in general, I think this is a very interesting proposal
jensimmons: Also helpful to have resources to explain author
experience
khush: The explainer takes an example of one page, and has the author
CSS that you need to get the transition working. I'll link to
that section also
astearns: Fine to put Agenda+ either on this meta-issue or adding a
new issue, to discuss particular parts of this proposal
astearns: Would rather do that than doing general discussion again
astearns: Thanks very much for presentation, very cool stuff.
Received on Thursday, 9 December 2021 12:13:49 UTC