Bug 948265 - Add CSS invert filter to nsCSSFilterInstance. r=mstange

dothq · Aug 25, 2014 · 8f2b88b · 8f2b88b
1 parent afcde02
commit 8f2b88b
Show file tree

Hide file tree

Showing 15 changed files with 337 additions and 1 deletion.
diff --git a/layout/reftests/svg/filters/css-filters/invert-half-ref.html b/layout/reftests/svg/filters/css-filters/invert-half-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor of One Half</title>
+  <link rel="author" title="Max Vujovic" href="mailto:[email protected]">
+  <style type="text/css">
+    #target {
+      background-color: rgb(127, 127, 127);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a gray square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-half.html b/layout/reftests/svg/filters/css-filters/invert-half.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor of One Half</title>
+  <link rel="author" title="Max Vujovic" href="mailto:[email protected]">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+  <link rel="match" href="invert-half-ref.html">
+  <meta name="assert"
+        content="Given a factor of one half, the CSS invert filter function
+                 should change the color of an HTML element to gray.">
+  <style type="text/css">
+    #target {
+      filter: invert(0.5);
+      background-color: #f00;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a gray square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-one-ref.html b/layout/reftests/svg/filters/css-filters/invert-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:[email protected]">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-one.html b/layout/reftests/svg/filters/css-filters/invert-one.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor of One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:[email protected]">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+  <link rel="match" href="invert-one-ref.html">
+  <meta name="assert"
+        content="Given a factor of one, the CSS invert filter function should
+                 completely change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: invert(1);
+      background-color: #f0f;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-over-one-ref.html b/layout/reftests/svg/filters/css-filters/invert-over-one-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor Over One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:[email protected]">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-over-one.html b/layout/reftests/svg/filters/css-filters/invert-over-one.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor Over One</title>
+  <link rel="author" title="Max Vujovic" href="mailto:[email protected]">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+  <link rel="match" href="invert-over-one-ref.html">
+  <meta name="assert"
+        content="Given a factor over one, the CSS invert filter function
+                 should completely change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: invert(1000);
+      background-color: #f0f;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-percent-ref.html b/layout/reftests/svg/filters/css-filters/invert-percent-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Percentage</title>
+  <link rel="author" title="Max Vujovic" href="mailto:[email protected]">
+  <style type="text/css">
+    #target {
+      background-color: rgb(63, 191, 63);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-percent.html b/layout/reftests/svg/filters/css-filters/invert-percent.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Percentage</title>
+  <link rel="author" title="Max Vujovic" href="mailto:[email protected]">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+  <link rel="match" href="invert-percent-ref.html">
+  <meta name="assert"
+        content="Given a percentage, the CSS invert filter function should
+                 change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: invert(75%);
+      background-color: #f0f;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-ref.html b/layout/reftests/svg/filters/css-filters/invert-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:[email protected]">
+  <style type="text/css">
+    #target {
+      background-color: rgb(63, 191, 63);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-zero-ref.html b/layout/reftests/svg/filters/css-filters/invert-zero-ref.html
@@ -0,0 +1,22 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:[email protected]">
+  <style type="text/css">
+    #target {
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert-zero.html b/layout/reftests/svg/filters/css-filters/invert-zero.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element Using a Factor of Zero</title>
+  <link rel="author" title="Max Vujovic" href="mailto:[email protected]">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+  <link rel="match" href="invert-zero-ref.html">
+  <meta name="assert"
+        content="Given a factor of zero, the CSS invert filter function should
+                 not change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: invert(0);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/invert.html b/layout/reftests/svg/filters/css-filters/invert.html
@@ -0,0 +1,28 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filters: Invert an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:[email protected]">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert">
+  <link rel="match" href="invert-ref.html">
+  <meta name="assert"
+        content="The CSS invert filter function should change the color of an
+                 HTML element.">
+  <style type="text/css">
+    #target {
+      filter: invert(0.75);
+      background-color: #f0f;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/reftest.list b/layout/reftests/svg/filters/css-filters/reftest.list
@@ -23,6 +23,12 @@ fuzzy-if(d2d,1,10000) == grayscale-percent.html grayscale-percent-ref.html
 == hue-rotate-rad.html hue-rotate-rad-ref.html
 == hue-rotate-turn.html hue-rotate-turn-ref.html
 == hue-rotate-zero.html hue-rotate-zero-ref.html
+fuzzy-if(d2d,1,10000) == invert.html invert-ref.html
+== invert-half.html invert-half-ref.html
+== invert-one.html invert-one-ref.html
+== invert-over-one.html invert-over-one-ref.html
+fuzzy-if(d2d,1,10000) == invert-percent.html invert-percent-ref.html
+== invert-zero.html invert-zero-ref.html
 == saturate.html saturate-ref.html
 fuzzy-if(d2d,1,10000) == saturate-desaturate.html saturate-desaturate-ref.html
 == saturate-extreme.html saturate-extreme-ref.html

diff --git a/layout/svg/nsCSSFilterInstance.cpp b/layout/svg/nsCSSFilterInstance.cpp
@@ -67,7 +67,9 @@ nsCSSFilterInstance::BuildPrimitives(nsTArray<FilterPrimitiveDescription>& aPrim
       result = SetAttributesForHueRotate(descr);
       break;
     case NS_STYLE_FILTER_INVERT:
-      return NS_ERROR_NOT_IMPLEMENTED;
+      descr = CreatePrimitiveDescription(PrimitiveType::ComponentTransfer, aPrimitiveDescrs);
+      result = SetAttributesForInvert(descr);
+      break;
     case NS_STYLE_FILTER_OPACITY:
       return NS_ERROR_NOT_IMPLEMENTED;
     case NS_STYLE_FILTER_SATURATE:
@@ -177,6 +179,33 @@ nsCSSFilterInstance::SetAttributesForHueRotate(FilterPrimitiveDescription& aDesc
   return NS_OK;
 }
 
+nsresult
+nsCSSFilterInstance::SetAttributesForInvert(FilterPrimitiveDescription& aDescr)
+{
+  const nsStyleCoord& styleValue = mFilter.GetFilterParameter();
+  float value = ClampFactor(styleValue.GetFactorOrPercentValue());
+
+  // Set transfer functions for RGB.
+  AttributeMap invertAttrs;
+  float invertTableValues[2];
+  invertTableValues[0] = value;
+  invertTableValues[1] = 1 - value;
+  invertAttrs.Set(eComponentTransferFunctionType,
+                  (uint32_t)SVG_FECOMPONENTTRANSFER_TYPE_TABLE);
+  invertAttrs.Set(eComponentTransferFunctionTableValues, invertTableValues, 2);
+  aDescr.Attributes().Set(eComponentTransferFunctionR, invertAttrs);
+  aDescr.Attributes().Set(eComponentTransferFunctionG, invertAttrs);
+  aDescr.Attributes().Set(eComponentTransferFunctionB, invertAttrs);
+
+  // Set identity transfer function for A.
+  AttributeMap identityAttrs;
+  identityAttrs.Set(eComponentTransferFunctionType,
+                    (uint32_t)SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY);
+  aDescr.Attributes().Set(eComponentTransferFunctionA, identityAttrs);
+
+  return NS_OK;
+}
+
 nsresult
 nsCSSFilterInstance::SetAttributesForSaturate(FilterPrimitiveDescription& aDescr)
 {

diff --git a/layout/svg/nsCSSFilterInstance.h b/layout/svg/nsCSSFilterInstance.h
@@ -66,6 +66,7 @@ class nsCSSFilterInstance
   nsresult SetAttributesForDropShadow(FilterPrimitiveDescription& aDescr);
   nsresult SetAttributesForGrayscale(FilterPrimitiveDescription& aDescr);
   nsresult SetAttributesForHueRotate(FilterPrimitiveDescription& aDescr);
+  nsresult SetAttributesForInvert(FilterPrimitiveDescription& aDescr);
   nsresult SetAttributesForSaturate(FilterPrimitiveDescription& aDescr);
   nsresult SetAttributesForSepia(FilterPrimitiveDescription& aDescr);