buninu-browser 0.6.0 → 0.9.0

package/lib/style/computed-style.js

@@ -1,3 +1,4 @@
+import {animationProperty, animationLists, animationShorthand} from './animation-values.js';
 /**
  * Initial style model informed by TermDOM's UA/cascade tests and UA element
  * categories (bikeshaving/termdom, MIT, pinned in Architecture.md). The data
@@ -162,6 +163,7 @@ const INITIAL = Object.freeze({
   minHeight: "auto",
   maxHeight: "none",
   boxSizing: "content-box",
+  aspectRatio: null,
   // Used border widths (0 where border-style is none/hidden), top/right/bottom/left.
   borderWidths: Object.freeze([0, 0, 0, 0]),
   borderColors: Object.freeze([null, null, null, null]),
@@ -225,6 +227,8 @@ const INITIAL = Object.freeze({
   overflowWrap: "normal",
   wordBreak: "normal",
   opacity: 1,
+  backfaceVisibility: "visible",
+  transformStyle: "flat",
   overflowX: "visible",
   overflowY: "visible",
   // Scroll containers (CSS Overflow 3 §3): "auto" for auto/scroll/overlay,
@@ -332,6 +336,7 @@ let environment = DEFAULT_ENVIRONMENT;
 
 export class StyleEngine {
   #measureText;
+  #sampleStyle;
   #deferHidden;
   #hiddenRoots = new WeakSet();
   #hiddenAncestors = new WeakMap();
@@ -355,7 +360,8 @@ export class StyleEngine {
   #parsedSheetsKey = "";
 
   // Renderers may defer invisible descendants; standalone callers remain eager.
-  constructor({ measureText = null, deferHidden = false } = {}) {
+  constructor({ measureText = null, deferHidden = false, sampleStyle = null } = {}) {
+    this.#sampleStyle = sampleStyle;
     this.#deferHidden = deferHidden;
     this.#measureText = measureText && ((text, style) => {
       this.#usesFontMetrics = true;
@@ -663,6 +669,7 @@ export class StyleEngine {
     let customProperties = withCustomProperties(parentCustomProperties ?? EMPTY_MAP, declarations);
     const dependencies = { inheritsParent: false };
     let style = computeElementStyle(element, parentStyle, declarations, customProperties, dependencies, true);
+    if (this.#sampleStyle && !target) style = this.#sampleStyle(element, style);
     // A descendant may be visited because an ancestor's selector state
     // changed even though its final computed values did not. Preserve the
     // immutable identities so retained render and layout subtrees survive.
@@ -1172,6 +1179,45 @@ export function parseStyleSheet(source, viewport = environment, counter = { orde
   return rules;
 }
 
+/** Named keyframes share the stylesheet parser's balanced blocks and media filtering. */
+export function extractAnimationKeyframes(source, viewport = environment) {
+  const result = new Map();
+  const css = String(source).replace(/\/\*[\s\S]*?\*\//g, "");
+  function visit(start, end) {
+    let index = start;
+    while (index < end) {
+      const open = findTopLevel(css, "{", index, end);
+      const semicolon = findTopLevel(css, ";", index, end);
+      if (semicolon >= 0 && (open < 0 || semicolon < open)) { index=semicolon+1;continue; }
+      if (open < 0) break;
+      const close = matchingBrace(css, open, end);
+      const prelude = css.slice(index, open).trim();
+      const match = /^@(?:-webkit-)?keyframes\s+([\w-]+|"[^"]+"|'[^']+')$/i.exec(prelude);
+      if (match) {
+        const frames = [];
+        let offset = open + 1;
+        while (offset < close) {
+          const from = findTopLevel(css, "{", offset, close);
+          if (from < 0) break;
+          const to = matchingBrace(css, from, close);
+          const declarations = parseDeclarations(css.slice(from + 1, to));
+          for (const selector of css.slice(offset, from).split(",")) {
+            const text = selector.trim();
+            const at = text === "from" ? 0 : text === "to" ? 1 : /^(?:\d*\.)?\d+%$/.test(text) ? parseFloat(text)/100 : NaN;
+            if (at >= 0 && at <= 1) frames.push({offset:at, declarations});
+          }
+          offset = to + 1;
+        }
+        result.set(match[1].replace(/^['"]|['"]$/g, ""), frames.sort((a,b)=>a.offset-b.offset));
+      } else if (/^@supports\b/i.test(prelude) || /^@layer(?:\s|$)/i.test(prelude)
+        || (/^@media\b/i.test(prelude) && mediaQueryMatches(prelude.slice(6).trim(), viewport))) visit(open+1, close);
+      index = close + 1;
+    }
+  }
+  visit(0,css.length);
+  return result;
+}
+
 /** Font resource descriptors, separate from selector rules (CSS Fonts §4). */
 export function extractFontFaces(source, baseURL, viewport = environment) {
   const css = String(source).replace(/\/\*[\s\S]*?\*\//g, "");
@@ -1460,6 +1506,15 @@ function mediaLength(value) {
   return Number(match[1]) * (match[2] && match[2] !== "px" ? DEFAULT_ENVIRONMENT.rootFontSize : 1);
 }
 
+function parseAspectRatio(value) {
+  if (value.toLowerCase() === "auto") return null;
+  const match = /^(?:(auto)\s+)?([+]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?)(?:\s*\/\s*([+]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?))?(?:\s+(auto))?$/i.exec(value);
+  if (!match || match[1] && match[4]) return undefined;
+  const numerator = Number(match[2]), denominator = Number(match[3] ?? 1);
+  return Number.isFinite(numerator) && Number.isFinite(denominator)
+    ? Object.freeze({ numerator, denominator, auto: Boolean(match[1] || match[4]) }) : undefined;
+}
+
 export function parseDeclarations(source) {
   const declarations = new Map();
   let declarationIndex = 0;
@@ -1468,11 +1523,13 @@ export function parseDeclarations(source) {
     if (colon < 1) continue;
     // Custom property names are case-sensitive (CSS Variables 1 §2).
     const rawName = part.slice(0, colon).trim();
-    const name = rawName.startsWith("--") ? rawName : rawName.toLowerCase();
+    const name = rawName.startsWith("--") ? rawName : animationProperty(rawName.toLowerCase());
     let value = part.slice(colon + 1).trim();
     const important = /\s*!important\s*$/i.test(value);
     value = value.replace(/\s*!important\s*$/i, "").trim();
     if (!name || !value || (declarations.get(name)?.important && !important)) continue;
+    if (name === "aspect-ratio" && !CSS_WIDE_KEYWORDS.has(value) && !/var\(/i.test(value)
+      && parseAspectRatio(value) === undefined) continue;
     declarations.set(name, { name, value, important, declarationIndex: declarationIndex++ });
   }
   return declarations;
@@ -1545,6 +1602,17 @@ function setProperty(style, name, value, parentStyle = null) {
   }
   if (typeof value !== "string") return;
   switch (name) {
+    case "animation":
+      style.cssAnimations = animationShorthand(value);
+      style.cssAnimationLonghands = {};
+      break;
+    case "animation-name": case "animation-duration": case "animation-delay":
+    case "animation-iteration-count": case "animation-direction": case "animation-fill-mode":
+    case "animation-play-state": case "animation-timing-function": {
+      const key = name.slice(10).replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+      style.cssAnimationLonghands = {...style.cssAnimationLonghands, [key]: animationLists(value)};
+      break;
+    }
     case "direction":
       if (value === "ltr" || value === "rtl") style.direction = value;
       break;
@@ -1795,6 +1863,12 @@ function setProperty(style, name, value, parentStyle = null) {
       style.translate = Object.freeze({x:lengths[0],y:lengths[1] ?? 0});
       break;
     }
+    case "backface-visibility":
+      if(["visible","hidden"].includes(value))style.backfaceVisibility=value;
+      break;
+    case "transform-style":
+      if(["flat","preserve-3d"].includes(value))style.transformStyle=value;
+      break;
     case "transform-origin":
       style.transformOrigin = value.toLowerCase().replace(/\s+/g, " ");
       break;
@@ -1992,13 +2066,18 @@ function setProperty(style, name, value, parentStyle = null) {
         = Object.freeze([lengths[0], lengths[1] ?? lengths[0]]);
       break;
     }
+    case "aspect-ratio": {
+      const ratio = parseAspectRatio(value);
+      if (ratio !== undefined) style.aspectRatio = ratio;
+      break;
+    }
     case "box-sizing": if (["content-box", "border-box"].includes(value)) style.boxSizing = value; break;
     case "flex-flow": {
       const parts = value.split(/\s+/);
       let direction = null;
       let wrap = null;
       for (const part of parts) {
-        if (["row", "column"].includes(part) && direction == null) direction = part;
+        if (["row", "column", "row-reverse", "column-reverse"].includes(part) && direction == null) direction = part;
         else if (["nowrap", "wrap"].includes(part) && wrap == null) wrap = part;
         else return;
       }
@@ -2008,7 +2087,7 @@ function setProperty(style, name, value, parentStyle = null) {
       }
       break;
     }
-    case "flex-direction": if (["row", "column"].includes(value)) style.flexDirection = value; break;
+    case "flex-direction": if (["row", "column", "row-reverse", "column-reverse"].includes(value)) style.flexDirection = value; break;
     case "flex-wrap": if (["nowrap", "wrap"].includes(value)) style.flexWrap = value; break;
     case "justify-content": {
       const justify = FLEX_ALIGNMENT[value] ?? value;
@@ -2536,11 +2615,13 @@ function pseudoElement(pseudo) {
  * after a scale uses that scaled coordinate system. Percentages remain lengths
  * until layout knows the element's own border box. Other functions are ignored.
  */
-function parseTransform(value, fontSize) {
+export function parseTransform(value, fontSize) {
   let x = 0;
   let y = 0;
   let scaleX = 1;
   let scaleY = 1;
+  let b = 0, c = 0, affine = false;
+  const operations=[];
   let found = false;
   const functions = /\b([a-z][a-z0-9]*)\(/gi;
   let match;
@@ -2560,24 +2641,39 @@ function parseTransform(value, fontSize) {
       const args = parts.map(part => computedLength(part, fontSize, true));
       const max = kind === "translate3d" ? 3 : kind === "translate" ? 2 : 1;
       if (!args.length || args.length > max || args.some(part => !Number.isFinite(part) && !part?.unit)) return undefined;
-      if (kind === "translatey") y = addTransformLength(y, scaleTransformLength(args[0], scaleY));
-      else {
-        x = addTransformLength(x, scaleTransformLength(args[0], scaleX));
-        if (kind !== "translatex") y = addTransformLength(y, scaleTransformLength(args[1] ?? 0, scaleY));
-      }
+      const tx = kind === "translatey" ? 0 : args[0];
+      const ty = kind === "translatey" ? args[0] : kind === "translatex" ? 0 : args[1] ?? 0;
+      operations.push(Object.freeze({kind:"translate",x:tx,y:ty}));
+      x = addTransformLength(x, addTransformLength(scaleTransformLength(tx, scaleX), scaleTransformLength(ty, c)));
+      y = addTransformLength(y, addTransformLength(scaleTransformLength(tx, b), scaleTransformLength(ty, scaleY)));
     } else if (["scale", "scalex", "scaley", "scale3d"].includes(kind)) {
       const args = parts.map(part => part.endsWith("%") ? Number(part.slice(0, -1)) / 100 : Number(part));
       const max = kind === "scale3d" ? 3 : kind === "scale" ? 2 : 1;
       if (!args.length || args.length > max || args.some(part => !Number.isFinite(part))) return undefined;
-      if (kind === "scalex") scaleX *= args[0];
-      else if (kind === "scaley") scaleY *= args[0];
-      else { scaleX *= args[0]; scaleY *= args[1] ?? args[0]; }
+      const sx = kind === "scaley" ? 1 : args[0], sy = kind === "scalex" ? 1 : args[1] ?? args[0];
+      operations.push(Object.freeze({kind:"scale",x:sx,y:sy}));
+      scaleX *= sx; b *= sx; c *= sy; scaleY *= sy;
+    } else if (["rotate","rotatez","rotatex","rotatey"].includes(kind)) {
+      const angle = /^([+-]?(?:\d*\.)?\d+)(deg|rad|grad|turn)?$/i.exec(parts[0]?.trim());
+      if (parts.length !== 1 || !angle || (!angle[2] && Number(angle[1]) !== 0)) return undefined;
+      const radians = Number(angle[1]) * ({deg:Math.PI/180,rad:1,grad:Math.PI/200,turn:2*Math.PI}[angle[2]?.toLowerCase()] ?? 1);
+      if(kind==="rotatex"||kind==="rotatey"){
+        operations.push(Object.freeze({kind,angle:radians}));affine=true;
+        const factor=Math.abs(Math.cos(radians))<1e-14?0:Math.cos(radians);
+        if(kind==="rotatey"){scaleX*=factor;b*=factor;}else{c*=factor;scaleY*=factor;}
+        found=true;continue;
+      }
+      operations.push(Object.freeze({kind:"rotate",angle:radians}));
+      const cs = Math.cos(radians), sn = Math.sin(radians), a = scaleX, d = scaleY, oldB = b, oldC = c;
+      scaleX = a*cs+oldC*sn; c = -a*sn+oldC*cs;
+      b = oldB*cs+d*sn; scaleY = -oldB*sn+d*cs; affine = true;
     } else {
       continue;
     }
     found = true;
   }
   if (!found) return null;
+  if (affine) return Object.freeze({x:0,y:0,affine:Object.freeze({operations:Object.freeze(operations)})});
   return Object.freeze(scaleX === 1 && scaleY === 1 ? { x, y } : { x, y, scaleX, scaleY });
 }
 

package/lib/style/transform.js

@@ -0,0 +1,44 @@
+/** Resolve CSS affine transforms after the element's reference box is known. */
+export function transformLength(value,reference){
+ if(typeof value==='number')return value;
+ if(value?.unit==='%')return reference*value.value/100;
+ if(value?.kind==='calc')return value.px+reference*value.percent/100;
+ if(value?.kind==='scale')return value.factor*transformLength(value.value,reference);
+ const v=value?.values?.map(x=>transformLength(x,reference))??[];
+ if(value?.kind==='sum')return v.reduce((a,b)=>a+b,0);
+ if(value?.kind==='min')return Math.min(...v);
+ if(value?.kind==='max')return Math.max(...v);
+ return v.length?Math.max(v[0],Math.min(v[1],v[2])):0;
+}
+export function multiplyTransform(outer,inner){
+ const {a,b=0,c=0,d,e,f}=outer,{a:A,b:B=0,c:C=0,d:D,e:E,f:F}=inner;
+ return {a:a*A+c*B,b:b*A+d*B,c:a*C+c*D,d:b*C+d*D,e:a*E+c*F+e,f:b*E+d*F+f};
+}
+export function resolveAffine(transform,width,height){
+ let matrix={a:1,b:0,c:0,d:1,e:0,f:0};
+ for(const op of transform.operations){
+  let next;
+  if(op.kind==='translate')next={a:1,d:1,e:transformLength(op.x,width),f:transformLength(op.y,height)};
+  else if(op.kind==='scale')next={a:op.x,d:op.y,e:0,f:0};
+  else if(op.kind==='matrix')next=op.matrix;
+  else if(op.kind==='rotatex'||op.kind==='rotatey'){const value=Math.cos(op.angle),cs=Math.abs(value)<1e-14?0:value;next={a:op.kind==='rotatey'?cs:1,d:op.kind==='rotatex'?cs:1,e:0,f:0};}
+  else {const clean=n=>Math.abs(n)<1e-14?0:n,cs=clean(Math.cos(op.angle)),sn=clean(Math.sin(op.angle));next={a:cs,b:sn,c:-sn,d:cs,e:0,f:0};}
+  matrix=multiplyTransform(matrix,next);
+ }
+ return matrix;
+}
+
+/** Rotational part for backface tests in a preserve-3d rendering context. */
+export function rotationMatrix3D(transform){
+ let matrix=[1,0,0,0,1,0,0,0,1];
+ for(const op of transform?.affine?.operations??[]){
+  if(!['rotate','rotatex','rotatey'].includes(op.kind))continue;
+  const c=Math.cos(op.angle),s=Math.sin(op.angle);
+  const next=op.kind==='rotatex'?[1,0,0,0,c,-s,0,s,c]:op.kind==='rotatey'?[c,0,s,0,1,0,-s,0,c]:[c,-s,0,s,c,0,0,0,1];
+  matrix=multiplyRotation3D(matrix,next);
+ }
+ return matrix;
+}
+export function multiplyRotation3D(a,b){
+ return a.map((_,index)=>{const r=Math.floor(index/3),c=index%3;return a[r*3]*b[c]+a[r*3+1]*b[c+3]+a[r*3+2]*b[c+6];});
+}

package/lib/window-size.js

@@ -0,0 +1,10 @@
+/** Shared CLI viewport parsing for persistent headless and screenshot modes. */
+export function parseWindowSize(args) {
+  const value = args.find(arg => arg.startsWith('--window-size='))?.slice('--window-size='.length);
+  if (value === undefined) return {width: 800, height: 600};
+  const match = value.match(/^(\d+)[,x](\d+)$/i);
+  const width = Number(match?.[1]), height = Number(match?.[2]);
+  if (!Number.isSafeInteger(width) || !Number.isSafeInteger(height) || width < 1 || height < 1)
+    throw new Error('--window-size must be WIDTH,HEIGHT with positive integers');
+  return {width, height};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "buninu-browser",
-  "version": "0.6.0",
+  "version": "0.9.0",
   "description": "Buninu Browser is a browser engine written in JavaScript and WebAssembly for Bun.",
   "keywords": [
     "buninu",

package/patches/happy-dom/0007-scope-content-models-to-html-namespace.patch

@@ -0,0 +1,29 @@
+diff --git a/packages/happy-dom/src/html-parser/HTMLParser.ts b/packages/happy-dom/src/html-parser/HTMLParser.ts
+index 8d56e4f..44b4efc 100755
+--- a/packages/happy-dom/src/html-parser/HTMLParser.ts
++++ b/packages/happy-dom/src/html-parser/HTMLParser.ts
+@@ -327,6 +327,7 @@ export default class HTMLParser {
+ 			}
+ 
+ 			if (this.currentNode && this.readState === MarkupReadStateEnum.any &&
++				(<Element>this.currentNode)[PropertySymbol.namespaceURI] === NamespaceURI.html &&
+ 				HTMLElementConfig[(<Element>this.currentNode)[PropertySymbol.localName]]?.contentModel === HTMLElementConfigContentModelEnum.rcdata) {
+ 				const tag = (<Element>this.currentNode)[PropertySymbol.localName];
+ 				const end = new RegExp('</' + tag + '(?=[\\t\\n\\f\\r />])[^>]*>', 'gi');
+@@ -478,12 +479,14 @@ export default class HTMLParser {
+ 
+ 		const tagName = this.nextElement![PropertySymbol.tagName]!;
+ 		const lowerTagName = tagName.toLowerCase();
+-		const config = HTMLElementConfig[lowerTagName];
++		const config = this.nextElement![PropertySymbol.namespaceURI] === NamespaceURI.html
++			? HTMLElementConfig[lowerTagName] : undefined;
+ 		let previousCurrentNode: Node | null = null;
+ 
+ 		while (previousCurrentNode !== this.rootNode) {
+ 			const parentLowerTagName = (<Element>this.currentNode)[PropertySymbol.tagName]?.toLowerCase();
+-			const parentConfig = parentLowerTagName ? HTMLElementConfig[parentLowerTagName] : null;
++			const parentConfig = parentLowerTagName && (<Element>this.currentNode)[PropertySymbol.namespaceURI] === NamespaceURI.html
++				? HTMLElementConfig[parentLowerTagName] : null;
+ 
+ 			if (previousCurrentNode === this.currentNode) {
+ 				throw new Error(

package/patches/happy-dom/README.md

@@ -37,6 +37,13 @@ git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0005-inv
 git -C vendor/happy-dom apply --reverse --check ../../patches/happy-dom/0006-parse-css-escapes-in-selectors.patch
 ```
 
+The incremental `0007-scope-content-models-to-html-namespace.patch` applies to
+our current vendored parser (including its RCDATA compatibility fixes):
+
+```sh
+git -C vendor/happy-dom apply ../../patches/happy-dom/0007-scope-content-models-to-html-namespace.patch
+```
+
 ## Patch manifest
 
 | Patch | Modified upstream file | Reason | Verification |
@@ -74,3 +81,12 @@ Keep each local Happy DOM change in a separate numbered patch and add it to
 this table with its reason and focused test. When updating Happy DOM, regenerate
 and re-check the queue against the new pinned commit before changing the version
 record in `THIRD_PARTY_NOTICES.md`.
+
+### `0007`: HTML content models do not apply to SVG
+
+`HTMLParser.ts` must use HTML content-model rules and the RCDATA fast path
+only for nodes in the HTML namespace. Treating an SVG `<title>` as HTML
+RCDATA repeatedly consumed later markup without closing the lowercase SVG
+node, deleting following controls and preventing Hextris initialization.
+Validation: `bun test test/html-rcdata.test.js`; live game
+<https://hextris.io/>. The same rule preserves SVG title text and following SVG/HTML siblings.

package/test/animation-frames.test.js

@@ -65,3 +65,18 @@ test("actual SES frame callbacks match the browser callback order and lifecycle"
   expect({ code, error }).toEqual({ code: 0, error: "" });
   expect(out).toContain("animation frame ordering and lifecycle passed");
 }, 15000);
+
+frameTest('presentation follows all frame microtasks and precedes scheduling the next frame',()=>{
+ let now=0,wake=null,value='initial';const paints=[],delays=[];
+ const timers={schedule(callback,delay){wake=callback;delays.push(delay);return 1},cancel(){wake=null},dispose(){wake=null}};
+ const frames=createAnimationFrames({now:()=>now,frameTimers:timers,invoke:callback=>callback(),afterFrame(){
+  paints.push(value);now+=25;
+  if(paints.length===1)frames.request(()=>{value='next'});
+ }});
+ frames.request(()=>{value='callback';Promise.resolve().then(()=>{value='microtask'})});
+ let callback=wake;wake=null;now=16;callback();
+ expect(paints).toEqual(['microtask']);expect(delays).toEqual([16,0]);
+ callback=wake;wake=null;callback();expect(paints).toEqual(['microtask','next']);
+ frames.request(()=>frames.dispose());callback=wake;wake=null;callback();
+ expect(paints).toEqual(['microtask','next']);expect(wake).toBeNull();
+});