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

BREAKING - Fix unconstraint sizing in main axis

Browse Source 
Summary:
@public
This fixes measuring of items in the main axis of a container. Previously items were in a lot of cases measured with UNSPECIFIED instead of AT_MOST. This was to support scrolling containers. The correct way to handle scrolling containers is to instead provide them with their own overflow value to activate this behavior. This is also similar to how the web works.

This is a breaking change. Most of your layouts will continue to function as before however some of them might not. Typically this is due to having a `flex: 1` style where it is currently a no-op due to being measured with an undefined size but after this change it may collapse your component to take zero size due to the implicit `flexBasis: 0` now being correctly treated. Removing the bad `flex: 1` style or changing it to `flexGrow: 1` should solve most if not all layout issues your see after this diff.

Reviewed By: majak

Differential Revision: D3876927

fbshipit-source-id: 81ea1c9d6574dd4564a3333f1b3617cf84b4022f
This commit is contained in:
Emil Sjolander
2016-09-26 06:11:49 -07:00
committed by Facebook Github Bot 0
parent dba5faabb2
commit 15d5cb0169
7 changed files with 329 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
CSSLayout/CSSLayout.c
View File

@@ -183,6 +183,7 @@ void CSSNodeInit(const CSSNodeRef node) {
// Such that the comparison is always going to be false
node->layout.lastParentDirection = (CSSDirection) -1;
node->layout.nextCachedMeasurementsIndex = 0;
node->layout.computedFlexBasis = CSSUndefined;
node->layout.measuredDimensions[CSSDimensionWidth] = CSSUndefined;
node->layout.measuredDimensions[CSSDimensionHeight] = CSSUndefined;
@@ -193,6 +194,7 @@ void CSSNodeInit(const CSSNodeRef node) {
void _CSSNodeMarkDirty(const CSSNodeRef node) {
if (!node->isDirty) {
node->isDirty = true;
node->layout.computedFlexBasis = CSSUndefined;
if (node->parent) {
_CSSNodeMarkDirty(node->parent);
}
@@ -451,6 +453,8 @@ _CSSNodePrint(const CSSNodeRef node, const CSSPrintOptions options, const uint32
printf("overflow: 'hidden', ");
} else if (node->style.overflow == CSSOverflowVisible) {
printf("overflow: 'visible', ");
} else if (node->style.overflow == CSSOverflowScroll) {
printf("overflow: 'scroll', ");
}
if (eqFour(node->style.margin)) {
@@ -1117,8 +1121,10 @@ static void layoutNodeImpl(const CSSNodeRef node,
getPaddingAndBorderAxis(child, CSSFlexDirectionColumn));
} else if (!CSSValueIsUndefined(child->style.flexBasis) &&
!CSSValueIsUndefined(availableInnerMainDim)) {
child->layout.computedFlexBasis =
fmaxf(child->style.flexBasis, getPaddingAndBorderAxis(child, mainAxis));
if (CSSValueIsUndefined(child->layout.computedFlexBasis)) {
child->layout.computedFlexBasis =
fmaxf(child->style.flexBasis, getPaddingAndBorderAxis(child, mainAxis));
}
} else {
// Compute the flex basis and hypothetical main size (i.e. the clamped
// flex basis).
@@ -1138,21 +1144,19 @@ static void layoutNodeImpl(const CSSNodeRef node,
childHeightMeasureMode = CSSMeasureModeExactly;
}
// According to the spec, if the main size is not definite and the
// child's inline axis is parallel to the main axis (i.e. it's
// horizontal), the child should be sized using "UNDEFINED" in
// the main size. Otherwise use "AT_MOST" in the cross axis.
if (!isMainAxisRow && CSSValueIsUndefined(childWidth) &&
!CSSValueIsUndefined(availableInnerWidth)) {
childWidth = availableInnerWidth;
childWidthMeasureMode = CSSMeasureModeAtMost;
}
// The W3C spec doesn't say anything about the 'overflow' property,
// but all major browsers appear to implement the following logic.
if (node->style.overflow == CSSOverflowHidden) {
if (isMainAxisRow && CSSValueIsUndefined(childHeight) &&
!CSSValueIsUndefined(availableInnerHeight)) {
if ((!isMainAxisRow && node->style.overflow == CSSOverflowScroll) ||
node->style.overflow != CSSOverflowScroll) {
if (CSSValueIsUndefined(childWidth) && !CSSValueIsUndefined(availableInnerWidth)) {
childWidth = availableInnerWidth;
childWidthMeasureMode = CSSMeasureModeAtMost;
}
}
if ((isMainAxisRow && node->style.overflow == CSSOverflowScroll) ||
node->style.overflow != CSSOverflowScroll) {
if (CSSValueIsUndefined(childHeight) && !CSSValueIsUndefined(availableInnerHeight)) {
childHeight = availableInnerHeight;
childHeightMeasureMode = CSSMeasureModeAtMost;
}