Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[web-animations-1] Add pseudoElement to getAnimations options #11050

Merged
merged 2 commits into from
Oct 21, 2024
Merged

[web-animations-1] Add pseudoElement to getAnimations options #11050

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
769f915
Add pseudoElement
vmpstr Oct 18, 2024
dfbbead
Parsing error
vmpstr Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 22 additions & 6 deletions web-animations-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6652,6 +6652,7 @@ The <code>Animatable</code> interface mixin {#the-animatable-interface-mixin}

dictionary GetAnimationsOptions {
boolean subtree = false;
DOMString? pseudoElement = null;
};
</xmp>

Expand Down Expand Up @@ -6733,12 +6734,21 @@ The <code>Animatable</code> interface mixin {#the-animatable-interface-mixin}

: <dfn lt="getAnimations(options)">sequence<Animation> getAnimations(|options|)</dfn>
::
Returns the set of [=relevant animations=] for this object,
or, if an {{Animatable/getAnimations(options)/options}} parameter
is passed with {{GetAnimationsOptions/subtree}} set to true,
returns the set of [=relevant animations for a subtree=] for this object.
1. Let |object| be the object on which this method was called.

The returned list is sorted using
1. If {{Animatable/getAnimations(options)/options}} is passed
with a non-null {{GetAnimationsOptions/pseudoElement}},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably have a similar SyntaxError exception thrown as we do for trying to create an animation effect targeting an invalid pseudo, e.g. see https://www.w3.org/TR/web-animations-1/#dom-keyframeeffect-pseudoelement

You can see this is also referenced by the KeyframeEffect constructor: https://www.w3.org/TR/web-animations-1/#ref-for-dom-keyframeeffect-pseudoelement, though in this case since we're not setting pseudoElement it probably can't point to the same reference.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done. I've tried to define the algorithm in the old spot and reference it, instead of copying the text. But let me know what you prefer. Also, do you think we need a separate resolution for the DOMException, since I don't believe getAnimations can throw prior to this change

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So looking at getComputedStyle which is very similar, it looks like MDN says it can throw on an invalid selector however I'm not sure where this is called out in the spec or how to trigger an exception in chrome, whereas for element.animate it is easy to trigger the exception with elem.animate({}, {pseudoElement: ':invalid-pseudo'});.

So we should probably get a consistent story for when we should throw on invalid pseudo selectors, but maybe this should be a separate issue explaining the current behavior of the APIs we have using pseudoElement selectors.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd propose for now we land this with the exception for self consistency within the same spec, and follow up on this.

then let |target| be the [=pseudo-element=]
identified by {{GetAnimationsOptions/pseudoElement}} pseudo-selector (e.g. `::before`)
with |object| as the originating element.
Otherwise, let |target| be |object|.

1. If {{Animatable/getAnimations(options)/options}} is passed
with {{GetAnimationsOptions/subtree}} set to true,
then return the set of [=relevant animations for a subtree=] of |target|.
Otherwise, return the set of [=relevant animations=] for |target|.

The list returned by the above algorithm is sorted using
the composite order described for the associated [=animations=]
of effects in [[#the-effect-stack]].

Expand Down Expand Up @@ -6782,6 +6792,12 @@ The <code>Animatable</code> interface mixin {#the-animatable-interface-mixin}
on which {{Animatable/getAnimations()}} is called
should also be included in the result.

: <dfn for=GetAnimationsOptions>pseudoElement</dfn>
::
If set, indicates that the target of the operation is the [=pseudo-element=]
identified by this pseudo selector (e.g. `::before`)
with the originating element being the object on which the function is called.

</div>

Extensions to the {{Document}} interface {#extensions-to-the-document-interface}
Expand Down Expand Up @@ -7268,4 +7284,4 @@ Animation of 'box-shadow' and 'text-shadow' {#animating-shadow-lists}
follows the matching rules for interpolation above,
performing addition on each component according to its type,
or falling back to [=discrete=] animation
if the ''shadow/inset'' values do not match.
if the ''shadow/inset'' values do not match.