Alter layout engine to conform closer to W3C spec
The primary goals of this change are: - Better conformance to the W3C flexbox standard (https://www.w3.org/TR/css-flexbox-1/) and a clear articulation of the areas where it deviates from the spec. - Support for flex-shrink. - Conformance with layout effects of "overflow: hidden". Specifically, here are the limitations of this implementation as compared to the W3C flexbox standard (this is also documented in Layout.js): - 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 0 0 - 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). And here is how the implementation deviates from the standard (this is also documented in Layout.js): - 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'.
This commit is contained in:
52
src/Layout.h
52
src/Layout.h
@@ -44,6 +44,11 @@ typedef enum {
|
||||
CSS_JUSTIFY_SPACE_AROUND
|
||||
} css_justify_t;
|
||||
|
||||
typedef enum {
|
||||
CSS_OVERFLOW_VISIBLE = 0,
|
||||
CSS_OVERFLOW_HIDDEN
|
||||
} css_overflow_t;
|
||||
|
||||
// Note: auto is only a valid value for alignSelf. It is NOT a valid value for
|
||||
// alignItems.
|
||||
typedef enum {
|
||||
@@ -79,7 +84,8 @@ typedef enum {
|
||||
typedef enum {
|
||||
CSS_MEASURE_MODE_UNDEFINED = 0,
|
||||
CSS_MEASURE_MODE_EXACTLY,
|
||||
CSS_MEASURE_MODE_AT_MOST
|
||||
CSS_MEASURE_MODE_AT_MOST,
|
||||
CSS_MEASURE_MODE_COUNT
|
||||
} css_measure_mode_t;
|
||||
|
||||
typedef enum {
|
||||
@@ -87,20 +93,40 @@ typedef enum {
|
||||
CSS_HEIGHT
|
||||
} css_dimension_t;
|
||||
|
||||
typedef struct {
|
||||
float available_width;
|
||||
float available_height;
|
||||
css_measure_mode_t width_measure_mode;
|
||||
css_measure_mode_t height_measure_mode;
|
||||
|
||||
float computed_width;
|
||||
float computed_height;
|
||||
} css_cached_measurement_t;
|
||||
|
||||
enum {
|
||||
// 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.
|
||||
CSS_MAX_CACHED_RESULT_COUNT = 16
|
||||
};
|
||||
|
||||
typedef struct {
|
||||
float position[4];
|
||||
float dimensions[2];
|
||||
css_direction_t direction;
|
||||
|
||||
float flex_basis;
|
||||
|
||||
// Instead of recomputing the entire layout every single time, we
|
||||
// cache some information to break early when nothing changed
|
||||
bool should_update;
|
||||
float last_requested_dimensions[2];
|
||||
float last_parent_max_width;
|
||||
float last_parent_max_height;
|
||||
float last_dimensions[2];
|
||||
float last_position[2];
|
||||
css_direction_t last_direction;
|
||||
int generation_count;
|
||||
css_direction_t last_parent_direction;
|
||||
|
||||
int next_cached_measurements_index;
|
||||
css_cached_measurement_t cached_measurements[CSS_MAX_CACHED_RESULT_COUNT];
|
||||
float measured_dimensions[2];
|
||||
|
||||
css_cached_measurement_t cached_layout;
|
||||
} css_layout_t;
|
||||
|
||||
typedef struct {
|
||||
@@ -116,6 +142,7 @@ typedef struct {
|
||||
css_align_t align_self;
|
||||
css_position_type_t position_type;
|
||||
css_wrap_type_t flex_wrap;
|
||||
css_overflow_t overflow;
|
||||
float flex;
|
||||
float margin[6];
|
||||
float position[4];
|
||||
@@ -143,8 +170,7 @@ struct css_node {
|
||||
int children_count;
|
||||
int line_index;
|
||||
|
||||
css_node_t *next_absolute_child;
|
||||
css_node_t *next_flex_child;
|
||||
css_node_t* next_child;
|
||||
|
||||
css_dim_t (*measure)(void *context, float width, css_measure_mode_t widthMode, float height, css_measure_mode_t heightMode);
|
||||
void (*print)(void *context);
|
||||
@@ -166,12 +192,8 @@ typedef enum {
|
||||
} css_print_options_t;
|
||||
void print_css_node(css_node_t *node, css_print_options_t options);
|
||||
|
||||
// Function that computes the layout!
|
||||
void layoutNode(css_node_t *node, float availableWidth, float availableHeight, css_direction_t parentDirection);
|
||||
bool isUndefined(float value);
|
||||
|
||||
// Function that computes the layout!
|
||||
void layoutNode(css_node_t *node, float maxWidth, float maxHeight, css_direction_t parentDirection);
|
||||
|
||||
// Reset the calculated layout values for a given node. You should call this before `layoutNode`.
|
||||
void resetNodeLayout(css_node_t *node);
|
||||
|
||||
#endif
|
||||
|
Reference in New Issue
Block a user