Skip to content

Commit

Permalink
layout: Disable the speculation of block formatting contexts' inline
Browse files Browse the repository at this point in the history 
sizes if the block formatting contexts have negative margins.

The heuristics that determine how and whether floats flow into the
margins are not valid in that case.

Closes #13299.
  • Loading branch information
@pcwalton
pcwalton committed Sep 19, 2016
1 parent 1fee88e commit b4aea11
Show file tree
Hide file tree
Showing 4 changed files with 195 additions and 26 deletions.
59 changes: 33 additions & 26 deletions components/layout/block.rs
View file
Expand Up @@ -1666,33 +1666,40 @@ impl BlockFlow {
// Now compute the real value.
self.propagate_and_compute_used_inline_size(shared_context);

// Now for some speculation.
match self.formatting_context_type() {
FormattingContextType::Block => {
// We can't actually compute the inline-size of this block now, because floats
// might affect it. Speculate that its inline-size is equal to the inline-size
// computed above minus the inline-size of the previous left and/or right floats.
//
// (If `max-width` is set, then don't perform this speculation. We guess that the
// 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 -
speculated_left_float_size -
speculated_right_float_size;
}
}
FormattingContextType::None | FormattingContextType::Other => {}
self.guess_inline_size_for_block_formatting_context_if_necessary()
}

fn guess_inline_size_for_block_formatting_context_if_necessary(&mut self) {
// We don't need to guess anything unless this is a block formatting context.
if self.formatting_context_type() != FormattingContextType::Block {
return
}

// If `max-width` is set, then don't perform this speculation. We guess that the
// 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 {
return
}

// At this point, we know we can't precisely compute the inline-size of this block now,
// because floats might affect it. Speculate that its inline-size is equal to the
// inline-size computed above minus the inline-size of the previous left and/or right
// floats.
let speculated_left_float_size = if self.fragment.margin.inline_start >= Au(0) &&
self.base.speculated_float_placement_in.left > self.fragment.margin.inline_start {
self.base.speculated_float_placement_in.left - self.fragment.margin.inline_start
} else {
Au(0)
};
let speculated_right_float_size = if self.fragment.margin.inline_end >= Au(0) &&
self.base.speculated_float_placement_in.right > self.fragment.margin.inline_end {
self.base.speculated_float_placement_in.right - self.fragment.margin.inline_end
} else {
Au(0)
};
self.fragment.border_box.size.inline = self.fragment.border_box.size.inline -
speculated_left_float_size - speculated_right_float_size
}

fn definitely_has_zero_block_size(&self) -> bool {
Expand Down
24 changes: 24 additions & 0 deletions tests/wpt/mozilla/meta/MANIFEST.json
View file
Expand Up @@ -652,6 +652,18 @@
"url": "/_mozilla/css/block_formatting_context_max_width_a.html"
}
],
"css/block_formatting_context_negative_margins_a.html": [
{
"path": "css/block_formatting_context_negative_margins_a.html",
"references": [
[
"/_mozilla/css/block_formatting_context_negative_margins_ref.html",
"=="
]
],
"url": "/_mozilla/css/block_formatting_context_negative_margins_a.html"
}
],
"css/block_formatting_context_overflow_a.html": [
{
"path": "css/block_formatting_context_overflow_a.html",
Expand Down Expand Up @@ -10058,6 +10070,18 @@
"url": "/_mozilla/css/block_formatting_context_max_width_a.html"
}
],
"css/block_formatting_context_negative_margins_a.html": [
{
"path": "css/block_formatting_context_negative_margins_a.html",
"references": [
[
"/_mozilla/css/block_formatting_context_negative_margins_ref.html",
"=="
]
],
"url": "/_mozilla/css/block_formatting_context_negative_margins_a.html"
}
],
"css/block_formatting_context_overflow_a.html": [
{
"path": "css/block_formatting_context_overflow_a.html",
Expand Down
69 changes: 69 additions & 0 deletions tests/wpt/mozilla/tests/css/block_formatting_context_negative_margins_a.html
View file
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html><head>
<!-- Original URL: http://fvsch.com/code/bugs/servo-negative-margins-width/ -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Servo test case: wrong block width with negative margins and overflow</title>
<link rel="match" href="block_formatting_context_negative_margins_ref.html">
<style>
main {
border: solid 5px red;
margin: 20px;
padding: 5px 35px;
}
section {
margin: 0;
}
p {
margin: 0;
}
.test {
color: blue;
border: solid 5px;
padding: 5px;
margin: 5px -40px;
background-color: #00f1;
}
.w100 {
box-sizing: border-box;
width: 100%;
}
.test code {
visibility: hidden;
}
</style>
</head>
<body>

<main>
<h1>Servo test case: wrong block width with negative margins and overflow</h1>

<section>
<h2>With <code>width: auto</code></h2>
<p>The following blocks have negative margins on the sides. They
should end up being as large as the red container, with their left and
right borders should overlap the container’s border.</p>
<p>In Servo Nightly 0.0.1-e3d946b (2016-09-16), when the value of <code>overflow</code> is not <code>visible</code>, the rendered width is wrong (as if a <code>box-sizing: border-box; width: 100%;</code> had been applied).</p>
<div class="test" style="overflow: visible;"></div>
<div class="test" style="overflow: scroll;"></div>
<div class="test" style="overflow: auto;"></div>
<div class="test" style="overflow-y: auto;"></div>
<div class="test" style="overflow: hidden;"></div>
</section>

<section>
<h2>With <code>box-sizing: border-box; width: 100%</code></h2>
<p>If we do use <code>box-sizing: border-box; width: 100%;</code>, for the <code>overflow: visible</code> block we get the expected rendering, but for the other values the width is wrong once again.</p>
<div class="test w100" style="overflow: visible;"></div>
<div class="test w100" style="overflow: scroll;"></div>
<div class="test w100" style="overflow: auto;"></div>
<div class="test w100" style="overflow-y: auto;"></div>
<div class="test w100" style="overflow: hidden;"></div>
</section>

</main>




</body></html>
69 changes: 69 additions & 0 deletions tests/wpt/mozilla/tests/css/block_formatting_context_negative_margins_ref.html
View file
@@ -0,0 +1,69 @@
<!DOCTYPE html>
<html><head>
<!-- Original URL: http://fvsch.com/code/bugs/servo-negative-margins-width/ -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Servo test case: wrong block width with negative margins and overflow</title>
<style>
main {
border: solid 5px red;
margin: 20px;
padding: 5px 35px;
}
section {
margin: 0;
}
p {
margin: 0;
}
.test {
color: blue;
border: solid 5px;
padding: 5px;
margin: 5px -40px;
background-color: #00f1;
}
.w100 {
box-sizing: border-box;
width: 100%;
}
.test code {
visibility: hidden;
}
</style>
</head>
<body>

<main>
<h1>Servo test case: wrong block width with negative margins and overflow</h1>

<section>
<h2>With <code>width: auto</code></h2>
<p>The following blocks have negative margins on the sides. They
should end up being as large as the red container, with their left and
right borders should overlap the container’s border.</p>
<p>In Servo Nightly 0.0.1-e3d946b (2016-09-16), when the value of <code>overflow</code> is not <code>visible</code>, the rendered width is wrong (as if a <code>box-sizing: border-box; width: 100%;</code> had been applied).</p>
<div class="test" style="overflow: visible;"></div>
<div class="test" style="overflow: visible;"></div>
<div class="test" style="overflow: visible;"></div>
<div class="test" style="overflow: visible;"></div>
<div class="test" style="overflow: visible;"></div>
</section>

<section>
<h2>With <code>box-sizing: border-box; width: 100%</code></h2>
<p>If we do use <code>box-sizing: border-box; width: 100%;</code>, for the <code>overflow: visible</code> block we get the expected rendering, but for the other values the width is wrong once again.</p>
<div class="test w100" style="overflow: visible;"></div>
<div class="test w100" style="overflow: visible;"></div>
<div class="test w100" style="overflow: visible;"></div>
<div class="test w100" style="overflow-y: visible;"></div>
<div class="test w100" style="overflow: visible;"></div>
</section>

</main>




</body></html>

0 comments on commit b4aea11

Please sign in to comment.