third_party/WebKit/LayoutTests/animations/animations-responsive-assorted-lengths.html - Issue 2973013002: Group all responsive animation tests together

Side by Side Diff: third_party/WebKit/LayoutTests/animations/animations-responsive-assorted-lengths.html

Issue 2973013002: Group all responsive animation tests together (Closed)

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

« no previous file with comments | « third_party/WebKit/LayoutTests/SlowTests ('k') | third_party/WebKit/LayoutTests/animations/animations-responsive-backgroundPosition.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!DOCTYPE html>

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

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

4

5 <div id='container'>

6 <div id='element'></div>

7 </div>

8

9 <script>

10 var element = document.getElementById('element');

11 var container = document.getElementById('container');

12

13 test(function() {

14 element.style.fontSize = '10px';

15 var player = element.animate([{bottom: '3em'}, {bottom: '5em'}], 10);

16 player.pause();

17 player.currentTime = 5;

18 element.style.fontSize = '20px';

19 assert_equals(getComputedStyle(element).bottom, '80px');

20 }, 'bottom responsive to style changes');

21

22 test(function() {

23 element.style.fontSize = '10px';

24 var player = element.animate([{height: '3em'}, {height: '5em'}], 10);

25 player.pause();

26 player.currentTime = 5;

27 element.style.fontSize = '20px';

28 assert_equals(getComputedStyle(element).height, '80px');

29 }, 'height responsive to style changes');

30

31 test(function() {

32 element.style.fontSize = '10px';

33 var player = element.animate([{letterSpacing: '3em'}, {letterSpacing: '5em'} ], 10);

34 player.pause();

35 player.currentTime = 5;

36 element.style.fontSize = '20px';

37 assert_equals(getComputedStyle(element).letterSpacing, '80px');

38 }, 'letterSpacing responsive to style changes');

39

40 test(function() {

41 var player = element.animate([{letterSpacing: 'normal'}, {letterSpacing: 'no rmal'}], 10);

42 player.pause();

43 player.currentTime = 5;

44 assert_equals(getComputedStyle(element).letterSpacing, 'normal');

45 }, 'letterSpacing can be normal');

46

47 test(function() {

48 element.style.fontSize = '10px';

49 var player = element.animate([{marginRight: '3em'}, {marginRight: '5em'}], 1 0);

50 player.pause();

51 player.currentTime = 5;

52 element.style.fontSize = '20px';

53 assert_equals(getComputedStyle(element).marginRight, '80px');

54 }, 'marginRight responsive to style changes');

55

56 test(function() {

57 element.style.fontSize = '10px';

58 container.style.width = '300px';

59 var player = element.animate([{marginRight: '3em'}, {marginRight: '50%'}], 1 0);

60 player.pause();

61 player.currentTime = 5;

62 element.style.fontSize = '20px';

63 container.style.width = '600px';

64 assert_equals(getComputedStyle(element).marginRight, '180px');

65 }, 'marginRight allows percentages');

66

67 test(function() {

68 element.style.fontSize = '10px';

69 var player = element.animate([{outlineOffset: '3em'}, {outlineOffset: '5em'} ], 10);

70 player.pause();

71 player.currentTime = 5;

72 element.style.outline = 'dashed thin';

73 element.style.fontSize = '20px';

74 assert_equals(getComputedStyle(element).outlineOffset, '80px');

75 }, 'outlineOffset responsive to style changes');

76

77 test(function() {

78 container.style.fontSize = '10px';

79 var player = container.animate([{perspective: '3em'}, {perspective: '5em'}], 10);

80 player.pause();

81 player.currentTime = 5;

82 container.style.fontSize = '20px';

83 assert_equals(getComputedStyle(container).perspective, '80px');

84 }, 'perspective responsive to style changes');

85

86 test(function() {

87 var player = element.animate([{perspective: 'none'}, {perspective: 'none'}], 10);

88 player.pause();

89 player.currentTime = 10;

90 assert_equals(getComputedStyle(element).perspective, 'none');

91 }, 'perspective can be none');

92

93 test(function() {

94 element.style.fontSize = '10px';

95 var player = element.animate([{wordSpacing: '3em'}, {wordSpacing: '5em'}], 1 0);

96 player.pause();

97 player.currentTime = 5;

98 element.style.fontSize = '20px';

99 assert_equals(getComputedStyle(element).wordSpacing, '80px');

100 }, 'wordSpacing responsive to style changes');

101

102 </script>

OLD	NEW