Auto merge of #10279 - notriddle:issue_10258, r=mbrubeck

Fix #10258 Respect border-box when computing the relative sizes of children.  --- This change is [<img src="https://reviewable.io/review_button.svg" height="35" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/10279)
servo · Mar 30, 2016 · 77444d0 · 77444d0
2 parents 21e4936 + 61c7ee9
commit 77444d0
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 1 deletion.
diff --git a/components/layout/block.rs b/components/layout/block.rs
@@ -1308,8 +1308,15 @@ impl BlockFlow {
         let opaque_self = OpaqueFlow::from_flow(self);
 
         // Calculate non-auto block size to pass to children.
+        let box_border = match self.fragment.style().get_box().box_sizing {
+            box_sizing::T::border_box => self.fragment.border_padding.block_start_end(),
+            box_sizing::T::content_box => Au(0),
+        };
         let parent_container_size = self.explicit_block_containing_size(layout_context);
-        let explicit_content_size = self.explicit_block_size(parent_container_size);
+        // https://drafts.csswg.org/css-ui-3/#box-sizing
+        let explicit_content_size = self
+                                    .explicit_block_size(parent_container_size)
+                                    .map(|x| if x < box_border { Au(0) } else { x - box_border });
 
         // Calculate containing block inline size.
         let containing_block_size = if flags.contains(IS_ABSOLUTELY_POSITIONED) {

diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -1916,6 +1916,18 @@
             "url": "/_mozilla/css/iframe/stacking_context_position_a.html"
           }
         ],
+        "css/image_percentage_dimen.html": [
+          {
+            "path": "css/image_percentage_dimen.html",
+            "references": [
+              [
+                "/_mozilla/css/image_percentage_dimen_ref.html",
+                "=="
+              ]
+            ],
+            "url": "/_mozilla/css/image_percentage_dimen.html"
+          }
+        ],
         "css/image_rendering_auto_a.html": [
           {
             "path": "css/image_rendering_auto_a.html",
@@ -8302,6 +8314,18 @@
           "url": "/_mozilla/css/iframe/stacking_context_position_a.html"
         }
       ],
+      "css/image_percentage_dimen.html": [
+        {
+          "path": "css/image_percentage_dimen.html",
+          "references": [
+            [
+              "/_mozilla/css/image_percentage_dimen_ref.html",
+              "=="
+            ]
+          ],
+          "url": "/_mozilla/css/image_percentage_dimen.html"
+        }
+      ],
       "css/image_rendering_auto_a.html": [
         {
           "path": "css/image_rendering_auto_a.html",

diff --git a/tests/wpt/mozilla/tests/css/image_percentage_dimen.html b/tests/wpt/mozilla/tests/css/image_percentage_dimen.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- saved from url=(0042)http://testujem.eu/servo/circle-image.html -->
+<html>
+<head>
+    <link rel='match' href='image_percentage_dimen_ref.html'>
+    <style type="text/css">
+        .image {
+            border:15px solid red;
+            padding:28px;
+            width:230px;
+            height:230px;
+            box-sizing:border-box;
+            -moz-box-sizing:border-box;
+            float:left;
+            margin-right:8%
+        }
+        .image .img {
+            background-size:cover;
+            background-position:center center;
+            width:100%;
+            height:100%;
+        }
+    </style>
+</head>
+<body>
+    <div class="image">
+        <div class="img" style="background-image: url(test.jpeg);"></div>
+    </div>
+</body>
+</html>
diff --git a/tests/wpt/mozilla/tests/css/image_percentage_dimen_ref.html b/tests/wpt/mozilla/tests/css/image_percentage_dimen_ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- saved from url=(0042)http://testujem.eu/servo/circle-image.html -->
+<html>
+<head>
+    <style type="text/css">
+        .image {
+            border:15px solid red;
+            padding:28px;
+            width:230px;
+            height:230px;
+            box-sizing:border-box;
+            -moz-box-sizing:border-box;
+            float:left;
+            margin-right:8%
+        }
+        .image .img {
+            background-size:cover;
+            background-position:center center;
+            width:144px;
+            height:144px;
+        }
+    </style>
+</head>
+<body>
+    <div class="image">
+        <div class="img" style="background-image: url(test.jpeg);"></div>
+    </div>
+</body>
+</html>