Fix inline context padding on inline-block.

Fixes categories bar on wikipedia - ref #2554.
This commit is contained in:
Glenn Watson 2014-09-23 15:32:36 +10:00
parent 6177a3bdcc
commit 32c02fc048
5 changed files with 81 additions and 13 deletions

View file

@ -1178,9 +1178,9 @@ impl Fragment {
-> IntrinsicISizes { -> IntrinsicISizes {
let mut result = self.style_specified_intrinsic_inline_size(); let mut result = self.style_specified_intrinsic_inline_size();
match self.specific { let use_border_padding = match self.specific {
GenericFragment | IframeFragment(_) | TableFragment | TableCellFragment | TableColumnFragment(_) | TableRowFragment | GenericFragment | IframeFragment(_) | TableFragment | TableCellFragment | TableColumnFragment(_) | TableRowFragment |
TableWrapperFragment => {} TableWrapperFragment => { true }
InlineBlockFragment(ref mut info) => { InlineBlockFragment(ref mut info) => {
let block_flow = info.flow_ref.get_mut().as_block(); let block_flow = info.flow_ref.get_mut().as_block();
result.minimum_inline_size = max(result.minimum_inline_size, result.minimum_inline_size = max(result.minimum_inline_size,
@ -1189,11 +1189,13 @@ impl Fragment {
result.preferred_inline_size = max(result.preferred_inline_size, result.preferred_inline_size = max(result.preferred_inline_size,
block_flow.base.intrinsic_inline_sizes.preferred_inline_size + block_flow.base.intrinsic_inline_sizes.preferred_inline_size +
block_flow.base.intrinsic_inline_sizes.surround_inline_size); block_flow.base.intrinsic_inline_sizes.surround_inline_size);
false
}, },
ImageFragment(ref mut image_fragment_info) => { ImageFragment(ref mut image_fragment_info) => {
let image_inline_size = image_fragment_info.image_inline_size(); let image_inline_size = image_fragment_info.image_inline_size();
result.minimum_inline_size = max(result.minimum_inline_size, image_inline_size); result.minimum_inline_size = max(result.minimum_inline_size, image_inline_size);
result.preferred_inline_size = max(result.preferred_inline_size, image_inline_size); result.preferred_inline_size = max(result.preferred_inline_size, image_inline_size);
true
} }
ScannedTextFragment(ref text_fragment_info) => { ScannedTextFragment(ref text_fragment_info) => {
let range = &text_fragment_info.range; let range = &text_fragment_info.range;
@ -1205,19 +1207,22 @@ impl Fragment {
result.minimum_inline_size = max(result.minimum_inline_size, min_line_inline_size); result.minimum_inline_size = max(result.minimum_inline_size, min_line_inline_size);
result.preferred_inline_size = max(result.preferred_inline_size, max_line_inline_size); result.preferred_inline_size = max(result.preferred_inline_size, max_line_inline_size);
true
} }
UnscannedTextFragment(..) => fail!("Unscanned text fragments should have been scanned by now!"), UnscannedTextFragment(..) => fail!("Unscanned text fragments should have been scanned by now!"),
} };
// Take borders and padding for parent inline fragments into account, if necessary. // Take borders and padding for parent inline fragments into account, if necessary.
match self.inline_context { if use_border_padding {
None => {} match self.inline_context {
Some(ref context) => { None => {}
for style in context.styles.iter() { Some(ref context) => {
let border_width = style.logical_border_width().inline_start_end(); for style in context.styles.iter() {
let padding_inline_size = model::padding_from_style(&**style, Au(0)).inline_start_end(); let border_width = style.logical_border_width().inline_start_end();
result.minimum_inline_size = result.minimum_inline_size + border_width + padding_inline_size; let padding_inline_size = model::padding_from_style(&**style, Au(0)).inline_start_end();
result.preferred_inline_size = result.preferred_inline_size + border_width + padding_inline_size; result.minimum_inline_size = result.minimum_inline_size + border_width + padding_inline_size;
result.preferred_inline_size = result.preferred_inline_size + border_width + padding_inline_size;
}
} }
} }
} }
@ -1447,8 +1452,7 @@ impl Fragment {
InlineBlockFragment(ref mut info) => { InlineBlockFragment(ref mut info) => {
let block_flow = info.flow_ref.get_mut().as_block(); let block_flow = info.flow_ref.get_mut().as_block();
self.border_box.size.inline = block_flow.base.intrinsic_inline_sizes.preferred_inline_size + self.border_box.size.inline = block_flow.base.intrinsic_inline_sizes.preferred_inline_size +
block_flow.base.intrinsic_inline_sizes.surround_inline_size + block_flow.base.intrinsic_inline_sizes.surround_inline_size;
noncontent_inline_size;
block_flow.base.position.size.inline = self.border_box.size.inline; block_flow.base.position.size.inline = self.border_box.size.inline;
} }
ScannedTextFragment(_) => { ScannedTextFragment(_) => {

View file

@ -140,3 +140,4 @@ flaky_gpu,flaky_linux == acid2_noscroll.html acid2_ref_broken.html
== img_block_maxwidth_b.html img_block_maxwidth_ref.html == img_block_maxwidth_b.html img_block_maxwidth_ref.html
== float_clearance_a.html float_clearance_ref.html == float_clearance_a.html float_clearance_ref.html
== block_formatting_context_a.html block_formatting_context_ref.html == block_formatting_context_a.html block_formatting_context_ref.html
== inline_block_parent_padding_a.html inline_block_parent_padding_ref.html

10
tests/ref/css/ahem.css Normal file
View file

@ -0,0 +1,10 @@
@font-face {
font-family: 'ahem';
src: url(../fonts/ahem/ahem.ttf);
}
body {
font-family: 'ahem';
font-size: 100px;
line-height: 1;
}

View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style type="text/css">
body {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
list-style-image: none;
}
li {
display: inline-block;
padding: 0 100px;
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<ul><li>X</li></ul>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
div {
float: left;
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
</style>
</head>
<body>
<div class="yellow"></div>
<div class="red"></div>
<div class="yellow"></div>
</body>
</html>