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

Side by Side Diff: third_party/WebKit/LayoutTests/animations/animation-direction-normal.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-alternate-reverse.html ('k') | third_party/WebKit/LayoutTests/animations/animation-direction-normal-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <html lang="en">	1 <html lang="en">

2 <head>	2 <head>

3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

4 <title>Test of -webkit-animation-direction</title>	4 <title>Test of animation-direction</title>

5 <style type="text/css" media="screen">	5 <style type="text/css" media="screen">

6 body {	6 body {

7 margin: 0;	7 margin: 0;

8 }	8 }

9	9

10 #box {	10 #box {

11 position: absolute;	11 position: absolute;

12 left: 0px;	12 left: 0px;

13 top: 100px;	13 top: 100px;

14 height: 100px;	14 height: 100px;

15 width: 100px;	15 width: 100px;

16 background-color: red;	16 background-color: red;

17 margin: 0;	17 margin: 0;

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

19 -webkit-animation-direction: normal;	19 animation-direction: normal;

20 -webkit-animation-iteration-count: 2;	20 animation-iteration-count: 2;

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

22 -webkit-animation-name: move1;	22 animation-name: move1;

23 }	23 }

24 #safezone {	24 #safezone {

25 position: absolute;	25 position: absolute;

26 top: 100px;	26 top: 100px;

27 height: 100px;	27 height: 100px;

28 width: 130px;	28 width: 130px;

29 left: 30px;	29 left: 30px;

30 background-color: green;	30 background-color: green;

31 }	31 }

32 @-webkit-keyframes move1 {	32 @keyframes move1 {

33 from { transform: translateX(0px); }	33 from { transform: translateX(0px); }

34 to { transform: translateX(200px); }	34 to { transform: translateX(200px); }

35 }	35 }

36 </style>	36 </style>

37 <script src="resources/animation-test-helpers.js" type="text/javascript" chars et="utf-8"></script>	37 <script src="resources/animation-test-helpers.js" type="text/javascript" chars et="utf-8"></script>

38 <script type="text/javascript" charset="utf-8">	38 <script type="text/javascript" charset="utf-8">

39 const expectedValues = [	39 const expectedValues = [

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

41 [0.5, "box", "webkitTransform", [1,0,0,1, 50,0], 20],	41 [0.5, "box", "transform", [1,0,0,1, 50,0], 20],

42 [1.0, "box", "webkitTransform", [1,0,0,1,100,0], 20],	42 [1.0, "box", "transform", [1,0,0,1,100,0], 20],

43 [2.5, "box", "webkitTransform", [1,0,0,1, 50,0], 20],	43 [2.5, "box", "transform", [1,0,0,1, 50,0], 20],

44 ];	44 ];

45	45

46 function pauseAnimation()	46 function pauseAnimation()

47 {	47 {

48 document.getElementById("box").style.webkitAnimationPlayState = "paused" ;	48 document.getElementById("box").style.animationPlayState = "paused";

49 }	49 }

50	50

51 function setTimers()	51 function setTimers()

52 {	52 {

53 setTimeout(pauseAnimation, 2500);	53 setTimeout(pauseAnimation, 2500);

54 }	54 }

55	55

56 runAnimationTest(expectedValues, setTimers, null, true, true);	56 runAnimationTest(expectedValues, setTimers, null, true, true);

57	57

58 </script>	58 </script>

59 </head>	59 </head>

60 <body>	60 <body>

61 <!-- This tests the operation of -webkit-animation-direction. After 1 second the red boxes should be hidden by the green boxes. You should see no red boxes. -->	61 <!-- This tests the operation of animation-direction. After 1 second the red box es should be hidden by the green boxes. You should see no red boxes. -->

62 <div id="box"></div>	62 <div id="box"></div>

63 <div id="safezone"></div>	63 <div id="safezone"></div>

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

65 </div>	65 </div>

66 </body>	66 </body>

67 </html>	67 </html>

OLD	NEW