buninu-browser 0.3.0 → 0.4.0

package/test/qml-host.test.js

@@ -0,0 +1,238 @@
+import { test, expect } from 'bun:test';
+import { mkdtempSync, mkdirSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { createBrowser } from '../lib/headless-shell.js';
+import { createQmlHost } from '../lib/qml/host.js';
+const root = new URL('./fixtures/qml/flea-theme/', import.meta.url);
+const delay = () => Bun.sleep(60);
+async function until(fn) {
+  for (let i = 0; i < 40; i++) {
+    if (await fn()) return;
+    await delay();
+  }
+  throw Error('condition did not settle');
+}
+test('local QML has a fresh host process; same-directory HTML and HTTP QML stay isolated', async () => {
+  const dir = mkdtempSync(join(tmpdir(), 'qml-host-'));
+  await Bun.write(join(dir, 'main.qml'), 'import QtQuick\nText {text: "host"}');
+  await Bun.write(join(dir, 'plain.html'), '<title>plain</title>');
+  const b = await createBrowser({ spareRenderer: false });
+  try {
+    await b.context.navigate(Bun.pathToFileURL(join(dir, 'main.qml')).href);
+    const pid = await b.context.evaluate('process.pid');
+    expect(typeof pid).toBe('number');
+    expect(await b.context.evaluate('typeof __qmlHost.read')).toBe('function');
+    await b.context.reload();
+    expect(await b.context.evaluate('process.pid')).not.toBe(pid);
+    await b.context.navigate(Bun.pathToFileURL(join(dir, 'plain.html')).href);
+    expect(await b.context.evaluate('typeof Bun')).toBe('undefined');
+    expect(await b.context.evaluate('typeof __qmlHost')).toBe('undefined');
+    expect(await b.context.evaluate('document.title')).toBe('plain');
+  } finally {
+    b.close();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30000);
+test('real upstream Theme resolves palette, Commons typography and watches theme changes', async () => {
+  const dir = mkdtempSync(join(tmpdir(), 'qml-theme-')),
+    oldHome = process.env.HOME,
+    oldRoots = process.env.QML_IMPORT_PATH;
+  const current = join(dir, '.local/state/omarchy/current');
+  mkdirSync(join(current, 'theme'), { recursive: true });
+  await Bun.write(
+    join(current, 'theme/colors.toml'),
+    'background = "#101315"\nforeground = "#eeeeee"\naccent = "#70e1e8"\nred = "#ff3333"\n',
+  );
+  await Bun.write(
+    join(current, 'theme/shell.toml'),
+    '[font]\nbase-size = 14\n',
+  );
+  await Bun.write(join(current, 'theme.name'), 'first');
+  process.env.HOME = dir;
+  process.env.QML_IMPORT_PATH = Bun.fileURLToPath(new URL('imports/', root));
+  const b = await createBrowser({ spareRenderer: false });
+  try {
+    await b.context.navigate(new URL('demo.qml', root).href);
+    const text = () => b.context.evaluate('document.body.innerText');
+    await until(async () =>
+      String(await text()).includes('Palette ready: true'),
+    );
+    expect(await text()).toContain('baseSize=14');
+    expect(await text()).not.toContain('NaN');
+    expect(await text()).not.toContain('undefined');
+    const background = () =>
+      b.context.evaluate(
+        'document.querySelector("[data-qml-type=FloatingWindow]").style.backgroundColor',
+      );
+    const before = await background();
+    await b.context.evaluate('document.querySelector("button").click()');
+    expect(await background()).not.toBe(before);
+    await b.context.evaluate('document.querySelector("button").click()');
+    expect(await background()).toBe(before);
+    await Bun.write(
+      join(current, 'theme/shell.toml'),
+      '[font]\nbase-size = 18\n',
+    );
+    await Bun.write(join(current, 'theme.name'), 'second');
+    await until(async () => String(await text()).includes('baseSize=18'));
+    await Bun.write(
+      '/tmp/browser-real-flea-theme.png',
+      Buffer.from(await b.context.screenshot({ format: 'png' }), 'base64'),
+    );
+  } finally {
+    b.close();
+    if (oldHome === undefined) delete process.env.HOME;
+    else process.env.HOME = oldHome;
+    if (oldRoots === undefined) delete process.env.QML_IMPORT_PATH;
+    else process.env.QML_IMPORT_PATH = oldRoots;
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30000);
+test('host disposal stops a running process and invalidates file access', async () => {
+  const host = createQmlHost('file:///tmp/test.qml');
+  let replied = false;
+  host.run([process.execPath, '-e', 'setTimeout(()=>{},10000)'], () => {
+    replied = true;
+  });
+  host.dispose();
+  expect(() => host.read('/tmp/test.qml')).toThrow('closed');
+  await delay();
+  expect(replied).toBe(false);
+});
+test('navigating away from a QML Process terminates its child, not just its callbacks', async () => {
+  const dir = mkdtempSync(join(tmpdir(), 'qml-process-')),
+    marker = join(dir, 'pid');
+  const command = [
+    process.execPath,
+    '-e',
+    `await Bun.write(${JSON.stringify(marker)},String(process.pid));setInterval(()=>{},1000)`,
+  ];
+  await Bun.write(
+    join(dir, 'process.qml'),
+    `import QtQuick\nimport Quickshell.Io\nItem {Process { running: true; command: ${JSON.stringify(command)} }} `,
+  );
+  await Bun.write(join(dir, 'plain.html'), '<p>plain</p>');
+  const b = await createBrowser({ spareRenderer: false });
+  let pid;
+  try {
+    await b.context.navigate(Bun.pathToFileURL(join(dir, 'process.qml')).href);
+    await until(() => Bun.file(marker).exists());
+    pid = Number(await Bun.file(marker).text());
+    process.kill(pid, 0);
+    await b.context.navigate(Bun.pathToFileURL(join(dir, 'plain.html')).href);
+    await until(() => {
+      try {
+        process.kill(pid, 0);
+        return false;
+      } catch {
+        return true;
+      }
+    });
+    expect(await b.context.evaluate('typeof __qmlHost')).toBe('undefined');
+  } finally {
+    b.close();
+    if (pid)
+      try {
+        process.kill(pid);
+      } catch {}
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30000);
+test('QML Process stdout and exit signal reach reactive DOM', async () => {
+  const dir = mkdtempSync(join(tmpdir(), 'qml-stdout-'));
+  const command = [process.execPath, '-e', 'process.stdout.write("42")'];
+  await Bun.write(
+    join(dir, 'main.qml'),
+    `import QtQuick\nimport Quickshell.Io\nText {id: root; property int code: -1; text: collector.text + ":" + code; Process {running: true; command: ${JSON.stringify(command)}; stdout: StdioCollector {id: collector; waitForEnd: true}; onExited: function(exitCode,exitStatus) {root.code=exitCode} }}`,
+  );
+  const b = await createBrowser({ spareRenderer: false });
+  try {
+    await b.context.navigate(Bun.pathToFileURL(join(dir, 'main.qml')).href);
+    await until(
+      async () =>
+        (await b.context.evaluate('document.body.innerText')) === '42:0',
+    );
+    expect(await b.context.evaluate('document.body.innerText')).toBe('42:0');
+  } finally {
+    b.close();
+    rmSync(dir, { recursive: true, force: true });
+  }
+}, 30000);
+
+test('upstream SettingsRuler changes shared Theme, disables taps and follows the system again', async () => {
+  const dir=mkdtempSync(join(tmpdir(),'qml-settings-')),oldHome=process.env.HOME,oldRoots=process.env.QML_IMPORT_PATH;
+  const theme=join(dir,'.local/state/omarchy/current/theme');
+  mkdirSync(theme,{recursive:true});
+  await Bun.write(join(theme,'shell.toml'),'[font]\nbase-size = 14\n');
+  process.env.HOME=dir;
+  process.env.QML_IMPORT_PATH=Bun.fileURLToPath(new URL('imports/',root));
+  const b=await createBrowser({spareRenderer:false});
+  try {
+    await b.context.navigate(new URL('settings.qml',root).href);
+    const status=()=>b.context.evaluate('document.getElementById("status").textContent');
+    await until(async()=>await status()==='Size: 14 / clicks: 0');
+    const font=()=>b.context.evaluate('document.getElementById("sample").style.fontSize');
+    expect(await font()).toBe('14px');
+    const tap=async size=>{
+      const point=JSON.parse(await b.context.evaluate(`JSON.stringify((()=>{const e=[...document.querySelectorAll("[data-qml-type=Text]")].find(e=>e.textContent===${JSON.stringify(String(size))}).parentElement;const r=e.getBoundingClientRect();return [r.x+r.width/2,r.y+r.height/2]})())`));
+      await b.context.click(...point);
+    };
+    await tap(20);
+    expect(await status()).toBe('Size: 20 / clicks: 1');
+    expect(await font()).toBe('20px');
+    await b.context.evaluate('document.getElementById("toggle").click()');
+    await tap(9);
+    expect(await status()).toBe('Size: 20 / clicks: 1');
+    await b.context.evaluate('document.getElementById("toggle").click()');
+    await tap(9);
+    expect(await status()).toBe('Size: 9 / clicks: 2');
+    expect(await font()).toBe('9px');
+    await b.context.evaluate('document.getElementById("reset").click()');
+    expect(await status()).toBe('Size: 14 / clicks: 2');
+    expect(await font()).toBe('14px');
+    await Bun.write('/tmp/browser-flea-settings.png',Buffer.from(await b.context.screenshot({format:'png'}),'base64'));
+  } finally {
+    b.close();
+    if(oldHome===undefined)delete process.env.HOME;else process.env.HOME=oldHome;
+    if(oldRoots===undefined)delete process.env.QML_IMPORT_PATH;else process.env.QML_IMPORT_PATH=oldRoots;
+    rmSync(dir,{recursive:true,force:true});
+  }
+},30000);
+
+test('StdioCollector exposes original bytes separately from decoded text',async()=>{
+ const dir=mkdtempSync(join(tmpdir(),'qml-stdio-bytes-'));let browser;
+ try{
+  const command=[process.execPath,'-e','process.stdout.write(Buffer.from([0,255,228,184,173]))'];
+  await Bun.write(join(dir,'main.qml'),`import QtQuick
+import Quickshell.Io
+Text {id:root;text:"waiting"
+ Process {running:true;command:${JSON.stringify(command)}
+  stdout:StdioCollector {waitForEnd:true;onStreamFinished:root.text=Array.from(new Uint8Array(this.data)).join(",")+"|"+this.text.length}
+ }
+}`);
+  browser=await createBrowser({spareRenderer:false});await browser.context.navigate(Bun.pathToFileURL(join(dir,'main.qml')).href);
+  await until(async()=>(await browser.context.evaluate('document.body.innerText'))!=='waiting');
+  expect(await browser.context.evaluate('document.body.innerText')).toBe('0,255,228,184,173|3');
+ }finally{browser?.close();rmSync(dir,{recursive:true,force:true});}
+},30000);
+
+test('Markdown soft breaks collapse while hard breaks and code lines survive with matching line boxes', async () => {
+  const markdown = '中文第一行\n第二行\n\nthird  \nfourth\n\n```\ncode one\ncode two\n```';
+  const dir = mkdtempSync(join(tmpdir(), "qml-markdown-"));
+  const b = await createBrowser({spareRenderer:false});
+  try {
+  await Bun.write(join(dir, "main.qml"), `import QtQuick
+Item {width:500;height:400
+ Text {id:md;width:450;text:${JSON.stringify(markdown)};textFormat:Text.MarkdownText;font.pixelSize:16}
+ Text {id:status;y:350;text:md.contentHeight+":"+md.lineCount}
+}`);
+    await b.context.navigate(Bun.pathToFileURL(join(dir, "main.qml")).href);
+    const result = JSON.parse(await b.context.evaluate( `JSON.stringify({text:document.getElementById('md').textContent,code:document.getElementById('md').querySelector('pre').textContent,br:document.getElementById('md').querySelectorAll('br').length,line:parseFloat(document.getElementById('md').style.lineHeight),metrics:document.getElementById('status').textContent})`));
+    expect(result.text).toContain('中文第一行 第二行');
+    expect(result.code).toBe('code one\ncode two\n');
+    expect(result.br).toBe(1);
+    const [height, count] = result.metrics.split(':').map(Number);
+    expect(result.line).toBeCloseTo(height / count, 5);
+  } finally { b.close(); rmSync(dir, {recursive:true,force:true}); }
+}, 30000);

package/test/qml-imports.test.js

@@ -0,0 +1,102 @@
+import {test,expect} from 'bun:test';
+import {createBrowser} from '../lib/headless-shell.js';
+import {loadQmlGraph,parseQmldir} from '../lib/qml/loader.js';
+const fixture=new URL('./fixtures/qml/imports/main.qml',import.meta.url);
+test('file imports: instances, scoped IDs, singleton, JS imports and qmldir versions',async()=>{
+ const browser=await createBrowser({spareRenderer:false});
+ try{
+  await browser.context.resize(640,440,1);await browser.context.navigate(fixture.href);
+  const text=()=>browser.context.evaluate('document.body.textContent');
+  expect(await text()).toContain('one:1:1');expect(await text()).toContain('two:1:1');
+  expect(await text()).toContain('Shared: 1 / multiply: 42');expect(await text()).toContain('Private ID: undefined');expect(await text()).toContain('module version 1.0');
+  await browser.context.evaluate('document.querySelector("[data-qml-type=MouseArea]").click()');
+  expect(await text()).toContain('changed');expect(await text()).toContain('two:2:1');expect(await text()).toContain('Shared: 2');
+  await Bun.write('/tmp/qml-real-imports.png',Buffer.from(await browser.context.screenshot({format:'png'}),'base64'));
+ }finally{browser.close();}
+},30000);
+test('qmldir version selection respects the requested minor version',()=>{
+ const text='module Demo\nThing 1.0 Old.qml\nThing 1.2 New.qml\nThing 2.0 Other.qml';
+ expect(parseQmldir(text,'file:///demo/qmldir','1.1').entries.get('Thing').url).toBe('file:///demo/Old.qml');
+ expect(parseQmldir(text,'file:///demo/qmldir','1.2').entries.get('Thing').url).toBe('file:///demo/New.qml');
+});
+test('remote QML cannot request a local file, and native plugins fail explicitly',async()=>{
+ const fetch=async()=>({ok:true,body:new TextEncoder().encode('plugin unsafe')});
+ await expect(loadQmlGraph('import "file:///tmp"\nItem {}','https://qml.test/main.qml',fetch)).rejects.toThrow('cannot import local');
+ await expect(loadQmlGraph('import "."\nItem {}','https://qml.test/main.qml',fetch)).rejects.toThrow('Unsupported qmldir directive');
+});
+
+test('HTTP imports share library JS, reset on navigation, and keep ordinary HTML working',async()=>{
+ const root=new URL('./fixtures/qml/imports/',import.meta.url);
+ const requests=[];
+ const server=Bun.serve({port:0,async fetch(req){
+   const path=new URL(req.url).pathname;requests.push(path);
+   if(path==='/plain')return new Response('<title>plain</title><p>ordinary HTML</p>',{headers:{'content-type':'text/html'}});
+   const file=Bun.file(new URL('.'+path,root));
+   return await file.exists()?new Response(file,{headers:{'content-type':path.endsWith('.qml')?'text/x-qml':'text/plain'}}):new Response('missing',{status:404});
+ }});
+ const browser=await createBrowser({spareRenderer:false});
+ try{
+   const url=`http://127.0.0.1:${server.port}/main.qml`;
+   let loaded;const ready=new Promise(resolve=>{loaded=browser.context.onLifecycle(name=>{if(name==='load')resolve();});});
+   await browser.context.navigate(url);await ready;loaded();
+   expect(await browser.context.evaluate('document.body.textContent')).toContain('one:1:1/1');
+   expect(await browser.context.evaluate('document.body.textContent')).toContain('two:1:1/2');
+   expect(requests.filter(p=>p==='/theme/Theme.qml').length).toBe(1);
+   expect(await browser.context.evaluate('typeof Bun')).toBe('undefined');
+   expect(await browser.context.evaluate('typeof __qmlHost')).toBe('undefined');
+   await browser.context.evaluate('document.querySelector("[data-qml-type=MouseArea]").click()');
+   const reloaded=new Promise(resolve=>{loaded=browser.context.onLifecycle(name=>{if(name==='load')resolve();});});
+   await browser.context.reload();await reloaded;loaded();
+   expect(await browser.context.evaluate('document.body.textContent')).toContain('one:1:1/1');
+   await browser.context.navigate(`http://127.0.0.1:${server.port}/plain`);
+   expect(await browser.context.evaluate('document.title')).toBe('plain');
+ }finally{browser.close();server.stop(true);}
+},30000);
+
+function memoryFetch(files){return async url=>files[url]===undefined?{ok:false,status:404}:{ok:true,body:new TextEncoder().encode(files[url])};}
+test('cycle and missing resource diagnostics do not silently substitute stubs',async()=>{
+ const {createQmlDocument}=await import('../lib/qml/document.js');
+ const url='https://qml.test/main.qml';
+ const files={
+  'https://qml.test/A.qml':'import QtQuick\nA {}',
+  'https://qml.test/bad.js':'.import "./bad.js" as Self\nfunction f() {}',
+ };
+ const graph=await loadQmlGraph('import QtQuick\nA {}',url,memoryFetch(files));
+ expect(createQmlDocument('import QtQuick\nA {}',url,{graph}).document.body.textContent).toContain('Recursive QML component');
+ await expect(loadQmlGraph('import "./bad.js" as Bad\nItem {}',url,memoryFetch(files))).rejects.toThrow('Cyclic JS import');
+ await expect(loadQmlGraph('import "./missing.js" as Missing\nItem {}',url,memoryFetch(files))).rejects.toThrow('not found');
+});
+test('readonly component properties reject external overrides',async()=>{
+ const {loadQmlDocument}=await import('../lib/qml/document.js');
+ const files={
+  'https://qml.test/qmldir':'Thing Thing.qml',
+  'https://qml.test/Thing.qml':'import QtQuick\nItem { readonly property int count: 1 }'
+ };
+ const result=await loadQmlDocument('import QtQuick\nThing { count: 2 }','https://qml.test/main.qml',{fetchResource:memoryFetch(files)});
+ expect(result.document.body.textContent).toContain('Cannot override readonly');
+});
+
+test('mutual singleton references, absent pragma, duplicate aliases and import budgets are explicit',async()=>{
+ const {loadQmlDocument}=await import('../lib/qml/document.js');
+ const url='https://qml.test/main.qml';
+ const files={
+  'https://qml.test/qmldir':'singleton A A.qml\nsingleton B B.qml',
+  'https://qml.test/A.qml':'pragma Singleton\nimport QtQuick\nQtObject { property int n: B.n }',
+  'https://qml.test/B.qml':'pragma Singleton\nimport QtQuick\nQtObject { property int n: A.n }',
+ };
+ const result=await loadQmlDocument('import QtQuick\nText { text: A.n }',url,{fetchResource:memoryFetch(files)});
+ // Singleton references may be mutual (Theme/Glass and Color/Style); object construction must terminate.
+ expect(result.document.querySelector('script')).not.toBeNull();
+ files['https://qml.test/B.qml']='import QtQuick\nQtObject { property int n: 1 }';
+ await expect(loadQmlGraph('import QtQuick\nText { text: A.n }',url,memoryFetch(files))).rejects.toThrow('needs pragma Singleton');
+ await expect(loadQmlGraph('import QtQuick as Q\nimport QtQuick.Controls as Q\nItem {}',url,memoryFetch({}))).rejects.toThrow('Duplicate QML import alias');
+ await expect(loadQmlGraph('import "./big.js" as Big\nItem {}',url,memoryFetch({'https://qml.test/big.js':' '.repeat(256*1024+1)}))).rejects.toThrow('byte limit');
+});
+
+
+test('qualified built-in imports resolve both object types and enums',async()=>{
+ const {loadQmlDocument}=await import('../lib/qml/document.js');
+ const result=await loadQmlDocument('import QtQuick as Q\nQ.Rectangle { Q.Text { text: "alias"; textFormat: Q.Text.PlainText } }','https://qml.test/main.qml',{fetchResource:memoryFetch({})});
+ expect(result.document.querySelector('[data-qml-type="Rectangle"]')).not.toBeNull();
+ expect(result.document.querySelector('[data-qml-type="Text"]')).not.toBeNull();
+});

package/test/qml-inherited-handlers.test.js

@@ -0,0 +1,51 @@
+import { test, expect } from 'bun:test';
+import { mkdtempSync, rmSync } from 'node:fs';
+import { createBrowser } from '../lib/headless-shell.js';
+
+test('component handlers retain base connections when pooled delegates are reused', async () => {
+  const dir = mkdtempSync('/tmp/qml-inherited-handlers-');
+  let browser;
+  try {
+    await Bun.write(dir + '/Cell.qml', `import QtQuick
+Text {
+ id: base
+ property bool live: true
+ property int baseCompleted: 0
+ property int baseReused: 0
+ width: 200; height: 20
+ Component.onCompleted: base.baseCompleted++
+ ListView.onPooled: base.live = false
+ ListView.onReused: { base.live = true; base.baseReused++ }
+}`);
+    await Bun.write(dir + '/main.qml', `import QtQuick
+import QtQml.Models
+Item {
+ id: root; width:300; height:200
+ Component.onCompleted: rows.items.addGroups(0,3,"shown")
+ property string prefix: "old"
+ ListView {
+  id: view; width:200; height:100; model:rows; reuseItems:true
+  DelegateModel {id:rows;model:100;filterOnGroup:"shown";groups:DelegateModelGroup {id:shown;name:"shown";includeByDefault:false}}
+  delegate: Cell {
+   id: cell; required property int index
+   property int derivedCompleted: 0
+   property int derivedReused: 0
+   Component.onCompleted: cell.derivedCompleted++
+   ListView.onReused: cell.derivedReused++
+   text: live ? root.prefix+index+":"+baseCompleted+":"+derivedCompleted+":"+baseReused+":"+derivedReused : cell.text
+  }
+ }
+ Button { id: shrink; y:120; onClicked:{shown.removeGroups(1,2,"shown");view.forceLayout()} }
+ Button { id: grow; y:150; onClicked:{root.prefix="new";rows.items.addGroups(1,2,"shown");view.forceLayout()} }
+}`);
+    browser = await createBrowser({ spareRenderer:false, rendererTimeout:20000 });
+    await browser.context.navigate(Bun.pathToFileURL(dir + '/main.qml').href);
+    const rows = () => browser.context.evaluate(`Array.from(document.querySelectorAll('[data-qml-type="Text"]')).filter(e=>e.getBoundingClientRect().width>0).map(e=>e.textContent).sort()`);
+    expect(await rows()).toEqual(['old0:1:1:0:0','old1:1:1:0:0','old2:1:1:0:0']);
+    for (let i=1;i<=3;i++) {
+      await browser.context.evaluate('document.getElementById("shrink").click()');
+      await browser.context.evaluate('document.getElementById("grow").click()');
+      expect(await rows()).toEqual(['new0:1:1:0:0',`new1:1:1:${i}:${i}`,`new2:1:1:${i}:${i}`]);
+    }
+  } finally { browser?.close(); rmSync(dir,{recursive:true,force:true}); }
+},30000);

package/test/qml-input-selection.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('QML input selection paints full and partial ranges without changing input geometry',async()=>{
+ const dir=mkdtempSync('/tmp/qml-selection-');let browser;
+ try{
+  await Bun.write(dir+'/main.qml',`import QtQuick
+Rectangle {width:360;height:160;color:"white"
+ TextInput {id:field;x:10;y:10;width:300;height:30;text:"abcdefghij";font.pixelSize:20;color:"black";selectionColor:"#00aaff";selectedTextColor:"white"}
+ Button {id:all;y:70;onClicked:{field.forceActiveFocus();field.selectAll()}}
+ Button {id:part;x:90;y:70;onClicked:{field.forceActiveFocus();field.select(2,5)}}
+ Button {id:none;x:180;y:70;onClicked:{field.forceActiveFocus();field.deselect()}}
+}`);
+  browser=await createBrowser({spareRenderer:false});await browser.context.resize(360,160);await browser.context.navigate(Bun.pathToFileURL(dir+'/main.qml').href);
+  const run=s=>browser.context.evaluate(s),click=async id=>{await run(`document.getElementById('${id}').click()`);await run('0');};
+  const bounds=()=>run('document.getElementById("field").getBoundingClientRect().toJSON()');
+  const original=await bounds();
+  const {CanvasKit:kit}=await loadGraphics();
+  async function blue(){const png=Buffer.from(await browser.context.screenshot({format:'png'}),'base64'),im=kit.MakeImageFromEncoded(png);try{const data=im.readPixels(0,0,{width:360,height:160,colorType:kit.ColorType.RGBA_8888,alphaType:kit.AlphaType.Unpremul,colorSpace:kit.ColorSpace.SRGB});let n=0;for(let i=0;i<data.length;i+=4)if(data[i]===0&&data[i+1]===170&&data[i+2]===255)n++;return n;}finally{im.delete();}}
+  await click('all');const full=await blue();expect(full).toBeGreaterThan(300);expect(await bounds()).toEqual(original);
+  expect(await run('({start:document.getElementById("field").selectionStart,end:document.getElementById("field").selectionEnd})')).toEqual({start:0,end:10});
+  await click('part');const partial=await blue();expect(partial).toBeGreaterThan(50);expect(partial).toBeLessThan(full);expect(await bounds()).toEqual(original);
+  await click('none');expect(await blue()).toBe(0);
+  await browser.context.click(original.x+1,original.y+12);
+  expect(await run('document.getElementById("field").selectionStart')).toBe(0);
+  await browser.context.type('X');expect(await run('document.getElementById("field").value')).toBe('Xabcdefghij');
+  await click('all');await browser.context.press('Backspace',{code:'Backspace'});expect(await run('document.getElementById("field").value')).toBe('');expect(await blue()).toBe(0);
+ }finally{browser?.close();rmSync(dir,{recursive:true,force:true});}
+},30000);
+
+test('QML input arrows collapse and extend selection, and the caret paints and blinks',async()=>{
+ const dir=mkdtempSync('/tmp/qml-caret-');let browser;
+ try{
+  await Bun.write(dir+'/main.qml',`import QtQuick
+Rectangle {width:360;height:100;color:"white"
+ TextInput {id:field;x:10;y:10;width:300;height:30;text:"abc😀xyz";font.pixelSize:20;color:"black"}
+ Button {id:all;y:60;onClicked:{field.forceActiveFocus();field.selectAll()}}
+}`);
+  browser=await createBrowser({spareRenderer:false});await browser.context.resize(360,100);await browser.context.navigate(Bun.pathToFileURL(dir+'/main.qml').href);
+  const run=s=>browser.context.evaluate(s),state=()=>run(`(()=>{const e=document.getElementById('field');return [e.selectionStart,e.selectionEnd]})()`);
+  const key=async(k,modifiers=0)=>{await browser.context.press(k,{code:k,modifiers});await run('0');};
+  await run(`document.getElementById('all').click()`);await run('0');
+  await key('ArrowRight');expect(await state()).toEqual([8,8]);
+  await key('ArrowLeft');expect(await state()).toEqual([7,7]);
+  await key('ArrowLeft',8);expect(await state()).toEqual([6,7]);
+  await key('ArrowLeft',8);expect(await state()).toEqual([5,7]);
+  await key('ArrowLeft',8);expect(await state()).toEqual([3,7]);
+  await key('ArrowRight');expect(await state()).toEqual([7,7]);
+  await key('a',2);await key('ArrowLeft');expect(await state()).toEqual([0,0]);
+  const on=await browser.context.screenshot({format:'png'});
+  // Capture work can span a blink phase on a loaded machine. Observe several
+  // frames rather than assuming two wall-clock samples land in opposite phases.
+  let changed=false;
+  for(let i=0;i<20;i++){
+   await Bun.sleep(125);
+   if(await browser.context.screenshot({format:'png'})!==on){changed=true;break;}
+  }
+  expect(changed).toBe(true);
+  await run(`document.getElementById('field').blur()`);await run('0');
+  const blurred=await browser.context.screenshot({format:'png'});await Bun.sleep(550);
+  expect(await browser.context.screenshot({format:'png'})).toBe(blurred);
+
+ }finally{browser?.close();rmSync(dir,{recursive:true,force:true});}
+},30000);