[Webkit-unassigned] [Bug 103709] New: [Shadow DOM]: reset-style-inheritance flag doesn't work for shadow insertion point

Thu Nov 29 21:51:45 PST 2012

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

           Summary: [Shadow DOM]: reset-style-inheritance flag doesn't
                    work for shadow insertion point
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Unspecified
        OS/Version: Unspecified
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: CSS
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: sgrekhov at unipro.ru

According the Shadow DOM spec (https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#styles) reset-style-inheritance flag should reset all inheritable CSS properties to their initial values at the upper boundary of the tree. This doesn't work in Chrome 23.0.1271.91 m. Example:

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

function test() {
    var SR = window.ShadowRoot || window.WebKitShadowRoot;
    var d = document;

    d.body.innerHTML = 
        '<ul id="shHost">' +
            '<li id="li1" class="shadow">1</li>' +
            '<li id="li2" class="shadow2">2</li>' +
            '<li id="li3" class="shadow">3</li>' +
            '<li id="li4">4</li>' +
            '<li id="li5" class="shadow">5</li>' +
            '<li id="li6" class="shadow2">6</li>' +
        '</ul>';

    var host = d.querySelector('#shHost');

    d.body.setAttribute('style', 'color:red');

    //Shadow root to play with
    var s = new SR(host);

    var div = d.createElement('div');   
    div.innerHTML ='<ul><content select=".shadow"></content></ul>'; 
    s.appendChild(div);

    //Young tree
    var s2 = new SR(host);

    var div2 = d.createElement('div');   
    div2.innerHTML = '<shadow reset-style-inheritance=true></shadow>';
    s2.appendChild(div2);
}
</script>
</head>
<body onload="test()">

</body>
</html>

Run the example above and observe the browser window. Red color style inherited from document body is not reset in spite of reset-style-inheritance=true attribute. If to modify example above to set resetStyleInheritance property this won't work anyway. In other words:

    var div2 = d.createElement('div');   
    div2.innerHTML = '<shadow id="shTree"></shadow>';
    s2.appendChild(div2);

    s2.querySelector('#shTree').resetStyleInheritance = true;

The modified script doesn't work anyway

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