Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(126)

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1218433007: Devtools Animations: Add buffer and effect selection to animation timeline (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Fix test Created 5 years, 3 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
« no previous file with comments | « LayoutTests/http/tests/inspector/elements-test.js ('k') | Source/devtools/devtools.gypi » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html> 1 <html>
2 <head> 2 <head>
3 <style type="text/css"> 3 <style type="text/css">
4 #node { 4 #node {
5 transition: background-color 150ms cubic-bezier(0, 0.5, 0.5, 1); 5 transition: background-color 150ms cubic-bezier(0, 0.5, 0.5, 1);
6 } 6 }
7 7
8 #node.css-anim { 8 #node.css-anim {
9 animation: anim 300ms ease-in-out; 9 animation: anim 300ms ease-in-out;
10 } 10 }
11 11
12 @keyframes anim { 12 @keyframes anim {
13 from { 13 from {
14 width: 100px; 14 width: 100px;
15 } 15 }
16 to { 16 to {
17 width: 200px; 17 width: 200px;
18 } 18 }
19 } 19 }
20 </style> 20 </style>
21 <script src="../../http/tests/inspector/inspector-test.js"></script> 21 <script src="../../http/tests/inspector/inspector-test.js"></script>
22 <script src="../../http/tests/inspector/elements-test.js"></script> 22 <script src="../../http/tests/inspector/elements-test.js"></script>
23 <script> 23 <script>
24
25 var player; 24 var player;
26 25
27 function startAnimationWithDelay() 26 function startAnimationWithDelay()
28 { 27 {
29 player = node.animate([{ width: "100px" }, { width: "200px" }], { duration: 200, delay: 100 }); 28 player = node.animate([{ width: "100px" }, { width: "200px" }], { duration: 200, delay: 100 });
30 } 29 }
31 30
32 function startAnimationWithEndDelay() 31 function startAnimationWithEndDelay()
33 { 32 {
34 player = node.animate([{ width: "100px" }, { width: "200px" }], { duration: 20000, delay: 100, endDelay: 200 }); 33 player = node.animate([{ width: "100px" }, { width: "200px" }], { duration: 20000, delay: 100, endDelay: 200 });
(...skipping 27 matching lines...) Expand all
62 function test() 61 function test()
63 { 62 {
64 InspectorTest.selectNodeWithId("node", step1); 63 InspectorTest.selectNodeWithId("node", step1);
65 var timeline = new WebInspector.AnimationTimeline(); 64 var timeline = new WebInspector.AnimationTimeline();
66 var elementsPanel = WebInspector.ElementsPanel.instance(); 65 var elementsPanel = WebInspector.ElementsPanel.instance();
67 elementsPanel.setWidgetBelowDOM(timeline); 66 elementsPanel.setWidgetBelowDOM(timeline);
68 // Override timeline width for testing 67 // Override timeline width for testing
69 WebInspector.AnimationTimeline.prototype.width = function() { return 1000; } 68 WebInspector.AnimationTimeline.prototype.width = function() { return 1000; }
70 // Override animation color for testing 69 // Override animation color for testing
71 // FIXME: Set animation name of Web Animation instead; not supported yet 70 // FIXME: Set animation name of Web Animation instead; not supported yet
72 WebInspector.AnimationUI.prototype._color = function() { return "black"; } 71 WebInspector.AnimationUI.Color = function() { return "black"; }
73 72
74 function step1() 73 function step1()
75 { 74 {
76 InspectorTest.waitForAnimationAdded(step2); 75 InspectorTest.waitForAnimationAdded(step2);
77 InspectorTest.evaluateInPage("startAnimationWithDelay()"); 76 InspectorTest.evaluateInPage("startAnimationWithDelay()");
78 } 77 }
79 78
80 function step2() 79 function step2(group)
81 { 80 {
81 timeline._selectAnimationGroup(group);
82 timeline._redraw();
82 InspectorTest.addResult(">>>> Animation with start delay only"); 83 InspectorTest.addResult(">>>> Animation with start delay only");
83 InspectorTest.dumpAnimationTimeline(timeline); 84 InspectorTest.dumpAnimationTimeline(timeline);
84 timeline._reset(); 85 timeline._reset();
85 InspectorTest.waitForAnimationAdded(step3); 86 InspectorTest.waitForAnimationAdded(step3);
86 InspectorTest.evaluateInPage("startAnimationWithEndDelay()"); 87 InspectorTest.evaluateInPage("startAnimationWithEndDelay()");
87 } 88 }
88 89
89 function step3() 90 function step3(group)
90 { 91 {
92 timeline._selectAnimationGroup(group);
93 timeline._redraw();
91 InspectorTest.addResult(">>>> Animation with start and end delay"); 94 InspectorTest.addResult(">>>> Animation with start and end delay");
92 InspectorTest.dumpAnimationTimeline(timeline); 95 InspectorTest.dumpAnimationTimeline(timeline);
93 InspectorTest.addSniffer(WebInspector.AnimationTimeline.prototype, "_can celAnimation", step4); 96 InspectorTest.addSniffer(WebInspector.AnimationTimeline.prototype, "_can celAnimation", step4);
94 InspectorTest.evaluateInPage("cancelAnimation()"); 97 InspectorTest.evaluateInPage("cancelAnimation()");
95 } 98 }
96 99
97 function step4() 100 function step4()
98 { 101 {
99 InspectorTest.addResult(">>>> Animation canceled"); 102 InspectorTest.addResult(">>>> Animation canceled");
100 // Force redraw since the draw is async scheduled 103 // Force redraw since the draw is async scheduled
101 timeline._redraw(); 104 timeline._redraw();
102 InspectorTest.dumpAnimationTimeline(timeline); 105 InspectorTest.dumpAnimationTimeline(timeline);
103 timeline._reset(); 106 timeline._reset();
104 InspectorTest.waitForAnimationAdded(step5); 107 InspectorTest.waitForAnimationAdded(step5);
105 InspectorTest.evaluateInPage("startAnimationWithStepTiming()"); 108 InspectorTest.evaluateInPage("startAnimationWithStepTiming()");
106 } 109 }
107 110
108 function step5() 111 function step5(group)
109 { 112 {
113 timeline._selectAnimationGroup(group);
114 timeline._redraw();
110 InspectorTest.addResult(">>>> Animation with step timing function"); 115 InspectorTest.addResult(">>>> Animation with step timing function");
111 InspectorTest.dumpAnimationTimeline(timeline); 116 InspectorTest.dumpAnimationTimeline(timeline);
112 timeline._reset(); 117 timeline._reset();
113 InspectorTest.waitForAnimationAdded(step6); 118 InspectorTest.waitForAnimationAdded(step6);
114 InspectorTest.evaluateInPage("startCSSAnimation()"); 119 InspectorTest.evaluateInPage("startCSSAnimation()");
115 } 120 }
116 121
117 function step6() 122 function step6(group)
118 { 123 {
124 timeline._selectAnimationGroup(group);
125 timeline._redraw();
119 InspectorTest.addResult(">>>> CSS animation started"); 126 InspectorTest.addResult(">>>> CSS animation started");
120 InspectorTest.dumpAnimationTimeline(timeline); 127 InspectorTest.dumpAnimationTimeline(timeline);
121 timeline._reset(); 128 timeline._reset();
122 InspectorTest.waitForAnimationAdded(step7); 129 InspectorTest.waitForAnimationAdded(step7);
123 InspectorTest.evaluateInPage("startCSSTransition()"); 130 InspectorTest.evaluateInPage("startCSSTransition()");
124 } 131 }
125 132
126 function step7() 133 function step7(group)
127 { 134 {
135 timeline._selectAnimationGroup(group);
136 timeline._redraw();
128 InspectorTest.addResult(">>>> CSS transition started"); 137 InspectorTest.addResult(">>>> CSS transition started");
129 InspectorTest.dumpAnimationTimeline(timeline); 138 InspectorTest.dumpAnimationTimeline(timeline);
130 InspectorTest.completeTest(); 139 InspectorTest.completeTest();
131 } 140 }
132 } 141 }
133 142
134 </script> 143 </script>
135 </head> 144 </head>
136 145
137 <body onload="runTest()"> 146 <body onload="runTest()">
138 <p> 147 <p>
139 Tests the display of animations on the animation timeline. 148 Tests the display of animations on the animation timeline.
140 </p> 149 </p>
141 150
142 <div id="node" style="background-color: red; height: 100px"></div> 151 <div id="node" style="background-color: red; height: 100px"></div>
143 152
144 </body> 153 </body>
145 </html> 154 </html>
OLDNEW
« no previous file with comments | « LayoutTests/http/tests/inspector/elements-test.js ('k') | Source/devtools/devtools.gypi » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698