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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/animations/3d/transform-origin-vs-functions.html

Issue 637763002: Unprefix usage of -webkit-transform in tests (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 6 years, 2 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 | « LayoutTests/animations/3d/state-at-end-event-transform.html ('k') | 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>-webkit-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 -webkit-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 -webkit-animation-duration: 2s;
24 -webkit-animation-iteration-count: infinite; 24 -webkit-animation-iteration-count: infinite;
25 -webkit-animation-timing-function: linear; 25 -webkit-animation-timing-function: linear;
26 -webkit-transform-origin: center center 200px; 26 -webkit-transform-origin: center center 200px;
27 } 27 }
28 @-webkit-keyframes b1 { 28 @-webkit-keyframes b1 {
29 from { -webkit-transform: rotateY(0deg); } 29 from { transform: rotateY(0deg); }
30 5% { -webkit-transform: rotateY(90deg); } 30 5% { transform: rotateY(90deg); }
31 20% { -webkit-transform: rotateY(90deg); } 31 20% { transform: rotateY(90deg); }
32 50% { -webkit-transform: rotateY(180deg); } 32 50% { transform: rotateY(180deg); }
33 75% { -webkit-transform: rotateY(270deg); } 33 75% { transform: rotateY(270deg); }
34 to { -webkit-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 -webkit-animation-duration: 2s;
44 -webkit-animation-iteration-count: infinite; 44 -webkit-animation-iteration-count: infinite;
45 -webkit-animation-timing-function: linear; 45 -webkit-animation-timing-function: linear;
46 } 46 }
47 @-webkit-keyframes b2 { 47 @-webkit-keyframes b2 {
48 from { -webkit-transform: translateZ(200px) rotateY(0deg) translateZ(-20 0px) } 48 from { transform: translateZ(200px) rotateY(0deg) translateZ(-200px) }
49 5% { -webkit-transform: translateZ(200px) rotateY(90deg) translateZ(-20 0px) } 49 5% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
50 20% { -webkit-transform: translateZ(200px) rotateY(90deg) translateZ(-2 00px) } 50 20% { transform: translateZ(200px) rotateY(90deg) translateZ(-200px) }
51 50% { -webkit-transform: translateZ(200px) rotateY(180deg) translateZ(- 200px) } 51 50% { transform: translateZ(200px) rotateY(180deg) translateZ(-200px) }
52 75% { -webkit-transform: translateZ(200px) rotateY(270deg) translateZ(- 200px) } 52 75% { transform: translateZ(200px) rotateY(270deg) translateZ(-200px) }
53 to { -webkit-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">
58 if (window.testRunner) { 58 if (window.testRunner) {
59 testRunner.dumpAsText(); 59 testRunner.dumpAsText();
60 testRunner.waitUntilDone(); 60 testRunner.waitUntilDone();
61 } 61 }
62 62
63 resultEntries = []; 63 resultEntries = [];
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after
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="-webkit-transform:translateZ(-200px); -webkit-transform-styl e: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 | « LayoutTests/animations/3d/state-at-end-event-transform.html ('k') | LayoutTests/animations/3d/transform-perspective.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698