mirror of
https://github.com/servo/servo.git
synced 2025-08-13 01:15:34 +01:00
Update web-platform-tests to revision be5419e845d39089ba6dc338c1bd0fa279108317
This commit is contained in:
Josh Matthews
parent
aa199307c8
commit
2b6f573eb5
3440 changed files with 109438 additions and 41750 deletions
|
|
@ -1,8 +1,8 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>KeyframeEffect.composite tests</title>
|
||||
<title>KeyframeEffect.composite</title>
|
||||
<link rel="help"
|
||||
href="https://w3c.github.io/web-animations/#dom-keyframeeffect-composite">
|
||||
href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-composite">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
|
|
@ -11,34 +11,34 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
test(t => {
|
||||
const anim = createDiv(t).animate(null);
|
||||
assert_equals(anim.effect.composite, 'replace',
|
||||
'The default value should be replace');
|
||||
}, 'Default value');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
test(t => {
|
||||
const anim = createDiv(t).animate(null);
|
||||
anim.effect.composite = 'add';
|
||||
assert_equals(anim.effect.composite, 'add',
|
||||
'The effect composite value should be replaced');
|
||||
}, 'Change composite value');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate({ left: '10px' });
|
||||
test(t => {
|
||||
const anim = createDiv(t).animate({ left: '10px' });
|
||||
|
||||
anim.effect.composite = 'add';
|
||||
var keyframes = anim.effect.getKeyframes();
|
||||
const keyframes = anim.effect.getKeyframes();
|
||||
assert_equals(keyframes[0].composite, undefined,
|
||||
'unspecified keyframe composite value should be absent even ' +
|
||||
'if effect composite is set');
|
||||
}, 'Unspecified keyframe composite value when setting effect composite');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate({ left: '10px', composite: 'replace' });
|
||||
test(t => {
|
||||
const anim = createDiv(t).animate({ left: '10px', composite: 'replace' });
|
||||
|
||||
anim.effect.composite = 'add';
|
||||
var keyframes = anim.effect.getKeyframes();
|
||||
const keyframes = anim.effect.getKeyframes();
|
||||
assert_equals(keyframes[0].composite, 'replace',
|
||||
'specified keyframe composite value should not be overridden ' +
|
||||
'by setting effect composite');
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<meta charset=utf-8>
|
||||
<title>KeyframeEffect and KeyframeEffectReadOnly constructor</title>
|
||||
<link rel="help"
|
||||
href="https://w3c.github.io/web-animations/#dom-keyframeeffect-keyframeeffect">
|
||||
href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-keyframeeffect">
|
||||
<link rel="help"
|
||||
href="https://w3c.github.io/web-animations/#dom-keyframeeffectreadonly-keyframeeffectreadonly">
|
||||
href="https://drafts.csswg.org/web-animations/#dom-keyframeeffectreadonly-keyframeeffectreadonly">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
|
|
@ -19,16 +19,16 @@
|
|||
|
||||
const target = document.getElementById('target');
|
||||
|
||||
test(function(t) {
|
||||
gEmptyKeyframeListTests.forEach(function(frames) {
|
||||
test(t => {
|
||||
for (const frames of gEmptyKeyframeListTests) {
|
||||
assert_equals(new KeyframeEffectReadOnly(target, frames)
|
||||
.getKeyframes().length,
|
||||
0, 'number of frames for ' + JSON.stringify(frames));
|
||||
});
|
||||
0, `number of frames for ${JSON.stringify(frames)}`);
|
||||
}
|
||||
}, 'A KeyframeEffectReadOnly can be constructed with no frames');
|
||||
|
||||
test(function(t) {
|
||||
gEasingParsingTests.forEach(function(subtest) {
|
||||
test(t => {
|
||||
for (const subtest of gEasingParsingTests) {
|
||||
const easing = subtest[0];
|
||||
const expected = subtest[1];
|
||||
const effect = new KeyframeEffectReadOnly(target, {
|
||||
|
|
@ -36,98 +36,96 @@ test(function(t) {
|
|||
}, { easing: easing });
|
||||
assert_equals(effect.timing.easing, expected,
|
||||
`resulting easing for '${easing}'`);
|
||||
});
|
||||
}
|
||||
}, 'easing values are parsed correctly when passed to the ' +
|
||||
'KeyframeEffectReadOnly constructor in KeyframeEffectOptions');
|
||||
|
||||
test(function(t) {
|
||||
gInvalidEasings.forEach(invalidEasing => {
|
||||
test(t => {
|
||||
for (const invalidEasing of gInvalidEasings) {
|
||||
assert_throws(new TypeError, () => {
|
||||
new KeyframeEffectReadOnly(target, null, { easing: invalidEasing });
|
||||
}, `TypeError is thrown for easing '${invalidEasing}'`);
|
||||
});
|
||||
}
|
||||
}, 'Invalid easing values are correctly rejected when passed to the ' +
|
||||
'KeyframeEffectReadOnly constructor in KeyframeEffectOptions');
|
||||
|
||||
test(function(t) {
|
||||
const getKeyframe = function(composite) {
|
||||
return { left: [ '10px', '20px' ], composite: composite };
|
||||
};
|
||||
gGoodKeyframeCompositeValueTests.forEach(function(composite) {
|
||||
test(t => {
|
||||
const getKeyframe =
|
||||
composite => ({ left: [ '10px', '20px' ], composite: composite });
|
||||
for (const composite of gGoodKeyframeCompositeValueTests) {
|
||||
const effect = new KeyframeEffectReadOnly(target, getKeyframe(composite));
|
||||
assert_equals(effect.getKeyframes()[0].composite, composite,
|
||||
`resulting composite for '${composite}'`);
|
||||
});
|
||||
gBadCompositeValueTests.forEach(function(composite) {
|
||||
assert_throws(new TypeError, function() {
|
||||
}
|
||||
for (const composite of gBadCompositeValueTests) {
|
||||
assert_throws(new TypeError, () => {
|
||||
new KeyframeEffectReadOnly(target, getKeyframe(composite));
|
||||
});
|
||||
});
|
||||
}
|
||||
}, 'composite values are parsed correctly when passed to the ' +
|
||||
'KeyframeEffectReadOnly constructor in property-indexed keyframes');
|
||||
|
||||
test(function(t) {
|
||||
const getKeyframes = function(composite) {
|
||||
return [
|
||||
test(t => {
|
||||
const getKeyframes = composite =>
|
||||
[
|
||||
{ offset: 0, left: '10px', composite: composite },
|
||||
{ offset: 1, left: '20px' }
|
||||
];
|
||||
};
|
||||
gGoodKeyframeCompositeValueTests.forEach(function(composite) {
|
||||
for (const composite of gGoodKeyframeCompositeValueTests) {
|
||||
const effect = new KeyframeEffectReadOnly(target, getKeyframes(composite));
|
||||
assert_equals(effect.getKeyframes()[0].composite, composite,
|
||||
`resulting composite for '${composite}'`);
|
||||
});
|
||||
gBadCompositeValueTests.forEach(function(composite) {
|
||||
assert_throws(new TypeError, function() {
|
||||
}
|
||||
for (const composite of gBadCompositeValueTests) {
|
||||
assert_throws(new TypeError, () => {
|
||||
new KeyframeEffectReadOnly(target, getKeyframes(composite));
|
||||
});
|
||||
});
|
||||
}
|
||||
}, 'composite values are parsed correctly when passed to the ' +
|
||||
'KeyframeEffectReadOnly constructor in regular keyframes');
|
||||
|
||||
test(function(t) {
|
||||
gGoodOptionsCompositeValueTests.forEach(function(composite) {
|
||||
test(t => {
|
||||
for (const composite of gGoodOptionsCompositeValueTests) {
|
||||
const effect = new KeyframeEffectReadOnly(target, {
|
||||
left: ['10px', '20px']
|
||||
}, { composite: composite });
|
||||
assert_equals(effect.getKeyframes()[0].composite, undefined,
|
||||
`resulting composite for '${composite}'`);
|
||||
});
|
||||
gBadCompositeValueTests.forEach(function(composite) {
|
||||
assert_throws(new TypeError, function() {
|
||||
}
|
||||
for (const composite of gBadCompositeValueTests) {
|
||||
assert_throws(new TypeError, () => {
|
||||
new KeyframeEffectReadOnly(target, {
|
||||
left: ['10px', '20px']
|
||||
}, { composite: composite });
|
||||
});
|
||||
});
|
||||
}
|
||||
}, 'composite value is absent if the composite operation specified on the ' +
|
||||
'keyframe effect is being used');
|
||||
|
||||
gKeyframesTests.forEach(function(subtest) {
|
||||
test(function(t) {
|
||||
for (const subtest of gKeyframesTests) {
|
||||
test(t => {
|
||||
const effect = new KeyframeEffectReadOnly(target, subtest.input);
|
||||
assert_frame_lists_equal(effect.getKeyframes(), subtest.output);
|
||||
}, `A KeyframeEffectReadOnly can be constructed with ${subtest.desc}`);
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
const effect = new KeyframeEffectReadOnly(target, subtest.input);
|
||||
const secondEffect =
|
||||
new KeyframeEffectReadOnly(target, effect.getKeyframes());
|
||||
assert_frame_lists_equal(secondEffect.getKeyframes(),
|
||||
effect.getKeyframes());
|
||||
}, `A KeyframeEffectReadOnly constructed with ${subtest.desc} roundtrips`);
|
||||
});
|
||||
}
|
||||
|
||||
gInvalidKeyframesTests.forEach(function(subtest) {
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
for (const subtest of gInvalidKeyframesTests) {
|
||||
test(t => {
|
||||
assert_throws(new TypeError, () => {
|
||||
new KeyframeEffectReadOnly(target, subtest.input);
|
||||
});
|
||||
}, `KeyframeEffectReadOnly constructor throws with ${subtest.desc}`);
|
||||
});
|
||||
}
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
const effect = new KeyframeEffectReadOnly(target,
|
||||
{ left: ['10px', '20px'] });
|
||||
|
||||
|
|
@ -147,8 +145,8 @@ test(function(t) {
|
|||
}, 'A KeyframeEffectReadOnly constructed without any ' +
|
||||
'KeyframeEffectOptions object');
|
||||
|
||||
gKeyframeEffectOptionTests.forEach(function(subtest) {
|
||||
test(function(t) {
|
||||
for (const subtest of gKeyframeEffectOptionTests) {
|
||||
test(t => {
|
||||
const effect = new KeyframeEffectReadOnly(target,
|
||||
{ left: ['10px', '20px'] },
|
||||
subtest.input);
|
||||
|
|
@ -172,19 +170,19 @@ gKeyframeEffectOptionTests.forEach(function(subtest) {
|
|||
'timing direction');
|
||||
|
||||
}, `A KeyframeEffectReadOnly constructed by ${subtest.desc}`);
|
||||
});
|
||||
}
|
||||
|
||||
gInvalidKeyframeEffectOptionTests.forEach(function(subtest) {
|
||||
test(function(t) {
|
||||
assert_throws(new TypeError, function() {
|
||||
for (const subtest of gInvalidKeyframeEffectOptionTests) {
|
||||
test(t => {
|
||||
assert_throws(new TypeError, () => {
|
||||
new KeyframeEffectReadOnly(target,
|
||||
{ left: ['10px', '20px'] },
|
||||
subtest.input);
|
||||
});
|
||||
}, `Invalid KeyframeEffectReadOnly option by ${subtest.desc}`);
|
||||
});
|
||||
}
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
const effect = new KeyframeEffectReadOnly(null,
|
||||
{ left: ['10px', '20px'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
|
|
@ -193,10 +191,10 @@ test(function(t) {
|
|||
'Effect created with null target has correct target');
|
||||
}, 'A KeyframeEffectReadOnly constructed with null target');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
const test_error = { name: 'test' };
|
||||
|
||||
assert_throws(test_error, function() {
|
||||
assert_throws(test_error, () => {
|
||||
new KeyframeEffect(target, { get left() { throw test_error }})
|
||||
});
|
||||
}, 'KeyframeEffect constructor propagates exceptions generated by accessing'
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<meta charset=utf-8>
|
||||
<title>KeyframeEffect and KeyframeEffectReadOnly copy constructor</title>
|
||||
<link rel="help"
|
||||
href="https://w3c.github.io/web-animations/#dom-keyframeeffect-keyframeeffect-source">
|
||||
href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-keyframeeffect-source">
|
||||
<link rel="help"
|
||||
href="https://w3c.github.io/web-animations/#dom-keyframeeffectreadonly-keyframeeffectreadonly-source">
|
||||
href="https://drafts.csswg.org/web-animations/#dom-keyframeeffectreadonly-keyframeeffectreadonly-source">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
|
|
@ -13,13 +13,13 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
const effect = new KeyframeEffectReadOnly(createDiv(t), null);
|
||||
const copiedEffect = new KeyframeEffectReadOnly(effect);
|
||||
assert_equals(copiedEffect.target, effect.target, 'same target');
|
||||
}, 'Copied KeyframeEffectReadOnly has the same target');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
const effect =
|
||||
new KeyframeEffectReadOnly(null,
|
||||
[ { marginLeft: '0px' },
|
||||
|
|
@ -52,7 +52,7 @@ test(function(t) {
|
|||
}
|
||||
}, 'Copied KeyframeEffectReadOnly has the same keyframes');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
const effect =
|
||||
new KeyframeEffectReadOnly(null, null,
|
||||
{ iterationComposite: 'accumulate' });
|
||||
|
|
@ -64,7 +64,7 @@ test(function(t) {
|
|||
'same compositeOperation');
|
||||
}, 'Copied KeyframeEffectReadOnly has the same KeyframeEffectOptions');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
const effect = new KeyframeEffectReadOnly(null, null,
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
delay: -1 * MS_PER_SEC,
|
||||
|
|
@ -90,7 +90,7 @@ test(function(t) {
|
|||
assert_equals(timingA.easing, timingB.easing, 'same easing');
|
||||
}, 'Copied KeyframeEffectReadOnly has the same timing content');
|
||||
|
||||
test(function(t) {
|
||||
test(t => {
|
||||
const effect = new KeyframeEffectReadOnly(createDiv(t), null);
|
||||
assert_equals(effect.constructor.name, 'KeyframeEffectReadOnly');
|
||||
assert_equals(effect.timing.constructor.name,
|
||||
|
|
|
|||
|
|
@ -1,212 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>KeyframeEffectReadOnly getComputedTiming() tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animationeffectreadonly-getcomputedtiming">
|
||||
<link rel="author" title="Boris Chiou" href="mailto:boris.chiou@gmail.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
var target = document.getElementById("target");
|
||||
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffectReadOnly(target,
|
||||
{ left: ["10px", "20px"] });
|
||||
|
||||
var ct = effect.getComputedTiming();
|
||||
assert_equals(ct.delay, 0, "computed delay");
|
||||
assert_equals(ct.fill, "none", "computed fill");
|
||||
assert_equals(ct.iterations, 1.0, "computed iterations");
|
||||
assert_equals(ct.duration, 0, "computed duration");
|
||||
assert_equals(ct.direction, "normal", "computed direction");
|
||||
}, "values of getComputedTiming() when a KeyframeEffectReadOnly is " +
|
||||
"constructed without any KeyframeEffectOptions object");
|
||||
|
||||
var gGetComputedTimingTests = [
|
||||
{ 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: "none",
|
||||
iterations: 5.5,
|
||||
duration: 0,
|
||||
direction: "alternate" } },
|
||||
{ desc: "a double value",
|
||||
input: 3000,
|
||||
timing: { duration: 3000 },
|
||||
expected: { delay: 0,
|
||||
fill: "none",
|
||||
iterations: 1,
|
||||
duration: 3000,
|
||||
direction: "normal" } },
|
||||
{ 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: 0 } },
|
||||
{ desc: "an Infinity iterations",
|
||||
input: { iterations: Infinity },
|
||||
expected: { iterations: Infinity } },
|
||||
{ desc: "an auto fill",
|
||||
input: { fill: "auto" },
|
||||
expected: { fill: "none" } },
|
||||
{ desc: "a forwards fill",
|
||||
input: { fill: "forwards" },
|
||||
expected: { fill: "forwards" } }
|
||||
];
|
||||
|
||||
gGetComputedTimingTests.forEach(function(stest) {
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffectReadOnly(target,
|
||||
{ left: ["10px", "20px"] },
|
||||
stest.input);
|
||||
|
||||
// Helper function to provide default expected values when the test does
|
||||
// not supply them.
|
||||
var expected = function(field, defaultValue) {
|
||||
return field in stest.expected ? stest.expected[field] : defaultValue;
|
||||
};
|
||||
|
||||
var ct = effect.getComputedTiming();
|
||||
assert_equals(ct.delay, expected("delay", 0),
|
||||
"computed delay");
|
||||
assert_equals(ct.fill, expected("fill", "none"),
|
||||
"computed fill");
|
||||
assert_equals(ct.iterations, expected("iterations", 1),
|
||||
"computed iterations");
|
||||
assert_equals(ct.duration, expected("duration", 0),
|
||||
"computed duration");
|
||||
assert_equals(ct.direction, expected("direction", "normal"),
|
||||
"computed direction");
|
||||
|
||||
}, "values of getComputedTiming() when a KeyframeEffectReadOnly is " +
|
||||
"constructed by " + stest.desc);
|
||||
});
|
||||
|
||||
var gActiveDurationTests = [
|
||||
{ desc: "an empty KeyframeEffectOptions object",
|
||||
input: { },
|
||||
expected: 0 },
|
||||
{ desc: "a non-zero duration and default iteration count",
|
||||
input: { duration: 1000 },
|
||||
expected: 1000 },
|
||||
{ desc: "a non-zero duration and integral iteration count",
|
||||
input: { duration: 1000, iterations: 7 },
|
||||
expected: 7000 },
|
||||
{ desc: "a non-zero duration and fractional iteration count",
|
||||
input: { duration: 1000, iterations: 2.5 },
|
||||
expected: 2500 },
|
||||
{ desc: "an non-zero duration and infinite iteration count",
|
||||
input: { duration: 1000, iterations: Infinity },
|
||||
expected: Infinity },
|
||||
{ desc: "an non-zero duration and zero iteration count",
|
||||
input: { duration: 1000, iterations: 0 },
|
||||
expected: 0 },
|
||||
{ desc: "a zero duration and default iteration count",
|
||||
input: { duration: 0 },
|
||||
expected: 0 },
|
||||
{ desc: "a zero duration and fractional iteration count",
|
||||
input: { duration: 0, iterations: 2.5 },
|
||||
expected: 0 },
|
||||
{ desc: "a zero duration and infinite iteration count",
|
||||
input: { duration: 0, iterations: Infinity },
|
||||
expected: 0 },
|
||||
{ desc: "a zero duration and zero iteration count",
|
||||
input: { duration: 0, iterations: 0 },
|
||||
expected: 0 },
|
||||
{ desc: "an infinite duration and default iteration count",
|
||||
input: { duration: Infinity },
|
||||
expected: Infinity },
|
||||
{ desc: "an infinite duration and zero iteration count",
|
||||
input: { duration: Infinity, iterations: 0 },
|
||||
expected: 0 },
|
||||
{ desc: "an infinite duration and fractional iteration count",
|
||||
input: { duration: Infinity, iterations: 2.5 },
|
||||
expected: Infinity },
|
||||
{ desc: "an infinite duration and infinite iteration count",
|
||||
input: { duration: Infinity, iterations: Infinity },
|
||||
expected: Infinity },
|
||||
];
|
||||
|
||||
gActiveDurationTests.forEach(function(stest) {
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffectReadOnly(target,
|
||||
{ left: ["10px", "20px"] },
|
||||
stest.input);
|
||||
|
||||
assert_equals(effect.getComputedTiming().activeDuration,
|
||||
stest.expected);
|
||||
|
||||
}, "getComputedTiming().activeDuration for " + stest.desc);
|
||||
});
|
||||
|
||||
var gEndTimeTests = [
|
||||
{ desc: "an empty KeyframeEffectOptions object",
|
||||
input: { },
|
||||
expected: 0 },
|
||||
{ desc: "a non-zero duration and default iteration count",
|
||||
input: { duration: 1000 },
|
||||
expected: 1000 },
|
||||
{ desc: "a non-zero duration and non-default iteration count",
|
||||
input: { duration: 1000, iterations: 2.5 },
|
||||
expected: 2500 },
|
||||
{ desc: "a non-zero duration and non-zero delay",
|
||||
input: { duration: 1000, delay: 1500 },
|
||||
expected: 2500 },
|
||||
{ desc: "a non-zero duration, non-zero delay and non-default iteration",
|
||||
input: { duration: 1000, delay: 1500, iterations: 2 },
|
||||
expected: 3500 },
|
||||
{ desc: "an infinite iteration count",
|
||||
input: { duration: 1000, iterations: Infinity },
|
||||
expected: Infinity },
|
||||
{ desc: "an infinite duration",
|
||||
input: { duration: Infinity, iterations: 10 },
|
||||
expected: Infinity },
|
||||
{ desc: "an infinite duration and delay",
|
||||
input: { duration: Infinity, iterations: 10, delay: 1000 },
|
||||
expected: Infinity },
|
||||
{ desc: "an infinite duration and negative delay",
|
||||
input: { duration: Infinity, iterations: 10, delay: -1000 },
|
||||
expected: Infinity },
|
||||
{ desc: "an non-zero duration and negative delay",
|
||||
input: { duration: 1000, iterations: 2, delay: -1000 },
|
||||
expected: 1000 },
|
||||
{ desc: "an non-zero duration and negative delay greater than active " +
|
||||
"duration",
|
||||
input: { duration: 1000, iterations: 2, delay: -3000 },
|
||||
expected: 0 },
|
||||
{ desc: "a zero duration and negative delay",
|
||||
input: { duration: 0, iterations: 2, delay: -1000 },
|
||||
expected: 0 }
|
||||
];
|
||||
|
||||
gEndTimeTests.forEach(function(stest) {
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffectReadOnly(target,
|
||||
{ left: ["10px", "20px"] },
|
||||
stest.input);
|
||||
|
||||
assert_equals(effect.getComputedTiming().endTime,
|
||||
stest.expected);
|
||||
|
||||
}, "getComputedTiming().endTime for " + stest.desc);
|
||||
});
|
||||
|
||||
done();
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>KeyframeEffect IDL</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#keyframeeffect">
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#keyframeeffect">
|
||||
<link rel="help"
|
||||
href="https://w3c.github.io/web-animations/#keyframeeffectreadonly">
|
||||
href="https://drafts.csswg.org/web-animations/#keyframeeffectreadonly">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/WebIDLParser.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>KeyframeEffect.iterationComposite tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#effect-accumulation-section">
|
||||
<title>KeyframeEffect.iterationComposite</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-iterationcomposite">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
|
|
@ -9,792 +9,13 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ alignContent: ['flex-start', 'flex-end'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).alignContent, 'flex-end',
|
||||
'Animated align-content style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).alignContent, 'flex-start',
|
||||
'Animated align-content style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).alignContent, 'flex-end',
|
||||
'Animated align-content style at 50s of the third iteration');
|
||||
}, 'iterationComposite of discrete type animation (align-content)');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ marginLeft: ['0px', '10px'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '5px',
|
||||
'Animated margin-left style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '20px',
|
||||
'Animated margin-left style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '25px',
|
||||
'Animated margin-left style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <length> type animation');
|
||||
|
||||
test(function(t) {
|
||||
var parent = createDiv(t);
|
||||
parent.style.width = '100px';
|
||||
var div = createDiv(t);
|
||||
parent.appendChild(div);
|
||||
|
||||
var anim =
|
||||
div.animate({ width: ['0%', '50%'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).width, '25px',
|
||||
'Animated width style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).width, '100px',
|
||||
'Animated width style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).width, '125px',
|
||||
'Animated width style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <percentage> type animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ color: ['rgb(0, 0, 0)', 'rgb(120, 120, 120)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).color, 'rgb(60, 60, 60)',
|
||||
'Animated color style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).color, 'rgb(240, 240, 240)',
|
||||
'Animated color style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).color, 'rgb(255, 255, 255)',
|
||||
'Animated color style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <color> type animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ color: ['rgb(0, 120, 0)', 'rgb(60, 60, 60)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).color, 'rgb(30, 90, 30)',
|
||||
'Animated color style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).color, 'rgb(120, 240, 120)',
|
||||
'Animated color style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
// The green color is (240 + 180) / 2 = 210
|
||||
assert_equals(getComputedStyle(div).color, 'rgb(150, 210, 150)',
|
||||
'Animated color style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <color> type animation that green component is ' +
|
||||
'decreasing');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ flexGrow: [0, 10] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).flexGrow, '5',
|
||||
'Animated flex-grow style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).flexGrow, '20',
|
||||
'Animated flex-grow style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).flexGrow, '25',
|
||||
'Animated flex-grow style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <number> type animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
div.style.position = 'absolute';
|
||||
var anim =
|
||||
div.animate({ clip: ['rect(0px, 0px, 0px, 0px)',
|
||||
'rect(10px, 10px, 10px, 10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).clip, 'rect(5px, 5px, 5px, 5px)',
|
||||
'Animated clip style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).clip, 'rect(20px, 20px, 20px, 20px)',
|
||||
'Animated clip style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).clip, 'rect(25px, 25px, 25px, 25px)',
|
||||
'Animated clip style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <shape> type animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ width: ['calc(0vw + 0px)', 'calc(0vw + 10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).width, '5px',
|
||||
'Animated calc width style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).width, '20px',
|
||||
'Animated calc width style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).width, '25px',
|
||||
'Animated calc width style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <calc()> value animation');
|
||||
|
||||
test(function(t) {
|
||||
var parent = createDiv(t);
|
||||
parent.style.width = '100px';
|
||||
var div = createDiv(t);
|
||||
parent.appendChild(div);
|
||||
|
||||
var anim =
|
||||
div.animate({ width: ['calc(0% + 0px)', 'calc(10% + 10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).width, '10px',
|
||||
// 100px * 5% + 5px
|
||||
'Animated calc width style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).width,
|
||||
'40px', // 100px * (10% + 10%) + (10px + 10px)
|
||||
'Animated calc width style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).width,
|
||||
'50px', // (40px + 60px) / 2
|
||||
'Animated calc width style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <calc()> value animation that the values can\'t' +
|
||||
'be reduced');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ opacity: [0, 0.4] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).opacity, '0.2',
|
||||
'Animated opacity style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).opacity, '0.8',
|
||||
'Animated opacity style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).opacity, '1', // (0.8 + 1.2) * 0.5
|
||||
'Animated opacity style at 50s of the third iteration');
|
||||
}, 'iterationComposite of opacity animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ boxShadow: ['rgb(0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgb(120, 120, 120) 10px 10px 10px 0px'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).boxShadow,
|
||||
'rgb(60, 60, 60) 5px 5px 5px 0px',
|
||||
'Animated box-shadow style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).boxShadow,
|
||||
'rgb(240, 240, 240) 20px 20px 20px 0px',
|
||||
'Animated box-shadow style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).boxShadow,
|
||||
'rgb(255, 255, 255) 25px 25px 25px 0px',
|
||||
'Animated box-shadow style at 50s of the third iteration');
|
||||
}, 'iterationComposite of box-shadow animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ filter: ['blur(0px)', 'blur(10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter, 'blur(5px)',
|
||||
'Animated filter blur style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).filter, 'blur(20px)',
|
||||
'Animated filter blur style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter, 'blur(25px)',
|
||||
'Animated filter blur style at 50s of the third iteration');
|
||||
}, 'iterationComposite of filter blur animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ filter: ['brightness(1)',
|
||||
'brightness(180%)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(1.4)',
|
||||
'Animated filter brightness style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(2.6)', // brightness(1) + brightness(0.8) + brightness(0.8)
|
||||
'Animated filter brightness style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(3)', // (brightness(2.6) + brightness(3.4)) * 0.5
|
||||
'Animated filter brightness style at 50s of the third iteration');
|
||||
}, 'iterationComposite of filter brightness for different unit animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ filter: ['brightness(0)',
|
||||
'brightness(1)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(0.5)',
|
||||
'Animated filter brightness style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(0)', // brightness(1) is an identity element, not accumulated.
|
||||
'Animated filter brightness style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(0.5)', // brightness(1) is an identity element, not accumulated.
|
||||
'Animated filter brightness style at 50s of the third iteration');
|
||||
}, 'iterationComposite of filter brightness animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ filter: ['drop-shadow(rgb(0, 0, 0) 0px 0px 0px)',
|
||||
'drop-shadow(rgb(120, 120, 120) 10px 10px 10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'drop-shadow(rgb(60, 60, 60) 5px 5px 5px)',
|
||||
'Animated filter drop-shadow style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'drop-shadow(rgb(240, 240, 240) 20px 20px 20px)',
|
||||
'Animated filter drop-shadow style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'drop-shadow(rgb(255, 255, 255) 25px 25px 25px)',
|
||||
'Animated filter drop-shadow style at 50s of the third iteration');
|
||||
}, 'iterationComposite of filter drop-shadow animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ filter: ['brightness(1) contrast(1)',
|
||||
'brightness(2) contrast(2)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(1.5) contrast(1.5)',
|
||||
'Animated filter list at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(3) contrast(3)',
|
||||
'Animated filter list at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(3.5) contrast(3.5)',
|
||||
'Animated filter list at 50s of the third iteration');
|
||||
}, 'iterationComposite of same filter list animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ filter: ['brightness(1) contrast(1)',
|
||||
'contrast(2) brightness(2)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'contrast(2) brightness(2)', // discrete
|
||||
'Animated filter list at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
// We can't accumulate 'contrast(2) brightness(2)' onto
|
||||
// the first list 'brightness(1) contrast(1)' because of
|
||||
// mismatch of the order.
|
||||
'brightness(1) contrast(1)',
|
||||
'Animated filter list at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
// We *can* accumulate 'contrast(2) brightness(2)' onto
|
||||
// the same list 'contrast(2) brightness(2)' here.
|
||||
'contrast(4) brightness(4)', // discrete
|
||||
'Animated filter list at 50s of the third iteration');
|
||||
}, 'iterationComposite of discrete filter list because of mismatch ' +
|
||||
'of the order');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ filter: ['sepia(0)',
|
||||
'sepia(1) contrast(2)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'sepia(0.5) contrast(1.5)',
|
||||
'Animated filter list at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'sepia(2) contrast(3)',
|
||||
'Animated filter list at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'sepia(2.5) contrast(3.5)',
|
||||
'Animated filter list at 50s of the third iteration');
|
||||
}, 'iterationComposite of different length filter list animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['rotate(0deg)', 'rotate(180deg)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 1, -1, 0, 0, 0)', // rotate(90deg)
|
||||
'Animated transform(rotate) style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(1, 0, 0, 1, 0, 0)', // rotate(360deg)
|
||||
'Animated transform(rotate) style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 1, -1, 0, 0, 0)', // rotate(450deg)
|
||||
'Animated transform(rotate) style at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform(rotate) animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['scale(0)', 'scale(1)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5)
|
||||
'Animated transform(scale) style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 0, 0, 0, 0, 0)', // scale(0); scale(1) is an identity element,
|
||||
// not accumulated.
|
||||
'Animated transform(scale) style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5); scale(1) an identity
|
||||
// element, not accumulated.
|
||||
'Animated transform(scale) style at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform: [ scale(0), scale(1) ] animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['scale(1)', 'scale(2)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(1.5, 0, 0, 1.5, 0, 0)', // scale(1.5)
|
||||
'Animated transform(scale) style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(3, 0, 0, 3, 0, 0)', // scale(1 + (2 -1) + (2 -1))
|
||||
'Animated transform(scale) style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(3.5, 0, 0, 3.5, 0, 0)', // (scale(3) + scale(4)) * 0.5
|
||||
'Animated transform(scale) style at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform: [ scale(1), scale(2) ] animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['scale(0)', 'scale(2)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(1, 0, 0, 1, 0, 0)', // scale(1)
|
||||
'Animated transform(scale) style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(2, 0, 0, 2, 0, 0)', // (scale(0) + scale(2-1)*2)
|
||||
'Animated transform(scale) style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(3, 0, 0, 3, 0, 0)', // (scale(2) + scale(4)) * 0.5
|
||||
'Animated transform(scale) style at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform: scale(2) animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['rotate(0deg) translateX(0px)',
|
||||
'rotate(180deg) translateX(10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 1, -1, 0, 0, 5)', // rotate(90deg) translateX(5px)
|
||||
'Animated transform list at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(1, 0, 0, 1, 20, 0)', // rotate(360deg) translateX(20px)
|
||||
'Animated transform list at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 1, -1, 0, 0, 25)', // rotate(450deg) translateX(25px)
|
||||
'Animated transform list at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform list animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['matrix(2, 0, 0, 2, 0, 0)',
|
||||
'matrix(3, 0, 0, 3, 30, 0)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(2.5, 0, 0, 2.5, 15, 0)',
|
||||
'Animated transform of matrix function at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// scale(2) + (scale(3-1)*2) + translateX(30px)*2
|
||||
'matrix(6, 0, 0, 6, 60, 0)',
|
||||
'Animated transform of matrix function at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// from: matrix(6, 0, 0, 6, 60, 0)
|
||||
// to: matrix(7, 0, 0, 7, 90, 0)
|
||||
// = scale(3) + (scale(3-1)*2) + translateX(30px)*3
|
||||
'matrix(6.5, 0, 0, 6.5, 75, 0)',
|
||||
'Animated transform of matrix function at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform of matrix function');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['translateX(0px) scale(2)',
|
||||
'scale(3) translateX(10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// Interpolate between matrix(2, 0, 0, 2, 0, 0) = translateX(0px) scale(2)
|
||||
// and matrix(3, 0, 0, 3, 30, 0) = scale(3) translateX(10px)
|
||||
'matrix(2.5, 0, 0, 2.5, 15, 0)',
|
||||
'Animated transform list at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// 'from' and 'to' value are mismatched, so accumulate
|
||||
// matrix(2, 0, 0, 2, 0, 0) onto matrix(3, 0, 0, 3, 30, 0) * 2
|
||||
// = scale(2) + (scale(3-1)*2) + translateX(30px)*2
|
||||
'matrix(6, 0, 0, 6, 60, 0)',
|
||||
'Animated transform list at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// Interpolate between matrix(6, 0, 0, 6, 60, 0)
|
||||
// and matrix(7, 0, 0, 7, 210, 0) = scale(7) translate(30px)
|
||||
'matrix(6.5, 0, 0, 6.5, 135, 0)',
|
||||
'Animated transform list at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform list animation whose order is mismatched');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
// Even if each transform list does not have functions which exist in
|
||||
// other pair of the list, we don't fill any missing functions at all.
|
||||
var anim =
|
||||
div.animate({ transform: ['translateX(0px)',
|
||||
'scale(2) translateX(10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// Interpolate between matrix(1, 0, 0, 1, 0, 0) = translateX(0px)
|
||||
// and matrix(2, 0, 0, 2, 20, 0) = scale(2) translateX(10px)
|
||||
'matrix(1.5, 0, 0, 1.5, 10, 0)',
|
||||
'Animated transform list at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// 'from' and 'to' value are mismatched, so accumulate
|
||||
// matrix(1, 0, 0, 1, 0, 0) onto matrix(2, 0, 0, 2, 20, 0) * 2
|
||||
// = scale(1) + (scale(2-1)*2) + translateX(20px)*2
|
||||
'matrix(3, 0, 0, 3, 40, 0)',
|
||||
'Animated transform list at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// Interpolate between matrix(3, 0, 0, 3, 40, 0)
|
||||
// and matrix(4, 0, 0, 4, 120, 0) =
|
||||
// scale(2 + (2-1)*2) translate(10px * 3)
|
||||
'matrix(3.5, 0, 0, 3.5, 80, 0)',
|
||||
'Animated transform list at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform list animation whose order is mismatched ' +
|
||||
'because of missing functions');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['none',
|
||||
'translateX(10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// translateX(none) -> translateX(10px) @ 50%
|
||||
'matrix(1, 0, 0, 1, 5, 0)',
|
||||
'Animated transform list at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// translateX(10px * 2 + none) -> translateX(10px * 2 + 10px) @ 0%
|
||||
'matrix(1, 0, 0, 1, 20, 0)',
|
||||
'Animated transform list at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// translateX(10px * 2 + none) -> translateX(10px * 2 + 10px) @ 50%
|
||||
'matrix(1, 0, 0, 1, 25, 0)',
|
||||
'Animated transform list at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform from none to translate');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['matrix3d(1, 0, 0, 0, ' +
|
||||
'0, 1, 0, 0, ' +
|
||||
'0, 0, 1, 0, ' +
|
||||
'0, 0, 30, 1)',
|
||||
'matrix3d(1, 0, 0, 0, ' +
|
||||
'0, 1, 0, 0, ' +
|
||||
'0, 0, 1, 0, ' +
|
||||
'0, 0, 50, 1)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 40, 1)',
|
||||
'Animated transform of matrix3d function at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// translateZ(30px) + (translateZ(50px)*2)
|
||||
'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1)',
|
||||
'Animated transform of matrix3d function at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
// from: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1)
|
||||
// to: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 150, 1)
|
||||
'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 140, 1)',
|
||||
'Animated transform of matrix3d function at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform of matrix3d function');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['rotate3d(1, 1, 0, 0deg)',
|
||||
'rotate3d(1, 1, 0, 90deg)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = 0;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
'matrix(1, 0, 0, 1, 0, 0)', // Actually not rotated at all.
|
||||
'Animated transform of rotate3d function at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
rotate3dToMatrix3d(1, 1, 0, Math.PI), // 180deg
|
||||
'Animated transform of rotate3d function at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_matrix_equals(getComputedStyle(div).transform,
|
||||
rotate3dToMatrix3d(1, 1, 0, 225 * Math.PI / 180), //((270 + 180) * 0.5)deg
|
||||
'Animated transform of rotate3d function at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform of rotate3d function');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ marginLeft: ['10px', '20px'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '15px',
|
||||
'Animated margin-left style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '50px', // 10px + 20px + 20px
|
||||
'Animated margin-left style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '55px', // (50px + 60px) * 0.5
|
||||
'Animated margin-left style at 50s of the third iteration');
|
||||
}, 'iterationComposite starts with non-zero value animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ marginLeft: ['10px', '-10px'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft,
|
||||
'0px',
|
||||
'Animated margin-left style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft,
|
||||
'-10px', // 10px + -10px + -10px
|
||||
'Animated margin-left style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft,
|
||||
'-20px', // (-10px + -30px) * 0.5
|
||||
'Animated margin-left style at 50s of the third iteration');
|
||||
}, 'iterationComposite with negative final value animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ marginLeft: ['0px', '10px'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
test(t => {
|
||||
const div = createDiv(t);
|
||||
const anim = div.animate({ marginLeft: ['0px', '10px'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime =
|
||||
|
|
@ -809,31 +30,6 @@ test(function(t) {
|
|||
anim.effect.iterationComposite = 'accumulate';
|
||||
assert_equals(getComputedStyle(div).marginLeft, '25px',
|
||||
'Animated style at 50s of the third iteration');
|
||||
}, 'interationComposite changes');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ marginLeft: ['0px', '10px'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime =
|
||||
anim.effect.timing.duration * 2 + anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '25px',
|
||||
'Animated style at 50s of the third iteration');
|
||||
|
||||
// double its duration.
|
||||
anim.effect.timing.duration = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '12.5px',
|
||||
'Animated style at 25s of the first iteration');
|
||||
|
||||
// half of original.
|
||||
anim.effect.timing.duration = anim.effect.timing.duration / 4;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '50px',
|
||||
'Animated style at 50s of the fourth iteration');
|
||||
}, 'duration changes with iterationComposite(accumulate)');
|
||||
}, 'iterationComposite can be updated while an animation is in progress');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Tests for processing a keyframes argument (property access)</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#processing-a-keyframes-argument">
|
||||
<title>Processing a keyframes argument (property access)</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#processing-a-keyframes-argument">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
|
|
@ -201,7 +201,7 @@ test(() => {
|
|||
{ offset: null, computedOffset: 0.5, easing: 'linear', left: '300px' },
|
||||
{ offset: null, computedOffset: 1, easing: 'linear', left: '200px' },
|
||||
]);
|
||||
}, "'easing' and 'offset' are ignored on iterable objects");
|
||||
}, '\'easing\' and \'offset\' are ignored on iterable objects');
|
||||
|
||||
test(() => {
|
||||
const effect = new KeyframeEffect(null, createIterable([
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Tests for processing a keyframes argument (easing)</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#processing-a-keyframes-argument">
|
||||
<title>Processing a keyframes argument (easing)</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#processing-a-keyframes-argument">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>KeyframeEffect setKeyframes() tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#dom-keyframeeffect-setkeyframes">
|
||||
<title>KeyframeEffect.setKeyframes</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-setkeyframes">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
|
|
@ -13,31 +13,31 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
var target = document.getElementById('target');
|
||||
const target = document.getElementById('target');
|
||||
|
||||
test(function(t) {
|
||||
gEmptyKeyframeListTests.forEach(function(frame) {
|
||||
var effect = new KeyframeEffect(target, {});
|
||||
test(t => {
|
||||
for (const frame of gEmptyKeyframeListTests) {
|
||||
const effect = new KeyframeEffect(target, {});
|
||||
effect.setKeyframes(frame);
|
||||
assert_frame_lists_equal(effect.getKeyframes(), []);
|
||||
});
|
||||
}
|
||||
}, 'Keyframes can be replaced with an empty keyframe');
|
||||
|
||||
gKeyframesTests.forEach(function(subtest) {
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffect(target, {});
|
||||
for (const subtest of gKeyframesTests) {
|
||||
test(t => {
|
||||
const effect = new KeyframeEffect(target, {});
|
||||
effect.setKeyframes(subtest.input);
|
||||
assert_frame_lists_equal(effect.getKeyframes(), subtest.output);
|
||||
}, 'Keyframes can be replaced with ' + subtest.desc);
|
||||
});
|
||||
}, `Keyframes can be replaced with ${subtest.desc}`);
|
||||
}
|
||||
|
||||
gInvalidKeyframesTests.forEach(function(subtest) {
|
||||
test(function(t) {
|
||||
var effect = new KeyframeEffect(target, {});
|
||||
assert_throws(new TypeError, function() {
|
||||
for (const subtest of gInvalidKeyframesTests) {
|
||||
test(t => {
|
||||
const effect = new KeyframeEffect(target, {});
|
||||
assert_throws(new TypeError, () => {
|
||||
effect.setKeyframes(subtest.input);
|
||||
});
|
||||
}, 'KeyframeEffect constructor throws with ' + subtest.desc);
|
||||
});
|
||||
}, `KeyframeEffect constructor throws with ${subtest.desc}`);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Writable effect.target tests</title>
|
||||
<title>KeyframeEffect.target</title>
|
||||
<link rel="help"
|
||||
href="https://w3c.github.io/web-animations/#dom-keyframeeffect-target">
|
||||
href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-target">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
"use strict";
|
||||
'use strict';
|
||||
|
||||
var gKeyFrames = { 'marginLeft': ['0px', '100px'] };
|
||||
const gKeyFrames = { 'marginLeft': ['0px', '100px'] };
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
|
||||
test(t => {
|
||||
const div = createDiv(t);
|
||||
const effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
|
||||
effect.target = div;
|
||||
|
||||
var anim = new Animation(effect, document.timeline);
|
||||
const anim = new Animation(effect, document.timeline);
|
||||
anim.play();
|
||||
|
||||
anim.currentTime = 50 * MS_PER_SEC;
|
||||
|
|
@ -26,11 +26,11 @@ test(function(t) {
|
|||
'Value at 50% progress');
|
||||
}, 'Test setting target before constructing the associated animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
test(t => {
|
||||
const div = createDiv(t);
|
||||
div.style.marginLeft = '10px';
|
||||
var effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
|
||||
var anim = new Animation(effect, document.timeline);
|
||||
const effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
|
||||
const anim = new Animation(effect, document.timeline);
|
||||
anim.play();
|
||||
|
||||
anim.currentTime = 50 * MS_PER_SEC;
|
||||
|
|
@ -41,10 +41,10 @@ test(function(t) {
|
|||
'Value at 50% progress after setting new target');
|
||||
}, 'Test setting target from null to a valid target');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
test(t => {
|
||||
const div = createDiv(t);
|
||||
div.style.marginLeft = '10px';
|
||||
var anim = div.animate(gKeyFrames, 100 * MS_PER_SEC);
|
||||
const anim = div.animate(gKeyFrames, 100 * MS_PER_SEC);
|
||||
|
||||
anim.currentTime = 50 * MS_PER_SEC;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '50px',
|
||||
|
|
@ -55,12 +55,12 @@ test(function(t) {
|
|||
'Value after clearing the target')
|
||||
}, 'Test setting target from a valid target to null');
|
||||
|
||||
test(function(t) {
|
||||
var a = createDiv(t);
|
||||
var b = createDiv(t);
|
||||
test(t => {
|
||||
const a = createDiv(t);
|
||||
const b = createDiv(t);
|
||||
a.style.marginLeft = '10px';
|
||||
b.style.marginLeft = '20px';
|
||||
var anim = a.animate(gKeyFrames, 100 * MS_PER_SEC);
|
||||
const anim = a.animate(gKeyFrames, 100 * MS_PER_SEC);
|
||||
|
||||
anim.currentTime = 50 * MS_PER_SEC;
|
||||
assert_equals(getComputedStyle(a).marginLeft, '50px',
|
||||
Loading…
Add table
Add a link
Reference in a new issue