npm - buninu-browser - Versions diffs - 0.2.3 → 0.3.0 - Mend

buninu-browser 0.2.3 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

package/README.md +86 -1
package/lib/cdp-server.js +47 -14
package/lib/clipboard.js +22 -0
package/lib/happy-dom/document-base.js +33 -0
package/lib/happy-dom/parser.js +15 -6
package/lib/happy-dom/selector-matcher.js +2 -2
package/lib/happy-dom/selector-pseudo-adapter.js +19 -0
package/lib/happy-dom/svg-attribute-adapter.js +50 -0
package/lib/headless-shell.js +40 -11
package/lib/input/hit-test.js +67 -19
package/lib/layout/text-layout.js +213 -91
package/lib/media/byte-pipe.js +2 -2
package/lib/media/position-audio.js +10 -1
package/lib/media/source-snapshots.js +126 -0
package/lib/media/video-keyframe.js +17 -4
package/lib/media/webm-stream.js +106 -0
package/lib/network/network-service.js +268 -120
package/lib/paint/display-list.js +8 -28
package/lib/paint/frame-cache.js +25 -0
package/lib/paint/frame.js +77 -16
package/lib/paint/paragraph-text.js +24 -0
package/lib/paint/raster-readback.js +41 -0
package/lib/paint/raw-frames.js +47 -0
package/lib/paint/rounded-rect.js +82 -0
package/lib/paint/shared-frame-pool.js +105 -0
package/lib/render-tree/index.js +38 -6
package/lib/render-tree/svg.js +15 -7
package/lib/renderer/bindings.js +233 -80
package/lib/renderer/broadcast-channel.js +76 -0
package/lib/renderer/canvas-2d.js +257 -14
package/lib/renderer/canvas-text.js +120 -0
package/lib/renderer/compositor-channel.js +103 -0
package/lib/renderer/compositor.js +34 -40
package/lib/renderer/custom-element-reactions.js +25 -1
package/lib/renderer/flags.js +1 -1
package/lib/renderer/font-loading.js +227 -0
package/lib/renderer/host.js +133 -98
package/lib/renderer/image-resources.js +65 -0
package/lib/renderer/interfaces.js +28 -0
package/lib/renderer/layout-observers.js +236 -0
package/lib/renderer/main.js +52 -5
package/lib/renderer/media-source.js +126 -55
package/lib/renderer/page-realm.js +287 -99
package/lib/renderer/page-renderer.js +663 -239
package/lib/renderer/prepared-script-cache.js +50 -0
package/lib/renderer/rendered-text.js +108 -0
package/lib/renderer/rewrite-worker.js +4 -3
package/lib/renderer/script-rewrite.js +13 -2
package/lib/renderer/scroll-into-view.js +28 -0
package/lib/renderer/slot-assignment.js +60 -0
package/lib/renderer/video-presentation.js +23 -4
package/lib/renderer/workers.js +2 -2
package/lib/style/computed-style.js +611 -104
package/lib/style/selector-traits.js +49 -5
package/package.json +1 -1
package/test/broadcast-channel.test.js +26 -0
package/test/canvas-2d.test.js +83 -2
package/test/canvas-paint.test.js +9 -0
package/test/canvas-text.test.js +41 -0
package/test/cdp-stream.test.js +56 -0
package/test/clipboard.test.js +35 -0
package/test/computed-style-binding.test.js +151 -0
package/test/computed-style.test.js +258 -1
package/test/display-list.test.js +12 -0
package/test/document-base.test.js +87 -0
package/test/dom-platform.test.js +461 -0
package/test/fetch-lifecycle.test.js +161 -0
package/test/fixtures/browser-raw-demo.html +36 -0
package/test/fixtures/canvas-paint.js +117 -0
package/test/fixtures/canvas-text.js +42 -0
package/test/fixtures/image-lifetime.js +90 -0
package/test/fixtures/media-seek-snapshot.js +77 -0
package/test/fixtures/mse-audio-chirp.webm +0 -0
package/test/fixtures/mse-switch-large.mp4 +0 -0
package/test/fixtures/mse-switch-small.mp4 +0 -0
package/test/fixtures/raw-capture-benchmark.json +76 -0
package/test/fixtures/renderer-memory.js +110 -0
package/test/fixtures/summary-style.js +28 -0
package/test/font-loading.test.js +97 -0
package/test/grid.test.js +58 -0
package/test/hit-test.test.js +21 -1
package/test/image-lifetime.test.js +12 -0
package/test/image-resources.test.js +94 -0
package/test/local-media.test.js +84 -0
package/test/media-seek-snapshot.test.js +11 -0
package/test/media-source-config.test.js +98 -0
package/test/media-source-webm-accounting.test.js +98 -0
package/test/media-source-webm.test.js +108 -0
package/test/navigation.test.js +1 -0
package/test/network-service.test.js +388 -0
package/test/page-scripts.test.js +1 -1
package/test/paint-frame.test.js +103 -0
package/test/paint-paragraph-cache.test.js +87 -0
package/test/position-audio.test.js +24 -0
package/test/positioning.test.js +22 -0
package/test/prepared-script-cache.test.js +45 -0
package/test/pulse-client.test.js +10 -3
package/test/raster-readback.test.js +40 -0
package/test/raw-capture.test.js +152 -0
package/test/render-tree.test.js +28 -0
package/test/renderer-memory.test.js +11 -0
package/test/selector-traits.test.js +24 -0
package/test/shared-frame-pool.test.js +63 -0
package/test/style-sheets.test.js +51 -0
package/test/svg.test.js +29 -0
package/test/text-layout.test.js +106 -0
package/test/video-keyframe.test.js +61 -0
package/test/video-presentation.test.js +69 -0
package/test/window-resize.test.js +36 -0
package/tools/bench-raw-capture.js +32 -0
package/tools/browser-lab.js +78 -0
package/tools/browser-soak.js +75 -0
package/tools/network-reference.js +49 -0
package/tools/process-memory.js +38 -0
package/tools/script-benchmark.js +25 -0
package/ai-debug.log +0 -5537

package/test/dom-platform.test.js ADDED Viewed

@@ -0,0 +1,461 @@
+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();
+  await renderer.call("resize", 400, 300, 1);
+});
+afterAll(() => renderer?.close());
+const load = async (body) => {
+  await renderer.call("loadDocument", {
+    url: "https://page.test/",
+    source: `<!doctype html><html><head></head><body>${body}</body></html>`,
+    contentType: "text/html", status: 200,
+  });
+  await renderer.call("whenLoaded");
+};
+const evaluate = (source) => renderer.call("evaluate", source);
+const eventually = async (expression, expected) => {
+  let value;
+  for (let attempt = 0; attempt < 100; attempt++) {
+    value = await evaluate(expression);
+    if (value === expected) return;
+    await Bun.sleep(20);
+  }
+  expect(value).toBe(expected);
+};
+test("dataset is a DOMStringMap with live named properties and a mutable page prototype", async () => {
+  await load('<div id="test" data-async-css="1" data-name="before"></div>');
+  expect(await evaluate(`JSON.stringify((() => {
+    const element = document.getElementById('test');
+    const data = element.dataset;
+    const result = [data instanceof DOMStringMap, Object.prototype.toString.call(data), data === element.dataset,
+      Object.getPrototypeOf(data) === DOMStringMap.prototype, data.asyncCss, data['async-css'], Object.keys(data)];
+    data.name = 'after';
+    result.push(element.getAttribute('data-name'));
+    element.setAttribute('data-new-value', 'live');
+    result.push(data.newValue);
+    delete data.name;
+    result.push(element.hasAttribute('data-name'));
+    try { data['bad-name'] = 'x'; } catch (error) { result.push(error.name); }
+    try { new DOMStringMap(); } catch (error) { result.push(error.name); }
+    DOMStringMap.prototype.extension = 7;
+    result.push(data.extension, 'extension' in data, Object.hasOwn(data, 'extension'));
+    data.constructor = 'data attribute';
+    result.push(data.constructor, element.getAttribute('data-constructor'));
+    delete data.constructor;
+    result.push(data.constructor === DOMStringMap);
+    return result;
+  })())`)).toBe(JSON.stringify([true, "[object DOMStringMap]", true, true, "1", undefined, ["asyncCss", "name"],
+    "after", "live", false, "SyntaxError", "TypeError", 7, true, false, "data attribute", "data attribute", true]));
+});
+test("IntersectionObserver batches targets and updates as scrolling crosses thresholds", async () => {
+  await load(`<div id="first" style="position:absolute;left:0;top:400px;width:100px;height:100px"></div>
+    <div id="second" style="position:absolute;left:120px;top:400px;width:100px;height:100px"></div>
+    <div style="height:1200px"></div>`);
+  await evaluate(`window.observations = []; window.observer = new IntersectionObserver(entries => {
+    observations.push(entries.map(e => [e.target.id, e.isIntersecting, e.intersectionRatio]));
+  }, {threshold: [0, 0.5, 1]});
+  observer.observe(document.getElementById('first')); observer.observe(document.getElementById('second'));`);
+  await eventually("observations.length", 1);
+  expect(await evaluate("JSON.stringify(observations[0])")).toBe(JSON.stringify([["first", false, 0], ["second", false, 0]]));
+  await renderer.call("scrollTo", 0, 150);
+  await eventually("observations.length", 2);
+  expect(await evaluate("JSON.stringify(observations[1])")).toBe(JSON.stringify([["first", true, 0.5], ["second", true, 0.5]]));
+  await renderer.call("scrollTo", 0, 200);
+  await eventually("observations.length", 3);
+  expect(await evaluate("JSON.stringify(observations[2])")).toBe(JSON.stringify([["first", true, 1], ["second", true, 1]]));
+  await renderer.call("scrollTo", 0, 220);
+  await Bun.sleep(60);
+  expect(await evaluate("observations.length")).toBe(3);
+  await evaluate("observer.disconnect()");
+  await renderer.call("scrollTo", 0, 0);
+  await Bun.sleep(60);
+  expect(await evaluate("observations.length")).toBe(3);
+});
+test("ResizeObserver reports content and border boxes again after size changes", async () => {
+  await load('<div id="box" style="width:100px;height:50px;padding:10px;border:2px solid"></div>');
+  await evaluate(`window.sizes = []; window.observer = new ResizeObserver(entries => {
+    sizes.push(entries.map(e => [e.contentRect.width,e.contentRect.height,e.borderBoxSize[0].inlineSize,e.borderBoxSize[0].blockSize]));
+  }); observer.observe(document.getElementById('box'));`);
+  await eventually("sizes.length", 1);
+  expect(await evaluate("JSON.stringify(sizes[0])")).toBe("[[100,50,124,74]]");
+  await evaluate("document.getElementById('box').style.width='150px'");
+  await eventually("sizes.length", 2);
+  expect(await evaluate("JSON.stringify(sizes[1])")).toBe("[[150,50,174,74]]");
+  await evaluate("document.getElementById('box').style.color='red'");
+  await Bun.sleep(60);
+  expect(await evaluate("sizes.length")).toBe(2);
+  await evaluate("document.getElementById('box').style.display='none'");
+  await eventually("sizes.length", 3);
+  expect(await evaluate("JSON.stringify(sizes[2])")).toBe("[[0,0,0,0]]");
+});
+test("IntersectionObserver validates options and applies explicit root margins", async () => {
+  await load(`<div id="root" style="position:absolute;top:20px;left:20px;width:100px;height:100px;overflow:hidden">
+    <div id="target" style="position:absolute;top:150px;left:0;width:100px;height:100px"></div></div>`);
+  expect(await evaluate(`JSON.stringify((() => {
+    const result=[];
+    for(const options of [{threshold:2},{threshold:NaN},{rootMargin:'1em'},{root:{} }]) {
+      try { new IntersectionObserver(()=>{},options); } catch(e) { result.push(e.name); }
+    }
+    window.observations=[];
+    window.observer=new IntersectionObserver(e=>observations.push(e[0].intersectionRatio),{
+      root:document.getElementById('root'),rootMargin:'0px 0px 100%',threshold:[1,0.5,0]});
+    observer.observe(document.getElementById('target'));
+    result.push(observer instanceof IntersectionObserver,observer.root.id,observer.rootMargin,observer.thresholds.join(','));
+    return result;
+  })())`)).toBe(JSON.stringify(["RangeError", "RangeError", "SyntaxError", "TypeError", true, "root", "0px 0px 100% 0px", "0,0.5,1"]));
+  await eventually("observations.length", 1);
+  expect(await evaluate("observations[0]")).toBe(0.5);
+});
+test("innerText collects visible text and line boundaries instead of scripts and hidden content", async () => {
+  await load(`<div id="text">  hello <span> world </span> !<script type="application/json">secret</script>
+    <style>#text b { display:none }</style><b>hidden</b><div>block <i> words </i></div><p>paragraph</p>
+    <span style="visibility:hidden">invisible<span style="visibility:visible">visible</span></span><br>end<br></div>
+    <div id="hidden" style="display:none">raw <b>hidden</b><script type="application/json">data</script></div>
+    <pre id="pre">  pre\n text  </pre>`);
+  expect(await evaluate("document.getElementById('text').innerText")).toBe("hello world !\nblock words\n\nparagraph\n\nvisible\nend\n");
+  expect(await evaluate("document.getElementById('hidden').innerText")).toBe("raw hiddendata");
+  expect(await evaluate("document.getElementById('pre').innerText")).toBe("  pre\n text  ");
+  expect(await evaluate(`(()=>{const e=document.createElement('div');e.innerHTML='<b>a</b><br><i>b</i>';return e.innerText})()`)).toBe("ab");
+  expect(await evaluate(String.raw`(()=>{const e=document.getElementById('text');e.innerText='a\r\nb\rc\n';return e.innerHTML})()`)).toBe("a<br>b<br>c<br>");
+  expect(await evaluate(`(()=>{const e=document.getElementById('text');e.innerText=null;return e.innerHTML})()`)).toBe("");
+});
+test("Headers instrumentation is page-local and reaches Request and Response headers", async () => {
+  await load('<p>fetch interfaces</p>');
+  expect(await evaluate(`JSON.stringify((() => {
+    const original=Headers.prototype.set;
+    window.calls=[];
+    Headers.prototype.set=function(name,value){ calls.push(name); return original.call(this,name,value); };
+    const headers=new Headers(); headers.set('x-direct','1');
+    const request=new Request('/api'); request.headers.set('x-request','2');
+    const response=new Response('body'); response.headers.set('x-response','3');
+    return [calls,headers instanceof Headers,request.headers instanceof Headers,response.headers instanceof Headers,
+      request.clone() instanceof Request,response.clone() instanceof Response,
+      Response.error() instanceof Response,Response.json({ok:true}).headers instanceof Headers,
+      new Request('/post',{method:'POST',body:'hello'}).headers.get('content-type')];
+  })())`)).toBe(JSON.stringify([["x-direct", "x-request", "x-response"], true, true, true, true, true, true, true, "text/plain;charset=UTF-8"]));
+  await load('<p>new realm</p>');
+  expect(await evaluate("Headers.prototype.set.toString().includes('[native code]')")).toBe(true);
+  await evaluate("window.fetchHeaders = null; fetch('data:text/plain,hello').then(response => fetchHeaders = response.headers instanceof Headers)");
+  await eventually("fetchHeaders", true);
+});
+test("fetch and response cloning read internal headers without invoking page instrumentation", async () => {
+  await load('<p>internal fetch headers</p>');
+  expect(await evaluate(`(async () => {
+    const original = Headers.prototype.get;
+    let calls = 0;
+    Headers.prototype.get = function () { calls++; throw new Error('page header hook'); };
+    try {
+      const response = await fetch('data:application/octet-stream,media-chunk');
+      const copy = response.clone();
+      const [blob, copiedText] = await Promise.all([response.blob(), copy.text()]);
+      const result = [calls, response.headers instanceof Headers, blob.type, await blob.text(), copiedText];
+      try { response.headers.get('content-type'); } catch {}
+      result.push(calls);
+      return result;
+    } finally {
+      Headers.prototype.get = original;
+    }
+  })()`)).toEqual([0, true, 'application/octet-stream', 'media-chunk', 'media-chunk', 1]);
+});
+test("DOMParser returns separate inert documents with page interfaces and XML namespaces", async () => {
+  await load('<main id="main">active page</main>');
+  expect(await evaluate(`JSON.stringify((() => {
+    window.parsedRan=false; window.customRan=0;
+    customElements.define('parser-test',class extends HTMLElement {constructor(){super();customRan++;}});
+    const parser=new DOMParser();
+    const parsed=parser.parseFromString('<!doctype html><html><head><title>parsed</title></head><body><p id="copy">copy</p><parser-test></parser-test><script>parsedRan=true<\/script></body></html>','text/html');
+    const xml=parser.parseFromString('<root xmlns="urn:test"><child data-key="value"/></root>','application/xml');
+    const other=document.implementation.createHTMLDocument('other');
+    const result=[parsed instanceof Document,parsed.body!==document.body,parsed.body.ownerDocument===parsed,
+      parsed.title,parsed.defaultView,parsed.location,parsed.currentScript,parsed.readyState,parsed.contentType,
+      document.getElementById('main').textContent,parsedRan,customRan,other.body!==document.body,other.title,
+      xml.contentType,xml.documentElement.namespaceURI,xml.documentElement.localName,
+      new XMLSerializer().serializeToString(xml)];
+    document.body.appendChild(document.importNode(parsed.getElementById('copy'),true));
+    result.push(document.getElementById('copy').ownerDocument===document);
+    try {parser.parseFromString('x','text/plain');} catch(e){result.push(e.name);}
+    return result;
+  })())`)).toBe(JSON.stringify([true,true,true,"parsed",null,null,null,"complete","text/html","active page",false,0,true,"other",
+    "application/xml","urn:test","root",'<root xmlns="urn:test"><child data-key="value"/></root>',true,"TypeError"]));
+});
+test("details disclosure is clickable and keyboard accessible, including the generated label", async () => {
+  await load('<details id="explicit"><summary id="summary">More options</summary><button id="inside">Inside</button></details><details id="implicit">Hidden content</details><div style="height:1200px"></div>');
+  const click = async (id) => {
+    const [x,y] = JSON.parse(await evaluate(`JSON.stringify((()=>{const r=document.getElementById('${id}').getBoundingClientRect();return [r.left+10,r.top+5]})())`));
+    await renderer.call("click",x,y);
+  };
+  expect(await evaluate("document.getElementById('inside').getBoundingClientRect().height")).toBe(0);
+  await click('summary');
+  expect(await evaluate("document.getElementById('explicit').open && document.activeElement.id === 'summary'")).toBe(true);
+  await renderer.call('press','Enter');
+  expect(await evaluate("document.getElementById('explicit').open")).toBe(false);
+  await renderer.call('press',' ');
+  expect(await evaluate("document.getElementById('explicit').open")).toBe(true);
+  expect(await evaluate('window.scrollY')).toBe(0);
+  await evaluate("document.getElementById('summary').addEventListener('click',e=>e.preventDefault(),{once:true})");
+  await renderer.call('press','Enter');
+  expect(await evaluate("document.getElementById('explicit').open")).toBe(true);
+  await click('implicit');
+  expect(await evaluate("document.getElementById('implicit').open && document.activeElement.id === 'implicit'")).toBe(true);
+  await renderer.call('press',' ');
+  expect(await evaluate("document.getElementById('implicit').open")).toBe(false);
+});
+test("shadow slots assign live named children, flatten fallback content and replace manual assignments", async () => {
+  await load('<div id="host">text<!--ignore--><b id="named" slot="name">named</b><i id="default">default</i></div><div id="manual"><b id="one">one</b><i id="two">two</i></div>');
+  expect(await evaluate(`JSON.stringify((() => {
+    const host=document.getElementById('host');
+    const root=host.attachShadow({mode:'open'});
+    root.innerHTML='<slot id="default"></slot><slot name="name" id="named"></slot><slot name="name" id="duplicate"></slot><slot name="absent" id="fallback"><em>fallback</em></slot>';
+    const slots=[...root.querySelectorAll('slot')];
+    const result=[slots[0] instanceof HTMLSlotElement,typeof document.body.assignedNodes,
+      slots[0].assignedNodes().map(n=>n.nodeType===3?n.data:n.id),slots[0].assignedElements().map(n=>n.id),
+      slots[1].assignedNodes().map(n=>n.id),slots[2].assignedNodes().length,
+      slots[3].assignedNodes().length,slots[3].assignedElements({flatten:true}).map(n=>n.textContent),
+      host.firstChild.assignedSlot===slots[0],document.getElementById('named').assignedSlot===slots[1]];
+    document.getElementById('named').slot='';
+    result.push(slots[1].assignedNodes().length,slots[0].assignedElements().map(n=>n.id));
+    const manual=document.getElementById('manual'),one=document.getElementById('one'),two=document.getElementById('two');
+    const manualRoot=manual.attachShadow({mode:'open',slotAssignment:'manual',delegatesFocus:true});
+    manualRoot.innerHTML='<slot></slot><slot></slot>';
+    const [a,b]=manualRoot.querySelectorAll('slot');
+    a.assign(one,two,one); result.push(a.assignedNodes().map(n=>n.id),one.assignedSlot===a);
+    b.assign(one); result.push(a.assignedNodes().map(n=>n.id),b.assignedNodes().map(n=>n.id),one.assignedSlot===b);
+    a.assign(); result.push(a.assignedNodes().length,two.assignedSlot,manualRoot.slotAssignment,manualRoot.delegatesFocus);
+    try {a.assign(document.createComment('bad'));} catch(e) {result.push(e.name);}
+    return result;
+  })())`)).toBe(JSON.stringify([true,'undefined',['text','default'],['default'],['named'],0,0,['fallback'],true,true,
+    0,['named','default'],['one','two'],true,['two'],['one'],true,0,null,'manual',true,'TypeError']));
+});
+test("HTML parsing adjusts SVG attribute names while XML and DOM setters preserve case", async () => {
+  await load('<svg id="svg" viewbox="0 0 10 10" data-Camel="Keep VALUE" DATA-CAMEL="duplicate" preserveaspectratio="none"></svg>');
+  expect(await evaluate(`JSON.stringify((() => {
+    const svg=document.getElementById('svg');
+    const template=document.createElement('template');
+    template.innerHTML='<svg data-nextAction$lit$="Lit VALUE" viewBox$lit$="Marker" viewbox="0 0 2 2"></svg>';
+    const inner=template.content.firstChild;
+    const xml=new DOMParser().parseFromString('<svg xmlns="http://www.w3.org/2000/svg" data-Camel="XML"/>','image/svg+xml');
+    svg.setAttribute('data-Other','DOM');
+    return [svg.getAttributeNames(),svg.getAttribute('data-camel'),svg.getAttribute('viewBox'),
+      inner.getAttributeNames(),inner.getAttribute('data-nextaction$lit$'),inner.getAttribute('viewbox$lit$'),
+      xml.documentElement.getAttribute('data-Camel'),xml.documentElement.getAttribute('data-camel'),
+      svg.getAttribute('data-Other'),svg.getAttribute('data-other')];
+  })())`)).toBe(JSON.stringify([['id','viewBox','data-camel','preserveAspectRatio','data-Other'],'Keep VALUE','0 0 10 10',
+    ['data-nextaction$lit$','viewbox$lit$','viewBox'],'Lit VALUE','Marker','XML',null,'DOM',null]));
+});
+test("constraint validation exposes live state and honors canceled submissions and novalidate", async () => {
+  await load('<form id="form"><input id="input" required><button id="submit">Send</button><button id="plain" type="button">Plain</button></form>');
+  expect(await evaluate(`JSON.stringify((()=>{
+    const input=document.getElementById('input'),form=document.getElementById('form');
+    const state=input.validity;
+    const result=[state instanceof ValidityState,state===input.validity,state.valueMissing,state.valid,input.willValidate,form.checkValidity()];
+    input.value='ready';result.push(state.valid,input.checkValidity());
+    input.setCustomValidity('Please correct');result.push(state.customError,state.valid,input.validationMessage,input.reportValidity());
+    input.disabled=true;result.push(input.checkValidity(),input.willValidate);input.disabled=false;
+    let submissions=[];form.addEventListener('submit',event=>{submissions.push(event.submitter?.id??null);event.preventDefault()});
+    form.requestSubmit();result.push(submissions.length);
+    form.noValidate=true;form.requestSubmit();form.requestSubmit(document.getElementById('submit'));
+    result.push(submissions);
+    try{form.requestSubmit(document.getElementById('plain'));}catch(error){result.push(error.name)}
+    input.setCustomValidity('');result.push(state.valid,input.validationMessage);
+    return result;
+  })())`)).toBe(JSON.stringify([true,true,true,false,true,false,true,true,true,false,'Please correct',false,true,false,0,[null,'submit'],'TypeError',true,'']));
+});
+test("Error keeps native branding and a page-local extensible constructor after SES lockdown", async () => {
+  await load('<p>errors</p>');
+  expect(await evaluate(`JSON.stringify((()=>{
+    const error=Error('message',{cause:'reason'});
+    class CustomError extends Error {}
+    const custom=new CustomError('custom');
+    let native;try{null.missing}catch(e){native=e}
+    Object.defineProperty(Error,'extension',{value:1,configurable:true});
+    return [typeof Error.isError,error instanceof Error,error.constructor===Error,error.cause,
+      custom instanceof CustomError,custom instanceof Error,native instanceof Error,Error.isError(native),
+      Error.isError(error),Error.isError(new Proxy(error,{})),Error.isError({[Symbol.toStringTag]:'Error'}),
+      Error.isError(Object.create(Error.prototype)),Error.extension];
+  })())`)).toBe(JSON.stringify(['function',true,true,'reason',true,true,true,true,true,false,false,false,1]));
+  await load('<p>new realm</p>');
+  expect(await evaluate('Error.extension')).toBeUndefined();
+});
+test("BroadcastChannel delivers cloned asynchronous messages and closes without echoing to itself", async () => {
+  await load('<p>broadcast</p>');
+  await evaluate(`window.received=[];window.echo=0;window.sender=new BroadcastChannel('platform-test');window.receiver=new BroadcastChannel('platform-test');
+    sender.onmessage=()=>echo++;
+    receiver.onmessage=e=>received.push([e.data.value,e.origin,e.target===receiver,e.isTrusted,e instanceof MessageEvent]);
+    const message={value:'before'};sender.postMessage(message);message.value='after';`);
+  await eventually('received.length',1);
+  expect(await evaluate('JSON.stringify([received,echo,receiver instanceof BroadcastChannel,receiver instanceof EventTarget,receiver.name])'))
+    .toBe(JSON.stringify([[['before','https://page.test',true,true,true]],0,true,true,'platform-test']));
+  expect(await evaluate(`JSON.stringify((()=>{const errors=[];try{sender.postMessage(()=>{})}catch(e){errors.push(e.name)}receiver.close();try{receiver.postMessage('closed')}catch(e){errors.push(e.name)}sender.postMessage('ignored');sender.close();return errors})())`))
+    .toBe(JSON.stringify(['DataCloneError','InvalidStateError']));
+  await Bun.sleep(30);
+  expect(await evaluate('received.length')).toBe(1);
+});
+test("developer diagnostics retain error stacks without exposing privileged stack access to pages", async () => {
+  await load('<p>diagnostics</p>');
+  expect(await evaluate(`JSON.stringify((()=>{
+    function diagnosticMarker(){try{null.missing}catch(error){console.error(error);return error.stack}}
+    return [typeof getStackString,diagnosticMarker()];
+  })())`)).toBe(JSON.stringify(['undefined','']));
+  const entries = await renderer.call('consoleMessages');
+  expect(entries.some(entry => entry.text.includes('TypeError') && entry.text.includes('diagnosticMarker'))).toBe(true);
+});
+test("plain Events allow UI-named expandos without inheriting readonly subclass attributes", async () => {
+  await load('<button id="button">Focus</button>');
+  expect(await evaluate(`JSON.stringify((()=>{'use strict';
+    const event=document.createEvent('Event'),target=document.getElementById('button');
+    event.initEvent('afterblur',true,false);
+    const result=['relatedTarget' in event,'clientX' in event,Object.getPrototypeOf(Event.prototype)===Object.prototype];
+    event.relatedTarget=target;event.clientX=25;event.detail='custom';
+    document.addEventListener('afterblur',e=>result.push(e.relatedTarget===target,e.clientX,e.detail));
+    document.dispatchEvent(event);
+    const mouse=new MouseEvent('click');
+    result.push(mouse.relatedTarget,mouse.clientX,Object.hasOwn(MouseEvent.prototype,'relatedTarget'));
+    const custom=new CustomEvent('example',{detail:7});
+    try{custom.detail=8}catch(error){result.push(error.name)}
+    result.push(custom.detail);
+    return result;
+  })())`)).toBe(JSON.stringify([false,false,true,true,25,'custom',null,0,true,'TypeError',7]));
+});
+test("innerText excludes SVG accessible descriptions and unpainted resource subtrees", async () => {
+  await load('<div id="text">Before<svg><title>Label</title><desc>Description</desc><defs><text>Definition</text></defs><path d="M0 0L10 10"/></svg>After</div>');
+  expect(await evaluate("document.getElementById('text').innerText")).toBe('BeforeAfter');
+  expect(await evaluate("document.getElementById('text').textContent")).toBe('BeforeLabelDescriptionDefinitionAfter');
+});
+test("innerText and client rectangles exclude closed disclosure content and elements without boxes", async () => {
+  await load('<div id="root"><details id="disclosure"><summary>Title</summary><p id="content">Hidden</p><summary>Other</summary></details><details id="bare"><p>Secret</p></details></div><div id="none" style="display:none">Hidden</div><div id="contents" style="display:contents"><span>Visible</span></div><div id="zero" style="width:0;height:0"></div>');
+  expect(await evaluate(`JSON.stringify((()=>{
+    const ids=['root','disclosure','content','bare','none','contents','zero'],elements=ids.map(id=>document.getElementById(id));
+    const result=elements.map(e=>[e.innerText,e.getClientRects().length]);
+    result.push(document.createElement('div').getClientRects().length);
+    document.getElementById('disclosure').open=true;
+    result.push(document.getElementById('disclosure').innerText,document.getElementById('content').getClientRects().length);
+    return result;
+  })())`)).toBe(JSON.stringify([['Title',1],['Title',1],['',0],['',1],['Hidden',0],['Visible',0],['',1],0,'Title\n\nHidden\n\nOther',1]));
+});
+test("scrollIntoView honors nearest, center, end, boolean overloads and fixed-position targets", async () => {
+  await load(`<style>body{margin:0}</style><div style="position:relative;width:1000px;height:1000px">
+    <div id="visible" style="position:absolute;left:70px;top:60px;width:80px;height:30px"></div>
+    <div id="target" style="position:absolute;left:480px;top:420px;width:50px;height:40px"></div>
+    <div id="large" style="position:absolute;left:50px;top:40px;width:500px;height:400px"></div>
+    <div id="fixed" style="position:fixed;left:10px;top:10px;width:20px;height:20px"></div></div>`);
+  expect(await evaluate(`JSON.stringify((()=>{
+    const position=()=>[scrollX,scrollY],result=[],target=document.getElementById('target');
+    document.getElementById('visible').scrollIntoView({block:'nearest',inline:'nearest'});result.push(position());
+    target.scrollIntoView({block:'nearest',inline:'nearest'});result.push(position());
+    target.scrollIntoView({block:'nearest',inline:'nearest'});result.push(position());
+    target.scrollIntoView({block:'center',inline:'center'});result.push(position());
+    scrollTo(0,0);target.scrollIntoView(false);result.push(position());
+    scrollTo(0,0);target.scrollIntoView();result.push(position());
+    scrollTo(100,100);document.getElementById('large').scrollIntoView({block:'nearest',inline:'nearest'});result.push(position());
+    document.getElementById('fixed').scrollIntoView();result.push(position());
+    try{target.scrollIntoView({block:'invalid'})}catch(error){result.push(error.name)}
+    try{target.scrollIntoView({inline:null})}catch(error){result.push(error.name)}
+    return result;
+  })())`)).toBe(JSON.stringify([[0,0],[130,160],[130,160],[305,290],[130,160],[130,420],[100,100],[100,100],'TypeError','TypeError']));
+});
+test("link activation retains its target when click handlers replace the clicked descendants", async () => {
+  await load('<a id="link" href="/before"><span id="label" style="display:block;width:120px;height:40px">Open</span></a>');
+  await evaluate(`document.getElementById('link').addEventListener('click',event=>{event.currentTarget.href='/after';event.currentTarget.textContent='Changed'})`);
+  expect(await renderer.call('click', 25, 25)).toBe('https://page.test/after');
+  await load('<a id="link" href="/before"><span style="display:block;width:120px;height:40px">Open</span></a>');
+  await evaluate(`document.getElementById('link').addEventListener('click',event=>{event.currentTarget.textContent='Changed';event.preventDefault()})`);
+  expect(await renderer.call('click', 25, 25)).toBe(null);
+});
+test("scripted click is composed, suppresses recursive activation and keeps its original link", async () => {
+  await load('<div id="host"></div><button id="disabled" disabled>Disabled</button><a id="link" href="#after"><span id="label">Open</span></a>');
+  expect(await evaluate(`JSON.stringify((()=>{
+    const result=[],host=document.getElementById('host'),root=host.attachShadow({mode:'open'});
+    const button=document.createElement('button');root.append(button);
+    button.addEventListener('click',event=>{result.push([event.composed,event.isTrusted]);button.click()});
+    host.addEventListener('click',()=>result.push('host'));
+    button.click();
+    document.getElementById('disabled').addEventListener('click',()=>result.push('disabled'));
+    document.getElementById('disabled').click();
+    document.getElementById('link').addEventListener('click',event=>event.currentTarget.textContent='Changed');
+    document.getElementById('label').click();
+    result.push(location.hash);
+    return result;
+  })())`)).toBe(JSON.stringify([[true,false],'host','#after']));
+});
+test("upgrading declarative custom elements initializes observed properties before connecting", async () => {
+  await load('<date-label ts="2026-10-16" ignored="x"></date-label>');
+  expect(await evaluate(`JSON.stringify((()=>{
+    const reactions=[],original=document.querySelector('date-label');
+    let observedReads=0;
+    class DateLabel extends HTMLElement {
+      static get observedAttributes(){observedReads++;return ['ts']}
+      constructor(){super();this.date='';reactions.push(['constructor',this.getAttribute('ts'),customElements.get('date-label')===DateLabel])}
+      attributeChangedCallback(name,before,after,namespace){this.date=after;reactions.push(['attribute',name,before,after,namespace])}
+      connectedCallback(){reactions.push(['connected',this.date]);this.textContent=this.date}
+    }
+    customElements.define('date-label',DateLabel);
+    reactions.push(['identity',original===document.querySelector('date-label'),original instanceof DateLabel,observedReads]);
+    const created=document.createElement('date-label');created.setAttribute('ts','later');document.body.append(created);
+    return reactions;
+  })())`)).toBe(JSON.stringify([
+    ['constructor','2026-10-16',true],['attribute','ts',null,'2026-10-16',null],['connected','2026-10-16'],['identity',true,true,1],
+    ['constructor',null,true],['attribute','ts',null,'later',null],['connected','later'],
+  ]));
+});
+test("upgrade reactions keep initial values and constructor mutations in callback order", async () => {
+  await load('<mutable-label count="1"></mutable-label><failed-label count="1"></failed-label>');
+  expect(await evaluate(`JSON.stringify((()=>{
+    const reactions=[];
+    class MutableLabel extends HTMLElement {
+      static observedAttributes=['count'];
+      constructor(){super();this.setAttribute('count','2');reactions.push('constructor')}
+      attributeChangedCallback(name,before,after){reactions.push([before,after]);if(after==='1')this.setAttribute('count','3')}
+      connectedCallback(){reactions.push('connected')}
+    }
+    customElements.define('mutable-label',MutableLabel);
+    class FailedLabel extends HTMLElement {
+      static observedAttributes=['count'];
+      constructor(){super();this.setAttribute('count','2');throw Error('failed constructor')}
+      attributeChangedCallback(){reactions.push('failed attribute')}
+      connectedCallback(){reactions.push('failed connected')}
+    }
+    try{customElements.define('failed-label',FailedLabel)}catch{}
+    return reactions;
+  })())`)).toBe(JSON.stringify(['constructor',[null,'1'],['1','2'],['2','3'],'connected']));
+});
+test("scrollIntoView aligns nested scrollports and container nearest leaves outer scrolling untouched", async () => {
+  await load(`<style>body{margin:0}</style><div style="height:1100px;position:relative">
+    <div id="scroll" style="position:absolute;left:20px;top:600px;width:200px;height:100px;overflow:auto;border:2px solid">
+      <div style="height:400px;position:relative"><div id="target" style="position:absolute;top:160px;left:0;width:30px;height:20px"></div></div>
+    </div></div>`);
+  expect(await evaluate(`JSON.stringify((()=>{
+    const scroller=document.getElementById('scroll'),target=document.getElementById('target'),result=[];
+    target.scrollIntoView({block:'nearest',container:'nearest'});result.push([scroller.scrollTop,scrollY]);
+    scroller.scrollTop=0;target.scrollIntoView({block:'start'});result.push([scroller.scrollTop,scrollY,target.getBoundingClientRect().top]);
+    return result;
+  })())`)).toBe(JSON.stringify([[80,0],[160,602,0]]));
+});

package/test/fetch-lifecycle.test.js ADDED Viewed

@@ -0,0 +1,161 @@
+import { afterAll, beforeAll, expect, test } from 'bun:test';
+import { RendererHost } from '../lib/renderer/host.js';
+import { NetworkService } from '../lib/network/network-service.js';
+let renderer;
+const active = new Set();
+const aborted = [];
+const bodies = new Map();
+const binaryBody = new Uint8Array([0, 255, 195, 40, 237, 160, 128, 240, 159, 152, 128]);
+beforeAll(async () => {
+  const network = new NetworkService({ fetch: async (url, init) => {
+    if (url.endsWith('/complete')) return new Response('complete');
+    if (url.endsWith('/binary')) return new Response(binaryBody, { headers: { 'content-type': 'application/octet-stream' } });
+    active.add(url);
+    if (url.endsWith('/headers')) return new Promise((resolve, reject) => {
+      init.signal.addEventListener('abort', () => {
+        active.delete(url); aborted.push(url); reject(init.signal.reason);
+      }, { once: true });
+    });
+    return new Response(new ReadableStream({ start(controller) {
+      bodies.set(url, controller);
+      controller.enqueue(new TextEncoder().encode('first chunk'));
+      init.signal.addEventListener('abort', () => {
+        active.delete(url); aborted.push(url); controller.error(init.signal.reason);
+      }, { once: true });
+    } }));
+  } });
+  renderer = new RendererHost({ network, timeout: 20_000 });
+  await renderer.start();
+});
+afterAll(() => renderer?.close());
+const load = () => renderer.call('loadDocument', {
+  url: 'https://page.test/', contentType: 'text/html', status: 200,
+  source: '<!doctype html><title>fetch lifecycle</title><p>Ready</p>',
+});
+const evaluate = source => renderer.call('evaluate', source);
+async function until(predicate) {
+  for (let attempt = 0; attempt < 100; attempt++) {
+    if (await predicate()) return;
+    await Bun.sleep(10);
+  }
+  throw new Error('condition timed out');
+}
+test('aborting after response headers errors the streaming body with the supplied reason', async () => {
+  await load();
+  await evaluate(`window.controller = new AbortController(); window.ready = false;
+    fetch('/stream', { signal: controller.signal }).then(response => {
+      window.result = 'pending'; window.ready = true;
+      response.text().then(text => result = text, error => result = error);
+    });`);
+  await until(async () => await evaluate('ready'));
+  await evaluate(`controller.abort('cancelled body')`);
+  await until(async () => await evaluate('result') === 'cancelled body');
+  await until(() => active.size === 0);
+  expect(aborted).toContain('https://page.test/stream');
+});
+test('same-origin navigation cancels old document fetches before and after headers', async () => {
+  await load();
+  await evaluate(`fetch('/body').then(r => r.text()).catch(() => {});
+    fetch('/headers').catch(() => {}); undefined;`);
+  await until(() => active.size === 2);
+  await load();
+  await until(() => active.size === 0);
+  expect(aborted).toContain('https://page.test/body');
+  expect(aborted).toContain('https://page.test/headers');
+  expect(await evaluate(`fetch('/complete').then(r => r.text())`)).toBe('complete');
+});
+test('aborting before headers preserves an arbitrary AbortSignal reason', async () => {
+  await load();
+  await evaluate(`window.controller = new AbortController(); window.result = 'pending';
+    fetch('/headers', {signal: controller.signal}).catch(error => result = error); undefined;`);
+  await until(() => active.size === 1);
+  await evaluate(`controller.abort('cancelled headers')`);
+  await until(async () => await evaluate('result') === 'cancelled headers');
+  await until(() => active.size === 0);
+  expect(await evaluate('result')).toBe('cancelled headers');
+});
+test('navigation cancels unfinished image, script and stylesheet resource transfers', async () => {
+  await load();
+  await evaluate(`const image = document.createElement('img'); image.src = '/image/headers'; document.body.append(image);
+    const script = document.createElement('script'); script.src = '/script/headers'; document.head.append(script);
+    const style = document.createElement('link'); style.rel = 'stylesheet'; style.href = '/style/headers'; document.head.append(style);
+    undefined;`);
+  await until(() => active.size === 3);
+  await load();
+  await until(() => active.size === 0);
+  for (const kind of ['image', 'script', 'style']) expect(aborted).toContain(`https://page.test/${kind}/headers`);
+  expect(await evaluate('document.title')).toBe('fetch lifecycle');
+});
+const startXhr = (path, timeout = 0) => evaluate(`
+  window.xhrEvents = [];
+  window.xhr = new XMLHttpRequest();
+  xhr.timeout = ${timeout};
+  for (const type of ['load', 'error', 'abort', 'timeout', 'loadend']) {
+    xhr.addEventListener(type, () => xhrEvents.push(type));
+  }
+  xhr.open('GET', ${JSON.stringify(path)});
+  xhr.send();
+  undefined;
+`);
+test('XMLHttpRequest reports body errors after headers and clears the failed response', async () => {
+  await load();
+  await startXhr('/xhr-body-error');
+  await until(async () => await evaluate('xhr.readyState') === 3);
+  bodies.get('https://page.test/xhr-body-error').error(new Error('body connection closed'));
+  active.delete('https://page.test/xhr-body-error');
+  await until(async () => (await evaluate('xhrEvents')).includes('loadend'));
+  expect(await evaluate('xhrEvents')).toEqual(['error', 'loadend']);
+  expect(await evaluate('[xhr.readyState, xhr.status, xhr.statusText, xhr.responseURL, xhr.response, xhr.responseText, xhr.getAllResponseHeaders()]'))
+    .toEqual([4, 0, '', '', null, '', '']);
+});
+test('XMLHttpRequest abort after headers reports abort even with a configured timeout', async () => {
+  await load();
+  await startXhr('/xhr-body-abort', 10_000);
+  await until(async () => await evaluate('xhr.readyState') === 3);
+  await evaluate('xhr.abort()');
+  await until(async () => (await evaluate('xhrEvents')).includes('loadend'));
+  expect(await evaluate('xhrEvents')).toEqual(['abort', 'loadend']);
+  expect(await evaluate('xhr.status')).toBe(0);
+  await until(() => active.size === 0);
+});
+test('XMLHttpRequest timeout after headers reports timeout and releases the transfer', async () => {
+  await load();
+  await startXhr('/xhr-body-timeout', 100);
+  await until(async () => (await evaluate('xhrEvents')).includes('loadend'));
+  expect(await evaluate('xhrEvents')).toEqual(['timeout', 'loadend']);
+  expect(await evaluate('[xhr.readyState, xhr.status]')).toEqual([4, 0]);
+  await until(() => active.size === 0);
+});
+test('XMLHttpRequest binary response types preserve arbitrary bytes and return their platform types', async () => {
+  await load();
+  await evaluate(`Headers.prototype.get = function () { throw new Error('page Headers.get hook'); }; undefined;`);
+  for (const responseType of ['arraybuffer', 'blob']) {
+    const result = await evaluate(`new Promise((resolve, reject) => {
+      const request = new XMLHttpRequest();
+      request.open('GET', '/binary');
+      request.responseType = ${JSON.stringify(responseType)};
+      request.onload = async () => {
+        const value = request.response;
+        const bytes = request.responseType === 'blob' ? await value.arrayBuffer() : value;
+        resolve({ bytes: [...new Uint8Array(bytes)], isArrayBuffer: value instanceof ArrayBuffer,
+          isBlob: value instanceof Blob, type: value.type ?? null, responseText: request.responseText,
+          contentType: request.getResponseHeader('content-type') });
+      };
+      request.onerror = () => reject(new Error('binary request failed'));
+      request.send();
+    })`);
+    expect(result).toEqual({ bytes: [...binaryBody], isArrayBuffer: responseType === 'arraybuffer',
+      isBlob: responseType === 'blob', type: responseType === 'blob' ? 'application/octet-stream' : null,
+      responseText: '', contentType: 'application/octet-stream' });
+  }
+});