third_party/WebKit/LayoutTests/animations/animation-direction-reverse-non-hardware.html - Issue 2527583002: CSS Animations: Remove unnecessary webkit prefixes from layout tests

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

Issue 2527583002: CSS Animations: Remove unnecessary webkit prefixes from layout tests (Closed)

Patch Set: Created 4 years, 1 month 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.html ('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
1 <!doctype html>	1 <!doctype html>

2 <html>	2 <html>

3 <head>	3 <head>

4 <title>Test of -webkit-animation-direction reverse on non-composited elements< /title>	4 <title>Test of animation-direction reverse on non-composited elements</title>

5 <style>	5 <style>

6 body {	6 body {

7 margin: 0;	7 margin: 0;

8 }	8 }

9	9

10 .box {	10 .box {

11 position: relative;	11 position: relative;

12 left: 20px;	12 left: 20px;

13 top: 10px;	13 top: 10px;

14 height: 50px;	14 height: 50px;

15 width: 250px;	15 width: 250px;

16 margin-bottom: 10px;	16 margin-bottom: 10px;

17 -webkit-animation-duration: 2s;	17 animation-duration: 2s;

18 -webkit-animation-timing-function: linear;	18 animation-timing-function: linear;

19 -webkit-animation-iteration-count: 8;	19 animation-iteration-count: 8;

20 }	20 }

21	21

22 .move1 {	22 .move1 {

23 -webkit-animation-name: move1;	23 animation-name: move1;

24 background-color: blue;	24 background-color: blue;

25 color: white;	25 color: white;

26 }	26 }

27	27

28 .move2 {	28 .move2 {

29 -webkit-animation-name: move2;	29 animation-name: move2;

30 background-color: orange;	30 background-color: orange;

31 }	31 }

32	32

33 .normal {	33 .normal {

34 -webkit-animation-direction: normal;	34 animation-direction: normal;

35 }	35 }

36	36

37 .alternate {	37 .alternate {

38 -webkit-animation-direction: alternate;	38 animation-direction: alternate;

39 }	39 }

40	40

41 .reverse {	41 .reverse {

42 -webkit-animation-direction: reverse;	42 animation-direction: reverse;

43 }	43 }

44	44

45 .alternate-reverse {	45 .alternate-reverse {

46 -webkit-animation-direction: alternate-reverse;	46 animation-direction: alternate-reverse;

47 }	47 }

48	48

49 @-webkit-keyframes move1 {	49 @keyframes move1 {

50 from { left: 0px; }	50 from { left: 0px; }

51 to { left: 200px; }	51 to { left: 200px; }

52 }	52 }

53	53

54 @-webkit-keyframes move2 {	54 @keyframes move2 {

55 0% { left: 0px; }	55 0% { left: 0px; }

56 40% { left: 160px; }	56 40% { left: 160px; }

57 60% { left: 120px; }	57 60% { left: 120px; }

58 100% { left: 200px; }	58 100% { left: 200px; }

59 }	59 }

60 </style>	60 </style>

61 <script src="resources/animation-test-helpers.js"></script>	61 <script src="resources/animation-test-helpers.js"></script>

62 <script>	62 <script>

63 const expectedValues = [	63 const expectedValues = [

64 // [time, element-id, property, expected-value, tolerance]	64 // [time, element-id, property, expected-value, tolerance]

(...skipping 25 matching lines...) Expand all Loading...
90 <div id="box3" class="box move1 reverse">2 keyframes: reverse</div>	90 <div id="box3" class="box move1 reverse">2 keyframes: reverse</div>

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

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

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

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

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

96 <div id="result"></div>	96 <div id="result"></div>

97 </div>	97 </div>

98 </body>	98 </body>

99 </html>	99 </html>

OLD	NEW