For inline-block correctly use min-width

With inline-block elements set the width to max(min width, specified width) instead of only using the specified width.
servo · Mar 4, 2015 · a35ffe1 · a35ffe1 · bors-servo · Mar 4, 2015
1 parent 2f3697f
commit a35ffe1
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 5 deletions.
diff --git a/components/layout/fragment.rs b/components/layout/fragment.rs
@@ -982,18 +982,19 @@ 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) {
-            MaybeAuto::from_style(style.content_inline_size(), Au(0)).specified_or_zero()
+        let (min_inline_size, specified) = if flags.contains(INTRINSIC_INLINE_SIZE_INCLUDES_SPECIFIED) {
+            (model::specified(style.min_inline_size(), Au(0)),
+             MaybeAuto::from_style(style.content_inline_size(), Au(0)).specified_or_zero())
         } else {
-            Au(0)
+            (Au(0), Au(0))
         };
 
         // FIXME(#2261, pcwalton): This won't work well for inlines: is this OK?
         let surrounding_inline_size = self.surrounding_intrinsic_inline_size();
 
         IntrinsicISizesContribution {
             content_intrinsic_sizes: IntrinsicISizes {
-                minimum_inline_size: specified,
+                minimum_inline_size: min_inline_size,
                 preferred_inline_size: specified,
             },
             surrounding_size: surrounding_inline_size,
@@ -1721,7 +1722,8 @@ impl Fragment {
             SpecificFragmentInfo::InlineBlock(ref mut info) => {
                 let block_flow = info.flow_ref.as_block();
                 self.border_box.size.inline =
-                    block_flow.base.intrinsic_inline_sizes.preferred_inline_size;
+                    max(block_flow.base.intrinsic_inline_sizes.minimum_inline_size,
+                        block_flow.base.intrinsic_inline_sizes.preferred_inline_size);
                 block_flow.base.block_container_inline_size = self.border_box.size.inline;
             }
             SpecificFragmentInfo::ScannedText(ref info) => {

diff --git a/tests/ref/basic.list b/tests/ref/basic.list
@@ -156,6 +156,7 @@ fragment=top != ../html/acid2.html acid2_ref.html
 == img_block_display_a.html img_block_display_ref.html
 == after_block_iteration.html after_block_iteration_ref.html
 == inline_block_percentage_height_a.html inline_block_percentage_height_ref.html
+== inline_block_min_width.html inline_block_min_width_ref.html
 == percentage_height_float_a.html percentage_height_float_ref.html
 == img_block_maxwidth_a.html img_block_maxwidth_ref.html
 == img_block_maxwidth_b.html img_block_maxwidth_ref.html

diff --git a/tests/ref/inline_block_min_width.html b/tests/ref/inline_block_min_width.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style type="text/css">
+            * {
+                margin: 0;
+                padding: 0;
+            }
+            div {
+                display: inline-block;
+                min-width: 200px;
+                width: 100px;
+                height: 100px;
+            }
+            .red {
+                background-color: red;
+            }
+            .green {
+                background-color: green;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="red"></div><div class="green"></div>
+    </body>
+</html>
diff --git a/tests/ref/inline_block_min_width_ref.html b/tests/ref/inline_block_min_width_ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style type="text/css">
+            * {
+                margin: 0;
+                padding: 0;
+            }
+            div {
+                display: inline-block;
+                width: 200px;
+                height: 100px;
+            }
+            .red {
+                background-color: red;
+            }
+            .green {
+                background-color: green;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="red"></div><div class="green"></div>
+    </body>
+</html>