Auto merge of #10557 - emilio:inline-block-max-width, r=pcwalton

layout: Take in account max and min inline size for inline fragments

Improves MDN.

r? @mbrubeck or @pcwalton

<!-- 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/10557)
<!-- Reviewable:end -->

components/layout/fragment.rs

@@ -1029,12 +1029,15 @@ impl Fragment {
     fn style_specified_intrinsic_inline_size(&self) -> IntrinsicISizesContribution {
         let flags = self.quantities_included_in_intrinsic_inline_size();
         let style = self.style();
-        let specified = if flags.contains(INTRINSIC_INLINE_SIZE_INCLUDES_SPECIFIED) {
+        let mut specified = Au(0);
-            max(model::specified(style.min_inline_size(), Au(0)),
+
-                MaybeAuto::from_style(style.content_inline_size(), Au(0)).specified_or_zero())
+        if flags.contains(INTRINSIC_INLINE_SIZE_INCLUDES_SPECIFIED) {
-        } else {
+            specified = MaybeAuto::from_style(style.content_inline_size(), Au(0)).specified_or_zero();
-            Au(0)
+            specified = max(model::specified(style.min_inline_size(), Au(0)), specified);
-        };
+            if let Some(max) = model::specified_or_none(style.max_inline_size(), Au(0)) {
+                specified = min(specified, max)
+            }
+        }
 
         // FIXME(#2261, pcwalton): This won't work well for inlines: is this OK?
         let surrounding_inline_size = self.surrounding_intrinsic_inline_size();
@@ -1375,7 +1378,7 @@ impl Fragment {
                 result.union_block(&block_flow.base.intrinsic_inline_sizes)
             }
             SpecificFragmentInfo::Image(ref mut image_fragment_info) => {
-                let image_inline_size = match self.style.content_inline_size() {
+                let mut image_inline_size = match self.style.content_inline_size() {
                     LengthOrPercentageOrAuto::Auto |
                     LengthOrPercentageOrAuto::Percentage(_) => {
                         image_fragment_info.image_inline_size()
@@ -1383,13 +1386,19 @@ impl Fragment {
                     LengthOrPercentageOrAuto::Length(length) => length,
                     LengthOrPercentageOrAuto::Calc(calc) => calc.length(),
                 };
+
+                image_inline_size = max(model::specified(self.style.min_inline_size(), Au(0)), image_inline_size);
+                if let Some(max) = model::specified_or_none(self.style.max_inline_size(), Au(0)) {
+                    image_inline_size = min(image_inline_size, max)
+                }
+
                 result.union_block(&IntrinsicISizes {
                     minimum_inline_size: image_inline_size,
                     preferred_inline_size: image_inline_size,
                 });
             }
             SpecificFragmentInfo::Canvas(ref mut canvas_fragment_info) => {
-                let canvas_inline_size = match self.style.content_inline_size() {
+                let mut canvas_inline_size = match self.style.content_inline_size() {
                     LengthOrPercentageOrAuto::Auto |
                     LengthOrPercentageOrAuto::Percentage(_) => {
                         canvas_fragment_info.canvas_inline_size()
@@ -1397,6 +1406,12 @@ impl Fragment {
                     LengthOrPercentageOrAuto::Length(length) => length,
                     LengthOrPercentageOrAuto::Calc(calc) => calc.length(),
                 };
+
+                canvas_inline_size = max(model::specified(self.style.min_inline_size(), Au(0)), canvas_inline_size);
+                if let Some(max) = model::specified_or_none(self.style.max_inline_size(), Au(0)) {
+                    canvas_inline_size = min(canvas_inline_size, max)
+                }
+
                 result.union_block(&IntrinsicISizes {
                     minimum_inline_size: canvas_inline_size,
                     preferred_inline_size: canvas_inline_size,

tests/wpt/metadata-css/css21_dev/html4/max-width-110.htm.ini

@@ -1,3 +0,0 @@
-[max-width-110.htm]
-  type: reftest
-  expected: FAIL

tests/wpt/mozilla/meta/MANIFEST.json

@@ -3179,6 +3179,54 @@
             "url": "/_mozilla/css/marker_block_direction_placement_a.html"
           }
         ],
+        "css/max_inline_block_size.html": [
+          {
+            "path": "css/max_inline_block_size.html",
+            "references": [
+              [
+                "/_mozilla/css/max_inline_block_size_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/css/max_inline_block_size.html"
+          }
+        ],
+        "css/max_inline_block_size_canvas.html": [
+          {
+            "path": "css/max_inline_block_size_canvas.html",
+            "references": [
+              [
+                "/_mozilla/css/max_inline_block_size_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/css/max_inline_block_size_canvas.html"
+          }
+        ],
+        "css/max_inline_block_size_image.html": [
+          {
+            "path": "css/max_inline_block_size_image.html",
+            "references": [
+              [
+                "/_mozilla/css/max_inline_block_size_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/css/max_inline_block_size_image.html"
+          }
+        ],
+        "css/max_inline_block_size_ref.html": [
+          {
+            "path": "css/max_inline_block_size_ref.html",
+            "references": [
+              [
+                "/_mozilla/css/max_inline_block_size_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/css/max_inline_block_size_ref.html"
+          }
+        ],
         "css/max_width_float_simple_a.html": [
           {
             "path": "css/max_width_float_simple_a.html",
@@ -9709,6 +9757,54 @@
           "url": "/_mozilla/css/marker_block_direction_placement_a.html"
         }
       ],
+      "css/max_inline_block_size.html": [
+        {
+          "path": "css/max_inline_block_size.html",
+          "references": [
+            [
+              "/_mozilla/css/max_inline_block_size_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/css/max_inline_block_size.html"
+        }
+      ],
+      "css/max_inline_block_size_canvas.html": [
+        {
+          "path": "css/max_inline_block_size_canvas.html",
+          "references": [
+            [
+              "/_mozilla/css/max_inline_block_size_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/css/max_inline_block_size_canvas.html"
+        }
+      ],
+      "css/max_inline_block_size_image.html": [
+        {
+          "path": "css/max_inline_block_size_image.html",
+          "references": [
+            [
+              "/_mozilla/css/max_inline_block_size_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/css/max_inline_block_size_image.html"
+        }
+      ],
+      "css/max_inline_block_size_ref.html": [
+        {
+          "path": "css/max_inline_block_size_ref.html",
+          "references": [
+            [
+              "/_mozilla/css/max_inline_block_size_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/css/max_inline_block_size_ref.html"
+        }
+      ],
       "css/max_width_float_simple_a.html": [
         {
           "path": "css/max_width_float_simple_a.html",

tests/wpt/mozilla/tests/css/max_inline_block_size.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Max inline-block size inside another inline-block element</title>
+<link rel="match" href="max_inline_block_size_ref.html">
+<style>
+html, body { margin: 0; padding: 0; }
+
+div { display: inline-block; }
+
+#a {
+  background: red;
+}
+
+#b {
+  background: rgb(0, 255, 0);
+  width: 500px;
+  max-width: 250px;
+  height: 250px;
+}
+</style>
+<div id="a"><div id="b"></div></div>

tests/wpt/mozilla/tests/css/max_inline_block_size_canvas.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Max inline-block size inside another inline-block element</title>
+<link rel="match" href="max_inline_block_size_ref.html">
+<style>
+html, body { margin: 0; padding: 0; }
+
+div, canvas { display: inline-block; }
+
+#a {
+  background: red;
+}
+
+#c {
+  max-width: 250px;
+  height: 250px;
+}
+</style>
+<div id="a"><canvas width="500" height="250" id="c"></canvas></div>
+<script>
+  var c = document.getElementById("c").getContext("2d");
+  c.fillStyle = "rgb(0, 255, 0)";
+  c.fillRect(0, 0, c.canvas.width, c.canvas.height);
+</script>

tests/wpt/mozilla/tests/css/max_inline_block_size_image.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Max inline-block size inside another inline-block element</title>
+<link rel="match" href="max_inline_block_size_ref.html">
+<style>
+html, body { margin: 0; padding: 0; }
+
+div, img { display: inline-block; }
+
+#a {
+  background: red;
+}
+
+#b {
+  max-width: 250px;
+}
+</style>
+<div id="a"><img id="b" width="500" height="250" src="250x250_green.png"></div>

tests/wpt/mozilla/tests/css/max_inline_block_size_ref.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Max inline-block size inside another inline-block element</title>
+<link rel="match" href="max_inline_block_size_ref.html">
+<style>
+html, body { margin: 0; padding: 0; }
+
+div { display: inline-block; }
+
+#a {
+  background: red;
+}
+
+#b {
+  background: rgb(0, 255, 0);
+  width: 250px;
+  height: 250px;
+}
+</style>
+<div id="a"><div id="b"></div></div>