Open Bug 1414535 Opened 4 years ago Updated 4 years ago

custom property for generated content set with JavaScript

Categories

(Core :: DOM: CSS Object Model, defect, P3)

56 Branch
defect

Tracking

()

UNCONFIRMED

People

(Reporter: gunnar, Unassigned)

Details

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20171024165158

Steps to reproduce:

In the stylesheet: #my-element::before { content: var(--content) }

In JavaScript: document.querySelector('#my-element').style.setProperty('--content', '"some content"');


Actual results:

Pseudoelement not displayed.


Expected results:

Pseudoelement should be rendered (as it does in Safari and Chrome).

A hack to overcome this problem is to preset `#my-element { --content: '' }` in the stylesheet.

See also https://codepen.io/gunnarbittersmann/pen/OONzbZ
You will find that setting a custom property works fine for `color`, but not for `content`.
Uncomment the the hack and the pseudoelement appears.
I forgot to mention: the bug is not there when the developer tool is opened.
Component: Untriaged → DOM: CSS Object Model
Product: Firefox → Core
Priority: -- → P3
Hiya,

I am currently looking for bugs to fix as part of my Open Source Development module at Coventry University and I am interested in developing this bug.

Please could you assign this task to me and give me more information.

This is my first bug fix and any help would be appreciated.

Thank you.
You need to log in before you can comment on or make changes to this bug.