buninu-browser 0.2.1 → 0.2.2

package/lib/paint/display-list.js

@@ -15,19 +15,44 @@
  * Image resources are referenced by index into the non-enumerable `images`
  * array so `JSON.stringify(displayList)` stays a plain debug/reftest dump.
  */
-import { gradientLayers, resolveGradient } from "./gradient.js";
+import { backgroundLayers, gradientLayers, isGradient, resolveGradient, splitTopLevel } from "./gradient.js";
 
 const TRANSPARENT = "rgba(0, 0, 0, 0)";
+const CSS_URL = /^url\(\s*(["']?)(.*?)\1\s*\)$/is;
+const LENGTH = /^(-?(?:\d+\.?\d*|\.\d+))(px|%|em|rem)?$/;
 
 /**
  * @param layout the layout result
  * @param tree the render tree it was laid out from; without it, visibility,
  *   opacity and overflow clipping of ancestors are not applied.
  */
-export function buildDisplayList(layout, tree = null, resources = null) {
+/**
+ * @param backgroundResource(url) the decoded image a background url() names,
+ *   or null while it has not arrived (it paints nothing until then)
+ */
+export function buildDisplayList(layout, tree = null, resources = null, backgroundResource = null, scrollOffsetOf = null) {
   const items = [];
   const images = [];
-  const effects = paintEffects(layout, tree);
+  // Every box and run in paint order, painted or not: what a point hits (see hitTarget).
+  const hits = [];
+  // How far each scroll container's content reaches (its scrollable overflow),
+  // unscrolled: all of it, and the in-flow part, which alone gets the end
+  // padding (CSS Overflow 3 §2.2); absolutely positioned boxes count as they are.
+  const scrollers = new Map();
+  const reach = (effect, rect) => {
+    // Content of a nested scroll container counts for that one only.
+    const id = effect.scrollers?.[0];
+    if (id == null) return;
+    const extent = scrollers.get(id) ?? { right: -Infinity, bottom: -Infinity, flowRight: -Infinity, flowBottom: -Infinity };
+    extent.right = Math.max(extent.right, rect.x + rect.width);
+    extent.bottom = Math.max(extent.bottom, rect.y + rect.height);
+    if (!effect.outOfFlow) {
+      extent.flowRight = Math.max(extent.flowRight, rect.x + rect.width);
+      extent.flowBottom = Math.max(extent.flowBottom, rect.y + rect.height);
+    }
+    scrollers.set(id, extent);
+  };
+  const effects = paintEffects(layout, tree, scrollOffsetOf);
   // Text styled with background-clip:text takes its gradient from the owning box.
   const textGradients = new Map();
   for (const box of layout.boxes) {
@@ -84,6 +109,10 @@ export function buildDisplayList(layout, tree = null, resources = null) {
     if (!effect) return;
     const start = items.length;
     const rect = { x: box.x, y: box.y, width: box.width, height: box.height };
+    hits.push({
+      nodeId: box.nodeId, rect: effect.transform ? transformRect(effect.transform, rect) : rect, clipRect: effect.clipRect, fixed: effect.fixed,
+    });
+    reach(effect, rect);
     const radii = cornerRadii(style, rect);
     for (const shadow of style.boxShadow ?? []) {
       if (shadow.inset || shadow.color === TRANSPARENT) continue;
@@ -108,15 +137,26 @@ export function buildDisplayList(layout, tree = null, resources = null) {
         bounds: inflate(shadowRect, shadow.blur),
       });
     }
-    const gradients = gradientLayers(style.backgroundImage)
-      .map((source) => resolveGradient(source, rect, style.fontSize))
-      .filter(Boolean);
     if (style.backgroundClip !== "text") {
       if (style.backgroundColor && style.backgroundColor !== TRANSPARENT) {
         items.push({ op: "fillRect", nodeId: box.nodeId, rect, radii, color: style.backgroundColor, bounds: rect });
       }
-      for (const gradient of gradients.reverse()) {
-        items.push({ op: "fillRect", nodeId: box.nodeId, rect, radii, gradient, bounds: rect });
+      // Background layers, bottom first.
+      const layers = backgroundLayers(style.backgroundImage);
+      for (let index = layers.length - 1; index >= 0; index--) {
+        const layer = layers[index];
+        if (isGradient(layer)) {
+          const gradient = resolveGradient(layer, rect, style.fontSize);
+          if (gradient) items.push({ op: "fillRect", nodeId: box.nodeId, rect, radii, gradient, bounds: rect });
+          continue;
+        }
+        const url = CSS_URL.exec(layer)?.[2];
+        const resource = url && backgroundResource?.(url);
+        if (!resource?.image) continue;
+        const placed = backgroundTile(style, rect, index, resource);
+        if (!placed) continue;
+        images.push(resource);
+        items.push({ op: "drawBackgroundImage", nodeId: box.nodeId, image: images.length - 1, rect, radii, ...placed });
       }
     }
     const widths = style.borderWidths ?? [0, 0, 0, 0];
@@ -142,6 +182,19 @@ export function buildDisplayList(layout, tree = null, resources = null) {
       const effect = effects(run.nodeId, run.type === "image" ? "box" : "text");
       if (!effect) continue;
       const start = items.length;
+      const hitRect = {
+        x: run.x,
+        y: run.type === "image" ? run.y ?? fragment.y : fragment.y,
+        width: run.width,
+        height: run.type === "image" ? run.height : fragment.height,
+      };
+      hits.push({
+        nodeId: run.nodeId,
+        rect: effect.transform ? transformRect(effect.transform, hitRect) : hitRect,
+        clipRect: effect.clipRect,
+        fixed: effect.fixed,
+      });
+      reach(effect, hitRect);
       paintRun(fragment, run);
       applyEffect(items, start, effect);
     }
@@ -204,17 +257,51 @@ export function buildDisplayList(layout, tree = null, resources = null) {
     items: Object.freeze(kept.map(deepFreeze)),
   };
   Object.defineProperty(displayList, "images", { value: Object.freeze(images), enumerable: false });
+  Object.defineProperty(displayList, "hits", { value: Object.freeze(hits), enumerable: false });
+  Object.defineProperty(displayList, "scrollers", { value: scrollers, enumerable: false });
+  // How far the page's content reaches (its scrollable overflow, CSS Overflow 3 §2.2):
+  // every box and run, cut to the clips around it; fixed content does not count.
+  let right = 0;
+  let bottom = 0;
+  for (const { rect, clipRect, fixed } of hits) {
+    if (fixed) continue;
+    const reached = clipRect ? intersectRects(rect, clipRect) : rect;
+    if (!(reached.width > 0 && reached.height > 0)) continue;
+    right = Math.max(right, reached.x + reached.width);
+    bottom = Math.max(bottom, reached.y + reached.height);
+  }
+  Object.defineProperty(displayList, "extent", { value: Object.freeze({ width: right, height: bottom }), enumerable: false });
   return Object.freeze(displayList);
 }
 
+/**
+ * The render node id of the topmost box or run at a viewport point, in paint
+ * order, or null. `skip(nodeId)` passes over nodes that take no pointer
+ * events. Fixed content stays put as the page scrolls.
+ */
+export function hitTarget(displayList, x, y, scroll, skip = () => false) {
+  const hits = displayList?.hits ?? [];
+  for (let index = hits.length - 1; index >= 0; index--) {
+    const { nodeId, rect, clipRect, fixed } = hits[index];
+    const pointX = fixed ? x : x + scroll.x;
+    const pointY = fixed ? y : y + scroll.y;
+    if (pointX < rect.x || pointX >= rect.x + rect.width || pointY < rect.y || pointY >= rect.y + rect.height) continue;
+    if (clipRect && (pointX < clipRect.x || pointX >= clipRect.x + clipRect.width
+      || pointY < clipRect.y || pointY >= clipRect.y + clipRect.height)) continue;
+    if (skip(nodeId)) continue;
+    return nodeId;
+  }
+  return null;
+}
+
 /**
  * Painting effects of ancestors (CSS Visual Effects / Overflow): visibility,
  * group opacity (approximated per item), and clipping by overflow, clip and
  * clip-path rectangles. Returns effects(nodeId, "box" | "text") → null when
  * the item is not painted, else { opacity, clipRect }.
  */
-function paintEffects(layout, tree) {
-  const none = { opacity: 1, clipRect: null, fixed: false };
+function paintEffects(layout, tree, scrollOffsetOf = null) {
+  const none = { opacity: 1, clipRect: null, fixed: false, transform: null, scrollers: null, outOfFlow: false };
   if (!tree?.root) return () => none;
   const parents = new Map();
   (function walk(node) {
@@ -267,6 +354,19 @@ function paintEffects(layout, tree) {
     }
     return rect;
   });
+  // A scale an element's transform applies to itself and its contents, about its transform-origin.
+  const ownTransform = memo((node) => {
+    const transform = node.style?.transform;
+    const box = boxes.get(node.id);
+    if (!box || !transform?.scaleX || (transform.scaleX === 1 && transform.scaleY === 1)) return null;
+    const origin = transformOrigin(node.style.transformOrigin, box);
+    return {
+      a: transform.scaleX,
+      d: transform.scaleY,
+      e: origin.x * (1 - transform.scaleX),
+      f: origin.y * (1 - transform.scaleY),
+    };
+  });
 
   return (nodeId, kind) => {
     const key = `${kind}:${nodeId}`;
@@ -282,24 +382,61 @@ function paintEffects(layout, tree) {
       // Overflow clipping skips ancestors that are not in the containing-block
       // chain of an absolutely positioned box; fixed boxes escape entirely.
       let escaping = null;
+      // Clips by the element that applies them: a scaled ancestor moves them too.
+      const clips = [];
+      const chain = [];
+      // Scroll containers this content scrolls with: those whose clip applies to it.
+      const scrolledBy = new Set();
+      // Whether an absolutely positioned box lies between the content and
+      // its innermost scroll container.
+      let positionedOut = false;
+      let outOfFlow = false;
       for (let node = owner; node; node = parents.get(node.id)) {
+        chain.push(node);
         const style = node.style;
         if (!style) continue;
         if (style.position === "fixed") fixed = true;
         opacity *= style.opacity ?? 1;
-        clipRect = intersectRects(clipRect, shapeClip(node));
+        clips.push([node, shapeClip(node)]);
         const ownContent = kind === "text" || node !== owner;
         if (ownContent && escaping !== "fixed") {
           const positioned = style.position && style.position !== "static";
           if (!escaping || positioned) {
-            clipRect = intersectRects(clipRect, overflowClip(node));
+            clips.push([node, overflowClip(node)]);
+            if (isScroller(style)) {
+              if (!scrolledBy.size) outOfFlow = positionedOut;
+              scrolledBy.add(node);
+            }
             escaping = null;
           }
         }
+        if (style.position === "absolute" || style.position === "fixed") positionedOut = true;
         if (style.position === "fixed") escaping = "fixed";
         else if (style.position === "absolute" && escaping !== "fixed") escaping = "absolute";
       }
-      result = opacity <= 0 ? null : { opacity, clipRect, fixed };
+      // The transforms from the root down to each element: scales, and the
+      // scroll offsets of the scroll containers it is the content of.
+      let transform = null;
+      const transforms = new Map();
+      for (let index = chain.length - 1; index >= 0; index--) {
+        const node = chain[index];
+        const own = ownTransform(node);
+        if (own) transform = transform ? composeTransforms(transform, own) : own;
+        transforms.set(node, transform);
+        const offset = scrolledBy.has(node) ? scrollOffsetOf?.(node.domNode) : null;
+        if (offset && (offset.x || offset.y)) {
+          const scrolled = { a: 1, d: 1, e: 0 - offset.x, f: 0 - offset.y };
+          transform = transform ? composeTransforms(transform, scrolled) : scrolled;
+        }
+      }
+      for (const [node, clip] of clips) {
+        const matrix = transforms.get(node);
+        clipRect = intersectRects(clipRect, clip && matrix ? transformRect(matrix, clip) : clip);
+      }
+      // The owner's own box moves with every scroll container above it, not with its own.
+      transform = kind === "text" ? transform : transforms.get(owner) ?? null;
+      const scrollers = scrolledBy.size ? [...scrolledBy].map((node) => node.id) : null;
+      result = opacity <= 0 ? null : { opacity, clipRect, fixed, transform, scrollers, outOfFlow };
     } else {
       result = null;
     }
@@ -308,6 +445,11 @@ function paintEffects(layout, tree) {
   };
 }
 
+/** Whether a box is a scroll container (CSS Overflow 3 §3), by script or by the user. */
+function isScroller(style) {
+  return Boolean(style?.overflowScrollX || style?.overflowScrollY);
+}
+
 function intersectRects(a, b) {
   if (!a) return b;
   if (!b) return a;
@@ -318,12 +460,45 @@ function intersectRects(a, b) {
   return { x, y, width: Math.max(0, right - x), height: Math.max(0, bottom - y) };
 }
 
+/** The resolved transform-origin of a border box (CSS Transforms 1 §5); 50% 50% by default. */
+function transformOrigin(value, box) {
+  const tokens = (value ?? "50% 50%").split(" ");
+  if (tokens.length === 1) tokens.push("center");
+  if (["top", "bottom"].includes(tokens[0]) || ["left", "right"].includes(tokens[1])) tokens.reverse();
+  const resolve = (token, start, extent) => {
+    const keyword = { left: 0, top: 0, center: 0.5, right: 1, bottom: 1 }[token];
+    if (keyword != null) return start + extent * keyword;
+    const match = /^(-?[\d.]+)(px|%)?$/.exec(token);
+    if (!match) return start + extent / 2;
+    return start + (match[2] === "%" ? extent * Number(match[1]) / 100 : Number(match[1]));
+  };
+  return { x: resolve(tokens[0], box.x, box.width), y: resolve(tokens[1], box.y, box.height) };
+}
+
+/** `outer` after `inner`: x -> outer(inner(x)), for scales with translation. */
+function composeTransforms(outer, inner) {
+  return { a: outer.a * inner.a, d: outer.d * inner.d, e: outer.a * inner.e + outer.e, f: outer.d * inner.f + outer.f };
+}
+
+function transformRect(matrix, rect) {
+  const x0 = matrix.a * rect.x + matrix.e;
+  const y0 = matrix.d * rect.y + matrix.f;
+  const x1 = matrix.a * (rect.x + rect.width) + matrix.e;
+  const y1 = matrix.d * (rect.y + rect.height) + matrix.f;
+  return { x: Math.min(x0, x1), y: Math.min(y0, y1), width: Math.abs(x1 - x0), height: Math.abs(y1 - y0) };
+}
+
 function applyEffect(items, start, effect) {
-  if (effect.opacity === 1 && !effect.clipRect && !effect.fixed) return;
+  if (effect.opacity === 1 && !effect.clipRect && !effect.fixed && !effect.transform) return;
   for (let index = start; index < items.length; index++) {
     const item = items[index];
     if (effect.fixed) item.fixed = true;
     if (effect.opacity < 1) item.opacity = effect.opacity;
+    // Drawn through the transform; its bounds are where it lands.
+    if (effect.transform) {
+      item.transform = effect.transform;
+      item.bounds = transformRect(effect.transform, item.bounds);
+    }
     if (effect.clipRect) {
       item.clipRect = effect.clipRect;
       item.bounds = intersectRects(item.bounds, effect.clipRect);
@@ -360,6 +535,117 @@ function cornerRadii(style, rect) {
   return { x: x * scale, y: y * scale };
 }
 
+/**
+ * Where one background image layer's tiles go (CSS Backgrounds 3 §3): sized
+ * and positioned in the padding box, repeated per background-repeat, painted
+ * within the border box. Null when it has no area.
+ */
+function backgroundTile(style, rect, index, resource) {
+  const border = style.borderWidths ?? [0, 0, 0, 0];
+  const area = {
+    x: rect.x + border[3],
+    y: rect.y + border[0],
+    width: Math.max(0, rect.width - border[1] - border[3]),
+    height: Math.max(0, rect.height - border[0] - border[2]),
+  };
+  const pick = (list, fallback) => {
+    if (!list) return fallback;
+    const entries = splitTopLevel(list, ",");
+    return entries.length ? entries[index % entries.length] : fallback;
+  };
+  const length = (token, reference) => {
+    const match = LENGTH.exec(token);
+    if (!match) return null;
+    const value = Number(match[1]);
+    if (match[2] === "%") return reference * value / 100;
+    if (match[2] === "em") return value * (style.fontSize ?? 16);
+    if (match[2] === "rem") return value * 16;
+    return match[2] || value === 0 ? value : null;
+  };
+
+  // background-size
+  const ratio = resource.width / resource.height;
+  let width;
+  let height;
+  const size = pick(style.backgroundSize, "auto").split(/\s+/);
+  if (size[0] === "cover" || size[0] === "contain") {
+    const fit = size[0] === "cover"
+      ? Math.max(area.width / resource.width, area.height / resource.height)
+      : Math.min(area.width / resource.width, area.height / resource.height);
+    width = resource.width * fit;
+    height = resource.height * fit;
+  } else {
+    width = size[0] === "auto" ? null : length(size[0], area.width);
+    height = (size[1] ?? "auto") === "auto" ? null : length(size[1], area.height);
+    if (width == null && height == null) [width, height] = [resource.width, resource.height];
+    else if (width == null) width = height * ratio;
+    else if (height == null) height = width / ratio;
+  }
+  if (!(width > 0 && height > 0)) return null;
+
+  // background-position: keywords, offsets from the top left, or from an edge.
+  const tokens = pick(style.backgroundPosition, "0% 0%").split(/\s+/);
+  const horizontalKeyword = (token) => token === "left" || token === "right";
+  const verticalKeyword = (token) => token === "top" || token === "bottom";
+  let horizontal = ["left", null];
+  let vertical = ["top", null];
+  if (tokens.length === 1) {
+    // One value: the other is center.
+    horizontal = verticalKeyword(tokens[0]) ? ["center", null] : [tokens[0], null];
+    vertical = verticalKeyword(tokens[0]) ? [tokens[0], null] : ["center", null];
+  } else if (tokens.length === 2) {
+    const [first, second] = verticalKeyword(tokens[0]) || horizontalKeyword(tokens[1]) ? [tokens[1], tokens[0]] : tokens;
+    horizontal = [first, null];
+    vertical = [second, null];
+  } else {
+    // Three or four values: edge keywords, each optionally followed by an
+    // offset; center takes an axis no edge keyword named.
+    const pairs = [];
+    for (let at = 0; at < tokens.length; at++) {
+      const keyword = tokens[at];
+      const offset = at + 1 < tokens.length && LENGTH.test(tokens[at + 1]) ? tokens[++at] : null;
+      pairs.push([keyword, offset]);
+    }
+    const named = { horizontal: false, vertical: false };
+    for (const pair of pairs) {
+      if (horizontalKeyword(pair[0])) [horizontal, named.horizontal] = [pair, true];
+      else if (verticalKeyword(pair[0])) [vertical, named.vertical] = [pair, true];
+    }
+    for (const pair of pairs) {
+      if (pair[0] !== "center") continue;
+      if (!named.horizontal) [horizontal, named.horizontal] = [pair, true];
+      else if (!named.vertical) [vertical, named.vertical] = [pair, true];
+    }
+  }
+  const place = ([keyword, offset], start, extent, tile) => {
+    const free = extent - tile;
+    const fraction = { left: 0, top: 0, center: 0.5, right: 1, bottom: 1 }[keyword];
+    if (fraction == null) return start + (length(keyword, free) ?? 0);
+    const distance = offset == null ? 0 : length(offset, free) ?? 0;
+    return start + free * fraction + (fraction === 1 ? -distance : distance);
+  };
+  const tile = {
+    x: place(horizontal, area.x, area.width, width),
+    y: place(vertical, area.y, area.height, height),
+    width,
+    height,
+  };
+
+  // background-repeat
+  const repeat = pick(style.backgroundRepeat, "repeat").split(/\s+/);
+  const repeats = (value) => value !== "no-repeat";
+  const [repeatX, repeatY] = repeat[0] === "repeat-x" ? [true, false]
+    : repeat[0] === "repeat-y" ? [false, true]
+      : [repeats(repeat[0]), repeats(repeat[1] ?? repeat[0])];
+  // Only the part of the border box the tiles reach paints.
+  const left = repeatX ? rect.x : Math.max(rect.x, tile.x);
+  const right = repeatX ? rect.x + rect.width : Math.min(rect.x + rect.width, tile.x + width);
+  const top = repeatY ? rect.y : Math.max(rect.y, tile.y);
+  const bottom = repeatY ? rect.y + rect.height : Math.min(rect.y + rect.height, tile.y + height);
+  if (right <= left || bottom <= top) return null;
+  return { tile, repeatX, repeatY, bounds: { x: left, y: top, width: right - left, height: bottom - top } };
+}
+
 function inflate(rect, amount) {
   return { x: rect.x - amount, y: rect.y - amount, width: rect.width + amount * 2, height: rect.height + amount * 2 };
 }

package/lib/paint/gradient.js

@@ -9,12 +9,18 @@
  */
 const SIDES = Object.freeze({ top: [0, -1], bottom: [0, 1], left: [-1, 0], right: [1, 0] });
 
+/** Splits a `background-image` value into its layers (images, gradients or none), topmost first. */
+export function backgroundLayers(value) {
+  return value ? splitTopLevel(String(value), ",") : [];
+}
+
+export function isGradient(layer) {
+  return /^(?:repeating-)?(?:linear|radial)-gradient\(/i.test(layer);
+}
+
 /** Splits a `background`/`background-image` value into gradient layers, topmost first. */
 export function gradientLayers(value) {
-  if (!value) return [];
-  return splitTopLevel(String(value), ",")
-    .map((layer) => layer.trim())
-    .filter((layer) => /^(?:repeating-)?(?:linear|radial)-gradient\(/i.test(layer));
+  return backgroundLayers(value).filter(isGradient);
 }
 
 export function resolveGradient(source, rect, fontSize = 16) {
@@ -189,7 +195,7 @@ function resolveLength(text, reference, fontSize) {
   return value;
 }
 
-function splitTopLevel(source, separator) {
+export function splitTopLevel(source, separator) {
   const parts = [];
   let depth = 0;
   let start = 0;

package/lib/render-tree/index.js

@@ -187,8 +187,11 @@ export class RenderTreeBuilder {
         style,
         resource: null,
         svg,
-        widthAttribute: svg.width ?? (svg.height && viewWidth ? svg.height * viewWidth / viewHeight : viewWidth ?? null),
-        heightAttribute: svg.height ?? (svg.width && viewHeight ? svg.width * viewHeight / viewWidth : viewHeight ?? null),
+        // Sizes the svg element states; without them it fills its container
+        // (width 100%), keeping its viewBox's ratio (see imageDimensions).
+        widthAttribute: svg.width ?? null,
+        heightAttribute: svg.height ?? null,
+        svgRatio: viewWidth && viewHeight ? viewWidth / viewHeight : null,
         children: Object.freeze([]),
       });
     }
@@ -205,6 +208,18 @@ export class RenderTreeBuilder {
         children: Object.freeze([]),
       });
     }
+    // An iframe shows its document's latest frame (the resource), at the
+    // default object size unless sized (HTML §15.4.2: 300x150).
+    if (element.tagName === "IFRAME") {
+      return this.#node(element, "image", nodesById, {
+        tagName: "IFRAME",
+        style,
+        resource: resources?.get(element) ?? null,
+        widthAttribute: positiveDimension(element.getAttribute("width")),
+        heightAttribute: positiveDimension(element.getAttribute("height")),
+        children: Object.freeze([]),
+      });
+    }
     if (element.tagName === "IMG" || element.tagName === "VIDEO") {
       return this.#node(element, "image", nodesById, {
         tagName: element.tagName,

package/lib/render-tree/svg.js

@@ -20,7 +20,8 @@ const IDENTITY = Object.freeze([1, 0, 0, 1, 0, 0]);
  * @returns {{ viewBox: number[] | null, width: number | null, height: number | null, shapes: object[] }}
  */
 export function extractSvg(element, currentColor) {
-  const viewBox = parseNumbers(element.getAttribute("viewBox"));
+  // HTML-parsed markup may carry the attribute lowercased (viewbox).
+  const viewBox = parseNumbers(element.getAttribute("viewBox") ?? element.getAttribute("viewbox"));
   const shapes = [];
   const root = {
     fill: "rgba(0, 0, 0, 1)",