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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/transitions/svg-layout-transition.html

Issue 980233002: [svg2] Make 'cx', 'cy' and 'r' presentation attributes (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: rebase Created 5 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 | « LayoutTests/svg/css/parse-length-expected.txt ('k') | LayoutTests/transitions/svg-layout-transition-expected.txt » ('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> 1 <!DOCTYPE>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style> 4 <style>
5 .init { 5 .init {
6 transition-duration: 1s; 6 transition-duration: 1s;
7 transition-timing-function: linear; 7 transition-timing-function: linear;
8 } 8 }
9 9
10 #x { 10 .x {
11 transition-property: x; 11 transition-property: x;
12 } 12 }
13 #x.final { 13 .x.final {
14 x: 200px; 14 x: 200px;
15 } 15 }
16 16
17 #y { 17 .y {
18 transition-property: y; 18 transition-property: y;
19 } 19 }
20 #y.final { 20 .y.final {
21 y: 200px; 21 y: 200px;
22 } 22 }
23 23
24 .r {
25 transition-property: r;
26 }
27 .r.final {
28 r: 200px;
29 }
30
24 .rx { 31 .rx {
25 transition-property: rx; 32 transition-property: rx;
26 } 33 }
27 .rx.final { 34 .rx.final {
28 rx: 200px; 35 rx: 200px;
29 } 36 }
30 37
31 .ry { 38 .ry {
32 transition-property: ry; 39 transition-property: ry;
33 } 40 }
34 .ry.final { 41 .ry.final {
35 ry: 200px; 42 ry: 200px;
36 } 43 }
44
45 .cx {
46 transition-property: cx;
47 }
48 .cx.final {
49 cx: 200px;
50 }
51
52 .cy {
53 transition-property: cy;
54 }
55 .cy.final {
56 cy: 200px;
57 }
37 </style> 58 </style>
38 <script src="../animations/resources/animation-test-helpers.js"></script> 59 <script src="../animations/resources/animation-test-helpers.js"></script>
39 <script type="text/javascript"> 60 <script type="text/javascript">
40 61
41 const expectedValues = [ 62 const expectedValues = [
42 // [time, element-id, property, expected-value, tolerance] 63 // [time, element-id, property, expected-value, tolerance]
43 [0.5, 'x', 'x', 150, 20], 64 [0.5, 'x', 'x', 150, 20],
44 [0.5, 'y', 'y', 150, 20], 65 [0.5, 'y', 'y', 150, 20],
66 [0.5, 'sx', 'x', 150, 20],
67 [0.5, 'sy', 'y', 150, 20],
68 [0.5, 'mx', 'x', 150, 20],
69 [0.5, 'my', 'y', 150, 20],
70 [0.5, 'ix', 'x', 150, 20],
71 [0.5, 'iy', 'y', 150, 20],
72 [0.5, 'fx', 'x', 150, 20],
73 [0.5, 'fy', 'y', 150, 20],
45 [0.5, 'rx', 'rx', 150, 20], 74 [0.5, 'rx', 'rx', 150, 20],
46 [0.5, 'ry', 'ry', 150, 20], 75 [0.5, 'ry', 'ry', 150, 20],
47 [0.5, 'erx', 'rx', 150, 20], 76 [0.5, 'erx', 'rx', 150, 20],
48 [0.5, 'ery', 'ry', 150, 20], 77 [0.5, 'ery', 'ry', 150, 20],
78 [0.5, 'cr', 'r', 150, 20],
79 [0.5, 'cx', 'cx', 150, 20],
80 [0.5, 'cy', 'cy', 150, 20],
49 ]; 81 ];
50 function setupTest() 82 function setupTest()
51 { 83 {
52 for (var i = 0; i < expectedValues.length; i++) 84 for (var i = 0; i < expectedValues.length; i++)
53 document.getElementById(expectedValues[i][1]).classList.add("final"); 85 document.getElementById(expectedValues[i][1]).classList.add("final");
54 } 86 }
55 87
56 runTransitionTest(expectedValues, setupTest); 88 runTransitionTest(expectedValues, setupTest);
57 </script> 89 </script>
58 </head> 90 </head>
59 <body> 91 <body>
60 <svg> 92 <svg>
61 <rect x="100" y="100" width="100" height="100" class="init" id="x"/> 93 <rect x="100" y="100" width="100" height="100" class="init x" id="x"/>
62 <rect x="100" y="100" width="100" height="100" class="init" id="y"/> 94 <rect x="100" y="100" width="100" height="100" class="init y" id="y"/>
95 <svg id="sx" class="init x" x="100"/>
96 <svg id="sy" class="init y" y="100"/>
97 <mask id="mx" class="init x" x="100"/>
98 <mask id="my" class="init y" y="100"/>
99 <image id="ix" class="init x" x="100" y="100" width="100" height="100"/>
100 <image id="iy" class="init y" x="100" y="100" width="100" height="100"/>
101 <foreignObject id="fx" class="init x" x="100" y="100" width="100" height="10 0"/>
102 <foreignObject id="fy" class="init y" x="100" y="100" width="100" height="10 0"/>
63 <rect x="100" y="100" width="100" height="100" rx="100" ry="100" class="init rx" id="rx"/> 103 <rect x="100" y="100" width="100" height="100" rx="100" ry="100" class="init rx" id="rx"/>
64 <rect x="100" y="100" width="100" height="100" rx="100" ry="100" class="init ry" id="ry"/> 104 <rect x="100" y="100" width="100" height="100" rx="100" ry="100" class="init ry" id="ry"/>
65 <ellipse class="init rx" rx="100" ry="100" id="erx"/> 105 <ellipse class="init rx" rx="100" ry="100" id="erx"/>
66 <ellipse class="init ry" rx="100" ry="100" id="ery"/> 106 <ellipse class="init ry" rx="100" ry="100" id="ery"/>
107 <circle class="init r" cx="100" cy="100" r="100" id="cr"/>
108 <circle class="init cx" cx="100" cy="100" r="100" id="cx"/>
109 <circle class="init cy" cx="100" cy="100" r="100" id="cy"/>
67 </svg> 110 </svg>
68 111
69 <div id="result"> 112 <div id="result">
70 </div> 113 </div>
71 </body> 114 </body>
72 </html> 115 </html>
OLDNEW
« no previous file with comments | « LayoutTests/svg/css/parse-length-expected.txt ('k') | LayoutTests/transitions/svg-layout-transition-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698