[Proposal] Negative Invert filter values


I would like to propose that the CSS filter function invert should accept negative values,

  • An invert filter with a negative number is the reverse of an invert filter with the absolute value of that number
  • A negative value from a non-recoverable state (e.g. -0.5) has no action

This would be desirable to, for example, preserve the colours of an image when inverting the rest of the document the image resides within.

At the moment, undoing the effect of a filter on a child node is very difficult as applying the same invert twice (other than an invert of 0 or 1) will not result in the original colours.

For example, the foo text in the below code would render in the same red as if it was never filtered, rather than the distorted red of the bar or cyan-like baz

<div class="container">
    <div class="regular">
        <span class="negative">foo</span>
        <span class="regular">bar</span>
.container {
    color: red;
.regular {
    filter: invert(0.8);
.negative {
    color: invert(-0.8);