Image with height defined in % resizes properly

This commit is contained in:
Darin Minamoto 2016-06-15 16:39:22 -07:00
parent 033786cd0d
commit 4a4be1d7e5
8 changed files with 83 additions and 11 deletions

View file

@ -2842,8 +2842,9 @@ impl ISizeAndMarginsComputer for AbsoluteReplaced {
let opaque_block = OpaqueFlow::from_flow(block);
let containing_block_inline_size =
block.containing_block_size(&layout_context.shared_context().viewport_size, opaque_block).inline;
let container_block_size = block.explicit_block_containing_size(layout_context);
let fragment = block.fragment();
fragment.assign_replaced_inline_size_if_necessary(containing_block_inline_size);
fragment.assign_replaced_inline_size_if_necessary(containing_block_inline_size, container_block_size);
// For replaced absolute flow, the rest of the constraint solving will
// take inline-size to be specified as the value computed here.
MaybeAuto::Specified(fragment.content_inline_size())
@ -2898,10 +2899,11 @@ impl ISizeAndMarginsComputer for BlockReplaced {
fn initial_computed_inline_size(&self,
block: &mut BlockFlow,
parent_flow_inline_size: Au,
_: &LayoutContext)
layout_context: &LayoutContext)
-> MaybeAuto {
let container_block_size = block.explicit_block_containing_size(layout_context);
let fragment = block.fragment();
fragment.assign_replaced_inline_size_if_necessary(parent_flow_inline_size);
fragment.assign_replaced_inline_size_if_necessary(parent_flow_inline_size, container_block_size);
// For replaced block flow, the rest of the constraint solving will
// take inline-size to be specified as the value computed here.
MaybeAuto::Specified(fragment.content_inline_size())
@ -2955,10 +2957,11 @@ impl ISizeAndMarginsComputer for FloatReplaced {
fn initial_computed_inline_size(&self,
block: &mut BlockFlow,
parent_flow_inline_size: Au,
_: &LayoutContext)
layout_context: &LayoutContext)
-> MaybeAuto {
let container_block_size = block.explicit_block_containing_size(layout_context);
let fragment = block.fragment();
fragment.assign_replaced_inline_size_if_necessary(parent_flow_inline_size);
fragment.assign_replaced_inline_size_if_necessary(parent_flow_inline_size, container_block_size);
// For replaced block flow, the rest of the constraint solving will
// take inline-size to be specified as the value computed here.
MaybeAuto::Specified(fragment.content_inline_size())
@ -3042,10 +3045,11 @@ impl ISizeAndMarginsComputer for InlineBlockReplaced {
fn initial_computed_inline_size(&self,
block: &mut BlockFlow,
parent_flow_inline_size: Au,
_: &LayoutContext)
layout_context: &LayoutContext)
-> MaybeAuto {
let container_block_size = block.explicit_block_containing_size(layout_context);
let fragment = block.fragment();
fragment.assign_replaced_inline_size_if_necessary(parent_flow_inline_size);
fragment.assign_replaced_inline_size_if_necessary(parent_flow_inline_size, container_block_size);
// For replaced block flow, the rest of the constraint solving will
// take inline-size to be specified as the value computed here.
MaybeAuto::Specified(fragment.content_inline_size())

View file

@ -488,6 +488,7 @@ impl ReplacedImageFragmentInfo {
style: &ServoComputedValues,
noncontent_inline_size: Au,
container_inline_size: Au,
container_block_size: Option<Au>,
fragment_inline_size: Au,
fragment_block_size: Au)
-> Au {
@ -515,7 +516,7 @@ impl ReplacedImageFragmentInfo {
let specified_height = ReplacedImageFragmentInfo::style_length(
style_block_size,
None);
container_block_size);
let specified_height = match specified_height {
MaybeAuto::Auto => intrinsic_height,
MaybeAuto::Specified(h) => h,
@ -1767,7 +1768,9 @@ impl Fragment {
/// Assigns replaced inline-size, padding, and margins for this fragment only if it is replaced
/// content per CSS 2.1 § 10.3.2.
pub fn assign_replaced_inline_size_if_necessary(&mut self, container_inline_size: Au) {
pub fn assign_replaced_inline_size_if_necessary(&mut self,
container_inline_size: Au,
container_block_size: Option<Au>) {
match self.specific {
SpecificFragmentInfo::Generic |
SpecificFragmentInfo::GeneratedContent(_) |
@ -1833,6 +1836,7 @@ impl Fragment {
.calculate_replaced_inline_size(style,
noncontent_inline_size,
container_inline_size,
container_block_size,
fragment_inline_size,
fragment_block_size);
}
@ -1844,6 +1848,7 @@ impl Fragment {
.calculate_replaced_inline_size(style,
noncontent_inline_size,
container_inline_size,
container_block_size,
fragment_inline_size,
fragment_block_size);
}

View file

@ -1359,6 +1359,7 @@ impl Flow for InlineFlow {
let inline_size = self.base.block_container_inline_size;
let container_mode = self.base.block_container_writing_mode;
let container_block_size = self.base.block_container_explicit_block_size;
self.base.position.size.inline = inline_size;
{
@ -1368,7 +1369,7 @@ impl Flow for InlineFlow {
fragment.compute_border_and_padding(inline_size, border_collapse);
fragment.compute_block_direction_margins(inline_size);
fragment.compute_inline_direction_margins(inline_size);
fragment.assign_replaced_inline_size_if_necessary(inline_size);
fragment.assign_replaced_inline_size_if_necessary(inline_size, container_block_size);
}
}

View file

@ -88,7 +88,8 @@ impl Flow for ListItemFlow {
for marker in self.marker_fragments.iter_mut().rev() {
let containing_block_inline_size = self.block_flow.base.block_container_inline_size;
marker.assign_replaced_inline_size_if_necessary(containing_block_inline_size);
let container_block_size = self.block_flow.explicit_block_containing_size(layout_context);
marker.assign_replaced_inline_size_if_necessary(containing_block_inline_size, container_block_size);
// Do this now. There's no need to do this in bubble-widths, since markers do not
// contribute to the inline size of this flow.

View file

@ -2040,6 +2040,18 @@
"url": "/_mozilla/css/image_percentage_dimen.html"
}
],
"css/image_percentage_height.html": [
{
"path": "css/image_percentage_height.html",
"references": [
[
"/_mozilla/css/image_percentage_height_ref.html",
"=="
]
],
"url": "/_mozilla/css/image_percentage_height.html"
}
],
"css/image_rendering_auto_a.html": [
{
"path": "css/image_rendering_auto_a.html",
@ -9080,6 +9092,18 @@
"url": "/_mozilla/css/image_percentage_dimen.html"
}
],
"css/image_percentage_height.html": [
{
"path": "css/image_percentage_height.html",
"references": [
[
"/_mozilla/css/image_percentage_height_ref.html",
"=="
]
],
"url": "/_mozilla/css/image_percentage_height.html"
}
],
"css/image_rendering_auto_a.html": [
{
"path": "css/image_rendering_auto_a.html",

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View file

@ -0,0 +1,23 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- Tests that image resizes properly with height specified as a percentage. -->
<link rel="match" href="image_percentage_height_ref.html">
<style>
div {
height: 100px;
}
img {
height: 100%;
}
</style>
</head>
<body>
<div>
<img src="car.jpg" alt="Car">
</div>
</body>
</html>

View file

@ -0,0 +1,14 @@
<!doctype html>
<html>
<head>
<!-- Tests that image resizes properly with height specified as a percentage. -->
<style>
img {
height: 100px;
}
</style>
</head>
<body>
<img src="car.jpg" alt="Car">
</body>
</html>