Reorder columns using aligned and distinctly colored tag grips

1 files changed, 14 insertions, 2 deletions

diff --git a/test/web-snapshots/touch.mjs b/test/web-snapshots/touch.mjs
index e65fdb80..3820117e 100644
--- a/test/web-snapshots/touch.mjs
+++ b/test/web-snapshots/touch.mjs
@@ -1,8 +1,8 @@
 import assert from "node:assert/strict";
 
 function tags(frame) {
-    // Pane tags have a gutter; the workspace and column bars do not.
-    return frame.styleRows.flatMap((cells, y) => /^\s{2}\S/.test(frame.lines[y]) && cells.some((cell) => cell[2] & 128) ? [y] : []);
+    // This fixture has workspace and column bars in its first two rows.
+    return frame.styleRows.flatMap((cells, y) => y > 1 && /^\s{2}\S/.test(frame.lines[y]) && cells.some((cell) => cell[2] & 128) ? [y] : []);
 }
 
 function pane(frame, name) {
@@ -95,6 +95,15 @@ export default async function ({ grid, touch, wait, stable, delay, evaluate, mou
         tagValues[10]=0x556677;
         renderer.render();
         result.tag.bgInvalidates=renderer.tagRoot.firstChild!==tag;
+        tagValues[1]=1;tagValues[4]=2;tagValues[5]=0;
+        bytes[0]=32;data.setUint32(8,0x778899,true);
+        renderer.render();
+        const columnGrip=renderer.tagRoot.querySelector('[data-tag-grip]');
+        const marks=node=>[...node.children].map(mark=>[parseFloat(mark.style.left),parseFloat(mark.style.top),parseFloat(mark.style.width)]);
+        result.columnMarks=marks(columnGrip);
+        tagValues[1]=2;tagValues[5]=1;bytes[40]=32;data.setUint32(48,0x778899,true);
+        renderer.render();
+        result.paneMarks=marks(renderer.tagRoot.querySelector('[data-tag-grip]'));
         root.remove();return result;
     })()`);
     assert.deepEqual(compactGeometry.bands, [[0,10],[10,20],[30,20]], "compact headers release real height to additional body rows");
@@ -110,6 +119,9 @@ export default async function ({ grid, touch, wait, stable, delay, evaluate, mou
         gripVisible:"",covered:"hidden",background:"rgb(51, 68, 85)",cached:true,bgInvalidates:true},
         "tag text uses its own columns after a fixed body-width grip, with cursor and cached base background");
 
+    assert.deepEqual(compactGeometry.columnMarks,[[7,13,6],[7,16,6]]);
+    assert.deepEqual(compactGeometry.paneMarks,[[7,33,6],[7,36,6]],"pane and column handles share physical horizontal mark geometry");
+
     let frame = await grid();
     assert.equal(tags(frame).length, 1);
     styled(frame);