Skip to content

Commit e1c3116

Browse files
dbarondbaron
committed
Add a pseudoElement attribute to transition events for the pseudo-element on which the transition happened.
This is as raised in http://lists.w3.org/Archives/Public/www-style/2012Feb/1083.html and resolved in the 2012 March 7 teleconference (minutes at http://lists.w3.org/Archives/Public/www-style/2012Mar/0195.html ). We probably still need to discuss the naming, and also whether there are any compatibility problems resulting from adding an argument to initTransitionEvent.
1 parent 2db569f commit e1c3116

2 files changed

Lines changed: 66 additions & 6 deletions

File tree

‎css3-transitions/Overview.html‎

Lines changed: 35 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -991,11 +991,13 @@ <h2 id=transition-events-><span class=secno>5. </span> Transition Events</h2>
991991
interface TransitionEvent : Event {
992992
readonly attribute DOMString propertyName;
993993
readonly attribute float elapsedTime;
994+
readonly attribute DOMString pseudoElement;
994995
void initTransitionEvent(in DOMString typeArg,
995996
in boolean canBubbleArg,
996997
in boolean cancelableArg,
997998
in DOMString propertyNameArg,
998-
in float elapsedTimeArg);
999+
in float elapsedTimeArg,
1000+
in DOMString pseudoElementArg);
9991001
};
10001002
</pre>
10011003
</div>
@@ -1024,6 +1026,20 @@ <h2 id=transition-events-><span class=secno>5. </span> Transition Events</h2>
10241026
class=property>transition-delay</code></a>.
10251027
</dl>
10261028

1029+
<dl>
1030+
<dt> <code class=attribute-name><a
1031+
id=Events-TransitionEvent-pseudoElement
1032+
name=Events-TransitionEvent-pseudoElement>pseudoElement</a></code> of
1033+
type <code>DOMString</code>, readonly
1034+
1035+
<dd> The name (beginning with two colons) of the CSS pseudo-element on
1036+
which the transition occured (in which case the target of the event
1037+
is that pseudo-element's corresponding element), or the empty string
1038+
if the transition occurred on an element (which means the target of
1039+
the event is that element). <span class=issue>The working group has
1040+
not yet discussed the name of this property.</span>
1041+
</dl>
1042+
10271043
<dt> <b>Methods</b>
10281044

10291045
<dd>
@@ -1067,14 +1083,29 @@ <h2 id=transition-events-><span class=secno>5. </span> Transition Events</h2>
10671083
<code>DOMString</code>
10681084

10691085
<dd> Specifies the name of the property associated with the <a
1070-
href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event"><code>Event</code></a>
1071-
1086+
href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event"><code>Event</code></a>.
1087+
(See the <a
1088+
href="#Events-TransitionEvent-propertyName">propertyName</a>
1089+
attribute.)
10721090

10731091
<dt> <code class=parameter-name>elapsedTimeArg</code> of type
10741092
<code>float</code>
10751093

10761094
<dd> Specifies the amount of time, in seconds, the transition has
1077-
been running at the time of initialization.
1095+
been running at the time of initialization. (See the <a
1096+
href="#Events-TransitionEvent-elapsedTime">elapsedTime</a>
1097+
attribute.)
1098+
1099+
<dt> <code class=parameter-name>pseudoElementArg</code> of type
1100+
<code>DOMString</code>
1101+
1102+
<dd> Specifies the pseudo-element on which the transition
1103+
occurred. (See the <a
1104+
href="#Events-TransitionEvent-pseudoElement">pseudoElement</a>
1105+
attribute.) <span class=issue>The working group has not yet
1106+
discussed the name of this argument.</span> <span
1107+
class=issue>Does adding this additional argument create any
1108+
compatibility problems?</span>
10781109
</dl>
10791110
</div>
10801111
</div>

‎css3-transitions/Overview.src.html‎

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -956,11 +956,13 @@ <h2>
956956
interface TransitionEvent : Event {
957957
readonly attribute DOMString propertyName;
958958
readonly attribute float elapsedTime;
959+
readonly attribute DOMString pseudoElement;
959960
void initTransitionEvent(in DOMString typeArg,
960961
in boolean canBubbleArg,
961962
in boolean cancelableArg,
962963
in DOMString propertyNameArg,
963-
in float elapsedTimeArg);
964+
in float elapsedTimeArg,
965+
in DOMString pseudoElementArg);
964966
};
965967
</pre>
966968
</div>
@@ -985,6 +987,21 @@ <h2>
985987
The amount of time the transition has been running, in seconds, when this event fired. Note that this value is not affected by the value of <code class="property">transition-delay</code>.
986988
</dd>
987989
</dl>
990+
<dl>
991+
<dt>
992+
<code class='attribute-name'><a id="Events-TransitionEvent-pseudoElement" name='Events-TransitionEvent-pseudoElement'>pseudoElement</a></code> of type <code>DOMString</code>, readonly
993+
</dt>
994+
<dd>
995+
The name (beginning with two colons) of the CSS
996+
pseudo-element on which the transition occured (in
997+
which case the target of the event is that
998+
pseudo-element's corresponding element), or the empty
999+
string if the transition occurred on an element (which
1000+
means the target of the event is that element).
1001+
<span class="issue">The working group has not yet
1002+
discussed the name of this property.</span>
1003+
</dd>
1004+
</dl>
9881005
</dd>
9891006
<dt>
9901007
<b>Methods</b>
@@ -1032,13 +1049,25 @@ <h2>
10321049
<code class='parameter-name'>propertyNameArg</code> of type <code>DOMString</code>
10331050
</dt>
10341051
<dd>
1035-
Specifies the name of the property associated with the <a href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event'><code>Event</code></a>
1052+
Specifies the name of the property associated with the <a href='http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event'><code>Event</code></a>.
1053+
(See the <a href="#Events-TransitionEvent-propertyName">propertyName</a> attribute.)
10361054
</dd>
10371055
<dt>
10381056
<code class='parameter-name'>elapsedTimeArg</code> of type <code>float</code>
10391057
</dt>
10401058
<dd>
10411059
Specifies the amount of time, in seconds, the transition has been running at the time of initialization.
1060+
(See the <a href="#Events-TransitionEvent-elapsedTime">elapsedTime</a> attribute.)
1061+
</dd>
1062+
<dt>
1063+
<code class='parameter-name'>pseudoElementArg</code> of type <code>DOMString</code>
1064+
</dt>
1065+
<dd>
1066+
Specifies the pseudo-element on which the
1067+
transition occurred.
1068+
(See the <a href="#Events-TransitionEvent-pseudoElement">pseudoElement</a> attribute.)
1069+
<span class="issue">The working group has not yet discussed the name of this argument.</span>
1070+
<span class="issue">Does adding this additional argument create any compatibility problems?</span>
10421071
</dd>
10431072
</dl>
10441073
</div>

0 commit comments

Comments
 (0)