зеркало из https://github.com/mozilla/gecko-dev.git
Bug 948265 - Add CSS saturate filter to nsCSSFilterInstance. r=mstange,dbaron
This commit is contained in:
Max Vujovic
Родитель
e9ea912b18
Коммит
4c4ed2fc92
|
|
@ -18,3 +18,9 @@ default-preferences pref(layout.css.filters.enabled,true)
|
|||
== 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
|
||||
== saturate.html saturate-ref.html
|
||||
fuzzy-if(d2d,1,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(d2d,1,10000) == saturate-zero.html 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</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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -152,6 +152,7 @@ public:
|
|||
int32_t GetIntValue() const;
|
||||
float GetPercentValue() const;
|
||||
float GetFactorValue() const;
|
||||
float GetFactorOrPercentValue() const;
|
||||
float GetAngleValue() const;
|
||||
double GetAngleValueInDegrees() const;
|
||||
double GetAngleValueInRadians() const;
|
||||
|
|
@ -334,6 +335,16 @@ inline float nsStyleCoord::GetFactorValue() const
|
|||
return 0.0f;
|
||||
}
|
||||
|
||||
inline float nsStyleCoord::GetFactorOrPercentValue() const
|
||||
{
|
||||
NS_ASSERTION(mUnit == eStyleUnit_Factor || mUnit == eStyleUnit_Percent,
|
||||
"not a percent or factor value");
|
||||
if (mUnit == eStyleUnit_Factor || mUnit == eStyleUnit_Percent) {
|
||||
return mValue.mFloat;
|
||||
}
|
||||
return 0.0f;
|
||||
}
|
||||
|
||||
inline float nsStyleCoord::GetAngleValue() const
|
||||
{
|
||||
NS_ASSERTION(mUnit >= eStyleUnit_Degree &&
|
||||
|
|
|
|||
|
|
@ -57,7 +57,9 @@ nsCSSFilterInstance::BuildPrimitives(nsTArray<FilterPrimitiveDescription>& aPrim
|
|||
case NS_STYLE_FILTER_OPACITY:
|
||||
return NS_ERROR_NOT_IMPLEMENTED;
|
||||
case NS_STYLE_FILTER_SATURATE:
|
||||
return NS_ERROR_NOT_IMPLEMENTED;
|
||||
descr = CreatePrimitiveDescription(PrimitiveType::ColorMatrix, aPrimitiveDescrs);
|
||||
result = SetAttributesForSaturate(descr);
|
||||
break;
|
||||
case NS_STYLE_FILTER_SEPIA:
|
||||
return NS_ERROR_NOT_IMPLEMENTED;
|
||||
default:
|
||||
|
|
@ -145,6 +147,20 @@ nsCSSFilterInstance::SetAttributesForHueRotate(FilterPrimitiveDescription& aDesc
|
|||
return NS_OK;
|
||||
}
|
||||
|
||||
nsresult
|
||||
nsCSSFilterInstance::SetAttributesForSaturate(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 = styleValue.GetFactorOrPercentValue();
|
||||
aDescr.Attributes().Set(eColorMatrixValues, &value, 1);
|
||||
|
||||
return NS_OK;
|
||||
}
|
||||
|
||||
Size
|
||||
nsCSSFilterInstance::BlurRadiusToFilterSpace(nscoord aRadiusInFrameSpace)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -65,6 +65,7 @@ private:
|
|||
nsresult SetAttributesForBlur(FilterPrimitiveDescription& aDescr);
|
||||
nsresult SetAttributesForDropShadow(FilterPrimitiveDescription& aDescr);
|
||||
nsresult SetAttributesForHueRotate(FilterPrimitiveDescription& aDescr);
|
||||
nsresult SetAttributesForSaturate(FilterPrimitiveDescription& aDescr);
|
||||
|
||||
/**
|
||||
* Returns the index of the last result in the aPrimitiveDescrs, which we'll
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче