--- a/testing/web-platform/tests/web-animations/resources/keyframe-tests.js
+++ b/testing/web-platform/tests/web-animations/resources/keyframe-tests.js
@@ -52,16 +52,19 @@ const keyframe = (offset, props, easing=
Object.assign(result, offset, props, { easing });
if (composite) {
result.composite = composite;
}
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'
@@ -149,16 +152,19 @@ const gKeyframesTests = [
},
{
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), {})]
},
+
+ // ----------- 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' },
@@ -185,16 +191,60 @@ const gKeyframesTests = [
+ ' 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)' })],
+ },
+
+ // ----------- 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' }),
@@ -291,138 +341,54 @@ const gKeyframesTests = [
{ 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')],
},
- {
- 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 where shorthand precedes longhand',
- input: [{ offset: 0, margin: '10px', marginRight: '20px' },
- { offset: 1, margin: '30px' }],
- output: [keyframe(offset(0), { margin: '10px', marginRight: '20px' }),
- keyframe(offset(1), { margin: '30px' })],
- },
- {
- desc: 'a keyframe sequence where longhand precedes shorthand',
- input: [{ offset: 0, marginRight: '20px', margin: '10px' },
- { offset: 1, margin: '30px' }],
- output: [keyframe(offset(0), { marginRight: '20px', margin: '10px' }),
- keyframe(offset(1), { margin: '30px' })],
- },
- {
- desc: 'a keyframe sequence where lesser shorthand precedes greater'
- + ' shorthand',
- input: [{ offset: 0,
- borderLeft: '1px solid rgb(1, 2, 3)',
- border: '2px dotted rgb(4, 5, 6)' },
- { offset: 1, border: '3px dashed rgb(7, 8, 9)' }],
- output: [keyframe(offset(0), { borderLeft: '1px solid rgb(1, 2, 3)',
- border: '2px dotted rgb(4, 5, 6)' }),
- keyframe(offset(1), { border: '3px dashed rgb(7, 8, 9)' })],
- },
- {
- desc: 'a keyframe sequence where greater shorthand precedes lesser'
- + ' shorthand',
- input: [{ offset: 0, border: '2px dotted rgb(4, 5, 6)',
- borderLeft: '1px solid rgb(1, 2, 3)' },
- { offset: 1, border: '3px dashed rgb(7, 8, 9)' }],
- output: [keyframe(offset(0), { borderLeft: '1px solid rgb(1, 2, 3)',
- border: '2px dotted rgb(4, 5, 6)' }),
- keyframe(offset(1), { border: '3px dashed rgb(7, 8, 9)' })],
- },
- {
- 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 keyframe sequence with repeated values at offset 1 with'
- + ' different easings',
- input: [{ offset: 0.0, left: '100px', easing: 'ease' },
- { offset: 0.0, left: '200px', easing: 'ease' },
- { offset: 0.5, left: '300px', easing: 'linear' },
- { offset: 1.0, left: '400px', easing: 'ease-out' },
- { offset: 1.0, left: '500px', easing: 'step-end' }],
- output: [keyframe(offset(0), { left: '100px' }, 'ease'),
- keyframe(offset(0), { left: '200px' }, 'ease'),
- keyframe(offset(0.5), { left: '300px' }, 'linear'),
- keyframe(offset(1), { left: '400px' }, 'ease-out'),
- keyframe(offset(1), { left: '500px' }, 'steps(1)')],
- },
];
const gInvalidKeyframesTests = [
{
desc: 'keyframes with an out-of-bounded positive offset',
input: [ { opacity: 0 },
{ opacity: 0.5, offset: 2 },
{ opacity: 1 } ],