window.screen

src/browser/js/bridge.zig

@@ -573,4 +573,5 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/ResizeObserver.zig"),
     @import("../webapi/Blob.zig"),
     @import("../webapi/File.zig"),
+    @import("../webapi/Screen.zig"),
 });

src/browser/tests/window/window.html

@@ -93,3 +93,13 @@
   }
 </script>
 
+<script id=screen>
+  testing.expectEqual(1920, screen.width);
+  testing.expectEqual(1080, screen.height);
+  testing.expectEqual(1920, screen.availWidth);
+  testing.expectEqual(1040, screen.availHeight);
+  testing.expectEqual(24, screen.colorDepth);
+  testing.expectEqual(24, screen.pixelDepth);
+  testing.expectEqual(screen, window.screen);
+</script>
+

src/browser/webapi/Screen.zig

@@ -0,0 +1,73 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const js = @import("../js/js.zig");
+
+const Screen = @This();
+_pad: bool = false,
+
+pub const init: Screen = .{};
+
+/// Total width of the screen in pixels
+pub fn getWidth(_: *const Screen) u32 {
+    return 1920;
+}
+
+/// Total height of the screen in pixels
+pub fn getHeight(_: *const Screen) u32 {
+    return 1080;
+}
+
+/// Available width (excluding OS UI elements like taskbar)
+pub fn getAvailWidth(_: *const Screen) u32 {
+    return 1920;
+}
+
+/// Available height (excluding OS UI elements like taskbar)
+pub fn getAvailHeight(_: *const Screen) u32 {
+    return 1040; // 40px reserved for taskbar/dock
+}
+
+/// Color depth in bits per pixel
+pub fn getColorDepth(_: *const Screen) u32 {
+    return 24;
+}
+
+/// Pixel depth in bits per pixel (typically same as colorDepth)
+pub fn getPixelDepth(_: *const Screen) u32 {
+    return 24;
+}
+
+pub const JsApi = struct {
+    pub const bridge = js.Bridge(Screen);
+
+    pub const Meta = struct {
+        pub const name = "Screen";
+        pub const prototype_chain = bridge.prototypeChain();
+        pub var class_id: bridge.ClassId = undefined;
+        pub const empty_with_no_proto = true;
+    };
+
+    // Read-only properties
+    pub const width = bridge.accessor(Screen.getWidth, null, .{});
+    pub const height = bridge.accessor(Screen.getHeight, null, .{});
+    pub const availWidth = bridge.accessor(Screen.getAvailWidth, null, .{});
+    pub const availHeight = bridge.accessor(Screen.getAvailHeight, null, .{});
+    pub const colorDepth = bridge.accessor(Screen.getColorDepth, null, .{});
+    pub const pixelDepth = bridge.accessor(Screen.getPixelDepth, null, .{});
+};

src/browser/webapi/Window.zig

@@ -26,6 +26,7 @@ const Console = @import("Console.zig");
 const History = @import("History.zig");
 const Crypto = @import("Crypto.zig");
 const Navigator = @import("Navigator.zig");
+const Screen = @import("Screen.zig");
 const Performance = @import("Performance.zig");
 const Document = @import("Document.zig");
 const Location = @import("Location.zig");
@@ -45,6 +46,7 @@ _document: *Document,
 _crypto: Crypto = .init,
 _console: Console = .init,
 _navigator: Navigator = .init,
+_screen: Screen = .init,
 _performance: Performance,
 _history: History,
 _storage_bucket: *storage.Bucket,
@@ -79,6 +81,10 @@ pub fn getNavigator(self: *Window) *Navigator {
     return &self._navigator;
 }
 
+pub fn getScreen(self: *Window) *Screen {
+    return &self._screen;
+}
+
 pub fn getCrypto(self: *Window) *Crypto {
     return &self._crypto;
 }
@@ -366,6 +372,7 @@ pub const JsApi = struct {
     pub const parent = bridge.accessor(Window.getWindow, null, .{ .cache = "parent" });
     pub const console = bridge.accessor(Window.getConsole, null, .{ .cache = "console" });
     pub const navigator = bridge.accessor(Window.getNavigator, null, .{ .cache = "navigator" });
+    pub const screen = bridge.accessor(Window.getScreen, null, .{ .cache = "screen" });
     pub const performance = bridge.accessor(Window.getPerformance, null, .{ .cache = "performance" });
     pub const localStorage = bridge.accessor(Window.getLocalStorage, null, .{ .cache = "localStorage" });
     pub const sessionStorage = bridge.accessor(Window.getSessionStorage, null, .{ .cache = "sessionStorage" });