buninu-browser 0.2.4 → 0.4.0

package/test/qml-textures.test.js

@@ -0,0 +1,66 @@
+import { test, expect } from 'bun:test';
+import { mkdtempSync, rmSync } from 'node:fs';
+import { createBrowser } from '../lib/headless-shell.js';
+import { loadGraphics } from '../lib/renderer/page-renderer.js';
+
+test('ShaderEffectSource freezes, updates, hides sources and releases Loader references', async () => {
+  const dir = mkdtempSync('/tmp/qml-textures-');
+  const browser = await createBrowser({ spareRenderer: false });
+  const { CanvasKit: kit } = await loadGraphics();
+  async function pixel(x,y) {
+    const image=kit.MakeImageFromEncoded(Buffer.from(await browser.context.screenshot({format:'png'}),'base64'));
+    try { return [...image.readPixels(x,y,{width:1,height:1,colorType:kit.ColorType.RGBA_8888,alphaType:kit.AlphaType.Unpremul,colorSpace:kit.ColorSpace.SRGB})]; }
+    finally { image.delete(); }
+  }
+  const run = code => browser.context.evaluate(code);
+  async function until(fn) { for(let i=0;i<50;i++){if(await fn())return;await Bun.sleep(20);}throw Error(await run('document.body.innerText+JSON.stringify(errors)')); }
+  try {
+    await Bun.write(dir+'/main.qml', `import QtQuick
+Rectangle {width:240;height:160;color:"white"
+ property int frames:0
+ Rectangle {id:source;width:60;height:40;color:"red"}
+ Loader {id:layer;x:80;width:60;height:40;active:true
+  sourceComponent:ShaderEffectSource {sourceItem:source;hideSource:true;live:false;onScheduledUpdateCompleted:frames+=1}}
+ Loader {id:mirror;x:160;width:60;height:40;active:false;sourceComponent:ShaderEffectSource {sourceItem:source;hideSource:true;live:false}}
+ Text {id:status;y:120;text:frames+":"+layer.active}
+ Button {id:toggle;x:210;y:80;text:"hide";onClicked:layer.item.hideSource=!layer.item.hideSource}
+ Button {id:blue;y:80;text:"blue";onClicked:source.color=source.color==="blue"?"red":"blue"}
+ Button {id:update;x:70;y:80;text:"update";onClicked:layer.item.scheduleUpdate()}
+ Button {id:live;x:140;y:80;text:"live";onClicked:layer.item.live=true}
+ Button {id:mirrorOn;y:140;text:"mirror";onClicked:mirror.active=true}
+ Button {id:clear;x:70;y:140;text:"clear";onClicked:mirror.item.sourceItem=null}
+ Button {id:release;x:140;y:120;text:"release";onClicked:layer.active=false}
+}`);
+    await browser.context.addInitScript('globalThis.errors=[];addEventListener("error",e=>errors.push(String(e.error?.stack||e.message)))');
+    await browser.context.navigate(Bun.pathToFileURL(dir+'/main.qml').href);
+    await until(async()=> (await run('document.getElementById("status")?.textContent'))?.startsWith('1:'));
+    expect(await pixel(5,5)).toEqual([255,255,255,255]);
+    expect(await pixel(85,5)).toEqual([255,0,0,255]);
+    await run('document.getElementById("toggle").click()');await Bun.sleep(30);
+    expect(await pixel(5,5)).toEqual([255,0,0,255]);
+    await run('document.getElementById("toggle").click()');await Bun.sleep(30);
+    expect(await pixel(5,5)).toEqual([255,255,255,255]);
+    await run('document.getElementById("blue").click()');await Bun.sleep(50);
+    expect(await pixel(85,5)).toEqual([255,0,0,255]);
+    await run('document.getElementById("update").click()');
+    await until(async()=> (await run('document.getElementById("status").textContent')).startsWith('2:'));
+    expect(await pixel(85,5)).toEqual([0,0,255,255]);
+    await run('document.getElementById("live").click()');
+    await until(async()=> (await run('document.getElementById("status").textContent')).startsWith('3:'));
+    await run('document.getElementById("blue").click()');
+    await until(async()=> (await run('document.getElementById("status").textContent')).startsWith('4:'));
+    expect(await pixel(85,5)).toEqual([255,0,0,255]);
+    await Bun.sleep(120);
+    expect(await run('document.getElementById("status").textContent')).toBe('4:true');
+    await run('document.getElementById("mirrorOn").click()');
+    await until(async()=> (await pixel(165,5))[1]===0);
+    await run('document.getElementById("release").click()');await Bun.sleep(30);
+    expect(await pixel(5,5)).toEqual([255,255,255,255]);
+    expect(await pixel(165,5)).toEqual([255,0,0,255]);
+    await run('document.getElementById("clear").click()');await Bun.sleep(30);
+    expect(await pixel(165,5)).toEqual([255,255,255,255]);
+    expect(await pixel(5,5)).toEqual([255,0,0,255]);
+    expect(await pixel(85,5)).toEqual([255,255,255,255]);
+    expect(await run('errors')).toEqual([]);
+  } finally { browser.close();rmSync(dir,{recursive:true,force:true}); }
+},30000);

package/test/qml-views.test.js

@@ -0,0 +1,332 @@
+import { test, expect } from 'bun:test';
+import { RendererHost } from '../lib/renderer/host.js';
+const wait = async (fn, predicate) => {
+  let value;
+  for (let i = 0; i < 80; i++) {
+    value = await fn();
+    if (predicate(value)) return value;
+    await Bun.sleep(15);
+  }
+  throw Error('View did not settle: ' + JSON.stringify(value));
+};
+test('ListView virtualizes a large DelegateModel, scrolls, updates count and reuses delegates', async () => {
+  const host = new RendererHost({ timeout: 20000 });
+  try {
+    await host.start();
+    await host.call('loadDocument', {
+      url: 'data:text/x-qml,view',
+      contentType: 'text/x-qml',
+      source: `
+import QtQuick
+import QtQml.Models
+Item {
+ id:root;width:300;height:200
+ ListView {id:view;width:200;height:100;reuseItems:true
+  model:DelegateModel {id:rows;model:100000000;filterOnGroup:"shown";groups:DelegateModelGroup {name:"shown";includeByDefault:false}
+   Component.onCompleted:items.addGroups(0,2000,"shown")
+  }
+  delegate:Text {required property int index;text:"row "+index;height:20;width:200}
+ }
+ Text {id:count;y:120;text:view.count}
+ Button {id:scroll;y:150;onClicked:view.positionViewAtIndex(1000,ListView.Beginning)}
+ Button {id:shrink;x:100;y:150;onClicked:{rows.groups.removeGroups(5,1995,"shown");view.positionViewAtBeginning()}}
+}`,
+    });
+    await host.call('whenLoaded');
+    const read = async () =>
+      JSON.parse(
+        await host.call(
+          'evaluate',
+          'JSON.stringify({count:document.getElementById("count").textContent,text:document.body.innerText,n:document.querySelectorAll("[data-qml-type=Text]").length})',
+        ),
+      );
+    await wait(read, (v) => v.count === '2000');
+    let result = await read();
+    expect(result.n).toBeLessThan(20);
+    expect(result.text).toContain('row 0');
+    await host.call('evaluate', 'document.getElementById("scroll").click()');
+    result = await wait(read, (v) => v.text.includes('row 1000'));
+    expect(result.n).toBeLessThan(25);
+    await host.call('evaluate', 'document.getElementById("shrink").click()');
+    result = await wait(
+      read,
+      (v) => v.count === '5' && v.text.includes('row 0'),
+    );
+    expect(result.n).toBeLessThan(25);
+  } finally {
+    host.close();
+  }
+}, 30000);
+
+test('Flickable routes default children to contentItem and responds to wheel without moving explicit overlays', async () => {
+  const host = new RendererHost({ timeout: 20000 });
+  try {
+    await host.start();
+    await host.call('loadDocument', {
+      url: 'data:text/x-qml,flick',
+      contentType: 'text/x-qml',
+      source: `
+import QtQuick
+Flickable {id:root;width:200;height:100;contentWidth:200;contentHeight:500;clip:true
+ Rectangle {id:body;width:parent.width;height:500;color:"red"}
+ Text {id:overlay;parent:root;text:"fixed"}
+ Text {id:status;parent:root;y:20;text:root.contentY+":"+body.parent.height}
+}`,
+    });
+    await host.call('whenLoaded');
+    expect(
+      await host.call(
+        'evaluate',
+        'document.getElementById("body").parentElement.hasAttribute("data-qml-content")',
+      ),
+    ).toBe(true);
+    expect(
+      await host.call(
+        'evaluate',
+        'document.getElementById("overlay").parentElement.id',
+      ),
+    ).toBe('root');
+    await host.call(
+      'evaluate',
+      'document.getElementById("root").dispatchEvent(new WheelEvent("wheel",{deltaY:50,bubbles:true,cancelable:true}))',
+    );
+    await wait(
+      () =>
+        host.call('evaluate', 'document.getElementById("status").textContent'),
+      (v) => v === '50:500',
+    );
+    expect(
+      await host.call(
+        'evaluate',
+        'document.getElementById("body").parentElement.style.top',
+      ),
+    ).toBe('-50px');
+  } finally {
+    host.close();
+  }
+}, 30000);
+
+test('empty Loaders, decoration Items and DropAreas do not swallow pointer activation', async () => {
+  const host = new RendererHost({ timeout: 20000 });
+  try {
+    await host.start();
+    await host.call('loadDocument', {
+      url: 'data:text/x-qml,pointer',
+      contentType: 'text/x-qml',
+      source: `
+import QtQuick
+Item {width:200;height:100;property int clicks:0
+ Rectangle {width:80;height:40;color:"red";TapHandler {onTapped:clicks++}}
+ DropArea {anchors.fill:parent}
+ Loader {anchors.fill:parent;active:false;z:3}
+ Item {anchors.fill:parent;z:4}
+ Text {id:status;y:50;text:clicks}
+}`,
+    });
+    await host.call('whenLoaded');
+    await host.call('click', 20, 20);
+    await wait(
+      () =>
+        host.call('evaluate', 'document.getElementById("status").textContent'),
+      (v) => v === '1',
+    );
+  } finally {
+    host.close();
+  }
+}, 30000);
+
+test('XmlListModel reads XBEL attributes through Qt role indices and reports unsupported queries', async () => {
+  const host = new RendererHost({ timeout: 20000 });
+  try {
+    await host.start();
+    await host.call('loadDocument', {
+      url: 'data:text/x-qml,xml',
+      contentType: 'text/x-qml',
+      source: `
+import QtQuick
+import QtQml.XmlListModel
+Item {
+ XmlListModel {id:model;query:"/xbel/bookmark";xml:"<xbel><bookmark href='file:///tmp/a' visited='2026-10-22'/><bookmark href='file:///tmp/b'/></xbel>"
+  XmlListModelRole {name:"href";attributeName:"href"}
+  XmlListModelRole {name:"visited";attributeName:"visited"}
+ }
+ Text {id:status;text:model.status+":"+model.count+":"+model.data(model.index(1,0),Qt.UserRole)}
+ Button {id:bad;onClicked:model.query="//bookmark[@bad]"}
+}`,
+    });
+    await host.call('whenLoaded');
+    await wait(
+      () =>
+        host.call('evaluate', 'document.getElementById("status").textContent'),
+      (v) => v === '1:2:file:///tmp/b',
+    );
+    await host.call('evaluate', 'document.getElementById("bad").click()');
+    await wait(
+      () =>
+        host.call('evaluate', 'document.getElementById("status").textContent'),
+      (v) => v.startsWith('3:0:'),
+    );
+  } finally {
+    host.close();
+  }
+}, 30000);
+
+test('unchanged Flea StableModel resizes a virtualized view synchronously and warms reusable rows', async () => {
+  const { mkdtempSync, rmSync } = await import('node:fs');
+  const dir = mkdtempSync('/tmp/qml-stable-model-');
+  const ui = Bun.fileURLToPath(
+    new URL('./fixtures/qml/flea-theme/ui/', import.meta.url),
+  );
+  await Bun.write(
+    dir + '/main.qml',
+    `import QtQuick
+import ${JSON.stringify(ui)} as Flea
+Item {width:300;height:200;property int total:100
+ ListView {id:view;width:200;height:100;reuseItems:true
+  model:Flea.StableModel {id:stable;view:view;total:parent.parent.total;warm:true;warmRows:20}
+  delegate:Text {required property int index;width:200;height:20;text:"row "+index}
+ }
+ Text {id:status;y:120;text:view.count+":"+view.currentIndex}
+ Button {id:grow;y:150;onClicked:{total=105;stable.resize()}}
+ Button {id:scroll;x:80;y:150;onClicked:view.positionViewAtIndex(50,ListView.Beginning)}
+}`,
+  );
+  const { createBrowser } = await import('../lib/headless-shell.js');
+  const browser = await createBrowser({ spareRenderer: false });
+  try {
+    await browser.context.navigate(Bun.pathToFileURL(dir + '/main.qml').href);
+    await wait(
+      () =>
+        browser.context.evaluate(
+          'document.getElementById("status").textContent',
+        ),
+      (v) => v === '100:0',
+    );
+    await browser.context.evaluate('document.getElementById("scroll").click()');
+    await wait(
+      () => browser.context.evaluate('document.body.innerText'),
+      (v) => v.includes('row 50'),
+    );
+    await browser.context.evaluate('document.getElementById("grow").click()');
+    await wait(
+      () =>
+        browser.context.evaluate(
+          'document.getElementById("status").textContent',
+        ),
+      (v) => v === '105:0',
+    );
+    expect(
+      await browser.context.evaluate(
+        'document.querySelectorAll("[data-qml-type=Text]").length',
+      ),
+    ).toBeLessThan(30);
+  } finally {
+    browser.close();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30000);
+
+test('passive HoverHandler observes a decoration without intercepting the button beneath', async () => {
+  const host = new RendererHost({ timeout: 20000 });
+  try {
+    await host.start();
+    await host.call('loadDocument', {
+      url: 'data:text/x-qml,hover',
+      contentType: 'text/x-qml',
+      source: `
+import QtQuick
+Item {width:200;height:120;property int clicks:0
+ Rectangle {width:80;height:40;color:"red";TapHandler {onTapped:clicks++}}
+ Item {width:80;height:40;z:5;HoverHandler {id:hover}}
+ Text {id:status;y:60;text:hover.hovered+":"+clicks}
+}`,
+    });
+    await host.call('whenLoaded');
+    await host.call('move', 20, 20);
+    await host.call('click', 20, 20);
+    await wait(
+      () =>
+        host.call('evaluate', 'document.getElementById("status").textContent'),
+      (v) => v === 'true:1',
+    );
+    await host.call('move', 110, 80);
+    await wait(
+      () =>
+        host.call('evaluate', 'document.getElementById("status").textContent'),
+      (v) => v === 'false:1',
+    );
+  } finally {
+    host.close();
+  }
+}, 30000);
+
+test('turning reuseItems off and back on in one handler immediately drains parked delegates', async () => {
+  const host = new RendererHost({ timeout: 20000 });
+  try {
+    await host.start();
+    await host.call('loadDocument', {
+      url: 'data:text/x-qml,pool',
+      contentType: 'text/x-qml',
+      source: `import QtQuick
+Item {width:300;height:200
+ ListView {id:view;width:200;height:100;reuseItems:true;cacheBuffer:0;model:100
+  delegate:Text {required property int index;width:200;height:20;text:"row "+index}
+ }
+ Button {id:park;y:120;onClicked:{view.displayMarginEnd=300;view.forceLayout();view.displayMarginEnd=0;view.forceLayout()}}
+ Button {id:drain;x:80;y:120;onClicked:{view.reuseItems=false;view.reuseItems=true}}
+}`,
+    });
+    await host.call('whenLoaded');
+    const count = () =>
+      host.call(
+        'evaluate',
+        'document.querySelectorAll("[data-qml-type=Text]").length',
+      );
+    await host.call('evaluate', 'document.getElementById("park").click()');
+    const parked = await count();
+    expect(parked).toBeGreaterThan(10);
+    await host.call('evaluate', 'document.getElementById("drain").click()');
+    expect(await count()).toBeLessThan(10);
+  } finally {
+    host.close();
+  }
+}, 30000);
+
+test('replacing a numeric ListView model resets its scroll before creating new delegates',async()=>{
+ const host=new RendererHost({timeout:20000});
+ try{
+  await host.start();await host.call('loadDocument',{url:'data:text/x-qml,reset',contentType:'text/x-qml',source:`import QtQuick
+Item {width:300;height:200
+ ListView {id:view;width:200;height:100;model:100;delegate:Text {required property int index;text:"row "+index;width:200;height:20}}
+ Text {id:offset;y:110;text:String(view.contentY)+","+view.model+","+view.count}
+ Button {id:scroll;y:140;onClicked:view.positionViewAtIndex(50,ListView.Beginning)}
+ Button {id:replace;x:100;y:140;onClicked:view.model=80}
+}`});await host.call('whenLoaded');
+  await host.call('evaluate','document.getElementById("scroll").click()');
+  await wait(()=>host.call('evaluate','document.getElementById("offset").textContent'),v=>Number(v.split(",")[0])>0);
+  await host.call('evaluate','document.getElementById("replace").click()');
+  await wait(()=>host.call('evaluate','document.getElementById("offset").textContent'),v=>Number(v.split(",")[0])===0);
+  expect(await host.call('evaluate','document.body.innerText')).toContain('row 0');
+ }finally{host.close();}
+},30000);
+
+test('ListView positions unequal delegates by measured extent and updates following rows when a later row grows',async()=>{
+ const host=new RendererHost({timeout:20000});
+ try{
+  await host.start();await host.call('loadDocument',{url:'data:text/x-qml,variable',contentType:'text/x-qml',source:`import QtQuick
+Item {id:root;width:400;height:400;property int extra:0
+ ListView {id:view;width:200;height:300;spacing:5;model:[20,80,35,60]
+  delegate:Rectangle {required property int index;required property var modelData;width:200;height:modelData+(index===1?root.extra:0)}
+ }
+ Text {id:report;x:220}
+ Button {id:inspect;y:330;onClicked:report.text=JSON.stringify({rows:[0,1,2,3].map(i=>{var c=view.itemAtIndex(i);return c?[c.y,c.height]:null}),index:view.indexAt(10,110),gap:view.indexAt(10,22),content:view.contentHeight})}
+ Button {id:grow;x:100;y:330;onClicked:root.extra=50}
+}`});await host.call('whenLoaded');
+  const read=async()=>{await host.call('evaluate','document.getElementById("inspect").click()');return JSON.parse(await host.call('evaluate','document.getElementById("report").textContent'));};
+  let state=await wait(read,s=>s.rows[3]?.[0]===150);
+  expect(state.rows).toEqual([[0,20],[25,80],[110,35],[150,60]]);expect(state.index).toBe(2);expect(state.gap).toBe(-1);
+  await host.call('evaluate','document.getElementById("grow").click()');
+  state=await wait(read,s=>s.rows[3]?.[0]===200);
+  expect(state.rows).toEqual([[0,20],[25,130],[160,35],[200,60]]);expect(state.content).toBe(265);
+ }finally{host.close();}
+},30000);

package/test/qml-worker.test.js

@@ -0,0 +1,69 @@
+import { test, expect } from 'bun:test';
+import { mkdtempSync, rmSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+import { createBrowser } from '../lib/headless-shell.js';
+async function run(files, source, verify) {
+  const dir = mkdtempSync('/tmp/qml-worker-');
+  let browser;
+  try {
+    for (const [name, text] of Object.entries({ ...files, 'main.qml': source }))
+      await Bun.write(join(dir, name), text);
+    browser = await createBrowser({ spareRenderer: false });
+    await browser.context.navigate(
+      Bun.pathToFileURL(join(dir, 'main.qml')).href,
+    );
+    const read = () =>
+      browser.context.evaluate('document.getElementById("result").textContent');
+    let text;
+    for (let i = 0; i < 200; i++) {
+      text = await read();
+      if (text !== 'waiting') break;
+      await Bun.sleep(20);
+    }
+    await verify(text, browser);
+  } finally {
+    browser?.close();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}
+test('WorkerScript includes shared script scope, clones messages and keeps independent worker state', async () => {
+  await run(
+    {
+      'worker.js':
+        'Qt.include("helper.js");var count=0;WorkerScript.onMessage=function(m){m.answer=twice(m.n)+ ++count;WorkerScript.sendMessage(m);};',
+      'helper.js': '.pragma library\nfunction twice(n){return n*2;}',
+    },
+    `import QtQuick
+Text {id:result;text:"waiting";property var input:({n:4});property var replies:[]
+ WorkerScript {id:a;source:"worker.js";onMessage:function(m){result.replies=result.replies.concat([m.answer]);if(result.replies.length===2)result.text=JSON.stringify(result.replies)+":"+result.input.answer}}
+ WorkerScript {id:b;source:"worker.js";onMessage:function(m){result.replies=result.replies.concat([m.answer]);if(result.replies.length===2)result.text=JSON.stringify(result.replies)+":"+result.input.answer}}
+ Component.onCompleted:{a.sendMessage(input);b.sendMessage(input)}
+}`,
+    (text) => expect(text).toBe('[9,9]:undefined'),
+  );
+}, 30000);
+test.skipIf(!process.env.BUNINU_FLEA_ROOT)(
+  'unchanged Flea MarkdownWorker parses headings and paragraphs in a real worker',
+  async () => {
+    const url = Bun.pathToFileURL(
+      resolve(process.env.BUNINU_FLEA_ROOT, 'ui/MarkdownWorker.js'),
+    ).href;
+    await run(
+      {},
+      `import QtQuick
+Text {id:result;text:"waiting"
+ WorkerScript {id:worker;source:${JSON.stringify(url)};onMessage:function(m){result.text=JSON.stringify(m)}}
+ Component.onCompleted:worker.sendMessage({seq:12,source:"# Hello\\n\\nA **bold** paragraph.",dir:"/tmp",chrome:"#000000",ink:"#ffffff"})
+}`,
+      (text) => {
+        const result = JSON.parse(text);
+        expect(result.error).toBe('');
+        expect(result.seq).toBe(12);
+        expect(result.blocks.length).toBeGreaterThan(1);
+        expect(JSON.stringify(result.blocks)).toContain('Hello');
+        expect(JSON.stringify(result.blocks)).toContain('bold');
+      },
+    );
+  },
+  30000,
+);

package/test/qml.test.js

@@ -0,0 +1,83 @@
+import {test,expect} from 'bun:test';
+import {parseQml} from '../lib/qml/parser.js';
+import {createQmlDocument} from '../lib/qml/document.js';
+import {isQmlDocument} from '../lib/qml/format.js';
+import {displayDocument} from '../lib/document-types.js';
+import {RendererHost} from '../lib/renderer/host.js';
+const url='https://qml.test/hello.qml';
+const source=await Bun.file(new URL('./fixtures/qml/hello.qml',import.meta.url)).text();
+
+test('QML builds DOM directly, preserves source through response classification',()=>{
+ const response=displayDocument({url,contentType:'text/plain',body:new TextEncoder().encode(source)});
+ expect(response).toEqual({source,contentType:'text/x-qml'});
+ expect(isQmlDocument(url,'text/html')).toBe(false);
+ const {document}=createQmlDocument(source,url);
+ expect(document.querySelectorAll('[data-qml-node]').length).toBe(4);
+ expect(document.querySelector('#root')).not.toBeNull();
+ expect(document.querySelector('script').textContent).toContain('addEventListener');
+});
+test('unsupported imports/types are visible diagnostics and source is inert',()=>{
+ const {document}=createQmlDocument('import Evil\nRectangle { color: "<script>boom</script>" }',url);
+ expect(document.body.textContent).toContain('Unsupported QML import');
+ expect(document.querySelector('script')).toBeNull();
+ expect(()=>parseQml('Rectangle { width: }')).toThrow();
+ const disabled=createQmlDocument(source,url,{scripting:false}).document;
+ expect(disabled.querySelector('script')).toBeNull();
+ expect(disabled.body.textContent).toContain('requires page scripting');
+});
+test('Acorn handles modern JS expressions and braces inside strings',()=>{
+ const ast=parseQml('import QtQuick\nText { text: ({a: "}"})?.a ?? "fallback"; onClicked: { console.log("}"); } }');
+ expect(ast.root.properties.length).toBe(2);
+});
+test('QML uses normal realm, reactive DOM, input, viewport resize and navigation',async()=>{
+ const host=new RendererHost({timeout:20000});
+ try{
+  await host.start(); await host.call('resize',640,360,1);
+  await host.call('loadDocument',{url,source,contentType:'text/x-qml'}); await host.call('whenLoaded');
+  expect(await host.call('evaluate','document.title')).toBe('QML DOM experiment');
+  expect(await host.call('evaluate','document.getElementById("button").style.width')).toBe('320px');
+  expect(await host.call('evaluate','document.body.textContent.includes("Hello World! Clicks: 0")')).toBe(true);
+  await host.call('evaluate',`document.querySelector('[data-qml-node="3"]').click()`);
+  expect(await host.call('evaluate',`document.querySelector('[data-qml-node="2"]').textContent`)).toBe('Hello World! Clicks: 1');
+  await host.call('resize',800,400,1);
+  expect(await host.call('evaluate','document.getElementById("button").style.width')).toBe('400px');
+  await host.call('loadDocument',{url,contentType:'text/x-qml',source:`import QtQuick
+Rectangle {
+ id: root
+ implicitWidth: 300
+ implicitHeight: 120
+ property int count: 1
+ Rectangle { id: child; anchors.fill: parent
+  Text { id: label; text: root.count + ":" + parent.width }
+ }
+ onClicked: { root.width = 222; root.implicitWidth = 500; root.count++; }
+}`}); await host.call('whenLoaded');
+  expect(await host.call('evaluate','document.getElementById("label").textContent')).toBe('1:300');
+  await host.call('evaluate','document.getElementById("root").click()');
+  expect(await host.call('evaluate','document.getElementById("label").textContent')).toBe('2:222');
+  await host.call('loadDocument',{url:'https://qml.test/plain' ,source:'<p>ordinary HTML</p>',contentType:'text/html'});await host.call('whenLoaded');
+  expect(await host.call('evaluate','document.body.textContent')).toBe('ordinary HTML');
+ }finally{host.close();}
+},30000);
+
+test('Quickshell multiply fixture uses editable DOM controls and click handlers',async()=>{
+ const host=new RendererHost({timeout:20000});
+ const source=await Bun.file(new URL('./fixtures/qml/multiply.qml',import.meta.url)).text();
+ try{
+  await host.start();await host.call('resize',640,480,1);
+  await host.call('loadDocument',{url:'https://qml.test/multiply.qml',source,contentType:'text/x-qml'});await host.call('whenLoaded');
+  expect(await host.call('evaluate',"document.querySelectorAll('input').length")).toBe(3);
+  const point=async selector=>JSON.parse(await host.call('evaluate',`JSON.stringify((()=>{const r=document.querySelector(${JSON.stringify(selector)}).getBoundingClientRect();return [r.x+r.width/2,r.y+r.height/2]})())`));
+  const click=async selector=>host.call('click',...await point(selector));
+  const value=()=>host.call('evaluate',"document.getElementById('result').value");
+  await click('button');expect(await value()).toBe('42');
+  await click('#first');await host.call('press','a',{modifiers:2});await host.call('type','-2.5');
+  await click('#second');await host.call('press','a',{modifiers:2});await host.call('type','4');
+  await click('button');expect(await value()).toBe('-10');
+  await click('#result');await host.call('type','999');expect(await value()).toBe('-10');
+  await click('#first');await host.call('press','a',{modifiers:2});await host.call('press','Backspace');
+  await click('button');expect(await value()).toBe('Please enter two valid numbers');
+  const rects=JSON.parse(await host.call('evaluate',"JSON.stringify([...document.querySelectorAll('input,button')].map(e=>{const r=e.getBoundingClientRect();return [r.x,r.y,r.width,r.height]}))"));
+  for(let i=1;i<rects.length;i++)expect(rects[i][1]).toBeGreaterThanOrEqual(rects[i-1][1]+rects[i-1][3]);
+ }finally{host.close();}
+},30000);