UserAgent: Mozilla/5.0 (X11; Linux x86_64; rv:64.0) Gecko/20100101 Firefox/64.0

Example URL:

Steps to reproduce the problem:
Reproduction files: A.html and B.html from https://gist.github.com/quasicomputational/7d412e9e110914314442810532c54c25

What is the expected behavior?
The files render the same (both like B.html).

What went wrong?
The two files do not render the same in Chromium. In A.html, the border is thinner than I expected.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 71  Channel: stable
OS Version: 
Flash Version: 

The difference between the two files is entirely that the padding property of the html rule is specified using rem in A.html and em in B.html.

Firefox renders as I expect (i.e., both files the same, like B.html). Hence there's not cross-browser compatibility here. I haven't tested Safari. (And, if this is actually determined to not be a Chromium problem, a Firefox bug ought to be opened, since either one or the other is getting this wrong.)

The spec (https://www.w3.org/TR/css3-values/#font-relative-lengths) has a carve-out to make sure that specifiying font-size in terms of rem on the root element does the right thing, but that carve-out is narrow and doesn't apply to the padding property.