Merge branch 'tlsa/box-sizing'

22 files changed, 524 insertions, 7 deletions

diff --git a/docs/Bytecode b/docs/Bytecode
index 3f53d71..f2d10cc 100644
--- a/docs/Bytecode
+++ b/docs/Bytecode
@@ -1249,5 +1249,11 @@ Opcodes
 		3     => auto,
 		other => Reserved for future expansion.
 
-71-3ff - Reserved for future expansion.
+71 - box-sizing
+	<value> (14bits) :
+		0     => content-box,
+		1     => border-box,
+		other => Reserved for future expansion.
+
+72-3ff - Reserved for future expansion.
 
diff --git a/include/libcss/computed.h b/include/libcss/computed.h
index c7e77e0..e15d0b0 100644
--- a/include/libcss/computed.h
+++ b/include/libcss/computed.h
@@ -203,6 +203,9 @@ uint8_t css_computed_border_left_color(
 		const css_computed_style *style,
 		css_color *color);
 
+uint8_t css_computed_box_sizing(
+		const css_computed_style *style);
+
 uint8_t css_computed_height(
 		const css_computed_style *style,
 		css_fixed *length, css_unit *unit);
diff --git a/include/libcss/properties.h b/include/libcss/properties.h
index 0840f6f..06c033f 100644
--- a/include/libcss/properties.h
+++ b/include/libcss/properties.h
@@ -127,6 +127,7 @@ enum css_properties_e {
 	CSS_PROP_COLUMN_WIDTH			= 0x06e,
 	CSS_PROP_WRITING_MODE			= 0x06f,
 	CSS_PROP_OVERFLOW_Y			= 0x070,
+	CSS_PROP_BOX_SIZING			= 0x071,
 
 	CSS_N_PROPERTIES
 };
@@ -209,6 +210,12 @@ enum css_bottom_e {
 	CSS_BOTTOM_AUTO				= 0x2
 };
 
+enum css_box_sizing_e {
+	CSS_BOX_SIZING_INHERIT			= 0x0,
+	CSS_BOX_SIZING_CONTENT_BOX		= 0x1,
+	CSS_BOX_SIZING_BORDER_BOX		= 0x2
+};
+
 enum css_break_after_e {
 	CSS_BREAK_AFTER_INHERIT			= 0x0,
 	CSS_BREAK_AFTER_AUTO			= 0x1,
diff --git a/src/bytecode/opcodes.h b/src/bytecode/opcodes.h
index 4f80142..64ea482 100644
--- a/src/bytecode/opcodes.h
+++ b/src/bytecode/opcodes.h
@@ -103,6 +103,11 @@ enum op_bottom {
 	BOTTOM_AUTO			= 0x0000
 };
 
+enum op_box_sizing {
+	BOX_SIZING_CONTENT_BOX		= 0x0000,
+	BOX_SIZING_BORDER_BOX		= 0x0001
+};
+
 enum op_break_after {
 	BREAK_AFTER_AUTO		= 0x0000,
 	BREAK_AFTER_ALWAYS		= 0x0001,
diff --git a/src/parse/properties/properties.c b/src/parse/properties/properties.c
index 49933cd..f32e374 100644
--- a/src/parse/properties/properties.c
+++ b/src/parse/properties/properties.c
@@ -42,6 +42,7 @@ const css_prop_handler property_handlers[LAST_PROP + 1 - FIRST_PROP] =
 	css__parse_border_top_width,
 	css__parse_border_width,
 	css__parse_bottom,
+	css__parse_box_sizing,
 	css__parse_break_after,
 	css__parse_break_before,
 	css__parse_break_inside,
diff --git a/src/parse/properties/properties.gen b/src/parse/properties/properties.gen
index 4417cb6..60d5536 100644
--- a/src/parse/properties/properties.gen
+++ b/src/parse/properties/properties.gen
@@ -215,3 +215,5 @@ column_span:CSS_PROP_COLUMN_SPAN IDENT:( INHERIT: NONE:0,COLUMN_SPAN_NONE ALL:0,
 column_width:CSS_PROP_COLUMN_WIDTH IDENT:( INHERIT: AUTO:0,COLUMN_WIDTH_AUTO IDENT:) LENGTH_UNIT:( UNIT_PX:COLUMN_WIDTH_SET DISALLOW:unit&UNIT_ANGLE||unit&UNIT_TIME||unit&UNIT_FREQ||unit&UNIT_PCT LENGTH_UNIT:)
 
 writing_mode:CSS_PROP_WRITING_MODE IDENT:( INHERIT: HORIZONTAL_TB:0,WRITING_MODE_HORIZONTAL_TB VERTICAL_RL:0,WRITING_MODE_VERTICAL_RL VERTICAL_LR:0,WRITING_MODE_VERTICAL_LR IDENT:)
+
+box_sizing:CSS_PROP_BOX_SIZING IDENT:( INHERIT: CONTENT_BOX:0,BOX_SIZING_CONTENT_BOX BORDER_BOX:0,BOX_SIZING_BORDER_BOX IDENT:)
diff --git a/src/parse/properties/properties.h b/src/parse/properties/properties.h
index cf80761..e7b2bf7 100644
--- a/src/parse/properties/properties.h
+++ b/src/parse/properties/properties.h
@@ -112,6 +112,9 @@ css_error css__parse_border_width(css_language *c,
 css_error css__parse_bottom(css_language *c,
 		const parserutils_vector *vector, int *ctx, 
 		css_style *result);
+css_error css__parse_box_sizing(css_language *c,
+		const parserutils_vector *vector, int *ctx,
+		css_style *result);
 css_error css__parse_break_after(css_language *c,
 		const parserutils_vector *vector, int *ctx,
 		css_style *result);
diff --git a/src/parse/propstrings.c b/src/parse/propstrings.c
index 2c166a0..dd6bee4 100644
--- a/src/parse/propstrings.c
+++ b/src/parse/propstrings.c
@@ -112,6 +112,7 @@ const stringmap_entry stringmap[LAST_KNOWN] = {
 	{ "border-top-width", SLEN("border-top-width") },
 	{ "border-width", SLEN("border-width") },
 	{ "bottom", SLEN("bottom") },
+	{ "box-sizing", SLEN("box-sizing") },
 	{ "break-after", SLEN("break-after") },
 	{ "break-before", SLEN("break-before") },
 	{ "break-inside", SLEN("break-inside") },
@@ -412,6 +413,8 @@ const stringmap_entry stringmap[LAST_KNOWN] = {
 	{ "horizontal-tb", SLEN("horizontal-tb") },
 	{ "vertical-rl", SLEN("vertical-rl") },
 	{ "vertical-lr", SLEN("vertical-lr") },
+	{ "content-box", SLEN("content-box") },
+	{ "border-box", SLEN("border-box") },
 
 	{ "aliceblue", SLEN("aliceblue") },
 	{ "antiquewhite", SLEN("antiquewhite") },
diff --git a/src/parse/propstrings.h b/src/parse/propstrings.h
index c686a91..1203c22 100644
--- a/src/parse/propstrings.h
+++ b/src/parse/propstrings.h
@@ -46,9 +46,9 @@ enum {
 	BORDER_LEFT_WIDTH, BORDER_RIGHT, BORDER_RIGHT_COLOR, 
 	BORDER_RIGHT_STYLE, BORDER_RIGHT_WIDTH, BORDER_SPACING, 
 	BORDER_STYLE, BORDER_TOP, BORDER_TOP_COLOR, BORDER_TOP_STYLE, 
-	BORDER_TOP_WIDTH, BORDER_WIDTH, BOTTOM, BREAK_AFTER, BREAK_BEFORE,
-	BREAK_INSIDE, CAPTION_SIDE, CLEAR, CLIP, COLOR, COLUMNS, COLUMN_COUNT,
-	COLUMN_FILL, COLUMN_GAP, COLUMN_RULE, COLUMN_RULE_COLOR,
+	BORDER_TOP_WIDTH, BORDER_WIDTH, BOTTOM, BOX_SIZING, BREAK_AFTER,
+	BREAK_BEFORE, BREAK_INSIDE, CAPTION_SIDE, CLEAR, CLIP, COLOR, COLUMNS,
+	COLUMN_COUNT, COLUMN_FILL, COLUMN_GAP, COLUMN_RULE, COLUMN_RULE_COLOR,
 	COLUMN_RULE_STYLE, COLUMN_RULE_WIDTH, COLUMN_SPAN, COLUMN_WIDTH,
 	CONTENT, COUNTER_INCREMENT, COUNTER_RESET, CUE, CUE_AFTER, CUE_BEFORE,
 	CURSOR, DIRECTION, DISPLAY, ELEVATION, EMPTY_CELLS, LIBCSS_FLOAT, FONT,
@@ -97,7 +97,8 @@ enum {
 	LINE_THROUGH, BLINK, RGB, RGBA, HSL, HSLA, LIBCSS_LEFT, LIBCSS_CENTER,
 	LIBCSS_RIGHT, CURRENTCOLOR, ODD, EVEN, SRC, LOCAL, INITIAL,
 	FORMAT, WOFF, TRUETYPE, OPENTYPE, EMBEDDED_OPENTYPE, SVG, COLUMN,
-	AVOID_PAGE, AVOID_COLUMN, BALANCE, HORIZONTAL_TB, VERTICAL_RL, VERTICAL_LR,
+	AVOID_PAGE, AVOID_COLUMN, BALANCE, HORIZONTAL_TB, VERTICAL_RL,
+	VERTICAL_LR, CONTENT_BOX, BORDER_BOX,
 
 	/* Named colours */
 	FIRST_COLOUR,
diff --git a/src/select/computed.c b/src/select/computed.c
index 2efc8a7..23f7ea4 100644
--- a/src/select/computed.c
+++ b/src/select/computed.c
@@ -632,6 +632,11 @@ uint8_t css_computed_border_left_color(const css_computed_style *style,
 	return get_border_left_color(style, color);
 }
 
+uint8_t css_computed_box_sizing(const css_computed_style *style)
+{
+	return get_box_sizing(style);
+}
+
 uint8_t css_computed_height(const css_computed_style *style,
 		css_fixed *length, css_unit *unit)
 {
diff --git a/src/select/computed.h b/src/select/computed.h
index f77bda2..d2301f5 100644
--- a/src/select/computed.h
+++ b/src/select/computed.h
@@ -159,8 +159,9 @@ struct css_computed_style_i {
  * unicode_bidi			  2
  * visibility			  2
  * white_space			  3
+ * box_sizing			  2
  *				---
- *				 84 bits
+ *				 86 bits
  *
  * Colours are 32bits of AARRGGBB
  * Dimensions are encoded as a fixed point value + 4 bits of unit data
@@ -250,7 +251,7 @@ struct css_computed_style_i {
  * 21 mmmmmccc	min-width           | clear
  * 22 tttttxxx	padding-top         | overflow-x
  * 23 rrrrrppp	padding-right       | position
- * 24 bbbbbo..	padding-bottom      | opacity               | <unused>
+ * 24 bbbbboss	padding-bottom      | opacity               | box-sizing
  * 25 lllllttt	padding-left        | text-transform
  * 26 tttttwww	text-indent         | white-space
  * 27 bbbbbbbb	background-position
diff --git a/src/select/dispatch.c b/src/select/dispatch.c
index 326da58..7af9000 100644
--- a/src/select/dispatch.c
+++ b/src/select/dispatch.c
@@ -582,5 +582,10 @@ struct prop_table prop_dispatch[CSS_N_PROPERTIES] = {
 		PROPERTY_FUNCS(overflow_y),
 		0,
 		GROUP_NORMAL
+	},
+	{
+		PROPERTY_FUNCS(box_sizing),
+		0,
+		GROUP_NORMAL
 	}
 };
diff --git a/src/select/properties/Makefile b/src/select/properties/Makefile
index ce3ddfa..288eda9 100644
--- a/src/select/properties/Makefile
+++ b/src/select/properties/Makefile
@@ -21,6 +21,7 @@ border_top_color.c \
 border_top_style.c \
 border_top_width.c \
 bottom.c \
+box_sizing.c \
 break_after.c \
 break_before.c \
 break_inside.c \
diff --git a/src/select/properties/box_sizing.c b/src/select/properties/box_sizing.c
new file mode 100644
index 0000000..91c475d
--- /dev/null
+++ b/src/select/properties/box_sizing.c
@@ -0,0 +1,67 @@
+/*
+ * This file is part of LibCSS
+ * Licensed under the MIT License,
+ *		  http://www.opensource.org/licenses/mit-license.php
+ * Copyright 2017 Michael Drake <tlsa@netsurf-browser.org>
+ */
+
+#include "bytecode/bytecode.h"
+#include "bytecode/opcodes.h"
+#include "select/propset.h"
+#include "select/propget.h"
+#include "utils/utils.h"
+
+#include "select/properties/properties.h"
+#include "select/properties/helpers.h"
+
+css_error css__cascade_box_sizing(uint32_t opv, css_style *style, 
+		css_select_state *state)
+{
+	uint16_t value = CSS_BOX_SIZING_INHERIT;
+
+	UNUSED(style);
+
+	if (isInherit(opv) == false) {
+		switch (getValue(opv)) {
+		case BOX_SIZING_CONTENT_BOX:
+			value = CSS_BOX_SIZING_CONTENT_BOX;
+			break;
+		case BOX_SIZING_BORDER_BOX:
+			value = CSS_BOX_SIZING_BORDER_BOX;
+			break;
+		}
+	}
+
+	if (css__outranks_existing(getOpcode(opv), isImportant(opv), state,
+			isInherit(opv))) {
+		return set_box_sizing(state->computed, value);
+	}
+
+	return CSS_OK;
+}
+
+css_error css__set_box_sizing_from_hint(const css_hint *hint,
+		css_computed_style *style)
+{
+	return set_box_sizing(style, hint->status);
+}
+
+css_error css__initial_box_sizing(css_select_state *state)
+{
+	return set_box_sizing(state->computed, CSS_BOX_SIZING_CONTENT_BOX);
+}
+
+css_error css__compose_box_sizing(
+		const css_computed_style *parent,
+		const css_computed_style *child,
+		css_computed_style *result)
+{
+	uint8_t type = get_box_sizing(child);
+
+	if (type == CSS_BOX_SIZING_INHERIT) {
+		type = get_box_sizing(parent);
+	}
+
+	return set_box_sizing(result, type);
+}
+
diff --git a/src/select/properties/properties.h b/src/select/properties/properties.h
index f0ab29d..a1ab49f 100644
--- a/src/select/properties/properties.h
+++ b/src/select/properties/properties.h
@@ -42,6 +42,7 @@ PROPERTY_FUNCS(border_right_width);
 PROPERTY_FUNCS(border_bottom_width);
 PROPERTY_FUNCS(border_left_width);
 PROPERTY_FUNCS(bottom);
+PROPERTY_FUNCS(box_sizing);
 PROPERTY_FUNCS(break_after);
 PROPERTY_FUNCS(break_before);
 PROPERTY_FUNCS(break_inside);
diff --git a/src/select/propget.h b/src/select/propget.h
index 5552e39..6719443 100644
--- a/src/select/propget.h
+++ b/src/select/propget.h
@@ -1268,6 +1268,23 @@ static inline uint8_t get_background_attachment(
 #undef BACKGROUND_ATTACHMENT_SHIFT
 #undef BACKGROUND_ATTACHMENT_INDEX
 
+#define BOX_SIZING_INDEX 34
+#define BOX_SIZING_SHIFT 0
+#define BOX_SIZING_MASK  0x3
+static inline uint8_t get_box_sizing(
+		const css_computed_style *style)
+{
+	uint8_t bits = style->i.bits[BOX_SIZING_INDEX];
+	bits &= BOX_SIZING_MASK;
+	bits >>= BOX_SIZING_SHIFT;
+
+	/* 2bits: type */
+	return bits;
+}
+#undef BOX_SIZING_MASK
+#undef BOX_SIZING_SHIFT
+#undef BOX_SIZING_INDEX
+
 #define BORDER_COLLAPSE_INDEX 13
 #define BORDER_COLLAPSE_SHIFT 0
 #define BORDER_COLLAPSE_MASK  0x3
diff --git a/src/select/propset.h b/src/select/propset.h
index 76e4fe6..3f4038c 100644
--- a/src/select/propset.h
+++ b/src/select/propset.h
@@ -1361,6 +1361,24 @@ static inline css_error set_background_attachment(
 #undef BACKGROUND_ATTACHMENT_SHIFT
 #undef BACKGROUND_ATTACHMENT_INDEX
 
+#define BOX_SIZING_INDEX 34
+#define BOX_SIZING_SHIFT 0
+#define BOX_SIZING_MASK  0x3
+static inline css_error set_box_sizing(
+		css_computed_style *style, uint8_t type)
+{
+	uint8_t *bits = &style->i.bits[BOX_SIZING_INDEX];
+
+	/* 2bits: type */
+	*bits = (*bits & ~BOX_SIZING_MASK) |
+			((type & 0x3) << BOX_SIZING_SHIFT);
+
+	return CSS_OK;
+}
+#undef BOX_SIZING_MASK
+#undef BOX_SIZING_SHIFT
+#undef BOX_SIZING_INDEX
+
 #define BORDER_COLLAPSE_INDEX 13
 #define BORDER_COLLAPSE_SHIFT 0
 #define BORDER_COLLAPSE_MASK  0x3
diff --git a/test/data/parse/properties.dat b/test/data/parse/properties.dat
index 7fcf137..3dcb5a4 100644
--- a/test/data/parse/properties.dat
+++ b/test/data/parse/properties.dat
@@ -4791,3 +4791,61 @@ p:before { content: open-quote url('http://picodrive.acornarcade.com/') " : " at
 |   0x0008046f
 #reset
 
+##
+## 71 - box-sizing
+##
+
+#data
+* { box-sizing: content-box; }
+#errors
+#expected
+| 1 *
+|   0x00000071
+#reset
+
+#data
+* { box-sizing: border-box; }
+#errors
+#expected
+| 1 *
+|   0x00040071
+#reset
+
+#data
+* { box-sizing: inherit; }
+#errors
+#expected
+| 1 *
+|   0x00000871
+#reset
+
+#data
+* { box-sizing: content-box !important; }
+#errors
+#expected
+| 1 *
+|   0x00000471
+#reset
+
+#data
+* { box-sizing: border-box !important; }
+#errors
+#expected
+| 1 *
+|   0x00040471
+#reset
+
+#data
+* { box-sizing: inherit !important; }
+#errors
+#expected
+| 1 *
+|   0x00000c71
+#reset
+
+#data
+* { box-sizing: none; }
+#errors
+#expected
+| 1 *
+#reset
diff --git a/test/data/parse2/tests1.dat b/test/data/parse2/tests1.dat
index 40d1ab6..30afea8 100644
--- a/test/data/parse2/tests1.dat
+++ b/test/data/parse2/tests1.dat
@@ -148,3 +148,36 @@
 |  cursor: url('foo.png'), url('bar.gif'), pointer
 #reset
 
+#data
+* { box-sizing: border-box; }
+#errors
+#expected
+| *
+|  box-sizing: border-box
+#reset
+
+#data
+* { box-sizing: content-box; }
+#errors
+#expected
+| *
+|  box-sizing: content-box
+#reset
+
+#data
+* { box-sizing: inherit; }
+#errors
+#expected
+| *
+|  box-sizing: inherit
+#reset
+
+#data
+* { box-sizing: border-box; max-width: 2em }
+#errors
+#expected
+| *
+|  box-sizing: border-box
+|  max-width: 2em
+#reset
+
diff --git a/test/data/select/tests1.dat b/test/data/select/tests1.dat
index 5ab7d7a..ff8bbe1 100644
--- a/test/data/select/tests1.dat
+++ b/test/data/select/tests1.dat
@@ -26,6 +26,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -129,6 +130,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -236,6 +238,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -344,6 +347,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -452,6 +456,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -560,6 +565,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -658,6 +664,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -757,6 +764,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -856,6 +864,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -954,6 +963,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -1057,6 +1067,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -1160,6 +1171,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -1264,6 +1276,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -1371,6 +1384,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -1477,6 +1491,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -1589,6 +1604,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -1701,6 +1717,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -1813,6 +1830,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -1929,6 +1947,7 @@ border-right-width: 2px
 border-bottom-width: 4px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -2044,6 +2063,7 @@ border-right-width: 2em
 border-bottom-width: 4px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -2157,6 +2177,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -2269,6 +2290,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -2381,6 +2403,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -2493,6 +2516,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -2605,6 +2629,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -2717,6 +2742,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -2829,6 +2855,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -2941,6 +2968,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -3053,6 +3081,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -3165,6 +3194,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -3277,6 +3307,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -3389,6 +3420,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -3501,6 +3533,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -3613,6 +3646,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -3725,6 +3759,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -3837,6 +3872,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -3949,6 +3985,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -4061,6 +4098,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -4173,6 +4211,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -4285,6 +4324,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -4397,6 +4437,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -4502,6 +4543,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -4607,6 +4649,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -4712,6 +4755,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -4814,6 +4858,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: auto
 break-before: auto
 break-inside: auto
@@ -4917,6 +4962,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: avoid
 break-before: column
 break-inside: auto
@@ -5020,6 +5066,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: avoid-page
 break-before: always
 break-inside: auto
@@ -5123,6 +5170,7 @@ border-right-width: 2px
 border-bottom-width: 2px
 border-left-width: 2px
 bottom: auto
+box-sizing: content-box
 break-after: avoid-page
 break-before: always
 break-inside: avoid
@@ -5195,3 +5243,203 @@ writing-mode: horizontal-tb
 z-index: auto
 #reset
 
+#tree
+| div*
+#ua
+div { box-sizing: inherit; }
+#user
+#errors
+#expected
+background-attachment: scroll
+background-color: #00000000
+background-image: none
+background-position: 0% 0%
+background-repeat: repeat
+border-collapse: separate
+border-spacing: 0px 0px
+border-top-color: #ff000000
+border-right-color: #ff000000
+border-bottom-color: #ff000000
+border-left-color: #ff000000
+border-top-style: none
+border-right-style: none
+border-bottom-style: none
+border-left-style: none
+border-top-width: 2px
+border-right-width: 2px
+border-bottom-width: 2px
+border-left-width: 2px
+bottom: auto
+box-sizing: content-box
+break-after: auto
+break-before: auto
+break-inside: auto
+caption-side: top
+clear: none
+clip: auto
+color: #ff000000
+column-count: auto
+column-fill: balance
+column-gap: normal
+column-rule-color: #ff000000
+column-rule-style: none
+column-rule-width: 2px
+column-span: none
+column-width: auto
+content: normal
+counter-increment: none
+counter-reset: none
+cursor: auto
+direction: ltr
+display: inline
+empty-cells: show
+float: none
+font-family: sans-serif
+font-size: 12pt
+font-style: normal
+font-variant: normal
+font-weight: normal
+height: auto
+left: auto
+letter-spacing: normal
+line-height: normal
+list-style-image: none
+list-style-position: outside
+list-style-type: disc
+margin-top: 0px
+margin-right: 0px
+margin-bottom: 0px
+margin-left: 0px
+max-height: none
+max-width: none
+min-height: 0px
+min-width: 0px
+opacity: 1.000
+outline-color: invert
+outline-style: none
+outline-width: 2px
+overflow-x: visible
+overflow-y: visible
+padding-top: 0px
+padding-right: 0px
+padding-bottom: 0px
+padding-left: 0px
+position: static
+quotes: none
+right: auto
+table-layout: auto
+text-align: default
+text-decoration: none
+text-indent: 0px
+text-transform: none
+top: auto
+unicode-bidi: normal
+vertical-align: baseline
+visibility: visible
+white-space: normal
+width: auto
+word-spacing: normal
+writing-mode: horizontal-tb
+z-index: auto
+#reset
+
+#tree
+| div*
+#ua
+div { box-sizing: inherit; }
+#user
+div { box-sizing: border-box; }
+#errors
+#expected
+background-attachment: scroll
+background-color: #00000000
+background-image: none
+background-position: 0% 0%
+background-repeat: repeat
+border-collapse: separate
+border-spacing: 0px 0px
+border-top-color: #ff000000
+border-right-color: #ff000000
+border-bottom-color: #ff000000
+border-left-color: #ff000000
+border-top-style: none
+border-right-style: none
+border-bottom-style: none
+border-left-style: none
+border-top-width: 2px
+border-right-width: 2px
+border-bottom-width: 2px
+border-left-width: 2px
+bottom: auto
+box-sizing: border-box
+break-after: auto
+break-before: auto
+break-inside: auto
+caption-side: top
+clear: none
+clip: auto
+color: #ff000000
+column-count: auto
+column-fill: balance
+column-gap: normal
+column-rule-color: #ff000000
+column-rule-style: none
+column-rule-width: 2px
+column-span: none
+column-width: auto
+content: normal
+counter-increment: none
+counter-reset: none
+cursor: auto
+direction: ltr
+display: inline
+empty-cells: show
+float: none
+font-family: sans-serif
+font-size: 12pt
+font-style: normal
+font-variant: normal
+font-weight: normal
+height: auto
+left: auto
+letter-spacing: normal
+line-height: normal
+list-style-image: none
+list-style-position: outside
+list-style-type: disc
+margin-top: 0px
+margin-right: 0px
+margin-bottom: 0px
+margin-left: 0px
+max-height: none
+max-width: none
+min-height: 0px
+min-width: 0px
+opacity: 1.000
+outline-color: invert
+outline-style: none
+outline-width: 2px
+overflow-x: visible
+overflow-y: visible
+padding-top: 0px
+padding-right: 0px
+padding-bottom: 0px
+padding-left: 0px
+position: static
+quotes: none
+right: auto
+table-layout: auto
+text-align: default
+text-decoration: none
+text-indent: 0px
+text-transform: none
+top: auto
+unicode-bidi: normal
+vertical-align: baseline
+visibility: visible
+white-space: normal
+width: auto
+word-spacing: normal
+writing-mode: horizontal-tb
+z-index: auto
+#reset
diff --git a/test/dump.h b/test/dump.h
index fe53f69..872c850 100644
--- a/test/dump.h
+++ b/test/dump.h
@@ -478,6 +478,7 @@ static const char *opcode_names[] = {
 	"column-width",
 	"writing-mode",
 	"overflow-y",
+	"box-sizing",
 };
 
 static void dump_css_fixed(css_fixed f, char **ptr)
@@ -976,6 +977,16 @@ void dump_bytecode(css_style *style, char **ptr, uint32_t depth)
 					break;
 				}
 				break;
+			case CSS_PROP_BOX_SIZING:
+				switch (value) {
+				case BOX_SIZING_CONTENT_BOX:
+					*ptr += sprintf(*ptr, "content-box");
+					break;
+				case BOX_SIZING_BORDER_BOX:
+					*ptr += sprintf(*ptr, "border-box");
+					break;
+				}
+				break;
 			case CSS_PROP_BORDER_TOP_STYLE:
 			case CSS_PROP_BORDER_RIGHT_STYLE:
 			case CSS_PROP_BORDER_BOTTOM_STYLE:
diff --git a/test/dump_computed.h b/test/dump_computed.h
index 8efd2ca..eb9d522 100644
--- a/test/dump_computed.h
+++ b/test/dump_computed.h
@@ -715,6 +715,27 @@ static void dump_computed_style(const css_computed_style *style, char *buf,
 	ptr += wrote;
 	*len -= wrote;
 
+	/* box-sizing */
+	val = css_computed_box_sizing(style);
+	switch (val) {
+	case CSS_BOX_SIZING_INHERIT:
+		wrote = snprintf(ptr, *len, "box-sizing: inherit\n");
+		break;
+	case CSS_BOX_SIZING_CONTENT_BOX:
+		wrote = snprintf(ptr, *len, "box-sizing: content-box\n");
+		break;
+	case CSS_BOX_SIZING_BORDER_BOX:
+		wrote = snprintf(ptr, *len, "box-sizing: border-box\n");
+		break;
+	default:
+		wrote = 0;
+		printf("DISASTER!\n");
+		assert(0);
+		break;
+	}
+	ptr += wrote;
+	*len -= wrote;
+
 	/* break-after */
 	val = css_computed_break_after(style);
 	switch (val) {