wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 276431 Patch 15: Reftests for svg-as-an-image. r=roc a=blocking

Browse Source
This commit is contained in:
Daniel Holbert 2010-09-08 13:40:40 -07:00
parent 66639dce30
commit ef5baeebc0
60 changed files with 929 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
layout/reftests/svg/image/background-image-rect-1png.html Normal file
View File

@ -0,0 +1,8 @@
<html>
<body>
<div style="height: 100px; width: 100px;
background-image: -moz-image-rect(url('limeInRed100x100.png'),
25,75,75,25)">
</div>
</body>
</html>

8
layout/reftests/svg/image/background-image-rect-1svg.html Normal file
View File

@ -0,0 +1,8 @@
<html>
<body>
<div style="height: 100px; width: 100px;
background-image: -moz-image-rect(url('limeInRed100x100.svg'),
25,75,75,25)">
</div>
</body>
</html>

8
layout/reftests/svg/image/background-image-rect-2.html Normal file
View File

@ -0,0 +1,8 @@
<html>
<body>
<div style="height: 100px; width: 100px;
background-image: -moz-image-rect(url('lime100x100.svg'),
0,100,100,0)">
</div>
</body>
</html>

6
layout/reftests/svg/image/background-simple-1.html Normal file
View File

@ -0,0 +1,6 @@
<html>
<body>
<div style="height: 100px; width: 100px;
background-image: url('lime100x100.svg')">
</body>
</html>

6
layout/reftests/svg/image/background-simple-2.html Normal file
View File

@ -0,0 +1,6 @@
<html>
<body>
<div style="height: 100px; width: 100px;
background-image: url('limeInRed100x100-viewBox.svg')">
</body>
</html>

7
layout/reftests/svg/image/background-viewBox-1.html Normal file
View File

@ -0,0 +1,7 @@
<html>
<body>
<div style="height: 100px; width: 100px;
background-image: url('limeInRed100x100-viewBox.svg')">
</div>
</body>
</html>

11
layout/reftests/svg/image/content-outside-viewBox-1-helper.svg Normal file
View File

@ -0,0 +1,11 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 100 100"
preserveAspectRatio="xMinYMin meet">
<rect width="100" height="100" fill="lime"/>
<!-- Rect to the right of viewBox -->
<rect x="300" width="100" height="100" fill="blue"/>
<!-- Rect below viewBox -->
<rect y="300" width="100" height="100" fill="purple"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 361 B

15
layout/reftests/svg/image/img-content-outside-viewBox-1-ref.html Normal file
View File

@ -0,0 +1,15 @@
<html>
<style>
div.rect { width: 10px; height: 10px; display: inline-block }
</style>
<body>
<div style="width: 100px; border: 1px solid blue">
<div class="rect" style="background: lime"></div
><div class="rect" style="background: blue; margin-left: 20px"></div>
</div>
<div style="width: 10px; height: 100px; border: 1px solid purple">
<div class="rect" style="background: lime"></div>
<div class="rect" style="background: purple; margin-top: 20px"></div>
</div>
</body>
</html>

14
layout/reftests/svg/image/img-content-outside-viewBox-1.html Normal file
View File

@ -0,0 +1,14 @@
<html>
<!-- Simple test to make sure we can display content outside of an SVG viewbox,
if appropriate given the SVG image & our <img> dimensions. In this case,
we have a perfect-square viewBox, but our img elements are long
rectangles, so they should end up sampling some content off of one side or
the other of the viewBox. -->
<body>
<img src="content-outside-viewBox-1-helper.svg" height="10" width="100"
style="border: 1px solid blue">
<br/>
<img src="content-outside-viewBox-1-helper.svg" height="100" width="10"
style="border: 1px solid purple ">
</body>
</html>

21
layout/reftests/svg/image/img-height-meet-1-ref.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 20, 40],
height : "20px",
meetOrSlice: "meet"
};
appendSVGArrayWithParams(svgParams, "embed");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

21
layout/reftests/svg/image/img-height-meet-1.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 20, 40],
height : "20px",
meetOrSlice: "meet"
};
appendSVGArrayWithParams(svgParams, "img");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

21
layout/reftests/svg/image/img-height-meet-2-ref.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 40, 20],
height : "2em",
meetOrSlice: "meet"
};
appendSVGArrayWithParams(svgParams, "embed");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

21
layout/reftests/svg/image/img-height-meet-2.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 40, 20],
height : "2em",
meetOrSlice: "meet"
};
appendSVGArrayWithParams(svgParams, "img");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

21
layout/reftests/svg/image/img-height-slice-1-ref.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 20, 40],
height : "20px",
meetOrSlice: "slice"
};
appendSVGArrayWithParams(svgParams, "embed");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

21
layout/reftests/svg/image/img-height-slice-1.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 20, 40],
height : "20px",
meetOrSlice: "slice"
};
appendSVGArrayWithParams(svgParams, "img");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

21
layout/reftests/svg/image/img-height-slice-2-ref.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 40, 20],
height : "2em",
meetOrSlice: "slice"
};
appendSVGArrayWithParams(svgParams, "embed");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

21
layout/reftests/svg/image/img-height-slice-2.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 40, 20],
height : "2em",
meetOrSlice: "slice"
};
appendSVGArrayWithParams(svgParams, "img");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

5
layout/reftests/svg/image/img-simple-1.html Normal file
View File

@ -0,0 +1,5 @@
<html>
<body>
<img src="lime100x100.svg">
</body>
</html>

5
layout/reftests/svg/image/img-simple-2.html Normal file
View File

@ -0,0 +1,5 @@
<html>
<body>
<img src="limeInRed100x100-viewBox.svg">
</body>
</html>

9
layout/reftests/svg/image/img-simple-3.html Normal file
View File

@ -0,0 +1,9 @@
<html>
<body>
<!-- Note: Despite the large width here, the SVG content won't scale, because
it hasn't provided a viewbox. It renders at a 100% zoom-level (just as
it would in an <embed> tag, and just as it would if we viewed it in a
100x600-sized browser window. -->
<img src="lime100x100.svg" width="600px">
</body>
</html>

5
layout/reftests/svg/image/img-simple-4.html Normal file
View File

@ -0,0 +1,5 @@
<html>
<body>
<img src="lime100x100.svg" height="100px" width="100px">
</body>
</html>

5
layout/reftests/svg/image/img-simple-5.html Normal file
View File

@ -0,0 +1,5 @@
<html>
<body>
<img src="lime100x100.svg" width="150px" height="600px">
</body>
</html>

5
layout/reftests/svg/image/img-simple-6.html Normal file
View File

@ -0,0 +1,5 @@
<html>
<body>
<img src="lime200x200.svg" width="100px">
</body>
</html>

6
layout/reftests/svg/image/img-simple-7.html Normal file
View File

@ -0,0 +1,6 @@
<html>
<body>
<!-- Like img-simple-6.html, but with an explicit 'height' on the <img> -->
<img src="lime200x100.svg" width="100px" height="100px">
</body>
</html>

21
layout/reftests/svg/image/img-width-meet-1-ref.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 20, 40],
width : "20px",
meetOrSlice: "meet"
};
appendSVGArrayWithParams(svgParams, "embed");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

21
layout/reftests/svg/image/img-width-meet-1.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 20, 40],
width : "20px",
meetOrSlice: "meet"
};
appendSVGArrayWithParams(svgParams, "img");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

21
layout/reftests/svg/image/img-width-meet-2-ref.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 40, 20],
width : "2em",
meetOrSlice: "meet"
};
appendSVGArrayWithParams(svgParams, "embed");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

21
layout/reftests/svg/image/img-width-meet-2.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 40, 20],
width : "2em",
meetOrSlice: "meet"
};
appendSVGArrayWithParams(svgParams, "img");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

21
layout/reftests/svg/image/img-width-slice-1-ref.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 20, 40],
width : "20px",
meetOrSlice: "slice"
};
appendSVGArrayWithParams(svgParams, "embed");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

21
layout/reftests/svg/image/img-width-slice-1.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 20, 40],
width : "20px",
meetOrSlice: "slice"
};
appendSVGArrayWithParams(svgParams, "img");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

21
layout/reftests/svg/image/img-width-slice-2-ref.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 40, 20],
width : "2em",
meetOrSlice: "slice"
};
appendSVGArrayWithParams(svgParams, "embed");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

21
layout/reftests/svg/image/img-width-slice-2.html Normal file
View File

@ -0,0 +1,21 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 40, 20],
width : "2em",
meetOrSlice: "slice"
};
appendSVGArrayWithParams(svgParams, "img");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

22
layout/reftests/svg/image/img-widthAndHeight-meet-1-ref.html Normal file
View File

@ -0,0 +1,22 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 20, 40],
height : "20px",
width : "20px",
meetOrSlice: "meet"
};
appendSVGArrayWithParams(svgParams, "embed");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

22
layout/reftests/svg/image/img-widthAndHeight-meet-1.html Normal file
View File

@ -0,0 +1,22 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 20, 40],
height : "20px",
width : "20px",
meetOrSlice: "meet"
};
appendSVGArrayWithParams(svgParams, "img");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

22
layout/reftests/svg/image/img-widthAndHeight-meet-2-ref.html Normal file
View File

@ -0,0 +1,22 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 40, 20],
height : "2em",
width : "2em",
meetOrSlice: "meet"
};
appendSVGArrayWithParams(svgParams, "embed");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

22
layout/reftests/svg/image/img-widthAndHeight-meet-2.html Normal file
View File

@ -0,0 +1,22 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 40, 20],
height : "2em",
width : "2em",
meetOrSlice: "meet"
};
appendSVGArrayWithParams(svgParams, "img");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

22
layout/reftests/svg/image/img-widthAndHeight-slice-1-ref.html Normal file
View File

@ -0,0 +1,22 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 20, 40],
height : "20px",
width : "20px",
meetOrSlice: "slice"
};
appendSVGArrayWithParams(svgParams, "embed");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

22
layout/reftests/svg/image/img-widthAndHeight-slice-1.html Normal file
View File

@ -0,0 +1,22 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 20, 40],
height : "20px",
width : "20px",
meetOrSlice: "slice"
};
appendSVGArrayWithParams(svgParams, "img");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

22
layout/reftests/svg/image/img-widthAndHeight-slice-2-ref.html Normal file
View File

@ -0,0 +1,22 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 40, 20],
height : "2em",
width : "2em",
meetOrSlice: "slice"
};
appendSVGArrayWithParams(svgParams, "embed");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

22
layout/reftests/svg/image/img-widthAndHeight-slice-2.html Normal file
View File

@ -0,0 +1,22 @@
<html class="reftest-wait">
<head>
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
<script src="svg-image-util.js"></script>
<script>
function main() {
var svgParams = {
viewBox: [0, 0, 40, 20],
height : "2em",
width : "2em",
meetOrSlice: "slice"
};
appendSVGArrayWithParams(svgParams, "img");
document.documentElement.removeAttribute("class");
}
</script>
</head>
<body onload="main()">
<!-- Body gets populated by script -->
</body>
</html>

5
layout/reftests/svg/image/lime100x100-ref.html Normal file
View File

@ -0,0 +1,5 @@
<html>
<body>
<div style="width: 100px; height: 100px; background: lime"></div>
</body>
</html>

BIN
layout/reftests/svg/image/lime100x100.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 B

4
layout/reftests/svg/image/lime100x100.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100" height="100">
<rect width="100%" height="100%" fill="lime"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 141 B

4
layout/reftests/svg/image/lime200x100.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="200" height="100">
<rect width="200px" height="100px" fill="lime"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 143 B

4
layout/reftests/svg/image/lime200x200.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="200" height="200">
<rect width="200px" height="200px" fill="lime"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 143 B

5
layout/reftests/svg/image/limeInRed100x100-viewBox.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100" height="100" viewBox="25 25 50 50">
<rect width="100" height="100" fill="red"/>
<rect x="25" y="25" width="50" height="50" fill="lime"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 219 B

BIN
layout/reftests/svg/image/limeInRed100x100.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 292 B

5
layout/reftests/svg/image/limeInRed100x100.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="100" height="100">
<rect width="100%" height="100%" fill="red"/>
<rect x="25" y="25" width="50" height="50" fill="lime"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 199 B

8
layout/reftests/svg/image/list-simple-1-ref.html Normal file
View File

@ -0,0 +1,8 @@
<html>
<body style="margin-left: 100px">
<ul style="list-style-image: url('lime100x100.png')">
<li>abc
<li>def
</ul>
</body>
</html>

8
layout/reftests/svg/image/list-simple-1.html Normal file
View File

@ -0,0 +1,8 @@
<html>
<body style="margin-left: 100px">
<ul style="list-style-image: url('lime100x100.svg')">
<li>abc
<li>def
</ul>
</body>
</html>

44
layout/reftests/svg/image/reftest.list Normal file
View File

@ -0,0 +1,44 @@
# Tests related to SVG being used as an image
# zoom/
include zoom/reftest.list
# Trivial background-image tests
== background-simple-1.html lime100x100-ref.html
== background-simple-2.html lime100x100-ref.html
# Sightly trickier background-image test
== background-viewBox-1.html lime100x100-ref.html
# Tests with -moz-image-rect()
== background-image-rect-1svg.html lime100x100-ref.html
== background-image-rect-1png.html lime100x100-ref.html
== background-image-rect-2.html lime100x100-ref.html
# Simple <img> tests
== img-simple-1.html lime100x100-ref.html
== img-simple-2.html lime100x100-ref.html
== img-simple-3.html lime100x100-ref.html
== img-simple-4.html lime100x100-ref.html
== img-simple-5.html lime100x100-ref.html
== img-simple-6.html lime100x100-ref.html
== img-simple-7.html lime100x100-ref.html
== img-content-outside-viewBox-1.html img-content-outside-viewBox-1-ref.html
== img-widthAndHeight-meet-1.html img-widthAndHeight-meet-1-ref.html
== img-widthAndHeight-meet-2.html img-widthAndHeight-meet-2-ref.html
== img-widthAndHeight-slice-1.html img-widthAndHeight-slice-1-ref.html
== img-widthAndHeight-slice-2.html img-widthAndHeight-slice-2-ref.html
== img-height-meet-1.html img-height-meet-1-ref.html
== img-height-meet-2.html img-height-meet-2-ref.html
== img-height-slice-1.html img-height-slice-1-ref.html
== img-height-slice-2.html img-height-slice-2-ref.html
== img-width-meet-1.html img-width-meet-1-ref.html
== img-width-meet-2.html img-width-meet-2-ref.html
== img-width-slice-1.html img-width-slice-1-ref.html
== img-width-slice-2.html img-width-slice-2-ref.html
== list-simple-1.html list-simple-1-ref.html

3
layout/reftests/svg/image/svg-image-util.css Normal file
View File

@ -0,0 +1,3 @@
body { margin: 0px; }
img { background: purple; border: 5px solid green}
embed { background: purple; border: 5px solid green}

169
layout/reftests/svg/image/svg-image-util.js Normal file
View File

@ -0,0 +1,169 @@
/* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
* The Original Code is SVG Testing Code.
*
* The Initial Developer of the Original Code is
* the Mozilla Foundation.
* Portions created by the Initial Developer are Copyright (C) 2010
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Daniel Holbert <dholbert@mozilla.com> (original author)
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
* in which case the provisions of the GPL or the LGPL are applicable instead
* of those above. If you wish to allow use of your version of this file only
* under the terms of either the GPL or the LGPL, and not to allow others to
* use your version of this file under the terms of the MPL, indicate your
* decision by deleting the provisions above and replace them with the notice
* and other provisions required by the GPL or the LGPL. If you do not delete
* the provisions above, a recipient may use your version of this file under
* the terms of any one of the MPL, the GPL or the LGPL.
*
* ***** END LICENSE BLOCK ***** */
// Standard values to use for <img>/<embed> height & width, if requested.
var HOST_NODE_HEIGHT = "20";
var HOST_NODE_WIDTH = "30";
// All the possible values of "align"
const ALIGN_VALS = ["none",
"xMinYMin", "xMinYMid", "xMinYMax",
"xMidYMin", "xMidYMid", "xMidYMax",
"xMaxYMin", "xMaxYMid", "xMaxYMax"];
// All the possible values of "meetOrSlice"
const MEETORSLICE_VALS = [ "meet", "slice" ];
/**
* Generates full data URI for an SVG document, with the given parameters
* on the SVG element.
*
* @param aViewboxArr An array of four numbers, representing the viewBox
* attribute, or null for no viewBox.
* @param aWidth The width attribute, or null for no width.
* @param aHeight The height attribute, or null for no height.
* @param aAlign The 'align' component of the preserveAspectRatio
* attribute, or null for none.
* @param aMeetOrSlice The 'meetOrSlice' component of the
* preserveAspectRatio attribute, or null for
* none. (If non-null, implies non-null value for
* aAlign.)
*/
function generateSVGDataURI(aViewboxArr, aWidth, aHeight,
aAlign, aMeetOrSlice) {
// prefix
var datauri = "data:image/svg+xml,"
// Begin the SVG tag
datauri += "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22";
// Append the custom chunk from our params
datauri += generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight,
aAlign, aMeetOrSlice);
// Put closing leftbracket on SVG tag
datauri += "%3E";
// Add the rest of the SVG document
datauri += "%3Crect%20x%3D%221%22%20y%3D%221%22%20height%3D%2218%22%20width%3D%2218%22%20stroke-width%3D%222%22%20stroke%3D%22black%22%20fill%3D%22yellow%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%228%22%20style%3D%22fill%3A%20blue%22%2F%3E%3C%2Fsvg%3E";
return datauri;
}
// Generates just the chunk of a data URI that's relevant to
// the given params.
function generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight,
aAlign, aMeetOrSlice) {
var str = "";
if (aViewboxArr) {
str += "%20viewBox%3D%22";
for (var i in aViewboxArr) {
var curVal = aViewboxArr[i];
str += curVal + "%20";
}
str += "%22";
}
if (aWidth) {
str += "%20width%3D%22" + aWidth + "%22";
}
if (aHeight) {
str += "%20height%3D%22" + aHeight + "%22";
}
if (aAlign) {
str += "%20preserveAspectRatio%3D%22" + aAlign;
if (aMeetOrSlice) {
str += "%20" + aMeetOrSlice;
}
str += "%22";
}
return str;
}
// Returns a newly-generated element with the given tagname, the given URI
// for its |src| attribute, and the given width & height values.
function generateHostNode(aHostNodeTagName, aUri,
aHostNodeWidth, aHostNodeHeight) {
var elem = document.createElement(aHostNodeTagName);
elem.setAttribute("src", aUri);
if (aHostNodeWidth) {
elem.setAttribute("width", aHostNodeWidth);
}
if (aHostNodeHeight) {
elem.setAttribute("height", aHostNodeHeight);
}
return elem;
}
// THIS IS THE CHIEF HELPER FUNCTION TO BE CALLED BY CLIENTS
function appendSVGArrayWithParams(aSVGParams, aHostNodeTagName) {
var rootNode = document.getElementsByTagName("body")[0];
// These are width & height vals that will be used for the *host node*.
// (i.e. the <img> or <embed> node -- not the <svg> node)
var hostNodeWidthVals = [ null, HOST_NODE_WIDTH ];
var hostNodeHeightVals = [ null, HOST_NODE_HEIGHT ];
for (var i = 0; i < hostNodeWidthVals.length; i++) {
var hostWidth = hostNodeWidthVals[i];
for (var j = 0; j < hostNodeHeightVals.length; j++) {
var hostHeight = hostNodeHeightVals[j];
for (var k = 0; k < ALIGN_VALS.length; k++) {
var alignVal = ALIGN_VALS[k];
// Generate the Data URI
var uri = generateSVGDataURI(aSVGParams.viewBox,
aSVGParams.width, aSVGParams.height,
alignVal,
aSVGParams.meetOrSlice);
// Generate & append the host node element
var hostNode = generateHostNode(aHostNodeTagName, uri,
hostWidth, hostHeight);
rootNode.appendChild(hostNode);
// Cosmetic: Add a newline when we get halfway through the ALIGN_VALS
// and then again when we reach the end
if (k + 1 == ALIGN_VALS.length / 2 ||
k + 1 == ALIGN_VALS.length) {
rootNode.appendChild(document.createElement("br"));
}
}
}
}
}

5
layout/reftests/svg/image/zoom/img-zoomIn-1.html Normal file
View File

@ -0,0 +1,5 @@
<html reftest-zoom="1.5">
<body>
<img src="squaredCircle.svg">
</body>
</html>

5
layout/reftests/svg/image/zoom/img-zoomOut-1.html Normal file
View File

@ -0,0 +1,5 @@
<html reftest-zoom="0.5">
<body>
<img src="squaredCircle.svg">
</body>
</html>

6
layout/reftests/svg/image/zoom/reftest.list Normal file
View File

@ -0,0 +1,6 @@
# Tests related to SVG being used as an image, with zooming
# Simple <img> tests
== img-zoomIn-1.html squaredCircle-150x150-ref.html
== img-zoomOut-1.html squaredCircle-50x50-ref.html

5
layout/reftests/svg/image/zoom/squaredCircle-150x150-ref.html Normal file
View File

@ -0,0 +1,5 @@
<html reftest-zoom="1.5">
<body>
<embed src="squaredCircle.svg">
</body>
</html>

5
layout/reftests/svg/image/zoom/squaredCircle-50x50-ref.html Normal file
View File

@ -0,0 +1,5 @@
<html reftest-zoom="0.5">
<body>
<embed src="squaredCircle.svg">
</body>
</html>

6
layout/reftests/svg/image/zoom/squaredCircle.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg"
width="100px" height="100px">
<rect x="2" y="2" height="96" width="96"
stroke-width="4" stroke="black" fill="yellow"/>
<circle cx="50" cy="50" r="46" style="fill: blue"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 235 B

3
layout/reftests/svg/reftest.list
View File

@ -2,6 +2,9 @@
# bugs/
include bugs/reftest.list
# svg-as-an-image tests
include image/reftest.list
# sizing tests
include sizing/reftest.list