fix(spec): deepQueryAll returns matches in document order

pkg/spec/src/web-runtime.ts

@@ -193,13 +193,18 @@ function selectorFromString(selector: string): { css?: string; xpath?: string }
 // (Compose for Web mounts its canvas and its whole accessibility tree inside a
 // shadow root on the mount element) keeps its entire UI on the far side of one:
 // without this a spec sees four nodes and can neither enumerate a target nor
-// resolve a testTag. Light-DOM matches come first, then shadow content in walk
+// resolve a testTag. Matches come back in the order expandShadowContent walks
-// order. XPath has no equivalent, so `text:` selectors stop at the boundary.
+// and buildTree (internal/driver/chrome/driver.go) emits: a host, then that
+// host's shadow content, then the host's light children. Sweeping the light DOM
+// first and descending afterwards put a shadow-hosted match behind a later
+// light-DOM one, so find() answered with a different element on each host.
+// XPath has no equivalent, so `text:` selectors stop at the boundary.
 function deepQueryAll(selector: string, root: ParentNode): Element[] {
   const found: Element[] = [];
   const visit = (scope: ParentNode): void => {
-    for (const element of Array.from(scope.querySelectorAll(selector))) found.push(element);
+    const matched = new Set<Element>(Array.from(scope.querySelectorAll(selector)));
     for (const element of Array.from(scope.querySelectorAll<HTMLElement>("*"))) {
+      if (matched.has(element)) found.push(element);
       if (element.shadowRoot) visit(element.shadowRoot);
     }
   };

pkg/spec/test/web-runtime.test.ts

@@ -84,6 +84,7 @@ test("installRuntime defined the host-invoked globals", () => {
 });
 
 const { fakeElement, withFakeDocument } = await import("./web-dom-harness.ts");
+type FakeElementSpec = Parameters<typeof fakeElement>[0];
 
 // The host reports facts and never routes verbs: which of these a verb may act
 // on is decided by the shared rule in src/targets.ts, exercised across both
@@ -175,6 +176,55 @@ test("queryTargets leaves duplicated identities unnamed", () => {
   });
 });
 
+// The enumeration ORDER is the parity contract. buildTree in
+// internal/driver/chrome/driver.go emits a host's shadow children before its
+// light ones, and TestHierarchy_DerivesTheSameFactsAsTheWebRuntime compares the
+// two enumerations position by position.
+test("queryTargets splices shadow content in before the host's light children", () => {
+  const page = fakeElement({
+    tag: "div", x: 0, y: 0, width: 400, height: 800, id: "page",
+    children: [
+      {
+        tag: "div", x: 0, y: 0, width: 400, height: 100, id: "mount",
+        shadow: [
+          { tag: "button", x: 0, y: 0, width: 40, height: 20, id: "shadow-save", clickable: true },
+        ],
+        children: [{ tag: "div", x: 0, y: 20, width: 40, height: 20, id: "mount-light-child" }],
+      },
+      { tag: "div", x: 0, y: 100, width: 400, height: 100, id: "after" },
+    ],
+  });
+  withFakeDocument([page], () => {
+    assert.deepEqual(
+      host.queryTargets().map((target) => target.selector),
+      ["id:page", "id:mount", "id:shadow-save", "id:mount-light-child", "id:after"],
+    );
+  });
+});
+
+// The tappable set is resolved by selector, and querySelectorAll stops dead at
+// a shadow boundary, so a control inside a shadow root carries the clickable
+// fact only if the selector sweep descends. A Compose for Web app keeps every
+// control it has on the far side of one boundary.
+test("queryTargets reports a shadow-hosted control as clickable", () => {
+  const mount = fakeElement({
+    tag: "div", x: 0, y: 0, width: 400, height: 100, id: "mount",
+    shadow: [
+      { tag: "button", x: 0, y: 0, width: 40, height: 20, id: "shadow-save", clickable: true },
+      { tag: "input", x: 0, y: 20, width: 40, height: 20, id: "shadow-amount", editable: true },
+    ],
+  });
+  withFakeDocument([mount], () => {
+    const targets = host.queryTargets();
+    assert.deepEqual(
+      targets.map((target) => target.selector),
+      ["id:mount", "id:shadow-save", "id:shadow-amount"],
+    );
+    assert.equal(targets[1]!.clickable, true);
+    assert.equal(targets[2]!.editable, true);
+  });
+});
+
 test("queryTargets caches within a tick until reset", () => {
   const button = fakeElement({ tag: "button", x: 0, y: 0, width: 10, height: 10, clickable: true });
   withFakeDocument([button], () => {
@@ -473,28 +523,23 @@ test("selectorTag renders the selector shapes the goja host renders", () => {
 // accounts/totalBalance extractors (findAll([{HomeScreen}, {AccountCard}]))
 // were empty on every web step and the properties over them checked nothing.
 test("ax.findAll resolves a selector path segment by segment", () => {
-  const rect = { left: 0, top: 0, right: 10, bottom: 10, width: 10, height: 10 };
+  const card = (id: string, y: number): FakeElementSpec => ({
-  const node = (id: string, answers: Record<string, unknown[]> = {}) => ({
+    tag: "div", x: 0, y, width: 10, height: 10, testid: "AccountCard", text: id,
-    id,
+  });
-    tagName: "DIV",
+  // The stray card is outside HomeScreen, so a document-wide sweep for the
-    className: "",
+  // second segment picks it up and the scoping assertion below fails.
-    textContent: id,
+  const page = fakeElement({
-    dataset: {},
+    tag: "div", x: 0, y: 0, width: 100, height: 100,
-    getAttribute: () => null,
+    children: [
-    getBoundingClientRect: () => rect,
+      {
-    querySelectorAll: (selector: string) => answers[selector] ?? [],
+        tag: "div", x: 0, y: 0, width: 100, height: 50, testid: "HomeScreen",
+        children: [card("first", 0), card("second", 10)],
+      },
+      card("stray", 60),
+    ],
   });
-  const cardCss = `:is([data-testid="AccountCard"], [id="AccountCard"])`;
-  const screenCss = `:is([data-testid="HomeScreen"], [id="HomeScreen"])`;
-  const cards = [node("first"), node("second")];
-  const home = node("HomeScreen", { [cardCss]: cards });
 
-  const g = globalThis as Record<string, unknown>;
+  withFakeDocument([page], () => {
-  const originalDocument = g.document;
-  const originalWindow = g.window;
-  g.document = { querySelectorAll: (selector: string) => (selector === screenCss ? [home] : []) };
-  g.window = {};
-  try {
     __testing__.extractors.length = 0;
     __testing__.runtime.extract((state) => {
       const ax = (state as { ax: { findAll(s: unknown): Record<string, unknown>[] } }).ax;
@@ -506,30 +551,14 @@ test("ax.findAll resolves a selector path segment by segment", () => {
     // Scoped to the head match: the cards come from the HomeScreen node, not
     // from a document-wide sweep for AccountCard.
     assert.deepEqual(readingOf(values, 0), ["first", "second"]);
-  } finally {
+  });
-    g.document = originalDocument;
-    g.window = originalWindow;
-  }
 });
 
 test("ax.find and ax.findAll label the element with its selector", () => {
-  const rect = { left: 0, top: 0, right: 10, bottom: 10, width: 10, height: 10 };
+  const submit = fakeElement({
-  const submit = {
+    tag: "div", x: 0, y: 0, width: 10, height: 10, id: "TxnSubmit", text: "Submit",
-    id: "TxnSubmit",
+  });
-    tagName: "DIV",
+  withFakeDocument([submit], () => {
-    className: "",
-    textContent: "Submit",
-    dataset: {},
-    getAttribute: () => null,
-    getBoundingClientRect: () => rect,
-  };
-  const matches = `:is([data-testid="TxnSubmit"], [id="TxnSubmit"])`;
-  const g = globalThis as Record<string, unknown>;
-  const originalDocument = g.document;
-  const originalWindow = g.window;
-  g.document = { querySelectorAll: (selector: string) => (selector === matches ? [submit] : []) };
-  g.window = {};
-  try {
     __testing__.extractors.length = 0;
     __testing__.runtime.extract((state) => {
       const ax = (state as { ax: { find(s: unknown): Record<string, unknown> | undefined } }).ax;
@@ -546,8 +575,39 @@ test("ax.find and ax.findAll label the element with its selector", () => {
     // reference would hand the array INDEX to the runtime as the selector.
     const all = readingOf(values, 1) as Record<string, unknown>[];
     assert.equal(all[0]!.__sanderlingSelector, "testTag:TxnSubmit");
-  } finally {
+  });
-    g.document = originalDocument;
+});
-    g.window = originalWindow;
+
-  }
+// One page, one selector, two hosts. The goja host resolves a selector against
+// the hierarchy dump, whose buildTree (internal/driver/chrome/driver.go) emits
+// a host's shadow children BEFORE its light ones, so a pre-order search there
+// reaches a shadow-hosted match first. deepQueryAll swept the whole light DOM
+// first and only then descended, so this page answered find({id:"x"}) with the
+// light node in V8 and the shadow node in goja, and on web V8's answer is the
+// one that reaches the properties.
+test("ax.find resolves the shadow-hosted match the hierarchy dump reaches first", () => {
+  const page = fakeElement({
+    tag: "div", x: 0, y: 0, width: 400, height: 800, id: "page",
+    children: [
+      {
+        tag: "div", x: 0, y: 0, width: 400, height: 100, id: "mount",
+        shadow: [{ tag: "span", x: 0, y: 0, width: 40, height: 20, id: "x", text: "shadow" }],
+      },
+      { tag: "span", x: 0, y: 100, width: 40, height: 20, id: "x", text: "light" },
+    ],
+  });
+  withFakeDocument([page], () => {
+    __testing__.extractors.length = 0;
+    __testing__.runtime.extract((state) => {
+      const ax = (state as { ax: { find(s: unknown): Record<string, unknown> | undefined } }).ax;
+      return ax.find({ id: "x" })?.text;
+    });
+    __testing__.runtime.extract((state) => {
+      const ax = (state as { ax: { findAll(s: unknown): Record<string, unknown>[] } }).ax;
+      return ax.findAll({ id: "x" }).map((element) => element.text);
+    });
+    const values = __testing__.evaluateExtractors();
+    assert.equal(readingOf(values, 0), "shadow");
+    assert.deepEqual(readingOf(values, 1), ["shadow", "light"]);
+  });
 });