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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/change-transform-style-during-animation.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
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/change-keyframes.html ('k') | third_party/WebKit/LayoutTests/animations/change-transform-style-during-animation-expected.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style> 4 <style>
5 #container { 5 #container {
6 transform: translateZ(0px); 6 transform: translateZ(0px);
7 -webkit-perspective: 400; 7 perspective: 400;
8 } 8 }
9 9
10 #revealed { 10 #revealed {
11 position: absolute; 11 position: absolute;
12 left: 100px; 12 left: 100px;
13 height: 100px; 13 height: 100px;
14 width: 100px; 14 width: 100px;
15 background-color: green; 15 background-color: green;
16 } 16 }
17 17
18 #animated { 18 #animated {
19 position: absolute; 19 position: absolute;
20 left: 100px; 20 left: 100px;
21 height: 100px; 21 height: 100px;
22 width: 100px; 22 width: 100px;
23 background-color: red; 23 background-color: red;
24 transform: translateZ(10px); 24 transform: translateZ(10px);
25 -webkit-transform-style: preserve-3d; 25 transform-style: preserve-3d;
26 -webkit-animation-duration: 100ms; 26 animation-duration: 100ms;
27 -webkit-animation-fill-mode: both; 27 animation-fill-mode: both;
28 -webkit-animation-timing-function: linear; 28 animation-timing-function: linear;
29 -webkit-animation-iteration-count: 1; 29 animation-iteration-count: 1;
30 } 30 }
31 31
32 @-webkit-keyframes anim { 32 @keyframes anim {
33 from { transform: translateZ(0px) translateX(0px); } 33 from { transform: translateZ(0px) translateX(0px); }
34 to { transform: translateZ(200px) translateX(-200px); } 34 to { transform: translateZ(200px) translateX(-200px); }
35 } 35 }
36 </style> 36 </style>
37 37
38 <script src="resources/animation-test-helpers.js"></script> 38 <script src="resources/animation-test-helpers.js"></script>
39 <script> 39 <script>
40 if (window.testRunner) { 40 if (window.testRunner) {
41 testRunner.waitUntilDone(); 41 testRunner.waitUntilDone();
42 } 42 }
43 43
44 function animationDone() 44 function animationDone()
45 { 45 {
46 var animated = document.getElementById('animated'); 46 var animated = document.getElementById('animated');
47 var result; 47 var result;
48 var expected = "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -200, 0, 200 , 1)"; 48 var expected = "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -200, 0, 200 , 1)";
49 var computed = getPropertyValue("webkitTransform", "animated"); 49 var computed = getPropertyValue("transform", "animated");
50 if (comparePropertyValue(computed, expected, 0.002)) { 50 if (comparePropertyValue(computed, expected, 0.002)) {
51 result = "PASS - Computed final position is correct."; 51 result = "PASS - Computed final position is correct.";
52 } else { 52 } else {
53 result = "FAIL - Computed final position is incorrect. Expected " + exp ected + ", got " + computed; 53 result = "FAIL - Computed final position is incorrect. Expected " + exp ected + ", got " + computed;
54 } 54 }
55 document.getElementById('result').innerHTML = result; 55 document.getElementById('result').innerHTML = result;
56 testRunner.notifyDone(); 56 testRunner.notifyDone();
57 } 57 }
58 58
59 function animationStarted() 59 function animationStarted()
60 { 60 {
61 var animated = document.getElementById('animated'); 61 var animated = document.getElementById('animated');
62 animated.style.webkitTransformStyle = 'flat'; 62 animated.style.transformStyle = 'flat';
63 } 63 }
64 64
65 function startTest() 65 function startTest()
66 { 66 {
67 var animated = document.getElementById('animated'); 67 var animated = document.getElementById('animated');
68 animated.style.webkitAnimationName = "anim"; 68 animated.style.animationName = "anim";
69 animated.addEventListener('webkitAnimationEnd', animationDone); 69 animated.addEventListener('webkitAnimationEnd', animationDone);
70 animated.addEventListener('webkitAnimationStart', animationStarted); 70 animated.addEventListener('webkitAnimationStart', animationStarted);
71 } 71 }
72 </script> 72 </script>
73 </head> 73 </head>
74 <body onload="startTest()"> 74 <body onload="startTest()">
75 <div id="container"> 75 <div id="container">
76 <div id="revealed"></div> 76 <div id="revealed"></div>
77 <div id="animated"></div> 77 <div id="animated"></div>
78 </div> 78 </div>
79 <div id="result"></div> 79 <div id="result"></div>
80 </body> 80 </body>
81 </html> 81 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/change-keyframes.html ('k') | third_party/WebKit/LayoutTests/animations/change-transform-style-during-animation-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698