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

layout: Use the margin box for vertical positioning of inline-block

Browse source 
fragments if `overflow` is not `visible` per CSS 2.1 § 10.8.1.

Additionally, this patch reverts the change introduced in #12642 in
favor of the spec-compliant behavior described above. This patch also
removes the `inline_block_overflow.html` reftest introduced in #3725, as
the behavior it expected contradicted CSS 2.1 (and in fact the test
fails in Gecko).

The changes that this patch makes to `input_selection_a.html` and
`input_selection_incremental_a.html` are necessary workarounds to make
the tests pass in light of the fact that Servo's UA stylesheet applies
`overflow: hidden` to `<input>` elements. I believe that the changes are
not necessary in other rendering engines because they hard-code
`overflow: hidden`-like behavior for `<input>` elements, while Servo
uses the actual CSS `overflow: hidden` behavior. As far as I can tell,
Servo's behavior is arguably more spec-compliant, but it remains to be
seen how Web compatible it is.

Improves the Google results pages.

Closes #13707.
This commit is contained in:
Patrick Walton 2016-10-12 12:13:48 -07:00
parent a332e0bb56
commit c25dd2adf6
13 changed files with 97 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

29
components/layout/fragment.rs
View file

@ -2215,18 +2215,29 @@ impl Fragment {
// CSS 2.1 § 10.8: "The height of each inline-level box in the line box is calculated.
// For replaced elements, inline-block elements, and inline-table elements, this is the
// height of their margin box."
//
// CSS 2.1 § 10.8.1: "The baseline of an 'inline-block' is the baseline of its last
// line box in the normal flow, unless it has either no in-flow line boxes or if its
// 'overflow' property has a computed value other than 'visible', in which case the
// baseline is the bottom margin edge."
//
// NB: We must use `block_flow.fragment.border_box.size.block` here instead of
// `block_flow.base.position.size.block` because sometimes the latter is late-computed
// and isn't up to date at this point.
let block_flow = flow.as_block();
let is_auto = style.get_position().height == LengthOrPercentageOrAuto::Auto;
let baseline_offset = match flow.baseline_offset_of_last_line_box_in_flow() {
Some(baseline_offset) if is_auto => baseline_offset,
_ => block_flow.fragment.border_box.size.block,
};
let start_margin = block_flow.fragment.margin.block_start;
let end_margin = block_flow.fragment.margin.block_end;
let block_size_above_baseline = baseline_offset + start_margin;
let depth_below_baseline = flow::base(&**flow).position.size.block - baseline_offset +
end_margin;
InlineMetrics::new(block_size_above_baseline, depth_below_baseline, baseline_offset)
if style.get_box().overflow_y.0 == overflow_x::T::visible {
if let Some(baseline_offset) = flow.baseline_offset_of_last_line_box_in_flow() {
let ascent = baseline_offset + start_margin;
let space_below_baseline = block_flow.fragment.border_box.size.block -
baseline_offset + end_margin;
return InlineMetrics::new(ascent, space_below_baseline, baseline_offset)
}
}
let ascent = block_flow.fragment.border_box.size.block + end_margin;
let space_above_baseline = start_margin + ascent;
InlineMetrics::new(space_above_baseline, Au(0), ascent)
}
}

3
tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_box-clear.htm.ini
View file

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

3
tests/wpt/metadata-css/css21_dev/html4/vertical-align-baseline-004a.htm.ini
View file

@ -1,3 +0,0 @@
[vertical-align-baseline-004a.htm]
type: reftest
expected: FAIL

3
tests/wpt/metadata-css/css21_dev/html4/vertical-align-baseline-005a.htm.ini
View file

@ -1,3 +0,0 @@
[vertical-align-baseline-005a.htm]
type: reftest
expected: FAIL

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

@ -2540,6 +2540,18 @@
"url": "/_mozilla/css/inline_block_centering_a.html"
}
],
"css/inline_block_explicit_height_a.html": [
{
"path": "css/inline_block_explicit_height_a.html",
"references": [
[
"/_mozilla/css/inline_block_explicit_height_ref.html",
"=="
]
],
"url": "/_mozilla/css/inline_block_explicit_height_a.html"
}
],
"css/inline_block_height_with_out_of_flow_child_a.html": [
{
"path": "css/inline_block_height_with_out_of_flow_child_a.html",
@ -2624,18 +2636,6 @@
"url": "/_mozilla/css/inline_block_opacity_change.html"
}
],
"css/inline_block_overflow.html": [
{
"path": "css/inline_block_overflow.html",
"references": [
[
"/_mozilla/css/inline_block_overflow_ref.html",
"=="
]
],
"url": "/_mozilla/css/inline_block_overflow.html"
}
],
"css/inline_block_overflow_hidden_a.html": [
{
"path": "css/inline_block_overflow_hidden_a.html",
@ -16322,6 +16322,18 @@
"url": "/_mozilla/css/inline_block_centering_a.html"
}
],
"css/inline_block_explicit_height_a.html": [
{
"path": "css/inline_block_explicit_height_a.html",
"references": [
[
"/_mozilla/css/inline_block_explicit_height_ref.html",
"=="
]
],
"url": "/_mozilla/css/inline_block_explicit_height_a.html"
}
],
"css/inline_block_height_with_out_of_flow_child_a.html": [
{
"path": "css/inline_block_height_with_out_of_flow_child_a.html",
@ -16406,18 +16418,6 @@
"url": "/_mozilla/css/inline_block_opacity_change.html"
}
],
"css/inline_block_overflow.html": [
{
"path": "css/inline_block_overflow.html",
"references": [
[
"/_mozilla/css/inline_block_overflow_ref.html",
"=="
]
],
"url": "/_mozilla/css/inline_block_overflow.html"
}
],
"css/inline_block_overflow_hidden_a.html": [
{
"path": "css/inline_block_overflow_hidden_a.html",

21
tests/wpt/mozilla/tests/css/inline_block_explicit_height_a.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="match" href="inline_block_explicit_height_ref.html">
<link rel="stylesheet" type="text/css" href="css/ahem.css">
<style>
body, html {
margin: 0;
font: 25px Ahem;
line-height: 25px;
}
div {
display: inline-block;
background: green;
color: blue;
}
.tall {
height: 100px;
}
</style>
<div class=tall>X</div><div>X</div>

24
tests/wpt/mozilla/tests/css/inline_block_explicit_height_ref.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body, html {
margin: 0;
}
div {
position: absolute;
left: 0;
top: 0;
}
#a {
width: 25px;
height: 100px;
background: green;
}
#b {
width: 50px;
height: 25px;
background: blue;
}
</style>
<div id=a></div><div id=b></div>

7
tests/wpt/mozilla/tests/css/inline_block_overflow.html
View file

@ -1,7 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<link rel='match' href='inline_block_overflow_ref.html'>
<body>
a<span style="display: inline-block; overflow: hidden">b</span>
</body>
</html>

6
tests/wpt/mozilla/tests/css/inline_block_overflow_ref.html
View file

@ -1,6 +0,0 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<body>
ab
</body>
</html>

3
tests/wpt/mozilla/tests/css/input_selection_a.html
View file

@ -10,9 +10,10 @@
border: 0 none;
margin: 0;
padding: 0;
color: white;
}
::selection {
color: black;
color: white;
background: rgba(176, 214, 255, 1.0);
}
</style>

1
tests/wpt/mozilla/tests/css/input_selection_incremental_a.html
View file

@ -10,6 +10,7 @@
border: 0 none;
margin: 0;
padding: 0;
color: white;
}
::selection {
color: white;

2
tests/wpt/mozilla/tests/css/input_selection_incremental_ref.html
View file

@ -9,8 +9,10 @@
background: rgba(176, 214, 255, 1.0);
}
div {
color: white;
font: 16px sans-serif;
display: inline-block;
overflow: hidden;
}
</style>
</head>

4
tests/wpt/mozilla/tests/css/input_selection_ref.html
View file

@ -6,8 +6,10 @@
<style>
span {
font: 16px sans-serif;
color: black;
background: rgba(176, 214, 255, 1.0);
overflow: hidden;
display: inline-block;
color: white;
}
</style>
</head>