Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-13 03:24:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Max Vujovic 2014-08-21 10:17:09 -07:00
parent 848cafcf7b
commit bb851682eb
13 changed files with 285 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
layout/reftests/svg/filters/css-filters/grayscale-one-ref.html Normal file
View File

@ -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>

28
layout/reftests/svg/filters/css-filters/grayscale-one.html Normal file
View File

@ -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>

22
layout/reftests/svg/filters/css-filters/grayscale-over-one-ref.html Normal file
View File

@ -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>

28
layout/reftests/svg/filters/css-filters/grayscale-over-one.html Normal file
View File

@ -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>

22
layout/reftests/svg/filters/css-filters/grayscale-percent-ref.html Normal file
View File

@ -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>

28
layout/reftests/svg/filters/css-filters/grayscale-percent.html Normal file
View File

@ -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>

22
layout/reftests/svg/filters/css-filters/grayscale-ref.html Normal file
View File

@ -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>

22
layout/reftests/svg/filters/css-filters/grayscale-zero-ref.html Normal file
View File

@ -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>

28
layout/reftests/svg/filters/css-filters/grayscale-zero.html Normal file
View File

@ -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>

28
layout/reftests/svg/filters/css-filters/grayscale.html Normal file
View File

@ -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>

5
layout/reftests/svg/filters/css-filters/reftest.list
View File

@ -10,6 +10,11 @@ default-preferences pref(layout.css.filters.enabled,true)
== drop-shadow.html drop-shadow-ref.html
== drop-shadow-default-color.html drop-shadow-default-color-ref.html
== drop-shadow-negative-offset.html drop-shadow-negative-offset-ref.html
fuzzy-if(d2d,1,10000) == grayscale.html grayscale-ref.html
fuzzy-if(d2d,1,10000) == grayscale-one.html grayscale-one-ref.html
fuzzy-if(d2d,1,10000) == grayscale-over-one.html grayscale-over-one-ref.html
fuzzy-if(d2d,1,10000) == grayscale-percent.html grayscale-percent-ref.html
== grayscale-zero.html grayscale-zero-ref.html
== hue-rotate.html hue-rotate-ref.html
== hue-rotate-360.html hue-rotate-360-ref.html
== hue-rotate-grad.html hue-rotate-grad-ref.html

30
layout/svg/nsCSSFilterInstance.cpp
View File

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

1
layout/svg/nsCSSFilterInstance.h
View File

@ -64,6 +64,7 @@ private:
*/
nsresult SetAttributesForBlur(FilterPrimitiveDescription& aDescr);
nsresult SetAttributesForDropShadow(FilterPrimitiveDescription& aDescr);
nsresult SetAttributesForGrayscale(FilterPrimitiveDescription& aDescr);
nsresult SetAttributesForHueRotate(FilterPrimitiveDescription& aDescr);
nsresult SetAttributesForSaturate(FilterPrimitiveDescription& aDescr);