Image with height defined in % resizes properly

components/layout/block.rs

@@ -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())

components/layout/fragment.rs

@@ -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);
             }

components/layout/inline.rs

@@ -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);
             }
         }
 

components/layout/list_item.rs

@@ -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.

tests/wpt/mozilla/meta/MANIFEST.json

@@ -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",

tests/wpt/mozilla/tests/css/image_percentage_height.html

@@ -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>

tests/wpt/mozilla/tests/css/image_percentage_height_ref.html

@@ -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>