UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:53.0) Gecko/20100101 Firefox/53.0

Example URL:
https://bug1324321.bmoattachments.org/attachment.cgi?id=8822223

Steps to reproduce the problem:
1. View the URL (testcase attached to Gecko bug report)

What is the expected behavior?
The testcase has two bordered inline-block elements in the vertical line. The first block, with blue border, shares the same (mixed) text-orientation as the parent line, and aligns to the same centered baseline.

The second block, with red border, has text-orientation:sideways for its content, and therefore (as expected) uses an alphabetic baseline internally. However, the box as a whole should still use a vertical center baseline to align within its parent line.

This expectation is based on the CSS Inline Layout spec, which states:

https://drafts.csswg.org/css-inline/#alignment-baseline-property
"'baseline'
     Use the dominant baseline choice of the parent. Match the box’s
     corresponding baseline to that of its parent. "

Note "of the parent" here. Although the content *within* the red box uses an alphabetic baseline, the alignment of the box itself within its parent should use "the dominant baseline choice of the parent", which is centered. (See also more extended discussion in the Gecko bug https://bugzilla.mozilla.org/show_bug.cgi?id=1324321.)

What went wrong?
The red-bordered inline-block element is offset to the right; it looks as though the *alphabetic* baseline of its content has been aligned with the *centered* baseline of the parent line, which AIUI is incorrect per the Inline Layout spec.

In Firefox, the red-bordered block shares the same center-baseline alignment as the other elements in the parent line.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: Version 55.0.2883.95 (64-bit)  Channel: stable
OS Version: OS X 10.12
Flash Version: Shockwave Flash 23.0 r0