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

layout: Improve our handling of inline absolute containing blocks.

Browse source 
Several issues are addressed in this commit:

* Inline flows now bubble up their absolute descendants instead of
  making the inline flow the containing block for them. (In the future,
  we will need to make the inline flow *sometimes* be the containing
  block for them, but for now it improves sites to unconditionally
  bubble up.)

* Fragments now look at their inline fragment context to determine
  whether they are positioned.

* Inline flows now push the stacking-relative position of the absolute
  containing block down to their inline-block fragments.

* Inline absolute hypothetical fragments can be containing blocks.

* Fixes the logic in
  `containing_block_range_for_flow_surrounding_fragment_at_index`. The
  condition to determine whether fragments are positioned was inverted!

* `Descendants`/`AbsDescendants` has been refactored in order to become
  more friendly to inline absolute containing blocks in the future.

Improves the inline position of the green drop-down arrow in the Google
SERPs. (The block position is still wrong.)
This commit is contained in:
Patrick Walton 2015-08-11 17:39:43 -07:00
parent 55e755e35a
commit a30379975a
10 changed files with 236 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

23
tests/ref/absolute_hypothetical_with_intervening_inline_block_a.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<style>
em {
position: relative;
}
main {
display: inline-block;
}
section {
display: inline;
position: absolute;
top: 0;
left: 0;
background: white;
width: 48px;
height: 48px;
}
strong {
color: red;
}
</style>
There should be no red.<em><main><section></section></main></em><strong>_</strong>

3
tests/ref/absolute_hypothetical_with_intervening_inline_block_ref.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
There should be no red.

39
tests/ref/absolute_inline_containing_block_a.html
View file

@ -5,7 +5,6 @@
html, body {
margin: 0;
font-size: 0.1px;
line-height: 0;
}
#a {
padding-left: 100px;
@ -21,10 +20,46 @@ html, body {
height: 100px;
background: purple;
}
.cover-up-platform-specific-differences {
position: absolute;
background: white;
}
#cover-up-platform-specific-differences-a, #cover-up-platform-specific-differences-b {
left: 0;
width: 300px;
}
#cover-up-platform-specific-differences-c, #cover-up-platform-specific-differences-d {
top: 0;
height: 300px;
}
#cover-up-platform-specific-differences-a {
top: 0;
height: 25px;
}
#cover-up-platform-specific-differences-b {
top: 75px;
height: 100px;
}
#cover-up-platform-specific-differences-c {
left: 0;
width: 125px;
}
#cover-up-platform-specific-differences-d {
left: 175px;
width: 100px;
}
</style>
</head>
<body>
<div><span id=a>&nbsp;</span><span id=b>&nbsp;<div id=c></div></span></span></div>
<div><span id=a>a</span><span id=b><div id=c></div></span></span></div>
<div class=cover-up-platform-specific-differences id=cover-up-platform-specific-differences-a>
</div>
<div class=cover-up-platform-specific-differences id=cover-up-platform-specific-differences-b>
</div>
<div class=cover-up-platform-specific-differences id=cover-up-platform-specific-differences-c>
</div>
<div class=cover-up-platform-specific-differences id=cover-up-platform-specific-differences-d>
</div>
</body>
</html>

14
tests/ref/absolute_inline_containing_block_ref.html
View file

@ -4,20 +4,20 @@
<style>
html, body {
margin: 0;
font-size: 0.1px;
font-size: 0;
}
#a {
div {
position: absolute;
left: 100px;
top: 0;
width: 100px;
height: 100px;
top: 25px;
left: 125px;
width: 50px;
height: 50px;
background: purple;
}
</style>
</head>
<body>
<div id=a></div>
<div></div>
</body>
</html>

1
tests/ref/basic.list
View file

@ -10,6 +10,7 @@
fragment=top != ../html/acid2.html acid2_ref.html
== abs_rel_explicit_height.html abs_rel_explicit_height_ref.html
== absolute_hypothetical_with_intervening_inline_block_a.html absolute_hypothetical_with_intervening_inline_block_ref.html
== absolute_inline_containing_block_a.html absolute_inline_containing_block_ref.html
== absolute_z_index_auto_paint_order_a.html absolute_z_index_auto_paint_order_ref.html
== acid1_a.html acid1_b.html