| OLD | NEW |
| 1 <html> | 1 (async function() { |
| 2 <head> | 2 let {page, session, Protocol} = await InspectorTest.startHTML(` |
| 3 <script type="text/javascript" src="../../http/tests/inspector-protocol/inspecto
r-protocol-test.js"></script> | 3 <div id='node' style='background-color: red; width: 100px'></div> |
| 4 <script> | 4 `, ''); |
| 5 | 5 |
| 6 function triggerEmptyTransition() | 6 Protocol.Animation.onAnimationCreated(() => InspectorTest.log('Animation creat
ed')); |
| 7 { | 7 Protocol.Animation.onAnimationStarted(() => InspectorTest.log('Animation start
ed')); |
| 8 node.style.transition = "1s"; | 8 Protocol.Animation.onAnimationCanceled(() => { |
| 9 InspectorTest.log('Animation canceled') |
| 10 InspectorTest.completeTest(); |
| 11 }); |
| 12 Protocol.Animation.enable(); |
| 13 |
| 14 session.evaluate(` |
| 15 node.style.transition = '1s'; |
| 9 node.offsetTop; | 16 node.offsetTop; |
| 10 node.style.width = "200px"; | 17 node.style.width = '200px'; |
| 11 node.offsetTop; | 18 node.offsetTop; |
| 12 // Deliberately delay for two RAFs, which causes the animation to start | 19 // Deliberately delay for two RAFs, which causes the animation to start |
| 13 // before we cancel it by clearing the transition. | 20 // before we cancel it by clearing the transition. |
| 14 window.requestAnimationFrame(function() { | 21 window.requestAnimationFrame(function() { |
| 15 window.requestAnimationFrame(function() { | 22 window.requestAnimationFrame(function() { |
| 16 node.style.transition = ""; | 23 node.style.transition = ''; |
| 17 }); | 24 }); |
| 18 }); | 25 }); |
| 19 } | 26 `); |
| 20 | 27 })(); |
| 21 function test() | |
| 22 { | |
| 23 InspectorTest.eventHandler["Animation.animationCreated"] = onCreated; | |
| 24 InspectorTest.eventHandler["Animation.animationStarted"] = onStarted; | |
| 25 InspectorTest.eventHandler["Animation.animationCanceled"] = onCanceled; | |
| 26 InspectorTest.sendCommand("Animation.enable", {}); | |
| 27 InspectorTest.evaluateInPage("triggerEmptyTransition()", function() {}); | |
| 28 | |
| 29 function onCreated() | |
| 30 { | |
| 31 InspectorTest.log("Animation created"); | |
| 32 } | |
| 33 | |
| 34 function onStarted() | |
| 35 { | |
| 36 InspectorTest.log("Animation started"); | |
| 37 } | |
| 38 | |
| 39 function onCanceled() | |
| 40 { | |
| 41 InspectorTest.log("Animation canceled"); | |
| 42 InspectorTest.completeTest(); | |
| 43 } | |
| 44 } | |
| 45 | |
| 46 </script> | |
| 47 </head> | |
| 48 <body onload="runTest()"> | |
| 49 <div id="node" style="background-color: red; width: 100px"></div> | |
| 50 </body> | |
| 51 </html> | |
| OLD | NEW |