mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
152 lines
5.4 KiB
HTML
152 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<meta name="assert"
|
|
content="This test checks the output of frame timing functions with different frame numbers" />
|
|
<title>Frames timing function output tests</title>
|
|
<link rel="help"
|
|
href="https://drafts.csswg.org/css-timing/#frames-timing-functions">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="testcommon.js"></script>
|
|
<style>
|
|
@keyframes anim {
|
|
from { left: 0px; }
|
|
to { left: 100px; }
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="log"></div>
|
|
<script>
|
|
"use strict";
|
|
|
|
test(function(t) {
|
|
const div = createDiv(t);
|
|
div.style.animation = 'anim 10s frames(2) forwards';
|
|
assert_equals(getComputedStyle(div).left, '0px');
|
|
}, 'For an input progress of 0.0, the output of a frames timing function is ' +
|
|
'the first frame');
|
|
|
|
test(function(t) {
|
|
const div = createDiv(t);
|
|
div.style.animation = 'anim 10s frames(2) forwards';
|
|
|
|
div.style.animationDelay = '-4999ms';
|
|
assert_equals(getComputedStyle(div).left, '0px');
|
|
div.style.animationDelay = '-5000ms';
|
|
assert_equals(getComputedStyle(div).left, '100px');
|
|
}, 'At a frame boundary, the output of a frames timing function is the next ' +
|
|
'frame');
|
|
|
|
test(function(t) {
|
|
const div = createDiv(t);
|
|
div.style.animation = 'anim 10s frames(2) forwards';
|
|
|
|
div.style.animationDelay = '-10s';
|
|
assert_equals(getComputedStyle(div).left, '100px');
|
|
}, 'For an input progress of 1.0, the output of a frames timing function is ' +
|
|
'the final frame');
|
|
|
|
test(function(t) {
|
|
const div = createDiv(t);
|
|
div.style.animation = 'anim 11s frames(11) forwards';
|
|
|
|
// We have 11 frames in 11s, so the first step happens at 1.0.
|
|
div.style.animationDelay = '-999ms';
|
|
assert_equals(getComputedStyle(div).left, '0px');
|
|
div.style.animationDelay = '-1000ms';
|
|
assert_equals(getComputedStyle(div).left, '10px');
|
|
}, 'The number of frames is correctly reflected in the frames timing ' +
|
|
'function output');
|
|
|
|
test(function(t) {
|
|
const div = createDiv(t);
|
|
div.style.transition = 'left 11s frames(11)';
|
|
|
|
// We have 11 frames in 11s, so the first step happens at 1.0.
|
|
div.style.left = '0px';
|
|
div.style.transitionDelay = '-999ms';
|
|
getComputedStyle(div).left;
|
|
div.style.left = '100px';
|
|
assert_equals(getComputedStyle(div).left, '0px');
|
|
|
|
div.style.left = '0px';
|
|
div.style.transitionDelay = '-1000ms';
|
|
getComputedStyle(div).left;
|
|
div.style.left = '100px';
|
|
assert_equals(getComputedStyle(div).left, '10px');
|
|
}, 'The number of frames is correctly reflected in the frames timing ' +
|
|
'function output on CSS Transitions');
|
|
|
|
test(function(t) {
|
|
var target = createDiv(t);
|
|
target.style.position = 'absolute';
|
|
var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
|
|
{ left: '100px' } ],
|
|
{ duration: 1000,
|
|
fill: 'forwards',
|
|
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
|
|
|
// The bezier function produces values between 0.5 and 1 in
|
|
// (~0.0442, 0.23368), and values between 1 and 2 in (0.23368794, 1).
|
|
anim.currentTime = 0;
|
|
assert_equals(getComputedStyle(target).left, '0px');
|
|
anim.currentTime = 45;
|
|
assert_equals(getComputedStyle(target).left, '100px');
|
|
anim.currentTime = 230;
|
|
assert_equals(getComputedStyle(target).left, '100px');
|
|
anim.currentTime = 250;
|
|
assert_equals(getComputedStyle(target).left, '200px');
|
|
anim.currentTime = 1000;
|
|
assert_equals(getComputedStyle(target).left, '100px');
|
|
}, 'frames easing with input progress greater than 1');
|
|
|
|
test(function(t) {
|
|
var target = createDiv(t);
|
|
target.style.position = 'absolute';
|
|
var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
|
|
{ left: '100px' } ],
|
|
{ duration: 1000,
|
|
fill: 'forwards',
|
|
easing: 'cubic-bezier(0, 3, 1, 3)' });
|
|
|
|
// The bezier funciton produces values:
|
|
// Input -> Output
|
|
// 0.0 0.0
|
|
// 0.114 ~ 0.245 1.5~2.0, so frames(2) is 3.0
|
|
// 0.245 ~ 0.6 2.0~2.4, so frames(2) is 4.0
|
|
// 0.6 ~ 0.882 2.4~2.0, so frames(2) is 4.0
|
|
// 0.882 ~ 0.976 2.0~1.5, so frames(2) is 3.0
|
|
// 1.0 1.0
|
|
anim.currentTime = 0;
|
|
assert_equals(getComputedStyle(target).left, '0px');
|
|
anim.currentTime = 114;
|
|
assert_equals(getComputedStyle(target).left, '300px');
|
|
anim.currentTime = 500;
|
|
assert_equals(getComputedStyle(target).left, '400px');
|
|
anim.currentTime = 900;
|
|
assert_equals(getComputedStyle(target).left, '300px');
|
|
}, 'frames easing with input progress greater than 1.5');
|
|
|
|
test(function(t) {
|
|
var target = createDiv(t);
|
|
target.style.position = 'absolute';
|
|
var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
|
|
{ left: '100px' } ],
|
|
{ duration: 1000,
|
|
fill: 'forwards',
|
|
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
|
|
|
// The bezier function produces negative values (but always greater than -0.5)
|
|
// in (0, 0.766312060).
|
|
anim.currentTime = 0;
|
|
assert_equals(getComputedStyle(target).left, '0px');
|
|
anim.currentTime = 750;
|
|
assert_equals(getComputedStyle(target).left, '-100px');
|
|
anim.currentTime = 800;
|
|
assert_equals(getComputedStyle(target).left, '0px');
|
|
anim.currentTime = 1000;
|
|
assert_equals(getComputedStyle(target).left, '100px');
|
|
}, 'frames easing with input progress less than 0');
|
|
|
|
</script>
|
|
</body>
|