1857849 - Implement Element.computedStyleMap()

Status: NEW

(Core :: DOM: CSS Object Model, enhancement)

Description

[Frédéric Wang (:fredw)]

The specification is https://drafts.css-houdini.org/css-typed-om/#computed-stylepropertymapreadonly-objects

Note the following, which means this is different from https://searchfox.org/mozilla-central/rev/abbea4195b00e82af2ae9abaafc31e4b4ec4f8c0/layout/style/nsComputedDOMStyle.cpp#2385

The StylePropertyMapReadOnly returned by this method represents the actual computed values, not the resolved value concept used by Window.getComputedStyle(). It can thus return different values than Window.getComputedStyle() for some properties (such as width).

There are a couple of WPT tests relying on it:
https://searchfox.org/mozilla-central/search?q=computedStyleMap%28%29&path=testing%2Fweb-platform%2Ftests&case=false&regexp=false

In particular, the following WPT tests from the CSS properties and values API rely on this API:

/css/css-properties-values-api/at-property-typedom.html
/css/css-properties-values-api/property-cascade.html
/css/css-properties-values-api/typedom.html

Comment 1

[Frédéric Wang (:fredw)]

Checking a bit the spec, computedStyleMap() returns its a StylePropertyMapReadOnly where the values are CSSStyleValue objects constructed by "reification" and with special serialization rules. So only implementing computedStyleMap() would already require implementing a good chunk of the css-typed-om spec.

Comment 3

[Frédéric Wang (:fredw)]

At the end, this may not be necessary for interop 2023 if we rewrite property-cascade.html (the typedom ones will still require this though). I opened https://github.com/web-platform-tests/interop/issues/588

Comment 4

[Guilherme Lopes]

This feature is no longer in draft and is already implemented by every other browser. We would be extremely helpful to have it available to list CSS variables applied to an element when you don't know the name of the variables ahead of time.

It's also been recommended by W3C members, here: https://github.com/w3c/csswg-drafts/issues/8398#issuecomment-1570264185

Comment 5

[Emilio Cobos Álvarez (:emilio)]

(In reply to Guilherme Lopes from comment #4)

This feature is no longer in draft and is already implemented by every other browser. We would be extremely helpful to have it available to list CSS variables applied to an element when you don't know the name of the variables ahead of time.

This is on the radar, just as most of typed OM. But for what is worth, you can enumerate custom properties on getComputedStyle too: [...getComputedStyle(document.documentElement)].filter(v => v.startsWith("--")).

Comment 6

[jochen.kuehner]

But you only get the properties set on this element. Not the inherited ones

Comment 7

[Guilherme Lopes]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #5)

(In reply to Guilherme Lopes from comment #4)

This feature is no longer in draft and is already implemented by every other browser. We would be extremely helpful to have it available to list CSS variables applied to an element when you don't know the name of the variables ahead of time.

This is on the radar, just as most of typed OM. But for what is worth, you can enumerate custom properties on getComputedStyle too: [...getComputedStyle(document.documentElement)].filter(v => v.startsWith("--")).

Check this example: https://plnkr.co/edit/KYImlcR4UngD60gM?open=lib%2Fscript.js

Here you can see that computedStyleMap() returns inherited CSS variables, and this is exactly what we need.

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Attachment: getComputedStyle inherited variable.

(In reply to Guilherme Lopes from comment #7)

Here you can see that computedStyleMap() returns inherited CSS variables, and this is exactly what we need.

So does getComputedStyle(), see comment 0. Your test-case might have an invalidation issue of sorts, I'm trying to reduce it. It seems Chromium doesn't, but that's a bug: https://crbug.com/949807

Comment 9

[jochen.kuehner]

Look at this sample (wait for the tabcontrol to be loaded)

https://node-projects.github.io/web-component-designer-demo/index.html?npm=@node-projects/tab.webcomponent&html=%3Cnode-projects-tab%20style=%22width:326px;height:257px;position:absolute;left:177px;top:79px;%22%3E%20%3Cdiv%3E%20%3Cbutton%20style=%22width:80px;height:30px;position:absolute;left:119px;top:68px;%22%3EButton%3C/button%3E%20%3C/div%3E%20%3Cdiv%3E%20Hello%20%3C/div%3E%20%3C/node-projects-tab%3E

and select the dom element:
<node-projects-tab>

you will not see the css var "--active-tab-header-background" in getComputedStyle but you will see it in computedStyleMap

cause it is set on the ":host" selector.
And I show them in my designer, wich does not work without this API

Comment 10

[Emilio Cobos Álvarez (:emilio)]

This seems to be getting a bit off-topic, so I filed bug 1863781 for this. Comment 9 works for me, see the recording I just attached to that bug. If you can attach a test-case that doesn't work it'd be great so that I can investigate. Thanks.

Comment 11

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9362641 [details]
getComputedStyle inherited variable.

Off-topic attachment, let's continue this discussion in the other bug.

Comment 12

[Thomas Wisniewski [:twisniewski]]

Lack of support for this is at least partly why we fail WPTs like https://wpt.fyi/results/css/css-color/system-color-compute.html