DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Redo layout of 'stretch' aligned items for correct positioning of nested

Browse Source 
items

Fixes facebook/css-layout#83, facebook/css-layout#100,
facebook/css-layout#127.
This commit is contained in:
Alex Bogomazov
2015-10-15 01:30:33 +03:00
parent dd8e5cd65d
commit 425345aa8d
15 changed files with 847 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
dist/css-layout.h vendored
View File

@@ -613,11 +613,16 @@ static float getDimWithMargin(css_node_t *node, css_flex_direction_t axis) {
getTrailingMargin(node, axis);
}
static bool isDimDefined(css_node_t *node, css_flex_direction_t axis) {
static bool isStyleDimDefined(css_node_t *node, css_flex_direction_t axis) {
float value = node->style.dimensions[dim[axis]];
return !isUndefined(value) && value >= 0.0;
}
static bool isLayoutDimDefined(css_node_t *node, css_flex_direction_t axis) {
float value = node->layout.dimensions[dim[axis]];
return !isUndefined(value) && value >= 0.0;
}
static bool isPosDefined(css_node_t *node, css_position_t position) {
return !isUndefined(node->style.position[position]);
}
@@ -661,11 +666,11 @@ static float boundAxis(css_node_t *node, css_flex_direction_t axis, float value)
// When the user specifically sets a value for width or height
static void setDimensionFromStyle(css_node_t *node, css_flex_direction_t axis) {
// The parent already computed us a width or height. We just skip it
if (!isUndefined(node->layout.dimensions[dim[axis]])) {
if (isLayoutDimDefined(node, axis)) {
return;
}
// We only run if there's a width or height defined
if (!isDimDefined(node, axis)) {
if (!isStyleDimDefined(node, axis)) {
return;
}
@@ -723,10 +728,10 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
float paddingAndBorderAxisColumn = getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
if (isMeasureDefined(node)) {
bool isResolvedRowDimDefined = !isUndefined(node->layout.dimensions[dim[resolvedRowAxis]]);
bool isResolvedRowDimDefined = isLayoutDimDefined(node, resolvedRowAxis);
float width = CSS_UNDEFINED;
if (isDimDefined(node, resolvedRowAxis)) {
if (isStyleDimDefined(node, resolvedRowAxis)) {
width = node->style.dimensions[CSS_WIDTH];
} else if (isResolvedRowDimDefined) {
width = node->layout.dimensions[dim[resolvedRowAxis]];
@@ -737,9 +742,9 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
width -= paddingAndBorderAxisResolvedRow;
float height = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
if (isStyleDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
height = node->style.dimensions[CSS_HEIGHT];
} else if (!isUndefined(node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]])) {
} else if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
height = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]];
} else {
height = parentMaxHeight -
@@ -750,8 +755,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
// We only need to give a dimension for the text if we haven't got any
// for it computed yet. It can either be from the style attribute or because
// the element is flexible.
bool isRowUndefined = !isDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined;
bool isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
bool isRowUndefined = !isStyleDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined;
bool isColumnUndefined = !isStyleDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
isUndefined(node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]]);
// Let's not measure the text if we already know both dimensions
@@ -785,8 +790,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
float paddingAndBorderAxisMain = getPaddingAndBorderAxis(node, mainAxis);
float paddingAndBorderAxisCross = getPaddingAndBorderAxis(node, crossAxis);
bool isMainDimDefined = !isUndefined(node->layout.dimensions[dim[mainAxis]]);
bool isCrossDimDefined = !isUndefined(node->layout.dimensions[dim[crossAxis]]);
bool isMainDimDefined = isLayoutDimDefined(node, mainAxis);
bool isCrossDimDefined = isLayoutDimDefined(node, crossAxis);
bool isMainRowDirection = isRowDirection(mainAxis);
int i;
@@ -848,8 +853,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
float mainDim = leadingPaddingAndBorderMain;
float crossDim = 0;
float maxWidth;
float maxHeight;
float maxWidth = CSS_UNDEFINED;
float maxHeight = CSS_UNDEFINED;
for (i = startLine; i < childCount; ++i) {
child = node->get_child(node->context, i);
child->line_index = linesCount;
@@ -864,7 +869,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
if (alignItem == CSS_ALIGN_STRETCH &&
child->style.position_type == CSS_POSITION_RELATIVE &&
isCrossDimDefined &&
!isDimDefined(child, crossAxis)) {
!isStyleDimDefined(child, crossAxis)) {
child->layout.dimensions[dim[crossAxis]] = fmaxf(
boundAxis(child, crossAxis, node->layout.dimensions[dim[crossAxis]] -
paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
@@ -886,8 +891,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
// left and right or top and bottom).
for (ii = 0; ii < 2; ii++) {
axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
if (!isUndefined(node->layout.dimensions[dim[axis]]) &&
!isDimDefined(child, axis) &&
if (isLayoutDimDefined(node, axis) &&
!isStyleDimDefined(child, axis) &&
isPosDefined(child, leading[axis]) &&
isPosDefined(child, trailing[axis])) {
child->layout.dimensions[dim[axis]] = fmaxf(
@@ -933,7 +938,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
maxHeight = CSS_UNDEFINED;
if (!isMainRowDirection) {
if (isDimDefined(node, resolvedRowAxis)) {
if (isLayoutDimDefined(node, resolvedRowAxis)) {
maxWidth = node->layout.dimensions[dim[resolvedRowAxis]] -
paddingAndBorderAxisResolvedRow;
} else {
@@ -942,7 +947,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
paddingAndBorderAxisResolvedRow;
}
} else {
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
maxHeight = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] -
paddingAndBorderAxisColumn;
} else {
@@ -993,7 +998,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
if (isSimpleStackCross &&
(child->style.position_type != CSS_POSITION_RELATIVE ||
(alignItem != CSS_ALIGN_STRETCH && alignItem != CSS_ALIGN_FLEX_START) ||
isUndefined(child->layout.dimensions[dim[crossAxis]]))) {
(alignItem == CSS_ALIGN_STRETCH && !isCrossDimDefined))) {
isSimpleStackCross = false;
firstComplexCross = i;
}
@@ -1076,7 +1081,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
);
maxWidth = CSS_UNDEFINED;
if (isDimDefined(node, resolvedRowAxis)) {
if (isLayoutDimDefined(node, resolvedRowAxis)) {
maxWidth = node->layout.dimensions[dim[resolvedRowAxis]] -
paddingAndBorderAxisResolvedRow;
} else if (!isMainRowDirection) {
@@ -1085,7 +1090,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
paddingAndBorderAxisResolvedRow;
}
maxHeight = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
maxHeight = node->layout.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] -
paddingAndBorderAxisColumn;
} else if (isMainRowDirection) {
@@ -1203,15 +1208,31 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
css_align_t alignItem = getAlignItem(node, child);
/*eslint-enable */
if (alignItem == CSS_ALIGN_STRETCH) {
// You can only stretch if the dimension has not already been set
// You can only stretch if the dimension has not already been defined
// previously.
if (isUndefined(child->layout.dimensions[dim[crossAxis]])) {
if (!isStyleDimDefined(child, crossAxis)) {
float dimCrossAxis = child->layout.dimensions[dim[crossAxis]];
child->layout.dimensions[dim[crossAxis]] = fmaxf(
boundAxis(child, crossAxis, containerCrossAxis -
paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
// You never want to go smaller than padding
getPaddingAndBorderAxis(child, crossAxis)
);
// If the size has changed, and this child has children we need to re-layout this child
if (dimCrossAxis != child->layout.dimensions[dim[crossAxis]] && child->children_count > 0) {
// Reset child margins before re-layout as they are added back in layoutNode and would be doubled
child->layout.position[leading[mainAxis]] -= getLeadingMargin(child, mainAxis) +
getRelativePosition(child, mainAxis);
child->layout.position[trailing[mainAxis]] -= getTrailingMargin(child, mainAxis) +
getRelativePosition(child, mainAxis);
child->layout.position[leading[crossAxis]] -= getLeadingMargin(child, crossAxis) +
getRelativePosition(child, crossAxis);
child->layout.position[trailing[crossAxis]] -= getTrailingMargin(child, crossAxis) +
getRelativePosition(child, crossAxis);
layoutNode(child, maxWidth, maxHeight, direction);
}
}
} else if (alignItem != CSS_ALIGN_FLEX_START) {
// The remaining space between the parent dimensions+padding and child
@@ -1289,7 +1310,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
if (child->line_index != i) {
break;
}
if (!isUndefined(child->layout.dimensions[dim[crossAxis]])) {
if (isLayoutDimDefined(child, crossAxis)) {
lineHeight = fmaxf(
lineHeight,
child->layout.dimensions[dim[crossAxis]] + getMarginAxis(child, crossAxis)
@@ -1382,8 +1403,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
for (ii = 0; ii < 2; ii++) {
axis = (ii != 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
if (!isUndefined(node->layout.dimensions[dim[axis]]) &&
!isDimDefined(currentAbsoluteChild, axis) &&
if (isLayoutDimDefined(node, axis) &&
!isStyleDimDefined(currentAbsoluteChild, axis) &&
isPosDefined(currentAbsoluteChild, leading[axis]) &&
isPosDefined(currentAbsoluteChild, trailing[axis])) {
currentAbsoluteChild->layout.dimensions[dim[axis]] = fmaxf(

BIN
dist/css-layout.jar vendored
View File

Binary file not shown.

74
dist/css-layout.js vendored
View File

@@ -2,7 +2,7 @@
// See https://github.com/umdjs/umd for reference
//
// This file uses the following specific UMD implementation:
// https://github.com/umdjs/umd/blob/master/returnExports.js
// https://github.com/umdjs/umd/blob/master/templates/returnExports.js
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
@@ -380,10 +380,14 @@ var computeLayout = (function() {
return node.layout[dim[axis]] + getMarginAxis(node, axis);
}
function isDimDefined(node, axis) {
function isStyleDimDefined(node, axis) {
return node.style[dim[axis]] !== undefined && node.style[dim[axis]] >= 0;
}
function isLayoutDimDefined(node, axis) {
return node.layout[dim[axis]] !== undefined && node.layout[dim[axis]] >= 0;
}
function isPosDefined(node, pos) {
return node.style[pos] !== undefined;
}
@@ -434,11 +438,11 @@ var computeLayout = (function() {
// When the user specifically sets a value for width or height
function setDimensionFromStyle(node, axis) {
// The parent already computed us a width or height. We just skip it
if (node.layout[dim[axis]] !== undefined) {
if (isLayoutDimDefined(node, axis)) {
return;
}
// We only run if there's a width or height defined
if (!isDimDefined(node, axis)) {
if (!isStyleDimDefined(node, axis)) {
return;
}
@@ -494,10 +498,10 @@ var computeLayout = (function() {
var/*float*/ paddingAndBorderAxisColumn = getPaddingAndBorderAxis(node, CSS_FLEX_DIRECTION_COLUMN);
if (isMeasureDefined(node)) {
var/*bool*/ isResolvedRowDimDefined = !isUndefined(node.layout[dim[resolvedRowAxis]]);
var/*bool*/ isResolvedRowDimDefined = isLayoutDimDefined(node, resolvedRowAxis);
var/*float*/ width = CSS_UNDEFINED;
if (isDimDefined(node, resolvedRowAxis)) {
if (isStyleDimDefined(node, resolvedRowAxis)) {
width = node.style.width;
} else if (isResolvedRowDimDefined) {
width = node.layout[dim[resolvedRowAxis]];
@@ -508,9 +512,9 @@ var computeLayout = (function() {
width -= paddingAndBorderAxisResolvedRow;
var/*float*/ height = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
if (isStyleDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
height = node.style.height;
} else if (!isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]])) {
} else if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
height = node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]];
} else {
height = parentMaxHeight -
@@ -521,8 +525,8 @@ var computeLayout = (function() {
// We only need to give a dimension for the text if we haven't got any
// for it computed yet. It can either be from the style attribute or because
// the element is flexible.
var/*bool*/ isRowUndefined = !isDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined;
var/*bool*/ isColumnUndefined = !isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
var/*bool*/ isRowUndefined = !isStyleDimDefined(node, resolvedRowAxis) && !isResolvedRowDimDefined;
var/*bool*/ isColumnUndefined = !isStyleDimDefined(node, CSS_FLEX_DIRECTION_COLUMN) &&
isUndefined(node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]]);
// Let's not measure the text if we already know both dimensions
@@ -556,8 +560,8 @@ var computeLayout = (function() {
var/*float*/ paddingAndBorderAxisMain = getPaddingAndBorderAxis(node, mainAxis);
var/*float*/ paddingAndBorderAxisCross = getPaddingAndBorderAxis(node, crossAxis);
var/*bool*/ isMainDimDefined = !isUndefined(node.layout[dim[mainAxis]]);
var/*bool*/ isCrossDimDefined = !isUndefined(node.layout[dim[crossAxis]]);
var/*bool*/ isMainDimDefined = isLayoutDimDefined(node, mainAxis);
var/*bool*/ isCrossDimDefined = isLayoutDimDefined(node, crossAxis);
var/*bool*/ isMainRowDirection = isRowDirection(mainAxis);
var/*int*/ i;
@@ -619,8 +623,8 @@ var computeLayout = (function() {
var/*float*/ mainDim = leadingPaddingAndBorderMain;
var/*float*/ crossDim = 0;
var/*float*/ maxWidth;
var/*float*/ maxHeight;
var/*float*/ maxWidth = CSS_UNDEFINED;
var/*float*/ maxHeight = CSS_UNDEFINED;
for (i = startLine; i < childCount; ++i) {
child = node.children[i];
child.lineIndex = linesCount;
@@ -635,7 +639,7 @@ var computeLayout = (function() {
if (alignItem === CSS_ALIGN_STRETCH &&
getPositionType(child) === CSS_POSITION_RELATIVE &&
isCrossDimDefined &&
!isDimDefined(child, crossAxis)) {
!isStyleDimDefined(child, crossAxis)) {
child.layout[dim[crossAxis]] = fmaxf(
boundAxis(child, crossAxis, node.layout[dim[crossAxis]] -
paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
@@ -657,8 +661,8 @@ var computeLayout = (function() {
// left and right or top and bottom).
for (ii = 0; ii < 2; ii++) {
axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
if (!isUndefined(node.layout[dim[axis]]) &&
!isDimDefined(child, axis) &&
if (isLayoutDimDefined(node, axis) &&
!isStyleDimDefined(child, axis) &&
isPosDefined(child, leading[axis]) &&
isPosDefined(child, trailing[axis])) {
child.layout[dim[axis]] = fmaxf(
@@ -704,7 +708,7 @@ var computeLayout = (function() {
maxHeight = CSS_UNDEFINED;
if (!isMainRowDirection) {
if (isDimDefined(node, resolvedRowAxis)) {
if (isLayoutDimDefined(node, resolvedRowAxis)) {
maxWidth = node.layout[dim[resolvedRowAxis]] -
paddingAndBorderAxisResolvedRow;
} else {
@@ -713,7 +717,7 @@ var computeLayout = (function() {
paddingAndBorderAxisResolvedRow;
}
} else {
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
maxHeight = node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]] -
paddingAndBorderAxisColumn;
} else {
@@ -764,7 +768,7 @@ var computeLayout = (function() {
if (isSimpleStackCross &&
(getPositionType(child) !== CSS_POSITION_RELATIVE ||
(alignItem !== CSS_ALIGN_STRETCH && alignItem !== CSS_ALIGN_FLEX_START) ||
isUndefined(child.layout[dim[crossAxis]]))) {
(alignItem == CSS_ALIGN_STRETCH && !isCrossDimDefined))) {
isSimpleStackCross = false;
firstComplexCross = i;
}
@@ -847,7 +851,7 @@ var computeLayout = (function() {
);
maxWidth = CSS_UNDEFINED;
if (isDimDefined(node, resolvedRowAxis)) {
if (isLayoutDimDefined(node, resolvedRowAxis)) {
maxWidth = node.layout[dim[resolvedRowAxis]] -
paddingAndBorderAxisResolvedRow;
} else if (!isMainRowDirection) {
@@ -856,7 +860,7 @@ var computeLayout = (function() {
paddingAndBorderAxisResolvedRow;
}
maxHeight = CSS_UNDEFINED;
if (isDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
if (isLayoutDimDefined(node, CSS_FLEX_DIRECTION_COLUMN)) {
maxHeight = node.layout[dim[CSS_FLEX_DIRECTION_COLUMN]] -
paddingAndBorderAxisColumn;
} else if (isMainRowDirection) {
@@ -974,15 +978,31 @@ var computeLayout = (function() {
var/*css_align_t*/ alignItem = getAlignItem(node, child);
/*eslint-enable */
if (alignItem === CSS_ALIGN_STRETCH) {
// You can only stretch if the dimension has not already been set
// You can only stretch if the dimension has not already been defined
// previously.
if (isUndefined(child.layout[dim[crossAxis]])) {
if (!isStyleDimDefined(child, crossAxis)) {
var/*float*/ dimCrossAxis = child.layout[dim[crossAxis]];
child.layout[dim[crossAxis]] = fmaxf(
boundAxis(child, crossAxis, containerCrossAxis -
paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
// You never want to go smaller than padding
getPaddingAndBorderAxis(child, crossAxis)
);
// If the size has changed, and this child has children we need to re-layout this child
if (dimCrossAxis != child.layout[dim[crossAxis]] && child.children.length > 0) {
// Reset child margins before re-layout as they are added back in layoutNode and would be doubled
child.layout[leading[mainAxis]] -= getLeadingMargin(child, mainAxis) +
getRelativePosition(child, mainAxis);
child.layout[trailing[mainAxis]] -= getTrailingMargin(child, mainAxis) +
getRelativePosition(child, mainAxis);
child.layout[leading[crossAxis]] -= getLeadingMargin(child, crossAxis) +
getRelativePosition(child, crossAxis);
child.layout[trailing[crossAxis]] -= getTrailingMargin(child, crossAxis) +
getRelativePosition(child, crossAxis);
layoutNode(/*(java)!layoutContext, */child, maxWidth, maxHeight, direction);
}
}
} else if (alignItem !== CSS_ALIGN_FLEX_START) {
// The remaining space between the parent dimensions+padding and child
@@ -1060,7 +1080,7 @@ var computeLayout = (function() {
if (child.lineIndex !== i) {
break;
}
if (!isUndefined(child.layout[dim[crossAxis]])) {
if (isLayoutDimDefined(child, crossAxis)) {
lineHeight = fmaxf(
lineHeight,
child.layout[dim[crossAxis]] + getMarginAxis(child, crossAxis)
@@ -1153,8 +1173,8 @@ var computeLayout = (function() {
for (ii = 0; ii < 2; ii++) {
axis = (ii !== 0) ? CSS_FLEX_DIRECTION_ROW : CSS_FLEX_DIRECTION_COLUMN;
if (!isUndefined(node.layout[dim[axis]]) &&
!isDimDefined(currentAbsoluteChild, axis) &&
if (isLayoutDimDefined(node, axis) &&
!isStyleDimDefined(currentAbsoluteChild, axis) &&
isPosDefined(currentAbsoluteChild, leading[axis]) &&
isPosDefined(currentAbsoluteChild, trailing[axis])) {
currentAbsoluteChild.layout[dim[axis]] = fmaxf(

2
dist/css-layout.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css-layout.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

26
src/Layout.c
View File

@@ -679,8 +679,8 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
float mainDim = leadingPaddingAndBorderMain;
float crossDim = 0;
float maxWidth;
float maxHeight;
float maxWidth = CSS_UNDEFINED;
float maxHeight = CSS_UNDEFINED;
for (i = startLine; i < childCount; ++i) {
child = node->get_child(node->context, i);
child->line_index = linesCount;
@@ -824,7 +824,7 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
if (isSimpleStackCross &&
(child->style.position_type != CSS_POSITION_RELATIVE ||
(alignItem != CSS_ALIGN_STRETCH && alignItem != CSS_ALIGN_FLEX_START) ||
!isLayoutDimDefined(child, crossAxis))) {
(alignItem == CSS_ALIGN_STRETCH && !isCrossDimDefined))) {
isSimpleStackCross = false;
firstComplexCross = i;
}
@@ -1034,15 +1034,31 @@ static void layoutNodeImpl(css_node_t *node, float parentMaxWidth, float parentM
css_align_t alignItem = getAlignItem(node, child);
/*eslint-enable */
if (alignItem == CSS_ALIGN_STRETCH) {
// You can only stretch if the dimension has not already been set
// You can only stretch if the dimension has not already been defined
// previously.
if (!isLayoutDimDefined(child, crossAxis)) {
if (!isStyleDimDefined(child, crossAxis)) {
float dimCrossAxis = child->layout.dimensions[dim[crossAxis]];
child->layout.dimensions[dim[crossAxis]] = fmaxf(
boundAxis(child, crossAxis, containerCrossAxis -
paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
// You never want to go smaller than padding
getPaddingAndBorderAxis(child, crossAxis)
);
// If the size has changed, and this child has children we need to re-layout this child
if (dimCrossAxis != child->layout.dimensions[dim[crossAxis]] && child->children_count > 0) {
// Reset child margins before re-layout as they are added back in layoutNode and would be doubled
child->layout.position[leading[mainAxis]] -= getLeadingMargin(child, mainAxis) +
getRelativePosition(child, mainAxis);
child->layout.position[trailing[mainAxis]] -= getTrailingMargin(child, mainAxis) +
getRelativePosition(child, mainAxis);
child->layout.position[leading[crossAxis]] -= getLeadingMargin(child, crossAxis) +
getRelativePosition(child, crossAxis);
child->layout.position[trailing[crossAxis]] -= getTrailingMargin(child, crossAxis) +
getRelativePosition(child, crossAxis);
layoutNode(child, maxWidth, maxHeight, direction);
}
}
} else if (alignItem != CSS_ALIGN_FLEX_START) {
// The remaining space between the parent dimensions+padding and child

26
src/Layout.js
View File

@@ -604,8 +604,8 @@ var computeLayout = (function() {
var/*float*/ mainDim = leadingPaddingAndBorderMain;
var/*float*/ crossDim = 0;
var/*float*/ maxWidth;
var/*float*/ maxHeight;
var/*float*/ maxWidth = CSS_UNDEFINED;
var/*float*/ maxHeight = CSS_UNDEFINED;
for (i = startLine; i < childCount; ++i) {
child = node.children[i];
child.lineIndex = linesCount;
@@ -749,7 +749,7 @@ var computeLayout = (function() {
if (isSimpleStackCross &&
(getPositionType(child) !== CSS_POSITION_RELATIVE ||
(alignItem !== CSS_ALIGN_STRETCH && alignItem !== CSS_ALIGN_FLEX_START) ||
!isLayoutDimDefined(child, crossAxis))) {
(alignItem == CSS_ALIGN_STRETCH && !isCrossDimDefined))) {
isSimpleStackCross = false;
firstComplexCross = i;
}
@@ -959,15 +959,31 @@ var computeLayout = (function() {
var/*css_align_t*/ alignItem = getAlignItem(node, child);
/*eslint-enable */
if (alignItem === CSS_ALIGN_STRETCH) {
// You can only stretch if the dimension has not already been set
// You can only stretch if the dimension has not already been defined
// previously.
if (!isLayoutDimDefined(child, crossAxis)) {
if (!isStyleDimDefined(child, crossAxis)) {
var/*float*/ dimCrossAxis = child.layout[dim[crossAxis]];
child.layout[dim[crossAxis]] = fmaxf(
boundAxis(child, crossAxis, containerCrossAxis -
paddingAndBorderAxisCross - getMarginAxis(child, crossAxis)),
// You never want to go smaller than padding
getPaddingAndBorderAxis(child, crossAxis)
);
// If the size has changed, and this child has children we need to re-layout this child
if (dimCrossAxis != child.layout[dim[crossAxis]] && child.children.length > 0) {
// Reset child margins before re-layout as they are added back in layoutNode and would be doubled
child.layout[leading[mainAxis]] -= getLeadingMargin(child, mainAxis) +
getRelativePosition(child, mainAxis);
child.layout[trailing[mainAxis]] -= getTrailingMargin(child, mainAxis) +
getRelativePosition(child, mainAxis);
child.layout[leading[crossAxis]] -= getLeadingMargin(child, crossAxis) +
getRelativePosition(child, crossAxis);
child.layout[trailing[crossAxis]] -= getTrailingMargin(child, crossAxis) +
getRelativePosition(child, crossAxis);
layoutNode(/*(java)!layoutContext, */child, maxWidth, maxHeight, direction);
}
}
} else if (alignItem !== CSS_ALIGN_FLEX_START) {
// The remaining space between the parent dimensions+padding and child

196
src/__tests__/Layout-test.c
View File

@@ -7720,6 +7720,202 @@ int main()
test("should correctly progagate size contraints from flexible parents", root_node, root_layout);
}
{
css_node_t *root_node = new_test_css_node();
{
css_node_t *node_0 = root_node;
node_0->style.flex_direction = CSS_FLEX_DIRECTION_ROW;
node_0->style.align_items = CSS_ALIGN_STRETCH;
node_0->style.dimensions[CSS_WIDTH] = 150;
init_css_node_children(node_0, 2);
{
css_node_t *node_1;
node_1 = node_0->get_child(node_0->context, 0);
node_1->style.flex_direction = CSS_FLEX_DIRECTION_ROW;
node_1->style.margin[CSS_LEFT] = 10;
node_1->style.margin[CSS_TOP] = 10;
init_css_node_children(node_1, 1);
{
css_node_t *node_2;
node_2 = node_1->get_child(node_1->context, 0);
node_2->style.flex_direction = CSS_FLEX_DIRECTION_ROW;
init_css_node_children(node_2, 1);
{
css_node_t *node_3;
node_3 = node_2->get_child(node_2->context, 0);
node_3->style.align_self = CSS_ALIGN_CENTER;
}
}
node_1 = node_0->get_child(node_0->context, 1);
node_1->style.dimensions[CSS_HEIGHT] = 150;
}
}
css_node_t *root_layout = new_test_css_node();
{
css_node_t *node_0 = root_layout;
node_0->layout.position[CSS_TOP] = 0;
node_0->layout.position[CSS_LEFT] = 0;
node_0->layout.dimensions[CSS_WIDTH] = 150;
node_0->layout.dimensions[CSS_HEIGHT] = 150;
init_css_node_children(node_0, 2);
{
css_node_t *node_1;
node_1 = node_0->get_child(node_0->context, 0);
node_1->layout.position[CSS_TOP] = 10;
node_1->layout.position[CSS_LEFT] = 10;
node_1->layout.dimensions[CSS_WIDTH] = 0;
node_1->layout.dimensions[CSS_HEIGHT] = 140;
init_css_node_children(node_1, 1);
{
css_node_t *node_2;
node_2 = node_1->get_child(node_1->context, 0);
node_2->layout.position[CSS_TOP] = 0;
node_2->layout.position[CSS_LEFT] = 0;
node_2->layout.dimensions[CSS_WIDTH] = 0;
node_2->layout.dimensions[CSS_HEIGHT] = 140;
init_css_node_children(node_2, 1);
{
css_node_t *node_3;
node_3 = node_2->get_child(node_2->context, 0);
node_3->layout.position[CSS_TOP] = 70;
node_3->layout.position[CSS_LEFT] = 0;
node_3->layout.dimensions[CSS_WIDTH] = 0;
node_3->layout.dimensions[CSS_HEIGHT] = 0;
}
}
node_1 = node_0->get_child(node_0->context, 1);
node_1->layout.position[CSS_TOP] = 0;
node_1->layout.position[CSS_LEFT] = 10;
node_1->layout.dimensions[CSS_WIDTH] = 0;
node_1->layout.dimensions[CSS_HEIGHT] = 150;
}
}
test("should layout content of an item which is stretched late", root_node, root_layout);
}
{
css_node_t *root_node = new_test_css_node();
{
css_node_t *node_0 = root_node;
init_css_node_children(node_0, 2);
{
css_node_t *node_1;
node_1 = node_0->get_child(node_0->context, 0);
init_css_node_children(node_1, 1);
{
css_node_t *node_2;
node_2 = node_1->get_child(node_1->context, 0);
node_2->style.dimensions[CSS_WIDTH] = 200;
node_2->style.dimensions[CSS_HEIGHT] = 200;
}
node_1 = node_0->get_child(node_0->context, 1);
node_1->style.margin[CSS_LEFT] = 10;
node_1->style.margin[CSS_TOP] = 10;
init_css_node_children(node_1, 1);
{
css_node_t *node_2;
node_2 = node_1->get_child(node_1->context, 0);
}
}
}
css_node_t *root_layout = new_test_css_node();
{
css_node_t *node_0 = root_layout;
node_0->layout.position[CSS_TOP] = 0;
node_0->layout.position[CSS_LEFT] = 0;
node_0->layout.dimensions[CSS_WIDTH] = 200;
node_0->layout.dimensions[CSS_HEIGHT] = 210;
init_css_node_children(node_0, 2);
{
css_node_t *node_1;
node_1 = node_0->get_child(node_0->context, 0);
node_1->layout.position[CSS_TOP] = 0;
node_1->layout.position[CSS_LEFT] = 0;
node_1->layout.dimensions[CSS_WIDTH] = 200;
node_1->layout.dimensions[CSS_HEIGHT] = 200;
init_css_node_children(node_1, 1);
{
css_node_t *node_2;
node_2 = node_1->get_child(node_1->context, 0);
node_2->layout.position[CSS_TOP] = 0;
node_2->layout.position[CSS_LEFT] = 0;
node_2->layout.dimensions[CSS_WIDTH] = 200;
node_2->layout.dimensions[CSS_HEIGHT] = 200;
}
node_1 = node_0->get_child(node_0->context, 1);
node_1->layout.position[CSS_TOP] = 210;
node_1->layout.position[CSS_LEFT] = 10;
node_1->layout.dimensions[CSS_WIDTH] = 190;
node_1->layout.dimensions[CSS_HEIGHT] = 0;
init_css_node_children(node_1, 1);
{
css_node_t *node_2;
node_2 = node_1->get_child(node_1->context, 0);
node_2->layout.position[CSS_TOP] = 0;
node_2->layout.position[CSS_LEFT] = 0;
node_2->layout.dimensions[CSS_WIDTH] = 190;
node_2->layout.dimensions[CSS_HEIGHT] = 0;
}
}
}
test("should layout items whose positioning is determined by sibling tree branches", root_node, root_layout);
}
{
css_node_t *root_node = new_test_css_node();
{
css_node_t *node_0 = root_node;
node_0->style.flex_direction = CSS_FLEX_DIRECTION_ROW;
init_css_node_children(node_0, 3);
{
css_node_t *node_1;
node_1 = node_0->get_child(node_0->context, 0);
node_1->style.align_self = CSS_ALIGN_FLEX_START;
node_1->style.margin[CSS_LEFT] = 10;
node_1->style.margin[CSS_TOP] = 10;
node_1 = node_0->get_child(node_0->context, 1);
node_1->style.align_self = CSS_ALIGN_STRETCH;
node_1->style.dimensions[CSS_WIDTH] = 1;
node_1 = node_0->get_child(node_0->context, 2);
node_1->style.dimensions[CSS_HEIGHT] = 150;
}
}
css_node_t *root_layout = new_test_css_node();
{
css_node_t *node_0 = root_layout;
node_0->layout.position[CSS_TOP] = 0;
node_0->layout.position[CSS_LEFT] = 0;
node_0->layout.dimensions[CSS_WIDTH] = 11;
node_0->layout.dimensions[CSS_HEIGHT] = 150;
init_css_node_children(node_0, 3);
{
css_node_t *node_1;
node_1 = node_0->get_child(node_0->context, 0);
node_1->layout.position[CSS_TOP] = 10;
node_1->layout.position[CSS_LEFT] = 10;
node_1->layout.dimensions[CSS_WIDTH] = 0;
node_1->layout.dimensions[CSS_HEIGHT] = 0;
node_1 = node_0->get_child(node_0->context, 1);
node_1->layout.position[CSS_TOP] = 0;
node_1->layout.position[CSS_LEFT] = 10;
node_1->layout.dimensions[CSS_WIDTH] = 1;
node_1->layout.dimensions[CSS_HEIGHT] = 150;
node_1 = node_0->get_child(node_0->context, 2);
node_1->layout.position[CSS_TOP] = 0;
node_1->layout.position[CSS_LEFT] = 11;
node_1->layout.dimensions[CSS_WIDTH] = 0;
node_1->layout.dimensions[CSS_HEIGHT] = 150;
}
}
test("should layout child whose cross axis is undefined and whose alignSelf is stretch", root_node, root_layout);
}
{
css_node_t *root_node = new_test_css_node();
{

58
src/__tests__/Layout-test.js
View File

@@ -2401,6 +2401,64 @@ describe('Layout', function() {
]}
);
});
// https://github.com/facebook/css-layout/issues/127
it('should layout content of an item which is stretched late', function() {
testLayout(
{style: {flexDirection: 'row', alignItems: 'stretch', width: 150}, children: [
{style: {flexDirection: 'row', marginTop: 10, marginLeft: 10}, children: [
{style: {flexDirection: 'row'}, children: [
{style: {alignSelf: 'center'}}
]}
]},
{style: { height: 150}}
]},
{width: 150, height: 150, top: 0, left: 0, children: [
{width: 0, height: 140, top: 10, left: 10, children: [
{width: 0, height: 140, top: 0, left: 0, children: [
{width: 0, height: 0, top: 70, left: 0}
]}
]},
{width: 0, height: 150, top: 0, left: 10}
]}
);
});
it('should layout items whose positioning is determined by sibling tree branches', function() {
testLayout(
{style: {}, children: [
{style: {}, children: [
{style: {width: 200, height: 200}}
]},
{style: {marginTop: 10, marginLeft: 10}, children: [
{style: {}}
]}
]},
{width: 200, height: 210, top: 0, left: 0, children: [
{width: 200, height: 200, top: 0, left: 0, children: [
{width: 200, height: 200, top: 0, left: 0}
]},
{width: 190, height: 0, top: 210, left: 10, children: [
{width: 190, height: 0, top: 0, left: 0}
]}
]}
);
});
it('should layout child whose cross axis is undefined and whose alignSelf is stretch', function() {
testLayout(
{style: {flexDirection: 'row'}, children: [
{style: {marginTop: 10, marginLeft: 10, alignSelf: 'flex-start'}},
{style: {width: 1, alignSelf: 'stretch'}},
{style: {height: 150}}
]},
{width: 11, height: 150, top: 0, left: 0, children: [
{width: 0, height: 0, top: 10, left: 10},
{width: 1, height: 150, top: 0, left: 10},
{width: 0, height: 150, top: 0, left: 11}
]}
);
});
});
describe('Layout alignContent', function() {

10
src/csharp/Facebook.CSSLayout.Tests/LayoutCachingTest.cs
View File

@@ -88,7 +88,7 @@ namespace Facebook.CSSLayout.Tests
Assert.IsTrue(c0c0.HasNewLayout);
Assert.IsTrue(c1.HasNewLayout);
Assert.IsFalse(c1c0.HasNewLayout);
Assert.IsTrue(c1c0.HasNewLayout);
}
[Test]
@@ -136,7 +136,7 @@ namespace Facebook.CSSLayout.Tests
Assert.IsTrue(c1.HasNewLayout);
Assert.IsTrue(c0.HasNewLayout);
Assert.IsFalse(c0c0.HasNewLayout);
Assert.IsTrue(c0c0.HasNewLayout);
}
[Test]
@@ -155,7 +155,7 @@ namespace Facebook.CSSLayout.Tests
root.calculateLayout();
markLayoutAppliedForTree(root);
c0.Height = 200;
c0.Width = 200;
root.calculateLayout();
Assert.IsTrue(root.HasNewLayout);
@@ -163,7 +163,7 @@ namespace Facebook.CSSLayout.Tests
Assert.IsTrue(c0c0.HasNewLayout);
Assert.IsTrue(c1.HasNewLayout);
Assert.IsFalse(c1c0.HasNewLayout);
Assert.IsTrue(c1c0.HasNewLayout);
}
[Test]
@@ -234,7 +234,7 @@ namespace Facebook.CSSLayout.Tests
Assert.IsTrue(c1.HasNewLayout);
Assert.IsTrue(c0.HasNewLayout);
Assert.IsFalse(c0c0.HasNewLayout);
Assert.IsTrue(c0c0.HasNewLayout);
}
}
}

202
src/csharp/Facebook.CSSLayout.Tests/LayoutEngineTest.cs
View File

@@ -8185,6 +8185,208 @@ public class LayoutEngineTest
[Test]
public void TestCase184()
{
TestCSSNode root_node = new TestCSSNode();
{
TestCSSNode node_0 = root_node;
node_0.style.flexDirection = CSSFlexDirection.Row;
node_0.style.alignItems = CSSAlign.Stretch;
node_0.style.dimensions[DIMENSION_WIDTH] = 150;
addChildren(node_0, 2);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.style.flexDirection = CSSFlexDirection.Row;
node_1.setMargin(Spacing.LEFT, 10);
node_1.setMargin(Spacing.TOP, 10);
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.style.flexDirection = CSSFlexDirection.Row;
addChildren(node_2, 1);
{
TestCSSNode node_3;
node_3 = node_2.getChildAt(0);
node_3.style.alignSelf = CSSAlign.Center;
}
}
node_1 = node_0.getChildAt(1);
node_1.style.dimensions[DIMENSION_HEIGHT] = 150;
}
}
TestCSSNode root_layout = new TestCSSNode();
{
TestCSSNode node_0 = root_layout;
node_0.layout.position[POSITION_TOP] = 0;
node_0.layout.position[POSITION_LEFT] = 0;
node_0.layout.dimensions[DIMENSION_WIDTH] = 150;
node_0.layout.dimensions[DIMENSION_HEIGHT] = 150;
addChildren(node_0, 2);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.layout.position[POSITION_TOP] = 10;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 0;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 140;
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.layout.position[POSITION_TOP] = 0;
node_2.layout.position[POSITION_LEFT] = 0;
node_2.layout.dimensions[DIMENSION_WIDTH] = 0;
node_2.layout.dimensions[DIMENSION_HEIGHT] = 140;
addChildren(node_2, 1);
{
TestCSSNode node_3;
node_3 = node_2.getChildAt(0);
node_3.layout.position[POSITION_TOP] = 70;
node_3.layout.position[POSITION_LEFT] = 0;
node_3.layout.dimensions[DIMENSION_WIDTH] = 0;
node_3.layout.dimensions[DIMENSION_HEIGHT] = 0;
}
}
node_1 = node_0.getChildAt(1);
node_1.layout.position[POSITION_TOP] = 0;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 0;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 150;
}
}
test("should layout content of an item which is stretched late", root_node, root_layout);
}
[Test]
public void TestCase185()
{
TestCSSNode root_node = new TestCSSNode();
{
TestCSSNode node_0 = root_node;
addChildren(node_0, 2);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.style.dimensions[DIMENSION_WIDTH] = 200;
node_2.style.dimensions[DIMENSION_HEIGHT] = 200;
}
node_1 = node_0.getChildAt(1);
node_1.setMargin(Spacing.LEFT, 10);
node_1.setMargin(Spacing.TOP, 10);
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
}
}
}
TestCSSNode root_layout = new TestCSSNode();
{
TestCSSNode node_0 = root_layout;
node_0.layout.position[POSITION_TOP] = 0;
node_0.layout.position[POSITION_LEFT] = 0;
node_0.layout.dimensions[DIMENSION_WIDTH] = 200;
node_0.layout.dimensions[DIMENSION_HEIGHT] = 210;
addChildren(node_0, 2);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.layout.position[POSITION_TOP] = 0;
node_1.layout.position[POSITION_LEFT] = 0;
node_1.layout.dimensions[DIMENSION_WIDTH] = 200;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 200;
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.layout.position[POSITION_TOP] = 0;
node_2.layout.position[POSITION_LEFT] = 0;
node_2.layout.dimensions[DIMENSION_WIDTH] = 200;
node_2.layout.dimensions[DIMENSION_HEIGHT] = 200;
}
node_1 = node_0.getChildAt(1);
node_1.layout.position[POSITION_TOP] = 210;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 190;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 0;
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.layout.position[POSITION_TOP] = 0;
node_2.layout.position[POSITION_LEFT] = 0;
node_2.layout.dimensions[DIMENSION_WIDTH] = 190;
node_2.layout.dimensions[DIMENSION_HEIGHT] = 0;
}
}
}
test("should layout items whose positioning is determined by sibling tree branches", root_node, root_layout);
}
[Test]
public void TestCase186()
{
TestCSSNode root_node = new TestCSSNode();
{
TestCSSNode node_0 = root_node;
node_0.style.flexDirection = CSSFlexDirection.Row;
addChildren(node_0, 3);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.style.alignSelf = CSSAlign.FlexStart;
node_1.setMargin(Spacing.LEFT, 10);
node_1.setMargin(Spacing.TOP, 10);
node_1 = node_0.getChildAt(1);
node_1.style.alignSelf = CSSAlign.Stretch;
node_1.style.dimensions[DIMENSION_WIDTH] = 1;
node_1 = node_0.getChildAt(2);
node_1.style.dimensions[DIMENSION_HEIGHT] = 150;
}
}
TestCSSNode root_layout = new TestCSSNode();
{
TestCSSNode node_0 = root_layout;
node_0.layout.position[POSITION_TOP] = 0;
node_0.layout.position[POSITION_LEFT] = 0;
node_0.layout.dimensions[DIMENSION_WIDTH] = 11;
node_0.layout.dimensions[DIMENSION_HEIGHT] = 150;
addChildren(node_0, 3);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.layout.position[POSITION_TOP] = 10;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 0;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 0;
node_1 = node_0.getChildAt(1);
node_1.layout.position[POSITION_TOP] = 0;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 1;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 150;
node_1 = node_0.getChildAt(2);
node_1.layout.position[POSITION_TOP] = 0;
node_1.layout.position[POSITION_LEFT] = 11;
node_1.layout.dimensions[DIMENSION_WIDTH] = 0;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 150;
}
}
test("should layout child whose cross axis is undefined and whose alignSelf is stretch", root_node, root_layout);
}
[Test]
public void TestCase187()
{
TestCSSNode root_node = new TestCSSNode();
{

26
src/csharp/Facebook.CSSLayout/LayoutEngine.cs
View File

@@ -404,8 +404,8 @@ namespace Facebook.CSSLayout
float mainDim = leadingPaddingAndBorderMain;
float crossDim = 0;
float maxWidth;
float maxHeight;
float maxWidth = CSSConstants.Undefined;
float maxHeight = CSSConstants.Undefined;
for (i = startLine; i < childCount; ++i) {
child = node.getChildAt(i);
child.lineIndex = linesCount;
@@ -549,7 +549,7 @@ namespace Facebook.CSSLayout
if (isSimpleStackCross &&
(child.style.positionType != CSSPositionType.Relative ||
(alignItem != CSSAlign.Stretch && alignItem != CSSAlign.FlexStart) ||
!(!float.IsNaN(child.layout.dimensions[dim[crossAxis]]) && child.layout.dimensions[dim[crossAxis]] >= 0.0))) {
(alignItem == CSSAlign.Stretch && !isCrossDimDefined))) {
isSimpleStackCross = false;
firstComplexCross = i;
}
@@ -759,15 +759,31 @@ namespace Facebook.CSSLayout
CSSAlign alignItem = getAlignItem(node, child);
/*eslint-enable */
if (alignItem == CSSAlign.Stretch) {
// You can only stretch if the dimension has not already been set
// You can only stretch if the dimension has not already been defined
// previously.
if (!(!float.IsNaN(child.layout.dimensions[dim[crossAxis]]) && child.layout.dimensions[dim[crossAxis]] >= 0.0)) {
if (!(!float.IsNaN(child.style.dimensions[dim[crossAxis]]) && child.style.dimensions[dim[crossAxis]] >= 0.0)) {
float dimCrossAxis = child.layout.dimensions[dim[crossAxis]];
child.layout.dimensions[dim[crossAxis]] = Math.Max(
boundAxis(child, crossAxis, containerCrossAxis -
paddingAndBorderAxisCross - (child.style.margin.getWithFallback(leadingSpacing[crossAxis], leading[crossAxis]) + child.style.margin.getWithFallback(trailingSpacing[crossAxis], trailing[crossAxis]))),
// You never want to go smaller than padding
((child.style.padding.getWithFallback(leadingSpacing[crossAxis], leading[crossAxis]) + child.style.border.getWithFallback(leadingSpacing[crossAxis], leading[crossAxis])) + (child.style.padding.getWithFallback(trailingSpacing[crossAxis], trailing[crossAxis]) + child.style.border.getWithFallback(trailingSpacing[crossAxis], trailing[crossAxis])))
);
// If the size has changed, and this child has children we need to re-layout this child
if (dimCrossAxis != child.layout.dimensions[dim[crossAxis]] && child.getChildCount() > 0) {
// Reset child margins before re-layout as they are added back in layoutNode and would be doubled
child.layout.position[leading[mainAxis]] -= child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) +
getRelativePosition(child, mainAxis);
child.layout.position[trailing[mainAxis]] -= child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) +
getRelativePosition(child, mainAxis);
child.layout.position[leading[crossAxis]] -= child.style.margin.getWithFallback(leadingSpacing[crossAxis], leading[crossAxis]) +
getRelativePosition(child, crossAxis);
child.layout.position[trailing[crossAxis]] -= child.style.margin.getWithFallback(trailingSpacing[crossAxis], trailing[crossAxis]) +
getRelativePosition(child, crossAxis);
layoutNode(layoutContext, child, maxWidth, maxHeight, direction);
}
}
} else if (alignItem != CSSAlign.FlexStart) {
// The remaining space between the parent dimensions+padding and child

26
src/java/src/com/facebook/csslayout/LayoutEngine.java
View File

@@ -380,8 +380,8 @@ public class LayoutEngine {
float mainDim = leadingPaddingAndBorderMain;
float crossDim = 0;
float maxWidth;
float maxHeight;
float maxWidth = CSSConstants.UNDEFINED;
float maxHeight = CSSConstants.UNDEFINED;
for (i = startLine; i < childCount; ++i) {
child = node.getChildAt(i);
child.lineIndex = linesCount;
@@ -525,7 +525,7 @@ public class LayoutEngine {
if (isSimpleStackCross &&
(child.style.positionType != CSSPositionType.RELATIVE ||
(alignItem != CSSAlign.STRETCH && alignItem != CSSAlign.FLEX_START) ||
!(!Float.isNaN(child.layout.dimensions[dim[crossAxis]]) && child.layout.dimensions[dim[crossAxis]] >= 0.0))) {
(alignItem == CSSAlign.STRETCH && !isCrossDimDefined))) {
isSimpleStackCross = false;
firstComplexCross = i;
}
@@ -735,15 +735,31 @@ public class LayoutEngine {
CSSAlign alignItem = getAlignItem(node, child);
/*eslint-enable */
if (alignItem == CSSAlign.STRETCH) {
// You can only stretch if the dimension has not already been set
// You can only stretch if the dimension has not already been defined
// previously.
if (!(!Float.isNaN(child.layout.dimensions[dim[crossAxis]]) && child.layout.dimensions[dim[crossAxis]] >= 0.0)) {
if (!(!Float.isNaN(child.style.dimensions[dim[crossAxis]]) && child.style.dimensions[dim[crossAxis]] >= 0.0)) {
float dimCrossAxis = child.layout.dimensions[dim[crossAxis]];
child.layout.dimensions[dim[crossAxis]] = Math.max(
boundAxis(child, crossAxis, containerCrossAxis -
paddingAndBorderAxisCross - (child.style.margin.getWithFallback(leadingSpacing[crossAxis], leading[crossAxis]) + child.style.margin.getWithFallback(trailingSpacing[crossAxis], trailing[crossAxis]))),
// You never want to go smaller than padding
((child.style.padding.getWithFallback(leadingSpacing[crossAxis], leading[crossAxis]) + child.style.border.getWithFallback(leadingSpacing[crossAxis], leading[crossAxis])) + (child.style.padding.getWithFallback(trailingSpacing[crossAxis], trailing[crossAxis]) + child.style.border.getWithFallback(trailingSpacing[crossAxis], trailing[crossAxis])))
);
// If the size has changed, and this child has children we need to re-layout this child
if (dimCrossAxis != child.layout.dimensions[dim[crossAxis]] && child.getChildCount() > 0) {
// Reset child margins before re-layout as they are added back in layoutNode and would be doubled
child.layout.position[leading[mainAxis]] -= child.style.margin.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) +
getRelativePosition(child, mainAxis);
child.layout.position[trailing[mainAxis]] -= child.style.margin.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) +
getRelativePosition(child, mainAxis);
child.layout.position[leading[crossAxis]] -= child.style.margin.getWithFallback(leadingSpacing[crossAxis], leading[crossAxis]) +
getRelativePosition(child, crossAxis);
child.layout.position[trailing[crossAxis]] -= child.style.margin.getWithFallback(trailingSpacing[crossAxis], trailing[crossAxis]) +
getRelativePosition(child, crossAxis);
layoutNode(layoutContext, child, maxWidth, maxHeight, direction);
}
}
} else if (alignItem != CSSAlign.FLEX_START) {
// The remaining space between the parent dimensions+padding and child

8
src/java/tests/com/facebook/csslayout/LayoutCachingTest.java
View File

@@ -83,7 +83,7 @@ public class LayoutCachingTest {
assertTrue(c0c0.hasNewLayout());
assertTrue(c1.hasNewLayout());
assertFalse(c1c0.hasNewLayout());
assertTrue(c1c0.hasNewLayout());
}
@Test
@@ -131,7 +131,7 @@ public class LayoutCachingTest {
assertTrue(c1.hasNewLayout());
assertTrue(c0.hasNewLayout());
assertFalse(c0c0.hasNewLayout());
assertTrue(c0c0.hasNewLayout());
}
@Test
@@ -158,7 +158,7 @@ public class LayoutCachingTest {
assertTrue(c0c0.hasNewLayout());
assertTrue(c1.hasNewLayout());
assertFalse(c1c0.hasNewLayout());
assertTrue(c1c0.hasNewLayout());
}
@Test
@@ -235,6 +235,6 @@ public class LayoutCachingTest {
assertTrue(c1.hasNewLayout());
assertTrue(c0.hasNewLayout());
assertFalse(c0c0.hasNewLayout());
assertTrue(c0c0.hasNewLayout());
}
}

202
src/java/tests/com/facebook/csslayout/LayoutEngineTest.java
View File

@@ -8188,6 +8188,208 @@ public class LayoutEngineTest {
@Test
public void testCase184()
{
TestCSSNode root_node = new TestCSSNode();
{
TestCSSNode node_0 = root_node;
node_0.style.flexDirection = CSSFlexDirection.ROW;
node_0.style.alignItems = CSSAlign.STRETCH;
node_0.style.dimensions[DIMENSION_WIDTH] = 150;
addChildren(node_0, 2);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.style.flexDirection = CSSFlexDirection.ROW;
node_1.setMargin(Spacing.LEFT, 10);
node_1.setMargin(Spacing.TOP, 10);
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.style.flexDirection = CSSFlexDirection.ROW;
addChildren(node_2, 1);
{
TestCSSNode node_3;
node_3 = node_2.getChildAt(0);
node_3.style.alignSelf = CSSAlign.CENTER;
}
}
node_1 = node_0.getChildAt(1);
node_1.style.dimensions[DIMENSION_HEIGHT] = 150;
}
}
TestCSSNode root_layout = new TestCSSNode();
{
TestCSSNode node_0 = root_layout;
node_0.layout.position[POSITION_TOP] = 0;
node_0.layout.position[POSITION_LEFT] = 0;
node_0.layout.dimensions[DIMENSION_WIDTH] = 150;
node_0.layout.dimensions[DIMENSION_HEIGHT] = 150;
addChildren(node_0, 2);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.layout.position[POSITION_TOP] = 10;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 0;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 140;
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.layout.position[POSITION_TOP] = 0;
node_2.layout.position[POSITION_LEFT] = 0;
node_2.layout.dimensions[DIMENSION_WIDTH] = 0;
node_2.layout.dimensions[DIMENSION_HEIGHT] = 140;
addChildren(node_2, 1);
{
TestCSSNode node_3;
node_3 = node_2.getChildAt(0);
node_3.layout.position[POSITION_TOP] = 70;
node_3.layout.position[POSITION_LEFT] = 0;
node_3.layout.dimensions[DIMENSION_WIDTH] = 0;
node_3.layout.dimensions[DIMENSION_HEIGHT] = 0;
}
}
node_1 = node_0.getChildAt(1);
node_1.layout.position[POSITION_TOP] = 0;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 0;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 150;
}
}
test("should layout content of an item which is stretched late", root_node, root_layout);
}
@Test
public void testCase185()
{
TestCSSNode root_node = new TestCSSNode();
{
TestCSSNode node_0 = root_node;
addChildren(node_0, 2);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.style.dimensions[DIMENSION_WIDTH] = 200;
node_2.style.dimensions[DIMENSION_HEIGHT] = 200;
}
node_1 = node_0.getChildAt(1);
node_1.setMargin(Spacing.LEFT, 10);
node_1.setMargin(Spacing.TOP, 10);
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
}
}
}
TestCSSNode root_layout = new TestCSSNode();
{
TestCSSNode node_0 = root_layout;
node_0.layout.position[POSITION_TOP] = 0;
node_0.layout.position[POSITION_LEFT] = 0;
node_0.layout.dimensions[DIMENSION_WIDTH] = 200;
node_0.layout.dimensions[DIMENSION_HEIGHT] = 210;
addChildren(node_0, 2);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.layout.position[POSITION_TOP] = 0;
node_1.layout.position[POSITION_LEFT] = 0;
node_1.layout.dimensions[DIMENSION_WIDTH] = 200;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 200;
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.layout.position[POSITION_TOP] = 0;
node_2.layout.position[POSITION_LEFT] = 0;
node_2.layout.dimensions[DIMENSION_WIDTH] = 200;
node_2.layout.dimensions[DIMENSION_HEIGHT] = 200;
}
node_1 = node_0.getChildAt(1);
node_1.layout.position[POSITION_TOP] = 210;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 190;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 0;
addChildren(node_1, 1);
{
TestCSSNode node_2;
node_2 = node_1.getChildAt(0);
node_2.layout.position[POSITION_TOP] = 0;
node_2.layout.position[POSITION_LEFT] = 0;
node_2.layout.dimensions[DIMENSION_WIDTH] = 190;
node_2.layout.dimensions[DIMENSION_HEIGHT] = 0;
}
}
}
test("should layout items whose positioning is determined by sibling tree branches", root_node, root_layout);
}
@Test
public void testCase186()
{
TestCSSNode root_node = new TestCSSNode();
{
TestCSSNode node_0 = root_node;
node_0.style.flexDirection = CSSFlexDirection.ROW;
addChildren(node_0, 3);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.style.alignSelf = CSSAlign.FLEX_START;
node_1.setMargin(Spacing.LEFT, 10);
node_1.setMargin(Spacing.TOP, 10);
node_1 = node_0.getChildAt(1);
node_1.style.alignSelf = CSSAlign.STRETCH;
node_1.style.dimensions[DIMENSION_WIDTH] = 1;
node_1 = node_0.getChildAt(2);
node_1.style.dimensions[DIMENSION_HEIGHT] = 150;
}
}
TestCSSNode root_layout = new TestCSSNode();
{
TestCSSNode node_0 = root_layout;
node_0.layout.position[POSITION_TOP] = 0;
node_0.layout.position[POSITION_LEFT] = 0;
node_0.layout.dimensions[DIMENSION_WIDTH] = 11;
node_0.layout.dimensions[DIMENSION_HEIGHT] = 150;
addChildren(node_0, 3);
{
TestCSSNode node_1;
node_1 = node_0.getChildAt(0);
node_1.layout.position[POSITION_TOP] = 10;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 0;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 0;
node_1 = node_0.getChildAt(1);
node_1.layout.position[POSITION_TOP] = 0;
node_1.layout.position[POSITION_LEFT] = 10;
node_1.layout.dimensions[DIMENSION_WIDTH] = 1;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 150;
node_1 = node_0.getChildAt(2);
node_1.layout.position[POSITION_TOP] = 0;
node_1.layout.position[POSITION_LEFT] = 11;
node_1.layout.dimensions[DIMENSION_WIDTH] = 0;
node_1.layout.dimensions[DIMENSION_HEIGHT] = 150;
}
}
test("should layout child whose cross axis is undefined and whose alignSelf is stretch", root_node, root_layout);
}
@Test
public void testCase187()
{
TestCSSNode root_node = new TestCSSNode();
{