1414535 - custom property for generated content set with JavaScript

Status: UNCONFIRMED

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

Description

[[e-mail]]

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.

Comment 1

[[e-mail]]

I forgot to mention: the bug is not there when the developer tool is opened.

Comment 2

[Rayann Tedds]

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.