Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(221)

Side by Side Diff: third_party/WebKit/LayoutTests/animations/computed-style.html

Issue 2970883003: Separate out animations tests with prefixing (Closed)
Patch Set: Rebaseline virtual/threaded version of test too 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:
View unified diff | Download patch
OLDNEW
1 <html> 1 <html>
2 <head> 2 <head>
3 <style type="text/css" media="screen"> 3 <style type="text/css" media="screen">
4 #test1 { 4 #test1 {
5 width: 20px; 5 width: 20px;
6 height: 20px; 6 height: 20px;
7 background-color: blue; 7 background-color: blue;
8 position: relative; 8 position: relative;
9 -webkit-animation-name: anim1; 9 animation-name: anim1;
10 -webkit-animation-duration: 10s; 10 animation-duration: 10s;
11 -webkit-animation-fill-mode: backwards; 11 animation-fill-mode: backwards;
12 -webkit-animation-iteration-count: 10; 12 animation-iteration-count: 10;
13 -webkit-animation-timing-function: linear; 13 animation-timing-function: linear;
14 -webkit-animation-direction: normal; 14 animation-direction: normal;
15 } 15 }
16 #test2 { 16 #test2 {
17 width: 20px; 17 width: 20px;
18 height: 20px; 18 height: 20px;
19 background-color: blue; 19 background-color: blue;
20 position: relative; 20 position: relative;
21 -webkit-animation-name: anim2, anim3; 21 animation-name: anim2, anim3;
22 -webkit-animation-duration: 5s, 2500ms; 22 animation-duration: 5s, 2500ms;
23 -webkit-animation-fill-mode: forwards, both; 23 animation-fill-mode: forwards, both;
24 -webkit-animation-iteration-count: 10, infinite; 24 animation-iteration-count: 10, infinite;
25 -webkit-animation-timing-function: linear, ease-in-out; 25 animation-timing-function: linear, ease-in-out;
26 -webkit-animation-direction: normal, alternate; 26 animation-direction: normal, alternate;
27 } 27 }
28 #test3 { 28 #test3 {
29 width: 20px; 29 width: 20px;
30 height: 20px; 30 height: 20px;
31 background-color: blue; 31 background-color: blue;
32 position: relative; 32 position: relative;
33 -webkit-animation-name: anim1, anim2, anim3; 33 animation-name: anim1, anim2, anim3;
34 -webkit-animation-duration: 5s; 34 animation-duration: 5s;
35 -webkit-animation-timing-function: step-start, step-end, steps(5, end); 35 animation-timing-function: step-start, step-end, steps(5, end);
36 } 36 }
37 @-webkit-keyframes anim1 { 37 @keyframes anim1 {
38 from { left: 10px; } 38 from { left: 10px; }
39 to { left: 20px; } 39 to { left: 20px; }
40 } 40 }
41 @-webkit-keyframes anim2 { 41 @keyframes anim2 {
42 from { width: 20px; } 42 from { width: 20px; }
43 to { width: 25px; } 43 to { width: 25px; }
44 } 44 }
45 @-webkit-keyframes anim3 { 45 @keyframes anim3 {
46 from { left: 10px; } 46 from { left: 10px; }
47 to { left: 20px; } 47 to { left: 20px; }
48 } 48 }
49 </style> 49 </style>
50 <script src="../resources/js-test.js"></script> 50 <script src="../resources/js-test.js"></script>
51 </head> 51 </head>
52 <body> 52 <body>
53 <p id="test1"></p> 53 <p id="test1"></p>
54 <p id="test2"></p> 54 <p id="test2"></p>
55 <p id="test3"></p> 55 <p id="test3"></p>
56 <p id="description"></p> 56 <p id="description"></p>
57 <div id="console"></div> 57 <div id="console"></div>
58 <script> 58 <script>
59 59
60 description("This tests computed style values from animation properties."); 60 description("This tests computed style values from animation properties.");
61 61
62 var test1 = document.getElementById("test1"); 62 var test1 = document.getElementById("test1");
63 var test2 = document.getElementById("test2"); 63 var test2 = document.getElementById("test2");
64 64
65 var test1Style = window.getComputedStyle(test1); 65 var test1Style = window.getComputedStyle(test1);
66 var test2Style = window.getComputedStyle(test2); 66 var test2Style = window.getComputedStyle(test2);
67 var test3Style = window.getComputedStyle(test3); 67 var test3Style = window.getComputedStyle(test3);
68 68
69 shouldBe("test1Style.webkitAnimationName", "'anim1'"); 69 shouldBe("test1Style.animationName", "'anim1'");
70 shouldBe("test2Style.webkitAnimationName", "'anim2, anim3'"); 70 shouldBe("test2Style.animationName", "'anim2, anim3'");
71 shouldBe("test3Style.webkitAnimationName", "'anim1, anim2, anim3'"); 71 shouldBe("test3Style.animationName", "'anim1, anim2, anim3'");
72 72
73 shouldBe("test1Style.webkitAnimationDuration", "'10s'"); 73 shouldBe("test1Style.animationDuration", "'10s'");
74 shouldBe("test2Style.webkitAnimationDuration", "'5s, 2.5s'"); 74 shouldBe("test2Style.animationDuration", "'5s, 2.5s'");
75 75
76 shouldBe("test1Style.webkitAnimationFillMode", "'backwards'"); 76 shouldBe("test1Style.animationFillMode", "'backwards'");
77 shouldBe("test2Style.webkitAnimationFillMode", "'forwards, both'"); 77 shouldBe("test2Style.animationFillMode", "'forwards, both'");
78 78
79 shouldBe("test1Style.webkitAnimationIterationCount", "'10'"); 79 shouldBe("test1Style.animationIterationCount", "'10'");
80 shouldBe("test2Style.webkitAnimationIterationCount", "'10, infinite'"); 80 shouldBe("test2Style.animationIterationCount", "'10, infinite'");
81 81
82 shouldBe("test1Style.webkitAnimationTimingFunction", "'linear'"); 82 shouldBe("test1Style.animationTimingFunction", "'linear'");
83 shouldBe("test2Style.webkitAnimationTimingFunction", "'linear, ease-in-out'"); 83 shouldBe("test2Style.animationTimingFunction", "'linear, ease-in-out'");
84 shouldBe("test3Style.webkitAnimationTimingFunction", "'step-start, step-end, ste ps(5, end)'"); 84 shouldBe("test3Style.animationTimingFunction", "'step-start, step-end, steps(5, end)'");
85 85
86 shouldBe("test1Style.webkitAnimationDirection", "'normal'"); 86 shouldBe("test1Style.animationDirection", "'normal'");
87 shouldBe("test2Style.webkitAnimationDirection", "'normal, alternate'"); 87 shouldBe("test2Style.animationDirection", "'normal, alternate'");
88 88
89 debug(""); 89 debug("");
90 90
91 </script> 91 </script>
92 </body> 92 </body>
93 </html> 93 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698