Attachment 345965 Details for Bug 188050 – Better test case with dynamic changes of underlying value

Better test case with dynamic changes of underlying value

implicit-keyframe-value-change.html (text/html), 1.90 KB, created by Antoine Quint on 2018-07-27 15:57:31 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Antoine Quint

Created: 2018-07-27 15:57:31 PDT

Size: 1.90 KB

patch

obsolete

><body>
><meta charset="utf-8">
><style>
>
>div {
>    margin-top: 10px;
>    width: 100px;
>    height: 100px;
>    background-color: black;
>}
>
>/* We fail to specify the "from" keyframe so the animation should use
>   whatever the underlying (unanimated) value would be at any given time
>   when resolving styles in lieu of that keyframe. */
>@keyframes margin-animation {
>    to { margin-left: 100px }
>}
>
></style>
><script type="text/javascript">
>
>function dumpKeyframes(description)
>{
>    const animations = document.getAnimations();
>    if (animations.length != 1) {
>        console.warn("Unexpected number of animations");
>        return;
>    }
>
>    console.group(description);
>    for (let keyframe of animations[0].effect.getKeyframes())
>        console.log(`${Math.round(keyframe.computedOffset * 100)}% { margin-left: ${keyframe.marginLeft} }`);
>    console.groupEnd();
>}
>
>// 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";
>// Alternative codepath where we animate using the Web Animations API.
>// target.animate({ marginLeft: "100px" }, { delay: 1000, duration: 1000 });
>dumpKeyframes(`Starting the animation with an unspecified underlying style (0px)`);
>
>// Update the underlying value during the delay phase.
>// We should now be animating from 50px to 100px.
>setTimeout(() => {
>    target.style.marginLeft = "50px";
>    dumpKeyframes(`Setting the underlying style during the delay phase to 50px`);
>}, 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(`Setting the underlying style during the running phase to 25px`);
>}, 1500);
>
></script>
></body>

<body>
<meta charset="utf-8">
<style>

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

/* We fail to specify the "from" keyframe so the animation should use
   whatever the underlying (unanimated) value would be at any given time
   when resolving styles in lieu of that keyframe. */
@keyframes margin-animation {
    to { margin-left: 100px }
}

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

function dumpKeyframes(description)
{
    const animations = document.getAnimations();
    if (animations.length != 1) {
        console.warn("Unexpected number of animations");
        return;
    }

    console.group(description);
    for (let keyframe of animations[0].effect.getKeyframes())
        console.log(`${Math.round(keyframe.computedOffset * 100)}% { margin-left: ${keyframe.marginLeft} }`);
    console.groupEnd();
}

// 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";
// Alternative codepath where we animate using the Web Animations API.
// target.animate({ marginLeft: "100px" }, { delay: 1000, duration: 1000 });
dumpKeyframes(`Starting the animation with an unspecified underlying style (0px)`);

// Update the underlying value during the delay phase.
// We should now be animating from 50px to 100px.
setTimeout(() => {
    target.style.marginLeft = "50px";
    dumpKeyframes(`Setting the underlying style during the delay phase to 50px`);
}, 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(`Setting the underlying style during the running phase to 25px`);
}, 1500);

</script>
</body>

Actions: View

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