зеркало из https://github.com/mozilla/gecko-dev.git
Bug 948265 - Add CSS invert filter to nsCSSFilterInstance. r=mstange
This commit is contained in:
Max Vujovic
Родитель
afcde02ab2
Коммит
8f2b88b966
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -23,6 +23,12 @@ fuzzy-if(d2d,1,10000) == grayscale-percent.html grayscale-percent-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-if(d2d,1,10000) == invert.html invert-ref.html
|
||||
== invert-half.html invert-half-ref.html
|
||||
== invert-one.html invert-one-ref.html
|
||||
== invert-over-one.html invert-over-one-ref.html
|
||||
fuzzy-if(d2d,1,10000) == invert-percent.html invert-percent-ref.html
|
||||
== invert-zero.html invert-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
|
||||
|
|
|
|||
|
|
@ -67,7 +67,9 @@ nsCSSFilterInstance::BuildPrimitives(nsTArray<FilterPrimitiveDescription>& aPrim
|
|||
result = SetAttributesForHueRotate(descr);
|
||||
break;
|
||||
case NS_STYLE_FILTER_INVERT:
|
||||
return NS_ERROR_NOT_IMPLEMENTED;
|
||||
descr = CreatePrimitiveDescription(PrimitiveType::ComponentTransfer, aPrimitiveDescrs);
|
||||
result = SetAttributesForInvert(descr);
|
||||
break;
|
||||
case NS_STYLE_FILTER_OPACITY:
|
||||
return NS_ERROR_NOT_IMPLEMENTED;
|
||||
case NS_STYLE_FILTER_SATURATE:
|
||||
|
|
@ -177,6 +179,33 @@ nsCSSFilterInstance::SetAttributesForHueRotate(FilterPrimitiveDescription& aDesc
|
|||
return NS_OK;
|
||||
}
|
||||
|
||||
nsresult
|
||||
nsCSSFilterInstance::SetAttributesForInvert(FilterPrimitiveDescription& aDescr)
|
||||
{
|
||||
const nsStyleCoord& styleValue = mFilter.GetFilterParameter();
|
||||
float value = ClampFactor(styleValue.GetFactorOrPercentValue());
|
||||
|
||||
// Set transfer functions for RGB.
|
||||
AttributeMap invertAttrs;
|
||||
float invertTableValues[2];
|
||||
invertTableValues[0] = value;
|
||||
invertTableValues[1] = 1 - value;
|
||||
invertAttrs.Set(eComponentTransferFunctionType,
|
||||
(uint32_t)SVG_FECOMPONENTTRANSFER_TYPE_TABLE);
|
||||
invertAttrs.Set(eComponentTransferFunctionTableValues, invertTableValues, 2);
|
||||
aDescr.Attributes().Set(eComponentTransferFunctionR, invertAttrs);
|
||||
aDescr.Attributes().Set(eComponentTransferFunctionG, invertAttrs);
|
||||
aDescr.Attributes().Set(eComponentTransferFunctionB, invertAttrs);
|
||||
|
||||
// Set identity transfer function for A.
|
||||
AttributeMap identityAttrs;
|
||||
identityAttrs.Set(eComponentTransferFunctionType,
|
||||
(uint32_t)SVG_FECOMPONENTTRANSFER_TYPE_IDENTITY);
|
||||
aDescr.Attributes().Set(eComponentTransferFunctionA, identityAttrs);
|
||||
|
||||
return NS_OK;
|
||||
}
|
||||
|
||||
nsresult
|
||||
nsCSSFilterInstance::SetAttributesForSaturate(FilterPrimitiveDescription& aDescr)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@ private:
|
|||
nsresult SetAttributesForDropShadow(FilterPrimitiveDescription& aDescr);
|
||||
nsresult SetAttributesForGrayscale(FilterPrimitiveDescription& aDescr);
|
||||
nsresult SetAttributesForHueRotate(FilterPrimitiveDescription& aDescr);
|
||||
nsresult SetAttributesForInvert(FilterPrimitiveDescription& aDescr);
|
||||
nsresult SetAttributesForSaturate(FilterPrimitiveDescription& aDescr);
|
||||
nsresult SetAttributesForSepia(FilterPrimitiveDescription& aDescr);
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче