[Webkit-unassigned] [Bug 102788] New: [Shadow DOM]: 'Click' event stops on shadow boundary

Tue Nov 20 03:08:39 PST 2012

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

           Summary: [Shadow DOM]: 'Click' event stops on shadow boundary
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Unspecified
        OS/Version: Unspecified
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: HTML DOM
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: sgrekhov at unipro.ru

Found in Chrome 23.0.1271.64 m

Run the example of event retargeting taken from https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#event-retargeting-example. The code is the following:

<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">' +
        '<input type="checkbox" id="outside-control">' +
        '<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 #volume-slider-thumb relative target is #volume-slider-thumb
    roots.volumeShadowRoot.querySelector('#volume-slider-thumb').addEventListener('click',          
        function (event) {
            alert('Point 1: relative target is ' + event.target.getAttribute('id'));
    }, false);    

    //For #volume-slider-thumb relative target is #volume-slider-thumb
    roots.volumeShadowRoot.addEventListener('click', 
        function (event) {
            alert('Point 2: relative target is ' + event.target.getAttribute('id')); 
    }, false);    

    //For #volume-slider-thumb relative target is #volume-slider-thumb
    roots.playerShadowRoot.querySelector('#volume-slider').addEventListener('click',            
         function (event) {
              alert('Point 3: relative target is ' + event.target.getAttribute('id'));
    }, false);

    var event = d.createEvent('HTMLEvents');
    event.initEvent ("click", true, false);
    roots.volumeShadowRoot.querySelector('#volume-slider-thumb').dispatchEvent(event);
}
</script>
</head>
<body onload="test()">

</body>
</html>

At the points 1 and 2 this example shows correct related target. On point 3 event listener is not invoked that means that event was stopped on the shadow boundary but should not.

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