Add support for 'padding-box' value for 'box-sizing' property (fixes #…

…6032) Spec: http://dev.w3.org/csswg/css-ui/#valdef-box-sizing-padding-box Currently, only Firefox is supporting this value.
servo · May 14, 2015 · 945adab · 945adab
1 parent b3b9dea
commit 945adab
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 1 deletion.
diff --git a/components/layout/block.rs b/components/layout/block.rs
@@ -346,8 +346,10 @@ impl CandidateBSizeIterator {
         };
 
         // If the style includes `box-sizing: border-box`, subtract the border and padding.
+        // If the style includes `box-sizing: padding-box`, subtract the border.
         let adjustment_for_box_sizing = match fragment.style.get_box().box_sizing {
             box_sizing::T::border_box => fragment.border_padding.block_start_end(),
+            box_sizing::T::padding_box => fragment.padding_width().block_start_end(),
             box_sizing::T::content_box => Au(0),
         };
 
@@ -2049,7 +2051,12 @@ pub trait ISizeAndMarginsComputer {
                 computed_inline_size =
                     MaybeAuto::Specified(size - block.fragment.border_padding.inline_start_end())
             }
+            (MaybeAuto::Specified(size), box_sizing::T::padding_box) => {
+                computed_inline_size =
+                    MaybeAuto::Specified(size - block.fragment.padding_width().inline_start_end())
+            }
             (MaybeAuto::Auto, box_sizing::T::border_box) |
+            (MaybeAuto::Auto, box_sizing::T::padding_box) |
             (_, box_sizing::T::content_box) => {}
         }
 

diff --git a/components/layout/fragment.rs b/components/layout/fragment.rs
@@ -999,6 +999,10 @@ impl Fragment {
         }
     }
 
+    pub fn padding_width(&self) -> LogicalMargin<Au> {
+        self.border_padding - self.border_width()
+    }
+
     /// Computes the margins in the inline direction from the containing block inline-size and the
     /// style. After this call, the inline direction of the `margin` field will be correct.
     ///

diff --git a/components/style/properties.mako.rs b/components/style/properties.mako.rs
@@ -2171,7 +2171,7 @@ pub mod longhands {
     // http://dev.w3.org/csswg/css-ui/
     ${switch_to_style_struct("Box")}
 
-    ${single_keyword("box-sizing", "content-box border-box")}
+    ${single_keyword("box-sizing", "content-box padding-box border-box")}
 
     ${new_style_struct("Pointing", is_inherited=True)}
 

diff --git a/tests/ref/basic.list b/tests/ref/basic.list
@@ -70,6 +70,7 @@ flaky_cpu == append_style_a.html append_style_b.html
 == box_shadow_paint_order_a.html box_shadow_paint_order_ref.html
 == box_shadow_spread_a.html box_shadow_spread_ref.html
 == box_sizing_border_box_a.html box_sizing_border_box_ref.html
+== box_sizing_padding_box_a.html box_sizing_padding_box_ref.html
 == box_sizing_sanity_check_a.html box_sizing_sanity_check_ref.html
 == br.html br-ref.html
 == canvas_as_block_element_a.html canvas_as_block_element_ref.html

diff --git a/tests/ref/box_sizing_padding_box_a.html b/tests/ref/box_sizing_padding_box_a.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="width: 256px; height: 256px; background: purple; border: 8px solid blue; padding: 10px; box-sizing: padding-box;"></div>
+<div style="width: 236px; height: 236px; background: purple; border: 8px solid blue; padding: 10px;"></div>
+</body>
+</html>
diff --git a/tests/ref/box_sizing_padding_box_ref.html b/tests/ref/box_sizing_padding_box_ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<body>
+<div style="width: 236px; height: 236px; background: purple; border: 8px solid blue; padding: 10px;"></div>
+<div style="width: 236px; height: 236px; background: purple; border: 8px solid blue; padding: 10px;"></div>
+</body>
+</html>