Adapt inline SVG sizing behavior to Firefox and Blink
[WebKit-https.git] / LayoutTests / fast / repaint / moving-shadow-on-container.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     svgContainer.setAttribute('width','100%');
52     svgContainer.setAttribute('height','100%');    
53     var shapes = [
54         { pos: [ 100, 100 ], size: 60, hasStroke: false },
55         { pos: [ 250, 100 ], size: 60, hasStroke: true },
56         { pos: [ 400, 100 ], size: 50, hasStroke: true }
57     ];
58     svgContainer.style.WebkitSvgShadow = '5px 5px 5px red';
59     for (var i = 0; i < shapes.length; ++i) {
60         var shape = shapes[i];
61         var node = newSvgElement('path', svgContainer, {
62             d: pathFromStar(shape.size, shape.size / 2, 5),
63             fill: '#999',
64             stroke: 'black',
65             'stroke-width': 10,
66         });
67         if (i == 0)
68             node.id = "first-star";
69         setCenterPosition(node, shape.pos[0], shape.pos[1]);
70         if (shapes[i].hasStroke) {
71             node.setAttribute('stroke-dasharray', 20);
72         }
73         node.addEventListener('mousedown', function (ev) {
74             var e = ev || event;
75             armed = { node: e.target || e.srcElement };
76         });
77         node.addEventListener('mouseup', function () {
78             armed = null;
79         });
80     }
81     window.addEventListener('mousemove', function (ev) {
82         if (armed) {
83             var e = ev || event;
84             setCenterPosition(armed.node, e.clientX, e.clientY);
85         }
86     });
87 });
88
89 //-->
90 </script>
91 </head>
92 <body onload="runRepaintTest();">
93
94 </body>
95 </html>