mirror of
https://github.com/servo/servo.git
synced 2025-08-03 04:30:10 +01:00
Auto merge of #10279 - notriddle:issue_10258, r=mbrubeck
Fix #10258 Respect border-box when computing the relative sizes of children. <!-- Reviewable:start --> --- This change is [<img src="https://reviewable.io/review_button.svg" height="35" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/10279) <!-- Reviewable:end -->
This commit is contained in:
commit
77444d00be
4 changed files with 91 additions and 1 deletions
|
@ -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) {
|
||||
|
|
|
@ -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",
|
||||
|
|
30
tests/wpt/mozilla/tests/css/image_percentage_dimen.html
Normal file
30
tests/wpt/mozilla/tests/css/image_percentage_dimen.html
Normal file
|
@ -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>
|
29
tests/wpt/mozilla/tests/css/image_percentage_dimen_ref.html
Normal file
29
tests/wpt/mozilla/tests/css/image_percentage_dimen_ref.html
Normal file
|
@ -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>
|
Loading…
Add table
Add a link
Reference in a new issue