From c25dd2adf6f849f074af959a6ef81d6868d22e91 Mon Sep 17 00:00:00 2001 From: Patrick Walton Date: Wed, 12 Oct 2016 12:13:48 -0700 Subject: [PATCH] =?UTF-8?q?layout:=20Use=20the=20margin=20box=20for=20vert?= =?UTF-8?q?ical=20positioning=20of=20`inline-block`=20fragments=20if=20`ov?= =?UTF-8?q?erflow`=20is=20not=20`visible`=20per=20CSS=202.1=20=C2=A7=2010.?= =?UTF-8?q?8.1.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 `` elements. I believe that the changes are not necessary in other rendering engines because they hard-code `overflow: hidden`-like behavior for `` 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. --- components/layout/fragment.rs | 29 +++++++---- .../html/flexbox_box-clear.htm.ini | 3 -- .../vertical-align-baseline-004a.htm.ini | 3 -- .../vertical-align-baseline-005a.htm.ini | 3 -- tests/wpt/mozilla/meta/MANIFEST.json | 48 +++++++++---------- .../css/inline_block_explicit_height_a.html | 21 ++++++++ .../css/inline_block_explicit_height_ref.html | 24 ++++++++++ .../tests/css/inline_block_overflow.html | 7 --- .../tests/css/inline_block_overflow_ref.html | 6 --- .../mozilla/tests/css/input_selection_a.html | 3 +- .../css/input_selection_incremental_a.html | 1 + .../css/input_selection_incremental_ref.html | 2 + .../tests/css/input_selection_ref.html | 4 +- 13 files changed, 97 insertions(+), 57 deletions(-) delete mode 100644 tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_box-clear.htm.ini delete mode 100644 tests/wpt/metadata-css/css21_dev/html4/vertical-align-baseline-004a.htm.ini delete mode 100644 tests/wpt/metadata-css/css21_dev/html4/vertical-align-baseline-005a.htm.ini create mode 100644 tests/wpt/mozilla/tests/css/inline_block_explicit_height_a.html create mode 100644 tests/wpt/mozilla/tests/css/inline_block_explicit_height_ref.html delete mode 100644 tests/wpt/mozilla/tests/css/inline_block_overflow.html delete mode 100644 tests/wpt/mozilla/tests/css/inline_block_overflow_ref.html diff --git a/components/layout/fragment.rs b/components/layout/fragment.rs index 0faf0df22af..1fa29bac16b 100644 --- a/components/layout/fragment.rs +++ b/components/layout/fragment.rs @@ -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) } } diff --git a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_box-clear.htm.ini b/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_box-clear.htm.ini deleted file mode 100644 index bc3e8919f84..00000000000 --- a/tests/wpt/metadata-css/css-flexbox-1_dev/html/flexbox_box-clear.htm.ini +++ /dev/null @@ -1,3 +0,0 @@ -[flexbox_box-clear.htm] - type: reftest - expected: FAIL diff --git a/tests/wpt/metadata-css/css21_dev/html4/vertical-align-baseline-004a.htm.ini b/tests/wpt/metadata-css/css21_dev/html4/vertical-align-baseline-004a.htm.ini deleted file mode 100644 index 8476190e5b3..00000000000 --- a/tests/wpt/metadata-css/css21_dev/html4/vertical-align-baseline-004a.htm.ini +++ /dev/null @@ -1,3 +0,0 @@ -[vertical-align-baseline-004a.htm] - type: reftest - expected: FAIL diff --git a/tests/wpt/metadata-css/css21_dev/html4/vertical-align-baseline-005a.htm.ini b/tests/wpt/metadata-css/css21_dev/html4/vertical-align-baseline-005a.htm.ini deleted file mode 100644 index e975805393b..00000000000 --- a/tests/wpt/metadata-css/css21_dev/html4/vertical-align-baseline-005a.htm.ini +++ /dev/null @@ -1,3 +0,0 @@ -[vertical-align-baseline-005a.htm] - type: reftest - expected: FAIL diff --git a/tests/wpt/mozilla/meta/MANIFEST.json b/tests/wpt/mozilla/meta/MANIFEST.json index 2d2a03fa7c5..21c710884ff 100644 --- a/tests/wpt/mozilla/meta/MANIFEST.json +++ b/tests/wpt/mozilla/meta/MANIFEST.json @@ -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", diff --git a/tests/wpt/mozilla/tests/css/inline_block_explicit_height_a.html b/tests/wpt/mozilla/tests/css/inline_block_explicit_height_a.html new file mode 100644 index 00000000000..59c40d14231 --- /dev/null +++ b/tests/wpt/mozilla/tests/css/inline_block_explicit_height_a.html @@ -0,0 +1,21 @@ + + + + + +
X
X
+ diff --git a/tests/wpt/mozilla/tests/css/inline_block_explicit_height_ref.html b/tests/wpt/mozilla/tests/css/inline_block_explicit_height_ref.html new file mode 100644 index 00000000000..b0866cf0950 --- /dev/null +++ b/tests/wpt/mozilla/tests/css/inline_block_explicit_height_ref.html @@ -0,0 +1,24 @@ + + + +
+ diff --git a/tests/wpt/mozilla/tests/css/inline_block_overflow.html b/tests/wpt/mozilla/tests/css/inline_block_overflow.html deleted file mode 100644 index 8646a2dacaf..00000000000 --- a/tests/wpt/mozilla/tests/css/inline_block_overflow.html +++ /dev/null @@ -1,7 +0,0 @@ - - - - - ab - - diff --git a/tests/wpt/mozilla/tests/css/inline_block_overflow_ref.html b/tests/wpt/mozilla/tests/css/inline_block_overflow_ref.html deleted file mode 100644 index 63d14407d59..00000000000 --- a/tests/wpt/mozilla/tests/css/inline_block_overflow_ref.html +++ /dev/null @@ -1,6 +0,0 @@ - - - - ab - - diff --git a/tests/wpt/mozilla/tests/css/input_selection_a.html b/tests/wpt/mozilla/tests/css/input_selection_a.html index 59484fc6db8..fbee15aed7b 100644 --- a/tests/wpt/mozilla/tests/css/input_selection_a.html +++ b/tests/wpt/mozilla/tests/css/input_selection_a.html @@ -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); } diff --git a/tests/wpt/mozilla/tests/css/input_selection_incremental_a.html b/tests/wpt/mozilla/tests/css/input_selection_incremental_a.html index 11bc66128a7..c242b56c188 100644 --- a/tests/wpt/mozilla/tests/css/input_selection_incremental_a.html +++ b/tests/wpt/mozilla/tests/css/input_selection_incremental_a.html @@ -10,6 +10,7 @@ border: 0 none; margin: 0; padding: 0; + color: white; } ::selection { color: white; diff --git a/tests/wpt/mozilla/tests/css/input_selection_incremental_ref.html b/tests/wpt/mozilla/tests/css/input_selection_incremental_ref.html index 9b9f20916c5..95b24db3c3d 100644 --- a/tests/wpt/mozilla/tests/css/input_selection_incremental_ref.html +++ b/tests/wpt/mozilla/tests/css/input_selection_incremental_ref.html @@ -9,8 +9,10 @@ background: rgba(176, 214, 255, 1.0); } div { + color: white; font: 16px sans-serif; display: inline-block; + overflow: hidden; } diff --git a/tests/wpt/mozilla/tests/css/input_selection_ref.html b/tests/wpt/mozilla/tests/css/input_selection_ref.html index 62b79642af6..af32a4d1611 100644 --- a/tests/wpt/mozilla/tests/css/input_selection_ref.html +++ b/tests/wpt/mozilla/tests/css/input_selection_ref.html @@ -6,8 +6,10 @@