layout: Take the style-specified width into account when computing the

intrinsic inline sizes of images.

Improves Facebook Timeline.
This commit is contained in:
Patrick Walton 2015-08-18 18:32:18 -07:00
parent 19d466b062
commit 66473625db
4 changed files with 39 additions and 4 deletions

View file

@ -1265,10 +1265,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

@ -144,6 +144,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_background_a.html inline_background_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>