third_party/WebKit/LayoutTests/svg/custom/use-event-retargeting.html

   1 <!doctype html>
   2 <head>
   3         <style>
   4         * { margin: 0; padding: 0; }
   5
   6         svg { width: 200px; height: 100px; }
   7         a div { width: 200px; height: 100px; background-color: yellow; }
   8         </style>
   9 </head>
  10 <body>
  11         <a href="#" class="icon-link">
  12         <svg>
  13                 <defs>
  14                         <rect id="blue-rectangle" width="200" height="100" style="fill:#00f;" />
  15                 </defs>
  16                 <use xlink:href="#blue-rectangle"></use></svg>
  17
  18         <div></div>
  19         </a>
  20
  21         <div class="log"></div>
  22
  23         <script>
  24                 var expected = null;
  25
  26                 if (window.testRunner)
  27                         testRunner.dumpAsText();
  28
  29                 function clickAt(x,y,expectedElm)
  30                 {
  31                         expected = expectedElm;
  32                         if (window.eventSender) {
  33                                 eventSender.mouseMoveTo(x, y);
  34                                 eventSender.mouseDown();
  35                                 eventSender.mouseUp();
  36                         }
  37                         expected = null;
  38                 }
  39
  40                 document.querySelector("a").addEventListener("click", function(event) {
  41                         var result = "";
  42                         if (event.target == expected)
  43                                 result = "PASS - " + event.target + " was clicked.";
  44                         else
  45                                 result = "FAIL - expected " + expected + " but got " + event.target + ".";
  46                         document.querySelector('.log').innerHTML += result + '<br />';
  47                         event.preventDefault();
  48                 }, false);
  49
  50                 clickAt(50,50,document.querySelector("use"));
  51                 clickAt(50,130,document.querySelector("a div"));
  52         </script>
  53 </body>