--- a/dom/animation/test/chrome/test_running_on_compositor.html
+++ b/dom/animation/test/chrome/test_running_on_compositor.html
@@ -13,26 +13,16 @@
 @keyframes transform-starts-with-none {
     0% { transform: none }
    99% { transform: none }
   100% { transform: translate(100px) }
 }
 @keyframes opacity {
   to { opacity: 0 }
 }
-@keyframes background_and_translate {
-  to { background-color: red; transform: translate(100px); }
-}
-@keyframes background {
-  to { background-color: red; }
-}
-@keyframes rotate {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
 @keyframes rotate-and-opacity {
   from { transform: rotate(0deg); opacity: 1;}
   to { transform: rotate(360deg); opacity: 0;}
 }
 div {
   /* Element needs geometry to be eligible for layerization */
   width: 100px;
   height: 100px;
@@ -58,95 +48,101 @@ function assert_animation_is_running_on_
 }
 
 function assert_animation_is_not_running_on_compositor(animation, desc) {
   assert_equals(animation.isRunningOnCompositor, false,
                 desc + ' at ' + animation.currentTime + 'ms');
 }
 
 promise_test(function(t) {
-  // FIXME: When we implement Element.animate, use that here instead of CSS
-  // so that we remove any dependency on the CSS mapping.
-  var div = addDiv(t, { style: 'animation: anim 100s' });
-  var animation = div.getAnimations()[0];
+  var animation =
+    addDiv(t).animate([ { transform: "translate(0px)" },
+                        { transform: "translate(100px)" } ], 100000);
 
   return animation.ready.then(function() {
     assert_animation_is_running_on_compositor(animation,
        'Animation reports that it is running on the compositor'
        + ' during playback');
 
-    div.style.animationPlayState = 'paused';
+    animation.pause();
 
     return animation.ready;
   }).then(function() {
     assert_animation_is_not_running_on_compositor(animation,
        'Animation reports that it is NOT running on the compositor'
        + ' when paused');
   });
-}, '');
+}, 'isRunningOnCompositor, is false after pausing the animation');
 
 promise_test(function(t) {
-  var div = addDiv(t, { style: 'animation: background 100s' });
-  var animation = div.getAnimations()[0];
+  var animation =
+    addDiv(t).animate([ { backgroundColor: "blue" },
+                        { backgroundColor: "red" } ], 100000);
 
   return animation.ready.then(function() {
     assert_animation_is_not_running_on_compositor(animation,
        'Animation reports that it is NOT running on the compositor'
        + ' for animation of "background"');
   });
 }, 'isRunningOnCompositor is false for animation of "background"');
 
 promise_test(function(t) {
-  var div = addDiv(t, { style: 'animation: background_and_translate 100s' });
-  var animation = div.getAnimations()[0];
+  var animation =
+    addDiv(t).animate(
+      [ { backgroundColor: "blue", transform: "translate(0px)" },
+        { backgroundColor: "red", transform: "translate(100px)" } ],
+      100000);
 
   return animation.ready.then(function() {
     assert_animation_is_running_on_compositor(animation,
        'Animation reports that it is running on the compositor'
         + ' when the animation has two properties, where one can run'
         + ' on the compositor, the other cannot');
   });
 }, 'isRunningOnCompositor is true if the animation has at least one ' +
    'property can run on compositor');
 
 promise_test(function(t) {
-  var div = addDiv(t, { style: 'animation: anim 100s' });
-  var animation = div.getAnimations()[0];
+  var animation =
+    addDiv(t).animate([ { transform: "translate(0px)" },
+                        { transform: "translate(100px)" } ], 100000);
 
   return animation.ready.then(function() {
     animation.pause();
     return animation.ready;
   }).then(function() {
     assert_animation_is_not_running_on_compositor(animation,
        'Animation reports that it is NOT running on the compositor'
        + ' when animation.pause() is called');
   });
 }, 'isRunningOnCompositor is false when the animation.pause() is called');
 
 promise_test(function(t) {
-  var div = addDiv(t, { style: 'animation: anim 100s' });
-  var animation = div.getAnimations()[0];
+  var animation =
+    addDiv(t).animate([ { transform: "translate(0px)" },
+                        { transform: "translate(100px)" } ], 100000);
 
   return animation.ready.then(function() {
     animation.finish();
     assert_animation_is_not_running_on_compositor(animation,
        'Animation reports that it is NOT running on the compositor'
        + ' immediately after animation.finish() is called');
     // Check that we don't set the flag back again on the next tick.
     return waitForFrame();
   }).then(function() {
     assert_animation_is_not_running_on_compositor(animation,
        'Animation reports that it is NOT running on the compositor'
        + ' on the next tick after animation.finish() is called');
   });
 }, 'isRunningOnCompositor is false when the animation.finish() is called');
 
 promise_test(function(t) {
-  var div = addDiv(t, { style: 'animation: anim 100s' });
-  var animation = div.getAnimations()[0];
+  var animation =
+    addDiv(t).animate([ { transform: "translate(0px)" },
+                        { transform: "translate(100px)" } ], 100000);
 
   return animation.ready.then(function() {
     animation.currentTime = 100 * MS_PER_SEC;
     assert_animation_is_not_running_on_compositor(animation,
        'Animation reports that it is NOT running on the compositor'
        + ' immediately after manually seeking the animation to the end');
     // Check that we don't set the flag back again on the next tick.
     return waitForFrame();
@@ -154,18 +150,19 @@ promise_test(function(t) {
     assert_animation_is_not_running_on_compositor(animation,
        'Animation reports that it is NOT running on the compositor'
        + ' on the next tick after manually seeking the animation to the end');
   });
 }, 'isRunningOnCompositor is false when manually seeking the animation to ' +
    'the end');
 
 promise_test(function(t) {
-  var div = addDiv(t, { style: 'animation: anim 100s' });
-  var animation = div.getAnimations()[0];
+  var animation =
+    addDiv(t).animate([ { transform: "translate(0px)" },
+                        { transform: "translate(100px)" } ], 100000);
 
   return animation.ready.then(function() {
     animation.cancel();
     assert_animation_is_not_running_on_compositor(animation,
        'Animation reports that it is NOT running on the compositor'
        + ' immediately after animation.cancel() is called');
     // Check that we don't set the flag back again on the next tick.
     return waitForFrame();
@@ -174,18 +171,19 @@ promise_test(function(t) {
        'Animation reports that it is NOT running on the compositor'
        + ' on the next tick after animation.cancel() is called');
   });
 }, 'isRunningOnCompositor is false when animation.cancel() is called');
 
 // This is to test that we don't simply clobber the flag when ticking
 // animations and then set it again during painting.
 promise_test(function(t) {
-  var div = addDiv(t, { style: 'animation: anim 100s' });
-  var animation = div.getAnimations()[0];
+  var animation =
+    addDiv(t).animate([ { transform: "translate(0px)" },
+                        { transform: "translate(100px)" } ], 100000);
 
   return animation.ready.then(function() {
     return new Promise(function(resolve) {
       window.requestAnimationFrame(function() {
         t.step(function() {
           assert_animation_is_running_on_compositor(animation,
             'Animation reports that it is running on the compositor'
              + ' in requestAnimationFrame callback');
@@ -193,18 +191,19 @@ promise_test(function(t) {
 
         resolve();
       });
     });
   });
 }, 'isRunningOnCompositor is true in requestAnimationFrame callback');
 
 promise_test(function(t) {
-  var div = addDiv(t, { style: 'animation: anim 100s' });
-  var animation = div.getAnimations()[0];
+  var div = addDiv(t);
+  var animation = div.animate([ { transform: "translate(0px)" },
+                                { transform: "translate(100px)" } ], 100000);
 
   return animation.ready.then(function() {
     return new Promise(function(resolve) {
       var observer = new MutationObserver(function(records) {
         var changedAnimation;
 
         records.forEach(function(record) {
           changedAnimation =
@@ -223,29 +222,31 @@ promise_test(function(t) {
         });
 
         resolve();
       });
       observer.observe(div, { animations: true, subtree: false });
       t.add_cleanup(function() {
         observer.disconnect();
       });
-      div.style.animationDuration = "200s";
+      animation.effect.timing.duration = 200000;
     });
   });
 }, 'isRunningOnCompositor is true in MutationObserver callback');
 
 // This is to test that we don't temporarily clear the flag when forcing
 // an unthrottled sample.
 promise_test(function(t) {
   // Needs scrollbars to cause overflow.
   return SpecialPowers.pushPrefEnv({ set: [["ui.showHideScrollbars", 1]] })
   .then(function() {
-    var div = addDiv(t, { style: 'animation: rotate 100s' });
-    var animation = div.getAnimations()[0];
+
+    var animation =
+      addDiv(t).animate([ { transform: "rotate(0deg)" },
+                          { transform: "rotate(360deg)" } ], 100000);
 
     return animation.ready.then(function() {
       return new Promise(function(resolve) {
         var timeAtStart = window.performance.now();
         function handleFrame() {
           t.step(function() {
             assert_animation_is_running_on_compositor(animation,
               'Animation reports that it is running on the compositor'
@@ -279,20 +280,22 @@ promise_test(function(t) {
   return animation.ready.then(function() {
     assert_animation_is_running_on_compositor(animation,
        'Transition reports that it is running on the compositor'
        + ' during playback for opacity transition');
   });
 }, 'isRunningOnCompositor for transitions');
 
 promise_test(function(t) {
-  var div = addDiv(t, { style: 'animation: rotate-and-opacity 100s; ' +
-                               'backface-visibility: hidden; ' +
+  var div = addDiv(t, { style: 'backface-visibility: hidden; ' +
                                'transform: none !important;' });
-  var animation = div.getAnimations()[0];
+  var animation =
+    div.animate([ { transform: "rotate(0deg)", opacity: 1 },
+                  { transform: "rotate(360deg)", opacity: 0 } ],
+                100000);
 
   return animation.ready.then(function() {
     assert_animation_is_running_on_compositor(animation,
        'If an animation has a property that can run on the compositor and a '
        + 'property that cannot (due to Gecko limitations) but where the latter'
        + 'property is overridden in the CSS cascade, the animation should '
        + 'still report that it is running on the compositor');
   });