Bug 1417808 - Update test descriptions for iterationComposite.html and effect-value-iteration-composite-operation.html; r=hiro
authorBrian Birtles <birtles@gmail.com>
Thu, 16 Nov 2017 16:33:05 +0900
changeset 436820 6c94aebc18e10fd38c338a899cd17dfc074e311f
parent 436819 2ee866584bef217f783b63da504b75c5bbcc271b
child 436821 2e1e725dd5db81f70b13849990a3009eefb2f113
push id117
push userfmarier@mozilla.com
push dateTue, 28 Nov 2017 20:17:16 +0000
reviewershiro
bugs1417808
milestone59.0a1
Bug 1417808 - Update test descriptions for iterationComposite.html and effect-value-iteration-composite-operation.html; r=hiro These updated test descriptions should slightly better reflect the section of the spec they are testing. MozReview-Commit-ID: Dut5hUMZFog
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-iteration-composite-operation.html
testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -585817,17 +585817,17 @@
    "9c043a059c26a2c1449663d4fc881e8568a53206",
    "testharness"
   ],
   "web-animations/animation-model/keyframe-effects/effect-value-context.html": [
    "5d345744a6c60aac8498e8bee47e72715f22652a",
    "testharness"
   ],
   "web-animations/animation-model/keyframe-effects/effect-value-iteration-composite-operation.html": [
-   "4d640a2af03bf26ff5985fa9e549943e80a30f1b",
+   "3034db6e48e55ad5075f17f5812ee4c396606ff8",
    "testharness"
   ],
   "web-animations/animation-model/keyframe-effects/effect-value-overlapping-keyframes.html": [
    "5725dc5f7d0c2b532d22add77c0f82780dd252dd",
    "testharness"
   ],
   "web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html": [
    "450a31e4c1335a2dd531821564af64dcb68d40cd",
@@ -585981,17 +585981,17 @@
    "16c69e33c1022f643a961f6f2d85c59010164e9d",
    "testharness"
   ],
   "web-animations/interfaces/KeyframeEffect/idlharness.html": [
    "d51dfde748bfdf12a1b06452099ea74fe2951a34",
    "testharness"
   ],
   "web-animations/interfaces/KeyframeEffect/iterationComposite.html": [
-   "2abe4ee9d1822d6d2c63fbb3cc094644daca1f36",
+   "8aac788873a17d840cef91ba3441451b28f40f8b",
    "testharness"
   ],
   "web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001.html": [
    "78e32ec633628ef4f236751aa159ac05b14dda2c",
    "testharness"
   ],
   "web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-002.html": [
    "ea466d345a41c600835d278aaccf531cf3a3cc75",
--- a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-iteration-composite-operation.html
+++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/effect-value-iteration-composite-operation.html
@@ -24,17 +24,17 @@ test(t => {
   assert_equals(getComputedStyle(div).alignContent, 'flex-end',
     'Animated align-content style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).alignContent, 'flex-start',
     'Animated align-content style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).alignContent, 'flex-end',
     'Animated align-content style at 50s of the third iteration');
-}, 'iterationComposite of discrete type animation (align-content)');
+}, 'iteration composition of discrete type animation (align-content)');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ marginLeft: ['0px', '10px'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
@@ -45,17 +45,17 @@ test(t => {
   assert_equals(getComputedStyle(div).marginLeft, '5px',
     'Animated margin-left style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).marginLeft, '20px',
     'Animated margin-left style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).marginLeft, '25px',
     'Animated margin-left style at 50s of the third iteration');
-}, 'iterationComposite of <length> type animation');
+}, 'iteration composition of <length> type animation');
 
 test(t => {
   const parent = createDiv(t);
   parent.style.width = '100px';
   const div = createDiv(t);
   parent.appendChild(div);
 
   const anim =
@@ -70,17 +70,17 @@ test(t => {
   assert_equals(getComputedStyle(div).width, '25px',
     'Animated width style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).width, '100px',
     'Animated width style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).width, '125px',
     'Animated width style at 50s of the third iteration');
-}, 'iterationComposite of <percentage> type animation');
+}, 'iteration composition of <percentage> type animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ color: ['rgb(0, 0, 0)', 'rgb(120, 120, 120)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
@@ -91,17 +91,17 @@ test(t => {
   assert_equals(getComputedStyle(div).color, 'rgb(60, 60, 60)',
     'Animated color style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).color, 'rgb(240, 240, 240)',
     'Animated color style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).color, 'rgb(255, 255, 255)',
     'Animated color style at 50s of the third iteration');
-}, 'iterationComposite of <color> type animation');
+}, 'iteration composition of <color> type animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ color: ['rgb(0, 120, 0)', 'rgb(60, 60, 60)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
@@ -113,17 +113,17 @@ test(t => {
     'Animated color style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).color, 'rgb(120, 240, 120)',
     'Animated color style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   // The green color is (240 + 180) / 2 = 210
   assert_equals(getComputedStyle(div).color, 'rgb(150, 210, 150)',
     'Animated color style at 50s of the third iteration');
-}, 'iterationComposite of <color> type animation that green component is ' +
+}, 'iteration composition of <color> type animation that green component is ' +
    'decreasing');
 
    test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ flexGrow: [0, 10] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
@@ -135,17 +135,17 @@ test(t => {
   assert_equals(getComputedStyle(div).flexGrow, '5',
     'Animated flex-grow style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).flexGrow, '20',
     'Animated flex-grow style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).flexGrow, '25',
     'Animated flex-grow style at 50s of the third iteration');
-}, 'iterationComposite of <number> type animation');
+}, 'iteration composition of <number> type animation');
 
 test(t => {
   const div = createDiv(t);
   div.style.position = 'absolute';
   const anim =
     div.animate({ clip: ['rect(0px, 0px, 0px, 0px)',
                          'rect(10px, 10px, 10px, 10px)'] },
                 { duration: 100 * MS_PER_SEC,
@@ -158,17 +158,17 @@ test(t => {
   assert_equals(getComputedStyle(div).clip, 'rect(5px, 5px, 5px, 5px)',
     'Animated clip style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).clip, 'rect(20px, 20px, 20px, 20px)',
     'Animated clip style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).clip, 'rect(25px, 25px, 25px, 25px)',
     'Animated clip style at 50s of the third iteration');
-}, 'iterationComposite of <shape> type animation');
+}, 'iteration composition of <shape> type animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ width: ['calc(0vw + 0px)', 'calc(0vw + 10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
@@ -179,17 +179,17 @@ test(t => {
   assert_equals(getComputedStyle(div).width, '5px',
     'Animated calc width style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).width, '20px',
     'Animated calc width style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).width, '25px',
     'Animated calc width style at 50s of the third iteration');
-}, 'iterationComposite of <calc()> value animation');
+}, 'iteration composition of <calc()> value animation');
 
 test(t => {
   const parent = createDiv(t);
   parent.style.width = '100px';
   const div = createDiv(t);
   parent.appendChild(div);
 
   const anim =
@@ -207,17 +207,17 @@ test(t => {
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).width,
     '40px', // 100px * (10% + 10%) + (10px + 10px)
     'Animated calc width style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).width,
     '50px', // (40px + 60px) / 2
     'Animated calc width style at 50s of the third iteration');
-}, 'iterationComposite of <calc()> value animation that the values can\'t' +
+}, 'iteration composition of <calc()> value animation that the values can\'t' +
    'be reduced');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ opacity: [0, 0.4] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
@@ -229,17 +229,17 @@ test(t => {
   assert_equals(getComputedStyle(div).opacity, '0.2',
     'Animated opacity style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).opacity, '0.8',
     'Animated opacity style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).opacity, '1', // (0.8 + 1.2) * 0.5
     'Animated opacity style at 50s of the third iteration');
-}, 'iterationComposite of opacity animation');
+}, 'iteration composition of opacity animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ boxShadow: ['rgb(0, 0, 0) 0px 0px 0px 0px',
                               'rgb(120, 120, 120) 10px 10px 10px 0px'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
@@ -254,17 +254,17 @@ test(t => {
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).boxShadow,
     'rgb(240, 240, 240) 20px 20px 20px 0px',
     'Animated box-shadow style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).boxShadow,
     'rgb(255, 255, 255) 25px 25px 25px 0px',
     'Animated box-shadow style at 50s of the third iteration');
-}, 'iterationComposite of box-shadow animation');
+}, 'iteration composition of box-shadow animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ filter: ['blur(0px)', 'blur(10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
@@ -275,17 +275,17 @@ test(t => {
   assert_equals(getComputedStyle(div).filter, 'blur(5px)',
     'Animated filter blur style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).filter, 'blur(20px)',
     'Animated filter blur style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).filter, 'blur(25px)',
     'Animated filter blur style at 50s of the third iteration');
-}, 'iterationComposite of filter blur animation');
+}, 'iteration composition of filter blur animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ filter: ['brightness(1)',
                            'brightness(180%)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
@@ -300,17 +300,17 @@ test(t => {
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).filter,
     'brightness(2.6)', // brightness(1) + brightness(0.8) + brightness(0.8)
     'Animated filter brightness style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).filter,
     'brightness(3)', // (brightness(2.6) + brightness(3.4)) * 0.5
     'Animated filter brightness style at 50s of the third iteration');
-}, 'iterationComposite of filter brightness for different unit animation');
+}, 'iteration composition of filter brightness for different unit animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ filter: ['brightness(0)',
                            'brightness(1)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
@@ -325,17 +325,17 @@ test(t => {
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).filter,
     'brightness(0)', // brightness(1) is an identity element, not accumulated.
     'Animated filter brightness style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).filter,
     'brightness(0.5)', // brightness(1) is an identity element, not accumulated.
     'Animated filter brightness style at 50s of the third iteration');
-}, 'iterationComposite of filter brightness animation');
+}, 'iteration composition of filter brightness animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ filter: ['drop-shadow(rgb(0, 0, 0) 0px 0px 0px)',
                            'drop-shadow(rgb(120, 120, 120) 10px 10px 10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
@@ -350,17 +350,17 @@ test(t => {
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).filter,
     'drop-shadow(rgb(240, 240, 240) 20px 20px 20px)',
     'Animated filter drop-shadow style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).filter,
     'drop-shadow(rgb(255, 255, 255) 25px 25px 25px)',
     'Animated filter drop-shadow style at 50s of the third iteration');
-}, 'iterationComposite of filter drop-shadow animation');
+}, 'iteration composition of filter drop-shadow animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ filter: ['brightness(1) contrast(1)',
                            'brightness(2) contrast(2)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
@@ -375,17 +375,17 @@ test(t => {
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).filter,
     'brightness(3) contrast(3)',
     'Animated filter list at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).filter,
     'brightness(3.5) contrast(3.5)',
     'Animated filter list at 50s of the third iteration');
-}, 'iterationComposite of same filter list animation');
+}, 'iteration composition of same filter list animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ filter: ['brightness(1) contrast(1)',
                            'contrast(2) brightness(2)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
@@ -405,17 +405,17 @@ test(t => {
     'brightness(1) contrast(1)',
     'Animated filter list at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).filter,
     // We *can* accumulate 'contrast(2) brightness(2)' onto
     // the same list 'contrast(2) brightness(2)' here.
     'contrast(4) brightness(4)', // discrete
     'Animated filter list at 50s of the third iteration');
-}, 'iterationComposite of discrete filter list because of mismatch ' +
+}, 'iteration composition of discrete filter list because of mismatch ' +
    'of the order');
 
    test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ filter: ['sepia(0)',
                            'sepia(1) contrast(2)'] },
                 { duration: 100 * MS_PER_SEC,
@@ -431,17 +431,17 @@ test(t => {
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).filter,
     'sepia(2) contrast(3)',
     'Animated filter list at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).filter,
     'sepia(2.5) contrast(3.5)',
     'Animated filter list at 50s of the third iteration');
-}, 'iterationComposite of different length filter list animation');
+}, 'iteration composition of different length filter list animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ transform: ['rotate(0deg)', 'rotate(180deg)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
@@ -455,17 +455,17 @@ test(t => {
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(1, 0, 0, 1, 0, 0)', // rotate(360deg)
     'Animated transform(rotate) style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(0, 1, -1, 0, 0, 0)', // rotate(450deg)
     'Animated transform(rotate) style at 50s of the third iteration');
-}, 'iterationComposite of transform(rotate) animation');
+}, 'iteration composition of transform(rotate) animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ transform: ['scale(0)', 'scale(1)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
@@ -481,17 +481,17 @@ test(t => {
     'matrix(0, 0, 0, 0, 0, 0)', // scale(0); scale(1) is an identity element,
                                 // not accumulated.
     'Animated transform(scale) style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5); scale(1) an identity
                                     // element, not accumulated.
     'Animated transform(scale) style at 50s of the third iteration');
-}, 'iterationComposite of transform: [ scale(0), scale(1) ] animation');
+}, 'iteration composition of transform: [ scale(0), scale(1) ] animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ transform: ['scale(1)', 'scale(2)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
@@ -505,17 +505,17 @@ test(t => {
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(3, 0, 0, 3, 0, 0)', // scale(1 + (2 -1) + (2 -1))
     'Animated transform(scale) style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(3.5, 0, 0, 3.5, 0, 0)', // (scale(3) + scale(4)) * 0.5
     'Animated transform(scale) style at 50s of the third iteration');
-}, 'iterationComposite of transform: [ scale(1), scale(2) ] animation');
+}, 'iteration composition of transform: [ scale(1), scale(2) ] animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ transform: ['scale(0)', 'scale(2)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
@@ -529,17 +529,17 @@ test(t => {
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(2, 0, 0, 2, 0, 0)', // (scale(0) + scale(2-1)*2)
     'Animated transform(scale) style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(3, 0, 0, 3, 0, 0)', // (scale(2) + scale(4)) * 0.5
     'Animated transform(scale) style at 50s of the third iteration');
-}, 'iterationComposite of transform: scale(2) animation');
+}, 'iteration composition of transform: scale(2) animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ transform: ['rotate(0deg) translateX(0px)',
                               'rotate(180deg) translateX(10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
@@ -554,17 +554,17 @@ test(t => {
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(1, 0, 0, 1, 20, 0)', // rotate(360deg) translateX(20px)
     'Animated transform list at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     'matrix(0, 1, -1, 0, 0, 25)', // rotate(450deg) translateX(25px)
     'Animated transform list at 50s of the third iteration');
-}, 'iterationComposite of transform list animation');
+}, 'iteration composition of transform list animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ transform: ['matrix(2, 0, 0, 2, 0, 0)',
                               'matrix(3, 0, 0, 3, 30, 0)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
@@ -583,17 +583,17 @@ test(t => {
     'Animated transform of matrix function at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     // from: matrix(6, 0, 0, 6, 60, 0)
     // to:   matrix(7, 0, 0, 7, 90, 0)
     //         = scale(3) + (scale(3-1)*2) + translateX(30px)*3
     'matrix(6.5, 0, 0, 6.5, 75, 0)',
     'Animated transform of matrix function at 50s of the third iteration');
-}, 'iterationComposite of transform of matrix function');
+}, 'iteration composition of transform of matrix function');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ transform: ['translateX(0px) scale(2)',
                               'scale(3) translateX(10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
@@ -615,17 +615,18 @@ test(t => {
     'matrix(6, 0, 0, 6, 60, 0)',
     'Animated transform list at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     // Interpolate between matrix(6, 0, 0, 6, 60, 0)
     //                 and matrix(7, 0, 0, 7, 210, 0) = scale(7) translate(30px)
     'matrix(6.5, 0, 0, 6.5, 135, 0)',
     'Animated transform list at 50s of the third iteration');
-}, 'iterationComposite of transform list animation whose order is mismatched');
+}, 'iteration composition of transform list animation whose order is'
+   + ' mismatched');
 
 test(t => {
   const div = createDiv(t);
   // Even if each transform list does not have functions which exist in
   // other pair of the list, we don't fill any missing functions at all.
   const anim =
     div.animate({ transform: ['translateX(0px)',
                               'scale(2) translateX(10px)'] },
@@ -650,18 +651,18 @@ test(t => {
     'Animated transform list at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     // Interpolate between matrix(3, 0, 0, 3, 40, 0)
     //                 and matrix(4, 0, 0, 4, 120, 0) =
     //                       scale(2 + (2-1)*2) translate(10px * 3)
     'matrix(3.5, 0, 0, 3.5, 80, 0)',
     'Animated transform list at 50s of the third iteration');
-}, 'iterationComposite of transform list animation whose order is mismatched ' +
-   'because of missing functions');
+}, 'iteration composition of transform list animation whose order is'
+   + ' mismatched because of missing functions');
 
    test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ transform: ['none',
                               'translateX(10px)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
@@ -679,17 +680,17 @@ test(t => {
     // translateX(10px * 2 + none) -> translateX(10px * 2 + 10px) @ 0%
     'matrix(1, 0, 0, 1, 20, 0)',
     'Animated transform list at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     // translateX(10px * 2 + none) -> translateX(10px * 2 + 10px) @ 50%
     'matrix(1, 0, 0, 1, 25, 0)',
     'Animated transform list at 50s of the third iteration');
-}, 'iterationComposite of transform from none to translate');
+}, 'iteration composition of transform from none to translate');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ transform: ['matrix3d(1, 0,  0, 0, ' +
                                        '0, 1,  0, 0, ' +
                                        '0, 0,  1, 0, ' +
                                        '0, 0, 30, 1)',
@@ -713,17 +714,17 @@ test(t => {
     'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1)',
     'Animated transform of matrix3d function at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     // from: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1)
     // to:   matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 150, 1)
     'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 140, 1)',
     'Animated transform of matrix3d function at 50s of the third iteration');
-}, 'iterationComposite of transform of matrix3d function');
+}, 'iteration composition of transform of matrix3d function');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ transform: ['rotate3d(1, 1, 0, 0deg)',
                               'rotate3d(1, 1, 0, 90deg)'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
@@ -738,17 +739,17 @@ test(t => {
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     rotate3dToMatrix3d(1, 1, 0, Math.PI), // 180deg
     'Animated transform of rotate3d function at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_matrix_equals(getComputedStyle(div).transform,
     rotate3dToMatrix3d(1, 1, 0, 225 * Math.PI / 180), //((270 + 180) * 0.5)deg
     'Animated transform of rotate3d function at 50s of the third iteration');
-}, 'iterationComposite of transform of rotate3d function');
+}, 'iteration composition of transform of rotate3d function');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ marginLeft: ['10px', '20px'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
@@ -759,17 +760,17 @@ test(t => {
   assert_equals(getComputedStyle(div).marginLeft, '15px',
     'Animated margin-left style at 50s of the first iteration');
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).marginLeft, '50px', // 10px + 20px + 20px
     'Animated margin-left style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).marginLeft, '55px', // (50px + 60px) * 0.5
     'Animated margin-left style at 50s of the third iteration');
-}, 'iterationComposite starts with non-zero value animation');
+}, 'iteration composition starts with non-zero value animation');
 
 test(t => {
   const div = createDiv(t);
   const anim =
     div.animate({ marginLeft: ['10px', '-10px'] },
                 { duration: 100 * MS_PER_SEC,
                   easing: 'linear',
                   iterations: 10,
@@ -783,17 +784,17 @@ test(t => {
   anim.currentTime = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).marginLeft,
     '-10px', // 10px + -10px + -10px
     'Animated margin-left style at 0s of the third iteration');
   anim.currentTime += anim.effect.timing.duration / 2;
   assert_equals(getComputedStyle(div).marginLeft,
     '-20px', // (-10px + -30px) * 0.5
     'Animated margin-left style at 50s of the third iteration');
-}, 'iterationComposite with negative final value animation');
+}, 'iteration composition with negative final value animation');
 
 test(t => {
   const div = createDiv(t);
   const anim = div.animate({ marginLeft: ['0px', '10px'] },
                            { duration: 100 * MS_PER_SEC,
                              easing: 'linear',
                              iterations: 10,
                              iterationComposite: 'accumulate' });
@@ -808,11 +809,11 @@ test(t => {
   anim.effect.timing.duration = anim.effect.timing.duration * 2;
   assert_equals(getComputedStyle(div).marginLeft, '12.5px',
     'Animated style at 25s of the first iteration');
 
   // half of original.
   anim.effect.timing.duration = anim.effect.timing.duration / 4;
   assert_equals(getComputedStyle(div).marginLeft, '50px',
       'Animated style at 50s of the fourth iteration');
-}, 'duration changes with iterationComposite(accumulate)');
+}, 'duration changes with an iteration composition operation of accumulate');
 
 </script>
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/iterationComposite.html
@@ -25,11 +25,11 @@ test(t => {
 
   anim.effect.iterationComposite = 'replace';
   assert_equals(getComputedStyle(div).marginLeft, '5px',
     'Animated style at 50s of the third iteration');
 
   anim.effect.iterationComposite = 'accumulate';
   assert_equals(getComputedStyle(div).marginLeft, '25px',
     'Animated style at 50s of the third iteration');
-}, 'iterationComposite changes');
+}, 'iterationComposite can be updated while an animation is in progress');
 
 </script>