mirror of
https://github.com/servo/servo.git
synced 2025-06-23 16:44:33 +01:00
221 lines
7.7 KiB
HTML
221 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<meta name="assert"
|
|
content="This test checks the output of Cubic Bézier functions" />
|
|
<title>Tests for the output of Cubic Bézier timing functions</title>
|
|
<link rel="help"
|
|
href="https://drafts.csswg.org/css-timing/#cubic-bezier-timing-functions">
|
|
<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';
|
|
|
|
function assert_style_left_at(animation, time, easingFunction) {
|
|
animation.currentTime = time;
|
|
var portion = time / animation.effect.timing.duration;
|
|
assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left),
|
|
easingFunction(portion) * 100,
|
|
0.01,
|
|
'The left of the animation should be approximately ' +
|
|
easingFunction(portion) * 100 + ' at ' + time + 'ms');
|
|
}
|
|
|
|
test(function(t) {
|
|
var target = createDiv(t);
|
|
target.style.position = 'absolute';
|
|
var anim = target.animate(
|
|
// http://cubic-bezier.com/#.5,1,.5,0
|
|
[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
|
|
{ left: '100px' } ],
|
|
{ duration: 1000,
|
|
fill: 'forwards',
|
|
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
|
var keyframeEasing = function(x) {
|
|
assert_greater_than_equal(x, 0.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
assert_less_than_equal(x, 1.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
return cubicBezier(0.5, 1, 0.5, 0)(x);
|
|
}
|
|
var keyframeEasingExtrapolated = function(x) {
|
|
assert_greater_than(x, 1.0,
|
|
'This function should be called in (1.0, infinity) range');
|
|
// p3x + (p2y - p3y) / (p2x - p3x) * (x - p3x)
|
|
return 1.0 + (0 - 1) / (0.5 - 1) * (x - 1.0);
|
|
}
|
|
var effectEasing = function(x) {
|
|
return cubicBezier(0, 1.5, 1, 1.5)(x);
|
|
}
|
|
|
|
// The effect-easing produces values greater than 1 in (0.23368794, 1)
|
|
assert_style_left_at(anim, 0, function(x) {
|
|
return keyframeEasing(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 230, function(x) {
|
|
return keyframeEasing(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 240, function(x) {
|
|
return keyframeEasingExtrapolated(effectEasing(x));
|
|
});
|
|
// Near the extreme point of the effect-easing function
|
|
assert_style_left_at(anim, 700, function(x) {
|
|
return keyframeEasingExtrapolated(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 990, function(x) {
|
|
return keyframeEasingExtrapolated(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 1000, function(x) {
|
|
return keyframeEasing(effectEasing(x));
|
|
});
|
|
}, 'cubic-bezier easing with input progress greater than 1');
|
|
|
|
test(function(t) {
|
|
var target = createDiv(t);
|
|
target.style.position = 'absolute';
|
|
var anim = target.animate(
|
|
// http://cubic-bezier.com/#0,1.5,1,1.5
|
|
[ { left: '0px', easing: 'cubic-bezier(0, 1.5, 1, 1.5)' },
|
|
{ left: '100px' } ],
|
|
{ duration: 1000,
|
|
fill: 'forwards',
|
|
easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
|
|
var easing = function(x) {
|
|
assert_greater_than_equal(x, 0.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
assert_less_than_equal(x, 1.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
return cubicBezier(0, 1.5, 1, 1.5)(x);
|
|
}
|
|
var easingExtrapolated = function(x) {
|
|
assert_greater_than(x, 1.0,
|
|
'This function should be called in negative range');
|
|
// For cubic-bezier(0, 1.5, 1, 1.5), the tangent at the
|
|
// endpoint (x = 1.0) is infinity so we should just return 1.0.
|
|
return 1.0;
|
|
}
|
|
|
|
// The effect-easing produces values greater than 1 in (0.23368794, 1)
|
|
assert_style_left_at(anim, 0, function(x) {
|
|
return easing(easing(x))
|
|
});
|
|
assert_style_left_at(anim, 230, function(x) {
|
|
return easing(easing(x))
|
|
});
|
|
assert_style_left_at(anim, 240, function(x) {
|
|
return easingExtrapolated(easing(x));
|
|
});
|
|
// Near the extreme point of the effect-easing function
|
|
assert_style_left_at(anim, 700, function(x) {
|
|
return easingExtrapolated(easing(x));
|
|
});
|
|
assert_style_left_at(anim, 990, function(x) {
|
|
return easingExtrapolated(easing(x));
|
|
});
|
|
assert_style_left_at(anim, 1000, function(x) {
|
|
return easing(easing(x))
|
|
});
|
|
}, 'cubic-bezier easing with input progress greater than 1 and where the ' +
|
|
'tangent on the upper boundary is infinity');
|
|
|
|
test(function(t) {
|
|
var target = createDiv(t);
|
|
target.style.position = 'absolute';
|
|
var anim = target.animate(
|
|
// http://cubic-bezier.com/#.5,1,.5,0
|
|
[ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' },
|
|
{ left: '100px' } ],
|
|
{ duration: 1000,
|
|
fill: 'forwards',
|
|
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
|
var keyframeEasing = function(x) {
|
|
assert_greater_than_equal(x, 0.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
assert_less_than_equal(x, 1.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
return cubicBezier(0.5, 1, 0.5, 0)(x);
|
|
}
|
|
var keyframeEasingExtrapolated = function(x) {
|
|
assert_less_than(x, 0.0,
|
|
'This function should be called in negative range');
|
|
// p0x + (p1y - p0y) / (p1x - p0x) * (x - p0x)
|
|
return (1 / 0.5) * x;
|
|
}
|
|
var effectEasing = function(x) {
|
|
return cubicBezier(0, -0.5, 1, -0.5)(x);
|
|
}
|
|
|
|
// The effect-easing produces negative values in (0, 0.766312060)
|
|
assert_style_left_at(anim, 0, function(x) {
|
|
return keyframeEasing(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 10, function(x) {
|
|
return keyframeEasingExtrapolated(effectEasing(x));
|
|
});
|
|
// Near the extreme point of the effect-easing function
|
|
assert_style_left_at(anim, 300, function(x) {
|
|
return keyframeEasingExtrapolated(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 750, function(x) {
|
|
return keyframeEasingExtrapolated(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 770, function(x) {
|
|
return keyframeEasing(effectEasing(x));
|
|
});
|
|
assert_style_left_at(anim, 1000, function(x) {
|
|
return keyframeEasing(effectEasing(x));
|
|
});
|
|
}, 'cubic-bezier easing with input progress less than 0');
|
|
|
|
test(function(t) {
|
|
var target = createDiv(t);
|
|
target.style.position = 'absolute';
|
|
var anim = target.animate(
|
|
// http://cubic-bezier.com/#0,-0.5,1,-0.5
|
|
[ { left: '0px', easing: 'cubic-bezier(0, -0.5, 1, -0.5)' },
|
|
{ left: '100px' } ],
|
|
{ duration: 1000,
|
|
fill: 'forwards',
|
|
easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
|
|
var easing = function(x) {
|
|
assert_greater_than_equal(x, 0.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
assert_less_than_equal(x, 1.0,
|
|
'This function should be called in [0, 1.0] range');
|
|
return cubicBezier(0, -0.5, 1, -0.5)(x);
|
|
}
|
|
var easingExtrapolated = function(x) {
|
|
assert_less_than(x, 0.0,
|
|
'This function should be called in negative range');
|
|
// For cubic-bezier(0, -0.5, 1, -0.5), the tangent at the
|
|
// endpoint (x = 0.0) is infinity so we should just return 0.0.
|
|
return 0.0;
|
|
}
|
|
|
|
// The effect-easing produces negative values in (0, 0.766312060)
|
|
assert_style_left_at(anim, 0, function(x) {
|
|
return easing(easing(x))
|
|
});
|
|
assert_style_left_at(anim, 10, function(x) {
|
|
return easingExtrapolated(easing(x));
|
|
});
|
|
// Near the extreme point of the effect-easing function
|
|
assert_style_left_at(anim, 300, function(x) {
|
|
return easingExtrapolated(easing(x));
|
|
});
|
|
assert_style_left_at(anim, 750, function(x) {
|
|
return easingExtrapolated(easing(x));
|
|
});
|
|
assert_style_left_at(anim, 770, function(x) {
|
|
return easing(easing(x))
|
|
});
|
|
assert_style_left_at(anim, 1000, function(x) {
|
|
return easing(easing(x))
|
|
});
|
|
}, 'cubic-bezier easing with input progress less than 0 and where the ' +
|
|
'tangent on the lower boundary is infinity');
|
|
|
|
</script>
|
|
</body>
|