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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/transforms/svg-vs-css.xhtml

Issue 637763002: Unprefix usage of -webkit-transform in tests (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Remove duplicate transform 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
« LayoutTests/transforms/3d/hit-testing/overlapping-layers-hit-test.html ('K') | « LayoutTests/transforms/3d/point-mapping/3d-point-mapping-preserve-3d.html ('k') | LayoutTests/transforms/transform-focus-ring.html » ('j') | LayoutTests/transitions/3d/interrupted-transition.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or g/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or g/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 2
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
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>Matrix testing</title> 6 <title>Matrix testing</title>
7 <style type="text/css" media="screen"> 7 <style type="text/css" media="screen">
8 div { 8 div {
9 -webkit-box-sizing: border-box; 9 -webkit-box-sizing: border-box;
10 } 10 }
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
43 function doTest() 43 function doTest()
44 { 44 {
45 doCSS(); 45 doCSS();
46 doSVG(); 46 doSVG();
47 } 47 }
48 48
49 function doCSS() 49 function doCSS()
50 { 50 {
51 var matrixDiv = document.getElementById('matrixed'); 51 var matrixDiv = document.getElementById('matrixed');
52 52
53 var firstMatrix = new WebKitCSSMatrix(document.getElementById('box1').styl e.webkitTransform); 53 var firstMatrix = new WebKitCSSMatrix(document.getElementById('box1').styl e.transform);
54 var secondMatrix = new WebKitCSSMatrix(document.getElementById('box2').sty le.webkitTransform); 54 var secondMatrix = new WebKitCSSMatrix(document.getElementById('box2').sty le.transform);
55 var thirdMatrix = new WebKitCSSMatrix(document.getElementById('box3').styl e.webkitTransform); 55 var thirdMatrix = new WebKitCSSMatrix(document.getElementById('box3').styl e.transform);
56 56
57 var finalMatrix = firstMatrix.multiply(secondMatrix); 57 var finalMatrix = firstMatrix.multiply(secondMatrix);
58 finalMatrix = finalMatrix.multiply(thirdMatrix); 58 finalMatrix = finalMatrix.multiply(thirdMatrix);
59 59
60 // "Flipped" behavior 60 // "Flipped" behavior
61 // var finalMatrix = thirdMatrix.multiply(secondMatrix); 61 // var finalMatrix = thirdMatrix.multiply(secondMatrix);
62 // finalMatrix = finalMatrix.multiply(firstMatrix); 62 // finalMatrix = finalMatrix.multiply(firstMatrix);
63 63
64 matrixDiv.style.webkitTransform = finalMatrix; 64 matrixDiv.style.transform = finalMatrix;
65 } 65 }
66 66
67 function doSVG() 67 function doSVG()
68 { 68 {
69 var matrixDiv = document.getElementById('matrix-svg'); 69 var matrixDiv = document.getElementById('matrix-svg');
70 70
71 var svgroot = document.getElementsByTagName('svg')[0]; 71 var svgroot = document.getElementsByTagName('svg')[0];
72 72
73 var firstMatrix = svgroot.createSVGMatrix(); 73 var firstMatrix = svgroot.createSVGMatrix();
74 firstMatrix = firstMatrix.translate(75, 25); 74 firstMatrix = firstMatrix.translate(75, 25);
(...skipping 27 matching lines...) Expand all
102 <g id="group2" x="0" y="0" width="60" height="60" transform="scale(2 )" > 102 <g id="group2" x="0" y="0" width="60" height="60" transform="scale(2 )" >
103 <rect x="0" y="0" width="60" height="60" stroke="black" stroke-das harray="1 1" stroke-width="1px" fill="none" /> 103 <rect x="0" y="0" width="60" height="60" stroke="black" stroke-das harray="1 1" stroke-width="1px" fill="none" />
104 <rect id="group3" x="0" y="0" width="60" height="60" stroke="blue" fill="none" transform="rotate(45)" /> 104 <rect id="group3" x="0" y="0" width="60" height="60" stroke="blue" fill="none" transform="rotate(45)" />
105 </g> 105 </g>
106 </g> 106 </g>
107 </svg> 107 </svg>
108 </div> 108 </div>
109 109
110 <h2>CSS nested</h2> 110 <h2>CSS nested</h2>
111 <div class="container"> 111 <div class="container">
112 <div id="box1" class="box" style="-webkit-transform: translate(75px, 25px) "> 112 <div id="box1" class="box" style="transform: translate(75px, 25px)">
113 <div id="box2" class="box" style="-webkit-transform: scale(2)"> 113 <div id="box2" class="box" style="transform: scale(2)">
114 <div id="box3" class="final box" style="-webkit-transform: rotate(45de g)"> 114 <div id="box3" class="final box" style="transform: rotate(45deg)">
115 </div> 115 </div>
116 </div> 116 </div>
117 </div> 117 </div>
118 </div> 118 </div>
119 </div> 119 </div>
120 120
121 <div class="column"> 121 <div class="column">
122 <h2>SVG compound</h2> 122 <h2>SVG compound</h2>
123 <div class="container"> 123 <div class="container">
124 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 124 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
125 viewBox="0 0 200 200" style="width:200px; height:200px;"> 125 viewBox="0 0 200 200" style="width:200px; height:200px;">
126 <rect x="0" y="0" width="60" height="60" stroke="blue" fill="none" tra nsform="translate(75, 25) scale(2) rotate(45)"> 126 <rect x="0" y="0" width="60" height="60" stroke="blue" fill="none" tra nsform="translate(75, 25) scale(2) rotate(45)">
127 </rect> 127 </rect>
128 </svg> 128 </svg>
129 </div> 129 </div>
130 130
131 <h2>CSS compound</h2> 131 <h2>CSS compound</h2>
132 <div class="container"> 132 <div class="container">
133 <div class="final box" style="-webkit-transform: translate(75px, 25px) sca le(2) rotate(45deg)"> 133 <div class="final box" style="transform: translate(75px, 25px) scale(2) ro tate(45deg)">
134 </div> 134 </div>
135 </div> 135 </div>
136 </div> 136 </div>
137 137
138 <div class="column"> 138 <div class="column">
139 <h2>SVG Matrix</h2> 139 <h2>SVG Matrix</h2>
140 <div class="container"> 140 <div class="container">
141 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 141 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
142 viewBox="0 0 200 200" style="width:200px; height:200px;"> 142 viewBox="0 0 200 200" style="width:200px; height:200px;">
143 <rect id="matrix-svg" x="0" y="0" width="60" height="60" stroke="blue" fill="none"> 143 <rect id="matrix-svg" x="0" y="0" width="60" height="60" stroke="blue" fill="none">
144 </rect> 144 </rect>
145 </svg> 145 </svg>
146 </div> 146 </div>
147 147
148 <h2>CSSMatrix</h2> 148 <h2>CSSMatrix</h2>
149 <div class="container"> 149 <div class="container">
150 <div id="matrixed" class="final box"> 150 <div id="matrixed" class="final box">
151 </div> 151 </div>
152 </div> 152 </div>
153 </div> 153 </div>
154 </body> 154 </body>
155 </html> 155 </html>
OLDNEW
« LayoutTests/transforms/3d/hit-testing/overlapping-layers-hit-test.html ('K') | « LayoutTests/transforms/3d/point-mapping/3d-point-mapping-preserve-3d.html ('k') | LayoutTests/transforms/transform-focus-ring.html » ('j') | LayoutTests/transitions/3d/interrupted-transition.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698