diff options
Diffstat (limited to 'layout/reftests/svg/filters')
320 files changed, 7581 insertions, 0 deletions
diff --git a/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html b/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html new file mode 100644 index 0000000000..573c6e419d --- /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> diff --git a/layout/reftests/svg/filters/css-filter-chains/long-chain.html b/layout/reftests/svg/filters/css-filter-chains/long-chain.html new file mode 100644 index 0000000000..b99468eee2 --- /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> diff --git a/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html b/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html new file mode 100644 index 0000000000..a769783b2b --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.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 Chains: Use a Filtered Element as the Background of Another Element</title> + <style type="text/css"> + #src { + background-color: #0f0; + width: 100px; + height: 100px; + } + #dest { + margin-top: 10px; + background: #0f0; + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>You should see a small green square followed by a large green square.</p> + <div id="src"></div> + <div id="dest"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filter-chains/moz-element.html b/layout/reftests/svg/filters/css-filter-chains/moz-element.html new file mode 100644 index 0000000000..245f6a6464 --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/moz-element.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters Chains: Use a Filtered Element as the Background of Another Element</title> + <style type="text/css"> + #src { + filter: hue-rotate(90deg) saturate(10); + background-color: #f00; + width: 100px; + height: 100px; + } + #dest { + margin-top: 10px; + background: -moz-element(#src); + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>You should see a small green square followed by a large green square.</p> + <div id="src"></div> + <div id="dest"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filter-chains/reftest.list b/layout/reftests/svg/filters/css-filter-chains/reftest.list new file mode 100644 index 0000000000..f9b9523329 --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/reftest.list @@ -0,0 +1,7 @@ +# These tests verify that CSS filter chains behave properly. +# e.g. filter: blur(3px) grayscale(0.5) invert(0.2); + +# Some platforms render this complex filter chain a little differently, and that's ok. +fuzzy(4-10,12000-20260) == long-chain.html long-chain-ref.html # Win10: Bug 1258241 +== moz-element.html moz-element-ref.html +fuzzy(0-15,0-14056) == same-filter.html same-filter-ref.html diff --git a/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html b/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html new file mode 100644 index 0000000000..ff5de04da9 --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filter Chains: Filters of the Same Type</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#blur); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="1" color-interpolation-filters="sRGB"/> + <feGaussianBlur stdDeviation="2" color-interpolation-filters="sRGB"/> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filter-chains/same-filter.html b/layout/reftests/svg/filters/css-filter-chains/same-filter.html new file mode 100644 index 0000000000..9dd79d4db4 --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/same-filter.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 Filter Chains: Filters of the Same Type</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="same-filter-ref.html"> + <meta name="assert" + content="Multiple chained CSS filter functions of the same type should + render correctly."> + <style type="text/css"> + #target { + filter: blur(1px) blur(2px) blur(3px); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-calc-negative-ref.html b/layout/reftests/svg/filters/css-filters/blur-calc-negative-ref.html new file mode 100644 index 0000000000..fc260c2e22 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-calc-negative-ref.html @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur an HTML Element Using a Negative Calc Function Value</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-calc-negative-ref.html"> + <meta name="assert" + content="Given a calc() value that evaluates to a negative result, the + CSS blur filter function should not blur an HTML element."> + <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/blur-calc-negative.html b/layout/reftests/svg/filters/css-filters/blur-calc-negative.html new file mode 100644 index 0000000000..694c6cfc97 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-calc-negative.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: Blur an HTML Element Using a Negative Calc Function Value</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-calc-negative-ref.html"> + <meta name="assert" + content="Given a calc() value that evaluates to a negative result, the + CSS blur filter function should not blur an HTML element."> + <style type="text/css"> + #target { + filter: blur(calc(-10px)); + 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/blur-calc-ref.html b/layout/reftests/svg/filters/css-filters/blur-calc-ref.html new file mode 100644 index 0000000000..8f35672749 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-calc-ref.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur an HTML Element Using a Calc Function Value</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: blur(10px); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-calc.html b/layout/reftests/svg/filters/css-filters/blur-calc.html new file mode 100644 index 0000000000..e4dc87e7d7 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-calc.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: Blur an HTML Element Using a Calc Function Value</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-calc-ref.html"> + <meta name="assert" + content="Given a calc() value that evaluates to a positive result, the + CSS blur filter function should blur an HTML element."> + <style type="text/css"> + #target { + filter: blur(calc(2 * 5px)); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software-ref.html b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software-ref.html new file mode 100644 index 0000000000..4ad810f944 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software-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: Cap Blur Radius When Rendering in Software</title> + <style type="text/css"> + #target { + filter: blur(100px); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software.html b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software.html new file mode 100644 index 0000000000..81da59e6cb --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Cap Blur Radius When Rendering in Software</title> + <!-- + When rendering in software, Firefox should cap large blur radii to a smaller + value in order to keep performance acceptable. + --> + <style type="text/css"> + #target { + filter: blur(1000000px); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-clip-rect.html b/layout/reftests/svg/filters/css-filters/blur-clip-rect.html new file mode 100644 index 0000000000..5bb25b91b8 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-clip-rect.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <title>CSS Filters: Blur an HTML Element and clip to the blur rect</title> + <style type="text/css"> + #target { + filter: url(#blur); + width: 400px; + height: 400px; + } + #inner { + position: relative; + left: 100px; + top: 100px; + width: 100px; + height: 100px; + background-color: #00ff00; + } + body { + margin: 0px; + } + </style> +</head> +<body> + <div id="target"> + <div id="inner"></div> + </div> + <svg width="0" height="0"> + <filter id="blur" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" x="100" y="100" width="100" height="100"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-em-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-em-radius-ref.html new file mode 100644 index 0000000000..929fbb5ab5 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-em-radius-ref.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: Blur an HTML Element Using a Radius in Ems</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#blur); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur"> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-em-radius.html b/layout/reftests/svg/filters/css-filters/blur-em-radius.html new file mode 100644 index 0000000000..7ba53e0a2f --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-em-radius.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur an HTML Element Using a Radius in Ems</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-em-radius-ref.html"> + <meta name="assert" + content="Given a valid blur radius in ems, the CSS blur filter function + should blur an HTML element."> + <style type="text/css"> + #target { + filter: blur(0.3em); + font-size: 10px; + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-invalid-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-invalid-radius-ref.html new file mode 100644 index 0000000000..83f74e2b53 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-invalid-radius-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: Don't Change Element Rendering with Invalid Blur Radius</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <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/blur-invalid-radius.html b/layout/reftests/svg/filters/css-filters/blur-invalid-radius.html new file mode 100644 index 0000000000..aada289dd0 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-invalid-radius.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: Don't Change Element Rendering with Invalid Blur Radius</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+ <link rel="match" href="blur-invalid-radius-ref.html">
+ <meta name="assert"
+ content="Given an invalid blur radius, the CSS blur filter function
+ should not change the rendering of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: blur(3);
+ 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/blur-ref.html b/layout/reftests/svg/filters/css-filters/blur-ref.html new file mode 100644 index 0000000000..62c4c8b9f4 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-ref.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: Blur an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#blur); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur"> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-ref.svg b/layout/reftests/svg/filters/css-filters/blur-ref.svg new file mode 100644 index 0000000000..5e7800a9e7 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-ref.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>CSS Filters: Blur an SVG Element</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + <rect x="20" y="20" width="100" height="100" fill="#0f0" filter="url(#blur)"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/css-filters/blur-rem-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-rem-radius-ref.html new file mode 100644 index 0000000000..1b4b104d8d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-rem-radius-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 Filters: Blur an HTML Element Using a Radius in Rems</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + html { + font-size: 30px; + } + #target { + filter: url(#blur); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur"> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-rem-radius.html b/layout/reftests/svg/filters/css-filters/blur-rem-radius.html new file mode 100644 index 0000000000..69fac9a2b3 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-rem-radius.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur an HTML Element Using a Radius in Rems</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-rem-radius-ref.html"> + <meta name="assert" + content="Given a valid blur radius in rems, the CSS blur filter function + should blur an HTML element."> + <style type="text/css"> + html { + font-size: 30px; + } + #target { + filter: blur(0.1rem); + font-size: 16px; + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-zero-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-zero-radius-ref.html new file mode 100644 index 0000000000..7af2485f53 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-zero-radius-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: Blur with Zero Radius</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square. It should not be blurred.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-zero-radius.html b/layout/reftests/svg/filters/css-filters/blur-zero-radius.html new file mode 100644 index 0000000000..1bd099d898 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-zero-radius.html @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur with Zero Radius</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-zero-radius-ref.html"> + <meta name="assert" content="Given a zero blur radius, the CSS blur filter + function will not blur an HTML element."> + <style type="text/css"> + #target { + filter: blur(0); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square. It should not be blurred.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-zoomed-page-ref.html b/layout/reftests/svg/filters/css-filters/blur-zoomed-page-ref.html new file mode 100644 index 0000000000..f68659241c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-zoomed-page-ref.html @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur on a 2x Zoomed Page</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + body { + margin: 2rem; + } + #target { + filter: url(#blur); + background-color: #0f0; + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur" x="-100" y="-100" width="400" height="400" filterUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="6" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-zoomed-page.html b/layout/reftests/svg/filters/css-filters/blur-zoomed-page.html new file mode 100644 index 0000000000..98d7ad6610 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-zoomed-page.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html reftest-zoom="2.0"> +<head> + <title>CSS Filters: Blur on a 2x Zoomed Page</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-zoomed-page-ref.html"> + <meta name="assert" + content="The results of the CSS blur filter function should scale up + proportionally when the page is zoomed. At 1x zoom, you should + see a blurred green square. At 2x zoom, you should see a + blurred green square with a blur radius that's twice as + large."> + <style type="text/css"> + body { + margin: 1rem; + } + #target { + filter: blur(3px); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur.html b/layout/reftests/svg/filters/css-filters/blur.html new file mode 100644 index 0000000000..3510824a0d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur.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: Blur an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-ref.html"> + <meta name="assert" + content="Given a valid blur radius, the CSS blur filter function should + blur an HTML element."> + <style type="text/css"> + #target { + filter: blur(3px); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur.svg b/layout/reftests/svg/filters/css-filters/blur.svg new file mode 100644 index 0000000000..8c6cf9536d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur.svg @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>CSS Filters: Blur an SVG Element</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"/> + <link rel="match" + href="blur-ref.svg"/> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + This test verifies that the CSS blur filter function can filter SVG + elements. If the test passes, you should see a green square. + </desc> + </g> + + <g id="test-body-content"> + <rect x="20" y="20" width="100" height="100" fill="#0f0" filter="blur(3px)"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/css-filters/brightness-darken-ref.html b/layout/reftests/svg/filters/css-filters/brightness-darken-ref.html new file mode 100644 index 0000000000..466164dd1d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-darken-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: Darken an HTML Element Using the Brightness Function</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(0, 64, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a dark green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-darken.html b/layout/reftests/svg/filters/css-filters/brightness-darken.html new file mode 100644 index 0000000000..544498e6b5 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-darken.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: Darken an HTML Element Using the Brightness Function</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness"> + <link rel="match" href="brightness-darken-ref.html"> + <meta name="assert" + content="Given a factor less than one, the CSS brightness filter + function should darken the color of an HTML element."> + <style type="text/css"> + #target { + filter: brightness(0.25); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a dark green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-extreme-ref.html b/layout/reftests/svg/filters/css-filters/brightness-extreme-ref.html new file mode 100644 index 0000000000..c38cd9a5bd --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-extreme-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: Brighten an HTML Element Using a Large Factor</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-extreme.html b/layout/reftests/svg/filters/css-filters/brightness-extreme.html new file mode 100644 index 0000000000..11a7a68949 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-extreme.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: Brighten an HTML Element Using a Large Factor</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness"> + <link rel="match" href="brightness-extreme-ref.html"> + <meta name="assert" + content="Given a large factor, the CSS brightness filter function should + completely change the color of an HTML element."> + <style type="text/css"> + #target { + filter: brightness(1000); + background-color: rgb(0, 1, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-one-ref.html b/layout/reftests/svg/filters/css-filters/brightness-one-ref.html new file mode 100644 index 0000000000..79e59d3403 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-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: Brighten an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(0, 128, 0); + 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/brightness-one.html b/layout/reftests/svg/filters/css-filters/brightness-one.html new file mode 100644 index 0000000000..9e061eab6c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-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: Brighten an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness"> + <link rel="match" href="brightness-one-ref.html"> + <meta name="assert" + content="Given a factor of one, the CSS brightness filter function + should not change the color of an HTML element."> + <style type="text/css"> + #target { + filter: brightness(1); + background-color: rgb(0, 128, 0); + 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/brightness-percent-ref.html b/layout/reftests/svg/filters/css-filters/brightness-percent-ref.html new file mode 100644 index 0000000000..bd62450884 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-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: Brighten an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(0, 128, 0); + 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/brightness-percent.html b/layout/reftests/svg/filters/css-filters/brightness-percent.html new file mode 100644 index 0000000000..cbe1477728 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-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: Brighten an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness"> + <link rel="match" href="brightness-percent-ref.html"> + <meta name="assert" + content="Given a percentage, the CSS brightness filter function should + change the color of an HTML element."> + <style type="text/css"> + #target { + filter: brightness(400%); + background-color: rgb(0, 32, 0); + 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/brightness-ref.html b/layout/reftests/svg/filters/css-filters/brightness-ref.html new file mode 100644 index 0000000000..31ca2a729a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-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: Brighten an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(0, 128, 0); + 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/brightness-zero-ref.html b/layout/reftests/svg/filters/css-filters/brightness-zero-ref.html new file mode 100644 index 0000000000..f49520c258 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-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: Darken an HTML Element Using the Brightness Function and a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: black; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a black square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-zero.html b/layout/reftests/svg/filters/css-filters/brightness-zero.html new file mode 100644 index 0000000000..71670a7fe2 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-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: Darken an HTML Element Using the Brightness Function and a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness"> + <link rel="match" href="brightness-zero-ref.html"> + <meta name="assert" + content="Given a factor of zero, the CSS brightness filter function + should change the color of an HTML element to black."> + <style type="text/css"> + #target { + filter: brightness(0); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a black square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness.html b/layout/reftests/svg/filters/css-filters/brightness.html new file mode 100644 index 0000000000..92e7f0ec00 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness.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: Brighten an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness"> + <link rel="match" href="brightness-ref.html"> + <meta name="assert" + content="The CSS brightness filter function should change the color of + an HTML element."> + <style type="text/css"> + #target { + filter: brightness(4); + background-color: rgb(0, 32, 0); + 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/containing-block-1-ref.html b/layout/reftests/svg/filters/css-filters/containing-block-1-ref.html new file mode 100644 index 0000000000..696893b47f --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/containing-block-1-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE HTML> +<body> +<div style="position:absolute; left:150px; top:150px; width:200px; height:200px; background:lime;"></div> +<div style="position:absolute; left:180px; top:180px; width:200px; height:200px; background:yellow;"></div> + diff --git a/layout/reftests/svg/filters/css-filters/containing-block-1.html b/layout/reftests/svg/filters/css-filters/containing-block-1.html new file mode 100644 index 0000000000..503f6ee35a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/containing-block-1.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<body style="margin:0"> +<div style="margin:100px; width:100px; height:100px; filter:opacity(1);"> + <div style="position:absolute; left:50px; top:50px; width:200px; height:200px; background:lime;"></div> + <div style="position:fixed; left:80px; top:80px; width:200px; height:200px; background:yellow;"></div> +</div> diff --git a/layout/reftests/svg/filters/css-filters/contrast-extreme-ref.html b/layout/reftests/svg/filters/css-filters/contrast-extreme-ref.html new file mode 100644 index 0000000000..c276e8bca7 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-extreme-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: Increase the Contrast of an HTML Element Using a Large Factor</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-extreme.html b/layout/reftests/svg/filters/css-filters/contrast-extreme.html new file mode 100644 index 0000000000..e5b80f8ed6 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-extreme.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Increase the Contrast of an HTML Element Using a Large Factor</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast"> + <link rel="match" href="contrast-extreme-ref.html"> + <meta name="assert" + content="Given a large factor, the CSS contrast filter function should + should change color channel values to be much farther from + their middle value."> + <style type="text/css"> + #target { + filter: contrast(1000); + background-color: rgb(127, 129, 127); /* 127 should change to 0, and 129 should change to 255. */ + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-one-ref.html b/layout/reftests/svg/filters/css-filters/contrast-one-ref.html new file mode 100644 index 0000000000..90df359cc1 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-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: Set the Contrast of HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(0, 128, 0); + 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/contrast-one.html b/layout/reftests/svg/filters/css-filters/contrast-one.html new file mode 100644 index 0000000000..c7c4cca19a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-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: Set the Contrast of HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast"> + <link rel="match" href="contrast-one-ref.html"> + <meta name="assert" + content="Given a factor of one, the CSS contrast filter function + should not change the color of an HTML element."> + <style type="text/css"> + #target { + filter: contrast(1); + background-color: rgb(0, 128, 0); + 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/contrast-percent-ref.html b/layout/reftests/svg/filters/css-filters/contrast-percent-ref.html new file mode 100644 index 0000000000..84f5eb0410 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-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: Increase the Contrast of an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-percent.html b/layout/reftests/svg/filters/css-filters/contrast-percent.html new file mode 100644 index 0000000000..7d0337f642 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-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: Increase the Contrast of an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast"> + <link rel="match" href="contrast-percent-ref.html"> + <meta name="assert" + content="Given a percentage, the CSS contrast filter function should + change the color of an HTML element."> + <style type="text/css"> + #target { + filter: contrast(200%); + background-color: rgb(0, 196, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-reduce-ref.html b/layout/reftests/svg/filters/css-filters/contrast-reduce-ref.html new file mode 100644 index 0000000000..ef169da13b --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-reduce-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: Reduce the Contrast of an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(64, 191, 64); + 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/contrast-reduce.html b/layout/reftests/svg/filters/css-filters/contrast-reduce.html new file mode 100644 index 0000000000..f4482d4937 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-reduce.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Reduce the Contrast of an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast"> + <link rel="match" href="contrast-reduce-ref.html"> + <meta name="assert" + content="Given a factor of less than one, the CSS contrast filter + function should change color channel values to be closer to + their middle value."> + <style type="text/css"> + #target { + filter: contrast(0.5); + 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/contrast-ref.html b/layout/reftests/svg/filters/css-filters/contrast-ref.html new file mode 100644 index 0000000000..84f5eb0410 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-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: Increase the Contrast of an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-zero-ref.html b/layout/reftests/svg/filters/css-filters/contrast-zero-ref.html new file mode 100644 index 0000000000..5f1a1f6ea6 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-zero-ref.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Reduce the Contrast of an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: contrast(0); + background-color: rgb(128, 128, 128); + 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/contrast-zero.html b/layout/reftests/svg/filters/css-filters/contrast-zero.html new file mode 100644 index 0000000000..59db11b60c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-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: Reduce the Contrast of an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast"> + <link rel="match" href="contrast-zero-ref.html"> + <meta name="assert" + content="Given a factor of zero, the CSS contrast filter function + should change the color of an HTML element to gray."> + <style type="text/css"> + #target { + filter: contrast(0); + background-color: rgb(0, 128, 0); + 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/contrast.html b/layout/reftests/svg/filters/css-filters/contrast.html new file mode 100644 index 0000000000..e12b6ebbc9 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast.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: Increase the Contrast of an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast"> + <link rel="match" href="contrast-ref.html"> + <meta name="assert" + content="The CSS contrast filter function should change the color of + an HTML element."> + <style type="text/css"> + #target { + filter: contrast(2); + background-color: rgb(0, 196, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-default-color-ref.html b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color-ref.html new file mode 100644 index 0000000000..2fe89507c5 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color-ref.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: Drop Shadow Default Color</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#drop-shadow); + background-color: #00f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blue square with a green drop shadow.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feDropShadow dx="10" dy="10" stdDeviation="3" flood-color="#0f0" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-default-color.html b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color.html new file mode 100644 index 0000000000..ac9f8ecb12 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color.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 Filters: Drop Shadow Default Color</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-drop-shadow"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"> + <link rel="match" href="drop-shadow-default-color-ref.html"> + <meta name="assert" + content="If the color is unspecified in a CSS drop-shadow filter + function, it should default to the value of the CSS color + property."> + <style type="text/css"> + #target { + filter: drop-shadow(10px 10px 3px); + color: #0f0; + background-color: #00f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blue square with a green drop shadow.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset-ref.html b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset-ref.html new file mode 100644 index 0000000000..bf04c1d511 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset-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 Filters: Negative Drop Shadow Offset</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#drop-shadow); + background-color: #00f; + position: relative; + top: 20px; + left: 20px; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blue square with a green drop shadow in its top left corner.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feDropShadow dx="-10" dy="-10" stdDeviation="3" flood-color="#0f0" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset.html b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset.html new file mode 100644 index 0000000000..79b301daba --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Negative Drop Shadow Offset</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-drop-shadow"> + <link rel="match" href="drop-shadow-negative-offset-ref.html"> + <meta name="assert" + content="Given negative shadow offsets, the CSS drop-shadow filter + function should add a drop shadow extending from the top left + corner of an HTML element."> + <style type="text/css"> + #target { + filter: drop-shadow(-10px -10px 3px #0f0); + background-color: #00f; + position: relative; + top: 20px; + left: 20px; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blue square with a green drop shadow in its top left corner.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-ref.html b/layout/reftests/svg/filters/css-filters/drop-shadow-ref.html new file mode 100644 index 0000000000..211fbfbc43 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/drop-shadow-ref.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: Drop Shadow on HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#drop-shadow); + background-color: #00f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blue square with a green drop shadow.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feDropShadow dx="10" dy="10" stdDeviation="3" flood-color="#0f0" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow.html b/layout/reftests/svg/filters/css-filters/drop-shadow.html new file mode 100644 index 0000000000..1e46734651 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/drop-shadow.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: Drop Shadow on HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-drop-shadow"> + <link rel="match" href="drop-shadow-ref.html"> + <meta name="assert" + content="The CSS drop-shadow filter function should add a drop shadow to + an HTML element."> + <style type="text/css"> + #target { + filter: drop-shadow(10px 10px 3px #0f0); + background-color: #00f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blue square with a green drop shadow.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/filter-on-huge-bbox.html b/layout/reftests/svg/filters/css-filters/filter-on-huge-bbox.html new file mode 100644 index 0000000000..6a75f19b27 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/filter-on-huge-bbox.html @@ -0,0 +1,26 @@ +<head> +<style> +body { + filter: blur(0px); + background-color: red; + margin:0px; +} + +a { + text-indent: -9999em; + top: -9999em; + position: absolute; +} + +div { + width: 100%; + height: 100%; + background-color: lime; + margin: 0px; +} +</style> +</head> +<body> + <div></div> + <a href="http://example.com">http://example.com</a> +</body>
\ No newline at end of file diff --git a/layout/reftests/svg/filters/css-filters/filter-on-outer-svg.html b/layout/reftests/svg/filters/css-filters/filter-on-outer-svg.html new file mode 100644 index 0000000000..72e533a4ed --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/filter-on-outer-svg.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +</head> +<body style="background-color: lime;"> + <div style="width: 100px; height: 100px; background-color: red;"> + <svg width="100" height="100" style="filter: opacity(100%);"> + <g transform="matrix(200,0,0,200,-20000,-20000)"> + <rect width="200" height="200" style="fill:lime"> + </g> + </svg> + </div> + </body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/grayscale-one-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-one-ref.html new file mode 100644 index 0000000000..1a71de85ec --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..a13aaec7ff --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..16bac92715 --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..ac3f0496da --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..90e4b69f52 --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..5500e7ce8d --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..06da896192 --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..1c023606fd --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..5cf259540c --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..ac15725ab0 --- /dev/null +++ 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:mvujovic@adobe.com"> + <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/hue-rotate-360-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-360-ref.html new file mode 100644 index 0000000000..39583b518b --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-360-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: Hue Rotate an HTML Element Using a 360 Degree Angle</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <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/hue-rotate-360.html b/layout/reftests/svg/filters/css-filters/hue-rotate-360.html new file mode 100644 index 0000000000..de8791e03d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-360.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: Hue Rotate an HTML Element Using a 360 Degree Angle</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-360-ref.html"> + <meta name="assert" + content="Given a 360 degree angle, the CSS hue-rotate filter function + should not change the color of an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(360deg); + 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/hue-rotate-grad-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-grad-ref.html new file mode 100644 index 0000000000..855749647f --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-grad-ref.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using Gradians</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#hue-rotate); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> + <!-- + This equivalent SVG filter is defined in: + http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent + --> + <svg width="0" height="0"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-grad.html b/layout/reftests/svg/filters/css-filters/hue-rotate-grad.html new file mode 100644 index 0000000000..13ff77499a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-grad.html @@ -0,0 +1,29 @@ + +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using Gradians</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-turns-ref.html"> + <meta name="assert" + content="Given an angle in gradians, the CSS hue-rotate filter function + should change the color of an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(100grad); /* Equivalent to 90deg. */ + background-color: #f00; + 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/hue-rotate-multichannel-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel-ref.html new file mode 100644 index 0000000000..7fa26b5036 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel-ref.html @@ -0,0 +1,37 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Containing Colors with Multiple RGB Channels</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + width: 150px; + height: 150px; + } + .color-strip { + height: 50px; + } + #color-strip-1 { + background-color: rgb(64, 187, 46); + } + #color-strip-2 { + background-color: rgb(64, 250, 255); + } + #color-strip-3 { + background-color: rgb(255, 14, 109); + } + </style> +</head> +<body> + <p>You should see a horizontal green strip, followed by a cyan strip, followed by a magenta strip.</p> + <div id="target"> + <div id="color-strip-1" class="color-strip"></div> + <div id="color-strip-2" class="color-strip"></div> + <div id="color-strip-3" class="color-strip"></div> + </div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel.html b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel.html new file mode 100644 index 0000000000..d6e9650c7a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel.html @@ -0,0 +1,38 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Containing Colors with Multiple RGB Channels</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: hue-rotate(90deg); + width: 150px; + height: 150px; + } + .color-strip { + height: 50px; + } + #color-strip-1 { + background-color: rgb(255, 128, 64); + } + #color-strip-2 { + background-color: rgb(128, 255, 64); + } + #color-strip-3 { + background-color: rgb(32, 64, 255); + } + </style> +</head> +<body> + <p>You should see a horizontal green strip, followed by a cyan strip, followed by a magenta strip.</p> + <div id="target"> + <div id="color-strip-1" class="color-strip"></div> + <div id="color-strip-2" class="color-strip"></div> + <div id="color-strip-3" class="color-strip"></div> + </div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-negative-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-negative-ref.html new file mode 100644 index 0000000000..19c843d0f0 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-negative-ref.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using a Negative Angle</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#hue-rotate); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> + <!-- + This equivalent SVG filter is defined in: + http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent + --> + <svg width="0" height="0"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-negative.html b/layout/reftests/svg/filters/css-filters/hue-rotate-negative.html new file mode 100644 index 0000000000..97b84be5be --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-negative.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: Hue Rotate an HTML Element Using a Negative Angle</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-negative-ref.html"> + <meta name="assert" + content="Given a negative angle, the CSS hue-rotate filter function + should change the color of an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(-270deg); /* Equivalent to 90deg. */ + background-color: #f00; + 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/hue-rotate-over-360-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360-ref.html new file mode 100644 index 0000000000..c1744b9601 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360-ref.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using an Angle Over 360 Degrees</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#hue-rotate); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> + <!-- + This equivalent SVG filter is defined in: + http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent + --> + <svg width="0" height="0"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-over-360.html b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360.html new file mode 100644 index 0000000000..dfc067ee2e --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360.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: Hue Rotate an HTML Element Using an Angle Over 360 Degrees</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-over-360-ref.html"> + <meta name="assert" + content="Given an angle over 360 degress, the CSS hue-rotate filter + function should change the color of an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(450deg); /* Equivalent to 90deg. */ + background-color: #f00; + 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/hue-rotate-rad-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-rad-ref.html new file mode 100644 index 0000000000..82ae7b28cb --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-rad-ref.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using Radians</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#hue-rotate); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> + <!-- + This equivalent SVG filter is defined in: + http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent + --> + <svg width="0" height="0"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-rad.html b/layout/reftests/svg/filters/css-filters/hue-rotate-rad.html new file mode 100644 index 0000000000..5622f441d1 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-rad.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: Hue Rotate an HTML Element Using Radians</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-turns-ref.html"> + <meta name="assert" + content="Given an angle in radians, the CSS hue-rotate filter function + should change the color of an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(1.57079632679rad); /* Equivalent to 90deg. */ + background-color: #f00; + 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/hue-rotate-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-ref.html new file mode 100644 index 0000000000..aec99216a9 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-ref.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#hue-rotate); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> + <!-- + This equivalent SVG filter is defined in: + http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent + --> + <svg width="0" height="0"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-turn-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-turn-ref.html new file mode 100644 index 0000000000..c3a76ea4b5 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-turn-ref.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using Turns</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#hue-rotate); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> + <!-- + This equivalent SVG filter is defined in: + http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent + --> + <svg width="0" height="0"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-turn.html b/layout/reftests/svg/filters/css-filters/hue-rotate-turn.html new file mode 100644 index 0000000000..d6d8a17f63 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-turn.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: Hue Rotate an HTML Element Using Turns</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-turn-ref.html"> + <meta name="assert" + content="Given an angle in turns, the CSS hue-rotate filter function + should change the color of an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(0.25turn); + background-color: #f00; + 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/hue-rotate-zero-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-zero-ref.html new file mode 100644 index 0000000000..996b22e0fd --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-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: Hue Rotate an HTML Element Using a Zero Angle</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <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/hue-rotate-zero.html b/layout/reftests/svg/filters/css-filters/hue-rotate-zero.html new file mode 100644 index 0000000000..c79f23e5c0 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-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: Hue Rotate an HTML Element Using a Zero Angle</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-zero-ref.html"> + <meta name="assert" + content="Given a zero angle, the CSS hue-rotate filter function should + not change the color of an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(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/hue-rotate.html b/layout/reftests/svg/filters/css-filters/hue-rotate.html new file mode 100644 index 0000000000..a4536eea7a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate.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: Hue Rotate an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-ref.html"> + <meta name="assert" + content="The CSS hue-rotate filter function should change the color of + an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(90deg); + background-color: #f00; + 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-half-ref.html b/layout/reftests/svg/filters/css-filters/invert-half-ref.html new file mode 100644 index 0000000000..bd0d67d66b --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..818d751169 --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..6882b501c9 --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..f9e8eaa98a --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..4452898e3b --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..374fe6dfde --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..fd197f038c --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..d56dc17418 --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..c5af4b6116 --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..3f000a71dd --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..9adb505dd4 --- /dev/null +++ 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:mvujovic@adobe.com"> + <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 new file mode 100644 index 0000000000..8ba201e227 --- /dev/null +++ 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:mvujovic@adobe.com"> + <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/opacity-one-ref.html b/layout/reftests/svg/filters/css-filters/opacity-one-ref.html new file mode 100644 index 0000000000..b75678edbb --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-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: Apply Opacity to an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <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/opacity-one.html b/layout/reftests/svg/filters/css-filters/opacity-one.html new file mode 100644 index 0000000000..8e0f26ba01 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-one.html @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity"> + <link rel="match" href="opacity-one-ref.html"> + <meta name="assert" + content="Given a factor of one, the CSS opacity filter function should + not change the opaqueness of an HTML element."> + <style type="text/css"> + #below-target { + background-color: #f00; + width: 100px; + height: 100px; + } + #target { + filter: opacity(1000); + background-color: #0f0; + position: relative; + top: -100px; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="below-target"></div> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one-ref.html b/layout/reftests/svg/filters/css-filters/opacity-over-one-ref.html new file mode 100644 index 0000000000..d674607041 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-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: Apply Opacity to an HTML Element Using a Factor Over One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <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/opacity-over-one-translucent-source-ref.html b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source-ref.html new file mode 100644 index 0000000000..dea9f84a5a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source-ref.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to a Translucent HTML Element Using a Factor Over One</title> + <style type="text/css"> + #target { + background-color: rgba(0, 255, 0, 0.25); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a faded green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source.html b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source.html new file mode 100644 index 0000000000..07ff65ed7b --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source.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: Apply Opacity to a Translucent HTML Element Using a Factor Over One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity"> + <link rel="match" href="opacity-over-one-translucent-source-ref.html"> + <meta name="assert" + content="Given a factor over one, the CSS opacity filter function should + not change the translucency of an HTML element."> + <style type="text/css"> + #target { + filter: opacity(1000); + background-color: rgba(0, 255, 0, 0.25); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a faded green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one.html b/layout/reftests/svg/filters/css-filters/opacity-over-one.html new file mode 100644 index 0000000000..2716d39bf1 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-over-one.html @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor Over One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity"> + <link rel="match" href="opacity-over-one-ref.html"> + <meta name="assert" + content="Given a factor over one, the CSS opacity filter function should + not change the opaqueness of an HTML element."> + <style type="text/css"> + #below-target { + background-color: #f00; + width: 100px; + height: 100px; + } + #target { + filter: opacity(1000); + background-color: #0f0; + position: relative; + top: -100px; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="below-target"></div> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-percent-ref.html b/layout/reftests/svg/filters/css-filters/opacity-percent-ref.html new file mode 100644 index 0000000000..f673701fe8 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-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: Apply Opacity to an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(192, 255, 192); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a faded green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-percent.html b/layout/reftests/svg/filters/css-filters/opacity-percent.html new file mode 100644 index 0000000000..5cc4ab5d23 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-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: Apply Opacity to an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity"> + <link rel="match" href="opacity-percent-ref.html"> + <meta name="assert" + content="Given a percentage, the CSS opacity filter function should make + an HTML element translucent."> + <style type="text/css"> + #target { + filter: opacity(25%); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a faded green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-ref.html b/layout/reftests/svg/filters/css-filters/opacity-ref.html new file mode 100644 index 0000000000..adbfcf2bb7 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-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: Apply Opacity to an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(192, 255, 192); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a faded green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-zero-ref.html b/layout/reftests/svg/filters/css-filters/opacity-zero-ref.html new file mode 100644 index 0000000000..69821d5ac4 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-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: Apply Opacity to an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #below-target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="below-target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-zero.html b/layout/reftests/svg/filters/css-filters/opacity-zero.html new file mode 100644 index 0000000000..da5e6899ff --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-zero.html @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity"> + <link rel="match" href="opacity-zero-ref.html"> + <meta name="assert" + content="Given a factor of zero, the CSS opacity filter function should + make an HTML element completely transparent."> + <style type="text/css"> + #below-target { + background-color: #0f0; + width: 100px; + height: 100px; + } + #target { + filter: opacity(0); + background-color: #f00; + position: relative; + top: -100px; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="below-target"></div> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity.html b/layout/reftests/svg/filters/css-filters/opacity.html new file mode 100644 index 0000000000..3ea8f1589c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity.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: Apply Opacity to an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity"> + <link rel="match" href="opacity-ref.html"> + <meta name="assert" + content="The CSS opacity filter function should make an HTML element + translucent."> + <style type="text/css"> + #target { + filter: opacity(0.25); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a faded green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/pass.svg b/layout/reftests/svg/filters/css-filters/pass.svg new file mode 100644 index 0000000000..e76380c89a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/pass.svg @@ -0,0 +1,8 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <title>Testcase reference file for generic pass condition</title> + <rect width="100%" height="100%" fill="lime"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/filters/css-filters/reftest.list b/layout/reftests/svg/filters/css-filters/reftest.list new file mode 100644 index 0000000000..f204de98cd --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/reftest.list @@ -0,0 +1,71 @@ +# These tests verify that CSS filters behave properly. +# e.g. filter: blur(3px) + +== blur.html blur-ref.html +== blur.svg blur-ref.svg +== blur-calc.html blur-calc-ref.html +== blur-calc-negative.html blur-calc-negative-ref.html +fuzzy-if(cocoaWidget,0-1,0-2) skip-if(d2d) == blur-cap-large-radius-on-software.html blur-cap-large-radius-on-software-ref.html +fuzzy-if(!useDrawSnapshot,2-5,4764-8168) fuzzy-if(Android&&device&&!swgl,5-5,8574-8574) == blur-clip-rect.html ../feGaussianBlur-4-ref.svg +== blur-em-radius.html blur-em-radius-ref.html +== blur-invalid-radius.html blur-invalid-radius-ref.html +== blur-rem-radius.html blur-rem-radius-ref.html +== blur-zero-radius.html blur-zero-radius-ref.html +fails-if(useDrawSnapshot) == blur-zoomed-page.html blur-zoomed-page-ref.html +== brightness.html brightness-ref.html +== brightness-darken.html brightness-darken-ref.html +== brightness-extreme.html brightness-extreme-ref.html +== brightness-one.html brightness-one-ref.html +== brightness-percent.html brightness-percent-ref.html +== brightness-zero.html brightness-zero-ref.html +== containing-block-1.html containing-block-1-ref.html +== contrast.html contrast-ref.html +== contrast-extreme.html contrast-extreme-ref.html +== contrast-one.html contrast-one-ref.html +== contrast-percent.html contrast-percent-ref.html +== contrast-reduce.html contrast-reduce-ref.html +== contrast-zero.html contrast-zero-ref.html +== 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 +== filter-on-huge-bbox.html pass.svg +fuzzy(0-1,0-44) fuzzy-if(winWidget,0-1,0-198) == filter-on-outer-svg.html pass.svg +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale.html grayscale-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale-one.html grayscale-one-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale-over-one.html grayscale-over-one-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale-percent.html grayscale-percent-ref.html +fuzzy(0-1,0-10000) == 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 +fuzzy-if(!useDrawSnapshot&&!geckoview,2-2,7500-7500) fuzzy-if(d2d,0-2,0-7500) == hue-rotate-multichannel.html hue-rotate-multichannel-ref.html +== hue-rotate-negative.html hue-rotate-negative-ref.html +== hue-rotate-over-360.html hue-rotate-over-360-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(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == invert.html invert-ref.html +fuzzy(0-1,0-10000) == invert-half.html invert-half-ref.html +== invert-one.html invert-one-ref.html +== invert-over-one.html invert-over-one-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == invert-percent.html invert-percent-ref.html +== invert-zero.html invert-zero-ref.html +fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == opacity.html opacity-ref.html +== opacity-one.html opacity-one-ref.html +== opacity-over-one.html opacity-over-one-ref.html +fuzzy(0-1,0-10000) == opacity-over-one-translucent-source.html opacity-over-one-translucent-source-ref.html +fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == opacity-percent.html opacity-percent-ref.html +== opacity-zero.html opacity-zero-ref.html +== saturate.html saturate-ref.html +fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == saturate-desaturate.html saturate-desaturate-ref.html +== saturate-extreme.html saturate-extreme-ref.html +== saturate-one.html saturate-one-ref.html +== saturate-percent.html saturate-percent-ref.html +fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == saturate-zero.html saturate-zero-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia.html sepia-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia-one.html sepia-one-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia-over-one.html sepia-over-one-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia-percent.html sepia-percent-ref.html +== sepia-zero.html sepia-zero-ref.html + +fuzzy(0-2,0-125000) == scale-filtered-content-01.html scale-filtered-content-01-ref.html diff --git a/layout/reftests/svg/filters/css-filters/saturate-desaturate-ref.html b/layout/reftests/svg/filters/css-filters/saturate-desaturate-ref.html new file mode 100644 index 0000000000..61cd7036b2 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-desaturate-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: Desaturate an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <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/saturate-desaturate.html b/layout/reftests/svg/filters/css-filters/saturate-desaturate.html new file mode 100644 index 0000000000..fdd080361f --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-desaturate.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: Desaturate an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate"> + <link rel="match" href="saturate-desaturate-ref.html"> + <meta name="assert" + content="Given a factor of less than one, the CSS saturate filter + function should dull the color of an HTML element."> + <style type="text/css"> + #target { + filter: saturate(0.2); + background-color: rgb(0, 255, 0); + 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/saturate-extreme-ref.html b/layout/reftests/svg/filters/css-filters/saturate-extreme-ref.html new file mode 100644 index 0000000000..fd7f3711c1 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-extreme-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: Saturate an HTML Element Using a Large Factor</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-extreme.html b/layout/reftests/svg/filters/css-filters/saturate-extreme.html new file mode 100644 index 0000000000..d533074f00 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-extreme.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Saturate an HTML Element Using a Large Factor</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate"> + <link rel="match" href="saturate-extreme-ref.html"> + <meta name="assert" + content="Given a large factor, the CSS saturate filter function should + significantly increase any non-zero color channels in an HTML + element."> + <style type="text/css"> + #target { + filter: saturate(1000); + background-color: rgb(0, 1, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-one-ref.html b/layout/reftests/svg/filters/css-filters/saturate-one-ref.html new file mode 100644 index 0000000000..09c46b9f98 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-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: Saturate an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(0, 128, 0); + 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/saturate-one.html b/layout/reftests/svg/filters/css-filters/saturate-one.html new file mode 100644 index 0000000000..7633f568fa --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-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: Saturate an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate"> + <link rel="match" href="saturate-one-ref.html"> + <meta name="assert" + content="Given a factor of one, the CSS saturate filter function should + not change the color of an HTML element."> + <style type="text/css"> + #target { + filter: saturate(1); + background-color: rgb(0, 128, 0); + 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/saturate-percent-ref.html b/layout/reftests/svg/filters/css-filters/saturate-percent-ref.html new file mode 100644 index 0000000000..9ffb3a5ae1 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-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: Saturate an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-percent.html b/layout/reftests/svg/filters/css-filters/saturate-percent.html new file mode 100644 index 0000000000..17b6ea791c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-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: Saturate an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate"> + <link rel="match" href="saturate-percent-ref.html"> + <meta name="assert" + content="Given a percentage, the CSS saturate filter function should + change the color of an HTML element."> + <style type="text/css"> + #target { + filter: saturate(500%); + background-color: rgb(0, 128, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-ref.html b/layout/reftests/svg/filters/css-filters/saturate-ref.html new file mode 100644 index 0000000000..9f142cd743 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-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: Saturate an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-zero-ref.html b/layout/reftests/svg/filters/css-filters/saturate-zero-ref.html new file mode 100644 index 0000000000..fd439a899c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-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: Desaturate an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <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/saturate-zero.html b/layout/reftests/svg/filters/css-filters/saturate-zero.html new file mode 100644 index 0000000000..0b281e017d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-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: Desaturate an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate"> + <link rel="match" href="saturate-zero-ref.html"> + <meta name="assert" + content="Given a factor of zero, the CSS saturate filter function should + completely desaturate an HTML element."> + <style type="text/css"> + #target { + filter: saturate(0); + background-color: rgb(255, 0, 0); + 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/saturate.html b/layout/reftests/svg/filters/css-filters/saturate.html new file mode 100644 index 0000000000..330464a643 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate.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: Saturate an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate"> + <link rel="match" href="saturate-ref.html"> + <meta name="assert" + content="The CSS saturate filter function should change the color of an + HTML element."> + <style type="text/css"> + #target { + filter: saturate(5); + background-color: rgb(0, 128, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/scale-filtered-content-01-ref.html b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01-ref.html new file mode 100644 index 0000000000..a212778d0d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01-ref.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Filtered content should be rendered in device space</title> + <style type="text/css"> + #filtered { + width: 100px; + height: 50px; + background-color: lime; + opacity: 0.5; + transform: translate(10px) scale(5); + transform-origin: 0 0; + } + .inner { + position: absolute; + background-color: blue; + width: 10px; + height:10px; + } + </style> +</head> +<body> + <p>You should see clear blue rects.</p> + <div id="filtered"> + <div class="inner" style="left:10px; top:10px;"></div> + <div class="inner" style="left:50px; top:20px;"></div> + <div class="inner" style="left:80px; top:30px;"></div> + </div> +</body> diff --git a/layout/reftests/svg/filters/css-filters/scale-filtered-content-01.html b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01.html new file mode 100644 index 0000000000..4546980179 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Filtered content should be rendered in device space</title> + <style type="text/css"> + #filtered { + width: 100px; + height: 50px; + background-color: lime; + filter: opacity(50%); + transform: translate(10px) scale(5); + transform-origin: 0 0; + } + .inner { + position: absolute; + background-color: blue; + width: 10px; + height:10px; + } + </style> +</head> +<body> + <p>You should see clear blue rects.</p> + <div id="filtered"> + <div class="inner" style="left:10px; top:10px;"></div> + <div class="inner" style="left:50px; top:20px;"></div> + <div class="inner" style="left:80px; top:30px;"></div> + </div> +</body> diff --git a/layout/reftests/svg/filters/css-filters/sepia-one-ref.html b/layout/reftests/svg/filters/css-filters/sepia-one-ref.html new file mode 100644 index 0000000000..c0f77edcbc --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-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: Apply Sepia to an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(99, 89, 69); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brown square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-one.html b/layout/reftests/svg/filters/css-filters/sepia-one.html new file mode 100644 index 0000000000..cad7d6fc93 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-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: Apply Sepia to an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia"> + <link rel="match" href="sepia-one-ref.html"> + <meta name="assert" + content="Given a factor of one, the CSS sepia filter function should + change the color of an HTML element to a brown hue."> + <style type="text/css"> + #target { + filter: sepia(1); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brown square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-over-one-ref.html b/layout/reftests/svg/filters/css-filters/sepia-over-one-ref.html new file mode 100644 index 0000000000..9863aa6466 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-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: Apply Sepia to an HTML Element Using a Factor Over One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(99, 89, 69); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brown square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-over-one.html b/layout/reftests/svg/filters/css-filters/sepia-over-one.html new file mode 100644 index 0000000000..6836fbbd5d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-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: Apply Sepia to an HTML Element Using a Factor Over One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia"> + <link rel="match" href="sepia-over-one-ref.html"> + <meta name="assert" + content="Given a factor over one, the CSS sepia filter function should + change the color of an HTML element to a brown hue."> + <style type="text/css"> + #target { + filter: sepia(1000); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brown square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-percent-ref.html b/layout/reftests/svg/filters/css-filters/sepia-percent-ref.html new file mode 100644 index 0000000000..47dea90f0c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-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: Apply Sepia to an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(167, 187, 115); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brownish green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-percent.html b/layout/reftests/svg/filters/css-filters/sepia-percent.html new file mode 100644 index 0000000000..f044a7771e --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-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: Apply Sepia to an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia"> + <link rel="match" href="sepia-percent-ref.html"> + <meta name="assert" + content="Given a percentage, the CSS sepia filter function should + change the color of an HTML element to a more brownish hue."> + <style type="text/css"> + #target { + filter: sepia(85%); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brownish green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-ref.html b/layout/reftests/svg/filters/css-filters/sepia-ref.html new file mode 100644 index 0000000000..e30ae8a859 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-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: Apply sepia to an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(167, 187, 115); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brownish green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-zero-ref.html b/layout/reftests/svg/filters/css-filters/sepia-zero-ref.html new file mode 100644 index 0000000000..4a358c45d5 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-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: Apply Sepia to an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <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/sepia-zero.html b/layout/reftests/svg/filters/css-filters/sepia-zero.html new file mode 100644 index 0000000000..720e22e15b --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-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: Apply Sepia to an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia"> + <link rel="match" href="sepia-zero-ref.html"> + <meta name="assert" + content="Given a factor of zero, the CSS sepia filter function should + not change the color of an HTML element."> + <style type="text/css"> + #target { + filter: sepia(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/sepia.html b/layout/reftests/svg/filters/css-filters/sepia.html new file mode 100644 index 0000000000..4af24919fa --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia.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: Apply sepia to an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia"> + <link rel="match" href="sepia-ref.html"> + <meta name="assert" + content="The CSS sepia filter function should change the color of an + HTML element to a more brownish hue."> + <style type="text/css"> + #target { + filter: sepia(0.85); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brownish green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter-ref.html new file mode 100644 index 0000000000..8c2a796d3c --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter-ref.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS and SVG Filter Chains: Clip Input CSS Filter with Following SVG Filter's Filter Region</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#blur) url(#clip-and-red-to-green); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur" x="-50" y="-50" width="200" height="200"> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + <!-- Use a small filter region that clips the blur extents. --> + <filter id="clip-and-red-to-green" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter.html b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter.html new file mode 100644 index 0000000000..2fcb027818 --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS and SVG Filter Chains: Clip Input CSS Filter with Following SVG Filter's Filter Region</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterEffectsRegion"> + <link rel="match" href="css-filter-first-ref.html"> + <meta name="assert" + content="An SVG filter's filter region should clip the input from a CSS + filter function."> + <style type="text/css"> + #target { + filter: blur(3px) url(#clip-and-red-to-green); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <!-- Use a small filter region that clips the blur extents. --> + <filter id="clip-and-red-to-green" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first-ref.html new file mode 100644 index 0000000000..838eeaf4b9 --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first-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 and SVG Filter Chains: CSS Filter as First Filter</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#blur-and-red-to-green); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur-and-red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- Blur the red square. --> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + <!-- Turn the red square into a green square. --> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first.html new file mode 100644 index 0000000000..d2e208dd6c --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS and SVG Filter Chains: CSS Filter as First Filter</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="css-filter-first-ref.html"> + <meta name="assert" + content="A filter chain starting with a CSS filter function followed by + an SVG reference filter should render correctly."> + <style type="text/css"> + #target { + filter: blur(3px) url(#red-to-green); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last-ref.html new file mode 100644 index 0000000000..c335d1683e --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last-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 and SVG Filter Chains: CSS Filter as Last Filter</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#red-to-green-and-blur); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="red-to-green-and-blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a green square. --> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + <!-- Blur the red square. --> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last.html new file mode 100644 index 0000000000..d4e00fb30e --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS and SVG Filter Chains: CSS Filter as Last Filter</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="css-filter-last-ref.html"> + <meta name="assert" + content="A filter chain starting with an SVG reference filter followed + by a CSS filter function should render correctly."> + <style type="text/css"> + #target { + filter: url(#red-to-green) blur(3px); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a green square. --> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle-ref.html new file mode 100644 index 0000000000..9340231a24 --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle-ref.html @@ -0,0 +1,38 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS and SVG Filter Chains: CSS Filter as Last Filter</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#magenta-to-green-and-blur); + background-color: #f0f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="magenta-to-green-and-blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- Turn the magenta square into a red square. --> + <feComponentTransfer color-interpolation-filters="sRGB"> + <feFuncR type="identity"/> + <feFuncG type="table" tableValues="0 0"/> + <feFuncB type="table" tableValues="0 0"/> + <feFuncA type="identity"/> + </feComponentTransfer> + <!-- Blur the red square. --> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + <!-- Turn the blurred red square into a blurred green square. --> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle.html new file mode 100644 index 0000000000..89020a641c --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS and SVG Filter Chains: CSS Filter as Middle Filter</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="css-filter-middle-ref.html"> + <meta name="assert" + content="A filter chain starting with an SVG reference filter, followed + by a CSS filter function, and followed by an SVG reference + filter should render correctly."> + <style type="text/css"> + #target { + filter: url(#magenta-to-red) blur(3px) url(#red-to-green); + background-color: #f0f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="magenta-to-red" color-interpolation-filters="sRGB"> + <feComponentTransfer> + <feFuncR type="identity"/> + <feFuncG type="table" tableValues="0 0"/> + <feFuncB type="table" tableValues="0 0"/> + <feFuncA type="identity"/> + </feComponentTransfer> + </filter> + <filter id="red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/reftest.list b/layout/reftests/svg/filters/css-svg-filter-chains/reftest.list new file mode 100644 index 0000000000..ac3ee0dc0b --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/reftest.list @@ -0,0 +1,8 @@ +# These tests verify that filter chains of combined CSS and SVG filters behave +# properly. +# e.g. filter: url(#f1) blur(3px) url(#2) grayscale(0.5); + +== clip-input-css-filter.html clip-input-css-filter-ref.html +fuzzy(0-1,0-288) == css-filter-first.html css-filter-first-ref.html +== css-filter-last.html css-filter-last-ref.html +== css-filter-middle.html css-filter-middle-ref.html diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-01.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-01.svg new file mode 100644 index 0000000000..ba8e5bb421 --- /dev/null +++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-01.svg @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=879682 --> + <script> + +var NS_SVG = 'http://www.w3.org/2000/svg'; + +function run_test() { + var gNode = document.createElementNS(NS_SVG, "g"); + gNode.setAttribute('filter', 'url(#filter)'); + + var rect = document.createElementNS(NS_SVG, 'rect'); + rect.setAttribute('width', '100'); + rect.setAttribute('height', '100'); + rect.setAttribute('fill', 'white'); + gNode.appendChild(rect); + + document.documentElement.appendChild(gNode); + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", run_test); +setTimeout(run_test, 4000); // fallback for running outside reftest + + </script> + <filter id="filter" x="20" y="20" width="100" height="100" + filterUnits="userSpaceOnUse" + primitiveUnits="userSpaceOnUse"> + <feFlood flood-color="lime"/> + </filter> + <rect width="100%" height="100%" fill="lime"/> + <rect x="20" y="20" width="100" height="100" fill="red"/> +</svg> diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-02.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-02.svg new file mode 100644 index 0000000000..b424e0734e --- /dev/null +++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-02.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="run_test();"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769942 --> + <script> + +function run_test() { + document.documentElement.getBoundingClientRect(); + document.getElementById("setFilterOnThis").setAttribute('filter', 'url(#filter)'); + document.documentElement.removeAttribute("class"); +} + + </script> + <filter id="filter" x="20%" y="20%" width="100%" height="100%"> + <feFlood flood-color="lime"/> + </filter> + <rect width="100%" height="100%" fill="lime"/> + <rect x="20" y="20" width="100" height="100" fill="red"/> + <rect width="100" height="100" fill="white" id="setFilterOnThis"/> +</svg> diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-03.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-03.svg new file mode 100644 index 0000000000..4fc7dc8857 --- /dev/null +++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-03.svg @@ -0,0 +1,30 @@ +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=488702 + --> + <title>Test that invalidation takes filters into account</title> + <desc> + This test checks that when a container element changes, the area of + the screen that is invalidated and repainted takes account of any + filter effects on the changed element. + </desc> + <script type="text/javascript">//<![CDATA[ + +function show_lime_rect() +{ + document.getElementById("g").setAttribute("opacity", "1"); + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", show_lime_rect, false); +setTimeout(show_lime_rect, 1000); + + //]]></script> + <filter id="filter" filterUnits="userSpaceOnUse" x="0" y="0" width="200%" height="100%"> + <feOffset dx="-20"/> + </filter> + <rect width="100%" height="100%" fill="red"/> + <g id="g" opacity="0" filter="url(#filter)"> + <rect x="20" width="100%" height="100%" fill="lime"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-04.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-04.svg new file mode 100644 index 0000000000..0e12e8d826 --- /dev/null +++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-04.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=488702 + --> + <title>Test that invalidation takes filters on ancestors into account</title> + <desc> + This test checks that when a container element changes, the area of + the screen that is invalidated and repainted takes account of any + filter effects on the ancestors of the changed element. + </desc> + <script type="text/javascript">//<![CDATA[ + +function show_lime_rect() +{ + document.getElementById("g").setAttribute("opacity", "1"); + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", show_lime_rect, false); +setTimeout(show_lime_rect, 1000); + + //]]></script> + <filter id="filter" filterUnits="userSpaceOnUse" x="0" y="0" width="200%" height="100%"> + <feOffset dx="-20"/> + </filter> + <rect width="100%" height="100%" fill="red"/> + <g filter="url(#filter)"> + <g id="g" opacity="0"> + <rect x="20" width="100%" height="100%" fill="lime"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/filters/dynamic-filtered-foreignObject-01.svg b/layout/reftests/svg/filters/dynamic-filtered-foreignObject-01.svg new file mode 100644 index 0000000000..2320f21cf6 --- /dev/null +++ b/layout/reftests/svg/filters/dynamic-filtered-foreignObject-01.svg @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769942 --> + <script> + +function run_test() { + var fO = document.getElementById("fO"); + fO.parentNode.removeChild(fO); + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", run_test); +setTimeout(run_test, 4000); // fallback for running outside reftest + + </script> + <filter id="filter" x="0" y="0" width="150" height="150" + filterUnits="userSpaceOnUse" + primitiveUnits="userSpaceOnUse"> + <feOffset dx="-50" dy="-50"/> + </filter> + <rect width="100%" height="100%" fill="lime"/> + <g filter="url(#filter)"> + <foreignObject id="fO" x="50" y="50" width="100" height="100"> + <div xmlns="http://www.w3.org/1999/xhtml" + style="display:block; width:100%; height:100%; background:red;"/> + </foreignObject> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feBlend-1-ref.svg b/layout/reftests/svg/filters/feBlend-1-ref.svg new file mode 100644 index 0000000000..24a6fdfd6a --- /dev/null +++ b/layout/reftests/svg/filters/feBlend-1-ref.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="0" y="0" width="50" height="50" fill="#DFB53F"/> +<rect x="50" y="0" width="50" height="50" fill="#B5B53F"/> +<rect x="100" y="0" width="50" height="50" fill="#DFDF3F"/> +<rect x="150" y="0" width="50" height="50" fill="#B5B53F"/> +<rect x="200" y="0" width="50" height="50" fill="#DFDF3F"/> +<rect x="250" y="0" width="50" height="50" fill="#B5DF3F"/> +<rect x="300" y="0" width="50" height="50" fill="#B5DF3F"/> +<rect x="350" y="0" width="50" height="50" fill="#B5DF3F"/> +<rect x="0" y="50" width="50" height="50" fill="#DFB53F"/> +<rect x="50" y="50" width="50" height="50" fill="#B5DF3F"/> +<rect x="100" y="50" width="50" height="50" fill="#DFDF3F"/> +<rect x="150" y="50" width="50" height="50" fill="#DFDF3F"/> +<rect x="200" y="50" width="50" height="50" fill="#DFC88E"/> +<rect x="250" y="50" width="50" height="50" fill="#B5DF3F"/> +<rect x="300" y="50" width="50" height="50" fill="#DFC88E"/> +<rect x="350" y="50" width="50" height="50" fill="#B5CC3F"/> +<rect x="0" y="100" width="50" height="50" fill="#DFB53F"/> +</svg> diff --git a/layout/reftests/svg/filters/feBlend-1.svg b/layout/reftests/svg/filters/feBlend-1.svg new file mode 100644 index 0000000000..6a94853f5b --- /dev/null +++ b/layout/reftests/svg/filters/feBlend-1.svg @@ -0,0 +1,104 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"> +<filter id="f0" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="normal"/> +</filter> +<rect x="0" y="0" width="50" height="50" filter="url(#f0)"/> +<filter id="f1" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="multiply"/> +</filter> +<rect x="50" y="0" width="50" height="50" filter="url(#f1)"/> +<filter id="f2" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="screen"/> +</filter> +<rect x="100" y="0" width="50" height="50" filter="url(#f2)"/> +<filter id="f3" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="darken"/> +</filter> +<rect x="150" y="0" width="50" height="50" filter="url(#f3)"/> +<filter id="f4" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="lighten"/> +</filter> +<rect x="200" y="0" width="50" height="50" filter="url(#f4)"/> +<filter id="f5" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="overlay"/> +</filter> +<rect x="250" y="0" width="50" height="50" filter="url(#f5)"/> +<filter id="f6" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="color-dodge"/> +</filter> +<rect x="300" y="0" width="50" height="50" filter="url(#f6)"/> +<filter id="f7" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="color-burn"/> +</filter> +<rect x="350" y="0" width="50" height="50" filter="url(#f7)"/> +<filter id="f8" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="hard-light"/> +</filter> +<rect x="0" y="50" width="50" height="50" filter="url(#f8)"/> +<filter id="f9" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="soft-light"/> +</filter> +<rect x="50" y="50" width="50" height="50" filter="url(#f9)"/> +<filter id="f10" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="difference"/> +</filter> +<rect x="100" y="50" width="50" height="50" filter="url(#f10)"/> +<filter id="f11" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="exclusion"/> +</filter> +<rect x="150" y="50" width="50" height="50" filter="url(#f11)"/> +<filter id="f12" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="hue"/> +</filter> +<rect x="200" y="50" width="50" height="50" filter="url(#f12)"/> +<filter id="f13" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="saturation"/> +</filter> +<rect x="250" y="50" width="50" height="50" filter="url(#f13)"/> +<filter id="f14" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="color"/> +</filter> +<rect x="300" y="50" width="50" height="50" filter="url(#f14)"/> +<filter id="f15" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="luminosity"/> +</filter> +<rect x="350" y="50" width="50" height="50" filter="url(#f15)"/> +<filter id="f16" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="undefined"/> +</filter> +<rect x="0" y="100" width="50" height="50" filter="url(#f16)"/> +</svg> diff --git a/layout/reftests/svg/filters/feBlend-2-ref.svg b/layout/reftests/svg/filters/feBlend-2-ref.svg new file mode 100644 index 0000000000..6b62e6a270 --- /dev/null +++ b/layout/reftests/svg/filters/feBlend-2-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +<rect x="150" y="0" width="100" height="100" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feBlend-2.svg b/layout/reftests/svg/filters/feBlend-2.svg new file mode 100644 index 0000000000..c03e665d20 --- /dev/null +++ b/layout/reftests/svg/filters/feBlend-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feFlood flood-color="#ff0000" result="flood" x="0" y="0" width="100" height="100"/> + <feBlend mode="normal" in="SourceGraphic" in2="flood"/> +</filter> +<rect x="0" y="0" width="100" height="100" fill="#00ff00" filter="url(#f1)"/> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1181317 --> +<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feFlood flood-color="#ff0000" result="red" x="150" y="0" + width="100" height="100"/> + <feBlend mode="hard-light" in="SourceGraphic" in2="red"/> +</filter> +<rect x="150" y="0" width="100" height="100" fill="#00ff00" filter="url(#f2)"/> + +</svg> diff --git a/layout/reftests/svg/filters/feColorMatrix-1-ref.svg b/layout/reftests/svg/filters/feColorMatrix-1-ref.svg new file mode 100644 index 0000000000..f7328b21ef --- /dev/null +++ b/layout/reftests/svg/filters/feColorMatrix-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="10" width="80" height="80" fill="#345612" fill-opacity="0.5"/> + +</svg> diff --git a/layout/reftests/svg/filters/feColorMatrix-1.svg b/layout/reftests/svg/filters/feColorMatrix-1.svg new file mode 100644 index 0000000000..4cfd34cc4c --- /dev/null +++ b/layout/reftests/svg/filters/feColorMatrix-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0%" y="0%" width="100%" height="100%"> + <feColorMatrix type="matrix" values="0 1 0 0 0 0 0 1 0 0 1 0 0 0 0 0 0 0 0.5 0" + x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"/> +</filter> +<rect x="0" y="0" width="100" height="100" fill="#123456" filter="url(#f1)"/> + +</svg> diff --git a/layout/reftests/svg/filters/feColorMatrix-2-ref.svg b/layout/reftests/svg/filters/feColorMatrix-2-ref.svg new file mode 100644 index 0000000000..f155cd01f4 --- /dev/null +++ b/layout/reftests/svg/filters/feColorMatrix-2-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="0" y="0" width="100" height="100" fill="#345612" fill-opacity="0.5"/> + +</svg> diff --git a/layout/reftests/svg/filters/feColorMatrix-2.svg b/layout/reftests/svg/filters/feColorMatrix-2.svg new file mode 100644 index 0000000000..08c7b04122 --- /dev/null +++ b/layout/reftests/svg/filters/feColorMatrix-2.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feColorMatrix type="matrix" values="0 1 0 0 0 0 0 1 0 0 1 0 0 0 0 0 0 0 0.5 0" + style="color-interpolation-filters:sRGB"/> +</filter> +<rect x="0" y="0" width="100" height="100" fill="#123456" filter="url(#f1)"/> + +</svg> diff --git a/layout/reftests/svg/filters/feColorMatrix-saturate-01.svg b/layout/reftests/svg/filters/feColorMatrix-saturate-01.svg new file mode 100644 index 0000000000..7961889798 --- /dev/null +++ b/layout/reftests/svg/filters/feColorMatrix-saturate-01.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for Filter Effects Module Level 1 over-saturation</title> + + <defs> + <filter id="SaturateHigh"> + <feColorMatrix in="SourceGraphic" type="saturate" values="11"/> + </filter> + </defs> + + <rect width="100%" height="100%" fill="#00A654" filter="url(#SaturateHigh)"/> +</svg> diff --git a/layout/reftests/svg/filters/feComponentTransfer-03.svg b/layout/reftests/svg/filters/feComponentTransfer-03.svg new file mode 100644 index 0000000000..d4ee019848 --- /dev/null +++ b/layout/reftests/svg/filters/feComponentTransfer-03.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase for feComponentTransfer with default arguments for gamma and linear</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=534841 --> + <defs> + <filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="100%" height="100%"> + <feComponentTransfer x="0" y="0" width="100%" height="100%" + style="color-interpolation-filters:sRGB"> + <feFuncR type="identity"/> + <feFuncG type="gamma"/> + <feFuncB type="identity"/> + <feFuncA type="linear"/> + </feComponentTransfer> + </filter> + </defs> + <rect x="0" y="0" width="100%" height="100%" fill="lime" filter="url(#f1)"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComponentTransfer-04.svg b/layout/reftests/svg/filters/feComponentTransfer-04.svg new file mode 100644 index 0000000000..bc470d5f30 --- /dev/null +++ b/layout/reftests/svg/filters/feComponentTransfer-04.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase for feComponentTransfer with single discrete value</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=845985 --> + <defs> + <filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="100%" height="100%"> + <feComponentTransfer x="0" y="0" width="100%" height="100%" + in="SourceAlpha" style="color-interpolation-filters:sRGB"> + <feFuncG type="discrete" tableValues="1" /> + </feComponentTransfer> + </filter> + </defs> + <rect x="0" y="0" width="100%" height="100%" fill="red" filter="url(#f1)"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComponentTransfer-1-ref.svg b/layout/reftests/svg/filters/feComponentTransfer-1-ref.svg new file mode 100644 index 0000000000..cb579e5fd1 --- /dev/null +++ b/layout/reftests/svg/filters/feComponentTransfer-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="10" width="80" height="80" fill="#00ffff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComponentTransfer-1.svg b/layout/reftests/svg/filters/feComponentTransfer-1.svg new file mode 100644 index 0000000000..6acdb7b567 --- /dev/null +++ b/layout/reftests/svg/filters/feComponentTransfer-1.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer x="10%" y="10%" width="80%" height="80%" + style="color-interpolation-filters:sRGB"> + <feFuncR type="table" tableValues="1 0 0 1"/> + <feFuncG type="discrete" tableValues="0 1 0"/> + <feFuncB type="linear" slope="0.5" intercept="0.75"/> + <feFuncA type="identity"/> + </feComponentTransfer> +</filter> +<rect x="0" y="0" width="100" height="100" fill="#808080" filter="url(#f1)"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComponentTransfer-2-ref.svg b/layout/reftests/svg/filters/feComponentTransfer-2-ref.svg new file mode 100644 index 0000000000..bf9d547d17 --- /dev/null +++ b/layout/reftests/svg/filters/feComponentTransfer-2-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="0" y="0" width="100" height="100" fill="#00ffff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComponentTransfer-2.svg b/layout/reftests/svg/filters/feComponentTransfer-2.svg new file mode 100644 index 0000000000..3514ec92f4 --- /dev/null +++ b/layout/reftests/svg/filters/feComponentTransfer-2.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feComponentTransfer + style="color-interpolation-filters:sRGB"> + <feFuncR type="table" tableValues="1 0 0 1"/> + <feFuncG type="discrete" tableValues="0 1 0"/> + <feFuncB type="linear" slope="0.5" intercept="0.75"/> + <feFuncA type="identity"/> + </feComponentTransfer> +</filter> +<rect x="0" y="0" width="100" height="100" fill="#808080" filter="url(#f1)"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComposite-1-ref.svg b/layout/reftests/svg/filters/feComposite-1-ref.svg new file mode 100644 index 0000000000..97b56241b3 --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-1-ref.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="10" width="40" height="80" fill="#00ff00"/> +<rect x="10" y="10" width="40" height="80" fill="#ff0000" opacity="0.5"/> +<rect x="50" y="10" width="40" height="80" fill="#ff0000" opacity="0.5"/> + +<rect x="110" y="10" width="40" height="80" fill="#ff0000"/> + +<rect x="250" y="10" width="40" height="80" fill="#ff0000"/> + +<rect x="310" y="10" width="40" height="80" fill="#00ff00"/> +<rect x="310" y="10" width="40" height="80" fill="#ff0000" opacity="0.5"/> + +<rect x="450" y="10" width="40" height="80" fill="#ff0000"/> + +<rect x="510" y="10" width="40" height="80" fill="#ffff00"/> +<rect x="550" y="10" width="40" height="80" fill="#ff0000"/> + +<rect x="0" y="100" width="100" height="100" fill="#000000"/> +<rect x="10" y="110" width="80" height="80" fill="#ffffff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComposite-1.svg b/layout/reftests/svg/filters/feComposite-1.svg new file mode 100644 index 0000000000..a1dfacc774 --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-1.svg @@ -0,0 +1,82 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood"/> + <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + in="flood" operator="over" in2="SourceGraphic"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="50" height="100" fill="#00ff00"/> + <rect x="50" y="0" width="50" height="100" fill="#00ff00" opacity="0"/> +</g> + +<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" result="flood"/> + <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + in="flood" operator="in" in2="SourceGraphic"/> +</filter> +<g filter="url(#f2)"> + <rect x="100" y="0" width="50" height="100" fill="#00ff00"/> + <rect x="150" y="0" width="50" height="100" fill="#00ff00" opacity="0"/> +</g> + +<filter id="f3" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" result="flood"/> + <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + in="flood" operator="out" in2="SourceGraphic"/> +</filter> +<g filter="url(#f3)"> + <rect x="200" y="0" width="50" height="100" fill="#00ff00"/> + <rect x="250" y="0" width="50" height="100" fill="#00ff00" opacity="0"/> +</g> + +<filter id="f4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood"/> + <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + in="flood" operator="atop" in2="SourceGraphic"/> +</filter> +<g filter="url(#f4)"> + <rect x="300" y="0" width="50" height="100" fill="#00ff00"/> + <rect x="350" y="0" width="50" height="100" fill="#00ff00" opacity="0"/> +</g> + +<filter id="f5" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" result="flood"/> + <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + in="flood" operator="xor" in2="SourceGraphic"/> +</filter> +<g filter="url(#f5)"> + <rect x="400" y="0" width="50" height="100" fill="#00ff00"/> + <rect x="450" y="0" width="50" height="100" fill="#00ff00" opacity="0"/> +</g> + +<filter id="f6" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" result="flood"/> + <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + in="flood" operator="arithmetic" in2="SourceGraphic" + k2="1" k3="1"/> +</filter> +<g filter="url(#f6)"> + <rect x="500" y="0" width="50" height="100" fill="#00ff00"/> + <rect x="550" y="0" width="50" height="100" fill="#00ff00" opacity="0"/> +</g> + +<!-- Test the tricky case where the arithmetic operator leads to drawing outside + the bounding box of the source images --> +<filter id="f7" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" + x="0" y="100" width="100" height="100"> + <feComposite x="10" y="110" width="80" height="80" style="color-interpolation-filters:sRGB" + in="SourceGraphic" operator="arithmetic" in2="SourceGraphic" + k4="1"/> +</filter> +<rect x="0" y="100" width="100" height="100" fill="#000000"/> +<g filter="url(#f7)"> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feComposite-2-ref.svg b/layout/reftests/svg/filters/feComposite-2-ref.svg new file mode 100644 index 0000000000..464b6de23b --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-2-ref.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="0" y="0" width="50" height="100" fill="#00ff00"/> +<rect x="0" y="0" width="50" height="100" fill="#ff0000" opacity="0.5"/> +<rect x="50" y="0" width="50" height="100" fill="#ff0000" opacity="0.5"/> + +<rect x="100" y="0" width="50" height="100" fill="#808080"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComposite-2.svg b/layout/reftests/svg/filters/feComposite-2.svg new file mode 100644 index 0000000000..e43088ea84 --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-2.svg @@ -0,0 +1,27 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood" x="0" y="0" width="100" height="100"/> + <feComposite style="color-interpolation-filters:sRGB" + in="flood" operator="over" in2="SourceGraphic"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="50" height="100" fill="#00ff00"/> + <rect x="50" y="0" width="50" height="100" fill="#00ff00" opacity="0"/> +</g> + +<!-- Test that the arithmetic operator actually clamp the result --> +<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" style="color-interpolation-filters:sRGB"> + <feFlood flood-color="#ffffff" result="flood" x="100" y="0" width="50" height="100"/> + <feComposite result="c" in="SourceGraphic" in2="flood" operator="arithmetic" k2="1" k3="1"/> + <feComponentTransfer in="c"> + <feFuncR type="linear" slope="0.5"/> + <feFuncG type="linear" slope="0.5"/> + <feFuncB type="linear" slope="0.5"/> + </feComponentTransfer> +</filter> +<g filter="url(#f2)"> + <rect x="100" y="0" width="50" height="100" fill="#ff0000"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feComposite-arguments-01.svg b/layout/reftests/svg/filters/feComposite-arguments-01.svg new file mode 100644 index 0000000000..acec685ffc --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-arguments-01.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="filter"> + <feFlood flood-color="lime" result="flood1"/> + <feFlood flood-color="red" result="flood2"/> + <feComposite in="flood1" in2="flood2" + operator="arithmetic" k1="0" k2="1" k3="0" k4="0" /> + </filter> + </defs> + <rect width="100%" height="100%" fill="yellow" filter="url(#filter)"/> +</svg> + diff --git a/layout/reftests/svg/filters/feComposite-operator-lighter-ref.html b/layout/reftests/svg/filters/feComposite-operator-lighter-ref.html new file mode 100644 index 0000000000..561ade1582 --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-operator-lighter-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<style>* { margin: 0; padding: 0; }</style> +<canvas id="canvas" width="200" height="200"></canvas> +<script> +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var width = canvas.width; +var height = canvas.height; + +ctx.globalCompositeOperation = 'lighter'; +ctx.fillStyle = '#f00'; +ctx.fillRect(0,0,width,height); + +gradient = ctx.createLinearGradient(0, 0, 0, height); +gradient.addColorStop(0, "#0f0"); +gradient.addColorStop(1, "#00f"); +ctx.fillStyle = gradient; +ctx.fillRect(0, 0, width, height); +</script> diff --git a/layout/reftests/svg/filters/feComposite-operator-lighter.svg b/layout/reftests/svg/filters/feComposite-operator-lighter.svg new file mode 100644 index 0000000000..74a969d1ba --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-operator-lighter.svg @@ -0,0 +1,11 @@ +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + <filter id="f" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB"> + <feFlood flood-color="red"/> + <feComposite operator="lighter" in2="SourceGraphic"/> + </filter> + <linearGradient id="g2b" x1="0" x2="0" y1="0" y2="1"> + <stop offset="0" stop-color="#0f0"/> + <stop offset="1" stop-color="#00f"/> + </linearGradient> + <rect width="200" height="200" fill="url(#g2b)" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/filters/feComposite-paint-01-ref.svg b/layout/reftests/svg/filters/feComposite-paint-01-ref.svg new file mode 100644 index 0000000000..eb0e773d3a --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-paint-01-ref.svg @@ -0,0 +1,9 @@ +<svg id="svg-root" width="100%" height="100%" + viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" shape-rendering="crispEdges"> + + <rect transform="translate(100 30)" fill="lime" width="120" height="120"/> + <rect transform="translate(249 29)" width="122" height="122" fill="#80FF80"/> + <rect transform="translate(99 179)" width="122" height="122" fill="#666"/> + <rect transform="translate(249 179)" width="122" height="122" fill="rgb(0,255,255)"/> +</svg> diff --git a/layout/reftests/svg/filters/feComposite-paint-01.svg b/layout/reftests/svg/filters/feComposite-paint-01.svg new file mode 100644 index 0000000000..c6c2aac2e8 --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-paint-01.svg @@ -0,0 +1,35 @@ +<svg id="svg-root" width="100%" height="100%" + viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" shape-rendering="crispEdges"> + <defs> + <filter id="composite-ident" x="0" y="0" width="1" height="1"> + <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="1" k3="-1" k4="0"/> + </filter> + <filter id="composite-negative" x="0" y="0" width="1" height="1"> + <feComposite operator="arithmetic" in="FillPaint" in2="FillPaint" k1="0" k2="2" k3="-1.5" k4="0"/> + </filter> + <filter id="composite-mixed" x="0" y="0" width="1" height="1"> + <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="1" k2="-0.5" k3="0.2" k4="-0.1"/> + </filter> + <filter id="composite-clamped" x="0" y="0" width="1" height="1"> + <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="10" k3="20" k4="0"/> + </filter> + </defs> + + <g transform="translate(100 30)"> + <rect fill="lime" width="120" height="120"/> + <rect fill="red" stroke="red" filter="url(#composite-ident)" x="10" y="10" width="100" height="100"/> + </g> + <g transform="translate(250 30)"> + <rect fill="#0F0" filter="url(#composite-negative)" x="10" y="10" width="100" height="100"/> + <rect stroke="#80FF80" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/> + </g> + <g transform="translate(100 180)"> + <rect fill="rgb(43,17,12)" stroke="rgb(32,42,37)" filter="url(#composite-mixed)" x="10" y="10" width="100" height="100"/> + <rect stroke="#666" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/> + </g> + <g transform="translate(250 180)"> + <rect fill="rgb(0,127,0)" stroke="rgb(0,0,127)" filter="url(#composite-clamped)" x="10" y="10" width="100" height="100"/> + <rect stroke="rgb(0,255,255)" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-1-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-1-ref.svg new file mode 100644 index 0000000000..60474fb6b2 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-1-ref.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="48" y="10" width="1" height="80" fill="#00ff00"/> +<rect x="51" y="10" width="1" height="80" fill="#00ff00"/> + +<rect x="249" y="10" width="2" height="80" fill="#000000"/> + +<rect x="349" y="10" width="2" height="80" fill="#000000"/> + +<rect x="1" y="100" width="1" height="100" fill="#00ff00"/> +<rect x="99" y="100" width="1" height="100" fill="#00ff00"/> + +<rect x="101" y="100" width="1" height="100" fill="#ff0000"/> + +<rect x="201" y="100" width="1" height="100" fill="#0000ff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-1.svg b/layout/reftests/svg/filters/feConvolveMatrix-1.svg new file mode 100644 index 0000000000..8bdc267d71 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-1.svg @@ -0,0 +1,75 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" in="SourceGraphic"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00" opacity="0"/> + <rect x="49" y="0" width="2" height="100" fill="#00ff00"/> +</g> + +<!-- can't figure out a good way to test kernelUnitLength +<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + order="3" kernelUnitLength="0.1" kernelMatrix="0 1 0 1 -4 1 0 1 0" in="SourceGraphic"/> +</filter> +<g filter="url(#f2)"> + <rect x="100" y="0" width="100" height="100" fill="#00ff00" opacity="0"/> + <rect x="140" y="0" width="20" height="100" fill="#00ff00"/> +</g> +--> + +<filter id="f3" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" bias="-1" preserveAlpha="true" in="SourceGraphic"/> +</filter> +<g filter="url(#f3)"> + <rect x="200" y="0" width="100" height="100" fill="#00ff00" opacity="0"/> + <rect x="249" y="0" width="2" height="100" fill="#00ff00"/> +</g> + +<filter id="f4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" divisor="100000" preserveAlpha="true" in="SourceGraphic"/> +</filter> +<g filter="url(#f4)"> + <rect x="300" y="0" width="100" height="100" fill="#00ff00" opacity="0"/> + <rect x="349" y="0" width="2" height="100" fill="#00ff00"/> +</g> + +<filter id="f5" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feConvolveMatrix style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" edgeMode="wrap" in="SourceGraphic"/> +</filter> +<g filter="url(#f5)"> + <rect x="0" y="100" width="100" height="100" fill="#00ff00" opacity="0"/> + <rect x="0" y="100" width="1" height="100" fill="#00ff00"/> +</g> + +<filter id="f6" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feConvolveMatrix style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" edgeMode="duplicate" in="SourceGraphic"/> +</filter> +<g filter="url(#f6)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00" opacity="0"/> + <rect x="100" y="100" width="1" height="100" fill="#ff0000"/> +</g> + +<filter id="f7" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feConvolveMatrix style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" edgeMode="none" in="SourceGraphic"/> +</filter> +<g filter="url(#f7)"> + <rect x="200" y="100" width="100" height="100" fill="#00ff00" opacity="0"/> + <rect x="200" y="100" width="1" height="100" fill="#0000ff"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-2-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-2-ref.svg new file mode 100644 index 0000000000..5b4ba420a1 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-2-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="48" y="0" width="1" height="500" fill="#00ff00"/> +<rect x="51" y="0" width="1" height="500" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-2.svg b/layout/reftests/svg/filters/feConvolveMatrix-2.svg new file mode 100644 index 0000000000..a804320863 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-2.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feConvolveMatrix style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" in="SourceGraphic"/> +</filter> +<g filter="url(#f1)"> + <rect x="49" y="0" width="2" height="10000" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-bias-01-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-bias-01-ref.svg new file mode 100644 index 0000000000..c3c0805595 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-bias-01-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference for feConvolveMatrix with bias</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=527325 --> + <rect x="0" y="0" width="100" height="100" fill="rgb(128,255,128)"/> +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-bias-01.svg b/layout/reftests/svg/filters/feConvolveMatrix-bias-01.svg new file mode 100644 index 0000000000..fe96b0b348 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-bias-01.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for feConvolveMatrix with bias</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=527325 --> + <defs> + <filter id="filter" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" style="color-interpolation-filters: sRGB"> + <feConvolveMatrix kernelMatrix="1 1 1 1 1 1 1 1 1" bias="0.5"/> + </filter> + </defs> + <rect x="0" y="0" width="100" height="100" fill="rgb(0,255,0)" filter="url(#filter)"/> +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-order-01-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-order-01-ref.svg new file mode 100644 index 0000000000..957c65e577 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-order-01-ref.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="convoluted_lime" x="0%" y="0%" width="100%" height="100%"> + <feFlood flood-color="lime"/> + <feConvolveMatrix order="3" kernelMatrix=" + 0 0 0 + 0 1 0 + 0 0 0"/> + </filter> + </defs> + <rect x="30" y="30" width="97" height="60" filter="url(#convoluted_lime)"/> +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-order-01.svg b/layout/reftests/svg/filters/feConvolveMatrix-order-01.svg new file mode 100644 index 0000000000..6d0d116e77 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-order-01.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> + <desc> + <html:p>When the 'order' attribute of feConvolveMatrix is + omitted the effect is the same as if the value "3" were given. + Per <html:a href="https://bugzilla.mozilla.org/show_bug.cgi?id=478570">Bug 478570</html:a> + discussion and linked spec errata.</html:p> + </desc> + <defs> + <filter id="convoluted_lime" x="0%" y="0%" width="100%" height="100%"> + <feFlood flood-color="lime"/> + <feConvolveMatrix kernelMatrix=" + 0 0 0 + 0 1 0 + 0 0 0"/> + </filter> + </defs> + <rect x="30" y="30" width="97" height="60" fill="red" filter="url(#convoluted_lime)"/> +</svg> diff --git a/layout/reftests/svg/filters/feDiffuseLighting-1-ref.svg b/layout/reftests/svg/filters/feDiffuseLighting-1-ref.svg new file mode 100644 index 0000000000..efdf453903 --- /dev/null +++ b/layout/reftests/svg/filters/feDiffuseLighting-1-ref.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> + <image width='100' height='100' + xlink:href="data:image/png;base64, +iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI +WXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH3wkbDDIilL5aRAAAAB1pVFh0Q29tbWVudAAAAAAAQ3Jl +YXRlZCB3aXRoIEdJTVBkLmUHAAAA9UlEQVR42u3csRHDIBBFwbPHddADiqmEduhFlSiWelBOSirX +YFsB49lXAMHf4DIeEXGFpqi1Fk8zzFPOGchsAQEiIEAEBIiAABEQIAIiIEAEBIiAAPmgUkosy2LV +H3rd+VitNXrvse+7ZWcASSlFSsmqbggQAQEiIAICRECACAgQAQEiIEAERECACAgQAQEiIEAERECA +CAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAfnHbv3Z+jzP6L1bdRaQdV1j +jGHVWUC2bbOoGwJEQIAIiIAAERAgAgJEQIAIiIAAERAg+qrjOOINBcEbJFN4kugAAAAASUVORK5C +YII="/> +</svg> diff --git a/layout/reftests/svg/filters/feDiffuseLighting-1.svg b/layout/reftests/svg/filters/feDiffuseLighting-1.svg new file mode 100644 index 0000000000..8c5f49b101 --- /dev/null +++ b/layout/reftests/svg/filters/feDiffuseLighting-1.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'> + <!-- + A basic test for the <feDiffuseLighting> filter primitive. + Setting kernelUnitLength on the <feDiffuseLighting> should allow us to + assume pixel perfection. + --> + <filter id='f' x='0' y='0' width='1' height='1'> + <feDiffuseLighting kernelUnitLength='1'> + <feDistantLight/> + </feDiffuseLighting> + </filter> + <path d='M0,0 h100 v100 h-100 z M20,20 v60 h60 v-60 z' filter='url(#f)'/> +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-1-ref.svg b/layout/reftests/svg/filters/feDisplacementMap-1-ref.svg new file mode 100644 index 0000000000..8ac9dff0be --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="50" width="40" height="40" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-1.svg b/layout/reftests/svg/filters/feDisplacementMap-1.svg new file mode 100644 index 0000000000..5061bbe053 --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-1.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" result="flood"/> + <feDisplacementMap x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + in="SourceGraphic" in2="flood" scale="1" xChannelSelector="R" yChannelSelector="G"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-2-ref.svg b/layout/reftests/svg/filters/feDisplacementMap-2-ref.svg new file mode 100644 index 0000000000..3665d027bc --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-2-ref.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="0" y="50" width="50" height="50" fill="#00ff00"/> +<rect x="100" y="50" width="50" height="50" fill="#00ff00"/> +<rect x="50" y="100" width="100" height="50" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-2.svg b/layout/reftests/svg/filters/feDisplacementMap-2.svg new file mode 100644 index 0000000000..29a7224b86 --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-2.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feFlood flood-color="#ff0000" result="flood" x="0" y="0" width="100" height="100"/> + <feDisplacementMap style="color-interpolation-filters:sRGB" + in="SourceGraphic" in2="flood" scale="100" xChannelSelector="R" yChannelSelector="G"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-alpha-01.svg b/layout/reftests/svg/filters/feDisplacementMap-alpha-01.svg new file mode 100644 index 0000000000..6933b78f2b --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-alpha-01.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase for feDisplacementMap processing in2 with premultiplied colour values</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=584322 --> + <defs> + <filter id="f1"> + <feTurbulence baseFrequency="0.1" type="fractalNoise" result="result1"/> + <feDisplacementMap id="feDisplacementMap" in2="result1" + xChannelSelector="G" yChannelSelector="G" + scale="50" in="SourceGraphic"/> + </filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <g transform="translate(100,100)"> + <circle cx="0" cy="0" r="60" fill="red" filter="url('#f1')"/> + <circle cx="0" cy="0" r="80" fill="lime"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-colour-01-ref.svg b/layout/reftests/svg/filters/feDisplacementMap-colour-01-ref.svg new file mode 100644 index 0000000000..2edd897b72 --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-colour-01-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference for feDisplacementMap processing in1 with linearRGB colours</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=603584 --> + + <rect width="100%" height="100%" fill="#ea2"/> +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-colour-01.svg b/layout/reftests/svg/filters/feDisplacementMap-colour-01.svg new file mode 100644 index 0000000000..6c8b1cb34e --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-colour-01.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase for feDisplacementMap processing in1 with linearRGB colours</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=603584 --> + <defs> + <filter id="sponge"> + <feTurbulence baseFrequency="0.1" type="fractalNoise" result="result1"/> + <feDisplacementMap id="feDisplacementMap" in2="result1" xChannelSelector="G" yChannelSelector="G" scale="50" in="SourceGraphic"/> + </filter> + </defs> + + <!-- we can't use our usual lime here as that's the same colour in both colour spaces --> + <rect width="100%" height="100%" fill="#ea2"/> + <rect stroke="none" style="filter:url(#sponge)" x="50" y="50" width="100" height="100" fill="#ea2" /> +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-scale-01.svg b/layout/reftests/svg/filters/feDisplacementMap-scale-01.svg new file mode 100644 index 0000000000..0b2231e974 --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-scale-01.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that directionless filter primitive attributes are resolved to user units correctly</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=619967 --> + <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="200" color-interpolation-filters="sRGB"> + <feFlood flood-color="#800" result="map"/> + <feDisplacementMap in="SourceGraphic" in2="map" xChannelSelector="R" yChannelSelector="G" scale="100"/> + </filter> + <rect width="100%" height="100%" fill="lime"/> + <rect y="82" width="300" height="8" fill="red"/> + <rect width="400" height="200" fill="lime" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/filters/feDropShadow-01-ref.svg b/layout/reftests/svg/filters/feDropShadow-01-ref.svg new file mode 100644 index 0000000000..47058f256f --- /dev/null +++ b/layout/reftests/svg/filters/feDropShadow-01-ref.svg @@ -0,0 +1,68 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Reference for Filter Effects Module Level 1 feDropShadow</title> + + <defs> + <filter id="dropShadow1"> + <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> + <feOffset dx="2" dy="2" result="offsetblur"/> + <feFlood flood-color="green"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <filter id="dropShadow2"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + <feOffset dx="-2" dy="-5" result="offsetblur"/> + <feFlood flood-color="green"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <filter id="dropShadow3"> + <feGaussianBlur in="SourceAlpha" stdDeviation="2 5"/> + <feOffset dx="5" dy="5" result="offsetblur"/> + <feFlood flood-color="green" flood-opacity="0.2"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <filter id="dropShadow4" color-interpolation-filters="sRGB"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + <feOffset dx="5" dy="5" result="offsetblur"/> + <feFlood flood-color="green"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <filter id="dropShadow5"> + <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> + <feOffset dx="2" dy="2" result="offsetblur"/> + <feFlood flood-color="green"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceAlpha"/> + </feMerge> + </filter> + </defs> + <g fill="yellow" transform="translate(10,10)"> + <circle cx="75" cy="75" r="70" filter="url(#dropShadow1)" /> + <circle cx="250" cy="75" r="70" filter="url(#dropShadow2)" /> + <circle cx="425" cy="75" r="70" filter="url(#dropShadow3)" /> + <circle cx="600" cy="75" r="70" filter="url(#dropShadow4)" /> + <circle cx="75" cy="250" r="70" filter="url(#dropShadow5)" /> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feDropShadow-01.svg b/layout/reftests/svg/filters/feDropShadow-01.svg new file mode 100644 index 0000000000..847b878fbc --- /dev/null +++ b/layout/reftests/svg/filters/feDropShadow-01.svg @@ -0,0 +1,43 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for Filter Effects Module Level 1 feDropShadow</title> + + <defs> + <!-- check default values --> + <filter id="dropShadow1"> + <feDropShadow flood-color="green"/> + </filter> + <!-- check negative dx, dy --> + <filter id="dropShadow2"> + <feDropShadow stdDeviation="5" dx="-2" dy="-5" flood-color="green"/> + </filter> + <!-- check flood-opacity and non-default values --> + <filter id="dropShadow3"> + <feDropShadow stdDeviation="2 5" dx="5" dy="5" flood-color="green" flood-opacity="0.2"/> + </filter> + <!-- check sRGB --> + <filter id="dropShadow4" color-interpolation-filters="sRGB"> + <feDropShadow stdDeviation="5" dx="5" dy="5" flood-color="green"/> + </filter> + <!-- check sourceAlpha input --> + <filter id="dropShadow5"> + <feDropShadow in="SourceAlpha" flood-color="green"/> + </filter> + <!-- check negative stdDeviation (should not display anything) --> + <filter id="dropShadow6"> + <feDropShadow stdDeviation="-2" flood-color="green"/> + </filter> + </defs> + <g fill="yellow" transform="translate(10,10)"> + <circle cx="75" cy="75" r="70" filter="url(#dropShadow1)" /> + <circle cx="250" cy="75" r="70" filter="url(#dropShadow2)" /> + <circle cx="425" cy="75" r="70" filter="url(#dropShadow3)" /> + <circle cx="600" cy="75" r="70" filter="url(#dropShadow4)" /> + <circle cx="75" cy="250" r="70" filter="url(#dropShadow5)" /> + <circle cx="250" cy="250" r="70" filter="url(#dropShadow6)" /> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feFlood-1-ref.svg b/layout/reftests/svg/filters/feFlood-1-ref.svg new file mode 100644 index 0000000000..3cc5e99005 --- /dev/null +++ b/layout/reftests/svg/filters/feFlood-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="10" width="80" height="80" fill="#00ff00" opacity="0.5"/> + +</svg> diff --git a/layout/reftests/svg/filters/feFlood-1.svg b/layout/reftests/svg/filters/feFlood-1.svg new file mode 100644 index 0000000000..1a11222682 --- /dev/null +++ b/layout/reftests/svg/filters/feFlood-1.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood x="10%" y="10%" width="80%" height="80%" flood-color="#00ff00" flood-opacity="0.5"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00" opacity="0"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feFlood-2-ref.svg b/layout/reftests/svg/filters/feFlood-2-ref.svg new file mode 100644 index 0000000000..cb122fd129 --- /dev/null +++ b/layout/reftests/svg/filters/feFlood-2-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<rect x="0" y="0" width="100%" height="100%" fill="#00ff00" opacity="0.5"/> + +</svg> diff --git a/layout/reftests/svg/filters/feFlood-2.svg b/layout/reftests/svg/filters/feFlood-2.svg new file mode 100644 index 0000000000..8902a5a263 --- /dev/null +++ b/layout/reftests/svg/filters/feFlood-2.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feFlood flood-color="#00ff00" flood-opacity="0.5"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#0000ff"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feFlood-color-01.svg b/layout/reftests/svg/filters/feFlood-color-01.svg new file mode 100644 index 0000000000..779fa5e4b0 --- /dev/null +++ b/layout/reftests/svg/filters/feFlood-color-01.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="floodFilter" filterUnits="userSpaceOnUse"> + <feFlood x="0" y="0" width="100" height="100" color="lime" + flood-color="currentColor" flood-opacity="1" + /> + </filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <use style="filter: url(#floodFilter);"/> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-1-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-1-ref.svg new file mode 100644 index 0000000000..8728e9adff --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-1-ref.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="10" width="80" height="80" fill="#00ff00"/> + +<rect x="110" y="10" width="80" height="80" fill="#00ff00" fill-opacity="0.5"/> + +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-1.svg b/layout/reftests/svg/filters/feGaussianBlur-1.svg new file mode 100644 index 0000000000..ef628ba047 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-1.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feGaussianBlur x="10%" y="10%" width="80%" height="80%" in="SourceGraphic" stdDeviation="0.04"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feGaussianBlur x="10%" y="10%" width="80%" height="80%" in="SourceAlpha" stdDeviation="0.04" + result="blur" style="color-interpolation-filters:sRGB"/> + <feFlood flood-color="#00ff00" result="flood"/> + <feComposite in="flood" operator="in" in2="blur"/> +</filter> +<g filter="url(#f2)"> + <rect x="100" y="0" width="100" height="100" fill="#00ff00" fill-opacity="0.5"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-2-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-2-ref.svg new file mode 100644 index 0000000000..8d12555188 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-2-ref.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<rect x="130" y="130" width="40" height="40" fill="#00ff00"/> + +<rect x="90" y="390" width="120" height="120" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-2.svg b/layout/reftests/svg/filters/feGaussianBlur-2.svg new file mode 100644 index 0000000000..7af12c6102 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-2.svg @@ -0,0 +1,40 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<!-- It's unfortunately hard to reftest the extent of the blur. We can at + least make sure it paints *something* --> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10"/> +</filter> +<g filter="url(#f1)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> + +<!-- the radius affected by the box-blur is bounded by 3 times the standard + deviation --> +<rect x="0" y="0" width="300" height="130" fill="#ffffff"/> +<rect x="0" y="130" width="130" height="40" fill="#ffffff"/> +<rect x="170" y="130" width="130" height="40" fill="#ffffff"/> +<rect x="0" y="170" width="300" height="130" fill="#ffffff"/> + +<!-- we can test whether the blur is a reasonable size by bumping up + non-zero alpha values a lot --> + +<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10"/> + <feComponentTransfer> + <feFuncA type="linear" slope="1000"/> + </feComponentTransfer> +</filter> +<g filter="url(#f2)"> + <rect x="100" y="400" width="100" height="100" fill="#00ff00"/> +</g> + +<!-- there should be nonzero alpha values everywhere within 1 standard + deviation of the original image --> +<rect x="0" y="300" width="300" height="90" fill="#ffffff"/> +<rect x="0" y="390" width="90" height="120" fill="#ffffff"/> +<rect x="210" y="390" width="90" height="120" fill="#ffffff"/> +<rect x="0" y="510" width="300" height="90" fill="#ffffff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-3-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-3-ref.svg new file mode 100644 index 0000000000..542e8a6d55 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-3-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<rect x="100" y="100" width="100" height="100" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-3.svg b/layout/reftests/svg/filters/feGaussianBlur-3.svg new file mode 100644 index 0000000000..4d3e640c54 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-3.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/> + <feFlood flood-opacity="0" flood-color="black"/> + <feComposite in="blur" operator="over" x="100" y="100" width="100" height="100"/> +</filter> +<g filter="url(#f1)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-4-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-4-ref.svg new file mode 100644 index 0000000000..1b729e3177 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-4-ref.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/> + <feFlood flood-opacity="0" flood-color="black"/> + <feComposite in="blur" operator="over" x="100" y="100" width="100" height="100"/> +</filter> +<g filter="url(#f1)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-4.svg b/layout/reftests/svg/filters/feGaussianBlur-4.svg new file mode 100644 index 0000000000..c5fc07d42a --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-4.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" x="100" y="100" width="100" height="100"/> +</filter> +<g filter="url(#f1)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-5-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-5-ref.svg new file mode 100644 index 0000000000..1ed5b8b47c --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-5-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> +<g> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-5.svg b/layout/reftests/svg/filters/feGaussianBlur-5.svg new file mode 100644 index 0000000000..ef910f498b --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-5.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="0.0001"/> +</filter> +<g filter="url(#f1)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-6-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-6-ref.svg new file mode 100644 index 0000000000..1ed5b8b47c --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-6-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> +<g> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-6.svg b/layout/reftests/svg/filters/feGaussianBlur-6.svg new file mode 100644 index 0000000000..275027ba1c --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-6.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="0"/> +</filter> +<g filter="url(#f1)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-alpha-01-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-alpha-01-ref.svg new file mode 100644 index 0000000000..6dd3b1466b --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-alpha-01-ref.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>SourceAlpha pseudo input reference</title> + + <defs> + <filter id="blur"> + <feGaussianBlur in="SourceGraphic" stdDeviation="2"/> + </filter> + </defs> + + <g fill-opacity="0.6" stroke="black" fill="black" stroke-width="3" filter="url(#blur)"> + <circle cx="98" cy="85" r="25"/> + <circle cx="80" cy="110" r="25"/> + <circle cx="116" cy="110" r="25"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-alpha-01.svg b/layout/reftests/svg/filters/feGaussianBlur-alpha-01.svg new file mode 100644 index 0000000000..8e74d9ca01 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-alpha-01.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>SourceAlpha pseudo input test</title> + + <defs> + <filter id="alphaBlur"> + <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> + </filter> + </defs> + + <g fill-opacity="0.6" stroke="black" stroke-width="3" filter="url(#alphaBlur)"> + <circle cx="98" cy="85" r="25" fill="red"/> + <circle cx="80" cy="110" r="25" fill="blue"/> + <circle cx="116" cy="110" r="25" fill="green"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software-ref.html b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software-ref.html new file mode 100644 index 0000000000..4797720d2e --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software-ref.html @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="blur"> + <feGaussianBlur stdDeviation="100 0"/> + </filter> + <g filter="url(#blur)"> + <rect x="0" y="0" width="100" height="100" fill="#0f0"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software.html b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software.html new file mode 100644 index 0000000000..f8d7566ed4 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="blur"> + <!-- + When rendering in software, Firefox should cap large blur radii to a + smaller value in order to keep performance acceptable. + --> + <feGaussianBlur stdDeviation="1000000 0"/> + </filter> + <g filter="url(#blur)"> + <rect x="0" y="0" width="100" height="100" fill="#0f0"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feImage-1-ref.svg b/layout/reftests/svg/filters/feImage-1-ref.svg new file mode 100644 index 0000000000..3122ae49d2 --- /dev/null +++ b/layout/reftests/svg/filters/feImage-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + +<image xlink:href="mozilla-banner.gif" x="10" y="10" width="600" height="58"/> + +</svg> diff --git a/layout/reftests/svg/filters/feImage-1.svg b/layout/reftests/svg/filters/feImage-1.svg new file mode 100644 index 0000000000..73fff9ee55 --- /dev/null +++ b/layout/reftests/svg/filters/feImage-1.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" + x="10" y="10" width="700" height="700"> + <feImage xlink:href="mozilla-banner.gif" x="10" y="10" width="600" height="58" + style="color-interpolation-filters:sRGB"/> +</filter> +<g filter="url(#f1)"> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion-ref.html b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion-ref.html new file mode 100644 index 0000000000..dc7d3d8dca --- /dev/null +++ b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion-ref.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE HTML> +<html> +<title>feImage Rendering Should Scale To Its Primitive Subregion</title> +<head> + <style> + .filtered { + height: 30px; + width: 600px; + background: #0f0; + } + </style> +</head> +<body> + <p>You should see a long horizontal green rectangle.</p> + <div class="filtered"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion.html b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion.html new file mode 100644 index 0000000000..c66db69110 --- /dev/null +++ b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion.html @@ -0,0 +1,44 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE HTML> +<html> +<title>feImage Rendering Should Scale To Its Primitive Subregion</title> +<!-- + Test for https://bugzilla.mozilla.org/show_bug.cgi?id=1065606 + + This test verifies that an feImage renders as large as its primitive subregion + before being clipped by its filter region. + + In this case, the primitive subregion is 600x600. The filter region is equal + to the bounding box of the filtered element (100% x 30px). + + Thus, the 1x1 green pixel feImage rendering should scale up to the 600x600 + primitive subregion and then be clipped by the 100% x 30px filter region. + Assuming the browser window is more than 600px wide, the final rendering + should be a 600x30 green rectangle. +--> +<head> + <style> + .filtered { + filter: url(#f); + height: 30px; + background: red; + } + </style> +</head> +<body> + <p>You should see a long horizontal green rectangle.</p> + <div class="filtered"></div> + <svg> + <defs> + <filter id="f" x="0" y="0" width="1" height="1"> + <!-- Data URI represents a 1x1 green pixel. --> + <feImage width="600" height="600" + xlink:href="data:image/gif;base64,R0lGODlhAQABAIAAAAD/AAAAACwAAAAAAQABAAACAkQBADs="/> + </filter> + </defs> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/feMerge-1-ref.svg b/layout/reftests/svg/filters/feMerge-1-ref.svg new file mode 100644 index 0000000000..080cb98645 --- /dev/null +++ b/layout/reftests/svg/filters/feMerge-1-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="10" width="30" height="80" fill="#00ff00"/> +<rect x="40" y="10" width="50" height="80" fill="#0000ff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feMerge-1.svg b/layout/reftests/svg/filters/feMerge-1.svg new file mode 100644 index 0000000000..b4c05d2ba2 --- /dev/null +++ b/layout/reftests/svg/filters/feMerge-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood x="0" y="0" width="50%" height="100%" flood-color="#00ff00" result="left"/> + <feFlood x="40%" y="0" width="60%" height="100%" flood-color="#0000ff" result="right"/> + <feMerge x="10%" y="10%" width="80%" height="80%"> + <feMergeNode in="left"/> + <feMergeNode in="right"/> + </feMerge> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#000000"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feMerge-2-ref.svg b/layout/reftests/svg/filters/feMerge-2-ref.svg new file mode 100644 index 0000000000..a42ad06263 --- /dev/null +++ b/layout/reftests/svg/filters/feMerge-2-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<rect x="0" y="0" width="40%" height="100%" fill="#00ff00"/> +<rect x="40%" y="0" width="60%" height="100%" fill="#0000ff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feMerge-2.svg b/layout/reftests/svg/filters/feMerge-2.svg new file mode 100644 index 0000000000..278b52f39e --- /dev/null +++ b/layout/reftests/svg/filters/feMerge-2.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feFlood x="0" y="0" width="50%" height="100%" flood-color="#00ff00" result="left"/> + <feFlood x="40%" y="0" width="60%" height="100%" flood-color="#0000ff" result="right"/> + <feMerge> + <feMergeNode in="left"/> + <feMergeNode in="right"/> + </feMerge> +</filter> +<g filter="url(#f1)"> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-1-ref.svg b/layout/reftests/svg/filters/feMorphology-1-ref.svg new file mode 100644 index 0000000000..ac4fd4ed72 --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-1-ref.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="20" y="20" width="60" height="60" fill="#00ff00"/> + +<rect x="135" y="45" width="30" height="10" fill="#00ff00"/> + +<rect x="10" y="110" width="80" height="80" fill="#00ff00"/> +<rect x="30" y="130" width="40" height="40" fill="#000000"/> + +<rect x="125" y="115" width="50" height="70" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-1.svg b/layout/reftests/svg/filters/feMorphology-1.svg new file mode 100644 index 0000000000..cdf91fc01b --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-1.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feMorphology operator="erode" radius="0.2 0.2" x="10%" y="10%" width="80%" height="80%"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feMorphology operator="erode" radius="0.3 0.4" x="10%" y="10%" width="80%" height="80%"/> +</filter> +<g filter="url(#f2)"> + <rect x="100" y="0" width="100" height="100" fill="#00ff00" fill-opacity="0"/> + <rect x="105" y="5" width="90" height="90" fill="#00ff00"/> +</g> + +<filter id="f3" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feMorphology operator="dilate" radius="0.2 0.2" x="10%" y="10%" width="80%" height="80%"/> +</filter> +<g filter="url(#f3)"> + <rect x="0" y="100" width="100" height="100" fill="#00ff00"/> + <rect x="10" y="110" width="80" height="80" fill="#000000"/> +</g> + +<filter id="f4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feMorphology operator="dilate" radius="0.2 0.3" x="10%" y="10%" width="80%" height="80%"/> +</filter> +<g filter="url(#f4)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00" fill-opacity="0"/> + <rect x="145" y="145" width="10" height="10" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-2-ref.svg b/layout/reftests/svg/filters/feMorphology-2-ref.svg new file mode 100644 index 0000000000..27b0336e94 --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-2-ref.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="20" y="20" width="60" height="60" fill="#00ff00"/> + +<rect x="135" y="45" width="30" height="10" fill="#00ff00"/> + +<rect x="-20" y="80" width="140" height="140" fill="#00ff00"/> +<rect x="30" y="130" width="40" height="40" fill="#000000"/> + +<rect x="125" y="115" width="50" height="70" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-2.svg b/layout/reftests/svg/filters/feMorphology-2.svg new file mode 100644 index 0000000000..7b19aa2458 --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-2.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feMorphology operator="erode" radius="20 20"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feMorphology operator="erode" radius="30 40"/> +</filter> +<g filter="url(#f2)"> + <rect x="105" y="5" width="90" height="90" fill="#00ff00"/> +</g> + +<filter id="f3" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feMorphology operator="dilate" radius="20 20"/> +</filter> +<g filter="url(#f3)"> + <rect x="0" y="100" width="100" height="100" fill="#00ff00"/> + <rect x="10" y="110" width="80" height="80" fill="#000000"/> +</g> + +<filter id="f4" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feMorphology operator="dilate" radius="20 30"/> +</filter> +<g filter="url(#f4)"> + <rect x="145" y="145" width="10" height="10" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-radius-negative-01.svg b/layout/reftests/svg/filters/feMorphology-radius-negative-01.svg new file mode 100644 index 0000000000..40a6b7d283 --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-radius-negative-01.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test 'feMorphology' with a negative value for its 'radius'</title> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and + https://bugzilla.mozilla.org/show_bug.cgi?id=1432250 + + The negative value should disable the primitive effect and output + the input image. + --> + <filter id="f1"> + <feMorphology operator="erode" radius="-1"/> + </filter> + <filter id="f2"> + <feMorphology operator="erode" radius="-1 50"/> + </filter> + <rect width="100%" height="100%" fill="red"/> + <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/> + <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/> +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-radius-negative-02.svg b/layout/reftests/svg/filters/feMorphology-radius-negative-02.svg new file mode 100644 index 0000000000..ccf44aa844 --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-radius-negative-02.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test 'feMorphology' with a negative value for its 'radius'</title> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and + https://bugzilla.mozilla.org/show_bug.cgi?id=1432250 + + The negative value should disable the primitive effect and output + the input image. + --> + <filter id="f1"> + <feMorphology operator="dilate" radius="-1"/> + </filter> + <filter id="f2"> + <feMorphology operator="dilate" radius="-1 50"/> + </filter> + <rect width="100%" height="100%" fill="red"/> + <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/> + <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/> +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-radius-zero-01.svg b/layout/reftests/svg/filters/feMorphology-radius-zero-01.svg new file mode 100644 index 0000000000..a6646b16f6 --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-radius-zero-01.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test 'feMorphology' with a zero value for its 'radius'</title> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and + https://bugzilla.mozilla.org/show_bug.cgi?id=1432250 + + The zero value should disable the primitive effect and output + the input image. + --> + <filter id="f1"> + <feMorphology operator="erode" radius="0"/> + </filter> + <filter id="f2"> + <feMorphology operator="erode" radius="0 50"/> + </filter> + <rect width="100%" height="100%" fill="red"/> + <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/> + <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/> +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-radius-zero-02.svg b/layout/reftests/svg/filters/feMorphology-radius-zero-02.svg new file mode 100644 index 0000000000..a819e3b358 --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-radius-zero-02.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test 'feMorphology' with a zero value for its 'radius'</title> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and + https://bugzilla.mozilla.org/show_bug.cgi?id=1432250 + + The zero value should disable the primitive effect and output + the input image. + --> + <filter id="f1"> + <feMorphology operator="dilate" radius="0"/> + </filter> + <filter id="f2"> + <feMorphology operator="dilate" radius="0 50"/> + </filter> + <rect width="100%" height="100%" fill="red"/> + <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/> + <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/> +</svg> diff --git a/layout/reftests/svg/filters/feOffset-1-ref.svg b/layout/reftests/svg/filters/feOffset-1-ref.svg new file mode 100644 index 0000000000..ab54616e89 --- /dev/null +++ b/layout/reftests/svg/filters/feOffset-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="15" y="25" width="75" height="65" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feOffset-1.svg b/layout/reftests/svg/filters/feOffset-1.svg new file mode 100644 index 0000000000..c94b2ba8eb --- /dev/null +++ b/layout/reftests/svg/filters/feOffset-1.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feOffset x="10%" y="10%" width="80%" height="80%" dx="0.15" dy="0.25"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feOffset-2-ref.svg b/layout/reftests/svg/filters/feOffset-2-ref.svg new file mode 100644 index 0000000000..e54bb9be8d --- /dev/null +++ b/layout/reftests/svg/filters/feOffset-2-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="15" y="25" width="100" height="100" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feOffset-2.svg b/layout/reftests/svg/filters/feOffset-2.svg new file mode 100644 index 0000000000..dc22641c97 --- /dev/null +++ b/layout/reftests/svg/filters/feOffset-2.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feOffset dx="15" dy="25"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/fePointLight-zoomed-page-ref.svg b/layout/reftests/svg/filters/fePointLight-zoomed-page-ref.svg new file mode 100644 index 0000000000..d201169a9a --- /dev/null +++ b/layout/reftests/svg/filters/fePointLight-zoomed-page-ref.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="illuminate-center"> + <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white"> + <fePointLight x="100" y="100" z="100"/> + </feDiffuseLighting> + <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> + </filter> + </defs> + <rect width="200" height="200" fill="green" filter="url(#illuminate-center)"/> +</svg> diff --git a/layout/reftests/svg/filters/fePointLight-zoomed-page.svg b/layout/reftests/svg/filters/fePointLight-zoomed-page.svg new file mode 100644 index 0000000000..9bd24878cd --- /dev/null +++ b/layout/reftests/svg/filters/fePointLight-zoomed-page.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test verifies that fePointLight stays in the right place when the user + zooms the page. + + If the test passes, you should see a green box with its center illuminated + by a point light. If the test fails, the illumination will be off-center. + + This test checks that SVG filters transform points in user space to points + in filter space correctly. + + The root SVG element specifies a width and height to prevent scrollbars + from appearing when the page is zoomed. +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + reftest-zoom="2.0" width="100" height="100"> + <defs> + <filter id="illuminate-center"> + <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white"> + <fePointLight x="50" y="50" z="50"/> + </feDiffuseLighting> + <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> + </filter> + </defs> + <rect width="100" height="100" fill="green" filter="url(#illuminate-center)"/> +</svg> diff --git a/layout/reftests/svg/filters/feSpecularLighting-1-ref.svg b/layout/reftests/svg/filters/feSpecularLighting-1-ref.svg new file mode 100644 index 0000000000..c57f91f06d --- /dev/null +++ b/layout/reftests/svg/filters/feSpecularLighting-1-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> + <image width='100' height='100' xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00d%00%00%00d%08%06%00%00%00p%E2%95T%00%00%17DiCCPICC%20Profile%00%00x%DA%D5yWTUK%B0m%AD%B5%D7N%C0%26%E7%9Cs%CE9%07I%92%B3%92s%DCl2(%02%02%12%14%04%14%11P%14TDT%10%25%8A%80%A8(%E2ADAET%82H%10%15%03%8A%8Ar%3F%F4%9Cs%C3%BB%1Fo%8C%F7%F3%E6G%8F9fU%CF%AA%FA%EA%D1%DD%00%3C%AB%01Tj4%CA%0C%10%13%9BHs%B62%15%F6%F4%F2%16%26N%01%3D%E0%80%0C8%40%02%82%12%A8%26%8E%8Ev%F0%BF%E2%CB%24%20%00%00%0F%15%02%A8%D4h%F8%BF%03KpHB%10%00%E2%08%00%81%C1%09A1%00%C8%15%00%D44%88JK%04%C0m%00%C0XJ%225%11%00%BB%03%00%EC4O%2Fo%00l%1A%00%D8%C3~%F35%00%60%0F%F4%F4%F2%06%C0c%00%C0Nsu6%03%C0s%03%90%18%02%02ha%00%14q%00%10N%0E%0AK%04%A0%98%03%10Xc%83%23b%01%D8%3C%01%08%86A%E1%01%C1%00%3CU%00%20%1F%13%13%17%0C%C0s%13%00%A4%03%FF%93O%D8%7F%F1%0C%FC%C73%20%20%EC%1F%FE%7B%16%00%00%20%99G%24P%A3%03%D2%E0%FF5b%A2%93%FE%AE%C1%0A%00%0C%B1%D1%DB%ED%00%80%13%00%96%82%03%CCm%01%80%1F%00~Q%A3%1D%ED~%E7%20%BC!%B1n.%7F%B8%7Cl%E0v%87%3F%DC0%94f%E9%FC%7B%2F%E2HM4u%06%00n%00%24%94%9A%E8%E8%FAG%CFL%0F7%DB%0E%00%0C%00%C8%A1%90%04%8B%BF%7DND%06%D88%02%00%23%00%D2FKrv%03%00q%00d%20!%D9%C5%02%00%98%01%90W%E9%E1%AE%1E%7Fr%3E%07%87%98%FF%D1Q44%C2%D2%FA%0Fg%8DH%B4v%05%00v%00T4*%CE%D6%F9w-T%13l!%1AB%20%09h%10%02%B1%A0%00v%60%06%E6%7FV%05%08%85%00%A0A2%84%40%02D%C1k%A0A%0C%D8B%1CDC%1C%D0%40%F8O%9E%D9%FFP%2C!%00h%10%06!%FF%CDQ%18%82%20%0E%92%FE%A9%F9%B7%FA%AFC%04%04C%DC%3Fz%C0%9F%18%0DB%20%C1%2F%22%E7%DF%0A%FF%D9%2F%1A%E2%80%A6%DC%AC%BC%AC%BC%F9w%1C%93%C4T1%0D%CC%143%C0%0C1%1D%10%C681%5EP%C0%D41m%CC%043%C2%F40%0DL%07%2C%E1%15%D0%20%EC%EF%1E%FD%22rh1m%A1%C9Uqi%BA%EE%E1%7Ff%08%FCg%02wx%054%88%F8%3FN%F4%A7%F7%D1%D5%CE%D5%7F%3A%84%C4%90%D4D%00%00%B38j%1A-%22%2C%3CQ%D8%84J%8D%0E%91%17%B6%8E%0DR%94%17VUVQ%86%FF%9F%E0%E9%E5-%FC%9B%7Dr%06%04%00%10%CE%FB%FFjq*%00%3AA%00%C8%DE%7F5%FFw%00%9D%91%00%24%D6%7F5%C9N%00%26U%80%E1%23AI%B4%E4%DF%1A%06%00%80%07%3A%60%02v%E0%01A%10%03iP%00U%D0%04%3D0%06%0B%B0%01%07p%05%2F%F0%85%20%08%87%18%A0A%0A%EC%82l%C8%87b8%08%87%A1%1A%EA%A0%01%CE%C2%05h%83N%E8%85%EB0%04%230%06%13%F0%0Cf%60%01%DE%C0%1A%7C%81%1F%08%82%10%11%0A%C2%86%F0%20B%88%04%22%87%A8%22%DA%88!b%81%D8!%CE%88%17%E2%8F%84!%B1H%12%B2%0B%D9%8B%14%23%E5H5r%12iB.!%DD%C8ud%18y%80%3CEf%91e%E4%23%F2%1D%C5%A1%0C(%3B*%80J%A2J%A86j%82%DA%A2%AE%E8N4%0C%8DG%D3%D1%5C%B4%04%ADB%EB%D1%F3h%07z%1D%1DA'%D0%19%F4%0D%BA%8E%03%1C%3D%8E%13'%82S%C0i%E3%CCp%0E8o%5C(%8E%86%CB%C4%15%E1*q%F5%B8%8B%B8%1E%DCm%DCC%DC%0Cn%15%F7%0D%23%60l%980%A6%80%E9a%DB07%2C%08%8B%C72%B1%FDX5v%16%EB%C0nb%0F%B1Yl%0D%FB%85%A7%E0%F9%F1rx%5D%BC5%DE%13%1F%86O%C1%E7%E3%2B%F1g%F0%ED%F8%5B%F8%09%FC%02%FE%0B%81%40%E0%24H%11%B4%08%DB%08%5E%84HB%06a%3F%E1%18%A1%850%40x%40%98'%AC%13%89D%1E%A2%1C%D1%80%E8%40%0C%20%26%12%F3%89G%89%E7%89%FD%C4q%E2%02q%83DO%12%22%A9%92%2CI%DE%A4XR%0E%A9%92t%8E%D4G%1A'-%92~%90%99%C9%12d%5D%B2%039%98%9CF.%25%9F%22%F7%90%EF%93%17%C8%3F%E8X%E8%A4%E8%0C%E8%5C%E9%22%E9%B2%E9%AA%E8.%D2%DD%A2%9B%A6%FBDOO%2FJ%AFC%EFD%1FA%9FE_E%DFJ%7F%87~%96%FE%1B%03%2B%83%2C%83%19%C3%0E%86%24%86%12%86F%86%01%86%A7%0C%9F(%14%8A%24%C5%98%E2MI%A4%94P%9A(7(%2F(%1B%8Cl%8C%8A%8C%D6%8C%C1%8C%7B%18k%18%3B%18%C7%19%DF1%91%99%24%98L%98%7C%99%D2%99*%99.3%DDgZe%263K2%9B1%070g2%D70w3%3Ff%5EgacQaq%60%89a%D9%CFr%8Ee%98e%89%95%C8*%C9j%C1%1A%CC%9A%CB%DA%C0z%83u%9E%0D%C7%26%C6f%C6%16%C4%B6%97%ED%14%DB-%B6%05v%02%BB%14%BB5%7B%24%7B1%FB%05%F6Q%F65%0EV%0Eu%0Ew%8ET%8E%1A%8Ek%1C3%9C8NINk%CEh%CER%CE6%CEI%CE%EF%5C%02%5C%26%5C!%5C%85%5C%17%B9%C6%B9%BEr%F3q%1Bs%87p%17q%B7pOp%7F%E7%11%E6%B1%E0%89%E2)%E3%E9%E4y%CE%8B%F1%CA%F2%3A%F1%A6%F0%1E%E7%BD%C5%BB%CA%C7%CE%A7%C7%17%C4W%C4%D7%C67%C5%8F%F2%CB%F2%3B%F3g%F07%F0%DF%E3_%17%10%14%B0%12%A0%0A%1C%15%B8!%B0*%C8)h%2C%18)xH%B0OpY%88M%C8P(B%E8%90P%BF%D0%8A0%87%B0%89p%B4p%95%F0M%E15%11~%91m%22I%22'EFE~%88J%89%BA%89%E6%88%B6%88%3E%17%A3%13%D3%16%0B%15%3B%246(%B6%26.%24n%2F%BEK%BCY%7CJ%82%2C%A1-%11.qD%E2%B6%C4WI)I%0F%C9%7D%92%9D%92KR%DCR%D6R%E9R%CDR%D3%D2%14i%23%E9x%E9z%E9G2%04%19m%99(%99c2c%B2%A8%AC%86l%B8l%8D%EC%7D9TNS.B%EE%98%DC%03y%BC%BC%8E%7C%AC%7C%BD%FCc%05%06%05%13%85d%85f%85YENE%3B%C5%1C%C5N%C5wJ%E2J%DEJeJ%B7%95~)k(G%2B%9FR~%A6%C2%AAb%A3%92%A3%D2%A3%F2QUV5H%B5F%F5%91%1AE%CDRm%8FZ%97%DA%07u9%F5%10%F5%E3%EAO4%D84%EC5%F6i%0Cj%FC%D4%D4%D2%A4i%5E%D4%5C%D6%12%D7%F2%D7%AA%D5z%AC%CD%AE%ED%A8%BD_%FB%8E%0E%5E%C7Tg%8FN%AF%CE7%5DM%DDD%DD6%DD%F7z%0AzQz%E7%F4%96%F4%A5%F4C%F4O%E9%CF%1B%88%1A%04%18%9C4%981%146%F47%3Ca8c%24b%14%60To4g%2Cf%1Cl%7C%C6x%D1D%C6%24%D2%E4%BC%C9%3BSeS%9Ai%BB%E9W3%5D%B3%DDf%03%E68s%2B%F3%22%F3Q%0BV%0B7%8Bj%8B%17%96%A2%96a%96%CD%96kV%1AV%19V%03%DB%F0%DBl%B7%95m%7Bl-%60%1Dd%DDd%BDf%A3e%B3%DB%E6%A6-%83%AD%8Bm%B5%ED%9C%9D%AC%1D%CD%AE%C7%1E%B5%B7%B1%AF%B0%9F%DE.%B1%3Dv%7B%A7%038X%3BT8%3Cw%94r%8Cw%BC%EADprt%AAqz%ED%AC%E2%BC%CB%F9%B6%0B%9B%8B%9F%CB9%97%2F%AE%A6%AE%A5%AE%CF%DC%A4%DD%92%DC%06%DD%99%DCw%B87%B9%7F%F50%F7(%F7%98%F1T%F2%DC%ED9%E2%C5%EB%15%E1%D5%E5M%F4v%F7%3E%E3%BD%EEc%E1s%D8ga%87%C6%8E%FC%1D%93%3B%A5v%A6%EE%1C%F6%E5%F5%8D%F6%BD%E6%C7%E4%17%E0w%D9%1F%EF%EF%E1%7F%CE%7F3%C0!%A0%3E%60%3D%D0%3A%B06p-%C8%2C%E8H%D0%9B%60%E3%E0C%C1%CB!%06!%E5!%8B%A1%06%A1%E5%A1Ka%06a%15a%CB%E1F%E1%95%E1%AB%11f%11%D5%11%1F%22%B7E%D6E~%8Dr%88j%8C%DA%8A%F6%88n%89!%C5%F8%C7t%C7%B2%C6F%C5%DE%8C%13%8CK%8D%7B%40%95%A3%E6Sg%E2u%E3%0F%C7%AF%D1lig%12%90%84%9D%09%5D%89%EC%89%D4%C4%7BI%D2IyI%B3%C9%86%C95%C9%1B)%EE)%97SYRcS%EF%A5%C9%A6%15%A6-%A6%5B%A6%9F%CE%C02%822%06w%89%EC%CA%DE5%BB%DBd%F7%C9L%2430sp%8F%D8%9E%DC%3D%0BYVYg%B3%E9%B2%A3%B2%FF%CAQ%CE)%CF%F9%BC%D7coO%AE%40nV%EE%7C%9EU%5Es%3Ec%3E-%FF%F1%3E%BD%7Du%05XAD%C1h%A1Z%E1%D1%C2_E%C1Ew%8B%95%8B%2B%8B7%F7%07%ED%BF%7B%40%E5%40%D5%81%AD%92%D0%92%D1R%CD%D2%E3%07%09%07c%0FN%96%19%95%9D-g)O%2F%9F%AF%B0%AF%E88%24%7C%A8%E8%D0%E7%C3~%87%87%2B%D5%2B%EB%8E%D0%1DI%3A2SeW%D5uT%FC%E8%C1%A3%9B%D5%E1%D5%135%A65-%B5%FC%B5%85%B5_%8F%05%1F%1B%3Fn%7C%FCb%9D%40%5Dq%DD%F7%13%11'%9E%9C%B4%3A%D9Q%2FY_%D9%40hHnx%7D%CA%FD%D4%ED%D3%DA%A7%9B%CE%F0%9E)%3E%F3%B31%B6q%E6%AC%F3%D9%9BMZMM%E7%F8%CF%956%A3%CDI%CD%CB%E7w%9C%1F%BB%60~%A1%EB%A2%C2%C5%93-%9C-%C5%AD%D0%9A%D4%BAr%C9%FF%D2d%9Bm%DB%E0e%ED%CB%17%AFH%5C%A9mgk%2F%EA%40%3A%D2%3A%D6%3A%C3%3Bg%BA%BC%BA%1Et%DBt%0F%F6%E8%F5%B4_U%BC%DA%D8%2B%D2%5Bs%8D%E3Zi%1F%5D_n%DFV%7Fz%FF%FA%00u%60%F5z%D8%F5%F9A%BF%C1g7%3Co%3C%BA%E9ts%F4%96%ED%AD%3BC%96C7n%9B%DC%EE%BFcp%A7wXw%B8%FB%AE%F6%DD%CE%11%CD%91%8E%7B%1A%F7%DA%FF%D2%F8%AB%7DTs%B4%E3%BE%D6%FD%AE1%9D%B1%9E%07%FA%0F%FA%C6%8D%C6%AF%3F4%7F8%F4%C8%FA%D1%C8%C4%F6%89%07%93n%93O%1E%EFx%3C%F3%24%F8%C9%D2%D3%E8%A7%1F%A6%92%A7~%3C%CB%9A%C6O%17%3Dg~%5E%F9%82%FFE%FDK%99%97-3%9A3%D7f%CDg%EF%CD%B9%CC%3D%9B%0F%9A%7F%F3*%E1%D5%E6B%EEk%CA%EB%CAE%A1%C5%A6%25%D5%A5%DEe%CB%E5%B1%15%9F%95%857%D47%3FV%F3%DF%B2%BC%AD%7D'%FD%EE%CA%7B%E3%F7%F7%D6%3C%D7%16%3E%D0%3El%7D%DC%FF%89%E7S%E3g%F5%CF%83%EB%8E%EB%2F%BE%C4%7C%F9%F1%B5h%83g%E3%EC7%EDo%B7%BF%7B%7C_%FC%91%B2I%DC%AC%FA)%F3%B3%E7%97%ED%AF%E9%AD%98%AD-j%00-%00%00%00p%00%80%86%86%02%7Cl%04%A0x%01%B0%8D%01%D0%0D%FC%BES%FC%01%0E%01%40%01%80%08%82%60%03%C50%8F%C8%22%B1%C8%00%CA%83%26%A2S8k%DC%0D%CC%0A%7B%84%8F!%B0%10%06%89%BBH%86d%22%F99%5D7%7D-C)%A5%91q%9A%99%99%C5%96%B5%90m%98%83%85s%07%D7y%1E%8C7%80%EF%9A%80%B0%E0~%A1%0D%91%60%D1)%F1%ED%12%C3RJ%D2%252o%E4%AC%E5%EB%14%BE(%99)%1FP%19S%A3%A8%9Bj%24h%D6j%0Dh%CF%E8%FC%D4%E3%D2%973%D01%B40r6%0E2I0%CD5%3Bb%DEl%D1o%F9%D0jy%DB%96%0D%87%AD%BC%9D%99%BD%CF%F6%08%87d%C7%3C%A7r%E7%3A%97f%D7N%B7A%F7%11%8Fq%CF%A7%5E%2F%BD%E7%7D%96v%BC%DD%B9%E4%3B%ED7%EA%DF%1F%D0%12x%3C%E8%40pzHh%A8S%98%5E%B8x%04c%C4%97%C8%97QC%D1M1%07b%A9q.T%ADx%DE%F8M%DA%8B%84%81%C4%86%A4%BC%E4%D0%14%EBT%B94%BA%B4%95%F4%7B%19%AD%BB%AAv%E7f%A6%EC%89%CF%A2e%A7%E7%14%ED%3D%99%7B-%EF%E5%3Er%81~!%B5%A8%A1x%F2%00%5D%89~i%CC%C1%E3e%A3%E5%3F%0F%C9%1F%F6%A9%2C%3A%D2Q5SM_%A3Q%EBw%AC%F0x%5B%DD%B3%93X%BDB%83%FB%A9%3D%A7%CF%9Ey%D0%B8%D1%24%7C%CE%AEy%D7%F9%B6%0B%1FZt%5BK%2F%BD%BF%ECs%E5~%87C%E7%A3n%FD%9E%C4%ABM%BD%D3%7D%F4%FDj%03%EE%D7%E3%07%F3n%94%DD%AC%BCU9Tv%BB%E0%CE%DE%E1%7Dw%0F%8C%1C%B8%97%F7W%E2%A8%C7%7D%C5%FB%3F%C6%06%1Ed%8Ck%8E%7Fy%F8%F8Q%F7D%F5%E4%EE%C7~OL%9FJL%91%A7%DE%3E%7B0%DD%FE%BC%FA%C5%EE%97%FE3%E6%B32s%CCs%DF%E6_%BF%9A%5C%18~%7D%7D%F1%EAR%F7r%F7%CA%E97%25%AB%C9o%7D%DFY%BC%97%5Bc%5E%5B%FF0%F5%B1%EF%D3%C9%CFy%EB%E1_l%BF*m%B0m%7C%FD6%FD%7D%E0G%FDf%EE%CF%90_%E6%5B%A2%5B%5B%00%40%00%5E0%86T%B8%85%B0!v%C8A%E4%25%AA%86%96%A0%9Fp~%B8I%CC%0D%7B%8E%A7%12%18%09%9D%C4%10%12%2Fi%8A%5CK%17Fo%CA%60%40qe%0Cg%CAb%3E%C1r%9Du%99%9D%83%C3%9C3%8D%AB%85%FB%3D%AF%22%1F%8D%BFW%90%5E%C8%5D%F8%9C%C8%96%98%89x%B6D%BF%E4%A6%B4%96L%A4%EC1%B9%11%F9%8F%8A%1CJj%CA%DBT%7CT%C3%D4%E2%D5%D34vk%A6kEj%FB%E8%D8%E9%1A%E8)%EB%8B%1Ap%18%92%0C%BF%1B%BD5%9E5%990%BDk%D6g~%D9%A2%D1%B2%CA%AA%60%5B%8Au%B8%8D%97%ED6%3Bm%7B%A9%ED%1C%0E%98%C3g%C79%A7%07%CE%03.%AD%AE%C7%DD%0A%DC%13%3C%7C%3D%AD%BD%D4%BC%05%7C%08%3E%EFvL%EE%BC%E6%DB%E0W%E4%1F%17%E0%1A%A8%1E%C4%104%17%DC%1DR%1A%1A%1A%A6%1F%CE%12%FE%3A%E2jdYTH%B4n%0CS%CC%7Clg%5C%01%D5%2B%5E.~%936%9Ap%22%91%96d%96%CC%91%BC%98%D2%9D%BA%3F%CD7%5D9%03%CDx%BC%ABewqf%CC%1E%B7%2C%F3l%DD%1C%9D%BD%06%B9%DB%F2%3C%F3c%F7%ED%2B8%5Dx%A3h%B6%F8%D7%01%FE%12%9DR%F7%83%09e%07%CB%CFW%0C%1Fz%5D%89%1E%E1%AF%D2%3C%EAT%1DSS%5C%7B%FE%D8%D8%F1%2F'DO%3A%D6%EFm%E8%3E%F5%E1%8Cbc%FC%D9%2BM_%9Bu%CE%EF%BA%D0%D7%02%AD%26%97%F6%B6%DD%BA%82o%B7%EA(%E8%BC%DDM%EC%B1%B8%9A%D3%7B%ED%DA%E7~%C9%01%97%EB%19%83%C7o%5C%BD9qky%E8%EB%1Dl%98%ED%AE%C8%88%D2%3D%83%BF%ECF%BD%EF%87%8F%A5%3C%C8%1F%3F%FC%B0%FEQ%CBD%EF%E4%F0%E3%C9'%0BO%3F%3F%C3M%B3%3F%97x%A1%FD%D2n%26l%B6an%F9%95%D4%82%F7%EB%FC%C5sK%B7%97gW6V%19%DFJ%BC3z%EF%B3%96%F5a%EC%93%DA%E7%8A%F5O_%9D7%AE%7C%E7%FE%91%B7%B9%F1%2Bek%0B%000%60%01Y%D8%0EY0%80%10%11%5D%24%11%E9DQ%D4%1E%3D%81%FE%C0%F9%E2%EEb%FAX%07%5E%1B%3FHp%24%CC%133H%7C%A4%DB%E4%03tA%F4%FA%0C%7C%0C%BF(s%8C%23L%ED%CC%A7Y%AAXK%D8%0A%D8%F38%F29%8B%B9*%B8%EBx%9Ay%BB%F8%AE%F1_%13%E8%13%EC%17%EA%13%BE*%D2.%DA%2CvL%BCX%22Ir%87%94%B1%B4%A8%0C%C8%3C%93%ED%94%2B%96wW%10VXQlW%CAR%B6U%E1T%99UmVKR7%D2%20k%3C%D4%3C%A6%15%AE%AD%AE%BD%A1%D3%A7%9B%A7g%AB%CF%AA%3FePo%18i%A4j%B4i%3CdRf%BA%D3L%D6%EC%AB%F9%0D%8BRK%1F%2B)%AB%8F%DB%FA%AC%8Bl%DCmEl%DF%D8u%D8gm%B7s%E0t%98ulvJp%D6sA%5D%EE%BA%96%BBy%BB%0B%BB%2Fz%5C%F4L%F2%D2%F3F%BD%87%7DJw%B8%EC%E4%DC%F9%D4%B7%C6o%A7%BF%80%FF%F3%80c%81%3B%83%F8%83%A6%82%ABB%DCC%D9B%EF%87%15%87%5BD%40%C4%D5%C8%E4(%95%A8%D5%E8%C6%98%C0X%FE%D8%C7q%15%D4%ED%F1%A4%F8%EB%B4%F4%04%B5%84%D5%C4%D3I%BE%C9%5C%C9%F7S%F6%A5%1A%A5n%A4%B5%A6Gd%08g%3C%DDuh%B7k%26O%E6%C2%9E%AE%ACC%D9i9%A1%7Bw%E4z%E5%F9%E4%87%ECK*%C8%2B%AC%2C%3AS%DC%B1%7F%E8%C0D%C9B%E9%E72%5C9%5B%85%E8!%E5%C3%BA%95fGl%AA%9C%8EzU%07%D6%C4%D5%EE9Vq%FC%7C%DD%C8%89%F7%F5%12%0Di%A7%C6%CEH5f%9E%9D%3C%A7%D0%9C%7B%FE%D9E%95%96%82%D6%17m%9A%97%8B%AF%BC%ECP%EB%DC%D75%DD%A3v%B5%A8w%AEO%BF%BFj%E0%CB%A0%EB%8D%F6%5BRC%A7%EE(%0C%DF%1A%89%FAK%7Ctu%EC%F6%F8%A5GM%93%ADO%AEO%3D%7F%0E%2F%95g%1B_%E5%2F%16%ADt%BEc%FAP%B0%CE%BD%D1%BE%E9%B1%B5%05%F0%FBm%09%00%80%A0%09pz%1E%C0%FD%24%80%93%0F%40%A3%1C%80D%0D%00%23%3B%80%23%05%C0U%07P%D3R%40%9E%1E%05%C4%EA%E2%3F%E7%07%05%A4%C0%12Ba%1F%9C%85ax%830%22*%88%1B%92%8E%1CCz%91g%C8%26*%80%1A%A1%81h%3Ez%0E%BD%8F~%C6%F1%E1Lp%E1%B8%83%B8n%DC%1CF%8Fi%60%FE%D8~%AC%0B%7B%85g%C5%1B%E1c%F1'%F1%13%04%3A%82%09!%95%D0FX%25J%13%C3%88%8D%C4e%92%22)%89%D4O%A6'%7B%93%CF%D3!t%9Etm%F4%8C%F4%B1%F4%E3%0C%DA%0C'(%24%0A%8D%F2%82%D1%86%B1%9BI%9A%A9%9A%99%C2%9C%CD%FC%95%25%8Ee%895%88%F5%25%5B%20%DB%22%7B%0C%FB%17%8ElNF%CEc%5CJ%5C7%B8%7D%B8%D7y%CAxUx%1F%F2%A5%F0%0B%F0%8F%09%EC%134%15%02%A1%EB%C2y%22%F6%A2%3C%A2KbW%C5%CB%24%22%25-%A5%24%A4%19%A4%D7e%E6d%C7%E5n%CA%F7(%5CVlUjQnS%E9R%1DP%1BQ%7F%A1%F1A%0B%D3%E6%D0%11%D3U%D0S%D1W6%905%146b5F%8D%DF%9B%3C3%ED7%AB7%2F%B0%88%B3%F4%B42%DD%A6d-h%C3d%8B%B3%DD%B0%5B%B3_%D9%BE%E00%E78%EB%F4%CA%F9%8D%CB'%D7%9F%EEd%0F.O)%2F%1Do%7B%9F%A0%1D%19%3B%0F%FB%B6%FA%8D%FA%BF%0Dd%0CR%0B%F6%0A%D9%13%DA%10v%2B%7C%3E%E2g%14k%B4H%8Cl%ACb%9C%02U%26%5E%94%C6%99%40N%F8%9E%B8%9C%CC%9Bb%9F%9A%9B%D6%9F%FEk%97%C5%EE%8A%CC7Y%F6%D9W%F7%AA%E7v%E7%5B%EF%9B%2F%DCW%2C%B2%FFb%89q%E9LYY%85%E7a%83%23%D6GSjn%1D%E7%3B%C1X%8F6%7C%3B%FD%B1%F1%5D%D3j%F3%EA%85%F7-%EB%97~%5E!u%F0u)%F5%98%F7z%F5E%0C%24%0Ff%DE%CC%1A%DA%7D'%F9n%F4%3D%FF%D1%E2%B1%AE%F1%95%09%91%C7%3B%9F%D6%3D%7B%FDBe%26%7BnbAn%B1%60yq%D5%EA%DD%B9%0F%CC%9F2%D6%DFn%84~_%FCI%DD%DA%02%00%26P%04'H%82j%E8%87W%08%3D%A2%8A%F8%20%B9H%132%82%BCG%D9Q%5D%D4%1F-%40%5B%D1%A78%1CN%01%E7%85%CB%C3%5D%C2%BD%C4(%98%3E%16%85%D5%60%7Fa%BF%F0*%F8%60%7C-~%82%C0D%B0%23%14%12%EE%10%E9%88%F6%C4r%E2%14I%82D%23%0D%929%C9%D1%E4!%3A1%BA%1C%BA%05z%1B%FA%1E%069%86%3A%0A%07e%3F%23%811%87%09%98%B2%99q%CC%05%2C%8C%2CGXEY%5B%D8%8C%D9%26%D8c8%08%1C%F5%9C%26%9Cs%5C%F9%DC%0A%DC%93%3C%D9%BC%CA%BC3%7C%15%FC%DB%040%81A%C1%BDB%96%C2%0C%C2%93%22%F5%A2%09b%96%E2%82%E2%1B%12%93%92%9DR'%A4%8F%C8%94%C9%96%C8%95%C8%97%2BT%2B%9EQjW%BE%A3%F2B%F5%AB%3A%87%86%AEf%90V%89%F65%9D%F7z%12%FA~%065%86%CF%8C%05M%82M%5B%CC~XXX%16%5B%8DX%E3m%B4l%03%ED%F2%ED%CFl%BF%EE0%E5%B8%E6%8C%B9p%BA%CA%BA%19%BB%7By%24x%96z%5D%F4%1E%F5%F9%B0%93%D3%D7%C0%2F%D4%BF%2C%A0%2F%F0%5D%B0X%88ghi%D8P%F8%CFH%F5%A8%88%E8%E31%0F%E2P%AAj%BC%3F%AD%24%E1j%E2R2S%8AV%AA%7FZqzW%C6%E2n%AEL%EB%3D%BB%B3%DA%B2W%F6%8A%E5%EE%CC%AB%CE%7FR%C0U%E8Ut%BC%F8%D5%01%85%92%D4%D2%A12%EE%F2%B8%8A%7B%87%95%2Bk%AA%18%8F%16%D60%D4%1E%3E.Uw%FBdD%03%C3%A9%B63%DEg%B1%A6%D6f%BF%0B%CC%17o%B4%A6%B6)%5D%5Ejo%EC%8C%E8V%E8%F9%D8%DB%D3%973%607%C8uc%FEV%EB%ED%5D%C36%23%3C%F7%C6F%DD%EE%CF%3FH%7F(%F8ht%B2%F8%89%CB%94%E44%F2%7C%EE%E5%D0l%F3%7C%E9%02m%D1e%99o%A5nU%EA%ED%A5%F7%86k%A3%1F%FD%3E%BD_%CF%FA%CA%B4q%F4%BB%E0%8F%BA%9F%BC%BFJ%B7%B6%00%80%0BL%80%0Aup%1F%B6%10U%24%149%8A%DCB%3E%A1%A2%A83%9A%8Bv%A2%AB8%11%9C'%EE%20n%18%C3a%86X%3A%D6%89%AD%E35%F0%C9%F8k%04%3C%C1%81PCX!%EA%11%0F%12%97H%E6%A4Sd%12%99J%9E%A6%B3%A3%1B%A0%D7%A2%EFa0e%B8G%F1%A2%AC0f2q0%B52%3B0%7F%60%A9d5d%5Df%3B%C6%EE%C2A%E1%B8%CBY%C8e%C7%CD%CA%3D%C5s%9A%97%C6g%C2%CF%C6%FFF%60H%F0%94P%BEp%94%88%AB%A8%89%98%AA%B8%94%84%90%24%9F%14%AF%B4%B0%8C%9C%AC%8E%9C%AD%7C%80%C2.%C5j%A5k%CA%AFT%19%D5%F4%D5i%1A%175%DFkk%E8d%EB%8E%EBK%1B%E4%1A%BE6%B63%E94%933%3Fe)b%D5%60-c%D3ngn%FF%C4%81%EA%C4%E0%DC%EA%EA%E3N%F6%B8%E6%95%EC%A3%BEc%C3w%C0%FF%40%A0o%B0f(C%D8%D3%88%EA(%EB%E8%E5%D8%B4%B8%CD%F8D%DAB%A2c%D2%E5%14%96TZ%DA%A3%0C%DD%5D'3%E9%F7%A4f-%E6x%EE%BD%97g%9A%DFS%A0%5E%D8Ql%B0%7F%B8%C4%AB%F4MYf%05%CB%A1%FAJ%A5%23%DDG%0D%AB%FBk%F5%8Fu%D4%E1O%D8%9D%3C%5C%FF%F2%94%EC%E9%943%B7%CEr4%85%9E%EB9%CFx!%F8bo%2B%C7%25j%DB%C8%15%E9%F6%A2%8E%B7%5DN%DD%9DW%05%7B%F3%AF%BD%EB%F7%18%B8%3E(w%E3%F0%CD%AD%A1%C8%DB%8F%86%8D%EF6%DF%E3%FC%2Ba%F4%EE%18%DF%83%F0%F1%F3%0FW%26%C4%26%3D%1E%E7%3C9%FB%F4%EE%D4%C2%B3%CD%E7%CC%2F%84%5E%CA%CDh%CC%EA%CE%19%CE%1B%BF2%5E0%7C%AD%BB%A8%B5%A4%B2%2C%BB%22%FA%86%F1%CD%F2j%F7%DB%94w%1A%EFV%DF%9F%5E%F3%FA%40%F7%A1%F7c%E8'%E6O%5D%9Fw%AC%C3z%FD%17%D3%2Fs_%F7l%F0ot%7Fs%FB%B6%F6%7D%FF%0F%A9%1F%83%9B%BE%9B%1B%3F%2B~)%FD%1A%DE%0A%DE%DA%02H%08US%05%00%00%84%C1%14%00%FFbk%EB%93%24%00%B1%1C%E0g%D9%D6%D6%8F%FA%AD%AD%9F%0D%00%B8i%80%81%E8%DF%FF%15%00%00%04f%80%DA%86%FF%ED%8D%F4%3F%00%BD%06~%C6%80N%5E%00%00%00%00%06bKGD%00%FF%00%FF%00%FF%A0%BD%A7%93%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%DA%0B%0F%12%004n%D47%05%00%00%01%1BIDATx%DA%ED%DC%B1%11%820%14%80%E1%87G%97%3B%98%22%0E%C0%0Ct%B2%1B%CB%E0Nl%11%0B%3B*%3D9%89%F2%FD5U%3E%1E%B9P%A4%89(%25TM%17K%00D%40%80%08%08%10%01%01%22%20%E7%AE%7D%F5%C1e%B9%5B%AD%0F%9A%A6%9B%09%F1%C9%12%10%20%02%02D%40%F4%E69D%DBs%C5%B49%A7-%F5%81%0C%C3%10)%A5X%D7%95X%0D%20)%A5%E8%FB.%22%3A%2B%5B%C3%1Eb2l%EA%07V%22%A2D%CEy%B7%FD%03%88%09%11%10%20%02%02D%40%80%08%88%80%00%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%1D%DEn7%5Bo%EFB%7F%DEk%2B%13%F2%ED7%BAm%EB%9C%90m9_O%811%8E%E3o%80%CC%F3l%7C%8E%04%D9%F3%FEs%7B%88%80%08%08%10%01%01%22%20%7F%5D%13Q%FCt2!%02%02D%40%80%08%08%10%01%01%A2Zz%00g%F8%1C%DE%87%AF%C0%09%00%00%00%00IEND%AEB%60%82"/> +</svg> diff --git a/layout/reftests/svg/filters/feSpecularLighting-1.svg b/layout/reftests/svg/filters/feSpecularLighting-1.svg new file mode 100644 index 0000000000..838a60b7e0 --- /dev/null +++ b/layout/reftests/svg/filters/feSpecularLighting-1.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns='http://www.w3.org/2000/svg'> + <!-- + A basic test for the <feSpecularLighting> filter primitive. + Setting kernelUnitLength on the <feSpecularLighting> should allow us to + assume pixel perfection. + --> + <filter id='f' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'> + <feSpecularLighting kernelUnitLength='1' result='a'> + <feDistantLight azimuth='45'/> + </feSpecularLighting> + <feComposite in='a' in2='SourceAlpha' operator='in' result='b'/> + <feComposite in='SourceGraphic' in2='b' operator='arithmetic' k1='0' k2='1' k3='1' k4='0' x='10' y='10' width='80' height='80'/> + </filter> + <rect width='100' height='100' fill='blue'/> + <path d='M0,0 h100 v100 h-100 z M20,20 v60 h60 v-60 z' filter='url(#f)'/> + + <!-- Cover two spots in the test whose rendering differs in opt builds + vs. debug builds (see Bug 610945). --> + <rect x='78' y='18' width='4' height='4'/> + <rect x='18' y='78' width='4' height='4'/> +</svg> diff --git a/layout/reftests/svg/filters/feTile-1-ref.svg b/layout/reftests/svg/filters/feTile-1-ref.svg new file mode 100644 index 0000000000..c0135fca35 --- /dev/null +++ b/layout/reftests/svg/filters/feTile-1-ref.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="10" width="10" height="10" fill="#00ff00"/> +<rect x="40" y="10" width="20" height="10" fill="#00ff00"/> +<rect x="80" y="10" width="10" height="10" fill="#00ff00"/> + +<rect x="20" y="20" width="20" height="20" fill="#0000ff"/> +<rect x="60" y="20" width="20" height="20" fill="#0000ff"/> + +<rect x="10" y="40" width="10" height="20" fill="#00ff00"/> +<rect x="40" y="40" width="20" height="20" fill="#00ff00"/> +<rect x="80" y="40" width="10" height="20" fill="#00ff00"/> + +<rect x="20" y="60" width="20" height="20" fill="#0000ff"/> +<rect x="60" y="60" width="20" height="20" fill="#0000ff"/> + +<rect x="10" y="80" width="10" height="10" fill="#00ff00"/> +<rect x="40" y="80" width="20" height="10" fill="#00ff00"/> +<rect x="80" y="80" width="10" height="10" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feTile-1.svg b/layout/reftests/svg/filters/feTile-1.svg new file mode 100644 index 0000000000..c64ab37491 --- /dev/null +++ b/layout/reftests/svg/filters/feTile-1.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/> + <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/> + <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/> + <feTile x="10%" y="10%" width="80%" height="80%" in="pair"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feTile-2-ref.svg b/layout/reftests/svg/filters/feTile-2-ref.svg new file mode 100644 index 0000000000..186d21cbcf --- /dev/null +++ b/layout/reftests/svg/filters/feTile-2-ref.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +<rect x="200" y="0" width="100" height="100" fill="#00ff00"/> +<rect x="400" y="0" width="100" height="100" fill="#00ff00"/> + +<rect x="100" y="100" width="100" height="100" fill="#0000ff"/> +<rect x="300" y="100" width="100" height="100" fill="#0000ff"/> + +<rect x="0" y="200" width="100" height="100" fill="#00ff00"/> +<rect x="200" y="200" width="100" height="100" fill="#00ff00"/> +<rect x="400" y="200" width="100" height="100" fill="#00ff00"/> + +<rect x="100" y="300" width="100" height="100" fill="#0000ff"/> +<rect x="300" y="300" width="100" height="100" fill="#0000ff"/> + +<rect x="0" y="400" width="100" height="100" fill="#00ff00"/> +<rect x="200" y="400" width="100" height="100" fill="#00ff00"/> +<rect x="400" y="400" width="100" height="100" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feTile-2.svg b/layout/reftests/svg/filters/feTile-2.svg new file mode 100644 index 0000000000..7f137b8d4c --- /dev/null +++ b/layout/reftests/svg/filters/feTile-2.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/> + <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/> + <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/> + <feTile in="pair"/> +</filter> +<g filter="url(#f1)"> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feTile-large-01.svg b/layout/reftests/svg/filters/feTile-large-01.svg new file mode 100644 index 0000000000..c04c145295 --- /dev/null +++ b/layout/reftests/svg/filters/feTile-large-01.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tile larger than surface</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=521207 --> + <defs> + <filter primitiveUnits="objectBoundingBox" filterUnits="objectBoundingBox" + id="filter_1" x="-50%" y="-50%" width="200%" height="200%"> + <feTile /> + </filter> + </defs> + + <rect width="100%" height="100%" fill="lime" /> + <rect x="10" y="10" width="100" height="100" fill="red" /> + <rect x="10" y="10" width="100" height="100" fill="lime" style="filter:url(#filter_1);"/> +</svg> diff --git a/layout/reftests/svg/filters/feTile-large-02-ref.svg b/layout/reftests/svg/filters/feTile-large-02-ref.svg new file mode 100644 index 0000000000..cb6ed6047c --- /dev/null +++ b/layout/reftests/svg/filters/feTile-large-02-ref.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> +<title>Reference for feTile filter with tile exceeding the bounds of the target area on all sides</title> + +<rect width="20" height="20" fill="#00ff00"/> +<rect x="40" width="20" height="20" fill="#00ff00"/> +<rect x="80" width="20" height="20" fill="#00ff00"/> + +<rect x="20" y="20" width="20" height="20" fill="#0000ff"/> +<rect x="60" y="20" width="20" height="20" fill="#0000ff"/> + +<rect y="40" width="20" height="20" fill="#00ff00"/> +<rect x="40" y="40" width="20" height="20" fill="#00ff00"/> +<rect x="80" y="40" width="20" height="20" fill="#00ff00"/> + +<rect x="20" y="60" width="20" height="20" fill="#0000ff"/> +<rect x="60" y="60" width="20" height="20" fill="#0000ff"/> + +<rect y="80" width="20" height="20" fill="#00ff00"/> +<rect x="40" y="80" width="20" height="20" fill="#00ff00"/> +<rect x="80" y="80" width="20" height="20" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feTile-large-02.svg b/layout/reftests/svg/filters/feTile-large-02.svg new file mode 100644 index 0000000000..aa41cf34f5 --- /dev/null +++ b/layout/reftests/svg/filters/feTile-large-02.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> +<title>Test case for feTile filter with tile exceeding the bounds of the target area on all sides</title> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/> + <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/> + <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/> + <feTile x="-10%" y="-10%" width="120%" height="120%" in="pair"/> +</filter> +<g filter="url(#f1)"> + <rect width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feTile-outside-01-ref.svg b/layout/reftests/svg/filters/feTile-outside-01-ref.svg new file mode 100644 index 0000000000..f84634f7c0 --- /dev/null +++ b/layout/reftests/svg/filters/feTile-outside-01-ref.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> +<title>Reference for feTile filter with x and y for feTile set to values outside the target area.</title> + +<rect width="20" height="20" fill="#00ff00"/> +<rect x="40" width="20" height="20" fill="#00ff00"/> + +<rect x="20" y="20" width="20" height="20" fill="#0000ff"/> +<rect x="60" y="20" width="10" height="20" fill="#0000ff"/> + +<rect x="00" y="40" width="20" height="20" fill="#00ff00"/> +<rect x="40" y="40" width="20" height="20" fill="#00ff00"/> + +<rect x="20" y="60" width="20" height="10" fill="#0000ff"/> +<rect x="60" y="60" width="10" height="10" fill="#0000ff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feTile-outside-01.svg b/layout/reftests/svg/filters/feTile-outside-01.svg new file mode 100644 index 0000000000..4f1f0b5c8a --- /dev/null +++ b/layout/reftests/svg/filters/feTile-outside-01.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> +<title>Test case for feTile filter with x and y for feTile set to values outside the target area.</title> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/> + <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/> + <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/> + <feTile x="-10%" y="-10%" width="80%" height="80%" in="pair"/> +</filter> +<g filter="url(#f1)"> + <rect width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feTurbulence-offset-ref.svg b/layout/reftests/svg/filters/feTurbulence-offset-ref.svg new file mode 100644 index 0000000000..fbfaf840af --- /dev/null +++ b/layout/reftests/svg/filters/feTurbulence-offset-ref.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- + Place the filtered rect and the filter region at (0, 0) in user space. + Remove the filter output before (50, 50) using a clipPath. + --> + <filter id="f" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"></feTurbulence> + </filter> + <clipPath id="clip-top-left"> + <rect x="50" y="50" width="100" height="100"/> + </clipPath> + <rect x="0" y="0" width="150" height="150" filter="url(#f)" clip-path="url(#clip-top-left)"/> +</svg> diff --git a/layout/reftests/svg/filters/feTurbulence-offset.svg b/layout/reftests/svg/filters/feTurbulence-offset.svg new file mode 100644 index 0000000000..c48db258b3 --- /dev/null +++ b/layout/reftests/svg/filters/feTurbulence-offset.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test verifies that feTurbulence creates a noise image that remains + anchored at the user space origin, not the filter region origin. The filter + region should act as a viewport into the anchored noise image. +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- + Place the filtered rect at (75, 75) in user space. + Make the filter region start at (-25, -25) from the top left corner of the rect. + Thus, the filter output should start at (50, 50). + --> + <filter id="f" x="-25%" y="-25%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"></feTurbulence> + </filter> + <rect x="75" y="75" width="100" height="100" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01-ref.svg b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01-ref.svg new file mode 100644 index 0000000000..ec92fc28e1 --- /dev/null +++ b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01-ref.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This is the reference image for feTurbulence-zero-baseFreq.svg. +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="400" height="100" fill="blue"/> + <rect x="0" y="100" width="400" height="100" fill="lime"/> + <!-- nothing in place of the type="turbulence" filter --> + <rect x="200" y="50" width="100" height="100" fill="rgba(128, 128, 128, 0.5)"/> +</svg> diff --git a/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01.svg b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01.svg new file mode 100644 index 0000000000..c55cbf07a8 --- /dev/null +++ b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test verifies that feTurbulence with baseFrequency="0" creates + a transparent black result for type="turbulence" and a 50% alpha + 50% gray result for type="fractalNoise". +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="filterTurbulence" primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB"> + <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" + x="0%" y="0%" width="100%" height="100%"/> + </filter> + <filter id="filterFractalNoise" primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB"> + <feTurbulence type="fractalNoise" baseFrequency="0" numOctaves="1" + x="0%" y="0%" width="100%" height="100%"/> + </filter> + <rect x="0" y="0" width="400" height="100" fill="blue"/> + <rect x="0" y="100" width="400" height="100" fill="lime"/> + <rect x="50" y="50" width="100" height="100" filter="url(#filterTurbulence)"/> + <rect x="200" y="50" width="100" height="100" filter="url(#filterFractalNoise)"/> +</svg> diff --git a/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-02.svg b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-02.svg new file mode 100644 index 0000000000..2992737d16 --- /dev/null +++ b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-02.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="a"> + <feTurbulence baseFrequency="0 0.1"/> + </filter> + </defs> + <rect fill="#7989a6" height="400px" width="400px" filter="url(#a)"/> +</svg> + diff --git a/layout/reftests/svg/filters/filter-clipped-rect-01.svg b/layout/reftests/svg/filters/filter-clipped-rect-01.svg new file mode 100644 index 0000000000..0e339cf42a --- /dev/null +++ b/layout/reftests/svg/filters/filter-clipped-rect-01.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + This test checks that the filtering with a clipPath doesn't interact + badly with transforms. + </desc> + <defs> + <clipPath id="clipPath"> + <rect x="100" width="100" height="100"/> + </clipPath> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <g transform="translate(50, 0)"> + <!-- This 3-rect setup is to show red *both* if too much or if too little is clipped. --> + <rect x="150" width="100" height="100" fill="red"/> + <g clip-path="url(#clipPath)" filter="url(#filter)" transform="translate(50, 0)"> + <rect x="-20" y="-20" width="140" height="140" fill="red"/> + <rect x="100" width="100" height="100" fill="lime"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-giant.svg b/layout/reftests/svg/filters/filter-giant.svg new file mode 100644 index 0000000000..e0a373a892 --- /dev/null +++ b/layout/reftests/svg/filters/filter-giant.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> +<defs> +<filter id="dropShadow" x="0" y="0" width="200%" height="200%"> + <feOffset result="offOut" in="SourceAlpha" dx="1.5" dy="1.5"/> + <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2"/> + <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/> +</filter> +</defs> +<g filter="url(#dropShadow)"> + <rect x="-20000" y="-20000" width="40000" height="40000" fill="lime" /> +</g> +</svg> diff --git a/layout/reftests/svg/filters/filter-in-mask-01.svg b/layout/reftests/svg/filters/filter-in-mask-01.svg new file mode 100644 index 0000000000..e73efd3796 --- /dev/null +++ b/layout/reftests/svg/filters/filter-in-mask-01.svg @@ -0,0 +1,12 @@ +<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 1 1" preserveAspectRatio="xMidYMid slice"> + <!-- filter effects region covers whole viewbox --> + <filter id="myFilter" filterUnits="userSpaceOnUse" x="-1" y="-1" width="1" height="1"> + <feGaussianBlur stdDeviation="0"/> + </filter> + <!-- mask effects region covers whole viewbox, opaque white mask --> + <mask id="myMask" maskUnits="userSpaceOnUse" x="-1" y="-1" width="1" height="1"> + <rect filter="url(#myFilter)" x="-1" y="-1" width="1" height="1" fill="#FFFFFF"/> + </mask> + <rect x="-1" y="-1" width="1" height="1" fill="red"/> + <rect mask="url(#myMask)" x="-1" y="-1" width="1" height="1" fill="lime"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/filters/filter-in-mask-02.svg b/layout/reftests/svg/filters/filter-in-mask-02.svg new file mode 100644 index 0000000000..7c7fd86f1f --- /dev/null +++ b/layout/reftests/svg/filters/filter-in-mask-02.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter x="0" y="0" width="1" height="1" id="solid"> + <feFlood flood-color="black"/> + </filter> + <mask id="myMask"> + <rect fill="white" width="100%" height="100%"/> + <g transform="translate(10000, 0)"> + <rect fill="blue" width="100%" height="100%" filter="url(#solid)"/> + </g> + </mask> + </defs> + <!-- You should see pure lime color as background color of a whole page. --> + <rect fill="red" width="100%" height="100%"/> + <g mask="url(#myMask)"> + <rect x="0" y="0" width="100%" height="100%" fill="lime"></rect> + </g> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/filters/filter-in-pattern-01.svg b/layout/reftests/svg/filters/filter-in-pattern-01.svg new file mode 100644 index 0000000000..e6df8d7627 --- /dev/null +++ b/layout/reftests/svg/filters/filter-in-pattern-01.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid slice"> + <defs> + <filter id="blur"> + <feGaussianBlur stdDeviation="0" /> + </filter> + <pattern id="pattern1" patternUnits="userSpaceOnUse" width="10" height="10"> + <rect width="10" height="10" fill="lime" filter="url(#blur)" /> + </pattern> + </defs> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="url(#pattern1)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-in-pattern-02-ref.svg b/layout/reftests/svg/filters/filter-in-pattern-02-ref.svg new file mode 100644 index 0000000000..a712134d6b --- /dev/null +++ b/layout/reftests/svg/filters/filter-in-pattern-02-ref.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100"> + <defs> + <filter id="blur-filter"> + <feGaussianBlur stdDeviation="0.5"/> + </filter> + <pattern id="pattern1" width="8" height="8" patternUnits="userSpaceOnUse"> + <path d="M-1,1 l2,-2" stroke="blue" filter="url(#blur-filter)" /> + </pattern> + </defs> + + <rect x="-20%" y="-20%" width="10%" height="10%" fill="url(#pattern1)"/> +</svg> + diff --git a/layout/reftests/svg/filters/filter-in-pattern-02.svg b/layout/reftests/svg/filters/filter-in-pattern-02.svg new file mode 100644 index 0000000000..ed4bae1020 --- /dev/null +++ b/layout/reftests/svg/filters/filter-in-pattern-02.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100"> + <defs> + <filter id="blur-filter" filterUnits="userSpaceOnUse" x="0" y="0"> + <feGaussianBlur stdDeviation="0.5"/> + </filter> + <pattern id="pattern1" width="8" height="8" patternUnits="userSpaceOnUse"> + <path d="M-1,1 l2,-2" stroke="blue" filter="url(#blur-filter)" /> + </pattern> + </defs> + + <rect x="-20%" y="-20%" width="10%" height="10%" fill="url(#pattern1)"/> +</svg> + diff --git a/layout/reftests/svg/filters/filter-inner-svg-01.svg b/layout/reftests/svg/filters/filter-inner-svg-01.svg new file mode 100644 index 0000000000..e00bde4636 --- /dev/null +++ b/layout/reftests/svg/filters/filter-inner-svg-01.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + The 'x' attribute on the inner 'svg' should not result in any of the lime 'circle' + it contains from being clipped when the inner 'svg' is filtered. + </desc> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" cx="200" cy="100" r="98"/> + <svg x="100" width="200" height="200" filter="url(#filter)"> + <circle fill="lime" r="100" cx="100" cy="100"/> + </svg> +</svg> diff --git a/layout/reftests/svg/filters/filter-inner-svg-02.svg b/layout/reftests/svg/filters/filter-inner-svg-02.svg new file mode 100644 index 0000000000..82809d9301 --- /dev/null +++ b/layout/reftests/svg/filters/filter-inner-svg-02.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + The 'viewBox' attribute on the inner 'svg' should push the red 'rect' it + contains outside the viewport, so if transforms and clipping are working + correctly when the inner 'svg' is being filtered, then none of the red + 'rect' should be visible. + </desc> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + <!--circle fill="lime" r="100" cx="300" cy="100"/--> + <rect width="100%" height="100%" fill="lime"/> + <svg width="200" height="200" viewBox="-200 0 200 200" filter="url(#filter)"> + <circle fill="red" r="98" cx="100" cy="100"/> + </svg> +</svg> diff --git a/layout/reftests/svg/filters/filter-inner-svg-03.svg b/layout/reftests/svg/filters/filter-inner-svg-03.svg new file mode 100644 index 0000000000..0ce543e157 --- /dev/null +++ b/layout/reftests/svg/filters/filter-inner-svg-03.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + The 'transform' attribute on the 'g' parent of the inner 'svg' should + not cause the lime 'circle' inside the inner 'svg' to be clipped when + the inner 'svg' is filtered. + </desc> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <g transform="translate(100, 0)"> + <svg width="200" height="200" filter="url(#filter)"> + <circle fill="lime" r="100" cx="100" cy="100"/> + </svg> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-kernelUnitLength-01-ref.svg b/layout/reftests/svg/filters/filter-kernelUnitLength-01-ref.svg new file mode 100644 index 0000000000..e19dfe1f82 --- /dev/null +++ b/layout/reftests/svg/filters/filter-kernelUnitLength-01-ref.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="emboss"> + <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/> + <!-- without kernelUnitLength attribute --> + <feSpecularLighting in="blur" result="spec" surfaceScale="-3" + specularConstant="2" specularExponent="16" + lighting-color="#ffb155"> + <feDistantLight azimuth="45" elevation="45"/> + </feSpecularLighting> + <feComposite in="spec" in2="SourceGraphic" operator="in" result="specOut"/> + </filter> + </defs> + <path filter="url(#emboss)" d="M 44.408917,5.7095287 C 535.13945,101.91182 534.01725,101.52506 532.53904,101.52499 C 531.36871,101.52506 530.17420,101.85117 528.96683,102.49024 z "/> +</svg> diff --git a/layout/reftests/svg/filters/filter-kernelUnitLength-01.svg b/layout/reftests/svg/filters/filter-kernelUnitLength-01.svg new file mode 100644 index 0000000000..9b192214f0 --- /dev/null +++ b/layout/reftests/svg/filters/filter-kernelUnitLength-01.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="emboss"> + <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/> + <!-- with kernelUnitLength attribute --> + <feSpecularLighting in="blur" result="spec" surfaceScale="-3" + specularConstant="2" specularExponent="16" + lighting-color="#ffb155" kernelUnitLength="1"> + <feDistantLight azimuth="45" elevation="45"/> + </feSpecularLighting> + <feComposite in="spec" in2="SourceGraphic" operator="in" result="specOut"/> + </filter> + </defs> + <path filter="url(#emboss)" d="M 44.408917,5.7095287 C 535.13945,101.91182 534.01725,101.52506 532.53904,101.52499 C 531.36871,101.52506 530.17420,101.85117 528.96683,102.49024 z "/> +</svg> diff --git a/layout/reftests/svg/filters/filter-lighting-region-ref.svg b/layout/reftests/svg/filters/filter-lighting-region-ref.svg new file mode 100644 index 0000000000..d7337102b7 --- /dev/null +++ b/layout/reftests/svg/filters/filter-lighting-region-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="300px"> + + <rect x="50" y="50" width="200" height="200" fill="black" /> + + <rect x="340" y="40" width="220" height="220" fill="grey" /> + <rect x="350" y="50" width="200" height="200" fill="white" /> +</svg> diff --git a/layout/reftests/svg/filters/filter-lighting-region.svg b/layout/reftests/svg/filters/filter-lighting-region.svg new file mode 100644 index 0000000000..883b6d805d --- /dev/null +++ b/layout/reftests/svg/filters/filter-lighting-region.svg @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="300px"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1203376 --> + <defs> + <!-- the filter lights are intentionally chosen to fill the entire area with + a solid color since we're only testing the extents of the filter region + --> + <filter id="diffuse" x="-50%" y="-50%" width="200%" height="200%"> + <!-- gives a black filter region --> + <feDiffuseLighting lighting-color="black"> + <feDistantLight /> + </feDiffuseLighting> + </filter> + + <filter id="specular" x="-50%" y="-50%" width="200%" height="200%"> + <!-- gives a white filter region --> + <feSpecularLighting lighting-color="white" specularConstant="100"> + <feDistantLight elevation="90"/> + </feSpecularLighting> + </filter> + </defs> + + <rect x="100" y="100" width="100" height="100" filter="url(#diffuse)" /> + + <rect x="340" y="40" width="220" height="220" fill="grey" /> + <rect x="400" y="100" width="100" height="100" filter="url(#specular)" /> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-01.svg b/layout/reftests/svg/filters/filter-marked-line-01.svg new file mode 100644 index 0000000000..406615443c --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-01.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + Filtering the 'line' should not cause the mark (lime 'circle') to be clipped. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="100" refY="100" + markerUnits="userSpaceOnUse"> + <circle fill="lime" r="100" cx="100" cy="100"/> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="100" cy="100"/> + <line x2="100" y2="100" marker-end="url(#marker)" filter="url(#filter)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-02.svg b/layout/reftests/svg/filters/filter-marked-line-02.svg new file mode 100644 index 0000000000..76dea08b9c --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-02.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + The 'transform' attribute on the 'path' should not cause the mark + (lime 'circle') to be clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="100" refY="100" + markerUnits="userSpaceOnUse"> + <circle fill="lime" r="100" cx="100" cy="100"/> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <path d="M0,0 L100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)" transform="translate(100, 0)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-03.svg b/layout/reftests/svg/filters/filter-marked-line-03.svg new file mode 100644 index 0000000000..d59c71f49e --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-03.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + The 'viewBox' attribute on the 'marker' should not cause the mark + (lime 'circle') to be clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" + markerUnits="userSpaceOnUse" viewBox="-100 0 200 200"> + <circle fill="lime" r="100" cx="0" cy="100"/> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-04.svg b/layout/reftests/svg/filters/filter-marked-line-04.svg new file mode 100644 index 0000000000..0b90aaf557 --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-04.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + The 'transform' attribute on the 'circle' should not cause the mark + (lime 'circle') to be clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="100" refY="100" + markerUnits="userSpaceOnUse"> + <circle fill="lime" r="100" cx="0" cy="100" transform="translate(100, 0)"/> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-05.svg b/layout/reftests/svg/filters/filter-marked-line-05.svg new file mode 100644 index 0000000000..6f3fc0938f --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-05.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + The combination of the 'viewBox' attribute on the 'marker' and the 'transform' + attribute on the 'circle' element should not cause the mark (lime 'circle') to + be clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" + markerUnits="userSpaceOnUse" viewBox="-100 0 200 200"> + <circle fill="lime" r="100" cx="-100" cy="100" transform="translate(100, 0)"/> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-06.svg b/layout/reftests/svg/filters/filter-marked-line-06.svg new file mode 100644 index 0000000000..147d3a2aa0 --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-06.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + The combination of the 'viewBox' attribute on the 'marker' and the 'transform' + attribute on the 'g' element should not cause the mark (lime 'circle') to be + clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" + markerUnits="userSpaceOnUse" viewBox="-100 0 200 200"> + <g transform="translate(100, 0)"> + <circle fill="lime" r="100" cx="-100" cy="100"/> + </g> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-07.svg b/layout/reftests/svg/filters/filter-marked-line-07.svg new file mode 100644 index 0000000000..94d1deca8e --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-07.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + The combination of the 'viewBox' attribute on the 'marker' and the 'transform' + attributes on the 'g' and 'path' elements should not cause the mark (lime + 'circle') to be clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" + markerUnits="userSpaceOnUse" viewBox="-100 0 200 200"> + <g transform="translate(100, 0)"> + <circle fill="lime" r="100" cx="-100" cy="100"/> + </g> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <g transform="translate(100, 0)"> + <path d="M-100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)" transform="translate(100, 0)"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-08.svg b/layout/reftests/svg/filters/filter-marked-line-08.svg new file mode 100644 index 0000000000..58d4f9e983 --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-08.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + The combination of the 'viewBox' attribute on the 'marker' and the 'transform' + attributes on the 'g', 'path' and 'circle' elements should not cause the mark + (lime 'circle') to be clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" + markerUnits="userSpaceOnUse" viewBox="-100 0 200 200"> + <g transform="translate(100, 0)"> + <circle fill="lime" r="100" cx="-200" cy="100" transform="translate(100, 0)"/> + </g> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <g transform="translate(100, 0)"> + <path d="M-100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)" transform="translate(100, 0)"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-09.svg b/layout/reftests/svg/filters/filter-marked-line-09.svg new file mode 100644 index 0000000000..55ff716067 --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-09.svg @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + The combination of the 'viewBox' attribute on the 'marker' and the 'transform' + attributes on the 'g', 'path' and 'circle' elements should not cause the mark + (lime 'circle') to be clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" + markerUnits="userSpaceOnUse" viewBox="-100 0 200 200"> + <g transform="translate(100, 0)"> + <circle fill="lime" r="100" cx="-200" cy="100" transform="translate(100, 0)"/> + </g> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <g transform="translate(100, 0)"> + <g filter="url(#filter)"> + <path d="M-100,0 l100,100 200,200" marker-mid="url(#marker)" transform="translate(100, 0)"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-nested-filtering-01.svg b/layout/reftests/svg/filters/filter-nested-filtering-01.svg new file mode 100644 index 0000000000..57e1d1a65b --- /dev/null +++ b/layout/reftests/svg/filters/filter-nested-filtering-01.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=461863 --> + <desc> + This test checks that transforms and filtering a descendant of a + filtered element interact correctly. + </desc> + <filter id="a"><feGaussianBlur stdDeviation="0.001"/></filter> + <filter id="b"><feGaussianBlur stdDeviation="0.001"/></filter> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" cx="200" cy="200" r="98"/> + <g id="g" filter="url(#a)" transform="translate(100, 0)"> + <circle fill="lime" filter="url(#b)" cx="100" cy="200" r="100"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-nested-filtering-02.svg b/layout/reftests/svg/filters/filter-nested-filtering-02.svg new file mode 100644 index 0000000000..77de499799 --- /dev/null +++ b/layout/reftests/svg/filters/filter-nested-filtering-02.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=461863 --> + <desc> + This test checks that transforms and filtering a decedent of a + filtered element interact correctly. + </desc> + <filter id="a"><feGaussianBlur stdDeviation="0.001"/></filter> + <filter id="b"><feGaussianBlur stdDeviation="0.001"/></filter> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" cx="200" cy="200" r="98" transform="scale(1.2)"/> + <g id="g" filter="url(#a)" transform="scale(1.2) translate(100, 0)"> + <circle fill="lime" filter="url(#b)" cx="100" cy="200" r="100"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-patterned-rect-01.svg b/layout/reftests/svg/filters/filter-patterned-rect-01.svg new file mode 100644 index 0000000000..436d3648cf --- /dev/null +++ b/layout/reftests/svg/filters/filter-patterned-rect-01.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + Filtering the patterned 'rect' should not cause the pattern (lime + 'circle') to be clipped or misplaced due to bad interaction with + the transforms. + </desc> + <defs> + <pattern id="pattern" patternUnits="userSpaceOnUse" + x="0" y="0" width="200" height="200"> + <circle fill="lime" r="100" cx="100" cy="100"/> + </pattern> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <rect width="200" height="200" fill="url(#pattern)" filter="url(#filter)" transform="translate(100, 0)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-patterned-rect-02.svg b/layout/reftests/svg/filters/filter-patterned-rect-02.svg new file mode 100644 index 0000000000..f15baa4afc --- /dev/null +++ b/layout/reftests/svg/filters/filter-patterned-rect-02.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.0"> + <desc> + Filtering the patterned 'rect' should not cause the pattern (lime + 'circle') to be clipped or misplaced due to bad interaction with + the transforms. + </desc> + <defs> + <pattern id="pattern" patternUnits="userSpaceOnUse" + x="0" y="0" width="200" height="200"> + <circle fill="lime" r="100" cx="100" cy="100"/> + </pattern> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="300" cy="100"/> + <g transform="translate(100, 0)"> + <rect width="200" height="200" fill="url(#pattern)" filter="url(#filter)" transform="translate(100, 0)"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-region-01a.html b/layout/reftests/svg/filters/filter-region-01a.html new file mode 100644 index 0000000000..f66e9bd34d --- /dev/null +++ b/layout/reftests/svg/filters/filter-region-01a.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<body style="background-color: lime;"> +<svg width="0" height="0"> + <filter id="myFilter" filterUnits="objectBoundingBox" x="0" y="0" width="50%" height="50%"> + <feMerge> + <feMergeNode/> + </feMerge> + </filter> +</svg> + +<!-- This outer svg element should be totally covered by the next filtered outer svg element. --> +<svg style="position: fixed;" x="0" y ="0" width="120" height="120"> + <rect x="10" y="10" width="100" height="100" fill="red"/> +</svg> + +<svg filter="url(#myFilter)" style="position: fixed;" x="0" y ="0" width="240" height="240"> + <rect x="10" y="10" width="100" height="100" fill="lime"/> +</svg> + +</body>
\ No newline at end of file diff --git a/layout/reftests/svg/filters/filter-region-01b.html b/layout/reftests/svg/filters/filter-region-01b.html new file mode 100644 index 0000000000..21d5add6e3 --- /dev/null +++ b/layout/reftests/svg/filters/filter-region-01b.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<body style="background-color: lime;"> +<svg width="0" height="0"> + <filter id="myFilter" filterUnits="objectBoundingBox" x="0" y="0" width="50%" height="50%"> + <feMerge> + <feMergeNode/> + </feMerge> + </filter> +</svg> + +<svg style="position: fixed;" x="0" y ="0" width="400" height="400"> + <!-- This filtered inner element should be covered by the next outer svg element. --> + <svg filter="url(#myFilter)" style="position: fixed;" x="0" y ="0" width="200" height="200"> + <rect x="10" y="10" width="120" height="120" fill="red"/> + </svg> +</svg> + +<svg style="position: fixed;" x="0" y ="0" width="120" height="120"> + <rect x="10" y="10" width="100" height="100" fill="lime"/> +</svg> + +</body>
\ No newline at end of file diff --git a/layout/reftests/svg/filters/filter-transform-01.svg b/layout/reftests/svg/filters/filter-transform-01.svg new file mode 100644 index 0000000000..5536a14020 --- /dev/null +++ b/layout/reftests/svg/filters/filter-transform-01.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" style="background-color:lime" viewBox="-50 -50 100 100"> + <defs> + <filter id="blur"> + <feGaussianBlur stdDeviation="1"/> + </filter> + </defs> + + <circle r="15" fill="red" filter="url(#blur)" transform="rotate(45)"/> + <circle r="15" fill="red" filter="url(#blur)" transform="rotate(90)"/> + <circle r="15" fill="red" filter="url(#blur)" transform="skewX(0) skewY(0)"/> + <circle cx="-10" cy="-10" r="15" fill="red" filter="url(#blur)" transform="translate(10, 10)"/> + <circle cx="-10000" cy="-10000" r="15" fill="red" filter="url(#blur)" transform="translate(10000, 10000)"/> + <circle r="10" fill="red" filter="url(#blur)" transform="scale(1.5, 1.5)"/> + + <!-- The circles above should be completely covered by the next one. --> + <circle r="20" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/filters/mozilla-banner.gif b/layout/reftests/svg/filters/mozilla-banner.gif Binary files differnew file mode 100644 index 0000000000..dd0f077753 --- /dev/null +++ b/layout/reftests/svg/filters/mozilla-banner.gif diff --git a/layout/reftests/svg/filters/nested-filter-ref.html b/layout/reftests/svg/filters/nested-filter-ref.html new file mode 100644 index 0000000000..70ee403d7f --- /dev/null +++ b/layout/reftests/svg/filters/nested-filter-ref.html @@ -0,0 +1,14 @@ +<html style="background: red"> +<body> + <svg height="100px" width="100px"> + <g transform="translate(0, 25)">> + <defs> + <mask id="m" maskUnits="userSpaceOnUse"> + <rect x=10 y=10 width=51 height=45 fill="white"></rect> + </mask> + </defs> + <rect fill="yellow" x=0 y=0 width=100 height=100 mask="url(#m)"></rect> + </g> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/nested-filter.html b/layout/reftests/svg/filters/nested-filter.html new file mode 100644 index 0000000000..86407bc5c0 --- /dev/null +++ b/layout/reftests/svg/filters/nested-filter.html @@ -0,0 +1,23 @@ +<html style="background: red"> +<body> + <svg height="100px" width="100px"> + <defs> + <filter filterUnits="userSpaceOnUse" id="merge" color-interpolation-filters="sRGB"> + <feMerge> + <feMergeNode in="SourceGraphic"></feMergeNode> + </feMerge> + </filter> + </defs> + <g filter="url(#merge)"> + <g transform="translate(0, 25)">> + <defs> + <mask id="m" maskUnits="userSpaceOnUse"> + <rect x=10 y=10 width=51 height=45 fill="white"></rect> + </mask> + </defs> + <rect fill="yellow" x=0 y=0 width=100 height=100 mask="url(#m)"></rect> + </g> + </g> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-1.svg b/layout/reftests/svg/filters/outside-sourcegraphic-1.svg new file mode 100644 index 0000000000..f360aa12fd --- /dev/null +++ b/layout/reftests/svg/filters/outside-sourcegraphic-1.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <feFlood flood-color="lime"/> + </filter> + <rect width="100" height="100" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-2.svg b/layout/reftests/svg/filters/outside-sourcegraphic-2.svg new file mode 100644 index 0000000000..6699d620b9 --- /dev/null +++ b/layout/reftests/svg/filters/outside-sourcegraphic-2.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <feColorMatrix type="matrix" values="0 0 0 0 0 + 0 0 0 0 1 + 0 0 0 0 0 + 0 0 0 0 1"/> + </filter> + <rect width="100" height="100" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-3.svg b/layout/reftests/svg/filters/outside-sourcegraphic-3.svg new file mode 100644 index 0000000000..f8f6b36387 --- /dev/null +++ b/layout/reftests/svg/filters/outside-sourcegraphic-3.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 0" /> + <feFuncG type="table" tableValues="1 1" /> + <feFuncB type="table" tableValues="0 0" /> + <feFuncA type="table" tableValues="1 1" /> + </feComponentTransfer> + </filter> + <rect width="100" height="100" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-ref.svg b/layout/reftests/svg/filters/outside-sourcegraphic-ref.svg new file mode 100644 index 0000000000..a336d22158 --- /dev/null +++ b/layout/reftests/svg/filters/outside-sourcegraphic-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="200" height="200" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/filters/pass.svg b/layout/reftests/svg/filters/pass.svg new file mode 100644 index 0000000000..c09c6601e8 --- /dev/null +++ b/layout/reftests/svg/filters/pass.svg @@ -0,0 +1,8 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <title>Testcase reference file for generic pass condition</title> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/filters/reftest.list b/layout/reftests/svg/filters/reftest.list new file mode 100644 index 0000000000..9975eb190d --- /dev/null +++ b/layout/reftests/svg/filters/reftest.list @@ -0,0 +1,142 @@ +# In general, the fe*-1 tests test basic functionality clipped to a filter primitive +# subregion. The fe*-2 tests test with no clipping (which stresses +# the automatic optimal surface-size computation a bit more). + +# CSS filter tests +include css-filters/reftest.list + +# CSS filter chain tests +include css-filter-chains/reftest.list + +# Combined CSS and SVG filter chain tests +include css-svg-filter-chains/reftest.list + +# SVG filter chain tests +include svg-filter-chains/reftest.list + +== dynamic-filtered-foreignObject-01.svg pass.svg +== dynamic-filter-invalidation-01.svg pass.svg +== dynamic-filter-invalidation-02.svg pass.svg +== dynamic-filter-invalidation-03.svg pass.svg +== dynamic-filter-invalidation-04.svg pass.svg + +fuzzy(0-1,0-42500) == feBlend-1.svg feBlend-1-ref.svg +== feBlend-2.svg feBlend-2-ref.svg + +fuzzy(0-1,0-6400) == feColorMatrix-1.svg feColorMatrix-1-ref.svg +fuzzy(0-1,0-10000) == feColorMatrix-2.svg feColorMatrix-2-ref.svg + +== feComponentTransfer-1.svg feComponentTransfer-1-ref.svg +== feComponentTransfer-2.svg feComponentTransfer-2-ref.svg + +fuzzy(0-1,0-9600) == feComposite-1.svg feComposite-1-ref.svg +fuzzy(0-1,0-10000) == feComposite-2.svg feComposite-2-ref.svg + +== feConvolveMatrix-1.svg feConvolveMatrix-1-ref.svg +== feConvolveMatrix-2.svg feConvolveMatrix-2-ref.svg + +== feDisplacementMap-1.svg feDisplacementMap-1-ref.svg +== feDisplacementMap-2.svg feDisplacementMap-2-ref.svg + +fuzzy(0-1,0-1600) == feFlood-1.svg feFlood-1-ref.svg +skip-if(d2d) fuzzy(0-1,0-6400) == feFlood-2.svg feFlood-2-ref.svg + +fuzzy(0-2,0-6404) fuzzy-if(Android&&device&&!swgl,6-6,6400-6400) == feGaussianBlur-1.svg feGaussianBlur-1-ref.svg +fuzzy(0-2,0-304) == feGaussianBlur-2.svg feGaussianBlur-2-ref.svg +# != feGaussianBlur-3.svg feGaussianBlur-3-ref.svg +fuzzy-if(!useDrawSnapshot,2-5,4764-8168) fuzzy-if(Android&&device&&!swgl,5-5,8574-8574) == feGaussianBlur-4.svg feGaussianBlur-4-ref.svg +fuzzy-if(geckoview,0-4,0-200) == feGaussianBlur-5.svg feGaussianBlur-5-ref.svg +== feGaussianBlur-6.svg feGaussianBlur-6-ref.svg +skip-if(d2d) == feGaussianBlur-cap-large-directional-radius-on-software.html feGaussianBlur-cap-large-directional-radius-on-software-ref.html + +!= feImage-1.svg about:blank # (Make sure our image renders at all) +== feImage-1.svg feImage-1-ref.svg +== feImage-scale-to-primitive-subregion.html feImage-scale-to-primitive-subregion-ref.html + +== feMerge-1.svg feMerge-1-ref.svg +== feMerge-2.svg feMerge-2-ref.svg + +== feMorphology-1.svg feMorphology-1-ref.svg +== feMorphology-2.svg feMorphology-2-ref.svg + +== feOffset-1.svg feOffset-1-ref.svg +== feOffset-2.svg feOffset-2-ref.svg + +== feTile-1.svg feTile-1-ref.svg +== feTile-2.svg feTile-2-ref.svg + +# no tests for feTurbulence + +fuzzy-if(geckoview,0-36,0-220) == filter-clipped-rect-01.svg pass.svg +== filter-in-pattern-01.svg pass.svg +fuzzy(0-5,0-67) != filter-in-pattern-02.svg filter-in-pattern-02-ref.svg +random-if(winWidget) == filter-in-mask-01.svg pass.svg # bug 1356139 +== filter-in-mask-02.svg pass.svg +== filter-inner-svg-01.svg pass.svg +== filter-inner-svg-02.svg pass.svg +== filter-inner-svg-03.svg pass.svg +fails == filter-marked-line-01.svg pass.svg # bug 477704 +== filter-kernelUnitLength-01.svg filter-kernelUnitLength-01-ref.svg +== filter-marked-line-02.svg pass.svg +== filter-marked-line-03.svg pass.svg +== filter-marked-line-04.svg pass.svg +== filter-marked-line-05.svg pass.svg +== filter-marked-line-06.svg pass.svg +== filter-marked-line-07.svg pass.svg +== filter-marked-line-08.svg pass.svg +== filter-marked-line-09.svg pass.svg +== filter-nested-filtering-01.svg pass.svg +fuzzy(0-10,0-1200) == filter-nested-filtering-02.svg pass.svg +== filter-patterned-rect-01.svg pass.svg +== filter-patterned-rect-02.svg pass.svg +== filter-region-01a.html pass.svg +== filter-region-01b.html pass.svg +== filter-transform-01.svg pass.svg + +== feColorMatrix-saturate-01.svg pass.svg + +== feComponentTransfer-03.svg pass.svg +== feComponentTransfer-04.svg pass.svg +== feComposite-arguments-01.svg pass.svg +fuzzy-if(winWidget,0-1,0-39600) == feComposite-operator-lighter.svg feComposite-operator-lighter-ref.html +fuzzy(0-85,0-28600) == feComposite-paint-01.svg feComposite-paint-01-ref.svg +fuzzy(0-1,0-10000) == feConvolveMatrix-bias-01.svg feConvolveMatrix-bias-01-ref.svg +== feConvolveMatrix-order-01.svg feConvolveMatrix-order-01-ref.svg + +fuzzy(0-1,0-400) == feDisplacementMap-alpha-01.svg pass.svg +fuzzy(0-2,0-500) == feDisplacementMap-colour-01.svg feDisplacementMap-colour-01-ref.svg +== feDisplacementMap-scale-01.svg pass.svg + +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-2,0-25) fuzzy-if(!useDrawSnapshot,55-98,14033-16467) == feDropShadow-01.svg feDropShadow-01-ref.svg + +== feFlood-color-01.svg pass.svg + +fuzzy-if(!useDrawSnapshot||(winWidget&&isCoverageBuild),20-21,5540-5647) == feGaussianBlur-alpha-01.svg feGaussianBlur-alpha-01-ref.svg + +== feMorphology-radius-negative-01.svg pass.svg +== feMorphology-radius-negative-02.svg pass.svg +== feMorphology-radius-zero-01.svg pass.svg +== feMorphology-radius-zero-02.svg pass.svg + +== feTile-large-01.svg pass.svg +== feTile-large-02.svg feTile-large-02-ref.svg +== feTile-outside-01.svg feTile-outside-01-ref.svg + +fuzzy(0-1,0-219) == feDiffuseLighting-1.svg feDiffuseLighting-1-ref.svg + +fuzzy(0-2,0-2659) skip-if(d2d) == feSpecularLighting-1.svg feSpecularLighting-1-ref.svg + +== filter-lighting-region.svg filter-lighting-region-ref.svg + +fails-if(useDrawSnapshot) == fePointLight-zoomed-page.svg fePointLight-zoomed-page-ref.svg + +== feTurbulence-offset.svg feTurbulence-offset-ref.svg +fuzzy(0-1,0-10000) == feTurbulence-zero-baseFreq-01.svg feTurbulence-zero-baseFreq-01-ref.svg +!= feTurbulence-zero-baseFreq-02.svg about:blank + +== outside-sourcegraphic-1.svg outside-sourcegraphic-ref.svg +# These failures are caused by bug 1586055 +fails-if(!useDrawSnapshot) == outside-sourcegraphic-2.svg outside-sourcegraphic-ref.svg +fails-if(!useDrawSnapshot) == outside-sourcegraphic-3.svg outside-sourcegraphic-ref.svg +== nested-filter.html nested-filter-ref.html +== filter-giant.svg pass.svg diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-input-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-input-ref.svg new file mode 100644 index 0000000000..4939ce12ae --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/clip-input-ref.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Clip Input Filter</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <rect x="0" y="0" width="100" height="100" fill="green"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-input.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-input.svg new file mode 100644 index 0000000000..8dd2841add --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/clip-input.svg @@ -0,0 +1,52 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Clip Input Filter</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="clip-input-ref.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that a filter region clips a + SourceGraphic input filter. If the test passes, you should see a green + square. + </desc> + </g> + + <g id="test-body-content"> + <filter id="f1" x="100" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Create a red square at x=100. --> + <feFlood flood-color="red"/> + </filter> + <filter id="f2" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Create a green square at x=0. --> + <feFlood result="green" flood-color="green"/> + <!-- + Attempt to offset the red square left to cover up the green square. + However, this filter's filter region should clip away the red square, + and only transparent pixels should be offset left, leaving the green + square intact. + --> + <feOffset result="red" in="SourceGraphic" dx="-100" x="0" y="0" width="200" height="100"/> + <feMerge> + <feMergeNode in="green"/> + <feMergeNode in="red"/> + </feMerge> + </filter> + <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic-ref.svg new file mode 100644 index 0000000000..048dc64687 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic-ref.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Clip Original SourceGraphic</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <rect x="0" y="0" width="100" height="100" fill="green"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic.svg new file mode 100644 index 0000000000..f6349768ed --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic.svg @@ -0,0 +1,50 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Clip Original SourceGraphic</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="clip-original-SourceGraphic-ref.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that the filter region of the + first filter clips the original SourceGraphic. If the test passes, you + should see a green square. + </desc> + </g> + + <g id="test-body-content"> + <!-- + Use a filter region less wide than the red rectangle SourceGraphic. This + should clip the red rectangle, resulting in a red square. + --> + <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Create a green square at x=0. --> + <feFlood result="green" flood-color="green" x="0" y="0" width="100" height="100"/> + <!-- + Offset the red SourceGraphic left. If it wasn't clipped properly, it + will cover up the green square. If it was clipped properly, it won't. + --> + <feOffset result="offset-red" in="SourceGraphic" dx="-100" x="0" y="0" width="200" height="100"/> + <feMerge> + <feMergeNode in="green"/> + <feMergeNode in="offset-red"/> + </feMerge> + </filter> + <rect x="0" y="0" width="200" height="100" filter="url(#f1)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-output-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-output-ref.svg new file mode 100644 index 0000000000..26b6cc7f03 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/clip-output-ref.svg @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Clip Filter Output</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="hue-rotate"> + <!-- Turn the red square green. --> + <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/> + </filter> + <rect x="0" y="0" width="100" height="100" filter="url(#hue-rotate)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-output.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-output.svg new file mode 100644 index 0000000000..94d3a953ab --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/clip-output.svg @@ -0,0 +1,52 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Clip Filter Output</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="clip-output-ref.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies a filter region clips its + filter's output into the next filter. If the test passes, you should see a + green square. + </desc> + </g> + + <g id="test-body-content"> + <filter id="flood" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- + Create a red square followed by a blue square. The blue square should be + clipped away due to this filter's filter region. + --> + <feFlood result="red" flood-color="red" x="0" y="0" width="100" height="100"/> + <feFlood result="blue" flood-color="blue" x="100" y="0" width="100" height="100"/> + <feMerge> + <feMergeNode in="red"/> + <feMergeNode in="blue"/> + </feMerge> + </filter> + <filter id="hue-rotate" x="0" y="0" width="200" height="100" filterUnits="userSpaceOnUse"> + <!-- + Turn the red square green. If the blue square wasn't clipped by the + previous filter's filter region, it will turn red. + --> + <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/> + </filter> + <rect x="0" y="0" width="100" height="100" filter="url(#flood) url(#hue-rotate)"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/default-subregion-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/default-subregion-ref.svg new file mode 100644 index 0000000000..86d77e2008 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/default-subregion-ref.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Default Filter Primitive Subregion</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="f1" x="50" y="50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="10"/> + </filter> + <rect x="100" y="100" width="100" height="100" filter="url(#f1)" fill="green"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/default-subregion.svg b/layout/reftests/svg/filters/svg-filter-chains/default-subregion.svg new file mode 100644 index 0000000000..b175fe0a31 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/default-subregion.svg @@ -0,0 +1,48 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Default Filter Primitive Subregion</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="default-subregion-ref.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that the default filter + primitive subregion is equal to the filter region. If the test passes, + you should see a blurred green square. + </desc> + </g> + + <g id="test-body-content"> + <filter id="f1" x="100" y="100" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Fill a 100x100 square with green. --> + <feFlood flood-color="green"/> + </filter> + <filter id="f2" x="50" y="50" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- + This feGaussianBlur primitive blurs the 100x100 green square from the + previous filter. It does not explicitly define a filter primitive + subregion, so its subregion should equal the filter region. The filter + region has plenty of space for the blur outsets, so the blur should not + appear clipped. If the blur incorrectly uses a primitive subregion or + filter region from a previous filter, the blur may appear clipped. + --> + <feGaussianBlur stdDeviation="10"/> + </filter> + <rect x="100" y="100" width="100" height="100" filter="url(#f1) url(#f2)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions-ref.svg new file mode 100644 index 0000000000..fb405de255 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions-ref.svg @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Use Same FillPaint Input with Different Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="f1"> + <!-- Turn the red square into a green square. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="0" y="0" width="200" height="200" filter="url(#f1)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions.svg b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions.svg new file mode 100644 index 0000000000..57277b62d6 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions.svg @@ -0,0 +1,43 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Use Same FillPaint Input with Different Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="different-FillPaint-filter-regions-ref.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that a FillPaint input is large + enough to cover the largest filter region in the chain. If the test + passes, you should see a green square. + </desc> + </g> + + <g id="test-body-content"> + <!-- Use a small filter region. --> + <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a blue square. --> + <feColorMatrix in="FillPaint" type="hueRotate" values="180"/> + </filter> + <!-- Use a large filter region. --> + <filter id="f2" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a green square. --> + <feColorMatrix in="FillPaint" type="hueRotate" values="90"/> + </filter> + <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions-ref.svg new file mode 100644 index 0000000000..ecdff269c0 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions-ref.svg @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Use Same StrokePaint Input with Different Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="f1"> + <!-- Turn the red square into a green square. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="0" y="0" width="200" height="200" filter="url(#f1)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions.svg b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions.svg new file mode 100644 index 0000000000..2e0d1adb2b --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions.svg @@ -0,0 +1,43 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Use Same StrokePaint Input with Different Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="different-StrokePaint-filter-regions-ref.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that a StrokePaint input is large + enough to cover the largest filter region in the chain. If the test + passes, you should see a green square. + </desc> + </g> + + <g id="test-body-content"> + <!-- Use a small filter region. --> + <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a blue square. --> + <feColorMatrix in="StrokePaint" type="hueRotate" values="180"/> + </filter> + <!-- Use a large filter region. --> + <filter id="f2" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a green square. --> + <feColorMatrix in="StrokePaint" type="hueRotate" values="90"/> + </filter> + <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)" stroke="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives-ref.svg new file mode 100644 index 0000000000..214be69ea2 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives-ref.svg @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Don't Clip Primitives in Previous Filters to Subsequent Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a green square. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="0" y="0" width="100" height="100" filter="url(#f1)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives.svg b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives.svg new file mode 100644 index 0000000000..50b2be3a62 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives.svg @@ -0,0 +1,51 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Don't Clip Primitives in Previous Filters to Subsequent Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="dont-clip-previous-primitives.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that a second filter's filter + region does not clip the primitives inside a first filter. If the test + passes, you should see a green square. + </desc> + </g> + + <g id="test-body-content"> + <!-- Use a wide filter region. --> + <filter id="f1" x="0" y="0" width="200" height="100" filterUnits="userSpaceOnUse"> + <!-- Create a red square at x=100. --> + <feFlood flood-color="red" x="100" y="0" width="100" height="100"/> + <!-- Offset the red square left to x=0. --> + <feOffset dx="-100" x="0" y="0" width="200" height="100"/> + </filter> + <!-- + Use a less wide filter region. The intermediate results of the previous + filter do not fit in this filter region, but that shouldn't matter. The + previous filter's intermediate results should not be affected by this + filter region. The final result of the previous filter should fit in this + filter region. + --> + <filter id="f2" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a green square. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)" fill="blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions-ref.svg new file mode 100644 index 0000000000..2f97ca88ad --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions-ref.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Intersecting Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/> + </filter> + <rect x="100" y="100" width="100" height="100" filter="url(#hue-rotate)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions.svg b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions.svg new file mode 100644 index 0000000000..f9ff60aa2f --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions.svg @@ -0,0 +1,45 @@ +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Intersecting Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="intersecting-filter-regions-ref.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that filters with intersecting + filter regions render properly. If the test passes, you should see a green + square. + </desc> + </g> + + <g id="test-body-content"> + <filter id="flood" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- + This filter clips the SourceGraphic to its top left corner and fills it + with red. + --> + <feFlood flood-color="red"/> + </filter> + <filter id="hue-rotate" x="100" y="100" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- + This filter clips the output of the previous filter to the bottom right + corner, and it changes red into green. If the previous filter didn't run + or it didn't clip the SourceGraphic, this filter will change the + SourceGraphic's blue fill into red. + --> + <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/> + </filter> + <rect x="0" y="0" width="300" height="300" filter="url(#flood) url(#hue-rotate)" fill="blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/long-chain.svg b/layout/reftests/svg/filters/svg-filter-chains/long-chain.svg new file mode 100644 index 0000000000..00f0c9dc62 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/long-chain.svg @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="flood-with-yellow"> + <!-- Turn the black rect into a yellow rect. --> + <feFlood x="20" y="20" width="100" height="100" flood-color="#ffff00"/> + </filter> + <filter id="extract-red-channel"> + <!-- Turn the yellow rect into a red rect. --> + <feComponentTransfer x="0" y="0" width="120" height="120"> + <feFuncR type="identity"/> + <feFuncG type="table" tableValues="0 0"/> + <feFuncB type="table" tableValues="0 0"/> + <feFuncA type="identity"/> + </feComponentTransfer> + </filter> + <filter id="blur"> + <!-- Blur the red rect. --> + <feGaussianBlur stdDeviation="3" x="10" y="10" width="120" height="120"/> + </filter> + <filter id="hue-rotate"> + <!-- Turn the red rect into a green rect. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="20" y="20" width="100" height="100" filter="url(#flood-with-yellow) url(#extract-red-channel) url(#blur) url(#hue-rotate)"/> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/multiple-primitives-per-filter.svg b/layout/reftests/svg/filters/svg-filter-chains/multiple-primitives-per-filter.svg new file mode 100644 index 0000000000..9bdf8fe2c0 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/multiple-primitives-per-filter.svg @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="flood-with-red"> + <!-- Turn the black rect into a yellow rect. --> + <feFlood x="20" y="20" width="100" height="100" flood-color="#ffff00"/> + <!-- Turn the yellow rect into a red rect. --> + <feComponentTransfer x="0" y="0" width="120" height="120"> + <feFuncR type="identity"/> + <feFuncG type="table" tableValues="0 0"/> + <feFuncB type="table" tableValues="0 0"/> + <feFuncA type="identity"/> + </feComponentTransfer> + </filter> + <filter id="blur-and-hue-rotate"> + <!-- Blur the red rect. --> + <feGaussianBlur stdDeviation="3" x="10" y="10" width="120" height="120"/> + <!-- Turn the red rect into a green rect. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="20" y="20" width="100" height="100" filter="url(#flood-with-red) url(#blur-and-hue-rotate)"/> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/reftest.list b/layout/reftests/svg/filters/svg-filter-chains/reftest.list new file mode 100644 index 0000000000..12ddf9d8bb --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/reftest.list @@ -0,0 +1,16 @@ +# These tests verify that SVG filter chains behave properly. +# e.g. filter: url(#f1) url(#f2) url(#f3) + +== clip-input.svg clip-input-ref.svg +== clip-original-SourceGraphic.svg clip-original-SourceGraphic-ref.svg +== clip-output.svg clip-output-ref.svg +fuzzy(0-5,0-20300) fuzzy-if(Android&&device&&!swgl,5-5,21751-21751) == default-subregion.svg default-subregion-ref.svg +== different-FillPaint-filter-regions.svg different-FillPaint-filter-regions-ref.svg +== different-StrokePaint-filter-regions.svg different-StrokePaint-filter-regions-ref.svg +== dont-clip-previous-primitives.svg dont-clip-previous-primitives-ref.svg +== intersecting-filter-regions.svg intersecting-filter-regions-ref.svg +fuzzy-if(!useDrawSnapshot,9-9,5168-5536) fuzzy-if(!useDrawSnapshot&&swgl,7-7,13170-13184) fuzzy-if(Android&&device&&!swgl,8-8,12391-12391) == long-chain.svg simple-chain-ref.svg +fuzzy-if(!useDrawSnapshot,9-9,5168-5536) fuzzy-if(!useDrawSnapshot&&swgl,7-7,13170-13184) fuzzy-if(Android&&device&&!swgl,8-8,12391-12391) == multiple-primitives-per-filter.svg simple-chain-ref.svg +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-173) fuzzy-if(!useDrawSnapshot||(winWidget&&isCoverageBuild),9-9,5128-5496) fuzzy-if(!useDrawSnapshot&&swgl,7-7,12820-12830) fuzzy-if(Android&&device&&!swgl,8-8,12355-12355) == second-filter-uses-SourceAlpha.svg second-filter-uses-SourceAlpha-ref.svg +fuzzy-if(!useDrawSnapshot,9-9,5168-5536) fuzzy-if(!useDrawSnapshot&&swgl,7-7,13170-13180) fuzzy-if(Android&&device&&!swgl,8-8,12391-12391) == second-filter-uses-SourceGraphic.svg simple-chain-ref.svg +== simple-chain.svg simple-chain-ref.svg diff --git a/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha-ref.svg new file mode 100644 index 0000000000..e809e55bb3 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha-ref.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Second Filter Uses SourceAlpha</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="blur"> + <feGaussianBlur stdDeviation="3"/> + </filter> + <rect x="100" y="100" width="100" height="100" filter="url(#blur)" fill="#00ff00"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha.svg b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha.svg new file mode 100644 index 0000000000..474c9da14c --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha.svg @@ -0,0 +1,49 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Second Filter Uses SourceAlpha</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="second-filter-uses-SourceAlpha.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that a filter receives the + correct SourceAlpha input from the previous filter in the chain. If the + test passes, you should see a blurred green square. + </desc> + </g> + + <g id="test-body-content"> + <filter id="blur"> + <feGaussianBlur stdDeviation="3"/> + </filter> + <filter id="add-green"> + <!-- + This filter receives transparent black and the alpha channel of the + previous blur filter. Then, it adds to the green channel where the alpha + channel is set, resulting in a blurred green square. + --> + <feComponentTransfer in="SourceAlpha"> + <feFuncR type="identity"/> + <feFuncG type="table" tableValues="1 1"/> + <feFuncB type="identity"/> + <feFuncA type="identity"/> + </feComponentTransfer> + </filter> + <rect x="100" y="100" width="100" height="100" filter="url(#blur) url(#add-green)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceGraphic.svg b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceGraphic.svg new file mode 100644 index 0000000000..f8dc040b83 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceGraphic.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="blur"> + <!-- Blur the red rect. --> + <feGaussianBlur stdDeviation="3"/> + </filter> + <filter id="hue-rotate"> + <feFlood flood-color="#0000ff"/> + <!-- Turn the red rect into a green rect. feColorMatrix should use the + result of the #blur filter, not feFlood, as its SourceGraphic. --> + <feColorMatrix in="SourceGraphic" type="hueRotate" values="90"/> + </filter> + <rect x="20" y="20" width="100" height="100" fill="#ff0000" filter="url(#blur) url(#hue-rotate)"/> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/simple-chain-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/simple-chain-ref.svg new file mode 100644 index 0000000000..4194849054 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/simple-chain-ref.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- Test multiple SVG filters chained together against a single SVG filter. --> + <filter id="blur-and-hue-rotate"> + <!-- Blur the red rect. --> + <feGaussianBlur stdDeviation="3"/> + <!-- Turn the red rect into a green rect. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="20" y="20" width="100" height="100" fill="#ff0000" filter="url(#blur-and-hue-rotate)"/> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/simple-chain.svg b/layout/reftests/svg/filters/svg-filter-chains/simple-chain.svg new file mode 100644 index 0000000000..e391bf8e03 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/simple-chain.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="blur"> + <!-- Blur the red rect. --> + <feGaussianBlur stdDeviation="3"/> + </filter> + <filter id="hue-rotate"> + <!-- Turn the red rect into a green rect. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="20" y="20" width="100" height="100" fill="#ff0000" filter="url(#blur) url(#hue-rotate)"/> +</svg> |
