react-native/React/CSSLayout/CSSLayout.c

2447 lines
99 KiB
C

/**
* Copyright (c) 2014-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
#include <string.h>
#include "CSSLayout.h"
#include "CSSNodeList.h"
#ifdef _MSC_VER
#include <float.h>
#define isnan _isnan
/* define fmaxf if < VC12 */
#if _MSC_VER < 1800
__forceinline const float fmaxf(const float a, const float b) {
return (a > b) ? a : b;
}
#endif
#endif
typedef struct CSSCachedMeasurement {
float availableWidth;
float availableHeight;
CSSMeasureMode widthMeasureMode;
CSSMeasureMode heightMeasureMode;
float computedWidth;
float computedHeight;
} CSSCachedMeasurement;
// This value was chosen based on empiracle data. Even the most complicated
// layouts should not require more than 16 entries to fit within the cache.
enum { CSS_MAX_CACHED_RESULT_COUNT = 16 };
typedef struct CSSLayout {
float position[4];
float dimensions[2];
CSSDirection direction;
float computedFlexBasis;
// Instead of recomputing the entire layout every single time, we
// cache some information to break early when nothing changed
uint32_t generationCount;
CSSDirection lastParentDirection;
uint32_t nextCachedMeasurementsIndex;
CSSCachedMeasurement cachedMeasurements[CSS_MAX_CACHED_RESULT_COUNT];
float measuredDimensions[2];
CSSCachedMeasurement cachedLayout;
} CSSLayout;
typedef struct CSSStyle {
CSSDirection direction;
CSSFlexDirection flexDirection;
CSSJustify justifyContent;
CSSAlign alignContent;
CSSAlign alignItems;
CSSAlign alignSelf;
CSSPositionType positionType;
CSSWrapType flexWrap;
CSSOverflow overflow;
float flex;
float flexGrow;
float flexShrink;
float flexBasis;
float margin[CSSEdgeCount];
float position[CSSEdgeCount];
float padding[CSSEdgeCount];
float border[CSSEdgeCount];
float dimensions[2];
float minDimensions[2];
float maxDimensions[2];
} CSSStyle;
typedef struct CSSNode {
CSSStyle style;
CSSLayout layout;
uint32_t lineIndex;
bool hasNewLayout;
bool isTextNode;
CSSNodeRef parent;
CSSNodeListRef children;
bool isDirty;
struct CSSNode *nextChild;
CSSMeasureFunc measure;
CSSPrintFunc print;
void *context;
} CSSNode;
static void _CSSNodeMarkDirty(const CSSNodeRef node);
#ifdef ANDROID
#include <android/log.h>
static int _csslayoutAndroidLog(const char *format, ...) {
va_list args;
va_start(args, format);
const int result = __android_log_vprint(ANDROID_LOG_DEBUG, "css-layout", format, args);
va_end(args);
return result;
}
static CSSLogger gLogger = &_csslayoutAndroidLog;
#else
static CSSLogger gLogger = &printf;
#endif
static inline float computedEdgeValue(const float edges[CSSEdgeCount],
const CSSEdge edge,
const float defaultValue) {
CSS_ASSERT(edge <= CSSEdgeEnd, "Cannot get computed value of multi-edge shorthands");
if (!CSSValueIsUndefined(edges[edge])) {
return edges[edge];
}
if ((edge == CSSEdgeTop || edge == CSSEdgeBottom) &&
!CSSValueIsUndefined(edges[CSSEdgeVertical])) {
return edges[CSSEdgeVertical];
}
if ((edge == CSSEdgeLeft || edge == CSSEdgeRight || edge == CSSEdgeStart || edge == CSSEdgeEnd) &&
!CSSValueIsUndefined(edges[CSSEdgeHorizontal])) {
return edges[CSSEdgeHorizontal];
}
if (!CSSValueIsUndefined(edges[CSSEdgeAll])) {
return edges[CSSEdgeAll];
}
if (edge == CSSEdgeStart || edge == CSSEdgeEnd) {
return CSSUndefined;
}
return defaultValue;
}
static int32_t gNodeInstanceCount = 0;
CSSNodeRef CSSNodeNew(void) {
const CSSNodeRef node = calloc(1, sizeof(CSSNode));
CSS_ASSERT(node, "Could not allocate memory for node");
gNodeInstanceCount++;
CSSNodeInit(node);
return node;
}
void CSSNodeFree(const CSSNodeRef node) {
if (node->parent) {
CSSNodeListDelete(node->parent->children, node);
node->parent = NULL;
}
const uint32_t childCount = CSSNodeChildCount(node);
for (uint32_t i = 0; i < childCount; i++) {
const CSSNodeRef child = CSSNodeGetChild(node, i);
child->parent = NULL;
}
CSSNodeListFree(node->children);
free(node);
gNodeInstanceCount--;
}
void CSSNodeFreeRecursive(const CSSNodeRef root) {
while (CSSNodeChildCount(root) > 0) {
const CSSNodeRef child = CSSNodeGetChild(root, 0);
CSSNodeRemoveChild(root, child);
CSSNodeFreeRecursive(child);
}
CSSNodeFree(root);
}
void CSSNodeReset(const CSSNodeRef node) {
CSS_ASSERT(CSSNodeChildCount(node) == 0, "Cannot reset a node which still has children attached");
CSS_ASSERT(node->parent == NULL, "Cannot reset a node still attached to a parent");
CSSNodeListFree(node->children);
memset(node, 0, sizeof(CSSNode));
CSSNodeInit(node);
}
int32_t CSSNodeGetInstanceCount(void) {
return gNodeInstanceCount;
}
void CSSNodeInit(const CSSNodeRef node) {
node->parent = NULL;
node->children = NULL;
node->hasNewLayout = true;
node->isDirty = false;
node->style.flex = CSSUndefined;
node->style.flexGrow = CSSUndefined;
node->style.flexShrink = CSSUndefined;
node->style.flexBasis = CSSUndefined;
node->style.alignItems = CSSAlignStretch;
node->style.alignContent = CSSAlignFlexStart;
node->style.direction = CSSDirectionInherit;
node->style.flexDirection = CSSFlexDirectionColumn;
node->style.overflow = CSSOverflowVisible;
// Some of the fields default to undefined and not 0
node->style.dimensions[CSSDimensionWidth] = CSSUndefined;
node->style.dimensions[CSSDimensionHeight] = CSSUndefined;
node->style.minDimensions[CSSDimensionWidth] = CSSUndefined;
node->style.minDimensions[CSSDimensionHeight] = CSSUndefined;
node->style.maxDimensions[CSSDimensionWidth] = CSSUndefined;
node->style.maxDimensions[CSSDimensionHeight] = CSSUndefined;
for (CSSEdge edge = CSSEdgeLeft; edge < CSSEdgeCount; edge++) {
node->style.position[edge] = CSSUndefined;
node->style.margin[edge] = CSSUndefined;
node->style.padding[edge] = CSSUndefined;
node->style.border[edge] = CSSUndefined;
}
node->layout.dimensions[CSSDimensionWidth] = CSSUndefined;
node->layout.dimensions[CSSDimensionHeight] = CSSUndefined;
// 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;
node->layout.cachedLayout.widthMeasureMode = (CSSMeasureMode) -1;
node->layout.cachedLayout.heightMeasureMode = (CSSMeasureMode) -1;
node->layout.cachedLayout.computedWidth = -1;
node->layout.cachedLayout.computedHeight = -1;
}
static void _CSSNodeMarkDirty(const CSSNodeRef node) {
if (!node->isDirty) {
node->isDirty = true;
node->layout.computedFlexBasis = CSSUndefined;
if (node->parent) {
_CSSNodeMarkDirty(node->parent);
}
}
}
void CSSNodeInsertChild(const CSSNodeRef node, const CSSNodeRef child, const uint32_t index) {
CSS_ASSERT(child->parent == NULL, "Child already has a parent, it must be removed first.");
CSSNodeListInsert(&node->children, child, index);
child->parent = node;
_CSSNodeMarkDirty(node);
}
void CSSNodeRemoveChild(const CSSNodeRef node, const CSSNodeRef child) {
CSSNodeListDelete(node->children, child);
child->parent = NULL;
_CSSNodeMarkDirty(node);
}
CSSNodeRef CSSNodeGetChild(const CSSNodeRef node, const uint32_t index) {
return CSSNodeListGet(node->children, index);
}
inline uint32_t CSSNodeChildCount(const CSSNodeRef node) {
return CSSNodeListCount(node->children);
}
void CSSNodeMarkDirty(const CSSNodeRef node) {
CSS_ASSERT(node->measure != NULL || CSSNodeChildCount(node) > 0,
"Only leaf nodes with custom measure functions"
"should manually mark themselves as dirty");
_CSSNodeMarkDirty(node);
}
bool CSSNodeIsDirty(const CSSNodeRef node) {
return node->isDirty;
}
inline float CSSNodeStyleGetFlexGrow(CSSNodeRef node) {
if (!CSSValueIsUndefined(node->style.flexGrow)) {
return node->style.flexGrow;
}
if (!CSSValueIsUndefined(node->style.flex) && node->style.flex > 0) {
return node->style.flex;
}
return 0;
}
inline float CSSNodeStyleGetFlexShrink(CSSNodeRef node) {
if (!CSSValueIsUndefined(node->style.flexShrink)) {
return node->style.flexShrink;
}
if (!CSSValueIsUndefined(node->style.flex) && node->style.flex < 0) {
return -node->style.flex;
}
return 0;
}
inline float CSSNodeStyleGetFlexBasis(CSSNodeRef node) {
if (!CSSValueIsUndefined(node->style.flexBasis)) {
return node->style.flexBasis;
}
if (!CSSValueIsUndefined(node->style.flex)) {
return node->style.flex > 0 ? 0 : CSSUndefined;
}
return CSSUndefined;
}
void CSSNodeStyleSetFlex(const CSSNodeRef node, const float flex) {
if (node->style.flex != flex) {
node->style.flex = flex;
_CSSNodeMarkDirty(node);
}
}
#define CSS_NODE_PROPERTY_IMPL(type, name, paramName, instanceName) \
void CSSNodeSet##name(const CSSNodeRef node, type paramName) { \
node->instanceName = paramName; \
} \
\
type CSSNodeGet##name(const CSSNodeRef node) { \
return node->instanceName; \
}
#define CSS_NODE_STYLE_PROPERTY_SETTER_IMPL(type, name, paramName, instanceName) \
void CSSNodeStyleSet##name(const CSSNodeRef node, const type paramName) { \
if (node->style.instanceName != paramName) { \
node->style.instanceName = paramName; \
_CSSNodeMarkDirty(node); \
} \
}
#define CSS_NODE_STYLE_PROPERTY_IMPL(type, name, paramName, instanceName) \
CSS_NODE_STYLE_PROPERTY_SETTER_IMPL(type, name, paramName, instanceName) \
\
type CSSNodeStyleGet##name(const CSSNodeRef node) { \
return node->style.instanceName; \
}
#define CSS_NODE_STYLE_EDGE_PROPERTY_IMPL(type, name, paramName, instanceName, defaultValue) \
void CSSNodeStyleSet##name(const CSSNodeRef node, const CSSEdge edge, const type paramName) { \
if (node->style.instanceName[edge] != paramName) { \
node->style.instanceName[edge] = paramName; \
_CSSNodeMarkDirty(node); \
} \
} \
\
type CSSNodeStyleGet##name(const CSSNodeRef node, const CSSEdge edge) { \
return computedEdgeValue(node->style.instanceName, edge, defaultValue); \
}
#define CSS_NODE_LAYOUT_PROPERTY_IMPL(type, name, instanceName) \
type CSSNodeLayoutGet##name(const CSSNodeRef node) { \
return node->layout.instanceName; \
}
CSS_NODE_PROPERTY_IMPL(void *, Context, context, context);
CSS_NODE_PROPERTY_IMPL(CSSMeasureFunc, MeasureFunc, measureFunc, measure);
CSS_NODE_PROPERTY_IMPL(CSSPrintFunc, PrintFunc, printFunc, print);
CSS_NODE_PROPERTY_IMPL(bool, IsTextnode, isTextNode, isTextNode);
CSS_NODE_PROPERTY_IMPL(bool, HasNewLayout, hasNewLayout, hasNewLayout);
CSS_NODE_STYLE_PROPERTY_IMPL(CSSDirection, Direction, direction, direction);
CSS_NODE_STYLE_PROPERTY_IMPL(CSSFlexDirection, FlexDirection, flexDirection, flexDirection);
CSS_NODE_STYLE_PROPERTY_IMPL(CSSJustify, JustifyContent, justifyContent, justifyContent);
CSS_NODE_STYLE_PROPERTY_IMPL(CSSAlign, AlignContent, alignContent, alignContent);
CSS_NODE_STYLE_PROPERTY_IMPL(CSSAlign, AlignItems, alignItems, alignItems);
CSS_NODE_STYLE_PROPERTY_IMPL(CSSAlign, AlignSelf, alignSelf, alignSelf);
CSS_NODE_STYLE_PROPERTY_IMPL(CSSPositionType, PositionType, positionType, positionType);
CSS_NODE_STYLE_PROPERTY_IMPL(CSSWrapType, FlexWrap, flexWrap, flexWrap);
CSS_NODE_STYLE_PROPERTY_IMPL(CSSOverflow, Overflow, overflow, overflow);
CSS_NODE_STYLE_PROPERTY_SETTER_IMPL(float, FlexGrow, flexGrow, flexGrow);
CSS_NODE_STYLE_PROPERTY_SETTER_IMPL(float, FlexShrink, flexShrink, flexShrink);
CSS_NODE_STYLE_PROPERTY_SETTER_IMPL(float, FlexBasis, flexBasis, flexBasis);
CSS_NODE_STYLE_EDGE_PROPERTY_IMPL(float, Position, position, position, CSSUndefined);
CSS_NODE_STYLE_EDGE_PROPERTY_IMPL(float, Margin, margin, margin, 0);
CSS_NODE_STYLE_EDGE_PROPERTY_IMPL(float, Padding, padding, padding, 0);
CSS_NODE_STYLE_EDGE_PROPERTY_IMPL(float, Border, border, border, 0);
CSS_NODE_STYLE_PROPERTY_IMPL(float, Width, width, dimensions[CSSDimensionWidth]);
CSS_NODE_STYLE_PROPERTY_IMPL(float, Height, height, dimensions[CSSDimensionHeight]);
CSS_NODE_STYLE_PROPERTY_IMPL(float, MinWidth, minWidth, minDimensions[CSSDimensionWidth]);
CSS_NODE_STYLE_PROPERTY_IMPL(float, MinHeight, minHeight, minDimensions[CSSDimensionHeight]);
CSS_NODE_STYLE_PROPERTY_IMPL(float, MaxWidth, maxWidth, maxDimensions[CSSDimensionWidth]);
CSS_NODE_STYLE_PROPERTY_IMPL(float, MaxHeight, maxHeight, maxDimensions[CSSDimensionHeight]);
CSS_NODE_LAYOUT_PROPERTY_IMPL(float, Left, position[CSSEdgeLeft]);
CSS_NODE_LAYOUT_PROPERTY_IMPL(float, Top, position[CSSEdgeTop]);
CSS_NODE_LAYOUT_PROPERTY_IMPL(float, Right, position[CSSEdgeRight]);
CSS_NODE_LAYOUT_PROPERTY_IMPL(float, Bottom, position[CSSEdgeBottom]);
CSS_NODE_LAYOUT_PROPERTY_IMPL(float, Width, dimensions[CSSDimensionWidth]);
CSS_NODE_LAYOUT_PROPERTY_IMPL(float, Height, dimensions[CSSDimensionHeight]);
CSS_NODE_LAYOUT_PROPERTY_IMPL(CSSDirection, Direction, direction);
uint32_t gCurrentGenerationCount = 0;
bool layoutNodeInternal(const CSSNodeRef node,
const float availableWidth,
const float availableHeight,
const CSSDirection parentDirection,
const CSSMeasureMode widthMeasureMode,
const CSSMeasureMode heightMeasureMode,
const bool performLayout,
const char *reason);
inline bool CSSValueIsUndefined(const float value) {
return isnan(value);
}
static inline bool eq(const float a, const float b) {
if (CSSValueIsUndefined(a)) {
return CSSValueIsUndefined(b);
}
return fabs(a - b) < 0.0001;
}
static void indent(const uint32_t n) {
for (uint32_t i = 0; i < n; i++) {
gLogger(" ");
}
}
static void printNumberIfNotZero(const char *str, const float number) {
if (!eq(number, 0)) {
gLogger("%s: %g, ", str, number);
}
}
static void printNumberIfNotUndefined(const char *str, const float number) {
if (!CSSValueIsUndefined(number)) {
gLogger("%s: %g, ", str, number);
}
}
static bool eqFour(const float four[4]) {
return eq(four[0], four[1]) && eq(four[0], four[2]) && eq(four[0], four[3]);
}
static void _CSSNodePrint(const CSSNodeRef node,
const CSSPrintOptions options,
const uint32_t level) {
indent(level);
gLogger("{");
if (node->print) {
node->print(node->context);
}
if (options & CSSPrintOptionsLayout) {
gLogger("layout: {");
gLogger("width: %g, ", node->layout.dimensions[CSSDimensionWidth]);
gLogger("height: %g, ", node->layout.dimensions[CSSDimensionHeight]);
gLogger("top: %g, ", node->layout.position[CSSEdgeTop]);
gLogger("left: %g", node->layout.position[CSSEdgeLeft]);
gLogger("}, ");
}
if (options & CSSPrintOptionsStyle) {
if (node->style.flexDirection == CSSFlexDirectionColumn) {
gLogger("flexDirection: 'column', ");
} else if (node->style.flexDirection == CSSFlexDirectionColumnReverse) {
gLogger("flexDirection: 'column-reverse', ");
} else if (node->style.flexDirection == CSSFlexDirectionRow) {
gLogger("flexDirection: 'row', ");
} else if (node->style.flexDirection == CSSFlexDirectionRowReverse) {
gLogger("flexDirection: 'row-reverse', ");
}
if (node->style.justifyContent == CSSJustifyCenter) {
gLogger("justifyContent: 'center', ");
} else if (node->style.justifyContent == CSSJustifyFlexEnd) {
gLogger("justifyContent: 'flex-end', ");
} else if (node->style.justifyContent == CSSJustifySpaceAround) {
gLogger("justifyContent: 'space-around', ");
} else if (node->style.justifyContent == CSSJustifySpaceBetween) {
gLogger("justifyContent: 'space-between', ");
}
if (node->style.alignItems == CSSAlignCenter) {
gLogger("alignItems: 'center', ");
} else if (node->style.alignItems == CSSAlignFlexEnd) {
gLogger("alignItems: 'flex-end', ");
} else if (node->style.alignItems == CSSAlignStretch) {
gLogger("alignItems: 'stretch', ");
}
if (node->style.alignContent == CSSAlignCenter) {
gLogger("alignContent: 'center', ");
} else if (node->style.alignContent == CSSAlignFlexEnd) {
gLogger("alignContent: 'flex-end', ");
} else if (node->style.alignContent == CSSAlignStretch) {
gLogger("alignContent: 'stretch', ");
}
if (node->style.alignSelf == CSSAlignFlexStart) {
gLogger("alignSelf: 'flex-start', ");
} else if (node->style.alignSelf == CSSAlignCenter) {
gLogger("alignSelf: 'center', ");
} else if (node->style.alignSelf == CSSAlignFlexEnd) {
gLogger("alignSelf: 'flex-end', ");
} else if (node->style.alignSelf == CSSAlignStretch) {
gLogger("alignSelf: 'stretch', ");
}
printNumberIfNotUndefined("flexGrow", CSSNodeStyleGetFlexGrow(node));
printNumberIfNotUndefined("flexShrink", CSSNodeStyleGetFlexShrink(node));
printNumberIfNotUndefined("flexBasis", CSSNodeStyleGetFlexBasis(node));
if (node->style.overflow == CSSOverflowHidden) {
gLogger("overflow: 'hidden', ");
} else if (node->style.overflow == CSSOverflowVisible) {
gLogger("overflow: 'visible', ");
} else if (node->style.overflow == CSSOverflowScroll) {
gLogger("overflow: 'scroll', ");
}
if (eqFour(node->style.margin)) {
printNumberIfNotZero("margin", computedEdgeValue(node->style.margin, CSSEdgeLeft, 0));
} else {
printNumberIfNotZero("marginLeft", computedEdgeValue(node->style.margin, CSSEdgeLeft, 0));
printNumberIfNotZero("marginRight", computedEdgeValue(node->style.margin, CSSEdgeRight, 0));
printNumberIfNotZero("marginTop", computedEdgeValue(node->style.margin, CSSEdgeTop, 0));
printNumberIfNotZero("marginBottom", computedEdgeValue(node->style.margin, CSSEdgeBottom, 0));
printNumberIfNotZero("marginStart", computedEdgeValue(node->style.margin, CSSEdgeStart, 0));
printNumberIfNotZero("marginEnd", computedEdgeValue(node->style.margin, CSSEdgeEnd, 0));
}
if (eqFour(node->style.padding)) {
printNumberIfNotZero("padding", computedEdgeValue(node->style.padding, CSSEdgeLeft, 0));
} else {
printNumberIfNotZero("paddingLeft", computedEdgeValue(node->style.padding, CSSEdgeLeft, 0));
printNumberIfNotZero("paddingRight", computedEdgeValue(node->style.padding, CSSEdgeRight, 0));
printNumberIfNotZero("paddingTop", computedEdgeValue(node->style.padding, CSSEdgeTop, 0));
printNumberIfNotZero("paddingBottom",
computedEdgeValue(node->style.padding, CSSEdgeBottom, 0));
printNumberIfNotZero("paddingStart", computedEdgeValue(node->style.padding, CSSEdgeStart, 0));
printNumberIfNotZero("paddingEnd", computedEdgeValue(node->style.padding, CSSEdgeEnd, 0));
}
if (eqFour(node->style.border)) {
printNumberIfNotZero("borderWidth", computedEdgeValue(node->style.border, CSSEdgeLeft, 0));
} else {
printNumberIfNotZero("borderLeftWidth",
computedEdgeValue(node->style.border, CSSEdgeLeft, 0));
printNumberIfNotZero("borderRightWidth",
computedEdgeValue(node->style.border, CSSEdgeRight, 0));
printNumberIfNotZero("borderTopWidth", computedEdgeValue(node->style.border, CSSEdgeTop, 0));
printNumberIfNotZero("borderBottomWidth",
computedEdgeValue(node->style.border, CSSEdgeBottom, 0));
printNumberIfNotZero("borderStartWidth",
computedEdgeValue(node->style.border, CSSEdgeStart, 0));
printNumberIfNotZero("borderEndWidth", computedEdgeValue(node->style.border, CSSEdgeEnd, 0));
}
printNumberIfNotUndefined("width", node->style.dimensions[CSSDimensionWidth]);
printNumberIfNotUndefined("height", node->style.dimensions[CSSDimensionHeight]);
printNumberIfNotUndefined("maxWidth", node->style.maxDimensions[CSSDimensionWidth]);
printNumberIfNotUndefined("maxHeight", node->style.maxDimensions[CSSDimensionHeight]);
printNumberIfNotUndefined("minWidth", node->style.minDimensions[CSSDimensionWidth]);
printNumberIfNotUndefined("minHeight", node->style.minDimensions[CSSDimensionHeight]);
if (node->style.positionType == CSSPositionTypeAbsolute) {
gLogger("position: 'absolute', ");
}
printNumberIfNotUndefined("left",
computedEdgeValue(node->style.position, CSSEdgeLeft, CSSUndefined));
printNumberIfNotUndefined("right",
computedEdgeValue(node->style.position, CSSEdgeRight, CSSUndefined));
printNumberIfNotUndefined("top",
computedEdgeValue(node->style.position, CSSEdgeTop, CSSUndefined));
printNumberIfNotUndefined("bottom",
computedEdgeValue(node->style.position, CSSEdgeBottom, CSSUndefined));
}
const uint32_t childCount = CSSNodeListCount(node->children);
if (options & CSSPrintOptionsChildren && childCount > 0) {
gLogger("children: [\n");
for (uint32_t i = 0; i < childCount; i++) {
_CSSNodePrint(CSSNodeGetChild(node, i), options, level + 1);
}
indent(level);
gLogger("]},\n");
} else {
gLogger("},\n");
}
}
void CSSNodePrint(const CSSNodeRef node, const CSSPrintOptions options) {
_CSSNodePrint(node, options, 0);
}
static const CSSEdge leading[4] = {
[CSSFlexDirectionColumn] = CSSEdgeTop,
[CSSFlexDirectionColumnReverse] = CSSEdgeBottom,
[CSSFlexDirectionRow] = CSSEdgeLeft,
[CSSFlexDirectionRowReverse] = CSSEdgeRight,
};
static const CSSEdge trailing[4] = {
[CSSFlexDirectionColumn] = CSSEdgeBottom,
[CSSFlexDirectionColumnReverse] = CSSEdgeTop,
[CSSFlexDirectionRow] = CSSEdgeRight,
[CSSFlexDirectionRowReverse] = CSSEdgeLeft,
};
static const CSSEdge pos[4] = {
[CSSFlexDirectionColumn] = CSSEdgeTop,
[CSSFlexDirectionColumnReverse] = CSSEdgeBottom,
[CSSFlexDirectionRow] = CSSEdgeLeft,
[CSSFlexDirectionRowReverse] = CSSEdgeRight,
};
static const CSSDimension dim[4] = {
[CSSFlexDirectionColumn] = CSSDimensionHeight,
[CSSFlexDirectionColumnReverse] = CSSDimensionHeight,
[CSSFlexDirectionRow] = CSSDimensionWidth,
[CSSFlexDirectionRowReverse] = CSSDimensionWidth,
};
static inline bool isRowDirection(const CSSFlexDirection flexDirection) {
return flexDirection == CSSFlexDirectionRow || flexDirection == CSSFlexDirectionRowReverse;
}
static inline bool isColumnDirection(const CSSFlexDirection flexDirection) {
return flexDirection == CSSFlexDirectionColumn || flexDirection == CSSFlexDirectionColumnReverse;
}
static inline float getLeadingMargin(const CSSNodeRef node, const CSSFlexDirection axis) {
if (isRowDirection(axis) && !CSSValueIsUndefined(node->style.margin[CSSEdgeStart])) {
return node->style.margin[CSSEdgeStart];
}
return computedEdgeValue(node->style.margin, leading[axis], 0);
}
static float getTrailingMargin(const CSSNodeRef node, const CSSFlexDirection axis) {
if (isRowDirection(axis) && !CSSValueIsUndefined(node->style.margin[CSSEdgeEnd])) {
return node->style.margin[CSSEdgeEnd];
}
return computedEdgeValue(node->style.margin, trailing[axis], 0);
}
static float getLeadingPadding(const CSSNodeRef node, const CSSFlexDirection axis) {
if (isRowDirection(axis) && !CSSValueIsUndefined(node->style.padding[CSSEdgeStart]) &&
node->style.padding[CSSEdgeStart] >= 0) {
return node->style.padding[CSSEdgeStart];
}
const float leadingPadding = computedEdgeValue(node->style.padding, leading[axis], 0);
if (leadingPadding >= 0) {
return leadingPadding;
}
return 0;
}
static float getTrailingPadding(const CSSNodeRef node, const CSSFlexDirection axis) {
if (isRowDirection(axis) && !CSSValueIsUndefined(node->style.padding[CSSEdgeEnd]) &&
node->style.padding[CSSEdgeEnd] >= 0) {
return node->style.padding[CSSEdgeEnd];
}
const float trailingPadding = computedEdgeValue(node->style.padding, trailing[axis], 0);
if (trailingPadding >= 0) {
return trailingPadding;
}
return 0;
}
static float getLeadingBorder(const CSSNodeRef node, const CSSFlexDirection axis) {
if (isRowDirection(axis) && !CSSValueIsUndefined(node->style.border[CSSEdgeStart]) &&
node->style.border[CSSEdgeStart] >= 0) {
return node->style.border[CSSEdgeStart];
}
const float leadingBorder = computedEdgeValue(node->style.border, leading[axis], 0);
if (leadingBorder >= 0) {
return leadingBorder;
}
return 0;
}
static float getTrailingBorder(const CSSNodeRef node, const CSSFlexDirection axis) {
if (isRowDirection(axis) && !CSSValueIsUndefined(node->style.border[CSSEdgeEnd]) &&
node->style.border[CSSEdgeEnd] >= 0) {
return node->style.border[CSSEdgeEnd];
}
const float trailingBorder = computedEdgeValue(node->style.border, trailing[axis], 0);
if (trailingBorder >= 0) {
return trailingBorder;
}
return 0;
}
static inline float getLeadingPaddingAndBorder(const CSSNodeRef node, const CSSFlexDirection axis) {
return getLeadingPadding(node, axis) + getLeadingBorder(node, axis);
}
static inline float getTrailingPaddingAndBorder(const CSSNodeRef node,
const CSSFlexDirection axis) {
return getTrailingPadding(node, axis) + getTrailingBorder(node, axis);
}
static inline float getMarginAxis(const CSSNodeRef node, const CSSFlexDirection axis) {
return getLeadingMargin(node, axis) + getTrailingMargin(node, axis);
}
static inline float getPaddingAndBorderAxis(const CSSNodeRef node, const CSSFlexDirection axis) {
return getLeadingPaddingAndBorder(node, axis) + getTrailingPaddingAndBorder(node, axis);
}
static inline CSSAlign getAlignItem(const CSSNodeRef node, const CSSNodeRef child) {
if (child->style.alignSelf != CSSAlignAuto) {
return child->style.alignSelf;
}
return node->style.alignItems;
}
static inline CSSDirection resolveDirection(const CSSNodeRef node,
const CSSDirection parentDirection) {
if (node->style.direction == CSSDirectionInherit) {
return parentDirection > CSSDirectionInherit ? parentDirection : CSSDirectionLTR;
} else {
return node->style.direction;
}
}
static inline CSSFlexDirection resolveAxis(const CSSFlexDirection flexDirection,
const CSSDirection direction) {
if (direction == CSSDirectionRTL) {
if (flexDirection == CSSFlexDirectionRow) {
return CSSFlexDirectionRowReverse;
} else if (flexDirection == CSSFlexDirectionRowReverse) {
return CSSFlexDirectionRow;
}
}
return flexDirection;
}
static CSSFlexDirection getCrossFlexDirection(const CSSFlexDirection flexDirection,
const CSSDirection direction) {
if (isColumnDirection(flexDirection)) {
return resolveAxis(CSSFlexDirectionRow, direction);
} else {
return CSSFlexDirectionColumn;
}
}
static inline bool isFlex(const CSSNodeRef node) {
return (node->style.positionType == CSSPositionTypeRelative &&
(node->style.flexGrow != 0 || node->style.flexShrink != 0 || node->style.flex != 0));
}
static inline float getDimWithMargin(const CSSNodeRef node, const CSSFlexDirection axis) {
return node->layout.measuredDimensions[dim[axis]] + getLeadingMargin(node, axis) +
getTrailingMargin(node, axis);
}
static inline bool isStyleDimDefined(const CSSNodeRef node, const CSSFlexDirection axis) {
const float value = node->style.dimensions[dim[axis]];
return !CSSValueIsUndefined(value) && value >= 0.0;
}
static inline bool isLayoutDimDefined(const CSSNodeRef node, const CSSFlexDirection axis) {
const float value = node->layout.measuredDimensions[dim[axis]];
return !CSSValueIsUndefined(value) && value >= 0.0;
}
static inline bool isLeadingPosDefined(const CSSNodeRef node, const CSSFlexDirection axis) {
return (isRowDirection(axis) &&
!CSSValueIsUndefined(
computedEdgeValue(node->style.position, CSSEdgeStart, CSSUndefined))) ||
!CSSValueIsUndefined(computedEdgeValue(node->style.position, leading[axis], CSSUndefined));
}
static inline bool isTrailingPosDefined(const CSSNodeRef node, const CSSFlexDirection axis) {
return (isRowDirection(axis) &&
!CSSValueIsUndefined(
computedEdgeValue(node->style.position, CSSEdgeEnd, CSSUndefined))) ||
!CSSValueIsUndefined(
computedEdgeValue(node->style.position, trailing[axis], CSSUndefined));
}
static float getLeadingPosition(const CSSNodeRef node, const CSSFlexDirection axis) {
if (isRowDirection(axis)) {
const float leadingPosition =
computedEdgeValue(node->style.position, CSSEdgeStart, CSSUndefined);
if (!CSSValueIsUndefined(leadingPosition)) {
return leadingPosition;
}
}
const float leadingPosition =
computedEdgeValue(node->style.position, leading[axis], CSSUndefined);
if (!CSSValueIsUndefined(leadingPosition)) {
return leadingPosition;
}
return 0;
}
static float getTrailingPosition(const CSSNodeRef node, const CSSFlexDirection axis) {
if (isRowDirection(axis)) {
const float trailingPosition =
computedEdgeValue(node->style.position, CSSEdgeEnd, CSSUndefined);
if (!CSSValueIsUndefined(trailingPosition)) {
return trailingPosition;
}
}
const float trailingPosition =
computedEdgeValue(node->style.position, trailing[axis], CSSUndefined);
if (!CSSValueIsUndefined(trailingPosition)) {
return trailingPosition;
}
return 0;
}
static float boundAxisWithinMinAndMax(const CSSNodeRef node,
const CSSFlexDirection axis,
const float value) {
float min = CSSUndefined;
float max = CSSUndefined;
if (isColumnDirection(axis)) {
min = node->style.minDimensions[CSSDimensionHeight];
max = node->style.maxDimensions[CSSDimensionHeight];
} else if (isRowDirection(axis)) {
min = node->style.minDimensions[CSSDimensionWidth];
max = node->style.maxDimensions[CSSDimensionWidth];
}
float boundValue = value;
if (!CSSValueIsUndefined(max) && max >= 0.0 && boundValue > max) {
boundValue = max;
}
if (!CSSValueIsUndefined(min) && min >= 0.0 && boundValue < min) {
boundValue = min;
}
return boundValue;
}
// Like boundAxisWithinMinAndMax but also ensures that the value doesn't go
// below the
// padding and border amount.
static inline float boundAxis(const CSSNodeRef node,
const CSSFlexDirection axis,
const float value) {
return fmaxf(boundAxisWithinMinAndMax(node, axis, value), getPaddingAndBorderAxis(node, axis));
}
static void setTrailingPosition(const CSSNodeRef node,
const CSSNodeRef child,
const CSSFlexDirection axis) {
const float size = child->layout.measuredDimensions[dim[axis]];
child->layout.position[trailing[axis]] =
node->layout.measuredDimensions[dim[axis]] - size - child->layout.position[pos[axis]];
}
// If both left and right are defined, then use left. Otherwise return
// +left or -right depending on which is defined.
static float getRelativePosition(const CSSNodeRef node, const CSSFlexDirection axis) {
if (isLeadingPosDefined(node, axis)) {
return getLeadingPosition(node, axis);
}
return -getTrailingPosition(node, axis);
}
static void setPosition(const CSSNodeRef node, const CSSDirection direction) {
const CSSFlexDirection mainAxis = resolveAxis(node->style.flexDirection, direction);
const CSSFlexDirection crossAxis = getCrossFlexDirection(mainAxis, direction);
const float relativePositionMain = getRelativePosition(node, mainAxis);
const float relativePositionCross = getRelativePosition(node, crossAxis);
node->layout.position[leading[mainAxis]] =
getLeadingMargin(node, mainAxis) + relativePositionMain;
node->layout.position[trailing[mainAxis]] =
getTrailingMargin(node, mainAxis) + relativePositionMain;
node->layout.position[leading[crossAxis]] =
getLeadingMargin(node, crossAxis) + relativePositionCross;
node->layout.position[trailing[crossAxis]] =
getTrailingMargin(node, crossAxis) + relativePositionCross;
}
static void computeChildFlexBasis(const CSSNodeRef node,
const CSSNodeRef child,
const float width,
const CSSMeasureMode widthMode,
const float height,
const CSSMeasureMode heightMode,
const CSSDirection direction) {
const CSSFlexDirection mainAxis = resolveAxis(node->style.flexDirection, direction);
const bool isMainAxisRow = isRowDirection(mainAxis);
float childWidth;
float childHeight;
CSSMeasureMode childWidthMeasureMode;
CSSMeasureMode childHeightMeasureMode;
const bool isRowStyleDimDefined = isStyleDimDefined(child, CSSFlexDirectionRow);
const bool isColumnStyleDimDefined = isStyleDimDefined(child, CSSFlexDirectionColumn);
if (!CSSValueIsUndefined(CSSNodeStyleGetFlexBasis(child)) &&
!CSSValueIsUndefined(isMainAxisRow ? width : height)) {
if (CSSValueIsUndefined(child->layout.computedFlexBasis)) {
child->layout.computedFlexBasis =
fmaxf(CSSNodeStyleGetFlexBasis(child), getPaddingAndBorderAxis(child, mainAxis));
}
} else if (isMainAxisRow && isRowStyleDimDefined) {
// The width is definite, so use that as the flex basis.
child->layout.computedFlexBasis = fmaxf(child->style.dimensions[CSSDimensionWidth],
getPaddingAndBorderAxis(child, CSSFlexDirectionRow));
} else if (!isMainAxisRow && isColumnStyleDimDefined) {
// The height is definite, so use that as the flex basis.
child->layout.computedFlexBasis = fmaxf(child->style.dimensions[CSSDimensionHeight],
getPaddingAndBorderAxis(child, CSSFlexDirectionColumn));
} else {
// Compute the flex basis and hypothetical main size (i.e. the clamped
// flex basis).
childWidth = CSSUndefined;
childHeight = CSSUndefined;
childWidthMeasureMode = CSSMeasureModeUndefined;
childHeightMeasureMode = CSSMeasureModeUndefined;
if (isRowStyleDimDefined) {
childWidth =
child->style.dimensions[CSSDimensionWidth] + getMarginAxis(child, CSSFlexDirectionRow);
childWidthMeasureMode = CSSMeasureModeExactly;
}
if (isColumnStyleDimDefined) {
childHeight = child->style.dimensions[CSSDimensionHeight] +
getMarginAxis(child, CSSFlexDirectionColumn);
childHeightMeasureMode = CSSMeasureModeExactly;
}
// The W3C spec doesn't say anything about the 'overflow' property,
// but all major browsers appear to implement the following logic.
if ((!isMainAxisRow && node->style.overflow == CSSOverflowScroll) ||
node->style.overflow != CSSOverflowScroll) {
if (CSSValueIsUndefined(childWidth) && !CSSValueIsUndefined(width)) {
childWidth = width;
childWidthMeasureMode = CSSMeasureModeAtMost;
}
}
if ((isMainAxisRow && node->style.overflow == CSSOverflowScroll) ||
node->style.overflow != CSSOverflowScroll) {
if (CSSValueIsUndefined(childHeight) && !CSSValueIsUndefined(height)) {
childHeight = height;
childHeightMeasureMode = CSSMeasureModeAtMost;
}
}
// 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 && !CSSValueIsUndefined(width) && !isRowStyleDimDefined &&
widthMode == CSSMeasureModeExactly && getAlignItem(node, child) == CSSAlignStretch) {
childWidth = width;
childWidthMeasureMode = CSSMeasureModeExactly;
}
if (isMainAxisRow && !CSSValueIsUndefined(height) && !isColumnStyleDimDefined &&
heightMode == CSSMeasureModeExactly && getAlignItem(node, child) == CSSAlignStretch) {
childHeight = height;
childHeightMeasureMode = CSSMeasureModeExactly;
}
// Measure the child
layoutNodeInternal(child,
childWidth,
childHeight,
direction,
childWidthMeasureMode,
childHeightMeasureMode,
false,
"measure");
child->layout.computedFlexBasis =
fmaxf(isMainAxisRow ? child->layout.measuredDimensions[CSSDimensionWidth]
: child->layout.measuredDimensions[CSSDimensionHeight],
getPaddingAndBorderAxis(child, mainAxis));
}
}
static void absoluteLayoutChild(const CSSNodeRef node,
const CSSNodeRef child,
const float width,
const CSSMeasureMode widthMode,
const CSSDirection direction) {
const CSSFlexDirection mainAxis = resolveAxis(node->style.flexDirection, direction);
const CSSFlexDirection crossAxis = getCrossFlexDirection(mainAxis, direction);
const bool isMainAxisRow = isRowDirection(mainAxis);
float childWidth = CSSUndefined;
float childHeight = CSSUndefined;
CSSMeasureMode childWidthMeasureMode = CSSMeasureModeUndefined;
CSSMeasureMode childHeightMeasureMode = CSSMeasureModeUndefined;
if (isStyleDimDefined(child, CSSFlexDirectionRow)) {
childWidth =
child->style.dimensions[CSSDimensionWidth] + getMarginAxis(child, CSSFlexDirectionRow);
} else {
// If the child doesn't have a specified width, compute the width based
// on the left/right
// offsets if they're defined.
if (isLeadingPosDefined(child, CSSFlexDirectionRow) &&
isTrailingPosDefined(child, CSSFlexDirectionRow)) {
childWidth = node->layout.measuredDimensions[CSSDimensionWidth] -
(getLeadingBorder(node, CSSFlexDirectionRow) +
getTrailingBorder(node, CSSFlexDirectionRow)) -
(getLeadingPosition(child, CSSFlexDirectionRow) +
getTrailingPosition(child, CSSFlexDirectionRow));
childWidth = boundAxis(child, CSSFlexDirectionRow, childWidth);
}
}
if (isStyleDimDefined(child, CSSFlexDirectionColumn)) {
childHeight =
child->style.dimensions[CSSDimensionHeight] + getMarginAxis(child, CSSFlexDirectionColumn);
} else {
// If the child doesn't have a specified height, compute the height
// based on the top/bottom
// offsets if they're defined.
if (isLeadingPosDefined(child, CSSFlexDirectionColumn) &&
isTrailingPosDefined(child, CSSFlexDirectionColumn)) {
childHeight = node->layout.measuredDimensions[CSSDimensionHeight] -
(getLeadingBorder(node, CSSFlexDirectionColumn) +
getTrailingBorder(node, CSSFlexDirectionColumn)) -
(getLeadingPosition(child, CSSFlexDirectionColumn) +
getTrailingPosition(child, CSSFlexDirectionColumn));
childHeight = boundAxis(child, CSSFlexDirectionColumn, childHeight);
}
}
// If we're still missing one or the other dimension, measure the content.
if (CSSValueIsUndefined(childWidth) || CSSValueIsUndefined(childHeight)) {
childWidthMeasureMode =
CSSValueIsUndefined(childWidth) ? CSSMeasureModeUndefined : CSSMeasureModeExactly;
childHeightMeasureMode =
CSSValueIsUndefined(childHeight) ? CSSMeasureModeUndefined : 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) && widthMode != CSSMeasureModeUndefined) {
childWidth = width;
childWidthMeasureMode = CSSMeasureModeAtMost;
}
layoutNodeInternal(child,
childWidth,
childHeight,
direction,
childWidthMeasureMode,
childHeightMeasureMode,
false,
"abs-measure");
childWidth = child->layout.measuredDimensions[CSSDimensionWidth] +
getMarginAxis(child, CSSFlexDirectionRow);
childHeight = child->layout.measuredDimensions[CSSDimensionHeight] +
getMarginAxis(child, CSSFlexDirectionColumn);
}
layoutNodeInternal(child,
childWidth,
childHeight,
direction,
CSSMeasureModeExactly,
CSSMeasureModeExactly,
true,
"abs-layout");
if (isTrailingPosDefined(child, mainAxis) && !isLeadingPosDefined(child, mainAxis)) {
child->layout.position[leading[mainAxis]] = node->layout.measuredDimensions[dim[mainAxis]] -
child->layout.measuredDimensions[dim[mainAxis]] -
getTrailingPosition(child, mainAxis);
}
if (isTrailingPosDefined(child, crossAxis) && !isLeadingPosDefined(child, crossAxis)) {
child->layout.position[leading[crossAxis]] = node->layout.measuredDimensions[dim[crossAxis]] -
child->layout.measuredDimensions[dim[crossAxis]] -
getTrailingPosition(child, crossAxis);
}
}
//
// This is the main routine that implements a subset of the flexbox layout
// algorithm
// described in the W3C CSS documentation: https://www.w3.org/TR/css3-flexbox/.
//
// Limitations of this algorithm, compared to the full standard:
// * Display property is always assumed to be 'flex' except for Text nodes,
// which
// are assumed to be 'inline-flex'.
// * The 'zIndex' property (or any form of z ordering) is not supported. Nodes
// are
// stacked in document order.
// * The 'order' property is not supported. The order of flex items is always
// defined
// by document order.
// * The 'visibility' property is always assumed to be 'visible'. Values of
// 'collapse'
// and 'hidden' are not supported.
// * The 'wrap' property supports only 'nowrap' (which is the default) or
// 'wrap'. The
// rarely-used 'wrap-reverse' is not supported.
// * Rather than allowing arbitrary combinations of flexGrow, flexShrink and
// flexBasis, this algorithm supports only the three most common
// combinations:
// flex: 0 is equiavlent to flex: 0 0 auto
// flex: n (where n is a positive value) is equivalent to flex: n 1 auto
// If POSITIVE_FLEX_IS_AUTO is 0, then it is equivalent to flex: n 0 0
// This is faster because the content doesn't need to be measured, but
// it's
// less flexible because the basis is always 0 and can't be overriden
// with
// the width/height attributes.
// flex: -1 (or any negative value) is equivalent to flex: 0 1 auto
// * Margins cannot be specified as 'auto'. They must be specified in terms of
// pixel
// values, and the default value is 0.
// * The 'baseline' value is not supported for alignItems and alignSelf
// properties.
// * Values of width, maxWidth, minWidth, height, maxHeight and minHeight must
// be
// specified as pixel values, not as percentages.
// * There is no support for calculation of dimensions based on intrinsic
// aspect ratios
// (e.g. images).
// * There is no support for forced breaks.
// * It does not support vertical inline directions (top-to-bottom or
// bottom-to-top text).
//
// Deviations from standard:
// * Section 4.5 of the spec indicates that all flex items have a default
// minimum
// main size. For text blocks, for example, this is the width of the widest
// word.
// Calculating the minimum width is expensive, so we forego it and assume a
// default
// minimum main size of 0.
// * Min/Max sizes in the main axis are not honored when resolving flexible
// lengths.
// * The spec indicates that the default value for 'flexDirection' is 'row',
// but
// the algorithm below assumes a default of 'column'.
//
// Input parameters:
// - node: current node to be sized and layed out
// - availableWidth & availableHeight: available size to be used for sizing
// the node
// or CSSUndefined if the size is not available; interpretation depends on
// layout
// flags
// - parentDirection: the inline (text) direction within the parent
// (left-to-right or
// right-to-left)
// - widthMeasureMode: indicates the sizing rules for the width (see below
// for explanation)
// - heightMeasureMode: indicates the sizing rules for the height (see below
// for explanation)
// - performLayout: specifies whether the caller is interested in just the
// dimensions
// of the node or it requires the entire node and its subtree to be layed
// out
// (with final positions)
//
// Details:
// This routine is called recursively to lay out subtrees of flexbox
// elements. It uses the
// information in node.style, which is treated as a read-only input. It is
// responsible for
// setting the layout.direction and layout.measuredDimensions fields for the
// input node as well
// as the layout.position and layout.lineIndex fields for its child nodes.
// The
// layout.measuredDimensions field includes any border or padding for the
// node but does
// not include margins.
//
// The spec describes four different layout modes: "fill available", "max
// content", "min
// content",
// and "fit content". Of these, we don't use "min content" because we don't
// support default
// minimum main sizes (see above for details). Each of our measure modes maps
// to a layout mode
// from the spec (https://www.w3.org/TR/css3-sizing/#terms):
// - CSSMeasureModeUndefined: max content
// - CSSMeasureModeExactly: fill available
// - CSSMeasureModeAtMost: fit content
//
// When calling layoutNodeImpl and layoutNodeInternal, if the caller passes
// an available size of
// undefined then it must also pass a measure mode of CSSMeasureModeUndefined
// in that dimension.
//
static void layoutNodeImpl(const CSSNodeRef node,
const float availableWidth,
const float availableHeight,
const CSSDirection parentDirection,
const CSSMeasureMode widthMeasureMode,
const CSSMeasureMode heightMeasureMode,
const bool performLayout) {
CSS_ASSERT(CSSValueIsUndefined(availableWidth) ? widthMeasureMode == CSSMeasureModeUndefined
: true,
"availableWidth is indefinite so widthMeasureMode must be "
"CSSMeasureModeUndefined");
CSS_ASSERT(CSSValueIsUndefined(availableHeight) ? heightMeasureMode == CSSMeasureModeUndefined
: true,
"availableHeight is indefinite so heightMeasureMode must be "
"CSSMeasureModeUndefined");
const float paddingAndBorderAxisRow = getPaddingAndBorderAxis(node, CSSFlexDirectionRow);
const float paddingAndBorderAxisColumn = getPaddingAndBorderAxis(node, CSSFlexDirectionColumn);
const float marginAxisRow = getMarginAxis(node, CSSFlexDirectionRow);
const float marginAxisColumn = getMarginAxis(node, CSSFlexDirectionColumn);
// Set the resolved resolution in the node's layout.
const CSSDirection direction = resolveDirection(node, parentDirection);
node->layout.direction = direction;
// For content (text) nodes, determine the dimensions based on the text
// contents.
if (node->measure && CSSNodeChildCount(node) == 0) {
const float innerWidth = availableWidth - marginAxisRow - paddingAndBorderAxisRow;
const float innerHeight = availableHeight - marginAxisColumn - paddingAndBorderAxisColumn;
if (widthMeasureMode == CSSMeasureModeExactly && heightMeasureMode == CSSMeasureModeExactly) {
// Don't bother sizing the text if both dimensions are already defined.
node->layout.measuredDimensions[CSSDimensionWidth] =
boundAxis(node, CSSFlexDirectionRow, availableWidth - marginAxisRow);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node, CSSFlexDirectionColumn, availableHeight - marginAxisColumn);
} else if (innerWidth <= 0 || innerHeight <= 0) {
// Don't bother sizing the text if there's no horizontal or vertical
// space.
node->layout.measuredDimensions[CSSDimensionWidth] = boundAxis(node, CSSFlexDirectionRow, 0);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node, CSSFlexDirectionColumn, 0);
} else {
// Measure the text under the current constraints.
const CSSSize measuredSize =
node->measure(node->context, innerWidth, widthMeasureMode, innerHeight, heightMeasureMode);
node->layout.measuredDimensions[CSSDimensionWidth] =
boundAxis(node,
CSSFlexDirectionRow,
(widthMeasureMode == CSSMeasureModeUndefined ||
widthMeasureMode == CSSMeasureModeAtMost)
? measuredSize.width + paddingAndBorderAxisRow
: availableWidth - marginAxisRow);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node,
CSSFlexDirectionColumn,
(heightMeasureMode == CSSMeasureModeUndefined ||
heightMeasureMode == CSSMeasureModeAtMost)
? measuredSize.height + paddingAndBorderAxisColumn
: availableHeight - marginAxisColumn);
}
return;
}
// For nodes with no children, use the available values if they were provided,
// or
// the minimum size as indicated by the padding and border sizes.
const uint32_t childCount = CSSNodeListCount(node->children);
if (childCount == 0) {
node->layout.measuredDimensions[CSSDimensionWidth] =
boundAxis(node,
CSSFlexDirectionRow,
(widthMeasureMode == CSSMeasureModeUndefined ||
widthMeasureMode == CSSMeasureModeAtMost)
? paddingAndBorderAxisRow
: availableWidth - marginAxisRow);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node,
CSSFlexDirectionColumn,
(heightMeasureMode == CSSMeasureModeUndefined ||
heightMeasureMode == CSSMeasureModeAtMost)
? paddingAndBorderAxisColumn
: availableHeight - marginAxisColumn);
return;
}
// If we're not being asked to perform a full layout, we can handle a number
// of common
// cases here without incurring the cost of the remaining function.
if (!performLayout) {
// If we're being asked to size the content with an at most constraint but
// there is no available
// width,
// the measurement will always be zero.
if (widthMeasureMode == CSSMeasureModeAtMost && availableWidth <= 0 &&
heightMeasureMode == CSSMeasureModeAtMost && availableHeight <= 0) {
node->layout.measuredDimensions[CSSDimensionWidth] = boundAxis(node, CSSFlexDirectionRow, 0);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node, CSSFlexDirectionColumn, 0);
return;
}
if (widthMeasureMode == CSSMeasureModeAtMost && availableWidth <= 0) {
node->layout.measuredDimensions[CSSDimensionWidth] = boundAxis(node, CSSFlexDirectionRow, 0);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node,
CSSFlexDirectionColumn,
CSSValueIsUndefined(availableHeight) ? 0
: (availableHeight - marginAxisColumn));
return;
}
if (heightMeasureMode == CSSMeasureModeAtMost && availableHeight <= 0) {
node->layout.measuredDimensions[CSSDimensionWidth] =
boundAxis(node,
CSSFlexDirectionRow,
CSSValueIsUndefined(availableWidth) ? 0 : (availableWidth - marginAxisRow));
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node, CSSFlexDirectionColumn, 0);
return;
}
// If we're being asked to use an exact width/height, there's no need to
// measure the children.
if (widthMeasureMode == CSSMeasureModeExactly && heightMeasureMode == CSSMeasureModeExactly) {
node->layout.measuredDimensions[CSSDimensionWidth] =
boundAxis(node, CSSFlexDirectionRow, availableWidth - marginAxisRow);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node, CSSFlexDirectionColumn, availableHeight - marginAxisColumn);
return;
}
}
// STEP 1: CALCULATE VALUES FOR REMAINDER OF ALGORITHM
const CSSFlexDirection mainAxis = resolveAxis(node->style.flexDirection, direction);
const CSSFlexDirection crossAxis = getCrossFlexDirection(mainAxis, direction);
const bool isMainAxisRow = isRowDirection(mainAxis);
const CSSJustify justifyContent = node->style.justifyContent;
const bool isNodeFlexWrap = node->style.flexWrap == CSSWrapTypeWrap;
CSSNodeRef firstAbsoluteChild = NULL;
CSSNodeRef currentAbsoluteChild = NULL;
const float leadingPaddingAndBorderMain = getLeadingPaddingAndBorder(node, mainAxis);
const float trailingPaddingAndBorderMain = getTrailingPaddingAndBorder(node, mainAxis);
const float leadingPaddingAndBorderCross = getLeadingPaddingAndBorder(node, crossAxis);
const float paddingAndBorderAxisMain = getPaddingAndBorderAxis(node, mainAxis);
const float paddingAndBorderAxisCross = getPaddingAndBorderAxis(node, crossAxis);
const CSSMeasureMode measureModeMainDim = isMainAxisRow ? widthMeasureMode : heightMeasureMode;
const CSSMeasureMode measureModeCrossDim = isMainAxisRow ? heightMeasureMode : widthMeasureMode;
// STEP 2: DETERMINE AVAILABLE SIZE IN MAIN AND CROSS DIRECTIONS
const float availableInnerWidth = availableWidth - marginAxisRow - paddingAndBorderAxisRow;
const float availableInnerHeight =
availableHeight - marginAxisColumn - paddingAndBorderAxisColumn;
const float availableInnerMainDim = isMainAxisRow ? availableInnerWidth : availableInnerHeight;
const float availableInnerCrossDim = isMainAxisRow ? availableInnerHeight : availableInnerWidth;
// STEP 3: DETERMINE FLEX BASIS FOR EACH ITEM
for (uint32_t i = 0; i < childCount; i++) {
const CSSNodeRef child = CSSNodeListGet(node->children, i);
if (performLayout) {
// Set the initial position (relative to the parent).
const CSSDirection childDirection = resolveDirection(child, direction);
setPosition(child, childDirection);
}
// Absolute-positioned children don't participate in flex layout. Add them
// to a list that we can process later.
if (child->style.positionType == CSSPositionTypeAbsolute) {
// Store a private linked list of absolutely positioned children
// so that we can efficiently traverse them later.
if (firstAbsoluteChild == NULL) {
firstAbsoluteChild = child;
}
if (currentAbsoluteChild != NULL) {
currentAbsoluteChild->nextChild = child;
}
currentAbsoluteChild = child;
child->nextChild = NULL;
} else {
computeChildFlexBasis(node,
child,
availableInnerWidth,
widthMeasureMode,
availableInnerHeight,
heightMeasureMode,
direction);
}
}
// STEP 4: COLLECT FLEX ITEMS INTO FLEX LINES
// Indexes of children that represent the first and last items in the line.
uint32_t startOfLineIndex = 0;
uint32_t endOfLineIndex = 0;
// Number of lines.
uint32_t lineCount = 0;
// Accumulated cross dimensions of all lines so far.
float totalLineCrossDim = 0;
// Max main dimension of all the lines.
float maxLineMainDim = 0;
for (; endOfLineIndex < childCount; lineCount++, startOfLineIndex = endOfLineIndex) {
// Number of items on the currently line. May be different than the
// difference
// between start and end indicates because we skip over absolute-positioned
// items.
uint32_t itemsOnLine = 0;
// sizeConsumedOnCurrentLine is accumulation of the dimensions and margin
// of all the children on the current line. This will be used in order to
// either set the dimensions of the node if none already exist or to compute
// the remaining space left for the flexible children.
float sizeConsumedOnCurrentLine = 0;
float totalFlexGrowFactors = 0;
float totalFlexShrinkScaledFactors = 0;
// Maintain a linked list of the child nodes that can shrink and/or grow.
CSSNodeRef firstRelativeChild = NULL;
CSSNodeRef currentRelativeChild = NULL;
// Add items to the current line until it's full or we run out of items.
for (uint32_t i = startOfLineIndex; i < childCount; i++, endOfLineIndex++) {
const CSSNodeRef child = CSSNodeListGet(node->children, i);
child->lineIndex = lineCount;
if (child->style.positionType != CSSPositionTypeAbsolute) {
const float outerFlexBasis =
child->layout.computedFlexBasis + getMarginAxis(child, mainAxis);
// If this is a multi-line flow and this item pushes us over the
// available size, we've
// hit the end of the current line. Break out of the loop and lay out
// the current line.
if (sizeConsumedOnCurrentLine + outerFlexBasis > availableInnerMainDim && isNodeFlexWrap &&
itemsOnLine > 0) {
break;
}
sizeConsumedOnCurrentLine += outerFlexBasis;
itemsOnLine++;
if (isFlex(child)) {
totalFlexGrowFactors += CSSNodeStyleGetFlexGrow(child);
// Unlike the grow factor, the shrink factor is scaled relative to the
// child
// dimension.
totalFlexShrinkScaledFactors +=
-CSSNodeStyleGetFlexShrink(child) * child->layout.computedFlexBasis;
}
// Store a private linked list of children that need to be layed out.
if (firstRelativeChild == NULL) {
firstRelativeChild = child;
}
if (currentRelativeChild != NULL) {
currentRelativeChild->nextChild = child;
}
currentRelativeChild = child;
child->nextChild = NULL;
}
}
// If we don't need to measure the cross axis, we can skip the entire flex
// step.
const bool canSkipFlex = !performLayout && measureModeCrossDim == CSSMeasureModeExactly;
// In order to position the elements in the main axis, we have two
// controls. The space between the beginning and the first element
// and the space between each two elements.
float leadingMainDim = 0;
float betweenMainDim = 0;
// STEP 5: RESOLVING FLEXIBLE LENGTHS ON MAIN AXIS
// Calculate the remaining available space that needs to be allocated.
// If the main dimension size isn't known, it is computed based on
// the line length, so there's no more space left to distribute.
float remainingFreeSpace = 0;
if (!CSSValueIsUndefined(availableInnerMainDim)) {
remainingFreeSpace = availableInnerMainDim - sizeConsumedOnCurrentLine;
} else if (sizeConsumedOnCurrentLine < 0) {
// availableInnerMainDim is indefinite which means the node is being sized
// based on its
// content.
// sizeConsumedOnCurrentLine is negative which means the node will
// allocate 0 pixels for
// its content. Consequently, remainingFreeSpace is 0 -
// sizeConsumedOnCurrentLine.
remainingFreeSpace = -sizeConsumedOnCurrentLine;
}
const float originalRemainingFreeSpace = remainingFreeSpace;
float deltaFreeSpace = 0;
if (!canSkipFlex) {
float childFlexBasis;
float flexShrinkScaledFactor;
float flexGrowFactor;
float baseMainSize;
float boundMainSize;
// Do two passes over the flex items to figure out how to distribute the
// remaining space.
// The first pass finds the items whose min/max constraints trigger,
// freezes them at those
// sizes, and excludes those sizes from the remaining space. The second
// pass sets the size
// of each flexible item. It distributes the remaining space amongst the
// items whose min/max
// constraints didn't trigger in pass 1. For the other items, it sets
// their sizes by forcing
// their min/max constraints to trigger again.
//
// This two pass approach for resolving min/max constraints deviates from
// the spec. The
// spec (https://www.w3.org/TR/css-flexbox-1/#resolve-flexible-lengths)
// describes a process
// that needs to be repeated a variable number of times. The algorithm
// implemented here
// won't handle all cases but it was simpler to implement and it mitigates
// performance
// concerns because we know exactly how many passes it'll do.
// First pass: detect the flex items whose min/max constraints trigger
float deltaFlexShrinkScaledFactors = 0;
float deltaFlexGrowFactors = 0;
currentRelativeChild = firstRelativeChild;
while (currentRelativeChild != NULL) {
childFlexBasis = currentRelativeChild->layout.computedFlexBasis;
if (remainingFreeSpace < 0) {
flexShrinkScaledFactor =
-CSSNodeStyleGetFlexShrink(currentRelativeChild) * childFlexBasis;
// Is this child able to shrink?
if (flexShrinkScaledFactor != 0) {
baseMainSize =
childFlexBasis +
remainingFreeSpace / totalFlexShrinkScaledFactors * flexShrinkScaledFactor;
boundMainSize = boundAxis(currentRelativeChild, mainAxis, baseMainSize);
if (baseMainSize != boundMainSize) {
// By excluding this item's size and flex factor from remaining,
// this item's
// min/max constraints should also trigger in the second pass
// resulting in the
// item's size calculation being identical in the first and second
// passes.
deltaFreeSpace -= boundMainSize - childFlexBasis;
deltaFlexShrinkScaledFactors -= flexShrinkScaledFactor;
}
}
} else if (remainingFreeSpace > 0) {
flexGrowFactor = CSSNodeStyleGetFlexGrow(currentRelativeChild);
// Is this child able to grow?
if (flexGrowFactor != 0) {
baseMainSize =
childFlexBasis + remainingFreeSpace / totalFlexGrowFactors * flexGrowFactor;
boundMainSize = boundAxis(currentRelativeChild, mainAxis, baseMainSize);
if (baseMainSize != boundMainSize) {
// By excluding this item's size and flex factor from remaining,
// this item's
// min/max constraints should also trigger in the second pass
// resulting in the
// item's size calculation being identical in the first and second
// passes.
deltaFreeSpace -= boundMainSize - childFlexBasis;
deltaFlexGrowFactors -= flexGrowFactor;
}
}
}
currentRelativeChild = currentRelativeChild->nextChild;
}
totalFlexShrinkScaledFactors += deltaFlexShrinkScaledFactors;
totalFlexGrowFactors += deltaFlexGrowFactors;
remainingFreeSpace += deltaFreeSpace;
// Second pass: resolve the sizes of the flexible items
deltaFreeSpace = 0;
currentRelativeChild = firstRelativeChild;
while (currentRelativeChild != NULL) {
childFlexBasis = currentRelativeChild->layout.computedFlexBasis;
float updatedMainSize = childFlexBasis;
if (remainingFreeSpace < 0) {
flexShrinkScaledFactor =
-CSSNodeStyleGetFlexShrink(currentRelativeChild) * childFlexBasis;
// Is this child able to shrink?
if (flexShrinkScaledFactor != 0) {
float childSize;
if (totalFlexShrinkScaledFactors == 0) {
childSize = childFlexBasis + flexShrinkScaledFactor;
} else {
childSize =
childFlexBasis +
(remainingFreeSpace / totalFlexShrinkScaledFactors) * flexShrinkScaledFactor;
}
updatedMainSize = boundAxis(currentRelativeChild, mainAxis, childSize);
}
} else if (remainingFreeSpace > 0) {
flexGrowFactor = CSSNodeStyleGetFlexGrow(currentRelativeChild);
// Is this child able to grow?
if (flexGrowFactor != 0) {
updatedMainSize =
boundAxis(currentRelativeChild,
mainAxis,
childFlexBasis +
remainingFreeSpace / totalFlexGrowFactors * flexGrowFactor);
}
}
deltaFreeSpace -= updatedMainSize - childFlexBasis;
float childWidth;
float childHeight;
CSSMeasureMode childWidthMeasureMode;
CSSMeasureMode childHeightMeasureMode;
if (isMainAxisRow) {
childWidth = updatedMainSize + getMarginAxis(currentRelativeChild, CSSFlexDirectionRow);
childWidthMeasureMode = CSSMeasureModeExactly;
if (!CSSValueIsUndefined(availableInnerCrossDim) &&
!isStyleDimDefined(currentRelativeChild, CSSFlexDirectionColumn) &&
heightMeasureMode == CSSMeasureModeExactly &&
getAlignItem(node, currentRelativeChild) == CSSAlignStretch) {
childHeight = availableInnerCrossDim;
childHeightMeasureMode = CSSMeasureModeExactly;
} else if (!isStyleDimDefined(currentRelativeChild, CSSFlexDirectionColumn)) {
childHeight = availableInnerCrossDim;
childHeightMeasureMode =
CSSValueIsUndefined(childHeight) ? CSSMeasureModeUndefined : CSSMeasureModeAtMost;
} else {
childHeight = currentRelativeChild->style.dimensions[CSSDimensionHeight] +
getMarginAxis(currentRelativeChild, CSSFlexDirectionColumn);
childHeightMeasureMode = CSSMeasureModeExactly;
}
} else {
childHeight =
updatedMainSize + getMarginAxis(currentRelativeChild, CSSFlexDirectionColumn);
childHeightMeasureMode = CSSMeasureModeExactly;
if (!CSSValueIsUndefined(availableInnerCrossDim) &&
!isStyleDimDefined(currentRelativeChild, CSSFlexDirectionRow) &&
widthMeasureMode == CSSMeasureModeExactly &&
getAlignItem(node, currentRelativeChild) == CSSAlignStretch) {
childWidth = availableInnerCrossDim;
childWidthMeasureMode = CSSMeasureModeExactly;
} else if (!isStyleDimDefined(currentRelativeChild, CSSFlexDirectionRow)) {
childWidth = availableInnerCrossDim;
childWidthMeasureMode =
CSSValueIsUndefined(childWidth) ? CSSMeasureModeUndefined : CSSMeasureModeAtMost;
} else {
childWidth = currentRelativeChild->style.dimensions[CSSDimensionWidth] +
getMarginAxis(currentRelativeChild, CSSFlexDirectionRow);
childWidthMeasureMode = CSSMeasureModeExactly;
}
}
const bool requiresStretchLayout =
!isStyleDimDefined(currentRelativeChild, crossAxis) &&
getAlignItem(node, currentRelativeChild) == CSSAlignStretch;
// Recursively call the layout algorithm for this child with the updated
// main size.
layoutNodeInternal(currentRelativeChild,
childWidth,
childHeight,
direction,
childWidthMeasureMode,
childHeightMeasureMode,
performLayout && !requiresStretchLayout,
"flex");
currentRelativeChild = currentRelativeChild->nextChild;
}
}
remainingFreeSpace = originalRemainingFreeSpace + deltaFreeSpace;
// STEP 6: MAIN-AXIS JUSTIFICATION & CROSS-AXIS SIZE DETERMINATION
// At this point, all the children have their dimensions set in the main
// axis.
// Their dimensions are also set in the cross axis with the exception of
// items
// that are aligned "stretch". We need to compute these stretch values and
// set the final positions.
// If we are using "at most" rules in the main axis. Calculate the remaining space when
// constraint by the min size defined for the main axis.
if (measureModeMainDim == CSSMeasureModeAtMost && remainingFreeSpace > 0) {
if (!CSSValueIsUndefined(node->style.minDimensions[dim[mainAxis]]) &&
node->style.minDimensions[dim[mainAxis]] >= 0) {
remainingFreeSpace = fmax(0,
node->style.minDimensions[dim[mainAxis]] -
(availableInnerMainDim - remainingFreeSpace));
} else {
remainingFreeSpace = 0;
}
}
switch (justifyContent) {
case CSSJustifyCenter:
leadingMainDim = remainingFreeSpace / 2;
break;
case CSSJustifyFlexEnd:
leadingMainDim = remainingFreeSpace;
break;
case CSSJustifySpaceBetween:
if (itemsOnLine > 1) {
betweenMainDim = fmaxf(remainingFreeSpace, 0) / (itemsOnLine - 1);
} else {
betweenMainDim = 0;
}
break;
case CSSJustifySpaceAround:
// Space on the edges is half of the space between elements
betweenMainDim = remainingFreeSpace / itemsOnLine;
leadingMainDim = betweenMainDim / 2;
break;
case CSSJustifyFlexStart:
break;
}
float mainDim = leadingPaddingAndBorderMain + leadingMainDim;
float crossDim = 0;
for (uint32_t i = startOfLineIndex; i < endOfLineIndex; i++) {
const CSSNodeRef child = CSSNodeListGet(node->children, i);
if (child->style.positionType == CSSPositionTypeAbsolute &&
isLeadingPosDefined(child, mainAxis)) {
if (performLayout) {
// In case the child is position absolute and has left/top being
// defined, we override the position to whatever the user said
// (and margin/border).
child->layout.position[pos[mainAxis]] = getLeadingPosition(child, mainAxis) +
getLeadingBorder(node, mainAxis) +
getLeadingMargin(child, mainAxis);
}
} else {
if (performLayout) {
// If the child is position absolute (without top/left) or relative,
// we put it at the current accumulated offset.
child->layout.position[pos[mainAxis]] += mainDim;
}
// Now that we placed the element, we need to update the variables.
// We need to do that only for relative elements. Absolute elements
// do not take part in that phase.
if (child->style.positionType == CSSPositionTypeRelative) {
if (canSkipFlex) {
// If we skipped the flex step, then we can't rely on the
// measuredDims because
// they weren't computed. This means we can't call getDimWithMargin.
mainDim +=
betweenMainDim + getMarginAxis(child, mainAxis) + child->layout.computedFlexBasis;
crossDim = availableInnerCrossDim;
} else {
// The main dimension is the sum of all the elements dimension plus
// the spacing.
mainDim += betweenMainDim + getDimWithMargin(child, mainAxis);
// The cross dimension is the max of the elements dimension since
// there
// can only be one element in that cross dimension.
crossDim = fmaxf(crossDim, getDimWithMargin(child, crossAxis));
}
}
}
}
mainDim += trailingPaddingAndBorderMain;
float containerCrossAxis = availableInnerCrossDim;
if (measureModeCrossDim == CSSMeasureModeUndefined ||
measureModeCrossDim == CSSMeasureModeAtMost) {
// Compute the cross axis from the max cross dimension of the children.
containerCrossAxis = boundAxis(node, crossAxis, crossDim + paddingAndBorderAxisCross) -
paddingAndBorderAxisCross;
if (measureModeCrossDim == CSSMeasureModeAtMost) {
containerCrossAxis = fminf(containerCrossAxis, availableInnerCrossDim);
}
}
// If there's no flex wrap, the cross dimension is defined by the container.
if (!isNodeFlexWrap && measureModeCrossDim == CSSMeasureModeExactly) {
crossDim = availableInnerCrossDim;
}
// Clamp to the min/max size specified on the container.
crossDim = boundAxis(node, crossAxis, crossDim + paddingAndBorderAxisCross) -
paddingAndBorderAxisCross;
// STEP 7: CROSS-AXIS ALIGNMENT
// We can skip child alignment if we're just measuring the container.
if (performLayout) {
for (uint32_t i = startOfLineIndex; i < endOfLineIndex; i++) {
const CSSNodeRef child = CSSNodeListGet(node->children, i);
if (child->style.positionType == CSSPositionTypeAbsolute) {
// If the child is absolutely positioned and has a
// top/left/bottom/right
// set, override all the previously computed positions to set it
// correctly.
if (isLeadingPosDefined(child, crossAxis)) {
child->layout.position[pos[crossAxis]] = getLeadingPosition(child, crossAxis) +
getLeadingBorder(node, crossAxis) +
getLeadingMargin(child, crossAxis);
} else {
child->layout.position[pos[crossAxis]] =
leadingPaddingAndBorderCross + getLeadingMargin(child, crossAxis);
}
} else {
float leadingCrossDim = leadingPaddingAndBorderCross;
// For a relative children, we're either using alignItems (parent) or
// alignSelf (child) in order to determine the position in the cross
// axis
const CSSAlign alignItem = getAlignItem(node, child);
// If the child uses align stretch, we need to lay it out one more
// time, this time
// forcing the cross-axis size to be the computed cross size for the
// current line.
if (alignItem == CSSAlignStretch) {
const bool isCrossSizeDefinite =
(isMainAxisRow && isStyleDimDefined(child, CSSFlexDirectionColumn)) ||
(!isMainAxisRow && isStyleDimDefined(child, CSSFlexDirectionRow));
float childWidth;
float childHeight;
CSSMeasureMode childWidthMeasureMode;
CSSMeasureMode childHeightMeasureMode;
if (isMainAxisRow) {
childHeight = crossDim;
childWidth = child->layout.measuredDimensions[CSSDimensionWidth] +
getMarginAxis(child, CSSFlexDirectionRow);
} else {
childWidth = crossDim;
childHeight = child->layout.measuredDimensions[CSSDimensionHeight] +
getMarginAxis(child, CSSFlexDirectionColumn);
}
// If the child defines a definite size for its cross axis, there's
// no need to stretch.
if (!isCrossSizeDefinite) {
childWidthMeasureMode =
CSSValueIsUndefined(childWidth) ? CSSMeasureModeUndefined : CSSMeasureModeExactly;
childHeightMeasureMode = CSSValueIsUndefined(childHeight) ? CSSMeasureModeUndefined
: CSSMeasureModeExactly;
layoutNodeInternal(child,
childWidth,
childHeight,
direction,
childWidthMeasureMode,
childHeightMeasureMode,
true,
"stretch");
}
} else if (alignItem != CSSAlignFlexStart) {
const float remainingCrossDim = containerCrossAxis - getDimWithMargin(child, crossAxis);
if (alignItem == CSSAlignCenter) {
leadingCrossDim += remainingCrossDim / 2;
} else { // CSSAlignFlexEnd
leadingCrossDim += remainingCrossDim;
}
}
// And we apply the position
child->layout.position[pos[crossAxis]] += totalLineCrossDim + leadingCrossDim;
}
}
}
totalLineCrossDim += crossDim;
maxLineMainDim = fmaxf(maxLineMainDim, mainDim);
}
// STEP 8: MULTI-LINE CONTENT ALIGNMENT
if (lineCount > 1 && performLayout && !CSSValueIsUndefined(availableInnerCrossDim)) {
const float remainingAlignContentDim = availableInnerCrossDim - totalLineCrossDim;
float crossDimLead = 0;
float currentLead = leadingPaddingAndBorderCross;
switch (node->style.alignContent) {
case CSSAlignFlexEnd:
currentLead += remainingAlignContentDim;
break;
case CSSAlignCenter:
currentLead += remainingAlignContentDim / 2;
break;
case CSSAlignStretch:
if (availableInnerCrossDim > totalLineCrossDim) {
crossDimLead = (remainingAlignContentDim / lineCount);
}
break;
case CSSAlignAuto:
case CSSAlignFlexStart:
break;
}
uint32_t endIndex = 0;
for (uint32_t i = 0; i < lineCount; i++) {
uint32_t startIndex = endIndex;
uint32_t ii;
// compute the line's height and find the endIndex
float lineHeight = 0;
for (ii = startIndex; ii < childCount; ii++) {
const CSSNodeRef child = CSSNodeListGet(node->children, ii);
if (child->style.positionType == CSSPositionTypeRelative) {
if (child->lineIndex != i) {
break;
}
if (isLayoutDimDefined(child, crossAxis)) {
lineHeight = fmaxf(lineHeight,
child->layout.measuredDimensions[dim[crossAxis]] +
getMarginAxis(child, crossAxis));
}
}
}
endIndex = ii;
lineHeight += crossDimLead;
if (performLayout) {
for (ii = startIndex; ii < endIndex; ii++) {
const CSSNodeRef child = CSSNodeListGet(node->children, ii);
if (child->style.positionType == CSSPositionTypeRelative) {
switch (getAlignItem(node, child)) {
case CSSAlignFlexStart: {
child->layout.position[pos[crossAxis]] =
currentLead + getLeadingMargin(child, crossAxis);
break;
}
case CSSAlignFlexEnd: {
child->layout.position[pos[crossAxis]] =
currentLead + lineHeight - getTrailingMargin(child, crossAxis) -
child->layout.measuredDimensions[dim[crossAxis]];
break;
}
case CSSAlignCenter: {
float childHeight = child->layout.measuredDimensions[dim[crossAxis]];
child->layout.position[pos[crossAxis]] =
currentLead + (lineHeight - childHeight) / 2;
break;
}
case CSSAlignStretch: {
child->layout.position[pos[crossAxis]] =
currentLead + getLeadingMargin(child, crossAxis);
// TODO(prenaux): Correctly set the height of items with indefinite
// (auto) crossAxis dimension.
break;
}
case CSSAlignAuto:
break;
}
}
}
}
currentLead += lineHeight;
}
}
// STEP 9: COMPUTING FINAL DIMENSIONS
node->layout.measuredDimensions[CSSDimensionWidth] =
boundAxis(node, CSSFlexDirectionRow, availableWidth - marginAxisRow);
node->layout.measuredDimensions[CSSDimensionHeight] =
boundAxis(node, CSSFlexDirectionColumn, availableHeight - marginAxisColumn);
// If the user didn't specify a width or height for the node, set the
// dimensions based on the children.
if (measureModeMainDim == CSSMeasureModeUndefined) {
// Clamp the size to the min/max size, if specified, and make sure it
// doesn't go below the padding and border amount.
node->layout.measuredDimensions[dim[mainAxis]] = boundAxis(node, mainAxis, maxLineMainDim);
} else if (measureModeMainDim == CSSMeasureModeAtMost) {
node->layout.measuredDimensions[dim[mainAxis]] =
fmaxf(fminf(availableInnerMainDim + paddingAndBorderAxisMain,
boundAxisWithinMinAndMax(node, mainAxis, maxLineMainDim)),
paddingAndBorderAxisMain);
}
if (measureModeCrossDim == CSSMeasureModeUndefined) {
// Clamp the size to the min/max size, if specified, and make sure it
// doesn't go below the padding and border amount.
node->layout.measuredDimensions[dim[crossAxis]] =
boundAxis(node, crossAxis, totalLineCrossDim + paddingAndBorderAxisCross);
} else if (measureModeCrossDim == CSSMeasureModeAtMost) {
node->layout.measuredDimensions[dim[crossAxis]] =
fmaxf(fminf(availableInnerCrossDim + paddingAndBorderAxisCross,
boundAxisWithinMinAndMax(node,
crossAxis,
totalLineCrossDim + paddingAndBorderAxisCross)),
paddingAndBorderAxisCross);
}
if (performLayout) {
// STEP 10: SIZING AND POSITIONING ABSOLUTE CHILDREN
for (currentAbsoluteChild = firstAbsoluteChild; currentAbsoluteChild != NULL;
currentAbsoluteChild = currentAbsoluteChild->nextChild) {
absoluteLayoutChild(
node, currentAbsoluteChild, availableInnerWidth, widthMeasureMode, direction);
}
// STEP 11: SETTING TRAILING POSITIONS FOR CHILDREN
const bool needsMainTrailingPos =
mainAxis == CSSFlexDirectionRowReverse || mainAxis == CSSFlexDirectionColumnReverse;
const bool needsCrossTrailingPos =
CSSFlexDirectionRowReverse || crossAxis == CSSFlexDirectionColumnReverse;
// Set trailing position if necessary.
if (needsMainTrailingPos || needsCrossTrailingPos) {
for (uint32_t i = 0; i < childCount; i++) {
const CSSNodeRef child = CSSNodeListGet(node->children, i);
if (needsMainTrailingPos) {
setTrailingPosition(node, child, mainAxis);
}
if (needsCrossTrailingPos) {
setTrailingPosition(node, child, crossAxis);
}
}
}
}
}
uint32_t gDepth = 0;
bool gPrintTree = false;
bool gPrintChanges = false;
bool gPrintSkips = false;
static const char *spacer = " ";
static const char *getSpacer(const unsigned long level) {
const unsigned long spacerLen = strlen(spacer);
if (level > spacerLen) {
return &spacer[0];
} else {
return &spacer[spacerLen - level];
}
}
static const char *getModeName(const CSSMeasureMode mode, const bool performLayout) {
const char *kMeasureModeNames[CSSMeasureModeCount] = {"UNDEFINED", "EXACTLY", "AT_MOST"};
const char *kLayoutModeNames[CSSMeasureModeCount] = {"LAY_UNDEFINED",
"LAY_EXACTLY",
"LAY_AT_"
"MOST"};
if (mode >= CSSMeasureModeCount) {
return "";
}
return performLayout ? kLayoutModeNames[mode] : kMeasureModeNames[mode];
}
static inline bool newSizeIsExactAndMatchesOldMeasuredSize(CSSMeasureMode sizeMode,
float size,
float lastComputedSize) {
return sizeMode == CSSMeasureModeExactly && eq(size, lastComputedSize);
}
static inline bool oldSizeIsUnspecifiedAndStillFits(CSSMeasureMode sizeMode,
float size,
CSSMeasureMode lastSizeMode,
float lastComputedSize) {
return sizeMode == CSSMeasureModeAtMost && lastSizeMode == CSSMeasureModeUndefined &&
size >= lastComputedSize;
}
static inline bool newMeasureSizeIsStricterAndStillValid(CSSMeasureMode sizeMode,
float size,
CSSMeasureMode lastSizeMode,
float lastSize,
float lastComputedSize) {
return lastSizeMode == CSSMeasureModeAtMost && sizeMode == CSSMeasureModeAtMost &&
lastSize > size && lastComputedSize <= size;
}
static bool CSSNodeCanUseCachedMeasurement(const bool isTextNode,
const CSSMeasureMode widthMode,
const float width,
const CSSMeasureMode heightMode,
const float height,
const CSSMeasureMode lastWidthMode,
const float lastWidth,
const CSSMeasureMode lastHeightMode,
const float lastHeight,
const float lastComputedWidth,
const float lastComputedHeight,
const float marginRow,
const float marginColumn) {
if (lastComputedHeight < 0 || lastComputedWidth < 0) {
return false;
}
const bool hasSameWidthSpec = lastWidthMode == widthMode && eq(lastWidth, width);
const bool hasSameHeightSpec = lastHeightMode == heightMode && eq(lastHeight, height);
const bool widthIsCompatible =
hasSameWidthSpec ||
newSizeIsExactAndMatchesOldMeasuredSize(widthMode, width - marginRow, lastComputedWidth) ||
oldSizeIsUnspecifiedAndStillFits(widthMode,
width - marginRow,
lastWidthMode,
lastComputedWidth) ||
newMeasureSizeIsStricterAndStillValid(
widthMode, width - marginRow, lastWidthMode, lastWidth, lastComputedWidth);
const bool heightIsCompatible = isTextNode || hasSameHeightSpec ||
newSizeIsExactAndMatchesOldMeasuredSize(heightMode,
height - marginColumn,
lastComputedHeight) ||
oldSizeIsUnspecifiedAndStillFits(heightMode,
height - marginColumn,
lastHeightMode,
lastComputedHeight) ||
newMeasureSizeIsStricterAndStillValid(heightMode,
height - marginColumn,
lastHeightMode,
lastHeight,
lastComputedHeight);
return widthIsCompatible && heightIsCompatible;
}
//
// This is a wrapper around the layoutNodeImpl function. It determines
// whether the layout request is redundant and can be skipped.
//
// Parameters:
// Input parameters are the same as layoutNodeImpl (see above)
// Return parameter is true if layout was performed, false if skipped
//
bool layoutNodeInternal(const CSSNodeRef node,
const float availableWidth,
const float availableHeight,
const CSSDirection parentDirection,
const CSSMeasureMode widthMeasureMode,
const CSSMeasureMode heightMeasureMode,
const bool performLayout,
const char *reason) {
CSSLayout *layout = &node->layout;
gDepth++;
const bool needToVisitNode =
(node->isDirty && layout->generationCount != gCurrentGenerationCount) ||
layout->lastParentDirection != parentDirection;
if (needToVisitNode) {
// Invalidate the cached results.
layout->nextCachedMeasurementsIndex = 0;
layout->cachedLayout.widthMeasureMode = (CSSMeasureMode) -1;
layout->cachedLayout.heightMeasureMode = (CSSMeasureMode) -1;
layout->cachedLayout.computedWidth = -1;
layout->cachedLayout.computedHeight = -1;
}
CSSCachedMeasurement *cachedResults = NULL;
// Determine whether the results are already cached. We maintain a separate
// cache for layouts and measurements. A layout operation modifies the
// positions
// and dimensions for nodes in the subtree. The algorithm assumes that each
// node
// gets layed out a maximum of one time per tree layout, but multiple
// measurements
// may be required to resolve all of the flex dimensions.
// We handle nodes with measure functions specially here because they are the
// most
// expensive to measure, so it's worth avoiding redundant measurements if at
// all possible.
if (node->measure && CSSNodeChildCount(node) == 0) {
const float marginAxisRow = getMarginAxis(node, CSSFlexDirectionRow);
const float marginAxisColumn = getMarginAxis(node, CSSFlexDirectionColumn);
// First, try to use the layout cache.
if (CSSNodeCanUseCachedMeasurement(node->isTextNode,
widthMeasureMode,
availableWidth,
heightMeasureMode,
availableHeight,
layout->cachedLayout.widthMeasureMode,
layout->cachedLayout.availableWidth,
layout->cachedLayout.heightMeasureMode,
layout->cachedLayout.availableHeight,
layout->cachedLayout.computedWidth,
layout->cachedLayout.computedHeight,
marginAxisRow,
marginAxisColumn)) {
cachedResults = &layout->cachedLayout;
} else {
// Try to use the measurement cache.
for (uint32_t i = 0; i < layout->nextCachedMeasurementsIndex; i++) {
if (CSSNodeCanUseCachedMeasurement(node->isTextNode,
widthMeasureMode,
availableWidth,
heightMeasureMode,
availableHeight,
layout->cachedMeasurements[i].widthMeasureMode,
layout->cachedMeasurements[i].availableWidth,
layout->cachedMeasurements[i].heightMeasureMode,
layout->cachedMeasurements[i].availableHeight,
layout->cachedMeasurements[i].computedWidth,
layout->cachedMeasurements[i].computedHeight,
marginAxisRow,
marginAxisColumn)) {
cachedResults = &layout->cachedMeasurements[i];
break;
}
}
}
} else if (performLayout) {
if (eq(layout->cachedLayout.availableWidth, availableWidth) &&
eq(layout->cachedLayout.availableHeight, availableHeight) &&
layout->cachedLayout.widthMeasureMode == widthMeasureMode &&
layout->cachedLayout.heightMeasureMode == heightMeasureMode) {
cachedResults = &layout->cachedLayout;
}
} else {
for (uint32_t i = 0; i < layout->nextCachedMeasurementsIndex; i++) {
if (eq(layout->cachedMeasurements[i].availableWidth, availableWidth) &&
eq(layout->cachedMeasurements[i].availableHeight, availableHeight) &&
layout->cachedMeasurements[i].widthMeasureMode == widthMeasureMode &&
layout->cachedMeasurements[i].heightMeasureMode == heightMeasureMode) {
cachedResults = &layout->cachedMeasurements[i];
break;
}
}
}
if (!needToVisitNode && cachedResults != NULL) {
layout->measuredDimensions[CSSDimensionWidth] = cachedResults->computedWidth;
layout->measuredDimensions[CSSDimensionHeight] = cachedResults->computedHeight;
if (gPrintChanges && gPrintSkips) {
printf("%s%d.{[skipped] ", getSpacer(gDepth), gDepth);
if (node->print) {
node->print(node->context);
}
printf("wm: %s, hm: %s, aw: %f ah: %f => d: (%f, %f) %s\n",
getModeName(widthMeasureMode, performLayout),
getModeName(heightMeasureMode, performLayout),
availableWidth,
availableHeight,
cachedResults->computedWidth,
cachedResults->computedHeight,
reason);
}
} else {
if (gPrintChanges) {
printf("%s%d.{%s", getSpacer(gDepth), gDepth, needToVisitNode ? "*" : "");
if (node->print) {
node->print(node->context);
}
printf("wm: %s, hm: %s, aw: %f ah: %f %s\n",
getModeName(widthMeasureMode, performLayout),
getModeName(heightMeasureMode, performLayout),
availableWidth,
availableHeight,
reason);
}
layoutNodeImpl(node,
availableWidth,
availableHeight,
parentDirection,
widthMeasureMode,
heightMeasureMode,
performLayout);
if (gPrintChanges) {
printf("%s%d.}%s", getSpacer(gDepth), gDepth, needToVisitNode ? "*" : "");
if (node->print) {
node->print(node->context);
}
printf("wm: %s, hm: %s, d: (%f, %f) %s\n",
getModeName(widthMeasureMode, performLayout),
getModeName(heightMeasureMode, performLayout),
layout->measuredDimensions[CSSDimensionWidth],
layout->measuredDimensions[CSSDimensionHeight],
reason);
}
layout->lastParentDirection = parentDirection;
if (cachedResults == NULL) {
if (layout->nextCachedMeasurementsIndex == CSS_MAX_CACHED_RESULT_COUNT) {
if (gPrintChanges) {
printf("Out of cache entries!\n");
}
layout->nextCachedMeasurementsIndex = 0;
}
CSSCachedMeasurement *newCacheEntry;
if (performLayout) {
// Use the single layout cache entry.
newCacheEntry = &layout->cachedLayout;
} else {
// Allocate a new measurement cache entry.
newCacheEntry = &layout->cachedMeasurements[layout->nextCachedMeasurementsIndex];
layout->nextCachedMeasurementsIndex++;
}
newCacheEntry->availableWidth = availableWidth;
newCacheEntry->availableHeight = availableHeight;
newCacheEntry->widthMeasureMode = widthMeasureMode;
newCacheEntry->heightMeasureMode = heightMeasureMode;
newCacheEntry->computedWidth = layout->measuredDimensions[CSSDimensionWidth];
newCacheEntry->computedHeight = layout->measuredDimensions[CSSDimensionHeight];
}
}
if (performLayout) {
node->layout.dimensions[CSSDimensionWidth] = node->layout.measuredDimensions[CSSDimensionWidth];
node->layout.dimensions[CSSDimensionHeight] =
node->layout.measuredDimensions[CSSDimensionHeight];
node->hasNewLayout = true;
node->isDirty = false;
}
gDepth--;
layout->generationCount = gCurrentGenerationCount;
return (needToVisitNode || cachedResults == NULL);
}
void CSSNodeCalculateLayout(const CSSNodeRef node,
const float availableWidth,
const float availableHeight,
const CSSDirection parentDirection) {
// Increment the generation count. This will force the recursive routine to
// visit
// all dirty nodes at least once. Subsequent visits will be skipped if the
// input
// parameters don't change.
gCurrentGenerationCount++;
float width = availableWidth;
float height = availableHeight;
CSSMeasureMode widthMeasureMode = CSSMeasureModeUndefined;
CSSMeasureMode heightMeasureMode = CSSMeasureModeUndefined;
if (!CSSValueIsUndefined(width)) {
widthMeasureMode = CSSMeasureModeExactly;
} else if (isStyleDimDefined(node, CSSFlexDirectionRow)) {
width =
node->style.dimensions[dim[CSSFlexDirectionRow]] + getMarginAxis(node, CSSFlexDirectionRow);
widthMeasureMode = CSSMeasureModeExactly;
} else if (node->style.maxDimensions[CSSDimensionWidth] >= 0.0) {
width = node->style.maxDimensions[CSSDimensionWidth];
widthMeasureMode = CSSMeasureModeAtMost;
}
if (!CSSValueIsUndefined(height)) {
heightMeasureMode = CSSMeasureModeExactly;
} else if (isStyleDimDefined(node, CSSFlexDirectionColumn)) {
height = node->style.dimensions[dim[CSSFlexDirectionColumn]] +
getMarginAxis(node, CSSFlexDirectionColumn);
heightMeasureMode = CSSMeasureModeExactly;
} else if (node->style.maxDimensions[CSSDimensionHeight] >= 0.0) {
height = node->style.maxDimensions[CSSDimensionHeight];
heightMeasureMode = CSSMeasureModeAtMost;
}
if (layoutNodeInternal(node,
width,
height,
parentDirection,
widthMeasureMode,
heightMeasureMode,
true,
"initia"
"l")) {
setPosition(node, node->layout.direction);
if (gPrintTree) {
CSSNodePrint(node, CSSPrintOptionsLayout | CSSPrintOptionsChildren | CSSPrintOptionsStyle);
}
}
}
void CSSLayoutSetLogger(CSSLogger logger) {
gLogger = logger;
}
#ifdef CSS_ASSERT_FAIL_ENABLED
static CSSAssertFailFunc gAssertFailFunc;
void CSSAssertSetFailFunc(CSSAssertFailFunc func) {
gAssertFailFunc = func;
}
void CSSAssertFail(const char *message) {
if (gAssertFailFunc) {
(*gAssertFailFunc)(message);
}
}
#endif