--- a/dom/animation/test/css-animations/test_animation-cancel.html
+++ b/dom/animation/test/css-animations/test_animation-cancel.html
@@ -22,96 +22,96 @@
 
 promise_test(async t => {
   const div = addDiv(t, { style: 'animation: translateAnim 100s' });
   const animation = div.getAnimations()[0];
 
   await animation.ready;
 
   assert_not_equals(getComputedStyle(div).transform, 'none',
-                    'transform style is animated before cancelling');
+                    'transform style is animated before canceling');
   animation.cancel();
   assert_equals(getComputedStyle(div).transform, 'none',
-                'transform style is no longer animated after cancelling');
-}, 'Animated style is cleared after cancelling a running CSS animation');
+                'transform style is no longer animated after canceling');
+}, 'Animated style is cleared after canceling a running CSS animation');
 
 promise_test(async t => {
   const div = addDiv(t, { style: 'animation: translateAnim 100s forwards' });
   const animation = div.getAnimations()[0];
   animation.finish();
 
   await animation.ready;
 
   assert_not_equals(getComputedStyle(div).transform, 'none',
-                    'transform style is filling before cancelling');
+                    'transform style is filling before canceling');
   animation.cancel();
   assert_equals(getComputedStyle(div).transform, 'none',
-                'fill style is cleared after cancelling');
-}, 'Animated style is cleared after cancelling a filling CSS animation');
+                'fill style is cleared after canceling');
+}, 'Animated style is cleared after canceling a filling CSS animation');
 
 test(t => {
   const div = addDiv(t, { style: 'animation: marginLeftAnim 100s linear' });
   const animation = div.getAnimations()[0];
   animation.cancel();
 
   assert_equals(getComputedStyle(div).marginLeft, '0px',
-                'margin-left style is not animated after cancelling');
+                'margin-left style is not animated after canceling');
 
   animation.currentTime = 50 * 1000;
   assert_equals(getComputedStyle(div).marginLeft, '50px',
-                'margin-left style is updated when cancelled animation is'
+                'margin-left style is updated when canceled animation is'
                 + ' seeked');
 }, 'After canceling an animation, it can still be seeked');
 
 promise_test(async t => {
   const div =
     addDiv(t, { style: 'animation: marginLeftAnim100To200 100s linear' });
   const animation = div.getAnimations()[0];
 
   await animation.ready;
 
   animation.cancel();
   assert_equals(getComputedStyle(div).marginLeft, '0px',
-                'margin-left style is not animated after cancelling');
+                'margin-left style is not animated after canceling');
   animation.play();
   assert_equals(getComputedStyle(div).marginLeft, '100px',
                 'margin-left style is animated after re-starting animation');
 
   await animation.ready;
 
   assert_equals(animation.playState, 'running',
                 'Animation succeeds in running after being re-started');
-}, 'After cancelling an animation, it can still be re-used');
+}, 'After canceling an animation, it can still be re-used');
 
 test(t => {
   const div =
     addDiv(t, { style: 'animation: marginLeftAnim100To200 100s linear' });
   const animation = div.getAnimations()[0];
   animation.cancel();
   assert_equals(getComputedStyle(div).marginLeft, '0px',
-                'margin-left style is not animated after cancelling');
+                'margin-left style is not animated after canceling');
 
   // Trigger a change to some animation properties and check that this
   // doesn't cause the animation to become live again
   div.style.animationDuration = '200s';
   assert_equals(getComputedStyle(div).marginLeft, '0px',
                 'margin-left style is still not animated after updating'
                 + ' animation-duration');
   assert_equals(animation.playState, 'idle',
                 'Animation is still idle after updating animation-duration');
-}, 'After cancelling an animation, updating animation properties doesn\'t make'
+}, 'After canceling an animation, updating animation properties doesn\'t make'
    + ' it live again');
 
 test(t => {
   const div =
     addDiv(t, { style: 'animation: marginLeftAnim100To200 100s linear' });
   const animation = div.getAnimations()[0];
   animation.cancel();
   assert_equals(getComputedStyle(div).marginLeft, '0px',
-                'margin-left style is not animated after cancelling');
+                'margin-left style is not animated after canceling');
 
   // Make some changes to animation-play-state and check that the
   // animation doesn't become live again. This is because it should be
   // possible to cancel an animation from script such that all future
   // changes to style are ignored.
 
   // Redundant change
   div.style.animationPlayState = 'running';
@@ -126,17 +126,17 @@ test(t => {
                 + ' animation-play-state: paused');
 
   // Play
   div.style.animationPlayState = 'running';
   assert_equals(animation.playState, 'idle',
                 'Animation is still idle after re-setting'
                 + ' animation-play-state: running');
 
-}, 'After cancelling an animation, updating animation-play-state doesn\'t'
+}, 'After canceling an animation, updating animation-play-state doesn\'t'
    + ' make it live again');
 
 promise_test(async t => {
   const div = addDiv(t, { style: 'animation: translateAnim 10s both' });
   div.style.marginLeft = '0px';
 
   const animation = div.getAnimations()[0];
 

--- a/dom/animation/test/css-animations/test_animation-currenttime.html
+++ b/dom/animation/test/css-animations/test_animation-currenttime.html
@@ -304,18 +304,18 @@ promise_test(async t => {
 
 test(t => {
   const div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s';
   const animation = div.getAnimations()[0];
   animation.cancel();
 
   assert_equals(animation.currentTime, null,
-                'The currentTime of a cancelled animation should be null');
-}, 'Animation.currentTime after cancelling');
+                'The currentTime of a canceled animation should be null');
+}, 'Animation.currentTime after canceling');
 
 promise_test(async t => {
   const div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s';
   const animation = div.getAnimations()[0];
   await animation.ready;
 
   animation.finish();

--- a/dom/animation/test/css-animations/test_animation-finished.html
+++ b/dom/animation/test/css-animations/test_animation-finished.html
@@ -33,17 +33,17 @@ promise_test(async t => {
     assert_unreached('Original finished promise should not be fulfilled');
   } catch (err) {
     assert_equals(err.name, 'AbortError',
                   'finished promise is rejected with AbortError');
     assert_not_equals(animation.finished, originalFinishedPromise,
                       'Finished promise should change after the original is ' +
                       'rejected');
   }
-}, 'finished promise is rejected when an animation is cancelled by resetting ' +
+}, 'finished promise is rejected when an animation is canceled by resetting ' +
    'the animation property');
 
 promise_test(async t => {
   const div = addDiv(t);
   // As before, but this time instead of removing all animations, simply update
   // the list of animations. At least for Firefox, updating is a different
   // code path.
 
@@ -61,17 +61,17 @@ promise_test(async t => {
     assert_unreached('Original finished promise should not be fulfilled');
   } catch (err) {
     assert_equals(err.name, 'AbortError',
                   'finished promise is rejected with AbortError');
     assert_not_equals(animation.finished, originalFinishedPromise,
                       'Finished promise should change after the original is ' +
                       'rejected');
   }
-}, 'finished promise is rejected when an animation is cancelled by changing ' +
+}, 'finished promise is rejected when an animation is canceled by changing ' +
    'the animation property');
 
 promise_test(async t => {
   const div = addDiv(t);
   div.style.animation = ANIM_PROP_VAL;
   const animation = div.getAnimations()[0];
   const originalFinishedPromise = animation.finished;
   animation.currentTime = ANIM_DURATION;

--- a/dom/animation/test/css-animations/test_animation-playstate.html
+++ b/dom/animation/test/css-animations/test_animation-playstate.html
@@ -50,12 +50,12 @@ test(t => {
 }, 'Animation.playState updates when resumed by setting style');
 
 test(t => {
   const div = addDiv(t);
   div.style.animation = 'anim 1000s';
   const animation = div.getAnimations()[0];
   animation.cancel();
   assert_equals(animation.playState, 'idle');
-}, 'Animation returns correct playState when cancelled');
+}, 'Animation returns correct playState when canceled');
 
 </script>
 </body>

--- a/dom/animation/test/css-animations/test_animation-ready.html
+++ b/dom/animation/test/css-animations/test_animation-ready.html
@@ -69,17 +69,17 @@ promise_test(async t => {
 
   try {
     await readyPromise;
     assert_unreached('ready promise is fulfilled');
   } catch(err) {
     assert_equals(err.name, 'AbortError',
                   'ready promise is rejected with AbortError');
   }
-}, 'ready promise is rejected when an animation is cancelled by updating'
+}, 'ready promise is rejected when an animation is canceled by updating'
    + ' the animation property');
 
 promise_test(async t => {
   const div = addDiv(t, { style: 'animation: abc 100s' });
   const animation = div.getAnimations()[0];
   const originalReadyPromise = animation.ready;
 
   await animation.ready;

--- a/dom/animation/test/css-animations/test_animation-starttime.html
+++ b/dom/animation/test/css-animations/test_animation-starttime.html
@@ -351,14 +351,14 @@ promise_test(async t => {
 promise_test(async t => {
   const div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s';
   const animation = div.getAnimations()[0];
   await animation.ready;
 
   animation.cancel();
   assert_equals(animation.startTime, null,
-                'The startTime of a cancelled animation should be null');
-}, 'Animation.startTime after cancelling');
+                'The startTime of a canceled animation should be null');
+}, 'Animation.startTime after canceling');
 
     </script>
   </body>
 </html>

--- a/dom/animation/test/css-animations/test_document-get-animations.html
+++ b/dom/animation/test/css-animations/test_document-get-animations.html
@@ -231,28 +231,28 @@ test(t => {
   assert_equals(document.getAnimations().length, 1,
                 'Yet-to-start CSS animations are returned');
 }, 'Yet-to-start CSS Animations are returned');
 
 test(t => {
   const div = addDiv(t, { style: 'animation: animLeft 100s' });
   div.getAnimations()[0].cancel();
   assert_equals(document.getAnimations().length, 0,
-                'CSS animations cancelled by the API are not returned');
-}, 'CSS Animations cancelled via the API are not returned');
+                'CSS animations canceled by the API are not returned');
+}, 'CSS Animations canceled via the API are not returned');
 
 test(t => {
   const div = addDiv(t, { style: 'animation: animLeft 100s' });
   const anim = div.getAnimations()[0];
   anim.cancel();
   anim.play();
   assert_equals(document.getAnimations().length, 1,
-                'CSS animations cancelled and restarted by the API are ' +
+                'CSS animations canceled and restarted by the API are ' +
                 'returned');
-}, 'CSS Animations cancelled and restarted via the API are returned');
+}, 'CSS Animations canceled and restarted via the API are returned');
 
 test(t => {
   addStyle(t, { '#parent::after': 'animation: animLeft 10s;',
                 '#parent::before': 'animation: animRight 10s;' });
   // create two divs with these arrangement:
   //       parent
   //     ::before,
   //     ::after

--- a/dom/animation/test/css-animations/test_element-get-animations.html
+++ b/dom/animation/test/css-animations/test_element-get-animations.html
@@ -262,29 +262,29 @@ test(t => {
                 + ' duration changes');
 }, 'getAnimations returns objects with the same identity');
 
 test(t => {
   const div = addDiv(t);
   div.style.animation = 'anim1 100s';
 
   assert_equals(div.getAnimations().length, 1,
-    'getAnimations returns an animation before cancelling');
+    'getAnimations returns an animation before canceling');
 
   const animation = div.getAnimations()[0];
 
   animation.cancel();
   assert_equals(div.getAnimations().length, 0,
-    'getAnimations does not return cancelled animations');
+    'getAnimations does not return canceled animations');
 
   animation.play();
   assert_equals(div.getAnimations().length, 1,
-    'getAnimations returns cancelled animations that have been re-started');
+    'getAnimations returns canceled animations that have been re-started');
 
-}, 'getAnimations for CSS Animations that are cancelled');
+}, 'getAnimations for CSS Animations that are canceled');
 
 promise_test(async t => {
   const div = addDiv(t);
   div.style.animation = 'anim2 100s';
 
   await div.getAnimations()[0].ready;
 
   // Prepend to the list and test that even though anim1 was triggered
@@ -300,19 +300,19 @@ promise_test(async t => {
   // Normally calling cancel and play would this push anim1 to the top of
   // the stack but it shouldn't for CSS animations that map an the
   // animation-name property.
   const anim1 = anims[0];
   anim1.cancel();
   anim1.play();
   anims = div.getAnimations();
   assert_equals(anims[0].animationName, 'anim1',
-                'animation order after cancelling and restarting');
+                'animation order after canceling and restarting');
   assert_equals(anims[1].animationName, 'anim2',
-                'animation order after cancelling and restarting');
+                'animation order after canceling and restarting');
 }, 'getAnimations for CSS Animations follows animation-name order');
 
 test(t => {
   addStyle(t, { '#target::after': 'animation: anim1 10s;',
                 '#target::before': 'animation: anim1 10s;' });
   const target = addDiv(t, { 'id': 'target' });
   target.style.animation = 'anim1 100s';
 

--- a/dom/animation/test/css-animations/test_event-dispatch.html
+++ b/dom/animation/test/css-animations/test_event-dispatch.html
@@ -296,28 +296,28 @@ promise_test(async t => {
 
   // Make idle
   animation.cancel();
   await watcher.wait_for('animationcancel');
 
   animation.cancel();
   // Then wait a couple of frames and check that no event was dispatched.
   await waitForAnimationFrames(2);
-}, 'Call Animation.cancel after cancelling animation.');
+}, 'Call Animation.cancel after canceling animation.');
 
 promise_test(async t => {
   const { animation, watcher } = setupAnimation(t, 'anim 100s');
 
   await watcher.wait_for('animationstart');
 
   // Make idle
   animation.cancel();
   animation.play();
   await watcher.wait_for([ 'animationcancel', 'animationstart' ]);
-}, 'Restart animation after cancelling animation immediately.');
+}, 'Restart animation after canceling animation immediately.');
 
 promise_test(async t => {
   const { animation, watcher } = setupAnimation(t, 'anim 100s');
 
   await watcher.wait_for('animationstart');
 
   // Make idle
   animation.cancel();
@@ -350,17 +350,17 @@ promise_test(async t => {
 
   // Make idle
   animation.cancel();
   await watcher.wait_for('animationcancel');
 
   animation.effect = null;
   // Then wait a couple of frames and check that no event was dispatched.
   await waitForAnimationFrames(2);
-}, 'Set null target effect after cancelling the animation.');
+}, 'Set null target effect after canceling the animation.');
 
 promise_test(async t => {
   const { animation, watcher } = setupAnimation(t, 'anim 100s');
 
   await watcher.wait_for('animationstart');
 
   animation.effect = null;
   await watcher.wait_for('animationend');