Bug 102791 - [Shadow DOM]: Error in retargeting algorithm
Summary: [Shadow DOM]: Error in retargeting algorithm
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: DOM (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Web Components Team
URL:
Keywords:
Depends on:
Blocks: 103230
  Show dependency tree / graph
 
Reported: 2012-11-20 04:06 PST by Sergey G. Grekhov
Modified: 2013-01-10 02:32 PST (History)
5 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Sergey G. Grekhov 2012-11-20 04:06:08 PST 
According to the https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#event-retargeting-example for #player related target should be #player. But it isn't so in Chrome 23.0.1271.64 m. Run the following example:

<html>
<head>
<script type="text/javascript">

//Example taken from http://www.w3.org/TR/shadow-dom/#event-retargeting-example
function createTestMediaPlayer(d) {
	var SR = window.ShadowRoot || window.WebKitShadowRoot;
	
    d.body.innerHTML = '' +
    '<div id="player">' +        
        '<div id="player-shadow-root">' +
        '</div>' +
    '</div>';

    var playerShadowRoot = new SR(d.querySelector('#player-shadow-root'));
    playerShadowRoot.innerHTML = '' + 
        '<div id="controls">' +
            '<button class="play-button">PLAY</button>' +
            '<input type="range" id="timeline">' +
                '<div id="timeline-shadow-root">' +
                '</div>' +
            '</input>' +
            '<div class="volume-slider-container" id="volume-slider-container">' +
                '<input type="range" class="volume-slider" id="volume-slider">' +
                    '<div id="volume-shadow-root">' +                       
                    '</div>' +
                '</input>' +
            '</div>' +
        '</div>';
    
    var timeLineShadowRoot = new SR(playerShadowRoot.querySelector('#timeline-shadow-root'));
    timeLineShadowRoot.innerHTML =  '<div class="slider-thumb" id="timeline-slider-thumb"></div>';
    
    var volumeShadowRoot = new SR(playerShadowRoot.querySelector('#volume-shadow-root'));
    volumeShadowRoot.innerHTML = '<div class="slider-thumb" id="volume-slider-thumb"></div>';
    
    return {
        'playerShadowRoot': playerShadowRoot,
        'timeLineShadowRoot': timeLineShadowRoot,
        'volumeShadowRoot': volumeShadowRoot
        };
}

function test() {
    var d = document;
        
	roots = createTestMediaPlayer(d);
	
    //For #player relative target is #player
    d.querySelector('#player').addEventListener('click',            
       function (event) {
    	alert('Relative target is ' + event.target.getAttribute('id'));
    }, false);
	
	var event = d.createEvent('HTMLEvents');
	event.initEvent ("click", true, false);
	roots.playerShadowRoot.querySelector('#volume-slider').dispatchEvent(event);
}
</script>
</head>
<body onload="test()">

</body>
</html>


This example shows relative target as #player-shadow-root but according to the https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#event-retargeting-example relative target should be #player
Comment 1 Hayato Ito 2013-01-10 02:32:08 PST 
The example in #1 is wrong.

#player-shadow-root should be a ShadowRoot, but #player-shadow-root in the example seems to be a shadow host.