Auto merge of #7280 - pcwalton:style-specified-img-intrinsic-width, r=mbrubeck

layout: Take the style-specified width into account when computing the intrinsic inline sizes of images.

Improves Facebook Timeline.

r? @mbrubeck

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/7280)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2015-08-19 11:39:33 -06:00
commit 5c284a546a
4 changed files with 39 additions and 4 deletions

View file

@ -1269,10 +1269,16 @@ impl Fragment {
result.union_block(&block_flow.base.intrinsic_inline_sizes)
}
SpecificFragmentInfo::Image(ref mut image_fragment_info) => {
let image_inline_size = match image_fragment_info.replaced_image_fragment_info
.dom_inline_size {
None => image_fragment_info.image_inline_size(),
Some(dom_inline_size) => dom_inline_size,
// FIXME(pcwalton): Shouldn't `width` and `height` be preshints?
let image_inline_size = match (image_fragment_info.replaced_image_fragment_info
.dom_inline_size,
self.style.content_inline_size()) {
(None, LengthOrPercentageOrAuto::Auto) |
(None, LengthOrPercentageOrAuto::Percentage(_)) => {
image_fragment_info.image_inline_size()
}
(Some(dom_inline_size), _) => dom_inline_size,
(None, LengthOrPercentageOrAuto::Length(length)) => length,
};
result.union_block(&IntrinsicISizes {
minimum_inline_size: image_inline_size,

View file

@ -148,6 +148,7 @@ experimental == iframe/size_attributes_vertical_writing_mode.html iframe/size_at
!= img_simple.html img_simple_ref.html
== img_size_a.html img_size_b.html
== img_width_attribute_intrinsic_width_a.html img_width_attribute_intrinsic_width_ref.html
== img_width_style_intrinsic_width_a.html img_width_style_intrinsic_width_ref.html
== incremental_float_a.html incremental_float_ref.html
== incremental_inline_layout_a.html incremental_inline_layout_ref.html
== inline_absolute_hypothetical_clip_a.html inline_absolute_hypothetical_clip_ref.html

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="float: left; background: red; height: 100px; overflow: hidden">
<img src=400x400_green.png style="width: 100px;">
</div>
There should be no red.
</table>
</body>
</html>

View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="float: left; height: 100px; overflow: hidden">
<img src=400x400_green.png style="width: 100px;">
</div>
There should be no red.
</table>
</body>
</html>