Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-14 11:24:33 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
Spec: http://dev.w3.org/csswg/css-ui/#valdef-box-sizing-padding-box
Currently, only Firefox is supporting this value.
This commit is contained in:
Jinwoo Song 2015-05-13 14:37:17 +09:00
parent b3b9deafa7
commit 945adabd48
6 changed files with 27 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

7
components/layout/block.rs
View file

@ -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: 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 { 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::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), box_sizing::T::content_box => Au(0),
}; };
@ -2049,7 +2051,12 @@ pub trait ISizeAndMarginsComputer {
computed_inline_size = computed_inline_size =
MaybeAuto::Specified(size - block.fragment.border_padding.inline_start_end()) 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::border_box) |
(MaybeAuto::Auto, box_sizing::T::padding_box) |
(_, box_sizing::T::content_box) => {} (_, box_sizing::T::content_box) => {}
} }

4
components/layout/fragment.rs
View file

@ -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 /// 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. /// style. After this call, the inline direction of the `margin` field will be correct.
/// ///

2
components/style/properties.mako.rs
View file

@ -2171,7 +2171,7 @@ pub mod longhands {
// http://dev.w3.org/csswg/css-ui/ // http://dev.w3.org/csswg/css-ui/
${switch_to_style_struct("Box")} ${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)} ${new_style_struct("Pointing", is_inherited=True)}

1
tests/ref/basic.list
View file

@ -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_paint_order_a.html box_shadow_paint_order_ref.html
== box_shadow_spread_a.html box_shadow_spread_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_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 == box_sizing_sanity_check_a.html box_sizing_sanity_check_ref.html
== br.html br-ref.html == br.html br-ref.html
== canvas_as_block_element_a.html canvas_as_block_element_ref.html == canvas_as_block_element_a.html canvas_as_block_element_ref.html

7
tests/ref/box_sizing_padding_box_a.html Normal file
View file

@ -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>

7
tests/ref/box_sizing_padding_box_ref.html Normal file
View file

@ -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>