From 25e7e168cc9b0360c47480874eaa7b10c89100c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= <emilio@crisal.io>
Date: Mon, 29 Oct 2018 22:53:54 +0000
Subject: [PATCH] Support ::before / ::after on ::slotted pseudos.

See https://github.com/w3c/csswg-drafts/issues/3150 for the issue that would
expand this to all pseudos.

Differential Revision: https://phabricator.services.mozilla.com/D9994

bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1502617
gecko-commit: b7ed6370bc7d11c486ca86f74ba7e4bc00b471af
gecko-integration-branch: mozilla-inbound
gecko-reviewers: heycam
---
 css/css-scoping/slotted-with-pseudo-element-ref.html | 1 +
 css/css-scoping/slotted-with-pseudo-element.html     | 9 +++++++++
 2 files changed, 10 insertions(+)

diff --git a/css/css-scoping/slotted-with-pseudo-element-ref.html b/css/css-scoping/slotted-with-pseudo-element-ref.html
index 63677cf4220eed..d452d489a4aba9 100644
--- a/css/css-scoping/slotted-with-pseudo-element-ref.html
+++ b/css/css-scoping/slotted-with-pseudo-element-ref.html
@@ -5,3 +5,4 @@
 <div>PASS</div>
 <div>PASS</div>
 <div style="color:green">PASS</div>
+<div style="color:green">PASS</div>
diff --git a/css/css-scoping/slotted-with-pseudo-element.html b/css/css-scoping/slotted-with-pseudo-element.html
index 08e6dcc018fa96..e1a91952d70cc1 100644
--- a/css/css-scoping/slotted-with-pseudo-element.html
+++ b/css/css-scoping/slotted-with-pseudo-element.html
@@ -7,6 +7,7 @@
 <div id="host1"><span></span></div>
 <div id="host2"><span></span></div>
 <div id="host3"><span></span></div>
+<div id="host4"><span></span></div>
 <style>
   #host3 > span::before { content: "PASS" }
 </style>
@@ -19,4 +20,12 @@
   attachShadowWithSlottedStyle(host1, "::slotted(span)::before { content: 'PASS' }");
   attachShadowWithSlottedStyle(host2, "::slotted(span)::after { content: 'PASS' }");
   attachShadowWithSlottedStyle(host3, "::slotted(span)::before { content: 'FAIL'; color: green }");
+  attachShadowWithSlottedStyle(host4, `
+    ::slotted(span)::before { content: 'PASS'; color: red }
+    ::slotted(.foo)::before { color: green }
+  `);
+  onload = function() {
+    host4.offsetTop;
+    host4.firstElementChild.classList.add("foo");
+  }
 </script>