1790896 - -webkit prefixed aliases get converted to -moz prefixed equivalents in CSSOM APIs (which e.g. makes it hard for Testcase Reducer to properly reduce)

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Not entirely sure this is a bug, but it's causing trouble & I'm wondering if we have a good workaround to suggest...

STR:

1. Load attached testcase.
2. Check your devtools console. (The testcase logs the CSSOM-exposed contents of the document's only CSS rule, using document.styleSheets[0].cssRules[0].style and .cssText)

ACTUAL RESULTS:
There are a bunch of -moz prefixed properties in the output (both for the .style and the .cssText serialization)

EXPECTED RESULTS:
No -moz prefixed properties, maybe?

This bit me a little bit when trying to reduce a testcase for bug 1790882 using twisniewski's "testcase reducer" extension, which happens to use these CSSOM APIs to serialize the relevant style rules. The extension ended up giving me a reduced version that didn't quite work as I expected it to when I loaded it in Chrome, since the relevant CSS (the contents of the reduced testcase that I attached there) have a bunch of -webkit prefixed styles as required for -webkit-line-clamp to work, and just one of those styles -webkit-box-orient:vertical was getting serialized as -moz-box-orient: vertical which unfortunately then makes the testcase stop behaving properly in Chrome, which makes it less useful as a testcase.

Should we consider changing how we serialize or implement these -webkit prefixed aliases? And/or, is there a different API (maybe .textContent) that the Testcase Reducer add-on should be using here?

Comment 1

[Daniel Holbert [:dholbert]]

Note: Chrome and Firefox both remove the -webkit prefix from -webkit-appearance: none in the logged serializations in my attached testcase. So we're consistent on that point.

(I think in all of these cases, the alias is treated like a shorthand property backed by a single longhand property, and the CSSOM APIs log the longhand properties. Or something to that effect. This makes some sense but does produce this kind of awkward result where different properties get unprefixed (or swap-prefixed) differently in these APIs, which is not-great for Testcase Reducer at least.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

Right now -webkit-box-orient is an alias of -moz-box-orient (here). If we wanted we could swap them, but given these are quite used by our front-end it'd generate confusing results in the other direction for our front-end developers :)

Comment 3

[Daniel Holbert [:dholbert]]

Yeah, swapping them is probably not great.

This might just be INVALID since we're doing the best we can given how we implement aliases. Feel free to close as-such if appropriate. But also, it would be nice if we had something we could suggest for Testcase Reducer to use, to get the intended EXPECTED RESULTS here, to avoid inadvertently swapping vendor prefixes when gathering the styles for a given page.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

Aliases are discarded at parse-time and I don't think we want to preserve them longer than that, so I think this is the best test-case reduced is able to.

Since it's a compat tool, maybe it could check if the property also exists with a WebKit prefix, and prefer using that. That is, iterate instead of using .cssText and check if -webkit- and -moz- are interchangeable, if so, prefer -webkit-.