LayoutTests/web-animations-api/element-animate-list-of-keyframes.html - Issue 105273010: Web Animations API: Start implementation of timing input objects.

Side by Side Diff: LayoutTests/web-animations-api/element-animate-list-of-keyframes.html

Issue 105273010: Web Animations API: Start implementation of timing input objects. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Add custom binding for timing input and handle each case separately. Created 6 years, 11 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

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <script src="../resources/testharness.js"></script>	2 <script src="../resources/testharness.js"></script>

3 <script src="../resources/testharnessreport.js"></script>	3 <script src="../resources/testharnessreport.js"></script>

4	4

5 <style>	5 <style>

6 .anim {	6 .anim {

7 position: absolute;	7 position: absolute;

8 left: 10px;	8 left: 10px;

9 height: 90px;	9 height: 90px;

10 width: 100px;	10 width: 100px;

11 background-color: black;	11 background-color: black;

12 }	12 }

13 </style>	13 </style>

14	14

15 <body>	15 <body>

16 <div id='e1' class='anim'></div>	16 <div id='e1' class='anim'></div>

17 <div id='e2' class='anim'></div>	17 <div id='e2' class='anim'></div>

18 <div id='e3' class='anim'></div>	18 <div id='e3' class='anim'></div>

19 </body>	19 </body>

20	20

21 <script>	21 <script>

22 var e1 = document.getElementById('e1');	22 var e1 = document.getElementById('e1');

23 var e2 = document.getElementById('e2');	23 var e2 = document.getElementById('e2');

24 var e3 = document.getElementById('e3');	24 var e3 = document.getElementById('e3');

25	25

26 var e1Style = getComputedStyle(e1);	26 var e1Style = getComputedStyle(e1);

27 var e2Style = getComputedStyle(e2);	27 var e2Style = getComputedStyle(e2);

28 var e3Style = getComputedStyle(e3);	28 var e3Style = getComputedStyle(e3);

29	29

30 var duration = 1;	30 var durationValue = 1;

31	31

32 test(function() {	32 test(function() {

33 e1.animate([	33 e1.animate([

34 {left: '10px', opacity: '1', offset: 0},	34 {left: '10px', opacity: '1', offset: 0},

35 {left: '100px', opacity: '0', offset: 1}	35 {left: '100px', opacity: '0', offset: 1}

36 ], duration);	36 ], durationValue);

37 internals.pauseAnimations(duration / 2);	37 internals.pauseAnimations(durationValue / 2);

38 assert_equals(e1Style.left, '55px');	38 assert_equals(e1Style.left, '55px');

39 assert_equals(e1Style.opacity, '0.5');	39 assert_equals(e1Style.opacity, '0.5');

40 }, 'Calling animate() should start an animation.');	40 }, 'Calling animate() should start an animation.');

41	41

42 test(function() {	42 test(function() {

43 e2.animate([	43 e2.animate([

44 {backgroundColor: 'green', offset: 0},	44 {backgroundColor: 'green', offset: 0},

45 {backgroundColor: 'purple', offset: 1}	45 {backgroundColor: 'purple', offset: 1}

46 ], duration);	46 ], durationValue);

47 internals.pauseAnimations(duration / 2);	47 internals.pauseAnimations(durationValue / 2);

48 assert_equals(e2Style.backgroundColor, 'rgb(64, 64, 64)');	48 assert_equals(e2Style.backgroundColor, 'rgb(64, 64, 64)');

49 }, 'Calling animate() should start an animation. CamelCase property names should be parsed.');	49 }, 'Calling animate() should start an animation. CamelCase property names should be parsed.');

50	50

51 var keyframesWithInvalid = [	51 var keyframesWithInvalid = [

52 {offset: 0.1},	52 {offset: 0.1},

53 {width: '0px', backgroundColor: 'octarine', offset: 0.2},	53 {width: '0px', backgroundColor: 'octarine', offset: 0.2},

54 {width: '1000px', foo: 'bar', offset: 1}	54 {width: '1000px', foo: 'bar', offset: 1}

55 ];	55 ];

56	56

57 test(function() {	57 test(function() {

58 e3.animate(keyframesWithInvalid, duration);	58 e3.animate(keyframesWithInvalid, {duration: durationValue, fill: 'forwards'} );

59 internals.pauseAnimations(duration);	59 internals.pauseAnimations(durationValue);

60 assert_equals(e3Style.width, '1000px');	60 assert_equals(e3Style.width, '1000px');

61 assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)');	61 assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)');

62 assert_equals(e3Style.foo, undefined);	62 assert_equals(e3Style.foo, undefined);

63 }, 'Calling animate() with a pre-constructed keyframes list should start an anim ation. Invalid style declarations should be ignored.');	63 }, 'Calling animate() with a pre-constructed keyframes list should start an anim ation. Invalid style declarations should be ignored.');

64 </script>	64 </script>

OLD	NEW

« no previous file with comments | « no previous file | Source/bindings/bindings.gypi » ('j') | Source/bindings/v8/custom/V8ElementCustom.cpp » ('J')