RESOLVED WORKSFORME 103608
[Shadow DOM]: @host @-rule doesn't work 
https://bugs.webkit.org/show_bug.cgi?id=103608
Summary [Shadow DOM]: @host @-rule doesn't work
Sergey G. Grekhov
Reported 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
Attachments
Add attachment proposed patch, testcase, etc.
Takashi Sakamoto
Comment 1 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
Sergey G. Grekhov
Comment 2 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
Takashi Sakamoto
Comment 3 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
Takashi Sakamoto
Comment 4 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
Note You need to log in before you can comment on or make changes to this bug.