diff --git a/components/layout/block.rs b/components/layout/block.rs index 490e94a0a68..7b2aa56ec40 100644 --- 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 index 34e3f296398..94c5c8bc24e 100644 --- a/components/layout/fragment.rs +++ b/components/layout/fragment.rs @@ -999,6 +999,10 @@ impl Fragment { } } + pub fn padding_width(&self) -> LogicalMargin { + 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 index fdcbb8b9a59..8b2f3f532bd 100644 --- 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 index e91386c24ac..0636f9e856a 100644 --- 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 new file mode 100644 index 00000000000..991037bd7dd --- /dev/null +++ b/tests/ref/box_sizing_padding_box_a.html @@ -0,0 +1,7 @@ + + + +
+
+ + diff --git a/tests/ref/box_sizing_padding_box_ref.html b/tests/ref/box_sizing_padding_box_ref.html new file mode 100644 index 00000000000..5fc5b649ace --- /dev/null +++ b/tests/ref/box_sizing_padding_box_ref.html @@ -0,0 +1,7 @@ + + + +
+
+ +