Bug 948265 - Add CSS hue-rotate filter to nsCSSFilterInstance. r=mstange,dbaron

This commit is contained in:
Max Vujovic 2014-08-20 15:46:59 -07:00
parent 8ad88b4ab5
commit 7a521db165
21 changed files with 494 additions and 1 deletions

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

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

View File

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

View File

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

View File

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

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

View File

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

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

View File

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

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

View File

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

View File

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

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

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

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

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

View File

@ -10,3 +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
== 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
== 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

View File

@ -202,6 +202,12 @@ void nsStyleCoord::SetNoneValue()
// accessors that are not inlined
double
nsStyleCoord::GetAngleValueInDegrees() const
{
return GetAngleValueInRadians() * (180.0 / M_PI);
}
double
nsStyleCoord::GetAngleValueInRadians() const
{

View File

@ -153,6 +153,7 @@ public:
float GetPercentValue() const;
float GetFactorValue() const;
float GetAngleValue() const;
double GetAngleValueInDegrees() const;
double GetAngleValueInRadians() const;
float GetFlexFractionValue() const;
Calc* GetCalcValue() const;

View File

@ -49,7 +49,9 @@ nsCSSFilterInstance::BuildPrimitives(nsTArray<FilterPrimitiveDescription>& aPrim
case NS_STYLE_FILTER_GRAYSCALE:
return NS_ERROR_NOT_IMPLEMENTED;
case NS_STYLE_FILTER_HUE_ROTATE:
return NS_ERROR_NOT_IMPLEMENTED;
descr = CreatePrimitiveDescription(PrimitiveType::ColorMatrix, aPrimitiveDescrs);
result = SetAttributesForHueRotate(descr);
break;
case NS_STYLE_FILTER_INVERT:
return NS_ERROR_NOT_IMPLEMENTED;
case NS_STYLE_FILTER_OPACITY:
@ -129,6 +131,20 @@ nsCSSFilterInstance::SetAttributesForDropShadow(FilterPrimitiveDescription& aDes
return NS_OK;
}
nsresult
nsCSSFilterInstance::SetAttributesForHueRotate(FilterPrimitiveDescription& aDescr)
{
// Set color matrix type.
aDescr.Attributes().Set(eColorMatrixType, (uint32_t)SVG_FECOLORMATRIX_TYPE_HUE_ROTATE);
// Set color matrix values.
const nsStyleCoord& styleValue = mFilter.GetFilterParameter();
float value = styleValue.GetAngleValueInDegrees();
aDescr.Attributes().Set(eColorMatrixValues, &value, 1);
return NS_OK;
}
Size
nsCSSFilterInstance::BlurRadiusToFilterSpace(nscoord aRadiusInFrameSpace)
{

View File

@ -64,6 +64,7 @@ private:
*/
nsresult SetAttributesForBlur(FilterPrimitiveDescription& aDescr);
nsresult SetAttributesForDropShadow(FilterPrimitiveDescription& aDescr);
nsresult SetAttributesForHueRotate(FilterPrimitiveDescription& aDescr);
/**
* Returns the index of the last result in the aPrimitiveDescrs, which we'll