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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/ManualTests/svg-css-transition-compound.html

Issue 2715113003: CSS manual tests: reduce usage of webkit prefix (Closed)
Patch Set: Created 3 years, 9 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/ManualTests/svg-css-animate-compound.html ('k') | third_party/WebKit/ManualTests/transition-events.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 Transitional//EN" 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd"> 2 "http://www.w3.org/TR/html4/loose.dtd">
3 3
4 <html lang="en"> 4 <html lang="en">
5 <head> 5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 <title>CSS Transition of SVG elements</title> 7 <title>CSS Transition of SVG elements</title>
8 8
9 <style type="text/css" media="screen"> 9 <style type="text/css" media="screen">
10 div { 10 div {
(...skipping 14 matching lines...) Expand all
25 border: 1px solid black; 25 border: 1px solid black;
26 } 26 }
27 27
28 .box { 28 .box {
29 position: absolute; 29 position: absolute;
30 top: 0; 30 top: 0;
31 left: 0; 31 left: 0;
32 height: 60px; 32 height: 60px;
33 width: 60px; 33 width: 60px;
34 border: 1px dotted black; 34 border: 1px dotted black;
35 -webkit-transform-origin: top left; /* to match SVG */ 35 transform-origin: top left; /* to match SVG */
36 } 36 }
37 37
38 .final { 38 .final {
39 border: 1px solid blue; 39 border: 1px solid blue;
40 } 40 }
41 41
42 #target, #ref { 42 #target, #ref {
43 -webkit-transition-property: -webkit-transform; 43 transition-property: transform;
44 -webkit-transition-duration: 1s; 44 transition-duration: 1s;
45 } 45 }
46 </style> 46 </style>
47 47
48 <script type="text/javascript" charset="utf-8"> 48 <script type="text/javascript" charset="utf-8">
49 var flag = true; 49 var flag = true;
50 50
51 function transition() { 51 function transition() {
52 var svgElm = document.getElementById("target"); 52 var svgElm = document.getElementById("target");
53 var divElm = document.getElementById("ref"); 53 var divElm = document.getElementById("ref");
54 54
55 if (flag) { 55 if (flag) {
56 svgElm.style.webkitTransform = "translate(75px, 25px) scale(2) rotate(45de g)"; 56 svgElm.style.transform = "translate(75px, 25px) scale(2) rotate(45deg)";
57 divElm.style.webkitTransform = "translate(75px, 25px) scale(2) rotate(45de g)"; 57 divElm.style.transform = "translate(75px, 25px) scale(2) rotate(45deg)";
58 } 58 }
59 else { 59 else {
60 svgElm.style.webkitTransform = "translate(0px, 0px) scale(1) rotate(0deg)" ; 60 svgElm.style.transform = "translate(0px, 0px) scale(1) rotate(0deg)";
61 divElm.style.webkitTransform = "translate(0px, 0px) scale(1) rotate(0deg)" ; 61 divElm.style.transform = "translate(0px, 0px) scale(1) rotate(0deg)";
62 } 62 }
63 flag = !flag; 63 flag = !flag;
64 } 64 }
65 </script> 65 </script>
66 </head> 66 </head>
67 <body> 67 <body>
68 <h1>CSS Transition of "-webkit-trasform" property for SVG elements</h1> 68 <h1>CSS Transition of "trasform" property for SVG elements</h1>
69 69
70 <p>The element below should transition when button is clicked</p> 70 <p>The element below should transition when button is clicked</p>
71 <p>The SVG transition should be identical with the CSS one</p> 71 <p>The SVG transition should be identical with the CSS one</p>
72 72
73 <input type="button" value="Transition" onclick="transition()" /> 73 <input type="button" value="Transition" onclick="transition()" />
74 74
75 <div class="column"> 75 <div class="column">
76 <h2>SVG compound</h2> 76 <h2>SVG compound</h2>
77 <div class="container"> 77 <div class="container">
78 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 78 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
79 viewBox="0 0 200 200" style="width:200px; height:200px;"> 79 viewBox="0 0 200 200" style="width:200px; height:200px;">
80 <rect id="target" x="0" y="0" width="60" height="60" stroke="blue" fill= "none"> 80 <rect id="target" x="0" y="0" width="60" height="60" stroke="blue" fill= "none">
81 </rect> 81 </rect>
82 </svg> 82 </svg>
83 </div> 83 </div>
84 84
85 <h2>CSS compound</h2> 85 <h2>CSS compound</h2>
86 <div class="container"> 86 <div class="container">
87 <div class="final box" id="ref"> 87 <div class="final box" id="ref">
88 </div> 88 </div>
89 </div> 89 </div>
90 </div> 90 </div>
91 91
92 </body> 92 </body>
93 </html> 93 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/ManualTests/svg-css-animate-compound.html ('k') | third_party/WebKit/ManualTests/transition-events.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698