| OLD | NEW |
|---|
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <script src="../../http/tests/inspector/inspector-test.js"></script> | |
| 4 <script src="../../http/tests/inspector/elements-test.js"></script> | |
| 5 <script> | |
| 6 | |
| 7 var player; | |
| 8 | |
| 9 function startAnimationWithDelay() | |
| 10 { | |
| 11 player = node.animate([{ width: "100px" }, { width: "200px" }], { duration:
200, delay: 100 }); | |
| 12 } | |
| 13 | |
| 14 function startAnimationWithEndDelay() | |
| 15 { | |
| 16 player = node.animate([{ width: "100px" }, { width: "200px" }], { duration:
20000, delay: 100, endDelay: 200 }); | |
| 17 } | |
| 18 | |
| 19 function cancelAnimation() | |
| 20 { | |
| 21 player.cancel(); | |
| 22 } | |
| 23 | |
| 24 function startAnimationWithStepTiming() | |
| 25 { | |
| 26 player = node.animate([{ width: "100px", easing: "step(5, end)" }, { width:
"200px", easing: "step-start" }], 200); | |
| 27 } | |
| 28 | |
| 29 function test() | |
| 30 { | |
| 31 InspectorTest.selectNodeWithId("node", step1); | |
| 32 var timeline = new WebInspector.AnimationTimeline(); | |
| 33 var elementsPanel = WebInspector.ElementsPanel.instance(); | |
| 34 elementsPanel.setWidgetBelowDOM(timeline); | |
| 35 // Override timeline width for testing | |
| 36 WebInspector.AnimationTimeline.prototype.width = function() { return 1000; } | |
| 37 // Override animation color for testing | |
| 38 // FIXME: Set animation name of Web Animation instead; not supported yet | |
| 39 WebInspector.AnimationUI.prototype._color = function() { return "black"; } | |
| 40 | |
| 41 function step1() | |
| 42 { | |
| 43 InspectorTest.waitForAnimationAdded(step2); | |
| 44 InspectorTest.evaluateInPage("startAnimationWithDelay()"); | |
| 45 } | |
| 46 | |
| 47 function step2() | |
| 48 { | |
| 49 InspectorTest.addResult(">>>> Animation with start delay only"); | |
| 50 InspectorTest.dumpAnimationTimeline(timeline); | |
| 51 timeline._reset(); | |
| 52 InspectorTest.waitForAnimationAdded(step3); | |
| 53 InspectorTest.evaluateInPage("startAnimationWithEndDelay()"); | |
| 54 } | |
| 55 | |
| 56 function step3() | |
| 57 { | |
| 58 InspectorTest.addResult(">>>> Animation with start and end delay"); | |
| 59 InspectorTest.dumpAnimationTimeline(timeline); | |
| 60 InspectorTest.addSniffer(WebInspector.AnimationTimeline.prototype, "_can
celAnimation", step4); | |
| 61 InspectorTest.evaluateInPage("cancelAnimation()"); | |
| 62 } | |
| 63 | |
| 64 function step4() | |
| 65 { | |
| 66 InspectorTest.addResult(">>>> Animation canceled"); | |
| 67 // Force redraw since the draw is async scheduled | |
| 68 timeline._redraw(); | |
| 69 InspectorTest.dumpAnimationTimeline(timeline); | |
| 70 timeline._reset(); | |
| 71 InspectorTest.waitForAnimationAdded(step5); | |
| 72 InspectorTest.evaluateInPage("startAnimationWithStepTiming()"); | |
| 73 } | |
| 74 | |
| 75 function step5() | |
| 76 { | |
| 77 InspectorTest.addResult(">>>> Animation with step timing function"); | |
| 78 InspectorTest.dumpAnimationTimeline(timeline); | |
| 79 InspectorTest.completeTest(); | |
| 80 } | |
| 81 } | |
| 82 | |
| 83 </script> | |
| 84 </head> | |
| 85 | |
| 86 <body onload="runTest()"> | |
| 87 <p> | |
| 88 Tests the display of animations on the animation timeline. | |
| 89 </p> | |
| 90 | |
| 91 <div id="node" style="background-color: red; height: 100px"></div> | |
| 92 | |
| 93 </body> | |
| 94 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1151263007:
Devtools: Move animation to separate module (Closed)
Base URL: svn://svn.chromium.org/blink/trunk