Bug 1058765 - Add a test for chaining different CSS filter functions together. r=mstange
authorMax Vujovic <mvujovic@adobe.com>
Wed, 10 Sep 2014 10:26:50 -0700
changeset 229207 965253c82aeb98f847532b5f764d99e21f71ab31
parent 229206 92eb51bf4a7d049bd75a09e829f2e568abcd1681
child 229208 adf3a734a57cf665c46a79610c982a2a2c811aec
push id611
push userraliiev@mozilla.com
push dateMon, 05 Jan 2015 23:23:16 +0000
treeherdermozilla-release@345cd3b9c445 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmstange
bugs1058765
milestone35.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1058765 - Add a test for chaining different CSS filter functions together. r=mstange
layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html
layout/reftests/svg/filters/css-filter-chains/long-chain.html
layout/reftests/svg/filters/css-filter-chains/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html
@@ -0,0 +1,31 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filter Chains: Long Filter Chain</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <style type="text/css">
+    #target {
+      /* The first 8 CSS filter functions result in this color. */
+      background-color: rgba(118, 153, 44, 0.8);
+      /* Use an equivalent SVG filter for the last 2 CSS filter functions. */
+      filter: url(#blur-and-drop-shadow);
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square with a green drop shadow.</p>
+  <div id="target"></div>
+  <svg width="0" height="0">
+    <filter id="blur-and-drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse">
+      <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/>
+      <feDropShadow dx="10" dy="10" stdDeviation="10" flood-color="#0f0" color-interpolation-filters="sRGB"/>
+    </filter>
+  </svg>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/filters/css-filter-chains/long-chain.html
@@ -0,0 +1,41 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>CSS Filter Chains: Long Filter Chain</title>
+  <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+  <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty">
+  <link rel="match" href="long-chain-ref.html">
+  <meta name="assert"
+        content="Multiple chained CSS filter functions of different types should
+                 render correctly.">
+  <style type="text/css">
+    #target {
+      /*
+        Chain together all 10 CSS filter functions defined in the Filter Effects
+        Level 1 specification.
+      */
+      filter: brightness(2)
+              contrast(0.4)
+              grayscale(0.2)
+              hue-rotate(270deg)
+              invert(0.6)
+              opacity(0.8)
+              saturate(10)
+              sepia(0.4)
+              blur(3px)
+              drop-shadow(10px 10px 10px #0f0);
+      background-color: red;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>You should see a blurred green square with a green drop shadow.</p>
+  <div id="target"></div>
+</body>
+</html>
--- a/layout/reftests/svg/filters/css-filter-chains/reftest.list
+++ b/layout/reftests/svg/filters/css-filter-chains/reftest.list
@@ -1,6 +1,8 @@
 # These tests verify that CSS filter chains behave properly.
 # e.g. filter: blur(3px) grayscale(0.5) invert(0.2);
 
 default-preferences pref(layout.css.filters.enabled,true)
 
+# Some platforms render this complex filter chain a little differently, and that's ok.
+fuzzy(5,13000) == long-chain.html long-chain-ref.html
 == same-filter.html same-filter-ref.html