Re: [csswg-drafts] [scroll-animations-1] Scope of Named Timelines (#7047)

The CSS Working Group just discussed `scope of named timelines`, and agreed to the following:

* `RESOLVED: scope of named timelines is across flattened tree`
* `RESOLVED: timeline search looks at preceding siblings and ancestors, recursively`

<details><summary>The full IRC log of that discussion</summary>
&lt;TabAtkins> Topic: scope of named timelines<br>
&lt;TabAtkins> github: https://github.com/w3c/csswg-drafts/issues/7047<br>
&lt;TabAtkins> fantasai: when you name a timeline with the css properties, what's the name scope; which elements have access?<br>
&lt;TabAtkins> fantasai: easiest is to work the same as counter<br>
&lt;TabAtkins> fantasai: so which scope should we have for these things - descendants and siblings (like counters) or expand further? and if further, what precedence rules?<br>
&lt;TabAtkins> TabAtkins: further question - does this extend into shadows<br>
&lt;TabAtkins> fantasai: good question, probably no<br>
&lt;TabAtkins> TabAtkins: suspect i agree<br>
&lt;TabAtkins> flackr: sounds easy to resolve<br>
&lt;fantasai> TabAtkins: Use either the pre-flattened or post-flattened tree<br>
&lt;fantasai> emilio: The flattened tree doesn't know about shadows<br>
&lt;fantasai> emilio: counters use the flattened tree<br>
&lt;fantasai> TabAtkins: It is true that other than selectors, CSS is defined over the flattened tree<br>
&lt;fantasai> TabAtkins: what's easier?<br>
&lt;fantasai> astearns: Is there a reason for them to descend or not?<br>
&lt;fantasai> TabAtkins: would let you to refer to timelines defined outside the shadow<br>
&lt;fantasai> miriam: Seems like it could be useful<br>
&lt;fantasai> i/TabAtkins: further/scribe+ fantasai<br>
&lt;fantasai> TabAtkins: do counters use the flat tree?<br>
&lt;fantasai> emilio: in Gecko they use flattened tree for sure<br>
&lt;fantasai> dbaron: I thought both HTML list numbering and counters don't use the flattened tree<br>
&lt;fantasai> dbaron: pretty sure about HTML list numbering<br>
&lt;fantasai> emilio: when Mats worked on list counters, the CSSWG resolved to use the flattened tree<br>
&lt;fantasai> emilio: and we fixed it very recently<br>
&lt;fantasai> dbaron: So 2 weeks ago I was helping a new engineer working on Blink, and advised it was to not use flattened tree<br>
&lt;fantasai> TabAtkins: outside of the display spec and possibly scoping, which define how flattened tree works<br>
&lt;fantasai> TabAtkins: the rest of CSS doesn't mention a tree specifically, just uses parent-child relationships<br>
&lt;emilio> https://github.com/w3c/csswg-drafts/issues/2679 is the relevant issue IIRC<br>
&lt;fantasai> TabAtkins: so don't see how you'd be reading that<br>
&lt;fantasai> dbaron: HTML defines it twice, once not using the flattened tree<br>
&lt;fantasai> dbaron: and a second time in the rendering section in terms of CSS counters<br>
&lt;fantasai> TabAtkins: HTML might do something weird, the way their list counters work is bizarre and based on back-compat<br>
&lt;emilio> https://bugzilla.mozilla.org/show_bug.cgi?id=1477524 is where we fixed it<br>
&lt;fantasai> astearns: Sounds like figuring out how other parts of CSS work as precedent is not a great idea<br>
&lt;fantasai> TabAtkins: well maybe not HTML list counters<br>
&lt;fantasai> astearns: Only opinion I've heard so far is that so far it would be better to pierce the shadow DOM<br>
&lt;fantasai> astearns: we can spec it either way<br>
&lt;fantasai> miriam: My sense would be that authors will want their web components to respond to these timelines, so having it available in the shadow DOM seems useful<br>
&lt;fantasai> astearns: Anyone wants to argue against having timelines pierce shadow boundaries?<br>
&lt;fantasai> flackr: Is it normal to coordinate thing outside shadow DOM and stuff inside it?<br>
&lt;fantasai> TabAtkins: depends on your usage<br>
&lt;fantasai> TabAtkins: if you're ... or ???; entirely opposite use cases<br>
&lt;fantasai> miriam: Shadow can usually see things outside, it's just usually the other way around that we don't do<br>
&lt;fantasai> dbaron: It does seem a little awkward to conclude without anyone from WebKit<br>
&lt;fantasai> dbaron: they tend to have a unified opinion on shadow DOM<br>
&lt;fantasai> astearns: They're not here, so we can conclude without them and they can object if they want<br>
&lt;fantasai> astearns: we should try to make progress, can always circle back<br>
&lt;fantasai> astearns: proposed resolution is that the scope of named timelines uses the flattened tree<br>
&lt;fantasai> TabAtkins: I do think that's the right way to do it now<br>
&lt;fantasai> astearns: objections?<br>
&lt;fantasai> RESOLVED: scope of named timelines is across flattened tree<br>
&lt;bramus> q+<br>
&lt;flackr> q+<br>
&lt;TabAtkins> fantasai: back to original issue, don't have much of an opinion<br>
&lt;TabAtkins> fantasai: current spec says scope is the element itself and its descendants<br>
&lt;TabAtkins> fantasai: and its siblings and their descendants<br>
&lt;TabAtkins> TabAtkins: identical to counters<br>
&lt;TabAtkins> fantasai: so question is if we want this to expand to document-global?<br>
&lt;astearns> ack bramus<br>
&lt;TabAtkins> bramus: i think there are some use-cases for it<br>
&lt;TabAtkins> bramus: like if an element is scrolling and elements elsewhere in the tree are animating along it<br>
&lt;TabAtkins> bramus: so like in your body a fixpos element, wanting to look at the scrolling element to reveal itself at one point<br>
&lt;astearns> ack flackr<br>
&lt;TabAtkins> flackr: there are definitely use-cases for global<br>
&lt;TabAtkins> flackr: only concern is these are often used in components, like progress thru a carousel<br>
&lt;TabAtkins> flackr: so want to support multiple things with a single name and have animations bind to the right one<br>
&lt;TabAtkins> flackr: so i think we need some well-defined way to override names<br>
&lt;TabAtkins> flackr: so in the issue i was proposing tree order<br>
&lt;TabAtkins> flackr: so the most recenty-defined thing is chosen<br>
&lt;TabAtkins> fantasai: so walk backwards thru the tree<br>
&lt;TabAtkins> dbaron: so you're saying you'd include something established by the descendant of a previous sibling?<br>
&lt;TabAtkins> flackr: yeah,a nd there are use-cases for this<br>
&lt;TabAtkins> emilio: that can be a perf hit when doing the lookup<br>
&lt;TabAtkins> flackr: in perf, for each name save a list of tree-order indexes<br>
&lt;TabAtkins> emilio: we don't have such a list<br>
&lt;TabAtkins> flackr: oh i thought browsers had that<br>
&lt;TabAtkins> emilio: wouldn't that break with mutations? lots of updates when you insert<br>
&lt;TabAtkins> flackr: there are ways to get around that<br>
&lt;fantasai> TabAtkins: there is a DOM API for comparing positions, but it's slow<br>
&lt;astearns> ack dbaron<br>
&lt;TabAtkins> dbaron: i would caution against using counters as a precedent<br>
&lt;bkardell_> q+<br>
&lt;TabAtkins> dbaron: they were designed with a weird set of requirements that led to their design, and i wouldn't assume that's waht you want to copy unless it's the same requirements<br>
&lt;TabAtkins> flackr: use-case is there are things outside the scroller that want to update based on the scroller's position<br>
&lt;TabAtkins> flackr: like specific, progress thru a carousel, have dots update to show what pane you're on<br>
&lt;astearns> ack fantasai<br>
&lt;TabAtkins> fantasai: if we want to make it global thru a page, flattened tree isn't ideal<br>
&lt;TabAtkins> fantasai: would want to check siblings first instead of cousins<br>
&lt;TabAtkins> fantasai: So i think we want an order where you look up siblings, then parent, etc<br>
&lt;TabAtkins> TabAtkins: So never descend the tree, just go up and sideways?<br>
&lt;TabAtkins> fantasai: Maybe. if we want more full global could deprioritize going down first<br>
&lt;TabAtkins> flackr: I think that would do good enough<br>
&lt;astearns> ack bkardell_<br>
&lt;TabAtkins> astearns: unsure how we'd prioritize<br>
&lt;TabAtkins> flackr: Could punt going down for now<br>
&lt;fantasai> TabAtkins: so searching up and sideways... not quite counter scope<br>
&lt;fantasai> TabAtkins: so any of your siblings, your ancestors, and their siblings, but not going back down<br>
&lt;bramus> q+<br>
&lt;TabAtkins> astearns: efficiency concerns?<br>
&lt;TabAtkins> TabAtkins: that's an ancestor walk with some sibling walks along the way<br>
&lt;TabAtkins> emilio: eh, with big trees can still be annoying<br>
&lt;TabAtkins> fantasai: assume there's some caching around<br>
&lt;TabAtkins> emilio: yeah<br>
&lt;TabAtkins> emilio: depending on impl, might be tricky to invalidate properly<br>
&lt;TabAtkins> emilio: if you're building the tree you might not have later sibling info yet<br>
&lt;ydaniv> q+<br>
&lt;TabAtkins> emilio: the level of trickiness is varying<br>
&lt;TabAtkins> flackr: in my opinion the use-cases that need siblings can use previous siblings and then use grid/flex to swap around layout<br>
&lt;astearns> ack bramus<br>
&lt;TabAtkins> fantasai: don't want to force bad source ordering tho<br>
&lt;TabAtkins> bramus: wondering if this still allows for a carousel to reach the end of the carousel and animate something else that's not a sibling or an ancestor?<br>
&lt;TabAtkins> fantasai: yes, it searches from the element trying to *find* the timeline<br>
&lt;bkardell_> q+<br>
&lt;TabAtkins> bramus: so this wouldn't work then?<br>
&lt;TabAtkins> fantasai: depends on what you're trying to do<br>
&lt;TabAtkins> flackr: think for a carousel it means you can't have ac ontainer on the scrolling element<br>
&lt;fantasai> TabAtkins: Have we considered swapping between local and global scope?<br>
&lt;fantasai> TabAtkins: so that local things can do the cheap thing<br>
&lt;fantasai> TabAtkins: but can expand the scope when needed<br>
&lt;TabAtkins> bramus: and last one wins if there's a collision<br>
&lt;TabAtkins> emilio: do we have a good story of what happens we you mutate the tree?<br>
&lt;TabAtkins> emilio: Is it well-defined when you perform this lookup, and if you need to change stuff when this changes<br>
&lt;fantasai> TabAtkins: I think you're asking about batch and flush layout?<br>
&lt;fantasai> emilio: not necessarily<br>
&lt;flackr> qq+<br>
&lt;fantasai> emilio: You choose the same timeline name as you have earlier, do you restart the animation? What do you do? When and how long does your choice of timeline last?<br>
&lt;astearns> ack flackr<br>
&lt;Zakim> flackr, you wanted to react to bramus<br>
&lt;fantasai> flackr: our name lookup is important for this because, if it's global it can happen based on style of any element, but if just preceding siblings and ancestors, we can know which scroll timeline you're looking at<br>
&lt;fantasai> flackr: we don't restart timelines, it's defined in Web Animations what to do<br>
&lt;bkardell_> q-<br>
&lt;bramus> q+<br>
&lt;fantasai> flackr: but expectation is that as part of doing style and layout, we can update to the new correct timeline and resolve the timeline according to position in that timeline<br>
&lt;astearns> ack ydaniv<br>
&lt;TabAtkins> ydaniv: like robert said, if we start with something simple and get more complex lookups later, maybe using JS api people can make more complex usages<br>
&lt;TabAtkins> astearns: not a bad idea. have to consider how we expand this in css, tho - adding keywords to determine the scope rules?<br>
&lt;TabAtkins> fantasai: tab suggested a timeline-scope<br>
&lt;astearns> ack bramus<br>
&lt;TabAtkins> bramus: what if you made the switch automatic? if you have non-named scroll timelines they're local, but named timelines are global?<br>
&lt;TabAtkins> flackr: how would you refer to an anonymous timeline for a later timeline?<br>
&lt;TabAtkins> bramus: from the scroll() function..?<br>
&lt;TabAtkins> fantasai: that doesn't work in view-timeline<br>
&lt;TabAtkins> fantasai: I don't think we shoudl switch on name, we want something more ergonomic<br>
&lt;flackr> q+<br>
&lt;astearns> ack flackr<br>
&lt;TabAtkins> fantasai: Could also have the model where an element can declare it's the scope, but the driver for the timeline is later in the tree and binds itself<br>
&lt;TabAtkins> flackr: I suggest we use the siblings/ancestors and add a switch later<br>
&lt;TabAtkins> flackr: and for impl, when we discover a scroll timeline has changed we schedule another style pass, and we should be able to handle mutations in that pass<br>
&lt;TabAtkins> flackr: if a named timeline has changed, we need to restart style and layout with that timeline<br>
&lt;TabAtkins> astearns: and this is just earlier siblings, right?<br>
&lt;TabAtkins> flackr: Yes, tho i'm open to later siblings<br>
&lt;TabAtkins> TabAtkins: Later sibs can force us to rely on waiting for th enetire document to load<br>
&lt;TabAtkins> emilio: You have to do that anyway for :nth-clast-child(), etc<br>
&lt;TabAtkins> emilio: We have some examples, but could be tricky<br>
&lt;TabAtkins> flackr: i think once we have experience we could ahve stronger rationale one way or the other<br>
&lt;TabAtkins> astearns: fair. until we have experience i suggest going with earlier siblings only, seems more likely to succeed<br>
&lt;TabAtkins> fantasai: one way to avoid having to look at all document is to look at closest sibling, in either direction<br>
&lt;TabAtkins> TabAtkins: I'm uncomfortable with a completely novel lookup mechanism without strong justification<br>
&lt;TabAtkins> fantasai: justification is the elements are usually near each other<br>
&lt;TabAtkins> astearns: That's only different from a simple walk if there are name collisions, tho<br>
&lt;TabAtkins> flackr: and there usually shouldn't be<br>
&lt;TabAtkins> astearns: so I recommend the scope of timelines is that elements will look for timelines among their previous siblings and ancestors, transitively. can add a switch for more complex behavior in the future.<br>
&lt;TabAtkins> astearns: Amendments?<br>
&lt;TabAtkins> flackr: I like it. I think elika's earlier concern about not forcing authors to reorder their content - usually scroll timelines are decorative, so content order is less important.<br>
&lt;fantasai> TabAtkins: forcing a specific order isn't a problem if it doesn't interfere with semantic ordering<br>
&lt;TabAtkins> TabAtkins: We don't like forcing it if unnecessary, but okay if needed<br>
&lt;TabAtkins> fantasai: should look into the idea of declaring a named scope and letting a scroller bind to it, think that will solve a lot of issues<br>
&lt;TabAtkins> fantasai: I'll explore it in this issue, split out if needed.<br>
&lt;TabAtkins> proposed resolution: timeline search looks at ancestors and preceding siblings, recursively<br>
&lt;TabAtkins> (and we'll revisit with impl experience as needed)<br>
&lt;TabAtkins> RESOLVED: timeline search looks at preceding siblings and ancestors, recursively<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7047#issuecomment-1203984802 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 3 August 2022 13:56:10 UTC