1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
|
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] : []);
}
function pane(frame, name) {
const rows = tags(frame);
const top = rows.find((row) => frame.lines[row].includes(name));
assert.notEqual(top, undefined, `missing pane ${name}`);
const bottom = rows.find((row) => row > top) ?? frame.rows;
return { top, bottom, lines: frame.lines.slice(top + 1, bottom) };
}
function styled(frame) {
const source = pane(frame, "touch-fixture.zig");
for (const [line, word, fg, bold] of [
["pub fn choose", "fn", 0xcf87e8, false],
["pub fn choose", "choose", 0xbdbdbd, false],
["if (value", "if", 0xcf87e8, false],
["if (value", "42", 0xe3c78a, false],
["if (value", '"touch fixture"', 0xe3c78a, false],
]) {
const row = source.lines.findIndex((text) => text.includes(line));
assert(row >= 0, `missing source line ${line}`);
const col = source.lines[row].indexOf(word);
for (let x = col; x < col + word.length; x++) {
const style = frame.styleRows[source.top + 1 + row][x];
assert.equal(style[0], fg, `${word} cell ${x - col} foreground`);
assert.equal(Boolean(style[2] & 1), bold, `${word} cell ${x - col} bold`);
}
}
for (const [row, line] of source.lines.entries()) {
const number = /\b(\d+),/.exec(line);
if (!number) continue;
for (let x = number.index; x < number.index + number[1].length; x++) {
assert.equal(frame.styleRows[source.top + 1 + row][x][0], 0xe3c78a, `row ${row} number foreground`);
}
}
}
export default async function ({ grid, touch, wait, stable, delay, evaluate, mouse }) {
await stable(100, 5000);
const compactGeometry = await evaluate(`(() => {
const root = document.createElement("div");
root.className = "pardes";
root.style.cssText = "position:fixed;left:0;top:0;width:20px;height:40px";
document.body.append(root);
const memory = new WebAssembly.Memory({initial:1});
const bytes = new Uint8Array(memory.buffer), data = new DataView(memory.buffer);
for (const [base,count] of [[0,4],[1024,6]]) for(let i=0;i<count;i++) {
const off=base+i*20; bytes[off]=65+i; bytes[off+18]=1;
data.setUint32(off+8,0xffffff,true); data.setUint32(off+12,0x123456,true);
if(base && i<2) data.setUint16(off+16,128,true);
}
const values=[3,2,1,0,0,2,2,42,0,2,1];
const wasm={memory,pardes_gui_tagline_font_percent:()=>50,pardes_frame:()=>4,
pardes_pointer_shape:()=>0,pardes_frame_cols:()=>2,pardes_frame_rows:()=>2,
pardes_frame_ptr:()=>0,pardes_cursor_x:()=>65535,pardes_cursor_y:()=>65535,pardes_cursor_bar:()=>0,
pardes_body_layer_limit:()=>1,pardes_body_layer_value:(_,field)=>values[field],pardes_body_layer_cells:()=>1024};
const renderer=new pardes.runtime.renderer.constructor(root,wasm);
Object.assign(renderer,{cellWidth:10,cellHeight:20,taglineWidth:5,taglineHeight:10});
renderer.render();
const layer=renderer.layerRoot.firstChild, rect=layer.getBoundingClientRect();
const bands=[...layer.children].slice(0,3).map(node=>{
const box=node.getBoundingClientRect();return [box.y-rect.y,box.height];
});
const cursor=layer.querySelector('.is-cursor');
renderer.render();
const result={bands,height:rect.height,clipped:getComputedStyle(layer).overflow,
cursor:cursor?.textContent,cached:renderer.layerRoot.firstChild===layer};
root.remove();return result;
})()`);
assert.deepEqual(compactGeometry.bands, [[0,10],[10,20],[30,20]], "compact headers release real height to additional body rows");
assert.equal(compactGeometry.height,40);
assert.equal(compactGeometry.clipped,"hidden");
assert.equal(compactGeometry.cursor,"E");
assert(compactGeometry.cached,"unchanged compact layers reuse their DOM nodes");
let frame = await grid();
assert.equal(tags(frame).length, 1);
styled(frame);
const link = "/virtual/pane/1/body";
const row = frame.lines.findIndex((text) => text.includes(link));
const col = frame.lines[row].indexOf(link) + 5;
let finger = await touch("down", 1, col, row, null);
finger = await touch("move", 1, col + 0.2, row + 0.1, finger);
await touch("up", 1, col + 0.2, row + 0.1, finger);
await wait(async () => tags(await grid()).length === 2, 5000, "Look opening the reflected body");
await stable(100, 5000);
frame = await grid();
styled(frame);
const reflected = pane(frame, link);
assert(reflected.lines.some((text) => text.includes("pub fn choose")));
const original = pane(frame, "touch-fixture.zig");
const sharedRows = Math.min(reflected.lines.length, original.lines.length);
assert(sharedRows >= 6);
assert.deepEqual(reflected.lines.slice(0, sharedRows), original.lines.slice(0, sharedRows), "Look must read the source pane body");
const center = Math.floor(frame.cols / 2);
const separator = Math.max(original.top, reflected.top) - 1;
const distance = original.top < reflected.top ? 4 : -4;
finger = await touch("down", 2, center, separator, null);
for (let step = 1; step <= 8; step++) {
finger = await touch("move", 2, center, separator + distance * step / 8, finger);
await delay(20);
}
await touch("up", 2, center, separator + distance, finger);
await stable(100, 5000);
frame = await grid();
assert.equal(tags(frame).length, 2);
const resized = pane(frame, "touch-fixture.zig");
assert(resized.lines.length >= original.lines.length + 3, "separator drag must resize, not scroll the body");
assert.equal(resized.lines[0], original.lines[0], "resizing must preserve the source viewport");
styled(frame);
const beforeScroll = resized.lines[0];
const reflectedBeforeScroll = pane(frame, link).lines;
const from = resized.bottom - 3;
const to = Math.max(resized.top + 2, from - 7);
finger = await touch("down", 3, center, from, null);
for (let step = 1; step <= 12; step++) {
finger = await touch("move", 3, center, from + (to - from) * step / 12, finger);
await delay(20);
}
await touch("up", 3, center, to, finger);
await stable(100, 5000);
frame = await grid();
assert.equal(tags(frame).length, 2, "scroll must not also Look");
const scrolled = pane(frame, "touch-fixture.zig");
assert.equal(scrolled.top, resized.top, "body scrolling must not resize");
assert.notEqual(scrolled.lines[0], beforeScroll, "source must scroll");
assert(Number(scrolled.lines[0].trim().split(/\s+/)[0]) > 1, "scroll advances source line numbers");
assert.deepEqual(pane(frame, link).lines, reflectedBeforeScroll, "scrolling the source must leave its neighbor alone");
const sourceRow = scrolled.top + 2;
const reflectedRow = pane(frame, link).top + 2;
const point = await evaluate(`(() => {
const runtime = pardes.runtime;
const root = runtime.root;
const wasm = runtime.wasm;
const events = [];
const canceled = [];
const pointerDownCanceled = [];
const click = (row) => {
wasm.pardes_mouse(0, 0, 10, row, 0);
wasm.pardes_mouse(0, 1, 10, row, 0);
wasm.pardes_tick();
runtime.renderer.render();
};
click(${sourceRow});
click(${reflectedRow});
runtime.wasm = { ...wasm, pardes_mouse: (...args) => {
events.push(args.slice(0, 2));
wasm.pardes_mouse(...args);
}, pardes_mouse_pixel: (...args) => {
events.push(args.slice(0, 2));
wasm.pardes_mouse_pixel(...args);
} };
const observe = (event) => {
if (event.type === "pointerdown") pointerDownCanceled.push(event.defaultPrevented);
else if (event.button === 3 || event.button === 4) canceled.push(event.defaultPrevented);
};
for (const type of ["pointerdown", "mousedown", "auxclick"]) root.addEventListener(type, observe);
pardes.thumbTest = { wasm, observe, events, canceled, pointerDownCanceled };
return runtime.cellPoint(10, ${sourceRow});
})()`);
const thumb = async (button, held = false) => {
const mask = button === "back" ? 8 : 16;
await mouse({ type: "mousePressed", button, buttons: mask | Number(held), ...point, clickCount: 1 });
await mouse({ type: "mouseReleased", button, buttons: Number(held), ...point, clickCount: 1 });
await stable(100, 5000);
return (await grid()).cursorY;
};
try {
const backRow = await thumb("back");
const forwardRow = await thumb("forward");
assert(backRow > scrolled.top && backRow < scrolled.bottom, "Back returns to the source pane");
const reflectedAfter = pane(await grid(), link);
assert(forwardRow > reflectedAfter.top && forwardRow < reflectedAfter.bottom, "Forward returns to the reflected pane");
await mouse({ type: "mousePressed", button: "left", buttons: 1, ...point, clickCount: 1 });
await evaluate("pardes.thumbTest.heldPointer = pardes.runtime.pointer");
await thumb("back", true);
await thumb("forward", true);
const navigation = await evaluate(`({
events: pardes.thumbTest.events,
canceled: pardes.thumbTest.canceled,
pointerDownCanceled: pardes.thumbTest.pointerDownCanceled,
keptPointer: pardes.thumbTest.heldPointer !== null && pardes.runtime.pointer === pardes.thumbTest.heldPointer,
})`);
const presses = navigation.events.filter((event) => event[1] === 0 && (event[0] === 8 || event[0] === 9));
assert.deepEqual(presses, [[8, 0], [9, 0], [8, 0], [9, 0]], "each physical thumb press navigates once");
assert(!navigation.events.some((event) => event[0] === 1 || (event[0] === 0 && event[1] === 3)), "thumb buttons must not become selection drags or middle clicks");
assert(navigation.canceled.length >= 4 && navigation.canceled.every(Boolean), "thumb mouse and auxclick events must cancel browser defaults");
assert(navigation.pointerDownCanceled.every((value) => !value), "mouse pointerdown must permit subsequent mousedown events");
assert(navigation.keptPointer, "thumb navigation must retain the held selection pointer");
} finally {
await mouse({ type: "mouseReleased", button: "left", buttons: 0, ...point, clickCount: 1 });
await evaluate(`(() => {
for (const type of ["pointerdown", "mousedown", "auxclick"])
pardes.runtime.root.removeEventListener(type, pardes.thumbTest.observe);
pardes.runtime.wasm = pardes.thumbTest.wasm;
delete pardes.thumbTest;
})()`);
}
}
|
