mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
Image with height defined in % resizes properly
This commit is contained in:
Darin Minamoto
parent
033786cd0d
commit
4a4be1d7e5
8 changed files with 83 additions and 11 deletions
|
|
@ -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())
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
BIN
tests/wpt/mozilla/tests/css/car.jpg
Normal file
BIN
tests/wpt/mozilla/tests/css/car.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
23
tests/wpt/mozilla/tests/css/image_percentage_height.html
Normal file
23
tests/wpt/mozilla/tests/css/image_percentage_height.html
Normal 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>
|
||||
14
tests/wpt/mozilla/tests/css/image_percentage_height_ref.html
Normal file
14
tests/wpt/mozilla/tests/css/image_percentage_height_ref.html
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue