mirror of
https://github.com/servo/servo.git
synced 2025-08-06 06:00:15 +01:00
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:
commit
9d5567b69f
15 changed files with 996 additions and 519 deletions
File diff suppressed because it is too large
Load diff
|
@ -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()
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
24
src/test/ref/max_width_float_simple_a.html
Normal file
24
src/test/ref/max_width_float_simple_a.html
Normal 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>
|
22
src/test/ref/max_width_float_simple_b.html
Normal file
22
src/test/ref/max_width_float_simple_b.html
Normal 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>
|
24
src/test/ref/max_width_simple_a.html
Normal file
24
src/test/ref/max_width_simple_a.html
Normal 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>
|
22
src/test/ref/max_width_simple_b.html
Normal file
22
src/test/ref/max_width_simple_b.html
Normal 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>
|
25
src/test/ref/min_width_float_simple_a.html
Normal file
25
src/test/ref/min_width_float_simple_a.html
Normal 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>
|
22
src/test/ref/min_width_float_simple_b.html
Normal file
22
src/test/ref/min_width_float_simple_b.html
Normal 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>
|
24
src/test/ref/min_width_simple_a.html
Normal file
24
src/test/ref/min_width_simple_a.html
Normal 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>
|
22
src/test/ref/min_width_simple_b.html
Normal file
22
src/test/ref/min_width_simple_b.html
Normal 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>
|
26
src/test/ref/position_abs_margin_top_percentage_a.html
Normal file
26
src/test/ref/position_abs_margin_top_percentage_a.html
Normal 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>
|
22
src/test/ref/position_abs_margin_top_percentage_b.html
Normal file
22
src/test/ref/position_abs_margin_top_percentage_b.html
Normal 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>
|
23
src/test/ref/width_nonreplaced_block_simple_a.html
Normal file
23
src/test/ref/width_nonreplaced_block_simple_a.html
Normal 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>
|
22
src/test/ref/width_nonreplaced_block_simple_b.html
Normal file
22
src/test/ref/width_nonreplaced_block_simple_b.html
Normal 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>
|
Loading…
Add table
Add a link
Reference in a new issue