mirror of
https://github.com/HeyPuter/firefox.git
synced 2026-11-13 20:14:57 -10:00
Brian Birtles
8bf1e2f570
This is a collection of fix-ups to the corresponding tests for CSS animations to apply the same sort of naming etc. that we have now applied to CSS transitions tests.
70 lines
2.1 KiB
HTML
70 lines
2.1 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<title>CSSAnimation.startTime</title>
|
|
<!-- TODO: Add a more specific link for this once it is specified. -->
|
|
<link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="support/testcommon.js"></script>
|
|
<style>
|
|
|
|
.animated-div {
|
|
margin-left: 10px;
|
|
/* Make it easier to calculate expected values: */
|
|
animation-timing-function: linear ! important;
|
|
}
|
|
|
|
@keyframes anim {
|
|
from { margin-left: 100px; }
|
|
to { margin-left: 200px; }
|
|
}
|
|
|
|
</style>
|
|
<div id="log"></div>
|
|
<script type="text/javascript">
|
|
|
|
'use strict';
|
|
|
|
test(t => {
|
|
const div = addDiv(t, { 'class': 'animated-div' });
|
|
div.style.animation = 'anim 100s 100s';
|
|
const animation = div.getAnimations()[0];
|
|
|
|
const timelineTime = animation.timeline.currentTime;
|
|
animation.startTime = timelineTime;
|
|
|
|
assert_times_equal(animation.startTime, timelineTime,
|
|
'Check setting of startTime actually works');
|
|
}, 'The start time of a CSS animation can be set');
|
|
|
|
promise_test(async t => {
|
|
const div = addDiv(t, { 'class': 'animated-div' });
|
|
div.style.animation = 'anim 100s 100s';
|
|
const animation = div.getAnimations()[0];
|
|
|
|
// Seek to the half-way point
|
|
animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
|
|
|
|
assert_equals(getComputedStyle(div).marginLeft, '150px');
|
|
}, 'The start time can be set to seek a CSS animation');
|
|
|
|
promise_test(async t => {
|
|
const div = addDiv(t, { class: 'animated-div' });
|
|
const eventWatcher = new EventWatcher(t, div, [
|
|
'animationstart',
|
|
'animationend',
|
|
]);
|
|
div.style.animation = 'anim 100s 100s';
|
|
const animation = div.getAnimations()[0];
|
|
|
|
await animation.ready;
|
|
|
|
animation.startTime = animation.timeline.currentTime - 100 * MS_PER_SEC;
|
|
await eventWatcher.wait_for('animationstart');
|
|
|
|
animation.startTime = animation.timeline.currentTime - 200 * MS_PER_SEC;
|
|
await eventWatcher.wait_for('animationend');
|
|
}, 'Seeking a CSS animation using the start time dispatches animation events');
|
|
|
|
</script>
|