third_party/WebKit/LayoutTests/svg/custom/pointer-events-path.svg

   1 <?xml version="1.0"?>
   2 <svg xmlns="http://www.w3.org/2000/svg" onload="fillTestContent()">
   3   <style type="text/css">
   4     rect {
   5       stroke-width: 6px;
   6     }
   7   </style>
   8   <script type="text/javascript">
   9   <![CDATA[
  10     var visibleValues = [ 'visible', 'hidden' ];
  11     var fillValues = ['none', 'orange' ];
  12     var strokeValues = ['none', 'blue' ];
  13
  14     var pointerEventsValues = ['auto', 'visiblePainted', 'visibleFill', 'visibleStroke', 'visible', 'painted', 'fill', 'stroke', 'all', 'none'];
  15
  16     var leftEdge = 100;
  17     var topEdge = 30;
  18
  19     var rectSpacing = 57;
  20
  21     var svgNS = "http://www.w3.org/2000/svg";
  22
  23     function clickHit(event, identifierString) {
  24       // This is my cheap hack to see if we hit the stroke.
  25       if ((event.clientX - parseInt(event.target.getAttribute('x'))) == 0) {
  26         var strokeText = document.getElementById('stroke-text' + identifierString);
  27         strokeText.textContent = 'HIT';
  28       }
  29       var fillText = document.getElementById('fill-text' + identifierString);
  30       fillText.textContent = 'HIT';
  31     }
  32
  33     function fillTestContent() {
  34       var xOffset = leftEdge;
  35       var yOffset = topEdge;
  36
  37       var testContent = document.getElementById("test-content");
  38
  39       for (var pi = 0; pi < pointerEventsValues.length; pi++) {
  40         var eventLabel = document.createElementNS(svgNS, 'text');
  41         eventLabel.setAttribute('x', 0);
  42         eventLabel.setAttribute('y', yOffset + 30);
  43         eventLabel.textContent = pointerEventsValues[pi];
  44         testContent.appendChild(eventLabel);
  45
  46         for (var vi = 0; vi < visibleValues.length; vi++) {
  47           for (var fi = 0; fi < fillValues.length; fi++) {
  48             for (var si = 0; si < strokeValues.length; si++) {
  49
  50               var identString = "_" + pi + "_" + vi + "_" + fi + "_" + si;
  51
  52               var rect = document.createElementNS(svgNS, 'rect');
  53               rect.setAttribute('x', xOffset);
  54               rect.setAttribute('y', yOffset);
  55               rect.setAttribute('width', 50);
  56               rect.setAttribute('height', 50);
  57               rect.setAttribute('visibility', visibleValues[vi]);
  58               rect.setAttribute('fill', fillValues[fi]);
  59               rect.setAttribute('stroke', strokeValues[si]);
  60               rect.setAttribute('pointer-events', pointerEventsValues[pi]);
  61               rect.setAttribute('onclick', 'clickHit(evt, "' + identString + '")');
  62
  63               testContent.appendChild(rect);
  64
  65               var fillText = document.createElementNS(svgNS, 'text');
  66               fillText.setAttribute('x', xOffset + 5);
  67               fillText.setAttribute('y', yOffset + 20);
  68               fillText.textContent = "miss";
  69               fillText.setAttribute('id', 'fill-text' + identString);
  70               fillText.setAttribute('pointer-events', 'none');
  71               testContent.appendChild(fillText);
  72
  73               var stokeText = document.createElementNS(svgNS, 'text');
  74               stokeText.setAttribute('x', xOffset + 5);
  75               stokeText.setAttribute('y', yOffset + 40);
  76               stokeText.textContent = "miss";
  77               stokeText.setAttribute('id', 'stroke-text' + identString);
  78               stokeText.setAttribute('pointer-events', 'none');
  79               testContent.appendChild(stokeText);
  80
  81               if (window.eventSender) {
  82                 // Stroke click
  83                 eventSender.mouseMoveTo(xOffset, yOffset);
  84                 eventSender.mouseDown();
  85                 eventSender.mouseUp();
  86
  87                 // Fill click
  88                 eventSender.mouseMoveTo(xOffset + 25, yOffset + 25);
  89                 eventSender.mouseDown();
  90                 eventSender.mouseUp();
  91               }
  92               xOffset += rectSpacing;
  93             }
  94           }
  95         }
  96         xOffset = leftEdge;
  97         yOffset += rectSpacing;
  98       }
  99       getSelection().removeAllRanges();
 100     }
 101   ]]>
 102   </script>
 103
 104   <text x="610" y="18">Example:</text>
 105
 106   <text x="605" y="40">Hit Fill:</text>
 107   <text x="605" y="60">Hit Stroke:</text>
 108
 109   <text x="110" y="20">Visibility: visible</text>
 110   <text x="340" y="20">Visibility: hidden</text>
 111
 112   <g id="test-content">
 113     <rect x="680" y="20" width="50" height="50" fill="orange" />
 114     <text x="685" y="40">HIT</text>
 115     <text x="685" y="60">miss</text>
 116   </g>
 117 </svg>