buninu-browser 0.0.2 → 0.2.0

package/lib/input/hit-test.js

@@ -1,14 +1,19 @@
-const INTERACTIVE_TAGS = new Set(["A", "BUTTON", "INPUT", "SELECT", "SUMMARY", "TEXTAREA", "VIDEO"]);
+const INTERACTIVE_TAGS = new Set(["A", "AUDIO", "BUTTON", "INPUT", "LABEL", "SELECT", "SUMMARY", "TEXTAREA", "VIDEO"]);
+// Form controls and labels are hit over their whole box, not only where text
+// is drawn (an unchecked checkbox or an empty field has none; a block label
+// is clickable beside its text).
+const CONTROL_TAGS = new Set(["AUDIO", "BUTTON", "INPUT", "LABEL", "SELECT", "TEXTAREA"]);
 
 export function interactiveRegions(tree, layout, scroll = { x: 0, y: 0 }, viewport = {}) {
   const regions = [];
   const byElement = new Map();
+  const hittable = hitTestable(tree);
 
   for (const fragment of layout.fragments) {
     for (const run of fragment.runs) {
       const renderNode = tree.nodesById.get(run.nodeId);
       const element = closestInteractive(renderNode?.domNode);
-      if (!element) continue;
+      if (!element || !hittable(renderNode)) continue;
       const top = fragment.y - scroll.y;
       const left = run.x - scroll.x;
       const right = left + run.width;
@@ -27,19 +32,43 @@ export function interactiveRegions(tree, layout, scroll = { x: 0, y: 0 }, viewpo
     }
   }
 
+  for (const box of layout.boxes ?? []) {
+    const renderNode = tree.nodesById.get(box.nodeId);
+    const element = renderNode?.domNode;
+    if (!element || element.nodeType !== 1 || !CONTROL_TAGS.has(element.tagName) || !hittable(renderNode)) continue;
+    const top = box.y - scroll.y;
+    const left = box.x - scroll.x;
+    const right = left + box.width;
+    const bottom = top + box.height;
+    if (box.width <= 0 || box.height <= 0 || right <= 0 || bottom <= 0
+      || left >= (viewport.width ?? Infinity) || top >= (viewport.height ?? Infinity)) {
+      continue;
+    }
+    const rect = Object.freeze({ left, top, right, bottom, width: box.width, height: box.height });
+    let region = byElement.get(element);
+    if (!region) {
+      region = { element, rects: [] };
+      byElement.set(element, region);
+      regions.push(region);
+    }
+    region.rects.push(rect);
+  }
+
   return regions.map((region) => Object.freeze({
     element: region.element,
     rects: Object.freeze(region.rects),
   }));
 }
 
+/** The innermost interactive element under a point (a checkbox before its label). */
 export function hitTest(tree, layout, x, y, scroll, viewport) {
-  for (const region of interactiveRegions(tree, layout, scroll, viewport)) {
-    if (region.rects.some((rect) => x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom)) {
-      return region;
-    }
-  }
-  return null;
+  const hits = interactiveRegions(tree, layout, scroll, viewport).map((region) => ({
+    ...region,
+    area: Math.min(...region.rects.filter((rect) => x >= rect.left && x < rect.right && y >= rect.top && y < rect.bottom)
+      .map((rect) => rect.width * rect.height)),
+  })).filter((region) => Number.isFinite(region.area));
+  const deepest = hits.filter((region) => !hits.some((other) => other !== region && region.element.contains(other.element)));
+  return deepest.sort((left, right) => left.area - right.area)[0] ?? null;
 }
 
 /** Returns the content-coordinate bounds contributed by an element's text descendants. */
@@ -68,6 +97,26 @@ export function elementBounds(tree, layout, element) {
   return Object.freeze({ left, top, right, bottom, width: right - left, height: bottom - top });
 }
 
+/**
+ * Whether a render node takes clicks: not when its element is
+ * visibility: hidden or pointer-events: none (both inherited, so a visible
+ * or pointer-events: auto descendant still does). Text uses its element's style.
+ */
+function hitTestable(tree) {
+  const styles = new Map();
+  for (const node of tree.nodesById.values()) {
+    if (node.domNode?.nodeType === 1 && node.style && !node.pseudo && !styles.has(node.domNode)) {
+      styles.set(node.domNode, node.style);
+    }
+  }
+  return (renderNode) => {
+    const domNode = renderNode?.domNode;
+    const element = domNode?.nodeType === 1 ? domNode : domNode?.parentElement;
+    const style = (renderNode?.pseudo ? renderNode.style : null) ?? styles.get(element);
+    return !style || (style.visibility !== "hidden" && style.pointerEvents !== "none");
+  };
+}
+
 function closestInteractive(node) {
   for (let current = node?.nodeType === 1 ? node : node?.parentElement; current; current = current.parentElement) {
     if (INTERACTIVE_TAGS.has(current.tagName) || current.hasAttribute("onclick") || current.hasAttribute("tabindex")) {

package/lib/layout/text-layout.js

@@ -123,10 +123,13 @@ function buildBox(node, flags, blockified = false) {
   if (node.type === "image") {
     return { kind: "block", node, style, replaced: true, bfc: true, children: [], absolutes: [] };
   }
-  const flex = ["flex", "inline-flex"].includes(node.type)
+  // The root (<body>) keeps its own node type, but lays its children out
+  // by its display: body { display: grid } or flex is common.
+  const display = node.type === "root" ? style?.display : node.type;
+  const flex = ["flex", "inline-flex"].includes(display)
     ? style?.flexDirection === "column" ? "column" : "row"
     : null;
-  const grid = ["grid", "inline-grid"].includes(node.type);
+  const grid = ["grid", "inline-grid"].includes(display);
   const table = ["table", "inline-table"].includes(node.type);
   const box = {
     kind: "block",
@@ -338,7 +341,7 @@ function layoutAbsolutes(ctx, box, record) {
     if (specifiedWidth == null && left != null && right != null) {
       width = Math.max(0, containing.width - left - right - marginLeft - marginRight);
     } else {
-      width = resolveHorizontal(ctx, absolute, 0, containing.width - (left ?? 0) - (right ?? 0), true).width;
+      width = resolveHorizontal(ctx, absolute, 0, containing.width - (left ?? 0) - (right ?? 0), true, containing.width).width;
     }
     const staticPosition = absolute.staticPosition ?? containing;
     const x = left != null ? containing.x + left + marginLeft
@@ -357,27 +360,57 @@ function layoutAbsolutes(ctx, box, record) {
   }
 }
 
+/**
+ * justify-content in a column flex container (Flexbox §8.2): `free` is the
+ * height left over once the items are stacked, as with a min-height or height
+ * taller than them. Each item's output moves by its share; shifts are applied
+ * item by item because shiftOutput moves everything after a start index.
+ */
+function justifyColumn(ctx, items, justify = "normal", free) {
+  if (!(free > 0) || ["normal", "start", "flex-start", "stretch"].includes(justify)) return;
+  const count = items.length;
+  const offset = (index) => {
+    switch (justify) {
+      case "center": return free / 2;
+      case "end": case "flex-end": return free;
+      case "space-between": return count > 1 ? free * index / (count - 1) : 0;
+      case "space-around": return free / count * (index + 0.5);
+      case "space-evenly": return free / (count + 1) * (index + 1);
+      default: return 0;
+    }
+  };
+  let applied = 0;
+  items.forEach((item, index) => {
+    const delta = offset(index) - applied;
+    if (delta) shiftOutput(ctx, item.boxStart, item.fragmentStart, 0, delta);
+    applied += delta;
+  });
+}
+
 function shiftOutput(ctx, boxStart, fragmentStart, dx, dy) {
   for (let index = boxStart; index < ctx.boxes.length; index++) {
     ctx.boxes[index].x += dx;
     ctx.boxes[index].y += dy;
   }
   for (let index = fragmentStart; index < ctx.fragments.length; index++) {
-    const fragment = ctx.fragments[index];
-    ctx.fragments[index] = {
-      ...fragment,
-      x: fragment.x + dx,
-      y: fragment.y + dy,
-      baseline: fragment.baseline == null ? null : fragment.baseline + dy,
-      runs: Object.freeze(fragment.runs.map((run) => Object.freeze({
-        ...run,
-        x: run.x + dx,
-        y: run.y == null ? run.y : run.y + dy,
-      }))),
-    };
+    ctx.fragments[index] = shiftedFragment(ctx.fragments[index], dx, dy);
   }
 }
 
+function shiftedFragment(fragment, dx, dy) {
+  return {
+    ...fragment,
+    x: fragment.x + dx,
+    y: fragment.y + dy,
+    baseline: fragment.baseline == null ? null : fragment.baseline + dy,
+    runs: Object.freeze(fragment.runs.map((run) => Object.freeze({
+      ...run,
+      x: run.x + dx,
+      y: run.y == null ? run.y : run.y + dy,
+    }))),
+  };
+}
+
 function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeight = null) {
   const style = box.style;
   const border = borderWidths(style);
@@ -401,6 +434,7 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
       height: dimensions.height,
       resource: box.node.resource,
       video: box.node.tagName === "VIDEO",
+      audio: box.node.tagName === "AUDIO",
       svg: box.node.svg ?? null,
     }], imageX, imageY, dimensions.width, dimensions.height));
     record.height = dimensions.height + padding[0] + padding[2] + border[0] + border[2];
@@ -412,6 +446,9 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
   const contentTop = y + border[0] + padding[0];
   const firstFragment = ctx.fragments.length;
   let contentBottom = contentTop;
+  // Column flex items and grid rows, aligned once the height is known.
+  let columnItems = null;
+  let gridResult = null;
   let baseline = null;
 
   if (box.table) {
@@ -419,9 +456,9 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
     contentBottom = result.bottom;
     baseline = result.baseline;
   } else if (box.grid) {
-    const result = layoutGrid(ctx, box, contentX, contentWidth, contentTop);
-    contentBottom = result.bottom;
-    baseline = result.baseline;
+    gridResult = layoutGrid(ctx, box, contentX, contentWidth, contentTop);
+    contentBottom = gridResult.bottom;
+    baseline = gridResult.baseline;
   } else if (box.flex === "row") {
     const result = layoutFlexRow(ctx, box, contentX, contentWidth, contentTop);
     contentBottom = result.bottom;
@@ -429,8 +466,10 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
   } else if (box.flex === "column") {
     const gap = style?.rowGap ?? style?.gap ?? 0;
     let cursor = contentTop;
+    columnItems = [];
     box.children.forEach((child, index) => {
       if (index > 0) cursor += gap;
+      columnItems.push({ boxStart: ctx.boxes.length, fragmentStart: ctx.fragments.length });
       if (child.kind === "ifc") {
         const result = layoutInline(ctx, child, contentX, contentWidth, cursor);
         cursor = result.bottom;
@@ -499,6 +538,8 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
   if (maxHeight != null) contentHeight = Math.min(contentHeight, toContentHeight(maxHeight));
   const minHeight = numberOrNull(style?.minHeight);
   if (minHeight != null) contentHeight = Math.max(contentHeight, toContentHeight(minHeight));
+  if (columnItems?.length) justifyColumn(ctx, columnItems, style?.justifyContent, contentHeight - (contentBottom - contentTop));
+  if (gridResult) alignGridContent(ctx, gridResult, style?.alignContent, contentHeight - (contentBottom - contentTop));
   record.height = forcedHeight ?? contentHeight + padding[0] + padding[2] + border[0] + border[2];
   if (style?.display === "list-item") placeListMarker(ctx, box, contentX, contentTop, firstFragment);
   return { height: record.height, baseline };
@@ -812,7 +853,9 @@ function layoutGrid(ctx, box, x, width, y) {
   const rowStarts = trackStarts(rows, [], rowGap, y);
 
   let baseline = null;
+  const placements = [];
   for (const item of grid.items) {
+    const placement = { row: item.row, boxStart: ctx.boxes.length, fragmentStart: ctx.fragments.length };
     const areaY = rowStarts[item.row];
     const areaHeight = spanSize(rows, [], rowGap, item.row, item.rowSpan);
     const itemStyle = item.box.style;
@@ -832,9 +875,38 @@ function layoutGrid(ctx, box, x, width, y) {
     }
     const result = layoutBlock(ctx, item.box, item.horizontal.x, item.horizontal.width, itemY, false, forcedHeight);
     baseline ??= result.baseline;
+    placements.push(Object.assign(placement, { boxEnd: ctx.boxes.length, fragmentEnd: ctx.fragments.length }));
   }
   const height = rows.reduce((sum, size) => sum + size, 0) + rowGap * Math.max(0, rows.length - 1);
-  return { bottom: y + height, baseline };
+  return { bottom: y + height, baseline, placements, rowCount: rows.length };
+}
+
+/**
+ * align-content for a grid taller than its rows (CSS Box Alignment 3 §5.3):
+ * the free space goes before, between or around the rows. Each item moves
+ * with its (first) row.
+ */
+function alignGridContent(ctx, grid, alignment = "normal", free) {
+  if (!(free > 0) || !grid.rowCount || ["normal", "start", "stretch"].includes(alignment)) return;
+  const count = grid.rowCount;
+  const offset = (row) => {
+    switch (alignment) {
+      case "center": return free / 2;
+      case "end": return free;
+      case "space-between": return count > 1 ? free * row / (count - 1) : 0;
+      case "space-around": return free / count * (row + 0.5);
+      case "space-evenly": return free / (count + 1) * (row + 1);
+      default: return 0;
+    }
+  };
+  for (const placement of grid.placements) {
+    const dy = offset(placement.row);
+    if (!dy) continue;
+    for (let index = placement.boxStart; index < placement.boxEnd; index++) ctx.boxes[index].y += dy;
+    for (let index = placement.fragmentStart; index < placement.fragmentEnd; index++) {
+      ctx.fragments[index] = shiftedFragment(ctx.fragments[index], 0, dy);
+    }
+  }
 }
 
 // ---------------------------------------------------------------------------
@@ -1426,7 +1498,7 @@ function dryLayout(ctx, box, width) {
 }
 
 /** Resolves the used border-box width and horizontal margins of a block-level box. */
-function resolveHorizontal(ctx, box, containingX, containingWidth, shrink) {
+function resolveHorizontal(ctx, box, containingX, containingWidth, shrink, percentageBasis = containingWidth) {
   const style = box.style;
   const padding = style?.padding ?? ZERO_BOX;
   const extra = padding[1] + padding[3] + borderWidths(style)[1] + borderWidths(style)[3];
@@ -1435,15 +1507,15 @@ function resolveHorizontal(ctx, box, containingX, containingWidth, shrink) {
   let marginLeft = numberOrZero(margin[3]);
   let marginRight = numberOrZero(margin[1]);
   const available = Math.max(0, containingWidth - marginLeft - marginRight);
-  const specified = numberOrNull(resolveLength(style?.width, containingWidth));
+  const specified = numberOrNull(resolveLength(style?.width, percentageBasis));
   let width;
   if (box.replaced) width = imageDimensions(box.node, containingWidth).width + extra;
   else if (specified != null) width = borderBox(specified);
   else if (shrink) width = Math.min(maxContentWidth(ctx, box), available);
   else width = available;
-  const maxWidth = numberOrNull(resolveLength(style?.maxWidth, containingWidth));
+  const maxWidth = numberOrNull(resolveLength(style?.maxWidth, percentageBasis));
   if (maxWidth != null) width = Math.min(width, borderBox(maxWidth));
-  const minWidth = numberOrNull(resolveLength(style?.minWidth, containingWidth));
+  const minWidth = numberOrNull(resolveLength(style?.minWidth, percentageBasis));
   if (minWidth != null) width = Math.max(width, borderBox(minWidth));
   width = Math.max(width, extra);
 
@@ -1724,7 +1796,7 @@ function buildParagraph(ctx, ifc) {
   const runAt = new Array(text.length);
   for (const run of visibleRuns) for (let index = run.start; index < run.end; index++) runAt[index] = run;
   const opportunities = new Set();
-  const graphemes = [...new Intl.Segmenter(undefined, { granularity: "grapheme" }).segment(text)];
+  const graphemes = [...GRAPHEME_SEGMENTER.segment(text)];
   for (const { segment, index } of graphemes) {
     const run = runAt[index];
     const end = index + segment.length;
@@ -2005,6 +2077,7 @@ function placeLine(ctx, ifc, paragraph, line, x, width, y, atomFor) {
         height: segment.dimensions.height,
         resource: run.node.resource,
         video: run.node.tagName === "VIDEO",
+        audio: run.node.tagName === "AUDIO",
         svg: run.node.svg ?? null,
       });
     } else if (run.kind === "atomic") {
@@ -2124,13 +2197,15 @@ function borderWidths(style) {
   return style?.borderWidths ?? ZERO_BOX;
 }
 
+// Not frozen: intrinsic sizing lays lines out many times over, and freezing
+// every run was the largest single cost of layout. Nothing mutates them.
 function lineFragment(style, text, nodeIds, runs, x, y, width, height, baseline = null) {
   return {
     type: "line",
     baseline,
     text,
-    nodeIds: Object.freeze(nodeIds),
-    runs: Object.freeze(runs.map((run) => Object.freeze(run))),
+    nodeIds,
+    runs,
     x,
     y,
     width,
@@ -2142,6 +2217,8 @@ function lineFragment(style, text, nodeIds, runs, x, y, width, height, baseline
 // ---------------------------------------------------------------------------
 // Shared helpers
 
+const GRAPHEME_SEGMENTER = new Intl.Segmenter(undefined, { granularity: "grapheme" });
+
 function cachedMeasure(measureText) {
   const byStyle = new Map();
   return (text, style) => {
@@ -2156,7 +2233,9 @@ function cachedMeasure(measureText) {
 
 function cachedMetrics(fontMetrics) {
   const cache = new Map();
-  return (style) => {
+  // Computed styles are frozen and shared, so most lookups hit by identity.
+  const byStyle = new WeakMap();
+  const metricsFor = (style) => {
     const fontSize = style?.fontSize ?? 16;
     const key = `${fontSize}/${style?.fontWeight ?? 400}/${style?.fontFamily?.join(",")}`;
     let metrics = cache.get(key);
@@ -2169,6 +2248,12 @@ function cachedMetrics(fontMetrics) {
     }
     return metrics;
   };
+  return (style) => {
+    if (style === null || typeof style !== "object") return metricsFor(style);
+    let metrics = byStyle.get(style);
+    if (!metrics) byStyle.set(style, metrics = metricsFor(style));
+    return metrics;
+  };
 }
 
 function imageDimensions(node, referenceWidth) {

package/lib/network/network-service.js

@@ -59,10 +59,10 @@ export class NetworkService {
   }
 
   /** A top-level document load. */
-  async navigate(url) {
+  async navigate(url, { onResponse } = {}) {
     return this.#send({ url, method: "GET", headers: [], body: null }, {
       credentials: "include", site: null, topLevelNavigation: true,
-    });
+    }, { onResponse });
   }
 
   /** A subresource the renderer needs to render (no-cors, credentials included). */
@@ -192,7 +192,7 @@ export class NetworkService {
   }
 
   /** Sends a request, following redirects by hand so cookies apply to every hop. */
-  async #send(request, context, { redirect = "follow", corsOrigin = null } = {}) {
+  async #send(request, context, { redirect = "follow", corsOrigin = null, onResponse = null } = {}) {
     let { url, method, body } = request;
     const baseHeaders = request.headers;
     let redirected = false;
@@ -223,6 +223,10 @@ export class NetworkService {
         redirected = true;
         continue;
       }
+      if (onResponse) {
+        const handled = await onResponse(response, url);
+        if (handled) return handled;
+      }
       return this.#result(response, url, redirected, "basic");
     }
     throw new TypeError("Too many redirects");

package/lib/network/resolver.js

@@ -12,11 +12,20 @@
  * each with its own socket), and requests connect to an address directly
  * while keeping the host name for the Host header and for TLS (SNI and
  * certificate verification). This also covers musl, which has no such option.
+ *
+ * `localhost` and `*.localhost` are loopback without asking anyone (RFC 6761
+ * §6.3, as Chrome and Bun's own socket resolver do): node:dns hands them to
+ * the system getaddrinfo(), which needs an /etc/hosts entry that minimal
+ * systems (an initramfs, containers) may not have.
  */
 import { lookup as systemLookup } from "node:dns/promises";
 import { isIP } from "node:net";
 
 const DEFAULT_TTL_MS = 60_000;
+const LOOPBACK = Object.freeze([
+  Object.freeze({ address: "127.0.0.1", family: 4 }),
+  Object.freeze({ address: "::1", family: 6 }),
+]);
 // Errors that mean "this address did not answer": try the next one.
 const CONNECT_ERRORS = new Set([
   "ECONNREFUSED", "ETIMEDOUT", "EHOSTUNREACH", "ENETUNREACH", "EADDRNOTAVAIL",
@@ -41,6 +50,7 @@ export class HostResolver {
   /** Addresses for a host name, IPv4 first, then IPv6. */
   addresses(hostname) {
     const name = hostname.toLowerCase();
+    if (isLocalhostName(name)) return Promise.resolve(LOOPBACK);
     const cached = this.#cache.get(name);
     if (cached && cached.expires > this.#now()) return cached.addresses;
     const addresses = this.#resolve(name);
@@ -70,6 +80,12 @@ export class HostResolver {
   }
 }
 
+/** `localhost` or a name under `.localhost` (one trailing dot allowed), lowercase. */
+export function isLocalhostName(name) {
+  const host = name.endsWith(".") ? name.slice(0, -1) : name;
+  return host === "localhost" || host.endsWith(".localhost");
+}
+
 /**
  * fetch() that connects to a resolved address, keeping the host name for the
  * Host header and TLS. IP literals and non-HTTP URLs go to `fetchImpl` as is.

package/lib/paint/display-list.js

@@ -156,10 +156,10 @@ export function buildDisplayList(layout, tree = null) {
         return;
       }
       if (run.type === "image") {
-        if (run.video) {
+        if (run.video || run.audio) {
           const rect = { x: run.x, y, width: run.width, height: run.height };
           images.push(run.resource);
-          items.push({ op: "drawVideo", nodeId: run.nodeId, image: images.length - 1, rect, bounds: rect });
+          items.push({ op: run.video ? "drawVideo" : "drawAudio", nodeId: run.nodeId, image: images.length - 1, rect, bounds: rect });
           return;
         }
         if (!run.resource?.image) return;

package/lib/render-tree/index.js

@@ -185,6 +185,19 @@ export class RenderTreeBuilder {
         children: Object.freeze([]),
       });
     }
+    // Audio is a 300x32 player (painted like video's controls) with the
+    // controls attribute, and not rendered without it (HTML §4.8.11.13).
+    if (element.tagName === "AUDIO") {
+      if (!element.hasAttribute("controls")) return null;
+      return this.#node(element, "image", nodesById, {
+        tagName: "AUDIO",
+        style,
+        resource: resources?.get(element) ?? null,
+        widthAttribute: positiveDimension(element.getAttribute("width")) ?? 300,
+        heightAttribute: 32,
+        children: Object.freeze([]),
+      });
+    }
     if (element.tagName === "IMG" || element.tagName === "VIDEO") {
       return this.#node(element, "image", nodesById, {
         tagName: element.tagName,