Thanks for the report, will look into it :)

So the anonymous block created in the first case doesn't take into account the inner text font-size, and instead uses its own font-size for layout, which results in ~20px height, which ends up meaning that the alignment is wrong...

So I believe ultimately the problem is that in order to get the baseline position for a given text, we directly call into the parent[1], assuming that the relevant style properties are the same, which is wrong for display: contents.

I'm not familiar at all with that code, so I'm not sure how easy this is to fix.

[1]: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/layout/line/InlineTextBox.cpp?l=103&rcl=c9402416a818b487bee3082c53123372cd8cc6fe

Unable to reproduce the issue on Mac-10.12.4, Windows-7 and Linux Ubuntu-14.04 using Chrome stable version 57.0.2987.133 and canary 60.0.3075.0 and reported version 60.0.3074.0 with the provided testcase "http://jsbin.com/xicujadiye/edit?html,css,output" in comment#0.
Please find the attached screen cast and let us know if anything missed here to reproduce the issue.

Thanks.

Deleted: 713019.mov 3.2 MB

713019.mov 3.2 MB Download

Nice work! https://codereview.chromium.org/2826153002/

Thank you for providing more feedback. Adding requester "sureshkumari@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

Looks like CL is under review hence marking this as Untriaged and cc'ing reviewers for further action.

The test case appears to work correctly in 58.0.3029.81 so it looks like it's already been fixed?

This is not fixed yet.

The patch hasn't landed (I need to figure out why on mac there are subpixel differences).

It looks good in 58 because display: contents isn't shipped yet.

Ah, thanks for the clarification.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/8c80c402ff38559f67dc75c788e8576557ea0fe0

commit 8c80c402ff38559f67dc75c788e8576557ea0fe0
Author: Rune Lillesveen <futhark@chromium.org>
Date: Thu Nov 30 15:52:08 2017

Test that display:contents font-size contributes to line-height.

Bug:  713019 
Change-Id: Iab9c0148ef0a22403b770ae5a8c2ea0591ba5958
Reviewed-on: https://chromium-review.googlesource.com/800510
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#520553}
[modify] https://crrev.com/8c80c402ff38559f67dc75c788e8576557ea0fe0/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/8c80c402ff38559f67dc75c788e8576557ea0fe0/third_party/WebKit/LayoutTests/external/wpt/css/css-display/display-contents-line-height-ref.html
[add] https://crrev.com/8c80c402ff38559f67dc75c788e8576557ea0fe0/third_party/WebKit/LayoutTests/external/wpt/css/css-display/display-contents-line-height.html

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/fc5c3629044888b8d723cc11424879bb883d8d3e

commit fc5c3629044888b8d723cc11424879bb883d8d3e
Author: Rune Lillesveen <futhark@chromium.org>
Date: Tue Dec 05 12:13:10 2017

Wrap text child of display:contents in anonymous if necessary.

A text node gets its style from its flat tree parent. The problem is
that our layout code expects the LayoutObject parent to have the same
inherited styles as the text node. That is not the case if a text node
has display:contents ancestors and the display:contents parent does not
have the same inherited styles as the closest ancestor generating a box.

Example:

  <div>
    <div style="display:contents;font-size:50px">Text</div>
  </div>

We're solving this by inserting an anonymous inline between the
LayoutText and its parent LayoutObject. We do not try to merge inline
wrappers for subsequent text nodes, so for:

  <div style="display:contents:color:pink">A<!-- -->B</div>

we create one wrapper for each of A and B, even though one would
suffice.

We attach and detach these wrappers on-demand, so if, for instance, the
inherited computed styles of the display:contents change so that it
matches the computed styles of the LayoutObject parent, we detach the
wrapper as it's no longer needed.

We also currently detach the wrapper when the computed style of the
display:contents and hence the computed style of the wrapper changes. We
could have optimized this through more checking and SetStyle on the
anonymous wrapper.

Bug:  717460 ,  706316 ,  709808 ,  713019 
Change-Id: Ia53b9fe2c0a6067c4600dab49cdf43f23b95b8fa
Tests: see removed lines from TestExpectations.
Reviewed-on: https://chromium-review.googlesource.com/806158
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Robert Hogan <robhogan@gmail.com>
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521673}
[modify] https://crrev.com/fc5c3629044888b8d723cc11424879bb883d8d3e/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/fc5c3629044888b8d723cc11424879bb883d8d3e/third_party/WebKit/Source/core/dom/LayoutTreeBuilder.cpp
[modify] https://crrev.com/fc5c3629044888b8d723cc11424879bb883d8d3e/third_party/WebKit/Source/core/dom/LayoutTreeBuilder.h
[modify] https://crrev.com/fc5c3629044888b8d723cc11424879bb883d8d3e/third_party/WebKit/Source/core/dom/Text.cpp
[modify] https://crrev.com/fc5c3629044888b8d723cc11424879bb883d8d3e/third_party/WebKit/Source/core/layout/LayoutBlock.cpp
[modify] https://crrev.com/fc5c3629044888b8d723cc11424879bb883d8d3e/third_party/WebKit/Source/core/layout/LayoutInline.cpp
[modify] https://crrev.com/fc5c3629044888b8d723cc11424879bb883d8d3e/third_party/WebKit/Source/core/layout/LayoutObjectTest.cpp
[modify] https://crrev.com/fc5c3629044888b8d723cc11424879bb883d8d3e/third_party/WebKit/Source/core/style/ComputedStyle.cpp
[modify] https://crrev.com/fc5c3629044888b8d723cc11424879bb883d8d3e/third_party/WebKit/Source/core/style/ComputedStyle.h