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

Side by Side Diff: third_party/WebKit/LayoutTests/animations/animation-direction-reverse-timing-functions.html

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

Patch Set: Created 4 years 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-non-hardware.html ('k') | third_party/WebKit/LayoutTests/animations/animation-end-event-short-iterations.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 lang="en">	2 <html lang="en">

3 <head>	3 <head>

4 <title>Test of -webkit-animation-direction timing functions</title>	4 <title>Test of animation-direction timing functions</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: ease; /* ease is good for testing becau se it is not symmetric */	18 animation-timing-function: ease; /* ease is good for testing because it is not symmetric */

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

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 .normal {	28 .normal {

29 -webkit-animation-direction: normal;	29 animation-direction: normal;

30 }	30 }

31	31

32 .alternate {	32 .alternate {

33 -webkit-animation-direction: alternate;	33 animation-direction: alternate;

34 }	34 }

35	35

36 .reverse {	36 .reverse {

37 -webkit-animation-direction: reverse;	37 animation-direction: reverse;

38 }	38 }

39	39

40 .alternate-reverse {	40 .alternate-reverse {

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

42 }	42 }

43	43

44 @-webkit-keyframes move1 {	44 @keyframes move1 {

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

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

47 }	47 }

48 </style>	48 </style>

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

50 <script>	50 <script>

51 const expectedValues = [	51 const expectedValues = [

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

53 [0.2, "box1", "left", 18, 10],	53 [0.2, "box1", "left", 18, 10],

54 [0.2, "box2", "left", 18, 10],	54 [0.2, "box2", "left", 18, 10],

(...skipping 11 matching lines...) Expand all Loading...
66 </head>	66 </head>

67 <body>	67 <body>

68 <div id="box1" class="box move1 normal">normal</div>	68 <div id="box1" class="box move1 normal">normal</div>

69 <div id="box2" class="box move1 alternate">alternate</div>	69 <div id="box2" class="box move1 alternate">alternate</div>

70 <div id="box3" class="box move1 reverse">reverse</div>	70 <div id="box3" class="box move1 reverse">reverse</div>

71 <div id="box4" class="box move1 alternate-reverse">alternate-reverse</div>	71 <div id="box4" class="box move1 alternate-reverse">alternate-reverse</div>

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

73 </div>	73 </div>

74 </body>	74 </body>

75 </html>	75 </html>

OLD	NEW