Adapt min-width and min-height to accept 'auto' as a value, computed as default if display is flex

10 files changed, 170 insertions, 101 deletions

diff --git a/docs/Bytecode b/docs/Bytecode
index 40813c6..01d4cff 100644
--- a/docs/Bytecode
+++ b/docs/Bytecode
@@ -680,8 +680,9 @@ Opcodes
 		bits 0-7 :
 			bit 7: set => length or percentage follows
 					bits 0-6: MBZ
-			       clear => Reserved for future expansion
-			       		bits 0-6: MBZ
+			bit 7 clear => keywords:
+				bits 0-6: 0000000 => auto,
+					  other   => rffe.
 
 37 - min-width
 	<value> (14bits) :
@@ -689,8 +690,9 @@ Opcodes
 		bits 0-7 :
 			bit 7: set => length or percentage follows
 					bits 0-6: MBZ
-			       clear => Reserved for future expansion
-			       		bits 0-6: MBZ
+			bit 7 clear => keywords:
+				bits 0-6: 0000000 => auto,
+					  other   => rffe.
 
 38 - orphans
 	<value> (14bits) :
diff --git a/include/libcss/properties.h b/include/libcss/properties.h
index caa5f83..2163068 100644
--- a/include/libcss/properties.h
+++ b/include/libcss/properties.h
@@ -630,11 +630,13 @@ enum css_max_width_e {
 enum css_min_height_e {
 	CSS_MIN_HEIGHT_INHERIT			= 0x0,
 	CSS_MIN_HEIGHT_SET			= 0x1,
+	CSS_MIN_HEIGHT_AUTO			= 0x2
 };
 
 enum css_min_width_e {
 	CSS_MIN_WIDTH_INHERIT			= 0x0,
 	CSS_MIN_WIDTH_SET			= 0x1,
+	CSS_MIN_WIDTH_AUTO			= 0x2
 };
 
 enum css_opacity_e {
diff --git a/src/bytecode/opcodes.h b/src/bytecode/opcodes.h
index 9da47fc..82bf75f 100644
--- a/src/bytecode/opcodes.h
+++ b/src/bytecode/opcodes.h
@@ -510,11 +510,13 @@ enum op_max_width {
 };
 
 enum op_min_height {
-	MIN_HEIGHT_SET			= 0x0080
+	MIN_HEIGHT_SET			= 0x0080,
+	MIN_HEIGHT_AUTO			= 0x0000
 };
 
 enum op_min_width {
-	MIN_WIDTH_SET			= 0x0080
+	MIN_WIDTH_SET			= 0x0080,
+	MIN_WIDTH_AUTO			= 0x0000
 };
 
 enum op_opacity {
diff --git a/src/parse/properties/properties.gen b/src/parse/properties/properties.gen
index efda8a9..e9167c8 100644
--- a/src/parse/properties/properties.gen
+++ b/src/parse/properties/properties.gen
@@ -43,9 +43,9 @@ max_height:CSS_PROP_MAX_HEIGHT IDENT:( INHERIT: NONE:0,MAX_HEIGHT_NONE IDENT:) L
 
 max_width:CSS_PROP_MAX_WIDTH IDENT:( INHERIT: NONE:0,MAX_WIDTH_NONE IDENT:) LENGTH_UNIT:( UNIT_PX:MAX_WIDTH_SET DISALLOW:unit&UNIT_ANGLE||unit&UNIT_TIME||unit&UNIT_FREQ RANGE:<0 LENGTH_UNIT:)
 
-min_height:CSS_PROP_MIN_HEIGHT IDENT:INHERIT LENGTH_UNIT:( UNIT_PX:MIN_HEIGHT_SET DISALLOW:unit&UNIT_ANGLE||unit&UNIT_TIME||unit&UNIT_FREQ RANGE:<0 LENGTH_UNIT:)
+min_height:CSS_PROP_MIN_HEIGHT IDENT:( INHERIT: AUTO:0,MIN_HEIGHT_AUTO IDENT:) LENGTH_UNIT:( UNIT_PX:MIN_HEIGHT_SET DISALLOW:unit&UNIT_ANGLE||unit&UNIT_TIME||unit&UNIT_FREQ RANGE:<0 LENGTH_UNIT:)
 
-min_width:CSS_PROP_MIN_WIDTH IDENT:INHERIT LENGTH_UNIT:( UNIT_PX:MIN_WIDTH_SET DISALLOW:unit&UNIT_ANGLE||unit&UNIT_TIME||unit&UNIT_FREQ RANGE:<0 LENGTH_UNIT:)
+min_width:CSS_PROP_MIN_WIDTH IDENT:( INHERIT: AUTO:0,MIN_WIDTH_AUTO IDENT:) LENGTH_UNIT:( UNIT_PX:MIN_WIDTH_SET DISALLOW:unit&UNIT_ANGLE||unit&UNIT_TIME||unit&UNIT_FREQ RANGE:<0 LENGTH_UNIT:)
 
 color:CSS_PROP_COLOR IDENT:INHERIT COLOR:COLOR_SET
 
diff --git a/src/select/computed.c b/src/select/computed.c
index f7887a2..ede52a1 100644
--- a/src/select/computed.c
+++ b/src/select/computed.c
@@ -755,7 +755,17 @@ uint8_t css_computed_min_height(const css_computed_style *style,
 uint8_t css_computed_min_width(const css_computed_style *style,
 		css_fixed *length, css_unit *unit)
 {
-	return get_min_width(style, length, unit);
+	css_fixed *a_length;
+        css_fixed *a_unit;
+        uint8_t min_width = get_min_width(style, a_length, a_unit);
+	uint8_t display = get_display(style);
+
+
+	if (display != CSS_DISPLAY_FLEX && display != CSS_DISPLAY_INLINE_FLEX &&
+			min_width == CSS_MIN_WIDTH_AUTO)
+		/* TODO: Continue here. return CSS_MIN_WIDTH_AUTO; */
+	else
+		return get_min_width(style, length, unit);
 }
 
 uint8_t css_computed_background_repeat(const css_computed_style *style)
@@ -927,6 +937,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 ||
diff --git a/src/select/computed.h b/src/select/computed.h
index ca9b1c6..6ec2328 100644
--- a/src/select/computed.h
+++ b/src/select/computed.h
@@ -198,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
@@ -213,7 +213,7 @@ struct css_computed_style_i {
  * flex_shrink			  1		  4
  * order			  1		  4
  * 				---		---
- *				190 bits	156 + 2sizeof(ptr) bytes
+ *				196 bits	156 + 2sizeof(ptr) bytes
  *
  * Encode font family as an array of string objects, terminated with a
  * blank entry.
@@ -229,7 +229,7 @@ struct css_computed_style_i {
  * 				  1 bit		  sizeof(ptr) bytes
  *
  * 				___		___
- *				297 bits	156 + 4sizeof(ptr) bytes
+ *				303 bits	156 + 4sizeof(ptr) bytes
  *
  *				 38 bytes	156 + 4sizeof(ptr) bytes
  *				===================
@@ -257,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
@@ -272,10 +272,10 @@ 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 yyyaaaff	overflow-y          | align-content         | flex_wrap
- * 36 bbbbbbsg	flex-basis          | flex-shrink           | flex_grow
- * 37 fffjjjo.	flex-direction      | justify_content       | order
- * 38 iiisss..	align-items         | align-self
+ * 35 yyybbbaa	overflow-y          | background-repeat     | align-content 
+ * 36 bbbbbbaj	flex-basis          | align-content         | justify_content
+ * 37 fffcccjj	flex-direction      | clear                 | justify_content
+ * 38 iiissso.	align-items         | align-self            | order
  */
 	uint8_t bits[38];
 
diff --git a/src/select/properties/min_height.c b/src/select/properties/min_height.c
index 687d8a1..a5389ce 100644
--- a/src/select/properties/min_height.c
+++ b/src/select/properties/min_height.c
@@ -17,7 +17,7 @@
 css_error css__cascade_min_height(uint32_t opv, css_style *style,
 		css_select_state *state)
 {
-	return css__cascade_length(opv, style, state, set_min_height);
+	return css__cascade_length_auto(opv, style, state, set_min_height);
 }
 
 css_error css__set_min_height_from_hint(const css_hint *hint,
@@ -29,7 +29,7 @@ css_error css__set_min_height_from_hint(const css_hint *hint,
 
 css_error css__initial_min_height(css_select_state *state)
 {
-	return set_min_height(state->computed, CSS_MIN_HEIGHT_SET,
+	return set_min_height(state->computed, CSS_MIN_HEIGHT_AUTO, 
 			0, CSS_UNIT_PX);
 }
 
diff --git a/src/select/properties/min_width.c b/src/select/properties/min_width.c
index 5365588..8460e01 100644
--- a/src/select/properties/min_width.c
+++ b/src/select/properties/min_width.c
@@ -17,7 +17,7 @@
 css_error css__cascade_min_width(uint32_t opv, css_style *style,
 		css_select_state *state)
 {
-	return css__cascade_length(opv, style, state, set_min_width);
+	return css__cascade_length_auto(opv, style, state, set_min_width);
 }
 
 css_error css__set_min_width_from_hint(const css_hint *hint,
@@ -29,7 +29,8 @@ css_error css__set_min_width_from_hint(const css_hint *hint,
 
 css_error css__initial_min_width(css_select_state *state)
 {
-	return set_min_width(state->computed, CSS_MIN_WIDTH_SET, 0, CSS_UNIT_PX);
+	return set_min_width(state->computed, CSS_MIN_WIDTH_AUTO,
+			0, CSS_UNIT_PX);
 }
 
 css_error css__compose_min_width(const css_computed_style *parent,
diff --git a/src/select/propget.h b/src/select/propget.h
index faf7dc0..6481d56 100644
--- a/src/select/propget.h
+++ b/src/select/propget.h
@@ -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,24 +2189,38 @@ static inline uint8_t get_widows(
 #undef WIDOWS_SHIFT
 #undef WIDOWS_INDEX
 
-#define ALIGN_CONTENT_INDEX 34
-#define ALIGN_CONTENT_SHIFT 2
-#define ALIGN_CONTENT_MASK  0x1c
+#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 = style->i.bits[ALIGN_CONTENT_INDEX];
-	bits &= ALIGN_CONTENT_MASK;
-	bits >>= ALIGN_CONTENT_SHIFT;
+	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
-#undef ALIGN_CONTENT_SHIFT
-#undef ALIGN_CONTENT_INDEX
+#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 34
+#define FLEX_WRAP_INDEX 19
 #define FLEX_WRAP_SHIFT 0
 #define FLEX_WRAP_MASK  0x3
 static inline uint8_t get_flex_wrap(
@@ -2246,7 +2260,7 @@ static inline uint8_t get_flex_basis(
 #undef FLEX_BASIS_SHIFT
 #undef FLEX_BASIS_INDEX
 
-#define FLEX_SHRINK_INDEX 35
+#define FLEX_SHRINK_INDEX 20
 #define FLEX_SHRINK_SHIFT 1
 #define FLEX_SHRINK_MASK  0x2
 static inline uint8_t get_flex_shrink(
@@ -2267,7 +2281,7 @@ static inline uint8_t get_flex_shrink(
 #undef FLEX_SHRINK_SHIFT
 #undef FLEX_SHRINK_INDEX
 
-#define FLEX_GROW_INDEX 35
+#define FLEX_GROW_INDEX 21
 #define FLEX_GROW_SHIFT 0
 #define FLEX_GROW_MASK  0x1
 static inline uint8_t get_flex_grow(
@@ -2305,24 +2319,38 @@ static inline uint8_t get_flex_direction(
 #undef FLEX_DIRECTION_SHIFT
 #undef FLEX_DIRECTION_INDEX
 
-#define JUSTIFY_CONTENT_INDEX 36
-#define JUSTIFY_CONTENT_SHIFT 2
-#define JUSTIFY_CONTENT_MASK  0x1c
+#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 = style->i.bits[JUSTIFY_CONTENT_INDEX];
-	bits &= JUSTIFY_CONTENT_MASK;
-	bits >>= JUSTIFY_CONTENT_SHIFT;
+	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
-#undef JUSTIFY_CONTENT_SHIFT
-#undef JUSTIFY_CONTENT_INDEX
+#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 36
+#define ORDER_INDEX 37
 #define ORDER_SHIFT 1
 #define ORDER_MASK  0x2
 static inline uint8_t get_order(
diff --git a/src/select/propset.h b/src/select/propset.h
index b36b519..43fd262 100644
--- a/src/select/propset.h
+++ b/src/select/propset.h
@@ -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,25 +2325,36 @@ static inline css_error set_widows(
 #undef WIDOWS_SHIFT
 #undef WIDOWS_MASK
 
-#define ALIGN_CONTENT_INDEX 34
-#define ALIGN_CONTENT_SHIFT 2
-#define ALIGN_CONTENT_MASK  0x1c
+#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 = &style->i.bits[ALIGN_CONTENT_INDEX];
+	uint8_t *bits_a = &style->i.bits[ALIGN_CONTENT_INDEX_A];
+	uint8_t *bits_b = &style->i.bits[ALIGN_CONTENT_INDEX_B];
 
-	/* 3bits: type */
-	*bits = (*bits & ~ALIGN_CONTENT_MASK) |
-			((type & 0x7) << ALIGN_CONTENT_SHIFT);
+	/* 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
-#undef ALIGN_CONTENT_SHIFT
-#undef ALIGN_CONTENT_INDEX
+#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 34
+#define FLEX_WRAP_INDEX 19
 #define FLEX_WRAP_SHIFT 0
 #define FLEX_WRAP_MASK  0x3
 static inline css_error set_flex_wrap(
@@ -2383,7 +2394,7 @@ static inline css_error set_flex_basis(
 #undef FLEX_BASIS_SHIFT
 #undef FLEX_BASIS_INDEX
 
-#define FLEX_SHRINK_INDEX 35
+#define FLEX_SHRINK_INDEX 20
 #define FLEX_SHRINK_SHIFT 1
 #define FLEX_SHRINK_MASK  0x2
 static inline css_error set_flex_shrink(
@@ -2405,7 +2416,7 @@ static inline css_error set_flex_shrink(
 #undef FLEX_SHRINK_SHIFT
 #undef FLEX_SHRINK_INDEX
 
-#define FLEX_GROW_INDEX 35
+#define FLEX_GROW_INDEX 20
 #define FLEX_GROW_SHIFT 0
 #define FLEX_GROW_MASK  0x1
 static inline css_error set_flex_grow(
@@ -2445,25 +2456,36 @@ static inline css_error set_flex_direction(
 #undef FLEX_DIRECTION_SHIFT
 #undef FLEX_DIRECTION_INDEX
 
-#define JUSTIFY_CONTENT_INDEX 36
-#define JUSTIFY_CONTENT_SHIFT 2
-#define JUSTIFY_CONTENT_MASK  0x1c
+#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 = &style->i.bits[JUSTIFY_CONTENT_INDEX];
+	uint8_t *bits_a = &style->i.bits[JUSTIFY_CONTENT_INDEX_A];
+	uint8_t *bits_b = &style->i.bits[JUSTIFY_CONTENT_INDEX_B];
 
-	/* 3bits: type */
-	*bits = (*bits & ~JUSTIFY_CONTENT_MASK) |
-			((type & 0x7) << JUSTIFY_CONTENT_SHIFT);
+	/* 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
-#undef JUSTIFY_CONTENT_SHIFT
-#undef JUSTIFY_CONTENT_INDEX
+#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 36
+#define ORDER_INDEX 37
 #define ORDER_SHIFT 1
 #define ORDER_MASK  0x2
 static inline css_error set_order(