buninu-browser 0.0.2

package/test/fixtures/seccomp-child.js

@@ -0,0 +1,32 @@
+// Installs the renderer seccomp policy, then reports what still works.
+import { installSeccomp } from "../../lib/renderer/seccomp.js";
+
+const status = installSeccomp();
+const results = { status };
+const attempt = async (name, fn) => {
+  try {
+    results[name] = { ok: true, value: await fn() };
+  } catch (error) {
+    results[name] = { ok: false, code: error?.code ?? error?.name ?? String(error) };
+  }
+};
+if (status.installed) {
+  await attempt("compute", () => JSON.stringify([...Array(1000).keys()].map((n) => n * 2).sort()).length);
+  await attempt("allocate", () => new ArrayBuffer(64 * 1024 * 1024).byteLength);
+  await attempt("timer", () => new Promise((resolve) => setTimeout(() => resolve("fired"), 10)));
+  await attempt("date", () => new Date(0).toISOString());
+  await attempt("worker", () => new Promise((resolve, reject) => {
+    const worker = new Worker(URL.createObjectURL(new Blob(["postMessage(42)"])));
+    worker.onmessage = ({ data }) => {
+      worker.terminate();
+      resolve(data);
+    };
+    worker.onerror = reject;
+  }));
+  await attempt("readFile", () => Bun.file("/etc/hostname").text());
+  await attempt("network", () => fetch("http://127.0.0.1:9/", { signal: AbortSignal.timeout(3000) }).then((r) => r.status));
+  await attempt("spawn", async () => (await Bun.spawn(["true"]).exited));
+  await attempt("killParent", () => process.kill(process.ppid, 0));
+}
+console.log(JSON.stringify(results));
+process.exit(0);

package/test/flex.test.js

@@ -0,0 +1,150 @@
+import { expect, test } from "bun:test";
+import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
+import { layoutText } from "../lib/layout/text-layout.js";
+import { RenderTreeBuilder } from "../lib/render-tree/index.js";
+import { StyleEngine } from "../lib/style/computed-style.js";
+
+/**
+ * Flexbox cases ported from TermDOM tests/flex.test.ts
+ * (bikeshaving/termdom@b92f36d5f3d83770f3ea8c38fdeae0a192dc235e, MIT).
+ * TermDOM's expectations are hand-derived from css-flexbox-1; they are kept
+ * as-is and re-expressed as HTML/CSS fixtures in CSS pixels.
+ */
+function flex(html, css) {
+  const { document, window } = parseHTMLDocument(`<body style="margin:0">${html}</body>`);
+  const styles = new StyleEngine().compute(document, [`div { box-sizing: border-box } ${css}`]);
+  const tree = new RenderTreeBuilder().build(document, styles);
+  const layout = layoutText(tree, {
+    x: 0,
+    y: 0,
+    width: 400,
+    lineHeight: 10,
+    measureText: (text) => text.length * 10,
+    fontMetrics: () => ({ ascent: 8, height: 10 }),
+  });
+  const rect = (selector) => {
+    const element = document.querySelector(selector);
+    const box = layout.boxes.find((candidate) => tree.nodesById.get(candidate.nodeId)?.domNode === element);
+    return { left: box.x, top: box.y, width: box.width, height: box.height };
+  };
+  return { rect, done: () => window.happyDOM.abort() };
+}
+
+const ROOT = `#root { display:flex; width:100px; height:20px }`;
+
+test("flex-basis auto falls back to the main size property (§7.2.3)", () => {
+  const { rect, done } = flex(`<div id="root"><div id="a"></div></div>`,
+    `${ROOT} #a { width:30px; height:10px; flex:0 0 auto }`);
+  expect(rect("#a").width).toBe(30);
+  done();
+});
+
+test("a definite flex-basis wins over the width property (§7.2.3)", () => {
+  const { rect, done } = flex(`<div id="root"><div id="a"></div></div>`,
+    `${ROOT} #a { width:30px; height:10px; flex:0 0 50px }`);
+  expect(rect("#a").width).toBe(50);
+  done();
+});
+
+test("flex-basis auto with width auto sizes to max-content (§7.2.3)", () => {
+  const { rect, done } = flex(`<div id="root"><div id="a"><div id="c"></div></div></div>`,
+    `${ROOT} #a { display:flex; flex:0 0 auto } #c { width:25px; height:10px }`);
+  expect(rect("#a").width).toBe(25);
+  done();
+});
+
+test("max-width freezes a growing item and its surplus goes to the others (§9.7)", () => {
+  const { rect, done } = flex(`<div id="root"><div id="a"></div><div id="b"></div></div>`,
+    `${ROOT} #a, #b { flex:1 1 0; height:10px } #a { max-width:30px }`);
+  expect([rect("#a").width, rect("#b").width, rect("#a").left, rect("#b").left]).toEqual([30, 70, 0, 30]);
+  done();
+});
+
+test("min-width freezes a growing item and the rest share what is left (§9.7)", () => {
+  const { rect, done } = flex(`<div id="root"><div id="a"></div><div id="b"></div></div>`,
+    `${ROOT} #a, #b { flex-grow:1; flex-basis:0; height:10px } #a { min-width:80px }`);
+  expect([rect("#a").width, rect("#b").width]).toEqual([80, 20]);
+  done();
+});
+
+test("min-width freezes a shrinking item and the rest absorb the overflow (§9.7)", () => {
+  const { rect, done } = flex(`<div id="root"><div id="a"></div><div id="b"></div></div>`,
+    `${ROOT} #a, #b { flex-basis:80px; flex-shrink:1; height:10px } #a { min-width:60px }`);
+  expect([rect("#a").width, rect("#b").width, rect("#b").left]).toEqual([60, 40, 60]);
+  done();
+});
+
+test("auto margins center an item on the main axis and a single one absorbs free space (§9.5)", () => {
+  const both = flex(`<div id="root"><div id="a"></div></div>`,
+    `${ROOT} #a { width:20px; height:10px; flex-shrink:0; margin:0 auto }`);
+  expect(both.rect("#a").left).toBe(40);
+  both.done();
+  const single = flex(`<div id="root"><div id="a"></div></div>`,
+    `${ROOT} #a { width:20px; height:10px; flex-shrink:0; margin-left:auto }`);
+  expect(single.rect("#a").left).toBe(80);
+  single.done();
+});
+
+test("auto margins center an item on the cross axis (§9.5)", () => {
+  const { rect, done } = flex(`<div id="root"><div id="a"></div></div>`,
+    `${ROOT} #a { width:20px; height:10px; margin:auto 0 }`);
+  expect(rect("#a").top).toBe(5);
+  done();
+});
+
+test("auto margins take priority over justify-content (§9.5)", () => {
+  const { rect, done } = flex(`<div id="root"><div id="a"></div></div>`,
+    `${ROOT} #root { justify-content:flex-end } #a { width:20px; height:10px; flex-shrink:0; margin-right:auto }`);
+  expect(rect("#a").left).toBe(0);
+  done();
+});
+
+test("column-gap separates items and is removed before flexible lengths (css-align-3)", () => {
+  const fixed = flex(`<div id="root"><div id="a"></div><div id="b"></div><div id="c"></div></div>`,
+    `#root { display:flex; width:40px; column-gap:3px } #a, #b, #c { width:6px; height:1px; flex-shrink:0 }`);
+  expect(["#a", "#b", "#c"].map((selector) => fixed.rect(selector).left)).toEqual([0, 9, 18]);
+  fixed.done();
+  const flexible = flex(`<div id="root"><div id="a"></div><div id="b"></div><div id="c"></div></div>`,
+    `#root { display:flex; width:32px; column-gap:2px } #a, #b, #c { flex:1 1 0; height:1px }`);
+  const widths = ["#a", "#b", "#c"].map((selector) => flexible.rect(selector).width);
+  expect(widths.reduce((sum, width) => sum + width, 0)).toBeCloseTo(28);
+  flexible.done();
+});
+
+test("a gap counts against the line when deciding where to wrap (css-align-3)", () => {
+  const { rect, done } = flex(`<div id="root"><div id="a"></div><div id="b"></div><div id="c"></div></div>`,
+    `#root { display:flex; flex-wrap:wrap; align-items:flex-start; width:20px; gap:1px 2px }
+     #a, #b, #c { width:8px; height:1px; flex-shrink:0 }`);
+  expect([rect("#b").left, rect("#b").top, rect("#c").left, rect("#c").top]).toEqual([10, 0, 0, 2]);
+  done();
+});
+
+test("the automatic minimum size floors shrinking at min-content (§4.5)", () => {
+  // TermDOM uses 15/4-cell words in a 12-cell row; here 10px per character.
+  const floored = flex(`<div id="root"><div id="a">aaaaaaaaaaaaaaa</div><div id="b">aaaa</div></div>`,
+    `#root { display:flex; width:120px }`);
+  expect([floored.rect("#a").width, floored.rect("#b").width, floored.rect("#b").left]).toEqual([150, 40, 150]);
+  floored.done();
+  const wrappable = flex(`<div id="root"><div id="a">aaaaa aaaaa aaaa</div><div id="b">aaaa</div></div>`,
+    `#root { display:flex; width:120px }`);
+  expect(wrappable.rect("#a").width).toBeLessThan(160);
+  expect(wrappable.rect("#a").width).toBeGreaterThanOrEqual(50);
+  expect(wrappable.rect("#a").width + wrappable.rect("#b").width).toBeLessThanOrEqual(120);
+  wrappable.done();
+  const optedOut = flex(`<div id="root"><div id="a">aaaaaaaaaaaaaaa</div><div id="b">aaaa</div></div>`,
+    `#root { display:flex; width:120px } #a { min-width:0 }`);
+  expect(optedOut.rect("#a").width).toBeLessThan(150);
+  optedOut.done();
+  const rigid = flex(`<div id="root"><div id="a">aaaaaaaaaaaaaaa</div></div>`,
+    `#root { display:flex; width:120px } #a { flex-shrink:0 }`);
+  expect(rigid.rect("#a").width).toBe(150);
+  rigid.done();
+});
+
+test("a calc() max-width with a percentage caps a flex item's automatic minimum size", () => {
+  // GitHub's README box: a column flex item holding a wide <pre>, capped at calc(100% + 32px)
+  const { rect, done } = flex(`<div id="root"><div id="a"><div style="overflow:auto"><pre>${"x".repeat(100)}</pre></div></div></div>`,
+    `#root { display:flex; width:200px; padding:0 16px } #a { display:flex; flex-direction:column; flex-grow:1; max-width:calc(100% + 32px); margin:0 -16px }`);
+  expect(rect("#a")).toMatchObject({ left: 0, width: 200 });
+  done();
+});

package/test/gradient.test.js

@@ -0,0 +1,56 @@
+import { expect, test } from "bun:test";
+import { gradientLayers, resolveGradient } from "../lib/paint/gradient.js";
+
+const RECT = { x: 10, y: 20, width: 200, height: 100 };
+
+test("resolves linear gradient lines from angles and side keywords", () => {
+  // 90deg: left to right across the box width.
+  expect(resolveGradient("linear-gradient(90deg, red, blue)", RECT)).toMatchObject({
+    type: "linear", x0: 10, y0: 70, x1: 210, y1: 70,
+    stops: [{ color: "rgba(255, 0, 0, 1)", offset: 0 }, { color: "rgba(0, 0, 255, 1)", offset: 1 }],
+  });
+  // Default is "to bottom".
+  const down = resolveGradient("linear-gradient(red, blue)", RECT);
+  expect([down.x0, down.y0, down.x1, down.y1].map((value) => Math.round(value))).toEqual([110, 20, 110, 120]);
+  // 180deg matches the default; the gradient line length is |W sinA| + |H cosA|.
+  const angled = resolveGradient("linear-gradient(0.5turn, red, blue)", RECT);
+  expect(Math.round(angled.y1 - angled.y0)).toBe(100);
+});
+
+test("makes corner gradients pass through the other two corners", () => {
+  // "to top right": direction ⟂ to the top-left/bottom-right diagonal, i.e. (H, -W).
+  const gradient = resolveGradient("linear-gradient(to top right, red, blue)", RECT);
+  const direction = [gradient.x1 - gradient.x0, gradient.y1 - gradient.y0];
+  expect(direction[0] * 200 + direction[1] * 100).toBeCloseTo(0);
+  expect(direction[0]).toBeGreaterThan(0);
+  expect(direction[1]).toBeLessThan(0);
+});
+
+test("fills in unpositioned color stops and keeps positions monotonic", () => {
+  const gradient = resolveGradient("linear-gradient(90deg, red, lime 20%, blue, black 10%, white)", RECT);
+  expect(gradient.stops.map((stop) => stop.offset)).toEqual([0, 0.2, 0.2, 0.2, 1]);
+  const spread = resolveGradient("linear-gradient(90deg, red, lime, blue)", RECT);
+  expect(spread.stops.map((stop) => stop.offset)).toEqual([0, 0.5, 1]);
+});
+
+test("resolves radial gradient sizes and positions", () => {
+  // The buninu.org hero glow: explicit ellipse radii at 50% -10%.
+  const hero = resolveGradient(
+    "radial-gradient(1200px 500px at 50% -10%, rgba(255, 183, 3, .16), transparent 60%)", RECT);
+  expect(hero).toMatchObject({ type: "radial", cx: 110, cy: 10, rx: 1200, ry: 500 });
+  expect(hero.stops.map((stop) => stop.offset)).toEqual([0, 0.6]);
+  // farthest-corner ellipse keeps the farthest-side ratio: √2 × (100, 50).
+  const corner = resolveGradient("radial-gradient(red, blue)", RECT);
+  expect(corner.rx).toBeCloseTo(100 * Math.SQRT2);
+  expect(corner.ry).toBeCloseTo(50 * Math.SQRT2);
+  // closest-side circle at (50, 50) inside the box: nearest sides are 50px away.
+  expect(resolveGradient("radial-gradient(circle closest-side at 25% 50%, red, blue)", RECT)).toMatchObject({
+    cx: 60, cy: 70, rx: 50, ry: 50,
+  });
+});
+
+test("splits background layers and rejects unsupported values", () => {
+  expect(gradientLayers("radial-gradient(red, blue), linear-gradient(180deg, #000 0%, #fff 70%)")).toHaveLength(2);
+  expect(resolveGradient("conic-gradient(red, blue)", RECT)).toBeNull();
+  expect(resolveGradient("linear-gradient(90deg, notacolor, blue)", RECT)).toBeNull();
+});

package/test/grid.test.js

@@ -0,0 +1,253 @@
+import { expect, test } from "bun:test";
+import { parseHTMLDocument } from "../lib/happy-dom/parser.js";
+import { layoutText } from "../lib/layout/text-layout.js";
+import { RenderTreeBuilder } from "../lib/render-tree/index.js";
+import { StyleEngine } from "../lib/style/computed-style.js";
+
+/**
+ * Grid cases ported from TermDOM tests/grid.test.ts
+ * (bikeshaving/termdom@b92f36d5f3d83770f3ea8c38fdeae0a192dc235e, MIT).
+ * TermDOM renders into a 30-cell terminal where one cell is 1px and every
+ * character one cell wide and one line tall; the fixture reproduces that, and
+ * the hand-derived expected values are kept as they are upstream.
+ */
+function render(html, width = 30) {
+  const { document, window } = parseHTMLDocument(`<body style="margin:0">${html}</body>`);
+  const styles = new StyleEngine().compute(document);
+  const tree = new RenderTreeBuilder().build(document, styles);
+  const layout = layoutText(tree, {
+    x: 0,
+    y: 0,
+    width,
+    lineHeight: 1,
+    measureText: (text) => text.length,
+    fontMetrics: () => ({ ascent: 0.8, height: 1 }),
+  });
+  const boxOf = (element) => {
+    const box = layout.boxes.find((candidate) => tree.nodesById.get(candidate.nodeId)?.domNode === element);
+    return { left: box.x, top: box.y, width: box.width, height: box.height };
+  };
+  window.happyDOM.abort();
+  return {
+    item: (index) => boxOf(document.querySelectorAll("i")[index]),
+    items: () => [...document.querySelectorAll("i")].map(boxOf),
+  };
+}
+
+const grid = (styles, items) => `<div id="g" style='display:grid;${styles}'>${items}</div>`;
+const letters = (count, styles = "") => Array.from({ length: count },
+  (_, index) => `<i style='${styles}'>${String.fromCharCode(97 + index)}</i>`).join("");
+
+// Explicit tracks (css-grid-2 §7.2)
+
+test("a length track list places items at the lengths it states", () => {
+  const { item } = render(grid("grid-template-columns: 6px 4px", letters(2)));
+  expect(item(0)).toEqual({ left: 0, top: 0, width: 6, height: 1 });
+  expect(item(1)).toEqual({ left: 6, top: 0, width: 4, height: 1 });
+});
+
+test("a percentage track resolves against the container's content box", () => {
+  const { item } = render(grid("grid-template-columns: 50% 50%; width: 20px", letters(2)));
+  expect(item(0)).toEqual({ left: 0, top: 0, width: 10, height: 1 });
+  expect(item(1)).toEqual({ left: 10, top: 0, width: 10, height: 1 });
+});
+
+test("fr shares the leftover space in proportion to its factor", () => {
+  const { item } = render(grid("grid-template-columns: 6px 1fr 2fr", letters(3)));
+  expect(item(0)).toEqual({ left: 0, top: 0, width: 6, height: 1 });
+  expect(item(1)).toEqual({ left: 6, top: 0, width: 8, height: 1 });
+  expect(item(2)).toEqual({ left: 14, top: 0, width: 16, height: 1 });
+});
+
+test("a flex factor below one leaves part of the free space unclaimed", () => {
+  const { item } = render(grid("grid-template-columns: 0.5fr; width: 20px", letters(1)));
+  expect(item(0).width).toBe(10);
+});
+
+test("auto tracks size to their content and share what is left", () => {
+  const { item } = render(grid("grid-template-columns: auto auto", letters(2)));
+  expect(item(0).width).toBe(15);
+  expect(item(1)).toEqual({ left: 15, top: 0, width: 15, height: 1 });
+});
+
+test("min-content and max-content size a track to its content", () => {
+  for (const keyword of ["min-content", "max-content"]) {
+    const { item } = render(grid(`grid-template-columns: ${keyword} auto`, "<i>unbreakab</i><i>x</i>"));
+    expect(`${keyword}: ${item(0).width} ${item(1).width}`).toBe(`${keyword}: 9 21`);
+  }
+});
+
+test("minmax clamps a track between its two breadths", () => {
+  const { item } = render(grid("grid-template-columns: minmax(4px, 8px) minmax(2px, 1fr)", letters(2)));
+  expect(item(0).width).toBe(8);
+  expect(item(1)).toEqual({ left: 8, top: 0, width: 22, height: 1 });
+});
+
+test("minmax with an intrinsic minimum floors the track at its content", () => {
+  const { item } = render(grid("grid-template-columns: minmax(min-content, 4px) 5px", "<i>unbreakab</i><i>x</i>"));
+  expect(item(0).width).toBe(9);
+  expect(item(1).left).toBe(9);
+});
+
+test("fit-content caps a track at its argument", () => {
+  const { item } = render(grid("grid-template-columns: fit-content(6px) 5px", "<i>aaa bbb</i><i>x</i>"));
+  expect(item(0).width).toBe(6);
+  expect(item(0).height).toBe(2);
+});
+
+test("fit-content never clamps below the content's own minimum", () => {
+  const { item } = render(grid("grid-template-columns: fit-content(4px) 5px", "<i>unbreakab</i><i>x</i>"));
+  expect(item(0).width).toBe(9);
+});
+
+test("repeat(N) states the same track N times", () => {
+  const { items } = render(grid("grid-template-columns: repeat(3, 6px)", letters(3)));
+  expect(items().map((box) => box.left)).toEqual([0, 6, 12]);
+});
+
+test("repeat(auto-fill) fits as many tracks as the container holds", () => {
+  // Four 7-cell tracks fit in 30; a fifth item therefore starts row two.
+  const { items } = render(grid("grid-template-columns: repeat(auto-fill, 7px)", letters(5)));
+  expect(items().map((box) => [box.left, box.top])).toEqual([[0, 0], [7, 0], [14, 0], [21, 0], [0, 1]]);
+});
+
+test("repeat(auto-fill) counts the gaps between its tracks", () => {
+  // 7 + 2 per repetition: three tracks fit, so the fourth item wraps.
+  const { items } = render(grid("grid-template-columns: repeat(auto-fill, 7px); column-gap: 2px", letters(4)));
+  expect(items().map((box) => [box.left, box.top])).toEqual([[0, 0], [9, 0], [18, 0], [0, 1]]);
+});
+
+test("repeat(auto-fit) collapses the tracks no item landed in", () => {
+  const { items } = render(grid("grid-template-columns: repeat(auto-fit, 7px)", letters(2)));
+  expect(items().map((box) => box.left)).toEqual([0, 7]);
+  // Collapsed tracks and their gutters take no space, so centering sees 14px of tracks.
+  const centered = render(grid("grid-template-columns: repeat(auto-fit, 7px); column-gap: 2px; justify-content: center", letters(2)));
+  expect(centered.items().map((box) => [box.left, box.width])).toEqual([[7, 7], [16, 7]]);
+});
+
+test("grid-template-rows sizes the rows", () => {
+  const { item } = render(grid("grid-template-columns: 5px; grid-template-rows: 2px 3px", letters(2)));
+  expect(item(0)).toEqual({ left: 0, top: 0, width: 5, height: 2 });
+  expect(item(1)).toEqual({ left: 0, top: 2, width: 5, height: 3 });
+});
+
+test("a row sized auto takes the height of the tallest item in it", () => {
+  const { item } = render(grid("grid-template-columns: 4px 4px", "<i>aa bb cc</i><i>x</i>"));
+  expect(item(0).height).toBe(3);
+  expect(item(1).height).toBe(3);
+});
+
+// Line-based placement (css-grid-2 §8.3)
+
+test("line numbers place an item between them", () => {
+  const { item } = render(grid("grid-template-columns: 5px 5px 5px", `<i style="grid-column: 2 / 3">a</i>`));
+  expect(item(0)).toEqual({ left: 5, top: 0, width: 5, height: 1 });
+});
+
+test("a negative line number counts back from the explicit grid's end", () => {
+  const { item } = render(grid("grid-template-columns: 5px 5px 5px", `<i style="grid-column: 2 / -1">a</i>`));
+  expect(item(0)).toEqual({ left: 5, top: 0, width: 10, height: 1 });
+});
+
+test("two negative lines place an item at the end of the grid", () => {
+  const { item } = render(grid("grid-template-columns: 5px 5px 5px", `<i style="grid-column: -3 / -2">a</i>`));
+  expect(item(0)).toEqual({ left: 5, top: 0, width: 5, height: 1 });
+});
+
+test("lines given out of order are swapped", () => {
+  const { item } = render(grid("grid-template-columns: 5px 5px 5px", `<i style="grid-column: 3 / 1">a</i>`));
+  expect(item(0)).toEqual({ left: 0, top: 0, width: 10, height: 1 });
+});
+
+test("a start and end on the same line span one track", () => {
+  const { item } = render(grid("grid-template-columns: 5px 5px", `<i style="grid-column: 2 / 2">a</i>`));
+  expect(item(0)).toEqual({ left: 5, top: 0, width: 5, height: 1 });
+});
+
+test("span N widens an item from its start line", () => {
+  const { item } = render(grid("grid-template-columns: 4px 4px 4px", `<i style="grid-column: 1 / span 2">a</i>`));
+  expect(item(0).width).toBe(8);
+});
+
+test("span N before a definite end line places the start", () => {
+  const { item } = render(grid("grid-template-columns: 4px 4px 4px", `<i style="grid-column: span 2 / 4">a</i>`));
+  expect(item(0)).toEqual({ left: 4, top: 0, width: 8, height: 1 });
+});
+
+test("an end line alone spans the one track before it", () => {
+  const { item } = render(grid("grid-template-columns: 4px 4px 4px", `<i style="grid-column-end: 3">a</i>`));
+  expect(item(0)).toEqual({ left: 4, top: 0, width: 4, height: 1 });
+});
+
+test("two spans discard the end one", () => {
+  const { item } = render(grid("grid-template-columns: 4px 4px 4px", `<i style="grid-column: span 2 / span 3">a</i>`));
+  expect(item(0)).toEqual({ left: 0, top: 0, width: 8, height: 1 });
+});
+
+// Auto-placement (css-grid-2 §8.5)
+
+test("items fill the rows in order", () => {
+  const { items } = render(grid("grid-template-columns: 4px 4px", letters(5)));
+  expect(items().map((box) => [box.left, box.top])).toEqual([[0, 0], [4, 0], [0, 1], [4, 1], [0, 2]]);
+});
+
+test("an item too wide for the row left starts the next one", () => {
+  const { items } = render(grid("grid-template-columns: repeat(3, 4px)", `<i>a</i><i style="grid-column: span 3">b</i><i>c</i>`));
+  expect(items().map((box) => [box.left, box.top])).toEqual([[0, 0], [0, 1], [0, 2]]);
+});
+
+test("sparse packing never goes back for a hole it left", () => {
+  const { items } = render(grid("grid-template-columns: repeat(3, 4px)",
+    `<i style="grid-column: 2 / 4">a</i><i style="grid-column: span 2">b</i><i>c</i>`));
+  expect(items().map((box) => [box.left, box.top])).toEqual([[4, 0], [0, 1], [8, 1]]);
+});
+
+test("dense packing goes back and fills the hole", () => {
+  const { items } = render(grid("grid-template-columns: repeat(3, 4px); grid-auto-flow: row dense",
+    `<i style="grid-column: 2 / 4">a</i><i style="grid-column: span 2">b</i><i>c</i>`));
+  expect(items().map((box) => [box.left, box.top])).toEqual([[4, 0], [0, 1], [0, 0]]);
+});
+
+test("implicit rows take their size from grid-auto-rows, cycling", () => {
+  const { items } = render(grid("grid-template-columns: 4px 4px; grid-auto-rows: 2px", letters(3)));
+  expect(items()[2]).toEqual({ left: 0, top: 2, width: 4, height: 2 });
+  const cycling = render(grid("grid-template-columns: 4px; grid-auto-rows: 1px 3px", letters(4)));
+  expect(cycling.items().map((box) => [box.top, box.height])).toEqual([[0, 1], [1, 3], [4, 1], [5, 3]]);
+});
+
+test("implicit columns are created past the explicit grid", () => {
+  const { item } = render(grid("grid-template-columns: 4px; grid-auto-columns: 6px", `<i style="grid-column: 2">a</i>`));
+  expect(item(0)).toEqual({ left: 4, top: 0, width: 6, height: 1 });
+});
+
+// Gaps (css-align-3)
+
+test("column-gap separates the columns and comes off the free space", () => {
+  const { items } = render(grid("grid-template-columns: 1fr 1fr; column-gap: 2px", letters(2)));
+  expect(items()[0].width).toBe(14);
+  expect(items()[1].left).toBe(16);
+});
+
+test("row-gap and the gap shorthands separate rows and columns", () => {
+  expect(render(grid("grid-template-columns: 4px; grid-auto-rows: 1px; row-gap: 1px", letters(2))).items()[1].top).toBe(2);
+  for (const property of ["gap", "grid-gap"]) {
+    const { items } = render(grid(`grid-template-columns: 4px 4px; grid-auto-rows: 1px; ${property}: 1px 2px`, letters(4)));
+    expect(`${property}: ${items()[1].left} ${items()[2].top}`).toBe(`${property}: 6 2`);
+  }
+});
+
+test("a gap is outside every area unless an item spans it", () => {
+  const { items } = render(grid("grid-template-columns: 4px 4px; column-gap: 3px", letters(2)));
+  expect([items()[0].width, items()[1].left]).toEqual([4, 7]);
+  const spanning = render(grid("grid-template-columns: 4px 4px; column-gap: 3px", `<i style="grid-column: 1 / 3">a</i>`));
+  expect(spanning.item(0).width).toBe(11);
+});
+
+// Alignment (css-grid-2 §10)
+
+test("an item stretches to its area by default and justify-items can center it", () => {
+  expect(render(grid("grid-template-columns: 10px; grid-template-rows: 4px", letters(1))).item(0))
+    .toEqual({ left: 0, top: 0, width: 10, height: 4 });
+  expect(render(grid("grid-template-columns: 8px; justify-items: center", "<i>ab</i>")).item(0))
+    .toEqual({ left: 3, top: 0, width: 2, height: 1 });
+});

package/test/happy-dom-platform-adapters.test.js

@@ -0,0 +1,18 @@
+import { expect, test } from "bun:test";
+import imageSize from "../lib/happy-dom/image-size-adapter.js";
+import MIMEType from "../lib/happy-dom/mime-type-adapter.js";
+
+const ONE_PIXEL_PNG = Buffer.from(
+  "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAF/gL+3MxZ5wAAAABJRU5ErkJggg==",
+  "base64",
+);
+
+test("MIME adapter supplies the FileReader surface without whatwg-mimetype", () => {
+  expect(String(MIMEType.parse("Text/Plain; charset=UTF-8"))).toBe("text/plain");
+  expect(MIMEType.parse("not a mime type")).toBeNull();
+});
+
+test("image size adapter uses Bun.Image metadata", async () => {
+  expect(await imageSize(ONE_PIXEL_PNG)).toEqual({ width: 1, height: 1 });
+});
+