Make ::slotted() never match <slot> elements.

According to the css-scoping spec, ::slotted() matches flattened slotables. Slot elements which are assigned to other slots are not part of the flattened slotables. The test currently fails because slots are not included in the flat tree. Bug: 660265 Change-Id: Ifbcb03d3212db59d762d173a221382ed79ccbd0e
web-platform-tests · Jan 29, 2018 · 4d3c7bc · 4d3c7bc
1 parent e213f4c
commit 4d3c7bc
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/css/css-scoping/slotted-slot.html b/css/css-scoping/slotted-slot.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>CSS Test: ::slotted() not matching slot elements</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#slotted-pseudo">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id="host" style="color:green">This text should be green.</div>
+<script>
+  test(() => {
+    let root = host.attachShadow({mode:"open"});
+    root.innerHTML = '<div><slot id="slot"></slot><div>';
+    let innerHost = root.firstChild;
+    let innerRoot = innerHost.attachShadow({mode:"open"});
+    innerRoot.innerHTML = "<style>::slotted(#slot){color:red}</style><slot></slot>";
+    assert_equals(getComputedStyle(root.querySelector("#slot")).color, "rgb(0, 128, 0)");
+  }, "Check that ::slotted does not match slot elements");
+</script>