1327457 - CSS transition-function step-end/step-start doesn't seem to work correctly when styling changes twice (finish later than expected)

Status: UNCONFIRMED

(Core :: CSS Parsing and Computation, defect, P3)

Description

[arni2033]

>>>   My Info:   Win7_64, Nightly 49, 32bit, ID 20160526082509
STR_1:
1. Open url [1]
2. Click button "Automatic" (or Click button "Open", then after ~0.5s click the same button)

AR:  <div> doesn't disappear for 3 seconds (black box-shadow stays visible)
ER:  <div> should disappear once it stops moving (and becomes invisible on the page)


[1]
data:text/html,
<input class="i1" type="checkbox" title="visibility transition instead of opacity">
<input class="i2" type="checkbox" title="transition delay instead of duration">
<div id="D" state="closed"></div>
<style>
div{
    width:200px;
    height:50px;
    border-radius:5px;
    box-shadow: 0px 0px 10px 5px black;
    background:lightgray;
    position:fixed;
    left:0px;
    right:0px;
    margin-left:auto;
    margin-right:auto;
}
div[state="closed"]{
    top:-50px;
    opacity:0;
    /*visibility:hidden;/**/
    transition:top 3s ease-in-out, opacity 3s step-end;
}
div[state="opened"]{
    top:-10px;
    opacity:1;
    /*visibility:visible;/**/
    transition:top 3s ease-in-out, opacity 3s step-start;
}

[type="checkbox"]{position:fixed; bottom:10px;}
.i1{left:10px;}
.i2{left:35px;}
.i1:checked + .i2 + div[state="closed"]{
    top:-50px;
    opacity:1;
    visibility:hidden;
    transition-property: top, visibility;
    transition-timing-function: ease-in-out, ease-in-out;
}
.i1:checked + .i2 + div[state="opened"]{
    top:-10px;
    opacity:1;
    visibility:visible;
    transition-property: top, visibility;
    transition-timing-function: ease-in-out, ease-in-out;
}

.i1 + .i2:checked + div[state="closed"]{
    transition-duration: 3s, 0s;
    transition-delay: 0s, 3s;
}
.i1 + .i2:checked + div[state="opened"]{
    transition-duration: 3s, 0s;
    transition-delay: 0s, 0s;
}
</style>
<script>
    function toggle(){
        var d=document.getElementById('D'),
            b1=document.getElementById('B1'),
            state=d.getAttribute('state');
        if (state=='closed'){b1.innerHTML='Close'; d.setAttribute('state','opened')}
        if (state=='opened'){b1.innerHTML='Open';d.setAttribute('state','closed')}
    }
</script>
<button id="B1" onclick="toggle()">Open</button>
<br>
<button id="B2" onclick="setTimeout(toggle,0); setTimeout(toggle,100);">Automatic</button>

Comment 1

[Jonathan Watt [:jwatt]]

Mass bug change to replace various 'parity' whiteboard flags with the new canonical keywords. (See bug 1443764 comment 13.)