mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-27 04:05:32 +00:00
c4fa4cfc0c
This is an autogenerated commit to handle scripts loading mochitest harness files, in the case where the script src is on the line below the script tag. This was generated with https://bug1544322.bmoattachments.org/attachment.cgi?id=9058170 using the `--part 4` argument. Differential Revision: https://phabricator.services.mozilla.com/D27459 --HG-- extra : moz-landing-system : lando
205 lines
6.0 KiB
HTML
205 lines
6.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<!--
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=911987
|
|
-->
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<title>Test for CSS Animation and Transition event handler
|
|
attributes. (Bug 911987)</title>
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script type="application/javascript" src="animation_utils.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
|
<style>
|
|
@keyframes anim { to { margin-left: 100px } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a target="_blank"
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=911987">Mozilla Bug
|
|
911987</a>
|
|
<div id="display"></div>
|
|
<pre id="test">
|
|
<script type="application/javascript">
|
|
'use strict';
|
|
|
|
// Create the div element with event handlers.
|
|
// We need two elements: one with the content attribute speficied and one
|
|
// with the IDL attribute specified since we can't set these independently.
|
|
function createAndRegisterTargets(eventAttributes) {
|
|
var displayElement = document.getElementById('display');
|
|
var contentAttributeElement = document.createElement("div");
|
|
var idlAttributeElement = document.createElement("div");
|
|
displayElement.appendChild(contentAttributeElement);
|
|
displayElement.appendChild(idlAttributeElement);
|
|
|
|
// Add handlers
|
|
eventAttributes.forEach(event => {
|
|
contentAttributeElement.setAttribute(event, 'handleEvent(event);');
|
|
contentAttributeElement.handlerType = 'content attribute';
|
|
idlAttributeElement[event] = handleEvent;
|
|
idlAttributeElement.handlerType = 'IDL attribute';
|
|
});
|
|
|
|
return [contentAttributeElement, idlAttributeElement];
|
|
}
|
|
|
|
function handleEvent(event) {
|
|
if (event.target.receivedEventType) {
|
|
ok(false, `Received ${event.type} event, but this element have previous `
|
|
`received event '${event.target.receivedEventType}'.`);
|
|
return;
|
|
}
|
|
event.target.receivedEventType = event.type;
|
|
}
|
|
|
|
function checkReceivedEvents(eventType, elements) {
|
|
elements.forEach(element => {
|
|
is(element.receivedEventType, eventType,
|
|
`Expected to receive '${eventType}', got
|
|
'${element.receivedEventType}', for event handler registered
|
|
using ${element.handlerType}`);
|
|
element.receivedEventType = undefined;
|
|
});
|
|
}
|
|
|
|
// Take over the refresh driver right from the start.
|
|
advance_clock(0);
|
|
|
|
// 1a. Test CSS Animation event handlers (without animationcancel)
|
|
|
|
var targets = createAndRegisterTargets([ 'onanimationstart',
|
|
'onanimationiteration',
|
|
'onanimationend',
|
|
'onanimationcancel']);
|
|
targets.forEach(div => {
|
|
div.setAttribute('style', 'animation: anim 100ms 2');
|
|
getComputedStyle(div).animationName; // flush
|
|
});
|
|
|
|
advance_clock(0);
|
|
checkReceivedEvents("animationstart", targets);
|
|
|
|
advance_clock(100);
|
|
checkReceivedEvents("animationiteration", targets);
|
|
|
|
advance_clock(200);
|
|
checkReceivedEvents("animationend", targets);
|
|
|
|
targets.forEach(div => { div.remove(); });
|
|
|
|
// 1b. Test CSS Animation cancel event handler
|
|
var targets = createAndRegisterTargets([ 'onanimationcancel' ]);
|
|
|
|
targets.forEach(div => {
|
|
div.setAttribute('style', 'animation: anim 100ms 2 200ms');
|
|
getComputedStyle(div).animationName; // flush
|
|
});
|
|
|
|
advance_clock(200);
|
|
|
|
targets.forEach(div => {
|
|
div.style.display = "none"
|
|
getComputedStyle(div).display; // flush
|
|
});
|
|
|
|
advance_clock(0);
|
|
checkReceivedEvents("animationcancel", targets);
|
|
|
|
advance_clock(200);
|
|
|
|
targets.forEach(div => { div.remove(); });
|
|
|
|
|
|
// 2a. Test CSS Transition event handlers (without transitioncancel)
|
|
|
|
var targets = createAndRegisterTargets([ 'ontransitionrun',
|
|
'ontransitionstart',
|
|
'ontransitionend',
|
|
'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(0);
|
|
checkReceivedEvents("transitionrun", targets);
|
|
|
|
advance_clock(200);
|
|
checkReceivedEvents("transitionstart", targets);
|
|
|
|
advance_clock(100);
|
|
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',
|
|
'onwebkitanimationiteration',
|
|
'onwebkitanimationend' ]);
|
|
targets.forEach(div => {
|
|
div.setAttribute('style', 'animation: anim 100ms 2');
|
|
getComputedStyle(div).animationName; // flush
|
|
});
|
|
|
|
advance_clock(0);
|
|
checkReceivedEvents("webkitAnimationStart", targets);
|
|
|
|
advance_clock(100);
|
|
checkReceivedEvents("webkitAnimationIteration", targets);
|
|
|
|
advance_clock(200);
|
|
checkReceivedEvents("webkitAnimationEnd", targets);
|
|
|
|
targets.forEach(div => { div.remove(); });
|
|
|
|
// 4. Test prefixed CSS Transition event handlers.
|
|
|
|
advance_clock(0);
|
|
var targets = createAndRegisterTargets([ 'onwebkittransitionend' ]);
|
|
targets.forEach(div => {
|
|
div.style.transition = 'margin-left 100ms';
|
|
getComputedStyle(div).marginLeft; // flush
|
|
div.style.marginLeft = "200px";
|
|
getComputedStyle(div).marginLeft; // flush
|
|
});
|
|
|
|
advance_clock(100);
|
|
checkReceivedEvents("webkitTransitionEnd", targets);
|
|
|
|
targets.forEach(div => { div.remove(); });
|
|
|
|
SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|