Skip to content

Commit d0fa0af

Browse files
authored
[css-animations-2] Document attributes of web animations can require pending style changes (w3c#4823)
* Note that attributes of web animations can require pending style. css-animations-2 makes clear that returning web-animations objects may require pending style changes but we also test that reading animation state also requires pending style flushing. For example: https://github.com/web-platform-tests/wpt/blob/master/css/css-animations/CSSAnimation-playState.tentative.html#L43
1 parent 8571be6 commit d0fa0af

File tree

1 file changed

+13
-3
lines changed

1 file changed

+13
-3
lines changed

css-animations-2/Overview.bs

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -599,9 +599,9 @@ properties on elements. User agents may, as an optimization, defer recomputing
599599
these values until it becomes necessary.
600600
However, all operations included in programming interface defined in this
601601
specification, as well as those operations defined in Web Animations
602-
[[!WEB-ANIMATIONS]] that may return objects defined by this specification,
603-
must produce a result consistent with having fully processed any such pending
604-
changes to computed values.
602+
[[!WEB-ANIMATIONS]] that may return objects or animation state defined by this
603+
specification, must produce a result consistent with having fully processed
604+
any such pending changes to computed values.
605605
606606
<div class="note">
607607
As an example, in the following code fragment, when the specified style of
@@ -620,6 +620,16 @@ elem.style.animation = 'fadeOut 1s';
620620
elem.getAnimations()[0].pause();
621621
</pre></div>
622622
623+
Similarly, reading {{Animation/playState}} may depend on pending style
624+
changes.
625+
626+
<div><pre class="example lang-javascript">
627+
elem.style.animation = 'fadeOut 1s paused';
628+
const anim = elem.getAnimations()[0];
629+
elem.style.animationPlayState = 'running';
630+
console.log(anim.playState); // Should be 'running'.
631+
</pre></div>
632+
623633
</div>
624634
625635

0 commit comments

Comments
 (0)