diff options
Diffstat (limited to 'layout/reftests/svg/filters/css-filter-chains')
7 files changed, 194 insertions, 0 deletions
diff --git a/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html b/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html new file mode 100644 index 0000000000..573c6e419d --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filter Chains: Long Filter Chain</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + /* The first 8 CSS filter functions result in this color. */ + background-color: rgba(118, 153, 44, 0.8); + /* Use an equivalent SVG filter for the last 2 CSS filter functions. */ + filter: url(#blur-and-drop-shadow); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square with a green drop shadow.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur-and-drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + <feDropShadow dx="10" dy="10" stdDeviation="10" flood-color="#0f0" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filter-chains/long-chain.html b/layout/reftests/svg/filters/css-filter-chains/long-chain.html new file mode 100644 index 0000000000..b99468eee2 --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/long-chain.html @@ -0,0 +1,41 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filter Chains: Long Filter Chain</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty"> + <link rel="match" href="long-chain-ref.html"> + <meta name="assert" + content="Multiple chained CSS filter functions of different types should + render correctly."> + <style type="text/css"> + #target { + /* + Chain together all 10 CSS filter functions defined in the Filter Effects + Level 1 specification. + */ + filter: brightness(2) + contrast(0.4) + grayscale(0.2) + hue-rotate(270deg) + invert(0.6) + opacity(0.8) + saturate(10) + sepia(0.4) + blur(3px) + drop-shadow(10px 10px 10px #0f0); + background-color: red; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square with a green drop shadow.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html b/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html new file mode 100644 index 0000000000..a769783b2b --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters Chains: Use a Filtered Element as the Background of Another Element</title> + <style type="text/css"> + #src { + background-color: #0f0; + width: 100px; + height: 100px; + } + #dest { + margin-top: 10px; + background: #0f0; + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>You should see a small green square followed by a large green square.</p> + <div id="src"></div> + <div id="dest"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filter-chains/moz-element.html b/layout/reftests/svg/filters/css-filter-chains/moz-element.html new file mode 100644 index 0000000000..245f6a6464 --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/moz-element.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters Chains: Use a Filtered Element as the Background of Another Element</title> + <style type="text/css"> + #src { + filter: hue-rotate(90deg) saturate(10); + background-color: #f00; + width: 100px; + height: 100px; + } + #dest { + margin-top: 10px; + background: -moz-element(#src); + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>You should see a small green square followed by a large green square.</p> + <div id="src"></div> + <div id="dest"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filter-chains/reftest.list b/layout/reftests/svg/filters/css-filter-chains/reftest.list new file mode 100644 index 0000000000..bb66b5041c --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/reftest.list @@ -0,0 +1,7 @@ +# These tests verify that CSS filter chains behave properly. +# e.g. filter: blur(3px) grayscale(0.5) invert(0.2); + +# Some platforms render this complex filter chain a little differently, and that's ok. +fuzzy(4-6,12000-19950) fuzzy-if(swgl,5-10,13600-20260) fuzzy-if(Android&&device&&!swgl,6-6,19986-19986) == long-chain.html long-chain-ref.html # Win10: Bug 1258241 +== moz-element.html moz-element-ref.html +fuzzy-if(!useDrawSnapshot,13-15,7670-7982) fuzzy-if(!useDrawSnapshot&&swgl,11-12,14052-14056) fuzzy-if(Android&&device&&!swgl,13-13,13505-13505) == same-filter.html same-filter-ref.html diff --git a/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html b/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html new file mode 100644 index 0000000000..ff5de04da9 --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filter Chains: Filters of the Same Type</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#blur); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="1" color-interpolation-filters="sRGB"/> + <feGaussianBlur stdDeviation="2" color-interpolation-filters="sRGB"/> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filter-chains/same-filter.html b/layout/reftests/svg/filters/css-filter-chains/same-filter.html new file mode 100644 index 0000000000..9dd79d4db4 --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/same-filter.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filter Chains: Filters of the Same Type</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty"> + <link rel="match" href="same-filter-ref.html"> + <meta name="assert" + content="Multiple chained CSS filter functions of the same type should + render correctly."> + <style type="text/css"> + #target { + filter: blur(1px) blur(2px) blur(3px); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> |