prop alignment

FlexLove.lua

@@ -83,17 +83,6 @@ local enums = {
   FlexWrap = { NOWRAP = "nowrap", WRAP = "wrap", WRAP_REVERSE = "wrap-reverse" },
 }
 
-local Positioning, FlexDirection, JustifyContent, AlignContent, AlignItems, TextAlign, AlignSelf, JustifySelf, FlexWrap =
-  enums.Positioning,
-  enums.FlexDirection,
-  enums.JustifyContent,
-  enums.AlignContent,
-  enums.AlignItems,
-  enums.TextAlign,
-  enums.AlignSelf,
-  enums.JustifySelf,
-  enums.FlexWrap
-
 local Positioning, FlexDirection, JustifyContent, AlignContent, AlignItems, TextAlign, AlignSelf, JustifySelf, FlexWrap =
   enums.Positioning,
   enums.FlexDirection,
@@ -143,10 +132,8 @@ function Units.parse(value)
     unit = "px"
   end
 
-  -- Validate unit type (removed vmin/vmax as requested)
   local validUnits = { px = true, ["%"] = true, vw = true, vh = true }
   if not validUnits[unit] then
-    -- Fallback to pixels for unsupported units, keeping the numeric value
     return num, "px"
   end
 
@@ -177,14 +164,14 @@ function Units.resolve(value, unit, viewportWidth, viewportHeight, parentSize)
   end
 end
 
---- Get current viewport dimensions
 ---@return number, number -- width, height
 function Units.getViewport()
   -- Try both functions to be compatible with different love versions and test environments
   if love.graphics and love.graphics.getDimensions then
     return love.graphics.getDimensions()
   else
-    return love.window.getMode()
+    local w, h = love.window.getMode()
+    return w, h
   end
 end
 
@@ -488,8 +475,8 @@ Element.__index = Element
 ---@field x number|string? -- X coordinate of the element (default: 0)
 ---@field y number|string? -- Y coordinate of the element (default: 0)
 ---@field z number? -- Z-index for layering (default: 0)
----@field w number|string? -- Width of the element (default: calculated automatically)
+---@field width number|string? -- Width of the element (default: calculated automatically)
----@field h number|string? -- Height of the element (default: calculated automatically)
+---@field height number|string? -- Height of the element (default: calculated automatically)
 ---@field top number|string? -- Offset from top edge (CSS-style positioning)
 ---@field right number|string? -- Offset from right edge (CSS-style positioning)
 ---@field bottom number|string? -- Offset from bottom edge (CSS-style positioning)
@@ -550,7 +537,6 @@ function Element.new(props)
   self.opacity = props.opacity or 1
 
   self.text = props.text
-  self.textSize = props.textSize or 12
   self.textAlign = props.textAlign or TextAlign.START
 
   --- self positioning ---
@@ -584,7 +570,7 @@ function Element.new(props)
   }
 
   -- Handle width (both w and width properties, prefer w if both exist)
-  local widthProp = props.w or props.width
+  local widthProp = props.width
   if widthProp then
     if type(widthProp) == "string" then
       local value, unit = Units.parse(widthProp)
@@ -602,7 +588,7 @@ function Element.new(props)
   end
 
   -- Handle height (both h and height properties, prefer h if both exist)
-  local heightProp = props.h or props.height
+  local heightProp = props.height
   if heightProp then
     if type(heightProp) == "string" then
       local value, unit = Units.parse(heightProp)
@@ -652,8 +638,7 @@ function Element.new(props)
       self.units.textSize = { value = props.textSize, unit = "px" }
     end
   else
-    -- Initialize with default/nil value
+    self.units.textSize = { value = 12, unit = "px" }
-    self.units.textSize = { value = nil, unit = "px" }
   end
 
   -- Store original spacing values for proper resize handling
@@ -731,7 +716,7 @@ function Element.new(props)
       self._originalPositioning = props.positioning
       self._explicitlyAbsolute = (props.positioning == Positioning.ABSOLUTE)
     else
-      self.positioning = Positioning.RELATIVE
+      self.positioning = Positioning.ABSOLUTE
       self._originalPositioning = nil -- No explicit positioning
       self._explicitlyAbsolute = false
     end
@@ -746,13 +731,13 @@ function Element.new(props)
       self._explicitlyAbsolute = false
     else
       -- Default: children in flex containers participate in flex layout
-      -- children in other containers default to relative
+      -- children in absolute containers default to absolute
       if self.parent.positioning == Positioning.FLEX then
         self.positioning = Positioning.ABSOLUTE -- They are positioned BY flex, not AS flex
         self._explicitlyAbsolute = false -- Participate in parent's flex layout
       else
-        self.positioning = Positioning.RELATIVE
+        self.positioning = Positioning.ABSOLUTE
-        self._explicitlyAbsolute = false -- Default for other containers
+        self._explicitlyAbsolute = false -- Default for absolute containers
       end
     end
 
@@ -791,44 +776,6 @@ function Element.new(props)
       end
 
       self.z = props.z or 0
-    elseif self.positioning == Positioning.RELATIVE then
-      -- Relative positioning: position relative to parent's position
-      local baseX = self.parent.x
-      local baseY = self.parent.y
-
-      if props.x then
-        if type(props.x) == "string" then
-          local value, unit = Units.parse(props.x)
-          self.units.x = { value = value, unit = unit }
-          local parentWidth = self.parent.width
-          local offsetX = Units.resolve(value, unit, viewportWidth, viewportHeight, parentWidth)
-          self.x = baseX + offsetX
-        else
-          self.x = baseX + props.x
-          self.units.x = { value = props.x, unit = "px" }
-        end
-      else
-        self.x = baseX
-        self.units.x = { value = 0, unit = "px" }
-      end
-
-      if props.y then
-        if type(props.y) == "string" then
-          local value, unit = Units.parse(props.y)
-          self.units.y = { value = value, unit = unit }
-          local parentHeight = self.parent.height
-          local offsetY = Units.resolve(value, unit, viewportWidth, viewportHeight, parentHeight)
-          self.y = baseY + offsetY
-        else
-          self.y = baseY + props.y
-          self.units.y = { value = props.y, unit = "px" }
-        end
-      else
-        self.y = baseY
-        self.units.y = { value = 0, unit = "px" }
-      end
-
-      self.z = props.z or self.parent.z or 0
     else
       -- Children in flex containers start at parent position but will be repositioned by layoutChildren
       local baseX = self.parent.x
@@ -972,8 +919,8 @@ function Element:addChild(child)
       child.positioning = Positioning.ABSOLUTE -- They are positioned BY flex, not AS flex
       child._explicitlyAbsolute = false -- Participate in parent's flex layout
     else
-      child.positioning = Positioning.RELATIVE
+      child.positioning = Positioning.ABSOLUTE
-      child._explicitlyAbsolute = false -- Default for other containers
+      child._explicitlyAbsolute = false -- Default for absolute containers
     end
   end
   -- If child._originalPositioning is set, it means explicit positioning was provided
@@ -1046,10 +993,7 @@ function Element:layoutChildren()
   -- Get flex children (children that participate in flex layout)
   local flexChildren = {}
   for _, child in ipairs(self.children) do
-    -- Only flex positioned children or non-explicitly absolute children participate in flex layout
-    -- Relative positioned children maintain their own positioning
     local isFlexChild = not (child.positioning == Positioning.ABSOLUTE and child._explicitlyAbsolute)
-      and child.positioning ~= Positioning.RELATIVE
     if isFlexChild then
       table.insert(flexChildren, child)
     end

testing/__tests__/01_absolute_positioning_basic_tests.lua

@@ -1,4 +1,4 @@
-package.path = package.path .. ";?.lua"
+package.patheight = package.path .. ";?.lua"
 
 local luaunit = require("testing/luaunit")
 require("testing/loveStub") -- Required to mock LOVE functions
@@ -25,8 +25,8 @@ function TestAbsolutePositioningBasic:testCreateElementWithAbsolutePositioning()
   local elem = Gui.new({
     x = 100,
     y = 200,
-    w = 300,
+    width = 300,
-    h = 150,
+    height = 150,
     positioning = Positioning.ABSOLUTE,
   })
 
@@ -47,8 +47,8 @@ function TestAbsolutePositioningBasic:testDefaultAbsolutePositioning()
   local elem = Gui.new({
     x = 50,
     y = 75,
-    w = 200,
+    width = 200,
-    h = 100,
+    height = 100,
   })
 
   -- Default should be relative positioning
@@ -62,8 +62,8 @@ function TestAbsolutePositioningBasic:testZIndexHandling()
   local elem1 = Gui.new({
     x = 0,
     y = 0,
-    w = 100,
+    width = 100,
-    h = 100,
+    height = 100,
     z = 1,
     positioning = Positioning.ABSOLUTE,
   })
@@ -71,8 +71,8 @@ function TestAbsolutePositioningBasic:testZIndexHandling()
   local elem2 = Gui.new({
     x = 50,
     y = 50,
-    w = 100,
+    width = 100,
-    h = 100,
+    height = 100,
     z = 5,
     positioning = Positioning.ABSOLUTE,
   })
@@ -80,8 +80,8 @@ function TestAbsolutePositioningBasic:testZIndexHandling()
   local elem3 = Gui.new({
     x = 25,
     y = 25,
-    w = 100,
+    width = 100,
-    h = 100,
+    height = 100,
     z = 3,
     positioning = Positioning.ABSOLUTE,
   })
@@ -99,8 +99,8 @@ function TestAbsolutePositioningBasic:testDefaultZIndex()
   local elem = Gui.new({
     x = 10,
     y = 20,
-    w = 50,
+    width = 50,
-    h = 50,
+    height = 50,
     positioning = Positioning.ABSOLUTE,
   })
 
@@ -112,16 +112,16 @@ function TestAbsolutePositioningBasic:testCoordinateIndependence()
   local elem1 = Gui.new({
     x = 100,
     y = 100,
-    w = 50,
+    width = 50,
-    h = 50,
+    height = 50,
     positioning = Positioning.ABSOLUTE,
   })
 
   local elem2 = Gui.new({
     x = 200,
     y = 200,
-    w = 50,
+    width = 50,
-    h = 50,
+    height = 50,
     positioning = Positioning.ABSOLUTE,
   })
 
@@ -142,8 +142,8 @@ function TestAbsolutePositioningBasic:testAbsoluteWithParentIndependentCoordinat
   local parent = Gui.new({
     x = 50,
     y = 50,
-    w = 200,
+    width = 200,
-    h = 200,
+    height = 200,
     positioning = Positioning.ABSOLUTE,
   })
 
@@ -151,8 +151,8 @@ function TestAbsolutePositioningBasic:testAbsoluteWithParentIndependentCoordinat
     parent = parent,
     x = 25,
     y = 25,
-    w = 50,
+    width = 50,
-    h = 50,
+    height = 50,
     positioning = Positioning.ABSOLUTE,
   })
 
@@ -174,8 +174,8 @@ function TestAbsolutePositioningBasic:testMultipleAbsoluteElementsNonInterferenc
     elements[i] = Gui.new({
       x = i * 10,
       y = i * 20,
-      w = 30,
+      width = 30,
-      h = 40,
+      height = 40,
       z = i,
       positioning = Positioning.ABSOLUTE,
     })
@@ -198,8 +198,8 @@ function TestAbsolutePositioningBasic:testNegativeCoordinates()
   local elem = Gui.new({
     x = -50,
     y = -100,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
     positioning = Positioning.ABSOLUTE,
   })
 
@@ -212,8 +212,8 @@ function TestAbsolutePositioningBasic:testZeroCoordinates()
   local elem = Gui.new({
     x = 0,
     y = 0,
-    w = 100,
+    width = 100,
-    h = 100,
+    height = 100,
     positioning = Positioning.ABSOLUTE,
   })
 
@@ -224,8 +224,8 @@ end
 -- Test 10: Default coordinates when not specified
 function TestAbsolutePositioningBasic:testDefaultCoordinates()
   local elem = Gui.new({
-    w = 100,
+    width = 100,
-    h = 100,
+    height = 100,
     positioning = Positioning.ABSOLUTE,
   })
 
@@ -239,8 +239,8 @@ function TestAbsolutePositioningBasic:testElementBounds()
   local elem = Gui.new({
     x = 100,
     y = 200,
-    w = 300,
+    width = 300,
-    h = 400,
+    height = 400,
     positioning = Positioning.ABSOLUTE,
   })
 
@@ -256,8 +256,8 @@ function TestAbsolutePositioningBasic:testParentChildRelationshipAbsolute()
   local parent = Gui.new({
     x = 100,
     y = 100,
-    w = 300,
+    width = 300,
-    h = 300,
+    height = 300,
     positioning = Positioning.ABSOLUTE,
   })
 
@@ -265,8 +265,8 @@ function TestAbsolutePositioningBasic:testParentChildRelationshipAbsolute()
     parent = parent,
     x = 50,
     y = 75,
-    w = 100,
+    width = 100,
-    h = 150,
+    height = 150,
     positioning = Positioning.ABSOLUTE,
   })
 
@@ -288,15 +288,15 @@ function TestAbsolutePositioningBasic:testAbsoluteChildNoParentAutoSizeAffect()
     positioning = Positioning.ABSOLUTE,
   })
 
-  local originalParentWidth = parent.width
+  local originalParentWidtheight = parent.width
   local originalParentHeight = parent.height
 
   local child = Gui.new({
     parent = parent,
     x = 1000, -- Far outside parent
     y = 1000,
-    w = 500,
+    width = 500,
-    h = 500,
+    height = 500,
     positioning = Positioning.ABSOLUTE,
   })
 
@@ -311,16 +311,16 @@ function TestAbsolutePositioningBasic:testAbsoluteNoFlexParticipation()
   local flexParent = Gui.new({
     x = 0,
     y = 0,
-    w = 400,
+    width = 400,
-    h = 200,
+    height = 200,
     positioning = Positioning.FLEX,
     flexDirection = enums.FlexDirection.HORIZONTAL,
   })
 
   local flexChild = Gui.new({
     parent = flexParent,
-    w = 100,
+    width = 100,
-    h = 50,
+    height = 50,
     positioning = Positioning.FLEX,
   })
 
@@ -328,8 +328,8 @@ function TestAbsolutePositioningBasic:testAbsoluteNoFlexParticipation()
     parent = flexParent,
     x = 300,
     y = 150,
-    w = 80,
+    width = 80,
-    h = 40,
+    height = 40,
     positioning = Positioning.ABSOLUTE,
   })
 
@@ -347,8 +347,8 @@ function TestAbsolutePositioningBasic:testLargeCoordinateValues()
   local elem = Gui.new({
     x = 9999,
     y = 8888,
-    w = 100,
+    width = 100,
-    h = 100,
+    height = 100,
     z = 1000,
     positioning = Positioning.ABSOLUTE,
   })
@@ -372,8 +372,8 @@ function TestAbsolutePositioningBasic:testComplexNestedAbsoluteTree()
     id = "root",
     x = 100,
     y = 100,
-    w = 800,
+    width = 800,
-    h = 600,
+    height = 600,
     positioning = Positioning.ABSOLUTE,
     z = 1,
   })
@@ -384,8 +384,8 @@ function TestAbsolutePositioningBasic:testComplexNestedAbsoluteTree()
     id = "child1",
     x = 50,
     y = 50,
-    w = 300,
+    width = 300,
-    h = 400,
+    height = 400,
     positioning = Positioning.ABSOLUTE,
     z = 2,
   })
@@ -395,8 +395,8 @@ function TestAbsolutePositioningBasic:testComplexNestedAbsoluteTree()
     id = "grandchild1",
     x = 25,
     y = 25,
-    w = 150,
+    width = 150,
-    h = 200,
+    height = 200,
     positioning = Positioning.ABSOLUTE,
     z = 3,
   })
@@ -406,8 +406,8 @@ function TestAbsolutePositioningBasic:testComplexNestedAbsoluteTree()
     id = "greatGrandchild1",
     x = 10,
     y = 10,
-    w = 50,
+    width = 50,
-    h = 75,
+    height = 75,
     positioning = Positioning.ABSOLUTE,
     z = 4,
   })
@@ -418,8 +418,8 @@ function TestAbsolutePositioningBasic:testComplexNestedAbsoluteTree()
     id = "child2",
     x = 450,
     y = 50,
-    w = 300,
+    width = 300,
-    h = 400,
+    height = 400,
     positioning = Positioning.ABSOLUTE,
     z = 2,
   })
@@ -429,8 +429,8 @@ function TestAbsolutePositioningBasic:testComplexNestedAbsoluteTree()
     id = "grandchild2",
     x = 125,
     y = 175,
-    w = 150,
+    width = 150,
-    h = 200,
+    height = 200,
     positioning = Positioning.ABSOLUTE,
     z = 3,
   })
@@ -440,8 +440,8 @@ function TestAbsolutePositioningBasic:testComplexNestedAbsoluteTree()
     id = "greatGrandchild2",
     x = 90,
     y = 160,
-    w = 50,
+    width = 50,
-    h = 75,
+    height = 75,
     positioning = Positioning.ABSOLUTE,
     z = 4,
   })
@@ -487,8 +487,8 @@ function TestAbsolutePositioningBasic:testBinaryTreeAbsoluteStructure()
     id = "root",
     x = 400,
     y = 100,
-    w = 100,
+    width = 100,
-    h = 50,
+    height = 50,
     positioning = Positioning.ABSOLUTE,
     z = 1,
   })
@@ -499,8 +499,8 @@ function TestAbsolutePositioningBasic:testBinaryTreeAbsoluteStructure()
     id = "left",
     x = 200,
     y = 200,
-    w = 80,
+    width = 80,
-    h = 40,
+    height = 40,
     positioning = Positioning.ABSOLUTE,
     z = 2,
   })
@@ -510,8 +510,8 @@ function TestAbsolutePositioningBasic:testBinaryTreeAbsoluteStructure()
     id = "right",
     x = 600,
     y = 200,
-    w = 80,
+    width = 80,
-    h = 40,
+    height = 40,
     positioning = Positioning.ABSOLUTE,
     z = 2,
   })
@@ -522,8 +522,8 @@ function TestAbsolutePositioningBasic:testBinaryTreeAbsoluteStructure()
     id = "leftLeft",
     x = 100,
     y = 300,
-    w = 60,
+    width = 60,
-    h = 30,
+    height = 30,
     positioning = Positioning.ABSOLUTE,
     z = 3,
   })
@@ -533,8 +533,8 @@ function TestAbsolutePositioningBasic:testBinaryTreeAbsoluteStructure()
     id = "leftRight",
     x = 300,
     y = 300,
-    w = 60,
+    width = 60,
-    h = 30,
+    height = 30,
     positioning = Positioning.ABSOLUTE,
     z = 3,
   })
@@ -545,8 +545,8 @@ function TestAbsolutePositioningBasic:testBinaryTreeAbsoluteStructure()
     id = "rightLeft",
     x = 500,
     y = 300,
-    w = 60,
+    width = 60,
-    h = 30,
+    height = 30,
     positioning = Positioning.ABSOLUTE,
     z = 3,
   })
@@ -556,8 +556,8 @@ function TestAbsolutePositioningBasic:testBinaryTreeAbsoluteStructure()
     id = "rightRight",
     x = 700,
     y = 300,
-    w = 60,
+    width = 60,
-    h = 30,
+    height = 30,
     positioning = Positioning.ABSOLUTE,
     z = 3,
   })
@@ -588,8 +588,8 @@ function TestAbsolutePositioningBasic:testMultiBranchZIndexStacking()
     id = "container",
     x = 0,
     y = 0,
-    w = 1000,
+    width = 1000,
-    h = 1000,
+    height = 1000,
     positioning = Positioning.ABSOLUTE,
     z = 0,
   })
@@ -600,8 +600,8 @@ function TestAbsolutePositioningBasic:testMultiBranchZIndexStacking()
     id = "background",
     x = 100,
     y = 100,
-    w = 800,
+    width = 800,
-    h = 800,
+    height = 800,
     positioning = Positioning.ABSOLUTE,
     z = 1,
   })
@@ -612,8 +612,8 @@ function TestAbsolutePositioningBasic:testMultiBranchZIndexStacking()
     id = "middleParent",
     x = 200,
     y = 200,
-    w = 600,
+    width = 600,
-    h = 600,
+    height = 600,
     positioning = Positioning.ABSOLUTE,
     z = 5,
   })
@@ -623,8 +623,8 @@ function TestAbsolutePositioningBasic:testMultiBranchZIndexStacking()
     id = "middleChild1",
     x = 50,
     y = 50,
-    w = 200,
+    width = 200,
-    h = 200,
+    height = 200,
     positioning = Positioning.ABSOLUTE,
     z = 1, -- relative to middleParent
   })
@@ -634,8 +634,8 @@ function TestAbsolutePositioningBasic:testMultiBranchZIndexStacking()
     id = "middleChild2",
     x = 350,
     y = 350,
-    w = 200,
+    width = 200,
-    h = 200,
+    height = 200,
     positioning = Positioning.ABSOLUTE,
     z = 2, -- relative to middleParent, above middleChild1
   })
@@ -646,8 +646,8 @@ function TestAbsolutePositioningBasic:testMultiBranchZIndexStacking()
     id = "foreground",
     x = 300,
     y = 300,
-    w = 400,
+    width = 400,
-    h = 400,
+    height = 400,
     positioning = Positioning.ABSOLUTE,
     z = 10,
   })
@@ -657,8 +657,8 @@ function TestAbsolutePositioningBasic:testMultiBranchZIndexStacking()
     id = "foregroundChild",
     x = 150,
     y = 150,
-    w = 100,
+    width = 100,
-    h = 100,
+    height = 100,
     positioning = Positioning.ABSOLUTE,
     z = 1,
   })
@@ -688,8 +688,8 @@ function TestAbsolutePositioningBasic:testWideShallowAbsoluteTree()
     id = "container",
     x = 0,
     y = 0,
-    w = 2000,
+    width = 2000,
-    h = 500,
+    height = 500,
     positioning = Positioning.ABSOLUTE,
     z = 0,
   })
@@ -702,8 +702,8 @@ function TestAbsolutePositioningBasic:testWideShallowAbsoluteTree()
       id = "sibling" .. i,
       x = i * 180,
       y = 100,
-      w = 150,
+      width = 150,
-      h = 300,
+      height = 300,
       positioning = Positioning.ABSOLUTE,
       z = i, -- Each has different z-index
     })
@@ -715,8 +715,8 @@ function TestAbsolutePositioningBasic:testWideShallowAbsoluteTree()
         id = "child" .. i .. "_" .. j,
         x = 25,
         y = j * 80,
-        w = 100,
+        width = 100,
-        h = 60,
+        height = 60,
         positioning = Positioning.ABSOLUTE,
         z = j,
       })
@@ -740,20 +740,20 @@ function TestAbsolutePositioningBasic:testAsymmetricAbsoluteTree()
     id = "root",
     x = 500,
     y = 100,
-    w = 200,
+    width = 200,
-    h = 100,
+    height = 100,
     positioning = Positioning.ABSOLUTE,
     z = 1,
   })
 
   -- Left branch: deep nesting
-  local leftBranch = Gui.new({
+  local leftBrancheight = Gui.new({
     parent = root,
     id = "leftBranch",
     x = 100,
     y = 250,
-    w = 150,
+    width = 150,
-    h = 400,
+    height = 400,
     positioning = Positioning.ABSOLUTE,
     z = 2,
   })
@@ -763,8 +763,8 @@ function TestAbsolutePositioningBasic:testAsymmetricAbsoluteTree()
     id = "leftDeep1",
     x = 25,
     y = 50,
-    w = 100,
+    width = 100,
-    h = 80,
+    height = 80,
     positioning = Positioning.ABSOLUTE,
     z = 3,
   })
@@ -774,8 +774,8 @@ function TestAbsolutePositioningBasic:testAsymmetricAbsoluteTree()
     id = "leftDeep2",
     x = 10,
     y = 10,
-    w = 80,
+    width = 80,
-    h = 60,
+    height = 60,
     positioning = Positioning.ABSOLUTE,
     z = 4,
   })
@@ -785,20 +785,20 @@ function TestAbsolutePositioningBasic:testAsymmetricAbsoluteTree()
     id = "leftDeep3",
     x = 5,
     y = 5,
-    w = 70,
+    width = 70,
-    h = 50,
+    height = 50,
     positioning = Positioning.ABSOLUTE,
     z = 5,
   })
 
   -- Right branch: wide shallow
-  local rightBranch = Gui.new({
+  local rightBrancheight = Gui.new({
     parent = root,
     id = "rightBranch",
     x = 800,
     y = 250,
-    w = 400,
+    width = 400,
-    h = 200,
+    height = 200,
     positioning = Positioning.ABSOLUTE,
     z = 2,
   })
@@ -810,8 +810,8 @@ function TestAbsolutePositioningBasic:testAsymmetricAbsoluteTree()
       id = "rightChild" .. i,
       x = i * 70,
       y = 50,
-      w = 60,
+      width = 60,
-      h = 100,
+      height = 100,
       positioning = Positioning.ABSOLUTE,
       z = i,
     })
@@ -839,8 +839,8 @@ function TestAbsolutePositioningBasic:testOverlappingNegativeCoordinates()
     id = "viewport",
     x = 500,
     y = 500,
-    w = 400,
+    width = 400,
-    h = 400,
+    height = 400,
     positioning = Positioning.ABSOLUTE,
     z = 0,
   })
@@ -851,8 +851,8 @@ function TestAbsolutePositioningBasic:testOverlappingNegativeCoordinates()
     id = "topLeft",
     x = -100,
     y = -100,
-    w = 200,
+    width = 200,
-    h = 200,
+    height = 200,
     positioning = Positioning.ABSOLUTE,
     z = 1,
   })
@@ -862,8 +862,8 @@ function TestAbsolutePositioningBasic:testOverlappingNegativeCoordinates()
     id = "topRight",
     x = 300,
     y = -50,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
     positioning = Positioning.ABSOLUTE,
     z = 2,
   })
@@ -873,8 +873,8 @@ function TestAbsolutePositioningBasic:testOverlappingNegativeCoordinates()
     id = "bottomLeft",
     x = -50,
     y = 350,
-    w = 150,
+    width = 150,
-    h = 200,
+    height = 200,
     positioning = Positioning.ABSOLUTE,
     z = 3,
   })
@@ -884,8 +884,8 @@ function TestAbsolutePositioningBasic:testOverlappingNegativeCoordinates()
     id = "center",
     x = 150,
     y = 150,
-    w = 100,
+    width = 100,
-    h = 100,
+    height = 100,
     positioning = Positioning.ABSOLUTE,
     z = 10, -- Highest z-index
   })
@@ -912,8 +912,8 @@ function TestAbsolutePositioningBasic:testCircularPositioningPattern()
     id = "center",
     x = 400,
     y = 400,
-    w = 100,
+    width = 100,
-    h = 100,
+    height = 100,
     positioning = Positioning.ABSOLUTE,
     z = 1,
   })
@@ -932,8 +932,8 @@ function TestAbsolutePositioningBasic:testCircularPositioningPattern()
       id = "orbiter" .. i,
       x = math.floor(x),
       y = math.floor(y),
-      w = 50,
+      width = 50,
-      h = 50,
+      height = 50,
       positioning = Positioning.ABSOLUTE,
       z = i,
     })
@@ -944,8 +944,8 @@ function TestAbsolutePositioningBasic:testCircularPositioningPattern()
       id = "orbiterChild" .. i,
       x = 10,
       y = 10,
-      w = 30,
+      width = 30,
-      h = 30,
+      height = 30,
       positioning = Positioning.ABSOLUTE,
       z = 1,
     })
@@ -966,8 +966,8 @@ function TestAbsolutePositioningBasic:testDeepSingleBranchChain()
     id = "root",
     x = 100,
     y = 100,
-    w = 500,
+    width = 500,
-    h = 500,
+    height = 500,
     positioning = Positioning.ABSOLUTE,
     z = 1,
   })
@@ -979,8 +979,8 @@ function TestAbsolutePositioningBasic:testDeepSingleBranchChain()
       id = "depth" .. i,
       x = 10,
       y = 10,
-      w = math.max(50, 500 - (i * 25)), -- Decreasing width
+      width = math.max(50, 500 - (i * 25)), -- Decreasing width
-      h = math.max(50, 500 - (i * 25)), -- Decreasing height
+      height = math.max(50, 500 - (i * 25)), -- Decreasing height
       positioning = Positioning.ABSOLUTE,
       z = i,
     })
@@ -1011,8 +1011,8 @@ function TestAbsolutePositioningBasic:testComplexBranchingWithOverlaps()
     id = "desktop",
     x = 0,
     y = 0,
-    w = 1920,
+    width = 1920,
-    h = 1080,
+    height = 1080,
     positioning = Positioning.ABSOLUTE,
     z = 0,
   })
@@ -1023,8 +1023,8 @@ function TestAbsolutePositioningBasic:testComplexBranchingWithOverlaps()
     id = "taskbar",
     x = 0,
     y = 1040,
-    w = 1920,
+    width = 1920,
-    h = 40,
+    height = 40,
     positioning = Positioning.ABSOLUTE,
     z = 100, -- Always on top
   })
@@ -1035,8 +1035,8 @@ function TestAbsolutePositioningBasic:testComplexBranchingWithOverlaps()
     id = "window1",
     x = 100,
     y = 100,
-    w = 600,
+    width = 600,
-    h = 400,
+    height = 400,
     positioning = Positioning.ABSOLUTE,
     z = 10,
   })
@@ -1046,8 +1046,8 @@ function TestAbsolutePositioningBasic:testComplexBranchingWithOverlaps()
     id = "window2",
     x = 300,
     y = 200,
-    w = 500,
+    width = 500,
-    h = 350,
+    height = 350,
     positioning = Positioning.ABSOLUTE,
     z = 15, -- Above window1
   })
@@ -1057,8 +1057,8 @@ function TestAbsolutePositioningBasic:testComplexBranchingWithOverlaps()
     id = "window3",
     x = 200,
     y = 150,
-    w = 400,
+    width = 400,
-    h = 300,
+    height = 300,
     positioning = Positioning.ABSOLUTE,
     z = 5, -- Behind window1 and window2
   })
@@ -1070,8 +1070,8 @@ function TestAbsolutePositioningBasic:testComplexBranchingWithOverlaps()
       id = window.id .. "_titlebar",
       x = 0,
       y = 0,
-      w = window.width,
+      width = window.width,
-      h = 30,
+      height = 30,
       positioning = Positioning.ABSOLUTE,
       z = 1,
     })
@@ -1081,8 +1081,8 @@ function TestAbsolutePositioningBasic:testComplexBranchingWithOverlaps()
       id = window.id .. "_content",
       x = 0,
       y = 30,
-      w = window.width,
+      width = window.width,
-      h = window.height - 30,
+      height = window.height - 30,
       positioning = Positioning.ABSOLUTE,
       z = 1,
     })
@@ -1094,8 +1094,8 @@ function TestAbsolutePositioningBasic:testComplexBranchingWithOverlaps()
         id = window.id .. "_item" .. j,
         x = j * 50,
         y = j * 40,
-        w = 80,
+        width = 80,
-        h = 30,
+        height = 30,
         positioning = Positioning.ABSOLUTE,
         z = j,
       })

testing/__tests__/02_absolute_positioning_child_layout_tests.lua

@@ -34,16 +34,16 @@ function TestAbsolutePositioningChildLayout:testAddChildToAbsoluteParent()
     positioning = Positioning.ABSOLUTE,
     x = 100,
     y = 50,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
   })
 
   local child = Gui.new({
     id = "child",
     x = 10,
     y = 20,
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
 
   parent:addChild(child)
@@ -61,24 +61,24 @@ function TestAbsolutePositioningChildLayout:testChildrenMaintainCoordinates()
     positioning = Positioning.ABSOLUTE,
     x = 100,
     y = 50,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
   })
 
   local child1 = Gui.new({
     id = "child1",
     x = 10,
     y = 20,
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
 
   local child2 = Gui.new({
     id = "child2",
     x = 75,
     y = 85,
-    w = 40,
+    width = 40,
-    h = 25,
+    height = 25,
   })
 
   parent:addChild(child1)
@@ -98,8 +98,8 @@ function TestAbsolutePositioningChildLayout:testAbsoluteParentSkipsLayoutChildre
     positioning = Positioning.ABSOLUTE,
     x = 100,
     y = 50,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
     flexDirection = FlexDirection.HORIZONTAL,
   })
 
@@ -107,16 +107,16 @@ function TestAbsolutePositioningChildLayout:testAbsoluteParentSkipsLayoutChildre
     id = "child1",
     x = 10,
     y = 20,
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
 
   local child2 = Gui.new({
     id = "child2",
     x = 200, -- Way beyond parent w - this would be repositioned in flex layout
     y = 300,
-    w = 40,
+    width = 40,
-    h = 25,
+    height = 25,
   })
 
   parent:addChild(child1)
@@ -137,8 +137,8 @@ function TestAbsolutePositioningChildLayout:testAbsoluteParentFlexPropertiesUnch
     positioning = Positioning.ABSOLUTE,
     x = 100,
     y = 50,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
     flexDirection = FlexDirection.VERTICAL,
     justifyContent = JustifyContent.CENTER,
     alignItems = AlignItems.FLEX_END,
@@ -148,8 +148,8 @@ function TestAbsolutePositioningChildLayout:testAbsoluteParentFlexPropertiesUnch
     id = "child",
     x = 10,
     y = 20,
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
 
   -- Store original values
@@ -176,8 +176,8 @@ function TestAbsolutePositioningChildLayout:testMultipleChildrenIndependentPosit
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 0,
-    w = 300,
+    width = 300,
-    h = 300,
+    height = 300,
   })
 
   local children = {}
@@ -186,8 +186,8 @@ function TestAbsolutePositioningChildLayout:testMultipleChildrenIndependentPosit
       id = "child" .. i,
       x = i * 25,
       y = i * 30,
-      w = 20,
+      width = 20,
-      h = 15,
+      height = 15,
     })
     parent:addChild(children[i])
   end
@@ -209,16 +209,16 @@ function TestAbsolutePositioningChildLayout:testAbsoluteChildrenIgnoreFlexLayout
     positioning = Positioning.FLEX,
     x = 0,
     y = 0,
-    w = 300,
+    width = 300,
-    h = 100,
+    height = 100,
     flexDirection = FlexDirection.HORIZONTAL,
     justifyContent = JustifyContent.SPACE_BETWEEN,
   })
 
   local flexChild = Gui.new({
     id = "flex_child",
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
 
   local absoluteChild = Gui.new({
@@ -226,8 +226,8 @@ function TestAbsolutePositioningChildLayout:testAbsoluteChildrenIgnoreFlexLayout
     positioning = Positioning.ABSOLUTE,
     x = 200,
     y = 40,
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
 
   parent:addChild(flexChild)
@@ -249,16 +249,16 @@ function TestAbsolutePositioningChildLayout:testChildCoordinatesIndependentOfPar
     positioning = Positioning.ABSOLUTE,
     x = 100,
     y = 50,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
   })
 
   local child = Gui.new({
     id = "child",
     x = 25,
     y = 30,
-    w = 50,
+    width = 50,
-    h = 40,
+    height = 40,
   })
 
   parent:addChild(child)
@@ -279,8 +279,8 @@ function TestAbsolutePositioningChildLayout:testNestedAbsolutePositioning()
     positioning = Positioning.ABSOLUTE,
     x = 50,
     y = 25,
-    w = 400,
+    width = 400,
-    h = 300,
+    height = 300,
   })
 
   local parent = Gui.new({
@@ -288,16 +288,16 @@ function TestAbsolutePositioningChildLayout:testNestedAbsolutePositioning()
     positioning = Positioning.ABSOLUTE,
     x = 75,
     y = 50,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
   })
 
   local child = Gui.new({
     id = "child",
     x = 10,
     y = 20,
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
 
   grandparent:addChild(parent)
@@ -320,15 +320,15 @@ function TestAbsolutePositioningChildLayout:testAbsoluteParentWithFlexChildren()
     positioning = Positioning.ABSOLUTE,
     x = 100,
     y = 50,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
   })
 
   local flexChild = Gui.new({
     id = "flex_child",
     positioning = Positioning.FLEX,
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
 
   parent:addChild(flexChild)
@@ -352,8 +352,8 @@ function TestAbsolutePositioningChildLayout:testAutoSizingWithAbsoluteParentAndC
     id = "child",
     x = 10,
     y = 20,
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
 
   parent:addChild(child)
@@ -371,8 +371,8 @@ function TestAbsolutePositioningChildLayout:testChildrenPreservePositioningType(
     positioning = Positioning.ABSOLUTE,
     x = 100,
     y = 50,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
   })
 
   local absoluteChild = Gui.new({
@@ -380,15 +380,15 @@ function TestAbsolutePositioningChildLayout:testChildrenPreservePositioningType(
     positioning = Positioning.ABSOLUTE,
     x = 25,
     y = 30,
-    w = 50,
+    width = 50,
-    h = 40,
+    height = 40,
   })
 
   local flexChild = Gui.new({
     id = "flex_child",
     positioning = Positioning.FLEX,
-    w = 60,
+    width = 60,
-    h = 35,
+    height = 35,
   })
 
   parent:addChild(absoluteChild)
@@ -406,16 +406,16 @@ function TestAbsolutePositioningChildLayout:testParentChildCoordinateRelationshi
     positioning = Positioning.ABSOLUTE,
     x = 100,
     y = 50,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
   })
 
   local child = Gui.new({
     id = "child",
     x = 25,
     y = 30,
-    w = 50,
+    width = 50,
-    h = 40,
+    height = 40,
   })
 
   parent:addChild(child)
@@ -434,8 +434,8 @@ function TestAbsolutePositioningChildLayout:testAddChildNoParentRepositioning()
     positioning = Positioning.ABSOLUTE,
     x = 150,
     y = 75,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
   })
 
   local originalX = parent.x
@@ -445,8 +445,8 @@ function TestAbsolutePositioningChildLayout:testAddChildNoParentRepositioning()
     id = "child",
     x = 25,
     y = 30,
-    w = 50,
+    width = 50,
-    h = 40,
+    height = 40,
   })
 
   parent:addChild(child)
@@ -463,13 +463,13 @@ function TestAbsolutePositioningChildLayout:testChildrenTableMaintained()
     positioning = Positioning.ABSOLUTE,
     x = 100,
     y = 50,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
   })
 
-  local child1 = Gui.new({ id = "child1", x = 10, y = 20, w = 50, h = 30 })
+  local child1 = Gui.new({ id = "child1", x = 10, y = 20, width = 50, height = 30 })
-  local child2 = Gui.new({ id = "child2", x = 70, y = 80, w = 40, h = 25 })
+  local child2 = Gui.new({ id = "child2", x = 70, y = 80, width = 40, height = 25 })
-  local child3 = Gui.new({ id = "child3", x = 120, y = 90, w = 30, h = 35 })
+  local child3 = Gui.new({ id = "child3", x = 120, y = 90, width = 30, height = 35 })
 
   parent:addChild(child1)
   luaunit.assertEquals(#parent.children, 1)
@@ -496,8 +496,8 @@ function TestAbsolutePositioningChildLayout:testAbsoluteParentMixedChildTypes()
     positioning = Positioning.ABSOLUTE,
     x = 100,
     y = 50,
-    w = 300,
+    width = 300,
-    h = 200,
+    height = 200,
   })
 
   local absoluteChild = Gui.new({
@@ -505,15 +505,15 @@ function TestAbsolutePositioningChildLayout:testAbsoluteParentMixedChildTypes()
     positioning = Positioning.ABSOLUTE,
     x = 25,
     y = 30,
-    w = 50,
+    width = 50,
-    h = 40,
+    height = 40,
   })
 
   local flexChild = Gui.new({
     id = "flex_child",
     positioning = Positioning.FLEX,
-    w = 60,
+    width = 60,
-    h = 35,
+    height = 35,
   })
 
   parent:addChild(absoluteChild)
@@ -548,8 +548,8 @@ function TestAbsolutePositioningChildLayout:testDeepHierarchyMixedPositioning()
     positioning = Positioning.ABSOLUTE,
     x = 100,
     y = 100,
-    w = 800,
+    width = 800,
-    h = 600,
+    height = 600,
   })
 
   local flexLevel1 = Gui.new({
@@ -559,8 +559,8 @@ function TestAbsolutePositioningChildLayout:testDeepHierarchyMixedPositioning()
     flexDirection = FlexDirection.HORIZONTAL,
     x = 50, -- Should be ignored due to flex positioning
     y = 50,
-    w = 700,
+    width = 700,
-    h = 500,
+    height = 500,
     gap = 20,
   })
 
@@ -571,24 +571,24 @@ function TestAbsolutePositioningChildLayout:testDeepHierarchyMixedPositioning()
     positioning = Positioning.ABSOLUTE,
     x = 600, -- Absolute position within flex parent
     y = 400,
-    w = 150,
+    width = 150,
-    h = 100,
+    height = 100,
   })
 
   local flexChild1 = Gui.new({
     parent = flexLevel1,
     id = "flexChild1",
     positioning = Positioning.FLEX,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
   })
 
   local flexChild2 = Gui.new({
     parent = flexLevel1,
     id = "flexChild2",
     positioning = Positioning.FLEX,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
   })
 
   -- Add grandchildren to flex children
@@ -598,16 +598,16 @@ function TestAbsolutePositioningChildLayout:testDeepHierarchyMixedPositioning()
     positioning = Positioning.ABSOLUTE,
     x = 75,
     y = 75,
-    w = 50,
+    width = 50,
-    h = 50,
+    height = 50,
   })
 
   local flexGrandchild = Gui.new({
     parent = flexChild2,
     id = "flexGrandchild",
     positioning = Positioning.FLEX,
-    w = 100,
+    width = 100,
-    h = 75,
+    height = 75,
   })
 
   -- Verify hierarchy structure
@@ -641,8 +641,8 @@ function TestAbsolutePositioningChildLayout:testMultiBranchAbsoluteWithMixedChil
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 0,
-    w = 1200,
+    width = 1200,
-    h = 800,
+    height = 800,
   })
 
   -- Left branch: Absolute parent with flex children
@@ -652,8 +652,8 @@ function TestAbsolutePositioningChildLayout:testMultiBranchAbsoluteWithMixedChil
     positioning = Positioning.ABSOLUTE,
     x = 50,
     y = 50,
-    w = 500,
+    width = 500,
-    h = 700,
+    height = 700,
   })
 
   -- Flex container within absolute parent
@@ -662,8 +662,8 @@ function TestAbsolutePositioningChildLayout:testMultiBranchAbsoluteWithMixedChil
     id = "leftFlexContainer",
     positioning = Positioning.FLEX,
     flexDirection = FlexDirection.VERTICAL,
-    w = 400,
+    width = 400,
-    h = 600,
+    height = 600,
     gap = 15,
   })
 
@@ -673,8 +673,8 @@ function TestAbsolutePositioningChildLayout:testMultiBranchAbsoluteWithMixedChil
       parent = leftFlexContainer,
       id = "leftFlexChild" .. i,
       positioning = Positioning.FLEX,
-      w = 350,
+      width = 350,
-      h = 120,
+      height = 120,
     })
 
     -- Each flex child has absolute grandchildren
@@ -685,8 +685,8 @@ function TestAbsolutePositioningChildLayout:testMultiBranchAbsoluteWithMixedChil
         positioning = Positioning.ABSOLUTE,
         x = j * 100,
         y = 20,
-        w = 80,
+        width = 80,
-        h = 80,
+        height = 80,
       })
     end
   end
@@ -699,8 +699,8 @@ function TestAbsolutePositioningChildLayout:testMultiBranchAbsoluteWithMixedChil
       positioning = Positioning.ABSOLUTE,
       x = 450,
       y = i * 200,
-      w = 40,
+      width = 40,
-      h = 150,
+      height = 150,
     })
   end
 
@@ -711,8 +711,8 @@ function TestAbsolutePositioningChildLayout:testMultiBranchAbsoluteWithMixedChil
     positioning = Positioning.ABSOLUTE,
     x = 650,
     y = 50,
-    w = 500,
+    width = 500,
-    h = 700,
+    height = 700,
   })
 
   local rightFlexContainer = Gui.new({
@@ -720,8 +720,8 @@ function TestAbsolutePositioningChildLayout:testMultiBranchAbsoluteWithMixedChil
     id = "rightFlexContainer",
     positioning = Positioning.FLEX,
     flexDirection = FlexDirection.HORIZONTAL,
-    w = 450,
+    width = 450,
-    h = 200,
+    height = 200,
     gap = 10,
   })
 
@@ -731,8 +731,8 @@ function TestAbsolutePositioningChildLayout:testMultiBranchAbsoluteWithMixedChil
       parent = rightFlexContainer,
       id = "rightFlexChild" .. i,
       positioning = Positioning.FLEX,
-      w = 130,
+      width = 130,
-      h = 180,
+      height = 180,
     })
 
     -- Nested flex container
@@ -741,8 +741,8 @@ function TestAbsolutePositioningChildLayout:testMultiBranchAbsoluteWithMixedChil
       id = "rightNestedFlex" .. i,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
-      w = 120,
+      width = 120,
-      h = 170,
+      height = 170,
       gap = 5,
     })
 
@@ -752,8 +752,8 @@ function TestAbsolutePositioningChildLayout:testMultiBranchAbsoluteWithMixedChil
         parent = nestedFlex,
         id = "rightNestedChild" .. i .. "_" .. j,
         positioning = Positioning.FLEX,
-        w = 110,
+        width = 110,
-        h = 50,
+        height = 50,
       })
     end
   end
@@ -781,8 +781,8 @@ function TestAbsolutePositioningChildLayout:testCascadeAbsoluteWithZIndexConflic
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 0,
-    w = 1000,
+    width = 1000,
-    h = 1000,
+    height = 1000,
     z = 0,
   })
 
@@ -795,8 +795,8 @@ function TestAbsolutePositioningChildLayout:testCascadeAbsoluteWithZIndexConflic
       positioning = Positioning.ABSOLUTE,
       x = i * 50,
       y = i * 50,
-      w = 600,
+      width = 600,
-      h = 600,
+      height = 600,
       z = 6 - i, -- Reverse z-index (layer1=5, layer2=4, etc.)
     })
 
@@ -808,8 +808,8 @@ function TestAbsolutePositioningChildLayout:testCascadeAbsoluteWithZIndexConflic
         positioning = Positioning.ABSOLUTE,
         x = j * 100,
         y = j * 100,
-        w = 200,
+        width = 200,
-        h = 200,
+        height = 200,
         z = j, -- Same z-index pattern across all layers
       })
 
@@ -821,8 +821,8 @@ function TestAbsolutePositioningChildLayout:testCascadeAbsoluteWithZIndexConflic
           positioning = Positioning.ABSOLUTE,
           x = k * 30,
           y = k * 30,
-          w = 50,
+          width = 50,
-          h = 50,
+          height = 50,
           z = k,
         })
       end
@@ -858,8 +858,8 @@ function TestAbsolutePositioningChildLayout:testGridStructureAbsolutePositioning
     positioning = Positioning.ABSOLUTE,
     x = 100,
     y = 100,
-    w = 800,
+    width = 800,
-    h = 600,
+    height = 600,
   })
 
   local rows, cols = 4, 5
@@ -868,7 +868,7 @@ function TestAbsolutePositioningChildLayout:testGridStructureAbsolutePositioning
 
   -- Create grid cells
   local cells = {}
-  for row = 1, rows do
+  for rowidth = 1, rows do
     cells[row] = {}
     for col = 1, cols do
       local x = (col - 1) * (cellWidth + gap)
@@ -880,8 +880,8 @@ function TestAbsolutePositioningChildLayout:testGridStructureAbsolutePositioning
         positioning = Positioning.ABSOLUTE,
         x = x,
         y = y,
-        w = cellWidth,
+        width = cellWidth,
-        h = cellHeight,
+        height = cellHeight,
         z = row * cols + col, -- Unique z-index for each cell
       })
 
@@ -892,8 +892,8 @@ function TestAbsolutePositioningChildLayout:testGridStructureAbsolutePositioning
         positioning = Positioning.ABSOLUTE,
         x = 0,
         y = 0,
-        w = cellWidth,
+        width = cellWidth,
-        h = 30,
+        height = 30,
         z = 1,
       })
 
@@ -903,8 +903,8 @@ function TestAbsolutePositioningChildLayout:testGridStructureAbsolutePositioning
         positioning = Positioning.ABSOLUTE,
         x = 5,
         y = 35,
-        w = cellWidth - 10,
+        width = cellWidth - 10,
-        h = cellHeight - 40,
+        height = cellHeight - 40,
         z = 1,
       })
 
@@ -916,8 +916,8 @@ function TestAbsolutePositioningChildLayout:testGridStructureAbsolutePositioning
           positioning = Positioning.ABSOLUTE,
           x = 10,
           y = i * 25,
-          w = cellWidth - 30,
+          width = cellWidth - 30,
-          h = 20,
+          height = 20,
           z = i,
         })
       end
@@ -927,7 +927,7 @@ function TestAbsolutePositioningChildLayout:testGridStructureAbsolutePositioning
   -- Verify grid structure
   luaunit.assertEquals(#grid.children, rows * cols)
 
-  for row = 1, rows do
+  for rowidth = 1, rows do
     for col = 1, cols do
       local cell = cells[row][col]
       local expectedX = (col - 1) * (cellWidth + gap)
@@ -950,8 +950,8 @@ function TestAbsolutePositioningChildLayout:testComplexModalDialogSystem()
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 0,
-    w = 1920,
+    width = 1920,
-    h = 1080,
+    height = 1080,
     z = 0,
   })
 
@@ -962,8 +962,8 @@ function TestAbsolutePositioningChildLayout:testComplexModalDialogSystem()
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 0,
-    w = 1920,
+    width = 1920,
-    h = 1080,
+    height = 1080,
     z = 1,
   })
 
@@ -974,8 +974,8 @@ function TestAbsolutePositioningChildLayout:testComplexModalDialogSystem()
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 0,
-    w = 1920,
+    width = 1920,
-    h = 1080,
+    height = 1080,
     z = 1000, -- High z-index for overlay
   })
 
@@ -986,8 +986,8 @@ function TestAbsolutePositioningChildLayout:testComplexModalDialogSystem()
     positioning = Positioning.ABSOLUTE,
     x = 460, -- Centered: (1920 - 1000) / 2
     y = 290, -- Centered: (1080 - 500) / 2
-    w = 1000,
+    width = 1000,
-    h = 500,
+    height = 500,
     z = 1001,
   })
 
@@ -998,8 +998,8 @@ function TestAbsolutePositioningChildLayout:testComplexModalDialogSystem()
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 0,
-    w = 1000,
+    width = 1000,
-    h = 50,
+    height = 50,
     z = 1,
   })
 
@@ -1010,8 +1010,8 @@ function TestAbsolutePositioningChildLayout:testComplexModalDialogSystem()
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 50,
-    w = 1000,
+    width = 1000,
-    h = 400,
+    height = 400,
     z = 1,
   })
 
@@ -1022,8 +1022,8 @@ function TestAbsolutePositioningChildLayout:testComplexModalDialogSystem()
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 0,
-    w = 1000,
+    width = 1000,
-    h = 40,
+    height = 40,
     z = 2,
   })
 
@@ -1035,8 +1035,8 @@ function TestAbsolutePositioningChildLayout:testComplexModalDialogSystem()
       positioning = Positioning.ABSOLUTE,
       x = (i - 1) * 250,
       y = 0,
-      w = 250,
+      width = 250,
-      h = 40,
+      height = 40,
       z = i,
     })
   end
@@ -1048,8 +1048,8 @@ function TestAbsolutePositioningChildLayout:testComplexModalDialogSystem()
     positioning = Positioning.ABSOLUTE,
     x = 10,
     y = 50,
-    w = 980,
+    width = 980,
-    h = 340,
+    height = 340,
     z = 1,
   })
 
@@ -1060,8 +1060,8 @@ function TestAbsolutePositioningChildLayout:testComplexModalDialogSystem()
     positioning = Positioning.ABSOLUTE,
     x = 710, -- Offset from primary modal
     y = 340,
-    w = 500,
+    width = 500,
-    h = 400,
+    height = 400,
     z = 1002, -- Above primary modal
   })
 
@@ -1072,8 +1072,8 @@ function TestAbsolutePositioningChildLayout:testComplexModalDialogSystem()
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 0,
-    w = 1920,
+    width = 1920,
-    h = 1080,
+    height = 1080,
     z = 2000, -- Highest z-index
   })
 
@@ -1083,8 +1083,8 @@ function TestAbsolutePositioningChildLayout:testComplexModalDialogSystem()
     positioning = Positioning.ABSOLUTE,
     x = 800,
     y = 600,
-    w = 200,
+    width = 200,
-    h = 50,
+    height = 50,
     z = 2001,
   })
 
@@ -1113,8 +1113,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 0,
-    w = 1200,
+    width = 1200,
-    h = 2000,
+    height = 2000,
     z = 0,
   })
 
@@ -1125,8 +1125,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 0,
-    w = 1200,
+    width = 1200,
-    h = 100,
+    height = 100,
     z = 10,
   })
 
@@ -1137,8 +1137,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
     positioning = Positioning.ABSOLUTE,
     x = 100,
     y = 20,
-    w = 1000,
+    width = 1000,
-    h = 60,
+    height = 60,
     z = 1,
   })
 
@@ -1150,8 +1150,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
       positioning = Positioning.ABSOLUTE,
       x = (i - 1) * 200,
       y = 0,
-      w = 180,
+      width = 180,
-      h = 60,
+      height = 60,
       z = i,
     })
 
@@ -1163,8 +1163,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
         positioning = Positioning.ABSOLUTE,
         x = 0,
         y = 60,
-        w = 180,
+        width = 180,
-        h = 200,
+        height = 200,
         z = 100, -- High z-index for dropdown
       })
 
@@ -1176,8 +1176,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
           positioning = Positioning.ABSOLUTE,
           x = 0,
           y = (j - 1) * 50,
-          w = 180,
+          width = 180,
-          h = 50,
+          height = 50,
           z = j,
         })
       end
@@ -1191,8 +1191,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 100,
-    w = 1200,
+    width = 1200,
-    h = 1700,
+    height = 1700,
     z = 1,
   })
 
@@ -1203,8 +1203,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 0,
-    w = 300,
+    width = 300,
-    h = 1700,
+    height = 1700,
     z = 2,
   })
 
@@ -1216,8 +1216,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
       positioning = Positioning.ABSOLUTE,
       x = 10,
       y = (i - 1) * 280 + 10,
-      w = 280,
+      width = 280,
-      h = 260,
+      height = 260,
       z = i,
     })
 
@@ -1228,8 +1228,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
       positioning = Positioning.ABSOLUTE,
       x = 0,
       y = 0,
-      w = 280,
+      width = 280,
-      h = 40,
+      height = 40,
       z = 1,
     })
 
@@ -1240,8 +1240,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
       positioning = Positioning.ABSOLUTE,
       x = 5,
       y = 45,
-      w = 270,
+      width = 270,
-      h = 210,
+      height = 210,
       z = 1,
     })
 
@@ -1253,8 +1253,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
         positioning = Positioning.ABSOLUTE,
         x = 5,
         y = (j - 1) * 50,
-        w = 260,
+        width = 260,
-        h = 45,
+        height = 45,
         z = j,
       })
     end
@@ -1267,8 +1267,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
     positioning = Positioning.ABSOLUTE,
     x = 320,
     y = 0,
-    w = 880,
+    width = 880,
-    h = 1700,
+    height = 1700,
     z = 1,
   })
 
@@ -1280,8 +1280,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
       positioning = Positioning.ABSOLUTE,
       x = 20,
       y = (i - 1) * 550 + 20,
-      w = 840,
+      width = 840,
-      h = 500,
+      height = 500,
       z = i,
     })
 
@@ -1292,8 +1292,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
       positioning = Positioning.ABSOLUTE,
       x = 0,
       y = 0,
-      w = 840,
+      width = 840,
-      h = 80,
+      height = 80,
       z = 1,
     })
 
@@ -1303,8 +1303,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
       positioning = Positioning.ABSOLUTE,
       x = 0,
       y = 80,
-      w = 840,
+      width = 840,
-      h = 350,
+      height = 350,
       z = 1,
     })
 
@@ -1314,8 +1314,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
       positioning = Positioning.ABSOLUTE,
       x = 0,
       y = 430,
-      w = 840,
+      width = 840,
-      h = 70,
+      height = 70,
       z = 1,
     })
 
@@ -1327,8 +1327,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
         positioning = Positioning.ABSOLUTE,
         x = 20,
         y = 50 + (j - 1) * 100,
-        w = 800,
+        width = 800,
-        h = 80,
+        height = 80,
         z = j,
       })
     end
@@ -1341,8 +1341,8 @@ function TestAbsolutePositioningChildLayout:testDynamicBranchingDOMStructure()
     positioning = Positioning.ABSOLUTE,
     x = 0,
     y = 1800,
-    w = 1200,
+    width = 1200,
-    h = 200,
+    height = 200,
     z = 10,
   })
 
@@ -1381,4 +1381,3 @@ end
 
 -- Run the tests
 luaunit.LuaUnit.run()
-

testing/__tests__/09_layout_validation_tests.lua

@@ -36,8 +36,8 @@ local function createTestContainer(props)
   local defaults = {
     x = 0,
     y = 0,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
     positioning = Positioning.FLEX,
     flexDirection = FlexDirection.HORIZONTAL,
     justifyContent = JustifyContent.FLEX_START,
@@ -91,8 +91,8 @@ function TestLayoutValidation:testInvalidEnumValuesGracefulDegradation()
     return Gui.new({
       x = 0,
       y = 0,
-      w = 100,
+      width = 100,
-      h = 100,
+      height = 100,
       positioning = Positioning.FLEX,
       -- flexDirection = "invalid_direction", -- Skip invalid enum to avoid type error
     })
@@ -105,8 +105,8 @@ function TestLayoutValidation:testInvalidEnumValuesGracefulDegradation()
     return Gui.new({
       x = 0,
       y = 0,
-      w = 100,
+      width = 100,
-      h = 100,
+      height = 100,
       positioning = Positioning.FLEX,
       -- justifyContent = "invalid_justify", -- Skip invalid enum to avoid type error
     })
@@ -147,8 +147,8 @@ function TestLayoutValidation:testInvalidPropertyCombinations()
     return Gui.new({
       x = 10,
       y = 10,
-      w = 100,
+      width = 100,
-      h = 100,
+      height = 100,
       positioning = Positioning.ABSOLUTE,
       flexDirection = FlexDirection.VERTICAL, -- Should be ignored
       justifyContent = JustifyContent.CENTER, -- Should be ignored
@@ -163,8 +163,8 @@ function TestLayoutValidation:testInvalidPropertyCombinations()
     return Gui.new({
       x = 10, -- Should work with flex
       y = 10, -- Should work with flex
-      w = 100,
+      width = 100,
-      h = 100,
+      height = 100,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
     })
@@ -181,8 +181,8 @@ function TestLayoutValidation:testNegativeDimensionsAndPositions()
     return Gui.new({
       x = -10,
       y = -20,
-      w = -50,
+      width = -50,
-      h = -30,
+      height = -30,
     })
   end)
   luaunit.assertTrue(success) -- Should not crash
@@ -198,8 +198,8 @@ function TestLayoutValidation:testExtremelyLargeValues()
     return Gui.new({
       x = 999999,
       y = 999999,
-      w = 999999,
+      width = 999999,
-      h = 999999,
+      height = 999999,
     })
   end)
   luaunit.assertTrue(success) -- Should not crash
@@ -218,8 +218,8 @@ function TestLayoutValidation:testInvalidChildParentRelationships()
     local child = Gui.new({
       x = 10,
       y = 10,
-      w = 50,
+      width = 50,
-      h = 30,
+      height = 30,
       positioning = Positioning.FLEX, -- Child tries to be flex container
     })
     child.parent = parent
@@ -237,15 +237,15 @@ function TestLayoutValidation:testLayoutAfterPropertyChanges()
   local container = createTestContainer()
 
   local child1 = Gui.new({
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
   child1.parent = container
   table.insert(container.children, child1)
 
   local child2 = Gui.new({
-    w = 60,
+    width = 60,
-    h = 35,
+    height = 35,
   })
   child2.parent = container
   table.insert(container.children, child2)
@@ -288,14 +288,14 @@ function TestLayoutValidation:testComplexNestedValidation()
     local root = Gui.new({
       x = 0,
       y = 0,
-      w = 200,
+      width = 200,
-      h = 150,
+      height = 150,
       positioning = Positioning.FLEX,
     })
 
     local flex_child = Gui.new({
-      w = 100,
+      width = 100,
-      h = 75,
+      height = 75,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
     })
@@ -305,16 +305,16 @@ function TestLayoutValidation:testComplexNestedValidation()
     local absolute_grandchild = Gui.new({
       x = 10,
       y = 10,
-      w = 30,
+      width = 30,
-      h = 20,
+      height = 20,
       positioning = Positioning.ABSOLUTE,
     })
     absolute_grandchild.parent = flex_child
     table.insert(flex_child.children, absolute_grandchild)
 
     local flex_grandchild = Gui.new({
-      w = 40,
+      width = 40,
-      h = 25,
+      height = 25,
       -- No positioning - should inherit behavior
     })
     flex_grandchild.parent = flex_child
@@ -350,8 +350,8 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
     local app = Gui.new({
       x = 0,
       y = 0,
-      w = 1200,
+      width = 1200,
-      h = 800,
+      height = 800,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
       justifyContent = JustifyContent.FLEX_START,
@@ -361,7 +361,7 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
 
     -- Header with complex validation scenarios
     local header = Gui.new({
-      h = 60,
+      height = 60,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
       justifyContent = JustifyContent.SPACE_BETWEEN,
@@ -374,8 +374,8 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
 
     -- Header navigation with potential edge cases
     local nav = Gui.new({
-      w = 400,
+      width = 400,
-      h = 40,
+      height = 40,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
       justifyContent = JustifyContent.FLEX_START,
@@ -388,8 +388,8 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
     -- Create nav items with extreme values
     for i = 1, 5 do
       local navItem = Gui.new({
-        w = i == 3 and 0 or 80, -- One item with zero width
+        width = i == 3 and 0 or 80, -- One item with zero width
-        h = i == 4 and -10 or 24, -- One item with negative height
+        height = i == 4 and -10 or 24, -- One item with negative height
         positioning = i == 5 and Positioning.ABSOLUTE or nil, -- Mixed positioning
       })
       navItem.parent = nav
@@ -398,8 +398,8 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
 
     -- Header actions with validation edge cases
     local actions = Gui.new({
-      w = 200,
+      width = 200,
-      h = 40,
+      height = 40,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
       justifyContent = JustifyContent.FLEX_END,
@@ -412,8 +412,8 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
     -- Actions with extreme dimensions
     for i = 1, 3 do
       local action = Gui.new({
-        w = i == 1 and 999999 or 32, -- Extremely large width
+        width = i == 1 and 999999 or 32, -- Extremely large width
-        h = i == 2 and 0.1 or 32, -- Fractional height
+        height = i == 2 and 0.1 or 32, -- Fractional height
         x = i == 3 and -1000 or nil, -- Extreme negative position
         y = i == 3 and -1000 or nil,
       })
@@ -423,7 +423,7 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
 
     -- Main content with nested validation challenges
     local main = Gui.new({
-      h = 740,
+      height = 740,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
       justifyContent = JustifyContent.FLEX_START,
@@ -435,8 +435,8 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
 
     -- Sidebar with deep nesting and edge cases
     local sidebar = Gui.new({
-      w = 250,
+      width = 250,
-      h = 740,
+      height = 740,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
       justifyContent = JustifyContent.FLEX_START,
@@ -450,7 +450,7 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
     -- Sidebar sections with validation challenges
     for section = 1, 3 do
       local sideSection = Gui.new({
-        h = section == 2 and -100 or 200, -- Negative height test
+        height = section == 2 and -100 or 200, -- Negative height test
         positioning = Positioning.FLEX,
         flexDirection = FlexDirection.VERTICAL,
         justifyContent = JustifyContent.FLEX_START,
@@ -463,8 +463,8 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
       -- Section items with extreme properties
       for item = 1, 4 do
         local sectionItem = Gui.new({
-          h = 24,
+          height = 24,
-          w = item == 2 and 0 or nil, -- Zero width test
+          width = item == 2 and 0 or nil, -- Zero width test
           positioning = item == 4 and Positioning.ABSOLUTE or nil,
           x = item == 4 and 50 or nil,
           y = item == 4 and 50 or nil,
@@ -477,8 +477,8 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
         if item <= 2 then
           for nested = 1, 2 do
             local nestedItem = Gui.new({
-              w = nested == 1 and 999999 or 20, -- Extreme width
+              width = nested == 1 and 999999 or 20, -- Extreme width
-              h = 12,
+              height = 12,
               positioning = Positioning.FLEX,
               flexDirection = FlexDirection.HORIZONTAL,
               justifyContent = JustifyContent.CENTER,
@@ -493,8 +493,8 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
 
     -- Content area with complex validation scenarios
     local content = Gui.new({
-      w = 950,
+      width = 950,
-      h = 740,
+      height = 740,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
       justifyContent = JustifyContent.FLEX_START,
@@ -506,7 +506,7 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
 
     -- Content grid with wrapping and validation challenges
     local contentGrid = Gui.new({
-      h = 600,
+      height = 600,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
       flexWrap = FlexWrap.WRAP,
@@ -521,8 +521,8 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
     -- Grid items with validation edge cases
     for i = 1, 12 do
       local gridItem = Gui.new({
-        w = i % 4 == 0 and 0 or 200, -- Some zero width items
+        width = i % 4 == 0 and 0 or 200, -- Some zero width items
-        h = i % 3 == 0 and -50 or 150, -- Some negative height items
+        height = i % 3 == 0 and -50 or 150, -- Some negative height items
         positioning = Positioning.FLEX,
         flexDirection = FlexDirection.VERTICAL,
         justifyContent = JustifyContent.SPACE_BETWEEN,
@@ -535,8 +535,8 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
       -- Grid item content with extreme values
       for j = 1, 3 do
         local itemContent = Gui.new({
-          h = j == 1 and 999999 or 40, -- Extreme height
+          height = j == 1 and 999999 or 40, -- Extreme height
-          w = j == 2 and -100 or nil, -- Negative width
+          width = j == 2 and -100 or nil, -- Negative width
           positioning = j == 3 and Positioning.ABSOLUTE or nil,
           x = j == 3 and -500 or nil, -- Extreme negative position
           y = j == 3 and 1000000 or nil, -- Extreme positive position
@@ -548,7 +548,7 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
 
     -- Footer with final validation tests
     local footer = Gui.new({
-      h = 140,
+      height = 140,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
       justifyContent = JustifyContent.SPACE_AROUND,
@@ -562,8 +562,8 @@ function TestLayoutValidation:testComplexMultiLevelLayoutValidation()
     -- Footer sections with final edge cases
     for i = 1, 4 do
       local footerSection = Gui.new({
-        w = i == 1 and 0 or 200,
+        width = i == 1 and 0 or 200,
-        h = i == 2 and -1000 or 100,
+        height = i == 2 and -1000 or 100,
         positioning = Positioning.FLEX,
         flexDirection = FlexDirection.VERTICAL,
         justifyContent = JustifyContent.CENTER,
@@ -618,8 +618,8 @@ function TestLayoutValidation:testComplexDynamicPropertyValidation()
     local dashboard = Gui.new({
       x = 0,
       y = 0,
-      w = 1000,
+      width = 1000,
-      h = 600,
+      height = 600,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
       justifyContent = JustifyContent.FLEX_START,
@@ -629,7 +629,7 @@ function TestLayoutValidation:testComplexDynamicPropertyValidation()
 
     -- Metrics row that will be modified
     local metricsRow = Gui.new({
-      h = 120,
+      height = 120,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
       flexWrap = FlexWrap.WRAP,
@@ -645,8 +645,8 @@ function TestLayoutValidation:testComplexDynamicPropertyValidation()
     local metrics = {}
     for i = 1, 6 do
       local metric = Gui.new({
-        w = 150,
+        width = 150,
-        h = 80,
+        height = 80,
         positioning = Positioning.FLEX,
         flexDirection = FlexDirection.VERTICAL,
         justifyContent = JustifyContent.SPACE_BETWEEN,
@@ -660,8 +660,8 @@ function TestLayoutValidation:testComplexDynamicPropertyValidation()
       -- Metric content
       for j = 1, 3 do
         local content = Gui.new({
-          w = 100,
+          width = 100,
-          h = 20,
+          height = 20,
           positioning = Positioning.FLEX,
           flexDirection = FlexDirection.HORIZONTAL,
           justifyContent = JustifyContent.CENTER,
@@ -674,7 +674,7 @@ function TestLayoutValidation:testComplexDynamicPropertyValidation()
 
     -- Content area that will receive dynamic changes
     local contentArea = Gui.new({
-      h = 480,
+      height = 480,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
       justifyContent = JustifyContent.FLEX_START,
@@ -687,8 +687,8 @@ function TestLayoutValidation:testComplexDynamicPropertyValidation()
 
     -- Left panel for modifications
     local leftPanel = Gui.new({
-      w = 300,
+      width = 300,
-      h = 460,
+      height = 460,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
       justifyContent = JustifyContent.FLEX_START,
@@ -700,8 +700,8 @@ function TestLayoutValidation:testComplexDynamicPropertyValidation()
 
     -- Right panel with nested complexity
     local rightPanel = Gui.new({
-      w = 640,
+      width = 640,
-      h = 460,
+      height = 460,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
       justifyContent = JustifyContent.FLEX_START,
@@ -714,7 +714,7 @@ function TestLayoutValidation:testComplexDynamicPropertyValidation()
     -- Create nested content for validation testing
     for i = 1, 3 do
       local section = Gui.new({
-        h = 140,
+        height = 140,
         positioning = Positioning.FLEX,
         flexDirection = FlexDirection.HORIZONTAL,
         flexWrap = FlexWrap.WRAP,
@@ -729,8 +729,8 @@ function TestLayoutValidation:testComplexDynamicPropertyValidation()
       -- Section items for modification testing
       for j = 1, 8 do
         local item = Gui.new({
-          w = 80,
+          width = 80,
-          h = 60,
+          height = 60,
           positioning = Positioning.FLEX,
           flexDirection = FlexDirection.VERTICAL,
           justifyContent = JustifyContent.CENTER,
@@ -796,8 +796,8 @@ function TestLayoutValidation:testComplexDynamicPropertyValidation()
 
     -- Test 9: Add/remove children dynamically
     local newMetric = Gui.new({
-      w = 0,
+      width = 0,
-      h = -50,
+      height = -50,
       positioning = Positioning.ABSOLUTE,
       x = -1000,
       y = -1000,
@@ -847,22 +847,22 @@ function TestLayoutValidation:testCircularReferenceValidation()
     local container1 = Gui.new({
       x = 0,
       y = 0,
-      w = 200,
+      width = 200,
-      h = 200,
+      height = 200,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
     })
 
     local container2 = Gui.new({
-      w = 180,
+      width = 180,
-      h = 180,
+      height = 180,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
     })
 
     local container3 = Gui.new({
-      w = 160,
+      width = 160,
-      h = 160,
+      height = 160,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
     })
@@ -899,15 +899,15 @@ function TestLayoutValidation:testCircularReferenceValidation()
 
     -- Test case 2: Complex nested structure with potential circular refs
     local container4 = Gui.new({
-      w = 140,
+      width = 140,
-      h = 140,
+      height = 140,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
     })
 
     local container5 = Gui.new({
-      w = 120,
+      width = 120,
-      h = 120,
+      height = 120,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
     })
@@ -962,8 +962,8 @@ function TestLayoutValidation:testLargeStructureValidation()
     local root = Gui.new({
       x = 0,
       y = 0,
-      w = 2000,
+      width = 2000,
-      h = 1500,
+      height = 1500,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
       justifyContent = JustifyContent.FLEX_START,
@@ -983,8 +983,8 @@ function TestLayoutValidation:testLargeStructureValidation()
 
       for i = 1, items do
         local container = Gui.new({
-          w = depth == 1 and 400 or 100,
+          width = depth == 1 and 400 or 100,
-          h = depth == 1 and 200 or 50,
+          height = depth == 1 and 200 or 50,
           positioning = Positioning.FLEX,
           flexDirection = i % 2 == 0 and FlexDirection.HORIZONTAL or FlexDirection.VERTICAL,
           flexWrap = i % 3 == 0 and FlexWrap.WRAP or FlexWrap.NOWRAP,
@@ -1000,8 +1000,8 @@ function TestLayoutValidation:testLargeStructureValidation()
         if depth >= 3 then
           for j = 1, 3 do
             local leaf = Gui.new({
-              w = 20 + j * 5,
+              width = 20 + j * 5,
-              h = 15 + j * 3,
+              height = 15 + j * 3,
               positioning = j == 3 and Positioning.ABSOLUTE or nil,
               x = j == 3 and j * 10 or nil,
               y = j == 3 and j * 10 or nil,
@@ -1128,8 +1128,8 @@ function TestLayoutValidation:testComplexFlexCombinationValidation()
     local mainContainer = Gui.new({
       x = 0,
       y = 0,
-      w = 2400,
+      width = 2400,
-      h = 1800,
+      height = 1800,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
       flexWrap = FlexWrap.WRAP,
@@ -1149,8 +1149,8 @@ function TestLayoutValidation:testComplexFlexCombinationValidation()
             combinationCount = combinationCount + 1
 
             local testContainer = Gui.new({
-              w = 200,
+              width = 200,
-              h = 150,
+              height = 150,
               positioning = Positioning.FLEX,
               flexDirection = flexDir,
               justifyContent = justify,
@@ -1165,8 +1165,8 @@ function TestLayoutValidation:testComplexFlexCombinationValidation()
             -- Add children with edge case properties
             for i = 1, 6 do
               local child = Gui.new({
-                w = i == 1 and 0 or (i == 2 and -10 or (i == 6 and 999999 or 30)),
+                width = i == 1 and 0 or (i == 2 and -10 or (i == 6 and 999999 or 30)),
-                h = i == 3 and 0 or (i == 4 and -5 or (i == 5 and 1000000 or 20)),
+                height = i == 3 and 0 or (i == 4 and -5 or (i == 5 and 1000000 or 20)),
                 positioning = i == 6 and Positioning.ABSOLUTE or nil,
                 x = i == 6 and -100 or nil,
                 y = i == 6 and 200 or nil,
@@ -1177,8 +1177,8 @@ function TestLayoutValidation:testComplexFlexCombinationValidation()
               -- Add nested content to some children
               if i <= 3 then
                 local nested = Gui.new({
-                  w = 15,
+                  width = 15,
-                  h = 10,
+                  height = 10,
                   positioning = Positioning.FLEX,
                   flexDirection = FlexDirection.HORIZONTAL,
                   justifyContent = JustifyContent.CENTER,

testing/__tests__/10_performance_tests.lua

@@ -37,8 +37,8 @@ local function createTestContainer(props)
   local defaults = {
     x = 0,
     y = 0,
-    w = 800,
+    width = 800,
-    h = 600,
+    height = 600,
     positioning = Positioning.FLEX,
     flexDirection = FlexDirection.HORIZONTAL,
     justifyContent = JustifyContent.FLEX_START,
@@ -61,8 +61,8 @@ local function createManyChildren(parent, count, child_props)
 
   for i = 1, count do
     local props = {
-      w = child_props.w or 50,
+      width = child_props.w or 50,
-      h = child_props.h or 30,
+      height = child_props.h or 30,
     }
 
     -- Add any additional properties
@@ -152,8 +152,8 @@ end
 function TestPerformance:testComplexNestedLayoutPerformance()
   -- Create a deeply nested structure with multiple levels
   local root = createTestContainer({
-    w = 1000,
+    width = 1000,
-    h = 800,
+    height = 800,
     flexDirection = FlexDirection.VERTICAL,
   })
 
@@ -161,8 +161,8 @@ function TestPerformance:testComplexNestedLayoutPerformance()
     -- Level 1: 5 sections
     for i = 1, 5 do
       local section = Gui.new({
-        w = 950,
+        width = 950,
-        h = 150,
+        height = 150,
         positioning = Positioning.FLEX,
         flexDirection = FlexDirection.HORIZONTAL,
         justifyContent = JustifyContent.SPACE_BETWEEN,
@@ -173,8 +173,8 @@ function TestPerformance:testComplexNestedLayoutPerformance()
       -- Level 2: 4 columns per section
       for j = 1, 4 do
         local column = Gui.new({
-          w = 200,
+          width = 200,
-          h = 140,
+          height = 140,
           positioning = Positioning.FLEX,
           flexDirection = FlexDirection.VERTICAL,
           alignItems = AlignItems.CENTER,
@@ -185,8 +185,8 @@ function TestPerformance:testComplexNestedLayoutPerformance()
         -- Level 3: 3 items per column
         for k = 1, 3 do
           local item = Gui.new({
-            w = 180,
+            width = 180,
-            h = 40,
+            height = 40,
           })
           item.parent = column
           table.insert(column.children, item)
@@ -212,8 +212,8 @@ end
 -- Test 4: Flex Wrap Performance with Many Elements
 function TestPerformance:testFlexWrapPerformanceWithManyElements()
   local container = createTestContainer({
-    w = 400,
+    width = 400,
-    h = 600,
+    height = 600,
     flexDirection = FlexDirection.HORIZONTAL,
     flexWrap = FlexWrap.WRAP,
     justifyContent = JustifyContent.SPACE_AROUND,
@@ -222,8 +222,8 @@ function TestPerformance:testFlexWrapPerformanceWithManyElements()
 
   -- Create many children that will wrap
   local children = createManyChildren(container, 50, {
-    w = 80,
+    width = 80,
-    h = 50,
+    height = 50,
   })
 
   local time, _ = measureTime(function()
@@ -366,8 +366,8 @@ end
 -- Test 8: Stress Test with Maximum Elements
 function TestPerformance:testStressTestWithMaximumElements()
   local container = createTestContainer({
-    w = 1200,
+    width = 1200,
-    h = 900,
+    height = 900,
     flexDirection = FlexDirection.HORIZONTAL,
     flexWrap = FlexWrap.WRAP,
   })
@@ -375,8 +375,8 @@ function TestPerformance:testStressTestWithMaximumElements()
   -- Create a large number of children for stress testing
   local stress_count = 300
   local children = createManyChildren(container, stress_count, {
-    w = 30,
+    width = 30,
-    h = 20,
+    height = 20,
   })
 
   local time, _ = measureTime(function()
@@ -408,8 +408,8 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
 
   -- Create enterprise-grade dashboard with deep nesting (5 levels)
   local dashboard = createTestContainer({
-    w = 1920,
+    width = 1920,
-    h = 1080,
+    height = 1080,
     flexDirection = FlexDirection.VERTICAL,
     gap = 10,
   })
@@ -417,8 +417,8 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
   local time, structure_info = measureTime(function()
     -- Level 1: Header, Main Content, Footer
     local header = Gui.new({
-      w = 1900,
+      width = 1900,
-      h = 80,
+      height = 80,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
       justifyContent = JustifyContent.SPACE_BETWEEN,
@@ -429,8 +429,8 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
     table.insert(dashboard.children, header)
 
     local main_content = Gui.new({
-      w = 1900,
+      width = 1900,
-      h = 980,
+      height = 980,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
       gap = 15,
@@ -439,8 +439,8 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
     table.insert(dashboard.children, main_content)
 
     local footer = Gui.new({
-      w = 1900,
+      width = 1900,
-      h = 60,
+      height = 60,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
       justifyContent = JustifyContent.CENTER,
@@ -452,8 +452,8 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
     local header_sections = { "logo", "navigation", "search", "notifications", "user_menu" }
     for i, section_name in ipairs(header_sections) do
       local section = Gui.new({
-        w = section_name == "navigation" and 400 or 150,
+        width = section_name == "navigation" and 400 or 150,
-        h = 60,
+        height = 60,
         positioning = Positioning.FLEX,
         flexDirection = FlexDirection.HORIZONTAL,
         justifyContent = JustifyContent.CENTER,
@@ -466,8 +466,8 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
       local item_count = section_name == "navigation" and 6 or 3
       for j = 1, item_count do
         local item = Gui.new({
-          w = section_name == "navigation" and 60 or 45,
+          width = section_name == "navigation" and 60 or 45,
-          h = 40,
+          height = 40,
         })
         item.parent = section
         table.insert(section.children, item)
@@ -476,8 +476,8 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
 
     -- Level 2: Main content areas (sidebar, dashboard grid)
     local sidebar = Gui.new({
-      w = 280,
+      width = 280,
-      h = 960,
+      height = 960,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
       gap = 10,
@@ -486,8 +486,8 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
     table.insert(main_content.children, sidebar)
 
     local dashboard_grid = Gui.new({
-      w = 1600,
+      width = 1600,
-      h = 960,
+      height = 960,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.VERTICAL,
       gap = 20,
@@ -506,8 +506,8 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
 
     for _, category in ipairs(menu_categories) do
       local category_container = Gui.new({
-        w = 260,
+        width = 260,
-        h = 40 + (category.items * 35),
+        height = 40 + (category.items * 35),
         positioning = Positioning.FLEX,
         flexDirection = FlexDirection.VERTICAL,
         gap = 2,
@@ -516,15 +516,15 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
       table.insert(sidebar.children, category_container)
 
       -- Category header
-      local category_header = Gui.new({ w = 250, h = 35 })
+      local category_header = Gui.new({ width = 250, height = 35 })
       category_header.parent = category_container
       table.insert(category_container.children, category_header)
 
       -- Level 4: Menu items with sub-indicators
       for i = 1, category.items do
         local menu_item = Gui.new({
-          w = 240,
+          width = 240,
-          h = 30,
+          height = 30,
           positioning = Positioning.FLEX,
           flexDirection = FlexDirection.HORIZONTAL,
           justifyContent = JustifyContent.SPACE_BETWEEN,
@@ -534,15 +534,15 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
         table.insert(category_container.children, menu_item)
 
         -- Level 5: Menu item components (text, icon, badge)
-        local item_icon = Gui.new({ w = 20, h = 20 })
+        local item_icon = Gui.new({ width = 20, height = 20 })
         item_icon.parent = menu_item
         table.insert(menu_item.children, item_icon)
 
-        local item_text = Gui.new({ w = 180, h = 25 })
+        local item_text = Gui.new({ width = 180, height = 25 })
         item_text.parent = menu_item
         table.insert(menu_item.children, item_text)
 
-        local item_badge = Gui.new({ w = 25, h = 18 })
+        local item_badge = Gui.new({ width = 25, height = 18 })
         item_badge.parent = menu_item
         table.insert(menu_item.children, item_badge)
       end
@@ -551,8 +551,8 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
     -- Level 3: Dashboard grid (4x3 widget grid with complex internals)
     for row = 1, 4 do
       local grid_row = Gui.new({
-        w = 1580,
+        width = 1580,
-        h = 220,
+        height = 220,
         positioning = Positioning.FLEX,
         flexDirection = FlexDirection.HORIZONTAL,
         justifyContent = JustifyContent.SPACE_BETWEEN,
@@ -563,8 +563,8 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
 
       for col = 1, 3 do
         local widget = Gui.new({
-          w = 500,
+          width = 500,
-          h = 200,
+          height = 200,
           positioning = Positioning.FLEX,
           flexDirection = FlexDirection.VERTICAL,
           gap = 8,
@@ -574,8 +574,8 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
 
         -- Level 4: Widget components (header, content, footer)
         local widget_header = Gui.new({
-          w = 480,
+          width = 480,
-          h = 40,
+          height = 40,
           positioning = Positioning.FLEX,
           flexDirection = FlexDirection.HORIZONTAL,
           justifyContent = JustifyContent.SPACE_BETWEEN,
@@ -585,8 +585,8 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
         table.insert(widget.children, widget_header)
 
         local widget_content = Gui.new({
-          w = 480,
+          width = 480,
-          h = 120,
+          height = 120,
           positioning = Positioning.FLEX,
           flexDirection = FlexDirection.HORIZONTAL,
           flexWrap = FlexWrap.WRAP,
@@ -598,8 +598,8 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
         table.insert(widget.children, widget_content)
 
         local widget_footer = Gui.new({
-          w = 480,
+          width = 480,
-          h = 32,
+          height = 32,
           positioning = Positioning.FLEX,
           flexDirection = FlexDirection.HORIZONTAL,
           justifyContent = JustifyContent.FLEX_END,
@@ -612,21 +612,21 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
         local content_elements = (row * col) % 4 == 0 and 12 or 8
         for i = 1, content_elements do
           local element = Gui.new({
-            w = content_elements > 10 and 35 or 55,
+            width = content_elements > 10 and 35 or 55,
-            h = content_elements > 10 and 25 or 35,
+            height = content_elements > 10 and 25 or 35,
           })
           element.parent = widget_content
           table.insert(widget_content.children, element)
         end
 
         -- Widget header components
-        local widget_title = Gui.new({ w = 200, h = 30 })
+        local widget_title = Gui.new({ width = 200, height = 30 })
         widget_title.parent = widget_header
         table.insert(widget_header.children, widget_title)
 
         local widget_actions = Gui.new({
-          w = 120,
+          width = 120,
-          h = 30,
+          height = 30,
           positioning = Positioning.FLEX,
           flexDirection = FlexDirection.HORIZONTAL,
           gap = 5,
@@ -635,13 +635,13 @@ function TestPerformance:testComplexEnterpriseApplicationPerformance()
         table.insert(widget_header.children, widget_actions)
 
         for j = 1, 3 do
-          local action_btn = Gui.new({ w = 30, h = 25 })
+          local action_btn = Gui.new({ width = 30, height = 25 })
           action_btn.parent = widget_actions
           table.insert(widget_actions.children, action_btn)
         end
 
         -- Widget footer components
-        local footer_info = Gui.new({ w = 100, h = 25 })
+        local footer_info = Gui.new({ width = 100, height = 25 })
         footer_info.parent = widget_footer
         table.insert(widget_footer.children, footer_info)
       end
@@ -693,8 +693,8 @@ function TestPerformance:testHighFrequencyDynamicLayoutUpdates()
   print("\n=== Test 10: High-Frequency Dynamic Updates Performance ===")
 
   local container = createTestContainer({
-    w = 1200,
+    width = 1200,
-    h = 800,
+    height = 800,
     flexDirection = FlexDirection.VERTICAL,
     gap = 10,
   })
@@ -703,8 +703,8 @@ function TestPerformance:testHighFrequencyDynamicLayoutUpdates()
   local sections = {}
   for i = 1, 8 do
     local section = Gui.new({
-      w = 1180,
+      width = 1180,
-      h = 90,
+      height = 90,
       positioning = Positioning.FLEX,
       flexDirection = FlexDirection.HORIZONTAL,
       justifyContent = JustifyContent.SPACE_BETWEEN,
@@ -718,8 +718,8 @@ function TestPerformance:testHighFrequencyDynamicLayoutUpdates()
     -- Create dynamic items in each section
     for j = 1, 10 do
       local item = Gui.new({
-        w = 100,
+        width = 100,
-        h = 70,
+        height = 70,
         positioning = Positioning.FLEX,
         flexDirection = FlexDirection.VERTICAL,
         justifyContent = JustifyContent.CENTER,
@@ -730,7 +730,7 @@ function TestPerformance:testHighFrequencyDynamicLayoutUpdates()
 
       -- Sub-items for more complex updates
       for k = 1, 3 do
-        local sub_item = Gui.new({ w = 80, h = 20 })
+        local sub_item = Gui.new({ width = 80, height = 20 })
         sub_item.parent = item
         table.insert(item.children, sub_item)
       end
@@ -821,8 +821,8 @@ function TestPerformance:testComplexAnimationReadyLayoutPerformance()
 
   -- Create animation-heavy interface structure
   local animation_container = createTestContainer({
-    w = 1400,
+    width = 1400,
-    h = 900,
+    height = 900,
     flexDirection = FlexDirection.VERTICAL,
     gap = 15,
   })
@@ -832,8 +832,8 @@ function TestPerformance:testComplexAnimationReadyLayoutPerformance()
     -- Create multiple animated sections with complex layouts
     for section_id = 1, 6 do
       local section = Gui.new({
-        w = 1380,
+        width = 1380,
-        h = 140,
+        height = 140,
         positioning = Positioning.FLEX,
         flexDirection = FlexDirection.HORIZONTAL,
         justifyContent = JustifyContent.SPACE_AROUND,
@@ -846,8 +846,8 @@ function TestPerformance:testComplexAnimationReadyLayoutPerformance()
       -- Create animated cards/panels
       for card_id = 1, 8 do
         local card = Gui.new({
-          w = 160,
+          width = 160,
-          h = 120,
+          height = 120,
           positioning = Positioning.FLEX,
           flexDirection = FlexDirection.VERTICAL,
           justifyContent = JustifyContent.SPACE_BETWEEN,
@@ -859,8 +859,8 @@ function TestPerformance:testComplexAnimationReadyLayoutPerformance()
 
         -- Card header with animated elements
         local card_header = Gui.new({
-          w = 150,
+          width = 150,
-          h = 30,
+          height = 30,
           positioning = Positioning.FLEX,
           flexDirection = FlexDirection.HORIZONTAL,
           justifyContent = JustifyContent.SPACE_BETWEEN,
@@ -870,18 +870,18 @@ function TestPerformance:testComplexAnimationReadyLayoutPerformance()
         table.insert(card.children, card_header)
 
         -- Animated header components
-        local title = Gui.new({ w = 100, h = 25 })
+        local title = Gui.new({ width = 100, height = 25 })
         title.parent = card_header
         table.insert(card_header.children, title)
 
-        local status_indicator = Gui.new({ w = 20, h = 20 })
+        local status_indicator = Gui.new({ width = 20, height = 20 })
         status_indicator.parent = card_header
         table.insert(card_header.children, status_indicator)
 
         -- Card content with animated metrics
         local card_content = Gui.new({
-          w = 150,
+          width = 150,
-          h = 60,
+          height = 60,
           positioning = Positioning.FLEX,
           flexDirection = FlexDirection.HORIZONTAL,
           flexWrap = FlexWrap.WRAP,
@@ -896,8 +896,8 @@ function TestPerformance:testComplexAnimationReadyLayoutPerformance()
         local metric_count = 4 + (section_id % 3)
         for i = 1, metric_count do
           local metric = Gui.new({
-            w = 35,
+            width = 35,
-            h = 25,
+            height = 25,
             positioning = Positioning.FLEX,
             justifyContent = JustifyContent.CENTER,
             alignItems = AlignItems.CENTER,
@@ -909,8 +909,8 @@ function TestPerformance:testComplexAnimationReadyLayoutPerformance()
 
         -- Card footer with action buttons
         local card_footer = Gui.new({
-          w = 150,
+          width = 150,
-          h = 25,
+          height = 25,
           positioning = Positioning.FLEX,
           flexDirection = FlexDirection.HORIZONTAL,
           justifyContent = JustifyContent.FLEX_END,
@@ -920,7 +920,7 @@ function TestPerformance:testComplexAnimationReadyLayoutPerformance()
         table.insert(card.children, card_footer)
 
         for i = 1, 2 do
-          local action_btn = Gui.new({ w = 25, h = 20 })
+          local action_btn = Gui.new({ width = 25, height = 20 })
           action_btn.parent = card_footer
           table.insert(card_footer.children, action_btn)
           table.insert(animation_elements, action_btn)
@@ -1024,8 +1024,8 @@ function TestPerformance:testMemoryIntensiveLayoutPerformanceWithCleanup()
       -- Create intensive layout structure
       local cycle_start = os.clock()
       local root = createTestContainer({
-        w = 1600,
+        width = 1600,
-        h = 1000,
+        height = 1000,
         flexDirection = FlexDirection.VERTICAL,
         gap = 8,
       })
@@ -1035,8 +1035,8 @@ function TestPerformance:testMemoryIntensiveLayoutPerformanceWithCleanup()
       -- Create memory-intensive nested structure
       for level1 = 1, 10 do
         local section = Gui.new({
-          w = 1580,
+          width = 1580,
-          h = 95,
+          height = 95,
           positioning = Positioning.FLEX,
           flexDirection = FlexDirection.HORIZONTAL,
           flexWrap = FlexWrap.WRAP,
@@ -1049,8 +1049,8 @@ function TestPerformance:testMemoryIntensiveLayoutPerformanceWithCleanup()
 
         for level2 = 1, 15 do
           local container = Gui.new({
-            w = 100,
+            width = 100,
-            h = 85,
+            height = 85,
             positioning = Positioning.FLEX,
             flexDirection = FlexDirection.VERTICAL,
             justifyContent = JustifyContent.SPACE_BETWEEN,
@@ -1062,8 +1062,8 @@ function TestPerformance:testMemoryIntensiveLayoutPerformanceWithCleanup()
 
           for level3 = 1, 3 do
             local item = Gui.new({
-              w = 95,
+              width = 95,
-              h = 25,
+              height = 25,
               positioning = Positioning.FLEX,
               flexDirection = FlexDirection.HORIZONTAL,
               justifyContent = JustifyContent.CENTER,
@@ -1075,7 +1075,7 @@ function TestPerformance:testMemoryIntensiveLayoutPerformanceWithCleanup()
 
             -- Add some leaf nodes for memory pressure
             for level4 = 1, 2 do
-              local leaf = Gui.new({ w = 40, h = 20 })
+              local leaf = Gui.new({ width = 40, height = 20 })
               leaf.parent = item
               table.insert(item.children, leaf)
               table.insert(all_elements, leaf)
@@ -1172,8 +1172,8 @@ function TestPerformance:testExtremeScalePerformanceBenchmark()
 
     local test_time, test_metrics = measureTime(function()
       local root = createTestContainer({
-        w = 2000,
+        width = 2000,
-        h = 1500,
+        height = 1500,
         flexDirection = FlexDirection.VERTICAL,
         flexWrap = FlexWrap.WRAP,
         gap = 5,
@@ -1189,8 +1189,8 @@ function TestPerformance:testExtremeScalePerformanceBenchmark()
 
         for row = 1, rows do
           local row_container = Gui.new({
-            w = 1980,
+            width = 1980,
-            h = 25,
+            height = 25,
             positioning = Positioning.FLEX,
             flexDirection = FlexDirection.HORIZONTAL,
             flexWrap = FlexWrap.WRAP,
@@ -1202,7 +1202,7 @@ function TestPerformance:testExtremeScalePerformanceBenchmark()
 
           local items_in_this_row = math.min(items_per_row, test_config.elements - (row - 1) * items_per_row)
           for col = 1, items_in_this_row do
-            local item = Gui.new({ w = 35, h = 20 })
+            local item = Gui.new({ width = 35, height = 20 })
             item.parent = row_container
             table.insert(row_container.children, item)
             created_elements = created_elements + 1
@@ -1216,8 +1216,8 @@ function TestPerformance:testExtremeScalePerformanceBenchmark()
 
         for depth = 1, test_config.depth do
           local level_container = Gui.new({
-            w = 1900 - (depth * 50),
+            width = 1900 - (depth * 50),
-            h = 1400 - (depth * 100),
+            height = 1400 - (depth * 100),
             positioning = Positioning.FLEX,
             flexDirection = (depth % 2 == 0) and FlexDirection.VERTICAL or FlexDirection.HORIZONTAL,
             flexWrap = FlexWrap.WRAP,
@@ -1232,7 +1232,7 @@ function TestPerformance:testExtremeScalePerformanceBenchmark()
           else
             -- Final level - add many elements
             for i = 1, elements_per_level do
-              local leaf = Gui.new({ w = 30 + (i % 20), h = 25 + (i % 15) })
+              local leaf = Gui.new({ width = 30 + (i % 20), height = 25 + (i % 15) })
               leaf.parent = level_container
               table.insert(level_container.children, leaf)
               created_elements = created_elements + 1
@@ -1252,8 +1252,8 @@ function TestPerformance:testExtremeScalePerformanceBenchmark()
 
           for i = 1, children_count do
             local branch = Gui.new({
-              w = 150 - (current_depth * 15),
+              width = 150 - (current_depth * 15),
-              h = 100 - (current_depth * 10),
+              height = 100 - (current_depth * 10),
               positioning = Positioning.FLEX,
               flexDirection = (i % 2 == 0) and FlexDirection.VERTICAL or FlexDirection.HORIZONTAL,
               justifyContent = JustifyContent.SPACE_AROUND,
@@ -1285,8 +1285,8 @@ function TestPerformance:testExtremeScalePerformanceBenchmark()
 
         for section_id = 1, sections do
           local section = Gui.new({
-            w = 1900,
+            width = 1900,
-            h = 200,
+            height = 200,
             positioning = Positioning.FLEX,
             flexDirection = FlexDirection.HORIZONTAL,
             flexWrap = FlexWrap.WRAP,
@@ -1301,8 +1301,8 @@ function TestPerformance:testExtremeScalePerformanceBenchmark()
           local subsections = 5 + (section_id % 3)
           for sub_id = 1, subsections do
             local subsection = Gui.new({
-              w = 300,
+              width = 300,
-              h = 180,
+              height = 180,
               positioning = Positioning.FLEX,
               flexDirection = FlexDirection.VERTICAL,
               justifyContent = JustifyContent.SPACE_AROUND,
@@ -1318,8 +1318,8 @@ function TestPerformance:testExtremeScalePerformanceBenchmark()
               if elem_id % 3 == 0 then
                 -- Complex element with children
                 local complex_elem = Gui.new({
-                  w = 280,
+                  width = 280,
-                  h = 35,
+                  height = 35,
                   positioning = Positioning.FLEX,
                   flexDirection = FlexDirection.HORIZONTAL,
                   justifyContent = JustifyContent.SPACE_BETWEEN,
@@ -1330,14 +1330,14 @@ function TestPerformance:testExtremeScalePerformanceBenchmark()
                 created_elements = created_elements + 1
 
                 for child_id = 1, 4 do
-                  local child = Gui.new({ w = 60, h = 30 })
+                  local child = Gui.new({ width = 60, height = 30 })
                   child.parent = complex_elem
                   table.insert(complex_elem.children, child)
                   created_elements = created_elements + 1
                 end
               else
                 -- Simple element
-                local simple_elem = Gui.new({ w = 270, h = 25 })
+                local simple_elem = Gui.new({ width = 270, height = 25 })
                 simple_elem.parent = subsection
                 table.insert(subsection.children, simple_elem)
                 created_elements = created_elements + 1

testing/__tests__/11_auxiliary_functions_tests.lua

@@ -144,14 +144,14 @@ function TestAuxiliaryFunctions:testCalculateAutoWidthWithChildren()
 
   local child1 = Gui.new({
     parent = parent,
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
 
   local child2 = Gui.new({
     parent = parent,
-    w = 40,
+    width = 40,
-    h = 25,
+    height = 25,
   })
 
   local width = parent:calculateAutoWidth()
@@ -176,14 +176,14 @@ function TestAuxiliaryFunctions:testCalculateAutoHeightWithChildren()
 
   local child1 = Gui.new({
     parent = parent,
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
 
   local child2 = Gui.new({
     parent = parent,
-    w = 40,
+    width = 40,
-    h = 25,
+    height = 25,
   })
 
   local height = parent:calculateAutoHeight()
@@ -198,8 +198,8 @@ function TestAuxiliaryFunctions:testGetBounds()
   local element = Gui.new({
     x = 10,
     y = 20,
-    w = 100,
+    width = 100,
-    h = 80,
+    height = 80,
   })
 
   local bounds = element:getBounds()
@@ -212,8 +212,8 @@ end
 function TestAuxiliaryFunctions:testUpdateText()
   local element = Gui.new({
     text = "Original Text",
-    w = 100,
+    width = 100,
-    h = 50,
+    height = 50,
   })
 
   element:updateText("New Text")
@@ -327,8 +327,8 @@ end
 
 function TestAuxiliaryFunctions:testAnimationApplyToElement()
   local element = Gui.new({
-    w = 100,
+    width = 100,
-    h = 50,
+    height = 50,
   })
 
   local fadeAnim = Gui.Animation.fade(1.0, 1.0, 0.0)
@@ -339,8 +339,8 @@ end
 
 function TestAuxiliaryFunctions:testAnimationReplaceExisting()
   local element = Gui.new({
-    w = 100,
+    width = 100,
-    h = 50,
+    height = 50,
   })
 
   local fadeAnim1 = Gui.Animation.fade(1.0, 1.0, 0.0)
@@ -366,15 +366,15 @@ function TestAuxiliaryFunctions:testGuiDestroyWithElements()
   local element1 = Gui.new({
     x = 10,
     y = 10,
-    w = 100,
+    width = 100,
-    h = 50,
+    height = 50,
   })
 
   local element2 = Gui.new({
     x = 20,
     y = 20,
-    w = 80,
+    width = 80,
-    h = 40,
+    height = 40,
   })
 
   luaunit.assertEquals(#Gui.topElements, 2)
@@ -385,20 +385,20 @@ end
 
 function TestAuxiliaryFunctions:testGuiDestroyWithNestedElements()
   local parent = Gui.new({
-    w = 200,
+    width = 200,
-    h = 100,
+    height = 100,
   })
 
   local child1 = Gui.new({
     parent = parent,
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
 
   local child2 = Gui.new({
     parent = parent,
-    w = 40,
+    width = 40,
-    h = 25,
+    height = 25,
   })
 
   luaunit.assertEquals(#Gui.topElements, 1)
@@ -410,14 +410,14 @@ end
 
 function TestAuxiliaryFunctions:testElementDestroyRemovesFromParent()
   local parent = Gui.new({
-    w = 200,
+    width = 200,
-    h = 100,
+    height = 100,
   })
 
   local child = Gui.new({
     parent = parent,
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
 
   luaunit.assertEquals(#parent.children, 1)
@@ -432,8 +432,8 @@ function TestAuxiliaryFunctions:testElementDestroyRemovesFromTopElements()
   local element = Gui.new({
     x = 10,
     y = 10,
-    w = 100,
+    width = 100,
-    h = 50,
+    height = 50,
   })
 
   luaunit.assertEquals(#Gui.topElements, 1)
@@ -445,20 +445,20 @@ end
 
 function TestAuxiliaryFunctions:testElementDestroyNestedChildren()
   local parent = Gui.new({
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
   })
 
   local child = Gui.new({
     parent = parent,
-    w = 100,
+    width = 100,
-    h = 75,
+    height = 75,
   })
 
   local grandchild = Gui.new({
     parent = child,
-    w = 50,
+    width = 50,
-    h = 30,
+    height = 30,
   })
 
   luaunit.assertEquals(#parent.children, 1)
@@ -629,8 +629,8 @@ function TestAuxiliaryFunctions:testComplexColorManagementSystem()
 
   -- Test color application to complex UI structure
   local ui_container = Gui.new({
-    w = 800,
+    width = 800,
-    h = 600,
+    height = 600,
     positioning = enums.Positioning.FLEX,
     flexDirection = enums.FlexDirection.VERTICAL,
     gap = 10,
@@ -640,8 +640,8 @@ function TestAuxiliaryFunctions:testComplexColorManagementSystem()
   local component_types = { "header", "content", "sidebar", "footer", "modal" }
   for i, comp_type in ipairs(component_types) do
     local component = Gui.new({
-      w = 780,
+      width = 780,
-      h = 100,
+      height = 100,
       positioning = enums.Positioning.FLEX,
       flexDirection = enums.FlexDirection.HORIZONTAL,
       justifyContent = enums.JustifyContent.SPACE_BETWEEN,
@@ -659,8 +659,8 @@ function TestAuxiliaryFunctions:testComplexColorManagementSystem()
     -- Add sub-components with color variations
     for j = 1, 4 do
       local sub_component = Gui.new({
-        w = 150,
+        width = 150,
-        h = 80,
+        height = 80,
         positioning = enums.Positioning.FLEX,
         justifyContent = enums.JustifyContent.CENTER,
         alignItems = enums.AlignItems.CENTER,
@@ -748,8 +748,8 @@ function TestAuxiliaryFunctions:testAdvancedTextAndAutoSizingSystem()
 
   -- Create dynamic text containers with auto-sizing
   local main_container = Gui.new({
-    w = 1000,
+    width = 1000,
-    h = 800,
+    height = 800,
     positioning = enums.Positioning.FLEX,
     flexDirection = enums.FlexDirection.VERTICAL,
     gap = 15,
@@ -757,8 +757,8 @@ function TestAuxiliaryFunctions:testAdvancedTextAndAutoSizingSystem()
 
   for _, scenario in ipairs(text_scenarios) do
     local text_container = Gui.new({
-      w = 900,
+      width = 900,
-      h = 100,
+      height = 100,
       positioning = enums.Positioning.FLEX,
       flexDirection = enums.FlexDirection.HORIZONTAL,
       justifyContent = enums.JustifyContent.SPACE_BETWEEN,
@@ -772,8 +772,8 @@ function TestAuxiliaryFunctions:testAdvancedTextAndAutoSizingSystem()
     local text_element = Gui.new({
       text = scenario.content,
       textSize = scenario.size,
-      w = 0,
+      width = 0,
-      h = 0, -- Start with zero size for auto-sizing
+      height = 0, -- Start with zero size for auto-sizing
     })
     text_element.parent = text_container
     table.insert(text_container.children, text_element)
@@ -820,8 +820,8 @@ function TestAuxiliaryFunctions:testAdvancedTextAndAutoSizingSystem()
     local fixed_element = Gui.new({
       text = scenario.content,
       textSize = scenario.size,
-      w = 200,
+      width = 200,
-      h = 50, -- Fixed size
+      height = 50, -- Fixed size
     })
     fixed_element.parent = text_container
     table.insert(text_container.children, fixed_element)
@@ -830,8 +830,8 @@ function TestAuxiliaryFunctions:testAdvancedTextAndAutoSizingSystem()
     local adaptive_element = Gui.new({
       text = scenario.content,
       textSize = scenario.size,
-      w = math.max(150, auto_width * 0.8),
+      width = math.max(150, auto_width * 0.8),
-      h = math.max(30, auto_height * 1.2),
+      height = math.max(30, auto_height * 1.2),
     })
     adaptive_element.parent = text_container
     table.insert(text_container.children, adaptive_element)
@@ -892,8 +892,8 @@ function TestAuxiliaryFunctions:testAdvancedTextAndAutoSizingSystem()
 
   -- Test complex auto-sizing with nested structures
   local nested_container = Gui.new({
-    w = 800,
+    width = 800,
-    h = 200,
+    height = 200,
     positioning = enums.Positioning.FLEX,
     flexDirection = enums.FlexDirection.VERTICAL,
     gap = 10,
@@ -904,8 +904,8 @@ function TestAuxiliaryFunctions:testAdvancedTextAndAutoSizingSystem()
   -- Create nested structure with auto-sizing children
   for level = 1, 3 do
     local level_container = Gui.new({
-      w = 750 - (level * 50),
+      width = 750 - (level * 50),
-      h = 60,
+      height = 60,
       positioning = enums.Positioning.FLEX,
       flexDirection = enums.FlexDirection.HORIZONTAL,
       justifyContent = enums.JustifyContent.SPACE_AROUND,
@@ -923,8 +923,8 @@ function TestAuxiliaryFunctions:testAdvancedTextAndAutoSizingSystem()
       local text_item = Gui.new({
         text = item_text,
         textSize = 14 - level,
-        w = 0,
+        width = 0,
-        h = 0,
+        height = 0,
       })
       text_item.parent = level_container
       table.insert(level_container.children, text_item)
@@ -972,8 +972,8 @@ function TestAuxiliaryFunctions:testComprehensiveAnimationEngine()
 
   -- Create container for animated elements
   local animation_container = Gui.new({
-    w = 1200,
+    width = 1200,
-    h = 800,
+    height = 800,
     positioning = enums.Positioning.FLEX,
     flexDirection = enums.FlexDirection.VERTICAL,
     gap = 20,
@@ -1014,8 +1014,8 @@ function TestAuxiliaryFunctions:testComprehensiveAnimationEngine()
   -- Create and configure animations for each test case
   for case_idx, test_case in ipairs(animation_test_cases) do
     local case_container = Gui.new({
-      w = 1180,
+      width = 1180,
-      h = 200,
+      height = 200,
       positioning = enums.Positioning.FLEX,
       flexDirection = enums.FlexDirection.HORIZONTAL,
       flexWrap = enums.FlexWrap.WRAP,
@@ -1029,8 +1029,8 @@ function TestAuxiliaryFunctions:testComprehensiveAnimationEngine()
 
     for elem_idx = 1, test_case.elements do
       local element = Gui.new({
-        w = test_case.properties.width and test_case.properties.width.from or 120,
+        width = test_case.properties.width and test_case.properties.width.from or 120,
-        h = test_case.properties.height and test_case.properties.height.from or 60,
+        height = test_case.properties.height and test_case.properties.height.from or 60,
         opacity = test_case.properties.opacity and test_case.properties.opacity.from or 1.0,
       })
       element.parent = case_container
@@ -1216,7 +1216,7 @@ function TestAuxiliaryFunctions:testComprehensiveAnimationEngine()
   )
 
   -- Test animation chaining and sequencing
-  local chain_element = Gui.new({ w = 100, h = 50, opacity = 1.0 })
+  local chain_element = Gui.new({ width = 100, height = 50, opacity = 1.0 })
   chain_element.parent = animation_container
   table.insert(animation_container.children, chain_element)
 
@@ -1402,8 +1402,8 @@ function TestAuxiliaryFunctions:testAdvancedGUIManagementAndCleanup()
 
     for _, item in ipairs(structure) do
       local element = Gui.new({
-        w = math.max(100, 300 - level * 20),
+        width = math.max(100, 300 - level * 20),
-        h = math.max(30, 80 - level * 5),
+        height = math.max(30, 80 - level * 5),
         positioning = enums.Positioning.FLEX,
         flexDirection = level % 2 == 0 and enums.FlexDirection.HORIZONTAL or enums.FlexDirection.VERTICAL,
         justifyContent = enums.JustifyContent.FLEX_START,
@@ -1574,8 +1574,8 @@ function TestAuxiliaryFunctions:testAdvancedGUIManagementAndCleanup()
 
   -- Test complex element retrieval and manipulation
   local final_container = Gui.new({
-    w = 400,
+    width = 400,
-    h = 300,
+    height = 300,
     positioning = enums.Positioning.FLEX,
     flexDirection = enums.FlexDirection.VERTICAL,
   })
@@ -1584,8 +1584,8 @@ function TestAuxiliaryFunctions:testAdvancedGUIManagementAndCleanup()
   local managed_elements = {}
   for i = 1, 10 do
     local element = Gui.new({
-      w = 350,
+      width = 350,
-      h = 25,
+      height = 25,
       text = "Managed Element " .. i,
       textSize = 12,
     })
@@ -1729,8 +1729,8 @@ function TestAuxiliaryFunctions:testExtremeEdgeCasesAndErrorResilience()
     local element = Gui.new({
       text = test.text,
       textSize = 14,
-      w = 0,
+      width = 0,
-      h = 0,
+      height = 0,
     })
 
     local text_width = element:calculateTextWidth()
@@ -1794,14 +1794,14 @@ function TestAuxiliaryFunctions:testExtremeEdgeCasesAndErrorResilience()
 
   -- Extreme hierarchy testing
   local max_depth = 20
-  local extreme_hierarchy_element = Gui.new({ w = 1000, h = 800 })
+  local extreme_hierarchy_element = Gui.new({ width = 1000, height = 800 })
   local current_parent = extreme_hierarchy_element
 
   -- Create extremely deep hierarchy
   for depth = 1, max_depth do
     local child = Gui.new({
-      w = math.max(50, 1000 - depth * 45),
+      width = math.max(50, 1000 - depth * 45),
-      h = math.max(30, 800 - depth * 35),
+      height = math.max(30, 800 - depth * 35),
       positioning = enums.Positioning.FLEX,
       flexDirection = depth % 2 == 0 and enums.FlexDirection.HORIZONTAL or enums.FlexDirection.VERTICAL,
     })
@@ -1828,8 +1828,8 @@ function TestAuxiliaryFunctions:testExtremeEdgeCasesAndErrorResilience()
 
   -- Test extreme width hierarchy (many siblings)
   local wide_container = Gui.new({
-    w = 2000,
+    width = 2000,
-    h = 200,
+    height = 200,
     positioning = enums.Positioning.FLEX,
     flexDirection = enums.FlexDirection.HORIZONTAL,
     flexWrap = enums.FlexWrap.WRAP,
@@ -1838,7 +1838,7 @@ function TestAuxiliaryFunctions:testExtremeEdgeCasesAndErrorResilience()
 
   local max_siblings = 500
   for i = 1, max_siblings do
-    local sibling = Gui.new({ w = 30, h = 25 })
+    local sibling = Gui.new({ width = 30, height = 25 })
     sibling.parent = wide_container
     table.insert(wide_container.children, sibling)
   end
@@ -1861,7 +1861,7 @@ function TestAuxiliaryFunctions:testExtremeEdgeCasesAndErrorResilience()
   -- Test massive cleanup operations
   local cleanup_elements = {}
   for i = 1, 1000 do
-    local element = Gui.new({ w = 50, h = 30 })
+    local element = Gui.new({ width = 50, height = 30 })
     table.insert(cleanup_elements, element)
   end
 
@@ -1882,7 +1882,7 @@ function TestAuxiliaryFunctions:testExtremeEdgeCasesAndErrorResilience()
   luaunit.assertEquals(#Gui.topElements, 0, "All elements should be cleaned up")
 
   -- Test opacity boundary resilience
-  local opacity_element = Gui.new({ w = 100, h = 50, opacity = 0.5 })
+  local opacity_element = Gui.new({ width = 100, height = 50, opacity = 0.5 })
   local extreme_opacities = { -999, -1, 0, 0.5, 1, 2, 999, math.huge, -math.huge }
 
   for _, opacity in ipairs(extreme_opacities) do

testing/__tests__/12_units_system_tests.lua

@@ -15,7 +15,9 @@ function TestUnitsSystem:setUp()
   -- Clear any existing GUI elements and reset viewport
   Gui.destroy()
   -- Set a consistent viewport size for testing
-  love.graphics.getDimensions = function() return 1200, 800 end
+  love.graphics.getDimensions = function()
+    return 1200, 800
+  end
 end
 
 function TestUnitsSystem:tearDown()
@@ -30,8 +32,8 @@ function TestUnitsSystem:testUnitsParsePx()
   -- Test pixel unit parsing
   local container = Gui.new({
     id = "container",
-    w = "100px",
+    width = "100px",
-    h = "200px",
+    height = "200px",
     x = "50px",
     y = "75px",
   })
@@ -50,14 +52,14 @@ function TestUnitsSystem:testUnitsParsePercentage()
   -- Test percentage unit parsing
   local parent = Gui.new({
     id = "parent",
-    w = 400,
+    width = 400,
-    h = 300,
+    height = 300,
   })
 
   local child = Gui.new({
     id = "child",
-    w = "50%",
+    width = "50%",
-    h = "25%",
+    height = "25%",
     parent = parent,
   })
 
@@ -73,8 +75,8 @@ function TestUnitsSystem:testUnitsParseViewportWidth()
   -- Test viewport width units (1200px viewport)
   local container = Gui.new({
     id = "container",
-    w = "50vw",
+    width = "50vw",
-    h = "100px",
+    height = "100px",
   })
 
   luaunit.assertEquals(container.width, 600) -- 50% of 1200
@@ -86,8 +88,8 @@ function TestUnitsSystem:testUnitsParseViewportHeight()
   -- Test viewport height units (800px viewport)
   local container = Gui.new({
     id = "container",
-    w = "100px",
+    width = "100px",
-    h = "25vh",
+    height = "25vh",
   })
 
   luaunit.assertEquals(container.height, 200) -- 25% of 800
@@ -113,12 +115,12 @@ function TestUnitsSystem:testMixedUnits()
   -- Test elements with different unit types
   local container = Gui.new({
     id = "container",
-    w = "80vw",      -- viewport width
+    width = "80vw", -- viewport width
-    h = "400px",     -- pixels
+    height = "400px", -- pixels
     x = "10%", -- percentage of viewport
     y = "5vh", -- viewport height
     gap = "2vw", -- viewport width for gap
-    textSize = "16px" -- pixel font size
+    textSize = "16px", -- pixel font size
   })
 
   luaunit.assertEquals(container.width, 960) -- 80% of 1200
@@ -137,15 +139,17 @@ function TestUnitsSystem:testResizeViewportUnits()
   -- Test that viewport units recalculate on resize
   local container = Gui.new({
     id = "container",
-    w = "50vw",
+    width = "50vw",
-    h = "25vh",
+    height = "25vh",
   })
 
   luaunit.assertEquals(container.width, 600) -- 50% of 1200
   luaunit.assertEquals(container.height, 200) -- 25% of 800
 
   -- Simulate viewport resize
-  love.graphics.getDimensions = function() return 1600, 1000 end
+  love.graphics.getDimensions = function()
+    return 1600, 1000
+  end
   container:resize(1600, 1000)
 
   luaunit.assertEquals(container.width, 800) -- 50% of 1600
@@ -156,14 +160,14 @@ function TestUnitsSystem:testResizePercentageUnits()
   -- Test percentage units during parent resize
   local parent = Gui.new({
     id = "parent",
-    w = 400,
+    width = 400,
-    h = 300,
+    height = 300,
   })
 
   local child = Gui.new({
     id = "child",
-    w = "75%",
+    width = "75%",
-    h = "50%",
+    height = "50%",
     parent = parent,
   })
 
@@ -183,8 +187,8 @@ function TestUnitsSystem:testResizePixelUnitsNoChange()
   -- Test that pixel units don't change during resize
   local container = Gui.new({
     id = "container",
-    w = "300px",
+    width = "300px",
-    h = "200px",
+    height = "200px",
   })
 
   luaunit.assertEquals(container.width, 300)
@@ -205,14 +209,14 @@ function TestUnitsSystem:testPaddingUnits()
   -- Test different unit types for padding
   local container = Gui.new({
     id = "container",
-    w = 400,
+    width = 400,
-    h = 300,
+    height = 300,
     padding = {
       top = "10px",
       right = "5%",
       bottom = "2vh",
-      left = "1vw"
+      left = "1vw",
-    }
+    },
   })
 
   luaunit.assertEquals(container.padding.top, 10) -- 10px
@@ -230,14 +234,14 @@ function TestUnitsSystem:testMarginUnits()
   -- Test different unit types for margin
   local container = Gui.new({
     id = "container",
-    w = 400,
+    width = 400,
-    h = 300,
+    height = 300,
     margin = {
       top = "8px",
       right = "3%",
       bottom = "1vh",
-      left = "2vw"
+      left = "2vw",
-    }
+    },
   })
 
   luaunit.assertEquals(container.margin.top, 8) -- 8px
@@ -261,8 +265,8 @@ function TestUnitsSystem:testGapUnits()
     id = "flexContainer",
     positioning = Positioning.FLEX,
     flexDirection = FlexDirection.HORIZONTAL,
-    w = 600,
+    width = 600,
-    h = 400,
+    height = 400,
     gap = "2%", -- 2% of container width
   })
 
@@ -275,8 +279,8 @@ function TestUnitsSystem:testGapUnits()
     id = "viewportGapContainer",
     positioning = Positioning.FLEX,
     flexDirection = FlexDirection.VERTICAL,
-    w = 400,
+    width = 400,
-    h = 300,
+    height = 300,
     gap = "1vw",
   })
 
@@ -288,9 +292,9 @@ function TestUnitsSystem:testTextSizeUnits()
   -- Test textSize with different units
   local textElement = Gui.new({
     id = "textElement",
-    w = 200,
+    width = 200,
-    h = 100,
+    height = 100,
-    textSize = "16px"
+    textSize = "16px",
   })
 
   luaunit.assertEquals(textElement.textSize, 16)
@@ -300,9 +304,9 @@ function TestUnitsSystem:testTextSizeUnits()
   -- Test with viewport units
   local viewportTextElement = Gui.new({
     id = "viewportTextElement",
-    w = 200,
+    width = 200,
-    h = 100,
+    height = 100,
-    textSize = "2vw"
+    textSize = "2vw",
   })
 
   luaunit.assertEquals(viewportTextElement.textSize, 24) -- 2% of 1200
@@ -317,8 +321,8 @@ function TestUnitsSystem:testInvalidUnits()
   -- Test handling of invalid unit specifications (should default to pixels)
   local container = Gui.new({
     id = "container",
-    w = "100invalid", -- Should be treated as 100px
+    width = "100invalid", -- Should be treated as 100px
-    h = "50badunit"   -- Should be treated as 50px
+    height = "50badunit", -- Should be treated as 50px
   })
 
   -- Should fallback to pixel values
@@ -332,10 +336,10 @@ function TestUnitsSystem:testZeroAndNegativeValues()
   -- Test zero and negative values with units
   local container = Gui.new({
     id = "container",
-    w = "0px",
+    width = "0px",
-    h = "0vh",
+    height = "0vh",
     x = "-10px",
-    y = "-5%"
+    y = "-5%",
   })
 
   luaunit.assertEquals(container.width, 0)
@@ -348,8 +352,8 @@ function TestUnitsSystem:testVeryLargeValues()
   -- Test very large percentage values
   local container = Gui.new({
     id = "container",
-    w = "200%",  -- 200% of viewport
+    width = "200%", -- 200% of viewport
-    h = "150vh"  -- 150% of viewport height
+    height = "150vh", -- 150% of viewport height
   })
 
   luaunit.assertEquals(container.width, 2400) -- 200% of 1200
@@ -357,4 +361,4 @@ function TestUnitsSystem:testVeryLargeValues()
 end
 
 -- Run the tests
-os.exit(luaunit.LuaUnit.run())
+luaunit.LuaUnit.run()

testing/__tests__/13_relative_positioning_tests.lua

@@ -15,8 +15,8 @@ function TestRelativePositioning.testBasicRelativePositioning()
   local parent = Gui.new({
     x = 100,
     y = 50,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
     positioning = "relative",
     background = Color.new(0.2, 0.2, 0.2, 1.0),
   })
@@ -25,10 +25,10 @@ function TestRelativePositioning.testBasicRelativePositioning()
     parent = parent,
     x = 20,
     y = 30,
-    w = 50,
+    width = 50,
-    h = 40,
+    height = 40,
     positioning = "relative",
-    background = Color.new(0.8, 0.2, 0.2, 1.0)
+    background = Color.new(0.8, 0.2, 0.2, 1.0),
   })
 
   -- Child should be positioned relative to parent
@@ -42,8 +42,8 @@ function TestRelativePositioning.testRelativePositioningPercentages()
   local parent = Gui.new({
     x = 50,
     y = 100,
-    w = 200,
+    width = 200,
-    h = 100,
+    height = 100,
     positioning = "relative",
     background = Color.new(0.2, 0.2, 0.2, 1.0),
   })
@@ -52,10 +52,10 @@ function TestRelativePositioning.testRelativePositioningPercentages()
     parent = parent,
     x = "10%", -- 10% of parent width = 20px
     y = "20%", -- 20% of parent height = 20px
-    w = 30,
+    width = 30,
-    h = 20,
+    height = 20,
     positioning = "relative",
-    background = Color.new(0.8, 0.2, 0.2, 1.0)
+    background = Color.new(0.8, 0.2, 0.2, 1.0),
   })
 
   -- Child should be positioned relative to parent with percentage offsets
@@ -69,18 +69,18 @@ function TestRelativePositioning.testRelativePositioningNoOffset()
   local parent = Gui.new({
     x = 75,
     y = 125,
-    w = 150,
+    width = 150,
-    h = 200,
+    height = 200,
     positioning = "relative",
     background = Color.new(0.2, 0.2, 0.2, 1.0),
   })
 
   local child = Gui.new({
     parent = parent,
-    w = 40,
+    width = 40,
-    h = 30,
+    height = 30,
     positioning = "relative",
-    background = Color.new(0.2, 0.8, 0.2, 1.0)
+    background = Color.new(0.2, 0.8, 0.2, 1.0),
   })
 
   -- Child should be positioned at parent's position with no offset
@@ -94,8 +94,8 @@ function TestRelativePositioning.testMultipleRelativeChildren()
   local parent = Gui.new({
     x = 200,
     y = 300,
-    w = 100,
+    width = 100,
-    h = 100,
+    height = 100,
     positioning = "relative",
     background = Color.new(0.2, 0.2, 0.2, 1.0),
   })
@@ -104,20 +104,20 @@ function TestRelativePositioning.testMultipleRelativeChildren()
     parent = parent,
     x = 10,
     y = 15,
-    w = 20,
+    width = 20,
-    h = 20,
+    height = 20,
     positioning = "relative",
-    background = Color.new(0.8, 0.2, 0.2, 1.0)
+    background = Color.new(0.8, 0.2, 0.2, 1.0),
   })
 
   local child2 = Gui.new({
     parent = parent,
     x = 30,
     y = 45,
-    w = 25,
+    width = 25,
-    h = 25,
+    height = 25,
     positioning = "relative",
-    background = Color.new(0.2, 0.8, 0.2, 1.0)
+    background = Color.new(0.2, 0.8, 0.2, 1.0),
   })
 
   -- Both children should be positioned relative to parent
@@ -133,8 +133,8 @@ function TestRelativePositioning.testNestedRelativePositioning()
   local grandparent = Gui.new({
     x = 50,
     y = 60,
-    w = 300,
+    width = 300,
-    h = 250,
+    height = 250,
     positioning = "relative",
     background = Color.new(0.1, 0.1, 0.1, 1.0),
   })
@@ -143,8 +143,8 @@ function TestRelativePositioning.testNestedRelativePositioning()
     parent = grandparent,
     x = 25,
     y = 35,
-    w = 200,
+    width = 200,
-    h = 150,
+    height = 150,
     positioning = "relative",
     background = Color.new(0.3, 0.3, 0.3, 1.0),
   })
@@ -153,10 +153,10 @@ function TestRelativePositioning.testNestedRelativePositioning()
     parent = parent,
     x = 15,
     y = 20,
-    w = 50,
+    width = 50,
-    h = 40,
+    height = 40,
     positioning = "relative",
-    background = Color.new(0.8, 0.8, 0.8, 1.0)
+    background = Color.new(0.8, 0.8, 0.8, 1.0),
   })
 
   -- Each level should be positioned relative to its parent
@@ -172,8 +172,8 @@ function TestRelativePositioning.testMixedPositioning()
   local parent = Gui.new({
     x = 100,
     y = 200,
-    w = 180,
+    width = 180,
-    h = 120,
+    height = 120,
     positioning = "absolute",
     background = Color.new(0.2, 0.2, 0.2, 1.0),
   })
@@ -182,10 +182,10 @@ function TestRelativePositioning.testMixedPositioning()
     parent = parent,
     x = 40,
     y = 25,
-    w = 60,
+    width = 60,
-    h = 35,
+    height = 35,
     positioning = "relative",
-    background = Color.new(0.8, 0.8, 0.2, 1.0)
+    background = Color.new(0.8, 0.8, 0.2, 1.0),
   })
 
   -- Relative child should still be positioned relative to absolute parent
@@ -196,4 +196,4 @@ function TestRelativePositioning.testMixedPositioning()
 end
 
 -- Run all tests
-os.exit(luaunit.LuaUnit.run())
+luaunit.LuaUnit.run()

testing/__tests__/14_text_scaling_basic_tests.lua

@@ -1,124 +1,473 @@
--- Test file for basic text scaling functionality
+-- Test file for comprehensive text scaling functionality
--- This tests simple cases where elements scale text appropriately during resize
+-- This tests all text scaling scenarios including edge cases and multiple resize events
 
-package.path = './testing/?.lua;./?.lua;' .. package.path
+package.path = package.path .. ";?.lua"
-local luaunit = require("luaunit")
 
--- Mock love module for testing
+local luaunit = require("testing/luaunit")
-love = {
+require("testing/loveStub") -- Required to mock LOVE functions
-  graphics = {
-    getDimensions = function() return 800, 600 end,
-    newFont = function(size) return { getWidth = function(text) return size * #text end, getHeight = function() return size end } end,
-    getFont = function() return { getWidth = function(text) return 12 * #text end, getHeight = function() return 12 end } end,
-  },
-  window = {
-    getMode = function() return 800, 600 end
-  }
-}
-
--- Import the FlexLove library
 local FlexLove = require("FlexLove")
 local Gui = FlexLove.GUI
 
--- Test suite for basic text scaling
+-- Test suite for comprehensive text scaling
-local BasicTextScalingTests = {}
+TestTextScaling = {}
 
-function BasicTextScalingTests.testFixedTextSize()
+-- Basic functionality tests
+function TestTextScaling.testFixedTextSize()
   -- Create an element with fixed textSize in pixels
   local element = Gui.new({
     id = "testElement",
-    w = 100,
+    width = 100,
-    h = 50,
+    height = 50,
     textSize = 16, -- Fixed size in pixels
-    text = "Hello World"
+    text = "Hello World",
   })
 
   -- Check initial state
   luaunit.assertEquals(element.textSize, 16)
+  luaunit.assertEquals(element.units.textSize.unit, "px")
 
-  -- Simulate a resize with larger viewport
+  -- Simulate multiple resizes
-  local newWidth, newHeight = 800, 600
+  element:resize(1600, 1200)
-  element:resize(newWidth, newHeight)
+  luaunit.assertEquals(element.textSize, 16) -- Should remain unchanged
 
-  -- Fixed textSize should remain unchanged
+  element:resize(400, 300)
-  luaunit.assertEquals(element.textSize, 16)
+  luaunit.assertEquals(element.textSize, 16) -- Should remain unchanged
 end
 
-function BasicTextScalingTests.testPercentageTextSize()
+function TestTextScaling.testPercentageTextSize()
-  -- Create an element with percentage textSize
+  -- Create an element with percentage textSize (relative to viewport height)
   local element = Gui.new({
     id = "testElement",
-    w = 100,
+    width = 100,
-    h = 50,
+    height = 50,
     textSize = "5%", -- Percentage of viewport height
-    text = "Hello World"
+    text = "Hello World",
   })
 
-  -- Check initial state
+  -- Check initial state (5% of 600px = 30px)
   luaunit.assertEquals(element.units.textSize.unit, "%")
+  luaunit.assertEquals(element.units.textSize.value, 5)
+  luaunit.assertEquals(element.textSize, 30.0)
 
-  -- Simulate a resize with larger viewport
+  -- Simulate resize to larger viewport (5% of 1200px = 60px)
-  local newWidth, newHeight = 800, 600
+  element:resize(1600, 1200)
-  element:resize(newWidth, newHeight)
+  luaunit.assertEquals(element.textSize, 60.0)
 
-  -- Percentage textSize should be recalculated
+  -- Simulate resize to smaller viewport (5% of 300px = 15px)
-  luaunit.assertEquals(element.textSize, 30) -- 5% of 600 height = 30
+  element:resize(400, 300)
+  luaunit.assertEquals(element.textSize, 15.0)
 end
 
-function BasicTextScalingTests.testVwTextSize()
+function TestTextScaling.testVwTextSize()
   -- Create an element with vw textSize
   local element = Gui.new({
     id = "testElement",
-    w = 100,
+    width = 100,
-    h = 50,
+    height = 50,
     textSize = "2vw", -- 2% of viewport width
-    text = "Hello World"
+    text = "Hello World",
   })
 
-  -- Check initial state
+  -- Check initial state (2% of 800px = 16px)
   luaunit.assertEquals(element.units.textSize.unit, "vw")
+  luaunit.assertEquals(element.units.textSize.value, 2)
+  luaunit.assertEquals(element.textSize, 16.0)
 
-  -- Simulate a resize with larger viewport
+  -- Simulate resize to larger viewport (2% of 1600px = 32px)
-  local newWidth, newHeight = 800, 600
+  element:resize(1600, 1200)
-  element:resize(newWidth, newHeight)
+  luaunit.assertEquals(element.textSize, 32.0)
 
-  -- vw textSize should be recalculated
+  -- Simulate resize to smaller viewport (2% of 400px = 8px)
-  luaunit.assertEquals(element.textSize, 16) -- 2% of 800 width = 16
+  element:resize(400, 300)
+  luaunit.assertEquals(element.textSize, 8.0)
 end
 
-function BasicTextScalingTests.testVhTextSize()
+function TestTextScaling.testVhTextSize()
   -- Create an element with vh textSize
   local element = Gui.new({
     id = "testElement",
-    w = 100,
+    width = 100,
-    h = 50,
+    height = 50,
     textSize = "3vh", -- 3% of viewport height
-    text = "Hello World"
+    text = "Hello World",
   })
 
-  -- Check initial state
+  -- Check initial state (3% of 600px = 18px)
   luaunit.assertEquals(element.units.textSize.unit, "vh")
+  luaunit.assertEquals(element.units.textSize.value, 3)
+  luaunit.assertEquals(element.textSize, 18.0)
 
-  -- Simulate a resize with larger viewport
+  -- Simulate resize to larger viewport (3% of 1200px = 36px)
-  local newWidth, newHeight = 800, 600
+  element:resize(1600, 1200)
-  element:resize(newWidth, newHeight)
+  luaunit.assertEquals(element.textSize, 36.0)
 
-  -- vh textSize should be recalculated
+  -- Simulate resize to smaller viewport (3% of 300px = 9px)
-  luaunit.assertEquals(element.textSize, 18) -- 3% of 600 height = 18
+  element:resize(400, 300)
+  luaunit.assertEquals(element.textSize, 9.0)
 end
 
-function BasicTextScalingTests.testNoTextSize()
+function TestTextScaling.testNoTextSize()
   -- Create an element without textSize specified
   local element = Gui.new({
     id = "testElement",
-    w = 100,
+    width = 100,
-    h = 50,
+    height = 50,
-    text = "Hello World"
+    text = "Hello World",
   })
 
   -- Check initial state - should default to some value
   luaunit.assertEquals(element.units.textSize.value, nil)
   luaunit.assertEquals(element.textSize, 12) -- Default fallback
+
+  -- Resize should not affect default textSize
+  element:resize(1600, 1200)
+  luaunit.assertEquals(element.textSize, 12)
 end
 
-return BasicTextScalingTests
+-- Edge case tests
+function TestTextScaling.testZeroPercentageTextSize()
+  -- Create an element with 0% textSize
+  local element = Gui.new({
+    id = "testElement",
+    width = 100,
+    height = 50,
+    textSize = "0%",
+    text = "Hello World",
+  })
+
+  luaunit.assertEquals(element.textSize, 0.0)
+
+  -- Should remain 0 after resize
+  element:resize(1600, 1200)
+  luaunit.assertEquals(element.textSize, 0.0)
+end
+
+function TestTextScaling.testVerySmallTextSize()
+  -- Create an element with very small textSize
+  local element = Gui.new({
+    id = "testElement",
+    width = 100,
+    height = 50,
+    textSize = "0.1vh",
+    text = "Hello World",
+  })
+
+  -- Check initial state (0.1% of 600px = 0.6px)
+  luaunit.assertEquals(element.textSize, 0.6)
+
+  -- Should scale proportionally
+  element:resize(1600, 1200)
+  luaunit.assertEquals(element.textSize, 1.2) -- 0.1% of 1200px = 1.2px
+end
+
+function TestTextScaling.testVeryLargeTextSize()
+  -- Create an element with very large textSize
+  local element = Gui.new({
+    id = "testElement",
+    width = 100,
+    height = 50,
+    textSize = "50vh",
+    text = "Hello World",
+  })
+
+  -- Check initial state (50% of 600px = 300px)
+  luaunit.assertEquals(element.textSize, 300.0)
+
+  -- Should scale proportionally
+  element:resize(1600, 1200)
+  luaunit.assertEquals(element.textSize, 600.0) -- 50% of 1200px = 600px
+end
+
+function TestTextScaling.testDecimalUnits()
+  -- Create an element with decimal units
+  local element = Gui.new({
+    id = "testElement",
+    width = 100,
+    height = 50,
+    textSize = "2.5vw",
+    text = "Hello World",
+  })
+
+  -- Check initial state (2.5% of 800px = 20px)
+  luaunit.assertEquals(element.textSize, 20.0)
+
+  -- Should handle decimal precision
+  element:resize(1000, 800)
+  luaunit.assertEquals(element.textSize, 25.0) -- 2.5% of 1000px = 25px
+end
+
+-- Multiple resize tests
+function TestTextScaling.testMultipleResizes()
+  -- Create an element and perform multiple resize operations
+  local element = Gui.new({
+    id = "testElement",
+    width = 100,
+    height = 50,
+    textSize = "4vh",
+    text = "Hello World",
+  })
+
+  -- Initial: 4% of 600px = 24px
+  luaunit.assertEquals(element.textSize, 24.0)
+
+  -- First resize: 4% of 800px = 32px
+  element:resize(1000, 800)
+  luaunit.assertEquals(element.textSize, 32.0)
+
+  -- Second resize: 4% of 400px = 16px
+  element:resize(500, 400)
+  luaunit.assertEquals(element.textSize, 16.0)
+
+  -- Third resize: 4% of 1000px = 40px
+  element:resize(1200, 1000)
+  luaunit.assertEquals(element.textSize, 40.0)
+
+  -- Return to original: 4% of 600px = 24px
+  element:resize(800, 600)
+  luaunit.assertEquals(element.textSize, 24.0)
+end
+
+-- Mixed unit tests
+function TestTextScaling.testMixedUnitsInDifferentElements()
+  -- Create multiple elements with different unit types
+  local elements = {
+    Gui.new({ id = "px", textSize = 20, text = "Fixed" }),
+    Gui.new({ id = "percent", textSize = "5%", text = "Percent" }),
+    Gui.new({ id = "vw", textSize = "3vw", text = "ViewWidth" }),
+    Gui.new({ id = "vh", textSize = "4vh", text = "ViewHeight" }),
+  }
+
+  -- Check initial states
+  luaunit.assertEquals(elements[1].textSize, 20) -- Fixed
+  luaunit.assertEquals(elements[2].textSize, 30.0) -- 5% of 600px
+  luaunit.assertEquals(elements[3].textSize, 24.0) -- 3% of 800px
+  luaunit.assertEquals(elements[4].textSize, 24.0) -- 4% of 600px
+
+  -- Resize all elements
+  for _, element in ipairs(elements) do
+    element:resize(1200, 900)
+  end
+
+  -- Check after resize
+  luaunit.assertEquals(elements[1].textSize, 20) -- Fixed (unchanged)
+  luaunit.assertEquals(elements[2].textSize, 45.0) -- 5% of 900px
+  luaunit.assertEquals(elements[3].textSize, 36.0) -- 3% of 1200px
+  luaunit.assertEquals(elements[4].textSize, 36.0) -- 4% of 900px
+end
+
+-- Test invalid units handling
+function TestTextScaling.testInvalidUnits()
+  -- Test that invalid units are handled gracefully
+  local success, err = pcall(function()
+    local element = Gui.new({
+      id = "testElement",
+      width = 100,
+      height = 50,
+      textSize = "5invalidunit",
+      text = "Hello World",
+    })
+  end)
+
+  -- Should handle invalid units gracefully (might error or default)
+  -- The exact behavior depends on implementation, but shouldn't crash
+  luaunit.assertTrue(success or string.find(tostring(err), "Unknown unit"))
+end
+
+-- Performance test for many resizes
+function TestTextScaling.testPerformanceWithManyResizes()
+  local element = Gui.new({
+    id = "testElement",
+    width = 100,
+    height = 50,
+    textSize = "2vh",
+    text = "Hello World",
+  })
+
+  -- Perform many resize operations
+  local startTime = os.clock()
+  for i = 1, 100 do
+    local width = 800 + (i * 2)
+    local height = 600 + (i * 2)
+    element:resize(width, height)
+
+    -- Verify the calculation is still correct
+    local expected = (2 / 100) * height
+    luaunit.assertEquals(element.textSize, expected)
+  end
+  local endTime = os.clock()
+
+  -- Should complete in reasonable time (less than 1 second for 100 resizes)
+  local duration = endTime - startTime
+  luaunit.assertTrue(duration < 1.0, "Performance test took too long: " .. duration .. " seconds")
+end
+
+-- Element-relative unit tests
+function TestTextScaling.testElementWidthUnits()
+  -- Create an element with textSize relative to element width
+  local element = Gui.new({
+    id = "testElement",
+    width = 200,
+    height = 100,
+    textSize = "10ew", -- 10% of element width
+    text = "Hello World",
+  })
+
+  -- Check initial state (10% of 200px = 20px)
+  luaunit.assertEquals(element.units.textSize.unit, "ew")
+  luaunit.assertEquals(element.units.textSize.value, 10)
+  luaunit.assertEquals(element.textSize, 20.0)
+  luaunit.assertEquals(element.width, 200)
+
+  -- Change element width and recalculate
+  element.width = 300
+  element:resize(800, 600)
+  luaunit.assertEquals(element.textSize, 30.0) -- 10% of 300px = 30px
+end
+
+function TestTextScaling.testElementHeightUnits()
+  -- Create an element with textSize relative to element height
+  local element = Gui.new({
+    id = "testElement",
+    width = 200,
+    height = 100,
+    textSize = "15eh", -- 15% of element height
+    text = "Hello World",
+  })
+
+  -- Check initial state (15% of 100px = 15px)
+  luaunit.assertEquals(element.units.textSize.unit, "eh")
+  luaunit.assertEquals(element.units.textSize.value, 15)
+  luaunit.assertEquals(element.textSize, 15.0)
+  luaunit.assertEquals(element.height, 100)
+
+  -- Change element height and recalculate
+  element.height = 200
+  element:resize(800, 600)
+  luaunit.assertEquals(element.textSize, 30.0) -- 15% of 200px = 30px
+end
+
+function TestTextScaling.testElementRelativeWithViewportUnits()
+  -- Create an element with viewport-based size and element-relative textSize
+  local element = Gui.new({
+    id = "testElement",
+    width = "25%", -- 25% of viewport width = 200px (800px * 0.25)
+    height = "20%", -- 20% of viewport height = 120px (600px * 0.20)
+    textSize = "8ew", -- 8% of element width
+    text = "Hello World",
+  })
+
+  -- Check initial state
+  luaunit.assertEquals(element.width, 200.0) -- 25% of 800px
+  luaunit.assertEquals(element.height, 120.0) -- 20% of 600px
+  luaunit.assertEquals(element.textSize, 16.0) -- 8% of 200px
+
+  -- Resize viewport
+  element:resize(1600, 1200)
+
+  -- Element size should update with viewport, textSize should update with element size
+  luaunit.assertEquals(element.width, 400.0) -- 25% of 1600px
+  luaunit.assertEquals(element.height, 240.0) -- 20% of 1200px
+  luaunit.assertEquals(element.textSize, 32.0) -- 8% of 400px
+end
+
+-- Min/Max constraint tests
+function TestTextScaling.testMinTextSizeConstraint()
+  -- Create element with textSize that would be smaller than minimum
+  local element = Gui.new({
+    id = "testElement",
+    width = 200,
+    height = 100,
+    textSize = "2vh", -- 2% of 600px = 12px
+    minTextSize = 16, -- Minimum 16px
+    text = "Hello World",
+  })
+
+  -- Should be clamped to minimum
+  luaunit.assertEquals(element.textSize, 16)
+
+  -- Test with very small viewport
+  element:resize(400, 300) -- 2% of 300px = 6px, should stay at 16px
+  luaunit.assertEquals(element.textSize, 16)
+end
+
+function TestTextScaling.testMaxTextSizeConstraint()
+  -- Create element with textSize that would be larger than maximum
+  local element = Gui.new({
+    id = "testElement",
+    width = 200,
+    height = 100,
+    textSize = "4vh", -- 4% of 600px = 24px
+    maxTextSize = 20, -- Maximum 20px
+    text = "Hello World",
+  })
+
+  -- Should be clamped to maximum
+  luaunit.assertEquals(element.textSize, 20)
+
+  -- Test with very large viewport
+  element:resize(1600, 1200) -- 4% of 1200px = 48px, should stay at 20px
+  luaunit.assertEquals(element.textSize, 20)
+end
+
+function TestTextScaling.testBothMinMaxConstraints()
+  -- Create element with both min and max constraints
+  local element = Gui.new({
+    id = "testElement",
+    width = 200,
+    height = 100,
+    textSize = "3vh", -- 3% of 600px = 18px (within bounds)
+    minTextSize = 12,
+    maxTextSize = 24,
+    text = "Hello World",
+  })
+
+  -- Should be within bounds
+  luaunit.assertEquals(element.textSize, 18.0)
+
+  -- Test small viewport (should hit min)
+  element:resize(400, 300) -- 3% of 300px = 9px, should be clamped to 12px
+  luaunit.assertEquals(element.textSize, 12)
+
+  -- Test large viewport (should hit max)
+  element:resize(1600, 1200) -- 3% of 1200px = 36px, should be clamped to 24px
+  luaunit.assertEquals(element.textSize, 24)
+end
+
+function TestTextScaling.testConstraintsWithElementUnits()
+  -- Test constraints with element-relative units
+  local element = Gui.new({
+    id = "testElement",
+    width = 100,
+    height = 50,
+    textSize = "20ew", -- 20% of 100px = 20px
+    minTextSize = 8,
+    maxTextSize = 15,
+    text = "Hello World",
+  })
+
+  -- Should be clamped to maximum
+  luaunit.assertEquals(element.textSize, 15)
+
+  -- Change width to trigger minimum
+  element.width = 30 -- 20% of 30px = 6px, should be clamped to 8px
+  element:resize(800, 600)
+  luaunit.assertEquals(element.textSize, 8)
+end
+
+function TestTextScaling.testConstraintsWithFixedTextSize()
+  -- Test that constraints work with fixed pixel textSize too
+  local element = Gui.new({
+    id = "testElement",
+    width = 200,
+    height = 100,
+    textSize = 25, -- Fixed 25px
+    minTextSize = 12,
+    maxTextSize = 20,
+    text = "Hello World",
+  })
+
+  -- Should be clamped to maximum even for fixed sizes
+  luaunit.assertEquals(element.textSize, 20)
+end
+
+luaunit.LuaUnit.run()

testing/__tests__/outline_example.lua

@@ -1,22 +0,0 @@
-package.path = package.path .. ";?.lua"
-
-local luaunit = require("testing/luaunit")
-require("testing/loveStub") -- Required to mock LOVE functions
-local FlexLove = require("FlexLove")
-local Gui, enums = FlexLove.GUI, FlexLove.enums
-
-local FlexDirection = enums.FlexDirection
-local Positioning = enums.Positioning
-local JustifyContent = enums.JustifyContent
-local AlignItems = enums.AlignItems
-
--- Create test cases
-TestFlexDirection = {}
-
-function TestFlexDirection:testHorizontalFlexBasic()
-  local elem = Gui.new({ ... }) -- fill with props
-end
-
-function TestFlexDirection:testHorizontalFlexWithJustifyContentFlexStart() end
-
-luaunit.LuaUnit.run()

testing/runAll.lua

@@ -15,6 +15,9 @@ local testFiles = {
   "testing/__tests__/09_layout_validation_tests.lua",
   "testing/__tests__/10_performance_tests.lua",
   "testing/__tests__/11_auxiliary_functions_tests.lua",
+  "testing/__tests__/12_units_system_tests.lua",
+  "testing/__tests__/13_relative_positioning_tests.lua",
+  "testing/__tests__/14_text_scaling_basic_tests.lua",
 }
 
 -- testingun all tests, but don't exit on error