feat: deepen headed websocket indexeddb and webgl

Author: adybag14-cyber

docs/FULL_BROWSER_MASTER_TRACKER.md

@@ -242,6 +242,10 @@ Current state inside Gate 1:
   definitions and indexed lookups persistent across tabs and browser restart,
   with focused DOM tests plus a bounded headed probe proving indexed entries
   survive restart and can still be read back by index name and key
+- that same headed IndexedDB path now also supports object-store and index
+  cursor iteration, with focused DOM tests plus a bounded headed cross-tab
+  probe proving seeded cursor rows can be read back in sorted order from a
+  sibling tab through both `objectStore.openCursor()` and `index.openCursor()`
 - headed `fetch(...)` now honors credentials policy correctly on authenticated
   pages, with bounded localhost probes proving:
   - default same-origin fetch keeps cookie plus inherited auth
@@ -398,11 +402,21 @@ Current state inside Gate 1:
   `drawArrays(TRIANGLES, ...)`, with focused DOM tests plus a bounded headed
   screenshot probe proving a red triangle reaches the real destination canvas
   surface
+- that same headed Win32 `webgl` path now also supports a first indexed-draw
+  and uniform-color slice for `getUniformLocation`, `uniform4f`,
+  `ELEMENT_ARRAY_BUFFER`, and `drawElements(TRIANGLES, ..., UNSIGNED_SHORT, ...)`,
+  with bounded headed screenshot coverage proving a uniform-colored indexed
+  triangle reaches the real destination canvas surface
 - the headed browser runtime now also exposes a first real `WebSocket`
   browser-API slice with `CONNECTING` -> `OPEN` -> `CLOSED` state transitions,
   `send`, `close`, `onopen`, `onmessage`, `onerror`, and `onclose`, with a
   focused localhost DOM test plus a bounded headed echo probe proving text
   frames round-trip on the live headed surface path
+- that same headed `WebSocket` runtime now also covers binary echo plus richer
+  close semantics through `binaryType`, binary `message` payloads, and
+  `CloseEvent` `code` / `reason` / `wasClean`, with a bounded headed localhost
+  probe proving binary frames round-trip and server-initiated close details
+  reach page JS on the live headed surface path
 - the current headed painter now also keeps simple block paragraphs with mixed
   direct text plus inline child elements on one shared inline row instead of
   splitting the direct text into a separate label band above the inline chips,

src/browser/js/bridge.zig

@@ -830,6 +830,7 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/encoding/TextEncoderStream.zig"),
     @import("../webapi/encoding/TextDecoderStream.zig"),
     @import("../webapi/Event.zig"),
+    @import("../webapi/event/CloseEvent.zig"),
     @import("../webapi/event/CompositionEvent.zig"),
     @import("../webapi/event/CustomEvent.zig"),
     @import("../webapi/event/ErrorEvent.zig"),

src/browser/tests/canvas/webgl_rendering_context.html

@@ -173,3 +173,64 @@
   gl.drawArrays(gl.TRIANGLES, 0, 3);
 }
 </script>
+
+<script id=WebGLRenderingContext#shader_program_drawElements_uniform4f>
+{
+  const element = document.createElement("canvas");
+  element.width = 64;
+  element.height = 64;
+  const gl = element.getContext("webgl");
+
+  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+  gl.shaderSource(vertexShader, `
+    attribute vec2 a_position;
+    void main() {
+      gl_Position = vec4(a_position, 0.0, 1.0);
+    }
+  `);
+  gl.compileShader(vertexShader);
+  testing.expectEqual(true, gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS));
+
+  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+  gl.shaderSource(fragmentShader, `
+    uniform vec4 u_color;
+    void main() {
+      gl_FragColor = u_color;
+    }
+  `);
+  gl.compileShader(fragmentShader);
+  testing.expectEqual(true, gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS));
+
+  const program = gl.createProgram();
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  testing.expectEqual(true, gl.getProgramParameter(program, gl.LINK_STATUS));
+
+  const vertices = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, vertices);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+    -0.75, -0.75,
+     0.75, -0.75,
+     0.00,  0.80,
+  ]), gl.STATIC_DRAW);
+
+  const elements = gl.createBuffer();
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elements);
+  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2]), gl.STATIC_DRAW);
+
+  const location = gl.getAttribLocation(program, "a_position");
+  testing.expectEqual(0, location);
+  const colorLocation = gl.getUniformLocation(program, "u_color");
+  testing.expectEqual(true, !!colorLocation);
+
+  gl.useProgram(program);
+  gl.viewport(0, 0, 64, 64);
+  gl.clearColor(1, 1, 1, 1);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.enableVertexAttribArray(location);
+  gl.vertexAttribPointer(location, 2, gl.FLOAT, false, 0, 0);
+  gl.uniform4f(colorLocation, 0.0, 0.0, 1.0, 1.0);
+  gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0);
+}
+</script>

src/browser/tests/indexed_db.html

@@ -25,6 +25,22 @@
       request.onsuccess = () => resolve(request.result);
     });
   }
+
+  function iterateCursor(request, step) {
+    return new Promise((resolve, reject) => {
+      const values = [];
+      request.onerror = () => reject(new Error(request.error || 'cursor failed'));
+      request.onsuccess = () => {
+        const cursor = request.result;
+        if (!cursor) {
+          resolve(values);
+          return;
+        }
+        values.push(step(cursor));
+        cursor.continue();
+      };
+    });
+  }
 </script>
 
 <script id="indexed_db_open_upgrade">
@@ -129,3 +145,34 @@
     db2.close();
   });
 </script>
+
+<script id="indexed_db_cursor_iteration">
+  testing.async(async () => {
+    const db = await openDb('lp-cursor', 1, (upgradeDb) => {
+      const store = upgradeDb.createObjectStore('users');
+      store.createIndex('by_email', 'email');
+    });
+
+    const tx = db.transaction('users');
+    const store = tx.objectStore('users');
+    await requestResult(store.put({ name: 'Grace', email: 'grace@example.com' }, 'user-2'));
+    await requestResult(store.put({ name: 'Ada', email: 'ada@example.com' }, 'user-1'));
+    await requestResult(store.put({ name: 'Linus', email: 'linus@example.com' }, 'user-3'));
+
+    const storeRows = await iterateCursor(store.openCursor(), (cursor) => {
+      return `${cursor.primaryKey}:${cursor.value.name}`;
+    });
+    testing.expectEqual(['user-1:Ada', 'user-2:Grace', 'user-3:Linus'], storeRows);
+
+    const emailRows = await iterateCursor(store.index('by_email').openCursor(), (cursor) => {
+      return `${cursor.key}:${cursor.primaryKey}:${cursor.value.name}`;
+    });
+    testing.expectEqual([
+      'ada@example.com:user-1:Ada',
+      'grace@example.com:user-2:Grace',
+      'linus@example.com:user-3:Linus',
+    ], emailRows);
+
+    db.close();
+  });
+</script>

src/browser/tests/net/websocket.html

@@ -5,20 +5,39 @@
 testing.async(async () => {
   await new Promise((resolve, reject) => {
     const ws = new WebSocket('ws://127.0.0.1:9593/echo');
+    let step = 0;
     testing.expectEqual(WebSocket.CONNECTING, ws.readyState);
     testing.expectEqual('ws://127.0.0.1:9593/echo', ws.url);
     testing.expectEqual(WebSocket.OPEN, ws.OPEN);
+    testing.expectEqual('blob', ws.binaryType);
+    ws.binaryType = 'arraybuffer';
+    testing.expectEqual('arraybuffer', ws.binaryType);
 
     ws.onerror = () => reject(new Error('unexpected websocket error'));
     ws.onopen = () => {
       testing.expectEqual(WebSocket.OPEN, ws.readyState);
       ws.send('ping');
     };
     ws.onmessage = (event) => {
-      testing.expectEqual('echo:ping', event.data);
-      ws.close();
+      if (step == 0) {
+        testing.expectEqual('echo:ping', event.data);
+        step = 1;
+        ws.send(new Uint8Array([1, 2, 3]));
+        return;
+      }
+
+      testing.expectEqual(1, step);
+      testing.expectEqual(true, event.data instanceof ArrayBuffer);
+      testing.expectEqual(new Uint8Array([1, 2, 3]), new Uint8Array(event.data));
+      step = 2;
+      ws.send('close-me');
     };
-    ws.onclose = () => {
+    ws.onclose = (event) => {
+      testing.expectEqual(2, step);
+      testing.expectEqual(true, event instanceof CloseEvent);
+      testing.expectEqual(4001, event.code);
+      testing.expectEqual('server-close', event.reason);
+      testing.expectEqual(true, event.wasClean);
       testing.expectEqual(WebSocket.CLOSED, ws.readyState);
       resolve();
     };

src/browser/tests/page/canvas_webgl_indexed_render.html

@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+<body style="margin:0;background:#ffffff">
+  <canvas id="main" width="120" height="80"></canvas>
+  <script>
+    const canvas = document.getElementById("main");
+    const gl = canvas.getContext("webgl");
+
+    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+    gl.shaderSource(vertexShader, `
+      attribute vec2 a_position;
+      void main() {
+        gl_Position = vec4(a_position, 0.0, 1.0);
+      }
+    `);
+    gl.compileShader(vertexShader);
+
+    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+    gl.shaderSource(fragmentShader, `
+      uniform vec4 u_color;
+      void main() {
+        gl_FragColor = u_color;
+      }
+    `);
+    gl.compileShader(fragmentShader);
+
+    const program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    gl.useProgram(program);
+
+    const vertexBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+      -0.75, -0.75,
+       0.75, -0.75,
+       0.00,  0.80,
+    ]), gl.STATIC_DRAW);
+
+    const indexBuffer = gl.createBuffer();
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2]), gl.STATIC_DRAW);
+
+    const position = gl.getAttribLocation(program, "a_position");
+    const color = gl.getUniformLocation(program, "u_color");
+    gl.viewport(0, 0, canvas.width, canvas.height);
+    gl.clearColor(1.0, 1.0, 1.0, 1.0);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.enableVertexAttribArray(position);
+    gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+    gl.uniform4f(color, 0.0, 0.0, 1.0, 1.0);
+    gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0);
+    document.title = "Canvas WebGL Indexed Ready";
+  </script>
+</body>
+</html>

src/browser/webapi/Event.zig

@@ -65,6 +65,7 @@ pub const EventPhase = enum(u8) {
 
 pub const Type = union(enum) {
     generic,
+    close_event: *@import("event/CloseEvent.zig"),
     error_event: *@import("event/ErrorEvent.zig"),
     custom_event: *@import("event/CustomEvent.zig"),
     message_event: *@import("event/MessageEvent.zig"),
@@ -165,6 +166,7 @@ pub fn as(self: *Event, comptime T: type) *T {
 pub fn is(self: *Event, comptime T: type) ?*T {
     switch (self._type) {
         .generic => return if (T == Event) self else null,
+        .close_event => |e| return if (T == @import("event/CloseEvent.zig")) e else null,
         .error_event => |e| return if (T == @import("event/ErrorEvent.zig")) e else null,
         .custom_event => |e| return if (T == @import("event/CustomEvent.zig")) e else null,
         .message_event => |e| return if (T == @import("event/MessageEvent.zig")) e else null,