Hue-preserving Brightness-Inversion Filter-Effects Userstyles for Firefox

readme.txt

Example screenshots: http://imgur.com/a/xHM0A http://i.imgur.com/0ySbu.jpg
These use the svg-based filter effects implementation in firefox since versions 3.6.
For firefox, the filter chain is defined in an svg which is base64 URI-encoded and embedded.
It should be more trivial to recreate for other browsers based on their own CSS filter
effects implementations. Hopefully when the standard is finalized, browsers will transition
to its standardized uniform syntax, and a single userstyle will work across all that support it.

The essential technique is simple: invert (aka "negative") the colors along with rotating the
hue 180 degrees. Since the inversion effectively rotates the hue 180 degrees along with inverting
the brightness/value, the hue rotation just puts the colors back to their originals hues, leaving
only the brightness/value inverted.
This should be a commutative pair of operations so the order shouldn't matter, but the svg
filters seem to be finicky and not work entirely as would be expected as such. 
I used Inkscape to draft them and then manually converted it into a more compact and functional
file, which is included unencoded for reference (but is not necessary for using the userstyles,
which already have it embedded). Inkscape provided the "negative" effect as a pair of
feColorMatrix operations, which may be related to some of the problems?

It also seems to reveal some bugs in the implementation, as the breakage it causes for some
sites, such as slashdot.org, is both severe and bizarre (http://i.imgur.com/av3D2.jpg). Some
other sites show opaque box elements or otherwise obscure parts of text, and a few others simply
go completely black. Technically this operation should not be capable of producing any of these
erronous effects. (These effects can occur even without the background color redefinition.)
Also it fails to apply to anything that constitutes an element background, whether an image
or simple color.

Also, since these effects are essentially bitmap operations, it does interfere with subpixel
font rendering when applied to text, and performance is probably worse than it could be.
I would suggest to developers of browser filter-effects engines that any effects which, like
these color alterations, don't depend on bitmap operations be made capable of iteratively
applying the effect to all the html/CSS color values prior to rendering so as to still
produce correctly rendered fonts and eliminate unnecessary processing overhead, whenever the
filter chain allows for it.

invert_brightness.css

@namespace url(http://www.w3.org/1999/xhtml);

/* this filter can cause bizarre breakage on some pages, 
   sometimes mild but sometimes a severe smearing into fuzzy lines!?
   it also fails to affect background colors or images for some reason. */

@-moz-document url-prefix(http://), url-prefix(ftp://), url-prefix(file://), url-prefix(https://), url("about:blank") {
  body {
    /*  this can crudely work-around the inability to affect backgrounds, but can cause breakage */
    background-color:black !important;
    filter:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgPGRlZnM+ICAKICAgIDxmaWx0ZXIgaWQ9InZhbHVlX2ludmVydCIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KICAgICAgPGZlQ29sb3JNYXRyaXggcmVzdWx0PSJTb3VyY2VHcmFwaGljIiB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIxIiAvPgogICAgICA8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlR3JhcGhpYyIgdmFsdWVzPSItMSAwIDAgMCAxIDAgLTEgMCAwIDEgMCAwIC0xIDAgMSAwIDAgMCAxIDAiIC8+CiAgICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9Imh1ZVJvdGF0ZSIgdmFsdWVzPSIxODAiIC8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+Cjwvc3ZnPgo=#value_invert) !important;
  }
}

invert_image_brightness.css

@namespace url(http://www.w3.org/1999/xhtml);

/* this filter only changes (non-background :/) images,
   which tends to be more compatible with some sites.
   this is mainly useful in conjunction with normal
   css-based "dark" userstyles. */

@-moz-document url-prefix(http://), url-prefix(ftp://), url-prefix(file://), url-prefix(https://), url("about:blank") {
  img {
    filter:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgPGRlZnM+ICAKICAgIDxmaWx0ZXIgaWQ9InZhbHVlX2ludmVydCIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj4KICAgICAgPGZlQ29sb3JNYXRyaXggcmVzdWx0PSJTb3VyY2VHcmFwaGljIiB0eXBlPSJzYXR1cmF0ZSIgdmFsdWVzPSIxIiAvPgogICAgICA8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlR3JhcGhpYyIgdmFsdWVzPSItMSAwIDAgMCAxIDAgLTEgMCAwIDEgMCAwIC0xIDAgMSAwIDAgMCAxIDAiIC8+CiAgICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9Imh1ZVJvdGF0ZSIgdmFsdWVzPSIxODAiIC8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+Cjwvc3ZnPgo=#value_invert) !important;
  }
}

value_invert.svg