third_party/WebKit/LayoutTests/svg/hittest/update-ellipse.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body onload="onPageLoad()">
   4 Regression test for <a href="http://crbug.com/436214">http://crbug.com/436214</a>. This tests updating SVG &lt;circle&gt; and &lt;ellipse&gt; elements having various stroke styles. If this test passes, you will see "PASS" below.
   5 <p id="result">WAITING - click within each of the elliptical areas for results</p>
   6 <svg id="svg" width="800" height="500" version="1.1">
   7     <rect fill="none" stroke="black" x="0.5" y="0.5" width="799" height="499"/>
   8
   9
  10
  11     <circle pointer-events="none" stroke-width="10px" stroke="#888" stroke-opacity="0.2" fill="none" cx="380" cy="100" r="20"/>
  12     <ellipse pointer-events="none" stroke-width="20px" stroke="#00a0f0" stroke-dasharray="30, 10" stroke-opacity="0.2" fill="none" cx="130" cy="110" rx="100" ry="50"/>
  13     <ellipse pointer-events="none" stroke-width="30px" stroke="#9000f0" stroke-linejoin="bevel" stroke-opacity="0.2" fill="none" cx="150" cy="400" rx="70" ry="50"/>
  14     <ellipse pointer-events="none" stroke-width="20px" stroke="#0000f0" stroke-opacity="0.2" fill="none" cx="400" cy="370" rx="40" ry="70"/>
  15
  16     <circle id="ell0" cursor="move" stroke-width="10px" stroke="#888" stroke-linecap="square" fill="none" cx="380" cy="100" r="20"/>
  17     <ellipse id="ell1" cursor="move" stroke-width="20px" stroke="#00a0f0" stroke-dasharray="30, 10" fill="none" cx="130" cy="110" rx="100" ry="50"/>
  18     <ellipse id="ell2" cursor="move" stroke-width="30px" stroke="#9000f0" stroke-linejoin="bevel" fill="none" cx="150" cy="400" rx="70" ry="50"/>
  19     <ellipse id="ell3" cursor="move" stroke-width="20px" stroke="#0000f0" stroke-linecap="round" fill="none" cx="400" cy="370" rx="40" ry="70"/>
  20
  21
  22
  23     <ellipse pointer-events="none" stroke-width="20px" stroke="#0c0" stroke-opacity="0.2" fill="none" cx="625" cy="100" rx="80" ry="30"/>
  24     <ellipse pointer-events="none" stroke-width="20px" stroke="#090" stroke-opacity="0.2" fill="none" cx="625" cy="200" rx="80" ry="30"/>
  25     <ellipse pointer-events="none" stroke-width="20px" stroke="#060" stroke-opacity="0.2" fill="none" cx="625" cy="300" rx="80" ry="30"/>
  26     <ellipse pointer-events="none" stroke-width="20px" stroke="#030" stroke-opacity="0.2" fill="none" cx="625" cy="400" rx="80" ry="30"/>
  27
  28     <ellipse id="ell10" cursor="move" stroke-width="20px" stroke="#0c0" fill="none" cx="625" cy="100" rx="80" ry="30"/>
  29     <ellipse id="ell11" cursor="move" stroke-width="20px" stroke="#090" fill="none" cx="625" cy="200" rx="80" ry="30"/>
  30     <ellipse id="ell12" cursor="move" stroke-width="20px" stroke="#060" fill="none" cx="625" cy="300" rx="80" ry="30"/>
  31     <ellipse id="ell13" cursor="move" stroke-width="20px" stroke="#030" fill="none" cx="625" cy="400" rx="80" ry="30"/>
  32 </svg>
  33 <script type="text/javascript">
  34 if (window.testRunner) {
  35     testRunner.dumpAsText();
  36     testRunner.waitUntilDone();
  37 }
  38
  39 function withinEllipse(x, y, cx, cy, rx, ry) {
  40     var t1 = (x - cx) / rx,
  41         t2 = (y - cy) / ry;
  42     return t1 * t1 + t2 * t2 <= 1;
  43 }
  44
  45 var result = document.getElementById("result"),
  46     svg = document.getElementById("svg"),
  47     ell0 = document.getElementById("ell0"),
  48     ell1 = document.getElementById("ell1"),
  49     ell2 = document.getElementById("ell2"),
  50     ell3 = document.getElementById("ell3"),
  51     ell10 = document.getElementById("ell10"),
  52     ell11 = document.getElementById("ell11"),
  53     ell12 = document.getElementById("ell12"),
  54     ell13 = document.getElementById("ell13");
  55 function onPageLoad() {
  56     var activeAreas = [{
  57         ellipse: ell0,
  58         click: function () {
  59             this.ellipse.setAttribute("r", "50");
  60         }
  61     }, {
  62         ellipse: ell1,
  63         click: function () {
  64             this.ellipse.setAttribute("cx", "170");
  65         }
  66     }, {
  67         ellipse: ell2,
  68         click: function () {
  69             this.ellipse.setAttribute("cy", "350");
  70         }
  71     }, {
  72         ellipse: ell3,
  73         click: function () {
  74             this.ellipse.setAttribute("cx", "390");
  75             this.ellipse.setAttribute("cy", "340");
  76         }
  77     }, {
  78         ellipse: ell10,
  79         click: function () {
  80             this.ellipse.setAttribute("stroke-dasharray", "30, 10");
  81         }
  82     }, {
  83         ellipse: ell11,
  84         click: function () {
  85             this.ellipse.setAttribute("cx", "655");
  86             this.ellipse.setAttribute("stroke-miterlimit", "0");
  87         }
  88     }, {
  89         ellipse: ell12,
  90         click: function () {
  91             this.ellipse.setAttribute("stroke-linejoin", "bevel");
  92             this.ellipse.setAttribute("cx", "655"); // intentionally swapped to test whether setting 'cx' after changing the stroke makes a difference
  93         }
  94     }, {
  95         ellipse: ell13,
  96         click: function () {
  97             this.ellipse.setAttribute("cx", "655");
  98             this.ellipse.setAttribute("stroke-linecap", "square");
  99         }
 100     }];
 101
 102     for (var i = 0; i < activeAreas.length; ++i) {
 103         var aa = activeAreas[i];
 104         aa.cx = +aa.ellipse.getAttribute("cx");
 105         aa.cy = +aa.ellipse.getAttribute("cy");
 106         if (aa.ellipse.localName == "circle") {
 107             aa.rx = aa.ry = +aa.ellipse.getAttribute("r");
 108         } else {
 109             aa.rx = +aa.ellipse.getAttribute("rx");
 110             aa.ry = +aa.ellipse.getAttribute("ry");
 111         }
 112     }
 113
 114     var bcr = svg.getBoundingClientRect(),
 115         x0 = bcr.left << 0,
 116         y0 = bcr.top << 0;
 117
 118     requestAnimationFrame(function () {
 119         document.addEventListener("mousedown", function onMouseDown(event) {
 120             var x = event.clientX - x0,
 121                 y = event.clientY - y0;
 122             for (var i = 0; i < activeAreas.length; ++i) {
 123                 var aa = activeAreas[i];
 124                 if (withinEllipse(x, y, aa.cx, aa.cy, aa.rx, aa.ry)) {
 125                     aa.click();
 126                     activeAreas.splice(i, 1);
 127                     break;
 128                 }
 129             }
 130
 131             if (activeAreas.length == 0) {
 132                 document.removeEventListener("mousedown", onMouseDown, false);
 133
 134                 result.textContent = "Running tests...";
 135
 136                 var tests = [
 137                     { x: 383, y: 120, expectedElem: svg },
 138                     { x: 429, y: 103, expectedElem: ell0 },
 139
 140                     { x: 225, y: 116, expectedElem: svg },
 141                     { x: 263, y: 87, expectedElem: ell1 },
 142
 143                     { x: 119, y: 355, expectedElem: svg },
 144                     { x: 150, y: 455, expectedElem: svg },
 145                     { x: 223, y: 392, expectedElem: svg },
 146                     { x: 201, y: 309, expectedElem: ell2 },
 147
 148                     { x: 364, y: 345, expectedElem: svg },
 149                     { x: 402, y: 269, expectedElem: ell3 },
 150
 151                     { x: 549, y: 88, expectedElem: svg },
 152                     { x: 662, y: 127, expectedElem: ell10 },
 153
 154                     { x: 705, y: 202, expectedElem: svg },
 155                     { x: 727, y: 184, expectedElem: ell11 },
 156
 157                     { x: 705, y: 302, expectedElem: svg },
 158                     { x: 727, y: 284, expectedElem: ell12 },
 159
 160                     { x: 705, y: 402, expectedElem: svg },
 161                     { x: 727, y: 384, expectedElem: ell13 }
 162                 ];
 163
 164                 for (var i = 0; i < tests.length; ++i) {
 165                     var test = tests[i],
 166                         elem = document.elementFromPoint(x0 + test.x, y0 + test.y),
 167                         success;
 168                     if (elem !== test.expectedElem) {
 169                         success = false;
 170                         result.textContent = "FAIL - unexpected element at (" + test.x + ", " + test.y + ")";
 171                     } else {
 172                         success = true;
 173                     }
 174
 175                     // Draw a dot and a label at the test point (helps with identification).
 176                     var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
 177                     dot.setAttribute("pointer-events", "none");
 178                     dot.setAttribute("cx", test.x);
 179                     dot.setAttribute("cy", test.y);
 180                     dot.setAttribute("r", "2");
 181                     if (!success) dot.setAttribute("fill", "red");
 182                     svg.appendChild(dot);
 183                     var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
 184                     label.setAttribute("pointer-events", "none");
 185                     label.setAttribute("x", test.x + 4);
 186                     label.setAttribute("y", test.y);
 187                     label.textContent = "(" + test.x + ", " + test.y + ")";
 188                     if (!success) label.setAttribute("fill", "red");
 189                     svg.appendChild(label);
 190                 }
 191
 192                 if (result.textContent == "Running tests...")
 193                     result.textContent = "PASS";
 194
 195                 if (window.testRunner)
 196                     testRunner.notifyDone();
 197             }
 198         }, false);
 199
 200         if (window.eventSender) {
 201             // The bug would only occur if the shape attributes were modified
 202             // within a mouse event handler when the mouse cursor was within
 203             // the shape.
 204             activeAreas.slice(0).map(function (aa, i, activeAreas) {
 205                 eventSender.mouseMoveTo((x0 + aa.cx) << 0, (y0 + aa.cy) << 0);
 206                 eventSender.mouseDown();
 207                 eventSender.mouseUp();
 208             });
 209         }
 210     });
 211 }
 212 </script>
 213 </body>
 214 </html>