[cssom] Don't use "applies to" to define getComputedStyle behavior

[AmeliaBR]

The definition of resolved values in CSSOM — which are used in getComputedStyle results — currently includes sets of properties where the resolved value switches between the used value and the computed value depending on whether "the property applies to the element or pseudo-element".

As discussed in #3414 (comment), this is problematic because "applies to" isn't strictly defined for many properties in a way that can be used in normative tests. And the conclusion of the group in that discussion is that it would be better to fix the resolved value definition than to make "applies to" in property definition boxes as strict as would be required.

Since the used vs computed behavior is about legacy compat, the first step could be to review current implementations more carefully. Then maybe we can find a better definition for when the result switches from one to the other.

[emilio]

Some interop bugs:

• https://bugs.webkit.org/show_bug.cgi?id=197814
• https://bugzilla.mozilla.org/show_bug.cgi?id=1527392

That's from a quick skim. I'll try to get engines to align here.

[emilio]

Another one: https://bugzilla.mozilla.org/show_bug.cgi?id=1550997

[emilio]

Another one: https://bugzilla.mozilla.org/show_bug.cgi?id=1551000

[emilio]

So for https://drafts.csswg.org/cssom/#resolved-value-special-case-property-like-height with that case the only thing left is to define when they're resolved and how.

In Gecko, the check is "The element has a CSS layout box, and either the computed value of display is not inline, or the element is a replaced element".

In WebKit / Blink the check is "The element has a layout box, and IsBox() returns true for that". I'm not sure what that means exactly, would need to dig. But I suspect there's more behavior differences for e.g., SVG elements with display different than inline or such. The Gecko behavior is very easy to spec of course, but I think the Blink behavior also makes sense, so want to understand it better.

@kojiishi or @mstensho, do you know what would be a good-ish definition of what LayoutObject::IsBox() means in Blink? I get it means everything that inherits from LayoutBox, but that's not something that I could conceivably put into a spec.

[kojiishi]

In WebKit / Blink the check is "The element has a layout box, and IsBox() returns true for that".

It means, for non-SVG, the element is not text nor an inline box (e.g., span). Atomic inlines (replaced elements and inline block) are IsBox() true, so that might be one difference.

For SVG, I'm not an expert, but generally using IsBox() for SVG objects is not recommended because it often returns unexpected values. For instance, it is false for SVGContainer but true for SVGText.

[emilio]

w3c/svgwg#349 is another issue, seems like Blink returns used values for <rect>, <foreignObject> and <image>...

[emilio]

https://chromium.googlesource.com/chromium/src/+/269ecd52bd4e0ec15a70924b089589f9bfe26ee0 is the commit that introduced that, for my own reference. cc @fsoder

[fsoder]

For SVG elements Blink essentially follows "applies to".