mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Auto merge of #11125 - pcwalton:reddit-block-formatting-context-fix, r=mbrubeck
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. r? @mbrubeck <!-- 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/11125) <!-- Reviewable:end -->
This commit is contained in:
commit
98863746ae
5 changed files with 100 additions and 14 deletions
|
@ -1650,10 +1650,18 @@ impl BlockFlow {
|
|||
// page set `max-width` in order to avoid hitting floats. The search box on Google
|
||||
// SERPs falls into this category.)
|
||||
if self.fragment.style.max_inline_size() == LengthOrPercentageOrNone::None {
|
||||
let speculated_left_float_size =
|
||||
max(Au(0),
|
||||
self.base.speculated_float_placement_in.left -
|
||||
self.fragment.margin.inline_start);
|
||||
let speculated_right_float_size =
|
||||
max(Au(0),
|
||||
self.base.speculated_float_placement_in.right -
|
||||
self.fragment.margin.inline_end);
|
||||
self.fragment.border_box.size.inline =
|
||||
self.fragment.border_box.size.inline -
|
||||
self.base.speculated_float_placement_in.left -
|
||||
self.base.speculated_float_placement_in.right;
|
||||
speculated_left_float_size -
|
||||
speculated_right_float_size;
|
||||
}
|
||||
}
|
||||
FormattingContextType::None | FormattingContextType::Other => {}
|
||||
|
|
|
@ -475,20 +475,18 @@ impl SpeculatedFloatPlacement {
|
|||
let block_flow = flow.as_block();
|
||||
if block_flow.formatting_context_type() != FormattingContextType::None {
|
||||
*self = block_flow.base.speculated_float_placement_in;
|
||||
}
|
||||
|
||||
if self.left > Au(0) || self.right > Au(0) {
|
||||
let speculated_inline_content_edge_offsets =
|
||||
block_flow.fragment.guess_inline_content_edge_offsets();
|
||||
if self.left > Au(0) && speculated_inline_content_edge_offsets.start > Au(0) {
|
||||
self.left = self.left + speculated_inline_content_edge_offsets.start
|
||||
} else {
|
||||
if self.left > Au(0) || self.right > Au(0) {
|
||||
let speculated_inline_content_edge_offsets =
|
||||
block_flow.fragment.guess_inline_content_edge_offsets();
|
||||
if self.left > Au(0) && speculated_inline_content_edge_offsets.start > Au(0) {
|
||||
self.left = self.left + speculated_inline_content_edge_offsets.start
|
||||
}
|
||||
if self.right > Au(0) && speculated_inline_content_edge_offsets.end > Au(0) {
|
||||
self.right = self.right + speculated_inline_content_edge_offsets.end
|
||||
}
|
||||
}
|
||||
if self.right > Au(0) && speculated_inline_content_edge_offsets.end > Au(0) {
|
||||
self.right = self.right + speculated_inline_content_edge_offsets.end
|
||||
}
|
||||
}
|
||||
|
||||
if block_flow.formatting_context_type() == FormattingContextType::None {
|
||||
self.left = max(self.left, block_flow.base.speculated_float_placement_in.left);
|
||||
self.right = max(self.right, block_flow.base.speculated_float_placement_in.right);
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue