Attachment 362707 Details for Bug 194941 – Test case

Test case

duration-of-a-retarget-transition.html (text/html), 1.28 KB, created by Antoine Quint on 2019-02-22 01:39:04 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Antoine Quint

Created: 2019-02-22 01:39:04 PST

Size: 1.28 KB

patch

obsolete

><!DOCTYPE html>
><html>
><head>
><meta charset="utf-8">
><style>
>
>div {
>    top: 0;
>    left: 0;
>    width: 200px;
>    height: 200px;
>    background-color: black;
>    transition-duration: 5s;
>}
>
></style>
></head>
><body>
><div></div>
><script>
>
>const target = document.querySelector("div");
>
>function dumpTransitionDuration()
>{
>    const transition = target.getAnimations()[0];
>    console.assert(transition, "A running transition was expected.");
>    console.log(`Transition duration is ${(transition.effect.getTiming().duration / 1000).toFixed(2)}s.`);
>}
>
>setTimeout(_ => {
>    target.addEventListener("transitionrun", event => {
>        setTimeout(_ => {
>            console.log("Retargetting transition for margin-left to 0 after 2 seconds. The duration of the new transition should be much more than 2 seconds amd much less than 5 seconds since it should amount to the transformed progress (accounting for the timing-function) of the initial transition when interruped multiplied by the transition-duration property.");
>            target.style.marginLeft = 0;
>            dumpTransitionDuration();
>        }, 2000);
>    }, { once: true });
>
>    console.log("Starting initial transition for margin-left to 500px.");
>    target.style.marginLeft = "500px";
>    dumpTransitionDuration();
>});
>
></script>
></body>
></html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>

div {
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: black;
    transition-duration: 5s;
}

</style>
</head>
<body>
<div></div>
<script>

const target = document.querySelector("div");

function dumpTransitionDuration()
{
    const transition = target.getAnimations()[0];
    console.assert(transition, "A running transition was expected.");
    console.log(`Transition duration is ${(transition.effect.getTiming().duration / 1000).toFixed(2)}s.`);
}

setTimeout(_ => {
    target.addEventListener("transitionrun", event => {
        setTimeout(_ => {
            console.log("Retargetting transition for margin-left to 0 after 2 seconds. The duration of the new transition should be much more than 2 seconds amd much less than 5 seconds since it should amount to the transformed progress (accounting for the timing-function) of the initial transition when interruped multiplied by the transition-duration property.");
            target.style.marginLeft = 0;
            dumpTransitionDuration();
        }, 2000);
    }, { once: true });

    console.log("Starting initial transition for margin-left to 500px.");
    target.style.marginLeft = "500px";
    dumpTransitionDuration();
});

</script>
</body>
</html>

Actions: View

Attachments on bug 194941: 362707