Attachment 345870 Details for Bug 188050 – Test case with changes of underlying value

Test case with changes of underlying value

implied-keyframe-value-change.html (text/html), 1.33 KB, created by Antoine Quint on 2018-07-26 14:12:29 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Antoine Quint

Created: 2018-07-26 14:12:29 PDT

Size: 1.33 KB

patch

obsolete

><body>
><style>
>
>div {
>    margin-top: 10px;
>    width: 100px;
>    height: 100px;
>    background-color: black;
>}
>
>@keyframes margin-animation {
>    to { margin-left: 100px }
>}
>
></style>
><script type="text/javascript">
>
>function dumpKeyframes()
>{
>    const animations = document.getAnimations();
>    if (!animations.length)
>        console.warn("No animation was found.");
>
>    const animation = animations[0];
>
>    console.log(`Progress is ${animation.effect.getComputedTiming().progress}`);
>    for (let keyframe of animation.effect.getKeyframes())
>        console.log(keyframe.computedOffset, keyframe.marginLeft);
>}
>
>// Start the animation with a 1s delay.
>// We should now be animating from 0px to 100px.
>const target = document.body.appendChild(document.createElement("div"));
>target.style.animation = "margin-animation 1s 1s linear";
>dumpKeyframes();
>
>// Update the underlying value during the delay phase.
>// We should now be animating from 50px to 100px.
>setTimeout(() => {
>    target.style.marginLeft = "50px";
>    dumpKeyframes();
>}, 500);
>
>// Update the underlying value during the running phase.
>// We should now be animating from 25px to 100px, but the
>// animated progress should be unchanged, so the animation
>// should jump back a bit.
>setTimeout(() => {
>    target.style.marginLeft = "25px";
>    dumpKeyframes();
>}, 1500);
>
></script>
></body>

<body>
<style>

div {
    margin-top: 10px;
    width: 100px;
    height: 100px;
    background-color: black;
}

@keyframes margin-animation {
    to { margin-left: 100px }
}

</style>
<script type="text/javascript">

function dumpKeyframes()
{
    const animations = document.getAnimations();
    if (!animations.length)
        console.warn("No animation was found.");

    const animation = animations[0];

    console.log(`Progress is ${animation.effect.getComputedTiming().progress}`);
    for (let keyframe of animation.effect.getKeyframes())
        console.log(keyframe.computedOffset, keyframe.marginLeft);
}

// Start the animation with a 1s delay.
// We should now be animating from 0px to 100px.
const target = document.body.appendChild(document.createElement("div"));
target.style.animation = "margin-animation 1s 1s linear";
dumpKeyframes();

// Update the underlying value during the delay phase.
// We should now be animating from 50px to 100px.
setTimeout(() => {
    target.style.marginLeft = "50px";
    dumpKeyframes();
}, 500);

// Update the underlying value during the running phase.
// We should now be animating from 25px to 100px, but the
// animated progress should be unchanged, so the animation
// should jump back a bit.
setTimeout(() => {
    target.style.marginLeft = "25px";
    dumpKeyframes();
}, 1500);

</script>
</body>

Actions: View

Attachments on bug 188050: 345842 | 345870 | 345965 | 416191 | 416232 | 416238