Fix handling of compound ::slotted selectors

.changeset/giant-coins-wait.md

@@ -0,0 +1,5 @@
+---
+"@siteimprove/alfa-cascade": patch
+---
+
+**Fixed:** `::slotted` selectors within a compound selector are now correctly handled.

packages/alfa-cascade/src/selector-map.ts

@@ -246,20 +246,22 @@ export namespace SelectorMap {
     const add = (block: Block<Block.Source>): void => {
       const keySelector = block.selector.key;
 
+      if (Selector.isShadow(block.selector)) {
+        // These selectors select nodes in the light tree, they are stored
+        // separately and need to be checked when building the cascade of
+        // the hosting tree, not of the same tree.
+        shadow.push(block);
+        return;
+      }
+
       if (!keySelector.isSome()) {
-        if (Selector.isShadow(block.selector)) {
-          // These selectors select nodes in the light tree, they are stored
-          // separately and need to be checked when building the cascade of
-          // the hosting tree, not of the same tree.
-          shadow.push(block);
-        } else {
-          other.push(block);
-        }
-      } else {
-        const key = keySelector.get();
-        const buckets = { id: ids, class: classes, type: types };
-        buckets[key.type].add(key.name, block);
+        other.push(block);
+        return;
       }
+
+      const key = keySelector.get();
+      const buckets = { id: ids, class: classes, type: types };
+      buckets[key.type].add(key.name, block);
     };
 
     const visit = (rule: Rule) => {

packages/alfa-cascade/test/cascade.spec.tsx

@@ -209,11 +209,11 @@ test(".get() fetches `::slotted` rules from shadow, when relevant.", (t) => {
     h.rule.style("::slotted(*)", { color: "green" }),
   ];
 
-  const slotted1 = <div class="foo">Hello</div>;
+  const slotted = <div class="foo">Hello</div>;
 
   const document = h.document([
     <main>
-      {slotted1}
+      {slotted}
       {h.shadow(
         [
           <b>
@@ -226,10 +226,10 @@ test(".get() fetches `::slotted` rules from shadow, when relevant.", (t) => {
   ]);
   const cascade = Cascade.from(document, device);
 
-  // The rule tree has 4 items on the way to slotted1:
+  // The rule tree has 4 items on the way to slotted:
   // The fake root, the UA rule `div { display: block }`, and the 2 relevant rules declared here.
   // We thus just grab and check the path down from the fake root.
-  t.deepEqual(Iterable.toJSON(cascade.get(slotted1).inclusiveAncestors())[3], {
+  t.deepEqual(Iterable.toJSON(cascade.get(slotted).inclusiveAncestors())[3], {
     // fake root
     block: Block.empty().toJSON(),
     children: [
@@ -265,6 +265,58 @@ test(".get() fetches `::slotted` rules from shadow, when relevant.", (t) => {
   });
 });
 
+test(".get() matches `::slotted` rules within compound selector.", (t) => {
+  const rule = h.rule.style(".foo::slotted(*)", { color: "green" })
+
+  const slotted = <div>Hello</div>;
+
+  const document = h.document([
+    <main>
+      {slotted}
+      {h.shadow(
+        [<slot class="foo"></slot>],
+        [h.sheet([rule])],
+      )}
+    </main>,
+  ]);
+  const cascade = Cascade.from(document, device);
+
+  // The rule tree has 3 items on the way to slotted:
+  // The fake root, the UA rule `div { display: block }`, and the rule declared here.
+  // We thus just grab and check the path down from the fake root.
+  t.deepEqual(Iterable.toJSON(cascade.get(slotted).inclusiveAncestors())[2], {
+    // fake root
+    block: Block.empty().toJSON(),
+    children: [
+      // The <main> element also generates a node with the UA block, on a separate branch.
+      {
+        block: {
+          ...UAblock,
+          source: {
+            ...UAblock.source,
+            selector: {
+              type: "type",
+              specificity: { a: 0, b: 0, c: 1 },
+              key: "main",
+              name: "main",
+              namespace: null,
+            },
+          },
+        },
+        children: [],
+      },
+      {
+        // UA rule
+        block: UAblock,
+        children: [
+          // Actual rule, there are 58 rules in the UA sheet.
+          { block: getBlock(rule, 58, 2), children: [] },
+        ],
+      },
+    ],
+  });
+});
+
 test(".get() correctly sort rules from different depths.", (t) => {
   const outerNormalRule = h.rule.style("div", { color: "blue" });
   const outerImportantRule = h.rule.style("div", {
@@ -373,3 +425,4 @@ test(".get() correctly sort rules from different depths.", (t) => {
     ],
   });
 });
+