mirror of
https://github.com/servo/servo.git
synced 2025-06-06 16:45:39 +00:00
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:
commit
3961e8d1eb
6 changed files with 118 additions and 1 deletions
|
@ -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;
|
||||
|
||||
|
|
|
@ -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"
|
||||
|
|
24
tests/wpt/mozilla/tests/css/absolute_div_with_padding.html
Normal file
24
tests/wpt/mozilla/tests/css/absolute_div_with_padding.html
Normal 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>
|
|
@ -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>
|
15
tests/wpt/mozilla/tests/css/absolute_img_with_padding.html
Normal file
15
tests/wpt/mozilla/tests/css/absolute_img_with_padding.html
Normal 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>
|
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue