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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/3d/transform-origin-vs-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:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/3d/state-at-end-event-transform.html ('k') | third_party/WebKit/LayoutTests/animations/3d/transform-perspective.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 PUBLIC "-//W3C//DTD HTML 4.01//EN" 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd"> 2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html> 3 <html>
4 <head> 4 <head>
5 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8">
6 <title>-webkit-transform-origin vs. Transform Functions</title> 6 <title>transform-origin vs. Transform Functions</title>
7 <style type="text/css" media="screen"> 7 <style type="text/css" media="screen">
8 #a { 8 #a {
9 top: 0px; 9 top: 0px;
10 left: 0px; 10 left: 0px;
11 position: absolute; 11 position: absolute;
12 -webkit-perspective: 800; 12 perspective: 800;
13 width: 800px; 13 width: 800px;
14 height: 600px; 14 height: 600px;
15 } 15 }
16 #b1 { 16 #b1 {
17 top: 80px; 17 top: 80px;
18 left: 300px; 18 left: 300px;
19 width: 200px; 19 width: 200px;
20 height: 200px; 20 height: 200px;
21 position: absolute; 21 position: absolute;
22 background-color: #282; 22 background-color: #282;
23 -webkit-animation-duration: 2s; 23 animation-duration: 2s;
24 -webkit-animation-iteration-count: infinite; 24 animation-iteration-count: infinite;
25 -webkit-animation-timing-function: linear; 25 animation-timing-function: linear;
26 -webkit-transform-origin: center center 200px; 26 transform-origin: center center 200px;
27 } 27 }
28 @-webkit-keyframes b1 { 28 @keyframes b1 {
29 from { transform: rotateY(0deg); } 29 from { transform: rotateY(0deg); }
30 5% { transform: rotateY(90deg); } 30 5% { transform: rotateY(90deg); }
31 20% { transform: rotateY(90deg); } 31 20% { transform: rotateY(90deg); }
32 50% { transform: rotateY(180deg); } 32 50% { transform: rotateY(180deg); }
33 75% { transform: rotateY(270deg); } 33 75% { transform: rotateY(270deg); }
34 to { transform: rotateY(360deg); } 34 to { transform: rotateY(360deg); }
35 } 35 }
36 #b2 { 36 #b2 {
37 top: 320px; 37 top: 320px;
38 left: 300px; 38 left: 300px;
39 width: 200px; 39 width: 200px;
40 height: 200px; 40 height: 200px;
41 position: absolute; 41 position: absolute;
42 background-color: #282; 42 background-color: #282;
43 -webkit-animation-duration: 2s; 43 animation-duration: 2s;
44 -webkit-animation-iteration-count: infinite; 44 animation-iteration-count: infinite;
45 -webkit-animation-timing-function: linear; 45 animation-timing-function: linear;
46 } 46 }
47 @-webkit-keyframes b2 { 47 @keyframes b2 {
48 from { transform: translateZ(200px) rotateY(0deg) translateZ(-200px) } 48 from { transform: translateZ(200px) rotateY(0deg) translateZ(-200px) }
49 5% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) } 49 5% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
50 20% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) } 50 20% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
51 50% { transform: translateZ(200px) rotateY(180deg) translateZ(-200px) } 51 50% { transform: translateZ(200px) rotateY(180deg) translateZ(-200px) }
52 75% { transform: translateZ(200px) rotateY(270deg) translateZ(-200px) } 52 75% { transform: translateZ(200px) rotateY(270deg) translateZ(-200px) }
53 to { transform: translateZ(200px) rotateY(360deg) translateZ(-200px) } 53 to { transform: translateZ(200px) rotateY(360deg) translateZ(-200px) }
54 } 54 }
55 </style> 55 </style>
56 56
57 <script type="text/javascript" charset="utf-8"> 57 <script type="text/javascript" charset="utf-8">
(...skipping 14 matching lines...) Expand all
72 { 72 {
73 var diff = Math.abs(actual - desired); 73 var diff = Math.abs(actual - desired);
74 return diff <= tolerance; 74 return diff <= tolerance;
75 } 75 }
76 76
77 var numSnapshots = 0; 77 var numSnapshots = 0;
78 78
79 function snapshot(id) 79 function snapshot(id)
80 { 80 {
81 var e = document.getElementById(id); 81 var e = document.getElementById(id);
82 var t = window.getComputedStyle(e).webkitTransform; 82 var t = window.getComputedStyle(e).transform;
83 var a = t.split("("); 83 var a = t.split("(");
84 var array = a[1].split(","); 84 var array = a[1].split(",");
85 var pass = true; 85 var pass = true;
86 for (i = 0; i < 16; ++i) { 86 for (i = 0; i < 16; ++i) {
87 var actual = parseFloat(array[i]); 87 var actual = parseFloat(array[i]);
88 var expect = expected[id][i]; 88 var expect = expected[id][i];
89 if (!isEqual(actual, expect)) { 89 if (!isEqual(actual, expect)) {
90 resultEntries.push("FAIL(element '"+id+"' matrix["+i+"]' was:" +actual+", expected:"+expect+")<br>"); 90 resultEntries.push("FAIL(element '"+id+"' matrix["+i+"]' was:" +actual+", expected:"+expect+")<br>");
91 pass = false; 91 pass = false;
92 } 92 }
(...skipping 11 matching lines...) Expand all
104 } 104 }
105 } 105 }
106 106
107 function snapshotOnTimeout(id) { 107 function snapshotOnTimeout(id) {
108 setTimeout("snapshot('" + id + "')", 250); 108 setTimeout("snapshot('" + id + "')", 250);
109 } 109 }
110 110
111 function startAnimation(id) 111 function startAnimation(id)
112 { 112 {
113 var element = document.getElementById(id); 113 var element = document.getElementById(id);
114 element.addEventListener('webkitAnimationStart', function() { 114 element.addEventListener('animationstart', function() {
115 // delay to give hardware animations a chance to start 115 // delay to give hardware animations a chance to start
116 window.setTimeout("snapshotOnTimeout('" + id + "')", 0); 116 window.setTimeout("snapshotOnTimeout('" + id + "')", 0);
117 }, false); 117 }, false);
118 element.style.webkitAnimationName = id; 118 element.style.animationName = id;
119 } 119 }
120 120
121 function start() 121 function start()
122 { 122 {
123 startAnimation('b1'); 123 startAnimation('b1');
124 startAnimation('b2'); 124 startAnimation('b2');
125 } 125 }
126 126
127 </script> 127 </script>
128 </head> 128 </head>
129 <body onload="start()"> 129 <body onload="start()">
130 <div id="a"> 130 <div id="a">
131 <div id="b1"> </div> 131 <div id="b1"> </div>
132 <div style="transform:translateZ(-200px); transform-style:preserve-3d;"> 132 <div style="transform:translateZ(-200px); transform-style:preserve-3d;">
133 <div id="b2"> </div> 133 <div id="b2"> </div>
134 </div> 134 </div>
135 </div> 135 </div>
136 </body> 136 </body>
137 <div id="result"> </div> 137 <div id="result"> </div>
138 </html> 138 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/3d/state-at-end-event-transform.html ('k') | third_party/WebKit/LayoutTests/animations/3d/transform-perspective.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698