Selection: Add support for the flexbox properties.

6 files changed, 675 insertions, 48 deletions

diff --git a/include/libcss/computed.h b/include/libcss/computed.h
index e15d0b0..af40abf 100644
--- a/include/libcss/computed.h
+++ b/include/libcss/computed.h
@@ -439,6 +439,41 @@ uint8_t css_computed_widows(
 		const css_computed_style *style,
 		int32_t *widows);
 
+uint8_t css_computed_align_content(
+		const css_computed_style *style);
+
+uint8_t css_computed_align_items(
+		const css_computed_style *style);
+
+uint8_t css_computed_align_self(
+		const css_computed_style *style);
+
+uint8_t css_computed_flex_basis(
+		const css_computed_style *style,
+		css_fixed *length,
+		css_unit *unit);
+
+uint8_t css_computed_flex_direction(
+		const css_computed_style *style);
+
+uint8_t css_computed_flex_grow(
+		const css_computed_style *style,
+		css_fixed *number);
+
+uint8_t css_computed_flex_shrink(
+		const css_computed_style *style,
+		css_fixed *number);
+
+uint8_t css_computed_flex_wrap(
+		const css_computed_style *style);
+
+uint8_t css_computed_justify_content(
+		const css_computed_style *style);
+
+uint8_t css_computed_order(
+		const css_computed_style *style,
+		int32_t *order);
+
 #ifdef __cplusplus
 }
 #endif
diff --git a/src/select/computed.c b/src/select/computed.c
index 03e7c15..ebb2b29 100644
--- a/src/select/computed.c
+++ b/src/select/computed.c
@@ -749,13 +749,39 @@ uint8_t css_computed_font_style(const css_computed_style *style)
 uint8_t css_computed_min_height(const css_computed_style *style,
 		css_fixed *length, css_unit *unit)
 {
-	return get_min_height(style, length, unit);
+	uint8_t min_height = get_min_height(style, length, unit);
+
+	if (min_height == CSS_MIN_HEIGHT_AUTO) {
+		uint8_t display = get_display(style);
+
+		if (display != CSS_DISPLAY_FLEX &&
+				display != CSS_DISPLAY_INLINE_FLEX) {
+			min_height = CSS_MIN_HEIGHT_SET;
+			*length = 0;
+			*unit = CSS_UNIT_PX;
+		}
+	}
+
+	return min_height;
 }
 
 uint8_t css_computed_min_width(const css_computed_style *style,
 		css_fixed *length, css_unit *unit)
 {
-	return get_min_width(style, length, unit);
+	uint8_t min_width = get_min_width(style, length, unit);
+
+	if (min_width == CSS_MIN_WIDTH_AUTO) {
+		uint8_t display = get_display(style);
+
+		if (display != CSS_DISPLAY_FLEX &&
+				display != CSS_DISPLAY_INLINE_FLEX) {
+			min_width = CSS_MIN_WIDTH_SET;
+			*length = 0;
+			*unit = CSS_UNIT_PX;
+		}
+	}
+
+	return min_width;
 }
 
 uint8_t css_computed_background_repeat(const css_computed_style *style)
@@ -927,6 +953,8 @@ uint8_t css_computed_display(const css_computed_style *style,
 			root /* 4. */) {
 		if (display == CSS_DISPLAY_INLINE_TABLE) {
 			return CSS_DISPLAY_TABLE;
+		} else if (display == CSS_DISPLAY_INLINE_FLEX) {
+			return CSS_DISPLAY_FLEX;
 		} else if (display == CSS_DISPLAY_INLINE ||
 				display == CSS_DISPLAY_RUN_IN ||
 				display == CSS_DISPLAY_TABLE_ROW_GROUP ||
@@ -1054,6 +1082,59 @@ uint8_t css_computed_widows(const css_computed_style *style,
 	return get_widows(style, widows);
 }
 
+uint8_t css_computed_align_content(const css_computed_style *style)
+{
+	return get_align_content(style);
+}
+
+uint8_t css_computed_align_items(const css_computed_style *style)
+{
+	return get_align_items(style);
+}
+
+uint8_t css_computed_align_self(const css_computed_style *style)
+{
+	return get_align_self(style);
+}
+
+uint8_t css_computed_flex_basis(const css_computed_style *style,
+		css_fixed *length, css_unit *unit)
+{
+	return get_flex_basis(style, length, unit);
+}
+
+uint8_t css_computed_flex_direction(const css_computed_style *style)
+{
+	return get_flex_direction(style);
+}
+
+uint8_t css_computed_flex_grow(const css_computed_style *style,
+		css_fixed *number)
+{
+	return get_flex_grow(style, number);
+}
+
+uint8_t css_computed_flex_shrink(const css_computed_style *style,
+		css_fixed *number)
+{
+	return get_flex_shrink(style, number);
+}
+
+uint8_t css_computed_flex_wrap(const css_computed_style *style)
+{
+	return get_flex_wrap(style);
+}
+
+uint8_t css_computed_justify_content(const css_computed_style *style)
+{
+	return get_justify_content(style);
+}
+
+uint8_t css_computed_order(const css_computed_style *style,
+		int32_t *order)
+{
+	return get_order(style, order);
+}
 
 /******************************************************************************
  * Library internals                                                          *
@@ -1205,6 +1286,12 @@ css_error css__compute_absolute_values(const css_computed_style *parent,
 	if (error != CSS_OK)
 		return error;
 
+	/* Fix up flex-basis */
+	error = compute_absolute_length(style, &ex_size.data.length,
+			get_flex_basis, set_flex_basis);
+	if (error != CSS_OK)
+		return error;
+
 	/* Uncommon properties */
 	if (style->i.uncommon != NULL) {
 		/* Fix up border-spacing */
diff --git a/src/select/computed.h b/src/select/computed.h
index 9f2abdd..a8934b1 100644
--- a/src/select/computed.h
+++ b/src/select/computed.h
@@ -160,8 +160,14 @@ struct css_computed_style_i {
  * visibility			  2
  * white_space			  3
  * box_sizing			  2
+ * align_content		  3
+ * align_items			  3
+ * align_self			  3
+ * flex_direction		  3
+ * flex_wrap			  2
+ * justify_content		  3
  *				---
- *				 86 bits
+ *				103 bits
  *
  * Colours are 32bits of AARRGGBB
  * Dimensions are encoded as a fixed point value + 4 bits of unit data
@@ -192,8 +198,8 @@ struct css_computed_style_i {
  * margin_left			  2 + 4		  4
  * max_height			  2 + 4		  4
  * max_width			  2 + 4		  4
- * min_height			  1 + 4		  4
- * min_width			  1 + 4		  4
+ * min_height			  2 + 4		  4
+ * min_width			  2 + 4		  4
  * padding_top			  1 + 4		  4
  * padding_right		  1 + 4		  4
  * padding_bottom		  1 + 4		  4
@@ -202,8 +208,12 @@ struct css_computed_style_i {
  * vertical_align		  4 + 4		  4
  * width			  2 + 4		  4
  * z_index			  2		  4
+ * flex_basis			  2 + 4		  4
+ * flex_grow			  1		  4
+ * flex_shrink			  1		  4
+ * order			  1		  4
  * 				---		---
- *				181 bits	140 + 2sizeof(ptr) bytes
+ *				196 bits	156 + 2sizeof(ptr) bytes
  *
  * Encode font family as an array of string objects, terminated with a
  * blank entry.
@@ -219,11 +229,11 @@ struct css_computed_style_i {
  * 				  1 bit		  sizeof(ptr) bytes
  *
  * 				___		___
- *				269 bits	140 + 4sizeof(ptr) bytes
+ *				303 bits	156 + 4sizeof(ptr) bytes
  *
- *				 34 bytes	140 + 4sizeof(ptr) bytes
+ *				 38 bytes	156 + 4sizeof(ptr) bytes
  *				===================
- *				174 + 4sizeof(ptr) bytes
+ *				194 + 4sizeof(ptr) bytes
  *
  * Bit allocations:
  *
@@ -247,8 +257,8 @@ struct css_computed_style_i {
  * 17 mmmmmmee	max-height          | empty-cells
  * 18 mmmmmmff	max-width           | float
  * 19 wwwwwwff	width               | font-style
- * 20 mmmmmbbb	min-height          | background-repeat
- * 21 mmmmmccc	min-width           | clear
+ * 20 mmmmmmff	min-height          | flex-wrap
+ * 21 mmmmmmsg	min-width           | flex-shrink           | flex_grow
  * 22 tttttxxx	padding-top         | overflow-x
  * 23 rrrrrppp	padding-right       | position
  * 24 bbbbboss	padding-bottom      | opacity               | box-sizing
@@ -262,9 +272,12 @@ struct css_computed_style_i {
  * 32 ffffllll	font-weight         | list-style-type
  * 33 oooottuu	outline-style       | table-layout          | unicode-bidi
  * 34 vvlltttt	visibility          | list-style-position   | text-align
- * 35 yyy.....	overflow-y          | <unused>
+ * 35 yyybbbaa	overflow-y          | background-repeat     | align-content1
+ * 36 bbbbbbaj	flex-basis          | align-content2        | justify_content1
+ * 37 fffcccjj	flex-direction      | clear                 | justify_content2
+ * 38 iiissso.	align-items         | align-self            | order
  */
-	uint8_t bits[35];
+	uint8_t bits[38];
 
 	uint8_t unused[1];
 
@@ -310,6 +323,14 @@ struct css_computed_style_i {
 
 	int32_t z_index;
 
+	css_fixed flex_basis;
+
+	css_fixed flex_grow;
+
+	css_fixed flex_shrink;
+
+	int32_t order;
+
 	css_computed_uncommon *uncommon;/**< Uncommon properties */
 	void *aural;			/**< Aural properties */
 };
diff --git a/src/select/dispatch.c b/src/select/dispatch.c
index 7af9000..3ab4c96 100644
--- a/src/select/dispatch.c
+++ b/src/select/dispatch.c
@@ -587,5 +587,55 @@ struct prop_table prop_dispatch[CSS_N_PROPERTIES] = {
 		PROPERTY_FUNCS(box_sizing),
 		0,
 		GROUP_NORMAL
+	},
+	{
+		PROPERTY_FUNCS(align_content),
+		0,
+		GROUP_NORMAL
+	},
+	{
+		PROPERTY_FUNCS(align_items),
+		0,
+		GROUP_NORMAL
+	},
+	{
+		PROPERTY_FUNCS(align_self),
+		0,
+		GROUP_NORMAL
+	},
+	{
+		PROPERTY_FUNCS(flex_basis),
+		0,
+		GROUP_NORMAL
+	},
+	{
+		PROPERTY_FUNCS(flex_direction),
+		0,
+		GROUP_NORMAL
+	},
+	{
+		PROPERTY_FUNCS(flex_grow),
+		0,
+		GROUP_NORMAL
+	},
+	{
+		PROPERTY_FUNCS(flex_shrink),
+		0,
+		GROUP_NORMAL
+	},
+	{
+		PROPERTY_FUNCS(flex_wrap),
+		0,
+		GROUP_NORMAL
+	},
+	{
+		PROPERTY_FUNCS(justify_content),
+		0,
+		GROUP_NORMAL
+	},
+	{
+		PROPERTY_FUNCS(order),
+		0,
+		GROUP_NORMAL
 	}
 };
diff --git a/src/select/propget.h b/src/select/propget.h
index 6719443..737dcd4 100644
--- a/src/select/propget.h
+++ b/src/select/propget.h
@@ -1268,7 +1268,7 @@ static inline uint8_t get_background_attachment(
 #undef BACKGROUND_ATTACHMENT_SHIFT
 #undef BACKGROUND_ATTACHMENT_INDEX
 
-#define BOX_SIZING_INDEX 34
+#define BOX_SIZING_INDEX 23
 #define BOX_SIZING_SHIFT 0
 #define BOX_SIZING_MASK  0x3
 static inline uint8_t get_box_sizing(
@@ -1457,8 +1457,8 @@ static inline uint8_t get_font_style(
 #undef FONT_STYLE_INDEX
 
 #define MIN_HEIGHT_INDEX 19
-#define MIN_HEIGHT_SHIFT 3
-#define MIN_HEIGHT_MASK  0xf8
+#define MIN_HEIGHT_SHIFT 2
+#define MIN_HEIGHT_MASK  0xfc
 static inline uint8_t get_min_height(
 		const css_computed_style *style,
 		css_fixed *length, css_unit *unit)
@@ -1467,21 +1467,21 @@ static inline uint8_t get_min_height(
 	bits &= MIN_HEIGHT_MASK;
 	bits >>= MIN_HEIGHT_SHIFT;
 
-	/* 5bits: uuuut : units | type */
-	if ((bits & 0x1) == CSS_MIN_HEIGHT_SET) {
+	/* 6bits: uuuutt : units | type */
+	if ((bits & 0x3) == CSS_MIN_HEIGHT_SET) {
 		*length = style->i.min_height;
-		*unit = bits >> 1;
+		*unit = bits >> 2;
 	}
 
-	return (bits & 0x1);
+	return (bits & 0x3);
 }
 #undef MIN_HEIGHT_MASK
 #undef MIN_HEIGHT_SHIFT
 #undef MIN_HEIGHT_INDEX
 
 #define MIN_WIDTH_INDEX 20
-#define MIN_WIDTH_SHIFT 3
-#define MIN_WIDTH_MASK  0xf8
+#define MIN_WIDTH_SHIFT 2
+#define MIN_WIDTH_MASK  0xfc
 static inline uint8_t get_min_width(
 		const css_computed_style *style,
 		css_fixed *length, css_unit *unit)
@@ -1490,21 +1490,21 @@ static inline uint8_t get_min_width(
 	bits &= MIN_WIDTH_MASK;
 	bits >>= MIN_WIDTH_SHIFT;
 
-	/* 5bits: uuuut : units | type */
-	if ((bits & 0x1) == CSS_MIN_WIDTH_SET) {
+	/* 6bits: uuuutt : units | type */
+	if ((bits & 0x3) == CSS_MIN_WIDTH_SET) {
 		*length = style->i.min_width;
-		*unit = bits >> 1;
+		*unit = bits >> 2;
 	}
 
-	return (bits & 0x1);
+	return (bits & 0x3);
 }
 #undef MIN_WIDTH_MASK
 #undef MIN_WIDTH_SHIFT
 #undef MIN_WIDTH_INDEX
 
-#define BACKGROUND_REPEAT_INDEX 19
-#define BACKGROUND_REPEAT_SHIFT 0
-#define BACKGROUND_REPEAT_MASK  0x7
+#define BACKGROUND_REPEAT_INDEX 34
+#define BACKGROUND_REPEAT_SHIFT 2
+#define BACKGROUND_REPEAT_MASK  0x1c
 static inline uint8_t get_background_repeat(
 		const css_computed_style *style)
 {
@@ -1519,9 +1519,9 @@ static inline uint8_t get_background_repeat(
 #undef BACKGROUND_REPEAT_SHIFT
 #undef BACKGROUND_REPEAT_INDEX
 
-#define CLEAR_INDEX 20
-#define CLEAR_SHIFT 0
-#define CLEAR_MASK  0x7
+#define CLEAR_INDEX 36
+#define CLEAR_SHIFT 2
+#define CLEAR_MASK  0x1c
 static inline uint8_t get_clear(
 		const css_computed_style *style)
 {
@@ -2189,4 +2189,220 @@ static inline uint8_t get_widows(
 #undef WIDOWS_SHIFT
 #undef WIDOWS_INDEX
 
+#define ALIGN_CONTENT_INDEX_A 34
+#define ALIGN_CONTENT_SHIFT_A 0
+#define ALIGN_CONTENT_MASK_A  0x3
+#define ALIGN_CONTENT_INDEX_B 35
+#define ALIGN_CONTENT_SHIFT_B 1
+#define ALIGN_CONTENT_MASK_B  0x2
+static inline uint8_t get_align_content(
+		const css_computed_style *style)
+{
+	uint8_t bits_a = style->i.bits[ALIGN_CONTENT_INDEX_A];
+	bits_a &= ALIGN_CONTENT_MASK_A;
+	bits_a >>= ALIGN_CONTENT_SHIFT_A;
+
+	uint8_t bits_b = style->i.bits[ALIGN_CONTENT_INDEX_B];
+	bits_b &= ALIGN_CONTENT_MASK_B;
+	bits_b >>= ALIGN_CONTENT_SHIFT_B;
+	/* Most significant bit out of three */
+	bits_b <<= 2;
+
+	uint8_t bits = bits_a | bits_b;
+
+	/* 3bits: type */
+	return bits;
+}
+#undef ALIGN_CONTENT_MASK_A
+#undef ALIGN_CONTENT_SHIFT_A
+#undef ALIGN_CONTENT_INDEX_A
+#undef ALIGN_CONTENT_MASK_B
+#undef ALIGN_CONTENT_SHIFT_B
+#undef ALIGN_CONTENT_INDEX_B
+
+#define FLEX_WRAP_INDEX 19
+#define FLEX_WRAP_SHIFT 0
+#define FLEX_WRAP_MASK  0x3
+static inline uint8_t get_flex_wrap(
+		const css_computed_style *style)
+{
+	uint8_t bits = style->i.bits[FLEX_WRAP_INDEX];
+	bits &= FLEX_WRAP_MASK;
+	bits >>= FLEX_WRAP_SHIFT;
+
+	/* 2bits: type */
+	return bits;
+}
+#undef FLEX_WRAP_MASK
+#undef FLEX_WRAP_SHIFT
+#undef FLEX_WRAP_INDEX
+
+#define FLEX_BASIS_INDEX 35
+#define FLEX_BASIS_SHIFT 2
+#define FLEX_BASIS_MASK  0xfc
+static inline uint8_t get_flex_basis(
+		const css_computed_style *style,
+		css_fixed *length, css_unit *unit)
+{
+	uint8_t bits = style->i.bits[FLEX_BASIS_INDEX];
+	bits &= FLEX_BASIS_MASK;
+	bits >>= FLEX_BASIS_SHIFT;
+
+	/* 6bits: uuuutt : units | type */
+	if ((bits & 0x3) == CSS_FLEX_BASIS_SET) {
+		*length = style->i.flex_basis;
+		*unit = bits >> 2;
+	}
+
+	return (bits & 0x3);
+}
+#undef FLEX_BASIS_MASK
+#undef FLEX_BASIS_SHIFT
+#undef FLEX_BASIS_INDEX
+
+#define FLEX_SHRINK_INDEX 20
+#define FLEX_SHRINK_SHIFT 1
+#define FLEX_SHRINK_MASK  0x2
+static inline uint8_t get_flex_shrink(
+		const css_computed_style *style, css_fixed *number)
+{
+	uint8_t bits = style->i.bits[FLEX_SHRINK_INDEX];
+	bits &= FLEX_SHRINK_MASK;
+	bits >>= FLEX_SHRINK_SHIFT;
+
+	/* 1bit: type */
+	if ((bits & 0x1) == CSS_FLEX_SHRINK_SET) {
+		*number = style->i.flex_shrink;
+	}
+
+	return (bits & 0x1);
+}
+#undef FLEX_SHRINK_MASK
+#undef FLEX_SHRINK_SHIFT
+#undef FLEX_SHRINK_INDEX
+
+#define FLEX_GROW_INDEX 20
+#define FLEX_GROW_SHIFT 0
+#define FLEX_GROW_MASK  0x1
+static inline uint8_t get_flex_grow(
+		const css_computed_style *style, css_fixed *number)
+{
+	uint8_t bits = style->i.bits[FLEX_GROW_INDEX];
+	bits &= FLEX_GROW_MASK;
+	bits >>= FLEX_GROW_SHIFT;
+
+	/* 1bit: type */
+	if ((bits & 0x1) == CSS_FLEX_GROW_SET) {
+		*number = style->i.flex_grow;
+	}
+
+	return (bits & 0x1);
+}
+#undef FLEX_GROW_MASK
+#undef FLEX_GROW_SHIFT
+#undef FLEX_GROW_INDEX
+
+#define FLEX_DIRECTION_INDEX 36
+#define FLEX_DIRECTION_SHIFT 5
+#define FLEX_DIRECTION_MASK  0xe0
+static inline uint8_t get_flex_direction(
+		const css_computed_style *style)
+{
+	uint8_t bits = style->i.bits[FLEX_DIRECTION_INDEX];
+	bits &= FLEX_DIRECTION_MASK;
+	bits >>= FLEX_DIRECTION_SHIFT;
+
+	/* 3bits: type */
+	return bits;
+}
+#undef FLEX_DIRECTION_MASK
+#undef FLEX_DIRECTION_SHIFT
+#undef FLEX_DIRECTION_INDEX
+
+#define JUSTIFY_CONTENT_INDEX_A 35
+#define JUSTIFY_CONTENT_SHIFT_A 0
+#define JUSTIFY_CONTENT_MASK_A  0x1
+#define JUSTIFY_CONTENT_INDEX_B 36
+#define JUSTIFY_CONTENT_SHIFT_B 0
+#define JUSTIFY_CONTENT_MASK_B  0x3
+static inline uint8_t get_justify_content(
+		const css_computed_style *style)
+{
+	uint8_t bits_a = style->i.bits[JUSTIFY_CONTENT_INDEX_A];
+	bits_a &= JUSTIFY_CONTENT_MASK_A;
+	bits_a >>= JUSTIFY_CONTENT_SHIFT_A;
+
+	uint8_t bits_b = style->i.bits[JUSTIFY_CONTENT_INDEX_B];
+	bits_b &= JUSTIFY_CONTENT_MASK_B;
+	bits_b >>= JUSTIFY_CONTENT_SHIFT_B;
+	/* Most significant two bits out of three */
+	bits_b <<= 1;
+
+	uint8_t bits = bits_a | bits_b;
+
+	/* 3bits: type */
+	return bits;
+}
+#undef JUSTIFY_CONTENT_MASK_A
+#undef JUSTIFY_CONTENT_SHIFT_A
+#undef JUSTIFY_CONTENT_INDEX_A
+#undef JUSTIFY_CONTENT_MASK_B
+#undef JUSTIFY_CONTENT_SHIFT_B
+#undef JUSTIFY_CONTENT_INDEX_B
+
+#define ORDER_INDEX 37
+#define ORDER_SHIFT 1
+#define ORDER_MASK  0x2
+static inline uint8_t get_order(
+		const css_computed_style *style, int32_t *number)
+{
+	uint8_t bits = style->i.bits[ORDER_INDEX];
+	bits &= ORDER_MASK;
+	bits >>= ORDER_SHIFT;
+
+	/* 1bit: type */
+	if ((bits & 0x1) == CSS_ORDER_SET) {
+		*number = style->i.order;
+	}
+
+	return (bits & 0x1);
+}
+#undef ORDER_MASK
+#undef ORDER_SHIFT
+#undef ORDER_INDEX
+
+#define ALIGN_ITEMS_INDEX 37
+#define ALIGN_ITEMS_SHIFT 5
+#define ALIGN_ITEMS_MASK  0xe0
+static inline uint8_t get_align_items(
+		const css_computed_style *style)
+{
+	uint8_t bits = style->i.bits[ALIGN_ITEMS_INDEX];
+	bits &= ALIGN_ITEMS_MASK;
+	bits >>= ALIGN_ITEMS_SHIFT;
+
+	/* 3bits: type */
+	return bits;
+}
+#undef ALIGN_ITEMS_MASK
+#undef ALIGN_ITEMS_SHIFT
+#undef ALIGN_ITEMS_INDEX
+
+#define ALIGN_SELF_INDEX 37
+#define ALIGN_SELF_SHIFT 2
+#define ALIGN_SELF_MASK  0x1c
+static inline uint8_t get_align_self(
+		const css_computed_style *style)
+{
+	uint8_t bits = style->i.bits[ALIGN_SELF_INDEX];
+	bits &= ALIGN_SELF_MASK;
+	bits >>= ALIGN_SELF_SHIFT;
+
+	/* 3bits: type */
+	return bits;
+}
+#undef ALIGN_SELF_MASK
+#undef ALIGN_SELF_SHIFT
+#undef ALIGN_SELF_INDEX
+
 #endif
diff --git a/src/select/propset.h b/src/select/propset.h
index 3f4038c..ea7ca48 100644
--- a/src/select/propset.h
+++ b/src/select/propset.h
@@ -908,7 +908,7 @@ static inline css_error set_background_image(
 			((type & 0x1) << BACKGROUND_IMAGE_SHIFT);
 
 	if (url != NULL) {
-                style->i.background_image = lwc_string_ref(url);
+		style->i.background_image = lwc_string_ref(url);
 	} else {
 		style->i.background_image = NULL;
 	}
@@ -1361,7 +1361,7 @@ static inline css_error set_background_attachment(
 #undef BACKGROUND_ATTACHMENT_SHIFT
 #undef BACKGROUND_ATTACHMENT_INDEX
 
-#define BOX_SIZING_INDEX 34
+#define BOX_SIZING_INDEX 23
 #define BOX_SIZING_SHIFT 0
 #define BOX_SIZING_MASK  0x3
 static inline css_error set_box_sizing(
@@ -1551,17 +1551,17 @@ static inline css_error set_font_style(
 #undef FONT_STYLE_INDEX
 
 #define MIN_HEIGHT_INDEX 19
-#define MIN_HEIGHT_SHIFT 3
-#define MIN_HEIGHT_MASK  0xf8
+#define MIN_HEIGHT_SHIFT 2
+#define MIN_HEIGHT_MASK  0xfc
 static inline css_error set_min_height(
 		css_computed_style *style, uint8_t type,
 		css_fixed length, css_unit unit)
 {
 	uint8_t *bits = &style->i.bits[MIN_HEIGHT_INDEX];
 
-	/* 5bits: uuuut : units | type */
+	/* 6bits: uuuutt : units | type */
 	*bits = (*bits & ~MIN_HEIGHT_MASK) |
-			(((type & 0x1) | (unit << 1)) << MIN_HEIGHT_SHIFT);
+			(((type & 0x3) | (unit << 2)) << MIN_HEIGHT_SHIFT);
 
 	style->i.min_height = length;
 
@@ -1572,17 +1572,17 @@ static inline css_error set_min_height(
 #undef MIN_HEIGHT_INDEX
 
 #define MIN_WIDTH_INDEX 20
-#define MIN_WIDTH_SHIFT 3
-#define MIN_WIDTH_MASK  0xf8
+#define MIN_WIDTH_SHIFT 2
+#define MIN_WIDTH_MASK  0xfc
 static inline css_error set_min_width(
 		css_computed_style *style, uint8_t type,
 		css_fixed length, css_unit unit)
 {
 	uint8_t *bits = &style->i.bits[MIN_WIDTH_INDEX];
 
-	/* 5bits: uuuut : units | type */
+	/* 6bits: uuuutt : units | type */
 	*bits = (*bits & ~MIN_WIDTH_MASK) |
-			(((type & 0x1) | (unit << 1)) << MIN_WIDTH_SHIFT);
+			(((type & 0x3) | (unit << 2)) << MIN_WIDTH_SHIFT);
 
 	style->i.min_width = length;
 
@@ -1592,9 +1592,9 @@ static inline css_error set_min_width(
 #undef MIN_WIDTH_SHIFT
 #undef MIN_WIDTH_INDEX
 
-#define BACKGROUND_REPEAT_INDEX 19
-#define BACKGROUND_REPEAT_SHIFT 0
-#define BACKGROUND_REPEAT_MASK  0x7
+#define BACKGROUND_REPEAT_INDEX 34
+#define BACKGROUND_REPEAT_SHIFT 2
+#define BACKGROUND_REPEAT_MASK  0x1c
 static inline css_error set_background_repeat(
 		css_computed_style *style, uint8_t type)
 {
@@ -1610,9 +1610,9 @@ static inline css_error set_background_repeat(
 #undef BACKGROUND_REPEAT_SHIFT
 #undef BACKGROUND_REPEAT_INDEX
 
-#define CLEAR_INDEX 20
-#define CLEAR_SHIFT 0
-#define CLEAR_MASK  0x7
+#define CLEAR_INDEX 36
+#define CLEAR_SHIFT 2
+#define CLEAR_MASK  0x1c
 static inline css_error set_clear(
 		css_computed_style *style, uint8_t type)
 {
@@ -2325,4 +2325,222 @@ static inline css_error set_widows(
 #undef WIDOWS_SHIFT
 #undef WIDOWS_MASK
 
+#define ALIGN_CONTENT_INDEX_A 34
+#define ALIGN_CONTENT_SHIFT_A 0
+#define ALIGN_CONTENT_MASK_A  0x3
+#define ALIGN_CONTENT_INDEX_B 35
+#define ALIGN_CONTENT_SHIFT_B 1
+#define ALIGN_CONTENT_MASK_B  0x2
+static inline css_error set_align_content(
+		css_computed_style *style, uint8_t type)
+{
+	uint8_t *bits_a = &style->i.bits[ALIGN_CONTENT_INDEX_A];
+	uint8_t *bits_b = &style->i.bits[ALIGN_CONTENT_INDEX_B];
+
+	/* type is 3bits: assigning the least significant two */
+	*bits_a = (*bits_a & ~ALIGN_CONTENT_MASK_A) |
+			((type & 0x3) << ALIGN_CONTENT_SHIFT_A);
+
+	/* type is 3bits: assigning the most significant one */
+	*bits_b = (*bits_b & ~ALIGN_CONTENT_MASK_B) |
+			(((type & 0x4) >> 2) << ALIGN_CONTENT_SHIFT_B);
+
+	return CSS_OK;
+}
+#undef ALIGN_CONTENT_MASK_A
+#undef ALIGN_CONTENT_SHIFT_A
+#undef ALIGN_CONTENT_INDEX_A
+#undef ALIGN_CONTENT_MASK_B
+#undef ALIGN_CONTENT_SHIFT_B
+#undef ALIGN_CONTENT_INDEX_B
+
+#define FLEX_WRAP_INDEX 19
+#define FLEX_WRAP_SHIFT 0
+#define FLEX_WRAP_MASK  0x3
+static inline css_error set_flex_wrap(
+		css_computed_style *style, uint8_t type)
+{
+	uint8_t *bits = &style->i.bits[FLEX_WRAP_INDEX];
+
+	/* 2bits: type */
+	*bits = (*bits & ~FLEX_WRAP_MASK) |
+			((type & 0x3) << FLEX_WRAP_SHIFT);
+
+	return CSS_OK;
+}
+#undef FLEX_WRAP_MASK
+#undef FLEX_WRAP_SHIFT
+#undef FLEX_WRAP_INDEX
+
+#define FLEX_BASIS_INDEX 35
+#define FLEX_BASIS_SHIFT 2
+#define FLEX_BASIS_MASK  0xfc
+static inline css_error set_flex_basis(
+		css_computed_style *style, uint8_t type,
+		css_fixed length, css_unit unit)
+{
+	uint8_t *bits = &style->i.bits[FLEX_BASIS_INDEX];
+
+	/* 6bits: uuuutt : units | type */
+	*bits = (*bits & ~FLEX_BASIS_MASK) |
+			(((type & 0x3) | (unit << 2)) << FLEX_BASIS_SHIFT);
+
+	style->i.flex_basis = length;
+
+	return CSS_OK;
+}
+
+#undef FLEX_BASIS_MASK
+#undef FLEX_BASIS_SHIFT
+#undef FLEX_BASIS_INDEX
+
+#define FLEX_SHRINK_INDEX 20
+#define FLEX_SHRINK_SHIFT 1
+#define FLEX_SHRINK_MASK  0x2
+static inline css_error set_flex_shrink(
+		css_computed_style *style, uint8_t type,
+		css_fixed number)
+{
+	uint8_t *bits = &style->i.bits[FLEX_SHRINK_INDEX];
+
+	/* 1bit: type */
+	*bits = (*bits & ~FLEX_SHRINK_MASK) |
+			((type & 0x1) << FLEX_SHRINK_SHIFT);
+
+	style->i.flex_shrink = number;
+
+	return CSS_OK;
+}
+
+#undef FLEX_SHRINK_MASK
+#undef FLEX_SHRINK_SHIFT
+#undef FLEX_SHRINK_INDEX
+
+#define FLEX_GROW_INDEX 20
+#define FLEX_GROW_SHIFT 0
+#define FLEX_GROW_MASK  0x1
+static inline css_error set_flex_grow(
+		css_computed_style *style, uint8_t type,
+		css_fixed number)
+{
+	uint8_t *bits = &style->i.bits[FLEX_GROW_INDEX];
+
+	/* 1bit: type */
+	*bits = (*bits & ~FLEX_GROW_MASK) |
+			((type & 0x1) << FLEX_GROW_SHIFT);
+
+	style->i.flex_grow = number;
+
+	return CSS_OK;
+}
+
+#undef FLEX_GROW_MASK
+#undef FLEX_GROW_SHIFT
+#undef FLEX_GROW_INDEX
+
+#define FLEX_DIRECTION_INDEX 36
+#define FLEX_DIRECTION_SHIFT 5
+#define FLEX_DIRECTION_MASK  0xe0
+static inline css_error set_flex_direction(
+		css_computed_style *style, uint8_t type)
+{
+	uint8_t *bits = &style->i.bits[FLEX_DIRECTION_INDEX];
+
+	/* 3bits: type */
+	*bits = (*bits & ~FLEX_DIRECTION_MASK) |
+			((type & 0x7) << FLEX_DIRECTION_SHIFT);
+
+	return CSS_OK;
+}
+#undef FLEX_DIRECTION_MASK
+#undef FLEX_DIRECTION_SHIFT
+#undef FLEX_DIRECTION_INDEX
+
+#define JUSTIFY_CONTENT_INDEX_A 35
+#define JUSTIFY_CONTENT_SHIFT_A 0
+#define JUSTIFY_CONTENT_MASK_A  0x1
+#define JUSTIFY_CONTENT_INDEX_B 36
+#define JUSTIFY_CONTENT_SHIFT_B 0
+#define JUSTIFY_CONTENT_MASK_B  0x3
+static inline css_error set_justify_content(
+		css_computed_style *style, uint8_t type)
+{
+	uint8_t *bits_a = &style->i.bits[JUSTIFY_CONTENT_INDEX_A];
+	uint8_t *bits_b = &style->i.bits[JUSTIFY_CONTENT_INDEX_B];
+
+	/* type is 3bits: assigning the least significant one */
+	*bits_a = (*bits_a & ~JUSTIFY_CONTENT_MASK_A) |
+			((type & 0x1) << JUSTIFY_CONTENT_SHIFT_A);
+
+	/* type is 3bits: assigning the most significant two */
+	*bits_b = (*bits_b & ~JUSTIFY_CONTENT_MASK_B) |
+			(((type & 0x6) >> 1) << JUSTIFY_CONTENT_SHIFT_B);
+
+	return CSS_OK;
+}
+#undef JUSTIFY_CONTENT_MASK_A
+#undef JUSTIFY_CONTENT_SHIFT_A
+#undef JUSTIFY_CONTENT_INDEX_A
+#undef JUSTIFY_CONTENT_MASK_B
+#undef JUSTIFY_CONTENT_SHIFT_B
+#undef JUSTIFY_CONTENT_INDEX_B
+
+#define ORDER_INDEX 37
+#define ORDER_SHIFT 1
+#define ORDER_MASK  0x2
+static inline css_error set_order(
+		css_computed_style *style, uint8_t type,
+		int32_t number)
+{
+	uint8_t *bits = &style->i.bits[ORDER_INDEX];
+
+	/* 1bit: type */
+	*bits = (*bits & ~ORDER_MASK) |
+			((type & 0x1) << ORDER_SHIFT);
+
+	style->i.order = number;
+
+	return CSS_OK;
+}
+
+#undef ORDER_MASK
+#undef ORDER_SHIFT
+#undef ORDER_INDEX
+
+#define ALIGN_ITEMS_INDEX 37
+#define ALIGN_ITEMS_SHIFT 5
+#define ALIGN_ITEMS_MASK  0xe0
+static inline css_error set_align_items(
+		css_computed_style *style, uint8_t type)
+{
+	uint8_t *bits = &style->i.bits[ALIGN_ITEMS_INDEX];
+
+	/* 3bits: type */
+	*bits = (*bits & ~ALIGN_ITEMS_MASK) |
+			((type & 0x7) << ALIGN_ITEMS_SHIFT);
+
+	return CSS_OK;
+}
+#undef ALIGN_ITEMS_MASK
+#undef ALIGN_ITEMS_SHIFT
+#undef ALIGN_ITEMS_INDEX
+
+#define ALIGN_SELF_INDEX 37
+#define ALIGN_SELF_SHIFT 2
+#define ALIGN_SELF_MASK  0x1c
+static inline css_error set_align_self(
+		css_computed_style *style, uint8_t type)
+{
+	uint8_t *bits = &style->i.bits[ALIGN_SELF_INDEX];
+
+	/* 3bits: type */
+	*bits = (*bits & ~ALIGN_SELF_MASK) |
+			((type & 0x7) << ALIGN_SELF_SHIFT);
+
+	return CSS_OK;
+}
+#undef ALIGN_SELF_MASK
+#undef ALIGN_SELF_SHIFT
+#undef ALIGN_SELF_INDEX
+
 #endif