Bug 1486252 - Resolve mask-image url value as an image even if it contains reference. r=heycam

The corresponding handling code in the old style system can be found in:
https://dxr.mozilla.org/mozilla-esr60/rev/dd52b41d2b775e5c7261ce52795268b7670635fc/layout/style/nsCSSDataBlock.cpp#65-106

mask-iage-url-hash.html is the test that don't pass without this change.

Differential Revision: https://phabricator.services.mozilla.com/D4831

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Xidorn Quan 2018-09-03 01:02:04 +00:00
Родитель fca9213cd0
Коммит 1f1e9d35b0
10 изменённых файлов: 3552 добавлений и 6145 удалений

Просмотреть файл

@ -1320,18 +1320,30 @@ nsStyleSVGReset::FinishStyle(nsPresContext* aPresContext, const nsStyleSVGReset*
NS_FOR_VISIBLE_IMAGE_LAYERS_BACK_TO_FRONT(i, mMask) {
nsStyleImage& image = mMask.mLayers[i].mImage;
if (image.GetType() == eStyleImageType_Image) {
// If the url of mask resource contains a reference('#'), it should be a
// <mask-source>, mostly. For a <mask-source>, there is no need to
// resolve this style image, since we do not depend on it to get the
// SVG mask resource.
if (!image.GetURLValue()->HasRef()) {
const nsStyleImage* oldImage =
(aOldStyle && aOldStyle->mMask.mLayers.Length() > i)
? &aOldStyle->mMask.mLayers[i].mImage
: nullptr;
image.ResolveImage(aPresContext, oldImage);
URLValueData* url = image.GetURLValue();
// If the url is a local ref, it must be a <mask-resource>, so we don't
// need to resolve the style image.
if (url->IsLocalRef()) {
continue;
}
#if 0
// XXX The old style system also checks whether this is a reference to
// the current document with reference, but it doesn't seem to be a
// behavior mentioned anywhere, so we comment out the code for now.
nsIURI* docURI = aPresContext->Document()->GetDocumentURI();
if (url->EqualsExceptRef(docURI)) {
continue;
}
#endif
// Otherwise, we may need the image even if it has a reference, in case
// the referenced element isn't a valid SVG <mask> element.
const nsStyleImage* oldImage =
(aOldStyle && aOldStyle->mMask.mLayers.Length() > i)
? &aOldStyle->mMask.mLayers[i].mImage
: nullptr;
image.ResolveImage(aPresContext, oldImage);
}
}
}

Разница между файлами не показана из-за своего большого размера Загрузить разницу

Просмотреть файл

@ -0,0 +1,28 @@
<!DOCTYPE html>
<title>CSS Test: mask-image: url(image.svg#hash)</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image">
<link rel="match" href="reference/mask-image-ref.html">
<meta name="assert" content="mask-image can use an SVG file as an image with element reference">
<style>
#back {
position: absolute;
box-sizing: border-box;
width: 200px;
height: 200px;
border: 60px solid green;
background: red;
}
#front {
position: absolute;
box-sizing: border-box;
width: 200px;
height: 200px;
border: 40px solid red;
background: green;
mask-image: url(support/image-with-ref.svg#ref);
}
</style>
<p>The test passes if there is a green square and no red below.</p>
<div id="back"></div><div id="front"></div>

Просмотреть файл

@ -0,0 +1,28 @@
<!DOCTYPE html>
<title>CSS Test: mask-image: url(image.svg)</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image">
<link rel="match" href="reference/mask-image-ref.html">
<meta name="assert" content="mask-image can use an SVG file as an image">
<style>
#back {
position: absolute;
box-sizing: border-box;
width: 200px;
height: 200px;
border: 60px solid green;
background: red;
}
#front {
position: absolute;
box-sizing: border-box;
width: 200px;
height: 200px;
border: 40px solid red;
background: green;
mask-image: url(support/image.svg);
}
</style>
<p>The test passes if there is a green square and no red below.</p>
<div id="back"></div><div id="front"></div>

Просмотреть файл

@ -0,0 +1,33 @@
<!DOCTYPE html>
<title>CSS Test: mask-image: url(#local-mask)</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image">
<link rel="match" href="reference/mask-image-ref.html">
<meta name="assert" content="mask-image can use local reference to a &lt;mask&gt; element">
<style>
#back {
position: absolute;
box-sizing: border-box;
width: 200px;
height: 200px;
border: 60px solid green;
background: red;
}
#front {
position: absolute;
box-sizing: border-box;
width: 200px;
height: 200px;
border: 40px solid red;
background: green;
mask-image: url(#localmask);
}
</style>
<p>The test passes if there is a green square and no red below.</p>
<div id="back"></div><div id="front"></div>
<svg viewBox="0 0 200 200" style="width: 0; height: 0">
<mask id="localmask">
<rect x="50" y="50" width="100" height="100" fill="white">
</mask>
</svg>

Просмотреть файл

@ -0,0 +1,28 @@
<!DOCTYPE html>
<title>CSS Test: mask-image: url(remote.svg#mask)</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#mask-layer-image">
<link rel="match" href="reference/mask-image-ref.html">
<meta name="assert" content="mask-image can use reference to a &lt;mask&gt; element from a remote SVG document">
<style>
#back {
position: absolute;
box-sizing: border-box;
width: 200px;
height: 200px;
border: 60px solid green;
background: red;
}
#front {
position: absolute;
box-sizing: border-box;
width: 200px;
height: 200px;
border: 40px solid red;
background: green;
mask-image: url(support/mask.svg#mask);
}
</style>
<p>The test passes if there is a green square and no red below.</p>
<div id="back"></div><div id="front"></div>

Просмотреть файл

@ -0,0 +1,14 @@
<!DOCTYPE html>
<title>CSS Reference: mask-image</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<style>
#ref {
position: absolute;
width: 200px;
height: 200px;
background: green;
}
</style>
<p>The test passes if there is a green square and no red below.</p>
<div id="ref"></div>

Просмотреть файл

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<style>
g { display: none; }
g:target { display: inline; }
</style>
<g id="ref">
<rect x="50" y="50" width="100" height="100" fill="black"/>
</g>
</svg>

После

Ширина:  |  Высота:  |  Размер: 236 B

Просмотреть файл

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<rect x="50" y="50" width="100" height="100" fill="black"/>
</svg>

После

Ширина:  |  Высота:  |  Размер: 132 B

Просмотреть файл

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<mask id="mask">
<rect x="50" y="50" width="100" height="100" fill="white"/>
</mask>
</svg>

После

Ширина:  |  Высота:  |  Размер: 163 B