78 lines
2.8 KiB
HTML
78 lines
2.8 KiB
HTML
<!doctype html>
|
|
<meta charset=utf-8>
|
|
<title>Scroll based animation: AnimationEffect.getComputedTiming</title>
|
|
<link rel="help" href="https://www.w3.org/TR/web-animations-2/#dom-animationeffect-getcomputedtiming">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/web-animations/testcommon.js"></script>
|
|
<script src="testcommon.js"></script>
|
|
<style>
|
|
.scroller {
|
|
overflow: auto;
|
|
height: 100px;
|
|
width: 100px;
|
|
will-change: transform;
|
|
}
|
|
.contents {
|
|
height: 1000px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="log"></div>
|
|
<script type="text/javascript">
|
|
|
|
//------------------------------------
|
|
// Time-based duration
|
|
//------------------------------------
|
|
|
|
test(t => {
|
|
const anim = createScrollLinkedAnimationWithTiming(t, {duration: 1000 });
|
|
assert_equals(anim.effect.getTiming().duration, 1000);
|
|
assert_percents_equal(anim.effect.getComputedTiming().duration, 100);
|
|
}, 'Computed duration in percent even when specified in ms');
|
|
|
|
test(t => {
|
|
const anim = createScrollLinkedAnimationWithTiming(t, { duration: 1000 });
|
|
anim.rangeStart = { offset: CSS.percent(20) };
|
|
anim.rangeEnd = { offset: CSS.percent(80) };
|
|
assert_equals(anim.effect.getTiming().duration, 1000);
|
|
assert_percents_equal(anim.effect.getComputedTiming().duration, 60);
|
|
}, 'Time-based duration normalized to fill animation range.');
|
|
|
|
test(t => {
|
|
const anim =
|
|
createScrollLinkedAnimationWithTiming(
|
|
t, {duration: 700, delay: 100, endDelay: 200 });
|
|
assert_equals(anim.effect.getTiming().duration, 700);
|
|
assert_percents_equal(anim.effect.getComputedTiming().duration, 70);
|
|
}, 'Time-based duration normalized to preserve proportional delays.');
|
|
|
|
//-------------------------------------------------
|
|
// Duration 'auto' = Intrinsic iteration duration
|
|
//-------------------------------------------------
|
|
|
|
test(t => {
|
|
const anim = createScrollLinkedAnimationWithTiming(t, {});
|
|
assert_equals(anim.effect.getTiming().duration, 'auto');
|
|
assert_percents_equal(anim.effect.getComputedTiming().duration, 100);
|
|
}, 'Intrinsic iteration duration fills timeline.');
|
|
|
|
test(t => {
|
|
const anim = createScrollLinkedAnimationWithTiming(t, {});
|
|
anim.rangeStart = { offset: CSS.percent(30) };
|
|
anim.rangeEnd = { offset: CSS.percent(90) };
|
|
assert_equals(anim.effect.getTiming().duration, 'auto');
|
|
assert_percents_equal(anim.effect.getComputedTiming().duration, 60);
|
|
}, 'Intrinsic iteration duration accounts for animation range.');
|
|
|
|
test(t => {
|
|
const anim =
|
|
createScrollLinkedAnimationWithTiming(
|
|
t, { iterations: 4 });
|
|
assert_equals(anim.effect.getTiming().duration, 'auto');
|
|
assert_percents_equal(anim.effect.getComputedTiming().duration, 25);
|
|
}, 'Intrinsic iteration duration accounts for number of iterations');
|
|
|
|
</script>
|
|
</body>
|