77c563e067abd24434a41e082e13fb58bd0d75f3
[WebKit-https.git] / LayoutTests / fast / repaint / moving-shadow-on-path.html
1 <html>
2 <head>
3 <script src="resources/repaint.js"></script>
4 <script language="javascript">
5 <!--
6
7 SVG_NS = 'http://www.w3.org/2000/svg';
8
9 function repaintTest() {
10     var star = document.getElementById("first-star");
11     setCenterPosition(star, 0, 0);
12 }
13
14 function pathFromStar (radius, innerRadius, sides) {
15     var path = [];
16     for (var i = 0; i < sides * 2; ++i) {
17         var theta = Math.PI * i / sides + (Math.PI / 2);
18         var r = (i % 2) ? radius : innerRadius;
19         var x = r * Math.cos(theta);
20         var y = r * Math.sin(theta);
21         path.push((i ? 'L' : 'M'), x, y);
22     }
23     path.push('Z');
24     return path.join(' ');
25 }
26
27 function newSvgElement (tagName, parentNode, attrs) {
28     var node = document.createElementNS(SVG_NS, tagName);
29     if (attrs) {
30         for (var k in attrs) {
31             node.setAttribute(k, attrs[k]);
32         }
33     }
34     if (parentNode) {
35         parentNode.appendChild(node);
36     }
37     return node;
38 }
39
40 function setCenterPosition (node, x, y) {
41     node.setAttribute('transform', 'translate($1, $2)'
42         .replace('$1', x)
43         .replace('$2', y));
44 }
45
46 var armed = null;
47
48 window.addEventListener('load', function () {
49
50     var svgContainer = newSvgElement('svg', document.body);
51     var shapes = [
52         { pos: [ 100, 100 ], size: 60, hasStroke: false },
53         { pos: [ 250, 100 ], size: 60, hasStroke: true },
54         { pos: [ 400, 100 ], size: 50, hasStroke: true }
55     ];
56     for (var i = 0; i < shapes.length; ++i) {
57         var shape = shapes[i];
58         var node = newSvgElement('path', svgContainer, {
59             d: pathFromStar(shape.size, shape.size / 2, 5),
60             fill: '#999',
61             stroke: 'black',
62             'stroke-width': 10,
63         });
64         node.style.WebkitSvgShadow = '5px 5px 5px red';
65         if (i == 0)
66             node.id = "first-star";
67         setCenterPosition(node, shape.pos[0], shape.pos[1]);
68         if (shapes[i].hasStroke) {
69             node.setAttribute('stroke-dasharray', 20);
70         }
71         node.addEventListener('mousedown', function (ev) {
72             var e = ev || event;
73             armed = { node: e.target || e.srcElement };
74         });
75         node.addEventListener('mouseup', function () {
76             armed = null;
77         });
78     }
79     window.addEventListener('mousemove', function (ev) {
80         if (armed) {
81             var e = ev || event;
82             setCenterPosition(armed.node, e.clientX, e.clientY);
83         }
84     });
85 });
86
87 //-->
88 </script>
89 </head>
90 <body onload="runRepaintTest();">
91
92 </body>
93 </html>