buninu-browser 0.2.1 → 0.2.2

package/test/page-scripts.test.js

@@ -6,10 +6,20 @@ import { RendererHost } from "../lib/renderer/host.js";
  * because lockdown() would freeze the test runner's own realm.
  */
 const scripts = new Map();
+// A 2x3 red PNG.
+const RED_2X3_PNG = Buffer.from(
+  "iVBORw0KGgoAAAANSUhEUgAAAAIAAAADCAIAAAA2iEnWAAAAEElEQVR4nGP4z8AARAwoFABE0AX7pM/egAAAAABJRU5ErkJggg==",
+  "base64",
+);
+// HTML documents (iframes), by URL.
+const pages = new Map();
 const navigations = [];
 // Every resource request with its time, for the preload test.
 const requests = [];
 let renderer;
+let dripFinished = false;
+let dripAudioFinished = false;
+let pageFetchAborted = false;
 
 beforeAll(async () => {
   renderer = new RendererHost({
@@ -18,6 +28,16 @@ beforeAll(async () => {
     fetch: async (url, init = {}) => {
       const target = new URL(String(url));
       requests.push({ url: target.href, at: performance.now() });
+      if (target.pathname === "/slow-abort") {
+        return await new Promise((resolve, reject) => {
+          const aborted = () => {
+            pageFetchAborted = true;
+            reject(new DOMException("aborted", "AbortError"));
+          };
+          if (init.signal?.aborted) aborted();
+          else init.signal?.addEventListener("abort", aborted, { once: true });
+        });
+      }
       if (target.pathname === "/slow.css") {
         await Bun.sleep(400);
         return new Response("body { color: red }", { headers: { "content-type": "text/css" } });
@@ -39,8 +59,73 @@ beforeAll(async () => {
       }
       if (target.pathname === "/video.mp4") return new Response(Bun.file(new URL("./fixtures/video.mp4", import.meta.url)),
         { headers: { "content-type": "video/mp4" } });
+      if (target.pathname === "/red-2x3.png") return new Response(RED_2X3_PNG, { headers: { "content-type": "image/png" } });
+      // 30s: it cannot reach its end while a test clicks it, however slow the run.
+      if (target.pathname === "/long-video.mp4") return new Response(Bun.file(new URL("./fixtures/long-video.mp4", import.meta.url)),
+        { headers: { "content-type": "video/mp4" } });
       if (target.pathname === "/tone.mp3") return new Response(Bun.file(new URL("./fixtures/tone.mp3", import.meta.url)),
         { headers: { "content-type": "audio/mpeg" } });
+      if (target.pathname === "/drip-tone.mp3") {
+        const tone = new Uint8Array(await Bun.file(new URL("./fixtures/tone.mp3", import.meta.url)).bytes());
+        const bytes = new Uint8Array(tone.byteLength * 8);
+        for (let index = 0; index < 8; index++) bytes.set(tone, index * tone.byteLength);
+        let offset = 0;
+        const stream = new ReadableStream({
+          async pull(controller) {
+            if (!offset) {
+              controller.enqueue(bytes.subarray(0, tone.byteLength));
+              offset = tone.byteLength;
+              return;
+            }
+            await Bun.sleep(300);
+            controller.enqueue(bytes.subarray(offset));
+            controller.close();
+            dripAudioFinished = true;
+          },
+        });
+        return new Response(stream, { headers: { "content-type": "audio/mpeg" } });
+      }
+      // First 8 KiB immediately, the rest after a pause, so a test can see
+      // playback begin before the body has finished.
+      if (target.pathname === "/drip-video.mp4") {
+        const bytes = new Uint8Array(await Bun.file(new URL("./fixtures/long-video.mp4", import.meta.url)).bytes());
+        const head = bytes.subarray(0, 8192);
+        const rest = bytes.subarray(8192);
+        let sentHead = false;
+        const stream = new ReadableStream({
+          async pull(controller) {
+            if (!sentHead) {
+              sentHead = true;
+              controller.enqueue(head);
+              return;
+            }
+            await Bun.sleep(1500);
+            controller.enqueue(rest);
+            controller.close();
+            dripFinished = true;
+          },
+        });
+        return new Response(stream, { headers: { "content-type": "video/mp4" } });
+      }
+      // More than forty small chunks before a decodable prefix. This catches
+      // arbitrary probe-attempt limits without delaying the test.
+      if (target.pathname === "/many-chunk-video.mp4") {
+        const bytes = new Uint8Array(await Bun.file(new URL("./fixtures/video.mp4", import.meta.url)).bytes());
+        let offset = 0;
+        const stream = new ReadableStream({
+          pull(controller) {
+            const length = offset < 128 ? 1 : bytes.byteLength - offset;
+            controller.enqueue(bytes.subarray(offset, offset + length));
+            offset += length;
+            if (offset >= bytes.byteLength) controller.close();
+          },
+        });
+        return new Response(stream, { headers: { "content-type": "video/mp4" } });
+      }
+      if (target.pathname === "/invalid-video.mp4") {
+        return new Response("not a media container", { headers: { "content-type": "video/mp4" } });
+      }
+      if (pages.has(target.href)) return new Response(pages.get(target.href), { headers: { "content-type": "text/html" } });
       const body = scripts.get(target.href);
       return body === undefined
         ? new Response("missing", { status: 404 })
@@ -86,6 +171,161 @@ test("classic scripts share globals, load in order and fire DOMContentLoaded the
   expect(await evaluate("document.readyState")).toBe("complete");
 });
 
+test("large classic scripts prepared on the rewrite thread run in document order with the others", async () => {
+  // Past the size the renderer prepares off its main thread (see prepareOffThread).
+  const padding = `/* ${"x".repeat(40 * 1024)} */`;
+  scripts.set("https://page.test/big.js", `${padding}\nvar bigVar = 'big'; function bigFunction() { return this === window; } order.push('big:' + bigFunction());`);
+  scripts.set("https://page.test/small.js", "order.push('small:' + bigVar);");
+  await load(`
+    <script>var order = ['first'];</script>
+    <script src="big.js"></script>
+    <script src="small.js"></script>
+    <script>${padding}
+      order.push('inline-big:' + (typeof bigFunction) + ':' + (function () { return this === window; })());</script>
+    <script>order.push('last');</script>`);
+  expect(await evaluate("order.join(',')")).toBe("first,big:true,small:big,inline-big:function:true,last");
+  expect(await evaluate("bigFunction.toString().includes('$buninu$')")).toBe(false);
+  scripts.set("https://page.test/dynamic-big.js", `${padding}\nwindow.dynamicBig = (function () { return this === window; })();`);
+  await evaluate("document.body.appendChild(Object.assign(document.createElement('script'), { src: 'dynamic-big.js' })), 0");
+  for (let i = 0; i < 50 && await evaluate("window.dynamicBig") !== true; i++) await Bun.sleep(50);
+  expect(await evaluate("window.dynamicBig")).toBe(true);
+});
+
+test("functions a direct eval defines keep live access to the caller's variables", async () => {
+  await load(`<script>
+    window.evalScope = (function () {
+      var count = 0, label = "a";
+      const bump = eval("0,function (step) { count += step; return { count, label }; }");
+      const relabel = eval("0,function (next) { label = next; }");
+      const first = bump(2);
+      relabel("b");
+      count = 10;
+      const second = bump(1);
+      return [first.count, first.label, second.count, second.label, count, label, String(bump)];
+    })();
+  </script>`);
+  expect(JSON.parse(await evaluate("JSON.stringify(evalScope)"))).toEqual([
+    2, "a", 11, "b", 11, "b", "function (step) { count += step; return { count, label }; }",
+  ]);
+});
+
+test("direct eval preserves receivers of lexical calls and tagged templates", async () => {
+  await load(`<script>
+    window.evalReceivers = (function () {
+      function strict() { "use strict"; return this === undefined; }
+      function sloppy() { return this === window; }
+      const object = { method() { return this === object; } };
+      const missing = null;
+      const source = "(function () { return [strict(), strict?.(), strict\u0060tag\u0060, sloppy(), object.method(), missing?.()]; })";
+      const made = eval(source);
+      return [made(), made.toString() === source.slice(1, -1)];
+    })();
+  </script>`);
+  expect(JSON.parse(await evaluate("JSON.stringify(evalReceivers)"))).toEqual([
+    [true, true, true, true, true, null], true,
+  ]);
+});
+
+test("documents and shadow roots have adoptedStyleSheets, which page patches of Element.prototype may extend", async () => {
+  await load(`<div id="host"></div><script>
+    // As a popover polyfill does: every new shadow root adopts its sheet.
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(":host { color: red }");
+    const attach = Element.prototype.attachShadow;
+    Element.prototype.attachShadow = function (init) {
+      const root = attach.call(this, init);
+      root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+      return root;
+    };
+    const root = document.getElementById("host").attachShadow({ mode: "open" });
+    document.adoptedStyleSheets.push(sheet);
+    window.adopted = [
+      Array.isArray(document.adoptedStyleSheets), document.adoptedStyleSheets.length, root.adoptedStyleSheets[0] === sheet,
+      (() => { try { document.adoptedStyleSheets = [{}]; return "accepted"; } catch (error) { return error.name; } })(),
+      (() => { try { root.adoptedStyleSheets = null; return "accepted"; } catch (error) { return error.name; } })(),
+    ];
+  </script>`);
+  expect(JSON.parse(await evaluate("JSON.stringify(adopted)"))).toEqual([true, 1, true, "TypeError", "TypeError"]);
+});
+
+test("Web APIs have their Web IDL property shapes", async () => {
+  await load(`<p>shape</p>`);
+  const shape = JSON.parse(await evaluate(`JSON.stringify((() => {
+    const d = (o, k) => Object.getOwnPropertyDescriptor(o, k);
+    const title = d(HTMLElement.prototype, "title");
+    const constant = d(Node, "ELEMENT_NODE");
+    const doc = d(window, "document");
+    const self = d(window, "self");
+    return [
+      title.get.name, title.set.name, d(HTMLElement.prototype, "onclick").get.name,
+      clearTimeout.name, clearInterval.name, cancelAnimationFrame.name, clearTimeout === clearInterval,
+      clearTimeout.length, cancelAnimationFrame.length, scrollTo.length, EventTarget.prototype.addEventListener.length,
+      Element.prototype.toggleAttribute.length, Promise.length, Function.length,
+      constant.writable, constant.configurable, d(EventTarget.prototype, "constructor").enumerable,
+      typeof doc.get, doc.configurable, doc.enumerable, typeof self.set, d(window, "console").enumerable,
+      (() => { window.innerWidth = 5; return window.innerWidth; })(),
+    ];
+  })())`));
+  expect(shape).toEqual([
+    "get title", "set title", "get onclick",
+    "clearTimeout", "clearInterval", "cancelAnimationFrame", false,
+    0, 1, 0, 2,
+    1, 1, 1,
+    false, false, false,
+    "function", false, true, "function", false,
+    5,
+  ]);
+});
+
+test("each HTML element has its interface, and unknown names are HTMLUnknownElement", async () => {
+  await load(`<p>tags</p>`);
+  const names = await evaluate(`["ins", "col", "caption", "data", "xmp", "article", "lh", "blink", "my-widget", "audio"]
+    .map((tag) => Object.prototype.toString.call(document.createElement(tag)).slice(8, -1)
+      + (document.createElement(tag) instanceof HTMLUnknownElement ? "?" : "")).join()`);
+  expect(names).toBe("HTMLModElement,HTMLTableColElement,HTMLTableCaptionElement,HTMLDataElement,HTMLPreElement,"
+    + "HTMLElement,HTMLUnknownElement?,HTMLUnknownElement?,HTMLElement,HTMLAudioElement");
+  expect(await evaluate("Object.hasOwn(HTMLMediaElement.prototype, 'currentTime') && !Object.hasOwn(HTMLAudioElement.prototype, 'currentTime')")).toBe(true);
+});
+
+test("unhandled rejections fire unhandledrejection, then rejectionhandled when caught later", async () => {
+  await load(`<script>
+    window.log = [];
+    addEventListener("unhandledrejection", (event) => {
+      log.push(event.type, event instanceof PromiseRejectionEvent, event.reason, event.promise === late, event.cancelable);
+      event.preventDefault();
+    });
+    onrejectionhandled = (event) => log.push(event.type, event.reason, event.promise === late);
+    var late = Promise.reject("why");
+    setTimeout(() => late.catch(() => {}), 50);
+  </script>`);
+  expect(await waitFor("log.length === 8", 3000)).toBe(true);
+  expect(await evaluate("JSON.stringify(log)")).toBe(JSON.stringify([
+    "unhandledrejection", true, "why", true, true, "rejectionhandled", "why", true,
+  ]));
+  expect(await evaluate(`(() => { const p = Promise.resolve(); const e = new PromiseRejectionEvent("x", { promise: p, reason: 1 });
+    return [e.promise === p, e.reason, String(e), PromiseRejectionEvent.length,
+      (() => { try { new PromiseRejectionEvent("x", {}); return "ok"; } catch (error) { return error.name; } })()].join(); })()`))
+    .toBe("true,1,[object PromiseRejectionEvent],2,TypeError");
+});
+
+test("navigator reports cookies and User-Agent Client Hints consistently", async () => {
+  await load(`<script>
+    navigator.userAgentData.getHighEntropyValues(['uaFullVersion']).then(value => {
+      document.title = [navigator.cookieEnabled, navigator.userAgentData.platform,
+        navigator.userAgentData.brands[1].brand, value.uaFullVersion].join(',');
+    });
+  </script>`);
+  expect(await waitFor("document.title.startsWith('true,Linux,Chromium,')")).toBe(true);
+});
+
+test("events generated by browser input are trusted, script events are not", async () => {
+  await load(`<button style="width:100px;height:40px" onclick="window.trust = event.isTrusted">go</button>`);
+  expect(await evaluate("new Event('click').isTrusted")).toBe(false);
+  const rect = await evaluate(`(() => { const r = document.querySelector('button').getBoundingClientRect(); return { x:r.x, y:r.y, width:r.width, height:r.height } })()`);
+  await renderer.call("click", rect.x + rect.width / 2, rect.y + rect.height / 2);
+  expect(await evaluate("window.trust")).toBe(true);
+});
+
 test("parser-blocking head scripts run before document.body exists", async () => {
   await load(`<head><script>window.bodyDuringHead = document.body</script></head><body><p>ready</p></body>`);
   expect(await evaluate("bodyDuringHead === null")).toBe(true);
@@ -104,6 +344,28 @@ test("anchors expose parsed hyperlink URL components", async () => {
   expect(await evaluate(`document.getElementById("link").href`)).toBe("https://other.test/path?q=one#part");
 });
 
+test("form.elements is a live named collection of form controls", async () => {
+  await load(`<form id="form"><input name="query"><button id="send">go</button></form>`);
+  expect(await evaluate(`(() => { const form = document.getElementById('form'); return [
+    form.elements.length, form.elements.namedItem('query') === form.elements[0],
+    form.elements.namedItem('send') === document.getElementById('send')
+  ]; })()`)).toEqual([2, true, true]);
+  await evaluate(`document.getElementById('form').appendChild(document.createElement('select'))`);
+  expect(await evaluate("document.getElementById('form').elements.length")).toBe(3);
+});
+
+test("constructable CSSStyleSheet supports feature checks and basic rule mutation", async () => {
+  await load(`<p>cssom</p>`);
+  expect(await evaluate(`(async () => {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync('p { color: red }');
+    const inserted = sheet.insertRule('b { display: block }');
+    const same = await sheet.replace('i { color: blue }');
+    return [sheet instanceof CSSStyleSheet, sheet.cssRules[0] instanceof CSSStyleRule,
+      inserted, same === sheet, sheet.cssRules[0].cssText, typeof CSSGroupingRule];
+  })()`)).toEqual([true, true, 1, true, "i { color: blue }", "function"]);
+});
+
 test("getAttributeNode exposes a live Attr view", async () => {
   await load(`<form id="search" onsubmit="return false"></form>`);
   expect(await evaluate(`(() => { const form = document.getElementById("search"); const attr = form.getAttributeNode("onsubmit");
@@ -112,6 +374,23 @@ test("getAttributeNode exposes a live Attr view", async () => {
     .toEqual(["onsubmit", "return false", 2, true, true, "return true", null]);
 });
 
+test("element.attributes is a live NamedNodeMap by index and by name", async () => {
+  await load(`<img id="pic" src="a.png" alt="x">`);
+  expect(await evaluate(`(() => { const img = document.getElementById("pic"); const map = img.attributes;
+    const before = [map.length, map[0].name, map.src.value, map.getNamedItem("alt").value, map.item(9), map.missing === undefined,
+      [...map].map((attribute) => attribute.name).join(), map === img.attributes, "src" in map];
+    img.setAttribute("title", "t"); map.removeNamedItem("alt");
+    return [...before, map.length, Array.from(map, (attribute) => attribute.name + "=" + attribute.value).join()]; })()`))
+    .toEqual([3, "id", "a.png", "x", null, true, "id,src,alt", true, true, 3, "id=pic,src=a.png,title=t"]);
+});
+
+test("document.elementFromPoint finds the topmost element painted there", async () => {
+  await load(`<div id="under" style="height:60px"><span id="text">text</span></div>
+    <div id="over" style="position:absolute;top:0;left:100px;width:50px;height:50px"></div>`);
+  expect(await evaluate(`[document.elementFromPoint(5, 5)?.id, document.elementFromPoint(110, 10)?.id,
+    document.elementFromPoint(300, 30)?.id, document.elementFromPoint(-1, 5)]`)).toEqual(["text", "over", "under", null]);
+});
+
 test("scripts change the DOM and the next screenshot shows it", async () => {
   await load(`<div id="box" style="height:20px"></div>
     <script>document.getElementById('box').style.background = 'rgb(255, 0, 0)';
@@ -299,7 +578,7 @@ test("CSS.escape produces selectors for leading digits and punctuation", async (
 });
 
 test("a video plays frames and pauses when clicked", async () => {
-  await load(`<video src="/video.mp4" controls width="160" height="120"></video>`);
+  await load(`<video src="/long-video.mp4" controls width="160" height="120"></video>`);
   const bounds = await evaluate("document.querySelector('video').getBoundingClientRect().toJSON()");
   const x = bounds.x + bounds.width / 2;
   const y = bounds.y + bounds.height / 2;
@@ -308,8 +587,12 @@ test("a video plays frames and pauses when clicked", async () => {
   await renderer.call("click", x, y);
   expect(await evaluate("document.querySelector('video').paused")).toBeFalse();
   const started = await renderer.call("screenshot");
-  await Bun.sleep(300);
-  const during = await renderer.call("screenshot");
+  // A later frame, however slowly frames come under load.
+  let during = started;
+  for (const deadline = Date.now() + 3000; during === started && Date.now() < deadline;) {
+    await Bun.sleep(100);
+    during = await renderer.call("screenshot");
+  }
   expect(during).not.toBe(before);
   expect(during).not.toBe(started);
   expect(await evaluate("document.querySelector('video').currentTime > 0")).toBeTrue();
@@ -460,6 +743,17 @@ test("performance.timing follows the document lifecycle", async () => {
     .toBe(JSON.stringify([[true, 0], true, true, 0, 21]));
 });
 
+test("each document starts a new performance timeline", async () => {
+  await load('<p>first</p>');
+  const previousOrigin = await evaluate('performance.timeOrigin');
+  await Bun.sleep(100);
+  await load('<script>var initialNow = performance.now(); var frameTime; requestAnimationFrame(t => frameTime = t);</script>');
+  expect(await evaluate('performance.timeOrigin')).toBeGreaterThan(previousOrigin);
+  expect(await evaluate('initialNow')).toBeLessThan(100);
+  expect(await waitFor('typeof frameTime === "number"')).toBe(true);
+  expect(await evaluate('frameTime >= initialNow && frameTime <= performance.now()')).toBe(true);
+});
+
 test("location assignment asks the controller to navigate", async () => {
   navigations.length = 0;
   await load(`<script>setTimeout(() => { location.href = '/elsewhere?x=1' }, 0)</script>`);
@@ -474,6 +768,124 @@ test("geometry APIs read the real layout", async () => {
   expect(await evaluate("document.getElementById('box').offsetWidth + 'x' + innerWidth")).toBe("120x400");
 });
 
+test("DOM objects have their interfaces' shape: events, element.style, image attributes and Node methods", async () => {
+  await load(`<div id="host">a<b>c</b></div><script>
+    const event = document.createEvent("MouseEvents");
+    const enumerated = []; for (const key in event) enumerated.push(key);
+    const image = document.createElement("img");
+    const style = document.body.style;
+    style.setProperty("margin-top", "3px");
+    const frame = document.createElement("iframe");
+    document.body.appendChild(frame);
+    const host = document.getElementById("host");
+    host.appendChild(document.createTextNode("x"));
+    host.appendChild(document.createTextNode("y"));
+    host.normalize();
+    window.shapes = {
+      event: [Object.prototype.toString.call(event), event instanceof MouseEvent, event instanceof UIEvent,
+        Object.getOwnPropertyNames(event).join(), enumerated.includes("clientX"), enumerated.includes("preventDefault"),
+        typeof event.initMouseEvent, event.view, MouseEvent.prototype.hasOwnProperty("clientX"), Event.prototype.hasOwnProperty("clientX")],
+      unsupportedEvent: (() => { try { document.createEvent("NoSuchEvents"); return "created"; } catch (error) { return error.name; } })(),
+      style: [Object.prototype.toString.call(style), style instanceof CSSStyleDeclaration, style.setProperty.toString(),
+        style.getPropertyValue("margin-top"), style.marginTop],
+      image: [image.useMap, image.name, image.complete, image.decoding, image.crossOrigin, image.hspace],
+      frame: frame.contentWindow !== null,
+      node: [host.childNodes.length, host.isSameNode(host), host.isEqualNode(host.cloneNode(true)),
+        host.lookupNamespaceURI(null), host.lookupPrefix("http://www.w3.org/1999/xhtml"), host.getRootNode() === document, Node.NOTATION_NODE],
+    };
+  </script>`);
+  expect(JSON.parse(await evaluate("JSON.stringify(shapes)"))).toEqual({
+    event: ["[object MouseEvent]", true, true, "isTrusted", true, true, "function", null, true, false],
+    unsupportedEvent: "NotSupportedError",
+    style: ["[object CSSStyleDeclaration]", true, "function setProperty() { [native code] }", "3px", "3px"],
+    image: ["", "", true, "auto", null, 0],
+    frame: true,
+    node: [3, true, true, "http://www.w3.org/1999/xhtml", null, true, 12],
+  });
+});
+
+test("HTMLElement.prototype inherits Element's members, so patches to Element.prototype reach HTML elements", async () => {
+  await load(`<div id="host"></div><script>
+    const original = Element.prototype.setAttribute;
+    Element.prototype.setAttribute = function (name, value) { window.patched = name; return original.call(this, name, value); };
+    document.getElementById("host").setAttribute("data-x", "1");
+    window.shape = [Object.hasOwn(HTMLElement.prototype, "setAttribute"), Object.hasOwn(HTMLElement.prototype, "focus"),
+      Object.hasOwn(HTMLElement.prototype, "onclick"), Object.hasOwn(Element.prototype, "focus"), Object.hasOwn(Element.prototype, "id")];
+  </script>`);
+  expect(await evaluate("window.patched")).toBe("data-x");
+  expect(JSON.parse(await evaluate("JSON.stringify(shape)"))).toEqual([false, true, true, false, true]);
+});
+
+test("Trusted Types: policies make trusted values, and eval runs a TrustedScript", async () => {
+  await load(`<div id="host"></div><script>
+    const policy = trustedTypes.createPolicy("page", { createHTML: (s) => s + "!", createScript: (s) => s, createScriptURL: (s) => s });
+    const html = policy.createHTML("<b>x</b>");
+    document.getElementById("host").innerHTML = html;
+    const script = policy.createScript("1 + 2");
+    window.trusted = [
+      Object.prototype.toString.call(trustedTypes), html instanceof TrustedHTML, String(html), JSON.stringify(html),
+      trustedTypes.isHTML(html), trustedTypes.isHTML("x"), trustedTypes.isScript(script), policy.name,
+      eval(script), (0, eval)(script), eval(7), trustedTypes.emptyHTML.toString(),
+      trustedTypes.getPropertyType("div", "innerHTML"), trustedTypes.getAttributeType("script", "src"), trustedTypes.defaultPolicy,
+      (() => { try { trustedTypes.createPolicy("bare").createHTML("x"); return "created"; } catch (error) { return error.name; } })(),
+      (() => { try { new TrustedHTML(); return "constructed"; } catch (error) { return error.name; } })(),
+      document.getElementById("host").innerHTML,
+      String(trustedTypes.createPolicy),
+    ];
+  </script>`);
+  expect(JSON.parse(await evaluate("JSON.stringify(trusted)"))).toEqual([
+    "[object TrustedTypePolicyFactory]", true, "<b>x</b>!", '"<b>x</b>!"',
+    true, false, true, "page",
+    3, 3, 7, "",
+    "TrustedHTML", "TrustedScriptURL", null,
+    "TypeError", "TypeError",
+    "<b>x</b>!",
+    "function createPolicy() { [native code] }",
+  ]);
+});
+
+test("addEventListener reads capture, once, passive and signal, and an aborted signal removes the listener", async () => {
+  await load(`<div id="host"></div><script>
+    const read = [];
+    const options = {};
+    for (const name of ["passive", "signal", "once", "capture"]) {
+      Object.defineProperty(options, name, { get() { read.push(name); return undefined; } });
+    }
+    const host = document.getElementById("host");
+    host.addEventListener("ping", () => {}, options);
+    const controller = new AbortController();
+    window.calls = 0;
+    host.addEventListener("ping", () => window.calls++, { signal: controller.signal });
+    host.dispatchEvent(new Event("ping"));
+    controller.abort();
+    host.dispatchEvent(new Event("ping"));
+    host.addEventListener("ping", () => window.calls++, { signal: controller.signal });
+    host.dispatchEvent(new Event("ping"));
+    window.optionReads = read.join();
+    window.badSignal = (() => { try { host.addEventListener("ping", () => {}, { signal: {} }); return "added"; } catch (error) { return error.name; } })();
+  </script>`);
+  expect(await evaluate("optionReads")).toBe("capture,once,passive,signal");
+  expect(await evaluate("calls")).toBe(1);
+  expect(await evaluate("badSignal")).toBe("TypeError");
+});
+
+test("offsetParent is the nearest positioned ancestor, and offsets are measured from its padding edge", async () => {
+  await load(`<div id="outer" style="margin-left:20px;padding:5px">
+    <div id="toggle" style="position:relative;border:3px solid;padding:8px;width:200px;overflow:hidden">
+      <div id="tab" style="width:50px;height:10px"></div>
+      <div id="selection" style="position:absolute;left:0;top:0;width:100%;height:4px"></div>
+    </div></div>`);
+  expect(JSON.parse(await evaluate(`JSON.stringify((() => {
+    const tab = document.getElementById("tab"), toggle = document.getElementById("toggle");
+    return [tab.offsetParent === toggle, tab.offsetLeft, tab.offsetTop, toggle.offsetParent === document.body,
+      document.body.offsetParent, toggle.scrollWidth, toggle.clientWidth, document.body.offsetLeft, document.body.offsetTop];
+  })())`))).toEqual([
+    // An absolutely positioned child as wide as the padding box does not
+    // add the end padding again: nothing overflows. The body's offsets are 0.
+    true, 8, 8, true, null, 216, 216, 0, 0,
+  ]);
+});
+
 test("page scripts cannot escape the sandbox or reach engine state", async () => {
   await load(`<p id="p">x</p><script>
     var probes = {};
@@ -484,8 +896,10 @@ test("page scripts cannot escape the sandbox or reach engine state", async () =>
     attempt('privateState', () => Object.getOwnPropertySymbols(document).length + '/' + Object.getOwnPropertyNames(document).length);
     attempt('newBinding', () => new document.constructor());
     attempt('patchPrototype', () => { Object.getPrototypeOf(document.body).appendChild = () => 'pwned'; return 'patched'; });
-    attempt('patchIntrinsic', () => { Array.prototype.includes = () => true; return 'patched'; });
-    attempt('patchUrl', () => { URL.prototype.toString = () => 'pwned'; return 'patched'; });
+    // Classic scripts are sloppy-mode code: assigning to a frozen property
+    // fails silently, as in browsers. What matters is that nothing changed.
+    attempt('patchIntrinsic', () => { Array.prototype.includes = () => true; return [].includes(1) ? 'patched' : 'blocked'; });
+    attempt('patchUrl', () => { URL.prototype.toString = () => 'pwned'; return String(new URL('https://a.test/')) === 'pwned' ? 'patched' : 'blocked'; });
     attempt('dynamicImport', () => { const pending = eval('import("node:fs")'); pending.catch(() => {}); return pending instanceof Promise ? 'promise' : 'wrong'; });
   </script>`);
   const probes = await evaluate("JSON.stringify(probes)");
@@ -610,6 +1024,27 @@ test("styles inside noscript do not apply while page scripting is enabled", asyn
   expect(await evaluate(`getComputedStyle(document.getElementById("visible")).display`)).toBe("block");
 });
 
+test("pages can wrap Promise methods without modifying another realm", async () => {
+  await load(`<script>
+    window.promiseCalls = 0;
+    const original = Promise.prototype.then;
+    Promise.prototype.then = function (...args) { promiseCalls++; return original.apply(this, args); };
+    Promise.prototype.catch = function (reject) { return this.then(undefined, reject); };
+    Promise.prototype.finally = function (done) { return this.then(value => { done(); return value; }); };
+    window.promiseResult = null;
+    Promise.resolve(42).finally(() => {}).then(value => { promiseResult = value; });
+  </script>`);
+  await waitFor("promiseResult === 42");
+  expect(await evaluate("promiseCalls")).toBeGreaterThanOrEqual(2);
+  expect(await evaluate("Promise.resolve(0) instanceof Promise")).toBe(true);
+  expect(await evaluate("(async () => 1)() instanceof Promise")).toBe(true);
+  expect(await evaluate("(() => { class Child extends Promise {} return [new Child(r => r()) instanceof Child, Promise.resolve() instanceof Child]; })()")).toEqual([true, false]);
+  expect(await evaluate("['all', 'allSettled', 'any', 'race', 'reject', 'resolve', 'withResolvers'].every((name) => Object.hasOwn(Promise, name)) && Object.prototype.toString.call(Promise.resolve())")).toBe("[object Promise]");
+  await load(`<script>window.promiseResult = null; Promise.all([Promise.resolve(7)]).then(v => promiseResult = v[0]);</script>`);
+  await waitFor("promiseResult === 7");
+  expect(await evaluate("typeof promiseCalls")).toBe("undefined");
+});
+
 test("page RegExp instances can override their own toString without changing the intrinsic", async () => {
   await load(`<script>
     const pattern = /demo/;
@@ -710,6 +1145,130 @@ test("fetch and XMLHttpRequest go through the controller with cookies and CORS",
   });
 });
 
+test("fetch(request) uses the Request's internal state, not properties script defined on it", async () => {
+  await load(`<script>
+    window.network = {};
+    (async () => {
+      // Players check that fetch is not patched this way: the request still
+      // fetches its own data: URL whatever its own properties now say.
+      const request = new Request('data:application/json;base64,' + btoa(JSON.stringify({ ok: 42 })));
+      Object.defineProperty(request, 'url', { get: () => 'https://page.test/api/echo' });
+      Object.defineProperty(request, 'method', { get: () => 'POST' });
+      Object.defineProperty(request, 'bodyUsed', { get: () => true });
+      Object.defineProperty(request, 'mode', { get: () => 'same-origin' });
+      network.shadowed = (await (await fetch(request)).json()).ok;
+      const used = new Request('/api/echo', { method: 'POST', body: 'abc' });
+      await used.text();
+      network.used = await fetch(used).then(() => 'fetched', (error) => error.name);
+      network.stringType = (await (await fetch(new Request('/api/echo', { method: 'POST', body: 'abc' }))).json()).contentType;
+      network.done = true;
+    })();
+  </script>`);
+  for (let attempt = 0; attempt < 50 && !(await evaluate("network.done === true")); attempt++) await Bun.sleep(20);
+  expect(JSON.parse(await evaluate("JSON.stringify(network)"))).toEqual({
+    shadowed: 42,
+    used: "TypeError",
+    stringType: "text/plain;charset=UTF-8",
+    done: true,
+  });
+});
+
+test("classic scripts are sloppy-mode code whose missing receiver is the page global, never the engine's", async () => {
+  await load(`<script>
+    const page = (value) => value === window ? "page" : value && typeof value === "object" && ("Bun" in value || "process" in value) ? "ENGINE" : typeof value;
+    window.sloppy = {
+      call: page((function () { return this; })()),
+      nullCall: page((function () { return this; }).call(null)),
+      apply: page(Reflect.apply(function () { return this; }, undefined, [])),
+      fn: page(Function("return this")()),
+      evaluated: page(eval("(function () { return this; })")()),
+      indirect: page((0, eval)("(function () { return this; })")()),
+      topLevel: page(this),
+      callee: (function () { return typeof arguments.callee; })(),
+      withStatement: Function("with ({ a: 7 }) return a")(),
+      octal: Function("return 010")(),
+      implicitGlobal: (Function("implicitGlobal = 3")(), window.implicitGlobal),
+      strictStaysStrict: (function () { "use strict"; return this; })(),
+      engine: typeof Bun + " " + typeof process,
+    };
+  </script>`);
+  expect(JSON.parse(await evaluate("JSON.stringify(sloppy)"))).toEqual({
+    call: "page", nullCall: "page", apply: "page", fn: "page", evaluated: "page", indirect: "page", topLevel: "page",
+    callee: "function", withStatement: 7, octal: 8, implicitGlobal: 3, strictStaysStrict: undefined,
+    engine: "undefined undefined",
+  });
+});
+
+test("direct eval sees the caller's variables, and functions print the source the page wrote", async () => {
+  await load(`<script>
+    function counter(n) {
+      const step = 2;
+      eval("n += step");
+      return [n, eval("typeof step"), eval("0,function () { return n * step; }")()];
+    }
+    function rewritten(n) { for (; n-- > 0;) eval("n"); return [this, (async () => {}).constructor, "<!-- -->"]; }
+    window.evalResults = {
+      counter: counter(1),
+      declaresEval: eval('var eval = "shadowed"; eval'),
+      source: rewritten.toString(),
+      made: Function("a", "return this.a + a").toString(),
+    };
+  </script>`);
+  expect(JSON.parse(await evaluate("JSON.stringify(evalResults)"))).toEqual({
+    counter: [3, "number", 6],
+    declaresEval: "shadowed",
+    source: 'function rewritten(n) { for (; n-- > 0;) eval("n"); return [this, (async () => {}).constructor, "<!-- -->"]; }',
+    made: "function anonymous(a\n) {\nreturn this.a + a\n}",
+  });
+});
+
+test("Web APIs look like a browser's built-ins: native functions, interface prototypes and tags", async () => {
+  await load(`<script>
+    const descriptor = Object.getOwnPropertyDescriptor(Navigator.prototype, "userAgent");
+    window.shape = {
+      fetch: fetch.toString(),
+      fetchTag: Object.prototype.toString.call(fetch),
+      getter: descriptor.get.toString(),
+      illegalInvocation: (() => { try { descriptor.get.call({}); return "no error"; } catch (error) { return error.message; } })(),
+      illegalConstructor: (() => { try { new Navigator(); return "no error"; } catch (error) { return error.message; } })(),
+      navigatorOwn: Object.getOwnPropertyNames(navigator).length,
+      tags: [window, navigator, screen, document.body, localStorage, performance].map((value) => Object.prototype.toString.call(value)),
+      plugins: [navigator.plugins.length, navigator.mimeTypes.length, navigator.plugins[0].name, navigator.vendor],
+      storage: (localStorage.theme = "dark", [localStorage.getItem("theme"), Object.keys(localStorage)]),
+      enumerable: ["Array", "Navigator", "document", "setTimeout"].map((name) => Object.keys(window).includes(name)),
+      sesGlobals: [typeof Compartment, typeof harden, typeof lockdown],
+    };
+    localStorage.clear();
+  </script>`);
+  expect(JSON.parse(await evaluate("JSON.stringify(shape)"))).toEqual({
+    fetch: "function fetch() { [native code] }",
+    fetchTag: "[object Function]",
+    getter: "function get userAgent() { [native code] }",
+    illegalInvocation: "Illegal invocation",
+    illegalConstructor: "Illegal constructor",
+    navigatorOwn: 0,
+    tags: ["[object Window]", "[object Navigator]", "[object Screen]", "[object HTMLBodyElement]", "[object Storage]", "[object Performance]"],
+    plugins: [5, 2, "PDF Viewer", "Google Inc."],
+    storage: ["dark", ["theme"]],
+    enumerable: [false, false, true, true],
+    sesGlobals: ["undefined", "undefined", "undefined"],
+  });
+});
+
+test("aborting fetch cancels the controller's HTTP request", async () => {
+  pageFetchAborted = false;
+  await load(`<script>
+    const controller = new AbortController();
+    fetch('/slow-abort', { signal: controller.signal }).then(
+      () => { window.abortResult = 'resolved'; },
+      (error) => { window.abortResult = error.name; },
+    );
+    setTimeout(() => controller.abort(), 20);
+  </script>`);
+  expect(await waitFor("window.abortResult === 'AbortError'", 2000)).toBe(true);
+  expect(pageFetchAborted).toBe(true);
+});
+
 test("host mode: page globals that wrap host APIs do not call themselves, and rejections are not fatal", async () => {
   const host = new RendererHost({ timeout: 20_000, args: ["--dangerously-allow-host-js"] });
   try {
@@ -844,10 +1403,13 @@ test("Function constructors reached through prototypes work under SES", async ()
     var GeneratorFunction = (function* () {}).constructor;
     var plain = (function () {}).constructor;
     var classic = [[...new GeneratorFunction('yield 1; yield 2')()].join(), plain('return typeof window')(),
-      typeof Object.getPrototypeOf(async function* () {}).constructor('yield 1')];
+      typeof Object.getPrototypeOf(async function* () {}).constructor('yield 1'),
+      ({}).constructor === Object, typeof ({}).constructor.create];
   </script>`);
   for (let i = 0; i < 20 && !(await evaluate("typeof moduleResult")).startsWith("object"); i++) await Bun.sleep(25);
-  expect(await evaluate("JSON.stringify([moduleResult, classic])")).toBe(JSON.stringify([[3, true, "AsyncFunction"], ["1,2", "object", "function"]]));
+  expect(await evaluate("JSON.stringify([moduleResult, classic])")).toBe(JSON.stringify([
+    [3, true, "AsyncFunction"], ["1,2", "object", "function", true, "function"],
+  ]));
 });
 
 test("UI event constructors, table rows/cells and select options are available", async () => {
@@ -958,3 +1520,479 @@ test("scripts and module preloads are fetched while the stylesheets load, each o
   expect(times("/preload/skipped.js")).toEqual([]);
 });
 
+
+test("an error status shows the page the server sent, scripts included; an empty one gets a note", async () => {
+  await renderer.call("loadDocument", {
+    url: "https://page.test/limited",
+    source: `<!doctype html><title>check</title><body><form id="f"><p>unusual traffic</p></form><script>document.title = "ran";</script></body>`,
+    contentType: "text/html",
+    status: 429,
+    statusText: "Too Many Requests",
+  });
+  await renderer.call("whenLoaded");
+  expect(await evaluate("[document.title, !!document.getElementById('f'), document.body.innerText.includes('HTTP 429')].join()"))
+    .toBe("ran,true,false");
+  await renderer.call("loadDocument", { url: "https://page.test/gone", source: "", contentType: "text/html", status: 404, statusText: "Not Found" });
+  await renderer.call("whenLoaded");
+  expect(await evaluate("document.body.textContent")).toBe("HTTP 404 Not Found");
+});
+
+test("meta.content is the reflected attribute; template.content stays the fragment", async () => {
+  await load(`<template id="t"><b>x</b></template><script>
+    "use strict";
+    const meta = document.createElement("meta");
+    meta.httpEquiv = "origin-trial";
+    meta.content = "token";
+    const other = document.createElement("div");
+    other.content = 5;
+    window.metaResult = [meta.getAttribute("content"), meta.content, other.content,
+      document.getElementById("t").content.firstChild.nodeName].join();
+  </script>`);
+  expect(await evaluate("metaResult")).toBe("token,token,5,B");
+});
+
+test("a video starts from a prefix while the rest of the file is still downloading", async () => {
+  dripFinished = false;
+  await load(`<video id="v" src="/drip-video.mp4" width="160" height="120"></video>`);
+  await evaluate("document.getElementById('v').play()");
+  expect(dripFinished).toBe(false);
+  expect(await evaluate(`(() => { const v = document.getElementById('v');
+    return !v.paused && v.readyState >= 1 && v.currentTime > 0 && v.networkState === 2; })()`)).toBe(true);
+  const deadline = Date.now() + 4000;
+  while (!dripFinished && Date.now() < deadline) await Bun.sleep(50);
+  expect(dripFinished).toBe(true);
+});
+
+test("a video probe is not limited by the number of network chunks", async () => {
+  await load(`<video id="v" src="/many-chunk-video.mp4" width="160" height="120"></video>`);
+  await evaluate("document.getElementById('v').play()");
+  expect(await waitFor(`(() => { const v = document.getElementById('v');
+    return !v.paused && v.error === null && v.readyState >= 1 && v.currentTime > 0; })()`)).toBe(true);
+});
+
+test("a progressive MP3 updates its duration when the rest of the body arrives", async () => {
+  dripAudioFinished = false;
+  await load(`<audio id="a" src="/drip-tone.mp3"></audio>`);
+  await evaluate("document.getElementById('a').play()");
+  const initial = await evaluate("document.getElementById('a').duration");
+  expect(dripAudioFinished).toBe(false);
+  expect(await waitFor("document.getElementById('a').duration > " + initial, 3000)).toBe(true);
+  expect(dripAudioFinished).toBe(true);
+});
+
+test("an unsupported video exposes an error instead of silently stopping", async () => {
+  await load(`<video id="v" src="/invalid-video.mp4"></video>`);
+  await evaluate(`(() => { const v = document.getElementById("v");
+    window.mediaFailed = false;
+    v.addEventListener("error", () => { window.mediaFailed = true; });
+    v.play();
+  })()`);
+  expect(await waitFor("window.mediaFailed === true")).toBe(true);
+  expect(await evaluate(`(() => { const v = document.getElementById("v");
+    return v.paused && v.error?.code === 4 && v.networkState === 3; })()`)).toBe(true);
+});
+
+test("MediaSource appends a file in parts and the element can play it", async () => {
+  await load(`<video id="v" width="160" height="120"></video>`);
+  expect(await evaluate(`(() => {
+    try {
+      new MediaSource().addSourceBuffer('video/mp4; codecs="avc1.4d401e"');
+      return "no-throw";
+    } catch (error) {
+      return error.name;
+    }
+  })()`)).toBe("InvalidStateError");
+  expect(await evaluate(`[
+    MediaSource.isTypeSupported('video/mp4; codecs="avc1.4d401e"'),
+    MediaSource.isTypeSupported('audio/mp4; codecs="mp4a.40.2"'),
+    MediaSource.isTypeSupported('video/mp4; codecs="avc1.4d401e, mp4a.40.2"'),
+    MediaSource.isTypeSupported("video/mp4"),
+    MediaSource.isTypeSupported("video/x-unknown"),
+    HTMLMediaElement.HAVE_METADATA,
+    HTMLMediaElement.HAVE_NOTHING
+  ].join()`)).toBe("true,true,true,false,false,1,0");
+  await evaluate(`(() => {
+    const video = document.getElementById("v");
+    const source = new MediaSource();
+    window.ms = source;
+    window.mse = {};
+    video.src = URL.createObjectURL(source);
+    source.addEventListener("sourceopen", () => { window.mse.open = source.readyState; });
+  })()`);
+  await waitFor("window.mse.open === 'open'");
+  await evaluate(`(async () => {
+    const bytes = new Uint8Array(await (await fetch("/video.mp4")).arrayBuffer());
+    const buffer = window.ms.addSourceBuffer('video/mp4; codecs="avc1.4d401e, mp4a.40.2"');
+    const middle = bytes.length >> 1;
+    let updates = 0;
+    buffer.appendBuffer(bytes.subarray(0, middle));
+    buffer.addEventListener("updateend", () => {
+      updates += 1;
+      window.mse.updates = updates;
+      window.mse.ready = document.getElementById("v").readyState;
+      if (updates === 1) {
+        document.getElementById("v").play();
+        buffer.appendBuffer(bytes.subarray(middle));
+      } else {
+        window.mse.buffered = buffer.buffered.length ? buffer.buffered.end(0) : 0;
+        window.ms.endOfStream();
+        window.mse.ended = window.ms.readyState;
+      }
+    });
+  })()`);
+  await waitFor("window.mse.updates === 2 && window.mse.ended === 'ended'");
+  expect(await waitFor("document.getElementById('v').readyState >= 1")).toBe(true);
+  expect(await evaluate("window.mse.buffered > 0")).toBe(true);
+  expect(await waitFor("(() => { const v = document.getElementById('v'); return !v.paused && v.currentTime > 0; })()")).toBe(true);
+  expect(await evaluate("Math.round(document.getElementById('v').duration)")).toBe(1);
+});
+
+test("MediaSource consumes an append that arrived before the decoder stalled", async () => {
+  await load(`<video id="v" width="160" height="120"></video>`);
+  await evaluate(`(() => {
+    const video = document.getElementById("v");
+    const source = new MediaSource();
+    window.ms = source;
+    video.src = URL.createObjectURL(source);
+    source.addEventListener("sourceopen", async () => {
+      const bytes = new Uint8Array(await (await fetch("/video.mp4")).arrayBuffer());
+      const buffer = source.addSourceBuffer('video/mp4; codecs="avc1.4d401e, mp4a.40.2"');
+      const middle = bytes.length >> 1;
+      let append = 0;
+      buffer.addEventListener("updateend", () => {
+        append += 1;
+        if (append === 1) {
+          video.play();
+          buffer.appendBuffer(bytes.subarray(middle));
+        }
+      });
+      buffer.appendBuffer(bytes.subarray(0, middle));
+    });
+  })()`);
+  // Deliberately leave the MediaSource open. Playback must reopen from the
+  // already-appended second generation rather than wait for a third append.
+  expect(await waitFor("document.getElementById('v').currentTime > 0.75", 4000)).toBe(true);
+});
+
+test("a video waits for its missing audio SourceBuffer instead of outrunning sound", async () => {
+  await load(`<video id="v" width="160" height="120"></video>`);
+  await evaluate(`(() => {
+    const video = document.getElementById("v");
+    const source = new MediaSource();
+    window.ms = source;
+    window.mse = {};
+    video.src = URL.createObjectURL(source);
+    source.addEventListener("sourceopen", () => { window.mse.open = source.readyState; });
+  })()`);
+  await waitFor("window.mse.open === 'open'");
+  await evaluate(`(async () => {
+    const bytes = new Uint8Array(await (await fetch("/video.mp4")).arrayBuffer());
+    const picture = window.ms.addSourceBuffer('video/mp4; codecs="avc1.4d401e"');
+    const sound = window.ms.addSourceBuffer('audio/mp4; codecs="mp4a.40.2"');
+    picture.addEventListener("updateend", () => {
+      window.mse.videoUpdated = true;
+      document.getElementById("v").play();
+    });
+    picture.appendBuffer(bytes);
+    sound.appendBuffer(bytes.subarray(0, 32));
+  })()`);
+  await waitFor("window.mse.videoUpdated === true");
+  expect(await waitFor(`(() => { const v = document.getElementById('v');
+    return !v.paused && v.error === null && v.videoWidth > 0; })()`)).toBe(true);
+  await Bun.sleep(1000);
+  expect(await evaluate("document.getElementById('v').currentTime")).toBe(0);
+});
+
+test("initial MSE playback waits briefly for a separate audio segment", async () => {
+  await load(`<video id="v" width="160" height="120"></video>`);
+  await evaluate(`(() => {
+    const video = document.getElementById("v");
+    video.addEventListener("play", () => { window.startedAt = performance.now(); });
+    const source = new MediaSource();
+    video.src = URL.createObjectURL(source);
+    source.addEventListener("sourceopen", async () => {
+      const bytes = new Uint8Array(await (await fetch("/video.mp4")).arrayBuffer());
+      const audioBytes = new Uint8Array(await (await fetch("/tone.mp3")).arrayBuffer());
+      const picture = source.addSourceBuffer('video/mp4; codecs="avc1.4d401e"');
+      const sound = source.addSourceBuffer('audio/mpeg');
+      picture.addEventListener("updateend", () => video.play(), { once: true });
+      picture.appendBuffer(bytes);
+      sound.appendBuffer(audioBytes.subarray(0, 16));
+      setTimeout(() => {
+        window.audioAppendedAt = performance.now();
+        sound.appendBuffer(audioBytes.subarray(16));
+      }, 250);
+    });
+  })()`);
+  expect(await waitFor("Boolean(window.startedAt && window.audioAppendedAt)", 3000)).toBe(true);
+  expect(await evaluate("window.startedAt >= window.audioAppendedAt")).toBe(true);
+  expect(await waitFor("document.getElementById('v').currentTime > 0.1", 3000)).toBe(true);
+});
+
+const waitFor = async (expression, timeout = 5000) => {
+  const deadline = Date.now() + timeout;
+  while (Date.now() < deadline) {
+    const value = await evaluate(expression);
+    if (value) return value;
+    await Bun.sleep(50);
+  }
+  throw new Error(`timed out waiting for ${expression}`);
+};
+
+test("same-origin iframes: documents, contentWindow, names, postMessage with source and origin", async () => {
+  pages.set("https://page.test/child.html", `<!doctype html><body><p id="inner">child</p><script>
+    window.addEventListener("message", (event) => {
+      event.source.postMessage({ echo: event.data, fromParent: event.source === parent, origin: event.origin }, "*");
+    });
+  </script></body>`);
+  await load(`<iframe id="frame" name="kid" src="child.html" style="width:200px;height:100px"></iframe><script>
+    window.replies = [];
+    window.addEventListener("message", (event) => replies.push({ data: event.data, fromChild: event.source === frames.kid,
+      origin: event.origin }));
+    document.getElementById("frame").addEventListener("load", () => {
+      window.frameLoaded = true;
+      frames.kid.postMessage("hello", "https://page.test");
+      frames.kid.postMessage("never", "https://other.test");
+    });
+  </script>`);
+  await waitFor("window.replies.length > 0");
+  expect(await evaluate("frames.length")).toBe(1);
+  expect(await evaluate(`document.getElementById("frame").contentDocument.getElementById("inner").textContent`)).toBe("child");
+  expect(await evaluate(`document.getElementById("frame").contentWindow.parent === window`)).toBe(true);
+  await Bun.sleep(100);
+  // The message for another origin is not delivered.
+  expect(await evaluate("replies")).toEqual([{
+    data: { echo: "hello", fromParent: true, origin: "https://page.test" }, fromChild: true, origin: "https://page.test",
+  }]);
+});
+
+test("iframe messages retain their sender through promises and await", async () => {
+  pages.set("https://page.test/async-child.html", `<!doctype html><script>
+    addEventListener("message", async (event) => {
+      window.fromParent = event.source === parent;
+      await Promise.resolve();
+      parent.postMessage("await reply", "*");
+      Promise.resolve().then(() => parent.postMessage("then reply", "*"));
+    });
+  </script>`);
+  await load(`<iframe id="frame" src="async-child.html"></iframe><script>
+    window.asyncReplies = [];
+    addEventListener("message", event => asyncReplies.push({
+      data: event.data, fromChild: event.source === document.getElementById("frame").contentWindow,
+      origin: event.origin
+    }));
+    document.getElementById("frame").addEventListener("load", async () => {
+      await Promise.resolve();
+      document.getElementById("frame").contentWindow.postMessage("start", "*");
+    });
+  </script>`);
+  await waitFor("window.asyncReplies.length === 2");
+  expect(await evaluate("asyncReplies")).toEqual([
+    { data: "await reply", fromChild: true, origin: "https://page.test" },
+    { data: "then reply", fromChild: true, origin: "https://page.test" },
+  ]);
+  expect(await evaluate('document.getElementById("frame").contentWindow.fromParent')).toBe(true);
+});
+
+test("an inserted iframe has its about:blank window at once and fires load once", async () => {
+  await load(`<p>blank</p><script>
+    const frame = document.createElement("iframe");
+    document.body.appendChild(frame);
+    const win = frame.contentWindow;
+    window.result = [win.JSON.parse('{"a":1}').a, !!win.document.body, frame.contentDocument === win.document];
+    window.loads = 0;
+    frame.addEventListener("load", () => { loads++; window.sameWindow = frame.contentWindow === win; });
+  </script>`);
+  expect(await evaluate("result")).toEqual([1, true, true]);
+  await waitFor("window.loads > 0");
+  await Bun.sleep(100);
+  expect(await evaluate("[loads, sameWindow]")).toEqual([1, true]);
+});
+
+test("MessageChannel ports and dedicated workers with importScripts and transfers", async () => {
+  scripts.set("https://page.test/helper.js", "self.double = (n) => n * 2;");
+  scripts.set("https://page.test/worker.js", `importScripts("helper.js");
+    onmessage = (event) => {
+      const [port] = event.ports;
+      port.postMessage({ doubled: double(event.data.n), bytes: event.data.buffer.byteLength });
+    };`);
+  await load(`<script>
+    window.got = null;
+    const channel = new MessageChannel();
+    channel.port1.onmessage = (event) => { window.got = event.data; };
+    const worker = new Worker("worker.js");
+    const buffer = new ArrayBuffer(8);
+    worker.postMessage({ n: 21, buffer }, [channel.port2, buffer]);
+    window.detached = buffer.byteLength;
+  </script>`);
+  await waitFor("window.got");
+  expect(await evaluate("[got, detached]")).toEqual([{ doubled: 42, bytes: 8 }, 0]);
+});
+
+test("sloppy-mode this is the global object, also through the Function constructor", async () => {
+  await load(`<script>
+    window.viaFunction = Function("return this")() === window;
+    window.viaCall = (function () { return this; })() === window;
+    window.strict = (function () { "use strict"; return this; })() === undefined;
+  </script>`);
+  expect(await evaluate("[viaFunction, viaCall, strict]")).toEqual([true, true, true]);
+});
+
+test("a click sends pointer and mouse events to the element under it, then focuses its focusable ancestor", async () => {
+  await load(`<div id="tile" tabindex="0" style="width:100px;height:60px"><span id="label">tile</span></div><script>
+    window.events = [];
+    for (const type of ["pointerdown", "mousedown", "focus", "pointerup", "mouseup", "click"]) {
+      document.getElementById("tile").addEventListener(type, (event) => events.push(type + ":" + event.target.id), true);
+    }
+  </script>`);
+  await renderer.call("click", 80, 30);
+  expect(await evaluate("events")).toEqual(["pointerdown:tile", "mousedown:tile", "focus:tile", "pointerup:tile", "mouseup:tile", "click:tile"]);
+  expect(await evaluate("document.activeElement.id")).toBe("tile");
+});
+
+test("a click inside an iframe goes to the element under it in the frame's document", async () => {
+  pages.set("https://page.test/cells.html", `<!doctype html><body style="margin:0"><div id="cell" style="width:100px;height:100px"></div><script>
+    window.clicked = [];
+    document.getElementById("cell").addEventListener("click", (event) => clicked.push([event.clientX, event.clientY]));
+  </script></body>`);
+  await load(`<iframe id="frame" src="cells.html" style="position:absolute;left:50px;top:40px;width:200px;height:150px;border:0"></iframe>`);
+  await waitFor(`document.getElementById("frame").contentWindow.clicked`);
+  await renderer.call("click", 70, 60);
+  expect(await evaluate(`document.getElementById("frame").contentWindow.clicked`)).toEqual([[20, 20]]);
+});
+
+test("images a script inserts and measures at once still load", async () => {
+  await load(`<div id="host"></div><script>
+    const img = document.createElement("img");
+    img.src = "/red-2x3.png";
+    document.getElementById("host").appendChild(img);
+    // Reading geometry lays the page out before any frame does.
+    window.firstWidth = img.getBoundingClientRect().width;
+  </script>`);
+  await waitFor(`document.querySelector("img").getBoundingClientRect().width === 2`);
+  expect(await evaluate(`[document.querySelector("img").getBoundingClientRect().height, firstWidth !== 2]`)).toEqual([3, true]);
+});
+
+test("scroll containers scroll by wheel and script, move their content and hit-test where it shows", async () => {
+  await load(`<div id="box" style="width:200px;height:100px;overflow-y:auto;border:2px solid black">${
+    Array.from({ length: 10 }, (_, index) => `<p id="p${index}" style="margin:0;height:30px" onclick="window.hit = this.id">row ${index}</p>`).join("")
+  }</div><div id="still" style="height:40px;overflow:hidden"><p style="margin:0;height:80px">hidden overflow</p></div><script>
+    window.$ = (id) => document.getElementById(id);
+    window.scrolls = 0;
+    $("box").addEventListener("scroll", () => scrolls++);
+  </script>`);
+  expect(await evaluate(`[$("box").scrollTop, $("box").scrollHeight, $("box").clientHeight, $("p3").getBoundingClientRect().top]`))
+    .toEqual([0, 300, 100, 92]);
+  // The wheel over the container scrolls it, not the page: nothing is left over.
+  expect(await renderer.call("wheel", 50, 50, 0, 75)).toEqual({ x: 0, y: 0 });
+  await waitFor("window.scrolls > 0");
+  expect(await evaluate(`[$("box").scrollTop, $("p3").getBoundingClientRect().top]`)).toEqual([75, 17]);
+  await renderer.call("click", 50, 20);
+  expect(await evaluate("window.hit")).toBe("p3");
+  // Scripts scroll it too, clamped; overflow: hidden scrolls only by script.
+  expect(await evaluate(`($("box").scrollTop = 1000, $("box").scrollTop)`)).toBe(200);
+  expect(await evaluate(`$("p1").scrollIntoView(), [$("box").scrollTop, $("p1").getBoundingClientRect().top]`)).toEqual([30, 2]);
+  const still = await evaluate(`$("still").getBoundingClientRect().toJSON()`);
+  expect(await renderer.call("wheel", 50, still.y + 10, 0, 20)).toEqual({ x: 0, y: 20 });
+  expect(await evaluate(`($("still").scrollTop = 25, $("still").scrollTop)`)).toBe(25);
+  // What the container cannot take goes on to the page (scroll chaining).
+  await evaluate(`$("box").scrollTop = 190`);
+  expect(await renderer.call("wheel", 50, 50, 0, 30)).toEqual({ x: 0, y: 20 });
+  expect(await evaluate(`$("box").scrollTop`)).toBe(200);
+  // A wheel listener that cancels the event keeps it where it is.
+  await evaluate(`$("box").scrollTop = 30; $("box").addEventListener("wheel", (event) => event.preventDefault())`);
+  expect(await renderer.call("wheel", 50, 50, 0, 30)).toEqual({ x: 0, y: 0 });
+  expect(await evaluate(`$("box").scrollTop`)).toBe(30);
+});
+
+test("the wheel over an iframe scrolls its document first, unless scrolling=no, then what is around it", async () => {
+  pages.set("https://page.test/tall.html", `<!doctype html><body style="margin:0"><div style="height:400px">tall</div></body>`);
+  await load(`<div id="outer" style="width:220px;height:100px;overflow:auto">
+    <iframe id="fixed" scrolling="no" src="tall.html" style="display:block;width:200px;height:150px;border:0"></iframe>
+    <iframe id="free" src="tall.html" style="display:block;width:200px;height:150px;border:0"></iframe>
+  </div><script>window.$ = (id) => document.getElementById(id);</script>`);
+  await waitFor(`$("free").contentDocument?.body?.textContent === "tall" && $("fixed").contentDocument?.body?.textContent === "tall"`);
+  // Over the scrolling=no frame: its document stays, the container scrolls.
+  expect(await renderer.call("wheel", 50, 20, 0, 60)).toEqual({ x: 0, y: 0 });
+  expect(await evaluate(`[$("outer").scrollTop, $("fixed").contentWindow.scrollY]`)).toEqual([60, 0]);
+  // Over the other frame (now at 90..240): its document scrolls first.
+  expect(await renderer.call("wheel", 50, 95, 0, 30)).toEqual({ x: 0, y: 0 });
+  expect(await evaluate(`[$("outer").scrollTop, $("free").contentWindow.scrollY]`)).toEqual([60, 30]);
+});
+
+test("compareDocumentPosition, document.styleSheets and user timing with PerformanceObserver", async () => {
+  await load(`<style>p { color: red }</style><link rel="stylesheet" href="/missing.css" media="print">
+    <div id="outer"><p id="first">a</p><p id="second">b</p></div><script>
+    window.$ = (id) => document.getElementById(id);
+    window.observed = [];
+    new PerformanceObserver((list) => observed.push(...list.getEntries().map((entry) => entry.entryType + ":" + entry.name)))
+      .observe({ entryTypes: ["mark", "measure"] });
+    performance.mark("start");
+    performance.mark("end");
+    performance.measure("span", "start", "end");
+  </script>`);
+  expect(await evaluate(`[
+    $("first").compareDocumentPosition($("second")), $("second").compareDocumentPosition($("first")),
+    $("outer").compareDocumentPosition($("first")), $("first").compareDocumentPosition($("outer")),
+    Node.DOCUMENT_POSITION_FOLLOWING, $("first").DOCUMENT_POSITION_CONTAINED_BY,
+  ]`)).toEqual([4, 2, 20, 10, 4, 16]);
+  expect(await evaluate(`[document.styleSheets.length, document.styleSheets[0].href, document.styleSheets[1].href,
+    document.styleSheets.item(1).media.mediaText, document.styleSheets[0].ownerNode.tagName]`))
+    .toEqual([2, null, "https://page.test/missing.css", "print", "STYLE"]);
+  await waitFor("window.observed.length === 3");
+  expect(await evaluate(`[observed, performance.getEntriesByType("measure").length, PerformanceObserver.supportedEntryTypes]`))
+    .toEqual([["mark:start", "mark:end", "measure:span"], 1, ["mark", "measure"]]);
+  expect(await evaluate(`performance.clearMarks(), performance.clearMeasures("span"), performance.getEntries().length`)).toBe(0);
+});
+
+test("selectors with CSS escapes parse, in type selectors and around combinators too", async () => {
+  await load(`<div id="a:b" class="x,y 1x"><span class="p(q)" data-k='a"b'>1</span><p id="123">2</p></div><my-el>3</my-el>`);
+  const selectors = [String.raw`style\=\"\"`, String.raw`#a\:b`, String.raw`.x\,y > span`, String.raw`.p\(q\)`,
+    String.raw`my\-el`, String.raw`\64 iv`,
+    // CSS.escape() output for names starting with a digit, and an escaped quote in a value.
+    String.raw`#\31 23`, String.raw`.\31 x p`, String.raw`[data-k="a\"b"]`, String.raw`[d\61 ta-k]`];
+  expect(await evaluate(`${JSON.stringify(selectors)}.map((selector) => document.querySelectorAll(selector).length)`))
+    .toEqual([0, 1, 1, 1, 1, 1, 1, 1, 1, 1]);
+});
+
+test("a canvas 2d context samples colours through CanvasKit", async () => {
+  await load("");
+  expect(await evaluate(`(() => {
+    const canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+    canvas.width = canvas.height = 1;
+    const context = canvas.getContext("2d");
+    const sample = (color) => {
+      context.fillStyle = "#000";
+      context.fillStyle = color;
+      const first = context.fillStyle;
+      context.fillStyle = "#fff";
+      context.fillStyle = color;
+      if (first !== context.fillStyle) return null;
+      context.fillRect(0, 0, 1, 1);
+      const data = [...context.getImageData(0, 0, 1, 1).data];
+      context.clearRect(0, 0, 1, 1);
+      return data;
+    };
+    return {
+      onDiv: "getContext" in document.createElement("div"),
+      same: canvas.getContext("2d") === context,
+      webgl: canvas.getContext("webgl"),
+      size: [document.createElement("canvas").width, document.createElement("canvas").height],
+      red: sample("red"),
+      bad: sample("not-a-color"),
+    };
+  })()`)).toEqual({
+    onDiv: false, same: true, webgl: null, size: [300, 150], red: [255, 0, 0, 255], bad: [0, 0, 0, 255],
+  });
+});
+
+test("the page scrolls over content that overflows a 100vh layout, not over clipped or fixed content", async () => {
+  await load(`<div style="height:100vh;display:flex;flex-direction:column">
+      <header style="height:50px">top</header><main style="height:2000px;flex-shrink:0">tall</main>
+      <footer id="end" style="height:40px;flex-shrink:0">end</footer></div>
+    <div style="height:20px;overflow:hidden"><div style="height:9000px">clipped</div></div>
+    <div style="position:fixed;top:0;height:20000px;width:10px"></div>`);
+  // 50 + 2000 + 40 of overflowing content: the footer can be scrolled to; clipped and fixed boxes add nothing.
+  expect(await evaluate(`(scrollTo(0, 99999), [scrollY, Math.round(document.getElementById("end").getBoundingClientRect().bottom)])`))
+    .toEqual([2090 - 300, 300]);
+});