changing abs x/y heredity

This commit is contained in:
Michael Freno
2025-09-18 12:26:29 -04:00
parent d271b25ff2
commit d61f84e045
5 changed files with 420 additions and 264 deletions

View File

@@ -486,9 +486,15 @@ function Element.new(props)
self.positioning = props.positioning or Positioning.ABSOLUTE
else
self.parent = props.parent
self.x = self.parent.x + (props.x or 0)
self.y = self.parent.y + (props.y or 0)
self.z = props.z or self.parent.z or 0
if props.positioning == Positioning.ABSOLUTE then
self.x = props.x
self.y = props.y
self.z = props.z
else
self.x = self.parent.x + (props.x or 0)
self.y = self.parent.y + (props.y or 0)
self.z = props.z or self.parent.z or 0
end
self.textColor = props.textColor or self.parent.textColor
self.positioning = props.positioning or self.parent.positioning
@@ -582,183 +588,183 @@ function Element:layoutChildren()
end
end
-- Position children
local currentPos = spacing
for _, child in ipairs(self.children) do
if child.positioning == Positioning.ABSOLUTE then
-- Skip positioning for absolute children as they should maintain their own coordinates
goto continue
end
-- Position children
local currentPos = spacing
for _, child in ipairs(self.children) do
if child.positioning == Positioning.ABSOLUTE then
-- Skip positioning for absolute children as they should maintain their own coordinates
goto continue
end
if self.flexDirection == FlexDirection.VERTICAL then
-- Position relative to parent origin
child.x = self.x + (self.margin.left or 0)
child.y = self.y + currentPos
if self.flexDirection == FlexDirection.VERTICAL then
-- Position relative to parent origin
child.x = self.x + (self.margin.left or 0)
child.y = self.y + currentPos
-- Apply alignment to vertical axis (alignItems)
if self.alignItems == AlignItems.FLEX_START then
-- nothing
elseif self.alignItems == AlignItems.CENTER then
child.x = self.x + (self.width - (child.width or 0)) / 2
elseif self.alignItems == AlignItems.FLEX_END then
child.x = self.x + self.width - (child.width or 0)
elseif self.alignItems == AlignItems.STRETCH then
child.width = self.width
end
-- Apply alignment to vertical axis (alignItems)
if self.alignItems == AlignItems.FLEX_START then
-- nothing
elseif self.alignItems == AlignItems.CENTER then
child.x = self.x + (self.width - (child.width or 0)) / 2
elseif self.alignItems == AlignItems.FLEX_END then
child.x = self.x + self.width - (child.width or 0)
elseif self.alignItems == AlignItems.STRETCH then
child.width = self.width
end
-- Apply self alignment to cross axis (alignSelf)
local effectiveAlignSelf = child.alignSelf
if child.alignSelf == AlignSelf.AUTO then
effectiveAlignSelf = self.alignItems
end
-- Apply self alignment to cross axis (alignSelf)
local effectiveAlignSelf = child.alignSelf
if child.alignSelf == AlignSelf.AUTO then
effectiveAlignSelf = self.alignItems
end
if effectiveAlignSelf == AlignSelf.FLEX_START then
-- Position at the start of cross axis relative to parent
child.x = self.x + (self.margin.left or 0)
elseif effectiveAlignSelf == AlignSelf.CENTER then
if self.flexDirection == FlexDirection.VERTICAL then
child.x = self.x + (self.width - (child.width or 0)) / 2
else
child.y = self.y + (self.height - (child.height or 0)) / 2
end
elseif effectiveAlignSelf == AlignSelf.FLEX_END then
if self.flexDirection == FlexDirection.VERTICAL then
child.x = self.x + self.width - (child.width or 0)
else
child.y = self.y + self.height - (child.height or 0)
end
elseif effectiveAlignSelf == AlignSelf.STRETCH then
if self.flexDirection == FlexDirection.VERTICAL then
-- Only set width if not already stretched by alignItems
if child.width ~= self.width then
child.width = self.width
end
else
-- Only set height if not already stretched by alignItems
if child.height ~= self.height then
child.height = self.height
end
end
end
if effectiveAlignSelf == AlignSelf.FLEX_START then
-- Position at the start of cross axis relative to parent
child.x = self.x + (self.margin.left or 0)
elseif effectiveAlignSelf == AlignSelf.CENTER then
if self.flexDirection == FlexDirection.VERTICAL then
child.x = self.x + (self.width - (child.width or 0)) / 2
else
child.y = self.y + (self.height - (child.height or 0)) / 2
end
elseif effectiveAlignSelf == AlignSelf.FLEX_END then
if self.flexDirection == FlexDirection.VERTICAL then
child.x = self.x + self.width - (child.width or 0)
else
child.y = self.y + self.height - (child.height or 0)
end
elseif effectiveAlignSelf == AlignSelf.STRETCH then
if self.flexDirection == FlexDirection.VERTICAL then
-- Only set width if not already stretched by alignItems
if child.width ~= self.width then
child.width = self.width
end
else
-- Only set height if not already stretched by alignItems
if child.height ~= self.height then
child.height = self.height
end
end
end
-- Apply justifySelf alignment to main axis (for vertical flexDirection, this is y-axis)
local effectiveJustifySelf = child.justifySelf
if child.justifySelf == JustifySelf.AUTO then
effectiveJustifySelf = self.justifyContent
end
-- Apply justifySelf alignment to main axis (for vertical flexDirection, this is y-axis)
local effectiveJustifySelf = child.justifySelf
if child.justifySelf == JustifySelf.AUTO then
effectiveJustifySelf = self.justifyContent
end
if effectiveJustifySelf == JustifySelf.FLEX_START then
-- Keep the current Y position (already set by spacing logic)
elseif effectiveJustifySelf == JustifySelf.CENTER then
-- Center along the main axis (y-axis for vertical flex direction)
local childHeight = child.height or 0
local availableSpace = self.height - (self.margin.top or 0) - (self.margin.bottom or 0)
local totalChildHeight = 0
for _, c in ipairs(self.children) do
if c.positioning ~= Positioning.ABSOLUTE then
totalChildHeight = totalChildHeight + (c.height or 0)
end
end
local freeSpace = availableSpace - totalChildHeight - (self.gap * (#self.children - 1))
if freeSpace > 0 then
child.y = self.y + (self.margin.top or 0) + freeSpace / 2
end
elseif effectiveJustifySelf == JustifySelf.FLEX_END then
-- Position at the end of main axis (y-axis for vertical flex direction)
local childHeight = child.height or 0
local availableSpace = self.height - (self.margin.top or 0) - (self.margin.bottom or 0)
local totalChildHeight = 0
for _, c in ipairs(self.children) do
if c.positioning ~= Positioning.ABSOLUTE then
totalChildHeight = totalChildHeight + (c.height or 0)
end
end
local freeSpace = availableSpace - totalChildHeight - (self.gap * (#self.children - 1))
if freeSpace > 0 then
child.y = self.y + (self.margin.top or 0) + freeSpace
end
elseif effectiveJustifySelf == JustifySelf.SPACE_AROUND then
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
elseif effectiveJustifySelf == JustifySelf.SPACE_EVENLY then
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
elseif effectiveJustifySelf == JustifySelf.SPACE_BETWEEN then
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
end
if effectiveJustifySelf == JustifySelf.FLEX_START then
-- Keep the current Y position (already set by spacing logic)
elseif effectiveJustifySelf == JustifySelf.CENTER then
-- Center along the main axis (y-axis for vertical flex direction)
local childHeight = child.height or 0
local availableSpace = self.height - (self.margin.top or 0) - (self.margin.bottom or 0)
local totalChildHeight = 0
for _, c in ipairs(self.children) do
if c.positioning ~= Positioning.ABSOLUTE then
totalChildHeight = totalChildHeight + (c.height or 0)
end
end
local freeSpace = availableSpace - totalChildHeight - (self.gap * (#self.children - 1))
if freeSpace > 0 then
child.y = self.y + (self.margin.top or 0) + freeSpace / 2
end
elseif effectiveJustifySelf == JustifySelf.FLEX_END then
-- Position at the end of main axis (y-axis for vertical flex direction)
local childHeight = child.height or 0
local availableSpace = self.height - (self.margin.top or 0) - (self.margin.bottom or 0)
local totalChildHeight = 0
for _, c in ipairs(self.children) do
if c.positioning ~= Positioning.ABSOLUTE then
totalChildHeight = totalChildHeight + (c.height or 0)
end
end
local freeSpace = availableSpace - totalChildHeight - (self.gap * (#self.children - 1))
if freeSpace > 0 then
child.y = self.y + (self.margin.top or 0) + freeSpace
end
elseif effectiveJustifySelf == JustifySelf.SPACE_AROUND then
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
elseif effectiveJustifySelf == JustifySelf.SPACE_EVENLY then
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
elseif effectiveJustifySelf == JustifySelf.SPACE_BETWEEN then
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
end
currentPos = currentPos + (child.height or 0) + self.gap + (self.margin.top or 0) + (self.margin.bottom or 0)
else
-- Horizontal layout: position relative to parent origin
child.x = self.x + currentPos + (self.margin.left or 0)
child.y = self.y + (self.margin.top or 0)
currentPos = currentPos + (child.height or 0) + self.gap + (self.margin.top or 0) + (self.margin.bottom or 0)
else
-- Horizontal layout: position relative to parent origin
child.x = self.x + currentPos + (self.margin.left or 0)
child.y = self.y + (self.margin.top or 0)
-- Determine effective alignment - alignSelf takes precedence over alignItems
local effectiveAlign = child.alignSelf
if effectiveAlign == AlignSelf.AUTO then
effectiveAlign = self.alignItems
end
-- Determine effective alignment - alignSelf takes precedence over alignItems
local effectiveAlign = child.alignSelf
if effectiveAlign == AlignSelf.AUTO then
effectiveAlign = self.alignItems
end
-- Apply alignment
if effectiveAlign == AlignItems.FLEX_START then
-- Keep the margin.top position (already applied)
elseif effectiveAlign == AlignItems.CENTER then
child.y = self.y + (self.height - (child.height or 0)) / 2
elseif effectiveAlign == AlignItems.FLEX_END then
child.y = self.y + self.height - (child.height or 0)
elseif effectiveAlign == AlignItems.STRETCH then
-- Only set height if not already stretched
if child.height ~= self.height then
child.height = self.height
end
end
-- Apply alignment
if effectiveAlign == AlignItems.FLEX_START then
-- Keep the margin.top position (already applied)
elseif effectiveAlign == AlignItems.CENTER then
child.y = self.y + (self.height - (child.height or 0)) / 2
elseif effectiveAlign == AlignItems.FLEX_END then
child.y = self.y + self.height - (child.height or 0)
elseif effectiveAlign == AlignItems.STRETCH then
-- Only set height if not already stretched
if child.height ~= self.height then
child.height = self.height
end
end
-- Apply justifySelf alignment to main axis (for horizontal flexDirection, this is x-axis)
local effectiveJustifySelf = child.justifySelf
if child.justifySelf == JustifySelf.AUTO then
effectiveJustifySelf = self.justifyContent
end
-- Apply justifySelf alignment to main axis (for horizontal flexDirection, this is x-axis)
local effectiveJustifySelf = child.justifySelf
if child.justifySelf == JustifySelf.AUTO then
effectiveJustifySelf = self.justifyContent
end
if effectiveJustifySelf == JustifySelf.FLEX_START then
-- Keep the current X position (already set by spacing logic)
elseif effectiveJustifySelf == JustifySelf.CENTER then
-- Center along the main axis (x-axis for horizontal flex direction)
local childWidth = child.width or 0
local availableSpace = self.width - (self.margin.left or 0) - (self.margin.right or 0)
local totalChildWidth = 0
for _, c in ipairs(self.children) do
if c.positioning ~= Positioning.ABSOLUTE then
totalChildWidth = totalChildWidth + (c.width or 0)
end
end
local freeSpace = availableSpace - totalChildWidth - (self.gap * (#self.children - 1))
if freeSpace > 0 then
child.x = self.x + (self.margin.left or 0) + freeSpace / 2
end
elseif effectiveJustifySelf == JustifySelf.FLEX_END then
-- Position at the end of main axis (x-axis for horizontal flex direction)
local childWidth = child.width or 0
local availableSpace = self.width - (self.margin.left or 0) - (self.margin.right or 0)
local totalChildWidth = 0
for _, c in ipairs(self.children) do
if c.positioning ~= Positioning.ABSOLUTE then
totalChildWidth = totalChildWidth + (c.width or 0)
end
end
local freeSpace = availableSpace - totalChildWidth - (self.gap * (#self.children - 1))
if freeSpace > 0 then
child.x = self.x + (self.margin.left or 0) + freeSpace
end
elseif effectiveJustifySelf == JustifySelf.SPACE_AROUND then
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
elseif effectiveJustifySelf == JustifySelf.SPACE_EVENLY then
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
elseif effectiveJustifySelf == JustifySelf.SPACE_BETWEEN then
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
end
if effectiveJustifySelf == JustifySelf.FLEX_START then
-- Keep the current X position (already set by spacing logic)
elseif effectiveJustifySelf == JustifySelf.CENTER then
-- Center along the main axis (x-axis for horizontal flex direction)
local childWidth = child.width or 0
local availableSpace = self.width - (self.margin.left or 0) - (self.margin.right or 0)
local totalChildWidth = 0
for _, c in ipairs(self.children) do
if c.positioning ~= Positioning.ABSOLUTE then
totalChildWidth = totalChildWidth + (c.width or 0)
end
end
local freeSpace = availableSpace - totalChildWidth - (self.gap * (#self.children - 1))
if freeSpace > 0 then
child.x = self.x + (self.margin.left or 0) + freeSpace / 2
end
elseif effectiveJustifySelf == JustifySelf.FLEX_END then
-- Position at the end of main axis (x-axis for horizontal flex direction)
local childWidth = child.width or 0
local availableSpace = self.width - (self.margin.left or 0) - (self.margin.right or 0)
local totalChildWidth = 0
for _, c in ipairs(self.children) do
if c.positioning ~= Positioning.ABSOLUTE then
totalChildWidth = totalChildWidth + (c.width or 0)
end
end
local freeSpace = availableSpace - totalChildWidth - (self.gap * (#self.children - 1))
if freeSpace > 0 then
child.x = self.x + (self.margin.left or 0) + freeSpace
end
elseif effectiveJustifySelf == JustifySelf.SPACE_AROUND then
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
elseif effectiveJustifySelf == JustifySelf.SPACE_EVENLY then
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
elseif effectiveJustifySelf == JustifySelf.SPACE_BETWEEN then
-- This would be handled by the justifyContent logic already, so we'll keep existing behavior
end
currentPos = currentPos + (child.width or 0) + self.gap + (self.margin.left or 0) + (self.margin.right or 0)
end
::continue::
end
currentPos = currentPos + (child.width or 0) + self.gap + (self.margin.left or 0) + (self.margin.right or 0)
end
::continue::
end
end
--- Destroy element and its children
@@ -810,7 +816,8 @@ function Element:draw()
end
-- Apply opacity to all drawing operations
local backgroundWithOpacity = Color.new(drawBackground.r, drawBackground.g, drawBackground.b, drawBackground.a * self.opacity)
local backgroundWithOpacity =
Color.new(drawBackground.r, drawBackground.g, drawBackground.b, drawBackground.a * self.opacity)
love.graphics.setColor(backgroundWithOpacity:toRGBA())
love.graphics.rectangle(
"fill",
@@ -820,7 +827,8 @@ function Element:draw()
self.height + self.padding.top + self.padding.bottom
)
-- Draw borders based on border property
local borderColorWithOpacity = Color.new(self.borderColor.r, self.borderColor.g, self.borderColor.b, self.borderColor.a * self.opacity)
local borderColorWithOpacity =
Color.new(self.borderColor.r, self.borderColor.g, self.borderColor.b, self.borderColor.a * self.opacity)
love.graphics.setColor(borderColorWithOpacity:toRGBA())
if self.border.top then
love.graphics.line(
@@ -857,7 +865,8 @@ function Element:draw()
-- Draw element text if present
if self.text then
local textColorWithOpacity = Color.new(self.textColor.r, self.textColor.g, self.textColor.b, self.textColor.a * self.opacity)
local textColorWithOpacity =
Color.new(self.textColor.r, self.textColor.g, self.textColor.b, self.textColor.a * self.opacity)
love.graphics.setColor(textColorWithOpacity:toRGBA())
local origFont = love.graphics.getFont()

View File

@@ -61,12 +61,14 @@ function TestAbsolutePositioning:testDeeplyNestedAbsolutePositioning()
rootWindow:layoutChildren()
-- Verify absolute child position is correct (relative to parent)
luaunit.assertEquals(absoluteChildInNested.x, 120) -- 100 + 20
luaunit.assertEquals(absoluteChildInNested.y, 80) -- 50 + 30
-- Absolute positioning should be relative to the parent container's origin
luaunit.assertEquals(absoluteChildInNested.x, nestedFlexContainer.x + absoluteChildInNested.x)
luaunit.assertEquals(absoluteChildInNested.y, nestedFlexContainer.y + absoluteChildInNested.y)
-- Verify flex child position is calculated correctly within nested container
luaunit.assertEquals(flexChildInNested.x, 0) -- Should be at start of container
luaunit.assertEquals(flexChildInNested.y, 100 - 30) -- Should be centered vertically in 100px container
-- Flex children should be positioned by flex layout rules (not affected by absolute positioning of others)
luaunit.assertAlmostEquals(flexChildInNested.x, 0) -- Should be at start of container
luaunit.assertAlmostEquals(flexChildInNested.y, (nestedFlexContainer.height - flexChildInNested.height)/2) -- Should be centered vertically in container
-- Verify parent-child relationships
luaunit.assertEquals(#nestedFlexContainer.children, 2)
@@ -135,14 +137,15 @@ function TestAbsolutePositioning:testMixedLayoutTypesWithNesting()
-- Layout children
rootWindow:layoutChildren()
-- Verify absolute positions are correct
luaunit.assertEquals(absoluteChild1.x, 50)
luaunit.assertEquals(absoluteChild1.y, 20)
luaunit.assertEquals(nestedAbsoluteChild.x, 100)
luaunit.assertEquals(nestedAbsoluteChild.y, 100)
-- Verify absolute positions are correct (relative to parent)
luaunit.assertEquals(absoluteChild1.x, flexContainerWithAbsolute.x + absoluteChild1.x)
luaunit.assertEquals(absoluteChild1.y, flexContainerWithAbsolute.y + absoluteChild1.y)
luaunit.assertEquals(nestedAbsoluteChild.x, flexContainerWithAbsolute.x + nestedAbsoluteChild.x)
luaunit.assertEquals(nestedAbsoluteChild.y, flexContainerWithAbsolute.y + nestedAbsoluteChild.y)
-- Verify flex child is positioned by flex layout
luaunit.assertEquals(flexChild.x, 0) -- First flex child in space-between should be at start
-- Verify flex child is positioned by flex layout (not affected by absolute positioning)
-- First flex child in space-between should be at start
luaunit.assertAlmostEquals(flexChild.x, 0)
end
function TestAbsolutePositioning:testAbsolutePositioningInComplexBranchingStructure()
@@ -249,16 +252,16 @@ function TestAbsolutePositioning:testAbsolutePositioningInComplexBranchingStruct
rootWindow:layoutChildren()
-- Verify absolute positions in each branch (absolute position relative to branch parent)
luaunit.assertEquals(absChild1.x, 10) -- 0 + 10
luaunit.assertEquals(absChild1.y, 15) -- 0 + 15
luaunit.assertEquals(absChild2.x, 250 + 20) -- 250 + 20
luaunit.assertEquals(absChild2.y, 100 + 30) -- 100 + 30
luaunit.assertEquals(absChild3.x, 500 + 30) -- 500 + 30
luaunit.assertEquals(absChild3.y, 200 + 40) -- 200 + 40
luaunit.assertEquals(absChild1.x, branch1.x + absChild1.x)
luaunit.assertEquals(absChild1.y, branch1.y + absChild1.y)
luaunit.assertEquals(absChild2.x, branch2.x + absChild2.x)
luaunit.assertEquals(absChild2.y, branch2.y + absChild2.y)
luaunit.assertEquals(absChild3.x, branch3.x + absChild3.x)
luaunit.assertEquals(absChild3.y, branch3.y + absChild3.y)
-- Verify that regular children are positioned by flex layout
luaunit.assertEquals(regularChild1.x, 0)
luaunit.assertEquals(regularChild2.x, 0)
luaunit.assertAlmostEquals(regularChild1.x, 0)
luaunit.assertAlmostEquals(regularChild2.x, 0)
end
function TestAbsolutePositioning:testAbsolutePositioningWithComplexTransformations()
@@ -304,8 +307,8 @@ function TestAbsolutePositioning:testAbsolutePositioningWithComplexTransformatio
rootWindow:layoutChildren()
-- Verify absolute position accounts for parent padding and margin
luaunit.assertEquals(absChildWithPadding.x, 100 + 15 + 20) -- root x + margin + child x
luaunit.assertEquals(absChildWithPadding.y, 50 + 10 + 30) -- root y + margin + child y
luaunit.assertEquals(absChildWithPadding.x, rootWindow.x + containerWithPadding.margin.left + absChildWithPadding.x)
luaunit.assertEquals(absChildWithPadding.y, rootWindow.y + containerWithPadding.margin.top + absChildWithPadding.y)
end
function TestAbsolutePositioning:testAbsolutePositioningInNestedLayoutWithMultipleLevels()
@@ -384,14 +387,13 @@ function TestAbsolutePositioning:testAbsolutePositioningInNestedLayoutWithMultip
-- Layout all children
rootWindow:layoutChildren()
-- Verify absolute position at deepest level
luaunit.assertEquals(absChildAtLevel3.x, 50 + 0 + 20 + 10) -- root x + level1 x + level2 x + child x
luaunit.assertEquals(absChildAtLevel3.y, 30 + 0 + 10 + 20) -- root y + level1 y + level2 y + child y
-- Verify absolute position at deepest level (relative to parent hierarchy)
luaunit.assertEquals(absChildAtLevel3.x, rootWindow.x + level1Container.x + level2Container.x + level3Container.x + absChildAtLevel3.x)
luaunit.assertEquals(absChildAtLevel3.y, rootWindow.y + level1Container.y + level2Container.y + level3Container.y + absChildAtLevel3.y)
-- Verify that flex child is positioned by flex layout at level 3
luaunit.assertEquals(flexChildAtLevel3.x, 0) -- Should be at start of container
luaunit.assertAlmostEquals(flexChildAtLevel3.x, 0) -- Should be at start of container
end
-- Run the tests
luaunit.LuaUnit.run()

View File

@@ -98,24 +98,26 @@ function TestDepthLayouts:testMaximumNestingDepth()
parentWindow:layoutChildren()
-- Verify that each level is positioned correctly
luaunit.assertEquals(level1.x, 0)
luaunit.assertEquals(level1.y, 0)
-- CSS behavior: nested containers should maintain their relative positions within parents
luaunit.assertAlmostEquals(level1.x, 0)
luaunit.assertAlmostEquals(level1.y, 0)
luaunit.assertEquals(level2.x, 0)
luaunit.assertEquals(level2.y, 0)
luaunit.assertAlmostEquals(level2.x, 0)
luaunit.assertAlmostEquals(level2.y, 0)
luaunit.assertEquals(level3.x, 0)
luaunit.assertEquals(level3.y, 0)
luaunit.assertAlmostEquals(level3.x, 0)
luaunit.assertAlmostEquals(level3.y, 0)
luaunit.assertEquals(level4.x, 0)
luaunit.assertEquals(level4.y, 0)
luaunit.assertAlmostEquals(level4.x, 0)
luaunit.assertAlmostEquals(level4.y, 0)
luaunit.assertEquals(level5.x, 0)
luaunit.assertEquals(level5.y, 0)
luaunit.assertAlmostEquals(level5.x, 0)
luaunit.assertAlmostEquals(level5.y, 0)
-- Verify that the deepest child is positioned correctly
luaunit.assertEquals(deepChild.x, 0)
luaunit.assertEquals(deepChild.y, 40 - 15) -- Should be at bottom position
-- CSS behavior: deepest child should be positioned according to its container's justify content and alignment properties
luaunit.assertAlmostEquals(deepChild.x, 0)
luaunit.assertAlmostEquals(deepChild.y, level5.h - deepChild.h) -- Should be at bottom position
end
function TestDepthLayouts:testPropertyInheritanceThroughNesting()
@@ -180,20 +182,20 @@ function TestDepthLayouts:testPropertyInheritanceThroughNesting()
parentWindow:layoutChildren()
-- Verify that properties are inherited appropriately
-- The parent's flexWrap should be preserved through nesting
-- The level1's flexDirection should be VERTICAL, and level2's should be HORIZONTAL
luaunit.assertEquals(level1.x, 0)
luaunit.assertEquals(level1.y, (200 - 150) / 2) -- Centered vertically
-- CSS behavior: nested containers should inherit flex properties from their parent, unless explicitly overridden
luaunit.assertAlmostEquals(level1.x, 0)
luaunit.assertAlmostEquals(level1.y, (parentWindow.h - level1.h) / 2) -- Centered vertically
luaunit.assertEquals(level2.x, 0)
luaunit.assertEquals(level2.y, 0)
luaunit.assertAlmostEquals(level2.x, 0)
luaunit.assertAlmostEquals(level2.y, 0)
-- Verify that children are positioned correctly based on their container's properties
luaunit.assertEquals(child1.x, 0)
luaunit.assertEquals(child1.y, (150 - 30) / 2) -- Centered vertically within level1
-- CSS behavior: child positioning should respect the flex direction and justify content of its container
luaunit.assertAlmostEquals(child1.x, 0)
luaunit.assertAlmostEquals(child1.y, (level1.h - child1.h) / 2) -- Centered vertically within level1
luaunit.assertEquals(child2.x, (200 - 60) / 2) -- Centered horizontally within level2
luaunit.assertEquals(child2.y, (100 - 40) / 2) -- Centered vertically within level2
luaunit.assertAlmostEquals(child2.x, (level2.w - child2.w) / 2) -- Centered horizontally within level2
luaunit.assertAlmostEquals(child2.y, (level2.h - child2.h) / 2) -- Centered vertically within level2
end
function TestDepthLayouts:testSizeCalculationAccuracyAtDepth()
@@ -269,21 +271,23 @@ function TestDepthLayouts:testSizeCalculationAccuracyAtDepth()
parentWindow:layoutChildren()
-- Verify that dimensions are preserved through nesting
luaunit.assertEquals(level1.w, 300)
luaunit.assertEquals(level1.h, 200)
-- CSS behavior: nested containers should maintain their specified dimensions
luaunit.assertAlmostEquals(level1.w, 300)
luaunit.assertAlmostEquals(level1.h, 200)
luaunit.assertEquals(level2.w, 250)
luaunit.assertEquals(level2.h, 150)
luaunit.assertAlmostEquals(level2.w, 250)
luaunit.assertAlmostEquals(level2.h, 150)
luaunit.assertEquals(level3.w, 200)
luaunit.assertEquals(level3.h, 100)
luaunit.assertAlmostEquals(level3.w, 200)
luaunit.assertAlmostEquals(level3.h, 100)
-- Verify that children are positioned correctly within their containers
luaunit.assertEquals(child1.x, (200 - 50) / 2) -- Centered horizontally within level3
luaunit.assertEquals(child1.y, (100 - 30) / 2) -- Centered vertically within level3
-- CSS behavior: child positioning should be calculated based on container dimensions and justify content
luaunit.assertAlmostEquals(child1.x, (level3.w - child1.w) / 2) -- Centered horizontally within level3
luaunit.assertAlmostEquals(child1.y, (level3.h - child1.h) / 2) -- Centered vertically within level3
luaunit.assertEquals(child2.x, (200 - 60) / 2 + 50 + 10) -- Positioned after first child + gap
luaunit.assertEquals(child2.y, (100 - 40) / 2) -- Centered vertically within level3
luaunit.assertAlmostEquals(child2.x, (level3.w - child2.w) / 2 + child1.w + parentWindow.gap) -- Positioned after first child + gap
luaunit.assertAlmostEquals(child2.y, (level3.h - child2.h) / 2) -- Centered vertically within level3
end
function TestDepthLayouts:testEdgeCasesInDeepLayouts()
@@ -367,27 +371,29 @@ function TestDepthLayouts:testEdgeCasesInDeepLayouts()
parentWindow:layoutChildren()
-- Verify that edge cases are handled correctly
luaunit.assertEquals(level1.x, 0)
luaunit.assertEquals(level1.y, 0)
-- CSS behavior: nested layouts should handle various combinations of flex properties and child sizes gracefully
luaunit.assertAlmostEquals(level1.x, 0)
luaunit.assertAlmostEquals(level1.y, 0)
luaunit.assertEquals(level2.x, 0)
luaunit.assertEquals(level2.y, 0)
luaunit.assertAlmostEquals(level2.x, 0)
luaunit.assertAlmostEquals(level2.y, 0)
-- Verify children in level2 are positioned correctly (centered)
luaunit.assertEquals(child1.x, (300 - 80) / 2) -- Centered horizontally
luaunit.assertEquals(child1.y, (200 - 40) / 2) -- Centered vertically
-- CSS behavior: child positioning should respect justify content properties
luaunit.assertAlmostEquals(child1.x, (level2.w - child1.w) / 2) -- Centered horizontally
luaunit.assertAlmostEquals(child1.y, (level2.h - child1.h) / 2) -- Centered vertically
luaunit.assertEquals(child2.x, (300 - 100) / 2 + 80 + 10) -- Positioned after first child + gap
luaunit.assertEquals(child2.y, (200 - 50) / 2) -- Centered vertically
luaunit.assertAlmostEquals(child2.x, (level2.w - child2.w) / 2 + child1.w + parentWindow.gap) -- Positioned after first child + gap
luaunit.assertAlmostEquals(child2.y, (level2.h - child2.h) / 2) -- Centered vertically
-- Verify children in level1 are positioned correctly
luaunit.assertEquals(deepChild1.x, 0)
luaunit.assertEquals(deepChild1.y, 0)
-- CSS behavior: child positioning should respect the flex direction and justify content of its container
luaunit.assertAlmostEquals(deepChild1.x, 0)
luaunit.assertAlmostEquals(deepChild1.y, 0)
luaunit.assertEquals(deepChild2.x, 0)
luaunit.assertEquals(deepChild2.y, 20 + 10) -- Positioned after first child + gap
luaunit.assertAlmostEquals(deepChild2.x, 0)
luaunit.assertAlmostEquals(deepChild2.y, deepChild1.h + parentWindow.gap) -- Positioned after first child + gap
end
-- Run the tests
luaunit.LuaUnit.run()

View File

@@ -80,12 +80,13 @@ function TestFlexDirection:testHorizontalLayoutChildren()
window:layoutChildren()
-- Verify positions for horizontal layout (children should be placed side by side)
luaunit.assertEquals(child1.x, 0) -- First child at start position
luaunit.assertEquals(child1.y, 0) -- First child at top position
-- In CSS, horizontal flex direction means children are laid out from left to right
luaunit.assertAlmostEquals(child1.x, 0) -- First child at start position
luaunit.assertAlmostEquals(child1.y, 0) -- First child at top position
-- Second child should be positioned after first child + gap
luaunit.assertEquals(child2.x, 50 + 10) -- child1 width + gap
luaunit.assertEquals(child2.y, 0) -- Same y position as first child
luaunit.assertAlmostEquals(child2.x, child1.w + window.gap) -- child1 width + gap
luaunit.assertAlmostEquals(child2.y, 0) -- Same y position as first child
end
function TestFlexDirection:testVerticalLayoutChildren()
@@ -124,12 +125,13 @@ function TestFlexDirection:testVerticalLayoutChildren()
window:layoutChildren()
-- Verify positions for vertical layout (children should be placed one below another)
luaunit.assertEquals(child1.x, 0) -- First child at left position
luaunit.assertEquals(child1.y, 0) -- First child at start position
-- In CSS, vertical flex direction means children are laid out from top to bottom
luaunit.assertAlmostEquals(child1.x, 0) -- First child at left position
luaunit.assertAlmostEquals(child1.y, 0) -- First child at start position
-- Second child should be positioned after first child + gap
luaunit.assertEquals(child2.x, 0) -- Same x position as first child
luaunit.assertEquals(child2.y, 30 + 10) -- child1 height + gap
luaunit.assertAlmostEquals(child2.x, 0) -- Same x position as first child
luaunit.assertAlmostEquals(child2.y, child1.h + window.gap) -- child1 height + gap
end
function TestFlexDirection:testFlexDirectionInheritance()
@@ -156,7 +158,8 @@ function TestFlexDirection:testFlexDirectionInheritance()
})
-- Verify child inherits flex direction from parent
luaunit.assertEquals(child.flexDirection, enums.FlexDirection.HORIZONTAL)
-- CSS inheritance means child should inherit the flex direction from its parent
luaunit.assertEquals(child.flexDirection, parentWindow.flexDirection)
end
-- Run the tests

View File

@@ -46,7 +46,8 @@ function TestJustifyContent:testFlexStartJustifyContent()
window:layoutChildren()
-- With flex-start, children should start at the beginning of the container
luaunit.assertEquals(child1.x, 0) -- First child at start position
-- CSS behavior: first child positioned at start (leftmost for horizontal, topmost for vertical)
luaunit.assertAlmostEquals(child1.x, 0) -- First child at start position
end
function TestJustifyContent:testCenterJustifyContent()
@@ -85,12 +86,13 @@ function TestJustifyContent:testCenterJustifyContent()
window:layoutChildren()
-- With center, children should be centered in the container
-- CSS behavior: children should be centered within the container's available space
-- Calculate expected position based on container width and child sizes
local totalWidth = 50 + 60 + 10 -- child1.width + child2.width + gap
local containerWidth = 300
local totalWidth = child1.width + child2.width + window.gap -- child1.width + child2.width + gap
local containerWidth = window.width
local expectedPosition = (containerWidth - totalWidth) / 2
luaunit.assertEquals(child1.x, expectedPosition)
luaunit.assertAlmostEquals(child1.x, expectedPosition)
end
function TestJustifyContent:testFlexEndJustifyContent()
@@ -129,11 +131,12 @@ function TestJustifyContent:testFlexEndJustifyContent()
window:layoutChildren()
-- With flex-end, children should be positioned at the end of the container
local totalWidth = 50 + 60 + 10 -- child1.width + child2.width + gap
local containerWidth = 300
-- CSS behavior: children positioned at the end (rightmost for horizontal, bottommost for vertical)
local totalWidth = child1.w + child2.w + window.gap -- child1.width + child2.width + gap
local containerWidth = window.w
local expectedPosition = containerWidth - totalWidth
luaunit.assertEquals(child1.x, expectedPosition)
luaunit.assertAlmostEquals(child1.x, expectedPosition)
end
function TestJustifyContent:testSpaceAroundJustifyContent()
@@ -172,7 +175,8 @@ function TestJustifyContent:testSpaceAroundJustifyContent()
window:layoutChildren()
-- With space-around, there should be equal spacing around each child
-- This is a basic test to ensure the function doesn't crash and children are positioned
-- CSS behavior: each child should have equal spacing on both sides (including edges)
-- This test ensures the function doesn't crash and children are positioned
luaunit.assertNotNil(child1.x)
end
@@ -212,7 +216,8 @@ function TestJustifyContent:testSpaceEvenlyJustifyContent()
window:layoutChildren()
-- With space-evenly, there should be equal spacing between each child
-- This is a basic test to ensure the function doesn't crash and children are positioned
-- CSS behavior: spacing is distributed evenly across the container
-- This test ensures the function doesn't crash and children are positioned
luaunit.assertNotNil(child1.x)
end
@@ -252,7 +257,8 @@ function TestJustifyContent:testSpaceBetweenJustifyContent()
window:layoutChildren()
-- With space-between, there should be equal spacing between each child
-- This is a basic test to ensure the function doesn't crash and children are positioned
-- CSS behavior: first and last child at edges, others spaced evenly in between
-- This test ensures the function doesn't crash and children are positioned
luaunit.assertNotNil(child1.x)
end
@@ -292,8 +298,138 @@ function TestJustifyContent:testVerticalJustifyContent()
window:layoutChildren()
-- With vertical container, justify content affects the Y axis
-- CSS behavior: justify content controls positioning along the main axis (Y for vertical flex)
luaunit.assertNotNil(child1.y)
end
function TestJustifyContent:testFlexStart()
-- Create a test container with horizontal flexDirection and FLEX_START justifyContent
local container = Gui.new({
w = 300,
h = 100,
flexDirection = enums.FlexDirection.HORIZONTAL,
justifyContent = enums.JustifyContent.FLEX_START,
gap = 10,
})
-- Add children with fixed widths
local child1 = Gui.new({
w = 50,
h = 50,
parent = container,
})
local child2 = Gui.new({
w = 50,
h = 50,
parent = container,
})
container:layoutChildren()
-- For FLEX_START, children should be positioned at the start with gaps
luaunit.assertEquals(child1.x, container.x)
luaunit.assertEquals(child2.x, container.x + 50 + 10) -- child1 width + gap
end
function TestJustifyContent:testCenter()
-- Create a test container with horizontal flexDirection and CENTER justifyContent
local container = Gui.new({
w = 300,
h = 100,
flexDirection = enums.FlexDirection.HORIZONTAL,
justifyContent = enums.JustifyContent.CENTER,
gap = 10,
})
-- Add children with fixed widths
local child1 = Gui.new({
w = 50,
h = 50,
parent = container,
})
local child2 = Gui.new({
w = 50,
h = 50,
parent = container,
})
container:layoutChildren()
-- For CENTER, children should be centered within available space
-- Total width of children + gaps = 50 + 10 + 50 = 110
-- Free space = 300 - 110 = 190
-- Spacing = 190 / 2 = 95
luaunit.assertEquals(child1.x, container.x + 95)
luaunit.assertEquals(child2.x, container.x + 95 + 50 + 10) -- spacing + child1 width + gap
end
function TestJustifyContent:testFlexEnd()
-- Create a test container with horizontal flexDirection and FLEX_END justifyContent
local container = Gui.new({
w = 300,
h = 100,
flexDirection = enums.FlexDirection.HORIZONTAL,
justifyContent = enums.JustifyContent.FLEX_END,
gap = 10,
})
-- Add children with fixed widths
local child1 = Gui.new({
w = 50,
h = 50,
parent = container,
})
local child2 = Gui.new({
w = 50,
h = 50,
parent = container,
})
container:layoutChildren()
-- For FLEX_END, children should be positioned at the end of available space
-- Total width of children + gaps = 50 + 10 + 50 = 110
-- Free space = 300 - 110 = 190
-- Spacing = 190 (full free space)
luaunit.assertEquals(child1.x, container.x + 190)
luaunit.assertEquals(child2.x, container.x + 190 + 50 + 10) -- spacing + child1 width + gap
end
function TestJustifyContent:testSpaceAround()
-- Create a test container with horizontal flexDirection and SPACE_AROUND justifyContent
local container = Gui.new({
w = 300,
h = 100,
flexDirection = enums.FlexDirection.HORIZONTAL,
justifyContent = enums.JustifyContent.SPACE_AROUND,
gap = 10,
})
-- Add children with fixed widths
local child1 = Gui.new({
w = 50,
h = 50,
parent = container,
})
local child2 = Gui.new({
w = 50,
h = 50,
parent = container,
})
container:layoutChildren()
-- For SPACE_AROUND, spacing should be freeSpace / (childCount + 1)
-- Total width of children + gaps = 50 + 10 + 50 = 110
-- Free space = 300 - 110 = 190
-- Spacing = 190 / (2 + 1) = 63.33
luaunit.assertEquals(child1.x, container.x + 63.33)
luaunit.assertEquals(child2.x, container.x + 63.33 + 50 + 10) -- spacing + child1 width + gap
end
-- Run the tests
luaunit.LuaUnit.run()