mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision 51b8e0940e87eda1f843a48d847d653b9a22c8c4
This commit is contained in:
WPT Sync Bot
parent
ea8aed1ba9
commit
a7b57c1cbf
53 changed files with 1764 additions and 337 deletions
|
|
@ -0,0 +1,179 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>AnimationEffect.updateTiming() for CSS animations</title>
|
||||
<!-- TODO: Add a more specific link for this once it is specified. -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-2/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes anim-empty { }
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
div.style.animation = 'anim-empty 100s';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
animation.effect.updateTiming({ duration: 2 * MS_PER_SEC });
|
||||
|
||||
div.style.animationDuration = '4s';
|
||||
div.style.animationDelay = '6s';
|
||||
getComputedStyle(div).animationDuration;
|
||||
|
||||
assert_equals(
|
||||
animation.effect.getTiming().duration,
|
||||
2 * MS_PER_SEC,
|
||||
'Duration should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().delay,
|
||||
6 * MS_PER_SEC,
|
||||
'Delay should be the value set by style'
|
||||
);
|
||||
}, 'AnimationEffect.updateTiming({ duration }) causes changes to the'
|
||||
+ ' animation-duration to be ignored');
|
||||
|
||||
// The above test covers duration (with delay as a control). The remaining
|
||||
// properties are:
|
||||
//
|
||||
// iterations - animation-iteration-count
|
||||
// direction - animation-direction
|
||||
// delay - animation-delay
|
||||
// fill - animation-fill-mode
|
||||
//
|
||||
// Which we test in two batches, overriding two properties each time and using
|
||||
// the remaining two properties as control values to check they are NOT
|
||||
// overridden.
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
div.style.animation = 'anim-empty 100s';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
animation.effect.updateTiming({ iterations: 2, direction: 'reverse' });
|
||||
|
||||
div.style.animationIterationCount = '4';
|
||||
div.style.animationDirection = 'alternate';
|
||||
div.style.animationDelay = '6s';
|
||||
div.style.animationFillMode = 'both';
|
||||
getComputedStyle(div).animationIterationCount;
|
||||
|
||||
assert_equals(
|
||||
animation.effect.getTiming().iterations,
|
||||
2,
|
||||
'Iterations should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().direction,
|
||||
'reverse',
|
||||
'Direction should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().delay,
|
||||
6 * MS_PER_SEC,
|
||||
'Delay should be the value set by style'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().fill,
|
||||
'both',
|
||||
'Fill should be the value set by style'
|
||||
);
|
||||
}, 'AnimationEffect.updateTiming({ iterations, direction }) causes changes to'
|
||||
+ ' the animation-iteration-count and animation-direction to be ignored');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
div.style.animation = 'anim-empty 100s';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
animation.effect.updateTiming({ delay: 2 * MS_PER_SEC, fill: 'both' });
|
||||
|
||||
div.style.animationDelay = '4s';
|
||||
div.style.animationFillMode = 'forwards';
|
||||
div.style.animationIterationCount = '6';
|
||||
div.style.animationDirection = 'reverse';
|
||||
getComputedStyle(div).animationDelay;
|
||||
|
||||
assert_equals(
|
||||
animation.effect.getTiming().delay,
|
||||
2 * MS_PER_SEC,
|
||||
'Delay should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().fill,
|
||||
'both',
|
||||
'Fill should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().iterations,
|
||||
6,
|
||||
'Iterations should be the value set by style'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().direction,
|
||||
'reverse',
|
||||
'Direction should be the value set by style'
|
||||
);
|
||||
}, 'AnimationEffect.updateTiming({ delay, fill }) causes changes to'
|
||||
+ ' the animation-delay and animation-fill-mode to be ignored');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
div.style.animation = 'anim-empty 100s';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
assert_throws_js(TypeError, () => {
|
||||
animation.effect.updateTiming({ duration: 2 * MS_PER_SEC, iterations: -1 });
|
||||
}, 'Negative iteration count should cause an error to be thrown');
|
||||
|
||||
div.style.animationDuration = '4s';
|
||||
getComputedStyle(div).animationDuration;
|
||||
|
||||
assert_equals(
|
||||
animation.effect.getTiming().duration,
|
||||
4 * MS_PER_SEC,
|
||||
'Duration should be the value set by style'
|
||||
);
|
||||
}, 'AnimationEffect.updateTiming() does override to changes from animation-*'
|
||||
+ ' properties if there is an error');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
div.style.animation = 'anim-empty 100s';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
animation.effect.updateTiming({
|
||||
easing: 'steps(4)',
|
||||
endDelay: 2 * MS_PER_SEC,
|
||||
iterationStart: 4,
|
||||
});
|
||||
|
||||
div.style.animationDuration = '6s';
|
||||
div.style.animationTimingFunction = 'ease-in';
|
||||
getComputedStyle(div).animationDuration;
|
||||
|
||||
assert_equals(
|
||||
animation.effect.getTiming().easing,
|
||||
'steps(4)',
|
||||
'endDelay should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().endDelay,
|
||||
2 * MS_PER_SEC,
|
||||
'endDelay should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().iterationStart,
|
||||
4,
|
||||
'iterationStart should be the value set by style'
|
||||
);
|
||||
}, 'AnimationEffect properties that do not map to animation-* properties'
|
||||
+ ' should not be changed when animation-* style is updated');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -128,4 +128,82 @@ promise_test(async t => {
|
|||
}, 'After replacing a finished animation\'s effect with a longer one ' +
|
||||
'it fires an animationstart event');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
// Create custom keyframes so we can tweak them
|
||||
const stylesheet = document.styleSheets[0];
|
||||
const keyframes = '@keyframes anim-custom { to { left: 100px } }';
|
||||
const ruleIndex = stylesheet.insertRule(keyframes, 0);
|
||||
const keyframesRule = stylesheet.cssRules[ruleIndex];
|
||||
|
||||
t.add_cleanup(function() {
|
||||
stylesheet.deleteRule(ruleIndex);
|
||||
});
|
||||
|
||||
div.style.animation = 'anim-custom 100s';
|
||||
|
||||
// Replace the effect
|
||||
const animation = div.getAnimations()[0];
|
||||
animation.effect = new KeyframeEffect(
|
||||
div,
|
||||
{ left: '200px' },
|
||||
200 * MS_PER_SEC
|
||||
);
|
||||
|
||||
// Update the timing properties
|
||||
div.style.animationDuration = '4s';
|
||||
div.style.animationIterationCount = '6';
|
||||
div.style.animationDirection = 'reverse';
|
||||
div.style.animationDelay = '8s';
|
||||
div.style.animationFillMode = 'both';
|
||||
div.style.animationPlayState = 'paused';
|
||||
getComputedStyle(div).animationDuration;
|
||||
|
||||
// Update the keyframes
|
||||
keyframesRule.deleteRule(0);
|
||||
keyframesRule.appendRule('to { left: 300px }');
|
||||
|
||||
// Check nothing (except the play state) changed
|
||||
assert_equals(
|
||||
animation.effect.getTiming().duration,
|
||||
200 * MS_PER_SEC,
|
||||
'duration should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().iterations,
|
||||
1,
|
||||
'iterations should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().direction,
|
||||
'normal',
|
||||
'direction should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().delay,
|
||||
0,
|
||||
'delay should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getTiming().fill,
|
||||
'auto',
|
||||
'fill should be the value set by the API'
|
||||
);
|
||||
assert_equals(
|
||||
animation.effect.getKeyframes()[0].left,
|
||||
'200px',
|
||||
'keyframes should be the value set by the API'
|
||||
);
|
||||
|
||||
// Unlike the other properties animation-play-state maps to the Animation
|
||||
// not the KeyframeEffect so it should be overridden.
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'paused',
|
||||
'play state should be the value set by style'
|
||||
);
|
||||
}, 'Replacing the effect of a CSSAnimation causes subsequent changes to'
|
||||
+ ' corresponding animation-* properties to be ignored');
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -16,129 +16,218 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
const getMarginLeft = cs => parseFloat(cs.marginLeft);
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
const cs = getComputedStyle(div);
|
||||
div.style.animation = 'anim 1000s paused';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
assert_equals(getMarginLeft(cs), 0,
|
||||
'Initial value of margin-left is zero');
|
||||
animation.play();
|
||||
|
||||
await animation.ready;
|
||||
await waitForNextFrame();
|
||||
|
||||
assert_greater_than(getMarginLeft(cs), 0,
|
||||
'Playing value of margin-left is greater than zero');
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'running',
|
||||
'Play state is running after calling play()'
|
||||
);
|
||||
|
||||
// Flip the animation-play-state back and forth to check it has no effect
|
||||
|
||||
div.style.animationPlayState = 'running';
|
||||
getComputedStyle(div).animationPlayState;
|
||||
div.style.animationPlayState = 'paused';
|
||||
getComputedStyle(div).animationPlayState;
|
||||
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'running',
|
||||
'Should still be running even after flipping the animation-play-state'
|
||||
);
|
||||
}, 'play() overrides animation-play-state');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
const cs = getComputedStyle(div);
|
||||
div.style.animation = 'anim 1000s paused';
|
||||
const animation = div.getAnimations()[0];
|
||||
assert_equals(getMarginLeft(cs), 0,
|
||||
'Initial value of margin-left is zero');
|
||||
div.style.animation = 'anim 100s infinite paused';
|
||||
|
||||
animation.pause();
|
||||
const animation = div.getAnimations()[0];
|
||||
animation.playbackRate = -1;
|
||||
animation.currentTime = -1;
|
||||
|
||||
assert_throws_dom('InvalidStateError', () => {
|
||||
animation.play();
|
||||
}, 'Trying to play a reversed infinite animation should throw');
|
||||
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'paused',
|
||||
'Animation should still be paused'
|
||||
);
|
||||
|
||||
animation.playbackRate = 1;
|
||||
div.style.animationPlayState = 'running';
|
||||
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'running',
|
||||
'Changing the animation-play-state should play the animation'
|
||||
);
|
||||
}, 'play() does NOT override the animation-play-state if there was an error');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
div.style.animation = 'anim 1000s paused';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
animation.pause();
|
||||
|
||||
div.style.animationPlayState = 'running';
|
||||
getComputedStyle(div).animationPlayState;
|
||||
|
||||
await animation.ready;
|
||||
await waitForNextFrame();
|
||||
|
||||
assert_equals(cs.animationPlayState, 'running',
|
||||
'animation-play-state is running');
|
||||
assert_equals(getMarginLeft(cs), 0,
|
||||
'Paused value of margin-left is zero');
|
||||
assert_equals(animation.playState, 'paused', 'playState is paused ');
|
||||
|
||||
// Flip the animation-play-state back and forth to check it has no effect
|
||||
|
||||
div.style.animationPlayState = 'paused';
|
||||
getComputedStyle(div).animationPlayState;
|
||||
div.style.animationPlayState = 'running';
|
||||
getComputedStyle(div).animationPlayState;
|
||||
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'paused',
|
||||
'Should still be paused even after flipping the animation-play-state'
|
||||
);
|
||||
}, 'pause() overrides animation-play-state');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
const cs = getComputedStyle(div);
|
||||
div.style.animation = 'anim 1000s paused';
|
||||
const animation = div.getAnimations()[0];
|
||||
assert_equals(getMarginLeft(cs), 0,
|
||||
'Initial value of margin-left is zero');
|
||||
animation.play();
|
||||
div.style.animation = 'anim 100s paused';
|
||||
|
||||
await animation.ready;
|
||||
const animation = div.getAnimations()[0];
|
||||
animation.reverse();
|
||||
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'running',
|
||||
'Play state is running after calling reverse()'
|
||||
);
|
||||
|
||||
// Flip the animation-play-state back and forth to check it has no effect
|
||||
|
||||
div.style.animationPlayState = 'running';
|
||||
cs.animationPlayState; // Trigger style resolution
|
||||
await waitForNextFrame();
|
||||
|
||||
assert_equals(cs.animationPlayState, 'running',
|
||||
'animation-play-state is running');
|
||||
getComputedStyle(div).animationPlayState;
|
||||
div.style.animationPlayState = 'paused';
|
||||
await animation.ready;
|
||||
getComputedStyle(div).animationPlayState;
|
||||
|
||||
assert_equals(cs.animationPlayState, 'paused',
|
||||
'animation-play-state is paused');
|
||||
const previousAnimVal = getMarginLeft(cs);
|
||||
await waitForNextFrame();
|
||||
|
||||
assert_equals(getMarginLeft(cs), previousAnimVal,
|
||||
'Animated value of margin-left does not change when'
|
||||
+ ' paused by style');
|
||||
}, 'play() is overridden by later setting "animation-play-state: paused"');
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'running',
|
||||
'Should still be running even after flipping the animation-play-state'
|
||||
);
|
||||
}, 'reverse() overrides animation-play-state when it starts playing the'
|
||||
+ ' animation');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
const cs = getComputedStyle(div);
|
||||
div.style.animation = 'anim 1000s';
|
||||
div.style.animation = 'anim 100s';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
assert_equals(getMarginLeft(cs), 0,
|
||||
'Initial value of margin-left is zero');
|
||||
animation.reverse();
|
||||
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'running',
|
||||
'Play state is running after calling reverse()'
|
||||
);
|
||||
|
||||
// Set the specified style first. If implementations fail to
|
||||
// apply the style changes first, they will ignore the redundant
|
||||
// call to play() and fail to correctly override the pause style.
|
||||
div.style.animationPlayState = 'paused';
|
||||
animation.play();
|
||||
const previousAnimVal = getMarginLeft(cs);
|
||||
getComputedStyle(div).animationPlayState;
|
||||
|
||||
await animation.ready;
|
||||
await waitForNextFrame();
|
||||
|
||||
assert_equals(cs.animationPlayState, 'paused',
|
||||
'animation-play-state is paused');
|
||||
assert_greater_than(getMarginLeft(cs), previousAnimVal,
|
||||
'Playing value of margin-left is increasing');
|
||||
}, 'play() flushes pending changes to animation-play-state first');
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'paused',
|
||||
'Should be paused after changing the animation-play-state'
|
||||
);
|
||||
}, 'reverse() does NOT override animation-play-state if the animation is'
|
||||
+ ' already running');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
const cs = getComputedStyle(div);
|
||||
div.style.animation = 'anim 1000s paused';
|
||||
div.style.animation = 'anim 100s';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
assert_equals(getMarginLeft(cs), 0,
|
||||
'Initial value of margin-left is zero');
|
||||
animation.startTime = null;
|
||||
|
||||
// Unlike the previous test for play(), since calling pause() is sticky,
|
||||
// we'll apply it even if the underlying style also says we're paused.
|
||||
//
|
||||
// We would like to test that implementations flush styles before running
|
||||
// pause() but actually there's no style we can currently set that will
|
||||
// change the behavior of pause(). That may change in the future
|
||||
// (e.g. if we introduce animation-timeline or animation-playback-rate etc.).
|
||||
//
|
||||
// For now this just serves as a sanity check that we do the same thing
|
||||
// even if we set style before calling the API.
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'paused',
|
||||
'Play state is paused after setting the start time to null'
|
||||
);
|
||||
|
||||
// Flip the animation-play-state back and forth to check it has no effect
|
||||
|
||||
div.style.animationPlayState = 'paused';
|
||||
getComputedStyle(div).animationPlayState;
|
||||
div.style.animationPlayState = 'running';
|
||||
animation.pause();
|
||||
const previousAnimVal = getMarginLeft(cs);
|
||||
getComputedStyle(div).animationPlayState;
|
||||
|
||||
await animation.ready;
|
||||
await waitForNextFrame();
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'paused',
|
||||
'Should still be paused even after flipping the animation-play-state'
|
||||
);
|
||||
}, 'Setting the startTime to null overrides animation-play-state if the'
|
||||
+ ' animation is already running');
|
||||
|
||||
assert_equals(cs.animationPlayState, 'running',
|
||||
'animation-play-state is running');
|
||||
assert_equals(getMarginLeft(cs), previousAnimVal,
|
||||
'Paused value of margin-left does not change');
|
||||
}, 'pause() applies pending changes to animation-play-state first');
|
||||
// (Note that we can't actually test for this; see comment above, in test-body.)
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
div.style.animation = 'anim 100s paused';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
animation.startTime = document.timeline.currentTime;
|
||||
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'running',
|
||||
'Play state is running after setting the start time to non-null'
|
||||
);
|
||||
|
||||
// Flip the animation-play-state back and forth to check it has no effect
|
||||
|
||||
div.style.animationPlayState = 'running';
|
||||
getComputedStyle(div).animationPlayState;
|
||||
div.style.animationPlayState = 'paused';
|
||||
getComputedStyle(div).animationPlayState;
|
||||
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'running',
|
||||
'Should still be running even after flipping the animation-play-state'
|
||||
);
|
||||
}, 'Setting the startTime to non-null overrides animation-play-state if the'
|
||||
+ ' animation is paused');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t);
|
||||
div.style.animation = 'anim 100s';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
animation.startTime = document.timeline.currentTime;
|
||||
|
||||
div.style.animationPlayState = 'paused';
|
||||
getComputedStyle(div).animationPlayState;
|
||||
|
||||
assert_equals(
|
||||
animation.playState,
|
||||
'paused',
|
||||
'Should be paused after changing the animation-play-state'
|
||||
);
|
||||
}, 'Setting the startTime to non-null does NOT override the'
|
||||
+ ' animation-play-state if the animation is already running');
|
||||
|
||||
promise_test(async t => {
|
||||
const div = addDiv(t, { style: 'animation: anim 1000s' });
|
||||
|
|
|
|||
|
|
@ -164,20 +164,6 @@
|
|||
|
||||
const getKeyframes = elem => elem.getAnimations()[0].effect.getKeyframes();
|
||||
|
||||
const assert_frames_equal = (a, b, name) => {
|
||||
assert_equals(Object.keys(a).sort().toString(),
|
||||
Object.keys(b).sort().toString(),
|
||||
"properties on " + name);
|
||||
for (const p in a) {
|
||||
if (p === 'offset' || p === 'computedOffset') {
|
||||
assert_approx_equals(a[p], b[p], 0.00001,
|
||||
"value for '" + p + "' on " + name);
|
||||
} else {
|
||||
assert_equals(a[p], b[p], "value for '" + p + "' on " + name);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// animation-timing-function values to test with, where the value
|
||||
// is exactly the same as its serialization, sorted by the order
|
||||
// getKeyframes() will group frames with the same easing function
|
||||
|
|
@ -221,11 +207,9 @@ test(t => {
|
|||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.animation = 'anim-simple 100s';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease",
|
||||
|
|
@ -233,10 +217,7 @@ test(t => {
|
|||
{ offset: 1, computedOffset: 1, easing: "ease",
|
||||
color: "rgb(255, 255, 255)", composite: "auto" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
|
||||
+ ' animation');
|
||||
|
||||
|
|
@ -292,11 +273,9 @@ test(t => {
|
|||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.animation = 'anim-simple-shorthand 100s';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
|
|
@ -306,21 +285,16 @@ test(t => {
|
|||
marginBottom: "16px", marginLeft: "16px",
|
||||
marginRight: "16px", marginTop: "16px" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for a simple'
|
||||
+ ' animation that specifies a single shorthand property');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.animation = 'anim-omit-to 100s';
|
||||
div.style.color = 'rgb(255, 255, 255)';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
|
|
@ -328,21 +302,16 @@ test(t => {
|
|||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(255, 255, 255)" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
|
||||
'animation with a 0% keyframe and no 100% keyframe');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.animation = 'anim-omit-from 100s';
|
||||
div.style.color = 'rgb(255, 255, 255)';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
|
|
@ -350,21 +319,16 @@ test(t => {
|
|||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(0, 0, 255)" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
|
||||
'animation with a 100% keyframe and no 0% keyframe');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.animation = 'anim-omit-from-to 100s';
|
||||
div.style.color = 'rgb(255, 255, 255)';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 3, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
|
|
@ -374,21 +338,16 @@ test(t => {
|
|||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(255, 255, 255)" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
|
||||
'animation with no 0% or 100% keyframe but with a 50% keyframe');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.animation = 'anim-partially-omit-to 100s';
|
||||
div.style.marginTop = '250px';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
|
|
@ -396,21 +355,16 @@ test(t => {
|
|||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
marginTop: '250px', marginBottom: '200px' },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
|
||||
'animation with a partially complete 100% keyframe (because the ' +
|
||||
'!important rule is ignored)');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.animation = 'anim-different-props 100s';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 4, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
|
|
@ -422,21 +376,16 @@ test(t => {
|
|||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(255, 255, 255)", marginTop: "16px" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
|
||||
'animation with different properties on different keyframes, all ' +
|
||||
'with the same easing function');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.animation = 'anim-different-props-and-easing 100s';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 4, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "linear", composite: "auto",
|
||||
|
|
@ -448,21 +397,16 @@ test(t => {
|
|||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(255, 255, 255)", marginTop: "16px" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
|
||||
'animation with different properties on different keyframes, with ' +
|
||||
'a different easing function on each');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.animation = 'anim-merge-offset 100s';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
|
|
@ -470,21 +414,16 @@ test(t => {
|
|||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(255, 255, 255)", marginTop: "16px" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
|
||||
'animation with multiple keyframes for the same time, and all with ' +
|
||||
'the same easing function');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.animation = 'anim-merge-offset-and-easing 100s';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 3, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "steps(1)", composite: "auto",
|
||||
|
|
@ -495,21 +434,16 @@ test(t => {
|
|||
color: "rgb(255, 255, 255)", fontSize: "32px", marginTop: "16px",
|
||||
paddingLeft: "4px" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
|
||||
'animation with multiple keyframes for the same time and with ' +
|
||||
'different easing functions');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.animation = 'anim-no-merge-equiv-easing 100s';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 3, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "steps(1)", composite: "auto",
|
||||
|
|
@ -519,21 +453,16 @@ test(t => {
|
|||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
marginTop: "20px", marginRight: "20px", marginBottom: "20px" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for an ' +
|
||||
'animation with multiple keyframes for the same time and with ' +
|
||||
'different but equivalent easing functions');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.animation = 'anim-overriding 100s';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 6, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
|
|
@ -549,10 +478,7 @@ test(t => {
|
|||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
paddingTop: "70px" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected frames for ' +
|
||||
'overlapping keyframes');
|
||||
|
||||
|
|
@ -561,11 +487,9 @@ test(t => {
|
|||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.animation = 'anim-filter 100s';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
|
|
@ -573,20 +497,15 @@ test(t => {
|
|||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
filter: "blur(5px) sepia(60%) saturate(30%)" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
|
||||
'animations with filter properties and missing keyframes');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.animation = 'anim-filter-drop-shadow 100s';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
|
|
@ -594,10 +513,7 @@ test(t => {
|
|||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
filter: "drop-shadow(rgb(255, 0, 0) 50px 30px 10px)" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
|
||||
'animation with drop-shadow of filter property');
|
||||
|
||||
|
|
@ -607,14 +523,12 @@ test(t => {
|
|||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
div.style.textShadow = '1px 1px 2px rgb(0, 0, 0), ' +
|
||||
'0 0 16px rgb(0, 0, 255), ' +
|
||||
'0 0 3.2px rgb(0, 0, 255)';
|
||||
div.style.animation = 'anim-text-shadow 100s';
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, "number of frames");
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
|
|
@ -624,10 +538,7 @@ test(t => {
|
|||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
textShadow: "none" },
|
||||
];
|
||||
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
|
||||
'animations with text-shadow properties and missing keyframes');
|
||||
|
||||
|
|
@ -673,17 +584,13 @@ test(t => {
|
|||
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
transform: "none" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
transform: "translate(100px)" },
|
||||
];
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
|
||||
'animations with CSS variables as keyframe values');
|
||||
|
||||
|
|
@ -693,8 +600,6 @@ test(t => {
|
|||
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
marginBottom: "0px",
|
||||
|
|
@ -707,9 +612,7 @@ test(t => {
|
|||
marginRight: "100px",
|
||||
marginTop: "100px" },
|
||||
];
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
|
||||
'animations with CSS variables as keyframe values in a shorthand property');
|
||||
|
||||
|
|
@ -719,17 +622,13 @@ test(t => {
|
|||
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
color: "rgb(0, 0, 0)" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
color: "rgb(0, 255, 0)" },
|
||||
];
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
|
||||
'animations with a CSS variable which is overriden by the value in keyframe');
|
||||
|
||||
|
|
@ -739,19 +638,63 @@ test(t => {
|
|||
|
||||
const frames = getKeyframes(div);
|
||||
|
||||
assert_equals(frames.length, 2, "number of frames");
|
||||
|
||||
const expected = [
|
||||
{ offset: 0, computedOffset: 0, easing: "ease", composite: "auto",
|
||||
transform: "translate(100px)" },
|
||||
{ offset: 1, computedOffset: 1, easing: "ease", composite: "auto",
|
||||
transform: "none" },
|
||||
];
|
||||
for (let i = 0; i < frames.length; i++) {
|
||||
assert_frames_equal(frames[i], expected[i], "ComputedKeyframe #" + i);
|
||||
}
|
||||
assert_frame_lists_equal(frames, expected);
|
||||
}, 'KeyframeEffect.getKeyframes() returns expected values for ' +
|
||||
'animations with only custom property in a keyframe');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
// Add custom @keyframes rule
|
||||
const stylesheet = document.styleSheets[0];
|
||||
const keyframes = '@keyframes anim-custom { to { left: 100px } }';
|
||||
const ruleIndex = stylesheet.insertRule(keyframes, 0);
|
||||
const keyframesRule = stylesheet.cssRules[ruleIndex];
|
||||
|
||||
t.add_cleanup(function() {
|
||||
stylesheet.deleteRule(ruleIndex);
|
||||
});
|
||||
|
||||
div.style.animation = 'anim-custom 100s';
|
||||
|
||||
// Sanity check the initial result
|
||||
let frames = getKeyframes(div);
|
||||
assert_frames_equal(
|
||||
frames[frames.length - 1],
|
||||
{
|
||||
offset: 1,
|
||||
computedOffset: 1,
|
||||
easing: 'ease',
|
||||
composite: 'auto',
|
||||
left: '100px',
|
||||
},
|
||||
'Keyframes reflect the initial @keyframes rule'
|
||||
);
|
||||
|
||||
// Update the @keyframes rule
|
||||
keyframesRule.deleteRule(0);
|
||||
keyframesRule.appendRule('to { left: 200px }');
|
||||
|
||||
// Check the result from getKeyframes() is updated
|
||||
frames = getKeyframes(div);
|
||||
assert_frames_equal(
|
||||
frames[frames.length - 1],
|
||||
{
|
||||
offset: 1,
|
||||
computedOffset: 1,
|
||||
easing: 'ease',
|
||||
composite: 'auto',
|
||||
left: '200px',
|
||||
},
|
||||
'Keyframes reflects the updated @keyframes rule'
|
||||
);
|
||||
}, 'KeyframeEffect.getKeyframes() reflects changes to @keyframes rules');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>KeyframeEffect.setKeyframes() for CSS animations</title>
|
||||
<!-- TODO: Add a more specific link for this once it is specified. -->
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-2/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/testcommon.js"></script>
|
||||
<style>
|
||||
@keyframes anim-simple {
|
||||
from { left: 0px }
|
||||
to { left: 100px }
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
// Note that the sanity check that getKeyframes() normally DOES return the
|
||||
// updated keyframes is contained in KeyframeEffect-getKeyframes.html.
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
// Add custom @keyframes rule
|
||||
const stylesheet = document.styleSheets[0];
|
||||
const keyframes = '@keyframes anim-custom { to { left: 100px } }';
|
||||
const ruleIndex = stylesheet.insertRule(keyframes, 0);
|
||||
const keyframesRule = stylesheet.cssRules[ruleIndex];
|
||||
|
||||
t.add_cleanup(function() {
|
||||
stylesheet.deleteRule(ruleIndex);
|
||||
});
|
||||
|
||||
div.style.animation = 'anim-custom 100s';
|
||||
|
||||
// Update the keyframes via the API
|
||||
const animation = div.getAnimations()[0];
|
||||
animation.effect.setKeyframes({ left: '200px' });
|
||||
|
||||
// Then update them via style
|
||||
keyframesRule.deleteRule(0);
|
||||
keyframesRule.appendRule('to { left: 300px }');
|
||||
|
||||
// The result should be the keyframes as set by the API, not via style.
|
||||
const frames = animation.effect.getKeyframes();
|
||||
assert_frames_equal(
|
||||
frames[frames.length - 1],
|
||||
{
|
||||
offset: null,
|
||||
computedOffset: 1,
|
||||
easing: 'linear',
|
||||
composite: 'auto',
|
||||
left: '200px',
|
||||
},
|
||||
'Keyframes reflect the value set via setKeyframes'
|
||||
);
|
||||
}, 'KeyframeEffect.setKeyframes() causes subsequent changes to @keyframes'
|
||||
+ ' rules to be ignored');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
div.style.animation = 'anim-simple 100s';
|
||||
|
||||
const animation = div.getAnimations()[0];
|
||||
assert_equals(animation.effect.getKeyframes()[0].easing, 'ease');
|
||||
|
||||
animation.effect.setKeyframes({ left: ['200px', '300px'] });
|
||||
assert_equals(animation.effect.getKeyframes()[0].easing, 'linear');
|
||||
|
||||
div.style.animationTimingFunction = 'ease-in';
|
||||
getComputedStyle(div).animationTimingFunction;
|
||||
|
||||
assert_equals(
|
||||
animation.effect.getKeyframes()[0].easing,
|
||||
'linear',
|
||||
'Easing should be the easing set by the API'
|
||||
);
|
||||
}, 'KeyframeEffect.setKeyframes() causes subsequent changes to'
|
||||
+ ' animation-timing-function to be ignored');
|
||||
|
||||
test(t => {
|
||||
const div = addDiv(t);
|
||||
|
||||
const stylesheet = document.styleSheets[0];
|
||||
const keyframes = '@keyframes anim-custom { to { left: 100px } }';
|
||||
const ruleIndex = stylesheet.insertRule(keyframes, 0);
|
||||
const keyframesRule = stylesheet.cssRules[ruleIndex];
|
||||
|
||||
t.add_cleanup(function() {
|
||||
stylesheet.deleteRule(ruleIndex);
|
||||
});
|
||||
|
||||
div.style.animation = 'anim-custom 100s';
|
||||
|
||||
// Try updating in a way that throws an error
|
||||
const animation = div.getAnimations()[0];
|
||||
assert_throws_js(TypeError, () => {
|
||||
animation.effect.setKeyframes({ left: '200px', offset: 'yer' });
|
||||
});
|
||||
|
||||
keyframesRule.deleteRule(0);
|
||||
keyframesRule.appendRule('to { left: 300px }');
|
||||
|
||||
// The result should be the keyframes as set via style.
|
||||
const frames = animation.effect.getKeyframes();
|
||||
assert_frames_equal(
|
||||
frames[frames.length - 1],
|
||||
{
|
||||
offset: 1,
|
||||
computedOffset: 1,
|
||||
easing: 'ease',
|
||||
composite: 'auto',
|
||||
left: '300px',
|
||||
},
|
||||
'Keyframes reflect the value set via style'
|
||||
);
|
||||
}, 'KeyframeEffect.setKeyframes() should NOT cause subsequent changes to'
|
||||
+ ' @keyframes rules to be ignored if it threw');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -36,6 +36,55 @@ function assert_time_equals_literal(actual, expected, description) {
|
|||
assert_approx_equals(actual, expected, TIME_PRECISION, description);
|
||||
}
|
||||
|
||||
/*
|
||||
* Compare two keyframes
|
||||
*/
|
||||
function assert_frames_equal(actual, expected, name) {
|
||||
// TODO: Make this skip the 'composite' member when it is not specified in
|
||||
// `expected` or when the implementation does not support it.
|
||||
assert_array_equals(
|
||||
Object.keys(actual).sort(),
|
||||
Object.keys(expected).sort(),
|
||||
`properties on ${name} should match`
|
||||
);
|
||||
|
||||
for (const prop in actual) {
|
||||
if (
|
||||
// 'offset' can be null
|
||||
(prop === 'offset' && typeof actual[prop] === 'number') ||
|
||||
prop === 'computedOffset'
|
||||
) {
|
||||
assert_approx_equals(
|
||||
actual[prop],
|
||||
expected[prop],
|
||||
0.00001,
|
||||
"value for '" + prop + "' on " + name
|
||||
);
|
||||
} else {
|
||||
assert_equals(
|
||||
actual[prop],
|
||||
expected[prop],
|
||||
`value for '${prop}' on ${name} should match`
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Compare two lists of keyframes
|
||||
*/
|
||||
function assert_frame_lists_equal(actual, expected) {
|
||||
assert_equals(
|
||||
actual.length,
|
||||
expected.length,
|
||||
'Number of keyframes should match'
|
||||
);
|
||||
|
||||
for (let i = 0; i < actual.length; i++) {
|
||||
assert_frames_equal(actual[i], expected[i], `Keyframe #${i}`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Appends a div to the document body.
|
||||
*
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue