import { test, expect } from "@playwright/test";
import { ADVERSARIAL, REAL_SHAPES } from "../../common/lib/socialSvg.vectors";
import { safeSocialSvg, scopeSvgIds, sizeSocialSvg } from "../../common/lib/socialLinks";

// THE INVARIANT THE READ PATH DEPENDS ON, checked with Chromium's own HTML
// parser: for every icon the checker accepts (the review's adversarial battery
// and the shapes real icons take), rendered as a page renders it and parsed as
// a whole document the way the static HTML carries it, the element after the
// link stays OUTSIDE the icon, no script runs, and nothing is requested from
// anywhere.

const accepted = Object.entries({ ...ADVERSARIAL, ...REAL_SHAPES })
  .map(([name, raw]) => {
    const safe = safeSocialSvg(raw);
    return safe ? { name, html: sizeSocialSvg(scopeSvgIds(safe, "sl_S_1_-0")) } : null;
  })
  .filter((x): x is { name: string; html: string } => x !== null);

test("every accepted icon leaves the page after it outside the icon, runs nothing and fetches nothing", async ({
  page,
}) => {
  expect(accepted.length).toBeGreaterThan(10);
  const requests: string[] = [];
  await page.route("**/*", (route) => {
    requests.push(route.request().url());
    return route.abort();
  });
  for (const { name, html } of accepted) {
    await page.setContent(
      `<!doctype html><html><body><header><a id="l" href="#x">${html}</a><b id="after">after</b></header><main id="main">m</main></body></html>`,
    );
    await page.waitForTimeout(50);
    const r = await page.evaluate(() => ({
      afterInSvg: !!document.getElementById("after")?.closest("svg"),
      afterHolder: document.getElementById("after")?.parentElement?.tagName ?? null,
      mainInSvg: !!document.getElementById("main")?.closest("svg"),
      x: (window as unknown as { __x?: unknown }).__x ?? null,
    }));
    expect(r, name).toEqual({ afterInSvg: false, afterHolder: "HEADER", mainInSvg: false, x: null });
  }
  expect(requests, "requests").toEqual([]);
});