Auto merge of #19184 - bobthekingofegypt:fix/18706-abs-image-with-padding, r=mbrubeck

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

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

---
<!-- 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 #18706 (github issue number if applicable).

<!-- Either: -->
- [X] There are tests for these changes OR
- [ ] These changes do not require tests because _____

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- 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="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/19184)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2018-07-13 20:18:27 -04:00 committed by GitHub
commit 3961e8d1eb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 118 additions and 1 deletions

View file

@ -1263,7 +1263,8 @@ impl BlockFlow {
// TODO: Right now, this content block-size value includes the
// margin because of erroneous block-size calculation in fragment.
// Check this when that has been fixed.
let block_size_used_val = self.fragment.border_box.size.block;
let block_size_used_val = self.fragment.border_box.size.block -
self.fragment.border_padding.block_start_end();
solution = Some(BSizeConstraintSolution::solve_vertical_constraints_abs_replaced(
block_size_used_val,
margin_block_start,
@ -1305,6 +1306,7 @@ impl BlockFlow {
}
let block_size = 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;

View file

@ -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",
@ -7339,6 +7363,11 @@
{}
]
],
"css/absolute_div_with_padding_ref.html": [
[
{}
]
],
"css/absolute_hypothetical_float_ref.html": [
[
{}
@ -7354,6 +7383,11 @@
{}
]
],
"css/absolute_img_with_padding_ref.html": [
[
{}
]
],
"css/absolute_inline_containing_block_ref.html": [
[
{}
@ -60016,6 +60050,14 @@
"e38f77f3a7691b11abeece839aba62ce9246ff6a",
"support"
],
"css/absolute_div_with_padding.html": [
"a3f85092cde2ff19120d95be8edb834a8db97b39",
"reftest"
],
"css/absolute_div_with_padding_ref.html": [
"794a23ea9ff6597273cad61ec9755df727d58f3f",
"support"
],
"css/absolute_hypothetical_float.html": [
"1abe08648b55df2390cb2b6561923aa576212fbf",
"reftest"
@ -60040,6 +60082,14 @@
"400117a1d118ee05db150877aa81bb414f4e7200",
"support"
],
"css/absolute_img_with_padding.html": [
"ae552f695fabf59becc33a274e5b3e2f5ad2d92e",
"reftest"
],
"css/absolute_img_with_padding_ref.html": [
"3f949e99ab09c5f8ce352a7987330d99023d7f0d",
"support"
],
"css/absolute_inline_containing_block_a.html": [
"8174a236497815db250a3b11aeb322e0e9c7c74f",
"reftest"

View file

@ -0,0 +1,24 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: Absolute position div with padding should not increase in size</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>

View file

@ -0,0 +1,20 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Test: Absolute position div with padding should not increase in size</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>

View file

@ -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>

View file

@ -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>