renderer: set a default box size of 5 pixels

src/browser/renderer.zig

@@ -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 .{
@@ -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 w: f64 = default_w;
-        const h: f64 = 1.0;
+        const h: f64 = default_h;
 
         return .{
             .x = _x,
@@ -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 {
+    pub fn getElementAtPosition(self: *const FlatRenderer, _x: i32, y: i32) ?*parser.Element {
-        if (y != 0 or x < 0) {
+        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;
     }

src/cdp/domains/dom.zig

@@ -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 },
+        .content = Quad{ 0.0, 0.0, 5.0, 0.0, 5.0, 5.0, 0.0, 5.0 },
-        .padding = Quad{ 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.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, 1.0, 0.0, 1.0, 1.0, 0.0, 1.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, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0 },
+        .margin = Quad{ 0.0, 0.0, 5.0, 0.0, 5.0, 5.0, 0.0, 5.0 },
-        .width = 1,
+        .width = 5,
-        .height = 1,
+        .height = 5,
     } }, .{ .id = 5 });
 }

src/tests/dom/element.html

@@ -168,35 +168,35 @@
 
 <script id=dimensions>
   const para = document.getElementById('para');
-  testing.expectEqual(1, para.clientWidth);
+  testing.expectEqual(5, para.clientWidth);
-  testing.expectEqual(1, para.clientHeight);
+  testing.expectEqual(5, para.clientHeight);
 
-  // let r1 = document.getElementById('para').getBoundingClientRect();
+  let r1 = document.getElementById('para').getBoundingClientRect();
-  // testing.expectEqual(0, r1.x);
+  testing.expectEqual(0, r1.x);
-  // testing.expectEqual(0, r1.y);
+  testing.expectEqual(0, r1.y);
-  // testing.expectEqual(1, r1.width);
+  testing.expectEqual(5, r1.width);
-  // testing.expectEqual(2, r1.height);
+  testing.expectEqual(5, r1.height);
 
-  // let r2 = document.getElementById('content').getBoundingClientRect();
+  let r2 = document.getElementById('content').getBoundingClientRect();
-  // testing.expectEqual(1, r2.x);
+  testing.expectEqual(5, r2.x);
-  // testing.expectEqual(0, r2.y);
+  testing.expectEqual(0, r2.y);
-  // testing.expectEqual(1, r2.width);
+  testing.expectEqual(5, r2.width);
-  // testing.expectEqual(1, r2.height);
+  testing.expectEqual(5, r2.height);
 
-  // let r3 = document.getElementById('para').getBoundingClientRect();
+  let r3 = document.getElementById('para').getBoundingClientRect();
-  // testing.expectEqual(0, r3.x);
+  testing.expectEqual(0, r3.x);
-  // testing.expectEqual(0, r3.y);
+  testing.expectEqual(0, r3.y);
-  // testing.expectEqual(1, r3.width);
+  testing.expectEqual(5, r3.width);
-  // testing.expectEqual(1, r3.height);
+  testing.expectEqual(5, r3.height);
 
-  // testing.expectEqual(1, para.clientWidth);
+  testing.expectEqual(10, para.clientWidth);
-  // testing.expectEqual(1, para.clientHeight);
+  testing.expectEqual(5, para.clientHeight);
 
-  // let r4 = document.createElement('div').getBoundingClientRect();
+  let r4 = document.createElement('div').getBoundingClientRect();
-  // testing.expectEqual(0, r4.x);
+  testing.expectEqual(0, r4.x);
-  // testing.expectEqual(0, r4.y);
+  testing.expectEqual(0, r4.y);
-  // testing.expectEqual(0, r4.width);
+  testing.expectEqual(0, r4.width);
-  // testing.expectEqual(0, r4.height);
+  testing.expectEqual(0, r4.height);
 </script>
 
 <script id=matches>

src/tests/dom/intersection_observer.html

@@ -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(5, entry.intersectionRect.width);
-      testing.expectEqual(1, entry.intersectionRect.height);
+      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(5, entry.rootBounds.width);
-      testing.expectEqual(1, entry.rootBounds.height);
+      testing.expectEqual(5, entry.rootBounds.height);
       testing.expectEqual('[object HTMLDivElement]', entry.target.toString());
     });
   }

src/tests/html/document.html

@@ -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(null, document.elementFromPoint(2.5, 2.5));
-  testing.expectEqual([], document.elementsFromPoint(0.5, 0.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());
@@ -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);
 
 

src/tests/window/window.html

@@ -25,9 +25,9 @@
 </script>
 
 <script id=dimensions>
-  testing.expectEqual(1, innerHeight);
+  testing.expectEqual(5, innerHeight);
-  // Width is 1 even if there are no elements
+  // Width is 5 even if there are no elements
-  testing.expectEqual(1, innerWidth);
+  testing.expectEqual(5, innerWidth);
 
   let div1 = document.createElement('div');
   document.body.appendChild(div1);
@@ -37,8 +37,8 @@
   document.body.appendChild(div2);
   div2.getClientRects();
 
-  testing.expectEqual(1, innerHeight);
+  testing.expectEqual(5, innerHeight);
-  testing.expectEqual(2, innerWidth);
+  testing.expectEqual(10, innerWidth);
 </script>
 
 <script id=setTimeout>