From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- .../tests/web-animations/resources/easing-tests.js | 121 +++ .../tests/web-animations/resources/effect-tests.js | 75 ++ .../web-animations/resources/keyframe-tests.js | 827 +++++++++++++++++++++ .../web-animations/resources/keyframe-utils.js | 51 ++ .../web-animations/resources/timing-override.js | 18 + .../tests/web-animations/resources/timing-tests.js | 46 ++ .../tests/web-animations/resources/timing-utils.js | 52 ++ .../tests/web-animations/resources/xhr-doc.py | 5 + 8 files changed, 1195 insertions(+) create mode 100644 testing/web-platform/tests/web-animations/resources/easing-tests.js create mode 100644 testing/web-platform/tests/web-animations/resources/effect-tests.js create mode 100644 testing/web-platform/tests/web-animations/resources/keyframe-tests.js create mode 100644 testing/web-platform/tests/web-animations/resources/keyframe-utils.js create mode 100644 testing/web-platform/tests/web-animations/resources/timing-override.js create mode 100644 testing/web-platform/tests/web-animations/resources/timing-tests.js create mode 100644 testing/web-platform/tests/web-animations/resources/timing-utils.js create mode 100644 testing/web-platform/tests/web-animations/resources/xhr-doc.py (limited to 'testing/web-platform/tests/web-animations/resources') 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.} a - actual computed keyframes + * @param {Array.} 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"
" + + return headers, content -- cgit v1.2.3