test_animations_event_handler_attribute.html (6141B)
1 <!doctype html> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=911987 5 --> 6 <head> 7 <meta charset=utf-8> 8 <title>Test for CSS Animation and Transition event handler 9 attributes. (Bug 911987)</title> 10 <script src="/tests/SimpleTest/SimpleTest.js"></script> 11 <script type="application/javascript" src="animation_utils.js"></script> 12 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 13 <style> 14 @keyframes anim { to { margin-left: 100px } } 15 </style> 16 </head> 17 <body> 18 <a target="_blank" 19 href="https://bugzilla.mozilla.org/show_bug.cgi?id=911987">Mozilla Bug 20 911987</a> 21 <div id="display"></div> 22 <pre id="test"> 23 <script type="application/javascript"> 24 'use strict'; 25 26 // Create the div element with event handlers. 27 // We need two elements: one with the content attribute speficied and one 28 // with the IDL attribute specified since we can't set these independently. 29 function createAndRegisterTargets(eventAttributes) { 30 var displayElement = document.getElementById('display'); 31 var contentAttributeElement = document.createElement("div"); 32 var idlAttributeElement = document.createElement("div"); 33 displayElement.appendChild(contentAttributeElement); 34 displayElement.appendChild(idlAttributeElement); 35 36 // Add handlers 37 eventAttributes.forEach(event => { 38 contentAttributeElement.setAttribute(event, 'handleEvent(event);'); 39 contentAttributeElement.handlerType = 'content attribute'; 40 idlAttributeElement[event] = handleEvent; 41 idlAttributeElement.handlerType = 'IDL attribute'; 42 }); 43 44 return [contentAttributeElement, idlAttributeElement]; 45 } 46 47 function handleEvent(event) { 48 if (event.target.receivedEventType) { 49 ok(false, `Received ${event.type} event, but this element have previous ` 50 `received event '${event.target.receivedEventType}'.`); 51 return; 52 } 53 event.target.receivedEventType = event.type; 54 } 55 56 function checkReceivedEvents(eventType, elements) { 57 elements.forEach(element => { 58 is(element.receivedEventType, eventType, 59 `Expected to receive '${eventType}', got 60 '${element.receivedEventType}', for event handler registered 61 using ${element.handlerType}`); 62 element.receivedEventType = undefined; 63 }); 64 } 65 66 // Take over the refresh driver right from the start. 67 advance_clock(0); 68 69 // 1a. Test CSS Animation event handlers (without animationcancel) 70 71 var targets = createAndRegisterTargets([ 'onanimationstart', 72 'onanimationiteration', 73 'onanimationend', 74 'onanimationcancel']); 75 targets.forEach(div => { 76 div.setAttribute('style', 'animation: anim 100ms 2'); 77 getComputedStyle(div).animationName; // flush 78 }); 79 80 advance_clock(0); 81 checkReceivedEvents("animationstart", targets); 82 83 advance_clock(100); 84 checkReceivedEvents("animationiteration", targets); 85 86 advance_clock(200); 87 checkReceivedEvents("animationend", targets); 88 89 targets.forEach(div => { div.remove(); }); 90 91 // 1b. Test CSS Animation cancel event handler 92 var targets = createAndRegisterTargets([ 'onanimationcancel' ]); 93 94 targets.forEach(div => { 95 div.setAttribute('style', 'animation: anim 100ms 2 200ms'); 96 getComputedStyle(div).animationName; // flush 97 }); 98 99 advance_clock(200); 100 101 targets.forEach(div => { 102 div.style.display = "none" 103 getComputedStyle(div).display; // flush 104 }); 105 106 advance_clock(0); 107 checkReceivedEvents("animationcancel", targets); 108 109 advance_clock(200); 110 111 targets.forEach(div => { div.remove(); }); 112 113 114 // 2a. Test CSS Transition event handlers (without transitioncancel) 115 116 var targets = createAndRegisterTargets([ 'ontransitionrun', 117 'ontransitionstart', 118 'ontransitionend', 119 'ontransitioncancel' ]); 120 targets.forEach(div => { 121 div.style.transition = 'margin-left 100ms 200ms'; 122 getComputedStyle(div).marginLeft; // flush 123 div.style.marginLeft = "200px"; 124 getComputedStyle(div).marginLeft; // flush 125 }); 126 127 advance_clock(0); 128 checkReceivedEvents("transitionrun", targets); 129 130 advance_clock(200); 131 checkReceivedEvents("transitionstart", targets); 132 133 advance_clock(100); 134 checkReceivedEvents("transitionend", targets); 135 136 targets.forEach(div => { div.remove(); }); 137 138 // 2b. Test CSS Transition cancel event handler. 139 140 var targets = createAndRegisterTargets([ 'ontransitioncancel' ]); 141 targets.forEach(div => { 142 div.style.transition = 'margin-left 100ms 200ms'; 143 getComputedStyle(div).marginLeft; // flush 144 div.style.marginLeft = "200px"; 145 getComputedStyle(div).marginLeft; // flush 146 }); 147 148 advance_clock(200); 149 150 targets.forEach(div => { 151 div.style.display = "none" 152 }); 153 getComputedStyle(targets[0]).display; // flush 154 155 advance_clock(0); 156 checkReceivedEvents("transitioncancel", targets); 157 158 advance_clock(100); 159 targets.forEach( div => { is(div.receivedEventType, undefined); }); 160 161 targets.forEach(div => { div.remove(); }); 162 163 // 3. Test prefixed CSS Animation event handlers. 164 165 var targets = createAndRegisterTargets([ 'onwebkitanimationstart', 166 'onwebkitanimationiteration', 167 'onwebkitanimationend' ]); 168 targets.forEach(div => { 169 div.setAttribute('style', 'animation: anim 100ms 2'); 170 getComputedStyle(div).animationName; // flush 171 }); 172 173 advance_clock(0); 174 checkReceivedEvents("webkitAnimationStart", targets); 175 176 advance_clock(100); 177 checkReceivedEvents("webkitAnimationIteration", targets); 178 179 advance_clock(200); 180 checkReceivedEvents("webkitAnimationEnd", targets); 181 182 targets.forEach(div => { div.remove(); }); 183 184 // 4. Test prefixed CSS Transition event handlers. 185 186 advance_clock(0); 187 var targets = createAndRegisterTargets([ 'onwebkittransitionend' ]); 188 targets.forEach(div => { 189 div.style.transition = 'margin-left 100ms'; 190 getComputedStyle(div).marginLeft; // flush 191 div.style.marginLeft = "200px"; 192 getComputedStyle(div).marginLeft; // flush 193 }); 194 195 advance_clock(100); 196 checkReceivedEvents("webkitTransitionEnd", targets); 197 198 targets.forEach(div => { div.remove(); }); 199 200 SpecialPowers.DOMWindowUtils.restoreNormalRefresh(); 201 202 </script> 203 </body> 204 </html>