Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
2.8 kB · 64 lines
JavaScript
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465// 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();