Skip to content
Permalink
Browse files
The :host() function pseudo-class should only accept a single compoun…
…d-selector

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

Reviewed by Darin Adler.

Align WebKit's CSS parsing behavior of :host(~) with Blink and Gecko.

* Source/WebCore/css/parser/CSSSelectorParser.cpp:
(WebCore::CSSSelectorParser::consumePseudo):

* LayoutTests/fast/shadow-dom/shadow-host-compound-selector-expected.html: Added.
* LayoutTests/fast/shadow-dom/shadow-host-compound-selector.html: Added.
* LayoutTests/imported/w3c/web-platform-tests/css/css-scoping/host-parsing-expected.txt: Rebaselined.

Canonical link: https://commits.webkit.org/252110@main
  • Loading branch information
rniwa committed Jul 4, 2022
1 parent 816faa4 commit e91f2366aef4abce47b58f4a4a82bf52c6fb3399
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 5 deletions.
@@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<body>
<p>Test passes if you see a single 100px by 100px green box below.</p>
<div style="width: 100px; height: 100px; background: green;"></div>
</body>
</html>
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<body>
<p>Test passes if you see a single 100px by 100px green box below.</p>
<template id=template>
<style>
:host(#host1) ::slotted(*) { width: 100px; height: 50px; background-color: green; }
:host(#host2, #host3) ::slotted(*) { width: 100px; height: 25px; background-color: red; }
</style>
<slot></slot>
</template>
<style>
#host2, #host3 { width: 100px; height: 25px; background-color: green; }
</style>
<div id=host1><div></div></div>
<div id=host2><div></div></div>
<div id=host3><div></div></div>
<div id=result1></div>
<script>
host1.attachShadow({mode: 'closed'}).append(template.content.cloneNode(true));
host2.attachShadow({mode: 'closed'}).append(template.content.cloneNode(true));
host3.attachShadow({mode: 'closed'}).append(template.content.cloneNode(true));
</script>
</body>
</html>
@@ -3,7 +3,7 @@ PASS ":host" should be a valid selector
PASS ":host(.a)" should be a valid selector
PASS ":host(div.a)" should be a valid selector
PASS ":host()" should be an invalid selector
FAIL ":host(.a, .b)" should be an invalid selector assert_throws_dom: ":host(.a, .b)" should throw in querySelector function "() => document.querySelector(selector)" did not throw
PASS ":host(.a, .b)" should be an invalid selector
PASS ":host(.a + .b)" should be an invalid selector
PASS ":host(.a + .b, #c > #d)" should be an invalid selector

@@ -742,11 +742,11 @@ std::unique_ptr<CSSParserSelector> CSSSelectorParser::consumePseudo(CSSParserTok
return selector;
}
case CSSSelector::PseudoClassHost: {
auto selectorList = makeUnique<CSSSelectorList>();
*selectorList = consumeCompoundSelectorList(block);
if (selectorList->isEmpty() || !block.atEnd())
auto innerSelector = consumeCompoundSelector(block);
block.consumeWhitespace();
if (!innerSelector || !block.atEnd())
return nullptr;
selector->setSelectorList(WTFMove(selectorList));
selector->adoptSelectorVector(Vector<std::unique_ptr<CSSParserSelector>>::from(WTFMove(innerSelector)));
return selector;
}
case CSSSelector::PseudoClassHas: {

0 comments on commit e91f236

Please sign in to comment.