layout: Fix several bugs relating to inline borders, padding, and

margins.

* The code that attempted to strip out borders that span multiple
  fragments in the same element could go wrong if fragments were
  stripped out due to text clumping or whitespace stripping. This patch
  rewrites that code to maintain flags in the inline fragment context
  specifying whether the node is the beginning or end of the element.
  Not only is this easier to maintain, it's closer in spirit to what roc
  originally suggested two years ago: it's isomorphic to "begin element,
  end element" markers for inline layout.

* Padding and margins for spans containing inline-blocks are now
  properly handled via a division of labor between the `InlineBlock`
  fragment and the `BlockFlow` that represents the inline-block.

* Unscanned text fragments may not be joined together into a text run if
  borders, padding, or margins separate them.

Because Servo now matches the rendering of Gecko and WebKit on the
`input_button_margins_a` reftest, I had to modify it to add some
vertical alignment.

The combined effect of all of these fixes places "Advertising" on the
right place on google.com.
This commit is contained in:
Patrick Walton 2015-08-13 09:49:40 -07:00
parent 3f9b6f8586
commit ee8741b7a8
11 changed files with 319 additions and 130 deletions

View file

@ -224,6 +224,7 @@ flaky_cpu == linebreak_simple_a.html linebreak_simple_b.html
!= list_style_type_a.html list_style_type_ref.html
== many_brs_a.html many_brs_ref.html
== margin_a.html margin_b.html
== margin_padding_inline_block_a.html margin_padding_inline_block_ref.html
== margins_inside_floats_a.html margins_inside_floats_ref.html
== marker_block_direction_placement_a.html marker_block_direction_placement_ref.html
== max_width_float_simple_a.html max_width_float_simple_b.html

View file

@ -5,6 +5,8 @@ body, html {
}
input {
margin-left: 64px;
border: none;
vertical-align: top;
}
</style>
<input type=button value=Hello>

View file

@ -6,6 +6,7 @@ body, html {
input {
position: absolute;
left: 64px;
border: none;
}
</style>
<input type=button value=Hello>

View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<style>
html, body {
margin: 0;
}
</style>
<div><span style="padding-left: 100px; display: inline-block">Boo</span></div>
<div><span style="padding-left: 100px">Foo</span></div>
<div><span style="margin-left: 100px">Foo</span></div>

View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<style>
html, body {
margin: 0;
}
div {
position: relative;
}
span {
position: relative;
left: 100px;
}
</style>
<div><span>Boo</span></div>
<div><span>Foo</span></div>
<div><span>Foo</span></div>