1659785 - The quotes property of a computed style is returning "auto" instead of the resolved value

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[alex.lewis001]

Attachment: index.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36

Steps to reproduce:

Open the attached HTML in Firefox and check the console output. The attached HTML is using Javascript to access the computed style of an element, in particular the "quotes" property and printing out the result to the console.

Actual results:

Using window.getComputedStyle(el, null).quotes on an element (el) that does not have the CSS "quotes" style property set is returning "auto", rather than an empty string.

This is also true if the CSS quotes property is set to "initial" or "inherited".

If the CSS quotes property is set (E.g. '<' '>' '<<' '>>'), getComputedStyle.quotes is returning the appropriate string ("<" ">" "<<" ">>").

Expected results:

From my reading of https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle, the returned value should be the "resolved" or "used" value. As such, as there are no quotes used, it should return an empty string.

Having said that, I'm certainly no expert and could be completely misinterpreting the expected behaviour; apologies for raising a bug if that's the case.

Webkit based browsers are returning an empty string rather than "auto".

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Julien Wajsberg [:julienw]]

My understanding is that we have the right behavior, but because other browsers do it differently I'll defer to the experts in the domain :-)

Comment 3

[alex.lewis001]

Thank you, much appreciated.

Just to provide my thinking which prompted me to raise this bug but, also completely based on my ignorance on the intricacies and may very well be my misunderstanding....

• getComputedStyle returns the resolved value which is either the computed value or in some cases the used value.
• The computed value is calculated from the specified value, taking into account inheritance.
• If no value is specified the initial/default value is used.
• For quotes, the attribute's initial/default value is marked as "depends on user agent".

The MDN article talks about the 'auto' value: https://developer.mozilla.org/en-US/docs/Web/CSS/quotes but the W3 Spec the page links to doesn't: https://www.w3.org/TR/CSS2/generate.html#quotes.

So my thinking (in ignorance) was:

• 'auto' as a value is not specified in the W3 spec for quotes. Therefore the "as specified" definition for the computed value would be: the specified marks, none or whatever it inherits including the Browser's default.
• As the initial value is defined as "depends on user agent", I can see where the computed value as it is pre-rendering may need to be something other than specific marks or none. As such, I can see why an empty string was used in Webkit and older versions of Firefox; however, I can see how that same reasoning could used for auto.

The MDN page on quotes defines 'auto' as:

auto
Appropriate quote marks will be used for whatever language value is set on the selected elements (i.e. via the lang attribute).

The MDN Article for getComputedStyle has this statement regarding properties with an 'auto' value (emphasis mine):

In Firefox, properties with the value auto return the used value, not the value auto. So if you apply top:auto and bottom:0 on an element with height:30px and a containing block of height:100px, Firefox's computed style for top returns 70px, as 100 − 30 = 70.

If auto is a valid value for quotes then that statement would suggest the used value should be returned, not the computed value.

As such, I boiled this scenario down to:

• If auto is not valid, Firefox could default to an empty string which it has done in the past (possibly until Firefox 70) and would avoid browser specific behaviour.
• If auto is valid, getComputedStyle in Firefox should return the used value, which in this case would be an empty string or specific marks depending on what Firefox chose as a default.

Hopefully my reasoning has made sense, even if it's completely wrong :)

Comment 4

[Emilio Cobos Álvarez [:emilio]]

https://drafts.csswg.org/css-content/#quotes-property says the initial value, and the computed value, is auto (when appropriate).

MDN is wrong (or rather simplistic): The set of properties that return the used value from getComputedStyle is defined here: https://drafts.csswg.org/cssom/#resolved-values. Quotes is not on that list, thus returning auto is the right thing to do per spec.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

WebKit based browsers are wrong, because the empty string is not a valid value for the quotes property, it seems they haven't caught up with the spec.

Comment 6

[Emilio Cobos Álvarez [:emilio]]

https://bugs.chromium.org/p/chromium/issues/detail?id=990557 is the Chromium bug. Just filed https://bugs.webkit.org/show_bug.cgi?id=215646 for WebKit.

Comment 7

[alex.lewis001]

Great, thanks for the update and the links to the specs. I hadn't considered the draft specs.