// Isolates the proposed mechanism (Gecko's 1/60-CSS-px app units versus Blink/WebKit's
// 1/64-CSS-px LayoutUnit, docs/firefox-app-units.md "The likely mechanism") from anything
// DPR-dependent, by reproducing the harness's exact worst-case shape --
// `recipe_nesting_depth` in crates/harness/src/cases.rs, twelve levels of `width:
// 83.333%` nested inside each other, viewport 800x600 -- and reading back the raw
// sub-pixel width at DPR 1, 1.5, 2 and 3.
//
// Layout-time quantization (app units, LayoutUnit) is expressed in CSS pixels, which do
// not change with device pixel ratio; only paint-time device-pixel snapping does. If the
// disagreement's magnitude is identical across all four DPRs, that is direct evidence the
// mechanism is the CSS-pixel unit grid and not anything resolution-dependent.

import fs from 'node:fs';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { launchAll, closeAll, openPages, measureOnPages, doc, ENGINE_NAMES } from './engines.mjs';

const __dirname = path.dirname(fileURLToPath(import.meta.url));
const resultsDir = path.join(__dirname, 'results');
fs.mkdirSync(resultsDir, { recursive: true });

const DEPTH = 12;
const STEP_PCT = '83.333%'; // recipe_nesting_depth's pool[0] -- the enumerated harness case's exact value

function buildHtml() {
  let inner = `<div style="width:${STEP_PCT};height:15px"></div>`;
  for (let i = 0; i < DEPTH - 1; i++) inner = `<div style="width:${STEP_PCT}">${inner}</div>`;
  return doc('', inner);
}

function measureFn() {
  const leaf = document.querySelector('div div div div div div div div div div div div');
  const r = leaf.getBoundingClientRect();
  return { width: r.width, height: r.height, x: r.x, y: r.y, devicePixelRatio: window.devicePixelRatio };
}

async function main() {
  const { browsers, versions } = await launchAll();
  const dprs = [1, 1.5, 2, 3];
  const html = buildHtml();
  const results = [];

  for (const dpr of dprs) {
    const { pages, close } = await openPages(browsers, dpr);
    const perEngine = await measureOnPages(pages, html, measureFn);
    const widths = ENGINE_NAMES.map((n) => perEngine[n].width);
    const max = Math.max(...widths);
    const min = Math.min(...widths);
    results.push({ dpr, perEngine, spread: max - min });
    await close();
  }

  await closeAll(browsers);

  fs.writeFileSync(path.join(resultsDir, 'deep-nesting-direct.json'), JSON.stringify({ versions, results }, null, 2));

  console.log('versions:', versions);
  console.log(`twelve-level chain, step ${STEP_PCT}, viewport 800px:`);
  for (const r of results) {
    console.log(`dpr=${r.dpr} spread=${r.spread.toFixed(6)}px`, Object.fromEntries(ENGINE_NAMES.map((n) => [n, r.perEngine[n].width])));
  }
}

main();