Skip to content

renderer: set a default box size of 5 pixels #1173

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 23, 2025
Merged

renderer: set a default box size of 5 pixels #1173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions src/browser/renderer.zig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ const FlatRenderer = struct {

const Element = @import("dom/element.zig").Element;

// Define the size of each element in the grid.
const default_w = 5;
const default_h = 5;

// we expect allocator to be an arena
pub fn init(allocator: Allocator) FlatRenderer {
return .{
Expand All @@ -62,10 +66,10 @@ const FlatRenderer = struct {
gop.value_ptr.* = x;
}

const _x: f64 = @floatFromInt(x);
const _x: f64 = @floatFromInt(x * default_w);
const y: f64 = 0.0;
const w: f64 = 1.0;
const h: f64 = 1.0;
const w: f64 = default_w;
const h: f64 = default_h;

return .{
.x = _x,
Expand Down Expand Up @@ -98,18 +102,20 @@ const FlatRenderer = struct {
}

pub fn width(self: *const FlatRenderer) u32 {
return @max(@as(u32, @intCast(self.elements.items.len)), 1); // At least 1 pixel even if empty
return @max(@as(u32, @intCast(self.elements.items.len * default_w)), default_w); // At least default width pixels even if empty
}

pub fn height(_: *const FlatRenderer) u32 {
return 1;
return 5;
}

pub fn getElementAtPosition(self: *const FlatRenderer, x: i32, y: i32) ?*parser.Element {
if (y != 0 or x < 0) {
pub fn getElementAtPosition(self: *const FlatRenderer, _x: i32, y: i32) ?*parser.Element {
if (y < 0 or y > default_h or _x < 0) {
return null;
}

const x = @divFloor(_x, default_w);

const elements = self.elements.items;
return if (x < elements.len) @ptrFromInt(elements[@intCast(x)]) else null;
}
Expand Down
12 changes: 6 additions & 6 deletions src/cdp/domains/dom.zig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -663,11 +663,11 @@ test "cdp.dom: getBoxModel" {
.params = .{ .nodeId = 6 },
});
try ctx.expectSentResult(.{ .model = BoxModel{
.content = Quad{ 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0 },
.padding = Quad{ 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0 },
.border = Quad{ 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0 },
.margin = Quad{ 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0 },
.width = 1,
.height = 1,
.content = Quad{ 0.0, 0.0, 5.0, 0.0, 5.0, 5.0, 0.0, 5.0 },
.padding = Quad{ 0.0, 0.0, 5.0, 0.0, 5.0, 5.0, 0.0, 5.0 },
.border = Quad{ 0.0, 0.0, 5.0, 0.0, 5.0, 5.0, 0.0, 5.0 },
.margin = Quad{ 0.0, 0.0, 5.0, 0.0, 5.0, 5.0, 0.0, 5.0 },
.width = 5,
.height = 5,
} }, .{ .id = 5 });
}
58 changes: 29 additions & 29 deletions src/tests/dom/element.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,35 +168,35 @@

<script id=dimensions>
const para = document.getElementById('para');
testing.expectEqual(1, para.clientWidth);
testing.expectEqual(1, para.clientHeight);

// let r1 = document.getElementById('para').getBoundingClientRect();
// testing.expectEqual(0, r1.x);
// testing.expectEqual(0, r1.y);
// testing.expectEqual(1, r1.width);
// testing.expectEqual(2, r1.height);

// let r2 = document.getElementById('content').getBoundingClientRect();
// testing.expectEqual(1, r2.x);
// testing.expectEqual(0, r2.y);
// testing.expectEqual(1, r2.width);
// testing.expectEqual(1, r2.height);

// let r3 = document.getElementById('para').getBoundingClientRect();
// testing.expectEqual(0, r3.x);
// testing.expectEqual(0, r3.y);
// testing.expectEqual(1, r3.width);
// testing.expectEqual(1, r3.height);

// testing.expectEqual(1, para.clientWidth);
// testing.expectEqual(1, para.clientHeight);

// let r4 = document.createElement('div').getBoundingClientRect();
// testing.expectEqual(0, r4.x);
// testing.expectEqual(0, r4.y);
// testing.expectEqual(0, r4.width);
// testing.expectEqual(0, r4.height);
testing.expectEqual(5, para.clientWidth);
testing.expectEqual(5, para.clientHeight);

let r1 = document.getElementById('para').getBoundingClientRect();
testing.expectEqual(0, r1.x);
testing.expectEqual(0, r1.y);
testing.expectEqual(5, r1.width);
testing.expectEqual(5, r1.height);

let r2 = document.getElementById('content').getBoundingClientRect();
testing.expectEqual(5, r2.x);
testing.expectEqual(0, r2.y);
testing.expectEqual(5, r2.width);
testing.expectEqual(5, r2.height);

let r3 = document.getElementById('para').getBoundingClientRect();
testing.expectEqual(0, r3.x);
testing.expectEqual(0, r3.y);
testing.expectEqual(5, r3.width);
testing.expectEqual(5, r3.height);

testing.expectEqual(10, para.clientWidth);
testing.expectEqual(5, para.clientHeight);

let r4 = document.createElement('div').getBoundingClientRect();
testing.expectEqual(0, r4.x);
testing.expectEqual(0, r4.y);
testing.expectEqual(0, r4.width);
testing.expectEqual(0, r4.height);
</script>

<script id=matches>
Expand Down
8 changes: 4 additions & 4 deletions src/tests/dom/intersection_observer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,13 +122,13 @@
testing.expectEqual(1, entry.intersectionRatio);
testing.expectEqual(0, entry.intersectionRect.x);
testing.expectEqual(0, entry.intersectionRect.y);
testing.expectEqual(1, entry.intersectionRect.width);
testing.expectEqual(1, entry.intersectionRect.height);
testing.expectEqual(5, entry.intersectionRect.width);
testing.expectEqual(5, entry.intersectionRect.height);
testing.expectEqual(true, entry.isIntersecting);
testing.expectEqual(0, entry.rootBounds.x);
testing.expectEqual(0, entry.rootBounds.y);
testing.expectEqual(1, entry.rootBounds.width);
testing.expectEqual(1, entry.rootBounds.height);
testing.expectEqual(5, entry.rootBounds.width);
testing.expectEqual(5, entry.rootBounds.height);
testing.expectEqual('[object HTMLDivElement]', entry.target.toString());
});
}
Expand Down
12 changes: 6 additions & 6 deletions src/tests/html/document.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,15 +46,15 @@
testing.expectEqual('name=Oeschger; favorite_food=tripe', document.cookie);

// Return null since we only return elements when they have previously been localized
testing.expectEqual(null, document.elementFromPoint(0.5, 0.5));
testing.expectEqual([], document.elementsFromPoint(0.5, 0.5));
testing.expectEqual(null, document.elementFromPoint(2.5, 2.5));
testing.expectEqual([], document.elementsFromPoint(2.5, 2.5));

let div1 = document.createElement('div');
document.body.appendChild(div1);
div1.getClientRects(); // clal this to position it
testing.expectEqual('[object HTMLDivElement]', document.elementFromPoint(0.5, 0.5).toString());
testing.expectEqual('[object HTMLDivElement]', document.elementFromPoint(2.5, 2.5).toString());

let elems = document.elementsFromPoint(0.5, 0.5);
let elems = document.elementsFromPoint(2.5, 2.5);
testing.expectEqual(3, elems.length);
testing.expectEqual('[object HTMLDivElement]', elems[0].toString());
testing.expectEqual('[object HTMLBodyElement]', elems[1].toString());
Expand All @@ -66,11 +66,11 @@
// Note this will be placed after the div of previous test
a.getClientRects();

let a_again = document.elementFromPoint(1.5, 0.5);
let a_again = document.elementFromPoint(7.5, 0.5);
testing.expectEqual('[object HTMLAnchorElement]', a_again.toString());
testing.expectEqual('https://lightpanda.io', a_again.href);

let a_agains = document.elementsFromPoint(1.5, 0.5);
let a_agains = document.elementsFromPoint(7.5, 0.5);
testing.expectEqual('https://lightpanda.io', a_agains[0].href);


Expand Down
10 changes: 5 additions & 5 deletions src/tests/window/window.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@
</script>

<script id=dimensions>
testing.expectEqual(1, innerHeight);
// Width is 1 even if there are no elements
testing.expectEqual(1, innerWidth);
testing.expectEqual(5, innerHeight);
// Width is 5 even if there are no elements
testing.expectEqual(5, innerWidth);

let div1 = document.createElement('div');
document.body.appendChild(div1);
Expand All @@ -37,8 +37,8 @@
document.body.appendChild(div2);
div2.getClientRects();

testing.expectEqual(1, innerHeight);
testing.expectEqual(2, innerWidth);
testing.expectEqual(5, innerHeight);
testing.expectEqual(10, innerWidth);
</script>

<script id=setTimeout>
Expand Down