Auto merge of #11746 - DarinM223:master, r=mbrubeck

Image with height defined in % resizes properly

<!-- Please describe your changes on the following line: -->

Checked the html in the github issue and the image looks like it is resized properly in Servo.
Fixed image resizing when height is specified in percentages.
---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix #11723  (github issue number if applicable).

<!-- Either: -->
- [ ] There are tests for these changes OR
- [X] These changes do not require tests because this issue is marked with has-test?

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="35" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/11746)
<!-- Reviewable:end -->

8 files changed, 83 insertions, 11 deletions

diff --git a/components/layout/block.rs b/components/layout/block.rs
index 2e0794913d3..d74490f7734 100644
--- a/components/layout/block.rs
+++ b/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())
diff --git a/components/layout/fragment.rs b/components/layout/fragment.rs
index 640b7acce1a..27f08dfd5e5 100644
--- a/components/layout/fragment.rs
+++ b/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);
             }
diff --git a/components/layout/inline.rs b/components/layout/inline.rs
index 5ad86e54e05..5387f943070 100644
--- a/components/layout/inline.rs
+++ b/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);
             }
         }
 
diff --git a/components/layout/list_item.rs b/components/layout/list_item.rs
index d32c19d5c37..f12d290e9a3 100644
--- a/components/layout/list_item.rs
+++ b/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.
diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
index 24af8aa6f41..43761afed12 100644
--- a/tests/wpt/mozilla/meta/MANIFEST.json
+++ b/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",
diff --git a/tests/wpt/mozilla/tests/css/car.jpg b/tests/wpt/mozilla/tests/css/car.jpg
new file mode 100644
index 00000000000..ef09b796c63
--- /dev/null
+++ b/tests/wpt/mozilla/tests/css/car.jpg
diff --git a/tests/wpt/mozilla/tests/css/image_percentage_height.html b/tests/wpt/mozilla/tests/css/image_percentage_height.html
new file mode 100644
index 00000000000..cf37e873b44
--- /dev/null
+++ b/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>
diff --git a/tests/wpt/mozilla/tests/css/image_percentage_height_ref.html b/tests/wpt/mozilla/tests/css/image_percentage_height_ref.html
new file mode 100644
index 00000000000..f3d201f6951
--- /dev/null
+++ b/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>