update snapshots and tests to not include border in calculations

lib/CssGrid/CssGrid_convertToHtml.ts

@@ -47,7 +47,7 @@ export const CssGrid_convertToHtml = (grid: CssGrid) => {
     const cs: string[] = [
       "display:flex",
       "border: 1px solid black",
-      "box-sizing: border-box",
+      "box-sizing: content-box",
       `background-color:${getColor(c.key)}`,
     ]
 

lib/CssGrid/CssGrid_layout.ts

@@ -182,12 +182,12 @@ export const CssGrid_layout = (
       const tokens = tokenize(expanded)
       const trackCnt = tokens.length
 
-      // helper – px value from contentWidth / contentHeight (+ 2 px border)
+      // helper – px value from contentWidth / contentHeight
       const toPx = (v: string | number | undefined): number => {
         if (v === undefined) return 0
-        if (typeof v === "number") return v + 2 // content + border
-        if (v.endsWith("px")) return parseFloat(v) + 2 // content + border
-        return parseFloat(v) + 2
+        if (typeof v === "number") return v
+        if (v.endsWith("px")) return parseFloat(v)
+        return parseFloat(v)
       }
 
       // gather the largest content-based size per track

scripts/generate-browser-results.ts

@@ -75,15 +75,24 @@ async function generateBrowserResults() {
     for (const div of childDivs) {
       const id = await div.getAttribute("id")
       if (id?.trim()) {
-        const boundingBox = await div.boundingBox()
-        if (boundingBox) {
-          elementBounds[id.trim()] = {
-            x: boundingBox.x,
-            y: boundingBox.y,
-            width: boundingBox.width,
-            height: boundingBox.height,
+        // Get the computed client dimensions (content + padding, excluding border)
+        const dims = await div.evaluate((el: HTMLElement) => {
+          const rect = el.getBoundingClientRect()
+          const style = globalThis.window.getComputedStyle(el)
+          const borderLeft = parseFloat(style.borderLeftWidth) || 0
+          const borderRight = parseFloat(style.borderRightWidth) || 0  
+          const borderTop = parseFloat(style.borderTopWidth) || 0
+          const borderBottom = parseFloat(style.borderBottomWidth) || 0
+
+          return {
+            x: rect.left + borderLeft,
+            y: rect.top + borderTop,
+            width: rect.width - borderLeft - borderRight,
+            height: rect.height - borderTop - borderBottom
           }
-        }
+        })
+
+        elementBounds[id.trim()] = dims
       }
     }
 

testcases/level01.browser-result.json

@@ -1,8 +1,8 @@
 {
   "water": {
-    "x": 40,
-    "y": 0,
-    "width": 20,
-    "height": 20
+    "x": 41,
+    "y": 1,
+    "width": 18,
+    "height": 18
   }
 }

testcases/level02.browser-result.json

@@ -1,8 +1,8 @@
 {
   "water": {
-    "x": 0,
-    "y": 40,
-    "width": 20,
-    "height": 20
+    "x": 1,
+    "y": 41,
+    "width": 18,
+    "height": 18
   }
 }

testcases/level03.browser-result.json

@@ -1,26 +1,26 @@
 {
   "item1": {
-    "x": 0,
-    "y": 0,
-    "width": 100,
-    "height": 100
+    "x": 1,
+    "y": 1,
+    "width": 98,
+    "height": 98
   },
   "item2": {
-    "x": 100,
-    "y": 0,
-    "width": 100,
-    "height": 100
+    "x": 101,
+    "y": 1,
+    "width": 98,
+    "height": 98
   },
   "item3": {
-    "x": 0,
-    "y": 100,
-    "width": 100,
-    "height": 100
+    "x": 1,
+    "y": 101,
+    "width": 98,
+    "height": 98
   },
   "item4": {
-    "x": 100,
-    "y": 100,
-    "width": 100,
-    "height": 100
+    "x": 101,
+    "y": 101,
+    "width": 98,
+    "height": 98
   }
 }

testcases/level04.browser-result.json

@@ -1,26 +1,26 @@
 {
   "header": {
-    "x": 0,
-    "y": 0,
-    "width": 100,
-    "height": 50
+    "x": 1,
+    "y": 1,
+    "width": 98,
+    "height": 48
   },
   "sidebar": {
-    "x": 100,
-    "y": 0,
-    "width": 200,
-    "height": 50
+    "x": 101,
+    "y": 1,
+    "width": 198,
+    "height": 48
   },
   "content": {
-    "x": 0,
-    "y": 50,
-    "width": 100,
-    "height": 120
+    "x": 1,
+    "y": 51,
+    "width": 98,
+    "height": 118
   },
   "footer": {
-    "x": 100,
-    "y": 50,
-    "width": 200,
-    "height": 120
+    "x": 101,
+    "y": 51,
+    "width": 198,
+    "height": 118
   }
 }

testcases/level05.browser-result.json

@@ -1,26 +1,26 @@
 {
   "box1": {
-    "x": 0,
-    "y": 0,
-    "width": 110,
-    "height": 110
+    "x": 1,
+    "y": 1,
+    "width": 108,
+    "height": 108
   },
   "box2": {
-    "x": 130,
-    "y": 0,
-    "width": 110,
-    "height": 110
+    "x": 131,
+    "y": 1,
+    "width": 108,
+    "height": 108
   },
   "box3": {
-    "x": 0,
-    "y": 130,
-    "width": 110,
-    "height": 110
+    "x": 1,
+    "y": 131,
+    "width": 108,
+    "height": 108
   },
   "box4": {
-    "x": 130,
-    "y": 130,
-    "width": 110,
-    "height": 110
+    "x": 131,
+    "y": 131,
+    "width": 108,
+    "height": 108
   }
 }

testcases/level06.browser-result.json

@@ -1,38 +1,38 @@
 {
   "a": {
-    "x": 0,
-    "y": 0,
-    "width": 80,
-    "height": 95
+    "x": 1,
+    "y": 1,
+    "width": 78,
+    "height": 93
   },
   "b": {
-    "x": 110,
-    "y": 0,
-    "width": 80,
-    "height": 95
+    "x": 111,
+    "y": 1,
+    "width": 78,
+    "height": 93
   },
   "c": {
-    "x": 220,
-    "y": 0,
-    "width": 80,
-    "height": 95
+    "x": 221,
+    "y": 1,
+    "width": 78,
+    "height": 93
   },
   "d": {
-    "x": 0,
-    "y": 105,
-    "width": 80,
-    "height": 95
+    "x": 1,
+    "y": 106,
+    "width": 78,
+    "height": 93
   },
   "e": {
-    "x": 110,
-    "y": 105,
-    "width": 80,
-    "height": 95
+    "x": 111,
+    "y": 106,
+    "width": 78,
+    "height": 93
   },
   "f": {
-    "x": 220,
-    "y": 105,
-    "width": 80,
-    "height": 95
+    "x": 221,
+    "y": 106,
+    "width": 78,
+    "height": 93
   }
 }

testcases/level07.browser-result.json

@@ -1,26 +1,26 @@
 {
   "header": {
-    "x": 0,
-    "y": 0,
-    "width": 300,
-    "height": 50
+    "x": 1,
+    "y": 1,
+    "width": 298,
+    "height": 48
   },
   "sidebar": {
-    "x": 0,
-    "y": 50,
-    "width": 100,
-    "height": 200
+    "x": 1,
+    "y": 51,
+    "width": 98,
+    "height": 198
   },
   "content": {
-    "x": 100,
-    "y": 50,
-    "width": 200,
-    "height": 200
+    "x": 101,
+    "y": 51,
+    "width": 198,
+    "height": 198
   },
   "footer": {
-    "x": 0,
-    "y": 250,
-    "width": 300,
-    "height": 50
+    "x": 1,
+    "y": 251,
+    "width": 298,
+    "height": 48
   }
 }

testcases/level08.browser-result.json

@@ -1,26 +1,26 @@
 {
   "a": {
-    "x": 0,
-    "y": 0,
-    "width": 100,
-    "height": 100
+    "x": 1,
+    "y": 1,
+    "width": 98,
+    "height": 98
   },
   "b": {
-    "x": 200,
-    "y": 100,
-    "width": 100,
-    "height": 100
+    "x": 201,
+    "y": 101,
+    "width": 98,
+    "height": 98
   },
   "c": {
-    "x": 100,
-    "y": 200,
-    "width": 100,
-    "height": 100
+    "x": 101,
+    "y": 201,
+    "width": 98,
+    "height": 98
   },
   "d": {
-    "x": 200,
-    "y": 0,
-    "width": 100,
-    "height": 100
+    "x": 201,
+    "y": 1,
+    "width": 98,
+    "height": 98
   }
 }