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