Bug 1264125: Fire transitioncancel event when a transition is canceled (added tests + style clean up)

Issue #55
This commit is contained in:
janekptacijarabaci 2018-03-14 12:13:01 +01:00 • committed by Roy Tam
commit 5677db4b6e
9 changed files with 679 additions and 287 deletions

View file

@ -88,11 +88,12 @@ checkReceivedEvents("animationend", targets);
targets.forEach(div => { div.remove(); });
// 2. Test CSS Transition event handlers.
// 2a. Test CSS Transition event handlers (without transitioncancel)
var targets = createAndRegisterTargets([ 'ontransitionrun',
'ontransitionstart',
'ontransitionend' ]);
'ontransitionend',
'ontransitioncancel' ]);
targets.forEach(div => {
div.style.transition = 'margin-left 100ms 200ms';
getComputedStyle(div).marginLeft; // flush
@ -111,6 +112,31 @@ checkReceivedEvents("transitionend", targets);
targets.forEach(div => { div.remove(); });
// 2b. Test CSS Transition cancel event handler.
var targets = createAndRegisterTargets([ 'ontransitioncancel' ]);
targets.forEach(div => {
div.style.transition = 'margin-left 100ms 200ms';
getComputedStyle(div).marginLeft; // flush
div.style.marginLeft = "200px";
getComputedStyle(div).marginLeft; // flush
});
advance_clock(200);
targets.forEach(div => {
div.style.display = "none"
});
getComputedStyle(targets[0]).display; // flush
advance_clock(0);
checkReceivedEvents("transitioncancel", targets);
advance_clock(100);
targets.forEach( div => { is(div.receivedEventType, undefined); });
targets.forEach(div => { div.remove(); });
// 3. Test prefixed CSS Animation event handlers.
var targets = createAndRegisterTargets([ 'onwebkitanimationstart',

View file

@ -48,7 +48,8 @@ var gDisplay = document.getElementById('display');
'animationend',
'transitionrun',
'transitionstart',
'transitionend' ]
'transitionend',
'transitioncancel' ]
.forEach(event =>
gDisplay.addEventListener(event,
event => gEventsReceived.push(event),
@ -623,6 +624,43 @@ checkEventOrder([ divs[0], 'transitionrun' ],
divs.forEach(div => div.remove());
divs = [];
// 4j. Test sorting transitions with cancel
// The order of transitioncancel is based on StyleManager.
// So this test looks like wrong result at a glance. However
// the gecko will cancel div1's transition before div2 in this case.
divs = [ document.createElement('div'),
document.createElement('div') ];
divs.forEach((div, i) => {
gDisplay.appendChild(div);
div.style.marginLeft = '0px';
div.setAttribute('id', 'div' + i);
});
divs[0].style.transition = 'margin-left 10s 5s';
divs[1].style.transition = 'margin-left 10s';
getComputedStyle(divs[0]).marginLeft;
divs.forEach(div => div.style.marginLeft = '100px');
getComputedStyle(divs[0]).marginLeft;
advance_clock(0);
advance_clock(5 * 1000);
divs.forEach(div => div.style.display = 'none' );
getComputedStyle(divs[0]).display;
advance_clock(10 * 1000);
checkEventOrder([ divs[0], 'transitionrun' ],
[ divs[1], 'transitionrun' ],
[ divs[1], 'transitionstart' ],
[ divs[0], 'transitionstart' ],
[ divs[1], 'transitioncancel' ],
[ divs[0], 'transitioncancel' ],
'Simultaneous transitionrun/start/cancel on siblings');
divs.forEach(div => div.remove());
divs = [];
SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
</script>