buninu-browser 0.7.0 → 0.9.0

package/lib/layout/text-layout.js

@@ -179,7 +179,7 @@ function buildBox(node, flags, blockified = false) {
   // 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"
+    ? style?.flexDirection?.startsWith("column") ? "column" : "row"
     : null;
   const grid = ["grid", "inline-grid"].includes(display);
   const table = ["table", "inline-table"].includes(node.type);
@@ -358,6 +358,7 @@ function layoutBlock(ctx, box, x, width, y, absorbTop = false, forcedHeight = nu
     const context = Number.isInteger(style.zIndex);
     ctx.layer = Object.freeze({
       z: context ? style.zIndex : 0,
+      nodeId: box.node.id,
       order: ctx.layerCount++,
       context,
       parent: ctx.stackingContext,
@@ -430,6 +431,7 @@ function cachedBlockResult(ctx, box, key, y, x) {
   for (const layer of cached.layers) {
     layers.push(Object.freeze({
       z: layer.z,
+      nodeId: layer.nodeId,
       order: ctx.layerCount++,
       context: layer.context,
       parent: layer.parent === -1 ? ctx.stackingContext : layers[layer.parent],
@@ -485,7 +487,7 @@ function cacheBlockResult(ctx, box, key, x, y, result, start) {
   for (const layer of ordered) {
     const parent = indices.get(layer.parent) ?? (layer.parent === start.context ? -1 : null);
     if (parent === null) return;
-    layers.push({ z: layer.z, context: layer.context, parent });
+    layers.push({ z: layer.z, nodeId: layer.nodeId, context: layer.context, parent });
   }
   const indexOf = (layer) => layer === start.layer ? -1 : indices.get(layer) ?? null;
   const boxLayers = boxes.map((record) => indexOf(record.layer));
@@ -538,7 +540,7 @@ function layoutAbsolutes(ctx, box, record) {
       const [top, right, bottom, left] = (style?.inset ?? ["auto", "auto", "auto", "auto"])
         .map((value, index) => value === "auto" ? null : resolveLength(value, index % 2 ? containing.width : containing.height));
       const margin = style?.margin ?? ZERO_BOX;
-      const [marginTop, marginRight, marginBottom, marginLeft] = margin.map(numberOrZero);
+      let [marginTop, marginRight, marginBottom, marginLeft] = margin.map(numberOrZero);
       const specifiedWidth = numberOrNull(resolveLength(style?.width, containing.width));
       let width;
       if (specifiedWidth == null && left != null && right != null) {
@@ -546,6 +548,19 @@ function layoutAbsolutes(ctx, box, record) {
       } else {
         width = resolveHorizontal(ctx, absolute, 0, containing.width - (left ?? 0) - (right ?? 0), true, containing.width).width;
       }
+      // CSS 2 §10.3.7: with both insets and width resolved, auto margins
+      // absorb the remaining space. Normal-flow margin resolution above is
+      // only used to size the box; its x is not the absolute position.
+      if (specifiedWidth != null && left != null && right != null) {
+        const remaining = containing.width-left-right-width-marginLeft-marginRight;
+        const autoLeft=margin[3]==="auto",autoRight=margin[1]==="auto";
+        if(autoLeft&&autoRight) {
+          if(remaining>=0)marginLeft=marginRight=remaining/2;
+          else if(style.direction==="rtl"){marginLeft=remaining;marginRight=0;}
+          else {marginLeft=0;marginRight=remaining;}
+        }else if(autoLeft)marginLeft=remaining;
+        else if(autoRight)marginRight=remaining;
+      }
       const staticPosition = absolute.staticPosition ?? containing;
       const x = left != null ? containing.x + left + marginLeft
         : right != null ? containing.x + containing.width - right - marginRight - width
@@ -566,6 +581,14 @@ function layoutAbsolutes(ctx, box, record) {
   }
 }
 
+/** CSS Sizing 4: a degenerate ratio behaves as auto; replaced boxes can prefer their natural ratio. */
+function preferredAspectRatio(style, natural = null) {
+  const value = style?.aspectRatio;
+  if (!value || value.auto && natural != null) return natural;
+  const ratio = value.numerator / value.denominator;
+  return Number.isFinite(ratio) && ratio > 0 ? ratio : natural;
+}
+
 /**
  * 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
@@ -602,12 +625,12 @@ function justifyColumn(ctx, items, justify = "normal", free) {
 }
 
 /** Moves output already produced; records are replaced, as retained ones are frozen and shared. */
-function shiftOutput(ctx, boxStart, fragmentStart, dx, dy) {
-  for (let index = boxStart; index < ctx.boxes.length; index++) {
+function shiftOutput(ctx, boxStart, fragmentStart, dx, dy, boxEnd=ctx.boxes.length, fragmentEnd=ctx.fragments.length) {
+  for (let index = boxStart; index < boxEnd; index++) {
     const record = ctx.boxes[index];
     ctx.boxes[index] = { ...record, x: record.x + dx, y: record.y + dy };
   }
-  for (let index = fragmentStart; index < ctx.fragments.length; index++) {
+  for (let index = fragmentStart; index < fragmentEnd; index++) {
     ctx.fragments[index] = shiftedFragment(ctx.fragments[index], dx, dy);
   }
 }
@@ -674,14 +697,24 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
   const containingHeight = ctx.containing?.height;
   const resolveHeight = (value) => numberOrNull(resolveLength(value, containingHeight ?? NaN));
   const specifiedHeight = resolveHeight(style?.height);
+  const ratio = preferredAspectRatio(style);
+  // The transferred height uses the box selected by box-sizing. It is
+  // definite for descendants (including percentage heights and grid tracks).
+  let ratioHeight = specifiedHeight == null && forcedHeight == null && ratio != null
+    ? style.boxSizing === "border-box" ? toContentHeight(width / ratio) : contentWidth / ratio
+    : null;
   const minHeight = resolveHeight(style?.minHeight);
   const maxHeight = style?.maxHeight === "none" ? null : resolveHeight(style?.maxHeight);
+  if (ratioHeight != null) {
+    if (maxHeight != null) ratioHeight = Math.min(ratioHeight, toContentHeight(maxHeight));
+    if (minHeight != null) ratioHeight = Math.max(ratioHeight, toContentHeight(minHeight));
+  }
   const previousContaining = ctx.containing;
   ctx.containing = {
     width: contentWidth,
     height: forcedHeight != null
       ? Math.max(0, forcedHeight - border[0] - border[2] - padding[0] - padding[2])
-      : specifiedHeight != null ? toContentHeight(specifiedHeight) : null,
+      : specifiedHeight != null ? toContentHeight(specifiedHeight) : ratioHeight,
   };
 
   if (box.table) {
@@ -743,10 +776,25 @@ function layoutBlockContent(ctx, box, x, width, y, absorbTop = false, forcedHeig
   ctx.containing = previousContaining;
   let contentHeight = Math.max(0, contentBottom - contentTop);
   if (specifiedHeight != null) contentHeight = toContentHeight(specifiedHeight);
+  else if (ratioHeight != null) contentHeight = style.minHeight === "auto" && style.overflowY === "visible"
+    ? Math.max(contentHeight, ratioHeight) : ratioHeight;
   if (maxHeight != null) contentHeight = Math.min(contentHeight, toContentHeight(maxHeight));
   if (minHeight != null) contentHeight = Math.max(contentHeight, toContentHeight(minHeight));
   if (forcedHeight != null) contentHeight = Math.max(0, forcedHeight - padding[0] - padding[2] - border[0] - border[2]);
-  if (columnItems?.length) justifyColumn(ctx, columnItems, style?.justifyContent, contentHeight - (contentBottom - contentTop));
+  if (columnItems?.length) {
+    justifyColumn(ctx, columnItems, style?.justifyContent, contentHeight - (contentBottom - contentTop));
+    if(style?.flexDirection === "column-reverse") {
+      for(const [index,item] of columnItems.entries()){
+        const record=ctx.boxes[item.boxStart];
+        const position=item.mainY+record.y-item.initialY;
+        const delta=2*contentTop+contentHeight-2*position-item.mainHeight;
+        if(index===0&&baseline!=null)baseline+=delta;
+        const next=columnItems[index+1];
+        shiftOutput(ctx,item.boxStart,item.fragmentStart,0,delta,
+          next?.boxStart??ctx.boxes.length,next?.fragmentStart??ctx.fragments.length);
+      }
+    }
+  }
   if (gridResult) alignGridContent(ctx, gridResult, style?.alignContent, contentHeight - (contentBottom - contentTop));
   record.height = forcedHeight ?? contentHeight + padding[0] + padding[2] + border[0] + border[2];
   // Summary's disclosure marker participates in its inline content.
@@ -840,6 +888,8 @@ function roman(value) {
 
 function layoutFlexColumn(ctx, box, x, width, y, minHeight, maxHeight) {
   const style = box.style;
+  const reverse=style?.flexDirection === "column-reverse";
+  const margins=child=>{const m=child.style?.margin??ZERO_BOX;return reverse?[m[2],m[1],m[0],m[3]]:m;};
   const gap = style?.rowGap ?? style?.gap ?? 0;
   const definiteHeight = ctx.containing?.height;
   // Most column containers have auto height. Without a main-axis constraint
@@ -854,10 +904,11 @@ function layoutFlexColumn(ctx, box, x, width, y, minHeight, maxHeight) {
     for (const [index, child] of box.children.entries()) {
       if (index) cursor += gap;
       const horizontal = columnHorizontal(ctx, child, style, x, width);
-      const margin = child.style?.margin ?? ZERO_BOX;
+      const margin = margins(child);
       items.push({boxStart:ctx.boxes.length,fragmentStart:ctx.fragments.length,
         autoTop:margin[0] === "auto",autoBottom:margin[2] === "auto"});
       const result = layoutBlock(ctx, child, horizontal.x, horizontal.width, cursor + numberOrZero(margin[0]));
+      Object.assign(items.at(-1),{mainY:cursor+numberOrZero(margin[0]),mainHeight:result.height,initialY:ctx.boxes[items.at(-1).boxStart].y});
       cursor += numberOrZero(margin[0]) + result.height + numberOrZero(margin[2]);
       baseline ??= result.baseline;
     }
@@ -866,7 +917,7 @@ function layoutFlexColumn(ctx, box, x, width, y, minHeight, maxHeight) {
   const items = box.children.map(child => {
     const childStyle = child.style;
     const horizontal = columnHorizontal(ctx, child, style, x, width);
-    const margin = childStyle?.margin ?? ZERO_BOX;
+    const margin = margins(child);
     const padding = paddingBox(childStyle, width);
     const border = borderWidths(childStyle);
     const extra = padding[0] + padding[2] + border[0] + border[2];
@@ -908,6 +959,7 @@ function layoutFlexColumn(ctx, box, x, width, y, minHeight, maxHeight) {
     const forcedHeight = item.definite || Math.abs(targetHeight - item.naturalHeight) > 1e-9 ? targetHeight : null;
     const result = layoutBlock(ctx, item.box, item.horizontal.x, item.horizontal.width,
       cursor + item.marginLeft, false, forcedHeight);
+    Object.assign(item,{mainY:cursor+item.marginLeft,mainHeight:result.height,initialY:ctx.boxes[item.boxStart].y});
     cursor += item.marginLeft + result.height + item.marginRight;
     baseline ??= result.baseline;
   }
@@ -932,7 +984,14 @@ function layoutFlexRow(ctx, box, x, width, y) {
   const style = box.style;
   const columnGap = style?.columnGap ?? style?.gap ?? 0;
   const rowGap = style?.rowGap ?? style?.gap ?? 0;
-  const items = box.children.map((child) => flexItem(ctx, child, width));
+  const items = box.children.map((child) => {
+    const item=flexItem(ctx,child,width);
+    if(style?.flexDirection === "row-reverse") {
+      [item.marginLeft,item.marginRight]=[item.marginRight,item.marginLeft];
+      [item.autoLeft,item.autoRight]=[item.autoRight,item.autoLeft];
+    }
+    return item;
+  });
 
   const lines = [];
   let line = [];
@@ -1007,7 +1066,8 @@ function layoutFlexRow(ctx, box, x, width, y) {
       } else if (alignment === "end") {
         itemY += crossSize - outerHeight;
       }
-      const result = layoutBlock(ctx, item.box, mainX, item.target, itemY, false, forcedHeight);
+      const itemX=style?.flexDirection === "row-reverse"?x+width-(mainX-x)-item.target:mainX;
+      const result = layoutBlock(ctx, item.box, itemX, item.target, itemY, false, forcedHeight);
       baseline ??= result.baseline;
       mainX += item.target + item.marginRight + (item.autoRight ? autoShare : 0) + columnGap + between;
     }
@@ -1147,7 +1207,7 @@ function layoutGrid(ctx, box, x, width, y) {
     const measured = dryLayout(ctx, item.box, horizontal.width);
     item.height = measured.height + numberOrZero(margin[0]) + numberOrZero(margin[2]);
   }
-  const rows = sizeGridRows(grid, rowGap);
+  const rows = sizeGridRows(grid, rowGap, ctx.containing?.height, style?.alignContent);
   const rowStarts = trackStarts(rows, [], rowGap, y);
 
   let baseline = null;
@@ -1164,7 +1224,8 @@ function layoutGrid(ctx, box, x, width, y) {
     const contentHeight = item.height - margin.top - margin.bottom;
     let itemY = areaY + margin.top;
     let forcedHeight = null;
-    if (["normal", "stretch"].includes(alignment) && numberOrNull(itemStyle?.height) == null) {
+    if (["normal", "stretch"].includes(alignment) && numberOrNull(itemStyle?.height) == null
+      && (alignment === "stretch" || preferredAspectRatio(itemStyle) == null)) {
       forcedHeight = Math.max(contentHeight, areaHeight - margin.top - margin.bottom);
     } else if (alignment === "center") {
       itemY += (areaHeight - item.height) / 2;
@@ -1756,10 +1817,10 @@ function updateGrowth(track, value) {
 }
 
 /** Row sizing: explicit lengths are fixed; other rows fit their tallest item. */
-function sizeGridRows(grid, gap) {
+function sizeGridRows(grid, gap, available = null, alignment = "normal") {
   const rows = grid.rowTracks.map((track) => {
-    const fixed = numberOrNull(resolveBreadth(track.min, null));
-    const fixedMax = numberOrNull(resolveBreadth(track.max, null));
+    const fixed = numberOrNull(resolveBreadth(track.min, available));
+    const fixedMax = numberOrNull(resolveBreadth(track.max, available));
     return fixed != null && fixedMax != null ? { size: fixedMax, fixed: true } : { size: fixed ?? 0, fixed: false };
   });
   for (const item of grid.items.filter((candidate) => candidate.rowSpan === 1)) {
@@ -1772,6 +1833,34 @@ function sizeGridRows(grid, gap) {
     const flexible = spanned.filter((row) => !row.fixed);
     if (item.height > current && flexible.length) flexible.at(-1).size += item.height - current;
   }
+  // Fractional row tracks consume the definite block-axis space, just as
+  // column fr tracks consume inline space. Empty grid items still stretch
+  // into those tracks (e.g. a 2x2 game board sized by aspect-ratio).
+  const flexible=grid.rowTracks.flatMap((track,index)=>track.max?.fr>0?[index]:[]);
+  if(flexible.length){
+    let fraction=0;
+    if(available!=null){
+      const leftover=available-gap*Math.max(0,rows.length-1)-rows.reduce((sum,row,index)=>sum+(flexible.includes(index)?0:row.size),0);
+      const frozen=new Set();
+      for(let guard=0;guard<=flexible.length;guard++){
+        const active=flexible.filter(index=>!frozen.has(index));
+        const factors=Math.max(1,active.reduce((sum,index)=>sum+grid.rowTracks[index].max.fr,0));
+        const space=leftover-[...frozen].reduce((sum,index)=>sum+rows[index].size,0);
+        fraction=Math.max(0,space/factors);
+        const violators=active.filter(index=>rows[index].size>fraction*grid.rowTracks[index].max.fr);
+        if(!violators.length)break;
+        for(const index of violators)frozen.add(index);
+      }
+    }else fraction=Math.max(...flexible.map(index=>rows[index].size/Math.max(1,grid.rowTracks[index].max.fr)));
+    for(const index of flexible)rows[index].size=Math.max(rows[index].size,fraction*grid.rowTracks[index].max.fr);
+  }
+  // Normal grid content alignment stretches auto tracks to fill a definite
+  // height, so place-items:center centers inside the entire grid area.
+  if (available != null && ["normal", "stretch", undefined].includes(alignment)) {
+    const free = available - rows.reduce((sum, row) => sum + row.size, 0) - gap * Math.max(0, rows.length - 1);
+    const stretchy = rows.filter((row, index) => grid.rowTracks[index].max === "auto");
+    if (free > 0 && stretchy.length) for (const row of stretchy) row.size += free / stretchy.length;
+  }
   return rows.map((row) => row.size);
 }
 
@@ -1838,6 +1927,10 @@ function resolveHorizontal(ctx, box, containingX, containingWidth, shrink, perce
   let width;
   if (box.replaced) width = imageDimensions(box.node, containingWidth).width + extra;
   else if (specified != null) width = borderBox(specified);
+  else if (preferredAspectRatio(style) != null && numberOrNull(resolveLength(style?.height, ctx.containing?.height ?? NaN)) != null) {
+    const height = resolveLength(style.height, ctx.containing?.height ?? NaN);
+    width = borderBox(height * preferredAspectRatio(style));
+  }
   else if (shrink) width = Math.min(maxContentWidth(ctx, box), available);
   else width = available;
   const maxWidth = numberOrNull(resolveLength(style?.maxWidth, percentageBasis));
@@ -2735,7 +2828,7 @@ function imageDimensions(node, referenceWidth, referenceHeight = null) {
   const intrinsicWidth = (canvas ? node.widthAttribute : node.resource?.width) ?? node.widthAttribute ?? 300;
   const intrinsicHeight = (canvas ? node.heightAttribute : node.resource?.height) ?? node.heightAttribute ?? 150;
   const emptyCanvas = node.tagName === "CANVAS" && !(intrinsicWidth > 0 && intrinsicHeight > 0);
-  const ratio = emptyCanvas ? null : intrinsicWidth / intrinsicHeight;
+  const ratio = preferredAspectRatio(node.style, emptyCanvas ? null : intrinsicWidth / intrinsicHeight);
   const cssWidth = node.style?.width;
   const cssHeight = node.style?.height;
   let width = cssWidth !== "auto" && cssWidth != null
@@ -2746,7 +2839,7 @@ function imageDimensions(node, referenceWidth, referenceHeight = null) {
     : null;
   if (!Number.isFinite(width)) width = null;
   if (!Number.isFinite(height)) height = null;
-  if (width == null && height == null) [width, height] = [intrinsicWidth, intrinsicHeight];
+  if (width == null && height == null) [width, height] = [intrinsicWidth, ratio == null ? intrinsicHeight : intrinsicWidth / ratio];
   else if (width == null) width = ratio == null ? intrinsicWidth : height * ratio;
   else if (height == null) height = ratio == null ? intrinsicHeight : width / ratio;
   if (node.style?.maxWidth !== "none" && node.style?.maxWidth != null) {

package/lib/media/mp4-frame-times.js

@@ -0,0 +1,93 @@
+// Presentation timestamps for ordinary (nonfragmented) MP4 video. FFmpeg
+// returns decoded pictures in presentation order; average FPS cannot time VFR.
+// Unsupported tables/edits retain the existing decoder clock.
+export function mp4FrameTimes(bytes) {
+  if (!(bytes instanceof Uint8Array)) return null;
+  try {
+    const v=new DataView(bytes.buffer,bytes.byteOffset,bytes.byteLength);
+    let seen=0;
+    const u=(p,end)=>{if(p<0||p+4>end)throw Error('short field');return v.getUint32(p)};
+    const boxes=(start,end)=>{
+      const out=[];
+      for(let p=start;p<end;){
+        if(++seen>32768)throw Error('box limit');
+        let size=u(p,end),header=8;const type=u(p+4,end);
+        if(size===1){size=u(p+8,end)*4294967296+u(p+12,end);header=16}
+        if(size===0)size=end-p;
+        // Progressive files may end inside mdat; timing tables before it
+        // are already complete and do not depend on the arriving payload.
+        if(size>end-p && type===0x6d646174 && start===0)break;
+        if(!Number.isSafeInteger(size)||size<header||size>end-p)throw Error('bad box');
+        out.push({type,p:p+header,end:p+size});p+=size;
+      }return out;
+    };
+    const tag=s=>[...s].reduce((n,c)=>n*256+c.charCodeAt(0),0);
+    const find=(list,name)=>list.find(b=>b.type===tag(name));
+    const children=b=>boxes(b.p,b.end);
+    const top=boxes(0,bytes.length),moov=find(top,'moov');if(!moov)return null;
+    const movie=children(moov);if(find(movie,'mvex'))return null;
+    const tracks=movie.filter(b=>b.type===tag('trak'));
+    let result=null;
+    for(const trak of tracks){
+      const nodes=children(trak),mdia=find(nodes,'mdia');if(!mdia)continue;
+      const media=children(mdia),hdlr=find(media,'hdlr');
+      if(!hdlr||u(hdlr.p+8,hdlr.end)!==tag('vide'))continue;
+      if(result)return null;
+      const mdhd=find(media,'mdhd');if(!mdhd||bytes[mdhd.p]>1)return null;
+      const scale=u(mdhd.p+(bytes[mdhd.p]===1?20:12),mdhd.end);if(!scale)return null;
+      let offset=0;const edts=find(nodes,'edts');
+      if(edts){
+        const edit=find(children(edts),'elst');
+        if(!edit||bytes[edit.p]!==0||u(edit.p+4,edit.end)!==1||u(edit.p+16,edit.end)!==65536)return null;
+        offset=u(edit.p+12,edit.end);if(offset>=2147483648)return null;
+      }
+      const minf=find(media,'minf');if(!minf)return null;
+      const stbl=find(children(minf),'stbl');if(!stbl)return null;
+      const tables=children(stbl),stts=find(tables,'stts'),ctts=find(tables,'ctts');if(!stts||bytes[stts.p]!==0)return null;
+      const times=[],durations=[];let time=0;
+      const runs=u(stts.p+4,stts.end);if(runs>250000)return null;
+      for(let i=0;i<runs;i++){
+        const count=u(stts.p+8+i*8,stts.end),delta=u(stts.p+12+i*8,stts.end);
+        if(!delta||times.length+count>250000)return null;
+        for(let j=0;j<count;j++){times.push(time);durations.push(delta);time+=delta;if(!Number.isSafeInteger(time))return null;}
+      }
+      if(ctts){
+        if(bytes[ctts.p]>1)return null;let index=0;
+        const runs=u(ctts.p+4,ctts.end);if(runs>250000)return null;
+        for(let i=0;i<runs;i++){
+          const count=u(ctts.p+8+i*8,ctts.end);let delta=u(ctts.p+12+i*8,ctts.end);
+          if(bytes[ctts.p]===1)delta|=0;
+          if(index+count>times.length)return null;
+          for(let j=0;j<count;j++)times[index++]+=delta;
+        }if(index!==times.length)return null;
+      }
+      const keys=[];const stss=find(tables,'stss');
+      if(stss){const count=u(stss.p+4,stss.end);if(count>times.length)return null;
+        for(let i=0;i<count;i++){const n=u(stss.p+8+i*4,stss.end);if(!n||n>times.length)return null;keys.push((times[n-1]-offset)/scale)}
+      }else for(const t of times)keys.push((t-offset)/scale);
+      const frames=Float64Array.from(times,t=>(t-offset)/scale);frames.sort();keys.sort((a,b)=>a-b);
+      if(!frames.length||frames[0]<-1e-6)return null;
+      let end=0;for(let i=0;i<times.length;i++)end=Math.max(end,(times[i]+durations[i]-offset)/scale);
+      result={frames,keys,end};
+    }return result;
+  }catch{return null}
+}
+
+export function timeVideoDecoder(decoder,bytes) {
+  const timeline=mp4FrameTimes(bytes);if(!timeline)return decoder;
+  let index=0;
+  return {
+    width:decoder.width,height:decoder.height,fps:decoder.fps,
+    get frameTime(){return timeline.frames[Math.max(0,index-1)]},
+    get nextFrameTime(){return timeline.frames[index]??timeline.end},
+    nextFrame(...args){const pixels=decoder.nextFrame(...args);if(pixels)index++;return pixels},
+    seek(ms){
+      decoder.seek(ms);const target=ms/1000;let key=timeline.keys[0]??0;
+      for(const t of timeline.keys){if(t>target+1e-6)break;key=t}
+      let low=0,high=timeline.frames.length;
+      while(low<high){const mid=(low+high)>>>1;if(timeline.frames[mid]<key-1e-6)low=mid+1;else high=mid}
+      index=low;
+    },
+    close(){decoder.close()},
+  };
+}

package/lib/paint/direct-canvas.ts

@@ -0,0 +1,39 @@
+// Browser adapter only. All pixel composition and sampling use Land unchanged.
+import {createDirectComposer, type DirectSurface} from '../../vendor/land-renderer/direct-compositor.ts';
+export interface CanvasLayer {
+  pixels: Uint8Array; width: number; height: number;
+  x: number; y: number; drawWidth: number; drawHeight: number;
+}
+export class CanvasComposer {
+  private surfaces: DirectSurface[] = [];
+  private positions = new WeakMap<DirectSurface,{x:number;y:number}>();
+  private buffers = new WeakMap<Uint8Array,NonNullable<DirectSurface["pixels"]>>();
+  private base: {key:string;surface:DirectSurface} | null = null;
+  private readonly direct = createDirectComposer({input:{x:0,y:0,pointer:false},wm:{
+    renderSurfaces:()=>this.surfaces,origin:surface=>this.positions.get(surface)!,
+  }});
+  private surface(layer: CanvasLayer): DirectSurface {
+    let pixels=this.buffers.get(layer.pixels);
+    if(!pixels||pixels.width!==layer.width||pixels.height!==layer.height){pixels={bytes:layer.pixels,width:layer.width,height:layer.height,stride:layer.width*4,format:0};this.buffers.set(layer.pixels,pixels);}
+    const surface:DirectSurface={pixels,
+      scale:1,transform:0,viewportDestination:[layer.drawWidth,layer.drawHeight]};
+    this.positions.set(surface,{x:layer.x,y:layer.y});
+    return surface;
+  }
+  compose(width:number,height:number,background:readonly number[],layers:CanvasLayer[]):Uint8Array {
+    const key=[width,height,...background].join('/');
+    if(this.base?.key!==key){
+      const pixels=new Uint8Array(width*height*4);
+      // Browser RGBA and Land BGRA use identical alpha and blend operations.
+      // Supplying an opaque RGBA base also hides Land's default desktop color.
+      const words=new Uint32Array(pixels.buffer);
+      const color=new Uint8Array([background[0]!,background[1]!,background[2]!,255]);
+      words.fill(new Uint32Array(color.buffer)[0]!);
+      this.base={key,surface:this.surface({pixels,width,height,x:0,y:0,drawWidth:width,drawHeight:height})};
+    }
+    this.surfaces=[this.base.surface,...layers.map(layer=>this.surface(layer))];
+    const out=this.direct.compose(width,height);
+    return new Uint8Array(out.buffer,out.byteOffset,out.byteLength);
+  }
+  close():void {this.direct.close();this.surfaces=[];this.base=null;this.positions=new WeakMap();this.buffers=new WeakMap();}
+}

package/lib/paint/display-list.js

@@ -1,3 +1,5 @@
+import {rotationMatrix3D,multiplyRotation3D} from '../style/transform.js';
+import {resolveAffine,multiplyTransform as composeTransforms} from '../style/transform.js';
 /**
  * Converts layout output into an immutable, serializable display list.
  *
@@ -94,8 +96,13 @@ export function buildDisplayList(layout, tree = null, resources = null, backgrou
     for (const box of boxesByLayer.get(layer.order) ?? []) paintBox(box);
     for (const fragment of fragmentsByLayer.get(layer.order) ?? []) paintFragment(fragment);
   };
+  // Absolute layout is deferred until its containing block's dimensions are
+  // known. Its allocation order is therefore not CSS tree/paint order.
+  const treeOrder = new Map();
+  const indexTree = node => { treeOrder.set(node.id, treeOrder.size); for (const child of node.children ?? []) indexTree(child); };
+  if (tree?.root) indexTree(tree.root);
   const paintContext = (context) => {
-    const members = (children.get(context.order) ?? []).sort((left, right) => left.z - right.z || left.order - right.order);
+    const members = (children.get(context.order) ?? []).sort((left, right) => left.z - right.z || (treeOrder.get(left.nodeId) ?? left.order) - (treeOrder.get(right.nodeId) ?? right.order));
     for (const layer of members) if (layer.z < 0) paintMember(layer);
     paintLayerContent(context);
     for (const layer of members) if (layer.z >= 0) paintMember(layer);
@@ -111,7 +118,7 @@ export function buildDisplayList(layout, tree = null, resources = null, backgrou
     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,
+      nodeId: box.nodeId, localRect:rect, transform:effect.transform, rect: effect.transform ? transformRect(effect.transform, rect) : rect, clipRect: effect.clipRect, fixed: effect.fixed,
     });
     reach(effect, rect);
     const radii = cornerRadii(style, rect);
@@ -189,7 +196,7 @@ export function buildDisplayList(layout, tree = null, resources = null, backgrou
         height: run.type === "image" ? run.height : fragment.height,
       };
       hits.push({
-        nodeId: run.nodeId,
+        nodeId: run.nodeId, localRect:hitRect, transform:effect.transform,
         rect: effect.transform ? transformRect(effect.transform, hitRect) : hitRect,
         clipRect: effect.clipRect,
         fixed: effect.fixed,
@@ -296,6 +303,8 @@ export function hitTarget(displayList, x, y, scroll, skip = () => false) {
     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;
+    const {transform,localRect}=hits[index];
+    if(transform&&localRect){const p=inverseTransformPoint(transform,pointX,pointY);if(p.x<localRect.x||p.x>=localRect.x+localRect.width||p.y<localRect.y||p.y>=localRect.y+localRect.height)continue;}
     if (skip(nodeId)) continue;
     return nodeId;
   }
@@ -366,7 +375,11 @@ function paintEffects(layout, tree, scrollOffsetOf = null) {
   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;
+    if (!box || !transform || (!transform.affine && (transform.scaleX == null || (transform.scaleX === 1 && transform.scaleY === 1)))) return null;
+    if (transform.affine) {
+      const {a,b,c,d,e,f}=resolveAffine(transform.affine,box.width,box.height), origin=transformOrigin(node.style.transformOrigin,box);
+      return {a,b,c,d,e:origin.x*(1-a)-c*origin.y+e,f:origin.y*(1-d)-b*origin.x+f};
+    }
     const origin = transformOrigin(node.style.transformOrigin, box);
     return {
       a: transform.scaleX,
@@ -443,6 +456,17 @@ function paintEffects(layout, tree, scrollOffsetOf = null) {
           transform = transform ? composeTransforms(transform, scrolled) : scrolled;
         }
       }
+      // Backface-hidden descendants share their ancestor's rotation only
+      // inside preserve-3d. Flattened groups begin a new local 3D context.
+      if(chain.some(node=>node.style?.backfaceVisibility==='hidden')){
+        const identity=[1,0,0,0,1,0,0,0,1];let rotation=identity;
+        for(let index=chain.length-1;index>=0;index--){
+          const style=chain[index].style;
+          rotation=multiplyRotation3D(rotation,rotationMatrix3D(style?.transform));
+          if(style?.backfaceVisibility==='hidden'&&rotation[8]<-1e-10){cache.set(key,null);return null;}
+          if(style?.transformStyle!=='preserve-3d')rotation=identity;
+        }
+      }
       const roundedClips = [];
       for (const [node, clip, radii] of clips) {
         const matrix = transforms.get(node);
@@ -495,16 +519,17 @@ function transformOrigin(value, box) {
 }
 
 /** `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 };
+export function inverseTransformPoint(matrix,x,y) {
+  const {a,b=0,c=0,d,e,f}=matrix,det=a*d-b*c;
+  if(!det)return {x:Infinity,y:Infinity};
+  x-=e;y-=f;return {x:(d*x-c*y)/det,y:(a*y-b*x)/det};
 }
 
-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) };
+export function transformRect(matrix, rect) {
+  const {a,b=0,c=0,d,e,f}=matrix;
+  const points=[[rect.x,rect.y],[rect.x+rect.width,rect.y],[rect.x,rect.y+rect.height],[rect.x+rect.width,rect.y+rect.height]].map(([x,y])=>({x:a*x+c*y+e,y:b*x+d*y+f}));
+  const x=Math.min(...points.map(p=>p.x)),y=Math.min(...points.map(p=>p.y));
+  return {x,y,width:Math.max(...points.map(p=>p.x))-x,height:Math.max(...points.map(p=>p.y))-y};
 }
 
 function applyEffect(items, start, effect) {

package/lib/paint/raster-readback.js

@@ -16,21 +16,30 @@ export class RasterReadback {
     this.#allocate = allocate;
   }
 
-  read(image, width, height) {
+  read(image, width, height, { premultiplied = false, previous = null, region = null, allocate = this.#allocate } = {}) {
     const kit = this.#kit;
     const bytes = width * height * 4;
     if (!this.#scratch || this.#scratch.length < bytes) {
       this.dispose();
       this.#scratch = kit.Malloc(Uint8Array, bytes);
     }
-    const native = image.readPixels(0, 0, {
-      width, height, colorType: kit.ColorType.RGBA_8888,
-      alphaType: kit.AlphaType.Unpremul, colorSpace: kit.ColorSpace.SRGB,
-    }, this.#scratch, width * 4);
+    const partial = previous?.length === bytes && region
+      && [region.x,region.y,region.width,region.height].every(Number.isInteger)
+      && region.x >= 0 && region.y >= 0 && region.width > 0 && region.height > 0
+      && region.x + region.width <= width && region.y + region.height <= height;
+    const x=partial?region.x:0,y=partial?region.y:0;
+    const rw=partial?region.width:width,rh=partial?region.height:height;
+    const native = image.readPixels(x, y, {
+      width:rw, height:rh, colorType: kit.ColorType.RGBA_8888,
+      alphaType: premultiplied ? kit.AlphaType.Premul : kit.AlphaType.Unpremul, colorSpace: kit.ColorSpace.SRGB,
+    }, this.#scratch, rw * 4);
     if (!native) throw new Error("Unable to read raster pixels");
-    const pixels = this.#allocate ? this.#allocate(bytes)
+    const pixels = allocate ? allocate(bytes)
       : new Uint8Array(this.#shared ? new SharedArrayBuffer(bytes) : new ArrayBuffer(bytes));
-    pixels.set(native.subarray(0, bytes));
+    if(partial){
+      pixels.set(previous);
+      for(let row=0;row<rh;row++)pixels.set(native.subarray(row*rw*4,(row+1)*rw*4),((y+row)*width+x)*4);
+    }else pixels.set(native.subarray(0, bytes));
     return pixels;
   }
 

package/lib/renderer/animation-frames.js

@@ -12,7 +12,7 @@ export function supportsFrameCheckpoint(version = Bun.version) {
 
 /** One callback collection per document, with a checkpoint between callbacks. */
 export function createAnimationFrames({ invoke, now, checkpoint = drainMicrotasks,
-  frameTimers = null }) {
+  frameTimers = null, afterFrame = null }) {
   let nextWakeId = 1;
   // A private timer collection keeps frame handles separate from Window timers.
   // timerTask=false also prevents a frame inheriting a timer's nesting clamp.
@@ -42,10 +42,15 @@ export function createAnimationFrames({ invoke, now, checkpoint = drainMicrotask
         finally { checkpoint(); }
       }
     } finally {
-      running = false;
-      // Callbacks registered during delivery, including its microtasks, belong
-      // to the next frame. Long callbacks do not add another fixed 16 ms delay.
-      arm(Math.max(0, Math.ceil(16 - (now() - timestamp))));
+      // Paint belongs after this complete callback batch and its microtasks,
+      // before the next animation opportunity can overtake presentation.
+      try { if(!disposed)afterFrame?.(); }
+      finally {
+        running = false;
+        // Callbacks registered during delivery, including its microtasks, belong
+        // to the next frame. Long callbacks do not add another fixed 16 ms delay.
+        arm(Math.max(0, Math.ceil(16 - (now() - timestamp))));
+      }
     }
   }
   return {