diff options
Diffstat (limited to '')
133 files changed, 3523 insertions, 0 deletions
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> |
