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

dothq · Aug 21, 2014 · bb85168 · bb85168
1 parent 848cafc
commit bb85168
Show file tree

Hide file tree

Showing 13 changed files with 285 additions and 1 deletion.
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-one-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-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: Grayscale 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: rgb(53, 53, 53);
+      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/grayscale-one.html b/layout/reftests/svg/filters/css-filters/grayscale-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: Grayscale 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-grayscale">
+  <link rel="match" href="grayscale-one-ref.html">
+  <meta name="assert"
+        content="Given a factor of one, the CSS grayscale filter function should
+                 completely desaturate an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: grayscale(1);
+      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/grayscale-over-one-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-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: Grayscale 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: rgb(53, 53, 53);
+      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/grayscale-over-one.html b/layout/reftests/svg/filters/css-filters/grayscale-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: Grayscale 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-grayscale">
+  <link rel="match" href="grayscale-over-one-ref.html">
+  <meta name="assert"
+        content="Given a factor over one, the CSS grayscale filter function
+                 should completely desaturate an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: grayscale(1000);
+      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/grayscale-percent-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-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: Grayscale 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(145, 197, 145);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a dull green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-percent.html b/layout/reftests/svg/filters/css-filters/grayscale-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: Grayscale 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-grayscale">
+  <link rel="match" href="grayscale-percent-ref.html">
+  <meta name="assert"
+        content="Given a percentage, the CSS grayscale filter function should
+                 desaturate an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: grayscale(80%);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a dull green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-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: Grayscale an HTML Element</title>
+  <link rel="author" title="Max Vujovic" href="mailto:[email protected]">
+  <style type="text/css">
+    #target {
+      background-color: rgb(145, 197, 145);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a dull green square.</p>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/grayscale-zero-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-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: Grayscale 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/grayscale-zero.html b/layout/reftests/svg/filters/css-filters/grayscale-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: Grayscale 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-grayscale">
+  <link rel="match" href="grayscale-zero-ref.html">
+  <meta name="assert"
+        content="Given a factor of zero, the CSS grayscale filter function
+                 should not change the color of an HTML element.">
+  <style type="text/css">
+    #target {
+      filter: grayscale(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/grayscale.html b/layout/reftests/svg/filters/css-filters/grayscale.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: Grayscale 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-grayscale">
+  <link rel="match" href="grayscale-ref.html">
+  <meta name="assert"
+        content="The CSS grayscale filter function should desaturate an HTML
+                 element.">
+  <style type="text/css">
+    #target {
+      filter: grayscale(0.8);
+      background-color: #0f0;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a dull 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
@@ -10,6 +10,11 @@ default-preferences pref(layout.css.filters.enabled,true)
 == drop-shadow.html drop-shadow-ref.html
 == drop-shadow-default-color.html drop-shadow-default-color-ref.html
 == drop-shadow-negative-offset.html drop-shadow-negative-offset-ref.html
+fuzzy-if(d2d,1,10000) == grayscale.html grayscale-ref.html
+fuzzy-if(d2d,1,10000) == grayscale-one.html grayscale-one-ref.html
+fuzzy-if(d2d,1,10000) == grayscale-over-one.html grayscale-over-one-ref.html
+fuzzy-if(d2d,1,10000) == grayscale-percent.html grayscale-percent-ref.html
+== grayscale-zero.html grayscale-zero-ref.html
 == hue-rotate.html hue-rotate-ref.html
 == hue-rotate-360.html hue-rotate-360-ref.html
 == hue-rotate-grad.html hue-rotate-grad-ref.html

diff --git a/layout/svg/nsCSSFilterInstance.cpp b/layout/svg/nsCSSFilterInstance.cpp
@@ -16,6 +16,18 @@
 using namespace mozilla;
 using namespace mozilla::gfx;
 
+static float ClampFactor(float aFactor)
+{
+  if (aFactor > 1) {
+    return 1;
+  } else if (aFactor < 0) {
+    NS_NOTREACHED("A negative value should not have been parsed.");
+    return 0;
+  }
+
+  return aFactor;
+}
+
 nsCSSFilterInstance::nsCSSFilterInstance(const nsStyleFilter& aFilter,
                                          nsIFrame *aTargetFrame,
                                          const nsIntRect& aTargetBBoxInFilterSpace,
@@ -47,7 +59,9 @@ nsCSSFilterInstance::BuildPrimitives(nsTArray<FilterPrimitiveDescription>& aPrim
       result = SetAttributesForDropShadow(descr);
       break;
     case NS_STYLE_FILTER_GRAYSCALE:
-      return NS_ERROR_NOT_IMPLEMENTED;
+      descr = CreatePrimitiveDescription(PrimitiveType::ColorMatrix, aPrimitiveDescrs);
+      result = SetAttributesForGrayscale(descr);
+      break;
     case NS_STYLE_FILTER_HUE_ROTATE:
       descr = CreatePrimitiveDescription(PrimitiveType::ColorMatrix, aPrimitiveDescrs);
       result = SetAttributesForHueRotate(descr);
@@ -133,6 +147,20 @@ nsCSSFilterInstance::SetAttributesForDropShadow(FilterPrimitiveDescription& aDes
   return NS_OK;
 }
 
+nsresult
+nsCSSFilterInstance::SetAttributesForGrayscale(FilterPrimitiveDescription& aDescr)
+{
+  // Set color matrix type.
+  aDescr.Attributes().Set(eColorMatrixType, (uint32_t)SVG_FECOLORMATRIX_TYPE_SATURATE);
+
+  // Set color matrix values.
+  const nsStyleCoord& styleValue = mFilter.GetFilterParameter();
+  float value = 1 - ClampFactor(styleValue.GetFactorOrPercentValue());
+  aDescr.Attributes().Set(eColorMatrixValues, &value, 1);
+
+  return NS_OK;
+}
+
 nsresult
 nsCSSFilterInstance::SetAttributesForHueRotate(FilterPrimitiveDescription& aDescr)
 {

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