buninu-browser 0.3.0 → 0.5.0

package/test/qml-controls-window.test.js

@@ -0,0 +1,182 @@
+import {test,expect} from 'bun:test';
+import {RendererHost} from '../lib/renderer/host.js';
+import {qmlWindowConstraints} from '../lib/qml/window-constraints.js';
+test('window constraints normalize and update Wayland size hints',async()=>{
+ const calls=[];let hints=['[360,240]','[200,0]'];
+ const sync=qmlWindowConstraints({request:(...args)=>calls.push(args)},{toplevel:8,surface:6},{url:'file:///test.qml',evaluate:async()=>hints});
+ await sync();await sync();
+ expect(calls).toEqual([[8,'set_min_size',360,240],[8,'set_max_size',360,0],[6,'commit']]);
+ hints=null;await sync();expect(calls.slice(3)).toEqual([[8,'set_min_size',0,0],[8,'set_max_size',0,0],[6,'commit']]);
+});
+test('FloatingWindow minimum size, attached window notifications and Button slots',async()=>{
+ const host=new RendererHost({timeout:20000});
+ try{
+ await host.start();
+ await host.call('loadDocument',{url:'data:text/x-qml,controls',contentType:'text/x-qml',source:`import QtQuick
+import Quickshell
+ShellRoot {
+ FloatingWindow {id:a;minimumSize:Qt.size(1500,1200)
+  Button {id:b;width:100;height:40;padding:5;focusPolicy:Qt.NoFocus
+   contentItem:Text {id:label;text:"hello"}
+   background:Rectangle {id:bg;color:"red"}
+   Window.onWindowChanged:globalThis.changes=(globalThis.changes||0)+1
+  }
+ }
+ FloatingWindow{id:c}
+ Component.onCompleted:{globalThis.a=a;globalThis.b=b;globalThis.c=c;globalThis.label=label;globalThis.bg=bg;}
+}`});
+ await host.call('whenLoaded');
+ expect(await host.call('evaluate','[a.width,a.height]')).toEqual([1500,1200]);
+ expect(await host.call('evaluate','[label.x,label.y,label.width,label.height,bg.width,bg.height,b.activeFocusOnTab]')).toEqual([5,5,90,30,100,40,false]);
+ expect(await host.call('evaluate','b.Window.window===a')).toBe(true);
+ const before=await host.call('evaluate','globalThis.changes');
+ await host.call('evaluate','b.parent=c');await Bun.sleep(20);
+ expect(await host.call('evaluate','b.Window.window===c')).toBe(true);
+ expect(await host.call('evaluate','globalThis.changes')).toBe(before+1);
+ }finally{host.close();}
+},20000);
+
+test('ListModel roles populate required Repeater properties and remain reactive',async()=>{
+ const host=new RendererHost({timeout:20000});
+ try{
+ await host.start();await host.call('loadDocument',{url:'data:text/x-qml,roles',contentType:'text/x-qml',source:`import QtQuick
+Item {
+ ListModel{id:model}
+ Repeater{id:rep;model:model;delegate:Text {required property string key;required property int amount;text:key+amount}}
+ Component.onCompleted:{globalThis.rep=rep;globalThis.rows=model;model.append({key:"a",amount:2});}
+}`});await host.call('whenLoaded');
+ expect(await host.call('evaluate','[rep.count,rep.itemAt(0).text]')).toEqual([1,'a2']);
+ await host.call('evaluate','rows.setProperty(0,"amount",3)');await Bun.sleep(20);
+ expect(await host.call('evaluate','rep.itemAt(0).text')).toBe('a3');
+ }finally{host.close();}
+},20000);
+
+test('nested Loader startup preserves outer property notifications',async()=>{
+ const host=new RendererHost({timeout:20000});
+ try{
+ await host.start();await host.call('loadDocument',{url:'data:text/x-qml,nested-notifications',contentType:'text/x-qml',source:`import QtQuick
+Item {id:root
+ property int counter:0
+ onCounterChanged:globalThis.changes=(globalThis.changes||[]).concat([counter])
+ Loader {sourceComponent:Item {property size dimensions;property real side:dimensions.width;Component.onCompleted:globalThis.initialSide=side}}
+ Component.onCompleted:{globalThis.root=root;counter=1;}
+}`});await host.call('whenLoaded');
+ expect(await host.call('evaluate','globalThis.initialSide')).toBe(0);
+ expect(await host.call('evaluate','globalThis.changes')).toEqual([1]);
+ await host.call('evaluate','root.counter=2');await Bun.sleep(20);
+ expect(await host.call('evaluate','globalThis.changes')).toEqual([1,2]);
+ }finally{host.close();}
+},20000);
+
+import {createQt} from '../lib/qml/builtins.js';
+test('Qt date/time formatting uses local date fields and locale format order',()=>{
+ const qt=createQt(),date=new Date(2024,10,23,17,45,36);
+ expect(qt.formatTime(date,'HH:mm')).toBe('17:45');
+ expect(qt.formatTime(date,'h:mm AP')).toBe('5:45 PM');
+ expect(qt.formatDateTime(date,"yyyy-MM-dd 'at' HH:mm")).toBe('2024-11-23 at 17:45');
+ expect(qt.locale('en_US').measurementSystem).toBe(1);
+ expect(qt.locale('zh_TW').measurementSystem).toBe(0);
+ expect(qt.locale('en_US').dateFormat(1).indexOf('M')).toBeLessThan(qt.locale('en_US').dateFormat(1).indexOf('d'));
+});
+
+test('createObject does not make the owning binding depend on new child state',async()=>{
+ const host=new RendererHost({timeout:20000});
+ try{
+ await host.start();await host.call('loadDocument',{url:'data:text/x-qml,factory-tracking',contentType:'text/x-qml',source:`import QtQuick
+Item {id:root
+ property var child:factory.createObject(root)
+ property Component factory:Component {Item {property int counter:0;property int derived:counter+1;Component.onCompleted:globalThis.created=(globalThis.created||0)+1}}
+ Component.onCompleted:{globalThis.root=root;globalThis.first=child;}
+}`});await host.call('whenLoaded');
+ expect(await host.call('evaluate','globalThis.created')).toBe(1);
+ await host.call('evaluate','first.counter=9');await Bun.sleep(20);
+ expect(await host.call('evaluate','[root.child===first,root.child.derived,globalThis.created]')).toEqual([true,10,1]);
+ }finally{host.close();}
+},20000);
+
+test('Button custom content sizes its RowLayout slot and reacts without a width cycle',async()=>{
+ const host=new RendererHost({timeout:20000});
+ try {
+  await host.start();
+  await host.call('loadDocument',{url:'data:text/x-qml,button-size',contentType:'text/x-qml',source:`import QtQuick
+import QtQuick.Layouts
+import Quickshell
+FloatingWindow {
+ RowLayout { width:500; height:60; spacing:8
+  Button {id:button;padding:4
+   contentItem: RowLayout {spacing:6
+    Rectangle {id:first;implicitWidth:80;implicitHeight:20}
+    Rectangle {implicitWidth:100;implicitHeight:24}
+   }
+   background: Rectangle {implicitWidth:120;implicitHeight:30}
+  }
+  Rectangle {id:next;implicitWidth:30;implicitHeight:30}
+  Item {Layout.fillWidth:true}
+ }
+ Component.onCompleted:{globalThis.button=button;globalThis.first=first;globalThis.next=next;}
+}`});
+  await host.call('whenLoaded');
+  expect(await host.call('evaluate','[button.implicitWidth,button.implicitHeight,button.width,next.x]')).toEqual([194,32,194,202]);
+  await host.call('evaluate','first.implicitWidth=120');await Bun.sleep(20);
+  expect(await host.call('evaluate','[button.implicitWidth,button.width,next.x]')).toEqual([234,234,242]);
+ }finally{host.close();}
+},20000);
+
+test('Layouts retain explicit item dimensions for status dots and palette strips',async()=>{
+ const host=new RendererHost({timeout:20000});
+ try {
+  await host.start();
+  await host.call('loadDocument',{url:'data:text/x-qml,layout-fallback',contentType:'text/x-qml',source:`import QtQuick
+import QtQuick.Layouts
+import Quickshell
+FloatingWindow {
+ RowLayout {id:row;width:300;height:30
+  Rectangle {id:dot;width:8;height:8;radius:4;color:"green"}
+  Item {Layout.fillWidth:true}
+ }
+ ColumnLayout {id:column;y:40;width:300;height:22;spacing:4
+  Rectangle {id:strip;Layout.fillWidth:true;height:6;color:"red"}
+  Item {implicitHeight:12;Layout.fillWidth:true}
+ }
+ GridLayout {y:80;columns:1
+  Rectangle {id:cell;width:11;height:7}
+ }
+ Component.onCompleted:{globalThis.dot=dot;globalThis.strip=strip;globalThis.cell=cell;globalThis.row=row;globalThis.column=column;}
+}`});
+  await host.call('whenLoaded');
+  expect(await host.call('evaluate','[dot.width,dot.height,strip.width,strip.height,cell.width,cell.height]')).toEqual([8,8,300,6,11,7]);
+  await host.call('evaluate','row.width=500;column.width=500');await Bun.sleep(20);
+  expect(await host.call('evaluate','[dot.width,dot.height,strip.width,strip.height]')).toEqual([8,8,500,6]);
+  await host.call('evaluate','row.width=300;column.width=300');await Bun.sleep(20);
+  expect(await host.call('evaluate','[dot.width,dot.height,strip.width,strip.height]')).toEqual([8,8,300,6]);
+ }finally{host.close();}
+},20000);
+
+test('Nested Layout receives explicit size bindings even when the dot starts hidden',async()=>{
+ const host=new RendererHost({timeout:20000});
+ try {
+  await host.start();
+  await host.call('loadDocument',{url:'data:text/x-qml,late-dot',contentType:'text/x-qml',source:`import QtQuick
+import QtQuick.Layouts
+import Quickshell
+FloatingWindow {
+ property bool ready:false
+ id:root
+ ColumnLayout {anchors.fill:parent
+  RowLayout {Layout.fillWidth:true
+   Text {text:"TITLE"}
+   Item {Layout.fillWidth:true}
+   RowLayout {
+    spacing:8
+    Rectangle {id:dot;width:8;height:8;radius:4;visible:root.ready;Layout.alignment:Qt.AlignVCenter;color:"blue"}
+    Text {text:"LIVE"}
+   }
+  }
+ }
+ Component.onCompleted:{globalThis.root=root;globalThis.dot=dot;}
+}`});
+  await host.call('whenLoaded');
+  await host.call('evaluate','root.ready=true');await Bun.sleep(20);
+  expect(await host.call('evaluate','[dot.width,dot.height,dot.visible]')).toEqual([8,8,true]);
+ }finally{host.close();}
+},20000);

package/test/qml-dynamic.test.js

@@ -0,0 +1,401 @@
+import { test, expect } from 'bun:test';
+import { mkdtempSync, rmSync } from 'node:fs';
+import { createBrowser } from '../lib/headless-shell.js';
+test('local Qt.createComponent creates DOM, shares singleton bindings and destroys instances', async () => {
+  const dir = mkdtempSync('/tmp/qml-dynamic-');
+  const write = (name, text) => Bun.write(dir + '/' + name, text);
+  await write(
+    'qmldir',
+    'singleton Theme 1.0 Theme.qml\nsingleton Extra 1.0 Extra.qml\n',
+  );
+  await write(
+    'Theme.qml',
+    'pragma Singleton\nimport QtQuick\nQtObject {property int count: 1}',
+  );
+  await write(
+    'Extra.qml',
+    'pragma Singleton\nimport QtQuick\nQtObject {property int count: 10}',
+  );
+  await write(
+    'Cell.qml',
+    `import QtQuick
+Rectangle {
+ required property string label
+ property int value: 0
+ width: 200; height: 30
+ Text {text: label+":"+Theme.count+":"+Extra.count+":"+value}
+ Component.onCompleted: Extra.count++
+}`,
+  );
+  await write(
+    'main.qml',
+    `import QtQuick
+Rectangle {
+ id:root;width:600;height:300
+ property int source: 3
+ property var cells: []
+ property var factory: null
+ Text {id:status;text:Theme.count}
+ Button {id:add;text:"Add";onClicked:{
+   if(!root.factory)root.factory=Qt.createComponent("Cell.qml")
+   const cell=root.factory.createObject(root,{label:"cell",value:Qt.binding(function(){return root.source})})
+   if(!cell)throw Error(root.factory.errorString())
+   root.cells=root.cells.concat([cell])
+ }}
+ Button {id:change;onClicked:{Theme.count++;root.source=7}}
+ Button {id:remove;onClicked:{root.cells[0].destroy();root.cells=root.cells.slice(1)}}
+}`,
+  );
+  const b = await createBrowser({ spareRenderer: false });
+  try {
+    await b.context.navigate(Bun.pathToFileURL(dir + '/main.qml').href);
+    const click = (id) =>
+      b.context.evaluate(
+        'document.getElementById(' + JSON.stringify(id) + ').click()',
+      );
+    const texts = async () =>
+      JSON.parse(
+        await b.context.evaluate(
+          'JSON.stringify([...document.querySelectorAll("[data-qml-type=Text]")].map(e=>e.textContent))',
+        ),
+      );
+    await click('add');
+    expect(await texts()).toEqual(['1', 'cell:1:11:3']);
+    await click('add');
+    expect(await texts()).toEqual(['1', 'cell:1:12:3', 'cell:1:12:3']);
+    await click('change');
+    expect(await texts()).toEqual(['2', 'cell:2:12:7', 'cell:2:12:7']);
+    await click('remove');
+    expect(await texts()).toEqual(['2', 'cell:2:12:7']);
+    await click('add');
+    expect(await texts()).toEqual(['2', 'cell:2:13:7', 'cell:2:13:7']);
+  } finally {
+    b.close();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30000);
+
+test('Loader creates inline and file components on demand, updates bindings and destroys hidden content', async () => {
+  const dir = mkdtempSync('/tmp/qml-loader-');
+  await Bun.write(
+    dir + '/Child.qml',
+    'import QtQuick\nText {required property string label; text:label}',
+  );
+  await Bun.write(
+    dir + '/main.qml',
+    `import QtQuick
+Item {
+ id:root;width:500;height:300
+ property bool shown: false
+ property string label: "first"
+ property int loaded: 0
+ property int destroyed: 0
+ Component {id:body
+  Text {text:root.label;Component.onDestruction:root.destroyed++}
+ }
+ Loader {id:loader;active:root.shown;sourceComponent:body;onLoaded:root.loaded++}
+ Loader {id:fileLoader}
+ Text {id:status;text:root.loaded+":"+root.destroyed}
+ Button {id:show;onClicked:root.shown=!root.shown}
+ Button {id:change;onClicked:root.label="second"}
+ Button {id:file;onClicked:fileLoader.setSource("Child.qml",{label:Qt.binding(function(){return root.label})})}
+}`,
+  );
+  const b = await createBrowser({ spareRenderer: false });
+  try {
+    await b.context.navigate(Bun.pathToFileURL(dir + '/main.qml').href);
+    const text = () => b.context.evaluate('document.body.innerText');
+    const settle = async (predicate) => {
+      for (let i = 0; i < 50; i++) {
+        if (await predicate()) return;
+        await Bun.sleep(10);
+      }
+      throw Error('Loader did not settle: ' + (await text()));
+    };
+
+    const click = (id) =>
+      b.context.evaluate(
+        'document.getElementById(' + JSON.stringify(id) + ').click()',
+      );
+    expect(await text()).not.toContain('first');
+    await click('show');
+    await settle(async () => (await text()).includes('first'));
+    expect(await text()).toContain('first');
+    expect(await text()).toContain('1:0');
+    await click('file');
+    expect((await text()).match(/first/g)?.length).toBe(2);
+    await click('change');
+    await settle(async () => (await text()).match(/second/g)?.length === 2);
+    expect((await text()).match(/second/g)?.length).toBe(2);
+    await click('show');
+    await settle(async () => (await text()).includes('1:1'));
+    expect(await text()).toContain('1:1');
+    expect((await text()).match(/second/g)?.length).toBe(1);
+    await click('show');
+    await settle(async () => (await text()).includes('2:1'));
+    expect(await text()).toContain('2:1');
+  } finally {
+    b.close();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30000);
+
+test('synchronous Loader item observes a just-written bound activation in the same handler', async () => {
+  const dir = mkdtempSync('/tmp/qml-sync-loader-');
+  await Bun.write(
+    dir + '/main.qml',
+    `import QtQuick
+Item {id:root;property bool built:false;property int answer:0
+ Component {id:body;Item {function result(){return 42}}}
+ Loader {id:loader;active:root.built;sourceComponent:body}
+ Text {id:status;text:root.answer}
+ Button {id:go;onClicked:{root.built=true;root.answer=loader.item.result()}}
+}`,
+  );
+  const b = await createBrowser({ spareRenderer: false });
+  try {
+    await b.context.navigate(Bun.pathToFileURL(dir + '/main.qml').href);
+    await b.context.evaluate('document.getElementById("go").click()');
+    expect(
+      await b.context.evaluate('document.getElementById("status").textContent'),
+    ).toBe('42');
+  } finally {
+    b.close();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30000);
+
+test('dynamic singleton references cannot be captured by application loop variables', async () => {
+  const dir = mkdtempSync('/tmp/qml-hygiene-');
+  await Bun.write(dir + '/qmldir', 'singleton Theme 1.0 Theme.qml\n');
+  await Bun.write(
+    dir + '/Theme.qml',
+    'pragma Singleton\nimport QtQuick\nQtObject {property int amount:7}',
+  );
+  await Bun.write(
+    dir + '/Child.qml',
+    `import QtQuick
+Text {text:{var total=0;for(var r=0;r<3;r++){var n0=r;var j0=r;total+=Theme.amount+n0-j0;}return total}}`,
+  );
+  await Bun.write(
+    dir + '/main.qml',
+    `import QtQuick
+Item {property int shared:Theme.amount;Loader {source:"Child.qml"}}`,
+  );
+  const b = await createBrowser({ spareRenderer: false });
+  try {
+    await b.context.navigate(Bun.pathToFileURL(dir + '/main.qml').href);
+    expect(await b.context.evaluate('document.body.innerText')).toBe('21');
+  } finally {
+    b.close();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30000);
+
+test('library scripts first imported by a delegate hoist their non-library dependencies into the library scope', async () => {
+  const dir = mkdtempSync('/tmp/qml-library-scope-');
+  await Bun.write(
+    dir + '/Utility.js',
+    'var count=0;function next(){return ++count;}',
+  );
+  await Bun.write(
+    dir + '/Library.js',
+    '.pragma library\n.import "Utility.js" as Utility\nfunction next(){return Utility.next();}',
+  );
+  await Bun.write(
+    dir + '/Cell.qml',
+    'import QtQuick\nimport "Library.js" as Library\nText {text:Library.next()}',
+  );
+  await Bun.write(
+    dir + '/main.qml',
+    'import QtQuick\nItem {Repeater {model:2;Cell {}}}',
+  );
+  const b = await createBrowser({ spareRenderer: false });
+  try {
+    await b.context.navigate(Bun.pathToFileURL(dir + '/main.qml').href);
+    expect(await b.context.evaluate('document.body.innerText')).toBe('12');
+  } finally {
+    b.close();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30000);
+
+test('alias writes detach an outer binding and Qt.binding reattaches it without replacing the alias', async () => {
+  const dir = mkdtempSync('/tmp/qml-alias-write-');
+  await Bun.write(
+    dir + '/Field.qml',
+    'import QtQuick\nItem {property alias text:label.text;Text {id:label}}',
+  );
+  await Bun.write(
+    dir + '/main.qml',
+    `import QtQuick
+Item {id:root;property string source:"one"
+ Field {id:field;text:root.source}
+ Button {id:override;onClicked:{field.text="manual";root.source="two"}}
+ Button {id:rebind;onClicked:{field.text=Qt.binding(function(){return root.source});root.source="three"}}
+}`,
+  );
+  const b = await createBrowser({ spareRenderer: false });
+  try {
+    await b.context.navigate(Bun.pathToFileURL(dir + '/main.qml').href);
+    const text = () =>
+      b.context.evaluate(
+        'document.querySelector("[data-qml-type=Text]").textContent',
+      );
+    expect(await text()).toBe('one');
+    await b.context.evaluate('document.getElementById("override").click()');
+    expect(await text()).toBe('manual');
+    await b.context.evaluate('document.getElementById("rebind").click()');
+    expect(await text()).toBe('three');
+  } finally {
+    b.close();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30000);
+
+test('named data aliases place title and buttons inside their real holders', async () => {
+  const dir = mkdtempSync('/tmp/qml-named-slots-');
+  await Bun.write(
+    dir + '/Card.qml',
+    `import QtQuick
+Item {property alias title:top.data;property alias buttons:bottom.data;default property alias content:middle.data
+ Item {id:top;y:10}Item {id:middle;y:40}Item {id:bottom;y:80}}`,
+  );
+  await Bun.write(
+    dir + '/main.qml',
+    `import QtQuick
+Card {title:Text {id:title;text:"Title"} buttons:Text {id:buttons;text:"Buttons"} Text {id:body;text:"Body"}}`,
+  );
+  const b = await createBrowser({ spareRenderer: false });
+  try {
+    await b.context.navigate(Bun.pathToFileURL(dir + '/main.qml').href);
+    expect(
+      await b.context.evaluate(
+        'document.getElementById("title").parentElement.style.top',
+      ),
+    ).toBe('10px');
+    expect(
+      await b.context.evaluate(
+        'document.getElementById("buttons").parentElement.style.top',
+      ),
+    ).toBe('80px');
+    expect(
+      await b.context.evaluate(
+        'document.getElementById("body").parentElement.style.top',
+      ),
+    ).toBe('40px');
+  } finally {
+    b.close();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30000);
+
+test('destroying a loaded component notifies nested objects once and still releases sibling factories', async () => {
+  const { mkdtempSync, rmSync } = await import('node:fs');
+  const dir = mkdtempSync('/tmp/qml-destruction-');
+  let browser;
+  try {
+    await Bun.write(
+      dir + '/main.qml',
+      `import QtQuick
+Item {id:root;width:300;height:200;property string gone:""
+ Loader {id:loader;active:true;sourceComponent:Item {
+  Component.onDestruction:root.gone+="root,"
+  Item {Component.onDestruction:root.gone+="child,"}
+  Repeater {model:2;delegate:Item {required property int index;Component.onDestruction:root.gone+="row"+index+","}}
+ }}
+ Text {id:status;text:root.gone}
+ Button {id:destroy;y:80;onClicked:{loader.active=false;loader.active=false}}
+}`,
+    );
+    const { createBrowser } = await import('../lib/headless-shell.js');
+    browser = await createBrowser({ spareRenderer: false });
+    await browser.context.navigate(Bun.pathToFileURL(dir + '/main.qml').href);
+    await browser.context.evaluate(
+      'document.getElementById("destroy").click()',
+    );
+    const gone = await browser.context.evaluate(
+      'document.getElementById("status").textContent',
+    );
+    expect(gone.split(',').filter(Boolean).sort()).toEqual([
+      'child',
+      'root',
+      'row0',
+      'row1',
+    ]);
+  } finally {
+    browser?.close();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30000);
+
+test('shared JS libraries can create and release components relative to the script URL', async () => {
+  const dir = mkdtempSync('/tmp/qml-library-component-');
+  let browser;
+  try {
+    await Bun.write(dir + '/helpers/Factory.js', `.pragma library
+function make(parent, label) {
+ const component=Qt.createComponent("Cell.qml");
+ if(component.status!==1)throw Error(component.errorString());
+ const object=component.createObject(parent,{text:label});
+ component.destroy();
+ return object;
+}`);
+    await Bun.write(dir + '/helpers/Cell.qml', 'import QtQuick\nText {width:100;height:20}');
+    await Bun.write(dir + '/main.qml', `import QtQuick
+import "helpers/Factory.js" as Factory
+Item {id:root;property var first:null;property var second:null
+ Component.onCompleted:{first=Factory.make(root,"first");second=Factory.make(root,"second");second.y=30}
+ Button {id:remove;y:80;onClicked:root.first.destroy()}
+}`);
+    browser=await createBrowser({spareRenderer:false});
+    await browser.context.navigate(Bun.pathToFileURL(dir+'/main.qml').href);
+    expect(await browser.context.evaluate('document.body.innerText')).toContain('first');
+    expect(await browser.context.evaluate('document.body.innerText')).toContain('second');
+    await browser.context.evaluate('document.getElementById("remove").click()');
+    expect(await browser.context.evaluate('document.body.innerText')).not.toContain('first');
+    expect(await browser.context.evaluate('document.body.innerText')).toContain('second');
+  } finally {browser?.close();rmSync(dir,{recursive:true,force:true});}
+},30000);
+
+test('children of an instantiated component resolve properties added at the use site; rejected MouseAreas pass clicks to underlying rows',async()=>{
+ const dir=mkdtempSync('/tmp/qml-click-');let browser;
+ try{
+  await Bun.write(dir+'/Cell.qml','import QtQuick\nRectangle {width:200;height:40;color:"red"}');
+  await Bun.write(dir+'/main.qml',`import QtQuick
+Rectangle {width:300;height:150
+ property bool block: false
+ Cell {id:cell;property int rowIndex:7
+  TapHandler {onTapped:status.text=String(rowIndex)}
+ }
+ MouseArea {anchors.fill:cell;z:1;onPressed:mouse=>{mouse.accepted=false}}
+ MouseArea {anchors.fill:cell;z:2;onPressed:mouse=>{mouse.accepted=block}}
+ Text {id:status;y:60;text:"none"}
+ Button {id:gate;y:90;onClicked:block=true}
+}`);
+  browser=await createBrowser({spareRenderer:false});await browser.context.resize(300,150);await browser.context.navigate(Bun.pathToFileURL(dir+'/main.qml').href);
+  await browser.context.click(20,20);await browser.context.evaluate('0');
+  expect(await browser.context.evaluate('document.getElementById("status").textContent')).toBe('7');
+  await browser.context.evaluate('document.getElementById("gate").click();document.getElementById("status").textContent="blocked"');await browser.context.evaluate('0');
+  await browser.context.click(20,20);
+  expect(await browser.context.evaluate('document.getElementById("status").textContent')).toBe('blocked');
+ }finally{browser?.close();rmSync(dir,{recursive:true,force:true});}
+},30000);
+
+test('dynamic objects belong to their explicit parent, not the Loader currently creating them',async()=>{
+ const dir=mkdtempSync('/tmp/qml-parent-owner-');let browser;
+ try{
+  await Bun.write(dir+'/Icon.qml','import QtQuick\nText {text:"surviving icon"}');
+  await Bun.write(dir+'/main.qml',`import QtQuick
+Item {id:root;width:300;height:150
+ Item {id:keeper}
+ Loader {id:maker;sourceComponent:Text {text:"temporary maker";Component.onCompleted:{var c=Qt.createComponent("Icon.qml");c.createObject(keeper);c.destroy()}}}
+ Button {id:remove;y:50;onClicked:maker.active=false}
+}`);
+  browser=await createBrowser({spareRenderer:false});await browser.context.navigate(Bun.pathToFileURL(dir+'/main.qml').href);
+  expect(await browser.context.evaluate('document.body.innerText')).toContain('surviving icon');
+  await browser.context.evaluate('document.getElementById("remove").click()');await browser.context.evaluate('0');
+  const text=await browser.context.evaluate('document.body.innerText');
+  expect(text).toContain('surviving icon');expect(text).not.toContain('temporary maker');
+ }finally{browser?.close();rmSync(dir,{recursive:true,force:true});}
+},30000);