--- a/dom/events/test/test_legacy_event.html
+++ b/dom/events/test/test_legacy_event.html
@@ -5,18 +5,18 @@ https://bugzilla.mozilla.org/show_bug.cg
-->
<head>
<meta charset="utf-8">
<title>Test for Bug 1236979 (events that have legacy alternative versions)</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
<style>
@keyframes anim1 {
- 0% { margin-left: 200px }
- 100% { margin-left: 300px }
+ 0% { margin-left: 0px }
+ 100% { margin-left: 100px }
}
</style>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1236979">Mozilla Bug 1236979</a>
<p id="display"></p>
<div id="content" style="display: none">
@@ -27,16 +27,31 @@ https://bugzilla.mozilla.org/show_bug.cg
/** Test for Bug 1236979 **/
'use strict';
SimpleTest.waitForExplicitFinish();
// Array of info-bundles about each legacy event to be tested:
var gLegacyEventInfo = [
{
+ legacy_name: "webkitTransitionEnd",
+ modern_name: "transitionend",
+ trigger_event: triggerShortTransition,
+ },
+ {
+ legacy_name: "webkitAnimationStart",
+ modern_name: "animationstart",
+ trigger_event: triggerShortAnimation,
+ },
+ {
+ legacy_name: "webkitAnimationEnd",
+ modern_name: "animationend",
+ trigger_event: triggerShortAnimation,
+ },
+ {
legacy_name: "webkitAnimationIteration",
modern_name: "animationiteration",
trigger_event: triggerAnimationIteration,
}
];
// EVENT-TRIGGERING FUNCTIONS
// --------------------------
@@ -68,18 +83,17 @@ function triggerShortAnimation(node) {
// any animationiteration events -- the CSS Animations spec says this event
// must not be fired "...when an animationend event would fire at the same time"
// (which would be the case in this example with a 1ms duration). So, to make
// sure our event does fire, we use a long duration and a nearly-as-long
// negative delay. This ensures we hit the end of the first iteration right
// away, and that we don't risk hitting the end of the second iteration at the
// same time.
function triggerAnimationIteration(node) {
- dump("************ Add Animation! **********");
- node.style.animation = "anim1 1s -0.999s linear 2";
+ node.style.animation = "anim1 300s -299.999s linear 2";
}
// GENERAL UTILITY FUNCTIONS
// -------------------------
// Creates a new div and appends it as a child of the specified parentNode, or
// (if no parent is specified) as a child of the element with ID 'display'.
function createChildDiv(parentNode) {
if (!parentNode) {
@@ -93,17 +107,16 @@ function createChildDiv(parentNode) {
return div;
}
// Returns an event-handler function, which (when invoked) simply checks that
// the event's type matches what's expected. If a callback is passed in, then
// the event-handler will invoke that callback as well.
function createHandlerWithTypeCheck(expectedEventType, extraHandlerLogic) {
var handler = function(e) {
- dump("********** event fired [" + e.type + "] ******\n");
is(e.type, expectedEventType,
"When an event handler for '" + expectedEventType + "' is invoked, " +
"the event's type field should be '" + expectedEventType + "'.");
if (extraHandlerLogic) {
extraHandlerLogic(e);
}
}
return handler;
@@ -119,29 +132,26 @@ function createHandlerWithTypeCheck(expe
// Tests that the legacy event type is sent, when only a legacy handler is
// registered.
function mpTestLegacyEventSent(eventInfo) {
return new Promise(
function(resolve, reject) {
// Create a node & register an event-handler for the legacy event:
var div = createChildDiv();
- div.innerHTML = "<h2>Clobber</h2>";
var handler = createHandlerWithTypeCheck(eventInfo.legacy_name,
function() {
// When event-handler is done, clean up & resolve:
div.parentNode.removeChild(div);
- dump("************ Resolved **********\n");
resolve();
});
div.addEventListener(eventInfo.legacy_name, handler);
// Trigger the event:
- dump("************ trigger[" + eventInfo.legacy_name + "] **********\n");
eventInfo.trigger_event(div);
}
);
}
// Test that the modern event type (and only the modern event type) is fired,
// when listeners of both modern & legacy types are registered. The legacy
// listener should not be invoked.
@@ -159,17 +169,16 @@ function mpTestModernBeatsLegacy(eventIn
var modernHandler = createHandlerWithTypeCheck(eventInfo.modern_name,
function() {
// Indicate that the test has passed (we invoked the modern handler):
ok(true, "Handler for modern event '" + eventInfo.modern_name +
"' should be invoked when there's a handler registered for " +
"both modern & legacy event type on the same node");
// When event-handler is done, clean up & resolve:
div.parentNode.removeChild(div);
- dump("************ Resolved **********\n");
resolve();
});
div.addEventListener(eventInfo.legacy_name, legacyHandler);
div.addEventListener(eventInfo.modern_name, modernHandler);
eventInfo.trigger_event(div);
}
);
@@ -207,17 +216,16 @@ function mpTestDiffListenersEventBubblin
ok(didEventFireOnTarget,
"Event should have fired on child");
ok(didEventFireOnParent,
"Event should have fired on parent");
is(e, eventSentToTarget,
"Same event object should bubble, despite difference in type");
// Clean up.
grandparent.parentNode.removeChild(grandparent);
- dump("************ Resolved **********\n");
resolve();
}));
eventInfo.trigger_event(target);
}
);
}
@@ -257,41 +265,35 @@ function mpTestDiffListenersEventCapturi
is(e.eventPhase, Event.AT_TARGET,
"event should be at target phase");
is(e, eventSentToGrandparent,
"Same event object should capture, despite difference in type");
ok(didEventFireOnParent,
"Event should have fired on parent");
// Clean up.
grandparent.parentNode.removeChild(grandparent);
- dump("************ Resolved **********\n");
resolve();
}), true);
eventInfo.trigger_event(target);
}
);
}
// MAIN FUNCTION: Kick off the tests.
function main() {
Promise.resolve().then(function() {
- dump("part1 clear\n");
return Promise.all(gLegacyEventInfo.map(mpTestLegacyEventSent))
}).then(function() {
- dump("part2 clear\n");
return Promise.all(gLegacyEventInfo.map(mpTestModernBeatsLegacy));
}).then(function() {
- dump("part3 clear");
return Promise.all(gLegacyEventInfo.map(mpTestDiffListenersEventCapturing));
}).then(function() {
- dump("part4 clear");
return Promise.all(gLegacyEventInfo.map(mpTestDiffListenersEventBubbling));
}).then(function() {
- dump("part5 clear");
SimpleTest.finish();
}).catch(function(reason) {
ok(false, "Test failed: " + reason);
SimpleTest.finish();
});
}
main();