1769328 - CSS custom properties with hsl(a) values are not inherited in shadow DOM

Status: RESOLVED INCOMPLETE

(Core :: CSS Parsing and Computation, defect)

Description

[ea4jeri2l]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:101.0) Gecko/20100101 Firefox/101.0

Steps to reproduce:

I created a custom Web component with a stylesheet in the Shadow DOM that included a rule with a property setting "color: var(--color-info);" In the root document, the CSS custom property was defined as "html { --color-info: hsla(100, 100%, 50%, 1); }". I then changed it to read

Actual results:

The element in the Shadow DOM did not have its CSS color property value set to "hsla(100, 100%, 50%, 1)".

Expected results:

The element should have the hsla color value applied to it.

I changed the custom CSS property definition to "html { --color-info: rgba(100, 100, 50, 1); }" The rgba value was correctly applied. I changed the value to a hexadecimal string value and the value was correctly applied.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Attachment: Test-case that seems to work.

Can you attach a test-case that reproduces the issue? At a glance this seems to work.

Comment 3

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

A needinfo is requested from the reporter, however, the reporter is inactive on Bugzilla. Closing the bug as incomplete.

For more information, please visit BugBot documentation.