buninu-browser 0.2.4 → 0.4.0

package/test/qml-layout-text.test.js

@@ -0,0 +1,205 @@
+import { test, expect } from 'bun:test';
+import { RendererHost } from '../lib/renderer/host.js';
+async function fixture(source, run) {
+  const host = new RendererHost({ timeout: 20000 });
+  try {
+    await host.start();
+    await host.call('loadDocument', {
+      url: 'data:text/x-qml,layout',
+      contentType: 'text/x-qml',
+      source,
+    });
+    await host.call('whenLoaded');
+    await run(host);
+  } finally {
+    host.close();
+  }
+}
+test('Flow wraps dialog buttons and baseline anchors align different font sizes', async () => {
+  await fixture(
+    `import QtQuick
+Item {width:400;height:300
+ Flow {id:flow;width:150;spacing:10
+  Rectangle {id:a;width:100;height:20}
+  Rectangle {id:b;width:80;height:30}
+  Rectangle {id:c;width:50;height:10}
+ }
+ Text {id:large;y:100;text:"Large";font.pixelSize:30}
+ Text {id:small;x:120;anchors.baseline:large.baseline;text:"Small";font.pixelSize:12}
+ Text {id:status;y:200;text:b.x+":"+b.y+":"+c.x+":"+c.y+":"+flow.height+":"+Math.round(small.y+small.baselineOffset-large.y-large.baselineOffset)}
+}`,
+    async (h) => {
+      expect(
+        await h.call(
+          'evaluate',
+          'document.getElementById("status").textContent',
+        ),
+      ).toBe('0:30:90:30:60:0');
+    },
+  );
+}, 30000);
+test('RowLayout shrinks and fills bounded children without losing alignment', async () => {
+  await fixture(
+    `import QtQuick
+import QtQuick.Layouts
+Item {width:400;height:200
+ RowLayout {width:200;height:40;spacing:10
+  Rectangle {id:a;implicitWidth:40;implicitHeight:20;Layout.alignment:Qt.AlignVCenter}
+  Rectangle {id:b;implicitWidth:50;implicitHeight:10;Layout.fillWidth:true;Layout.maximumWidth:60;Layout.alignment:Qt.AlignBottom}
+  Rectangle {id:c;implicitWidth:10;implicitHeight:10;Layout.fillWidth:true;Layout.fillHeight:true}
+ }
+ Text {id:status;y:100;text:a.width+":"+a.y+":"+b.width+":"+b.y+":"+c.width+":"+c.height}
+}`,
+    async (h) => {
+      expect(
+        await h.call(
+          'evaluate',
+          'document.getElementById("status").textContent',
+        ),
+      ).toBe('40:10:60:30:80:40');
+    },
+  );
+}, 30000);
+test('StyledText creates inert styled DOM, emits link activation and PlainText stays literal', async () => {
+  await fixture(
+    `import QtQuick
+Item {id:root;width:400;height:200;property string link:""
+ Text {id:rich;width:300;height:40;textFormat:Text.StyledText;text:"<b>Bold</b> <a href='https://example.com'>link</a><script>globalThis.bad=true</script>";onLinkActivated:function(link){root.link=link}}
+ Text {id:plain;y:50;text:"<b>literal</b>";textFormat:Text.PlainText}
+ Text {id:status;y:100;text:root.link}
+}`,
+    async (h) => {
+      expect(
+        await h.call(
+          'evaluate',
+          'document.getElementById("rich").querySelector("b").textContent',
+        ),
+      ).toBe('Bold');
+      expect(
+        await h.call(
+          'evaluate',
+          'document.getElementById("rich").querySelector("script")===null&&globalThis.bad===undefined',
+        ),
+      ).toBe(true);
+      expect(
+        await h.call(
+          'evaluate',
+          'document.getElementById("plain").textContent',
+        ),
+      ).toBe('<b>literal</b>');
+      await h.call('evaluate', 'document.querySelector("a").click()');
+      expect(
+        await h.call(
+          'evaluate',
+          'document.getElementById("status").textContent',
+        ),
+      ).toBe('https://example.com');
+    },
+  );
+}, 30000);
+
+test('ShapePath linear gradients draw through the existing page canvas while solid paths retain SVG', async () => {
+  await fixture(
+    `import QtQuick
+import QtQuick.Shapes
+Item {width:200;height:100
+ Shape {width:100;height:40
+  ShapePath {strokeWidth:0;fillGradient:LinearGradient {x1:0;y1:0;x2:100;y2:0
+   GradientStop {position:0;color:"red"} GradientStop {position:1;color:"blue"}}
+   PathSvg {path:"M0 0 H100 V40 H0 Z"}
+  }
+ }
+ Shape {x:110;width:40;height:40;ShapePath {fillColor:"green";strokeWidth:0;PathSvg {path:"M0 0H40V40H0Z"}}}
+}`,
+    async (h) => {
+      const pixels = JSON.parse(
+        await h.call(
+          'evaluate',
+          `(()=>{const c=document.querySelector('canvas[data-qml-gradient]').getContext('2d');return JSON.stringify([Array.from(c.getImageData(5,20,1,1).data),Array.from(c.getImageData(95,20,1,1).data)]);})()`,
+        ),
+      );
+      expect(pixels[0][0]).toBeGreaterThan(220);
+      expect(pixels[0][2]).toBeLessThan(35);
+      expect(pixels[1][2]).toBeGreaterThan(220);
+      expect(
+        await h.call(
+          'evaluate',
+          'document.querySelectorAll("svg path").length',
+        ),
+      ).toBe(2);
+    },
+  );
+}, 30000);
+
+test('Text reports laid-out lineCount and keeps wrapped or explicit multiline captions when eliding', async () => {
+  await fixture(
+    `import QtQuick
+Item {width:400;height:240
+ Text {id:empty;text:""}
+ Text {id:single;y:40;text:"one"}
+ Text {id:multi;y:80;text:"one\\ntwo"}
+ Text {id:clipped;y:140;text:"one\\ntwo\\nthree";maximumLineCount:2;elide:Text.ElideRight}
+ Text {id:wrapped;x:100;width:70;text:"one two three four five";wrapMode:Text.WordWrap;elide:Text.ElideRight}
+ Text {id:status;y:210;text:empty.implicitWidth+":"+empty.lineCount+":"+single.lineCount+":"+multi.lineCount+":"+clipped.lineCount+":"+clipped.truncated+":"+wrapped.truncated}
+}`,
+    async (h) => {
+      expect(
+        await h.call(
+          'evaluate',
+          'document.getElementById("status").textContent',
+        ),
+      ).toBe('0:1:1:2:2:true:false');
+      expect(
+        await h.call(
+          'evaluate',
+          'document.getElementById("clipped").style.whiteSpace',
+        ),
+      ).toBe('pre');
+      expect(
+        await h.call(
+          'evaluate',
+          'document.getElementById("wrapped").style.whiteSpace',
+        ),
+      ).toBe('pre-wrap');
+    },
+  );
+}, 30000);
+
+test('Text defaults to AutoText, recognizes multi-letter tags and preserves plain trailing newlines', async () => {
+  await fixture(
+    `import QtQuick
+Item {width:300;height:200
+ Text {id:auto;text:"<strong>Bold</strong><br/>next"}
+ Text {id:plain;y:60;text:"line\\n"}
+ Text {id:status;y:120;text:plain.lineCount}
+}`,
+    async (h) => {
+      expect(
+        await h.call(
+          'evaluate',
+          'document.getElementById("auto").querySelector("strong").textContent',
+        ),
+      ).toBe('Bold');
+      expect(
+        await h.call('evaluate', 'document.getElementById("auto").textContent'),
+      ).toBe('Boldnext');
+      expect(
+        await h.call(
+          'evaluate',
+          'document.getElementById("status").textContent',
+        ),
+      ).toBe('2');
+    },
+  );
+}, 30000);
+
+test('markup formatting newlines after blocks do not add phantom text lines',async()=>{
+ await fixture(`import QtQuick
+Item {width:400;height:200
+ Text {id:rich;width:300;text:"<p>one</p>\\n<p>two</p>\\n";textFormat:Text.RichText}
+ Text {id:plain;y:80;text:"one\\ntwo\\n";textFormat:Text.PlainText}
+ Text {id:status;y:150;text:rich.lineCount+":"+plain.lineCount}
+}`,async host=>{
+  expect(await host.call('evaluate','document.getElementById("status").textContent')).toBe('2:3');
+ });
+});

package/test/qml-media.test.js

@@ -0,0 +1,63 @@
+import {test,expect} from 'bun:test';
+import {mkdtempSync,rmSync} from 'node:fs';
+import {join} from 'node:path';
+import {createBrowser} from '../lib/headless-shell.js';
+import {applyQmlMediaGain} from '../lib/qml/media-renderer.js';
+test('QML MP4/MP3 reuse HTML decoding, metadata, pause and millisecond seek',async()=>{
+ const dir=mkdtempSync('/tmp/qml-media-');let browser;
+ try {
+  const video=Bun.pathToFileURL(join(import.meta.dir,'fixtures/long-video.mp4')).href;
+  const audio=Bun.pathToFileURL(join(import.meta.dir,'fixtures/tone.mp3')).href;
+  await Bun.write(join(dir,'main.qml'),`import QtQuick
+import QtMultimedia
+import Quickshell.Wayland
+Rectangle {width:320;height:240;color:"black"
+ AudioOutput {id:out;volume:0;muted:true}
+ VideoOutput {id:screen;anchors.fill:parent}
+ MediaPlayer {id:player;source:${JSON.stringify(video)};audioOutput:out;videoOutput:screen}
+ IdleInhibitor {enabled:true}
+ Text {id:status;text:player.mediaStatus+":"+player.duration+":"+player.position+":"+player.error}
+ Button {id:play;onClicked:player.play()}
+ Button {id:pause;onClicked:player.pause()}
+ Button {id:seek;onClicked:player.position=500}
+ Button {id:switchAudio;onClicked:player.source=${JSON.stringify(audio)}}
+}`);
+  browser=await createBrowser({spareRenderer:false});
+  await browser.context.addInitScript(`globalThis.mediaNodes=[];let rt;Object.defineProperty(globalThis,'__qmlRuntime',{get:()=>rt,set:r=>{rt=r;const d=r.describe;r.describe=(v,t,...a)=>{if(t.includes('MediaPlayer')||t.includes('VideoOutput'))mediaNodes.push({v,t});return d(v,t,...a)}}});`);
+  await browser.context.navigate(Bun.pathToFileURL(join(dir,'main.qml')).href);
+  const run=s=>browser.context.evaluate(s);
+
+  const status=()=>run("(()=>{const p=mediaNodes.find(n=>n.t.includes('MediaPlayer')).v;return {duration:p.duration,position:p.position,error:p.error,message:p.errorString,state:p.playbackState,ready:p.mediaStatus,hasVideo:p.hasVideo,hasAudio:p.hasAudio}})()");
+  async function until(fn){for(let i=0;i<200;i++){const s=await status();if(s.error)throw Error(JSON.stringify(s));if(fn(s))return s;await Bun.sleep(25)}throw Error(JSON.stringify(await status()));}
+  expect((await until(s=>s.duration>1000)).hasVideo).toBe(true);
+  await run("document.getElementById('play').click()");
+  await until(s=>s.state===1&&s.position>100);
+  await run("document.getElementById('pause').click()");
+  expect((await status()).state).toBe(2);
+  await run("document.getElementById('seek').click()");
+  await until(s=>Math.abs(s.position-500)<50);
+  const png=await browser.context.screenshot({format:'png'});
+  await Bun.write('/tmp/qml-media-video.png',Buffer.from(png,'base64'));
+  expect(await run("mediaNodes.find(n=>n.t.includes('VideoOutput')).v.contentRect.width")).toBeGreaterThan(0);
+  await run("document.getElementById('switchAudio').click()");
+  const s=await until(s=>s.hasAudio&&!s.hasVideo&&s.duration>500);
+  expect(s.error).toBe(0);
+  await run("document.getElementById('seek').click()");
+  await until(s=>Math.abs(s.position-500)<50);
+ }finally{browser?.close();rmSync(dir,{recursive:true,force:true})}
+},30000);
+
+test('QML PCM gain scales the output chunk without requiring a new audio backend',()=>{
+ const pcm=Buffer.alloc(6);pcm.writeInt16LE(-2000,0);pcm.writeInt16LE(1000,2);pcm.writeInt16LE(32767,4);
+ applyQmlMediaGain(pcm,0.5);
+ expect([pcm.readInt16LE(0),pcm.readInt16LE(2),pcm.readInt16LE(4)]).toEqual([-1000,500,16384]);
+ applyQmlMediaGain(pcm,0);expect([...pcm]).toEqual([0,0,0,0,0,0]);
+});
+
+
+test('QML MP3 playback sends real PCM, mutes and releases the shared audio output',async()=>{
+ const child=Bun.spawn([process.execPath,new URL('./fixtures/qml-media-audio.js',import.meta.url).pathname],{stdout:'pipe',stderr:'pipe'});
+ const [out,error,code]=await Promise.all([new Response(child.stdout).text(),new Response(child.stderr).text(),child.exited]);
+ expect({code,error}).toEqual({code:0,error:''});
+ expect(out).toContain('QML real MP3 PCM playback passed');
+},30000);

package/test/qml-persisted-delegates.test.js

@@ -0,0 +1,45 @@
+import { test, expect } from 'bun:test';
+import { RendererHost } from '../lib/renderer/host.js';
+test('created delegates expose persisted state before completion and are adopted without rebuilding', async () => {
+  const host = new RendererHost({ timeout: 20000 });
+  try {
+    await host.start();
+    await host.call('loadDocument', {
+      url: 'data:text/x-qml,persisted',
+      contentType: 'text/x-qml',
+      source: `
+import QtQuick
+import QtQml.Models
+Item { id:root; width:300;height:200
+ property int built:0; property int gone:0; property var held:null; property string observed:""
+ ListView {id:view;width:200;height:100;reuseItems:false
+ model:DelegateModel {id:rows;model:100;filterOnGroup:"shown";groups:DelegateModelGroup {id:shown;name:"shown";includeByDefault:false}}
+ delegate:Text {id:cell;required property int index; text:"row "+index;width:200;height:20
+ Component.onCompleted:{root.built++;root.observed=String(cell.DelegateModel.inPersistedItems)}
+ Component.onDestruction:root.gone++ }
+ }
+ Button {id:create;onClicked:root.held=rows.items.create(0)}
+ Button {id:adopt;onClicked:{rows.items.addGroups(0,1,"shown");view.forceLayout();root.held.DelegateModel.inPersistedItems=false}}
+ Button {id:shrink;onClicked:{shown.removeGroups(0,1,"shown");view.forceLayout()}}
+ Text {id:status;y:140;text:[root.built,root.gone,rows.persistedItems.count,root.observed,view.count].join(":")}
+}`,
+    });
+    await host.call('whenLoaded');
+    const click = async (id) => {
+      await host.call('evaluate', `document.getElementById('${id}').click()`);
+      await host.call('evaluate', '0');
+    };
+    const status = () =>
+      host.call('evaluate', 'document.getElementById("status").textContent');
+    await click('create');
+    expect(await status()).toBe('1:0:1:true:0');
+    await click('create');
+    expect(await status()).toBe('1:0:1:true:0');
+    await click('adopt');
+    expect(await status()).toBe('1:0:0:true:1');
+    await click('shrink');
+    expect(await status()).toBe('1:1:0:true:0');
+  } finally {
+    host.close();
+  }
+}, 30000);

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

@@ -0,0 +1,65 @@
+// Opt-in comparison against the genuine binary; no Quickshell implementation source.
+import { test, expect } from 'bun:test';
+import { withQuickshellFixture } from './helpers/quickshell-fixture.js';
+test.skipIf(!process.env.BUNINU_QS_ROOT)(
+  'real Quickshell DialogButton activates by click, Enter and Space; disabled stays inert',
+  async () => {
+    await withQuickshellFixture(
+      'button.qml',
+      async ({ land, title, until, click, key }) => {
+        await until(() => title() === 'Flea buttons | 0');
+        await Bun.sleep(300);
+        await click(50, 36);
+        await until(() => title() === 'Flea buttons | 1');
+        await key('Enter', 'Enter');
+        await until(() => title() === 'Flea buttons | 2');
+        await key(' ', 'Space');
+        await until(() => title() === 'Flea buttons | 3');
+        await click(50, 86);
+        expect(title()).toBe('Flea buttons | 3');
+        await Bun.write(
+          '/tmp/quickshell-flea-buttons.png',
+          Buffer.from(
+            await land.context.screenshot({ format: 'png' }),
+            'base64',
+          ),
+        );
+      },
+    );
+  },
+  30000,
+);
+
+test.skipIf(!process.env.BUNINU_QS_ROOT)(
+  'real Quickshell DialogField forwards edits, Enter, Tab and Shift-Tab',
+  async () => {
+    await withQuickshellFixture('field.qml', async ({ title, until, key }) => {
+      await until(() => title() === 'Flea field | first | 0:0:0');
+      await key('a', 'KeyA', 2);
+      await key('h', 'KeyH');
+      await until(() => title() === 'Flea field | h | 1:0:0');
+      await key('Enter', 'Enter');
+      await key('Tab', 'Tab');
+      await until(() => title() === 'Flea field | h | 1:1:1');
+      await key('Tab', 'Tab', 8);
+      await until(() => title() === 'Flea field | h | 1:1:0');
+    });
+  },
+  30000,
+);
+
+test.skipIf(!process.env.BUNINU_QS_ROOT)(
+  'real Quickshell reports empty and clipped multiline Text counts',
+  async () => {
+    await withQuickshellFixture(
+      'text-metrics.qml',
+      async ({ title, until }) => {
+        await until(() => title()?.startsWith('Text metrics | 0:'));
+        const fields = title().split(' | ')[1].split(':');
+        expect(Number(fields[1])).toBeGreaterThan(0);
+        expect(fields.slice(2).join(':')).toBe('1:1:2:2:true');
+      },
+    );
+  },
+  30000,
+);

package/test/qml-quickshell-settings.test.js

@@ -0,0 +1,62 @@
+// Opt-in binary comparison. No Quickshell source or dependency installation.
+// BUNINU_QS_ROOT=/path/to/extracted/sid/root bun test test/qml-quickshell-settings.test.js
+import {test,expect} from 'bun:test';
+import {mkdtempSync,cpSync,readFileSync,writeFileSync,readdirSync,existsSync,mkdirSync,rmSync} from 'node:fs';
+import {join} from 'node:path';
+const qsRoot=process.env.BUNINU_QS_ROOT;
+test.skipIf(!qsRoot)('real Quickshell SettingsRuler matches size, disabled tap and reset behavior',async()=>{
+ const {start}=await import('../../buninu-land/compositor.js');
+ const dir=mkdtempSync('/tmp/qs-settings-test-'),fixture=join(dir,'fixture'),home=join(dir,'home');
+ const oldRuntime=process.env.XDG_RUNTIME_DIR;
+ let land,child;
+ try{
+  cpSync(Bun.fileURLToPath(new URL('./fixtures/qml/flea-theme/',import.meta.url)),fixture,{recursive:true});
+  // Qt validates all declared types, including ones not used by this subset.
+  // Trim only the temporary module indexes; all actual QML/JS stays unchanged.
+  const trim=path=>{
+   for(const e of readdirSync(path,{withFileTypes:true})){
+    const p=join(path,e.name);
+    if(e.isDirectory())trim(p);
+    else if(e.name==='qmldir')writeFileSync(p,readFileSync(p,'utf8').split('\n').filter(line=>{
+     const last=line.trim().split(/\s+/).at(-1);
+     return !last.endsWith('.qml')||existsSync(join(path,last));
+    }).join('\n'));
+   }
+  };trim(fixture);
+  const theme=join(home,'.local/state/omarchy/current/theme');mkdirSync(theme,{recursive:true});
+  writeFileSync(join(theme,'shell.toml'),'[font]\nbase-size = 14\n');
+  writeFileSync(join(theme,'colors.toml'),'background="#101315"\nforeground="#eeeeee"\naccent="#70e1e8"\n');
+  writeFileSync(join(theme,'../theme.name'),'demo');
+  process.env.XDG_RUNTIME_DIR=dir;
+  land=await start(['--remote-debugging-port=0','--window-size=1000,700']);
+  const lib=join(qsRoot,'usr/lib/aarch64-linux-gnu');
+  child=Bun.spawn([join(lib,'ld-linux-aarch64.so.1'),'--library-path',lib+':'+join(qsRoot,'usr/lib'),join(qsRoot,'usr/bin/qs'),'-p',join(fixture,'settings.qml')],{
+   env:{...process.env,HOME:home,HYPRLAND_INSTANCE_SIGNATURE:'',WAYLAND_DISPLAY:'wayland-buninu',QT_PLUGIN_PATH:join(lib,'qt6/plugins'),QML_IMPORT_PATH:join(fixture,'imports')+':'+join(lib,'qt6/qml'),QT_QPA_PLATFORM:'wayland',QT_WAYLAND_DISABLE_WINDOWDECORATION:'1',QT_QUICK_BACKEND:'software'},
+   stdout:'ignore',stderr:'pipe'
+  });
+  const logs=new Response(child.stderr).text();
+  const title=()=>land.compositor.wm.visible[0]?.surface.xdg.toplevel.title;
+  const until=async fn=>{for(let i=0;i<300;i++){if(await fn())return;if(child.exitCode!==null)throw Error(await logs);await Bun.sleep(50);}throw Error('Quickshell state timed out: '+title());};
+  await until(()=>title()==='Flea — text size settings | 14 | 0');
+  const click=async(x,y)=>{
+   const surface=land.compositor.wm.renderSurfaces().find(s=>s.pixels);
+   const o=land.compositor.wm.origin(surface);
+   for(const type of ['mouseMoved','mousePressed','mouseReleased'])land.context.dispatchMouseEvent({type,x:o.x+x,y:o.y+y,button:'left'});
+   await Bun.sleep(120);
+  };
+  await Bun.sleep(500);
+  await Bun.write('/tmp/qs-settings-before.png',Buffer.from(await land.context.screenshot({format:'png'}),'base64'));
+  await click(712,100);await until(()=>title()==='Flea — text size settings | 20 | 1');
+  await click(100,300);await click(76,100);
+  expect(title()).toBe('Flea — text size settings | 20 | 1');
+  await click(100,300);await click(76,100);await until(()=>title()==='Flea — text size settings | 9 | 2');
+  await click(380,300);await until(()=>title()==='Flea — text size settings | 14 | 2');
+  await Bun.write('/tmp/quickshell-flea-settings.png',Buffer.from(await land.context.screenshot({format:'png'}),'base64'));
+  expect(title()).toBe('Flea — text size settings | 14 | 2');
+ }finally{
+  if(child){child.kill();await child.exited;}
+  land?.close();
+  if(oldRuntime===undefined)delete process.env.XDG_RUNTIME_DIR;else process.env.XDG_RUNTIME_DIR=oldRuntime;
+  rmSync(dir,{recursive:true,force:true});
+ }
+},30000);

package/test/qml-repeater.test.js

@@ -0,0 +1,72 @@
+import {test, expect} from 'bun:test';
+import {RendererHost} from '../lib/renderer/host.js';
+
+test('Repeater scopes delegates, updates models, preserves sibling order and disposes old handlers', async () => {
+  const host=new RendererHost({timeout:20000});
+  try {
+    await host.start();
+    await host.call('loadDocument',{url:'https://qml.test/repeater.qml',contentType:'text/x-qml',source:`
+import QtQuick
+Rectangle {
+ id: root; width: 600; height: 300
+ property var items: [10,20,30]
+ property int clicks: 0
+ property int factor: 2
+ Text {id: before; text: "before"}
+ Repeater {
+  id: list; model: root.items
+  delegate: Rectangle {
+   id: cell
+   required property var modelData
+   required property int index
+   x: index*100; y: 50; width: 90; height: 40
+   Text {text: cell.index+":"+cell.modelData*root.factor; anchors.horizontalCenter: parent.horizontalCenter}
+   TapHandler {gesturePolicy: TapHandler.ReleaseWithinBounds; onTapped: root.clicks++}
+  }
+ }
+ Text {id: after; text: "after"}
+ Text {id: status; text: root.clicks+":"+list.count}
+ Button {id: replace; onClicked: {root.items=[7,8];root.factor=3}}
+ Button {id: clear; onClicked: root.items=[]}
+}`});
+    await host.call('whenLoaded');
+    const texts=()=>host.call('evaluate','JSON.stringify([...document.querySelectorAll("[data-qml-type=Text]")].map(e=>e.textContent))');
+    expect(JSON.parse(await texts())).toEqual(['before','0:20','1:40','2:60','after','0:3']);
+    await host.call('evaluate',`globalThis.oldCell=document.querySelector('[data-qml-type=Repeater]').previousElementSibling;oldCell.click()`);
+    expect(await host.call('evaluate','document.getElementById("status").textContent')).toBe('1:3');
+    await host.call('evaluate','document.getElementById("replace").click()');
+    expect(JSON.parse(await texts())).toEqual(['before','0:21','1:24','after','1:2']);
+    await host.call('evaluate','oldCell.click()');
+    expect(await host.call('evaluate','document.getElementById("status").textContent')).toBe('1:2');
+    await host.call('evaluate','document.getElementById("clear").click()');
+    expect(JSON.parse(await texts())).toEqual(['before','after','1:0']);
+  } finally {host.close();}
+},30000);
+
+test('nested numeric Repeaters keep instance IDs local and allow later outer IDs', async () => {
+ const host=new RendererHost({timeout:20000});
+ try {
+  await host.start();
+  await host.call('loadDocument',{url:'https://qml.test/nested.qml',contentType:'text/x-qml',source:`
+import QtQuick
+Item {
+ Repeater {
+  model: 2
+  delegate: Item {
+   id: row
+   required property int index
+   Repeater {
+    model: 2
+    delegate: Text {
+     required property int index
+     text: suffix.text+":"+row.index+":"+index
+    }
+   }
+  }
+ }
+ Text {id: suffix; text: "item"}
+}`});
+  await host.call('whenLoaded');
+  expect(JSON.parse(await host.call('evaluate','JSON.stringify([...document.querySelectorAll("[data-qml-type=Text]")].map(e=>e.textContent))'))).toEqual(['item:0:0','item:0:1','item:1:0','item:1:1','item']);
+ }finally{host.close();}
+},30000);

package/test/qml-style-updates.test.js

@@ -0,0 +1,124 @@
+import { test, expect } from 'bun:test';
+import { RendererHost } from '../lib/renderer/host.js';
+
+test('QML style updates preserve final overrides and clear conditional styles', async () => {
+  const host = new RendererHost({ timeout: 20000 });
+  try {
+    await host.start();
+    await host.call('loadDocument', {
+      url: 'data:text/x-qml,styles',
+      contentType: 'text/x-qml',
+      source: `import QtQuick
+Rectangle {
+ id: root; width: 320; height: 160; property bool changed: false
+ onClicked: { changed = !changed; }
+ Rectangle { id: box; width: root.changed ? 120 : 80; height: 30; x: 10
+  opacity: root.changed ? 0.5 : 1; color: root.changed ? "blue" : "red"
+  gradient: root.changed ? null : ramp
+  Gradient { id: ramp; GradientStop { position: 0; color: "red" } GradientStop { position: 1; color: "blue" } }
+ }
+ Text { id: label; y:40; width:80; height:30; text:"long long text"
+  elide: root.changed ? Text.ElideNone : Text.ElideRight
+  verticalAlignment: Text.AlignVCenter
+ }
+}`,
+    });
+    await host.call('whenLoaded');
+    const styles = () =>
+      host.call(
+        'evaluate',
+        `JSON.stringify({
+      width:box.style.width,opacity:box.style.opacity,
+      gradient:box.style.backgroundImage,overflow:label.style.overflow,
+      whiteSpace:label.style.whiteSpace,lineHeight:label.style.lineHeight,
+      elide:label.style.textOverflow
+    })`
+          .replaceAll('box.style', 'document.getElementById("box").style')
+          .replaceAll('label.style', 'document.getElementById("label").style'),
+      );
+    const before = JSON.parse(await styles());
+    expect(before.width).toBe('80px');
+    expect(before.gradient).toContain('linear-gradient');
+    expect(before.elide).toBe('ellipsis');
+    expect(before.whiteSpace).toBe('nowrap');
+    expect(before.lineHeight).toBe('30px');
+    await host.call(
+      'evaluate',
+      'document.getElementById("box").style.zIndex="99";document.getElementById("root").click()',
+    );
+    expect(
+      await host.call(
+        'evaluate',
+        'document.getElementById("box").style.zIndex',
+      ),
+    ).toBe('0');
+    const after = JSON.parse(await styles());
+    expect(after.width).toBe('120px');
+    expect(after.opacity).toBe('0.5');
+    expect(after.gradient).toBe('none');
+    expect(after.elide).toBe('clip');
+    expect(after.whiteSpace).toBe('pre');
+    expect(after.overflow).toBe('visible');
+    expect(after.lineHeight).toBe('30px');
+    await host.call('evaluate', 'document.getElementById("root").click()');
+    expect(JSON.parse(await styles())).toEqual(before);
+  } finally {
+    host.close();
+  }
+}, 30000);
+
+// Qt retains the long Wrap enum spelling used by styled code viewers.
+test('StyledText can toggle WrapAtWordBoundaryOrAnywhere and grow its line count', async () => {
+  const host = new RendererHost({ timeout: 20000 });
+  try {
+    await host.start();
+    await host.call('loadDocument', {
+      url: 'data:text/x-qml,wrap-alias', contentType: 'text/x-qml',
+      source: `import QtQuick
+Rectangle {
+ id: root; width: 320; height: 200; property bool wrapped: false
+ onClicked: wrapped = !wrapped
+ Text { id: code; width: 90; textFormat: Text.StyledText
+  text: "<font color='red'>const</font> averylongidentifierwithoutspaces = 123456789;"
+  wrapMode: root.wrapped ? Text.WrapAtWordBoundaryOrAnywhere : Text.NoWrap
+ }
+ Text { id: count; y: 180; text: code.lineCount }
+}`,
+    });
+    await host.call('whenLoaded');
+    const read = () => host.call('evaluate', `({
+      lines: Number(document.getElementById('count').textContent),
+      whiteSpace: document.getElementById('code').style.whiteSpace,
+      overflowWrap: document.getElementById('code').style.overflowWrap
+    })`);
+    expect((await read()).lines).toBe(1);
+    await host.call('evaluate', "document.getElementById('root').click()");
+    const wrapped = await read();
+    expect(wrapped.lines).toBeGreaterThan(1);
+    expect(wrapped.whiteSpace).toBe('pre-wrap');
+    expect(wrapped.overflowWrap).toBe('anywhere');
+    await host.call('evaluate', "document.getElementById('root').click()");
+    expect((await read()).lines).toBe(1);
+  } finally { host.close(); }
+}, 30000);
+
+test('Qt.binding attaches to a default property and a plain write detaches it', async () => {
+ const host = new RendererHost({timeout:20000});
+ try {
+  await host.start();
+  await host.call('loadDocument',{url:'data:text/x-qml,default-binding',contentType:'text/x-qml',source:`import QtQuick
+Item {id:root;width:100;height:100;property bool shown:true
+ Rectangle {id:box;width:40;height:40}
+ Component.onCompleted:box.visible=Qt.binding(function(){return root.shown})
+ Button {id:toggle;onClicked:root.shown=!root.shown}
+ Button {id:detach;onClicked:box.visible=true}
+}`});
+  await host.call('whenLoaded');
+  const display=()=>host.call('evaluate','document.getElementById("box").style.display');
+  const click=id=>host.call('evaluate',`document.getElementById('${id}').click()`);
+  expect(await display()).toBe('block');
+  await click('toggle');expect(await display()).toBe('none');
+  await click('toggle');expect(await display()).toBe('block');
+  await click('detach');await click('toggle');expect(await display()).toBe('block');
+ }finally{host.close();}
+},30000);