Bug 103608
| Summary: | [Shadow DOM]: @host @-rule doesn't work | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Sergey G. Grekhov <sgrekhov> |
| Component: | DOM | Assignee: | Web Components Team <webcomponents-bugzilla> |
| Status: | RESOLVED WORKSFORME | ||
| Severity: | Normal | CC: | morrita, shinyak, tasak, webcomponents-bugzilla |
| Priority: | P2 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
| Bug Depends on: | |||
| Bug Blocks: | 63606, 103230 | ||
Sergey G. Grekhov
@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
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
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
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
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