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>