Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-05 13:40:08 +01:00
Code Issues Projects Releases Packages Wiki Activity

layout: Use the value of the max-width property when speculating what

Browse source 
the inline sizes of block formatting contexts are likely to be.

Usually, Web developers set this property on block formatting contexts
in order to avoid running into floats, and we can use this as a
speculation hint.

Fixes the width of the search box on the Google SERPs.
This commit is contained in:
Patrick Walton 2015-08-17 16:41:47 -07:00
parent d654841288
commit 69e5bd2e3d
4 changed files with 62 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

14
components/layout/block.rs
View file

@ -1639,10 +1639,16 @@ impl Flow for BlockFlow {
// We can't actually compute the inline-size of this block now, because floats // 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 // 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. // computed above minus the inline-size of the previous left and/or right floats.
self.fragment.border_box.size.inline = //
self.fragment.border_box.size.inline - // (If `max-width` is set, then don't perform this speculation. We guess that the
self.inline_size_of_preceding_left_floats - // page set `max-width` in order to avoid hitting floats. The search box on Google
self.inline_size_of_preceding_right_floats; // SERPs falls into this category.)
if self.fragment.style.max_inline_size() == LengthOrPercentageOrNone::None {
self.fragment.border_box.size.inline =
self.fragment.border_box.size.inline -
self.inline_size_of_preceding_left_floats -
self.inline_size_of_preceding_right_floats;
}
} }
FormattingContextType::Other => { FormattingContextType::Other => {
self.base.flags.remove(IMPACTED_BY_LEFT_FLOATS); self.base.flags.remove(IMPACTED_BY_LEFT_FLOATS);

1
tests/ref/basic.list
View file

@ -44,6 +44,7 @@ flaky_cpu == append_style_a.html append_style_b.html
== block_formatting_context_complex_a.html block_formatting_context_complex_ref.html == block_formatting_context_complex_a.html block_formatting_context_complex_ref.html
== block_formatting_context_containing_floats_a.html block_formatting_context_containing_floats_ref.html == block_formatting_context_containing_floats_a.html block_formatting_context_containing_floats_ref.html
== block_formatting_context_float_placement_a.html block_formatting_context_float_placement_ref.html == block_formatting_context_float_placement_a.html block_formatting_context_float_placement_ref.html
== block_formatting_context_max_width_a.html block_formatting_context_max_width_ref.html
== block_formatting_context_relative_a.html block_formatting_context_ref.html == block_formatting_context_relative_a.html block_formatting_context_ref.html
== block_formatting_context_translation_a.html block_formatting_context_translation_ref.html == block_formatting_context_translation_a.html block_formatting_context_translation_ref.html
== block_formatting_context_with_margin_a.html block_formatting_context_with_margin_ref.html == block_formatting_context_with_margin_a.html block_formatting_context_with_margin_ref.html

24
tests/ref/block_formatting_context_max_width_a.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<style>
html, body {
margin: 0;
}
section {
width: 300px;
}
div {
height: 100px;
}
#a {
float: right;
width: 100px;
background: gold;
}
#b {
overflow: hidden;
max-width: 200px;
background: blue;
}
</style>
<section><div id=a></div><div id=b>

27
tests/ref/block_formatting_context_max_width_ref.html Normal file
View file

@ -0,0 +1,27 @@
<!DOCTYPE html>
<style>
html, body {
margin: 0;
}
section {
width: 300px;
}
div {
position: absolute;
height: 100px;
top: 0;
}
#a {
float: right;
width: 100px;
left: 200px;
background: gold;
}
#b {
overflow: hidden;
width: 200px;
background: blue;
}
</style>
<section><div id=a></div><div id=b>