Description
Consider the following test-case:
<!doctype html>
<style>
:root { font-size: 100px; }
</style>
<script>
let detached = document.createElement('div');
detached.style.display = "inline";
detached.style.fontSize = "1rem";
alert(getComputedStyle(detached).display);
alert(getComputedStyle(detached).fontSize);
</script>The behavior across browsers is as follows:
- Gecko:
block,16px. - Edge:
inline,16px - Gecko (with Servo's style system):
inline,100px. - Blink and WebKit: Empty string in both cases.
Per https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle, there isn't anything off-hand that justifies WebKit/Blink's behavior here.
Now, for the other interop problems the question is: what is the definition of "the root element"?
There are two spec sections that potentially apply here:
https://drafts.csswg.org/css-display/#transformations (1):
The root element’s display type is always blockified. Additionally, a display of contents computes to block on the root element.
and https://drafts.csswg.org/css-values/#rem (2):
Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.
So the different behaviours are as follows:
-
Gecko takes the detached element as "the root element". For Gecko "the root element" is effectively the root of the inheritance subtree. That means that in Gecko, for example,
remunits don't work as expected on the::backdroppseudo (since it inherits from nothing, and thus1remwill always be the initial font-size). -
Edge seems to apply that same definition for (2), but not for (1).
-
Servo uses the document element of the document for both sections of the spec (which I think it's consistent, and doesn't have the problem with
::backdrop). -
Blink and WebKit seem to just not compute style if the element is outside of the document, which seems wrong per https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle.
So, two questions:
-
Is the behavior of Blink/WebKit justified by any reasonable interpretation of the spec, or is it just a browser bug? It sounds like the second to me, but worth confirming.
-
What is the definition of "the root element"?
Edge's behavior seems inconsistent here, but both of the Gecko or Servo's interpretation look consistent to me.
Gecko's behavior have the inconveniency of rem units on ::backdrop though. I haven't checked other browser's behaviour in depth with regards to rem units and ::backdrop. From code inspection, I think Blink at least uses the document element's font-size1.