fix block size for absolute replaced element

Absolutely replaced elements with padding were incorrectly setting their block size to include twice the padding values. This attempts to stop that extra padding for replaced elements but leave the working flow for non replaced elements
servo · Nov 22, 2017 · 21e2ed5 · 21e2ed5
1 parent 3ecd017
commit 21e2ed5
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 1 deletion.
diff --git a/components/layout/block.rs b/components/layout/block.rs
@@ -1300,7 +1300,12 @@ impl BlockFlow {
             self.base.position.start.b = solution.block_start + self.fragment.margin.block_start
         }
 
-        let block_size = solution.block_size + self.fragment.border_padding.block_start_end();
+        let block_size = if self.fragment.is_replaced() {
+            solution.block_size
+        } else {
+            (solution.block_size + self.fragment.border_padding.block_start_end())
+        };
+
         self.fragment.border_box.size.block = block_size;
         self.base.position.size.block = block_size;
 

diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json
@@ -73,6 +73,18 @@
      {}
     ]
    ],
+   "css/absolute_div_with_padding.html": [
+    [
+     "/_mozilla/css/absolute_div_with_padding.html",
+     [
+      [
+       "/_mozilla/css/absolute_div_with_padding_ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/absolute_hypothetical_float.html": [
     [
      "/_mozilla/css/absolute_hypothetical_float.html",
@@ -109,6 +121,18 @@
      {}
     ]
    ],
+   "css/absolute_img_with_padding.html": [
+    [
+     "/_mozilla/css/absolute_img_with_padding.html",
+     [
+      [
+       "/_mozilla/css/absolute_img_with_padding_ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/absolute_inline_containing_block_a.html": [
     [
      "/_mozilla/css/absolute_inline_containing_block_a.html",
@@ -7906,6 +7930,11 @@
      {}
     ]
    ],
+   "css/absolute_img_with_padding_ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/absolute_inline_containing_block_ref.html": [
     [
      {}
@@ -60876,6 +60905,10 @@
    "e38f77f3a7691b11abeece839aba62ce9246ff6a",
    "support"
   ],
+  "css/absolute_div_with_padding.html": [
+   "6bfd1ae130e22c3083070a3574f827ded86f6724",
+   "reftest"
+  ],
   "css/absolute_hypothetical_float.html": [
    "1abe08648b55df2390cb2b6561923aa576212fbf",
    "reftest"
@@ -60900,6 +60933,14 @@
    "400117a1d118ee05db150877aa81bb414f4e7200",
    "support"
   ],
+  "css/absolute_img_with_padding.html": [
+   "15896a5c1c77109c26624248d3df213788eb186c",
+   "reftest"
+  ],
+  "css/absolute_img_with_padding_ref.html": [
+   "3f949e99ab09c5f8ce352a7987330d99023d7f0d",
+   "support"
+  ],
   "css/absolute_inline_containing_block_a.html": [
    "8174a236497815db250a3b11aeb322e0e9c7c74f",
    "reftest"

diff --git a/tests/wpt/mozilla/tests/css/absolute_div_with_padding.html b/tests/wpt/mozilla/tests/css/absolute_div_with_padding.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title></title>
+<link rel="match" href="absolute_div_with_padding_ref.html">
+<style>
+    .absolute{
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        padding: 100px;
+        width: 150px;
+        height: 150px;
+        background-color: green;
+    }
+    .box{
+        width: 350px;
+        height: 350px;
+        position: relative;
+        background: red;
+    }
+</style>
+<div class="box">
+    <div class="absolute"></div>
+</div>
diff --git a/tests/wpt/mozilla/tests/css/absolute_div_with_padding_ref.html b/tests/wpt/mozilla/tests/css/absolute_div_with_padding_ref.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<meta charset="utf-8">
+<title></title>
+<style>
+    .absolute{
+        padding: 100px;
+        width: 150px;
+        height: 150px;
+        background-color: green;
+    }
+    .box{
+        width: 350px;
+        height: 350px;
+        position: relative;
+        background: red;
+    }
+</style>
+<div class="box">
+    <div class="absolute"></div>
+</div>
diff --git a/tests/wpt/mozilla/tests/css/absolute_img_with_padding.html b/tests/wpt/mozilla/tests/css/absolute_img_with_padding.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: Absolute position image with padding should not increase in size</title>
+<link rel="match" href="absolute_img_with_padding_ref.html">
+<body>
+    <style>
+        img{
+            position: absolute;
+            top: 0px;
+            left: 0px;
+            padding: 100px;
+        }
+    </style>
+    <img src="100x100_green.png" alt="img">
+</body>
diff --git a/tests/wpt/mozilla/tests/css/absolute_img_with_padding_ref.html b/tests/wpt/mozilla/tests/css/absolute_img_with_padding_ref.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test: Absolute position image with padding should not increase in size</title>
+<body style="margin:0">
+    <img style="padding: 100px;" src="100x100_green.png" alt="img">
+</body>