Bug 103608 - [Shadow DOM]: @host @-rule doesn't work
Summary: [Shadow DOM]: @host @-rule doesn't work
Status: RESOLVED WORKSFORME
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: 63606 103230
  Show dependency tree / graph
 
Reported: 2012-11-29 00:35 PST by Sergey G. Grekhov
Modified: 2012-12-10 23:14 PST (History)
4 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-29 00:35:41 PST 
@host @-rule described in https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#host-at-rule doesn't work. Example is below:

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

function test() {
	var SR = window.ShadowRoot || window.WebKitShadowRoot;
    var d = document;
        
    var host = d.createElement('div');
    d.body.appendChild(host);

    //Older tree
    var s1 = new SR(host);
    var div1 = d.createElement('div');
    div1.innerHTML = '<span id="shd1">This is an old shadow tree</span>'; 
    s1.appendChild(div1);
    
    //Younger tree
    var s2 = new SR(host);
    var div1 = d.createElement('div');
    div1.innerHTML = '<span id="shd2">This is a young shadow tree</span>' + 
        '<shadow><span id="shd3">This is the shadow tree fallback content</span></shadow>'; 
    s2.appendChild(div1);
    
    var style = d.createElement('style');
    style.innerHTML = '' + 
        '<style>' +
            '@host {' +
                'display:none;' +
            '}' +
        '</style>'; 
    s2.appendChild(style);    
}
</script>
</head>
<body onload="test()">

</body>
</html>


Both old and young trees are rendered but according the Shadow DOM specification one of them (not sure which one, see https://www.w3.org/Bugs/Public/show_bug.cgi?id=20150) shouldn't be shown
Comment 1 Takashi Sakamoto 2012-11-29 03:10:15 PST 
Would you try the test after updating style.innerHTML line?
i.e.
   style.innerHTML = '' + 
            '@host {' +
                'div { display:none; }' +
            '}';


Because the spec, http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#host-at-rule, says:

host
    : HOST_SYM S* '{' S* ruleset* '}' S*
    ;

and ruleset is:

ruleset
  : selector [ ',' S* selector ]*
    '{' S* declaration? [ ';' S* declaration? ]* '}' S*
  ;

So @host needs "selector" and "{ declaration ..}".

Best regards,
Takashi Sakamoto
Comment 2 Sergey G. Grekhov 2012-11-29 03:26:29 PST 
Thank you for quick response. Updated example doesn't work anyway. See below

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

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

    var host = d.createElement('div');
    d.body.appendChild(host);

    //Older tree
    var s1 = new SR(host);
    var div1 = d.createElement('div');
    div1.innerHTML = '<span id="shd1">This is an old shadow tree</span>'; 
    s1.appendChild(div1);

    //Younger tree
    var s2 = new SR(host);
    var div1 = d.createElement('div');
    div1.innerHTML = '<span id="shd2">This is a young shadow tree</span>' + 
        '<shadow><span id="shd3">This is the shadow tree fallback content</span></shadow>'; 
    s2.appendChild(div1);

    var style = d.createElement('style');
    style.innerHTML = '' + 
            '@host {' +
                'div{display:none;}' +
            '}'; 
    s2.appendChild(style);    
}
</script>
</head>
<body onload="test()">

</body>
</html>

After running of this test both of the trees are shown
Comment 3 Takashi Sakamoto 2012-12-05 15:51:53 PST 
I ran DumpRenderTree with the test. I saw the following result:

Content-Type: text/plain
layer at (0,0) size 800x600
  RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
  RenderBlock {HTML} at (0,0) size 800x600
    RenderBody {BODY} at (8,8) size 784x584
#EOF
#EOF

I also tested by using chrome canary, i.e. 
Google Chrome	25.0.1349.0 (Official Build 171160) canary
OS	Mac OS X 
WebKit	537.21 (@136547)
JavaScript	V8 3.15.8

The test is http://jsfiddle.net/hWCZ7/5/.

I couldn't see any shadow trees.

Best regards,
Takashi Sakamoto
Comment 4 Takashi Sakamoto 2012-12-10 23:14:19 PST 
I couldn't reproduce this issue. So I will change the status into RESOLVED WORKSFORME.
If I find any @host @-rules bug, I wil file a new bug or reopen this bug.

Best regards,
Takashi Sakamoto