220 lines
8.5 KiB
HTML
220 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<!-- TODO(kevers): Insert link once resolutions present in spec -->
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/web-animations/testcommon.js"></script>
|
|
<script src="/web-animations/resources/keyframe-utils.js"></script>
|
|
<script src="support/testcommon.js"></script>
|
|
<title>Reported keyframes containing timeline offset</title>
|
|
</head>
|
|
<style type="text/css">
|
|
#scroller {
|
|
border: 10px solid lightgray;
|
|
overflow-y: scroll;
|
|
overflow-x: hidden;
|
|
width: 300px;
|
|
height: 200px;
|
|
}
|
|
#target {
|
|
margin: 800px 10px;
|
|
width: 100px;
|
|
height: 100px;
|
|
z-index: -1;
|
|
background-color: green;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id=scroller>
|
|
<div id=target></div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript">
|
|
async function runTest() {
|
|
function createAnimation(t, keyframes, use_view_timeline = true) {
|
|
const options = {
|
|
rangeStart: { rangeName: 'contain', offset: CSS.percent(0) },
|
|
rangeEnd: { rangeName: 'contain', offset: CSS.percent(100) },
|
|
duration: 'auto',
|
|
fill: 'both'
|
|
};
|
|
if (use_view_timeline) {
|
|
options.timeline = new ViewTimeline( { subject: target });
|
|
}
|
|
const anim = target.animate(keyframes, options);
|
|
t.add_cleanup(() => {
|
|
anim.cancel();
|
|
});
|
|
return anim;
|
|
}
|
|
|
|
promise_test(async t => {
|
|
let anim = createAnimation(t, [
|
|
{ offset: "contain 25%", marginLeft: "0px", opacity: "0" },
|
|
{ offset: "contain 75%", marginRight: "0px", opacity: "1" }
|
|
]);
|
|
let frames = anim.effect.getKeyframes();
|
|
let expected = [
|
|
{ offset: { rangeName: 'contain', offset: CSS.percent(25) },
|
|
computedOffset: 0.25, easing: "linear", composite: "auto",
|
|
marginLeft: "0px", opacity: "0" },
|
|
{ offset: { rangeName: 'contain', offset: CSS.percent(75) },
|
|
computedOffset: 0.75, easing: "linear", composite: "auto",
|
|
marginRight: "0px", opacity: "1" }
|
|
];
|
|
assert_frame_lists_equal(frames, expected);
|
|
}, 'Report specified timeline offsets');
|
|
|
|
promise_test(async t => {
|
|
let anim = createAnimation(t, [
|
|
{ offset: "cover 0%", marginLeft: "0px", opacity: "0" },
|
|
{ offset: "cover 100%", marginRight: "0px", opacity: "1" }
|
|
]);
|
|
let frames = anim.effect.getKeyframes();
|
|
let expected = [
|
|
{ offset: { rangeName: 'cover', offset: CSS.percent(0) },
|
|
computedOffset: -1, easing: "linear", composite: "auto",
|
|
marginLeft: "0px", opacity: "0" },
|
|
{ offset: { rangeName: 'cover', offset: CSS.percent(100) },
|
|
computedOffset: 2, easing: "linear", composite: "auto",
|
|
marginRight: "0px", opacity: "1" }
|
|
];
|
|
assert_frame_lists_equal(frames, expected);
|
|
}, 'Computed offsets can be outside [0,1] for keyframes with timeline ' +
|
|
'offsets');
|
|
|
|
promise_test(async t => {
|
|
let anim = createAnimation(t, [
|
|
{ offset: "cover -100%", opacity: "0" },
|
|
{ offset: "cover 200%", opacity: "1" },
|
|
]);
|
|
let frames = anim.effect.getKeyframes();
|
|
let expected = [
|
|
{ offset: { rangeName: 'cover', offset: CSS.percent(-100) },
|
|
computedOffset: -4, easing: "linear", composite: "auto",
|
|
opacity: "0" },
|
|
{ offset: { rangeName: 'cover', offset: CSS.percent(200) },
|
|
computedOffset: 5, easing: "linear", composite: "auto",
|
|
opacity: "1" }
|
|
];
|
|
assert_frame_lists_equal(frames, expected);
|
|
}, 'Offsets can be outside [0%,100%] for keyframes with timeline range names');
|
|
|
|
promise_test(async t => {
|
|
let anim = createAnimation(t, [
|
|
{ offset: "contain 75%", marginLeft: "0px", opacity: "0" },
|
|
{ offset: "contain 25%", marginRight: "0px", opacity: "1" }
|
|
]);
|
|
let frames = anim.effect.getKeyframes();
|
|
let expected = [
|
|
{ offset: { rangeName: 'contain', offset: CSS.percent(75) },
|
|
computedOffset: 0.75, easing: "linear", composite: "auto",
|
|
marginLeft: "0px", opacity: "0" },
|
|
{ offset: { rangeName: 'contain', offset: CSS.percent(25) },
|
|
computedOffset: 0.25, easing: "linear", composite: "auto",
|
|
marginRight: "0px", opacity: "1" }
|
|
];
|
|
assert_frame_lists_equal(frames, expected);
|
|
}, 'Retain specified ordering of keyframes with timeline offsets');
|
|
|
|
promise_test(async t => {
|
|
let anim = createAnimation(t, [
|
|
{ offset: "cover 0%", marginLeft: "0px", opacity: "0" },
|
|
{ offset: "cover 100%", marginRight: "0px", opacity: "1" }
|
|
], /* use_view_timeline */ false);
|
|
let frames = anim.effect.getKeyframes();
|
|
let expected = [
|
|
{ offset: { rangeName: 'cover', offset: CSS.percent(0) },
|
|
computedOffset: null, easing: "linear", composite: "auto",
|
|
marginLeft: "0px", opacity: "0" },
|
|
{ offset: { rangeName: 'cover', offset: CSS.percent(100) },
|
|
computedOffset: null, easing: "linear", composite: "auto",
|
|
marginRight: "0px", opacity: "1" }
|
|
];
|
|
assert_frame_lists_equal(frames, expected);
|
|
}, 'Include unreachable keyframes');
|
|
|
|
|
|
promise_test(async t => {
|
|
let anim = createAnimation(t, [
|
|
{ offset: "cover 0%", marginLeft: "0px", opacity: 0 },
|
|
{ offset: "cover 100%", marginRight: "0px", opacity: 1 },
|
|
{ opacity: 0 },
|
|
{ opacity: 0.5 },
|
|
{ opacity: 1.0 }
|
|
]);
|
|
let frames = anim.effect.getKeyframes();
|
|
let expected = [
|
|
{ offset: { rangeName: 'cover', offset: CSS.percent(0) },
|
|
computedOffset: -1, easing: "linear", composite: "auto",
|
|
marginLeft: "0px", opacity: "0" },
|
|
{ offset: { rangeName: 'cover', offset: CSS.percent(100) },
|
|
computedOffset: 2, easing: "linear", composite: "auto",
|
|
marginRight: "0px", opacity: "1" },
|
|
{ offset: null, computedOffset: 0, easing: "linear", composite: "auto",
|
|
opacity: "0" },
|
|
{ offset: null, computedOffset: 0.5, easing: "linear",
|
|
composite: "auto", opacity: "0.5" },
|
|
{ offset: null, computedOffset: 1.0, easing: "linear",
|
|
composite: "auto", opacity: "1" }
|
|
];
|
|
assert_frame_lists_equal(frames, expected);
|
|
|
|
anim = createAnimation(t, [
|
|
{ opacity: 0 },
|
|
{ offset: "cover 0%", marginLeft: "0px", opacity: 0 },
|
|
{ opacity: 0.5 },
|
|
{ offset: "cover 100%", marginRight: "0px", opacity: 1 },
|
|
{ opacity: 1.0 }
|
|
]);
|
|
frames = anim.effect.getKeyframes();
|
|
expected = [
|
|
{ offset: null, computedOffset: 0, easing: "linear", composite: "auto",
|
|
opacity: "0" },
|
|
{ offset: { rangeName: 'cover', offset: CSS.percent(0) },
|
|
computedOffset: -1, easing: "linear", composite: "auto",
|
|
marginLeft: "0px", opacity: "0" },
|
|
{ offset: null, computedOffset: 0.5, easing: "linear",
|
|
composite: "auto", opacity: "0.5" },
|
|
{ offset: { rangeName: 'cover', offset: CSS.percent(100) },
|
|
computedOffset: 2, easing: "linear", composite: "auto",
|
|
marginRight: "0px", opacity: "1" },
|
|
{ offset: null, computedOffset: 1.0, easing: "linear",
|
|
composite: "auto", opacity: "1" }
|
|
];
|
|
assert_frame_lists_equal(frames, expected);
|
|
|
|
anim = createAnimation(t, [
|
|
{ opacity: 0.2, offset: 0.2 },
|
|
{ offset: "cover 0%", marginLeft: "0px", opacity: 0 },
|
|
{ opacity: 0.4 },
|
|
{ opacity: 0.6 },
|
|
{ offset: "cover 100%", marginRight: "0px", opacity: 1 },
|
|
{ opacity: 0.8, offset: 0.8 }
|
|
]);
|
|
frames = anim.effect.getKeyframes();
|
|
expected = [
|
|
{ offset: 0.2, computedOffset: 0.2, easing: "linear", composite: "auto",
|
|
opacity: "0.2" },
|
|
{ offset: { rangeName: 'cover', offset: CSS.percent(0) },
|
|
computedOffset: -1, easing: "linear", composite: "auto",
|
|
marginLeft: "0px", opacity: "0" },
|
|
{ offset: null, computedOffset: 0.4, easing: "linear",
|
|
composite: "auto", opacity: "0.4" },
|
|
{ offset: null, computedOffset: 0.6, easing: "linear",
|
|
composite: "auto", opacity: "0.6" },
|
|
{ offset: { rangeName: 'cover', offset: CSS.percent(100) },
|
|
computedOffset: 2, easing: "linear", composite: "auto",
|
|
marginRight: "0px", opacity: "1" },
|
|
{ offset: 0.8, computedOffset: 0.8, easing: "linear", composite: "auto",
|
|
opacity: "0.8" }
|
|
];
|
|
assert_frame_lists_equal(frames, expected);
|
|
}, 'Mix of computed and timeline offsets.');
|
|
}
|
|
|
|
window.onload = runTest;
|
|
</script>
|
|
</html>
|