1544886 - inherit not working in css var function fallback

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, defect)

Description

[adjenks]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

Steps to reproduce:

Use the css var() function and use inherit as a fallback.
E.g.:
.aClass {
/doesn't work anywhere/
background-color: var(--undeclared-var, inherit);
/*works on Chrome and not Fiferox */
border:var(--undeclared-var, inherit);
}

Detailed examples with markup are seen here:
https://stackoverflow.com/questions/55271116/is-this-a-browser-bug-inheritence-in-variables-with-background-color

Actual results:

It does not inherit the properties.

Expected results:

Tags with the class should inherit the properties of the parent tags when inherit is specified as a fallback.

I understand that custom properties are still in the draft phase, but I think I should still point out what I believe to be unwanted browser behavior.

You'll also notice that in the examples on stackoverflow different browsers will behave differently.

Comment 1

[Rares Doghi, Desktop QA]

Hi Adjenks, Can you please provide an HTML doc with the code that showcases this issue in order for us to reproduce it as well, or maybe the code we could copy into a Text editor and save it as HTML ? I'll set the component for this issue to CSS Parsing and Computations.

You can also try our latest Nightly build and see if the same issue occurs there as well. You can find it here: https://nightly.mozilla.org/

Comment 2

[Emilio Cobos Álvarez (:emilio)]

The URL in the bug description shows a border in Chrome, doesn't in Gecko. Not sure what's the expected behavior per spec, will check.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Yeah, I don't see any reason why this shouldn't work.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

WebKit and Blink also are bogus in the area:

• https://bugs.chromium.org/p/chromium/issues/detail?id=954963
• https://bugs.webkit.org/show_bug.cgi?id=197158

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1544886 - Allow CSS wide-keywords in custom property fallback. r=SimonSapin

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/1d1277b80e5c
Allow CSS wide-keywords in custom property fallback. r=SimonSapin

Comment 7

[Andrei Ciure[:aciure]]

https://hg.mozilla.org/mozilla-central/rev/1d1277b80e5c

Comment 8

[adjenks]

Wow! You were very quick at producing a fix. I am impressed. Good work.

Comment 9

[Rares Doghi, Desktop QA]

Hi This issue is Verified as Fixed in our Firefox Nightly 68.0a1 (2019-04-23) (64-bit).

However this issue still occurs in Beta and Release.

Comment 10

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/16490 for changes under testing/web-platform/tests

Comment 11

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged