Chrome Version: Version 65.0.3325.31 (Official Build) dev (64-bit)
OS: Ubuntu 17.10

What steps will reproduce the problem?
(1) Load https://bug1435427.bmoattachments.org/attachment.cgi?id=8948063

What is the expected result?
Each pair of bordered boxes should have their bottom border at the same vertical position.

What happens instead?
Chrome gives the expected result for the first pair, but the second and third pair are misaligned.

Latest Firefox and Edge give the expected result.

Description/overview:
* In each pair of boxes, the first (teal) box has a 100px tall border-box (with no margins, hence its margin-box is also 100px tall), and the second (orange) box has a shorter border-box with a large margin-top so that its margin-box is also 100px tall.
* So, all of the bordered boxes have the same margin-box height -- 100px tall. (And you can see the bottom of the margin-box by looking at the position of their border-bottom.)
* Each pair gets a different "align-items" value (which sets the resolved "align-self" for the children).
* The CSS-Align spec is clear that the *margin-box* is the alignment subject, i.e. the thing to be centered etc. (The spec says "Alignment Subject: The box's margin box" at https://drafts.csswg.org/css-align/#align-abspos )
* So for a given "align-items" (i.e. align-self) value, these boxes should be positioned consistently, with their bottoms matched up in this case since that's the part of the margin-box that you can actually see.
* But in Chrome, they're not.  I think Chrome is (incorrectly) treating the *content box* (or perhaps the border box) as the alignment subject here...?
 

Chrome Version: Version 65.0.3325.31 (Official Build) dev (64-bit)
OS: Ubuntu 17.10

What steps will reproduce the problem?
(1) Load https://bug1435427.bmoattachments.org/attachment.cgi?id=8948063

What is the expected result?
In each pair of bordered boxes, the two boxes should have their bottom borders lined up (at the same y-coordinate).

What happens instead?
Chrome gives the expected result for the first pair, but the second and third pair are misaligned.

Latest Firefox and Edge give the expected result.

Description/overview:
* In each pair of boxes, the first (teal) box has a 100px tall border-box (with no margins, hence its margin-box is also 100px tall), and the second (orange) box has a shorter border-box with a large margin-top so that its margin-box is also 100px tall.
* So, all of the bordered boxes have the same margin-box height -- 100px tall. (And you can see the bottom of the margin-box by looking at the position of their border-bottom.)
* Each pair gets a different "align-items" value (which sets the resolved "align-self" for the children).
* The CSS-Align spec is clear that the *margin-box* is the alignment subject, i.e. the thing to be centered etc. (The spec says "Alignment Subject: The box's margin box" at https://drafts.csswg.org/css-align/#align-abspos )
* So for a given "align-items" (i.e. align-self) value, these boxes should be positioned consistently, with their bottoms matched up in this case since that's the part of the margin-box that you can actually see.
* But in Chrome, they're not.  I think Chrome is (incorrectly) treating the *content box* (or perhaps the border box) as the alignment subject here...?