diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /layout/style/test/test_animations_event_handler_attribute.html | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/style/test/test_animations_event_handler_attribute.html')
| -rw-r--r-- | layout/style/test/test_animations_event_handler_attribute.html | 147 |
1 files changed, 147 insertions, 0 deletions
diff --git a/layout/style/test/test_animations_event_handler_attribute.html b/layout/style/test/test_animations_event_handler_attribute.html new file mode 100644 index 000000000..e5def2b34 --- /dev/null +++ b/layout/style/test/test_animations_event_handler_attribute.html @@ -0,0 +1,147 @@ +<!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 type="application/javascript" + 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); + +// 1. Test CSS Animation event handlers. + +var targets = createAndRegisterTargets([ 'onanimationstart', + 'onanimationiteration', + 'onanimationend' ]); +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(); }); + +// 2. Test CSS Transition event handlers. + +var targets = createAndRegisterTargets([ 'ontransitionend' ]); +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("transitionend", targets); + +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> |