5 files changed, 57 insertions, 23 deletions

diff --git a/cli/tsc/dts/lib.deno.unstable.d.ts b/cli/tsc/dts/lib.deno.unstable.d.ts
index 3a3bf037b..cafa539b5 100644
--- a/cli/tsc/dts/lib.deno.unstable.d.ts
+++ b/cli/tsc/dts/lib.deno.unstable.d.ts
@@ -28,9 +28,13 @@ declare namespace Deno {
    */
   export class UnsafeWindowSurface {
     constructor(
-      system: "cocoa" | "win32" | "x11" | "wayland",
-      windowHandle: Deno.PointerValue<unknown>,
-      displayHandle: Deno.PointerValue<unknown>,
+      options: {
+        system: "cocoa" | "win32" | "x11" | "wayland";
+        windowHandle: Deno.PointerValue<unknown>;
+        displayHandle: Deno.PointerValue<unknown>;
+        width: number;
+        height: number;
+      },
     );
     getContext(context: "webgpu"): GPUCanvasContext;
     present(): void;
diff --git a/cli/tsc/dts/lib.deno_webgpu.d.ts b/cli/tsc/dts/lib.deno_webgpu.d.ts
index 3a602d78a..e8d813823 100644
--- a/cli/tsc/dts/lib.deno_webgpu.d.ts
+++ b/cli/tsc/dts/lib.deno_webgpu.d.ts
@@ -1372,8 +1372,6 @@ declare interface GPUCanvasConfiguration {
   viewFormats?: GPUTextureFormat[];
   colorSpace?: "srgb" | "display-p3";
   alphaMode?: GPUCanvasAlphaMode;
-  width: number;
-  height: number;
 }
 /** @category GPU */
 declare interface GPUCanvasContext {
diff --git a/ext/webgpu/01_webgpu.js b/ext/webgpu/01_webgpu.js
index f292aeec1..719877750 100644
--- a/ext/webgpu/01_webgpu.js
+++ b/ext/webgpu/01_webgpu.js
@@ -7435,16 +7435,6 @@ const dictMembersGPUCanvasConfiguration = [
     converter: webidl.converters["GPUPresentMode"],
   },
   {
-    key: "width",
-    converter: webidl.converters["long"],
-    required: true,
-  },
-  {
-    key: "height",
-    converter: webidl.converters["long"],
-    required: true,
-  },
-  {
     key: "viewFormats",
     converter: webidl.createSequenceConverter(
       webidl.converters["GPUTextureFormat"],
diff --git a/ext/webgpu/02_surface.js b/ext/webgpu/02_surface.js
index c48787dbf..ce723b891 100644
--- a/ext/webgpu/02_surface.js
+++ b/ext/webgpu/02_surface.js
@@ -29,6 +29,8 @@ const _configuration = Symbol("[[configuration]]");
 const _canvas = Symbol("[[canvas]]");
 const _currentTexture = Symbol("[[currentTexture]]");
 const _present = Symbol("[[present]]");
+const _dim = Symbol("[[dimensions]]");
+
 class GPUCanvasContext {
   /** @type {number} */
   [_surfaceRid];
@@ -36,6 +38,7 @@ class GPUCanvasContext {
   [_canvas];
   /** @type {GPUTexture | undefined} */
   [_currentTexture];
+  [_dim];
 
   get canvas() {
     webidl.assertBranded(this, GPUCanvasContextPrototype);
@@ -69,8 +72,8 @@ class GPUCanvasContext {
       format: configuration.format,
       viewFormats: configuration.viewFormats,
       usage: configuration.usage,
-      width: configuration.width,
-      height: configuration.height,
+      width: this[_dim].width,
+      height: this[_dim].height,
       alphaMode: configuration.alphaMode,
     });
 
@@ -110,8 +113,8 @@ class GPUCanvasContext {
     const texture = createGPUTexture(
       {
         size: {
-          width: this[_configuration].width,
-          height: this[_configuration].height,
+          width: this[_dim].width,
+          height: this[_dim].height,
           depthOrArrayLayers: 1,
         },
         mipLevelCount: 1,
@@ -163,6 +166,8 @@ function createCanvasContext(options) {
   const canvasContext = webidl.createBranded(GPUCanvasContext);
   canvasContext[_surfaceRid] = options.surfaceRid;
   canvasContext[_canvas] = options.canvas;
+  canvasContext[_dim] = { width: options.width, height: options.height };
+
   return canvasContext;
 }
 
@@ -172,16 +177,34 @@ function createCanvasContext(options) {
 class UnsafeWindowSurface {
   #ctx;
   #surfaceRid;
+  #options;
 
-  constructor(system, win, display) {
-    this.#surfaceRid = op_webgpu_surface_create(system, win, display);
+  constructor(options) {
+    if (typeof options !== "object") {
+      throw new TypeError("options must be provided.");
+    }
+    if (
+      typeof options.width !== "number" || typeof options.height !== "number"
+    ) {
+      throw new TypeError("width and height must be provided.");
+    }
+
+    this.#surfaceRid = op_webgpu_surface_create(
+      options.system,
+      options.windowHandle,
+      options.displayHandle,
+    );
+    this.#options = options;
   }
 
   getContext(context) {
     if (context !== "webgpu") {
       throw new TypeError("Only 'webgpu' context is supported");
     }
-    this.#ctx = createCanvasContext({ surfaceRid: this.#surfaceRid });
+    this.#ctx = createCanvasContext({
+      surfaceRid: this.#surfaceRid,
+      ...this.#options,
+    });
     return this.#ctx;
   }
 
diff --git a/tests/unit/webgpu_test.ts b/tests/unit/webgpu_test.ts
index ae584a587..6c91abe4a 100644
--- a/tests/unit/webgpu_test.ts
+++ b/tests/unit/webgpu_test.ts
@@ -236,13 +236,32 @@ Deno.test({
 
   assertThrows(
     () => {
-      new Deno.UnsafeWindowSurface("cocoa", null, null);
+      new Deno.UnsafeWindowSurface({
+        system: "cocoa",
+        windowHandle: null,
+        displayHandle: null,
+        width: 0,
+        height: 0,
+      });
     },
   );
 
   device.destroy();
 });
 
+Deno.test(function webgpuWindowSurfaceNoWidthHeight() {
+  assertThrows(
+    () => {
+      // @ts-expect-error width and height are required
+      new Deno.UnsafeWindowSurface({
+        system: "x11",
+        windowHandle: null,
+        displayHandle: null,
+      });
+    },
+  );
+});
+
 Deno.test(function getPreferredCanvasFormat() {
   const preferredFormat = navigator.gpu.getPreferredCanvasFormat();
   assert(preferredFormat === "bgra8unorm" || preferredFormat === "rgba8unorm");