Bug 1073396 - Make Element.getAnimationPlayers flush style; r=dbaron

content/base/src/Element.cpp

@@ -2939,6 +2939,11 @@ Element::MozRequestPointerLock()
 void
 Element::GetAnimationPlayers(nsTArray<nsRefPtr<AnimationPlayer> >& aPlayers)
 {
+  nsIDocument* doc = GetComposedDoc();
+  if (doc) {
+    doc->FlushPendingNotifications(Flush_Style);
+  }
+
   nsIAtom* properties[] = { nsGkAtoms::transitionsProperty,
                             nsGkAtoms::animationsProperty };
   for (size_t propIdx = 0; propIdx < MOZ_ARRAY_LENGTH(properties);

dom/animation/test/chrome/test_running_on_compositor.html

@@ -42,7 +42,6 @@ var omtaEnabled = SpecialPowers.DOMWindowUtils.layerManagerRemote &&
 // FIXME: When we implement Element.animate, use that here instead of CSS
 // so that we remove any dependency on the CSS mapping.
 div.style.animation = 'anim 100s';
-window.getComputedStyle(div).animationName;
 var player = div.getAnimationPlayers()[0];
 
 // Wait so that animation can be set up.

dom/animation/test/css-integration/test_animation-effect-name.html

@@ -20,8 +20,6 @@ function addDiv() {
 test(function() {
   var div = addDiv();
   div.style.animation = 'xyz 100s';
-  window.getComputedStyle(div).animationName;
-
   assert_equals(div.getAnimationPlayers()[0].source.effect.name, 'xyz',
                 'Animation effect name matches keyframes rule name');
   div.remove();
@@ -30,8 +28,6 @@ test(function() {
 test(function() {
   var div = addDiv();
   div.style.animation = 'x\\yz 100s';
-  dump(window.getComputedStyle(div).animationName + "\n");
-
   assert_equals(div.getAnimationPlayers()[0].source.effect.name, 'xyz',
                 'Escaped animation effect name matches keyframes rule name');
   div.remove();
@@ -40,8 +36,6 @@ test(function() {
 test(function() {
   var div = addDiv();
   div.style.animation = 'x\\79 z 100s';
-  window.getComputedStyle(div).animationName;
-
   assert_equals(div.getAnimationPlayers()[0].source.effect.name, 'xyz',
                 'Hex-escaped animation effect name matches keyframes rule'
                 + ' name');
@@ -56,7 +50,6 @@ test(function() {
   window.getComputedStyle(div).transitionProperty;
   div.style.transition = 'all 100s';
   div.style.left = '100px';
-  window.getComputedStyle(div).left;
 
   assert_equals(div.getAnimationPlayers()[0].source.effect.name, '',
                 'Animation effects for transitions have an empty name');

dom/animation/test/css-integration/test_animations-dynamic-changes.html

@@ -21,7 +21,6 @@ function addDiv() {
 async_test(function(t) {
   var div = addDiv();
   div.style.animation = 'anim1 100s';
-  window.getComputedStyle(div).animationName;
 
   var originalPlayer = div.getAnimationPlayers()[0];
   var originalStartTime = originalPlayer.startTime;
@@ -31,7 +30,6 @@ async_test(function(t) {
   // simply reflect the current time).
   window.requestAnimationFrame(t.step_func(function() {
     div.style.animationDuration = '200s';
-    window.getComputedStyle(div).animationDuration;
     var player = div.getAnimationPlayers()[0];
     assert_equals(player, originalPlayer,
                   'The same AnimationPlayer is returned after updating'
@@ -51,7 +49,6 @@ async_test(function(t) {
 test(function() {
   var div = addDiv();
   div.style.animation = 'anim1 100s, anim1 100s';
-  window.getComputedStyle(div).animationName;
 
   // Store original state
   var players = div.getAnimationPlayers();
@@ -60,7 +57,6 @@ test(function() {
 
   // Update first in list
   div.style.animationDuration = '200s, 100s';
-  window.getComputedStyle(div).animationDuration;
   players = div.getAnimationPlayers();
   assert_equals(players[0], player1,
                 'First player is in same position after update');
@@ -71,7 +67,6 @@ test(function() {
 async_test(function(t) {
   var div = addDiv();
   div.style.animation = 'anim1 200s, anim1 100s';
-  window.getComputedStyle(div).animationName;
 
   // Store original state
   var players = div.getAnimationPlayers();
@@ -83,7 +78,6 @@ async_test(function(t) {
     // Swap duration of first and second in list and prepend animation at the
     // same time
     div.style.animation = 'anim1 100s, anim1 100s, anim1 200s';
-    window.getComputedStyle(div).animationName;
     players = div.getAnimationPlayers();
     assert_true(players[0] !== player1 && players[0] !== player2,
                 'New player is prepended to start of list');
@@ -103,15 +97,12 @@ async_test(function(t) {
 async_test(function(t) {
   var div = addDiv();
   div.style.animation = 'anim1 100s, anim1 100s';
-  window.getComputedStyle(div).animationName;
-
   var secondPlayer = div.getAnimationPlayers()[1];
 
   // Wait before continuing so we can compare start times
   window.requestAnimationFrame(t.step_func(function() {
     // Trim list of animations
     div.style.animationName = 'anim1';
-    window.getComputedStyle(div).animationName;
     var players = div.getAnimationPlayers();
     assert_equals(players.length, 1, 'List of players was trimmed');
     assert_equals(players[0], secondPlayer,
@@ -127,19 +118,16 @@ async_test(function(t) {
 async_test(function(t) {
   var div = addDiv();
   div.style.animation = 'anim1 100s';
-  window.getComputedStyle(div).animationName;
   var firstAddedPlayer = div.getAnimationPlayers()[0];
 
   // Wait and add second player
   window.requestAnimationFrame(t.step_func(function() {
     div.style.animation = 'anim1 100s, anim1 100s';
-    window.getComputedStyle(div).animationName;
     var secondAddedPlayer = div.getAnimationPlayers()[0];
 
     // Wait again and add another player
     window.requestAnimationFrame(t.step_func(function() {
       div.style.animation = 'anim1 100s, anim2 100s, anim1 100s';
-      window.getComputedStyle(div).animationName;
       var players = div.getAnimationPlayers();
       assert_not_equals(firstAddedPlayer, secondAddedPlayer,
                         'New players are added to start of the list');

dom/animation/test/css-integration/test_element-get-animation-players.html

@@ -37,7 +37,6 @@ async_test(function(t) {
 
   // Add an animation
   div.style.animation = 'anim1 100s';
-  window.getComputedStyle(div).animationName;
   var players = div.getAnimationPlayers();
   assert_equals(players.length, 1,
     'getAnimationPlayers returns a player running CSS Animations');
@@ -51,7 +50,6 @@ async_test(function(t) {
   // the animations differ.
   window.requestAnimationFrame(t.step_func(function() {
     div.style.animation = 'anim1 100s, anim2 100s';
-    window.getComputedStyle(div).animationName;
     players = div.getAnimationPlayers();
     assert_equals(players.length, 2,
       'getAnimationPlayers returns one player for each value of'
@@ -69,7 +67,6 @@ test(function() {
 
   // Add an animation that targets multiple properties
   div.style.animation = 'multiPropAnim 100s';
-  window.getComputedStyle(div).animationName;
   assert_equals(div.getAnimationPlayers().length, 1,
     'getAnimationPlayers returns only one player for a CSS Animation'
     + ' that targets multiple properties');
@@ -83,10 +80,10 @@ async_test(function(t) {
   div.style.left = '0px';
   div.style.top = '0px';
   window.getComputedStyle(div).transitionProperty;
+
   div.style.transition = 'all 100s';
   div.style.left = '100px';
   div.style.top = '100px';
-  window.getComputedStyle(div).left;
 
   var players = div.getAnimationPlayers();
   assert_equals(players.length, 2,
@@ -100,7 +97,6 @@ async_test(function(t) {
   // Wait a moment then add a third transition
   window.requestAnimationFrame(t.step_func(function() {
     div.style.backgroundColor = 'green';
-    window.getComputedStyle(div).backgroundColor;
     players = div.getAnimationPlayers();
     assert_equals(players.length, 3,
       'getAnimationPlayers returns players for all running CSS Transitions');
@@ -124,7 +120,6 @@ async_test(function(t) {
   window.requestAnimationFrame(t.step_func(function() {
     div.style.transition = 'all 100s';
     div.style.backgroundColor = 'green';
-    window.getComputedStyle(div).backgroundColor;
 
     var players = div.getAnimationPlayers();
     assert_equals(players.length, 2,
@@ -152,7 +147,6 @@ async_test(function(t) {
 
   // Add a very short animation
   div.style.animation = 'anim1 0.01s';
-  window.getComputedStyle(div).animationName;
 }, 'getAnimationPlayers for CSS Animations that have finished');
 
 async_test(function(t) {
@@ -169,6 +163,7 @@ async_test(function(t) {
   // Add a very short transition
   div.style.left = '0px';
   window.getComputedStyle(div).left;
+
   div.style.transition = 'all 0.01s';
   div.style.left = '100px';
   window.getComputedStyle(div).left;
@@ -177,7 +172,6 @@ async_test(function(t) {
 test(function() {
   var div = addDiv();
   div.style.animation = 'none 100s';
-  window.getComputedStyle(div).animationName;
 
   var players = div.getAnimationPlayers();
   assert_equals(players.length, 0,
@@ -185,7 +179,6 @@ test(function() {
     + ' with animation-name: none');
 
   div.style.animation = 'none 100s, anim1 100s';
-  window.getComputedStyle(div).animationName;
   players = div.getAnimationPlayers();
   assert_equals(players.length, 1,
     'getAnimationPlayers returns players only for those CSS Animations whose'
@@ -197,15 +190,12 @@ test(function() {
 test(function() {
   var div = addDiv();
   div.style.animation = 'missing 100s';
-  window.getComputedStyle(div).animationName;
-
   var players = div.getAnimationPlayers();
   assert_equals(players.length, 0,
     'getAnimationPlayers returns an empty sequence for an element'
     + ' with animation-name: missing');
 
   div.style.animation = 'anim1 100s, missing 100s';
-  window.getComputedStyle(div).animationName;
   players = div.getAnimationPlayers();
   assert_equals(players.length, 1,
     'getAnimationPlayers returns players only for those CSS Animations whose'
@@ -217,8 +207,6 @@ test(function() {
 async_test(function(t) {
   var div = addDiv();
   div.style.animation = 'anim1 100s, notyet 100s';
-  window.getComputedStyle(div).animationName;
-
   var players = div.getAnimationPlayers();
   assert_equals(players.length, 1,
     'getAnimationPlayers initally only returns players for CSS Animations whose'
@@ -227,8 +215,6 @@ async_test(function(t) {
   window.requestAnimationFrame(t.step_func(function() {
     var keyframes = '@keyframes notyet { to { left: 100px; } }';
     document.styleSheets[0].insertRule(keyframes, 0);
-    window.getComputedStyle(div).animationName;
-
     players = div.getAnimationPlayers();
     assert_equals(players.length, 2,
       'getAnimationPlayers includes player when @keyframes rule is added'
@@ -245,8 +231,6 @@ async_test(function(t) {
 test(function() {
   var div = addDiv();
   div.style.animation = 'anim1 100s, anim1 100s';
-  window.getComputedStyle(div).animationName;
-
   assert_equals(div.getAnimationPlayers().length, 2,
     'getAnimationPlayers returns one player for each CSS animation-name'
     + ' even if the names are duplicated');
@@ -256,8 +240,6 @@ test(function() {
 test(function() {
   var div = addDiv();
   div.style.animation = 'empty 100s';
-  window.getComputedStyle(div).animationName;
-
   assert_equals(div.getAnimationPlayers().length, 1,
     'getAnimationPlayers returns players for CSS animations with an'
     + ' empty keyframes rule');
@@ -267,8 +249,6 @@ test(function() {
 test(function() {
   var div = addDiv();
   div.style.animation = 'anim1 100s 100s';
-  window.getComputedStyle(div).animationName;
-
   var players = div.getAnimationPlayers();
   assert_equals(players.length, 1,
     'getAnimationPlayers returns animations for CSS animations whose'
@@ -282,8 +262,6 @@ test(function() {
 test(function() {
   var div = addDiv();
   div.style.animation = 'anim1 0s 100s';
-  window.getComputedStyle(div).animationName;
-
   assert_equals(div.getAnimationPlayers().length, 1,
     'getAnimationPlayers returns animations for CSS animations whose'
     + ' duration is zero');
@@ -296,9 +274,9 @@ test(function() {
   // Try to transition non-animatable property animation-duration
   div.style.animationDuration = '10s';
   window.getComputedStyle(div).animationDuration;
+
   div.style.transition = 'all 100s';
   div.style.animationDuration = '100s';
-  window.getComputedStyle(div).left;
 
   assert_equals(div.getAnimationPlayers().length, 0,
     'getAnimationPlayers returns an empty sequence for a transition'
@@ -313,7 +291,6 @@ test(function() {
   window.getComputedStyle(div).transitionProperty;
   div.style.transition = 'all 100s';
   div.style.setProperty('-vendor-unsupported', '100px', '');
-  window.getComputedStyle(div).getPropertyValue('-vendor-unsupported');
 
   assert_equals(div.getAnimationPlayers().length, 0,
     'getAnimationPlayers returns an empty sequence for a transition'
@@ -324,13 +301,10 @@ test(function() {
 test(function() {
   var div = addDiv();
   div.style.animation = 'anim1 100s';
-  window.getComputedStyle(div).animationName;
-
   var originalPlayer = div.getAnimationPlayers()[0];
 
   // Update pause state (an AnimationPlayer change)
   div.style.animationPlayState = 'paused';
-  window.getComputedStyle(div).animationPlayState;
   var pausedPlayer = div.getAnimationPlayers()[0];
   // FIXME: Check pausedPlayer.playState has changed once the API is available
   // (bug 1037321)
@@ -340,7 +314,6 @@ test(function() {
 
   // Update duration (an Animation change)
   div.style.animationDuration = '200s';
-  window.getComputedStyle(div).animationDuration
   var extendedPlayer = div.getAnimationPlayers()[0];
   // FIXME: Check extendedPlayer.source.timing.duration has changed once the
   // API is available