third_party/WebKit/LayoutTests/animations/animation-direction-reverse-non-hardware.html - Issue 2975723002: Move direction and fill tests to subdirectory

Side by Side Diff: third_party/WebKit/LayoutTests/animations/animation-direction-reverse-non-hardware.html

Issue 2975723002: Move direction and fill tests to subdirectory (Closed)

Patch Set: 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/animations/animation-direction-reverse-hardware-opacity-expected.txt ('k') | third_party/WebKit/LayoutTests/animations/animation-direction-reverse-timing-functions.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 <style>

5 .box {

6 animation-duration: 2s;

7 animation-iteration-count: 8;

8 animation-timing-function: linear;

9 height: 50px;

10 left: 20px;

11 margin-bottom: 10px;

12 position: relative;

13 top: 10px;

14 width: 250px;

15 }

16

17 .move1 {

18 animation-name: move1;

19 background-color: blue;

20 color: white;

21 }

22

23 .move2 {

24 animation-name: move2;

25 background-color: orange;

26 }

27

28 .normal {

29 animation-direction: normal;

30 }

31

32 .alternate {

33 animation-direction: alternate;

34 }

35

36 .reverse {

37 animation-direction: reverse;

38 }

39

40 .alternate-reverse {

41 animation-direction: alternate-reverse;

42 }

43

44 @keyframes move1 {

45 from { left: 0px; }

46 to { left: 200px; }

47 }

48

49 @keyframes move2 {

50 0% { left: 0px; }

51 40% { left: 160px; }

52 60% { left: 120px; }

53 100% { left: 200px; }

54 }

55 </style>

56 <div id="box1" class="box move1 normal">2 keyframes: normal</div>

57 <div id="box2" class="box move1 alternate">2 keyframes: alternate</div>

58 <div id="box3" class="box move1 reverse">2 keyframes: reverse</div>

59 <div id="box4" class="box move1 alternate-reverse">2 keyframes: alternate-revers e</div>

60 <div id="box5" class="box move2 normal">4 keyframes: normal</div>

61 <div id="box6" class="box move2 alternate">4 keyframes: alternate</div>

62 <div id="box7" class="box move2 reverse">4 keyframes: reverse</div>

63 <div id="box8" class="box move2 alternate-reverse">4 keyframes: alternate-revers e</div>

64 <script>

65 'use strict';

66 test(function() {

67 box1.style.animationDelay = '-0.2s';

68 assert_equals(getComputedStyle(box1).left, '20px');

69

70 box2.style.animationDelay = '-0.2s';

71 assert_equals(getComputedStyle(box2).left, '20px');

72

73 box3.style.animationDelay = '-0.2s';

74 assert_equals(getComputedStyle(box3).left, '180px');

75

76 box4.style.animationDelay = '-0.2s';

77 assert_equals(getComputedStyle(box4).left, '180px');

78

79

80 box1.style.animationDelay = '-2.2s';

81 assert_equals(getComputedStyle(box1).left, '20px');

82

83 box2.style.animationDelay = '-2.2s';

84 assert_equals(getComputedStyle(box2).left, '180px');

85

86 box3.style.animationDelay = '-2.2s';

87 assert_equals(getComputedStyle(box3).left, '180px');

88

89 box4.style.animationDelay = '-2.2s';

90 assert_equals(getComputedStyle(box4).left, '20px');

91

92

93 box5.style.animationDelay = '-0.2s';

94 assert_equals(getComputedStyle(box5).left, '40px');

95

96 box6.style.animationDelay = '-0.2s';

97 assert_equals(getComputedStyle(box6).left, '40px');

98

99 box7.style.animationDelay = '-0.2s';

100 assert_equals(getComputedStyle(box7).left, '180px');

101

102 box8.style.animationDelay = '-0.2s';

103 assert_equals(getComputedStyle(box8).left, '180px');

104

105

106 box5.style.animationDelay = '-2.2s';

107 assert_equals(getComputedStyle(box5).left, '40px');

108

109 box6.style.animationDelay = '-2.2s';

110 assert_equals(getComputedStyle(box6).left, '180px');

111

112 box7.style.animationDelay = '-2.2s';

113 assert_equals(getComputedStyle(box7).left, '180px');

114

115 box8.style.animationDelay = '-2.2s';

116 assert_equals(getComputedStyle(box8).left, '40px');

117 }, "animation-direction works with multiple keyframes");

118 </script>

OLD	NEW