Enable privileged embedding documents to set CSS environment variables (or CSS cascading variables) in embedded SVG




a year ago
2 months ago


(Reporter: jwatt, Unassigned)


Firefox Tracking Flags

(Not tracked)




a year ago
Spinning this off from bug 1388193.

The current -moz-context-properties mechanism (implemented across bug 1058040, bug 1350010 and bug 1360662) to allow embedding documents to set colors in SVG images isn't a great one to expose to the Web at large.

I don't really like that '-moz-context-properties' takes a list of properties, not least because it means that it's not a general solution for exposing properties to a sub-document/image. For example, at some point we may want to support exposing a property where an author may want to set one value to affect the embedding element, while also wanting to expose a different value for that same property to the embedded content. The '-moz-context-properties' mechanism doesn't allow for that since it only allows for one value.

The only proposal that seems to be significantly better than '-moz-context-properties' is the proposal that's been made on and off to the SVG WG over the years to add a mechanism to allow embedding documents to set CSS variables in embedded content. The latest incarnation of that proposal can be found at:


We should consider working out the issues in that draft and then implementing a first pass restricted to our frontend code and possibly WebExtensions.


11 months ago
Priority: -- → P1


10 months ago
Priority: P1 → P3
I am confident that this feature is very attractive for web extension authors.

What's more, if we have an API to manipulate browserAction icon style, web extension authors easily create animating SVG icon there using transition.  (I believe we should definitely have the API)

Web extension authors can, already today, create animating browserAction icon, but it's a bit tricky.  I did release a proof-of-concept extension to show an animating browserAction icon [1] which is actually needs to set unique SVG via browserAction.setIcon() to make the animation happen.

[1] https://addons.mozilla.org/en-US/firefox/addon/animation-toggle-icon/
As a first step, simply allowing (non-Mozilla) extension authors to respond to changes to the browser theme via some sort of context-fill equivalent would a big win for extension authors and themers alike and something that would be worth prioritizing this year.
Duplicate of this bug: 1416400

Comment 4

5 months ago
It probably makes more sense to set CSS environment variable[1] than CSS cascading variables. Of course the former are not yet implemented (bug 1462233), while the later are.

1. https://drafts.csswg.org/css-env-1/
Depends on: 1462233
Summary: Enable privileged embedding documents to set CSS variables in embedded SVG → Enable privileged embedding documents to set CSS environment variables (or CSS cascading variables) in embedded SVG
You need to log in before you can comment on or make changes to this bug.