layout: Take margins in the inline direction into account when

guessing the inline-size of block formatting contexts.

Fixes the layout on reddit.com.

Partially addresses #10571.
This commit is contained in:
Patrick Walton 2016-05-10 17:10:37 -07:00
parent 40be84df26
commit b6bed345f5
5 changed files with 100 additions and 14 deletions

View file

@ -616,6 +616,18 @@
"url": "/_mozilla/css/block_formatting_context_margin_collapse_a.html"
}
],
"css/block_formatting_context_margin_inout_a.html": [
{
"path": "css/block_formatting_context_margin_inout_a.html",
"references": [
[
"/_mozilla/css/block_formatting_context_margin_inout_ref.html",
"=="
]
],
"url": "/_mozilla/css/block_formatting_context_margin_inout_a.html"
}
],
"css/block_formatting_context_max_width_a.html": [
{
"path": "css/block_formatting_context_max_width_a.html",
@ -7410,6 +7422,18 @@
"url": "/_mozilla/css/block_formatting_context_margin_collapse_a.html"
}
],
"css/block_formatting_context_margin_inout_a.html": [
{
"path": "css/block_formatting_context_margin_inout_a.html",
"references": [
[
"/_mozilla/css/block_formatting_context_margin_inout_ref.html",
"=="
]
],
"url": "/_mozilla/css/block_formatting_context_margin_inout_a.html"
}
],
"css/block_formatting_context_max_width_a.html": [
{
"path": "css/block_formatting_context_max_width_a.html",

View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="match" href="block_formatting_context_margin_inout_ref.html">
<style>
html, body {
margin: 0;
}
div {
float: right;
width: 300px;
height: 32px;
background: green;
}
section {
margin-right: 300px;
overflow: hidden;
height: 64px;
background: blue;
}
</style>
<div></div>
<section></section>
<section></section>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body {
margin: 0;
}
div, section {
position: absolute;
}
div {
width: 300px;
height: 32px;
right: 0;
background: green;
}
section {
left: 0;
right: 300px;
height: 64px;
background: blue;
}
#a {
top: 0;
}
#b {
top: 64px;
}
</style>
<div></div>
<section id=a></section>
<section id=b></section>