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:
bors-servo 2016-03-30 12:48:40 +05:30
commit 77444d00be
4 changed files with 91 additions and 1 deletions

View file

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

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

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