From 70b989eb67ce7d1e1a8ba3022388093b0a956aeb Mon Sep 17 00:00:00 2001 From: Emil Sjolander Date: Fri, 8 Jul 2016 14:47:31 -0700 Subject: [PATCH] Revert land of css-layout PR #199 Reviewed By: bestander Differential Revision: D3536627 fbshipit-source-id: e89b2a5fd38d1228bd8526c46bb26c594947837a --- React/Layout/Layout.c | 89 +++++++++---------- React/Layout/README | 2 +- .../com/facebook/csslayout/LayoutEngine.java | 89 +++++++++---------- .../main/java/com/facebook/csslayout/README | 2 +- 4 files changed, 86 insertions(+), 96 deletions(-) diff --git a/React/Layout/Layout.c b/React/Layout/Layout.c index d9bc697fc9..22412a8d5c 100644 --- a/React/Layout/Layout.c +++ b/React/Layout/Layout.c @@ -7,7 +7,7 @@ */ // NOTE: this file is auto-copied from https://github.com/facebook/css-layout -// @generated SignedSource<<8af322a110307b3277db5b00573da822>> +// @generated SignedSource<<484d0d17453521463896ce24d946412b>> #include @@ -829,61 +829,56 @@ static void layoutNodeImpl(css_node_t* node, float availableWidth, float availab child->layout.flex_basis = fmaxf(0, getPaddingAndBorderAxis(child, mainAxis)); } else { + // Compute the flex basis and hypothetical main size (i.e. the clamped flex basis). childWidth = CSS_UNDEFINED; childHeight = CSS_UNDEFINED; childWidthMeasureMode = CSS_MEASURE_MODE_UNDEFINED; childHeightMeasureMode = CSS_MEASURE_MODE_UNDEFINED; - // Main axis - if (isMainAxisRow) { - if (widthMeasureMode == CSS_MEASURE_MODE_UNDEFINED || isUndefined(availableInnerMainDim)) { - childWidth = CSS_UNDEFINED; - childWidthMeasureMode = CSS_MEASURE_MODE_UNDEFINED; - } else { - childWidth = availableInnerMainDim; - childWidthMeasureMode = CSS_MEASURE_MODE_AT_MOST; - } - } else if (node->style.overflow == CSS_OVERFLOW_HIDDEN) { - if (heightMeasureMode == CSS_MEASURE_MODE_UNDEFINED || isUndefined(availableInnerMainDim)) { - childHeight = CSS_UNDEFINED; - childHeightMeasureMode = CSS_MEASURE_MODE_UNDEFINED; - } else { - childHeight = availableInnerMainDim; + if (isStyleDimDefined(child, CSS_FLEX_DIRECTION_ROW)) { + childWidth = child->style.dimensions[CSS_WIDTH] + getMarginAxis(child, CSS_FLEX_DIRECTION_ROW); + childWidthMeasureMode = CSS_MEASURE_MODE_EXACTLY; + } + if (isStyleDimDefined(child, CSS_FLEX_DIRECTION_COLUMN)) { + childHeight = child->style.dimensions[CSS_HEIGHT] + getMarginAxis(child, CSS_FLEX_DIRECTION_COLUMN); + childHeightMeasureMode = CSS_MEASURE_MODE_EXACTLY; + } + + // 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 && isUndefined(childWidth) && !isUndefined(availableInnerWidth)) { + childWidth = availableInnerWidth; + childWidthMeasureMode = CSS_MEASURE_MODE_AT_MOST; + } + + // 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 == CSS_OVERFLOW_HIDDEN) { + if (isMainAxisRow && isUndefined(childHeight) && !isUndefined(availableInnerHeight)) { + childHeight = availableInnerHeight; childHeightMeasureMode = CSS_MEASURE_MODE_AT_MOST; } } - // Cross axis - if (isMainAxisRow) { - if (node->style.overflow == CSS_OVERFLOW_HIDDEN) { - if (!isUndefined(availableInnerCrossDim) && - !isStyleDimDefined(child, CSS_FLEX_DIRECTION_COLUMN) && - heightMeasureMode == CSS_MEASURE_MODE_EXACTLY && - getAlignItem(node, child) == CSS_ALIGN_STRETCH) { - childHeight = availableInnerCrossDim; - childHeightMeasureMode = CSS_MEASURE_MODE_EXACTLY; - } else if (!isStyleDimDefined(child, CSS_FLEX_DIRECTION_COLUMN)) { - childHeight = availableInnerCrossDim; - childHeightMeasureMode = isUndefined(childHeight) ? CSS_MEASURE_MODE_UNDEFINED : CSS_MEASURE_MODE_AT_MOST; - } else { - childHeight = child->style.dimensions[CSS_HEIGHT] + getMarginAxis(child, CSS_FLEX_DIRECTION_COLUMN); - childHeightMeasureMode = CSS_MEASURE_MODE_EXACTLY; - } - } - } else { - if (!isUndefined(availableInnerCrossDim) && - !isStyleDimDefined(child, CSS_FLEX_DIRECTION_ROW) && - widthMeasureMode == CSS_MEASURE_MODE_EXACTLY && - getAlignItem(node, child) == CSS_ALIGN_STRETCH) { - childWidth = availableInnerCrossDim; - childWidthMeasureMode = CSS_MEASURE_MODE_EXACTLY; - } else if (!isStyleDimDefined(child, CSS_FLEX_DIRECTION_ROW)) { - childWidth = availableInnerCrossDim; - childWidthMeasureMode = isUndefined(childWidth) ? CSS_MEASURE_MODE_UNDEFINED : CSS_MEASURE_MODE_AT_MOST; - } else { - childWidth = child->style.dimensions[CSS_WIDTH] + getMarginAxis(child, CSS_FLEX_DIRECTION_ROW); - childWidthMeasureMode = CSS_MEASURE_MODE_EXACTLY; - } + // If child has no defined size in the cross axis and is set to stretch, set the cross + // axis to be measured exactly with the available inner width + if (!isMainAxisRow && + !isUndefined(availableInnerWidth) && + !isStyleDimDefined(child, CSS_FLEX_DIRECTION_ROW) && + widthMeasureMode == CSS_MEASURE_MODE_EXACTLY && + getAlignItem(node, child) == CSS_ALIGN_STRETCH) { + childWidth = availableInnerWidth; + childWidthMeasureMode = CSS_MEASURE_MODE_EXACTLY; + } + if (isMainAxisRow && + !isUndefined(availableInnerHeight) && + !isStyleDimDefined(child, CSS_FLEX_DIRECTION_COLUMN) && + heightMeasureMode == CSS_MEASURE_MODE_EXACTLY && + getAlignItem(node, child) == CSS_ALIGN_STRETCH) { + childHeight = availableInnerHeight; + childHeightMeasureMode = CSS_MEASURE_MODE_EXACTLY; } // Measure the child diff --git a/React/Layout/README b/React/Layout/README index 5a2ca3b1e7..9d85b26ff7 100644 --- a/React/Layout/README +++ b/React/Layout/README @@ -1,7 +1,7 @@ The source of truth for css-layout is: https://github.com/facebook/css-layout The code here should be kept in sync with GitHub. -HEAD at the time this code was synced: https://github.com/facebook/css-layout/commit/ca34ff44460bce122d02b27c0409a825f8de90b1 +HEAD at the time this code was synced: https://github.com/facebook/css-layout/commit/a1f36b53f5464c8ee7abc311765dc3ecb1b879c6 There is generated code in: - README (this file) diff --git a/ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java b/ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java index 735eec6870..582fc44aa4 100644 --- a/ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java +++ b/ReactAndroid/src/main/java/com/facebook/csslayout/LayoutEngine.java @@ -7,7 +7,7 @@ */ // NOTE: this file is auto-copied from https://github.com/facebook/css-layout -// @generated SignedSource<<9805b148b88d298edb7fcd7c13738ede>> +// @generated SignedSource<> package com.facebook.csslayout; @@ -726,61 +726,56 @@ public class LayoutEngine { child.layout.flexBasis = Math.max(0, ((child.style.padding.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis]) + child.style.border.getWithFallback(leadingSpacing[mainAxis], leading[mainAxis])) + (child.style.padding.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis]) + child.style.border.getWithFallback(trailingSpacing[mainAxis], trailing[mainAxis])))); } else { + // Compute the flex basis and hypothetical main size (i.e. the clamped flex basis). childWidth = CSSConstants.UNDEFINED; childHeight = CSSConstants.UNDEFINED; childWidthMeasureMode = CSSMeasureMode.UNDEFINED; childHeightMeasureMode = CSSMeasureMode.UNDEFINED; - // Main axis - if (isMainAxisRow) { - if (widthMeasureMode == CSSMeasureMode.UNDEFINED || Float.isNaN(availableInnerMainDim)) { - childWidth = CSSConstants.UNDEFINED; - childWidthMeasureMode = CSSMeasureMode.UNDEFINED; - } else { - childWidth = availableInnerMainDim; - childWidthMeasureMode = CSSMeasureMode.AT_MOST; - } - } else if (node.style.overflow == CSSOverflow.HIDDEN) { - if (heightMeasureMode == CSSMeasureMode.UNDEFINED || Float.isNaN(availableInnerMainDim)) { - childHeight = CSSConstants.UNDEFINED; - childHeightMeasureMode = CSSMeasureMode.UNDEFINED; - } else { - childHeight = availableInnerMainDim; + if ((child.style.dimensions[dim[CSS_FLEX_DIRECTION_ROW]] >= 0.0)) { + childWidth = child.style.dimensions[DIMENSION_WIDTH] + (child.style.margin.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW]) + child.style.margin.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW])); + childWidthMeasureMode = CSSMeasureMode.EXACTLY; + } + if ((child.style.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] >= 0.0)) { + childHeight = child.style.dimensions[DIMENSION_HEIGHT] + (child.style.margin.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN]) + child.style.margin.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN])); + childHeightMeasureMode = CSSMeasureMode.EXACTLY; + } + + // 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 && Float.isNaN(childWidth) && !Float.isNaN(availableInnerWidth)) { + childWidth = availableInnerWidth; + childWidthMeasureMode = CSSMeasureMode.AT_MOST; + } + + // 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 == CSSOverflow.HIDDEN) { + if (isMainAxisRow && Float.isNaN(childHeight) && !Float.isNaN(availableInnerHeight)) { + childHeight = availableInnerHeight; childHeightMeasureMode = CSSMeasureMode.AT_MOST; } } - // Cross axis - if (isMainAxisRow) { - if (node.style.overflow == CSSOverflow.HIDDEN) { - if (!Float.isNaN(availableInnerCrossDim) && - !(child.style.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] >= 0.0) && - heightMeasureMode == CSSMeasureMode.EXACTLY && - getAlignItem(node, child) == CSSAlign.STRETCH) { - childHeight = availableInnerCrossDim; - childHeightMeasureMode = CSSMeasureMode.EXACTLY; - } else if (!(child.style.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] >= 0.0)) { - childHeight = availableInnerCrossDim; - childHeightMeasureMode = Float.isNaN(childHeight) ? CSSMeasureMode.UNDEFINED : CSSMeasureMode.AT_MOST; - } else { - childHeight = child.style.dimensions[DIMENSION_HEIGHT] + (child.style.margin.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_COLUMN], leading[CSS_FLEX_DIRECTION_COLUMN]) + child.style.margin.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_COLUMN], trailing[CSS_FLEX_DIRECTION_COLUMN])); - childHeightMeasureMode = CSSMeasureMode.EXACTLY; - } - } - } else { - if (!Float.isNaN(availableInnerCrossDim) && - !(child.style.dimensions[dim[CSS_FLEX_DIRECTION_ROW]] >= 0.0) && - widthMeasureMode == CSSMeasureMode.EXACTLY && - getAlignItem(node, child) == CSSAlign.STRETCH) { - childWidth = availableInnerCrossDim; - childWidthMeasureMode = CSSMeasureMode.EXACTLY; - } else if (!(child.style.dimensions[dim[CSS_FLEX_DIRECTION_ROW]] >= 0.0)) { - childWidth = availableInnerCrossDim; - childWidthMeasureMode = Float.isNaN(childWidth) ? CSSMeasureMode.UNDEFINED : CSSMeasureMode.AT_MOST; - } else { - childWidth = child.style.dimensions[DIMENSION_WIDTH] + (child.style.margin.getWithFallback(leadingSpacing[CSS_FLEX_DIRECTION_ROW], leading[CSS_FLEX_DIRECTION_ROW]) + child.style.margin.getWithFallback(trailingSpacing[CSS_FLEX_DIRECTION_ROW], trailing[CSS_FLEX_DIRECTION_ROW])); - childWidthMeasureMode = CSSMeasureMode.EXACTLY; - } + // If child has no defined size in the cross axis and is set to stretch, set the cross + // axis to be measured exactly with the available inner width + if (!isMainAxisRow && + !Float.isNaN(availableInnerWidth) && + !(child.style.dimensions[dim[CSS_FLEX_DIRECTION_ROW]] >= 0.0) && + widthMeasureMode == CSSMeasureMode.EXACTLY && + getAlignItem(node, child) == CSSAlign.STRETCH) { + childWidth = availableInnerWidth; + childWidthMeasureMode = CSSMeasureMode.EXACTLY; + } + if (isMainAxisRow && + !Float.isNaN(availableInnerHeight) && + !(child.style.dimensions[dim[CSS_FLEX_DIRECTION_COLUMN]] >= 0.0) && + heightMeasureMode == CSSMeasureMode.EXACTLY && + getAlignItem(node, child) == CSSAlign.STRETCH) { + childHeight = availableInnerHeight; + childHeightMeasureMode = CSSMeasureMode.EXACTLY; } // Measure the child diff --git a/ReactAndroid/src/main/java/com/facebook/csslayout/README b/ReactAndroid/src/main/java/com/facebook/csslayout/README index 5a2ca3b1e7..9d85b26ff7 100644 --- a/ReactAndroid/src/main/java/com/facebook/csslayout/README +++ b/ReactAndroid/src/main/java/com/facebook/csslayout/README @@ -1,7 +1,7 @@ The source of truth for css-layout is: https://github.com/facebook/css-layout The code here should be kept in sync with GitHub. -HEAD at the time this code was synced: https://github.com/facebook/css-layout/commit/ca34ff44460bce122d02b27c0409a825f8de90b1 +HEAD at the time this code was synced: https://github.com/facebook/css-layout/commit/a1f36b53f5464c8ee7abc311765dc3ecb1b879c6 There is generated code in: - README (this file)