103608 2012-11-29 00:35:41 -0800 [Shadow DOM]: @host @-rule doesn't work 2012-12-10 23:14:19 -0800 1 1 1 Unclassified WebKit DOM 528+ (Nightly build) Unspecified Unspecified RESOLVED WORKSFORME P2 Normal --- 63606 103230 0 sgrekhov webcomponents-bugzilla morrita shinyak tasak webcomponents-bugzilla oldest_to_newest 778778 0 sgrekhov 2012-11-29 00:35:41 -0800 @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 778883 1 tasak 2012-11-29 03:10:15 -0800 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 778893 2 sgrekhov 2012-11-29 03:26:29 -0800 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 784213 3 tasak 2012-12-05 15:51:53 -0800 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 788073 4 tasak 2012-12-10 23:14:19 -0800 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