[cssom] Serialization of CSS declaration block returned from getComputedStyle

How should CSS declaration block returned from getComputedStyle be serialized? It contains all longhand properties.

Currently, Gecko and Edge return empty string for it, while WebKit and Blink (probably inherit from WebKit) seem to return serialization of all longhand properties (i.e. not trying to generate shorthands). Apparently none follows the spec.

Following the same algorithm for cssText of declaration block from getComputedStyle is complicated, and probably isn't worth. So I suggest that the spec should either follow Gecko and Edge to return empty string, or follow WebKit and Blink to just return all longhand properties.

I would prefer we just make it return empty string... But there is a webcompat issue reported to Firefox for lack of its support: webcompat/web-bugs#3822. This is a Google website though, so maybe we can just ask Google to fix it and ignore this issue...

We've similar issues in CSS Grid Layout spec.
This was an old mail to www-style: https://lists.w3.org/Archives/Public/www-style/2015Jul/0242.html

A very basic example:

myGrid.style.grid = "100px / 50px";
console.log("style: " + myGrid.style.grid);
console.log("computedStyle: " + getComputedStyle(myGrid).grid);

The output right now in Chrome is:

style:
computedStyle: 100px / 50px / none / row / auto / auto / 0px / 0px

And in Firefox:

style: 100px / 50px;
computedStyle:

I don't think that's something related. IIRC in general we don't serialize new shorthands in computed style, only longhands are serialized there. There are several shorthands get serialized in computed style just for backward compatibility.

Oops, ok I messed it up, I thought you were talking about shorthands.

(Adding myself to the thread; but could you clarify what you think Chrome doesn't do per standards here? I have the impression their behavior is correct in that case at first glance)

(Just to clarify, talking about the initial issue, not the shorthands-in-gCS one)

could you clarify what you think Chrome doesn't do per standards here? I have the impression their behavior is correct in that case at first glance

In the spec, the serialize a CSS declaration block algorithm tries to construct shorthands whenever possible. In case of declaration block from getComputedStyle, since all longhands are available, most of shorthands would be constructible. However, Chrome doesn't seem to construct any shorthand in that case.

On the call today WG resolved to accept Firefox's and Edge's behavior, and make the object serialize to the empty string.

I'll file a bug on Chrome to fix this, and start evangelizing at Drive to fix the webcompat bug.

Thanks Tab!

@upsuper

@upsuper

There are several shorthands get serialized in computed style just for backward compatibility.

Which are these?

Mainly the shorthands which are previously longhands, e.g. background-position, text-decoration, overflow, and mask.

Given the following case, it seems browsers all have some logic to try to serialize as shorthands when possible. It's unclear to me why we want to avoid doing that for getComputedStyle specifically?

http://software.hixie.ch/utilities/js/live-dom-viewer/saved/4948

<!DOCTYPE html>
<p style="border:1em solid">
<p style="border:1em solid; border-right-width: 1px">
<p style="border:1em solid; border-right-width: 1px !important">
<script>
for (var p of document.querySelectorAll('p'))
  p.style.color = 'purple';
</script>

(check the value of the style attributes after the script has run.)

@tabatkins

@tabatkins Could you link it to the Chrome bug if you can find it please? I think this resolution makes sense, but Chrome hasn't updated its behavior yet :/.

I'll file a WebKit bug pointing to that bug as well.

[cssom] CSSStyleDeclaration.cssText should return the empty string fo…

[CSS] Return empty string for CSSStyleDeclaration.cssText

Bug 1678010 [wpt PR 26561] - [CSS] Return empty string for CSSStyleDe…

@emilio

Like @emilio I was looking for the chromium bug links. so here it is.

Issue 1146888: CSSStyleDeclaration.cssText should return empty string for computed style
Issue 1192564: window.getComputedStyle(el).cssText returns an empty string

I can't find the webkit one.

This will be fixed in WebKit with bug 232943.

The cssText property for a computed style should return an empty string

Bug 1629304 [wpt PR 22877] - [cssom] Test that CSSStyleDeclaration.cs…

Bug 1678010 [wpt PR 26561] - [CSS] Return empty string for CSSStyleDe…

Navigation Menu

Repository navigation

[cssom] Serialization of CSS declaration block returned from getComputedStyle #1033

15 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[cssom] Serialization of CSS declaration block returned from getComputedStyle #1033

Description

Activity

mrego commented on Feb 14, 2017

upsuper commented on Feb 14, 2017

mrego commented on Feb 14, 2017

FremyCompany commented on Feb 14, 2017

upsuper commented on Feb 14, 2017

tabatkins commented on Feb 22, 2017

FremyCompany commented on Feb 22, 2017

zcorpan commented on Mar 6, 2017

upsuper commented on Mar 6, 2017

zcorpan commented on Mar 15, 2017

emilio commented on Apr 27, 2018

15 remaining items

karlcow commented on Aug 16, 2021

graouts commented on Nov 10, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions