Bug 102069 - [Shadow DOM]: Event with both target and relatedTarget in the same tree is not stopped at Shadow boundary
Summary: [Shadow DOM]: Event with both target and relatedTarget in the same tree is no...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on: 102681
Blocks: 103230
  Show dependency treegraph
 
Reported: 2012-11-13 04:44 PST by Sergey G. Grekhov
Modified: 2012-12-06 02:57 PST (History)
4 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Sergey G. Grekhov 2012-11-13 04:44:35 PST
According the Shadow Dom specification "In cases where both relatedTarget and target are part of the same shadow tree, the conforming UAs must stop events at the shadow boundary to avoid the appearance of spurious mouseover and mouseout events firing from the same node.". But in fact such events are not stopped at the Shadow boundary. 

Run the following example:

<html>
<head>
<script type="text/javascript">
function test() {
    var d = document;
    var SR = window.ShadowRoot || window.WebKitShadowRoot;    
        
    //Shadow root to play with
    var s = new SR(d.querySelector('#host'));
    
    var div1 = d.createElement('div');
    div1.setAttribute('style', 'height:40px; width:100%');
    div1.setAttribute('id', 'div1');
    s.appendChild(div1);
    
    var div2 = d.createElement('div');
    div2.setAttribute('style', 'height:40px; width:100%');
    div2.setAttribute('id', 'div2');
    s.appendChild(div2);
    
    s.addEventListener('mouseover', function(event) {
    	if (event.relatedTarget.getAttribute('id') != 'div1') {
    		alert('Wrong relatedTarget');
    	}
    }, false);
    
    d.body.addEventListener('mouseover', function(event) {
        alert('Event must be stopped at Shadow boundary!!!!');     
    }, false);
    
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("mouseover", true, false, window,
      0, 10, 10, 10, 10, false, false, false, false, 0, div1);
    
    div2.dispatchEvent(evt);
}
</script>
</head>
<body onload="test()">

<div id="host">
</div>

</body>
</html>

Event shouldn't buble up to document.body event listener but it bubles.
Comment 1 Hayato Ito 2012-11-15 04:01:20 PST
Thank you for the reporting. Let me take a look tomorrow.
Comment 2 Hayato Ito 2012-12-06 02:57:36 PST
http://trac.webkit.org/changeset/136818 fixed this. Closing.