Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

8 files changed, 1195 insertions, 0 deletions

diff --git a/testing/web-platform/tests/web-animations/resources/easing-tests.js b/testing/web-platform/tests/web-animations/resources/easing-tests.js
new file mode 100644
index 0000000000..a05264b0f5
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/resources/easing-tests.js
@@ -0,0 +1,121 @@
+'use strict';
+
+const gEasingTests = [
+  {
+    desc: 'step-start function',
+    easing: 'step-start',
+    easingFunction: stepStart(1),
+    serialization: 'steps(1, start)'
+  },
+  {
+    desc: 'steps(1, start) function',
+    easing: 'steps(1, start)',
+    easingFunction: stepStart(1)
+  },
+  {
+    desc: 'steps(2, start) function',
+    easing: 'steps(2, start)',
+    easingFunction: stepStart(2)
+  },
+  {
+    desc: 'step-end function',
+    easing: 'step-end',
+    easingFunction: stepEnd(1),
+    serialization: 'steps(1)'
+  },
+  {
+    desc: 'steps(1) function',
+    easing: 'steps(1)',
+    easingFunction: stepEnd(1)
+  },
+  {
+    desc: 'steps(1, end) function',
+    easing: 'steps(1, end)',
+    easingFunction: stepEnd(1),
+    serialization: 'steps(1)'
+  },
+  {
+    desc: 'steps(2, end) function',
+    easing: 'steps(2, end)',
+    easingFunction: stepEnd(2),
+    serialization: 'steps(2)'
+  },
+  {
+    desc: 'linear function',
+    easing: 'linear', // cubic-bezier(0, 0, 1.0, 1.0)
+    easingFunction: cubicBezier(0, 0, 1.0, 1.0)
+  },
+  {
+    desc: 'ease function',
+    easing: 'ease', // cubic-bezier(0.25, 0.1, 0.25, 1.0)
+    easingFunction: cubicBezier(0.25, 0.1, 0.25, 1.0)
+  },
+  {
+    desc: 'ease-in function',
+    easing: 'ease-in', // cubic-bezier(0.42, 0, 1.0, 1.0)
+    easingFunction: cubicBezier(0.42, 0, 1.0, 1.0)
+  },
+  {
+    desc: 'ease-in-out function',
+    easing: 'ease-in-out', // cubic-bezier(0.42, 0, 0.58, 1.0)
+    easingFunction: cubicBezier(0.42, 0, 0.58, 1.0)
+  },
+  {
+    desc: 'ease-out function',
+    easing: 'ease-out', // cubic-bezier(0, 0, 0.58, 1.0)
+    easingFunction: cubicBezier(0, 0, 0.58, 1.0)
+  },
+  {
+    desc: 'easing function which produces values greater than 1',
+    easing: 'cubic-bezier(0, 1.5, 1, 1.5)',
+    easingFunction: cubicBezier(0, 1.5, 1, 1.5)
+  },
+  {
+    desc: 'easing function which produces values less than 1',
+    easing: 'cubic-bezier(0, -0.5, 1, -0.5)',
+    easingFunction: cubicBezier(0, -0.5, 1, -0.5)
+  }
+];
+
+const gEasingParsingTests = [
+  ['linear', 'linear'],
+  ['ease-in-out', 'ease-in-out'],
+  ['Ease\\2d in-out', 'ease-in-out'],
+  ['ease /**/', 'ease'],
+];
+
+const gInvalidEasings = [
+  '',
+  '7',
+  'test',
+  'initial',
+  'inherit',
+  'unset',
+  'unrecognized',
+  'var(--x)',
+  'ease-in-out, ease-out',
+  'cubic-bezier(1.1, 0, 1, 1)',
+  'cubic-bezier(0, 0, 1.1, 1)',
+  'cubic-bezier(-0.1, 0, 1, 1)',
+  'cubic-bezier(0, 0, -0.1, 1)',
+  'cubic-bezier(0.1, 0, 4, 0.4)',
+  'steps(-1, start)',
+  'steps(0.1, start)',
+  'steps(3, nowhere)',
+  'steps(-3, end)',
+  'function (a){return a}',
+  'function (x){return x}',
+  'function(x, y){return 0.3}',
+];
+
+// Easings that should serialize to the same string
+const gRoundtripEasings = [
+  'ease',
+  'linear',
+  'ease-in',
+  'ease-out',
+  'ease-in-out',
+  'cubic-bezier(0.1, 5, 0.23, 0)',
+  'steps(3, start)',
+  'steps(3)',
+];
diff --git a/testing/web-platform/tests/web-animations/resources/effect-tests.js b/testing/web-platform/tests/web-animations/resources/effect-tests.js
new file mode 100644
index 0000000000..8a18ab13c6
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/resources/effect-tests.js
@@ -0,0 +1,75 @@
+'use strict';
+
+// Common utility methods for testing animation effects
+
+// Tests the |property| member of |animation's| target effect's computed timing
+// at the various points indicated by |values|.
+//
+// |values| has the format:
+//
+//   {
+//     before, // value to test during before phase
+//     activeBoundary, // value to test at the very beginning of the active
+//                     // phase when playing forwards, or the very end of
+//                     // the active phase when playing backwards.
+//                     // This should be undefined if the active duration of
+//                     // the effect is zero.
+//     after,  // value to test during the after phase or undefined if the
+//             // active duration is infinite
+//   }
+//
+function assert_computed_timing_for_each_phase(animation, property, values) {
+  // Some computed timing properties (e.g. 'progress') require floating-point
+  // comparison, whilst exact equality suffices for others.
+  const assert_property_equals =
+      (property === 'progress') ? assert_times_equal : assert_equals;
+
+  const effect = animation.effect;
+  const timing = effect.getComputedTiming();
+
+  // The following calculations are based on the definitions here:
+  // https://drafts.csswg.org/web-animations/#animation-effect-phases-and-states
+  const beforeActive = Math.max(Math.min(timing.delay, timing.endTime), 0);
+  const activeAfter =
+    Math.max(Math.min(timing.delay + timing.activeDuration, timing.endTime), 0);
+  const direction = animation.playbackRate < 0 ? 'backwards' : 'forwards';
+
+  // Before phase
+  if (direction === 'forwards') {
+    animation.currentTime = beforeActive - 1;
+  } else {
+    animation.currentTime = beforeActive;
+  }
+  assert_property_equals(effect.getComputedTiming()[property], values.before,
+                         `Value of ${property} in the before phase`);
+
+  // Active phase
+  if (effect.getComputedTiming().activeDuration > 0) {
+    if (direction === 'forwards') {
+      animation.currentTime = beforeActive;
+    } else {
+      animation.currentTime = activeAfter;
+    }
+    assert_property_equals(effect.getComputedTiming()[property], values.activeBoundary,
+                           `Value of ${property} at the boundary of the active phase`);
+  } else {
+    assert_equals(values.activeBoundary, undefined,
+                  'Test specifies a value to check during the active phase but'
+                  + ' the animation has a zero duration');
+  }
+
+  // After phase
+  if (effect.getComputedTiming().activeDuration !== Infinity) {
+    if (direction === 'forwards') {
+      animation.currentTime = activeAfter;
+    } else {
+      animation.currentTime = activeAfter + 1;
+    }
+    assert_property_equals(effect.getComputedTiming()[property], values.after,
+                           `Value of ${property} in the after phase`);
+  } else {
+    assert_equals(values.after, undefined,
+                  'Test specifies a value to check during the after phase but'
+                  + ' the animation has an infinite duration');
+  }
+}
diff --git a/testing/web-platform/tests/web-animations/resources/keyframe-tests.js b/testing/web-platform/tests/web-animations/resources/keyframe-tests.js
new file mode 100644
index 0000000000..43e0d7575f
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/resources/keyframe-tests.js
@@ -0,0 +1,827 @@
+'use strict';
+
+// ==============================
+//
+// Common keyframe test data
+//
+// ==============================
+
+
+// ------------------------------
+//  Composite values
+// ------------------------------
+
+const gGoodKeyframeCompositeValueTests = [
+  'replace', 'add', 'accumulate', 'auto'
+];
+
+const gBadKeyframeCompositeValueTests = [
+  'unrecognised', 'replace ', 'Replace', null
+];
+
+const gGoodOptionsCompositeValueTests = [
+  'replace', 'add', 'accumulate'
+];
+
+const gBadOptionsCompositeValueTests = [
+  'unrecognised', 'replace ', 'Replace', null
+];
+
+// ------------------------------
+//  Keyframes
+// ------------------------------
+
+const gEmptyKeyframeListTests = [
+  [],
+  null,
+  undefined,
+];
+
+// Helper methods to make defining computed keyframes more readable.
+
+const offset = offset => ({
+  offset,
+  computedOffset: offset,
+});
+
+const computedOffset = computedOffset => ({
+  offset: null,
+  computedOffset,
+});
+
+const keyframe = (offset, props, easing='linear', composite) => {
+  // The object spread operator is not yet available in all browsers so we use
+  // Object.assign instead.
+  const result = {};
+  Object.assign(result, offset, props, { easing });
+  result.composite = composite || 'auto';
+  return result;
+};
+
+const gKeyframesTests = [
+
+  // ----------- Property-indexed keyframes: property handling -----------
+
+  {
+    desc:   'a one property two value property-indexed keyframes specification',
+    input:  { left: ['10px', '20px'] },
+    output: [keyframe(computedOffset(0), { left: '10px' }),
+             keyframe(computedOffset(1), { left: '20px' })],
+  },
+  {
+    desc:   'a one shorthand property two value property-indexed keyframes'
+            + ' specification',
+    input:  { margin: ['10px', '10px 20px 30px 40px'] },
+    output: [keyframe(computedOffset(0), { margin: '10px' }),
+             keyframe(computedOffset(1), { margin: '10px 20px 30px 40px' })],
+  },
+  {
+    desc:   'a two property (one shorthand and one of its longhand components)'
+            + ' two value property-indexed keyframes specification',
+    input:  { marginTop: ['50px', '60px'],
+              margin: ['10px', '10px 20px 30px 40px'] },
+    output: [keyframe(computedOffset(0),
+                      { marginTop: '50px', margin: '10px' }),
+             keyframe(computedOffset(1),
+                      { marginTop: '60px', margin: '10px 20px 30px 40px' })],
+  },
+  {
+    desc:   'a two property (one shorthand and one of its shorthand components)'
+            + ' two value property-indexed keyframes specification',
+    input:  { border: ['pink', '2px'],
+              borderColor: ['green', 'blue'] },
+    output: [keyframe(computedOffset(0),
+                      { border: 'pink', borderColor: 'green' }),
+             keyframe(computedOffset(1),
+                      { border: '2px', borderColor: 'blue' })],
+  },
+  {
+    desc:   'a two property two value property-indexed keyframes specification',
+    input:  { left: ['10px', '20px'],
+              top: ['30px', '40px'] },
+    output: [keyframe(computedOffset(0), { left: '10px', top: '30px' }),
+             keyframe(computedOffset(1), { left: '20px', top: '40px' })],
+  },
+  {
+    desc:   'a two property property-indexed keyframes specification with'
+            + ' different numbers of values',
+    input:  { left: ['10px', '20px', '30px'],
+              top: ['40px', '50px'] },
+    output: [keyframe(computedOffset(0),   { left: '10px', top: '40px' }),
+             keyframe(computedOffset(0.5), { left: '20px' }),
+             keyframe(computedOffset(1),   { left: '30px', top: '50px' })],
+  },
+  {
+    desc:   'a property-indexed keyframes specification with an invalid value',
+    input:  { left: ['10px', '20px', '30px', '40px', '50px'],
+              top:  ['15px', '25px', 'invalid', '45px', '55px'] },
+    output: [keyframe(computedOffset(0),    { left: '10px', top: '15px' }),
+             keyframe(computedOffset(0.25), { left: '20px', top: '25px' }),
+             keyframe(computedOffset(0.5),  { left: '30px' }),
+             keyframe(computedOffset(0.75), { left: '40px', top: '45px' }),
+             keyframe(computedOffset(1),    { left: '50px', top: '55px' })],
+  },
+  {
+    desc:   'a one property two value property-indexed keyframes specification'
+            + ' that needs to stringify its values',
+    input:  { opacity: [0, 1] },
+    output: [keyframe(computedOffset(0), { opacity: '0' }),
+             keyframe(computedOffset(1), { opacity: '1' })],
+  },
+  {
+    desc:   'a property-indexed keyframes specification with a CSS variable'
+            + ' reference',
+    input:  { left: [ 'var(--dist)', 'calc(var(--dist) + 100px)' ] },
+    output: [keyframe(computedOffset(0), { left: 'var(--dist)' }),
+             keyframe(computedOffset(1), { left: 'calc(var(--dist) + 100px)' })]
+  },
+  {
+    desc:   'a property-indexed keyframes specification with a CSS variable'
+            + ' reference in a shorthand property',
+    input:  { margin: [ 'var(--dist)', 'calc(var(--dist) + 100px)' ] },
+    output: [keyframe(computedOffset(0),
+                      { margin: 'var(--dist)' }),
+             keyframe(computedOffset(1),
+                      { margin: 'calc(var(--dist) + 100px)' })],
+  },
+  {
+    desc:   'a one property one value property-indexed keyframes specification',
+    input:  { left: ['10px'] },
+    output: [keyframe(computedOffset(1), { left: '10px' })],
+  },
+  {
+    desc:   'a one property one non-array value property-indexed keyframes'
+            + ' specification',
+    input:  { left: '10px' },
+    output: [keyframe(computedOffset(1), { left: '10px' })],
+  },
+  {
+    desc:   'a one property two value property-indexed keyframes specification'
+            + ' where the first value is invalid',
+    input:  { left: ['invalid', '10px'] },
+    output: [keyframe(computedOffset(0), {}),
+             keyframe(computedOffset(1), { left: '10px' })]
+  },
+  {
+    desc:   'a one property two value property-indexed keyframes specification'
+            + ' where the second value is invalid',
+    input:  { left: ['10px', 'invalid'] },
+    output: [keyframe(computedOffset(0), { left: '10px' }),
+             keyframe(computedOffset(1), {})]
+  },
+  {
+    desc:   'a property-indexed keyframes specification with a CSS variable as'
+            + ' the property',
+    input:  { '--custom': ['1', '2'] },
+    output: [keyframe(computedOffset(0), { '--custom': '1' }),
+             keyframe(computedOffset(1), { '--custom': '2' })]
+  },
+
+  // ----------- Property-indexed keyframes: offset handling -----------
+
+  {
+    desc:   'a property-indexed keyframe with a single offset',
+    input:  { left: ['10px', '20px', '30px'], offset: 0.5 },
+    output: [keyframe(offset(0.5),          { left: '10px' }),
+             keyframe(computedOffset(0.75), { left: '20px' }),
+             keyframe(computedOffset(1),    { left: '30px' })],
+  },
+  {
+    desc:   'a property-indexed keyframe with an array of offsets',
+    input:  { left: ['10px', '20px', '30px'], offset: [ 0.1, 0.25, 0.8 ] },
+    output: [keyframe(offset(0.1),  { left: '10px' }),
+             keyframe(offset(0.25), { left: '20px' }),
+             keyframe(offset(0.8),  { left: '30px' })],
+  },
+  {
+    desc:   'a property-indexed keyframe with an array of offsets that is too'
+            + ' short',
+    input:  { left: ['10px', '20px', '30px'], offset: [ 0, 0.25 ] },
+    output: [keyframe(offset(0),         { left: '10px' }),
+             keyframe(offset(0.25),      { left: '20px' }),
+             keyframe(computedOffset(1), { left: '30px' })],
+  },
+  {
+    desc:   'a property-indexed keyframe with an array of offsets that is too'
+            + ' long',
+    input:  { left: ['10px', '20px', '30px'],
+              offset: [ 0, 0.25, 0.5, 0.75, 1 ] },
+    output: [keyframe(offset(0),    { left: '10px' }),
+             keyframe(offset(0.25), { left: '20px' }),
+             keyframe(offset(0.5),  { left: '30px' })],
+  },
+  {
+    desc:   'a property-indexed keyframe with an empty array of offsets',
+    input:  { left: ['10px', '20px', '30px'], offset: [] },
+    output: [keyframe(computedOffset(0),   { left: '10px' }),
+             keyframe(computedOffset(0.5), { left: '20px' }),
+             keyframe(computedOffset(1),   { left: '30px' })],
+  },
+  {
+    desc:   'a property-indexed keyframe with an array of offsets with an'
+            + ' embedded null value',
+    input:  { left: ['10px', '20px', '30px'],
+              offset: [ 0, null, 0.5 ] },
+    output: [keyframe(offset(0),            { left: '10px' }),
+             keyframe(computedOffset(0.25), { left: '20px' }),
+             keyframe(offset(0.5),          { left: '30px' })],
+  },
+  {
+    desc:   'a property-indexed keyframe with an array of offsets with a'
+            + ' trailing null value',
+    input:  { left: ['10px', '20px', '30px'],
+              offset: [ 0, 0.25, null ] },
+    output: [keyframe(offset(0),           { left: '10px' }),
+             keyframe(offset(0.25),        { left: '20px' }),
+             keyframe(computedOffset(1), { left: '30px' })],
+  },
+  {
+    desc:   'a property-indexed keyframe with an array of offsets with leading'
+            + ' and trailing null values',
+    input:  { left: ['10px', '20px', '30px'],
+              offset: [ null, 0.25, null ] },
+    output: [keyframe(computedOffset(0), { left: '10px' }),
+             keyframe(offset(0.25),      { left: '20px' }),
+             keyframe(computedOffset(1), { left: '30px' })],
+  },
+  {
+    desc:   'a property-indexed keyframe with an array of offsets with'
+            + ' adjacent null values',
+    input:  { left: ['10px', '20px', '30px'],
+              offset: [ null, null, 0.5 ] },
+    output: [keyframe(computedOffset(0),    { left: '10px' }),
+             keyframe(computedOffset(0.25), { left: '20px' }),
+             keyframe(offset(0.5),          { left: '30px' })],
+  },
+  {
+    desc:   'a property-indexed keyframe with an array of offsets with'
+            + ' all null values (and too many at that)',
+    input:  { left: ['10px', '20px', '30px'],
+              offset: [ null, null, null, null, null ] },
+    output: [keyframe(computedOffset(0),   { left: '10px' }),
+             keyframe(computedOffset(0.5), { left: '20px' }),
+             keyframe(computedOffset(1),   { left: '30px' })],
+  },
+  {
+    desc:   'a property-indexed keyframe with a single null offset',
+    input:  { left: ['10px', '20px', '30px'], offset: null },
+    output: [keyframe(computedOffset(0),   { left: '10px' }),
+             keyframe(computedOffset(0.5), { left: '20px' }),
+             keyframe(computedOffset(1),   { left: '30px' })],
+  },
+  {
+    desc:   'a property-indexed keyframe with an array of offsets that is not'
+            + ' strictly ascending in the unused part of the array',
+    input:  { left: ['10px', '20px', '30px'],
+              offset: [ 0, 0.2, 0.8, 0.6 ] },
+    output: [keyframe(offset(0),   { left: '10px' }),
+             keyframe(offset(0.2), { left: '20px' }),
+             keyframe(offset(0.8), { left: '30px' })],
+  },
+
+  // ----------- Property-indexed keyframes: easing handling -----------
+
+  {
+    desc:   'a property-indexed keyframe without any specified easing',
+    input:  { left: ['10px', '20px', '30px'] },
+    output: [keyframe(computedOffset(0),   { left: '10px' }, 'linear'),
+             keyframe(computedOffset(0.5), { left: '20px' }, 'linear'),
+             keyframe(computedOffset(1),   { left: '30px' }, 'linear')],
+  },
+  {
+    desc:   'a property-indexed keyframe with a single easing',
+    input:  { left: ['10px', '20px', '30px'], easing: 'ease-in' },
+    output: [keyframe(computedOffset(0),   { left: '10px' }, 'ease-in'),
+             keyframe(computedOffset(0.5), { left: '20px' }, 'ease-in'),
+             keyframe(computedOffset(1),   { left: '30px' }, 'ease-in')],
+  },
+  {
+    desc:   'a property-indexed keyframe with an array of easings',
+    input:  { left: ['10px', '20px', '30px'],
+              easing: ['ease-in', 'ease-out', 'ease-in-out'] },
+    output: [keyframe(computedOffset(0),   { left: '10px' }, 'ease-in'),
+             keyframe(computedOffset(0.5), { left: '20px' }, 'ease-out'),
+             keyframe(computedOffset(1),   { left: '30px' }, 'ease-in-out')],
+  },
+  {
+    desc:   'a property-indexed keyframe with an array of easings that is too'
+            + ' short',
+    input:  { left: ['10px', '20px', '30px'],
+              easing: ['ease-in', 'ease-out'] },
+    output: [keyframe(computedOffset(0),   { left: '10px' }, 'ease-in'),
+             keyframe(computedOffset(0.5), { left: '20px' }, 'ease-out'),
+             keyframe(computedOffset(1),   { left: '30px' }, 'ease-in')],
+  },
+  {
+    desc:   'a property-indexed keyframe with a single-element array of'
+            + ' easings',
+    input:  { left: ['10px', '20px', '30px'], easing: ['ease-in'] },
+    output: [keyframe(computedOffset(0),   { left: '10px' }, 'ease-in'),
+             keyframe(computedOffset(0.5), { left: '20px' }, 'ease-in'),
+             keyframe(computedOffset(1),   { left: '30px' }, 'ease-in')],
+  },
+  {
+    desc:   'a property-indexed keyframe with an empty array of easings',
+    input:  { left: ['10px', '20px', '30px'], easing: [] },
+    output: [keyframe(computedOffset(0),   { left: '10px' }, 'linear'),
+             keyframe(computedOffset(0.5), { left: '20px' }, 'linear'),
+             keyframe(computedOffset(1),   { left: '30px' }, 'linear')],
+  },
+  {
+    desc:   'a property-indexed keyframe with an array of easings that is too'
+            + ' long',
+    input:  { left: ['10px', '20px', '30px'],
+              easing: ['steps(1)', 'steps(2)', 'steps(3)', 'steps(4)'] },
+    output: [keyframe(computedOffset(0),   { left: '10px' }, 'steps(1)'),
+             keyframe(computedOffset(0.5), { left: '20px' }, 'steps(2)'),
+             keyframe(computedOffset(1),   { left: '30px' }, 'steps(3)')],
+  },
+
+  // ----------- Property-indexed keyframes: composite handling -----------
+
+  {
+    desc:   'a property-indexed keyframe with a single composite operation',
+    input:  { left: ['10px', '20px', '30px'], composite: 'add' },
+    output: [keyframe(computedOffset(0),   { left: '10px' }, 'linear', 'add'),
+             keyframe(computedOffset(0.5), { left: '20px' }, 'linear', 'add'),
+             keyframe(computedOffset(1),   { left: '30px' }, 'linear', 'add')],
+  },
+  {
+    desc:   'a property-indexed keyframe with a composite array',
+    input:  { left: ['10px', '20px', '30px'],
+              composite: ['add', 'replace', 'accumulate'] },
+    output: [keyframe(computedOffset(0),   { left: '10px' },
+                      'linear', 'add'),
+             keyframe(computedOffset(0.5), { left: '20px' },
+                      'linear', 'replace'),
+             keyframe(computedOffset(1),   { left: '30px' },
+                      'linear', 'accumulate')],
+  },
+  {
+    desc:   'a property-indexed keyframe with a composite array that is too'
+            + ' short',
+    input:  { left: ['10px', '20px', '30px', '40px', '50px'],
+              composite: ['add', 'replace'] },
+    output: [keyframe(computedOffset(0),    { left: '10px' },
+                      'linear', 'add'),
+             keyframe(computedOffset(0.25), { left: '20px' },
+                      'linear', 'replace'),
+             keyframe(computedOffset(0.5),  { left: '30px' },
+                      'linear', 'add'),
+             keyframe(computedOffset(0.75), { left: '40px' },
+                      'linear', 'replace'),
+             keyframe(computedOffset(1),    { left: '50px' },
+                      'linear', 'add')],
+  },
+  {
+    desc:   'a property-indexed keyframe with a composite array that is too'
+            + ' long',
+    input:  { left: ['10px', '20px'],
+              composite: ['add', 'replace', 'accumulate'] },
+    output: [keyframe(computedOffset(0), { left: '10px' },
+                      'linear', 'add'),
+             keyframe(computedOffset(1), { left: '20px' },
+                      'linear', 'replace')],
+  },
+  {
+    desc:   'a property-indexed keyframe with a single-element composite array',
+    input:  { left: ['10px', '20px', '30px'],
+              composite: ['add'] },
+    output: [keyframe(computedOffset(0),   { left: '10px' }, 'linear', 'add'),
+             keyframe(computedOffset(0.5), { left: '20px' }, 'linear', 'add'),
+             keyframe(computedOffset(1),   { left: '30px' }, 'linear', 'add')],
+  },
+
+  // ----------- Keyframe sequence: property handling -----------
+
+  {
+    desc:   'a one property one keyframe sequence',
+    input:  [{ offset: 1, left: '10px' }],
+    output: [keyframe(offset(1), { left: '10px' })],
+  },
+  {
+    desc:   'a one property two keyframe sequence',
+    input:  [{ offset: 0, left: '10px' },
+             { offset: 1, left: '20px' }],
+    output: [keyframe(offset(0), { left: '10px' }),
+             keyframe(offset(1), { left: '20px' })],
+  },
+  {
+    desc:   'a two property two keyframe sequence',
+    input:  [{ offset: 0, left: '10px', top: '30px' },
+             { offset: 1, left: '20px', top: '40px' }],
+    output: [keyframe(offset(0), { left: '10px', top: '30px' }),
+             keyframe(offset(1), { left: '20px', top: '40px' })],
+  },
+  {
+    desc:   'a one shorthand property two keyframe sequence',
+    input:  [{ offset: 0, margin: '10px' },
+             { offset: 1, margin: '20px 30px 40px 50px' }],
+    output: [keyframe(offset(0), { margin: '10px' }),
+             keyframe(offset(1), { margin: '20px 30px 40px 50px' })],
+  },
+  {
+    desc:   'a two property (a shorthand and one of its component longhands)'
+            + ' two keyframe sequence',
+    input:  [{ offset: 0, margin: '10px', marginTop: '20px' },
+             { offset: 1, marginTop: '70px', margin: '30px 40px 50px 60px' }],
+    output: [keyframe(offset(0), { margin: '10px', marginTop: '20px' }),
+             keyframe(offset(1), { marginTop: '70px',
+                                   margin: '30px 40px 50px 60px' })],
+  },
+  {
+    desc:   'a two property keyframe sequence where one property is missing'
+            + ' from the first keyframe',
+    input:  [{ offset: 0, left: '10px' },
+             { offset: 1, left: '20px', top: '30px' }],
+    output: [keyframe(offset(0), { left: '10px' }),
+             keyframe(offset(1), { left: '20px', top: '30px' })],
+  },
+  {
+    desc:   'a two property keyframe sequence where one property is missing'
+            + ' from the last keyframe',
+    input:  [{ offset: 0, left: '10px', top: '20px' },
+             { offset: 1, left: '30px' }],
+    output: [keyframe(offset(0), { left: '10px', top: '20px' }),
+             keyframe(offset(1), { left: '30px' })],
+  },
+  {
+    desc:   'a one property two keyframe sequence that needs to stringify'
+            + ' its values',
+    input:  [{ offset: 0, opacity: 0 },
+             { offset: 1, opacity: 1 }],
+    output: [keyframe(offset(0), { opacity: '0' }),
+             keyframe(offset(1), { opacity: '1' })],
+  },
+  {
+    desc:   'a keyframe sequence with a CSS variable reference',
+    input:  [{ left: 'var(--dist)' },
+             { left: 'calc(var(--dist) + 100px)' }],
+    output: [keyframe(computedOffset(0), { left: 'var(--dist)' }),
+             keyframe(computedOffset(1), { left: 'calc(var(--dist) + 100px)' })]
+  },
+  {
+    desc:   'a keyframe sequence with a CSS variable reference in a shorthand'
+            + ' property',
+    input:  [{ margin: 'var(--dist)' },
+             { margin: 'calc(var(--dist) + 100px)' }],
+    output: [keyframe(computedOffset(0),
+                      { margin: 'var(--dist)' }),
+             keyframe(computedOffset(1),
+                      { margin: 'calc(var(--dist) + 100px)' })],
+  },
+  {
+    desc:   'a keyframe sequence with a CSS variable as its property',
+    input:  [{ '--custom': 'a' },
+             { '--custom': 'b' }],
+    output: [keyframe(computedOffset(0), { '--custom': 'a' }),
+             keyframe(computedOffset(1), { '--custom': 'b' })]
+  },
+
+  // ----------- Keyframe sequence: offset handling -----------
+
+  {
+    desc:   'a keyframe sequence with duplicate values for a given interior'
+            + ' offset',
+    input:  [{ offset: 0.0, left: '10px' },
+             { offset: 0.5, left: '20px' },
+             { offset: 0.5, left: '30px' },
+             { offset: 0.5, left: '40px' },
+             { offset: 1.0, left: '50px' }],
+    output: [keyframe(offset(0),   { left: '10px' }),
+             keyframe(offset(0.5), { left: '20px' }),
+             keyframe(offset(0.5), { left: '30px' }),
+             keyframe(offset(0.5), { left: '40px' }),
+             keyframe(offset(1),   { left: '50px' })],
+  },
+  {
+    desc:   'a keyframe sequence with duplicate values for offsets 0 and 1',
+    input:  [{ offset: 0, left: '10px' },
+             { offset: 0, left: '20px' },
+             { offset: 0, left: '30px' },
+             { offset: 1, left: '40px' },
+             { offset: 1, left: '50px' },
+             { offset: 1, left: '60px' }],
+    output: [keyframe(offset(0), { left: '10px' }),
+             keyframe(offset(0), { left: '20px' }),
+             keyframe(offset(0), { left: '30px' }),
+             keyframe(offset(1), { left: '40px' }),
+             keyframe(offset(1), { left: '50px' }),
+             keyframe(offset(1), { left: '60px' })],
+  },
+  {
+    desc:   'a two property four keyframe sequence',
+    input:  [{ offset: 0, left: '10px' },
+             { offset: 0, top: '20px' },
+             { offset: 1, top: '30px' },
+             { offset: 1, left: '40px' }],
+    output: [keyframe(offset(0), { left: '10px' }),
+             keyframe(offset(0), { top:  '20px' }),
+             keyframe(offset(1), { top:  '30px' }),
+             keyframe(offset(1), { left: '40px' })],
+  },
+  {
+    desc:   'a single keyframe sequence with omitted offset',
+    input:  [{ left: '10px' }],
+    output: [keyframe(computedOffset(1), { left: '10px' })],
+  },
+  {
+    desc:   'a single keyframe sequence with null offset',
+    input:  [{ offset: null, left: '10px' }],
+    output: [keyframe(computedOffset(1), { left: '10px' })],
+  },
+  {
+    desc:   'a single keyframe sequence with string offset',
+    input:  [{ offset: '0.5', left: '10px' }],
+    output: [keyframe(offset(0.5), { left: '10px' })],
+  },
+  {
+    desc:   'a one property keyframe sequence with some omitted offsets',
+    input:  [{ offset: 0.00, left: '10px' },
+             { offset: 0.25, left: '20px' },
+             { left: '30px' },
+             { left: '40px' },
+             { offset: 1.00, left: '50px' }],
+    output: [keyframe(offset(0),            { left: '10px' }),
+             keyframe(offset(0.25),         { left: '20px' }),
+             keyframe(computedOffset(0.5),  { left: '30px' }),
+             keyframe(computedOffset(0.75), { left: '40px' }),
+             keyframe(offset(1),            { left: '50px' })],
+  },
+  {
+    desc:   'a one property keyframe sequence with some null offsets',
+    input:  [{ offset: 0.00, left: '10px' },
+             { offset: 0.25, left: '20px' },
+             { offset: null, left: '30px' },
+             { offset: null, left: '40px' },
+             { offset: 1.00, left: '50px' }],
+    output: [keyframe(offset(0),            { left: '10px' }),
+             keyframe(offset(0.25),         { left: '20px' }),
+             keyframe(computedOffset(0.5),  { left: '30px' }),
+             keyframe(computedOffset(0.75), { left: '40px' }),
+             keyframe(offset(1),            { left: '50px' })],
+  },
+  {
+    desc:   'a two property keyframe sequence with some omitted offsets',
+    input:  [{ offset: 0.00, left: '10px', top: '20px' },
+             { offset: 0.25, left: '30px' },
+             { left: '40px' },
+             { left: '50px', top: '60px' },
+             { offset: 1.00, left: '70px', top: '80px' }],
+    output: [keyframe(offset(0),            { left: '10px', top: '20px' }),
+             keyframe(offset(0.25),         { left: '30px' }),
+             keyframe(computedOffset(0.5),  { left: '40px' }),
+             keyframe(computedOffset(0.75), { left: '50px', top: '60px' }),
+             keyframe(offset(1),            { left: '70px', top: '80px' })],
+  },
+  {
+    desc:   'a one property keyframe sequence with all omitted offsets',
+    input:  [{ left: '10px' },
+             { left: '20px' },
+             { left: '30px' },
+             { left: '40px' },
+             { left: '50px' }],
+    output: [keyframe(computedOffset(0),    { left: '10px' }),
+             keyframe(computedOffset(0.25), { left: '20px' }),
+             keyframe(computedOffset(0.5),  { left: '30px' }),
+             keyframe(computedOffset(0.75), { left: '40px' }),
+             keyframe(computedOffset(1),    { left: '50px' })],
+  },
+
+  // ----------- Keyframe sequence: easing handling -----------
+
+  {
+    desc:   'a keyframe sequence with different easing values, but the same'
+            + ' easing value for a given offset',
+    input:  [{ offset: 0.0, easing: 'ease',     left: '10px'},
+             { offset: 0.0, easing: 'ease',     top: '20px'},
+             { offset: 0.5, easing: 'linear',   left: '30px' },
+             { offset: 0.5, easing: 'linear',   top: '40px' },
+             { offset: 1.0, easing: 'step-end', left: '50px' },
+             { offset: 1.0, easing: 'step-end', top: '60px' }],
+    output: [keyframe(offset(0),   { left: '10px' }, 'ease'),
+             keyframe(offset(0),   { top:  '20px' }, 'ease'),
+             keyframe(offset(0.5), { left: '30px' }, 'linear'),
+             keyframe(offset(0.5), { top:  '40px' }, 'linear'),
+             keyframe(offset(1),   { left: '50px' }, 'steps(1)'),
+             keyframe(offset(1),   { top:  '60px' }, 'steps(1)')],
+  },
+
+  // ----------- Keyframe sequence: composite handling -----------
+
+  {
+    desc:   'a keyframe sequence with different composite values, but the'
+            + ' same composite value for a given offset',
+    input:  [{ offset: 0.0, composite: 'replace', left: '10px' },
+             { offset: 0.0, composite: 'replace', top: '20px' },
+             { offset: 0.5, composite: 'add',     left: '30px' },
+             { offset: 0.5, composite: 'add',     top: '40px' },
+             { offset: 1.0, composite: 'replace', left: '50px' },
+             { offset: 1.0, composite: 'replace', top: '60px' }],
+    output: [keyframe(offset(0),   { left: '10px' }, 'linear', 'replace'),
+             keyframe(offset(0),   { top:  '20px' }, 'linear', 'replace'),
+             keyframe(offset(0.5), { left: '30px' }, 'linear', 'add'),
+             keyframe(offset(0.5), { top:  '40px' }, 'linear', 'add'),
+             keyframe(offset(1),   { left: '50px' }, 'linear', 'replace'),
+             keyframe(offset(1),   { top:  '60px' }, 'linear', 'replace')],
+  },
+];
+
+const gInvalidKeyframesTests = [
+  {
+    desc:  'keyframes with an out-of-bounded positive offset',
+    input: [ { opacity: 0 },
+             { opacity: 0.5, offset: 2 },
+             { opacity: 1 } ],
+  },
+  {
+    desc:  'keyframes with an out-of-bounded negative offset',
+    input: [ { opacity: 0 },
+             { opacity: 0.5, offset: -1 },
+             { opacity: 1 } ],
+  },
+  {
+    desc:  'property-indexed keyframes not loosely sorted by offset',
+    input: { opacity: [ 0, 1 ], offset: [ 1, 0 ] },
+  },
+  {
+    desc:  'property-indexed keyframes not loosely sorted by offset even'
+           + ' though not all offsets are specified',
+    input: { opacity: [ 0, 0.5, 1 ], offset: [ 0.5, 0 ] },
+  },
+  {
+    desc:  'property-indexed keyframes with offsets out of range',
+    input: { opacity: [ 0, 0.5, 1 ], offset: [ 0, 1.1 ] },
+  },
+  {
+    desc:  'keyframes not loosely sorted by offset',
+    input: [ { opacity: 0, offset: 1 },
+             { opacity: 1, offset: 0 } ],
+  },
+  {
+    desc:  'property-indexed keyframes with an invalid easing value',
+    input: { opacity: [ 0, 0.5, 1 ],
+             easing: 'inherit' },
+  },
+  {
+    desc:  'property-indexed keyframes with an invalid easing value as one of'
+           + ' the array values',
+    input: { opacity: [ 0, 0.5, 1 ],
+             easing: [ 'ease-in', 'inherit' ] },
+  },
+  {
+    desc:   'property-indexed keyframe with an invalid easing in the unused'
+            + ' part of the array of easings',
+    input:  { left: ['10px', '20px', '30px'],
+              easing: ['steps(1)', 'steps(2)', 'steps(3)', 'invalid'] },
+  },
+  {
+    desc:   'empty property-indexed keyframe with an invalid easing',
+    input:  { easing: 'invalid' },
+  },
+  {
+    desc:   'empty property-indexed keyframe with an invalid easings array',
+    input:  { easing: ['invalid'] },
+  },
+  {
+    desc:  'a keyframe sequence with an invalid easing value',
+    input: [ { opacity: 0, easing: 'jumpy' },
+             { opacity: 1 } ],
+  },
+  {
+    desc:  'property-indexed keyframes with an invalid composite value',
+    input: { opacity: [ 0, 0.5, 1 ],
+             composite: 'alternate' },
+  },
+  {
+    desc:  'property-indexed keyframes with an invalid composite value as one'
+           + ' of the array values',
+    input: { opacity: [ 0, 0.5, 1 ],
+             composite: [ 'add', 'alternate' ] },
+  },
+  {
+    desc:  'keyframes with an invalid composite value',
+    input: [ { opacity: 0, composite: 'alternate' },
+             { opacity: 1 } ],
+  },
+];
+
+
+const gKeyframeSerializationTests = [
+  {
+    desc:   'a on keyframe sequence which requires value serilaization of its'
+            + ' values',
+    input:  [{offset: 0, backgroundColor: 'rgb(1,2,3)' }],
+    output: [keyframe(offset(0), { backgroundColor: 'rgb(1, 2, 3)' })],
+  },
+];
+
+
+
+// ------------------------------
+//  KeyframeEffectOptions
+// ------------------------------
+
+const gKeyframeEffectOptionTests = [
+  {
+    desc:     'an empty KeyframeEffectOptions object',
+    input:    { },
+    expected: { },
+  },
+  {
+    desc:     'a normal KeyframeEffectOptions object',
+    input:    { delay: 1000,
+                fill: 'auto',
+                iterations: 5.5,
+                duration: 'auto',
+                direction: 'alternate' },
+    expected: { delay: 1000,
+                fill: 'auto',
+                iterations: 5.5,
+                duration: 'auto',
+                direction: 'alternate' },
+  },
+  {
+    desc:     'a double value',
+    input:    3000,
+    expected: { duration: 3000 },
+  },
+  {
+    desc:     '+Infinity',
+    input:    Infinity,
+    expected: { duration: Infinity },
+  },
+  {
+    desc:     'an Infinity duration',
+    input:    { duration: Infinity },
+    expected: { duration: Infinity },
+  },
+  {
+    desc:     'an auto duration',
+    input:    { duration: 'auto' },
+    expected: { duration: 'auto' },
+  },
+  {
+    desc:     'an Infinity iterations',
+    input:    { iterations: Infinity },
+    expected: { iterations: Infinity },
+  },
+  {
+    desc:     'an auto fill',
+    input:    { fill: 'auto' },
+    expected: { fill: 'auto' },
+  },
+  {
+    desc:     'a forwards fill',
+    input:    { fill: 'forwards' },
+    expected: { fill: 'forwards' },
+  }
+];
+
+const gInvalidKeyframeEffectOptionTests = [
+  { desc: '-Infinity', input: -Infinity },
+  { desc: 'NaN', input: NaN },
+  { desc: 'a negative value', input: -1 },
+  { desc: 'a negative Infinity duration', input: { duration: -Infinity } },
+  { desc: 'a NaN duration', input: { duration: NaN } },
+  { desc: 'a negative duration', input: { duration: -1 } },
+  { desc: 'a string duration', input: { duration: 'merrychristmas' } },
+  { desc: 'a negative Infinity iterations', input: { iterations: -Infinity} },
+  { desc: 'a NaN iterations', input: { iterations: NaN } },
+  { desc: 'a negative iterations', input: { iterations: -1 } },
+  { desc: 'a blank easing', input: { easing: '' } },
+  { desc: 'an unrecognized easing', input: { easing: 'unrecognised' } },
+  { desc: 'an \'initial\' easing', input: { easing: 'initial' } },
+  { desc: 'an \'inherit\' easing', input: { easing: 'inherit' } },
+  { desc: 'a variable easing', input: { easing: 'var(--x)' } },
+  { desc: 'a multi-value easing', input: { easing: 'ease-in-out, ease-out' } },
+];
+
+// There is currently only ScrollTimeline that can be constructed and used here
+// beyond document timeline. Given that ScrollTimeline is not stable as of yet
+// it's tested in scroll-animations/animation-with-animatable-interface.html.
+const gAnimationTimelineTests = [
+  {
+    expectedTimeline: document.timeline,
+    expectedTimelineDescription: 'document.timeline',
+    description: 'with no timeline parameter'
+  },
+  {
+    timeline: undefined,
+    expectedTimeline: document.timeline,
+    expectedTimelineDescription: 'document.timeline',
+    description: 'with undefined timeline'
+  },
+  {
+    timeline: null,
+    expectedTimeline: null,
+    expectedTimelineDescription: 'null',
+    description: 'with null timeline'
+  },
+  {
+    timeline: document.timeline,
+    expectedTimeline: document.timeline,
+    expectedTimelineDescription: 'document.timeline',
+    description: 'with DocumentTimeline'
+  },
+];
\ No newline at end of file
diff --git a/testing/web-platform/tests/web-animations/resources/keyframe-utils.js b/testing/web-platform/tests/web-animations/resources/keyframe-utils.js
new file mode 100644
index 0000000000..60fb9781a0
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/resources/keyframe-utils.js
@@ -0,0 +1,51 @@
+'use strict';
+
+// =======================================
+//
+// Utility functions for testing keyframes
+//
+// =======================================
+
+
+// ------------------------------
+//  Helper functions
+// ------------------------------
+
+/**
+ * Test equality between two lists of computed keyframes
+ * @param {Array.<ComputedKeyframe>} a - actual computed keyframes
+ * @param {Array.<ComputedKeyframe>} b - expected computed keyframes
+ */
+function assert_frame_lists_equal(a, b, message) {
+  assert_equals(a.length, b.length, `number of frames: ${(message || '')}`);
+  for (let i = 0; i < Math.min(a.length, b.length); i++) {
+    assert_frames_equal(a[i], b[i],
+                        `ComputedKeyframe #${i}: ${(message || '')}`);
+  }
+}
+
+/** Helper for assert_frame_lists_equal */
+function assert_frames_equal(a, b, name) {
+  assert_equals(Object.keys(a).sort().toString(),
+                Object.keys(b).sort().toString(),
+                `properties on ${name} should match`);
+  // Iterates sorted keys to ensure stable failures.
+  for (const p of Object.keys(a).sort()) {
+    if (typeof b[p] == 'number')
+      assert_approx_equals(a[p], b[p], 1e-6, `value for '${p}' on ${name}`);
+    else if (typeof b[p] == 'object') {
+      for (const key in b[p]) {
+        if (typeof b[p][key] == 'number') {
+          assert_approx_equals(a[p][key], b[p][key], 1e-6,
+                               `value for '${p}.${key}' on ${name}`);
+        } else {
+          assert_equals((a[p][key] || 'undefined').toString(),
+                         b[p][key].toString(),
+                        `value for '${p}.${key}' on ${name}`);
+        }
+      }
+    }
+    else
+      assert_equals(a[p], b[p], `value for '${p}' on ${name}`);
+  }
+}
diff --git a/testing/web-platform/tests/web-animations/resources/timing-override.js b/testing/web-platform/tests/web-animations/resources/timing-override.js
new file mode 100644
index 0000000000..a1d65030f0
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/resources/timing-override.js
@@ -0,0 +1,18 @@
+// Firefox implements unconditional clamping of 20 usec; and for certain web-animation tests,
+// we hit some test failures because the Time Precision is too small. We override these functions
+// on a per-test basis for Firefox only.
+if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
+  window.assert_times_equal = (actual, expected, description) => {
+    let TIME_PRECISION = 0.02;
+    assert_approx_equals(actual, expected, TIME_PRECISION * 2, description);
+  };
+
+  window.assert_time_equals_literal = (actual, expected, description) => {
+    let TIME_PRECISION = 0.02;
+    if (Math.abs(expected) === Infinity) {
+      assert_equals(actual, expected, description);
+    } else {
+      assert_approx_equals(actual, expected, TIME_PRECISION, description);
+    }
+  }
+}
diff --git a/testing/web-platform/tests/web-animations/resources/timing-tests.js b/testing/web-platform/tests/web-animations/resources/timing-tests.js
new file mode 100644
index 0000000000..4b0f021f74
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/resources/timing-tests.js
@@ -0,0 +1,46 @@
+'use strict';
+
+// =================================
+//
+// Common timing parameter test data
+//
+// =================================
+
+
+// ------------------------------
+//  Delay values
+// ------------------------------
+
+const gBadDelayValues = [
+  NaN, Infinity, -Infinity
+];
+
+// ------------------------------
+//  Duration values
+// ------------------------------
+
+const gGoodDurationValues = [
+  { specified: 123.45, computed: 123.45 },
+  { specified: 'auto', computed: 0 },
+  { specified: Infinity, computed: Infinity },
+];
+
+const gBadDurationValues = [
+  -1, NaN, -Infinity, 'abc', '100'
+];
+
+// ------------------------------
+//  iterationStart values
+// ------------------------------
+
+const gBadIterationStartValues = [
+  -1, NaN, Infinity, -Infinity
+];
+
+// ------------------------------
+//  iterations values
+// ------------------------------
+
+const gBadIterationsValues = [
+  -1, -Infinity, NaN
+];
diff --git a/testing/web-platform/tests/web-animations/resources/timing-utils.js b/testing/web-platform/tests/web-animations/resources/timing-utils.js
new file mode 100644
index 0000000000..fba62a1f6d
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/resources/timing-utils.js
@@ -0,0 +1,52 @@
+'use strict';
+
+// =======================================
+//
+// Utility functions for testing timing
+//
+// =======================================
+
+
+// ------------------------------
+//  Helper functions
+// ------------------------------
+
+// Utility function to check that a subset of timing properties have their
+// default values.
+function assert_default_timing_except(effect, propertiesToSkip) {
+  const defaults = {
+    delay: 0,
+    endDelay: 0,
+    fill: 'auto',
+    iterationStart: 0,
+    iterations: 1,
+    duration: 'auto',
+    direction: 'normal',
+    easing: 'linear',
+  };
+
+  for (const prop of Object.keys(defaults)) {
+    if (propertiesToSkip.includes(prop)) {
+      continue;
+    }
+
+    assert_equals(
+      effect.getTiming()[prop],
+      defaults[prop],
+      `${prop} parameter has default value:`
+    );
+  }
+}
+
+function waitForAnimationTime(animation, time) {
+  return new Promise((resolve) => {
+    function raf() {
+      if (animation.currentTime < time) {
+        requestAnimationFrame(raf);
+      } else {
+        resolve();
+      }
+    }
+    requestAnimationFrame(raf);
+  });
+}
diff --git a/testing/web-platform/tests/web-animations/resources/xhr-doc.py b/testing/web-platform/tests/web-animations/resources/xhr-doc.py
new file mode 100644
index 0000000000..0023a44e22
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/resources/xhr-doc.py
@@ -0,0 +1,5 @@
+def main(request, response):
+    headers = [(b"Content-type", b"text/html;charset=utf-8")]
+    content = u"<!doctype html><div id=test></div>"
+
+    return headers, content