layout: Support vertical-align for inline-blocks.

Improves Twitter.
This commit is contained in:
Patrick Walton 2015-05-08 17:58:42 -07:00
parent 49b73c0bfe
commit 614c877527
4 changed files with 62 additions and 5 deletions

View file

@ -813,9 +813,9 @@ impl InlineFlow {
for style in fragment.inline_styles() {
// Ignore `vertical-align` values for table cells.
let box_style = style.get_box();
if box_style.display != display::T::inline &&
box_style.display != display::T::block {
continue
match box_style.display {
display::T::inline | display::T::block | display::T::inline_block => {}
_ => continue,
}
match box_style.vertical_align {
@ -1030,12 +1030,14 @@ impl InlineFlow {
for style in fragment.inline_styles() {
match (style.get_box().display, style.get_box().vertical_align) {
(display::T::inline, vertical_align::T::top) |
(display::T::block, vertical_align::T::top) => {
(display::T::block, vertical_align::T::top) |
(display::T::inline_block, vertical_align::T::top) => {
vertical_align = vertical_align::T::top;
break
}
(display::T::inline, vertical_align::T::bottom) |
(display::T::block, vertical_align::T::bottom) => {
(display::T::block, vertical_align::T::bottom) |
(display::T::inline_block, vertical_align::T::bottom) => {
vertical_align = vertical_align::T::bottom;
break
}

View file

@ -301,6 +301,7 @@ experimental == text_align_start_end.html text_align_start_end_ref.html
== upper_id_attr.html upper_id_attr_ref.html
flaky_cpu,experimental == vertical-lr-blocks.html vertical-lr-blocks_ref.html
== vertical_align_bottom_a.html vertical_align_bottom_ref.html
== vertical_align_inline_block_a.html vertical_align_inline_block_ref.html
== vertical_align_inside_table_a.html vertical_align_inside_table_ref.html
== vertical_align_sub_a.html vertical_align_sub_ref.html
== vertical_align_super_a.html vertical_align_super_ref.html

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0;
}
#a {
display: inline-block;
vertical-align: top;
width: 128px;
height: 64px;
background: blue;
}
#b {
display: inline-block;
width: 128px;
height: 128px;
background: purple;
}
</style>
</head>
<body>
<div><span id=a></span><span id=b></span></div>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<style>
#a {
position: absolute;
width: 128px;
height: 64px;
top: 0;
left: 0;
background: blue;
}
#b {
position: absolute;
width: 128px;
height: 128px;
top: 0;
left: 128px;
background: purple;
}
</style>
</head>
<body>
<div><span id=a></span><span id=b></span></div>
</body>
</html>