test alignment

testing/__tests__/03_flex_direction_horizontal_tests.lua

@@ -442,9 +442,9 @@ function TestHorizontalFlexDirection:testHorizontalLayoutAlignItemsStretch()
   parent:addChild(child1)
   parent:addChild(child2)
 
-  -- With align-items stretch in horizontal layout, children should stretch to parent height
-  luaunit.assertEquals(child1.height, parent.height)
-  luaunit.assertEquals(child2.height, parent.height)
+  -- With align-items stretch, children with explicit heights should keep them (CSS flexbox behavior)
+  luaunit.assertEquals(child1.height, 30)
+  luaunit.assertEquals(child2.height, 40)
 end
 
 -- Test 14: Horizontal layout with align-items center

testing/__tests__/04_flex_direction_vertical_tests.lua

@@ -402,9 +402,9 @@ function TestVerticalFlexDirection:testVerticalLayoutAlignItemsStretch()
   parent:addChild(child1)
   parent:addChild(child2)
 
-  -- Children should be stretched to fill parent width
-  luaunit.assertEquals(child1.width, parent.width)
-  luaunit.assertEquals(child2.width, parent.width)
+  -- Children with explicit widths should keep them (CSS flexbox behavior)
+  luaunit.assertEquals(child1.width, 80)
+  luaunit.assertEquals(child2.width, 60)
 end
 
 -- Test 13: Vertical layout with space-between

testing/__tests__/06_align_items_tests.lua

@@ -189,11 +189,11 @@ function TestAlignItems:testHorizontalFlexAlignItemsStretch()
   container:addChild(child1)
   container:addChild(child2)
 
-  -- Children should be stretched to fill container height
+  -- Children with explicit heights should NOT be stretched (CSS flexbox behavior)
   luaunit.assertEquals(child1.y, 0)
   luaunit.assertEquals(child2.y, 0)
-  luaunit.assertEquals(child1.height, 100)
-  luaunit.assertEquals(child2.height, 100)
+  luaunit.assertEquals(child1.height, 30)  -- Keeps explicit height
+  luaunit.assertEquals(child2.height, 40)  -- Keeps explicit height
 end
 
 -- Test 5: Vertical Flex with AlignItems.FLEX_START
@@ -357,11 +357,11 @@ function TestAlignItems:testVerticalFlexAlignItemsStretch()
   container:addChild(child1)
   container:addChild(child2)
 
-  -- Children should be stretched to fill container width
+  -- Children with explicit widths should NOT be stretched (CSS flexbox behavior)
   luaunit.assertEquals(child1.x, 0)
   luaunit.assertEquals(child2.x, 0)
-  luaunit.assertEquals(child1.width, 200)
-  luaunit.assertEquals(child2.width, 200)
+  luaunit.assertEquals(child1.width, 50)  -- Keeps explicit width
+  luaunit.assertEquals(child2.width, 80)  -- Keeps explicit width
 end
 
 -- Test 9: Default AlignItems value (should be STRETCH)
@@ -386,9 +386,9 @@ function TestAlignItems:testDefaultAlignItems()
 
   container:addChild(child)
 
-  -- Default should be STRETCH
+  -- Default should be STRETCH, but explicit heights are respected
   luaunit.assertEquals(container.alignItems, AlignItems.STRETCH)
-  luaunit.assertEquals(child.height, 100) -- Should be stretched
+  luaunit.assertEquals(child.height, 30) -- Keeps explicit height (CSS flexbox behavior)
 end
 
 -- Test 10: AlignItems with mixed child sizes

testing/__tests__/07_flex_wrap_tests.lua

@@ -280,12 +280,12 @@ function TestFlexWrap07_WrapWithStretchAlignItems()
 
   local positions = layoutAndGetPositions(container)
 
-  -- All children in first line should stretch to tallest (35)
-  luaunit.assertEquals(positions[1].height, 35) -- child1 stretched
-  luaunit.assertEquals(positions[2].height, 35) -- child2 keeps height
+  -- Children with explicit heights should keep them (CSS flexbox behavior)
+  luaunit.assertEquals(positions[1].height, 20) -- child1 keeps explicit height
+  luaunit.assertEquals(positions[2].height, 35) -- child2 keeps explicit height
 
-  -- Child in second line should keep its height (no other children to stretch to)
-  luaunit.assertEquals(positions[3].height, 25) -- child3 original height
+  -- Child in second line should keep its height
+  luaunit.assertEquals(positions[3].height, 25) -- child3 keeps explicit height
 
   -- Verify positions
   luaunit.assertEquals(positions[1].y, 0) -- First line

testing/__tests__/08_comprehensive_flex_tests.lua

@@ -186,11 +186,11 @@ function TestComprehensiveFlex:testNestedFlexContainersComplexLayout()
   -- Positions are absolute including parent container position
   luaunit.assertEquals(inner2Positions[1].x, 20) -- parent x + 0
   luaunit.assertEquals(inner2Positions[1].y, 95) -- parent y + 0
-  luaunit.assertEquals(inner2Positions[1].height, 50) -- stretched to full container height
+  luaunit.assertEquals(inner2Positions[1].height, 25) -- explicit height, not stretched (CSS spec compliance)
 
   luaunit.assertEquals(inner2Positions[2].x, 60) -- parent x + 40
   luaunit.assertEquals(inner2Positions[2].y, 95) -- parent y + 0
-  luaunit.assertEquals(inner2Positions[2].height, 50) -- stretched to full container height
+  luaunit.assertEquals(inner2Positions[2].height, 25) -- explicit height, not stretched (CSS spec compliance)
 end
 
 -- Test 3: All flex properties combined with absolute positioning
@@ -390,19 +390,19 @@ function TestComprehensiveFlex:testDeeplyNestedFlexContainers()
   -- These positions are relative to level 1 container position
   luaunit.assertEquals(level2Positions[1].x, 20) -- positioned by level 1
   luaunit.assertEquals(level2Positions[1].y, 25) -- positioned by level 1
-  luaunit.assertEquals(level2Positions[1].height, 100) -- stretched to full cross-axis height
+  luaunit.assertEquals(level2Positions[1].height, 80) -- explicit height, not stretched (CSS spec compliance)
 
   luaunit.assertEquals(level2Positions[2].x, 110) -- positioned by level 1 + space-between
   luaunit.assertEquals(level2Positions[2].y, 25) -- positioned by level 1
-  luaunit.assertEquals(level2Positions[2].height, 100) -- stretched to full cross-axis height
+  luaunit.assertEquals(level2Positions[2].height, 80) -- explicit height, not stretched (CSS spec compliance)
 
   -- Level 3a: flex-end justification, center alignment
   -- Positions are absolute including parent positions
   luaunit.assertEquals(level3aPositions[1].x, 40) -- absolute position
-  luaunit.assertEquals(level3aPositions[1].y, 90) -- flex-end: positioned at bottom of stretched container
+  luaunit.assertEquals(level3aPositions[1].y, 70) -- flex-end: 25 (level2.y) + 45 (80 - 35 total children)
 
   luaunit.assertEquals(level3aPositions[2].x, 42.5) -- absolute position
-  luaunit.assertEquals(level3aPositions[2].y, 110) -- second item: 90 + 20 = 110
+  luaunit.assertEquals(level3aPositions[2].y, 90) -- second item: 70 + 20 = 90
 
   -- Level 3b: flex-start justification, flex-end alignment
   -- Positions are absolute including parent positions
@@ -1656,8 +1656,8 @@ function TestComprehensiveFlex:testComplexDashboardLayout()
     middlePositions[i] = { x = child.x, y = child.y, width = child.width, height = child.height }
   end
 
-  luaunit.assertEquals(middlePositions[1].x, 300) -- chart panel (300 + 20 padding)
-  luaunit.assertEquals(middlePositions[2].x, 1000) -- stats panel (300 + 680 + 20)
+  luaunit.assertEquals(middlePositions[1].x, 300) -- chart panel (280 sidebar + 20 padding)
+  luaunit.assertEquals(middlePositions[2].x, 1020) -- stats panel (280 + 20 + 680 + 40 gap with SPACE_BETWEEN)
 
   -- Test chart legend wrapping
   local chartPanel = middleContent.children[1]
@@ -1699,7 +1699,7 @@ function TestComprehensiveFlex:testComplexDashboardLayout()
   end
 
   luaunit.assertEquals(bottomPositions[1].x, 300) -- table panel
-  luaunit.assertEquals(bottomPositions[2].x, 860) -- right panels (300 + 540 + 20)
+  luaunit.assertEquals(bottomPositions[2].x, 880) -- right panels (280 + 20 + 540 + 40 gap with SPACE_BETWEEN)
 
   -- Test right panels layout
   local rightPanels = bottomContent.children[2]
@@ -1710,8 +1710,8 @@ function TestComprehensiveFlex:testComplexDashboardLayout()
     rightPositions[i] = { x = child.x, y = child.y, width = child.width, height = child.height }
   end
 
-  luaunit.assertEquals(rightPositions[1].x, 860) -- alerts panel
-  luaunit.assertEquals(rightPositions[2].x, 1120) -- progress panel (860 + 240 + 20)
+  luaunit.assertEquals(rightPositions[1].x, 880) -- alerts panel (same as parent due to SPACE_BETWEEN)
+  luaunit.assertEquals(rightPositions[2].x, 1140) -- progress panel (880 + 240 + 20)
 end
 
 luaunit.LuaUnit.run()

testing/__tests__/11_auxiliary_functions_tests.lua

@@ -140,6 +140,7 @@ function TestAuxiliaryFunctions:testCalculateAutoWidthWithChildren()
   local parent = Gui.new({
     positioning = enums.Positioning.FLEX,
     flexDirection = enums.FlexDirection.HORIZONTAL,
+    gap = 5, -- Add gap to test gap calculation
   })
 
   local child1 = Gui.new({
@@ -172,6 +173,7 @@ function TestAuxiliaryFunctions:testCalculateAutoHeightWithChildren()
   local parent = Gui.new({
     positioning = enums.Positioning.FLEX,
     flexDirection = enums.FlexDirection.VERTICAL,
+    gap = 5, -- Add gap to test gap calculation
   })
 
   local child1 = Gui.new({
@@ -491,18 +493,21 @@ function TestAuxiliaryFunctions:testAnimationInterpolationAtBoundaries()
 
   -- At start (elapsed = 0)
   scaleAnim.elapsed = 0
+  scaleAnim._resultDirty = true  -- Mark dirty after changing elapsed
   local result = scaleAnim:interpolate()
   luaunit.assertEquals(result.width, 100)
   luaunit.assertEquals(result.height, 50)
 
   -- At end (elapsed = duration)
   scaleAnim.elapsed = 1.0
+  scaleAnim._resultDirty = true  -- Mark dirty after changing elapsed
   result = scaleAnim:interpolate()
   luaunit.assertEquals(result.width, 200)
   luaunit.assertEquals(result.height, 100)
 
   -- Beyond end (elapsed > duration) - should clamp to end values
   scaleAnim.elapsed = 1.5
+  scaleAnim._resultDirty = true  -- Mark dirty after changing elapsed
   result = scaleAnim:interpolate()
   luaunit.assertEquals(result.width, 200)
   luaunit.assertEquals(result.height, 100)
@@ -594,11 +599,11 @@ function TestAuxiliaryFunctions:testComplexColorManagementSystem()
   end
 
   -- Test color variations (opacity, brightness adjustments)
+  local opacities = { 0.1, 0.25, 0.5, 0.75, 0.9 }
   for color_name, color_set in pairs(theme_colors) do
     color_variations[color_name] = {}
 
     -- Create opacity variations
-    local opacities = { 0.1, 0.25, 0.5, 0.75, 0.9 }
     for _, opacity in ipairs(opacities) do
       local variant_color = Color.new(color_set.manual.r, color_set.manual.g, color_set.manual.b, opacity)
       color_variations[color_name]["alpha_" .. tostring(opacity)] = variant_color
@@ -678,7 +683,13 @@ function TestAuxiliaryFunctions:testComplexColorManagementSystem()
   ui_container:layoutChildren()
 
   luaunit.assertEquals(#ui_container.children, 5, "Should have 5 themed components")
-  luaunit.assertEquals(#theme_colors, 5, "Should have 5 base theme colors")
+  
+  -- Count theme_colors (it's a table with string keys, not an array)
+  local theme_color_count = 0
+  for _ in pairs(theme_colors) do
+    theme_color_count = theme_color_count + 1
+  end
+  luaunit.assertEquals(theme_color_count, 5, "Should have 5 base theme colors")
 
   local total_variations = 0
   for _, variations in pairs(color_variations) do
@@ -902,6 +913,7 @@ function TestAuxiliaryFunctions:testAdvancedTextAndAutoSizingSystem()
   table.insert(main_container.children, nested_container)
 
   -- Create nested structure with auto-sizing children
+  local prev_container = nested_container
   for level = 1, 3 do
     local level_container = Gui.new({
       width = 750 - (level * 50),
@@ -911,12 +923,9 @@ function TestAuxiliaryFunctions:testAdvancedTextAndAutoSizingSystem()
       justifyContent = enums.JustifyContent.SPACE_AROUND,
       gap = 5,
     })
-    level_container.parent = level == 1 and nested_container
-      or main_container.children[#main_container.children].children[level - 1]
-    table.insert(
-      (level == 1 and nested_container or main_container.children[#main_container.children].children[level - 1]).children,
-      level_container
-    )
+    level_container.parent = prev_container
+    table.insert(prev_container.children, level_container)
+    prev_container = level_container
 
     for item = 1, 4 do
       local item_text = string.format("L%d-Item%d: %s", level, item, string.rep("Text ", level))
@@ -943,7 +952,13 @@ function TestAuxiliaryFunctions:testAdvancedTextAndAutoSizingSystem()
     #text_scenarios + 1,
     "Should have scenario containers plus nested container"
   )
-  luaunit.assertTrue(#content_manager.text_metrics >= #text_scenarios, "Should have metrics for all scenarios")
+  
+  -- Count text_metrics (it's a table with string keys, not an array)
+  local metrics_count = 0
+  for _ in pairs(content_manager.text_metrics) do
+    metrics_count = metrics_count + 1
+  end
+  luaunit.assertTrue(metrics_count >= #text_scenarios, "Should have metrics for all scenarios")
 
   print(
     string.format(
@@ -1607,8 +1622,10 @@ function TestAuxiliaryFunctions:testAdvancedGUIManagementAndCleanup()
   end
 
   -- Test opacity management across hierarchy
-  for i, element_pair in pairs(managed_elements) do
-    if i % 2 == 0 then
+  for element_id, element_pair in pairs(managed_elements) do
+    -- Extract number from "element_N" key
+    local num = tonumber(element_id:match("%d+"))
+    if num and num % 2 == 0 then
       element_pair:updateOpacity(0.5)
       luaunit.assertEquals(element_pair.opacity, 0.5, "Even elements should have 0.5 opacity")
     end

testing/__tests__/12_units_system_tests.lua

@@ -22,6 +22,10 @@ end
 
 function TestUnitsSystem:tearDown()
   Gui.destroy()
+  -- Restore original viewport size
+  love.graphics.getDimensions = function()
+    return 800, 600
+  end
 end
 
 -- ============================================
@@ -245,7 +249,7 @@ function TestUnitsSystem:testMarginUnits()
   })
 
   luaunit.assertEquals(container.margin.top, 8) -- 8px
-  luaunit.assertEquals(container.margin.right, 12) -- 3% of 400
+  luaunit.assertEquals(container.margin.right, 36) -- 3% of viewport width (1200) - CSS spec: % margins relative to containing block
   luaunit.assertEquals(container.margin.bottom, 8) -- 1% of 800
   luaunit.assertEquals(container.margin.left, 24) -- 2% of 1200
 

testing/__tests__/16_event_system_tests.lua

@@ -16,6 +16,7 @@ function TestEventSystem:setUp()
   -- Initialize GUI before each test
   Gui.init({ baseScale = { width = 1920, height = 1080 } })
   love.window.setMode(1920, 1080)
+  Gui.resize(1920, 1080) -- Recalculate scale factors after setMode
 end
 
 function TestEventSystem:tearDown()

testing/__tests__/19_negative_margin_tests.lua

@@ -8,7 +8,7 @@ TestNegativeMargin = {}
 
 function TestNegativeMargin:setUp()
   FlexLove.Gui.destroy()
-  FlexLove.Gui.init({ baseScale = { width = 1920, height = 1080 } })
+  -- Don't call init to use 1:1 scaling (like other tests)
 end
 
 function TestNegativeMargin:tearDown()