Skip to content

[css-animations-1][css-transitions-1] Add .pseudoTarget to AnimationEvent and TransitionEvent #13603

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

Open
danielsakhapov wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[css-animations-1][css-transitions-1] Add .pseudoTarget to AnimationEvent and TransitionEvent #13603

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
eb9257c
Add .pseudoTarget to AnimationEvent and TransitionEvent
danielsakhapov Mar 5, 2026
1a3ab92
Explicitly mention pseudoTarget as an internal slot
danielsakhapov Mar 17, 2026
6ca26df
Add note about pseudoElement vs pseudoTarget encapsulation difference
danielsakhapov Mar 17, 2026
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
44 changes: 40 additions & 4 deletions css-animations-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ urlPrefix: https://html.spec.whatwg.org/multipage/infrastructure.html; type: dfn
</pre>
<pre class="link-defaults">
spec:cssom-1; type:interface; text:CSSRule
spec:css-pseudo-4; type:interface; text:CSSPseudoElement
</pre>

<h2 id="intro">
Expand Down Expand Up @@ -879,11 +880,13 @@ IDL Definition</h4>
readonly attribute CSSOMString animationName;
readonly attribute double elapsedTime;
readonly attribute CSSOMString pseudoElement;
readonly attribute CSSPseudoElement? pseudoTarget;
};
dictionary AnimationEventInit : EventInit {
CSSOMString animationName = "";
double elapsedTime = 0.0;
CSSOMString pseudoElement = "";
CSSPseudoElement? pseudoTarget = null;
};
</pre>

Expand All @@ -905,10 +908,43 @@ Attributes</h4>
runs (in which case the target of the event is that pseudo-element's corresponding
element), or the empty string if the animation runs on an element (which means the
target of the event is that element).
<dt><dfn>pseudoTarget</dfn>
Copy link
Copy Markdown
Member

@dbaron dbaron Mar 5, 2026

Choose a reason for hiding this comment

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

It seems like the definitions of pseudoTarget and pseudoElement should probably be equivalent, in that I would expect that pseudoElement and pseudoTarget.type should be the same.

However, the definitions seems sufficiently different right now that I wonder if that's actually the case, for example, if the pseudo-element is in a shadow tree and the retargeting algorithm affects things.

Are they intended to be equivalent as I would expect, or are they intended to be different? (I think it should be clear either way.)

<dd>
The [=pseudo-element=] that was the target of the animation,
if any. When the event target is an element rather than a
[=pseudo-element=], this attribute is <code>null</code>.

Each {{AnimationEvent}} has an associated <dfn dfn-type=dfn for="AnimationEvent">pseudoTargetOrigin</dfn>
internal slot (an {{Element}} or <code>null</code>), initialized to
<code>null</code>.

To get this attribute, run these steps:

1. If the [=AnimationEvent/pseudoTargetOrigin=] internal slot is <code>null</code>, then return <code>null</code>.
1. Let |currentTarget| be {{Event/currentTarget}}.
1. If |currentTarget| is <code>null</code>, then return <code>null</code>.
1. Let |origin| be the [=AnimationEvent/pseudoTargetOrigin=] internal slot.
1. Let |retargeted| be the result of [=retarget=]ing |origin| against |currentTarget|.
1. If |retargeted| is not |origin|, then return <code>null</code>.
1. Return {{AnimationEvent/pseudoTarget}}.
Copy link
Copy Markdown
Member

@dbaron dbaron Mar 5, 2026

Choose a reason for hiding this comment

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

I'm not sure if this is formally correct. This seems to be treating pseudoTarget as an internal slot in addition to being a property, but it doesn't really describe it as an internal slot. (Someone more familiar with these concepts should probably review.)

Copy link
Copy Markdown

@smaug---- smaug---- Mar 11, 2026

Choose a reason for hiding this comment

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

I guess this is similar to CommandEvent.source.
See the red box there


The <a>un-initialized value</a> of this attribute MUST be
<code>null</code>.
</dl>

<dfn dfn-type=constructor for=AnimationEvent>AnimationEvent(type, animationEventInitDict)</dfn> is an <a>event constructor</a>.

If |animationEventInitDict|'s {{AnimationEventInit/pseudoTarget}} is not <code>null</code>:

1. Set |event|.{{AnimationEvent/pseudoTarget}} = |animationEventInitDict|'s {{AnimationEventInit/pseudoTarget}}
1. Set |event|'s [=AnimationEvent/pseudoTargetOrigin=] = |animationEventInitDict|'s {{AnimationEventInit/pseudoTarget}}'s {{CSSPseudoElement/element}}

When the UA dispatches an {{AnimationEvent}} for an animation running on a
[=pseudo-element=], it must set the event's {{AnimationEvent/pseudoTarget}}
to the {{CSSPseudoElement}} representing that pseudo-element, and set the
[=AnimationEvent/pseudoTargetOrigin=] internal slot to that
{{CSSPseudoElement}}'s {{CSSPseudoElement/element}}.

<h3 id="event-animationevent">
Types of <code>AnimationEvent</code></h3>

Expand All @@ -931,7 +967,7 @@ Types of <code>AnimationEvent</code></h3>
<ul>
<li>Bubbles: Yes</li>
<li>Cancelable: No</li>
<li>Context Info: animationName, elapsedTime, pseudoElement</li>
<li>Context Info: animationName, elapsedTime, pseudoElement, pseudoTarget</li>
</ul>

<dt><dfn>animationend</dfn>
Expand All @@ -942,7 +978,7 @@ Types of <code>AnimationEvent</code></h3>
<ul>
<li>Bubbles: Yes</li>
<li>Cancelable: No</li>
<li>Context Info: animationName, elapsedTime, pseudoElement</li>
<li>Context Info: animationName, elapsedTime, pseudoElement, pseudoTarget</li>
</ul>

<dt><dfn>animationiteration</dfn>
Expand All @@ -961,7 +997,7 @@ Types of <code>AnimationEvent</code></h3>
<ul>
<li>Bubbles: Yes</li>
<li>Cancelable: No</li>
<li>Context Info: animationName, elapsedTime, pseudoElement</li>
<li>Context Info: animationName, elapsedTime, pseudoElement, pseudoTarget</li>
</ul>

<dt><dfn>animationcancel</dfn>
Expand All @@ -985,7 +1021,7 @@ Types of <code>AnimationEvent</code></h3>
<ul>
<li>Bubbles: Yes</li>
<li>Cancelable: No</li>
<li>Context Info: animationName, elapsedTime, pseudoElement</li>
<li>Context Info: animationName, elapsedTime, pseudoElement, pseudoTarget</li>
</ul>
</dl>

Expand Down
44 changes: 40 additions & 4 deletions css-transitions-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@ spec:css-color-4;
text:blue
text:transparent
spec:css-values-3; type:type; text:<time>
spec:css-pseudo-4; type:interface; text:CSSPseudoElement
spec:selectors-4; type:dfn; text:pseudo-elements
</pre>
<!-- FIXME: These overrides aren't great for dev/TR switching -->
<pre class="anchors">
Expand Down Expand Up @@ -1286,12 +1288,14 @@ associated with transitions.
readonly attribute CSSOMString propertyName;
readonly attribute double elapsedTime;
readonly attribute CSSOMString pseudoElement;
readonly attribute CSSPseudoElement? pseudoTarget;
};

dictionary TransitionEventInit : EventInit {
CSSOMString propertyName = "";
double elapsedTime = 0.0;
CSSOMString pseudoElement = "";
CSSPseudoElement? pseudoTarget = null;
};
</pre>

Expand All @@ -1315,12 +1319,44 @@ associated with transitions.
pseudo-element's corresponding element), or the empty
string if the transition occurred on an element (which
means the target of the event is that element).
: <code class='attribute-name'><dfn attribute for="TransitionEvent" id="Events-TransitionEvent-pseudoTarget">pseudoTarget</dfn></code>
:: The [=pseudo-element=] that was the target of the transition,
if any. When the event target is an element rather than a
[=pseudo-element=], this attribute is <code>null</code>.

Each {{TransitionEvent}} has an associated <dfn for="TransitionEvent">pseudoTargetOrigin</dfn>
internal slot (an {{Element}} or <code>null</code>), initialized to
<code>null</code>.

To get this attribute, run these steps:

1. If the [=TransitionEvent/pseudoTargetOrigin=] internal slot is <code>null</code>, then return <code>null</code>.
1. Let |currentTarget| be {{Event/currentTarget}}.
1. If |currentTarget| is <code>null</code>, then return <code>null</code>.
1. Let |origin| be the [=TransitionEvent/pseudoTargetOrigin=] internal slot.
1. Let |retargeted| be the result of [=retarget=]ing |origin| against |currentTarget|.
1. If |retargeted| is not |origin|, then return <code>null</code>.
1. Return {{TransitionEvent/pseudoTarget}}.

The <a>un-initialized value</a> of this attribute MUST be
<code>null</code>.


<code id="TransitionEvent-constructor"><dfn constructor
for="TransitionEvent">TransitionEvent(type, transitionEventInitDict)</dfn></code>
is an <a>event constructor</a>.

If |transitionEventInitDict|'s {{TransitionEventInit/pseudoTarget}} is not <code>null</code>:

1. Set |event|.{{TransitionEvent/pseudoTarget}} = |transitionEventInitDict|'s {{TransitionEventInit/pseudoTarget}}
1. Set |event|'s [=TransitionEvent/pseudoTargetOrigin=] = |transitionEventInitDict|'s {{TransitionEventInit/pseudoTarget}}'s {{CSSPseudoElement/element}}

When the UA dispatches a {{TransitionEvent}} for a transition running on a
[=pseudo-element=], it must set the event's {{TransitionEvent/pseudoTarget}}
to the {{CSSPseudoElement}} representing that pseudo-element, and set the
[=TransitionEvent/pseudoTargetOrigin=] internal slot to that
{{CSSPseudoElement}}'s {{CSSPseudoElement/element}}.


Types of <code>TransitionEvent</code> {#event-transitionevent}
--------------------------------------------------------------
Expand All @@ -1341,7 +1377,7 @@ The different types of transition events that can occur are:
<ul>
<li>Bubbles: Yes</li>
<li>Cancelable: No</li>
<li>Context Info: propertyName, elapsedTime, pseudoElement</li>
<li>Context Info: propertyName, elapsedTime, pseudoElement, pseudoTarget</li>
</ul>
</dd>

Expand All @@ -1354,7 +1390,7 @@ The different types of transition events that can occur are:
<ul>
<li>Bubbles: Yes</li>
<li>Cancelable: No</li>
<li>Context Info: propertyName, elapsedTime, pseudoElement</li>
<li>Context Info: propertyName, elapsedTime, pseudoElement, pseudoTarget</li>
</ul>
</dd>

Expand All @@ -1369,7 +1405,7 @@ The different types of transition events that can occur are:
<ul>
<li>Bubbles: Yes</li>
<li>Cancelable: No</li>
<li>Context Info: propertyName, elapsedTime, pseudoElement</li>
<li>Context Info: propertyName, elapsedTime, pseudoElement, pseudoTarget</li>
</ul>

<wpt>
Expand Down Expand Up @@ -1399,7 +1435,7 @@ The different types of transition events that can occur are:
<ul>
<li>Bubbles: Yes</li>
<li>Cancelable: No</li>
<li>Context Info: propertyName, elapsedTime, pseudoElement</li>
<li>Context Info: propertyName, elapsedTime, pseudoElement, pseudoTarget</li>
</ul>

<wpt>
Expand Down