Implement the box-sizing property from CSS3-UI.

weasy/css/properties.py

@@ -111,6 +111,9 @@ INITIAL_VALUES = {
 
     # CSS3 Paged Media: http://www.w3.org/TR/css3-page/#page-size
     'size': _parse('auto'),
+
+    # CSS3 User Interface: http://www.w3.org/TR/css3-ui/#box-sizing
+    'box_sizing': 'content-box',
 }
 
 # Not applicable to the print media

weasy/css/validation.py

@@ -224,6 +224,12 @@ def border_width(value):
         return keyword
 
 
+@validator()
+@single_keyword
+def box_sizing(keyword):
+    return keyword in ('padding-box', 'border-box')
+
+
 @validator()
 @single_keyword
 def caption_side(keyword):

weasy/layout/percentages.py

@@ -102,3 +102,13 @@ def resolve_percentages(box, containing_block):
     for side in ['top', 'right', 'bottom', 'left']:
         prop = 'border_{}_width'.format(side)
         setattr(box, prop, box.style[prop])
+
+    if box.style.box_sizing == 'border-box':
+        if box.width != 'auto':
+            box.width -= (box.padding_left + box.padding_right +
+                          box.border_left_width + box.border_right_width)
+        if box.height != 'auto':
+            box.height -= (box.padding_top + box.padding_bottom +
+                           box.border_top_width + box.border_bottom_width)
+    else:
+        assert box.style.box_sizing == 'content-box'

weasy/tests/test_layout.py

@@ -997,3 +997,37 @@ def test_empty_inline_auto_margins():
     assert span.margin_right == 0
     assert span.margin_bottom != 0
     assert span.margin_left == 0
+
+
+@SUITE.test
+def test_box_sizing():
+    """Test the box-sizing property.
+
+    http://www.w3.org/TR/css3-ui/#box-sizing
+
+    """
+    page, = parse('''
+        <style>
+            @page { size: 100000px }
+            body { width: 10000px; margin: 0 }
+            div { width: 10%; height: 1000px;
+                  margin: 100px; padding: 10px; border: 1px solid }
+            div+div { box-sizing: border-box }
+        </style>
+        <div></div><div></div>
+    ''')
+    html = page.root_box
+    body, = html.children
+    div_1, div_2 = body.children
+    assert div_1.width == 1000
+    assert div_1.height == 1000
+    assert div_1.border_width() == 1022
+    assert div_1.border_height() == 1022
+    assert div_1.margin_height() == 1222
+    # Do not test margin_width as it depends on the containing block
+
+    assert div_2.width == 978  # 1000 - 22
+    assert div_2.height == 978
+    assert div_2.border_width() == 1000
+    assert div_2.border_height() == 1000
+    assert div_2.margin_height() == 1200