buninu-browser 0.0.2 → 0.2.0

package/lib/renderer/page-realm.js

@@ -12,7 +12,7 @@
  * the renderer schedule style, layout and paint.
  */
 import {
-  BindingRealm, defineEventHandlerProperty, eventConstructors, hardenBindings, INTERFACES, nodeOf, windowEventMethods,
+  BindingRealm, defineEventHandlerProperty, eventConstructors, eventTargetConstructor, hardenBindings, INTERFACES, mutableBindingPrototype, NodeFilter, nodeOf, windowEventMethods,
 } from "./bindings.js";
 import { resolveModuleSpecifier, transformModule } from "./module-transform.js";
 import { CONSTRUCTOR_HELPER, rewriteClassicScript, rewriteConstructorReads } from "./script-rewrite.js";
@@ -65,6 +65,30 @@ const WINDOW_HANDLER_EVENTS = [
 ];
 const hostStorage = new Map();
 
+function cssEscape(value) {
+  const input = String(value);
+  let output = "";
+  for (let index = 0; index < input.length; index++) {
+    const code = input.codePointAt(index);
+    const character = String.fromCodePoint(code);
+    if (code > 0xffff) index++;
+    if (code === 0) { output += "\uFFFD"; continue; }
+    if ((code >= 1 && code <= 31) || code === 127
+      || (index === 0 && code >= 48 && code <= 57)
+      || (index === 1 && input[0] === "-" && code >= 48 && code <= 57)) {
+      output += `\\${code.toString(16)} `;
+    } else if (index === 0 && character === "-" && input.length === 1) {
+      output += "\\-";
+    } else if (code >= 128 || character === "-" || character === "_"
+      || (code >= 48 && code <= 57) || (code >= 65 && code <= 90) || (code >= 97 && code <= 122)) {
+      output += character;
+    } else {
+      output += `\\${character}`;
+    }
+  }
+  return output;
+}
+
 /**
  * @param {{
  *   window: object, document: object, mode: "ses" | "host",
@@ -75,6 +99,7 @@ const hostStorage = new Map();
  *     scrollTo(x: number, y: number): void,
  *     computedStyle(element: object): object | null,
  *     navigate(url: string): void,
+ *     activateLink?(anchor: object): void,
  *     fetchScript(url: string): Promise<string>,
  *     reportError(message: string): void,
  *     consoleMessage?: ((level: string, text: string) => void) | null,
@@ -101,12 +126,24 @@ export function createPageRealm({ window, document, mode, hooks }) {
   let nextTimerId = 1;
   let disposed = false;
   let readyState = "loading";
+  // Navigation Timing 1 (performance.timing): epoch milliseconds on the same
+  // timeline as performance.now(). Phases this document has not reached yet
+  // read 0, as in browsers; the fetch phases all collapse onto the start.
+  const timingStart = Math.round(hostPerformance.timeOrigin);
+  const timingMarks = { domLoading: Math.round(hostPerformance.timeOrigin + hostPerformance.now()) };
+  const markTiming = (...names) => {
+    const now = Math.round(hostPerformance.timeOrigin + hostPerformance.now());
+    for (const name of names) timingMarks[name] = now;
+  };
+  let parsingHead = false;
   let currentScript = null;
   let pageGlobal = null;
   let evaluate;
   let evaluateModuleCode;
   let importMap = null;
   const modules = new Map();
+  const customElementConstructors = new Map();
+  let constructingElement = null;
   let inlineModuleCount = 0;
 
   const reportError = (error, source = currentScript?.src) => {
@@ -146,25 +183,63 @@ export function createPageRealm({ window, document, mode, hooks }) {
     boundsOf: hooks.boundsOf,
     viewport: hooks.viewport,
     scrollTo: hooks.scrollTo,
-    playVideo: hooks.playVideo,
-    pauseVideo: hooks.pauseVideo,
-    videoState: hooks.videoState,
+    mediaState: hooks.mediaState,
+    playMedia: hooks.playMedia,
+    pauseMedia: hooks.pauseMedia,
+    seekMedia: hooks.seekMedia,
     call: callPage,
     readyState: () => readyState,
+    body: () => parsingHead ? null : document.body,
     documentCookie: () => hooks.documentCookie?.() ?? "",
     setDocumentCookie: (value) => hooks.setDocumentCookie?.(value),
     currentScript: () => currentScript,
     pageGlobal: () => pageGlobal,
-    targetOf: (real) => real === window ? pageGlobal : null,
+    targetOf: (real) => real === window ? pageGlobal : eventTargets.targetOf(real),
     created: (element) => {
       if (element.tagName === "SCRIPT") createdScripts.add(element);
     },
     inserted: (nodes) => startInsertedScripts(nodes),
+    activateLink: (anchor) => hooks.activateLink?.(anchor),
+    submitForm: (form, submitter) => hooks.submitForm?.(form, submitter),
     acceptEvent: (event) => !LIFECYCLE_EVENT_TYPES.has(event.type)
       || (event.target !== window && event.target !== document)
       || lifecycleEvents.has(event),
   });
+  const eventTargets = eventTargetConstructor(realm,
+    (value) => value === pageGlobal || Boolean(nodeOf(value)));
   const documentBinding = realm.wrap(document);
+  const NodeInterface = function Node() { throw new TypeError("Illegal constructor"); };
+  NodeInterface.prototype = mutableBindingPrototype(INTERFACES.Node.prototype);
+  Object.defineProperty(NodeInterface.prototype, "constructor", { value: NodeInterface, writable: true, configurable: true });
+  realm.nodePrototype = NodeInterface.prototype;
+  const parentPrototype = mutableBindingPrototype(Object.getPrototypeOf(INTERFACES.Element.prototype), NodeInterface.prototype);
+  const ElementInterface = function Element() { throw new TypeError("Illegal constructor"); };
+  ElementInterface.prototype = mutableBindingPrototype(INTERFACES.Element.prototype, parentPrototype);
+  Object.defineProperty(ElementInterface.prototype, "constructor", { value: ElementInterface, writable: true, configurable: true });
+  const HTMLElementInterface = function HTMLElement() {
+    if (!new.target || !constructingElement) throw new TypeError("Illegal constructor");
+    return realm.wrap(constructingElement);
+  };
+  HTMLElementInterface.prototype = mutableBindingPrototype(ElementInterface.prototype);
+  Object.defineProperty(HTMLElementInterface.prototype, "constructor", { value: HTMLElementInterface, writable: true, configurable: true });
+  realm.elementPrototype = HTMLElementInterface.prototype;
+  const TextInterface = function Text() { throw new TypeError("Illegal constructor"); };
+  const CharacterDataInterface = function CharacterData() { throw new TypeError("Illegal constructor"); };
+  CharacterDataInterface.prototype = mutableBindingPrototype(INTERFACES.CharacterData.prototype, NodeInterface.prototype);
+  Object.defineProperty(CharacterDataInterface.prototype, "constructor", { value: CharacterDataInterface, writable: true, configurable: true });
+  realm.characterDataPrototype = CharacterDataInterface.prototype;
+  TextInterface.prototype = mutableBindingPrototype(INTERFACES.Text.prototype, CharacterDataInterface.prototype);
+  Object.defineProperty(TextInterface.prototype, "constructor", { value: TextInterface, writable: true, configurable: true });
+  realm.textPrototype = TextInterface.prototype;
+  const DocumentFragmentInterface = function DocumentFragment() { throw new TypeError("Illegal constructor"); };
+  DocumentFragmentInterface.prototype = mutableBindingPrototype(INTERFACES.DocumentFragment.prototype, parentPrototype);
+  Object.defineProperty(DocumentFragmentInterface.prototype, "constructor", { value: DocumentFragmentInterface, writable: true, configurable: true });
+  realm.fragmentPrototype = DocumentFragmentInterface.prototype;
+  realm.shadowRootPrototype = mutableBindingPrototype(INTERFACES.ShadowRoot.prototype, DocumentFragmentInterface.prototype);
+  const DocumentInterface = function Document() { throw new TypeError("Illegal constructor"); };
+  DocumentInterface.prototype = mutableBindingPrototype(INTERFACES.Document.prototype, parentPrototype);
+  Object.defineProperty(DocumentInterface.prototype, "constructor", { value: DocumentInterface, writable: true, configurable: true });
+  Object.setPrototypeOf(documentBinding, DocumentInterface.prototype);
 
   const fireLifecycle = (target, event) => {
     lifecycleEvents.add(event);
@@ -672,10 +747,10 @@ export function createPageRealm({ window, document, mode, hooks }) {
     };
     const interfaces = {
       Window: make("Window", () => false),
-      EventTarget: make("EventTarget", () => true),
+      EventTarget: eventTargets.EventTarget,
       Comment: make("Comment", (node) => node.nodeType === 8),
       DocumentType: make("DocumentType", (node) => node.nodeType === 10),
-      ShadowRoot: make("ShadowRoot", () => false),
+      ShadowRoot: make("ShadowRoot", (node) => node instanceof window.ShadowRoot),
       SVGElement: make("SVGElement", (node) => node.namespaceURI === SVG_NAMESPACE),
       SVGSVGElement: make("SVGSVGElement", (node) => node.namespaceURI === SVG_NAMESPACE && node.localName === "svg"),
       HTMLUnknownElement: make("HTMLUnknownElement", () => false),
@@ -691,7 +766,7 @@ export function createPageRealm({ window, document, mode, hooks }) {
 
   const viewportValue = (key) => () => hooks.viewport()[key];
   const { location, setHref } = locationBinding(document.URL, hooks.navigate);
-  const { History, history } = historyBinding(location, setHref);
+  const { History, history, pushEntry } = historyBinding(location, setHref);
   const { Event, CustomEvent, ...uiEvents } = eventConstructors(realm);
   const observers = observerConstructors();
   const network = networkApi();
@@ -771,9 +846,15 @@ export function createPageRealm({ window, document, mode, hooks }) {
     TextDecoder,
     URL,
     URLSearchParams,
+    // SES rewrites dynamic import() in evaluated classic scripts to this
+    // hook. Resolve it through the same module loader and network boundary as
+    // parser-inserted modules.
+    __import__: (specifier) => importModule(String(specifier), currentScript?.src || document.URL),
     performance: {
       now: () => hostPerformance.now(),
       timeOrigin: hostPerformance.timeOrigin,
+      timing: navigationTiming(timingStart, timingMarks),
+      navigation: Object.freeze({ type: 0, redirectCount: 0, TYPE_NAVIGATE: 0, TYPE_RELOAD: 1, TYPE_BACK_FORWARD: 2, TYPE_RESERVED: 255 }),
       mark: () => {},
       measure: () => {},
       getEntriesByType: () => [],
@@ -788,6 +869,24 @@ export function createPageRealm({ window, document, mode, hooks }) {
     ...uiEvents,
     ...observers,
     ...network,
+    CSS: {
+      escape: cssEscape,
+      supports(property, value) {
+        // The one-argument condition grammar is not modelled yet. Returning
+        // false is the safe feature-detection result for unsupported syntax.
+        if (value === undefined) return false;
+        const name = String(property);
+        const camel = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+        const style = documentBinding.body?.style ?? documentBinding.documentElement?.style;
+        return Boolean(style && (name in style || camel in style));
+      },
+    },
+    NodeFilter,
+    // Collections are represented by snapshot arrays internally. Expose the
+    // standard collection prototypes used by compatibility shims; their
+    // Array methods are generic and work with those snapshots.
+    NodeList: class NodeList extends Array {},
+    HTMLCollection: class HTMLCollection extends Array {},
     Image: function Image(width, height) {
       if (!new.target) throw new TypeError("Constructor Image requires 'new'");
       const image = document.createElement("img");
@@ -796,17 +895,67 @@ export function createPageRealm({ window, document, mode, hooks }) {
       return realm.wrap(image);
     },
     customElements: {
-      define: () => {},
-      get: () => undefined,
-      whenDefined: () => Promise.resolve(),
-      upgrade: () => {},
+      define(name, constructor) {
+        const tag = String(name).toLowerCase();
+        if (typeof constructor !== "function") throw new TypeError("Custom element constructor must be a function");
+        if (customElementConstructors.has(tag)) throw new DOMException("Custom element already defined", "NotSupportedError");
+        const Adapter = class extends window.HTMLElement {
+          constructor() {
+            super();
+            const wrapper = realm.wrap(this);
+            Object.setPrototypeOf(wrapper, constructor.prototype);
+            const previous = constructingElement;
+            constructingElement = this;
+            try { Reflect.construct(constructor, []); }
+            finally { constructingElement = previous; }
+          }
+          connectedCallback() {
+            const wrapper = realm.wrap(this);
+            if (typeof wrapper.connectedCallback === "function") callPage(wrapper.connectedCallback, wrapper, []);
+          }
+          disconnectedCallback() {
+            const wrapper = realm.wrap(this);
+            if (typeof wrapper.disconnectedCallback === "function") callPage(wrapper.disconnectedCallback, wrapper, []);
+          }
+        };
+        window.customElements.define(tag, Adapter);
+        customElementConstructors.set(tag, constructor);
+        // Upgrades change :defined without a DOM mutation.
+        hooks.definedChanged?.(tag);
+      },
+      get: (name) => customElementConstructors.get(String(name).toLowerCase()),
+      whenDefined(name) {
+        const tag = String(name).toLowerCase();
+        return window.customElements.whenDefined(tag).then(() => customElementConstructors.get(tag));
+      },
+      upgrade(root) {
+        const node = nodeOf(root);
+        if (node) window.customElements.upgrade(node);
+      },
     },
     ...INTERFACES,
+    Node: NodeInterface,
+    Text: TextInterface,
+    CharacterData: CharacterDataInterface,
+    Element: ElementInterface,
+    HTMLElement: HTMLElementInterface,
+    Document: DocumentInterface,
+    HTMLDocument: DocumentInterface,
+    DocumentFragment: DocumentFragmentInterface,
     ...typeCheckInterfaces(),
     addEventListener: windowEvents.addEventListener,
     removeEventListener: windowEvents.removeEventListener,
     dispatchEvent: windowEvents.dispatchEvent,
     getComputedStyle: (element) => computedStyleBinding(hooks.computedStyle(nodeOf(element))),
+    getSelection: () => ({
+      anchorNode: null, anchorOffset: 0, focusNode: null, focusOffset: 0,
+      isCollapsed: true, rangeCount: 0, type: "None",
+      addRange() {}, collapse() {}, collapseToEnd() {}, collapseToStart() {},
+      containsNode: () => false, deleteFromDocument() {}, empty() {}, extend() {},
+      getRangeAt: () => { throw new DOMException("Index out of range", "IndexSizeError"); },
+      modify() {}, removeAllRanges() {}, removeRange() {}, selectAllChildren() {}, setBaseAndExtent() {},
+      toString: () => "",
+    }),
     matchMedia: (query) => {
       const { width, height, mobile } = hooks.viewport();
       return {
@@ -1181,11 +1330,16 @@ export function createPageRealm({ window, document, mode, hooks }) {
           // An unresolvable src is reported when the script runs.
         }
       }
-      const run = async (script) => {
+      const run = async (script, parserBlocking = false) => {
         if (disposed) return;
         startedScripts.add(script);
+        parsingHead = parserBlocking && document.head?.contains(script);
         if ((script.getAttribute("type") ?? "").trim().toLowerCase() === "module") {
-          await runModuleScript(script);
+          try {
+            await runModuleScript(script);
+          } finally {
+            parsingHead = false;
+          }
           return;
         }
         const src = script.getAttribute("src");
@@ -1196,21 +1350,33 @@ export function createPageRealm({ window, document, mode, hooks }) {
             : script.textContent ?? "";
         } catch (error) {
           reportError(error);
+          parsingHead = false;
           return;
         }
-        runClassic(script, source);
+        try {
+          runClassic(script, source);
+        } finally {
+          parsingHead = false;
+        }
       };
-      for (const script of immediate) await run(script);
+      for (const script of immediate) await run(script, true);
       for (const script of deferred) await run(script);
       if (disposed) return;
       readyState = "interactive";
+      markTiming("domInteractive", "domContentLoadedEventStart");
       runTask(() => fireLifecycle(document, new window.Event("DOMContentLoaded", { bubbles: true })));
+      markTiming("domContentLoadedEventEnd");
       hooks.lifecycle?.("DOMContentLoaded");
       for (const script of asynchronous) await run(script);
       // Scripts inserted so far (and any they insert in turn) delay load.
       while (pendingLoads.size && !disposed) await Promise.allSettled([...pendingLoads]);
+      // The document's images delay load too (HTML "the end", step 8).
+      await hooks.whenImagesLoaded?.();
+      if (disposed) return;
       readyState = "complete";
+      markTiming("domComplete", "loadEventStart");
       runTask(() => fireLifecycle(window, new window.Event("load")));
+      markTiming("loadEventEnd");
       hooks.lifecycle?.("load");
     },
 
@@ -1225,12 +1391,16 @@ export function createPageRealm({ window, document, mode, hooks }) {
     },
 
     /**
-     * Same-document navigation to a fragment: updates location and
-     * document.URL. When the fragment changed, Happy DOM fires hashchange
-     * (HTML §7.4.2.3.3) from a zero-delay timer; the promise settles after it.
+     * Same-document navigation to a fragment (HTML §7.4.2.3.3): updates
+     * location and document.URL, adds a history entry and fires popstate
+     * at once; when the fragment changed, Happy DOM then fires hashchange
+     * from a zero-delay timer. The promise settles after it.
      */
     navigateToFragment(url) {
+      const same = url === location.href;
       setHref(url);
+      pushEntry(same);
+      runTask(() => window.dispatchEvent(new window.PopStateEvent("popstate", { state: null })));
       window.happyDOM?.setURL?.(url);
       return new Promise((resolve) => hostSetTimeout(resolve, 0));
     },
@@ -1256,6 +1426,30 @@ export function createPageRealm({ window, document, mode, hooks }) {
   };
 }
 
+const NAVIGATION_TIMING_FIELDS = [
+  "navigationStart", "unloadEventStart", "unloadEventEnd", "redirectStart", "redirectEnd", "fetchStart",
+  "domainLookupStart", "domainLookupEnd", "connectStart", "connectEnd", "secureConnectionStart", "requestStart",
+  "responseStart", "responseEnd", "domLoading", "domInteractive", "domContentLoadedEventStart",
+  "domContentLoadedEventEnd", "domComplete", "loadEventStart", "loadEventEnd",
+];
+// Phases before the document exists: no unload, redirect or secure connection
+// information is kept, and the network phases start with the navigation.
+const AT_START = new Set(["fetchStart", "domainLookupStart", "domainLookupEnd", "connectStart", "connectEnd",
+  "requestStart", "responseStart", "responseEnd"]);
+
+/** performance.timing: live getters over the document's lifecycle marks. */
+function navigationTiming(start, marks) {
+  const timing = {};
+  for (const field of NAVIGATION_TIMING_FIELDS) {
+    Object.defineProperty(timing, field, {
+      enumerable: true,
+      get: () => field === "navigationStart" || AT_START.has(field) ? start : marks[field] ?? 0,
+    });
+  }
+  timing.toJSON = () => Object.fromEntries(NAVIGATION_TIMING_FIELDS.map((field) => [field, timing[field]]));
+  return Object.freeze(timing);
+}
+
 function installGlobalAccessors(target, accessors) {
   for (const [name, get] of Object.entries(accessors)) {
     Object.defineProperty(target, name, { get, configurable: true, enumerable: true });
@@ -1352,7 +1546,12 @@ function historyBinding(location, setHref) {
       state = data ?? null;
     },
   };
-  return { History, history: Object.create(History.prototype) };
+  // A fragment navigation adds an entry with no state (a same-URL one replaces it).
+  const pushEntry = (replace) => {
+    state = null;
+    if (!replace) length++;
+  };
+  return { History, history: Object.create(History.prototype), pushEntry };
 }
 
 /** window.location; `setHref` moves it for same-document (fragment) navigations. */
@@ -1434,8 +1633,13 @@ function computedStyleBinding(style) {
     whiteSpace: style.whiteSpace,
     boxSizing: style.boxSizing,
     zIndex: String(style.zIndex),
-    visibility: "visible",
-    opacity: "1",
+    visibility: style.visibility ?? "visible",
+    opacity: String(style.opacity ?? 1),
+    pointerEvents: style.pointerEvents ?? "auto",
+    // Boxes never scroll here; a clipping box reads as hidden.
+    overflow: style.overflowX === "clip" || style.overflowY === "clip" ? "hidden" : "visible",
+    overflowX: style.overflowX === "clip" ? "hidden" : "visible",
+    overflowY: style.overflowY === "clip" ? "hidden" : "visible",
   } : {};
   const kebab = (name) => name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
   const byKebab = Object.fromEntries(Object.entries(values).map(([name, value]) => [kebab(name), value]));