Bug 102791
| Summary: | [Shadow DOM]: Error in retargeting algorithm | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Sergey G. Grekhov <sgrekhov> |
| Component: | DOM | Assignee: | Web Components Team <webcomponents-bugzilla> |
| Status: | RESOLVED INVALID | ||
| Severity: | Normal | CC: | dominicc, hayato, morrita, shinyak, webcomponents-bugzilla |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| Bug Depends on: | |||
| Bug Blocks: | 103230 | ||
Sergey G. Grekhov
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
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Hayato Ito
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.