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

layout: Fix intrinsic inline size calculating of inline blocks

Browse source 
When calculating intrinsic inline sizes of an inline block, take its
nested inline parents into account.
This commit is contained in:
Pu Xingyu 2017-04-10 23:08:53 +08:00
parent 638e1dc40b
commit 6c5dfdf19b
4 changed files with 74 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

46
components/layout/fragment.rs
View file

@ -1547,31 +1547,29 @@ impl Fragment {
} }
}; };
// Take borders and padding for parent inline fragments into account, if necessary. // Take borders and padding for parent inline fragments into account.
if self.is_primary_fragment() { let writing_mode = self.style.writing_mode;
let writing_mode = self.style.writing_mode; if let Some(ref context) = self.inline_context {
if let Some(ref context) = self.inline_context { for node in &context.nodes {
for node in &context.nodes { let mut border_width = node.style.logical_border_width();
let mut border_width = node.style.logical_border_width(); let mut padding = model::padding_from_style(&*node.style, Au(0), writing_mode);
let mut padding = model::padding_from_style(&*node.style, Au(0), writing_mode); let mut margin = model::specified_margin_from_style(&*node.style, writing_mode);
let mut margin = model::specified_margin_from_style(&*node.style, writing_mode); if !node.flags.contains(FIRST_FRAGMENT_OF_ELEMENT) {
if !node.flags.contains(FIRST_FRAGMENT_OF_ELEMENT) { border_width.inline_start = Au(0);
border_width.inline_start = Au(0); padding.inline_start = Au(0);
padding.inline_start = Au(0); margin.inline_start = Au(0);
margin.inline_start = Au(0);
}
if !node.flags.contains(LAST_FRAGMENT_OF_ELEMENT) {
border_width.inline_end = Au(0);
padding.inline_end = Au(0);
margin.inline_end = Au(0);
}
result.surrounding_size =
result.surrounding_size +
border_width.inline_start_end() +
padding.inline_start_end() +
margin.inline_start_end();
} }
if !node.flags.contains(LAST_FRAGMENT_OF_ELEMENT) {
border_width.inline_end = Au(0);
padding.inline_end = Au(0);
margin.inline_end = Au(0);
}
result.surrounding_size =
result.surrounding_size +
border_width.inline_start_end() +
padding.inline_start_end() +
margin.inline_start_end();
} }
} }

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

@ -2687,6 +2687,18 @@
{} {}
] ]
], ],
"css/inline_block_nested_margin.html": [
[
"/_mozilla/css/inline_block_nested_margin.html",
[
[
"/_mozilla/css/inline_block_nested_margin_ref.html",
"=="
]
],
{}
]
],
"css/inline_block_opacity_change.html": [ "css/inline_block_opacity_change.html": [
[ [
"/_mozilla/css/inline_block_opacity_change.html", "/_mozilla/css/inline_block_opacity_change.html",
@ -7862,6 +7874,11 @@
{} {}
] ]
], ],
"css/inline_block_nested_margin_ref.html": [
[
{}
]
],
"css/inline_block_opacity_change_ref.html": [ "css/inline_block_opacity_change_ref.html": [
[ [
{} {}
@ -21770,6 +21787,14 @@
"ed6e0f503cb26c1091270ed0992a0a41553846d9", "ed6e0f503cb26c1091270ed0992a0a41553846d9",
"support" "support"
], ],
"css/inline_block_nested_margin.html": [
"b4114aa6421b4c9117e60e66ccc09868e05f3239",
"reftest"
],
"css/inline_block_nested_margin_ref.html": [
"5e00c77f55a3d12e841e9c99395f4d3783664fd8",
"support"
],
"css/inline_block_opacity_change.html": [ "css/inline_block_opacity_change.html": [
"df6b37b744fdf79da9d33c54b8ce77abd462c53b", "df6b37b744fdf79da9d33c54b8ce77abd462c53b",
"reftest" "reftest"

15
tests/wpt/mozilla/tests/css/inline_block_nested_margin.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html>
<meta charset="utf-8">
<link rel="match" href="inline_block_nested_margin_ref.html">
<style>
#outer {
margin: 0 50px;
}
#inner {
display: inline-block;
width: 200px;
height: 40px;
background: orange;
}
</style>
<span id="outer"><span id="inner"></span></span>

12
tests/wpt/mozilla/tests/css/inline_block_nested_margin_ref.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<meta charset="utf-8">
<style>
#inner {
display: inline-block;
width: 200px;
height: 40px;
background: orange;
margin: 0 50px;
}
</style>
<span id="inner"></span>