third_party/WebKit/LayoutTests/inspector/animation/animation-group-matching-animations.html - Issue 2674573006: [DevTools] Migrate TargetObserver to AnimationModel observer where makes sense.

Side by Side Diff

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

Keyboard Shortcuts

	File
u :	up to issue
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line

	Issue
u :	up to list of issues
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue

Side by Side Diff: third_party/WebKit/LayoutTests/inspector/animation/animation-group-matching-animations.html

Issue 2674573006: [DevTools] Migrate TargetObserver to AnimationModel observer where makes sense. (Closed)

Patch Set: Created 3 years, 10 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

« no previous file with comments | « third_party/WebKit/LayoutTests/inspector/animation/animation-group-matching.html ('k') | third_party/WebKit/LayoutTests/inspector/animation/animation-group-matching-transitions.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <html>	1 <html>

2 <head>	2 <head>

3 <style type="text/css">	3 <style type="text/css">

4 div {	4 div {

5 animation-duration: 1ms;	5 animation-duration: 1ms;

6 }	6 }

7	7

8 .long {	8 .long {

9 animation-duration: 2ms;	9 animation-duration: 2ms;

10 }	10 }

(...skipping 44 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
55 var initialize_Animations = function()	55 var initialize_Animations = function()

56 {	56 {

57 InspectorTest.preloadModule("animation");	57 InspectorTest.preloadModule("animation");

58 }	58 }

59	59

60 function test()	60 function test()

61 {	61 {

62 var groupIds = [];	62 var groupIds = [];

63 var i = 0;	63 var i = 0;

64 var stepNumber = 0;	64 var stepNumber = 0;

65 var model = Animation.AnimationModel.fromTarget(InspectorTest.mainTarget);	65 var model = InspectorTest.mainTarget.model(Animation.AnimationModel);

66 model.ensureEnabled();	66 model.ensureEnabled();

67 model.addEventListener(Animation.AnimationModel.Events.AnimationGroupStarted , groupStarted);	67 model.addEventListener(Animation.AnimationModel.Events.AnimationGroupStarted , groupStarted);

68 // Each step triggers a new animation group.	68 // Each step triggers a new animation group.

69 var steps = [	69 var steps = [

70 "restartAnimation('node1', 'expandWidth')",	70 "restartAnimation('node1', 'expandWidth')",

71 "restartAnimation('node2', 'expandWidth')",	71 "restartAnimation('node2', 'expandWidth')",

72 "toggleClass('node1', 'expandWidth', false); restartAnimation('node1', ' expand')",	72 "toggleClass('node1', 'expandWidth', false); restartAnimation('node1', ' expand')",

73 "restartAnimation('node3', 'expand')",	73 "restartAnimation('node3', 'expand')",

74 "restartAnimation('node3', 'expand')",	74 "restartAnimation('node3', 'expand')",

75 "restartAnimation('node2', 'expand')", // expandWidthAnim doesn't restar t, new group.	75 "restartAnimation('node2', 'expand')", // expandWidthAnim doesn't restar t, new group.

(...skipping 33 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
109 which are applied through a variety of selectors.	109 which are applied through a variety of selectors.

110 </p>	110 </p>

111	111

112 <div id="node1" style="background-color: red; height: 100px"></div>	112 <div id="node1" style="background-color: red; height: 100px"></div>

113 <div id="node2" style="background-color: red; height: 100px"></div>	113 <div id="node2" style="background-color: red; height: 100px"></div>

114 <div id="node3" style="background-color: red; height: 100px"></div>	114 <div id="node3" style="background-color: red; height: 100px"></div>

115 <div id="node4" style="background-color: red; height: 100px"></div>	115 <div id="node4" style="background-color: red; height: 100px"></div>

116	116

117 </body>	117 </body>

118 </html>	118 </html>

OLD	NEW