auto merge of #1872 : pradeep90/servo/calculate-width-trait, r=pcwalton

+ Move out and separate the width calculation code for 6 cases like: block-replaced, block-non-replaced, float-replaced, etc.
  This implements #1683
+ Use the trait to have a common min-width and max-width calculation function (This completes #783 for blocks)
+ Add reftests for the above.
This commit is contained in:
bors-servo 2014-03-11 19:22:55 -04:00
commit 9d5567b69f
15 changed files with 996 additions and 519 deletions

File diff suppressed because it is too large Load diff

View file

@ -584,6 +584,24 @@ impl Box {
.specified_or_zero()));
}
/// Compute and set margin-top and margin-bottom values.
///
/// If a value is specified or is a percentage, we calculate the right value here.
/// If it is auto, it is up to assign-height to ignore this value and
/// calculate the correct margin values.
pub fn compute_margin_top_bottom(&self, containing_block_width: Au) {
let style = self.style();
// Note: CSS 2.1 defines margin % values wrt CB *width* (not height).
let margin_top = MaybeAuto::from_style(style.Margin.get().margin_top,
containing_block_width).specified_or_zero();
let margin_bottom = MaybeAuto::from_style(style.Margin.get().margin_bottom,
containing_block_width).specified_or_zero();
let mut margin = self.margin.get();
margin.top = margin_top;
margin.bottom = margin_bottom;
self.margin.set(margin);
}
/// Populates the box model padding parameters from the given computed style.
pub fn compute_padding(&self, style: &ComputedValues, containing_block_width: Au) {
let padding = SideOffsets2D::new(self.compute_padding_length(style.Padding
@ -615,16 +633,6 @@ impl Box {
border_box_size.height - self.border.get().top - self.border.get().bottom)
}
pub fn border_and_padding_horiz(&self) -> Au {
self.border.get().left + self.border.get().right + self.padding.get().left
+ self.padding.get().right
}
pub fn border_and_padding_vert(&self) -> Au {
self.border.get().top + self.border.get().bottom + self.padding.get().top
+ self.padding.get().bottom
}
pub fn noncontent_width(&self) -> Au {
self.noncontent_left() + self.noncontent_right()
}

View file

@ -34,10 +34,16 @@
# == simple_iframe.html simple_iframe_ref.html -- disabled due to iframe crashiness
== object_element_a.html object_element_b.html
== height_compute_reset.html height_compute.html
== width_nonreplaced_block_simple_a.html width_nonreplaced_block_simple_b.html
== max_width_float_simple_a.html max_width_float_simple_b.html
== max_width_simple_a.html max_width_simple_b.html
== min_width_float_simple_a.html min_width_float_simple_b.html
== min_width_simple_a.html min_width_simple_b.html
# Positioning tests
== position_abs_cb_with_non_cb_kid_a.html position_abs_cb_with_non_cb_kid_b.html
== position_abs_height_width_a.html position_abs_height_width_b.html
== position_abs_left_a.html position_abs_left_b.html
== position_abs_margin_top_percentage_a.html position_abs_margin_top_percentage_b.html
== position_abs_nested_a.html position_abs_nested_b.html
== position_abs_replaced_simple_a.html position_abs_replaced_simple_b.html
== position_abs_static_y_a.html position_abs_static_y_b.html

View file

@ -0,0 +1,24 @@
<html>
<head>
<style>
#first {
width: 100px;
height: 100px;
border: solid 1px;
}
#float {
float: left;
height: 50px;
width: 50px;
max-width: 40px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="float">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<html>
<head>
<style>
#first {
width: 100px;
height: 100px;
border: solid 1px;
}
#block {
height: 50px;
width: 40px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="block">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,24 @@
<html>
<head>
<style>
#first {
position: relative;
width: 100px;
height: 100px;
border: solid 1px;
}
#block {
height: 50px;
width: 50%;
max-width: 40px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="block">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<html>
<head>
<style>
#first {
width: 100px;
height: 100px;
border: solid 1px;
}
#block {
height: 50px;
width: 40px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="block">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<html>
<head>
<style>
#first {
position: relative;
width: 100px;
height: 100px;
border: solid 1px;
}
#float {
float: left;
height: 50px;
width: 50%;
min-width: 60px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="float">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<html>
<head>
<style>
#first {
width: 100px;
height: 100px;
border: solid 1px;
}
#block {
height: 50px;
width: 60px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="block">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,24 @@
<html>
<head>
<style>
#first {
position: relative;
width: 100px;
height: 100px;
border: solid 1px;
}
#block {
height: 50px;
width: 50%;
min-width: 60px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="block">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<html>
<head>
<style>
#first {
width: 100px;
height: 100px;
border: solid 1px;
}
#block {
height: 50px;
width: 60px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="block">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,26 @@
<html>
<head>
<style>
#first {
position: relative;
width: 200px;
height: 50px;
background: blue;
}
#abs {
position: absolute;
margin-top: 25%;
margin-bottom: 50%;
width: 30px;
height: 30px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="abs">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<html>
<head>
<style>
#first {
width: 200px;
height: 50px;
background: blue;
}
.center {
height: 30px;
width: 30px;
background: green;
}
</style>
</head>
<body>
<div id="first">
</div>
<div class="center">
</div>
</body>
</html>

View file

@ -0,0 +1,23 @@
<html>
<head>
<style>
#first {
position: relative;
width: 100px;
height: 100px;
border: solid 1px;
}
#block {
height: 50px;
width: 50%;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="block">
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,22 @@
<html>
<head>
<style>
#first {
width: 100px;
height: 100px;
border: solid 1px;
}
#block {
height: 50px;
width: 50px;
background: green;
}
</style>
</head>
<body>
<div id="first">
<div id="block">
</div>
</div>
</body>
</html>