buninu-browser 0.2.3 → 0.3.0

package/lib/style/selector-traits.js

@@ -6,11 +6,13 @@
 /** One sheet's selector traits (sibling combinators, :has(), structural pseudo-classes, invalidation features). */
 export function sheetTraits(sheet) {
   const text = String(sheet).replace(/\/\*[\s\S]*?\*\//g, "");
-  const plain = text.replace(/\[[^\]]*\]/g, "[]").replace(/\{[^}]*\}/g, "{}");
+  const plain = text.replace(/\[[^\]]*\]/g, "[]").replace(/\{[^{}]*\}/g, "{}");
   const sibling = /[^\s~|^$*=\[]\s*[+~]\s*[^\s=]/.test(plain);
   const hasCompounds = new Set();
   let hasSiblings = false;
-  const selectorsOnly = text.replace(/\{[^}]*\}/g, "{}");
+  // Strip leaf declaration blocks without swallowing a nested group's first
+  // selector. State invalidation must see selectors inside @media/@layer.
+  const selectorsOnly = text.replace(/\{[^{}]*\}/g, "{}");
   for (const block of hasBlocks(selectorsOnly)) {
     for (const selector of splitTopLevelText(block.slice(0, -1), ",")) {
       for (const compound of compoundsOf(selector)) {
@@ -43,6 +45,13 @@ export function sheetTraits(sheet) {
   // (".a + .b" of ".a + .b .c"): a later sibling's subtree restyles only
   // when its match of one of them changes.
   const siblingTargetCompounds = new Set();
+  const observedAttributes = new Set();
+  // Scan the original sheet so nested at-rules retain their selectors. A
+  // bracket in a declaration can conservatively add an unused dependency.
+  // Names can be escaped; namespace prefixes do not change the local name.
+  for (const match of text.matchAll(/\[\s*(?:(?:[\w*-]*)\|)?((?:\\[0-9a-fA-F]{1,6}\s?|\\.|[\w\u00a0-\uffff-])+)/g)) {
+    observedAttributes.add(cssUnescape(match[1]).toLowerCase());
+  }
   for (const block of selectorsOnly.matchAll(/[^{}@]*\{/g)) {
     for (const selector of splitTopLevelText(block[0].slice(0, -1), ",")) {
       const parts = complexParts(selector);
@@ -60,14 +69,15 @@ export function sheetTraits(sheet) {
         if (nested || combinator === " " || combinator === ">") {
           for (const feature of features) descendantFeatures.add(feature);
           const states = features.filter((feature) => feature.startsWith(":"));
-          if (states.length) descendantStateCompounds.push({ states, required: positiveCompoundFeatures(compound) });
+          if (states.length) descendantStateCompounds.push({ states, required: positiveCompoundFeatures(compound),
+            alternatives: positiveSelectorAlternatives(compound) });
         }
         if (nested || combinator === "+" || combinator === "~") for (const feature of features) siblingFeatures.add(feature);
       });
     }
   }
   return {
-    sibling, hasCompounds, hasSiblings, structuralCompounds, descendantFeatures, siblingFeatures, descendantStateCompounds, siblingTargetCompounds,
+    sibling, hasCompounds, hasSiblings, structuralCompounds, descendantFeatures, siblingFeatures, descendantStateCompounds, siblingTargetCompounds, observedAttributes,
     forward: /:(?:nth-child|nth-of-type|first-of-type|only-of-type)\b/.test(selectorsOnly),
     firstChild: /:(?:first-child|only-child)\b/.test(selectorsOnly),
     backward: /:(?:nth-last-child|nth-last-of-type|last-of-type|only-of-type)\b/.test(selectorsOnly),
@@ -116,7 +126,41 @@ function splitTopLevelText(text, separator) {
   return parts.filter(Boolean);
 }
 
-const STATE_PSEUDO = /:(?:checked|indeterminate|default|disabled|enabled|placeholder-shown|valid|invalid|in-range|out-of-range|required|optional|read-only|read-write|user-valid|user-invalid|autofill|open|popover-open|modal|target|focus|focus-visible|focus-within|hover|active|visited|link|any-link|defined|fullscreen)\b/g;
+const STATE_PSEUDO = /:(?:checked|indeterminate|default|disabled|enabled|placeholder-shown|valid|invalid|in-range|out-of-range|required|optional|read-only|read-write|user-valid|user-invalid|autofill|open|popover-open|modal|target|focus|focus-visible|focus-within|hover|active|visited|link|any-link|defined|fullscreen)(?![\w-])/g;
+
+/** Outer :is/:where groups require at least one subject alternative to fit.
+ * Requirements inside :not/:has cannot constrain this element positively.
+ * Nested functional conditions remain conservative rather than excluding
+ * a possible match. Complex alternatives constrain their rightmost subject.
+ */
+function positiveSelectorAlternatives(compound) {
+  const groups = [];
+  let depth = 0;
+  for (let index = 0; index < compound.length; index++) {
+    const character = compound[index];
+    if (character === "\\") { index++; continue; }
+    if (character === "(" || character === "[") { depth++; continue; }
+    if (character === ")" || character === "]") { depth--; continue; }
+    if (depth || character !== ":") continue;
+    const match = /^:(?:is|where)\(/.exec(compound.slice(index));
+    if (!match) continue;
+    const start = index + match[0].length;
+    let end = start, nested = 1, quote = "";
+    for (; end < compound.length && nested; end++) {
+      const char = compound[end];
+      if (char === "\\") end++;
+      else if (quote) { if (char === quote) quote = ""; }
+      else if (char === '"' || char === "'") quote = char;
+      else if (char === "(") nested++;
+      else if (char === ")") nested--;
+    }
+    if (nested) continue;
+    groups.push(splitTopLevelText(compound.slice(start,end-1), ",")
+      .map(selector => positiveCompoundFeatures(complexParts(selector).at(-1)?.compound ?? "")));
+    index = end - 1;
+  }
+  return groups;
+}
 
 /** CSS escapes in an identifier (".\\:popover-open", "\\31 a") resolved. */
 function cssUnescape(text) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buninu-browser",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "Buninu Browser is a browser engine written in JavaScript and WebAssembly for Bun.",
   "keywords": [
     "buninu",

package/test/broadcast-channel.test.js

@@ -0,0 +1,26 @@
+import { expect, test } from "bun:test";
+import { createBroadcastChannels } from "../lib/renderer/broadcast-channel.js";
+
+const scope = origin => createBroadcastChannels({ origin, EventTarget, DOMException,
+  runTask: task => task(),
+  realm: { messageEvent: (type, fields) => new MessageEvent(type, fields), markTrusted() {} },
+});
+
+test("BroadcastChannel separates origins, channel names and opaque document origins and disposes native channels", async () => {
+  const a=scope('https://a.test'), b=scope('https://b.test'), a2=scope('https://a.test'), opaque1=scope('null'), opaque2=scope('null');
+  const name=crypto.randomUUID(), sender=new a.BroadcastChannel(name), other=new b.BroadcastChannel(name),
+    peer=new a2.BroadcastChannel(name), otherName=new a.BroadcastChannel(name+'other'),
+    opaqueSender=new opaque1.BroadcastChannel(name), opaquePeer=new opaque2.BroadcastChannel(name);
+  const received=[];
+  other.onmessage=()=>received.push('other origin');peer.onmessage=()=>received.push('same origin');
+  otherName.onmessage=()=>received.push('other name');opaquePeer.onmessage=()=>received.push('opaque');
+  try {
+    sender.postMessage('message');opaqueSender.postMessage('opaque message');
+    for(let i=0;i<100&&!received.length;i++)await Bun.sleep(2);
+    await Bun.sleep(10);
+    expect(received).toEqual(['same origin']);
+    a.dispose();
+    expect(()=>sender.postMessage('closed')).toThrow('The channel is closed');
+    expect(()=>new a.BroadcastChannel('closed realm')).toThrow('The document is no longer active');
+  } finally {for(const item of [a,b,a2,opaque1,opaque2])item.dispose();}
+});

package/test/canvas-2d.test.js

@@ -1,10 +1,13 @@
 import { beforeAll, expect, test } from "bun:test";
 import CanvasKitInit from "../usr/lib/canvaskit/canvaskit.js";
-import { canvasContext, resetCanvas, setCanvasKit } from "../lib/renderer/canvas-2d.js";
+import { canvasContext, resetCanvas, setCanvasKit, disposeDocumentCanvases } from "../lib/renderer/canvas-2d.js";
+
+let CanvasKit;
 
 beforeAll(async () => {
   const wasmBinary = await Bun.file(new URL("../usr/lib/canvaskit/canvaskit.wasm", import.meta.url)).arrayBuffer();
-  setCanvasKit(await CanvasKitInit({ wasmBinary }));
+  CanvasKit = await CanvasKitInit({ wasmBinary });
+  setCanvasKit(CanvasKit);
 });
 
 function canvas(width = 1, height = 1) {
@@ -44,6 +47,7 @@ test("a colour reads back stably, and one CanvasKit cannot parse is black", () =
 test("the same canvas keeps one context, and changing width clears it", () => {
   const node = canvas(2, 2);
   const context = canvasContext(node, "2d");
+  const fill = context.fillRect;
   expect(canvasContext(node, "2d")).toBe(context);
   context.fillStyle = "blue";
   context.fillRect(0, 0, 2, 2);
@@ -52,4 +56,81 @@ test("the same canvas keeps one context, and changing width clears it", () => {
   resetCanvas(node);
   expect(context.fillStyle).toBe("#000000");
   expect([...context.getImageData(0, 0, 1, 1).data]).toEqual([0, 0, 0, 0]);
+  expect(context.fillRect).toBe(fill);
+  // A method kept before a bitmap reset must draw into the new bitmap.
+  context.fillStyle = "red";
+  fill(0, 0, 1, 1);
+  expect([...context.getImageData(0, 0, 1, 1).data]).toEqual([255, 0, 0, 255]);
+});
+
+test("gradient and pattern facades hide native shaders while style identity and drawing survive", () => {
+  const node = canvas(2, 2);
+  const context = canvasContext(node, "2d");
+  const gradient = context.createLinearGradient(0, 0, 2, 0);
+  let offsetReads = 0, colorReads = 0;
+  gradient.addColorStop({ gradient, valueOf() { offsetReads++; return 0; } },
+    { gradient, toString() { colorReads++; return "red"; } });
+  expect([offsetReads, colorReads]).toEqual([1, 1]);
+  gradient.addColorStop(1, "red");
+  context.fillStyle = gradient;
+  context.fillRect(0, 0, 2, 2);
+  expect(context.fillStyle).toBe(gradient);
+  expect([...context.getImageData(0, 0, 1, 1).data]).toEqual([255, 0, 0, 255]);
+  expect(Object.keys(gradient)).toEqual(["addColorStop"]);
+  for (const name of ["Td", "pe", "ie", "oe"]) expect(gradient[name]).toBeUndefined();
+  let invoked = false;
+  context.fillStyle = { pe() { invoked = true; throw new Error("private shader protocol"); } };
+  context.fillRect(0, 0, 1, 1);
+  expect(invoked).toBeFalse();
+  expect(context.fillStyle).toBe(gradient);
+  context.strokeStyle = gradient;
+  expect(context.strokeStyle).toBe(gradient);
+  context.save();
+  context.fillStyle = "blue";
+  context.strokeStyle = "blue";
+  context.restore();
+  expect(context.fillStyle).toBe(gradient);
+  expect(context.strokeStyle).toBe(gradient);
+  const radial = context.createRadialGradient(0, 0, 0, 1, 1, 2);
+  expect(Object.keys(radial)).toEqual(["addColorStop"]);
+  const pattern = context.createPattern({}, "repeat");
+  expect(Object.keys(pattern)).toEqual(["setTransform"]);
+  for (const name of ["Td", "qf", "pe", "ie", "oe"]) expect(pattern[name]).toBeUndefined();
+  resetCanvas(node);
+  expect(context.fillStyle).toBe("#000000");
+});
+
+test("discarding a document frees its connected and detached canvas pixel buffers", () => {
+  const malloc = CanvasKit._malloc;
+  const free = CanvasKit._free;
+  const allocations = new Map();
+  let pixelBytes = 0;
+  CanvasKit._malloc = (size) => {
+    const pointer = malloc(size);
+    allocations.set(pointer, size);
+    pixelBytes += size;
+    return pointer;
+  };
+  CanvasKit._free = (pointer) => {
+    pixelBytes -= allocations.get(pointer) ?? 0;
+    allocations.delete(pointer);
+    return free(pointer);
+  };
+  const document = {};
+  try {
+    // Ownership follows ownerDocument, even if an element was never inserted.
+    const nodes = Array.from({ length: 8 }, () => ({ ownerDocument: document, width: 400, height: 300 }));
+    const contexts = nodes.map(node => canvasContext(node, "2d"));
+    expect(pixelBytes).toBe(8 * 400 * 300 * 4);
+    for (const context of contexts) context.fillRect(0, 0, 1, 1);
+    disposeDocumentCanvases(document);
+    expect(pixelBytes).toBe(0);
+    disposeDocumentCanvases(document);
+    expect(pixelBytes).toBe(0);
+    expect(() => contexts[0].fillRect(0, 0, 1, 1)).toThrow("discarded");
+  } finally {
+    disposeDocumentCanvases(document);
+    CanvasKit._malloc = malloc;
+    CanvasKit._free = free;
+  }
 });

package/test/canvas-paint.test.js

@@ -0,0 +1,9 @@
+import { expect, test } from "bun:test";
+
+test("canvas bitmaps paint, update without DOM mutations, scale, reset and survive detachment", async () => {
+  const child = Bun.spawn([process.execPath, new URL("./fixtures/canvas-paint.js", import.meta.url).pathname],
+    { stdout: "pipe", stderr: "pipe" });
+  const [exit, stderr] = await Promise.all([child.exited, new Response(child.stderr).text()]);
+  expect(stderr).toBe("");
+  expect(exit).toBe(0);
+}, 15_000);

package/test/canvas-text.test.js

@@ -0,0 +1,41 @@
+import { expect, test } from "bun:test";
+import { parseCanvasFont, createCanvasTextRenderer } from "../lib/renderer/canvas-text.js";
+import { loadGraphics } from "../lib/renderer/page-renderer.js";
+
+test("canvas fonts share shorthand parsing, font units, styles and quoted fallback families", () => {
+  expect(parseCanvasFont('italic bold 1.5em "A, B", sans-serif', 20)).toEqual({
+    fontSize: 30, fontFamily: ["A, B", "sans-serif"], fontWeight: 700, fontStyle: "italic", fontStretch: 100,
+  });
+  expect(parseCanvasFont("condensed 2rem monospace", 20, 15).fontSize).toBe(30);
+  expect(parseCanvasFont("condensed 12pt monospace").fontStretch).toBe(75);
+  expect(parseCanvasFont("condensed 12pt monospace").fontSize).toBe(16);
+  expect(parseCanvasFont("invalid")).toBeNull();
+  expect(parseCanvasFont("0px serif")).toBeNull();
+});
+
+test("canvas text reuses bounded native paragraphs and releases them at document teardown", async () => {
+  const { CanvasKit } = await loadGraphics();
+  let made = 0, deleted = 0;
+  const render = createCanvasTextRenderer(CanvasKit, () => {
+    made++;
+    return { layout() {}, getMaxIntrinsicWidth: () => 12, getLineMetrics: () => [{ ascent: 8, descent: 2 }],
+      getAlphabeticBaseline: () => 8, getIdeographicBaseline: () => 10, getHeight: () => 10,
+      delete() { deleted++; } };
+  });
+  const request = { operation: "measureText", args: ["hello"], style: parseCanvasFont("10px sans-serif"),
+    context: {}, settings: { textAlign: "left", textBaseline: "alphabetic", direction: "ltr" } };
+  expect(render(request).width).toBe(12);
+  render(request);
+  expect(made).toBe(1);
+  for (let i = 0; i < 200; i++) render({ ...request, args: [String(i)] });
+  expect(made - deleted).toBe(128);
+  render.clear();
+  expect(made).toBe(deleted);
+});
+
+test("canvas text uses real shared fonts, aligns and scales glyphs, and saves its text state", async () => {
+  // Page scripting runs in its own host process to keep the runner's globals.
+  const process = Bun.spawn([Bun.which("bun"), new URL("fixtures/canvas-text.js", import.meta.url).pathname], { stdout: "pipe", stderr: "pipe" });
+  const [status, stderr] = await Promise.all([process.exited, new Response(process.stderr).text()]);
+  expect({ status, stderr }).toEqual({ status: 0, stderr: "" });
+});

package/test/cdp-stream.test.js

@@ -0,0 +1,56 @@
+import { test, expect } from 'bun:test';
+import { CdpServer } from '../lib/cdp-server.js';
+import { CDP } from '../tools/browser-lab.js';
+const until = async predicate => { for(let i=0;i<100;i++){if(predicate())return;await Bun.sleep(5);}throw Error('condition timed out'); };
+async function fixture(screenshot) {
+  let onFrame;
+  const server=CdpServer.create({screenshot,onFrame:fn=>{onFrame=fn;}}).listen(0);
+  const cdp=new CDP(`ws://127.0.0.1:${server.port}/devtools/browser/cdp-server`);
+  await cdp.ready;const {targetId}=await cdp.send('Target.createTarget',{url:'about:blank'});
+  const {sessionId}=await cdp.send('Target.attachToTarget',{targetId,flatten:true});cdp.sessionId=sessionId;
+  return {cdp,targetId,frame:()=>onFrame(),frames:()=>cdp.events.filter(e=>e.method==='Page.screencastFrame'),close:()=>{cdp.close();server.stop(true);}};
+}
+test('slow screencast client gets at most two unacked frames; latest updates resume after ack',async()=>{
+  let calls=0;const f=await fixture(async()=>String(++calls));
+  try{
+    await f.cdp.send('Page.startScreencast');await until(()=>f.frames().length===1);
+    f.frame();await until(()=>f.frames().length===2);
+    for(let i=0;i<50;i++)f.frame();await Bun.sleep(20);
+    expect(calls).toBe(2);
+    await f.cdp.send('Page.screencastFrameAck',{sessionId:f.frames()[0].params.sessionId});
+    await until(()=>f.frames().length===3);expect(calls).toBe(3);
+    await f.cdp.send('Page.screencastFrameAck',{sessionId:-1});f.frame();await Bun.sleep(10);expect(calls).toBe(3);
+    await f.cdp.send('Page.stopScreencast');f.frame();await Bun.sleep(10);expect(calls).toBe(3);
+    await f.cdp.send('Page.startScreencast');await until(()=>calls===4);
+    f.cdp.close();await Bun.sleep(20);f.frame();await Bun.sleep(10);expect(calls).toBe(4);
+  }finally{f.close();}
+});
+test('closing a target drops a capture already in flight',async()=>{
+  let resolveCapture;const f=await fixture(()=>new Promise(resolve=>{resolveCapture=resolve;}));
+  try{
+    await f.cdp.send('Page.startScreencast');await until(()=>resolveCapture);
+    await f.cdp.send('Target.closeTarget',{targetId:f.targetId});resolveCapture('obsolete');
+    await Bun.sleep(20);expect(f.frames()).toHaveLength(0);
+  }finally{f.close();}
+});
+test('clients without attached sessions receive updates and release their implicit stream on disconnect',async()=>{
+  let calls=0;const f=await fixture(async()=>String(++calls));
+  try{
+    f.cdp.sessionId=null;
+    await f.cdp.send('Page.startScreencast');await until(()=>f.frames().length===1);
+    f.frame();await until(()=>f.frames().length===2);
+    await f.cdp.send('Page.screencastFrameAck',{sessionId:f.frames()[0].params.sessionId});
+    f.frame();await until(()=>f.frames().length===3);
+    f.cdp.close();await Bun.sleep(20);f.frame();await Bun.sleep(10);expect(calls).toBe(3);
+  }finally{f.close();}
+});
+test('stopping a capture in flight drops its frame and a restarted stream gets its own options',async()=>{
+  const pending=[];const f=await fixture(params=>new Promise(resolve=>pending.push({params,resolve})));
+  try{
+    await f.cdp.send('Page.startScreencast',{format:'jpeg'});await until(()=>pending.length===1);
+    await f.cdp.send('Page.stopScreencast');await f.cdp.send('Page.startScreencast',{format:'png'});
+    pending[0].resolve('old');await until(()=>pending.length===2);expect(f.frames()).toHaveLength(0);
+    expect(pending[1].params.format).toBe('png');pending[1].resolve('new');await until(()=>f.frames().length===1);
+    expect(f.frames()[0].params.data).toBe('new');
+  }finally{f.close();}
+});

package/test/clipboard.test.js

@@ -0,0 +1,35 @@
+import {test,expect} from 'bun:test';
+import {writeClipboard} from '../lib/clipboard.js';
+import {RendererHost} from '../lib/renderer/host.js';
+
+test('clipboard prefers xclip, preserves exact stdin, and falls back on failure',async()=>{
+ const calls=[];let fail=false;
+ const options={platform:'linux',which:name=>'/bin/'+name,spawn:(args,opts)=>{calls.push({args,opts});return {exited:Promise.resolve(fail&&args[0].endsWith('xclip')?1:0),kill(){}};}};
+ const text='中文\n$(do not execute) `literal`';
+ await writeClipboard(text,options);
+ expect(calls[0].args).toEqual(['/bin/xclip','-selection','clipboard']);
+ expect(calls[0].opts.stdin.toString()).toBe(text);expect(calls).toHaveLength(1);
+ fail=true;calls.length=0;await writeClipboard('',options);
+ expect(calls.map(c=>c.args[0])).toEqual(['/bin/xclip','/bin/wl-copy']);
+ await expect(writeClipboard('x',{...options,which:()=>null})).rejects.toThrow('No working');
+});
+
+test('a real button click writes through controller; page-only calls cannot overwrite clipboard',async()=>{
+ const copies=[];const host=new RendererHost({clipboardWrite:async text=>{copies.push(text);}});
+ try{
+  await host.start();await host.call('resize',400,200,1);
+  await host.call('loadDocument',{url:'https://clipboard.test/',contentType:'text/html',source:`<body style="margin:0"><button id="b" style="width:200px;height:60px">Copy</button><script>
+    window.copyStatus='idle';document.getElementById('b').onclick=async()=>{
+      try{await navigator.clipboard.writeText('npx buninu 中文');window.copyStatus='copied';}
+      catch(e){window.copyStatus=e.name;}
+    };</script>`});
+  await host.call('whenLoaded');
+  await host.call('evaluate',"document.getElementById('b').click()");await Bun.sleep(30);
+  expect(copies).toEqual([]);expect(await host.call('evaluate','window.copyStatus')).toBe('NotAllowedError');
+  await host.call('click',30,25);
+  for(let i=0;i<40 && !copies.length;i++)await Bun.sleep(25);
+  expect(copies).toEqual(['npx buninu 中文']);
+  for(let i=0;i<40 && await host.call('evaluate','window.copyStatus')!=='copied';i++)await Bun.sleep(25);
+  expect(await host.call('evaluate','window.copyStatus')).toBe('copied');
+ }finally{host.close();}
+},20000);

package/test/computed-style-binding.test.js

@@ -0,0 +1,151 @@
+import { afterAll, beforeAll, expect, test } from "bun:test";
+import { RendererHost } from "../lib/renderer/host.js";
+
+let renderer;
+beforeAll(async () => {
+  renderer = new RendererHost({ timeout: 20_000 });
+  await renderer.start();
+});
+afterAll(() => renderer?.close());
+
+test("computed corner radii preserve percentages, elliptical axes and logical mappings", async () => {
+  await renderer.call("loadDocument", {
+    url: "https://page.test/", contentType: "text/html", status: 200,
+    source: `<!doctype html><style>
+      #box { width:100px;height:80px;border-radius:60% 30% 15% 0 / 20% 40% 60% 0 }
+      #rtl { direction:rtl;border-radius:10px;border-start-start-radius:2em 50% }
+    </style><div id="box"></div><div id="rtl"></div>`,
+  });
+  await renderer.call("whenLoaded");
+  const result = JSON.parse(await renderer.call("evaluate", `JSON.stringify(['box','rtl'].map(id=>{
+    const s=getComputedStyle(document.getElementById(id));return [s.borderRadius,s.borderTopLeftRadius,s.borderTopRightRadius,s.borderStartStartRadius];
+  }))`));
+  expect(result).toEqual([
+    ["60% 30% 15% 0px / 20% 40% 60% 0px", "60% 20%", "30% 40%", "60% 20%"],
+    ["10px 32px 10px 10px / 10px 50% 10px 10px", "10px", "32px 50%", "32px 50%"],
+  ]);
+});
+
+test("computed zero gaps remain numeric for script-driven responsive toolbars", async () => {
+  await renderer.call("loadDocument", {
+    url: "https://page.test/",
+    source: `<!doctype html><style>
+      #toolbar { display:flex;gap:0;font-style:italic;font-stretch:75% }
+      #toolbar > div { width:80px;flex:none }
+      #normal { gap:normal 0px } #inherited { gap:inherit }
+      #reset { gap:12px;all:initial }
+    </style><div id="toolbar"><div></div><div></div></div>
+    <div id="normal"><div id="inherited"></div></div><div id="reset"></div>`,
+    contentType: "text/html", status: 200,
+  });
+  await renderer.call("whenLoaded");
+  const result = await renderer.call("evaluate", `JSON.stringify((() => {
+    const toolbar = document.getElementById('toolbar');
+    const style = getComputedStyle(toolbar);
+    const widths = Array.from(toolbar.children, child => child.offsetWidth + 2 * parseInt(style.columnGap, 10));
+    const gaps = id => { const s = getComputedStyle(document.getElementById(id)); return [s.rowGap,s.columnGap]; };
+    return {widths, zero:gaps('toolbar'), normal:gaps('normal'), inherited:gaps('inherited'), reset:gaps('reset'),
+      font:[style.fontStyle,style.fontStretch]};
+  })())`);
+  expect(JSON.parse(result)).toEqual({widths:[80,80], zero:["0px","0px"], normal:["normal","0px"],
+    inherited:["normal","0px"], reset:["normal","normal"], font:["italic","75%"]});
+});
+
+test("computed transform matrices retain every translation and resolve nested length math", async () => {
+  await renderer.call("loadDocument", {
+    url:"https://page.test/",contentType:"text/html",status:200,
+    source:`<!doctype html><style>div{width:100px;height:150px}
+      #popup{transform:translate(56px,780px) translate(0,-100%)}
+      #math{transform:scale(2) translate(calc(25% + 10px),min(20%,40px)) translate(10%,5px)}
+    </style><div id="popup"></div><div id="math"></div>`,
+  });
+  await renderer.call("whenLoaded");
+  expect(JSON.parse(await renderer.call("evaluate", `JSON.stringify(['popup','math'].map(id=>getComputedStyle(document.getElementById(id)).transform))`)))
+    .toEqual(["matrix(1, 0, 0, 1, 56, 630)","matrix(2, 0, 0, 2, 90, 70)"]);
+});
+
+test("focus invalidates subjects, ancestor paths, siblings and relational selectors", async () => {
+  await renderer.call("loadDocument", {
+    url:"https://page.test/",contentType:"text/html",status:200,
+    source:`<!doctype html><style>
+      input{color:black}input:focus{color:red}input:focus-visible{background:yellow}
+      section{color:black}section:focus-within{color:green}
+      :where(.group,.alternative):focus-within .nested{color:blue}
+      section:has(input:focus) .related{color:red}
+      section:focus-within + aside .following{color:purple}
+    </style><section class="group" id="left"><input id="a"><i class="nested"></i><i class="related"></i></section>
+    <aside><i class="following"></i></aside><section class="alternative" id="right"><input id="b"></section>`,
+  });
+  await renderer.call("whenLoaded");
+  const read = async action => JSON.parse(await renderer.call("evaluate", `JSON.stringify((()=>{
+    ${action};return ['#a','#b','#left','#right','.nested','.related','.following'].map(s=>{const e=document.querySelector(s);return e?getComputedStyle(e).color:null})
+  })())`));
+  const black="rgba(0, 0, 0, 1)",red="rgba(255, 0, 0, 1)",green="rgba(0, 128, 0, 1)",blue="rgba(0, 0, 255, 1)",purple="rgba(128, 0, 128, 1)";
+  expect(await read("document.getElementById('a').focus()"))
+    .toEqual([red,black,green,black,blue,red,purple]);
+  expect(await read("document.getElementById('b').focus()"))
+    .toEqual([black,red,black,green,black,black,black]);
+  expect(await read("document.getElementById('left').appendChild(document.getElementById('b'))"))
+    .toEqual([black,black,black,black,black,black,black]);
+  expect(await read("document.getElementById('b').focus()"))
+    .toEqual([black,red,green,black,blue,red,purple]);
+  expect(await read("document.getElementById('b').remove();document.getElementById('a').focus();document.getElementById('a').blur()"))
+    .toEqual([black,null,black,black,black,black,black]);
+});
+
+test("metadata mutations invalidate only selectors that observe those attributes", async () => {
+  await renderer.call("loadDocument", {
+    url:"https://page.test/",contentType:"text/html",status:200,
+    source:`<!doctype html><style>
+      section,span{color:black}[data-open] span{color:red}
+      section:has([aria-expanded="true"]){color:green}span[title="visible"]{color:blue}
+    </style><section><span>Label</span></section>`,
+  });
+  await renderer.call("whenLoaded");
+  expect(JSON.parse(await renderer.call("evaluate", `JSON.stringify((()=>{
+    const parent=document.querySelector('section'),child=document.querySelector('span'),result=[];
+    const read=()=>result.push([getComputedStyle(parent).color,getComputedStyle(child).color]);
+    for(let i=0;i<20;i++){child.setAttribute('aria-activedescendant','item'+i);child.dataset.internal=String(i);read()}
+    parent.dataset.open='';child.setAttribute('aria-expanded','true');read();child.title='visible';read();
+    return [result[0],result[19],result[20],result[21]];
+  })())`))).toEqual([
+    ["rgba(0, 0, 0, 1)","rgba(0, 0, 0, 1)"], ["rgba(0, 0, 0, 1)","rgba(0, 0, 0, 1)"],
+    ["rgba(0, 128, 0, 1)","rgba(255, 0, 0, 1)"], ["rgba(0, 128, 0, 1)","rgba(0, 0, 255, 1)"],
+  ]);
+});
+
+test("focus invalidation reaches descendants through nested stylesheet groups", async () => {
+  await renderer.call("loadDocument",{
+    url:"https://page.test/",contentType:"text/html",status:200,
+    source:'<!doctype html><style>body{color:black}@media(min-width:1px){@layer app{.panel:focus-within span{color:red}}}</style><div class="panel"><input><span>Label</span></div>',
+  });
+  await renderer.call("whenLoaded");
+  expect(JSON.parse(await renderer.call("evaluate",`JSON.stringify((()=>{
+    const input=document.querySelector('input'),label=document.querySelector('span');input.focus();
+    const focused=getComputedStyle(label).color;input.blur();return[focused,getComputedStyle(label).color];
+  })())`))).toEqual(["rgba(255, 0, 0, 1)","rgba(0, 0, 0, 1)"]);
+});
+
+test("native label activation restyles both radios and relational ancestors without a global reset", async () => {
+  await renderer.call("loadDocument", {
+    url:"https://page.test/",contentType:"text/html",status:200,
+    source:`<!doctype html><style>label{display:block}span,form{color:black}input:checked+span{color:red}
+      form:has(#second:checked){color:purple}</style><form>
+      <label><input type="radio" name="choice" checked id="first"><span id="firstText">First</span></label>
+      <label id="secondLabel"><input type="radio" name="choice" id="second"><span id="secondText">Second</span></label></form>`,
+  });
+  await renderer.call("whenLoaded");
+  const position = JSON.parse(await renderer.call("evaluate", `JSON.stringify((()=>{const r=document.getElementById('secondText').getBoundingClientRect();return [r.x+r.width/2,r.y+r.height/2]})())`));
+  await renderer.call("click",...position);
+  const result = JSON.parse(await renderer.call("evaluate", `JSON.stringify([document.getElementById('first').checked,document.getElementById('second').checked,
+    ...['#firstText','#secondText','form'].map(s=>getComputedStyle(document.querySelector(s)).color)])`));
+  expect(result).toEqual([false,true,"rgba(0, 0, 0, 1)","rgba(255, 0, 0, 1)","rgba(128, 0, 128, 1)"]);
+});
+
+test("summary UA styles follow disclosure state and principal-summary changes incrementally", async () => {
+  const child = Bun.spawn([process.execPath, new URL("./fixtures/summary-style.js", import.meta.url).pathname],
+    { stdout:"pipe", stderr:"pipe" });
+  const [exit,stderr] = await Promise.all([child.exited,new Response(child.stderr).text()]);
+  expect(stderr).toBe("");
+  expect(exit).toBe(0);
+});