1554055 - "left: 0; top: 0; right: 0; bottom: 0;" changed to "inset: 0px;" on setting to style.cssText

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[michael.stedry]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36

Steps to reproduce:

In JS I called:
element.style.cssText = "position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;"

(Minimum reproduction scenario saved at https://jsfiddle.net/vaskrist/c7kL3w24/1/)

Actual results:

The element.style.cssText value was:
"position: absolute; inset: 0px; overflow: hidden; z-index: -1; visibility: hidden;"

Expected results:

The element.style.cssText value should be what I set, ie.:
"position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: -1; visibility: hidden;"

Comment 1

[Timea Cernea [:tbabos][inactive]]

Reproduced on latest Nightly, Beta and Release on Windows 10 x64.
Thanks for the report!

Comment 2

[Emilio Cobos Álvarez [:emilio]]

This is per spec. Longhands are collapsed down to its shorthands if possible in cssText, for example:

document.body.style.cssText = "margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0";
document.body.style.cssText // "margin: 0px;"

This has happened since forever, and there's no reason inset would be different. It was just that before we didn't implement that shorthand.

Is this breaking any website? If so we could consider bringing this up to the CSSWG, but otherwise this is invalid as filed.

Comment 3

[michael.stedry]

The difference between margin and inset is that inset is not part of the CSS standard AFAIK and the HTML validators mark this as error. The only browser that does support inset is Firefox and the inset shorthand is moreover marked as experimental.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

(In reply to michael.stedry from comment #3)

The difference between margin and inset is that inset is not part of the CSS standard AFAIK and the HTML validators mark this as error. The only browser that does support inset is Firefox and the inset shorthand is moreover marked as experimental.

It is most definitely part of the standard: https://drafts.csswg.org/css-logical/#propdef-inset

Firefox is just the first one to support it. Chrome also has an implementation that behaves the same, if you launch Chrome canary with "experimental web platform features" enabled.

Comment 5

[Priit Pirita]

We have a HTML editor and we are banning Firefox for that issue. The HTML produced in Firefox can not be saved and used in other browsers, as inset is not supported elsewhere.

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Well, Chrome will behave the same in the next couple releases, am I missing something?