mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-10-01 12:57:31 +09:00
Bug 1264125: Fire transitioncancel event when a transition is canceled (added tests + style clean up)
Issue #55
This commit is contained in:
parent
2243f5248c
commit
5677db4b6e
9 changed files with 679 additions and 287 deletions
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue