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

layout: Make percentages in top and bottom for relative positions

Browse source 
relative to height, not width.

Improves etsy.com.

Closes #13760.
This commit is contained in:
Patrick Walton 2016-10-13 22:50:27 -07:00
parent 0f4209644c
commit d5443ee450
14 changed files with 81 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

25
components/layout/block.rs
View file

@ -753,6 +753,17 @@ impl BlockFlow {
}
}
/// Writes in the size of the relative containing block for children. (This information
/// is also needed to handle RTL.)
fn propagate_early_absolute_position_info_to_children(&mut self) {
for kid in self.base.child_iter_mut() {
flow::mut_base(kid).early_absolute_position_info = EarlyAbsolutePositionInfo {
relative_containing_block_size: self.fragment.content_box().size,
relative_containing_block_mode: self.fragment.style().writing_mode,
}
}
}
/// Assign block-size for current flow.
///
/// * Collapse margins for flow's children and set in-flow child flows' block offsets now that
@ -1011,16 +1022,9 @@ impl BlockFlow {
self.fragment.border_box.size.block = block_size;
}
// Write in the size of the relative containing block for children. (This information
// is also needed to handle RTL.)
for kid in self.base.child_iter_mut() {
flow::mut_base(kid).early_absolute_position_info = EarlyAbsolutePositionInfo {
relative_containing_block_size: self.fragment.content_box().size,
relative_containing_block_mode: self.fragment.style().writing_mode,
};
}
if self.base.flags.contains(IS_ABSOLUTELY_POSITIONED) {
self.propagate_early_absolute_position_info_to_children();
return None
}
@ -1050,10 +1054,9 @@ impl BlockFlow {
// position.
self.fragment.border_box.size.block = cur_b;
self.fragment.border_box.start.b = Au(0);
if !self.base.flags.contains(IS_ABSOLUTELY_POSITIONED) {
self.base.position.size.block = cur_b;
}
self.propagate_early_absolute_position_info_to_children();
// Translate the current set of floats back into the parent coordinate system in the
// inline direction, and store them in the flow so that flows that come later in the

4
components/layout/fragment.rs
View file

@ -1379,10 +1379,10 @@ impl Fragment {
};
let offset_b = if offsets.block_start != LengthOrPercentageOrAuto::Auto {
MaybeAuto::from_style(offsets.block_start,
container_size.inline).specified_or_zero()
container_size.block).specified_or_zero()
} else {
-MaybeAuto::from_style(offsets.block_end,
container_size.inline).specified_or_zero()
container_size.block).specified_or_zero()
};
LogicalSize::new(style.writing_mode, offset_i, offset_b)
}

3
tests/wpt/metadata-css/css21_dev/html4/bottom-103.htm.ini
View file

@ -1,3 +0,0 @@
[bottom-103.htm]
type: reftest
expected: FAIL

3
tests/wpt/metadata-css/css21_dev/html4/bottom-104.htm.ini
View file

@ -1,3 +0,0 @@
[bottom-104.htm]
type: reftest
expected: FAIL

3
tests/wpt/metadata-css/css21_dev/html4/bottom-113.htm.ini
View file

@ -1,3 +0,0 @@
[bottom-113.htm]
type: reftest
expected: FAIL

3
tests/wpt/metadata-css/css21_dev/html4/position-relative-nested-001.htm.ini
View file

@ -1,3 +0,0 @@
[position-relative-nested-001.htm]
type: reftest
expected: FAIL

3
tests/wpt/metadata-css/css21_dev/html4/relpos-calcs-007.htm.ini
View file

@ -1,3 +0,0 @@
[relpos-calcs-007.htm]
type: reftest
expected: FAIL

3
tests/wpt/metadata-css/css21_dev/html4/top-103.htm.ini
View file

@ -1,3 +0,0 @@
[top-103.htm]
type: reftest
expected: FAIL

3
tests/wpt/metadata-css/css21_dev/html4/top-104.htm.ini
View file

@ -1,3 +0,0 @@
[top-104.htm]
type: reftest
expected: FAIL

3
tests/wpt/metadata-css/css21_dev/html4/top-113.htm.ini
View file

@ -1,3 +0,0 @@
[top-113.htm]
type: reftest
expected: FAIL

3
tests/wpt/metadata-css/css21_dev/html4/top-114.htm.ini
View file

@ -1,3 +0,0 @@
[top-114.htm]
type: reftest
expected: FAIL

24
tests/wpt/mozilla/meta/MANIFEST.json
View file

@ -4668,6 +4668,18 @@
"url": "/_mozilla/css/quotes_simple_a.html"
}
],
"css/relative_position_vertical_percentage_a.html": [
{
"path": "css/relative_position_vertical_percentage_a.html",
"references": [
[
"/_mozilla/css/relative_position_vertical_percentage_ref.html",
"=="
]
],
"url": "/_mozilla/css/relative_position_vertical_percentage_a.html"
}
],
"css/removeproperty.html": [
{
"path": "css/removeproperty.html",
@ -18474,6 +18486,18 @@
"url": "/_mozilla/css/quotes_simple_a.html"
}
],
"css/relative_position_vertical_percentage_a.html": [
{
"path": "css/relative_position_vertical_percentage_a.html",
"references": [
[
"/_mozilla/css/relative_position_vertical_percentage_ref.html",
"=="
]
],
"url": "/_mozilla/css/relative_position_vertical_percentage_a.html"
}
],
"css/removeproperty.html": [
{
"path": "css/removeproperty.html",

19
tests/wpt/mozilla/tests/css/relative_position_vertical_percentage_a.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="match" href="relative_position_vertical_percentage_ref.html">
<style>
body, html {
margin: 0;
}
#a {
height: 200px;
width: 600px;
background: gold;
}
#b {
position: relative;
top: 50%;
}
</style>
<div id=a><div id=b>X

22
tests/wpt/mozilla/tests/css/relative_position_vertical_percentage_ref.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body, html {
margin: 0;
}
#a {
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 600px;
background: gold;
}
#b {
position: absolute;
top: 100px;
left: 0px;
}
</style>
<div id=a></div><div id=b>X