mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 614649, patch 3: Add new comprehensive reftests for SVG-as-an-image w/ no viewBox. r=jwatt a=tests
--HG-- rename : layout/reftests/svg/as-image/img-height-meet-1-ref.html => layout/reftests/svg/as-image/img-novb-height-all-1-ref.html rename : layout/reftests/svg/as-image/img-height-meet-1.html => layout/reftests/svg/as-image/img-novb-height-meet-1.html rename : layout/reftests/svg/as-image/img-height-slice-1.html => layout/reftests/svg/as-image/img-novb-height-slice-1.html rename : layout/reftests/svg/as-image/img-width-meet-1-ref.html => layout/reftests/svg/as-image/img-novb-width-all-1-ref.html rename : layout/reftests/svg/as-image/img-width-meet-1.html => layout/reftests/svg/as-image/img-novb-width-meet-1.html rename : layout/reftests/svg/as-image/img-width-slice-1.html => layout/reftests/svg/as-image/img-novb-width-slice-1.html rename : layout/reftests/svg/as-image/img-widthAndHeight-slice-1-ref.html => layout/reftests/svg/as-image/img-novb-widthAndHeight-all-1-ref.html rename : layout/reftests/svg/as-image/img-widthAndHeight-meet-1.html => layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-em.html rename : layout/reftests/svg/as-image/img-widthAndHeight-meet-1.html => layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-px.html rename : layout/reftests/svg/as-image/img-widthAndHeight-slice-1.html => layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-em.html rename : layout/reftests/svg/as-image/img-widthAndHeight-slice-1.html => layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-px.html
This commit is contained in:
Daniel Holbert
parent
0f580ba819
commit
e6da31ef61
45
layout/reftests/svg/as-image/img-novb-height-all-1-ref.html
Normal file
45
layout/reftests/svg/as-image/img-novb-height-all-1-ref.html
Normal file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
|
||||
<script src="svg-image-util.js"></script>
|
||||
</head>
|
||||
<body style="width: 600px"><!-- width for pct vals to resolve against -->
|
||||
<script>
|
||||
var svgParams = {
|
||||
viewBox: null, // This gets set on a case-by-case basis below.
|
||||
width : "10%",
|
||||
height : "30px",
|
||||
meetOrSlice: null // This means "use pAR=none"
|
||||
};
|
||||
|
||||
// Descriptions below describe the behavior of the rows of <img> elements
|
||||
// in the corresponding test cases, which we mimic with specially-crafted
|
||||
// <embed> elements.
|
||||
|
||||
// * FIRST TWO ROWS: <img> has width=auto height=auto
|
||||
// - Each <img> renders w/ width = 10% * body_width = .1*600 = 60px
|
||||
// - Synthesized viewBox has width = 10% * viewport_width = .1*60 = 6
|
||||
// - <img> & viewBox both get height=30px, from <svg> height attr
|
||||
svgParams.viewBox = [0, 0, 6, 30],
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "60px", "30px");
|
||||
|
||||
// * SECOND TWO ROWS: <img> has width=auto, height=20px
|
||||
// Calculations are as above, except <img> now imposes height="20px".
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "60px", "20px");
|
||||
|
||||
// * THIRD TWO ROWS: <img> has width=30px height=auto
|
||||
// - <img> now renders w/ width = 30px (imposed by <img> width attr)
|
||||
// - Synthesized viewBox has width = 10% * viewport_width = .1*30 = 3
|
||||
// - <img> & viewBox both get height=30px, from <svg> height attr
|
||||
svgParams.viewBox = [0, 0, 3, 30];
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "30px", "30px");
|
||||
|
||||
// * FOURTH TWO ROWS: <img> has width=30px height=20px
|
||||
// Calculations are as above, except <img> now imposes height="20px".
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "30px", "20px");
|
||||
|
||||
</script>
|
||||
<!-- Body gets populated by script -->
|
||||
</body>
|
||||
</html>
|
||||
20
layout/reftests/svg/as-image/img-novb-height-meet-1.html
Normal file
20
layout/reftests/svg/as-image/img-novb-height-meet-1.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
|
||||
<script src="svg-image-util.js"></script>
|
||||
</head>
|
||||
<body style="width: 600px"><!-- width for pct vals to resolve against -->
|
||||
<script>
|
||||
var svgParams = {
|
||||
viewBox: null,
|
||||
width : "10%",
|
||||
height : "30px",
|
||||
meetOrSlice: "meet"
|
||||
};
|
||||
|
||||
appendSVGArrayWithParams(svgParams, "img");
|
||||
</script>
|
||||
<!-- Body gets populated by script -->
|
||||
</body>
|
||||
</html>
|
||||
20
layout/reftests/svg/as-image/img-novb-height-slice-1.html
Normal file
20
layout/reftests/svg/as-image/img-novb-height-slice-1.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
|
||||
<script src="svg-image-util.js"></script>
|
||||
</head>
|
||||
<body style="width: 600px"><!-- width for pct vals to resolve against -->
|
||||
<script>
|
||||
var svgParams = {
|
||||
viewBox: null,
|
||||
width : "10%",
|
||||
height : "30px",
|
||||
meetOrSlice: "slice"
|
||||
};
|
||||
|
||||
appendSVGArrayWithParams(svgParams, "img");
|
||||
</script>
|
||||
<!-- Body gets populated by script -->
|
||||
</body>
|
||||
</html>
|
||||
49
layout/reftests/svg/as-image/img-novb-width-all-1-ref.html
Normal file
49
layout/reftests/svg/as-image/img-novb-width-all-1-ref.html
Normal file
@ -0,0 +1,49 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
|
||||
<script src="svg-image-util.js"></script>
|
||||
</head>
|
||||
<body style="height: 600px"><!-- height for pct vals to resolve against -->
|
||||
<script>
|
||||
var svgParams = {
|
||||
viewBox: null, // This gets set on a case-by-case basis below.
|
||||
width : "20px",
|
||||
height : "20%",
|
||||
meetOrSlice: null // This means "use pAR=none"
|
||||
};
|
||||
|
||||
// Descriptions below describe the behavior of the rows of <img> elements
|
||||
// in the corresponding test cases, which we mimic with specially-crafted
|
||||
// <embed> elements.
|
||||
|
||||
// * FIRST TWO ROWS: <img> has width=auto height=auto
|
||||
// - Each <img> renders w/ height = 20% * body_height = .2*600 = 120px
|
||||
// - Synthesized viewBox has height = 20% * viewport_height = .2*120 = 24
|
||||
// - <img> & viewBox both get width=20px, from <svg> width attr
|
||||
svgParams.viewBox = [0, 0, 20, 24],
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "20px", "120px");
|
||||
|
||||
// * SECOND TWO ROWS: <img> has width=auto, height=20px
|
||||
// - <img> now renders w/ height = 20px (imposed by <img> height attr)
|
||||
// - Synthesized viewBox has height = 20% * viewport_width = .2*20 = 4
|
||||
// - <img> & viewBox both get width=20px, from <svg> width attr
|
||||
svgParams.viewBox = [0, 0, 20, 4],
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "20px", "20px");
|
||||
|
||||
// * THIRD TWO ROWS: <img> has width=30px height=auto
|
||||
// Calculations are as with "FIRST TWO ROWS", except <img> now imposes
|
||||
// width="30px".
|
||||
svgParams.viewBox = [0, 0, 20, 24],
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "30px", "120px");
|
||||
|
||||
// * FOURTH TWO ROWS: <img> has width=30px height=20px
|
||||
// Calculations are as with "SECOND TWO ROWS", except <img> now imposes
|
||||
// width="30px".
|
||||
svgParams.viewBox = [0, 0, 20, 4],
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "30px", "20px");
|
||||
|
||||
</script>
|
||||
<!-- Body gets populated by script -->
|
||||
</body>
|
||||
</html>
|
||||
20
layout/reftests/svg/as-image/img-novb-width-meet-1.html
Normal file
20
layout/reftests/svg/as-image/img-novb-width-meet-1.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
|
||||
<script src="svg-image-util.js"></script>
|
||||
</head>
|
||||
<body style="height: 600px"><!-- height for pct vals to resolve against -->
|
||||
<script>
|
||||
var svgParams = {
|
||||
viewBox: null,
|
||||
width : "20px",
|
||||
height : "20%",
|
||||
meetOrSlice: "meet"
|
||||
};
|
||||
|
||||
appendSVGArrayWithParams(svgParams, "img");
|
||||
</script>
|
||||
<!-- Body gets populated by script -->
|
||||
</body>
|
||||
</html>
|
||||
20
layout/reftests/svg/as-image/img-novb-width-slice-1.html
Normal file
20
layout/reftests/svg/as-image/img-novb-width-slice-1.html
Normal file
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
|
||||
<script src="svg-image-util.js"></script>
|
||||
</head>
|
||||
<body style="height: 600px"><!-- height for pct vals to resolve against -->
|
||||
<script>
|
||||
var svgParams = {
|
||||
viewBox: null,
|
||||
width : "20px",
|
||||
height : "20%",
|
||||
meetOrSlice: "slice"
|
||||
};
|
||||
|
||||
appendSVGArrayWithParams(svgParams, "img");
|
||||
</script>
|
||||
<!-- Body gets populated by script -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
|
||||
<script src="svg-image-util.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
var svgParams = {
|
||||
viewBox: [0, 0, 20, 20],
|
||||
height : "20px",
|
||||
width : "20px",
|
||||
meetOrSlice: null // this means "always just use pAR='none'"
|
||||
};
|
||||
|
||||
appendSVGArrayWithParams(svgParams, "embed");
|
||||
</script>
|
||||
<!-- Body gets populated by script -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
|
||||
<script src="svg-image-util.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
var svgParams = {
|
||||
viewBox: null,
|
||||
height : "2em", // 20px
|
||||
width : "2em", // 20px
|
||||
meetOrSlice: "meet"
|
||||
};
|
||||
|
||||
appendSVGArrayWithParams(svgParams, "img");
|
||||
</script>
|
||||
<!-- Body gets populated by script -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
|
||||
<script src="svg-image-util.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
var svgParams = {
|
||||
viewBox: null,
|
||||
height : "20px",
|
||||
width : "20px",
|
||||
meetOrSlice: "meet"
|
||||
};
|
||||
|
||||
appendSVGArrayWithParams(svgParams, "img");
|
||||
</script>
|
||||
<!-- Body gets populated by script -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
|
||||
<script src="svg-image-util.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
var svgParams = {
|
||||
viewBox: null,
|
||||
height : "2em", // 20px
|
||||
width : "2em", // 20px
|
||||
meetOrSlice: "slice"
|
||||
};
|
||||
|
||||
appendSVGArrayWithParams(svgParams, "img");
|
||||
</script>
|
||||
<!-- Body gets populated by script -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,20 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="svg-image-util.css" />
|
||||
<script src="svg-image-util.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
var svgParams = {
|
||||
viewBox: null,
|
||||
height : "20px",
|
||||
width : "20px",
|
||||
meetOrSlice: "slice"
|
||||
};
|
||||
|
||||
appendSVGArrayWithParams(svgParams, "img");
|
||||
</script>
|
||||
<!-- Body gets populated by script -->
|
||||
</body>
|
||||
</html>
|
||||
@ -75,6 +75,20 @@ random-if(d2d) == img-width-meet-2.html img-width-meet-2-ref.html
|
||||
random-if(d2d) == img-width-slice-1.html img-width-slice-1-ref.html
|
||||
random-if(d2d) == img-width-slice-2.html img-width-slice-2-ref.html
|
||||
|
||||
# Alternate version of "width & height both non-%-valued" tests, but now
|
||||
# with no explicit viewBox, to trigger "synthesize-viewBox" behavior
|
||||
fails-if(d2d) == img-novb-widthAndHeight-meet-1-em.html img-novb-widthAndHeight-all-1-ref.html
|
||||
fails-if(d2d) == img-novb-widthAndHeight-meet-1-px.html img-novb-widthAndHeight-all-1-ref.html
|
||||
fails-if(d2d) == img-novb-widthAndHeight-slice-1-em.html img-novb-widthAndHeight-all-1-ref.html
|
||||
fails-if(d2d) == img-novb-widthAndHeight-slice-1-px.html img-novb-widthAndHeight-all-1-ref.html
|
||||
|
||||
# Alternate versions of "only one dimension is non-%-valued" tests, but now
|
||||
# with no explicit viewBox, to trigger "synthesize-viewBox" behavior
|
||||
== img-novb-height-meet-1.html img-novb-height-all-1-ref.html
|
||||
== img-novb-height-slice-1.html img-novb-height-all-1-ref.html
|
||||
fails-if(d2d) == img-novb-width-meet-1.html img-novb-width-all-1-ref.html
|
||||
fails-if(d2d) == img-novb-width-slice-1.html img-novb-width-all-1-ref.html
|
||||
|
||||
== list-simple-1.html list-simple-1-ref.html
|
||||
|
||||
== svg-image-simple-1.svg lime100x100.svg
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
body { margin: 0px; }
|
||||
img { background: purple; border: 5px solid green; vertical-align:top; }
|
||||
embed { background: purple; border: 5px solid green; vertical-align:top; }
|
||||
body { margin: 0px; line-height: 10px; }
|
||||
img { background: purple; vertical-align: top; }
|
||||
embed { background: purple; vertical-align: top; }
|
||||
|
||||
@ -110,6 +110,10 @@ function generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight,
|
||||
}
|
||||
str += "%22";
|
||||
}
|
||||
|
||||
// Add 'font-size' just in case the client wants to use ems
|
||||
str += "%20font-size%3D%22" + "10px" + "%22";
|
||||
|
||||
return str;
|
||||
}
|
||||
|
||||
@ -132,38 +136,47 @@ function generateHostNode(aHostNodeTagName, aUri,
|
||||
|
||||
// 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];
|
||||
var hostNodeWidth = 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"));
|
||||
}
|
||||
}
|
||||
var hostNodeHeight = hostNodeHeightVals[j];
|
||||
appendSVGSubArrayWithParams(aSVGParams, aHostNodeTagName,
|
||||
hostNodeWidth, hostNodeHeight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function for above, for a fixed [host-node-width][host-node-height]
|
||||
function appendSVGSubArrayWithParams(aSVGParams, aHostNodeTagName,
|
||||
aHostNodeWidth, aHostNodeHeight) {
|
||||
var rootNode = document.getElementsByTagName("body")[0];
|
||||
for (var k = 0; k < ALIGN_VALS.length; k++) {
|
||||
var alignVal = ALIGN_VALS[k];
|
||||
if (!aSVGParams.meetOrSlice) {
|
||||
alignVal = "none";
|
||||
}
|
||||
|
||||
// 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,
|
||||
aHostNodeWidth, aHostNodeHeight);
|
||||
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"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user