[Webkit-unassigned] [Bug 70934] New: Moving an SVG element (in the DOM) during a mousedown prevents the following click event

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=70934

           Summary: Moving an SVG element (in the DOM) during a mousedown
                    prevents the following click event
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Unspecified
        OS/Version: Unspecified
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: SVG
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: webkit.org at masklinn.net
                CC: zimmermann at kde.org


Created an attachment (id=112515)
 --> (https://bugs.webkit.org/attachment.cgi?id=112515&action=review)
Test case

This may happen for any element, I did not test it, but it happened on SVG elements for me.

Problem test case:
* Click on the partially hidden blue ellipsis on top
* Expected: print a message
✔ Observed: print a message

* Click on the partially hidden blue ellipsis in the middle group
* Expected: print a message
✔ Observed: print a message

* Click on the partially hidden blue ellipsis in the bottom group
* Expected: the blue ellipsis moves on top of the red one
* Expected: print a message
✔ Observed: the blue ellipsis moves on top of the red one
✘ Observed: *no message is printed*

All ellipsis have the exact same click handler, which prints a message (with their class name) below the SVG frame.

In the third case, the ellipsis is moved around in the DOM in order to be stacked on top of the red ellipsis (you can click on the partially hidden red ellipsis of the third group after that to do it again): as far as I know, SVG draws elements in strict document order, so the only way to have an element on top of an other is to put them in the correct order in the DOM.

Since the click event is the same on all `ellipse` elements, one would expect to see the same behavior everywhere. And indeed if you click twice on the blue ellipsis (once to put it on top of the red one and once more) you will see the message print correctly.

Context:
* Creating graphs using the Dracula library http://www.graphdracula.net/
* Dracula defers to Raphaël for the SVG backend: http://raphaeljs.com/
* Dracula handles drag&dropping nodes (by default, not sure it can be disabled) which can be seen on the front-page example, this is handled via mouse* events
* In the latest Dracula version (this does not seem to happen in the one on the front page), the `mousedown` event starting the drag makes a call to Raphael's Element#toFront: https://github.com/strathausen/dracula/blob/master/js/dracula_graph.js#L166
* Element#toFront moves the element to ensure it is the last one in its parent: https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L1049

As a result, when trying to hook a `click` event to a node (which Raphael supports: http://raphaeljs.com/reference.html#Element.click)… it did not work at all in Webkit browsers (and was quite annoying to track down).

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.