[CSS] Make ::part(foo)::placeholder work.
This copies the ::slotted::placeholder approach and adds a
StyleResolver::MatchPseudoPartRulesForUAHost.
This also adds a reftest due to the fact that getComputedStyle does
not work with "::placeholder" - https://crbug.com/922431. It leaves the
old test in place because other browsers may support it and the hopefully
blink will in the future.
Bug: 922431
Change-Id: Iec4d9b279cf1f82dbdcbcc69dcac873678943882
Reviewed-on: https://chromium-review.googlesource.com/c/1415066
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Fergal Daly <fergal@chromium.org>
Cr-Commit-Position: refs/heads/master@{#623885}
diff --git a/css/css-shadow-parts/interaction-with-placeholder-ref.html b/css/css-shadow-parts/interaction-with-placeholder-ref.html
new file mode 100644
index 0000000..11943c2
--- /dev/null
+++ b/css/css-shadow-parts/interaction-with-placeholder-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Shadow Parts - Interaction with placeholder</title>
+ <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+ <link href="http://www.google.com/" rel="author" title="Google">
+ <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+ </head>
+ <body>
+ <style>
+ #placeholder-i::placeholder { color: green; }
+ </style>
+ <div>
+ The following text should be green:
+ <input id="placeholder-i" part="placeholder-p" placeholder="this text"></input>
+ </div>
+ </body>
+</html>
diff --git a/css/css-shadow-parts/interaction-with-placeholder.html b/css/css-shadow-parts/interaction-with-placeholder.html
new file mode 100644
index 0000000..a064789
--- /dev/null
+++ b/css/css-shadow-parts/interaction-with-placeholder.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>CSS Shadow Parts - Interaction with placeholder</title>
+ <!-- This reftest exists because getComputedStyle for
+ ::placeholder is not implemented everywhere --!>
+ <meta href="mailto:fergal@chromium.org" rel="author" title="Fergal Daly">
+ <link href="http://www.google.com/" rel="author" title="Google">
+ <link href="https://drafts.csswg.org/css-shadow-parts/" rel="help">
+ <link href="interaction-with-placeholder-ref.html" rel="match">
+ <script src="support/shadow-helper.js"></script>
+ </head>
+ <body>
+ <style>
+ #c-e::part(placeholder-p)::placeholder { color: green; }
+ </style>
+ <script>installCustomElement("custom-element", "custom-element-template");</script>
+ <template id="custom-element-template">
+ <style>
+ #placeholder-i::placeholder { color: red; }
+ </style>
+ <div>
+ The following text should be green:
+ <input id="placeholder-i" part="placeholder-p" placeholder="this text"></input>
+ </div>
+ </template>
+ <custom-element id="c-e"></custom-element>
+ </body>
+</html>
