зеркало из 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-rad.html hue-rotate-rad-ref.html
|
||||||
== hue-rotate-turn.html hue-rotate-turn-ref.html
|
== hue-rotate-turn.html hue-rotate-turn-ref.html
|
||||||
== hue-rotate-zero.html hue-rotate-zero-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
|
== saturate.html saturate-ref.html
|
||||||
fuzzy-if(d2d,1,10000) == saturate-desaturate.html saturate-desaturate-ref.html
|
fuzzy-if(d2d,1,10000) == saturate-desaturate.html saturate-desaturate-ref.html
|
||||||
== saturate-extreme.html saturate-extreme-ref.html
|
== saturate-extreme.html saturate-extreme-ref.html
|
||||||
|
|
|
||||||
|
|
@ -67,7 +67,9 @@ nsCSSFilterInstance::BuildPrimitives(nsTArray<FilterPrimitiveDescription>& aPrim
|
||||||
result = SetAttributesForHueRotate(descr);
|
result = SetAttributesForHueRotate(descr);
|
||||||
break;
|
break;
|
||||||
case NS_STYLE_FILTER_INVERT:
|
case NS_STYLE_FILTER_INVERT:
|
||||||
return NS_ERROR_NOT_IMPLEMENTED;
|
descr = CreatePrimitiveDescription(PrimitiveType::ComponentTransfer, aPrimitiveDescrs);
|
||||||
|
result = SetAttributesForInvert(descr);
|
||||||
|
break;
|
||||||
case NS_STYLE_FILTER_OPACITY:
|
case NS_STYLE_FILTER_OPACITY:
|
||||||
return NS_ERROR_NOT_IMPLEMENTED;
|
return NS_ERROR_NOT_IMPLEMENTED;
|
||||||
case NS_STYLE_FILTER_SATURATE:
|
case NS_STYLE_FILTER_SATURATE:
|
||||||
|
|
@ -177,6 +179,33 @@ nsCSSFilterInstance::SetAttributesForHueRotate(FilterPrimitiveDescription& aDesc
|
||||||
return NS_OK;
|
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
|
nsresult
|
||||||
nsCSSFilterInstance::SetAttributesForSaturate(FilterPrimitiveDescription& aDescr)
|
nsCSSFilterInstance::SetAttributesForSaturate(FilterPrimitiveDescription& aDescr)
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -66,6 +66,7 @@ private:
|
||||||
nsresult SetAttributesForDropShadow(FilterPrimitiveDescription& aDescr);
|
nsresult SetAttributesForDropShadow(FilterPrimitiveDescription& aDescr);
|
||||||
nsresult SetAttributesForGrayscale(FilterPrimitiveDescription& aDescr);
|
nsresult SetAttributesForGrayscale(FilterPrimitiveDescription& aDescr);
|
||||||
nsresult SetAttributesForHueRotate(FilterPrimitiveDescription& aDescr);
|
nsresult SetAttributesForHueRotate(FilterPrimitiveDescription& aDescr);
|
||||||
|
nsresult SetAttributesForInvert(FilterPrimitiveDescription& aDescr);
|
||||||
nsresult SetAttributesForSaturate(FilterPrimitiveDescription& aDescr);
|
nsresult SetAttributesForSaturate(FilterPrimitiveDescription& aDescr);
|
||||||
nsresult SetAttributesForSepia(FilterPrimitiveDescription& aDescr);
|
nsresult SetAttributesForSepia(FilterPrimitiveDescription& aDescr);
|
||||||
|
|
||||||
|
|
|
||||||
Загрузка…
Ссылка в новой задаче