зеркало из https://github.com/mozilla/gecko-dev.git
Bug 272288 Patch 5: Add some more <svg:image> reftests. r=roc a=tests
--HG-- rename : layout/reftests/svg/image/blueRect10x10-viewBox.svg => layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg rename : layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg => layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg rename : layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg => layout/reftests/svg/image/image-preserveAspectRatio-03.svg rename : layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg => layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg rename : layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg => layout/reftests/svg/image/image-preserveAspectRatio-04.svg
This commit is contained in:
Daniel Holbert
Родитель
315d58c8d6
Коммит
7974525065
|
|
@ -0,0 +1,8 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
|
||||
width="100" height="20"
|
||||
viewBox="0 0 100 20">
|
||||
<!-- animated value for preserveAspectRatio: -->
|
||||
<set attributeName="preserveAspectRatio" to="xMaxYMax slice"/>
|
||||
<rect x="2" y="2" width="96" height="16"
|
||||
style="stroke-width: 4; fill:lime; stroke: teal"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 335 B |
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
|
||||
width="100" height="20"
|
||||
viewBox="0 0 100 20"
|
||||
preserveAspectRatio="xMaxYMax slice"> <!-- static pAR value -->
|
||||
<rect x="2" y="2" width="96" height="16"
|
||||
style="stroke-width: 4; fill:lime; stroke: teal"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 287 B |
|
|
@ -0,0 +1,42 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="300" height="200">
|
||||
<!-- FIRST COLUMN: image "a" (has animated preserveAspectRatio val) -->
|
||||
<g>
|
||||
<g>
|
||||
<image xlink:href="img-and-image-1-helper-a.svg" width="100" height="40"
|
||||
preserveAspectRatio="xMinYMin slice"/>
|
||||
</g>
|
||||
<g transform="translate(0,50)">
|
||||
<image xlink:href="img-and-image-1-helper-a.svg" width="100" height="40"
|
||||
preserveAspectRatio="none"/>
|
||||
</g>
|
||||
<g transform="translate(0,100)">
|
||||
<image xlink:href="img-and-image-1-helper-a.svg" width="80" height="40"
|
||||
preserveAspectRatio="xMaxYMax meet"/>
|
||||
</g>
|
||||
<g transform="translate(0,150)">
|
||||
<image xlink:href="img-and-image-1-helper-a.svg" width="80" height="40"
|
||||
preserveAspectRatio="defer xMinYMin meet"/>
|
||||
</g>
|
||||
</g>
|
||||
<!-- SECOND COLUMN: image "b" (has static preserveAspectRatio val) -->
|
||||
<g transform="translate(150,0)">
|
||||
<g>
|
||||
<image xlink:href="img-and-image-1-helper-b.svg" width="100" height="40"
|
||||
preserveAspectRatio="xMinYMin slice"/>
|
||||
</g>
|
||||
<g transform="translate(0,50)">
|
||||
<image xlink:href="img-and-image-1-helper-b.svg" width="100" height="40"
|
||||
preserveAspectRatio="none"/>
|
||||
</g>
|
||||
<g transform="translate(0,100)">
|
||||
<image xlink:href="img-and-image-1-helper-b.svg" width="80" height="40"
|
||||
preserveAspectRatio="xMaxYMax meet"/>
|
||||
</g>
|
||||
<g transform="translate(0,150)">
|
||||
<image xlink:href="img-and-image-1-helper-b.svg" width="80" height="40"
|
||||
preserveAspectRatio="defer xMinYMin meet"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.6 KiB |
|
|
@ -0,0 +1,43 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<!-- The rect that's used everywhere -->
|
||||
<rect id="rect" x="2" y="2" width="96" height="16"
|
||||
style="stroke-width: 4; fill:lime; stroke: teal"/>
|
||||
|
||||
<!-- Symbols with the testcases' preserveAspectRatio values applied -->
|
||||
<symbol id="pAR_xMinYMin_slice"
|
||||
viewBox="0 0 100 20" preserveAspectRatio="xMinYMin slice">
|
||||
<use xlink:href="#rect"/>
|
||||
</symbol>
|
||||
<symbol id="pAR_none"
|
||||
viewBox="0 0 100 20" preserveAspectRatio="none">
|
||||
<use xlink:href="#rect"/>
|
||||
</symbol>
|
||||
<symbol id="pAR_xMaxYMax_meet"
|
||||
viewBox="0 0 100 20" preserveAspectRatio="xMaxYMax meet">
|
||||
<use xlink:href="#rect"/>
|
||||
</symbol>
|
||||
<symbol id="pAR_xMaxYMax_slice"
|
||||
viewBox="0 0 100 20" preserveAspectRatio="xMaxYMax slice">
|
||||
<!-- this one corresponds to 'defer' in the image used in the testcase,
|
||||
as well as to the HTML <img> elements (which don't bring their own
|
||||
preserveAspectRatio value) -->
|
||||
<use xlink:href="#rect"/>
|
||||
</symbol>
|
||||
|
||||
<!-- Single column from the testcase -->
|
||||
<g id="column">
|
||||
<use y="0" xlink:href="#pAR_xMaxYMax_slice" width="60" height="20"/>
|
||||
<use y="50" xlink:href="#pAR_xMinYMin_slice" width="100" height="40"/>
|
||||
<use y="100" xlink:href="#pAR_none" width="100" height="40"/>
|
||||
<use y="150" xlink:href="#pAR_xMaxYMax_meet" width="80" height="40"/>
|
||||
<use y="200" xlink:href="#pAR_xMaxYMax_slice" width="80" height="40"/>
|
||||
<use y="250" xlink:href="#pAR_xMaxYMax_slice" width="30" height="50"/>
|
||||
</g>
|
||||
</defs>
|
||||
|
||||
<!-- Rendered output: 2 instances of our column (defined above) -->
|
||||
<use xlink:href="#column"/>
|
||||
<use x="150" xlink:href="#column"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 1.8 KiB |
|
|
@ -0,0 +1,24 @@
|
|||
<html>
|
||||
<head>
|
||||
<style>
|
||||
img { position: absolute; }
|
||||
</style>
|
||||
</head>
|
||||
<body style="margin: 0">
|
||||
<!-- Use the base images "a" and "b" first -->
|
||||
<img src="img-and-image-1-helper-a.svg"
|
||||
style="left: 0; top: 0; width: 60px; height: 20px">
|
||||
<img src="img-and-image-1-helper-b.svg"
|
||||
style="left: 150px; top: 0; width: 60px; height: 20px">
|
||||
|
||||
<!-- Now, use an SVG image "c", which itself uses both base images. -->
|
||||
<img src="img-and-image-1-helper-c.svg"
|
||||
style="left: 0; top: 50px; width: 300px; height: 200px">
|
||||
|
||||
<!-- And finally, use "a" and "b" again, but now with a different size. -->
|
||||
<img src="img-and-image-1-helper-a.svg"
|
||||
style="left: 0; top: 250px; width: 30px; height: 50px">
|
||||
<img src="img-and-image-1-helper-b.svg"
|
||||
style="left: 150px; top: 250px; width: 30px; height: 50px">
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -50,6 +50,11 @@ fails == canvas-drawImage-slice-1b.html lime100x100-ref.html # XXX all edges fuz
|
|||
== img-simple-6.html lime100x100-ref.html
|
||||
== img-simple-7.html lime100x100-ref.html
|
||||
|
||||
# Test with mix of <html:img> and <svg:image> referring to the same images,
|
||||
# with a variety of preserveAspectRatio values in play.
|
||||
# NOTE: The reference cases in this test triggers 72 assertions (bug 563481)
|
||||
asserts(72) == img-and-image-1.html img-and-image-1-ref.svg
|
||||
|
||||
# More complex <img> tests
|
||||
random-if(gtk2Widget) == img-anim-1.html lime100x100-ref.html # bug 612214
|
||||
== img-content-outside-viewBox-1.html img-content-outside-viewBox-1-ref.html
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<!-- Helper SVG file used by some reftests -->
|
||||
<!-- This file has an animated preserveAspectRatio value on the root node, so
|
||||
any uses of this file via <image preserveAspectRatio="defer..."> should
|
||||
end up using our *animated* preserveAspectRatio value. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="root"
|
||||
viewBox="0 0 10 10" preserveAspectRatio="xMaxYMax">
|
||||
<set attributeName="preserveAspectRatio" to="none"/>
|
||||
|
||||
<rect x="0" y="0" width="10" height="10" fill="blue"/>
|
||||
<rect x="1" y="1" width="8" height="8" fill="lightblue"/>
|
||||
<rect x="1" y="1" width="8" height="4" fill="teal"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 628 B |
|
|
@ -0,0 +1,13 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<script xlink:href="util.js" type="text/javascript"/>
|
||||
<script>
|
||||
// My corresponding testcase uses an image with preserveAspectRatio
|
||||
// set to "none" via SMIL animation. So the testcase's final bonus
|
||||
// "defer" grid-entry will end up rendering with that "none" value.
|
||||
var grid = generateSymbolGrid("blueRect10x10.svg#root", 40, 20,
|
||||
"none");
|
||||
grid.setAttribute("transform", "translate(10, 10)");
|
||||
document.documentElement.appendChild(grid);
|
||||
</script>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 607 B |
|
|
@ -0,0 +1,13 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<script xlink:href="util.js" type="text/javascript"/>
|
||||
<script>
|
||||
// This image has a preserveAspectRatio attribute (animated into
|
||||
// existence), so the bonus image element will use that value
|
||||
// because of the "defer" in its preserveAspectRatio.
|
||||
var grid = generateImageGrid("blueRect10x10-viewBox-animPAR.svg", 40, 20,
|
||||
"defer xMinYMin");
|
||||
grid.setAttribute("transform", "translate(10, 10)");
|
||||
document.documentElement.appendChild(grid);
|
||||
</script>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 603 B |
|
|
@ -0,0 +1,14 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<script xlink:href="util.js" type="text/javascript"/>
|
||||
<script>
|
||||
// My corresponding testcase uses an image with no preserveAspectRatio on
|
||||
// its root node. So, the testcase's final bonus "defer" grid-entry will
|
||||
// fall back on the preserveAspectRatio value that comes along with
|
||||
// "defer" (which is "xMinYMin slice" in this case).
|
||||
var grid = generateSymbolGrid("blueRect10x10.svg#root", 40, 20,
|
||||
"xMinYMin slice");
|
||||
grid.setAttribute("transform", "translate(10, 10)");
|
||||
document.documentElement.appendChild(grid);
|
||||
</script>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 686 B |
|
|
@ -0,0 +1,13 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<script xlink:href="util.js" type="text/javascript"/>
|
||||
<script>
|
||||
// This image has no preserveAspectRatio attribute, so in the bonus
|
||||
// image element, we'll actually apply the value that comes along with
|
||||
// "defer" ("xMinYMin slice").
|
||||
var grid = generateImageGrid("blueRect10x10-viewBox.svg", 40, 20,
|
||||
"defer xMinYMin slice");
|
||||
grid.setAttribute("transform", "translate(10, 10)");
|
||||
document.documentElement.appendChild(grid);
|
||||
</script>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 590 B |
|
|
@ -19,9 +19,11 @@
|
|||
== image-zoom-02.svg image-zoom-02-ref.svg
|
||||
|
||||
# Tests for <image> with preserveAspectRatio
|
||||
# NOTE: The reference cases in the following tests trigger 20 assertions each
|
||||
# NOTE: The reference cases in the following tests trigger 20+ assertions each
|
||||
# (1 per <symbol> element), due to bug 563481.
|
||||
asserts(20) == image-preserveAspectRatio-01-raster.svg image-preserveAspectRatio-01-ref.svg
|
||||
asserts(20) == image-preserveAspectRatio-01-svg.svg image-preserveAspectRatio-01-ref.svg
|
||||
asserts(20) == image-preserveAspectRatio-02-raster.svg image-preserveAspectRatio-02-ref.svg
|
||||
asserts(20) == image-preserveAspectRatio-02-svg.svg image-preserveAspectRatio-02-ref.svg
|
||||
asserts(21) == image-preserveAspectRatio-03.svg image-preserveAspectRatio-03-ref.svg
|
||||
asserts(21) == image-preserveAspectRatio-04.svg image-preserveAspectRatio-04-ref.svg
|
||||
|
|
|
|||
|
|
@ -82,7 +82,10 @@ function generateImageElementForParams(aX, aY, aWidth, aHeight,
|
|||
// Returns a <g> element filled with a grid of <image> elements which each
|
||||
// have the specified aWidth & aHeight and which use all possible values of
|
||||
// preserveAspectRatio.
|
||||
function generateImageGrid(aHref, aWidth, aHeight) {
|
||||
//
|
||||
// The final "aBonusPARVal" argument (if specified) is used as the
|
||||
// preserveAspectRatio value on a bonus <image> element, added at the end.
|
||||
function generateImageGrid(aHref, aWidth, aHeight, aBonusPARVal) {
|
||||
var grid = document.createElementNS(SVGNS, "g");
|
||||
var y = 0;
|
||||
var x = 0;
|
||||
|
|
@ -105,6 +108,18 @@ function generateImageGrid(aHref, aWidth, aHeight) {
|
|||
x += IMAGE_OFFSET;
|
||||
}
|
||||
}
|
||||
|
||||
if (aBonusPARVal) {
|
||||
// Add one final entry with "bonus" pAR value.
|
||||
y += IMAGE_OFFSET;
|
||||
x = 0;
|
||||
var border = generateBorderRect(x, y, aWidth, aHeight);
|
||||
var image = generateImageElementForParams(x, y, aWidth, aHeight,
|
||||
aHref, aBonusPARVal, "");
|
||||
grid.appendChild(border);
|
||||
grid.appendChild(image);
|
||||
}
|
||||
|
||||
return grid;
|
||||
}
|
||||
|
||||
|
|
@ -136,11 +151,15 @@ function generateUseElementForParams(aTargetURI, aX, aY, aWidth, aHeight) {
|
|||
use.setAttribute("height", aHeight);
|
||||
return use;
|
||||
}
|
||||
|
||||
// Returns a <g> element filled with a grid of <use> elements which each
|
||||
// have the specified aWidth & aHeight and which reference <symbol> elements
|
||||
// with all possible values of preserveAspectRatio. Each <symbol> contains
|
||||
// a <use> that links to the given URI, aHref.
|
||||
function generateSymbolGrid(aHref, aWidth, aHeight) {
|
||||
//
|
||||
// The final "aBonusPARVal" argument (if specified) is used as the
|
||||
// preserveAspectRatio value on a bonus <symbol> element, added at the end.
|
||||
function generateSymbolGrid(aHref, aWidth, aHeight, aBonusPARVal) {
|
||||
var grid = document.createElementNS(SVGNS, "g");
|
||||
var y = 0;
|
||||
var x = 0;
|
||||
|
|
@ -167,5 +186,21 @@ function generateSymbolGrid(aHref, aWidth, aHeight) {
|
|||
x += IMAGE_OFFSET;
|
||||
}
|
||||
}
|
||||
|
||||
if (aBonusPARVal) {
|
||||
// Add one final entry with "bonus" pAR value.
|
||||
y += IMAGE_OFFSET;
|
||||
x = 0;
|
||||
var border = generateBorderRect(x, y, aWidth, aHeight);
|
||||
var symbolID = "symbol_Bonus";
|
||||
var symbol = generateSymbolElementForParams(symbolID, aHref,
|
||||
aBonusPARVal, "");
|
||||
var use = generateUseElementForParams("#" + symbolID,
|
||||
x, y, aWidth, aHeight);
|
||||
grid.appendChild(symbol); // This isn't painted
|
||||
grid.appendChild(border);
|
||||
grid.appendChild(use);
|
||||
}
|
||||
|
||||
return grid;
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче