:host-context should support functional notation only.

Blink supported :host-context without a functional notation as an equivalent
to :host. That is not allowed according to the CSS Scoping spec.

BUG=356582

Review URL: https://codereview.chromium.org/212513002

git-svn-id: svn://svn.chromium.org/blink/trunk@170093 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/fast/dom/shadow/hostcontext-pseudo-class-expected.txt

@@ -41,6 +41,8 @@ PASS backgroundColorOf('host') is "rgb(255, 0, 0)"
 PASS backgroundColorOf('host/target') is "rgb(0, 128, 0)"
 PASS backgroundColorOf('host/target') is "rgb(0, 128, 0)"
 PASS backgroundColorOf('host/target') is "rgb(0, 128, 0)"
+:host-context without functional notation should not match any shadow hosts.
+PASS backgroundColorOf('host') is "rgba(0, 0, 0, 0)"
 PASS successfullyParsed is true
 
 TEST COMPLETE

third_party/WebKit/LayoutTests/fast/dom/shadow/hostcontext-pseudo-class.html

@@ -4,7 +4,7 @@
 <script src="../../../resources/js-test.js"></script>
 <script src="resources/shadow-dom.js"></script>
 <style>
-:host-context {
+:host-context(*) {
    background-color: red;
 }
 </style>
@@ -49,7 +49,7 @@ sandbox.appendChild(
     createDOM('div', {'id': 'host'},
         createShadowRoot(
             createDOM('style', {},
-                document.createTextNode('*:host-context { background-color: green; }')),
+                document.createTextNode('*:host-context(*) { background-color: red; }')),
             createDOM('div', {},
                 document.createTextNode('Hello')))));
 
@@ -63,7 +63,7 @@ sandbox.appendChild(
     createDOM('div', {'id': 'host'},
         createShadowRoot(
             createDOM('style', {},
-                document.createTextNode('div:host-context { background-color: green; }')),
+                document.createTextNode('div:host-context(*) { background-color: red; }')),
             createDOM('div', {},
                 document.createTextNode('Hello')))));
 
@@ -77,7 +77,7 @@ sandbox.appendChild(
     createDOM('div', {'id': 'host', 'class': 'host'},
         createShadowRoot(
             createDOM('style', {},
-                document.createTextNode('.host:host-context { background-color: green; }')),
+                document.createTextNode('.host:host-context(*) { background-color: red; }')),
             createDOM('div', {},
                 document.createTextNode('Hello')))));
 
@@ -91,7 +91,7 @@ sandbox.appendChild(
     createDOM('div', {'id': 'host'},
         createShadowRoot(
             createDOM('style', {},
-                document.createTextNode('#host:host-context { background-color: green; }')),
+                document.createTextNode('#host:host-context(*) { background-color: red; }')),
             createDOM('div', {},
                 document.createTextNode('Hello')))));
 
@@ -105,7 +105,7 @@ sandbox.appendChild(
     createDOM('div', {'id': 'host', 'foo': 'bar'},
         createShadowRoot(
             createDOM('style', {},
-                document.createTextNode('[foo=bar]:host-context { background-color: green; }')),
+                document.createTextNode('[foo=bar]:host-context(*) { background-color: red; }')),
             createDOM('div', {},
                 document.createTextNode('Hello')))));
 
@@ -164,7 +164,7 @@ sandbox.appendChild(
             createDOM('div', {'id': 'host2'},
                 createShadowRoot(
                     createDOM('style', {},
-                        document.createTextNode(':host-context { background-color: green; }')),
+                        document.createTextNode(':host-context(*) { background-color: green; }')),
                     createDOM('div', {},
                         document.createTextNode('Hello')))))));
 
@@ -263,13 +263,13 @@ sandbox.appendChild(
     createDOM('div', {'id': 'host'},
         createShadowRoot(
             createDOM('style', {},
-                document.createTextNode(':host-context(div:host-context, div#sandbox) { background-color: green; }')),
+                document.createTextNode(':host-context(div:host-context(*), div#sandbox) { background-color: green; }')),
             createDOM('style', {},
                 document.createTextNode(':host-context(body.mytheme) { background-color: red; }')),
             createDOM('div', {},
                 document.createTextNode('Hello')))));
 
-// :host-context(div:host-context, div#sandbox) wins, because div#sandbox > body.mytheme.
+// :host-context(div:host-context(*), div#sandbox) wins, because div#sandbox > body.mytheme.
 backgroundColorShouldBe('host', 'rgb(0, 128, 0)');
 
 cleanUp();
@@ -278,13 +278,13 @@ sandbox.appendChild(
     createDOM('div', {'id': 'host'},
         createShadowRoot(
             createDOM('style', {},
-                document.createTextNode(':host-context(div:host-context, div#nomatch) { background-color: green; }')),
+                document.createTextNode(':host-context(div:host-context(*), div#nomatch) { background-color: green; }')),
             createDOM('style', {},
                 document.createTextNode(':host-context(body.mytheme) { background-color: red; }')),
             createDOM('div', {},
                 document.createTextNode('Hello')))));
 
-// :host-context(body.mytheme) wins, because div:host-context < body.mytheme.
+// :host-context(body.mytheme) wins, because div:host-context(*) < body.mytheme.
 backgroundColorShouldBe('host', 'rgb(255, 0, 0)');
 
 cleanUp();
@@ -294,7 +294,7 @@ sandbox.appendChild(
     createDOM('div', {'id': 'host'},
         createShadowRoot(
             createDOM('style', {},
-                document.createTextNode(':host-context(div:host-context, div#host:host-context) > div { background-color: green; }')),
+                document.createTextNode(':host-context(div:host-context(*), div#host:host-context(*)) > div { background-color: green; }')),
             createDOM('style', {},
                 document.createTextNode(':host-context(body.mytheme) > div { background-color: red; }')),
             createDOM('div', {'id': 'target'},
@@ -308,7 +308,7 @@ sandbox.appendChild(
     createDOM('div', {'id': 'host', 'class': 'host'},
         createShadowRoot(
             createDOM('style', {},
-                document.createTextNode(':host-context(div:host-context, div#host.host:host-context) > div { background-color: green; }')),
+                document.createTextNode(':host-context(div:host-context(*), div#host.host:host-context(*)) > div { background-color: green; }')),
             createDOM('style', {},
                 document.createTextNode(':host-context(body) > div#target { background-color: red; }')),
             createDOM('div', {'id': 'target'},
@@ -322,7 +322,7 @@ sandbox.appendChild(
     createDOM('div', {'id': 'host', 'class': 'host'},
         createShadowRoot(
             createDOM('style', {},
-                document.createTextNode(':host-context(div:host-context(div:host-context(div:host-context(div:host-context)))) > div { background-color: green; }')),
+                document.createTextNode(':host-context(div:host-context(div:host-context(div:host-context(div:host-context(*))))) > div { background-color: green; }')),
             createDOM('style', {},
                 document.createTextNode(':host-context(div) > div { background-color: red; }')),
             createDOM('div', {'id': 'target'},
@@ -332,5 +332,19 @@ backgroundColorShouldBe('host/target', 'rgb(0, 128, 0)');
 
 cleanUp();
 
+debug(':host-context without functional notation should not match any shadow hosts.');
+
+sandbox.appendChild(
+    createDOM('div', {'id': 'host'},
+        createShadowRoot(
+            createDOM('style', {},
+                document.createTextNode(':host-context { background-color: red; }')),
+            createDOM('div', {},
+                document.createTextNode('Hello')))));
+
+backgroundColorShouldBe('host', 'rgba(0, 0, 0, 0)');
+
+cleanUp();
+
 </script>
 </body>

third_party/WebKit/Source/core/css/CSSSelector.cpp

@@ -354,7 +354,6 @@ const static NameToPseudoStruct pseudoTypeMap[] = {
 {"unresolved",                    CSSSelector::PseudoUnresolved},
 {"host",                          CSSSelector::PseudoHost},
 {"host(",                         CSSSelector::PseudoHost},
-{"host-context",                  CSSSelector::PseudoHostContext},
 {"host-context(",                 CSSSelector::PseudoHostContext},
 {"content",                       CSSSelector::PseudoContent},
 };