[csswg-drafts] [cssom] [css-display] [css-values] Clarify behavior of window.getComputedStyle on detached subtrees, and the definition of "the root element".

emilio has just created a new issue for https://github.com/w3c/csswg-drafts:

== [cssom] [css-display] [css-values] Clarify behavior of window.getComputedStyle on detached subtrees, and the definition of "the root element". ==
Consider the following test-case:

```html
<!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, `rem` units don't work as expected on the `::backdrop` pseudo (since it inherits from nothing, and thus `1rem` will 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-size[1].

[1]: https://cs.chromium.org/chromium/src/third_party/WebKit/Source/core/css/resolver/ElementResolveContext.cpp?l=63&rcl=709a3cbb9e85dd0c4572ee30a32bda68140fbb52


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1548 using your GitHub account

Received on Wednesday, 21 June 2017 18:53:38 UTC