From 0e6e4db08bcba3eaddae869f1c56bb1e239ccf14 Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Wed, 14 Jan 2026 00:36:23 -0800
Subject: [PATCH 01/17] add Selection WebAPI

---
 src/browser/js/bridge.zig        |   1 +
 src/browser/webapi/Selection.zig | 288 +++++++++++++++++++++++++++++++
 2 files changed, 289 insertions(+)
 create mode 100644 src/browser/webapi/Selection.zig

diff --git a/src/browser/js/bridge.zig b/src/browser/js/bridge.zig
index df48512e..3a87ec88 100644
--- a/src/browser/js/bridge.zig
+++ b/src/browser/js/bridge.zig
@@ -1272,4 +1272,5 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/canvas/CanvasRenderingContext2D.zig"),
     @import("../webapi/canvas/WebGLRenderingContext.zig"),
     @import("../webapi/SubtleCrypto.zig"),
+    @import("../webapi/Selection.zig"),
 });
diff --git a/src/browser/webapi/Selection.zig b/src/browser/webapi/Selection.zig
new file mode 100644
index 00000000..164a51a2
--- /dev/null
+++ b/src/browser/webapi/Selection.zig
@@ -0,0 +1,288 @@
+// 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 std = @import("std");
+const log = @import("../../log.zig");
+
+const js = @import("../js/js.zig");
+const Page = @import("../Page.zig");
+const Range = @import("Range.zig");
+const AbstractRange = @import("AbstractRange.zig");
+const Node = @import("Node.zig");
+
+const Selection = @This();
+
+const SelectionDirection = enum { backward, forward, none };
+
+_ranges: std.ArrayList(*Range) = .empty,
+_direction: SelectionDirection = .none,
+
+pub const init: Selection = .{};
+
+pub fn getAnchorNode(self: *const Selection) ?*Node {
+    if (self._ranges.items.len == 0) return null;
+
+    return switch (self._direction) {
+        .backward => self._ranges.getLast().asAbstractRange().getEndContainer(),
+        .forward, .none => self._ranges.items[0].asAbstractRange().getStartContainer(),
+    };
+}
+
+pub fn getAnchorOffset(self: *const Selection) u32 {
+    if (self._ranges.items.len == 0) return 0;
+
+    return switch (self._direction) {
+        .backward => self._ranges.getLast().asAbstractRange().getEndOffset(),
+        .forward, .none => self._ranges.items[0].asAbstractRange().getStartOffset(),
+    };
+}
+
+pub fn getDirection(self: *const Selection) []const u8 {
+    return @tagName(self._direction);
+}
+
+pub fn getFocusNode(self: *const Selection) ?*Node {
+    if (self._ranges.items.len == 0) return null;
+
+    return switch (self._direction) {
+        .backward => self._ranges.items[0].asAbstractRange().getStartContainer(),
+        .forward, .none => self._ranges.getLast().asAbstractRange().getEndContainer(),
+    };
+}
+
+pub fn getFocusOffset(self: *const Selection) u32 {
+    if (self._ranges.items.len == 0) return 0;
+
+    return switch (self._direction) {
+        .backward => self._ranges.items[0].asAbstractRange().getStartOffset(),
+        .forward, .none => self._ranges.getLast().asAbstractRange().getEndOffset(),
+    };
+}
+
+pub fn getIsCollapsed(self: *const Selection) bool {
+    if (self._ranges.items.len == 0) return true;
+    if (self._ranges.items.len > 1) return false;
+
+    return self._ranges.items[0].asAbstractRange().getCollapsed();
+}
+
+pub fn getRangeCount(self: *const Selection) u32 {
+    return @intCast(self._ranges.items.len);
+}
+
+pub fn getType(self: *const Selection) []const u8 {
+    if (self._ranges.items.len == 0) return "None";
+    if (self.getIsCollapsed()) return "Caret";
+    return "Range";
+}
+
+pub fn addRange(self: *Selection, range: *Range, page: *Page) !void {
+    for (self._ranges.items) |r| {
+        if (r == range) return;
+    }
+
+    return try self._ranges.append(page.arena, range);
+}
+
+pub fn removeRange(self: *Selection, range: *Range) void {
+    for (self._ranges.items, 0..) |r, i| {
+        if (r == range) {
+            _ = self._ranges.orderedRemove(i);
+            return;
+        }
+    }
+}
+
+pub fn removeAllRanges(self: *Selection) void {
+    self._ranges.clearRetainingCapacity();
+    self._direction = .none;
+}
+
+pub fn collapseToEnd(self: *Selection, page: *Page) !void {
+    if (self._ranges.items.len == 0) return;
+
+    const last_range = self._ranges.getLast().asAbstractRange();
+    const last_node = last_range.getEndContainer();
+    const last_offset = last_range.getEndOffset();
+
+    const range = try Range.init(page);
+    try range.setStart(last_node, last_offset);
+    try range.setEnd(last_node, last_offset);
+
+    self.removeAllRanges();
+    try self._ranges.append(page.arena, range);
+    self._direction = .none;
+}
+
+pub fn collapseToStart(self: *Selection, page: *Page) !void {
+    if (self._ranges.items.len == 0) return;
+
+    const first_range = self._ranges.items[0].asAbstractRange();
+    const first_node = first_range.getStartContainer();
+    const first_offset = first_range.getStartOffset();
+
+    const range = try Range.init(page);
+    try range.setStart(first_node, first_offset);
+    try range.setStart(first_node, first_offset);
+
+    self.removeAllRanges();
+    try self._ranges.append(page.arena, range);
+    self._direction = .none;
+}
+
+pub fn containsNode(self: *const Selection, node: *Node, partial: bool) !bool {
+    for (self._ranges.items) |r| {
+        if (partial) {
+            if (r.intersectsNode(node)) {
+                return true;
+            }
+        } else {
+            const parent = node.parentNode() orelse continue;
+            const offset = parent.getChildIndex(node) orelse continue;
+
+            const start_in = r.isPointInRange(parent, offset) catch false;
+            const end_in = r.isPointInRange(parent, offset + 1) catch false;
+
+            if (start_in and end_in) {
+                return true;
+            }
+        }
+    }
+
+    return false;
+}
+
+pub fn deleteFromDocument(self: *Selection, page: *Page) !void {
+    if (self._ranges.items.len == 0) return;
+
+    try self._ranges.items[0].deleteContents(page);
+}
+
+pub fn extend(self: *Selection, node: *Node, _offset: ?u32) !void {
+    if (self._ranges.items.len == 0) {
+        return error.InvalidState;
+    }
+
+    const offset = _offset orelse 0;
+
+    if (offset > node.getLength()) {
+        return error.IndexSizeError;
+    }
+
+    const range = self._ranges.items[0];
+    const old_anchor = switch (self._direction) {
+        .backward => range.asAbstractRange().getEndContainer(),
+        .forward, .none => range.asAbstractRange().getStartContainer(),
+    };
+    const old_anchor_offset = switch (self._direction) {
+        .backward => range.asAbstractRange().getEndOffset(),
+        .forward, .none => range.asAbstractRange().getStartOffset(),
+    };
+
+    const cmp = AbstractRange.compareBoundaryPoints(node, offset, old_anchor, old_anchor_offset);
+    switch (cmp) {
+        .before => {
+            try range.setStart(node, offset);
+            try range.setEnd(old_anchor, old_anchor_offset);
+            self._direction = .backward;
+        },
+        else => {
+            try range.setStart(old_anchor, old_anchor_offset);
+            try range.setEnd(node, offset);
+            self._direction = .forward;
+        },
+    }
+}
+
+// TODO: getComposedRanges
+
+pub fn getRangeAt(self: *Selection, index: u32) !*Range {
+    if (index >= self.getRangeCount()) {
+        return error.IndexSizeError;
+    }
+
+    return self._ranges.items[index];
+}
+
+// TODO: modify
+
+// TODO: selectAllChildren
+
+// TODO: setBaseAndExtent
+
+pub fn setPosition(self: *Selection, _node: ?*Node, _offset: ?u32, page: *Page) !void {
+    const node = _node orelse {
+        self.removeAllRanges();
+        return;
+    };
+
+    const offset = _offset orelse 0;
+
+    if (offset > node.getLength()) {
+        return error.IndexSizeError;
+    }
+
+    const range = try Range.init(page);
+    try range.setStart(node, offset);
+    try range.setEnd(node, offset);
+
+    self.removeAllRanges();
+    try self._ranges.append(page.arena, range);
+    self._direction = .none;
+}
+
+pub const JsApi = struct {
+    pub const bridge = js.Bridge(Selection);
+
+    pub const Meta = struct {
+        pub const name = "Selection";
+        pub const prototype_chain = bridge.prototypeChain();
+        pub var class_id: bridge.ClassId = undefined;
+    };
+
+    pub const anchorNode = bridge.accessor(Selection.getAnchorNode, null, .{});
+    pub const anchorOffset = bridge.accessor(Selection.getAnchorOffset, null, .{});
+    pub const direction = bridge.accessor(Selection.getDirection, null, .{});
+    pub const focusNode = bridge.accessor(Selection.getFocusNode, null, .{});
+    pub const focusOffset = bridge.accessor(Selection.getFocusOffset, null, .{});
+    pub const isCollapsed = bridge.accessor(Selection.getIsCollapsed, null, .{});
+    pub const rangeCount = bridge.accessor(Selection.getRangeCount, null, .{});
+    pub const @"type" = bridge.accessor(Selection.getType, null, .{});
+
+    pub const addRange = bridge.function(Selection.addRange, .{});
+    pub const collapse = bridge.function(Selection.setPosition, .{ .dom_exception = true });
+    pub const collapseToEnd = bridge.function(Selection.collapseToEnd, .{});
+    pub const collapseToStart = bridge.function(Selection.collapseToStart, .{});
+    pub const containsNode = bridge.function(Selection.containsNode, .{});
+    pub const deleteFromDocument = bridge.function(Selection.deleteFromDocument, .{});
+    pub const empty = bridge.function(Selection.removeAllRanges, .{});
+    pub const extend = bridge.function(Selection.extend, .{ .dom_exception = true });
+    // getComposedRanges
+    pub const getRangeAt = bridge.function(Selection.getRangeAt, .{ .dom_exception = true });
+    // modify
+    pub const removeAllRanges = bridge.function(Selection.removeAllRanges, .{});
+    pub const removeRange = bridge.function(Selection.removeRange, .{});
+    // selectAllChildren
+    // setBaseAndExtent
+    pub const setPosition = bridge.function(Selection.setPosition, .{});
+};
+
+const testing = @import("../../testing.zig");
+test "WebApi: Selection" {
+    try testing.htmlRunner("selection.html", .{});
+}

From a6fc5aa34567b6610e9687bae7d9549c300ca559 Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Wed, 14 Jan 2026 00:36:42 -0800
Subject: [PATCH 02/17] add getSelection to Window, Document

---
 src/browser/webapi/Document.zig | 7 +++++++
 src/browser/webapi/Window.zig   | 6 ++++++
 2 files changed, 13 insertions(+)

diff --git a/src/browser/webapi/Document.zig b/src/browser/webapi/Document.zig
index 57db61fd..8c4e030b 100644
--- a/src/browser/webapi/Document.zig
+++ b/src/browser/webapi/Document.zig
@@ -36,6 +36,7 @@ const DOMTreeWalker = @import("DOMTreeWalker.zig");
 const DOMNodeIterator = @import("DOMNodeIterator.zig");
 const DOMImplementation = @import("DOMImplementation.zig");
 const StyleSheetList = @import("css/StyleSheetList.zig");
+const Selection = @import("Selection.zig");
 
 pub const XMLDocument = @import("XMLDocument.zig");
 pub const HTMLDocument = @import("HTMLDocument.zig");
@@ -55,6 +56,7 @@ _style_sheets: ?*StyleSheetList = null,
 _write_insertion_point: ?*Node = null,
 _script_created_parser: ?Parser.Streaming = null,
 _adopted_style_sheets: ?js.Object.Global = null,
+_selection: Selection = .init,
 
 pub const Type = union(enum) {
     generic,
@@ -276,6 +278,10 @@ pub fn getDocumentElement(self: *Document) ?*Element {
     return null;
 }
 
+pub fn getSelection(self: *Document) *Selection {
+    return &self._selection;
+}
+
 pub fn querySelector(self: *Document, input: []const u8, page: *Page) !?*Element {
     return Selector.querySelector(self.asNode(), input, page);
 }
@@ -962,6 +968,7 @@ pub const JsApi = struct {
     pub const querySelector = bridge.function(Document.querySelector, .{ .dom_exception = true });
     pub const querySelectorAll = bridge.function(Document.querySelectorAll, .{ .dom_exception = true });
     pub const getElementsByTagName = bridge.function(Document.getElementsByTagName, .{});
+    pub const getSelection = bridge.function(Document.getSelection, .{});
     pub const getElementsByClassName = bridge.function(Document.getElementsByClassName, .{});
     pub const getElementsByName = bridge.function(Document.getElementsByName, .{});
     pub const adoptNode = bridge.function(Document.adoptNode, .{ .dom_exception = true });
diff --git a/src/browser/webapi/Window.zig b/src/browser/webapi/Window.zig
index 7b6938e8..251f0220 100644
--- a/src/browser/webapi/Window.zig
+++ b/src/browser/webapi/Window.zig
@@ -42,6 +42,7 @@ const storage = @import("storage/storage.zig");
 const Element = @import("Element.zig");
 const CSSStyleProperties = @import("css/CSSStyleProperties.zig");
 const CustomElementRegistry = @import("CustomElementRegistry.zig");
+const Selection = @import("Selection.zig");
 
 const Window = @This();
 
@@ -129,6 +130,10 @@ pub fn getLocation(self: *const Window) *Location {
     return self._location;
 }
 
+pub fn getSelection(self: *const Window) *Selection {
+    return &self._document._selection;
+}
+
 pub fn setLocation(_: *const Window, url: [:0]const u8, page: *Page) !void {
     return page.scheduleNavigation(url, .{ .reason = .script, .kind = .{ .push = null } }, .script);
 }
@@ -676,6 +681,7 @@ pub const JsApi = struct {
     pub const atob = bridge.function(Window.atob, .{});
     pub const reportError = bridge.function(Window.reportError, .{});
     pub const getComputedStyle = bridge.function(Window.getComputedStyle, .{});
+    pub const getSelection = bridge.function(Window.getSelection, .{});
     pub const isSecureContext = bridge.accessor(Window.getIsSecureContext, null, .{});
     pub const frames = bridge.accessor(Window.getWindow, null, .{ .cache = "frames" });
     pub const index = bridge.indexed(Window.getFrame, .{ .null_as_undefined = true });

From be1d463775ea6cbb60cbe3f009dd026d4f566db8 Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Wed, 14 Jan 2026 00:36:52 -0800
Subject: [PATCH 03/17] add Selection WebAPI test

---
 src/browser/tests/selection.html | 408 +++++++++++++++++++++++++++++++
 1 file changed, 408 insertions(+)
 create mode 100644 src/browser/tests/selection.html

diff --git a/src/browser/tests/selection.html b/src/browser/tests/selection.html
new file mode 100644
index 00000000..ceae479f
--- /dev/null
+++ b/src/browser/tests/selection.html
@@ -0,0 +1,408 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<script src="./testing.js"></script>
+
+<div id="test-content">
+  <p id="p1">The quick brown fox</p>
+  <p id="p2">jumps over the lazy dog</p>
+  <div id="nested">
+    <span id="s1">Hello</span>
+    <span id="s2">World</span>
+  </div>
+</div>
+
+<script id=basic>
+  {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    
+    testing.expectEqual(0, sel.rangeCount);
+    testing.expectEqual("None", sel.type);
+    testing.expectEqual(true, sel.isCollapsed);
+    testing.expectEqual(null, sel.anchorNode);
+    testing.expectEqual(null, sel.focusNode);
+    testing.expectEqual(0, sel.anchorOffset);
+    testing.expectEqual(0, sel.focusOffset);
+    testing.expectEqual("none", sel.direction);
+  }
+</script>
+
+<script id=collapse>
+  {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    const p1 = document.getElementById("p1");
+    const textNode = p1.firstChild;
+    
+    // Collapse to a position
+    sel.collapse(textNode, 4);
+    
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual("Caret", sel.type);
+    testing.expectEqual(true, sel.isCollapsed);
+    testing.expectEqual(textNode, sel.anchorNode);
+    testing.expectEqual(textNode, sel.focusNode);
+    testing.expectEqual(4, sel.anchorOffset);
+    testing.expectEqual(4, sel.focusOffset);
+    testing.expectEqual("none", sel.direction);
+    
+    // Collapse to null removes all ranges
+    sel.collapse(null);
+    testing.expectEqual(0, sel.rangeCount);
+    testing.expectEqual("None", sel.type);
+  }
+</script>
+
+<script id=setPosition>
+  {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    const p2 = document.getElementById("p2");
+    const textNode = p2.firstChild;
+    
+    // setPosition is an alias for collapse
+    sel.setPosition(textNode, 10);
+    
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual("Caret", sel.type);
+    testing.expectEqual(textNode, sel.anchorNode);
+    testing.expectEqual(10, sel.anchorOffset);
+    
+    // Test default offset
+    sel.setPosition(textNode);
+    testing.expectEqual(0, sel.anchorOffset);
+    
+    // Test null
+    sel.setPosition(null);
+    testing.expectEqual(0, sel.rangeCount);
+  }
+</script>
+
+<script id=addRange>
+  {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    
+    const range1 = document.createRange();
+    const p1 = document.getElementById("p1");
+    range1.selectNodeContents(p1);
+    
+    sel.addRange(range1);
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual("Range", sel.type);
+    testing.expectEqual(false, sel.isCollapsed);
+    
+    // Adding same range again should do nothing
+    sel.addRange(range1);
+    testing.expectEqual(1, sel.rangeCount);
+    
+    // Adding different range
+    const range2 = document.createRange();
+    const p2 = document.getElementById("p2");
+    range2.selectNodeContents(p2);
+    
+    sel.addRange(range2);
+    testing.expectEqual(2, sel.rangeCount);
+  }
+</script>
+
+<script id=getRangeAt>
+  {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    
+    const range = document.createRange();
+    const p1 = document.getElementById("p1");
+    range.selectNodeContents(p1);
+    sel.addRange(range);
+    
+    const retrieved = sel.getRangeAt(0);
+    testing.expectEqual(range, retrieved);
+  }
+</script>
+
+<script id=removeRange>
+  {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    
+    const range1 = document.createRange();
+    const range2 = document.createRange();
+    const p1 = document.getElementById("p1");
+    const p2 = document.getElementById("p2");
+    
+    range1.selectNodeContents(p1);
+    range2.selectNodeContents(p2);
+    
+    sel.addRange(range1);
+    sel.addRange(range2);
+    testing.expectEqual(2, sel.rangeCount);
+    
+    sel.removeRange(range1);
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual(range2, sel.getRangeAt(0));
+    
+    // Removing non-existent range does nothing
+    sel.removeRange(range1);
+    testing.expectEqual(1, sel.rangeCount);
+  }
+</script>
+
+<script id=removeAllRanges>
+  {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+
+    const range1 = document.createRange();
+    const range2 = document.createRange();
+    
+    range1.selectNodeContents(document.getElementById("p1"));
+    range2.selectNodeContents(document.getElementById("p2"));
+    
+    sel.addRange(range1);
+    sel.addRange(range2);
+    testing.expectEqual(2, sel.rangeCount);
+    
+    sel.removeAllRanges();
+    testing.expectEqual(0, sel.rangeCount);
+    testing.expectEqual("none", sel.direction);
+  }
+</script>
+
+<script id=empty>
+  {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    const range = document.createRange();
+    range.selectNodeContents(document.getElementById("p1"));
+    
+    sel.addRange(range);
+    testing.expectEqual(1, sel.rangeCount);
+    
+    // empty() is an alias for removeAllRanges()
+    sel.empty();
+    testing.expectEqual(0, sel.rangeCount);
+  }
+</script>
+
+<script id=collapseToStart>
+  {
+    const sel = window.getSelection();
+    const p1 = document.getElementById("p1");
+    const textNode = p1.firstChild;
+    
+    const range = document.createRange();
+    range.setStart(textNode, 4);
+    range.setEnd(textNode, 15);
+    
+    sel.removeAllRanges();
+    sel.addRange(range);
+    
+    testing.expectEqual(false, sel.isCollapsed);
+    testing.expectEqual(4, sel.anchorOffset);
+    testing.expectEqual(15, sel.focusOffset);
+    
+    sel.collapseToStart();
+    
+    testing.expectEqual(true, sel.isCollapsed);
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual(textNode, sel.anchorNode);
+    testing.expectEqual(4, sel.anchorOffset);
+    testing.expectEqual(4, sel.focusOffset);
+    testing.expectEqual("none", sel.direction);
+  }
+</script>
+
+<script id=collapseToEnd>
+  {
+    const sel = window.getSelection();
+    const p1 = document.getElementById("p1");
+    const textNode = p1.firstChild;
+    
+    const range = document.createRange();
+    range.setStart(textNode, 4);
+    range.setEnd(textNode, 15);
+    
+    sel.removeAllRanges();
+    sel.addRange(range);
+    
+    testing.expectEqual(false, sel.isCollapsed);
+    
+    sel.collapseToEnd();
+    
+    testing.expectEqual(true, sel.isCollapsed);
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual(textNode, sel.anchorNode);
+    testing.expectEqual(15, sel.anchorOffset);
+    testing.expectEqual(15, sel.focusOffset);
+    testing.expectEqual("none", sel.direction);
+  }
+</script>
+
+<script id=extend>
+  {
+    const sel = window.getSelection();
+    const p1 = document.getElementById("p1");
+    const textNode = p1.firstChild;
+    
+    // Start with collapsed selection
+    sel.collapse(textNode, 10);
+    testing.expectEqual(true, sel.isCollapsed);
+    testing.expectEqual(10, sel.anchorOffset);
+    testing.expectEqual("none", sel.direction);
+    
+    // Extend forward
+    sel.extend(textNode, 15);
+    testing.expectEqual(false, sel.isCollapsed);
+    testing.expectEqual(10, sel.anchorOffset);
+    testing.expectEqual(15, sel.focusOffset);
+    testing.expectEqual("forward", sel.direction);
+    
+    // Extend backward from anchor
+    sel.extend(textNode, 5);
+    testing.expectEqual(false, sel.isCollapsed);
+    testing.expectEqual(10, sel.anchorOffset);
+    testing.expectEqual(5, sel.focusOffset);
+    testing.expectEqual("backward", sel.direction);
+    
+    // Extend to same position as anchor
+    sel.extend(textNode, 10);
+    testing.expectEqual(true, sel.isCollapsed);
+    testing.expectEqual(10, sel.anchorOffset);
+    testing.expectEqual(10, sel.focusOffset);
+    testing.expectEqual("forward", sel.direction);
+  }
+</script>
+
+<script id=direction>
+  {
+    const sel = window.getSelection();
+    const p1 = document.getElementById("p1");
+    const textNode = p1.firstChild;
+    
+    // Forward selection
+    sel.collapse(textNode, 5);
+    sel.extend(textNode, 10);
+    testing.expectEqual("forward", sel.direction);
+    testing.expectEqual(5, sel.anchorOffset);
+    testing.expectEqual(10, sel.focusOffset);
+    
+    // Backward selection
+    sel.collapse(textNode, 10);
+    sel.extend(textNode, 5);
+    testing.expectEqual("backward", sel.direction);
+    testing.expectEqual(10, sel.anchorOffset);
+    testing.expectEqual(5, sel.focusOffset);
+    
+    // None (collapsed)
+    sel.collapse(textNode, 7);
+    testing.expectEqual("none", sel.direction);
+  }
+</script>
+
+<script id=containsNode>
+  {
+    const sel = window.getSelection();
+    const nested = document.getElementById("nested");
+    const s1 = document.getElementById("s1");
+    const s2 = document.getElementById("s2");
+    
+    const range = document.createRange();
+    range.selectNodeContents(nested);
+    
+    sel.removeAllRanges();
+    sel.addRange(range);
+    
+    // Full containment (default)
+    testing.expectEqual(true, sel.containsNode(s1, false));
+    testing.expectEqual(true, sel.containsNode(s2, false));
+    testing.expectEqual(false, sel.containsNode(nested, false));
+    
+    // Partial containment
+    testing.expectEqual(true, sel.containsNode(s1, true));
+    testing.expectEqual(true, sel.containsNode(s2, true));
+    testing.expectEqual(true, sel.containsNode(nested, true));
+    
+    // Node outside selection
+    const p1 = document.getElementById("p1");
+    testing.expectEqual(false, sel.containsNode(p1, false));
+    testing.expectEqual(false, sel.containsNode(p1, true));
+  }
+</script>
+
+
+<script id=deleteFromDocument>
+  {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    
+    const p1 = document.getElementById("p1");
+    const textNode = p1.firstChild;
+    const originalText = textNode.textContent;
+    
+    const range = document.createRange();
+    range.setStart(textNode, 4);
+    range.setEnd(textNode, 15);
+    
+    sel.removeAllRanges();
+    sel.addRange(range);
+    
+    sel.deleteFromDocument();
+    
+    // Text should be deleted
+    const expectedText = originalText.slice(0, 4) + originalText.slice(15);
+    testing.expectEqual(expectedText, textNode.textContent);
+    
+    // Selection should be collapsed at deletion point
+    testing.expectEqual(true, sel.isCollapsed);
+    
+    // Restore original text for other tests
+    textNode.textContent = originalText;
+  }
+</script>
+
+<script id=multipleRanges>
+  {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+    
+    const p1 = document.getElementById("p1");
+    const p2 = document.getElementById("p2");
+    
+    const range1 = document.createRange();
+    const range2 = document.createRange();
+    
+    range1.selectNodeContents(p1);
+    range2.selectNodeContents(p2);
+    
+    sel.addRange(range1);
+    sel.addRange(range2);
+    
+    testing.expectEqual(2, sel.rangeCount);
+    
+    testing.expectEqual(p1, sel.anchorNode);
+    testing.expectEqual(p2, sel.focusNode);
+    testing.expectEqual(0, sel.anchorOffset);
+    testing.expectEqual(p2.childNodes.length, sel.focusOffset);
+  }
+</script>
+
+<script id=typeProperty>
+  {
+    const sel = window.getSelection();
+    const p1 = document.getElementById("p1");
+    const textNode = p1.firstChild;
+    
+    // None type
+    sel.removeAllRanges();
+    testing.expectEqual("None", sel.type);
+    
+    // Caret type (collapsed)
+    sel.collapse(textNode, 5);
+    testing.expectEqual("Caret", sel.type);
+    
+    // Range type (not collapsed)
+    sel.extend(textNode, 10);
+    testing.expectEqual("Range", sel.type);
+  }
+</script>

From 505e0799daf839d9cebc37b1a7140b6d14ac68c6 Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Wed, 14 Jan 2026 07:27:13 -0800
Subject: [PATCH 04/17] add remaining functions to Selection

---
 src/browser/tests/selection.html | 162 +++++++++++++++++++++++++++++++
 src/browser/webapi/Selection.zig | 150 ++++++++++++++++++++++++----
 2 files changed, 295 insertions(+), 17 deletions(-)

diff --git a/src/browser/tests/selection.html b/src/browser/tests/selection.html
index ceae479f..9fd614f0 100644
--- a/src/browser/tests/selection.html
+++ b/src/browser/tests/selection.html
@@ -406,3 +406,165 @@
     testing.expectEqual("Range", sel.type);
   }
 </script>
+
+<script id=selectAllChildren>
+  {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+
+    const nested = document.getElementById("nested");
+    const s1 = document.getElementById("s1");
+    const s2 = document.getElementById("s2");
+
+    // Select all children of nested div
+    sel.selectAllChildren(nested);
+
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual("Range", sel.type);
+    testing.expectEqual(false, sel.isCollapsed);
+
+    // Anchor and focus should be on the parent node
+    testing.expectEqual(nested, sel.anchorNode);
+    testing.expectEqual(nested, sel.focusNode);
+
+    // Should start at offset 0 (before first child)
+    testing.expectEqual(0, sel.anchorOffset);
+
+    const childrenCount = nested.childNodes.length;
+
+    // Should end at offset equal to number of children (after last child)
+    testing.expectEqual(childrenCount, sel.focusOffset);
+
+    // Direction should be none
+    testing.expectEqual("none", sel.direction);
+
+    // Should contain the children (fully)
+    testing.expectEqual(true, sel.containsNode(s1, false));
+    testing.expectEqual(true, sel.containsNode(s2, false));
+
+    // Should not fully contain the parent itself
+    testing.expectEqual(false, sel.containsNode(nested, false));
+
+    // But should partially contain the parent
+    testing.expectEqual(true, sel.containsNode(nested, true));
+
+    // Verify the range
+    const range = sel.getRangeAt(0);
+    testing.expectEqual(nested, range.startContainer);
+    testing.expectEqual(nested, range.endContainer);
+    testing.expectEqual(0, range.startOffset);
+    testing.expectEqual(childrenCount, range.endOffset);
+  }
+</script>
+
+<script id=selectAllChildrenEmpty>
+  {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+
+    // Create an empty element
+    const empty = document.createElement("div");
+    document.body.appendChild(empty);
+
+    // Select all children of empty element
+    sel.selectAllChildren(empty);
+
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual("Caret", sel.type); // Collapsed because no children
+    testing.expectEqual(true, sel.isCollapsed);
+    testing.expectEqual(empty, sel.anchorNode);
+    testing.expectEqual(0, sel.anchorOffset);
+    testing.expectEqual(0, sel.focusOffset);
+
+    // Clean up
+    document.body.removeChild(empty);
+  }
+</script>
+
+<script id=selectAllChildrenReplacesSelection>
+  {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+
+    // Start with an existing selection
+    const p1 = document.getElementById("p1");
+    sel.selectAllChildren(p1);
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual(p1, sel.anchorNode);
+
+    // selectAllChildren should replace the existing selection
+    const p2 = document.getElementById("p2");
+    sel.selectAllChildren(p2);
+
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual(p2, sel.anchorNode);
+    testing.expectEqual(p2, sel.focusNode);
+
+    // Verify old selection is gone
+    const range = sel.getRangeAt(0);
+    testing.expectEqual(p2, range.startContainer);
+    testing.expectEqual(false, p1 == range.startContainer);
+  }
+</script>
+
+<script id=setBaseAndExtent>
+  {
+    const sel = window.getSelection();
+    sel.removeAllRanges();
+
+    const p1 = document.getElementById("p1");
+    const textNode = p1.firstChild;
+
+    // Forward selection (anchor before focus)
+    sel.setBaseAndExtent(textNode, 4, textNode, 15);
+
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual("Range", sel.type);
+    testing.expectEqual(false, sel.isCollapsed);
+    testing.expectEqual(textNode, sel.anchorNode);
+    testing.expectEqual(4, sel.anchorOffset);
+    testing.expectEqual(textNode, sel.focusNode);
+    testing.expectEqual(15, sel.focusOffset);
+    testing.expectEqual("forward", sel.direction);
+
+    // Backward selection (anchor after focus)
+    sel.setBaseAndExtent(textNode, 15, textNode, 4);
+
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual("Range", sel.type);
+    testing.expectEqual(textNode, sel.anchorNode);
+    testing.expectEqual(15, sel.anchorOffset);
+    testing.expectEqual(textNode, sel.focusNode);
+    testing.expectEqual(4, sel.focusOffset);
+    testing.expectEqual("backward", sel.direction);
+
+    // Collapsed selection (anchor equals focus)
+    sel.setBaseAndExtent(textNode, 10, textNode, 10);
+
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual("Caret", sel.type);
+    testing.expectEqual(true, sel.isCollapsed);
+    testing.expectEqual(10, sel.anchorOffset);
+    testing.expectEqual(10, sel.focusOffset);
+    testing.expectEqual("none", sel.direction);
+
+    // Across different nodes
+    const p2 = document.getElementById("p2");
+    const textNode2 = p2.firstChild;
+
+    sel.setBaseAndExtent(textNode, 4, textNode2, 5);
+
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual(textNode, sel.anchorNode);
+    testing.expectEqual(4, sel.anchorOffset);
+    testing.expectEqual(textNode2, sel.focusNode);
+    testing.expectEqual(5, sel.focusOffset);
+    testing.expectEqual("forward", sel.direction);
+
+    // Should replace existing selection
+    sel.setBaseAndExtent(textNode, 0, textNode, 3);
+    testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual(0, sel.anchorOffset);
+    testing.expectEqual(3, sel.focusOffset);
+  }
+</script>
diff --git a/src/browser/webapi/Selection.zig b/src/browser/webapi/Selection.zig
index 164a51a2..593ba4b9 100644
--- a/src/browser/webapi/Selection.zig
+++ b/src/browser/webapi/Selection.zig
@@ -108,9 +108,15 @@ pub fn removeRange(self: *Selection, range: *Range) void {
     }
 }
 
-pub fn removeAllRanges(self: *Selection) void {
+fn removeAllRangesInner(self: *Selection, reset_direction: bool) void {
     self._ranges.clearRetainingCapacity();
-    self._direction = .none;
+    if (reset_direction) {
+        self._direction = .none;
+    }
+}
+
+pub fn removeAllRanges(self: *Selection) void {
+    self.removeAllRangesInner(true);
 }
 
 pub fn collapseToEnd(self: *Selection, page: *Page) !void {
@@ -124,9 +130,8 @@ pub fn collapseToEnd(self: *Selection, page: *Page) !void {
     try range.setStart(last_node, last_offset);
     try range.setEnd(last_node, last_offset);
 
-    self.removeAllRanges();
+    self.removeAllRangesInner(true);
     try self._ranges.append(page.arena, range);
-    self._direction = .none;
 }
 
 pub fn collapseToStart(self: *Selection, page: *Page) !void {
@@ -140,7 +145,7 @@ pub fn collapseToStart(self: *Selection, page: *Page) !void {
     try range.setStart(first_node, first_offset);
     try range.setStart(first_node, first_offset);
 
-    self.removeAllRanges();
+    self.removeAllRangesInner(true);
     try self._ranges.append(page.arena, range);
     self._direction = .none;
 }
@@ -209,8 +214,6 @@ pub fn extend(self: *Selection, node: *Node, _offset: ?u32) !void {
     }
 }
 
-// TODO: getComposedRanges
-
 pub fn getRangeAt(self: *Selection, index: u32) !*Range {
     if (index >= self.getRangeCount()) {
         return error.IndexSizeError;
@@ -219,15 +222,129 @@ pub fn getRangeAt(self: *Selection, index: u32) !*Range {
     return self._ranges.items[index];
 }
 
-// TODO: modify
+const ModifyAlter = enum {
+    move,
+    extend,
 
-// TODO: selectAllChildren
+    pub fn fromString(str: []const u8) ?ModifyAlter {
+        return std.meta.stringToEnum(ModifyAlter, str);
+    }
+};
 
-// TODO: setBaseAndExtent
+const ModifyDirection = enum {
+    forward,
+    backward,
+    left,
+    right,
+
+    pub fn fromString(str: []const u8) ?ModifyDirection {
+        return std.meta.stringToEnum(ModifyDirection, str);
+    }
+};
+
+const ModifyGranularity = enum {
+    character,
+    word,
+    line,
+    paragraph,
+    lineboundary,
+    // Firefox doesn't implement:
+    // - sentence
+    // - paragraph
+    // - sentenceboundary
+    // - paragraphboundary
+    // - documentboundary
+    // so we won't either for now.
+
+    pub fn fromString(str: []const u8) ?ModifyGranularity {
+        return std.meta.stringToEnum(ModifyGranularity, str);
+    }
+};
+
+pub fn modify(
+    self: *Selection,
+    alter_str: []const u8,
+    direction_str: []const u8,
+    granularity_str: []const u8,
+) !void {
+    const alter = ModifyAlter.fromString(alter_str) orelse return error.InvalidParams;
+    const direction = ModifyDirection.fromString(direction_str) orelse return error.InvalidParams;
+    const granularity = ModifyGranularity.fromString(granularity_str) orelse return error.InvalidParams;
+
+    if (self._ranges.items.len == 0) return;
+
+    log.warn(.not_implemented, "Selection.modify", .{
+        .alter = alter,
+        .direction = direction,
+        .granularity = granularity,
+    });
+}
+
+pub fn selectAllChildren(self: *Selection, parent: *Node, page: *Page) !void {
+    if (parent._type == .document_type) {
+        return error.InvalidNodeType;
+    }
+
+    const range = try Range.init(page);
+    try range.setStart(parent, 0);
+
+    const child_count = parent.getLength();
+    try range.setEnd(parent, @intCast(child_count));
+
+    self.removeAllRangesInner(true);
+    try self._ranges.append(page.arena, range);
+}
+
+pub fn setBaseAndExtent(
+    self: *Selection,
+    anchor_node: *Node,
+    anchor_offset: u32,
+    focus_node: *Node,
+    focus_offset: u32,
+    page: *Page,
+) !void {
+    if (anchor_offset > anchor_node.getLength()) {
+        return error.IndexSizeError;
+    }
+
+    if (focus_offset > focus_node.getLength()) {
+        return error.IndexSizeError;
+    }
+
+    const cmp = AbstractRange.compareBoundaryPoints(
+        anchor_node,
+        anchor_offset,
+        focus_node,
+        focus_offset,
+    );
+
+    const range = try Range.init(page);
+
+    switch (cmp) {
+        .before => {
+            try range.setStart(anchor_node, anchor_offset);
+            try range.setEnd(focus_node, focus_offset);
+            self._direction = .forward;
+        },
+        .after => {
+            try range.setStart(focus_node, focus_offset);
+            try range.setEnd(anchor_node, anchor_offset);
+            self._direction = .backward;
+        },
+        .equal => {
+            try range.setStart(anchor_node, anchor_offset);
+            try range.setEnd(anchor_node, anchor_offset);
+            self._direction = .none;
+        },
+    }
+
+    self.removeAllRangesInner(false);
+    try self._ranges.append(page.arena, range);
+}
 
 pub fn setPosition(self: *Selection, _node: ?*Node, _offset: ?u32, page: *Page) !void {
     const node = _node orelse {
-        self.removeAllRanges();
+        self.removeAllRangesInner(true);
         return;
     };
 
@@ -241,9 +358,8 @@ pub fn setPosition(self: *Selection, _node: ?*Node, _offset: ?u32, page: *Page)
     try range.setStart(node, offset);
     try range.setEnd(node, offset);
 
-    self.removeAllRanges();
+    self.removeAllRangesInner(true);
     try self._ranges.append(page.arena, range);
-    self._direction = .none;
 }
 
 pub const JsApi = struct {
@@ -272,13 +388,13 @@ pub const JsApi = struct {
     pub const deleteFromDocument = bridge.function(Selection.deleteFromDocument, .{});
     pub const empty = bridge.function(Selection.removeAllRanges, .{});
     pub const extend = bridge.function(Selection.extend, .{ .dom_exception = true });
-    // getComposedRanges
+    // unimplemented: getComposedRanges
     pub const getRangeAt = bridge.function(Selection.getRangeAt, .{ .dom_exception = true });
-    // modify
+    pub const modify = bridge.function(Selection.modify, .{});
     pub const removeAllRanges = bridge.function(Selection.removeAllRanges, .{});
     pub const removeRange = bridge.function(Selection.removeRange, .{});
-    // selectAllChildren
-    // setBaseAndExtent
+    pub const selectAllChildren = bridge.function(Selection.selectAllChildren, .{});
+    pub const setBaseAndExtent = bridge.function(Selection.setBaseAndExtent, .{ .dom_exception = true });
     pub const setPosition = bridge.function(Selection.setPosition, .{});
 };
 

From 8291044abc955c3c616ee2b1ef4d35a9ebdd96ba Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Thu, 15 Jan 2026 23:01:24 -0800
Subject: [PATCH 05/17] fix collapseToStart on Selection

---
 src/browser/webapi/Selection.zig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/webapi/Selection.zig b/src/browser/webapi/Selection.zig
index 593ba4b9..36d25eb8 100644
--- a/src/browser/webapi/Selection.zig
+++ b/src/browser/webapi/Selection.zig
@@ -143,7 +143,7 @@ pub fn collapseToStart(self: *Selection, page: *Page) !void {
 
     const range = try Range.init(page);
     try range.setStart(first_node, first_offset);
-    try range.setStart(first_node, first_offset);
+    try range.setEnd(first_node, first_offset);
 
     self.removeAllRangesInner(true);
     try self._ranges.append(page.arena, range);

From fa3a23134e02a94ac0cb8aa2c710d5386045a775 Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Thu, 15 Jan 2026 23:15:27 -0800
Subject: [PATCH 06/17] properly return NotFoundError on removeRange

---
 src/browser/tests/selection.html | 2 +-
 src/browser/webapi/Selection.zig | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/browser/tests/selection.html b/src/browser/tests/selection.html
index 9fd614f0..be7ba464 100644
--- a/src/browser/tests/selection.html
+++ b/src/browser/tests/selection.html
@@ -143,7 +143,7 @@
     testing.expectEqual(range2, sel.getRangeAt(0));
     
     // Removing non-existent range does nothing
-    sel.removeRange(range1);
+    testing.expectError('NotFoundError', () => { sel.removeRange(range1); });
     testing.expectEqual(1, sel.rangeCount);
   }
 </script>
diff --git a/src/browser/webapi/Selection.zig b/src/browser/webapi/Selection.zig
index 36d25eb8..6bc0981b 100644
--- a/src/browser/webapi/Selection.zig
+++ b/src/browser/webapi/Selection.zig
@@ -99,13 +99,15 @@ pub fn addRange(self: *Selection, range: *Range, page: *Page) !void {
     return try self._ranges.append(page.arena, range);
 }
 
-pub fn removeRange(self: *Selection, range: *Range) void {
+pub fn removeRange(self: *Selection, range: *Range) !void {
     for (self._ranges.items, 0..) |r, i| {
         if (r == range) {
             _ = self._ranges.orderedRemove(i);
             return;
         }
     }
+
+    return error.NotFound;
 }
 
 fn removeAllRangesInner(self: *Selection, reset_direction: bool) void {
@@ -392,7 +394,7 @@ pub const JsApi = struct {
     pub const getRangeAt = bridge.function(Selection.getRangeAt, .{ .dom_exception = true });
     pub const modify = bridge.function(Selection.modify, .{});
     pub const removeAllRanges = bridge.function(Selection.removeAllRanges, .{});
-    pub const removeRange = bridge.function(Selection.removeRange, .{});
+    pub const removeRange = bridge.function(Selection.removeRange, .{ .dom_exception = true });
     pub const selectAllChildren = bridge.function(Selection.selectAllChildren, .{});
     pub const setBaseAndExtent = bridge.function(Selection.setBaseAndExtent, .{ .dom_exception = true });
     pub const setPosition = bridge.function(Selection.setPosition, .{});

From 12670a3153f59d12aac541d7b6437e66a6aad80f Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Thu, 15 Jan 2026 23:22:17 -0800
Subject: [PATCH 07/17] fix extend direction in Selection

---
 src/browser/tests/selection.html | 2 +-
 src/browser/webapi/Selection.zig | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/browser/tests/selection.html b/src/browser/tests/selection.html
index be7ba464..af6321a1 100644
--- a/src/browser/tests/selection.html
+++ b/src/browser/tests/selection.html
@@ -270,7 +270,7 @@
     testing.expectEqual(true, sel.isCollapsed);
     testing.expectEqual(10, sel.anchorOffset);
     testing.expectEqual(10, sel.focusOffset);
-    testing.expectEqual("forward", sel.direction);
+    testing.expectEqual("none", sel.direction);
   }
 </script>
 
diff --git a/src/browser/webapi/Selection.zig b/src/browser/webapi/Selection.zig
index 6bc0981b..76013001 100644
--- a/src/browser/webapi/Selection.zig
+++ b/src/browser/webapi/Selection.zig
@@ -208,11 +208,16 @@ pub fn extend(self: *Selection, node: *Node, _offset: ?u32) !void {
             try range.setEnd(old_anchor, old_anchor_offset);
             self._direction = .backward;
         },
-        else => {
+        .after => {
             try range.setStart(old_anchor, old_anchor_offset);
             try range.setEnd(node, offset);
             self._direction = .forward;
         },
+        .equal => {
+            try range.setStart(old_anchor, old_anchor_offset);
+            try range.setEnd(old_anchor, old_anchor_offset);
+            self._direction = .none;
+        },
     }
 }
 

From 5ebf82874b73b3b2db198d298b798ef85c991c03 Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Fri, 16 Jan 2026 00:21:18 -0800
Subject: [PATCH 08/17] fix selection test inconsistency

---
 src/browser/tests/selection.html | 63 +++++++++-----------------------
 1 file changed, 18 insertions(+), 45 deletions(-)

diff --git a/src/browser/tests/selection.html b/src/browser/tests/selection.html
index af6321a1..4aad996d 100644
--- a/src/browser/tests/selection.html
+++ b/src/browser/tests/selection.html
@@ -102,7 +102,10 @@
     range2.selectNodeContents(p2);
     
     sel.addRange(range2);
-    testing.expectEqual(2, sel.rangeCount);
+
+    // Firefox does support multiple ranges so it will be 2 here instead of 1.
+    // Chrome and Safari don't so we don't either.
+    testing.expectEqual(1, sel.rangeCount);
   }
 </script>
 
@@ -136,15 +139,17 @@
     
     sel.addRange(range1);
     sel.addRange(range2);
-    testing.expectEqual(2, sel.rangeCount);
-    
-    sel.removeRange(range1);
+
+    // Firefox does support multiple ranges so it will be 2 here instead of 1.
+    // Chrome and Safari don't so we don't either.
     testing.expectEqual(1, sel.rangeCount);
-    testing.expectEqual(range2, sel.getRangeAt(0));
     
-    // Removing non-existent range does nothing
-    testing.expectError('NotFoundError', () => { sel.removeRange(range1); });
+    // Chrome doesn't throw an error here even though the spec defines it:
+    // https://w3c.github.io/selection-api/#dom-selection-removerange
+    testing.expectError('NotFoundError', () => { sel.removeRange(range2); });
+
     testing.expectEqual(1, sel.rangeCount);
+    testing.expectEqual(range1, sel.getRangeAt(0));
   }
 </script>
 
@@ -161,7 +166,10 @@
     
     sel.addRange(range1);
     sel.addRange(range2);
-    testing.expectEqual(2, sel.rangeCount);
+
+    // Firefox does support multiple ranges so it will be 2 here instead of 1.
+    // Chrome and Safari don't so we don't either.
+    testing.expectEqual(1, sel.rangeCount);
     
     sel.removeAllRanges();
     testing.expectEqual(0, sel.rangeCount);
@@ -312,12 +320,7 @@
     
     sel.removeAllRanges();
     sel.addRange(range);
-    
-    // Full containment (default)
-    testing.expectEqual(true, sel.containsNode(s1, false));
-    testing.expectEqual(true, sel.containsNode(s2, false));
-    testing.expectEqual(false, sel.containsNode(nested, false));
-    
+
     // Partial containment
     testing.expectEqual(true, sel.containsNode(s1, true));
     testing.expectEqual(true, sel.containsNode(s2, true));
@@ -361,32 +364,6 @@
   }
 </script>
 
-<script id=multipleRanges>
-  {
-    const sel = window.getSelection();
-    sel.removeAllRanges();
-    
-    const p1 = document.getElementById("p1");
-    const p2 = document.getElementById("p2");
-    
-    const range1 = document.createRange();
-    const range2 = document.createRange();
-    
-    range1.selectNodeContents(p1);
-    range2.selectNodeContents(p2);
-    
-    sel.addRange(range1);
-    sel.addRange(range2);
-    
-    testing.expectEqual(2, sel.rangeCount);
-    
-    testing.expectEqual(p1, sel.anchorNode);
-    testing.expectEqual(p2, sel.focusNode);
-    testing.expectEqual(0, sel.anchorOffset);
-    testing.expectEqual(p2.childNodes.length, sel.focusOffset);
-  }
-</script>
-
 <script id=typeProperty>
   {
     const sel = window.getSelection();
@@ -436,11 +413,7 @@
     testing.expectEqual(childrenCount, sel.focusOffset);
 
     // Direction should be none
-    testing.expectEqual("none", sel.direction);
-
-    // Should contain the children (fully)
-    testing.expectEqual(true, sel.containsNode(s1, false));
-    testing.expectEqual(true, sel.containsNode(s2, false));
+    testing.expectEqual("forward", sel.direction);
 
     // Should not fully contain the parent itself
     testing.expectEqual(false, sel.containsNode(nested, false));

From 4ecc59d0c02931195db61b92f64f621d0ea52096 Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Fri, 16 Jan 2026 00:31:04 -0800
Subject: [PATCH 09/17] Fix a lot of Selection Issues

This uses the Chrome/Safari approach of only
having a single Range exist in the Selection.
This also better follows the W3C spec of Selection
---
 src/browser/webapi/Selection.zig | 212 +++++++++++++++----------------
 1 file changed, 105 insertions(+), 107 deletions(-)

diff --git a/src/browser/webapi/Selection.zig b/src/browser/webapi/Selection.zig
index 76013001..09185c54 100644
--- a/src/browser/webapi/Selection.zig
+++ b/src/browser/webapi/Selection.zig
@@ -25,30 +25,39 @@ const Range = @import("Range.zig");
 const AbstractRange = @import("AbstractRange.zig");
 const Node = @import("Node.zig");
 
+/// https://w3c.github.io/selection-api/
 const Selection = @This();
 
 const SelectionDirection = enum { backward, forward, none };
 
-_ranges: std.ArrayList(*Range) = .empty,
+_range: ?*Range = null,
 _direction: SelectionDirection = .none,
 
 pub const init: Selection = .{};
 
-pub fn getAnchorNode(self: *const Selection) ?*Node {
-    if (self._ranges.items.len == 0) return null;
+fn isInTree(self: *const Selection) bool {
+    if (self._range == null) return false;
+    return self.getAnchorNode().?.isConnected() and self.getFocusNode().?.isConnected();
+}
 
-    return switch (self._direction) {
-        .backward => self._ranges.getLast().asAbstractRange().getEndContainer(),
-        .forward, .none => self._ranges.items[0].asAbstractRange().getStartContainer(),
+pub fn getAnchorNode(self: *const Selection) ?*Node {
+    const range = self._range orelse return null;
+
+    const node = switch (self._direction) {
+        .backward => range.asAbstractRange().getEndContainer(),
+        .forward, .none => range.asAbstractRange().getStartContainer(),
     };
+
+    return if (node.isConnected()) node else null;
 }
 
 pub fn getAnchorOffset(self: *const Selection) u32 {
-    if (self._ranges.items.len == 0) return 0;
+    const range = self._range orelse return 0;
+    if (!self.getAnchorNode().?.isConnected()) return 0;
 
     return switch (self._direction) {
-        .backward => self._ranges.getLast().asAbstractRange().getEndOffset(),
-        .forward, .none => self._ranges.items[0].asAbstractRange().getStartOffset(),
+        .backward => range.asAbstractRange().getEndOffset(),
+        .forward, .none => range.asAbstractRange().getStartOffset(),
     };
 }
 
@@ -57,117 +66,108 @@ pub fn getDirection(self: *const Selection) []const u8 {
 }
 
 pub fn getFocusNode(self: *const Selection) ?*Node {
-    if (self._ranges.items.len == 0) return null;
+    const range = self._range orelse return null;
 
-    return switch (self._direction) {
-        .backward => self._ranges.items[0].asAbstractRange().getStartContainer(),
-        .forward, .none => self._ranges.getLast().asAbstractRange().getEndContainer(),
+    const node = switch (self._direction) {
+        .backward => range.asAbstractRange().getStartContainer(),
+        .forward, .none => range.asAbstractRange().getEndContainer(),
     };
+
+    return if (node.isConnected()) node else null;
 }
 
 pub fn getFocusOffset(self: *const Selection) u32 {
-    if (self._ranges.items.len == 0) return 0;
+    const range = self._range orelse return 0;
+    if (!self.getFocusNode().?.isConnected()) return 0;
 
     return switch (self._direction) {
-        .backward => self._ranges.items[0].asAbstractRange().getStartOffset(),
-        .forward, .none => self._ranges.getLast().asAbstractRange().getEndOffset(),
+        .backward => range.asAbstractRange().getStartOffset(),
+        .forward, .none => range.asAbstractRange().getEndOffset(),
     };
 }
 
 pub fn getIsCollapsed(self: *const Selection) bool {
-    if (self._ranges.items.len == 0) return true;
-    if (self._ranges.items.len > 1) return false;
-
-    return self._ranges.items[0].asAbstractRange().getCollapsed();
+    const range = self._range orelse return true;
+    return range.asAbstractRange().getCollapsed();
 }
 
 pub fn getRangeCount(self: *const Selection) u32 {
-    return @intCast(self._ranges.items.len);
+    if (self._range == null) return 0;
+    if (!self.isInTree()) return 0;
+
+    return 1;
 }
 
 pub fn getType(self: *const Selection) []const u8 {
-    if (self._ranges.items.len == 0) return "None";
+    if (self._range == null) return "None";
+    if (!self.isInTree()) return "None";
     if (self.getIsCollapsed()) return "Caret";
     return "Range";
 }
 
-pub fn addRange(self: *Selection, range: *Range, page: *Page) !void {
-    for (self._ranges.items) |r| {
-        if (r == range) return;
-    }
-
-    return try self._ranges.append(page.arena, range);
+pub fn addRange(self: *Selection, range: *Range) !void {
+    if (self._range != null) return;
+    self._range = range;
 }
 
 pub fn removeRange(self: *Selection, range: *Range) !void {
-    for (self._ranges.items, 0..) |r, i| {
-        if (r == range) {
-            _ = self._ranges.orderedRemove(i);
-            return;
-        }
-    }
-
-    return error.NotFound;
-}
-
-fn removeAllRangesInner(self: *Selection, reset_direction: bool) void {
-    self._ranges.clearRetainingCapacity();
-    if (reset_direction) {
-        self._direction = .none;
+    if (self._range == range) {
+        self._range = null;
+        return;
+    } else {
+        return error.NotFound;
     }
 }
 
 pub fn removeAllRanges(self: *Selection) void {
-    self.removeAllRangesInner(true);
+    self._range = null;
+    self._direction = .none;
 }
 
-pub fn collapseToEnd(self: *Selection, page: *Page) !void {
-    if (self._ranges.items.len == 0) return;
+pub fn collapseToEnd(self: *Selection) !void {
+    const range = self._range orelse return;
 
-    const last_range = self._ranges.getLast().asAbstractRange();
-    const last_node = last_range.getEndContainer();
-    const last_offset = last_range.getEndOffset();
+    const abstract = range.asAbstractRange();
+    const last_node = abstract.getEndContainer();
+    const last_offset = abstract.getEndOffset();
 
-    const range = try Range.init(page);
     try range.setStart(last_node, last_offset);
     try range.setEnd(last_node, last_offset);
-
-    self.removeAllRangesInner(true);
-    try self._ranges.append(page.arena, range);
+    self._direction = .none;
 }
 
-pub fn collapseToStart(self: *Selection, page: *Page) !void {
-    if (self._ranges.items.len == 0) return;
+pub fn collapseToStart(self: *Selection) !void {
+    const range = self._range orelse return;
 
-    const first_range = self._ranges.items[0].asAbstractRange();
-    const first_node = first_range.getStartContainer();
-    const first_offset = first_range.getStartOffset();
+    const abstract = range.asAbstractRange();
+    const first_node = abstract.getStartContainer();
+    const first_offset = abstract.getStartOffset();
 
-    const range = try Range.init(page);
     try range.setStart(first_node, first_offset);
     try range.setEnd(first_node, first_offset);
-
-    self.removeAllRangesInner(true);
-    try self._ranges.append(page.arena, range);
     self._direction = .none;
 }
 
 pub fn containsNode(self: *const Selection, node: *Node, partial: bool) !bool {
-    for (self._ranges.items) |r| {
-        if (partial) {
-            if (r.intersectsNode(node)) {
-                return true;
-            }
-        } else {
-            const parent = node.parentNode() orelse continue;
-            const offset = parent.getChildIndex(node) orelse continue;
+    const range = self._range orelse return false;
 
-            const start_in = r.isPointInRange(parent, offset) catch false;
-            const end_in = r.isPointInRange(parent, offset + 1) catch false;
+    if (partial) {
+        if (range.intersectsNode(node)) {
+            return true;
+        }
+    } else {
+        const abstract = range.asAbstractRange();
+        if (abstract.getStartContainer() == node or abstract.getEndContainer() == node) {
+            return false;
+        }
 
-            if (start_in and end_in) {
-                return true;
-            }
+        const parent = node.parentNode() orelse return false;
+        const offset = parent.getChildIndex(node) orelse return false;
+        const start_cmp = range.comparePoint(parent, offset) catch return false;
+        const end_cmp = range.comparePoint(parent, offset + 1) catch return false;
+
+        if (start_cmp <= 0 and end_cmp >= 0) {
+            return true;
         }
     }
 
@@ -175,23 +175,19 @@ pub fn containsNode(self: *const Selection, node: *Node, partial: bool) !bool {
 }
 
 pub fn deleteFromDocument(self: *Selection, page: *Page) !void {
-    if (self._ranges.items.len == 0) return;
+    const range = self._range orelse return;
 
-    try self._ranges.items[0].deleteContents(page);
+    try range.deleteContents(page);
 }
 
-pub fn extend(self: *Selection, node: *Node, _offset: ?u32) !void {
-    if (self._ranges.items.len == 0) {
-        return error.InvalidState;
-    }
-
+pub fn extend(self: *Selection, node: *Node, _offset: ?u32, page: *Page) !void {
+    const range = self._range orelse return error.InvalidState;
     const offset = _offset orelse 0;
 
     if (offset > node.getLength()) {
         return error.IndexSizeError;
     }
 
-    const range = self._ranges.items[0];
     const old_anchor = switch (self._direction) {
         .backward => range.asAbstractRange().getEndContainer(),
         .forward, .none => range.asAbstractRange().getStartContainer(),
@@ -201,32 +197,36 @@ pub fn extend(self: *Selection, node: *Node, _offset: ?u32) !void {
         .forward, .none => range.asAbstractRange().getStartOffset(),
     };
 
+    const new_range = try Range.init(page);
+
     const cmp = AbstractRange.compareBoundaryPoints(node, offset, old_anchor, old_anchor_offset);
     switch (cmp) {
         .before => {
-            try range.setStart(node, offset);
-            try range.setEnd(old_anchor, old_anchor_offset);
+            try new_range.setStart(node, offset);
+            try new_range.setEnd(old_anchor, old_anchor_offset);
             self._direction = .backward;
         },
         .after => {
-            try range.setStart(old_anchor, old_anchor_offset);
-            try range.setEnd(node, offset);
+            try new_range.setStart(old_anchor, old_anchor_offset);
+            try new_range.setEnd(node, offset);
             self._direction = .forward;
         },
         .equal => {
-            try range.setStart(old_anchor, old_anchor_offset);
-            try range.setEnd(old_anchor, old_anchor_offset);
+            try new_range.setStart(old_anchor, old_anchor_offset);
+            try new_range.setEnd(old_anchor, old_anchor_offset);
             self._direction = .none;
         },
     }
+
+    self._range = new_range;
 }
 
 pub fn getRangeAt(self: *Selection, index: u32) !*Range {
-    if (index >= self.getRangeCount()) {
-        return error.IndexSizeError;
-    }
+    if (index != 0) return error.IndexSizeError;
+    if (!self.isInTree()) return error.IndexSizeError;
+    const range = self._range orelse return error.IndexSizeError;
 
-    return self._ranges.items[index];
+    return range;
 }
 
 const ModifyAlter = enum {
@@ -278,7 +278,7 @@ pub fn modify(
     const direction = ModifyDirection.fromString(direction_str) orelse return error.InvalidParams;
     const granularity = ModifyGranularity.fromString(granularity_str) orelse return error.InvalidParams;
 
-    if (self._ranges.items.len == 0) return;
+    _ = self._range orelse return;
 
     log.warn(.not_implemented, "Selection.modify", .{
         .alter = alter,
@@ -288,9 +288,7 @@ pub fn modify(
 }
 
 pub fn selectAllChildren(self: *Selection, parent: *Node, page: *Page) !void {
-    if (parent._type == .document_type) {
-        return error.InvalidNodeType;
-    }
+    if (parent._type == .document_type) return error.InvalidNodeTypeError;
 
     const range = try Range.init(page);
     try range.setStart(parent, 0);
@@ -298,8 +296,8 @@ pub fn selectAllChildren(self: *Selection, parent: *Node, page: *Page) !void {
     const child_count = parent.getLength();
     try range.setEnd(parent, @intCast(child_count));
 
-    self.removeAllRangesInner(true);
-    try self._ranges.append(page.arena, range);
+    self._range = range;
+    self._direction = .forward;
 }
 
 pub fn setBaseAndExtent(
@@ -345,18 +343,18 @@ pub fn setBaseAndExtent(
         },
     }
 
-    self.removeAllRangesInner(false);
-    try self._ranges.append(page.arena, range);
+    self._range = range;
 }
 
-pub fn setPosition(self: *Selection, _node: ?*Node, _offset: ?u32, page: *Page) !void {
+pub fn collapse(self: *Selection, _node: ?*Node, _offset: ?u32, page: *Page) !void {
     const node = _node orelse {
-        self.removeAllRangesInner(true);
+        self.removeAllRanges();
         return;
     };
 
-    const offset = _offset orelse 0;
+    if (node._type == .document_type) return error.InvalidNodeType;
 
+    const offset = _offset orelse 0;
     if (offset > node.getLength()) {
         return error.IndexSizeError;
     }
@@ -365,8 +363,8 @@ pub fn setPosition(self: *Selection, _node: ?*Node, _offset: ?u32, page: *Page)
     try range.setStart(node, offset);
     try range.setEnd(node, offset);
 
-    self.removeAllRangesInner(true);
-    try self._ranges.append(page.arena, range);
+    self._range = range;
+    self._direction = .none;
 }
 
 pub const JsApi = struct {
@@ -388,7 +386,7 @@ pub const JsApi = struct {
     pub const @"type" = bridge.accessor(Selection.getType, null, .{});
 
     pub const addRange = bridge.function(Selection.addRange, .{});
-    pub const collapse = bridge.function(Selection.setPosition, .{ .dom_exception = true });
+    pub const collapse = bridge.function(Selection.collapse, .{ .dom_exception = true });
     pub const collapseToEnd = bridge.function(Selection.collapseToEnd, .{});
     pub const collapseToStart = bridge.function(Selection.collapseToStart, .{});
     pub const containsNode = bridge.function(Selection.containsNode, .{});
@@ -402,7 +400,7 @@ pub const JsApi = struct {
     pub const removeRange = bridge.function(Selection.removeRange, .{ .dom_exception = true });
     pub const selectAllChildren = bridge.function(Selection.selectAllChildren, .{});
     pub const setBaseAndExtent = bridge.function(Selection.setBaseAndExtent, .{ .dom_exception = true });
-    pub const setPosition = bridge.function(Selection.setPosition, .{});
+    pub const setPosition = bridge.function(Selection.collapse, .{});
 };
 
 const testing = @import("../../testing.zig");

From f56d3bd193c6657a8cae6af0f3ad627fde7ba091 Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Fri, 16 Jan 2026 00:48:07 -0800
Subject: [PATCH 10/17] do not modify old range in collapseToX

---
 src/browser/webapi/Selection.zig | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/browser/webapi/Selection.zig b/src/browser/webapi/Selection.zig
index 09185c54..8f582c72 100644
--- a/src/browser/webapi/Selection.zig
+++ b/src/browser/webapi/Selection.zig
@@ -124,27 +124,33 @@ pub fn removeAllRanges(self: *Selection) void {
     self._direction = .none;
 }
 
-pub fn collapseToEnd(self: *Selection) !void {
+pub fn collapseToEnd(self: *Selection, page: *Page) !void {
     const range = self._range orelse return;
 
     const abstract = range.asAbstractRange();
     const last_node = abstract.getEndContainer();
     const last_offset = abstract.getEndOffset();
 
-    try range.setStart(last_node, last_offset);
-    try range.setEnd(last_node, last_offset);
+    const new_range = try Range.init(page);
+    try new_range.setStart(last_node, last_offset);
+    try new_range.setEnd(last_node, last_offset);
+
+    self._range = new_range;
     self._direction = .none;
 }
 
-pub fn collapseToStart(self: *Selection) !void {
+pub fn collapseToStart(self: *Selection, page: *Page) !void {
     const range = self._range orelse return;
 
     const abstract = range.asAbstractRange();
     const first_node = abstract.getStartContainer();
     const first_offset = abstract.getStartOffset();
 
-    try range.setStart(first_node, first_offset);
-    try range.setEnd(first_node, first_offset);
+    const new_range = try Range.init(page);
+    try new_range.setStart(first_node, first_offset);
+    try new_range.setEnd(first_node, first_offset);
+
+    self._range = new_range;
     self._direction = .none;
 }
 

From 992a8e8774dc53d314fa941b9626f841cd2b438f Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Fri, 16 Jan 2026 00:49:30 -0800
Subject: [PATCH 11/17] handle null anchor or focus nodes in Selection

---
 src/browser/webapi/Selection.zig | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/browser/webapi/Selection.zig b/src/browser/webapi/Selection.zig
index 8f582c72..a3a0b04c 100644
--- a/src/browser/webapi/Selection.zig
+++ b/src/browser/webapi/Selection.zig
@@ -37,7 +37,9 @@ pub const init: Selection = .{};
 
 fn isInTree(self: *const Selection) bool {
     if (self._range == null) return false;
-    return self.getAnchorNode().?.isConnected() and self.getFocusNode().?.isConnected();
+    const anchor_node = self.getAnchorNode() orelse return false;
+    const focus_node = self.getFocusNode() orelse return false;
+    return anchor_node.isConnected() and focus_node.isConnected();
 }
 
 pub fn getAnchorNode(self: *const Selection) ?*Node {
@@ -53,7 +55,9 @@ pub fn getAnchorNode(self: *const Selection) ?*Node {
 
 pub fn getAnchorOffset(self: *const Selection) u32 {
     const range = self._range orelse return 0;
-    if (!self.getAnchorNode().?.isConnected()) return 0;
+
+    const anchor_node = self.getAnchorNode() orelse return 0;
+    if (!anchor_node.isConnected()) return 0;
 
     return switch (self._direction) {
         .backward => range.asAbstractRange().getEndOffset(),
@@ -78,7 +82,8 @@ pub fn getFocusNode(self: *const Selection) ?*Node {
 
 pub fn getFocusOffset(self: *const Selection) u32 {
     const range = self._range orelse return 0;
-    if (!self.getFocusNode().?.isConnected()) return 0;
+    const focus_node = self.getFocusNode() orelse return 0;
+    if (!focus_node.isConnected()) return 0;
 
     return switch (self._direction) {
         .backward => range.asAbstractRange().getStartOffset(),

From 80dd590e8f761395e12a47b31e477be2a61cb780 Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Fri, 16 Jan 2026 00:55:27 -0800
Subject: [PATCH 12/17] add toString to Selection

---
 src/browser/webapi/Selection.zig | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/browser/webapi/Selection.zig b/src/browser/webapi/Selection.zig
index a3a0b04c..f2c32e22 100644
--- a/src/browser/webapi/Selection.zig
+++ b/src/browser/webapi/Selection.zig
@@ -378,6 +378,11 @@ pub fn collapse(self: *Selection, _node: ?*Node, _offset: ?u32, page: *Page) !vo
     self._direction = .none;
 }
 
+pub fn toString(self: *const Selection, page: *Page) ![]const u8 {
+    const range = self._range orelse return "";
+    return try range.toString(page);
+}
+
 pub const JsApi = struct {
     pub const bridge = js.Bridge(Selection);
 
@@ -412,6 +417,7 @@ pub const JsApi = struct {
     pub const selectAllChildren = bridge.function(Selection.selectAllChildren, .{});
     pub const setBaseAndExtent = bridge.function(Selection.setBaseAndExtent, .{ .dom_exception = true });
     pub const setPosition = bridge.function(Selection.collapse, .{});
+    pub const toString = bridge.function(Selection.toString, .{});
 };
 
 const testing = @import("../../testing.zig");

From 319a1c33673cdc35a37efc6201d34a74359f763a Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Mon, 19 Jan 2026 07:06:51 -0800
Subject: [PATCH 13/17] update WPT to include Selection

---
 tests/wpt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/wpt b/tests/wpt
index 3df84d93..69c6afab 160000
--- a/tests/wpt
+++ b/tests/wpt
@@ -1 +1 @@
-Subproject commit 3df84d931c47559065c6de3edc07dea95bedcf70
+Subproject commit 69c6afabd893c00c7cb982ba66306e1a68db90c3

From d7015fa3b68ef54ecdedb5842e008a34f90c623d Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Mon, 19 Jan 2026 18:34:02 -0800
Subject: [PATCH 14/17] add selection api to HTMLInputElement

---
 src/browser/Page.zig                      |  24 +---
 src/browser/webapi/Selection.zig          |   2 +-
 src/browser/webapi/element/html/Input.zig | 131 +++++++++++++++++++++-
 3 files changed, 130 insertions(+), 27 deletions(-)

diff --git a/src/browser/Page.zig b/src/browser/Page.zig
index 841d4156..83df1085 100644
--- a/src/browser/Page.zig
+++ b/src/browser/Page.zig
@@ -2933,16 +2933,7 @@ pub fn handleKeydown(self: *Page, target: *Node, event: *Event) !void {
 
         // Handle printable characters
         if (key.isPrintable()) {
-            // if the input is selected, replace the content.
-            if (input._selected) {
-                const new_value = try self.arena.dupe(u8, key.asString());
-                try input.setValue(new_value, self);
-                input._selected = false;
-                return;
-            }
-            const current_value = input.getValue();
-            const new_value = try std.mem.concat(self.arena, u8, &.{ current_value, key.asString() });
-            try input.setValue(new_value, self);
+            try input.innerInsert(key.asString(), self);
         }
         return;
     }
@@ -3011,18 +3002,7 @@ pub fn insertText(self: *Page, v: []const u8) !void {
             return;
         }
 
-        // If the input is selected, replace the existing value
-        if (input._selected) {
-            const new_value = try self.arena.dupe(u8, v);
-            try input.setValue(new_value, self);
-            input._selected = false;
-            return;
-        }
-
-        // Or append the value
-        const current_value = input.getValue();
-        const new_value = try std.mem.concat(self.arena, u8, &.{ current_value, v });
-        return input.setValue(new_value, self);
+        try input.innerInsert(v, self);
     }
 
     if (html_element.is(Element.Html.TextArea)) |textarea| {
diff --git a/src/browser/webapi/Selection.zig b/src/browser/webapi/Selection.zig
index f2c32e22..69054b17 100644
--- a/src/browser/webapi/Selection.zig
+++ b/src/browser/webapi/Selection.zig
@@ -28,7 +28,7 @@ const Node = @import("Node.zig");
 /// https://w3c.github.io/selection-api/
 const Selection = @This();
 
-const SelectionDirection = enum { backward, forward, none };
+pub const SelectionDirection = enum { backward, forward, none };
 
 _range: ?*Range = null,
 _direction: SelectionDirection = .none,
diff --git a/src/browser/webapi/element/html/Input.zig b/src/browser/webapi/element/html/Input.zig
index 5c04b6a4..b7bb14f2 100644
--- a/src/browser/webapi/element/html/Input.zig
+++ b/src/browser/webapi/element/html/Input.zig
@@ -24,6 +24,7 @@ const Node = @import("../../Node.zig");
 const Element = @import("../../Element.zig");
 const HtmlElement = @import("../Html.zig");
 const Form = @import("Form.zig");
+const Selection = @import("../../Selection.zig");
 
 const Input = @This();
 
@@ -74,9 +75,12 @@ _value: ?[]const u8 = null,
 _checked: bool = false,
 _checked_dirty: bool = false,
 _input_type: Type = .text,
-_selected: bool = false,
 _indeterminate: bool = false,
 
+_selection_start: u32 = 0,
+_selection_end: u32 = 0,
+_selection_direction: Selection.SelectionDirection = .none,
+
 pub fn asElement(self: *Input) *Element {
     return self._proto._proto;
 }
@@ -255,8 +259,120 @@ pub fn setRequired(self: *Input, required: bool, page: *Page) !void {
     }
 }
 
-pub fn select(self: *Input) void {
-    self._selected = true;
+pub fn select(self: *Input) !void {
+    const len = if (self._value) |v| @as(u32, @intCast(v.len)) else 0;
+    try self.setSelectionRange(0, len, null);
+}
+
+fn selectionAvailable(self: *const Input) bool {
+    switch (self._input_type) {
+        .text, .search, .url, .tel, .password => return true,
+        else => return false,
+    }
+}
+
+const HowSelected = union(enum) { partial: struct { u32, u32 }, full, none };
+
+fn howSelected(self: *const Input) HowSelected {
+    if (!self.selectionAvailable()) return .none;
+    const value = self._value orelse return .none;
+
+    if (self._selection_start == self._selection_end) return .none;
+    if (self._selection_start == 0 and self._selection_end == value.len) return .full;
+    return .{ .partial = .{ self._selection_start, self._selection_end } };
+}
+
+pub fn innerInsert(self: *Input, str: []const u8, page: *Page) !void {
+    const arena = page.arena;
+
+    switch (self.howSelected()) {
+        .full => {
+            // if the input is fully selected, replace the content.
+            const new_value = try arena.dupe(u8, str);
+            try self.setValue(new_value, page);
+            self._selection_start = 1;
+            self._selection_end = 1;
+            self._selection_direction = .none;
+        },
+        .partial => |range| {
+            // if the input is partially selected, replace the selected content.
+            const current_value = self.getValue();
+            const before = current_value[0..range[0]];
+            const remaining = current_value[range[1]..];
+
+            const new_value = try std.mem.concat(
+                arena,
+                u8,
+                &.{ before, str, remaining },
+            );
+            try self.setValue(new_value, page);
+
+            const new_pos = range[0] + str.len;
+            self._selection_start = @intCast(new_pos);
+            self._selection_end = @intCast(new_pos);
+            self._selection_direction = .none;
+        },
+        .none => {
+            // if the input is not selected, just insert at cursor.
+            const current_value = self.getValue();
+            const new_value = try std.mem.concat(arena, u8, &.{ current_value, str });
+            try self.setValue(new_value, page);
+        },
+    }
+}
+
+pub fn getSelectionDirection(self: *const Input) []const u8 {
+    return @tagName(self._selection_direction);
+}
+
+pub fn getSelectionStart(self: *const Input) !?u32 {
+    if (!self.selectionAvailable()) return null;
+    return self._selection_start;
+}
+
+pub fn setSelectionStart(self: *Input, value: u32) !void {
+    if (!self.selectionAvailable()) return error.InvalidStateError;
+    self._selection_start = value;
+}
+
+pub fn getSelectionEnd(self: *const Input) !?u32 {
+    if (!self.selectionAvailable()) return null;
+    return self._selection_end;
+}
+
+pub fn setSelectionEnd(self: *Input, value: u32) !void {
+    if (!self.selectionAvailable()) return error.InvalidStateError;
+    self._selection_end = value;
+}
+
+pub fn setSelectionRange(self: *Input, selection_start: u32, selection_end: u32, selection_dir: ?[]const u8) !void {
+    if (!self.selectionAvailable()) return error.InvalidStateError;
+
+    const direction = blk: {
+        if (selection_dir) |sd| {
+            break :blk std.meta.stringToEnum(Selection.SelectionDirection, sd) orelse .none;
+        } else break :blk .none;
+    };
+
+    const value = self._value orelse {
+        self._selection_start = 0;
+        self._selection_end = 0;
+        self._selection_direction = .none;
+        return;
+    };
+
+    const len_u32: u32 = @intCast(value.len);
+    var start: u32 = if (selection_start > len_u32) len_u32 else selection_start;
+    const end: u32 = if (selection_end > len_u32) len_u32 else selection_end;
+
+    // If end is less than start, both are equal to end.
+    if (end < start) {
+        start = end;
+    }
+
+    self._selection_direction = direction;
+    self._selection_start = start;
+    self._selection_end = end;
 }
 
 pub fn getForm(self: *Input, page: *Page) ?*Form {
@@ -352,6 +468,11 @@ pub const JsApi = struct {
     pub const form = bridge.accessor(Input.getForm, null, .{});
     pub const indeterminate = bridge.accessor(Input.getIndeterminate, Input.setIndeterminate, .{});
     pub const select = bridge.function(Input.select, .{});
+
+    pub const selectionStart = bridge.accessor(Input.getSelectionStart, Input.setSelectionStart, .{});
+    pub const selectionEnd = bridge.accessor(Input.getSelectionEnd, Input.setSelectionEnd, .{});
+    pub const selectionDirection = bridge.accessor(Input.getSelectionDirection, null, .{});
+    pub const setSelectionRange = bridge.function(Input.setSelectionRange, .{ .dom_exception = true });
 };
 
 pub const Build = struct {
@@ -422,7 +543,9 @@ pub const Build = struct {
         clone._value = source._value;
         clone._checked = source._checked;
         clone._checked_dirty = source._checked_dirty;
-        clone._selected = source._selected;
+        clone._selection_direction = source._selection_direction;
+        clone._selection_start = source._selection_start;
+        clone._selection_end = source._selection_end;
         clone._indeterminate = source._indeterminate;
     }
 };

From d5bfe74e1ac77f1bdae081cbfad9191f515de294 Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Mon, 19 Jan 2026 18:37:52 -0800
Subject: [PATCH 15/17] add selection api to HTMLTextAreaElement

---
 src/browser/webapi/element/html/TextArea.zig | 108 +++++++++++++++++++
 1 file changed, 108 insertions(+)

diff --git a/src/browser/webapi/element/html/TextArea.zig b/src/browser/webapi/element/html/TextArea.zig
index e9a1dcb1..b0b0ae1c 100644
--- a/src/browser/webapi/element/html/TextArea.zig
+++ b/src/browser/webapi/element/html/TextArea.zig
@@ -16,6 +16,7 @@
 // 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 std = @import("std");
 const js = @import("../../../js/js.zig");
 const Page = @import("../../../Page.zig");
 
@@ -23,12 +24,17 @@ const Node = @import("../../Node.zig");
 const Element = @import("../../Element.zig");
 const HtmlElement = @import("../Html.zig");
 const Form = @import("Form.zig");
+const Selection = @import("../../Selection.zig");
 
 const TextArea = @This();
 
 _proto: *HtmlElement,
 _value: ?[]const u8 = null,
 
+_selection_start: u32 = 0,
+_selection_end: u32 = 0,
+_selection_direction: Selection.SelectionDirection = .none,
+
 pub fn asElement(self: *TextArea) *Element {
     return self._proto._proto;
 }
@@ -109,6 +115,108 @@ pub fn setRequired(self: *TextArea, required: bool, page: *Page) !void {
     }
 }
 
+pub fn select(self: *TextArea) !void {
+    const len = if (self._value) |v| @as(u32, @intCast(v.len)) else 0;
+    try self.setSelectionRange(0, len, null);
+}
+
+const HowSelected = union(enum) { partial: struct { u32, u32 }, full, none };
+
+fn howSelected(self: *const TextArea) HowSelected {
+    const value = self._value orelse return .none;
+
+    if (self._selection_start == self._selection_end) return .none;
+    if (self._selection_start == 0 and self._selection_end == value.len) return .full;
+    return .{ .partial = .{ self._selection_start, self._selection_end } };
+}
+
+pub fn innerInsert(self: *TextArea, str: []const u8, page: *Page) !void {
+    const arena = page.arena;
+
+    switch (self.howSelected()) {
+        .full => {
+            // if the text area is fully selected, replace the content.
+            const new_value = try arena.dupe(u8, str);
+            try self.setValue(new_value, page);
+            self._selection_start = 1;
+            self._selection_end = 1;
+            self._selection_direction = .none;
+        },
+        .partial => |range| {
+            // if the text area is partially selected, replace the selected content.
+            const current_value = self.getValue();
+            const before = current_value[0..range[0]];
+            const remaining = current_value[range[1]..];
+
+            const new_value = try std.mem.concat(
+                arena,
+                u8,
+                &.{ before, str, remaining },
+            );
+            try self.setValue(new_value, page);
+
+            const new_pos = range[0] + str.len;
+            self._selection_start = @intCast(new_pos);
+            self._selection_end = @intCast(new_pos);
+            self._selection_direction = .none;
+        },
+        .none => {
+            // if the text area is not selected, just insert at cursor.
+            const current_value = self.getValue();
+            const new_value = try std.mem.concat(arena, u8, &.{ current_value, str });
+            try self.setValue(new_value, page);
+        },
+    }
+}
+
+pub fn getSelectionDirection(self: *const TextArea) []const u8 {
+    return @tagName(self._selection_direction);
+}
+
+pub fn getSelectionStart(self: *const TextArea) u32 {
+    return self._selection_start;
+}
+
+pub fn setSelectionStart(self: *TextArea, value: u32) void {
+    self._selection_start = value;
+}
+
+pub fn getSelectionEnd(self: *const TextArea) u32 {
+    return self._selection_end;
+}
+
+pub fn setSelectionEnd(self: *TextArea, value: u32) void {
+    self._selection_end = value;
+}
+
+pub fn setSelectionRange(self: *TextArea, selection_start: u32, selection_end: u32, selection_dir: ?[]const u8) !void {
+    const direction = blk: {
+        if (selection_dir) |sd| {
+            break :blk std.meta.stringToEnum(Selection.SelectionDirection, sd) orelse .none;
+        } else break :blk .none;
+    };
+
+    const value = self._value orelse {
+        self._selection_start = 0;
+        self._selection_end = 0;
+        self._selection_direction = .none;
+        return;
+    };
+
+    const len_u32: u32 = @intCast(value.len);
+    var start: u32 = if (selection_start > len_u32) len_u32 else selection_start;
+    const end: u32 = if (selection_end > len_u32) len_u32 else selection_end;
+
+    // If end is less than start, both are equal to end.
+    if (end < start) {
+        start = end;
+    }
+
+    self._selection_direction = direction;
+    self._selection_start = start;
+    self._selection_end = end;
+}
+
 pub fn getForm(self: *TextArea, page: *Page) ?*Form {
     const element = self.asElement();
 

From 4a5c93988fc28d062bfd3710167d6651375b7d20 Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Tue, 20 Jan 2026 11:24:50 -0800
Subject: [PATCH 16/17] fix selection test expectation

---
 src/browser/tests/selection.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/tests/selection.html b/src/browser/tests/selection.html
index 4aad996d..b10dcb50 100644
--- a/src/browser/tests/selection.html
+++ b/src/browser/tests/selection.html
@@ -412,7 +412,7 @@
     // Should end at offset equal to number of children (after last child)
     testing.expectEqual(childrenCount, sel.focusOffset);
 
-    // Direction should be none
+    // Direction should be forward
     testing.expectEqual("forward", sel.direction);
 
     // Should not fully contain the parent itself

From 7650e0b61aed034d5e42718f4285c17c1bbd59e4 Mon Sep 17 00:00:00 2001
From: Muki Kiboigo <muki@muki.gg>
Date: Tue, 20 Jan 2026 11:25:04 -0800
Subject: [PATCH 17/17] fix selection start updating to new len

---
 src/browser/webapi/element/html/Input.zig    | 4 ++--
 src/browser/webapi/element/html/TextArea.zig | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/browser/webapi/element/html/Input.zig b/src/browser/webapi/element/html/Input.zig
index b7bb14f2..f3740073 100644
--- a/src/browser/webapi/element/html/Input.zig
+++ b/src/browser/webapi/element/html/Input.zig
@@ -290,8 +290,8 @@ pub fn innerInsert(self: *Input, str: []const u8, page: *Page) !void {
             // if the input is fully selected, replace the content.
             const new_value = try arena.dupe(u8, str);
             try self.setValue(new_value, page);
-            self._selection_start = 1;
-            self._selection_end = 1;
+            self._selection_start = @intCast(new_value.len);
+            self._selection_end = @intCast(new_value.len);
             self._selection_direction = .none;
         },
         .partial => |range| {
diff --git a/src/browser/webapi/element/html/TextArea.zig b/src/browser/webapi/element/html/TextArea.zig
index b0b0ae1c..bcac5cb2 100644
--- a/src/browser/webapi/element/html/TextArea.zig
+++ b/src/browser/webapi/element/html/TextArea.zig
@@ -138,8 +138,8 @@ pub fn innerInsert(self: *TextArea, str: []const u8, page: *Page) !void {
             // if the text area is fully selected, replace the content.
             const new_value = try arena.dupe(u8, str);
             try self.setValue(new_value, page);
-            self._selection_start = 1;
-            self._selection_end = 1;
+            self._selection_start = @intCast(new_value.len);
+            self._selection_end = @intCast(new_value.len);
             self._selection_direction = .none;
         },
         .partial => |range| {