LayoutTests/inspector/elements/animation-timeline.html - Issue 967213002: Devtools Animations: Represent delay and end-delay on the animation timeline

Side by Side Diff: LayoutTests/inspector/elements/animation-timeline.html

Issue 967213002: Devtools Animations: Represent delay and end-delay on the animation timeline (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Add test Created 5 years, 9 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch | Annotate | Revision Log

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 function documentClickHandler(event) { console.log("click - document - attribute "); }

	7

	8 function test()

	9 {

	10 InspectorTest.selectNodeWithId("node", animationStartDelay);

	11 var sidebarPane = WebInspector.panels.elements.sidebarPanes.animations;

	12 // Override timeline width for testing

	13 WebInspector.AnimationTimeline.prototype.width = function() { return 500; }

	14

	15 function animationStartDelay()

	16 {

	17 var animation = {"id":"9","pausedState":false,"playState":"running","pla ybackRate":1,"startTime":1013.51700001396,"currentTime":16.6666667209938,"source ":{"delay":250,"endDelay":0,"playbackRate":1,"iterationStart":0,"iterations":1," duration":1000,"direction":"normal","fill":"none","name":"","backendNodeId":1,"e asing":"linear","keyframesRule":{"keyframes":[{"offset":"0%","style":{"cssProper ties":[{"name":"transform","value":"translateX(0px)"}],"shorthandEntries":[]},"e asing":"linear"},{"offset":"100%","style":{"cssProperties":[{"name":"transform", "value":"translateX(100px)"}],"shorthandEntries":[]},"easing":"linear"}]}},"type ":"WebAnimation"};
	pfeldman 2015/03/03 12:44:15 Why is this information not coming from the backen Why is this information not coming from the backend? samli 2015/03/03 21:13:32 I couldn't figure a way to reliably trigger an ani Show quoted text On 2015/03/03 12:44:15, pfeldman wrote: > Why is this information not coming from the backend? I couldn't figure a way to reliably trigger an animation on the page at the right time. Ideally I would like to sniff the addAnimation in timeline THEN trigger an animation on the inspected target before dumping the timeline. Suggestions welcome but I spent a bit of time and couldn't find a better way. pfeldman 2015/03/04 12:54:03 I am sure you can kick the animation programmatica I am sure you can kick the animation programmatically. Run something on the page to kick it when you need it?
	18 var player = WebInspector.AnimationModel.AnimationPlayer.parsePayload(We bInspector.targetManager.mainTarget(), animation);

	19 player.source().nodeId = sidebarPane.node().id;

	20 sidebarPane._timeline.addAnimation(player, true);

	21 InspectorTest.dumpAnimationTimeline(animationBothDelay);

	22 }

	23

	24 function animationBothDelay()

	25 {

	26 var animation = {"id":"2","pausedState":false,"playState":"running","pla ybackRate":1,"startTime":1167.00433334336,"currentTime":0,"source":{"delay":300, "endDelay":100,"playbackRate":1,"iterationStart":0,"iterations":1,"duration":250 ,"direction":"normal","fill":"none","name":"","backendNodeId":8,"easing":"linear ","keyframesRule":{"keyframes":[{"offset":"0%","style":{"cssProperties":[{"name" :"width","value":"100px"}],"shorthandEntries":[]},"easing":"linear"},{"offset":" 100%","style":{"cssProperties":[{"name":"width","value":"700px"}],"shorthandEntr ies":[]},"easing":"linear"}]}},"type":"WebAnimation"};

	27 var player = WebInspector.AnimationModel.AnimationPlayer.parsePayload(We bInspector.targetManager.mainTarget(), animation);

	28 player.source().nodeId = sidebarPane.node().id;

	29 sidebarPane._timeline.addAnimation(player, true);

	30 InspectorTest.dumpAnimationTimeline(InspectorTest.completeTest);

	31 }

	32 }

	33

	34 </script>

	35 </head>

	36

	37 <body onload="runtest()">

	38 <p>

	39 Tests the display of animations on the animation timeline.

	40 </p>

	41

	42 <div id="node"></div>

	43

	44 </body>

	45 </html>

OLD	NEW