diff options
Diffstat (limited to 'layout/reftests/svg/as-image')
196 files changed, 3713 insertions, 0 deletions
diff --git a/layout/reftests/svg/as-image/background-display-none-1.html b/layout/reftests/svg/as-image/background-display-none-1.html new file mode 100644 index 000000000..9c638134e --- /dev/null +++ b/layout/reftests/svg/as-image/background-display-none-1.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Test for a CSS background pointing to an SVG image that has "display:none" + on the root node. --> +<html> +<body> + <div style="width: 100px; height: 100px; + background-image: url('display-none.svg')"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-image-rect-1png.html b/layout/reftests/svg/as-image/background-image-rect-1png.html new file mode 100644 index 000000000..42813d669 --- /dev/null +++ b/layout/reftests/svg/as-image/background-image-rect-1png.html @@ -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> diff --git a/layout/reftests/svg/as-image/background-image-rect-1svg.html b/layout/reftests/svg/as-image/background-image-rect-1svg.html new file mode 100644 index 000000000..728c780ac --- /dev/null +++ b/layout/reftests/svg/as-image/background-image-rect-1svg.html @@ -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> diff --git a/layout/reftests/svg/as-image/background-image-rect-2.html b/layout/reftests/svg/as-image/background-image-rect-2.html new file mode 100644 index 000000000..15f861d40 --- /dev/null +++ b/layout/reftests/svg/as-image/background-image-rect-2.html @@ -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> diff --git a/layout/reftests/svg/as-image/background-resize-1.html b/layout/reftests/svg/as-image/background-resize-1.html new file mode 100644 index 000000000..cb39dc83a --- /dev/null +++ b/layout/reftests/svg/as-image/background-resize-1.html @@ -0,0 +1,18 @@ +<html class="reftest-wait"> +<head> +<script> + function doTest() { + document.getElementById("myDiv").style.width = "100px"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</head> +<body> + <div id="myDiv" + style="width: 10px; + height: 100px; + background-image: url('lime100x100.svg')"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-resize-2.html b/layout/reftests/svg/as-image/background-resize-2.html new file mode 100644 index 000000000..b2adaa3f7 --- /dev/null +++ b/layout/reftests/svg/as-image/background-resize-2.html @@ -0,0 +1,18 @@ +<html class="reftest-wait"> +<head> +<script> + function doTest() { + document.getElementById("myDiv").style.width = "100px"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</head> +<body> + <div id="myDiv" + style="width: 10px; + height: 100px; + background-image: url('lime100x100-noSVGDimensions.svg')"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-resize-3.html b/layout/reftests/svg/as-image/background-resize-3.html new file mode 100644 index 000000000..ab25d3716 --- /dev/null +++ b/layout/reftests/svg/as-image/background-resize-3.html @@ -0,0 +1,19 @@ +<!-- Test for bug 600574 --> +<html class="reftest-wait"> +<head> +<script> + function doTest() { + document.getElementById("myDiv").style.width = "100px"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</head> +<body> + <div id="myDiv" + style="width: 10px; + height: 100px; + background-image: url('limeInRed-noSVGDimensions-viewBox.svg')"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-resize-4.html b/layout/reftests/svg/as-image/background-resize-4.html new file mode 100644 index 000000000..9ec689b47 --- /dev/null +++ b/layout/reftests/svg/as-image/background-resize-4.html @@ -0,0 +1,20 @@ +<!-- Test for bug 600574 --> +<html class="reftest-wait"> +<head> +<script> + function doTest() { + document.getElementById("myDiv").style.width = "100px"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", doTest, false); +</script> +</head> +<body> + <div id="myDiv" + style="width: 10px; + height: 100px; + background-image: + url('limeInRed-noSVGDimensions-animViewBox.svg')"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html b/layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html new file mode 100644 index 000000000..e9ee74d29 --- /dev/null +++ b/layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { + background-color: white; + width: 12px; + height: 60px; + } + body { + background-color: black; + margin: 0px; + padding: 0px; + border: 0px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-scale-no-viewbox-1.html b/layout/reftests/svg/as-image/background-scale-no-viewbox-1.html new file mode 100644 index 000000000..e8ea278bb --- /dev/null +++ b/layout/reftests/svg/as-image/background-scale-no-viewbox-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html reftest-zoom="2.0"> +<head> + <style> + div { + background-color: yellow; + background-image: url("white-rect-no-viewbox.svg"); + width: 6px; + height: 30px; + } + body { + background-color: black; + margin: 0px; + padding: 0px; + border: 0px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html b/layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html new file mode 100644 index 000000000..e9ee74d29 --- /dev/null +++ b/layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { + background-color: white; + width: 12px; + height: 60px; + } + body { + background-color: black; + margin: 0px; + padding: 0px; + border: 0px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-scale-with-viewbox-1.html b/layout/reftests/svg/as-image/background-scale-with-viewbox-1.html new file mode 100644 index 000000000..295aedf52 --- /dev/null +++ b/layout/reftests/svg/as-image/background-scale-with-viewbox-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html reftest-zoom="2.0"> +<head> + <style> + div { + background-color: yellow; + background-image: url("white-rect-with-viewbox.svg"); + width: 6px; + height: 30px; + } + body { + background-color: black; + margin: 0px; + padding: 0px; + border: 0px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-simple-1.html b/layout/reftests/svg/as-image/background-simple-1.html new file mode 100644 index 000000000..d368b5831 --- /dev/null +++ b/layout/reftests/svg/as-image/background-simple-1.html @@ -0,0 +1,6 @@ +<html> +<body> + <div style="height: 100px; width: 100px; + background-image: url('lime100x100.svg')"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-simple-2.html b/layout/reftests/svg/as-image/background-simple-2.html new file mode 100644 index 000000000..1b4cbba24 --- /dev/null +++ b/layout/reftests/svg/as-image/background-simple-2.html @@ -0,0 +1,6 @@ +<html> +<body> + <div style="height: 100px; width: 100px; + background-image: url('limeInRed100x100-viewBox.svg')"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-stretch-1-ref.html b/layout/reftests/svg/as-image/background-stretch-1-ref.html new file mode 100644 index 000000000..f84768e27 --- /dev/null +++ b/layout/reftests/svg/as-image/background-stretch-1-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { + background-color: yellow; + height: 30px; + } + .container { + width: 100px; + } + .stretch { + width: 40px; + background-color: white; + display: inline-block; + } + .left-spacer { + width: 30px; + float: left; + } + .right-spacer { + width: 30px; + float: right; + } + body { + background-color: black; + } + </style> +</head> +<body> + <div class="container"> + <div class="left-spacer"></div> + <div class="stretch"></div> + <div class="right-spacer"></div> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-stretch-1.html b/layout/reftests/svg/as-image/background-stretch-1.html new file mode 100644 index 000000000..0931cf3cc --- /dev/null +++ b/layout/reftests/svg/as-image/background-stretch-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { + height: 30px; + width: 100px; + background-image: url("white-rect-with-viewbox.svg"); + background-repeat: no-repeat; + background-position: 30px; + background-size: 40px 30px; + background-color: yellow; + } + body { + background-color: black; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-viewBox-1.html b/layout/reftests/svg/as-image/background-viewBox-1.html new file mode 100644 index 000000000..077dedfeb --- /dev/null +++ b/layout/reftests/svg/as-image/background-viewBox-1.html @@ -0,0 +1,7 @@ +<html> +<body> + <div style="height: 100px; width: 100px; + background-image: url('limeInRed100x100-viewBox.svg')"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/blue-square-in-square-par-none.svg b/layout/reftests/svg/as-image/blue-square-in-square-par-none.svg new file mode 100644 index 000000000..33a08a0bc --- /dev/null +++ b/layout/reftests/svg/as-image/blue-square-in-square-par-none.svg @@ -0,0 +1,7 @@ +<?xml version="1.0"?> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<svg preserveAspectRatio="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> +<rect x="0" y="0" width="100" height="100" stroke-width="0" fill="blue"/> +<rect x="10" y="10" width="80" height="80" stroke-width="0" fill="lightblue"/> +</svg> diff --git a/layout/reftests/svg/as-image/blue-square-in-square.svg b/layout/reftests/svg/as-image/blue-square-in-square.svg new file mode 100644 index 000000000..d43a27951 --- /dev/null +++ b/layout/reftests/svg/as-image/blue-square-in-square.svg @@ -0,0 +1,7 @@ +<?xml version="1.0"?> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> +<rect x="0" y="0" width="100" height="100" stroke-width="0" fill="blue"/> +<rect x="10" y="10" width="80" height="80" stroke-width="0" fill="lightblue"/> +</svg> diff --git a/layout/reftests/svg/as-image/blue100x100.svg b/layout/reftests/svg/as-image/blue100x100.svg new file mode 100644 index 000000000..a9c8eba79 --- /dev/null +++ b/layout/reftests/svg/as-image/blue100x100.svg @@ -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="blue"/> +</svg> diff --git a/layout/reftests/svg/as-image/border-image-simple-1.html b/layout/reftests/svg/as-image/border-image-simple-1.html new file mode 100644 index 000000000..e6b696e1d --- /dev/null +++ b/layout/reftests/svg/as-image/border-image-simple-1.html @@ -0,0 +1,6 @@ +<html> +<body> + <div style="height: 100px; width: 100px; + border-image: url('lime100x100.png') 0 fill;"/> +</body> +</html> diff --git a/layout/reftests/svg/as-image/border-image-simple-2.html b/layout/reftests/svg/as-image/border-image-simple-2.html new file mode 100644 index 000000000..4eba8cee5 --- /dev/null +++ b/layout/reftests/svg/as-image/border-image-simple-2.html @@ -0,0 +1,6 @@ +<html> +<body> + <div style="height: 100px; width: 100px; + border-image: url('lime100x100-noSVGDimensions.svg') 0 fill;"/> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-1-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1-ref.html new file mode 100644 index 000000000..b2be295ac --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1-ref.html @@ -0,0 +1,6 @@ +<html> +<body> + <div style="width: 100px; height: 100px; background: orange; position:absolute"></div> + <div style="width: 100px; height: 100px; background: lime; opacity: .25; position:absolute"></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-1.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1.html new file mode 100644 index 000000000..ca6a362c3 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1.html @@ -0,0 +1,22 @@ +<html> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + var image = document.getElementById("image"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + ctx.globalAlpha = 0.25; + ctx.drawImage(image, 0, 0); + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> + <img id="image" src="lime100x100.svg" style="display: none"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-2-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2-ref.html new file mode 100644 index 000000000..563e60bb9 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2-ref.html @@ -0,0 +1,6 @@ +<html> +<body> + <embed style="width: 200px; height: 200px;" + src="squaredCircle-transparent.svg"/> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-2.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2.html new file mode 100644 index 000000000..ca56934f6 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2.html @@ -0,0 +1,22 @@ +<html> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + var image = document.getElementById("image"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 200, 200); + + ctx.globalAlpha = 0.75; + ctx.drawImage(image, 0, 0, 200, 200); + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> + <img id="image" src="squaredCircle-viewBox-100x100.svg" style="display: none"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-origin-clean-1.html b/layout/reftests/svg/as-image/canvas-drawImage-origin-clean-1.html new file mode 100644 index 000000000..c363bad58 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-origin-clean-1.html @@ -0,0 +1,24 @@ +<html> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + var image = document.getElementById("image"); + + // Draw the SVG image + ctx.drawImage(image, 0, 0); + + try { + canvas.toDataURL(); + } catch (ex) { + document.body.textContent = ex; + } + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> + <img id="image" src="lime100x100.svg" style="display: none"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-1a.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-1a.html new file mode 100644 index 000000000..da382386f --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-1a.html @@ -0,0 +1,27 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + // Instantiate an image. Once it has loaded, draw it & take snapshot. + var image = new Image(); + image.onload = function() { + // Note that our canvas is 100x100, so our scaled 200x200 image will + // get cropped to 100x100. + ctx.drawImage(image, 0, 0, 200, 200); + document.documentElement.removeAttribute("class"); + } + image.src ="lime100x100.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-1b.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-1b.html new file mode 100644 index 000000000..94154d480 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-1b.html @@ -0,0 +1,28 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + // Instantiate an image. Once it has loaded, draw it & take snapshot. + var image = new Image(); + image.onload = function() { + // Note that our canvas is 100x100, so our scaled 200x200 image will + // get cropped to 100x100. + ctx.scale(2, 2); // Scale our image-drawing by 2 + ctx.drawImage(image, 0, 0); + document.documentElement.removeAttribute("class"); + } + image.src ="lime100x100.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-1c.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-1c.html new file mode 100644 index 000000000..92eed4e10 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-1c.html @@ -0,0 +1,26 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + // Instantiate an image. Once it has loaded, draw it & take snapshot. + var image = new Image(); + image.onload = function() { + ctx.scale(2, 2); // Scale our image-drawing by 2 + ctx.drawImage(image, 0, 0); + document.documentElement.removeAttribute("class"); + } + image.src ="lime50x50.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-2-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-2-ref.html new file mode 100644 index 000000000..bd4585eaa --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-2-ref.html @@ -0,0 +1,6 @@ +<html> +<body> + <embed style="width: 200px; height: 200px" + src="squaredCircle-viewBox-noSize.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-2a.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-2a.html new file mode 100644 index 000000000..0e8cf233f --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-2a.html @@ -0,0 +1,26 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 200, 200); + + // Instantiate an image. Draw it at a larger size, & take snapshot + // once it has loaded. + var image = new Image(); + image.onload = function() { + ctx.drawImage(image, 0, 0, 200, 200); + document.documentElement.removeAttribute("class"); + } + image.src ="squaredCircle-viewBox-100x100.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-2b.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-2b.html new file mode 100644 index 000000000..f3ca82123 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-2b.html @@ -0,0 +1,26 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 200, 200); + + // Instantiate an image. Once it has loaded, draw it & take snapshot. + var image = new Image(); + image.onload = function() { + ctx.scale(2, 2); + ctx.drawImage(image, 0, 0); + document.documentElement.removeAttribute("class"); + } + image.src ="squaredCircle-viewBox-100x100.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-simple-1a.html b/layout/reftests/svg/as-image/canvas-drawImage-simple-1a.html new file mode 100644 index 000000000..b40d5fc39 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-simple-1a.html @@ -0,0 +1,22 @@ +<html> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + var image = document.getElementById("image"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + // Draw the SVG image on top of our red + ctx.drawImage(image, 0, 0); + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> + <img id="image" src="lime100x100.svg" style="display: none"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-simple-1b.html b/layout/reftests/svg/as-image/canvas-drawImage-simple-1b.html new file mode 100644 index 000000000..f3348b1e1 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-simple-1b.html @@ -0,0 +1,25 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + // Instantiate an image. Once it has loaded, draw it & take snapshot. + var image = new Image(); + image.onload = function() { + ctx.drawImage(image, 0, 0); + document.documentElement.removeAttribute("class"); + } + image.src ="lime100x100.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-slice-1a.html b/layout/reftests/svg/as-image/canvas-drawImage-slice-1a.html new file mode 100644 index 000000000..6f173b7d6 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-slice-1a.html @@ -0,0 +1,28 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + // Instantiate an image. Once it has loaded, draw it & take snapshot. + var image = new Image(); + image.onload = function() { + // This version of the test is "easier", in that the sampled region + // is offset from the red by 1px on all sides. This lets us avoid + // any pixel-rounding errors. + ctx.drawImage(image, 26, 26, 48, 48, 0, 0, 100, 100); + document.documentElement.removeAttribute("class"); + } + image.src ="limeInRed100x100.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-slice-1b.html b/layout/reftests/svg/as-image/canvas-drawImage-slice-1b.html new file mode 100644 index 000000000..6b56ce1e6 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-slice-1b.html @@ -0,0 +1,25 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + // Instantiate an image. Once it has loaded, draw it & take snapshot. + var image = new Image(); + image.onload = function() { + ctx.drawImage(image, 25, 25, 50, 50, 0, 0, 100, 100); + document.documentElement.removeAttribute("class"); + } + image.src ="limeInRed100x100.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-transform-restored-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-transform-restored-ref.html new file mode 100644 index 000000000..226a6dd57 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-transform-restored-ref.html @@ -0,0 +1,18 @@ +<html> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + ctx.mozCurrentTransform = [2, 0, 0, 2, 0, 0]; + + ctx.fillStyle = "blue"; + ctx.fillRect(20, 20, 50, 50); + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> + </body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-transform-restored.html b/layout/reftests/svg/as-image/canvas-drawImage-transform-restored.html new file mode 100644 index 000000000..aedd6b38d --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-transform-restored.html @@ -0,0 +1,24 @@ +<html> + <head> + <title>Test that drawImage() calls don't reset the canvas' transform</title> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + ctx.mozCurrentTransform = [2, 0, 0, 2, 0, 0]; + + // SVG image that draws nothing + ctx.drawImage(document.getElementById("image"), 0, 0); + + // Check that ctx's transform wasn't reset by the drawImage call + ctx.fillStyle = "blue"; + ctx.fillRect(20, 20, 50, 50); + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> + <img id="image" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='1'></svg>" style="display: none"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/content-outside-viewBox-1-helper.svg b/layout/reftests/svg/as-image/content-outside-viewBox-1-helper.svg new file mode 100644 index 000000000..ff5ff17fb --- /dev/null +++ b/layout/reftests/svg/as-image/content-outside-viewBox-1-helper.svg @@ -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> diff --git a/layout/reftests/svg/as-image/defer-unsupported-1-helper.svg b/layout/reftests/svg/as-image/defer-unsupported-1-helper.svg new file mode 100644 index 000000000..a2c4c7a55 --- /dev/null +++ b/layout/reftests/svg/as-image/defer-unsupported-1-helper.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" + viewBox="0 0 50 50" preserveAspectRatio="xMaxYMax"> + + <rect width="100" height="100" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/as-image/defer-unsupported-1-ref.svg b/layout/reftests/svg/as-image/defer-unsupported-1-ref.svg new file mode 100644 index 000000000..2b49baf71 --- /dev/null +++ b/layout/reftests/svg/as-image/defer-unsupported-1-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <rect width="100" height="100" fill="blue"/> + <image xlink:href="defer-unsupported-1-helper.svg" width="200" height="100"/> +</svg> diff --git a/layout/reftests/svg/as-image/defer-unsupported-1.svg b/layout/reftests/svg/as-image/defer-unsupported-1.svg new file mode 100644 index 000000000..4a9d84955 --- /dev/null +++ b/layout/reftests/svg/as-image/defer-unsupported-1.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <rect width="100" height="100" fill="blue"/> + <image xlink:href="defer-unsupported-1-helper.svg" width="200" height="100" + preserveAspectRatio="defer xMinYMin"/> +</svg> diff --git a/layout/reftests/svg/as-image/display-none.svg b/layout/reftests/svg/as-image/display-none.svg new file mode 100644 index 000000000..402d37b49 --- /dev/null +++ b/layout/reftests/svg/as-image/display-none.svg @@ -0,0 +1,8 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + width="100" height="100" style="display: none"> + <rect width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.html b/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.html new file mode 100644 index 000000000..9e1a8835b --- /dev/null +++ b/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.html @@ -0,0 +1,35 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + </style> +</head> +<body> + <img src="image-orientation-no-viewbox-and-size.svg"> + + <script> + var orientationInfo = location.search.substring(1).split("&"); + var angle = orientationInfo[0]; + var flip = orientationInfo[1] == "flip" ? true : false; + + // Construct a style. "from-image" is special-cased. + var style; + if (angle == "from-image") { + style = "img { image-orientation: from-image; }\n"; + } else { + style = "img { image-orientation: " + + angle + "deg" + + (flip ? " flip" : "") + + "; }\n"; + } + + // Apply the style to the document. + var sheet = document.createElement('style'); + sheet.innerHTML = style; + document.body.appendChild(sheet); + </script> +</body> diff --git a/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.svg b/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.svg new file mode 100644 index 000000000..3bea51877 --- /dev/null +++ b/layout/reftests/svg/as-image/image-orientation-no-viewbox-and-size.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + width="100" height="200"> + <rect x="0" y="0" width="50" height="100" fill="rgb(0, 191, 0)"/> + <rect x="50" y="0" width="50" height="100" fill="rgb(0, 255, 1)"/> + <rect x="50" y="100" width="50" height="100" fill="rgb(254, 0, 122)"/> + <rect x="0" y="100" width="50" height="100" fill="rgb(191, 0, 93)"/> +</svg> diff --git a/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.html b/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.html new file mode 100644 index 000000000..f6457f926 --- /dev/null +++ b/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.html @@ -0,0 +1,54 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + img { + width: 100px; + height: 200px; + } + </style> +</head> +<body> + <img src="image-orientation-no-viewbox-no-size.svg"> + + <script> + var orientationInfo = location.search.substring(1).split("&"); + var angle = orientationInfo[0]; + var flip = orientationInfo[1] == "flip" ? true : false; + + // Construct a style. "from-image" is special-cased. + var orientationStyle; + if (angle == "from-image") { + orientationStyle = "image-orientation: from-image;"; + } else { + orientationStyle = "image-orientation: " + + angle + "deg" + + (flip ? " flip" : "") + + ";"; + } + + // Since the SVG image has no intrinsic size, we need to apply an + // appropriate size to the <img> element to match the reference. + var boxStyle; + if (angle == "90" || angle == "270") { + boxStyle = "width: 200px; height: 100px;"; + } else { + boxStyle = "width: 100px; height: 200px;"; + } + + var style = "img { " + + orientationStyle + + " " + + boxStyle + + " }\n"; + + // Apply the style to the document. + var sheet = document.createElement('style'); + sheet.innerHTML = style; + document.body.appendChild(sheet); + </script> +</body> diff --git a/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.svg b/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.svg new file mode 100644 index 000000000..029549c1f --- /dev/null +++ b/layout/reftests/svg/as-image/image-orientation-no-viewbox-no-size.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect x="0" y="0" width="50" height="100" fill="rgb(0, 191, 0)"/> + <rect x="50" y="0" width="50" height="100" fill="rgb(0, 255, 1)"/> + <rect x="50" y="100" width="50" height="100" fill="rgb(254, 0, 122)"/> + <rect x="0" y="100" width="50" height="100" fill="rgb(191, 0, 93)"/> +</svg> diff --git a/layout/reftests/svg/as-image/image-orientation-ref.html b/layout/reftests/svg/as-image/image-orientation-ref.html new file mode 100644 index 000000000..bb65deae6 --- /dev/null +++ b/layout/reftests/svg/as-image/image-orientation-ref.html @@ -0,0 +1,75 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + table { + border-spacing: 0px; + } + </style> +</head> +<body> + <div> + <table> + <tr> + <td id="ul"></td> + <td id="ur"></td> + </tr> + <tr> + <td id="ll"></td> + <td id="lr"></td> + </tr> + </table> + </div> + + <script> + var orientationInfo = location.search.substring(1).split("&"); + var angle = parseInt(orientationInfo[0]); + var flip = orientationInfo[1] == "flip" ? true : false; + + // Each id corresponds to a color. + var ids = ["ul", "ur", "lr", "ll"]; + var colors = [ + "rgb(0, 191, 0)", + "rgb(0, 255, 1)", + "rgb(254, 0, 122)", + "rgb(191, 0, 93)", + ]; + + // 'Rotate' the colors according to the angle. + colors.unshift.apply(colors, colors.splice((360 - angle) / 90, colors.length)); + + // 'Flip' the colors if requested. + if (flip) { + var tmp = colors[0]; + colors[0] = colors[1]; + colors[1] = tmp; + tmp = colors[2]; + colors[2] = colors[3]; + colors[3] = tmp; + } + + // Construct a style. + var style = ""; + + if (angle == 90 || angle == 270) { + style += "div { width: 200px; height: 100px; }\n"; + style += "td { width: 100px; height: 50px; }\n"; + } else { + style += "div { width: 100px; height: 200px; }\n"; + style += "td { width: 50px; height: 100px; }\n"; + } + + for (var i = 0 ; i < 4 ; ++i) { + style += "#" + ids[i] + " { background-color: " + colors[i] + "; }\n"; + } + + // Apply the style to the document. + var sheet = document.createElement('style'); + sheet.innerHTML = style; + document.body.appendChild(sheet); + </script> +</body> diff --git a/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html new file mode 100644 index 000000000..5c3ec4f8a --- /dev/null +++ b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html @@ -0,0 +1,35 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + </style> +</head> +<body> + <img src="image-orientation-viewbox-and-size.svg"> + + <script> + var orientationInfo = location.search.substring(1).split("&"); + var angle = orientationInfo[0]; + var flip = orientationInfo[1] == "flip" ? true : false; + + // Construct a style. "from-image" is special-cased. + var style; + if (angle == "from-image") { + style = "img { image-orientation: from-image; }\n"; + } else { + style = "img { image-orientation: " + + angle + "deg" + + (flip ? " flip" : "") + + "; }\n"; + } + + // Apply the style to the document. + var sheet = document.createElement('style'); + sheet.innerHTML = style; + document.body.appendChild(sheet); + </script> +</body> diff --git a/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.svg b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.svg new file mode 100644 index 000000000..148b021e5 --- /dev/null +++ b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + width="100" height="200" + viewBox="25 25 100 200"> + <rect x="25" y="25" width="50" height="100" fill="rgb(0, 191, 0)"/> + <rect x="75" y="25" width="50" height="100" fill="rgb(0, 255, 1)"/> + <rect x="75" y="125" width="50" height="100" fill="rgb(254, 0, 122)"/> + <rect x="25" y="125" width="50" height="100" fill="rgb(191, 0, 93)"/> +</svg> diff --git a/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html new file mode 100644 index 000000000..6c8329188 --- /dev/null +++ b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html @@ -0,0 +1,50 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + </style> +</head> +<body> + <img src="image-orientation-viewbox-no-size.svg"> + + <script> + var orientationInfo = location.search.substring(1).split("&"); + var angle = orientationInfo[0]; + var flip = orientationInfo[1] == "flip" ? true : false; + + // Construct a style. "from-image" is special-cased. + var orientationStyle; + if (angle == "from-image") { + orientationStyle = "image-orientation: from-image;"; + } else { + orientationStyle = "image-orientation: " + + angle + "deg" + + (flip ? " flip" : "") + + ";"; + } + + // Since the SVG image has no intrinsic size, we need to apply an + // appropriate size to the <img> element to match the reference. + var boxStyle; + if (angle == "90" || angle == "270") { + boxStyle = "width: 200px; height: 100px;"; + } else { + boxStyle = "width: 100px; height: 200px;"; + } + + var style = "img { " + + orientationStyle + + " " + + boxStyle + + " }\n"; + + // Apply the style to the document. + var sheet = document.createElement('style'); + sheet.innerHTML = style; + document.body.appendChild(sheet); + </script> +</body> diff --git a/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.svg b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.svg new file mode 100644 index 000000000..573348801 --- /dev/null +++ b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + viewBox="25 25 100 200"> + <rect x="25" y="25" width="50" height="100" fill="rgb(0, 191, 0)"/> + <rect x="75" y="25" width="50" height="100" fill="rgb(0, 255, 1)"/> + <rect x="75" y="125" width="50" height="100" fill="rgb(254, 0, 122)"/> + <rect x="25" y="125" width="50" height="100" fill="rgb(191, 0, 93)"/> +</svg> diff --git a/layout/reftests/svg/as-image/img-and-image-1-helper-a.svg b/layout/reftests/svg/as-image/img-and-image-1-helper-a.svg new file mode 100644 index 000000000..254a87393 --- /dev/null +++ b/layout/reftests/svg/as-image/img-and-image-1-helper-a.svg @@ -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> diff --git a/layout/reftests/svg/as-image/img-and-image-1-helper-b.svg b/layout/reftests/svg/as-image/img-and-image-1-helper-b.svg new file mode 100644 index 000000000..6aada7f0f --- /dev/null +++ b/layout/reftests/svg/as-image/img-and-image-1-helper-b.svg @@ -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> diff --git a/layout/reftests/svg/as-image/img-and-image-1-helper-c.svg b/layout/reftests/svg/as-image/img-and-image-1-helper-c.svg new file mode 100644 index 000000000..73fe0cb11 --- /dev/null +++ b/layout/reftests/svg/as-image/img-and-image-1-helper-c.svg @@ -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> diff --git a/layout/reftests/svg/as-image/img-and-image-1-ref.svg b/layout/reftests/svg/as-image/img-and-image-1-ref.svg new file mode 100644 index 000000000..07e977f0e --- /dev/null +++ b/layout/reftests/svg/as-image/img-and-image-1-ref.svg @@ -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> diff --git a/layout/reftests/svg/as-image/img-and-image-1.html b/layout/reftests/svg/as-image/img-and-image-1.html new file mode 100644 index 000000000..f60e4e2a6 --- /dev/null +++ b/layout/reftests/svg/as-image/img-and-image-1.html @@ -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> diff --git a/layout/reftests/svg/as-image/img-blobURI-1.html b/layout/reftests/svg/as-image/img-blobURI-1.html new file mode 100644 index 000000000..127689e78 --- /dev/null +++ b/layout/reftests/svg/as-image/img-blobURI-1.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- This test checks to be sure we can render SVG-as-an-image + from a 'blob' URI. --> +<html class="reftest-wait"> +<head> + <script> + function go() { + // Generate a blob URL encoding of an SVG document + var blobURL = generateBlobURL(); + + // Tell our img element to render the URL + var img = document.getElementsByTagName("img")[0] + img.src = blobURL; + + // Once our img loads, take reftest snapshot. + img.addEventListener("load", function() { + document.documentElement.removeAttribute("class"); + }); + } + + // Helper function -- returns a blob URL representing a + // 100x100 fully-lime SVG document. + function generateBlobURL() { + var svg = + '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">' + + '<rect height="100%" width="100%" fill="lime"/>' + + '</svg>'; + return self.URL.createObjectURL(new Blob([svg], {type: "image/svg+xml"})); + } + </script> +</head> +<body onload="go()"> + <img src=""> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-blobURI-2.html b/layout/reftests/svg/as-image/img-blobURI-2.html new file mode 100644 index 000000000..073ec8062 --- /dev/null +++ b/layout/reftests/svg/as-image/img-blobURI-2.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<!-- This test checks to be sure we allow + 'blob' URIs *inside of* SVG-as-an-image. --> +<html class="reftest-wait"> +<head> + <script> + function go() { + // Generate a blob URL encoding of an SVG document + var blobURL = generateBlobURL(); + + // Now generate a data URI, containing our blob URI + var outerSVG = + '<svg xmlns="http://www.w3.org/2000/svg" ' + + 'xmlns:xlink="http://www.w3.org/1999/xlink" ' + + 'width="100" height="100">' + + '<image height="100" width="100" ' + + 'xlink:href="' + blobURL + '"/>' + + '</svg>'; + + // Tell our img element to render the URL + var img = document.getElementsByTagName("img")[0] + img.src = "data:image/svg+xml," + outerSVG; + + // Once our img loads, take reftest snapshot. + img.addEventListener("load", function() { + document.documentElement.removeAttribute("class"); + }); + } + + // Helper function -- returns a blob URL representing a + // 100x100 fully-lime SVG document. + function generateBlobURL() { + var svg = + '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">' + + '<rect height="100%" width="100%" fill="lime"/>' + + '</svg>'; + return self.URL.createObjectURL(new Blob([svg], {type: "image/svg+xml"})); + } + </script> +</head> +<body onload="go()"> + <img src=""> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-content-outside-viewBox-1-ref.html b/layout/reftests/svg/as-image/img-content-outside-viewBox-1-ref.html new file mode 100644 index 000000000..abee91c51 --- /dev/null +++ b/layout/reftests/svg/as-image/img-content-outside-viewBox-1-ref.html @@ -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> diff --git a/layout/reftests/svg/as-image/img-content-outside-viewBox-1.html b/layout/reftests/svg/as-image/img-content-outside-viewBox-1.html new file mode 100644 index 000000000..3aad7adfa --- /dev/null +++ b/layout/reftests/svg/as-image/img-content-outside-viewBox-1.html @@ -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> diff --git a/layout/reftests/svg/as-image/img-display-none-1.html b/layout/reftests/svg/as-image/img-display-none-1.html new file mode 100644 index 000000000..2ce155c9b --- /dev/null +++ b/layout/reftests/svg/as-image/img-display-none-1.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- Test for an <img> tag pointing to an SVG image that has "display:none" + on the root node. --> +<html> +<body> + <img src="display-none.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-dyn-1-ref.html b/layout/reftests/svg/as-image/img-dyn-1-ref.html new file mode 100644 index 000000000..cb9f2635b --- /dev/null +++ b/layout/reftests/svg/as-image/img-dyn-1-ref.html @@ -0,0 +1,7 @@ +<html> +<body> + <div style="width: 200px; height: 200px; border: 2px dashed green"> + <img src="squaredCircle-viewBox-noSize.svg"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-dyn-1.html b/layout/reftests/svg/as-image/img-dyn-1.html new file mode 100644 index 000000000..9be86ff57 --- /dev/null +++ b/layout/reftests/svg/as-image/img-dyn-1.html @@ -0,0 +1,18 @@ +<!-- This test makes sure that we resize SVG content correctly after the + container width is dynamically modified. --> +<html class="reftest-wait"> +<head> + <script> + function go() { + document.getElementById("wrapper").style.width = "200px"; + document.documentElement.removeAttribute("class"); + } + </script> +</head> +<body onload="go()"> + <div id="wrapper" + style="width: 100px; height: 200px; border: 2px dashed green"> + <img src="squaredCircle-viewBox-noSize.svg"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-foreignObject-1-helper.svg b/layout/reftests/svg/as-image/img-foreignObject-1-helper.svg new file mode 100644 index 000000000..3b1b6a67b --- /dev/null +++ b/layout/reftests/svg/as-image/img-foreignObject-1-helper.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <foreignObject width="100%" height="100%"> + <div xmlns="http://www.w3.org/1999/xhtml" + style="background:lime; width:100%; height:100%;"/> + </foreignObject> +</svg> diff --git a/layout/reftests/svg/as-image/img-foreignObject-1.html b/layout/reftests/svg/as-image/img-foreignObject-1.html new file mode 100644 index 000000000..de4671ad7 --- /dev/null +++ b/layout/reftests/svg/as-image/img-foreignObject-1.html @@ -0,0 +1,5 @@ +<html> +<body> + <img src="img-foreignObject-1-helper.svg" height="100px" width="100px"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-foreignObject-embed-1-helper.svg b/layout/reftests/svg/as-image/img-foreignObject-embed-1-helper.svg new file mode 100644 index 000000000..e7f93d241 --- /dev/null +++ b/layout/reftests/svg/as-image/img-foreignObject-embed-1-helper.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <foreignObject x="0" y="0" width="100px" height="100px"> + + <!-- lime background --> + <div xmlns="http://www.w3.org/1999/xhtml" + style="background:lime; width:100%; height:100%;"> + <!-- Use an unrecognized media type, so that if we're honoring plugins, + the "download plugin" placeholder will be shown. --> + <embed xmlns="http://www.w3.org/1999/xhtml" + src="data:audio/hahaThisIsntReallyAFormat," + width="100px" height="50px"/> + <!-- Also try a possibly-recognized media format, for completeness. --> + <embed xmlns="http://www.w3.org/1999/xhtml" + src="data:audio/wav," + width="100px" height="50px"/> + </div> + </foreignObject> +</svg> diff --git a/layout/reftests/svg/as-image/img-foreignObject-embed-1.html b/layout/reftests/svg/as-image/img-foreignObject-embed-1.html new file mode 100644 index 000000000..25d5e3eee --- /dev/null +++ b/layout/reftests/svg/as-image/img-foreignObject-embed-1.html @@ -0,0 +1,5 @@ +<html> +<body> + <img src="img-foreignObject-embed-1-helper.svg" height="100px" width="100px"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-foreignObject-iframe-1a-helper.svg b/layout/reftests/svg/as-image/img-foreignObject-iframe-1a-helper.svg new file mode 100644 index 000000000..e60fa172a --- /dev/null +++ b/layout/reftests/svg/as-image/img-foreignObject-iframe-1a-helper.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <foreignObject x="0" y="0" width="100px" height="100px"> + <!-- lime background --> + <div xmlns="http://www.w3.org/1999/xhtml" + style="background:lime; width:100%; height:100%;"> + + <!-- embedded iframe, whose contents shouldn't be shown and whose + scripts shouldn't be run, when we're being viewed as an image --> + <iframe xmlns="http://www.w3.org/1999/xhtml" + style="width:80px; height:80px; border: 0" + src="data:text/html,%3Chtml%3E%3Cbody%20style%3D%22background-color%3A%20red%22%3Eiframe%20contents%3Cscript%3Ealert(%22script%20shouldn't%20be%20running!!%22)%3C%2Fscript%3E%3C%2Fbody%3E%3C%2Fhtml%3E"/> + </div> + </foreignObject> +</svg> diff --git a/layout/reftests/svg/as-image/img-foreignObject-iframe-1a.html b/layout/reftests/svg/as-image/img-foreignObject-iframe-1a.html new file mode 100644 index 000000000..2840a1b22 --- /dev/null +++ b/layout/reftests/svg/as-image/img-foreignObject-iframe-1a.html @@ -0,0 +1,5 @@ +<html> +<body> + <img src="img-foreignObject-iframe-1a-helper.svg" height="100px" width="100px"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-foreignObject-iframe-1b-helper.svg b/layout/reftests/svg/as-image/img-foreignObject-iframe-1b-helper.svg new file mode 100644 index 000000000..5bc57390d --- /dev/null +++ b/layout/reftests/svg/as-image/img-foreignObject-iframe-1b-helper.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <foreignObject x="0" y="0" width="100px" height="100px"> + <!-- lime background --> + <div xmlns="http://www.w3.org/1999/xhtml" + style="background:lime; width:100%; height:100%;"> + + <!-- embedded iframe, whose contents shouldn't be shown, when we're + being viewed as an image --> + <iframe xmlns="http://www.w3.org/1999/xhtml" + style="width:80px; height:80px; border: 0" + src="data:text/html,%3Chtml%3E%3Cbody%20style%3D%22background-color%3A%20red%22%3Eiframe%20contents%3C%2Fbody%3E%3C%2Fhtml%3E"/> + </div> + </foreignObject> +</svg> diff --git a/layout/reftests/svg/as-image/img-foreignObject-iframe-1b.html b/layout/reftests/svg/as-image/img-foreignObject-iframe-1b.html new file mode 100644 index 000000000..3ee04d4a7 --- /dev/null +++ b/layout/reftests/svg/as-image/img-foreignObject-iframe-1b.html @@ -0,0 +1,5 @@ +<html> +<body> + <img src="img-foreignObject-iframe-1b-helper.svg" height="100px" width="100px"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-fragment-1-ref.html b/layout/reftests/svg/as-image/img-fragment-1-ref.html new file mode 100644 index 000000000..babf7b38a --- /dev/null +++ b/layout/reftests/svg/as-image/img-fragment-1-ref.html @@ -0,0 +1,18 @@ +<!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], + meetOrSlice: "meet" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-fragment-1a.html b/layout/reftests/svg/as-image/img-fragment-1a.html new file mode 100644 index 000000000..31ac73d18 --- /dev/null +++ b/layout/reftests/svg/as-image/img-fragment-1a.html @@ -0,0 +1,21 @@ +<!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 = { + view: { + viewBox: [0, 0, 20, 20], + meetOrSlice: "meet" + }, + fragmentIdentifier: "view" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-fragment-1b.html b/layout/reftests/svg/as-image/img-fragment-1b.html new file mode 100644 index 000000000..0835a9d9c --- /dev/null +++ b/layout/reftests/svg/as-image/img-fragment-1b.html @@ -0,0 +1,19 @@ +<!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], + meetOrSlice: "meet", + fragmentIdentifier: "view" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-fragment-1c.html b/layout/reftests/svg/as-image/img-fragment-1c.html new file mode 100644 index 000000000..717a64fdf --- /dev/null +++ b/layout/reftests/svg/as-image/img-fragment-1c.html @@ -0,0 +1,23 @@ +<!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 = { + view: { + viewBox: [0, 0, 20, 20], + meetOrSlice: "meet" + }, + viewBox: [0, 0, 40, 40], + meetOrSlice: "slice", + fragmentIdentifier: "view" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-fragment-2-ref.html b/layout/reftests/svg/as-image/img-fragment-2-ref.html new file mode 100644 index 000000000..c05d94372 --- /dev/null +++ b/layout/reftests/svg/as-image/img-fragment-2-ref.html @@ -0,0 +1,18 @@ +<!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], + meetOrSlice: "slice" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-fragment-2a.html b/layout/reftests/svg/as-image/img-fragment-2a.html new file mode 100644 index 000000000..953906c00 --- /dev/null +++ b/layout/reftests/svg/as-image/img-fragment-2a.html @@ -0,0 +1,21 @@ +<!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 = { + view: { + viewBox: [0, 0, 20, 20], + meetOrSlice: "slice" + }, + fragmentIdentifier: "view" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-fragment-2b.html b/layout/reftests/svg/as-image/img-fragment-2b.html new file mode 100644 index 000000000..681867e47 --- /dev/null +++ b/layout/reftests/svg/as-image/img-fragment-2b.html @@ -0,0 +1,19 @@ +<!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], + meetOrSlice: "slice", + fragmentIdentifier: "view" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-fragment-2c.html b/layout/reftests/svg/as-image/img-fragment-2c.html new file mode 100644 index 000000000..02cd1abf8 --- /dev/null +++ b/layout/reftests/svg/as-image/img-fragment-2c.html @@ -0,0 +1,23 @@ +<!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 = { + view: { + viewBox: [0, 0, 20, 20], + meetOrSlice: "slice" + }, + viewBox: [0, 0, 40, 40], + meetOrSlice: "meet", + fragmentIdentifier: "view" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-height-meet-1-ref.html b/layout/reftests/svg/as-image/img-height-meet-1-ref.html new file mode 100644 index 000000000..2a12d87f2 --- /dev/null +++ b/layout/reftests/svg/as-image/img-height-meet-1-ref.html @@ -0,0 +1,19 @@ +<!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, 40], + height : "20px", + meetOrSlice: "meet" + }; + + appendSVGArrayWithParams(svgParams, "embed"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-height-meet-1.html b/layout/reftests/svg/as-image/img-height-meet-1.html new file mode 100644 index 000000000..c1cf23854 --- /dev/null +++ b/layout/reftests/svg/as-image/img-height-meet-1.html @@ -0,0 +1,19 @@ +<!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, 40], + height : "20px", + meetOrSlice: "meet" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-height-meet-2-ref.html b/layout/reftests/svg/as-image/img-height-meet-2-ref.html new file mode 100644 index 000000000..efaee25c7 --- /dev/null +++ b/layout/reftests/svg/as-image/img-height-meet-2-ref.html @@ -0,0 +1,19 @@ +<!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, 40, 20], + height : "2em", + meetOrSlice: "meet" + }; + + appendSVGArrayWithParams(svgParams, "embed"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-height-meet-2.html b/layout/reftests/svg/as-image/img-height-meet-2.html new file mode 100644 index 000000000..98fca1d36 --- /dev/null +++ b/layout/reftests/svg/as-image/img-height-meet-2.html @@ -0,0 +1,19 @@ +<!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, 40, 20], + height : "2em", + meetOrSlice: "meet" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-height-slice-1-ref.html b/layout/reftests/svg/as-image/img-height-slice-1-ref.html new file mode 100644 index 000000000..5724f8e0c --- /dev/null +++ b/layout/reftests/svg/as-image/img-height-slice-1-ref.html @@ -0,0 +1,19 @@ +<!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, 40], + height : "20px", + meetOrSlice: "slice" + }; + + appendSVGArrayWithParams(svgParams, "embed"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-height-slice-1.html b/layout/reftests/svg/as-image/img-height-slice-1.html new file mode 100644 index 000000000..1997f37c5 --- /dev/null +++ b/layout/reftests/svg/as-image/img-height-slice-1.html @@ -0,0 +1,19 @@ +<!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, 40], + height : "20px", + meetOrSlice: "slice" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-height-slice-2-ref.html b/layout/reftests/svg/as-image/img-height-slice-2-ref.html new file mode 100644 index 000000000..e9b809e6c --- /dev/null +++ b/layout/reftests/svg/as-image/img-height-slice-2-ref.html @@ -0,0 +1,19 @@ +<!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, 40, 20], + height : "2em", + meetOrSlice: "slice" + }; + + appendSVGArrayWithParams(svgParams, "embed"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-height-slice-2.html b/layout/reftests/svg/as-image/img-height-slice-2.html new file mode 100644 index 000000000..faab57f73 --- /dev/null +++ b/layout/reftests/svg/as-image/img-height-slice-2.html @@ -0,0 +1,19 @@ +<!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, 40, 20], + height : "2em", + meetOrSlice: "slice" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-novb-height-all-1-ref.html b/layout/reftests/svg/as-image/img-novb-height-all-1-ref.html new file mode 100644 index 000000000..999ce5aa6 --- /dev/null +++ b/layout/reftests/svg/as-image/img-novb-height-all-1-ref.html @@ -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 = 300px (default) + // - Synthesized viewBox has width = 10% * viewport_width = .1*300 = 30 + // - <img> & viewBox both get height=30px, from <svg> height attr + svgParams.viewBox = [0, 0, 30, 30], + appendSVGSubArrayWithParams(svgParams, "embed", "300px", "30px"); + + // * SECOND TWO ROWS: <img> has width=auto, height=20px + // Calculations are as above, except <img> now imposes height="20px". + appendSVGSubArrayWithParams(svgParams, "embed", "300px", "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> diff --git a/layout/reftests/svg/as-image/img-novb-height-meet-1.html b/layout/reftests/svg/as-image/img-novb-height-meet-1.html new file mode 100644 index 000000000..ab19b2948 --- /dev/null +++ b/layout/reftests/svg/as-image/img-novb-height-meet-1.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 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> diff --git a/layout/reftests/svg/as-image/img-novb-height-slice-1.html b/layout/reftests/svg/as-image/img-novb-height-slice-1.html new file mode 100644 index 000000000..725277a68 --- /dev/null +++ b/layout/reftests/svg/as-image/img-novb-height-slice-1.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 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> diff --git a/layout/reftests/svg/as-image/img-novb-width-all-1-ref.html b/layout/reftests/svg/as-image/img-novb-width-all-1-ref.html new file mode 100644 index 000000000..9d99b4da6 --- /dev/null +++ b/layout/reftests/svg/as-image/img-novb-width-all-1-ref.html @@ -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 = 150px (default) + // - Synthesized viewBox has height = 20% * viewport_height = .2*150 = 30 + // - <img> & viewBox both get width=20px, from <svg> width attr + svgParams.viewBox = [0, 0, 20, 30], + appendSVGSubArrayWithParams(svgParams, "embed", "20px", "150px"); + + // * 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, 30], + appendSVGSubArrayWithParams(svgParams, "embed", "30px", "150px"); + + // * 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> diff --git a/layout/reftests/svg/as-image/img-novb-width-meet-1.html b/layout/reftests/svg/as-image/img-novb-width-meet-1.html new file mode 100644 index 000000000..86ff8afe2 --- /dev/null +++ b/layout/reftests/svg/as-image/img-novb-width-meet-1.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 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> diff --git a/layout/reftests/svg/as-image/img-novb-width-slice-1.html b/layout/reftests/svg/as-image/img-novb-width-slice-1.html new file mode 100644 index 000000000..abbc21e72 --- /dev/null +++ b/layout/reftests/svg/as-image/img-novb-width-slice-1.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 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> diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-all-1-ref.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-all-1-ref.html new file mode 100644 index 000000000..8839c0fa5 --- /dev/null +++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-all-1-ref.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> diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-em.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-em.html new file mode 100644 index 000000000..eccc7c5e1 --- /dev/null +++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-em.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> diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-px.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-px.html new file mode 100644 index 000000000..ed58e8319 --- /dev/null +++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-meet-1-px.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> diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-em.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-em.html new file mode 100644 index 000000000..7986e3ec2 --- /dev/null +++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-em.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> diff --git a/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-px.html b/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-px.html new file mode 100644 index 000000000..a50f10e65 --- /dev/null +++ b/layout/reftests/svg/as-image/img-novb-widthAndHeight-slice-1-px.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> diff --git a/layout/reftests/svg/as-image/img-simple-1.html b/layout/reftests/svg/as-image/img-simple-1.html new file mode 100644 index 000000000..1592cbc06 --- /dev/null +++ b/layout/reftests/svg/as-image/img-simple-1.html @@ -0,0 +1,5 @@ +<html> +<body> + <img src="lime100x100.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-simple-2.html b/layout/reftests/svg/as-image/img-simple-2.html new file mode 100644 index 000000000..049b2a3e4 --- /dev/null +++ b/layout/reftests/svg/as-image/img-simple-2.html @@ -0,0 +1,5 @@ +<html> +<body> + <img src="limeInRed100x100-viewBox.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-simple-3-ref.html b/layout/reftests/svg/as-image/img-simple-3-ref.html new file mode 100644 index 000000000..f77ea89e1 --- /dev/null +++ b/layout/reftests/svg/as-image/img-simple-3-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html> +<body> + <svg style="width: 600px; height: 600px" + viewBox="0 0 100 100" shape-rendering="crispEdges"> + <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> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-simple-3.html b/layout/reftests/svg/as-image/img-simple-3.html new file mode 100644 index 000000000..f20c2877e --- /dev/null +++ b/layout/reftests/svg/as-image/img-simple-3.html @@ -0,0 +1,9 @@ +<html> +<body> + <!-- This image scales uniformly, preserving its aspect ratio, to be + 600x600. Though the SVG content doesn't have a viewBox, we behave as if + it did when it's used as an image, since it has non-percent-valued + height and width attributes on the root svg node. --> + <img src="squaredCircle-100x100.svg" width="600px"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-simple-4.html b/layout/reftests/svg/as-image/img-simple-4.html new file mode 100644 index 000000000..af0f40e31 --- /dev/null +++ b/layout/reftests/svg/as-image/img-simple-4.html @@ -0,0 +1,5 @@ +<html> +<body> + <img src="lime100x100.svg" height="100px" width="100px"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-simple-5-ref.html b/layout/reftests/svg/as-image/img-simple-5-ref.html new file mode 100644 index 000000000..f08c94488 --- /dev/null +++ b/layout/reftests/svg/as-image/img-simple-5-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<html> +<body> + <svg style="width: 200px; height: 600px" + viewBox="0 0 100 100" preserveAspectRatio="none" + shape-rendering="crispEdges"> + <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> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-simple-5.html b/layout/reftests/svg/as-image/img-simple-5.html new file mode 100644 index 000000000..a686a0a1c --- /dev/null +++ b/layout/reftests/svg/as-image/img-simple-5.html @@ -0,0 +1,6 @@ +<html> +<body> + <!-- Like img-simple-3, but with height != width on the img element. --> + <img src="squaredCircle-100x100.svg" width="200px" height="600px"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-simple-6.html b/layout/reftests/svg/as-image/img-simple-6.html new file mode 100644 index 000000000..69ab8ebf0 --- /dev/null +++ b/layout/reftests/svg/as-image/img-simple-6.html @@ -0,0 +1,5 @@ +<html> +<body> + <img src="lime200x200.svg" width="100px"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-simple-7-ref.html b/layout/reftests/svg/as-image/img-simple-7-ref.html new file mode 100644 index 000000000..76f575b44 --- /dev/null +++ b/layout/reftests/svg/as-image/img-simple-7-ref.html @@ -0,0 +1,11 @@ +<html> +<body> + <svg style="width: 200px; height: 200px" + viewBox="0 0 100 50" preserveAspectRatio="none" + shape-rendering="crispEdges"> + <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> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-simple-7.html b/layout/reftests/svg/as-image/img-simple-7.html new file mode 100644 index 000000000..3e0138f20 --- /dev/null +++ b/layout/reftests/svg/as-image/img-simple-7.html @@ -0,0 +1,6 @@ +<html> +<body> + <!-- Like img-simple-3, but with height != width on the root SVG node. --> + <img src="squaredCircle-100x50.svg" width="200px" height="200px"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-width-meet-1-ref.html b/layout/reftests/svg/as-image/img-width-meet-1-ref.html new file mode 100644 index 000000000..079336896 --- /dev/null +++ b/layout/reftests/svg/as-image/img-width-meet-1-ref.html @@ -0,0 +1,19 @@ +<!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, 40], + width : "20px", + meetOrSlice: "meet" + }; + + appendSVGArrayWithParams(svgParams, "embed"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-width-meet-1.html b/layout/reftests/svg/as-image/img-width-meet-1.html new file mode 100644 index 000000000..489b4f7cc --- /dev/null +++ b/layout/reftests/svg/as-image/img-width-meet-1.html @@ -0,0 +1,19 @@ +<!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, 40], + width : "20px", + meetOrSlice: "meet" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-width-meet-2-ref.html b/layout/reftests/svg/as-image/img-width-meet-2-ref.html new file mode 100644 index 000000000..ecf8776e4 --- /dev/null +++ b/layout/reftests/svg/as-image/img-width-meet-2-ref.html @@ -0,0 +1,19 @@ +<!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, 40, 20], + width : "2em", + meetOrSlice: "meet" + }; + + appendSVGArrayWithParams(svgParams, "embed"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-width-meet-2.html b/layout/reftests/svg/as-image/img-width-meet-2.html new file mode 100644 index 000000000..039aaf1f1 --- /dev/null +++ b/layout/reftests/svg/as-image/img-width-meet-2.html @@ -0,0 +1,19 @@ +<!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, 40, 20], + width : "2em", + meetOrSlice: "meet" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-width-slice-1-ref.html b/layout/reftests/svg/as-image/img-width-slice-1-ref.html new file mode 100644 index 000000000..e306d673c --- /dev/null +++ b/layout/reftests/svg/as-image/img-width-slice-1-ref.html @@ -0,0 +1,19 @@ +<!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, 40], + width : "20px", + meetOrSlice: "slice" + }; + + appendSVGArrayWithParams(svgParams, "embed"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-width-slice-1.html b/layout/reftests/svg/as-image/img-width-slice-1.html new file mode 100644 index 000000000..78af6f8b1 --- /dev/null +++ b/layout/reftests/svg/as-image/img-width-slice-1.html @@ -0,0 +1,19 @@ +<!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, 40], + width : "20px", + meetOrSlice: "slice" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-width-slice-2-ref.html b/layout/reftests/svg/as-image/img-width-slice-2-ref.html new file mode 100644 index 000000000..66161ec71 --- /dev/null +++ b/layout/reftests/svg/as-image/img-width-slice-2-ref.html @@ -0,0 +1,19 @@ +<!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, 40, 20], + width : "2em", + meetOrSlice: "slice" + }; + + appendSVGArrayWithParams(svgParams, "embed"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-width-slice-2.html b/layout/reftests/svg/as-image/img-width-slice-2.html new file mode 100644 index 000000000..21740cf70 --- /dev/null +++ b/layout/reftests/svg/as-image/img-width-slice-2.html @@ -0,0 +1,19 @@ +<!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, 40, 20], + width : "2em", + meetOrSlice: "slice" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-meet-1-ref.html b/layout/reftests/svg/as-image/img-widthAndHeight-meet-1-ref.html new file mode 100644 index 000000000..0c9c44ba1 --- /dev/null +++ b/layout/reftests/svg/as-image/img-widthAndHeight-meet-1-ref.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, 40], + height : "20px", + width : "20px", + meetOrSlice: "meet" + }; + + appendSVGArrayWithParams(svgParams, "embed"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-meet-1.html b/layout/reftests/svg/as-image/img-widthAndHeight-meet-1.html new file mode 100644 index 000000000..f5453f91d --- /dev/null +++ b/layout/reftests/svg/as-image/img-widthAndHeight-meet-1.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, 40], + height : "20px", + width : "20px", + meetOrSlice: "meet" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-meet-2-ref.html b/layout/reftests/svg/as-image/img-widthAndHeight-meet-2-ref.html new file mode 100644 index 000000000..93dfa47b6 --- /dev/null +++ b/layout/reftests/svg/as-image/img-widthAndHeight-meet-2-ref.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, 40, 20], + height : "2em", + width : "2em", + meetOrSlice: "meet" + }; + + appendSVGArrayWithParams(svgParams, "embed"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-meet-2.html b/layout/reftests/svg/as-image/img-widthAndHeight-meet-2.html new file mode 100644 index 000000000..367f52b28 --- /dev/null +++ b/layout/reftests/svg/as-image/img-widthAndHeight-meet-2.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, 40, 20], + height : "2em", + width : "2em", + meetOrSlice: "meet" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-slice-1-ref.html b/layout/reftests/svg/as-image/img-widthAndHeight-slice-1-ref.html new file mode 100644 index 000000000..671aa1ecd --- /dev/null +++ b/layout/reftests/svg/as-image/img-widthAndHeight-slice-1-ref.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, 40], + height : "20px", + width : "20px", + meetOrSlice: "slice" + }; + + appendSVGArrayWithParams(svgParams, "embed"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-slice-1.html b/layout/reftests/svg/as-image/img-widthAndHeight-slice-1.html new file mode 100644 index 000000000..b95b7d4ff --- /dev/null +++ b/layout/reftests/svg/as-image/img-widthAndHeight-slice-1.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, 40], + height : "20px", + width : "20px", + meetOrSlice: "slice" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-slice-2-ref.html b/layout/reftests/svg/as-image/img-widthAndHeight-slice-2-ref.html new file mode 100644 index 000000000..ed94f8811 --- /dev/null +++ b/layout/reftests/svg/as-image/img-widthAndHeight-slice-2-ref.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, 40, 20], + height : "2em", + width : "2em", + meetOrSlice: "slice" + }; + + appendSVGArrayWithParams(svgParams, "embed"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/img-widthAndHeight-slice-2.html b/layout/reftests/svg/as-image/img-widthAndHeight-slice-2.html new file mode 100644 index 000000000..2f89c8b4d --- /dev/null +++ b/layout/reftests/svg/as-image/img-widthAndHeight-slice-2.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, 40, 20], + height : "2em", + width : "2em", + meetOrSlice: "slice" + }; + + appendSVGArrayWithParams(svgParams, "img"); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/as-image/lime100x100-noSVGDimensions.svg b/layout/reftests/svg/as-image/lime100x100-noSVGDimensions.svg new file mode 100644 index 000000000..74e4df78a --- /dev/null +++ b/layout/reftests/svg/as-image/lime100x100-noSVGDimensions.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <rect width="100" height="100" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/as-image/lime100x100-ref.html b/layout/reftests/svg/as-image/lime100x100-ref.html new file mode 100644 index 000000000..daedf45c8 --- /dev/null +++ b/layout/reftests/svg/as-image/lime100x100-ref.html @@ -0,0 +1,5 @@ +<html> +<body> + <div style="width: 100px; height: 100px; background: lime"></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/lime100x100.png b/layout/reftests/svg/as-image/lime100x100.png Binary files differnew file mode 100644 index 000000000..c9bb37594 --- /dev/null +++ b/layout/reftests/svg/as-image/lime100x100.png diff --git a/layout/reftests/svg/as-image/lime100x100.svg b/layout/reftests/svg/as-image/lime100x100.svg new file mode 100644 index 000000000..8bdec62c1 --- /dev/null +++ b/layout/reftests/svg/as-image/lime100x100.svg @@ -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> diff --git a/layout/reftests/svg/as-image/lime200x100.svg b/layout/reftests/svg/as-image/lime200x100.svg new file mode 100644 index 000000000..75aadf640 --- /dev/null +++ b/layout/reftests/svg/as-image/lime200x100.svg @@ -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> diff --git a/layout/reftests/svg/as-image/lime200x200.svg b/layout/reftests/svg/as-image/lime200x200.svg new file mode 100644 index 000000000..d746c2848 --- /dev/null +++ b/layout/reftests/svg/as-image/lime200x200.svg @@ -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> diff --git a/layout/reftests/svg/as-image/lime50x25.svg b/layout/reftests/svg/as-image/lime50x25.svg new file mode 100644 index 000000000..9afc0af36 --- /dev/null +++ b/layout/reftests/svg/as-image/lime50x25.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + width="50" height="25"> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/as-image/lime50x50.svg b/layout/reftests/svg/as-image/lime50x50.svg new file mode 100644 index 000000000..7f9d53038 --- /dev/null +++ b/layout/reftests/svg/as-image/lime50x50.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + width="50" height="50"> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-animViewBox.svg b/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-animViewBox.svg new file mode 100644 index 000000000..151ec3077 --- /dev/null +++ b/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-animViewBox.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <set attributeName="viewBox" to="25 25 50 50" begin="0" dur="indefinite"/> + <rect width="100" height="100" fill="red"/> + <rect x="25" y="25" width="50" height="50" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-viewBox.svg b/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-viewBox.svg new file mode 100644 index 000000000..baa944a81 --- /dev/null +++ b/layout/reftests/svg/as-image/limeInRed-noSVGDimensions-viewBox.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + viewBox="25 25 50 50"> + <rect width="100" height="100" fill="red"/> + <rect x="25" y="25" width="50" height="50" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/as-image/limeInRed100x100-viewBox.svg b/layout/reftests/svg/as-image/limeInRed100x100-viewBox.svg new file mode 100644 index 000000000..b97337d0c --- /dev/null +++ b/layout/reftests/svg/as-image/limeInRed100x100-viewBox.svg @@ -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> diff --git a/layout/reftests/svg/as-image/limeInRed100x100.png b/layout/reftests/svg/as-image/limeInRed100x100.png Binary files differnew file mode 100644 index 000000000..d65c62635 --- /dev/null +++ b/layout/reftests/svg/as-image/limeInRed100x100.png diff --git a/layout/reftests/svg/as-image/limeInRed100x100.svg b/layout/reftests/svg/as-image/limeInRed100x100.svg new file mode 100644 index 000000000..45d9396b9 --- /dev/null +++ b/layout/reftests/svg/as-image/limeInRed100x100.svg @@ -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> diff --git a/layout/reftests/svg/as-image/list-simple-1-ref.html b/layout/reftests/svg/as-image/list-simple-1-ref.html new file mode 100644 index 000000000..b603886ba --- /dev/null +++ b/layout/reftests/svg/as-image/list-simple-1-ref.html @@ -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> diff --git a/layout/reftests/svg/as-image/list-simple-1.html b/layout/reftests/svg/as-image/list-simple-1.html new file mode 100644 index 000000000..2e638943f --- /dev/null +++ b/layout/reftests/svg/as-image/list-simple-1.html @@ -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> diff --git a/layout/reftests/svg/as-image/nonuniform-scale-2d.html b/layout/reftests/svg/as-image/nonuniform-scale-2d.html new file mode 100644 index 000000000..b14ff82ef --- /dev/null +++ b/layout/reftests/svg/as-image/nonuniform-scale-2d.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + img { + width: 100px; + height: 100px; + transform-origin: 0 0 0; + } + </style> +</head> +<body> + <img src="blue-square-in-square.svg"> + + <script> + var scales = location.search.substring(1).split("&"); + var xScale = scales[0]; + var yScale = scales[1]; + + // Create a style representing a 2d transform. + var style = 'transform: matrix(' + xScale + ', 0,' + + '0, ' + yScale + ',' + + '0, 0);'; + + // Apply the style to the image. + var img = document.getElementsByTagName("img")[0]; + img.style = style; + </script> +</body> diff --git a/layout/reftests/svg/as-image/nonuniform-scale-3d.html b/layout/reftests/svg/as-image/nonuniform-scale-3d.html new file mode 100644 index 000000000..8da467298 --- /dev/null +++ b/layout/reftests/svg/as-image/nonuniform-scale-3d.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + img { + width: 100px; + height: 100px; + transform-origin: 0 0 0; + } + </style> +</head> +<body> + <img src="blue-square-in-square.svg"> + + <script> + var scales = location.search.substring(1).split("&"); + var xScale = scales[0]; + var yScale = scales[1]; + var zScale = scales[2]; + + // Create a style representing a 3d transform. + var style = 'transform: matrix3d(' + xScale + ', 0, 0, 0,' + + '0, ' + yScale + ', 0, 0,' + + '0, 0, ' + zScale + ', 0,' + + '0, 0, 0, 1);'; + + // Apply the style to the image. + var img = document.getElementsByTagName("img")[0]; + img.style = style; + </script> +</body> diff --git a/layout/reftests/svg/as-image/nonuniform-scale-ref.html b/layout/reftests/svg/as-image/nonuniform-scale-ref.html new file mode 100644 index 000000000..9644d44e5 --- /dev/null +++ b/layout/reftests/svg/as-image/nonuniform-scale-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + </style> +</head> +<body> + <img src="blue-square-in-square-par-none.svg"> + + <script> + var sizes = location.search.substring(1).split("&"); + + // Apply the size to the image. + var img = document.getElementsByTagName("img")[0]; + img.width = sizes[0]; + img.height = sizes[1]; + </script> +</body> diff --git a/layout/reftests/svg/as-image/reftest-stylo.list b/layout/reftests/svg/as-image/reftest-stylo.list new file mode 100644 index 000000000..da8acdfff --- /dev/null +++ b/layout/reftests/svg/as-image/reftest-stylo.list @@ -0,0 +1,275 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# Tests related to SVG being used as an image + +# zoom/ +include zoom/reftest-stylo.list + +# Background-image tests +skip-if(Mulet) == background-display-none-1.html background-display-none-1.html +# MULET: Bug 1144079: Re-enable Mulet mochitests and reftests taskcluster-specific disables +skip-if(B2G||Mulet) == background-simple-1.html background-simple-1.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +== background-simple-2.html background-simple-2.html + +# Sightly trickier background-image test +== background-viewBox-1.html background-viewBox-1.html + +# background tests with the background area getting resized +== background-resize-1.html background-resize-1.html +== background-resize-2.html background-resize-2.html +== background-resize-3.html background-resize-3.html +== background-resize-4.html background-resize-4.html + +# Test for stretching background images by different amounts in each dimension +== background-stretch-1.html background-stretch-1.html + +# Tests for scaling background images +== background-scale-no-viewbox-1.html background-scale-no-viewbox-1.html +== background-scale-with-viewbox-1.html background-scale-with-viewbox-1.html + +# Tests with -moz-image-rect() +random == background-image-rect-1svg.html background-image-rect-1svg.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +== background-image-rect-1png.html background-image-rect-1png.html +== background-image-rect-2.html background-image-rect-2.html + +# Test for border-image +== border-image-simple-1.html border-image-simple-1.html +== border-image-simple-2.html border-image-simple-2.html + +# Test for canvas "drawImage" method +== canvas-drawImage-simple-1a.html canvas-drawImage-simple-1a.html +== canvas-drawImage-simple-1b.html canvas-drawImage-simple-1b.html + +skip-if(B2G||Mulet) == canvas-drawImage-scale-1a.html canvas-drawImage-scale-1a.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == canvas-drawImage-scale-1b.html canvas-drawImage-scale-1b.html +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == canvas-drawImage-scale-1c.html canvas-drawImage-scale-1c.html +# Initial mulet triage: parity with B2G/B2G Desktop + +fuzzy(1,2) fuzzy-if(skiaContent,1,529) == canvas-drawImage-scale-2a.html canvas-drawImage-scale-2a.html +fuzzy(1,2) fuzzy-if(skiaContent,1,529) == canvas-drawImage-scale-2b.html canvas-drawImage-scale-2b.html + +fuzzy-if(winWidget&&!d2d,1,10000) fuzzy-if(azureSkia,1,10000) fuzzy-if(Android||B2G,1,10000) == canvas-drawImage-alpha-1.html canvas-drawImage-alpha-1.html +#Same as scale-2a but with globalAlpha: +fuzzy-if(azureSkia,1,40000) == canvas-drawImage-alpha-2.html canvas-drawImage-alpha-2.html + +skip-if(B2G||Mulet) == canvas-drawImage-slice-1a.html canvas-drawImage-slice-1a.html +# Initial mulet triage: parity with B2G/B2G Desktop +== canvas-drawImage-slice-1b.html canvas-drawImage-slice-1b.html + +== canvas-drawImage-origin-clean-1.html canvas-drawImage-origin-clean-1.html +== canvas-drawImage-transform-restored.html canvas-drawImage-transform-restored.html + +# Simple <img> tests +== img-simple-1.html img-simple-1.html +== img-simple-2.html img-simple-2.html +fuzzy-if(skiaContent,255,350) == img-simple-3.html img-simple-3.html +== img-simple-4.html img-simple-4.html +fails fuzzy-if(skiaContent,255,90) == img-simple-5.html img-simple-5.html +skip-if(B2G||Mulet) == img-simple-6.html img-simple-6.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +fails fuzzy-if(skiaContent,255,27) == img-simple-7.html img-simple-7.html + +# Test with mix of <html:img> and <svg:image> referring to the same images, +# with a variety of preserveAspectRatio values in play. +random == img-and-image-1.html img-and-image-1.html +# bug 645267 + +# More complex <img> tests +== img-blobURI-1.html img-blobURI-1.html +skip random == img-blobURI-2.html img-blobURI-2.html +fuzzy-if(d2d,16,10) == img-content-outside-viewBox-1.html img-content-outside-viewBox-1.html +# d2d is bug 1074161 +skip-if(Mulet) == img-display-none-1.html img-display-none-1.html +# MULET: Bug 1144079: Re-enable Mulet mochitests and reftests taskcluster-specific disables +== img-dyn-1.html img-dyn-1.html +== img-foreignObject-1.html img-foreignObject-1.html + +# The following tests check that content embedded via <iframe> and <embed> +# doesn't load (or execute scripts) in SVG-as-an-image. +# The "!=" lines are to test that the SVG content, when viewed directly (not as +# an image), does actually render its external content (making it look +# different from the reference case). We don't do that check for +# img-foreignObject-iframe-1a.html, though, because its SVG image tries to +# alert(), and that'd trigger a reftest timeout if we loaded that file directly. +== img-foreignObject-embed-1.html img-foreignObject-embed-1.html +== img-foreignObject-embed-1-helper.svg img-foreignObject-embed-1-helper.svg +== img-foreignObject-iframe-1a.html img-foreignObject-iframe-1a.html +== img-foreignObject-iframe-1b.html img-foreignObject-iframe-1b.html +== img-foreignObject-iframe-1b-helper.svg img-foreignObject-iframe-1b-helper.svg + +== img-widthAndHeight-meet-1.html img-widthAndHeight-meet-1.html +skip == img-widthAndHeight-meet-2.html img-widthAndHeight-meet-2.html +== img-widthAndHeight-slice-1.html img-widthAndHeight-slice-1.html +== img-widthAndHeight-slice-2.html img-widthAndHeight-slice-2.html + +== img-height-meet-1.html img-height-meet-1.html +== img-height-meet-2.html img-height-meet-2.html +== img-height-slice-1.html img-height-slice-1.html +== img-height-slice-2.html img-height-slice-2.html + +== img-width-meet-1.html img-width-meet-1.html +== img-width-meet-2.html img-width-meet-2.html +== img-width-slice-1.html img-width-slice-1.html +== img-width-slice-2.html img-width-slice-2.html + +# Alternate version of "width & height both non-%-valued" tests, but now +# with no explicit viewBox, to trigger "synthesize-viewBox" behavior +== img-novb-widthAndHeight-meet-1-em.html img-novb-widthAndHeight-meet-1-em.html +== img-novb-widthAndHeight-meet-1-px.html img-novb-widthAndHeight-meet-1-px.html +== img-novb-widthAndHeight-slice-1-em.html img-novb-widthAndHeight-slice-1-em.html +== img-novb-widthAndHeight-slice-1-px.html img-novb-widthAndHeight-slice-1-px.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-meet-1.html +== img-novb-height-slice-1.html img-novb-height-slice-1.html +fuzzy-if(skiaContent,255,10) == img-novb-width-meet-1.html img-novb-width-meet-1.html +fuzzy-if(skiaContent,255,10) == img-novb-width-slice-1.html img-novb-width-slice-1.html + +# with with a fragmentIdentifier viewBox +skip-if(B2G||Mulet) == img-fragment-1a.html img-fragment-1a.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == img-fragment-1b.html img-fragment-1b.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == img-fragment-1c.html img-fragment-1c.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == img-fragment-2a.html img-fragment-2a.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == img-fragment-2b.html img-fragment-2b.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip-if(B2G||Mulet) == img-fragment-2c.html img-fragment-2c.html +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop + +fuzzy-if(B2G,68,4) == list-simple-1.html list-simple-1.html + +== svg-image-simple-1.svg svg-image-simple-1.svg +== svg-image-simple-2.svg svg-image-simple-2.svg +== svg-image-simple-3.svg svg-image-simple-3.svg + +# tests for <svg> files that include themselves as an <image> +== svg-image-recursive-1a.svg svg-image-recursive-1a.svg +== svg-image-recursive-1b.svg svg-image-recursive-1b.svg +== svg-image-recursive-2a.svg svg-image-recursive-2a.svg +== svg-image-recursive-2b.html svg-image-recursive-2b.html + +# test that scripting feature is not supported in images or referenced documents +skip skip-if(B2G||Mulet) == svg-image-script-1.svg svg-image-script-1.svg +# bug 773482 +# Initial mulet triage: parity with B2G/B2G Desktop +skip == svg-image-script-2.svg svg-image-script-2.svg + +# tests for external resources vs. data URIs in SVG as an image +== svg-image-datauri-1.html svg-image-datauri-1.html +HTTP == svg-image-datauri-1.html svg-image-datauri-1.html +== svg-image-external-1.html svg-image-external-1.html +HTTP == svg-image-external-1.html svg-image-external-1.html +== svg-stylesheet-datauri-1.html svg-stylesheet-datauri-1.html +HTTP == svg-stylesheet-datauri-1.html svg-stylesheet-datauri-1.html +== svg-stylesheet-external-1.html svg-stylesheet-external-1.html +HTTP == svg-stylesheet-external-1.html svg-stylesheet-external-1.html + +# test that :visited status is ignored in image documents +# We load the images directly first, to be sure history is populated. +# It's also good to verify that the helper images don't match lime100x100.svg +# in non-image contexts, but for that to work, we have to reliably count on +# :visited styles loading (asynchronously), so we test that in +# layout/style/test/test_visited_reftests.html instead of the reftest harness. +== svg-image-visited-1-helper.svg svg-image-visited-1-helper.svg +== svg-image-visited-1.html svg-image-visited-1.html +== svg-image-visited-2-helper.svg svg-image-visited-2-helper.svg +skip == svg-image-visited-2.html svg-image-visited-2.html + +# Test for painting problems with SVGs used in border images. +# XXXseth: The underlying problems also apply to media fragments, +# but the test case would be much simpler. This should be switched +# over to use media fragments once bug 790640 lands. +skip-if(B2G||Mulet) fuzzy(2,1) == svg-border-image-repaint-1.html svg-border-image-repaint-1.html +# Initial mulet triage: parity with B2G/B2G Desktop + +# Tests for image-orientation with a viewbox and an intrinsic size: +== image-orientation-viewbox-and-size.html?0 image-orientation-viewbox-and-size.html?0 +== image-orientation-viewbox-and-size.html?90 image-orientation-viewbox-and-size.html?90 +== image-orientation-viewbox-and-size.html?180 image-orientation-viewbox-and-size.html?180 +== image-orientation-viewbox-and-size.html?270 image-orientation-viewbox-and-size.html?270 +== image-orientation-viewbox-and-size.html?0&flip image-orientation-viewbox-and-size.html?0&flip +== image-orientation-viewbox-and-size.html?90&flip image-orientation-viewbox-and-size.html?90&flip +== image-orientation-viewbox-and-size.html?180&flip image-orientation-viewbox-and-size.html?180&flip +== image-orientation-viewbox-and-size.html?270&flip image-orientation-viewbox-and-size.html?270&flip + +# Tests for image-orientation with a viewbox and no intrinsic size: +== image-orientation-viewbox-no-size.html?0 image-orientation-viewbox-no-size.html?0 +== image-orientation-viewbox-no-size.html?90 image-orientation-viewbox-no-size.html?90 +== image-orientation-viewbox-no-size.html?180 image-orientation-viewbox-no-size.html?180 +== image-orientation-viewbox-no-size.html?270 image-orientation-viewbox-no-size.html?270 +== image-orientation-viewbox-no-size.html?0&flip image-orientation-viewbox-no-size.html?0&flip +== image-orientation-viewbox-no-size.html?90&flip image-orientation-viewbox-no-size.html?90&flip +== image-orientation-viewbox-no-size.html?180&flip image-orientation-viewbox-no-size.html?180&flip +== image-orientation-viewbox-no-size.html?270&flip image-orientation-viewbox-no-size.html?270&flip + +# Tests for image-orientation with no viewbox and an intrinsic size: +== image-orientation-no-viewbox-and-size.html?0 image-orientation-no-viewbox-and-size.html?0 +== image-orientation-no-viewbox-and-size.html?90 image-orientation-no-viewbox-and-size.html?90 +== image-orientation-no-viewbox-and-size.html?180 image-orientation-no-viewbox-and-size.html?180 +== image-orientation-no-viewbox-and-size.html?270 image-orientation-no-viewbox-and-size.html?270 +skip == image-orientation-no-viewbox-and-size.html?0&flip image-orientation-no-viewbox-and-size.html?0&flip +== image-orientation-no-viewbox-and-size.html?90&flip image-orientation-no-viewbox-and-size.html?90&flip +== image-orientation-no-viewbox-and-size.html?180&flip image-orientation-no-viewbox-and-size.html?180&flip +skip == image-orientation-no-viewbox-and-size.html?270&flip image-orientation-no-viewbox-and-size.html?270&flip + +# Tests for image-orientation with no viewbox and no intrinsic size: +== image-orientation-no-viewbox-no-size.html?0 image-orientation-no-viewbox-no-size.html?0 +== image-orientation-no-viewbox-no-size.html?90 image-orientation-no-viewbox-no-size.html?90 +== image-orientation-no-viewbox-no-size.html?180 image-orientation-no-viewbox-no-size.html?180 +== image-orientation-no-viewbox-no-size.html?270 image-orientation-no-viewbox-no-size.html?270 +== image-orientation-no-viewbox-no-size.html?0&flip image-orientation-no-viewbox-no-size.html?0&flip +== image-orientation-no-viewbox-no-size.html?90&flip image-orientation-no-viewbox-no-size.html?90&flip +== image-orientation-no-viewbox-no-size.html?180&flip image-orientation-no-viewbox-no-size.html?180&flip +== image-orientation-no-viewbox-no-size.html?270&flip image-orientation-no-viewbox-no-size.html?270&flip + +# Test that 'image-orientation: from-image' has no effect, since SVGs don't have EXIF data. +== image-orientation-viewbox-and-size.html?from-image image-orientation-viewbox-and-size.html?from-image +== image-orientation-viewbox-no-size.html?from-image image-orientation-viewbox-no-size.html?from-image + +# Sanity checks for the image-orientation tests. Ensures that the various +# combinations of rotations and flips actually look different from each other. +== image-orientation-ref.html?0 image-orientation-ref.html?0 +== image-orientation-ref.html?0 image-orientation-ref.html?0 +== image-orientation-ref.html?0 image-orientation-ref.html?0 +== image-orientation-ref.html?90 image-orientation-ref.html?90 +== image-orientation-ref.html?90 image-orientation-ref.html?90 +== image-orientation-ref.html?180 image-orientation-ref.html?180 +== image-orientation-ref.html?0 image-orientation-ref.html?0 +== image-orientation-ref.html?90 image-orientation-ref.html?90 +== image-orientation-ref.html?180 image-orientation-ref.html?180 +== image-orientation-ref.html?270 image-orientation-ref.html?270 + +# Tests that nonuniform scales work with SVG-as-image. +== nonuniform-scale-2d.html?0.5&1.0 nonuniform-scale-2d.html?0.5&1.0 +== nonuniform-scale-2d.html?1.0&0.5 nonuniform-scale-2d.html?1.0&0.5 +== nonuniform-scale-3d.html?0.5&1.0&0.5 nonuniform-scale-3d.html?0.5&1.0&0.5 +== nonuniform-scale-3d.html?1.0&0.5&0.5 nonuniform-scale-3d.html?1.0&0.5&0.5 + +# Sanity checks that nonuniform scales don't devolve to uniform scales. +== nonuniform-scale-2d.html?0.3&1.0 nonuniform-scale-2d.html?0.3&1.0 +== nonuniform-scale-2d.html?0.3&1.0 nonuniform-scale-2d.html?0.3&1.0 +== nonuniform-scale-2d.html?1.0&0.3 nonuniform-scale-2d.html?1.0&0.3 +== nonuniform-scale-2d.html?1.0&0.3 nonuniform-scale-2d.html?1.0&0.3 +== nonuniform-scale-3d.html?0.3&1.0&0.3 nonuniform-scale-3d.html?0.3&1.0&0.3 +== nonuniform-scale-3d.html?0.3&1.0&0.3 nonuniform-scale-3d.html?0.3&1.0&0.3 +== nonuniform-scale-3d.html?1.0&0.3&0.3 nonuniform-scale-3d.html?1.0&0.3&0.3 +== nonuniform-scale-3d.html?1.0&0.3&0.3 nonuniform-scale-3d.html?1.0&0.3&0.3 + +# Test for preserveAspectRatio with no-longer-supported "defer" keyword +== defer-unsupported-1.svg defer-unsupported-1.svg diff --git a/layout/reftests/svg/as-image/reftest.list b/layout/reftests/svg/as-image/reftest.list new file mode 100644 index 000000000..75c149646 --- /dev/null +++ b/layout/reftests/svg/as-image/reftest.list @@ -0,0 +1,241 @@ +# Tests related to SVG being used as an image + +# zoom/ +include zoom/reftest.list + +# Background-image tests +== background-display-none-1.html about:blank +== 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 + +# background tests with the background area getting resized +== background-resize-1.html lime100x100-ref.html +== background-resize-2.html lime100x100-ref.html +== background-resize-3.html lime100x100-ref.html +== background-resize-4.html lime100x100-ref.html + +# Test for stretching background images by different amounts in each dimension +== background-stretch-1.html background-stretch-1-ref.html + +# Tests for scaling background images +== background-scale-no-viewbox-1.html background-scale-no-viewbox-1-ref.html +== background-scale-with-viewbox-1.html background-scale-with-viewbox-1-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 + +# Test for border-image +== border-image-simple-1.html lime100x100-ref.html +== border-image-simple-2.html lime100x100-ref.html + +# Test for canvas "drawImage" method +== canvas-drawImage-simple-1a.html lime100x100-ref.html +== canvas-drawImage-simple-1b.html lime100x100-ref.html + +== canvas-drawImage-scale-1a.html lime100x100-ref.html +== canvas-drawImage-scale-1b.html lime100x100-ref.html +== canvas-drawImage-scale-1c.html lime100x100-ref.html + +fuzzy(1,2) fuzzy-if(skiaContent,1,529) == canvas-drawImage-scale-2a.html canvas-drawImage-scale-2-ref.html +fuzzy(1,2) fuzzy-if(skiaContent,1,529) == canvas-drawImage-scale-2b.html canvas-drawImage-scale-2-ref.html + +fuzzy-if(winWidget&&!d2d,1,10000) fuzzy-if(azureSkia,1,10000) fuzzy-if(Android,1,10000) == canvas-drawImage-alpha-1.html canvas-drawImage-alpha-1-ref.html +#Same as scale-2a but with globalAlpha: +fuzzy(1,2) fuzzy-if(azureSkia,1,40000) == canvas-drawImage-alpha-2.html canvas-drawImage-alpha-2-ref.html + +== canvas-drawImage-slice-1a.html lime100x100-ref.html +== canvas-drawImage-slice-1b.html lime100x100-ref.html + +== canvas-drawImage-origin-clean-1.html lime100x100-ref.html +== canvas-drawImage-transform-restored.html canvas-drawImage-transform-restored-ref.html + +# Simple <img> tests +== img-simple-1.html lime100x100-ref.html +== img-simple-2.html lime100x100-ref.html +fuzzy-if(skiaContent,255,350) == img-simple-3.html img-simple-3-ref.html +== img-simple-4.html lime100x100-ref.html +fuzzy-if(skiaContent,255,90) == img-simple-5.html img-simple-5-ref.html +== img-simple-6.html lime100x100-ref.html +fuzzy-if(skiaContent,255,27) == img-simple-7.html img-simple-7-ref.html + +# Test with mix of <html:img> and <svg:image> referring to the same images, +# with a variety of preserveAspectRatio values in play. +random == img-and-image-1.html img-and-image-1-ref.svg # bug 645267 + +# More complex <img> tests +== img-blobURI-1.html lime100x100-ref.html +random == img-blobURI-2.html lime100x100-ref.html +fuzzy-if(d2d,16,10) == img-content-outside-viewBox-1.html img-content-outside-viewBox-1-ref.html # d2d is bug 1074161 +== img-display-none-1.html about:blank +== img-dyn-1.html img-dyn-1-ref.html +== img-foreignObject-1.html lime100x100-ref.html + +# The following tests check that content embedded via <iframe> and <embed> +# doesn't load (or execute scripts) in SVG-as-an-image. +# The "!=" lines are to test that the SVG content, when viewed directly (not as +# an image), does actually render its external content (making it look +# different from the reference case). We don't do that check for +# img-foreignObject-iframe-1a.html, though, because its SVG image tries to +# alert(), and that'd trigger a reftest timeout if we loaded that file directly. +== img-foreignObject-embed-1.html lime100x100-ref.html +!= img-foreignObject-embed-1-helper.svg lime100x100-ref.html +== img-foreignObject-iframe-1a.html lime100x100-ref.html +== img-foreignObject-iframe-1b.html lime100x100-ref.html +!= img-foreignObject-iframe-1b-helper.svg lime100x100-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 + +# Alternate version of "width & height both non-%-valued" tests, but now +# with no explicit viewBox, to trigger "synthesize-viewBox" behavior +== img-novb-widthAndHeight-meet-1-em.html img-novb-widthAndHeight-all-1-ref.html +== img-novb-widthAndHeight-meet-1-px.html img-novb-widthAndHeight-all-1-ref.html +== img-novb-widthAndHeight-slice-1-em.html img-novb-widthAndHeight-all-1-ref.html +== 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 +fuzzy-if(skiaContent,255,10) == img-novb-width-meet-1.html img-novb-width-all-1-ref.html +fuzzy-if(skiaContent,255,10) == img-novb-width-slice-1.html img-novb-width-all-1-ref.html + +# with with a fragmentIdentifier viewBox +== img-fragment-1a.html img-fragment-1-ref.html +== img-fragment-1b.html img-fragment-1-ref.html +== img-fragment-1c.html img-fragment-1-ref.html +== img-fragment-2a.html img-fragment-2-ref.html +== img-fragment-2b.html img-fragment-2-ref.html +== img-fragment-2c.html img-fragment-2-ref.html + +== list-simple-1.html list-simple-1-ref.html + +== svg-image-simple-1.svg lime100x100.svg +== svg-image-simple-2.svg lime100x100.svg +== svg-image-simple-3.svg lime100x100.svg + +# tests for <svg> files that include themselves as an <image> +== svg-image-recursive-1a.svg svg-image-recursive-1-ref.svg +== svg-image-recursive-1b.svg svg-image-recursive-1-ref.svg +== svg-image-recursive-2a.svg svg-image-recursive-2-ref.svg +== svg-image-recursive-2b.html svg-image-recursive-2-ref.svg + +# tests for external resources vs. data URIs in SVG as an image +== svg-image-datauri-1.html lime100x100.svg +HTTP == svg-image-datauri-1.html lime100x100.svg +== svg-image-external-1.html blue100x100.svg +HTTP == svg-image-external-1.html blue100x100.svg +== svg-stylesheet-datauri-1.html lime100x100.svg +HTTP == svg-stylesheet-datauri-1.html lime100x100.svg +== svg-stylesheet-external-1.html blue100x100.svg +HTTP == svg-stylesheet-external-1.html blue100x100.svg + +# test that :visited status is ignored in image documents +# We load the images directly first, to be sure history is populated. +# It's also good to verify that the helper images don't match lime100x100.svg +# in non-image contexts, but for that to work, we have to reliably count on +# :visited styles loading (asynchronously), so we test that in +# layout/style/test/test_visited_reftests.html instead of the reftest harness. +!= svg-image-visited-1-helper.svg about:blank +== svg-image-visited-1.html lime100x100.svg +!= svg-image-visited-2-helper.svg about:blank +== svg-image-visited-2.html lime100x100.svg + +# Test for painting problems with SVGs used in border images. +# XXXseth: The underlying problems also apply to media fragments, +# but the test case would be much simpler. This should be switched +# over to use media fragments once bug 790640 lands. +fuzzy(2,1) == svg-border-image-repaint-1.html svg-border-image-repaint-1-ref.html + +# Tests for image-orientation with a viewbox and an intrinsic size: +== image-orientation-viewbox-and-size.html?0 image-orientation-ref.html?0 +== image-orientation-viewbox-and-size.html?90 image-orientation-ref.html?90 +== image-orientation-viewbox-and-size.html?180 image-orientation-ref.html?180 +== image-orientation-viewbox-and-size.html?270 image-orientation-ref.html?270 +== image-orientation-viewbox-and-size.html?0&flip image-orientation-ref.html?0&flip +== image-orientation-viewbox-and-size.html?90&flip image-orientation-ref.html?90&flip +== image-orientation-viewbox-and-size.html?180&flip image-orientation-ref.html?180&flip +== image-orientation-viewbox-and-size.html?270&flip image-orientation-ref.html?270&flip + +# Tests for image-orientation with a viewbox and no intrinsic size: +== image-orientation-viewbox-no-size.html?0 image-orientation-ref.html?0 +== image-orientation-viewbox-no-size.html?90 image-orientation-ref.html?90 +== image-orientation-viewbox-no-size.html?180 image-orientation-ref.html?180 +== image-orientation-viewbox-no-size.html?270 image-orientation-ref.html?270 +== image-orientation-viewbox-no-size.html?0&flip image-orientation-ref.html?0&flip +== image-orientation-viewbox-no-size.html?90&flip image-orientation-ref.html?90&flip +== image-orientation-viewbox-no-size.html?180&flip image-orientation-ref.html?180&flip +== image-orientation-viewbox-no-size.html?270&flip image-orientation-ref.html?270&flip + +# Tests for image-orientation with no viewbox and an intrinsic size: +== image-orientation-no-viewbox-and-size.html?0 image-orientation-ref.html?0 +== image-orientation-no-viewbox-and-size.html?90 image-orientation-ref.html?90 +== image-orientation-no-viewbox-and-size.html?180 image-orientation-ref.html?180 +== image-orientation-no-viewbox-and-size.html?270 image-orientation-ref.html?270 +== image-orientation-no-viewbox-and-size.html?0&flip image-orientation-ref.html?0&flip +== image-orientation-no-viewbox-and-size.html?90&flip image-orientation-ref.html?90&flip +== image-orientation-no-viewbox-and-size.html?180&flip image-orientation-ref.html?180&flip +== image-orientation-no-viewbox-and-size.html?270&flip image-orientation-ref.html?270&flip + +# Tests for image-orientation with no viewbox and no intrinsic size: +== image-orientation-no-viewbox-no-size.html?0 image-orientation-ref.html?0 +== image-orientation-no-viewbox-no-size.html?90 image-orientation-ref.html?90 +== image-orientation-no-viewbox-no-size.html?180 image-orientation-ref.html?180 +== image-orientation-no-viewbox-no-size.html?270 image-orientation-ref.html?270 +== image-orientation-no-viewbox-no-size.html?0&flip image-orientation-ref.html?0&flip +== image-orientation-no-viewbox-no-size.html?90&flip image-orientation-ref.html?90&flip +== image-orientation-no-viewbox-no-size.html?180&flip image-orientation-ref.html?180&flip +== image-orientation-no-viewbox-no-size.html?270&flip image-orientation-ref.html?270&flip + +# Test that 'image-orientation: from-image' has no effect, since SVGs don't have EXIF data. +== image-orientation-viewbox-and-size.html?from-image image-orientation-ref.html?0 +== image-orientation-viewbox-no-size.html?from-image image-orientation-ref.html?0 + +# Sanity checks for the image-orientation tests. Ensures that the various +# combinations of rotations and flips actually look different from each other. +!= image-orientation-ref.html?0 image-orientation-ref.html?90 +!= image-orientation-ref.html?0 image-orientation-ref.html?180 +!= image-orientation-ref.html?0 image-orientation-ref.html?270 +!= image-orientation-ref.html?90 image-orientation-ref.html?180 +!= image-orientation-ref.html?90 image-orientation-ref.html?270 +!= image-orientation-ref.html?180 image-orientation-ref.html?270 +!= image-orientation-ref.html?0 image-orientation-ref.html?0&flip +!= image-orientation-ref.html?90 image-orientation-ref.html?90&flip +!= image-orientation-ref.html?180 image-orientation-ref.html?180&flip +!= image-orientation-ref.html?270 image-orientation-ref.html?270&flip + +# Tests that nonuniform scales work with SVG-as-image. +== nonuniform-scale-2d.html?0.5&1.0 nonuniform-scale-ref.html?50&100 +== nonuniform-scale-2d.html?1.0&0.5 nonuniform-scale-ref.html?100&50 +== nonuniform-scale-3d.html?0.5&1.0&0.5 nonuniform-scale-ref.html?50&100 +== nonuniform-scale-3d.html?1.0&0.5&0.5 nonuniform-scale-ref.html?100&50 + +# Sanity checks that nonuniform scales don't devolve to uniform scales. +!= nonuniform-scale-2d.html?0.3&1.0 nonuniform-scale-2d.html?0.3&0.3 +!= nonuniform-scale-2d.html?0.3&1.0 nonuniform-scale-2d.html?1.0&1.0 +!= nonuniform-scale-2d.html?1.0&0.3 nonuniform-scale-2d.html?0.3&0.3 +!= nonuniform-scale-2d.html?1.0&0.3 nonuniform-scale-2d.html?1.0&1.0 +!= nonuniform-scale-3d.html?0.3&1.0&0.3 nonuniform-scale-3d.html?0.3&0.3&0.3 +!= nonuniform-scale-3d.html?0.3&1.0&0.3 nonuniform-scale-3d.html?1.0&1.0&1.0 +!= nonuniform-scale-3d.html?1.0&0.3&0.3 nonuniform-scale-3d.html?0.3&0.3&0.3 +!= nonuniform-scale-3d.html?1.0&0.3&0.3 nonuniform-scale-3d.html?1.0&1.0&1.0 + +# Test for preserveAspectRatio with no-longer-supported "defer" keyword +== defer-unsupported-1.svg defer-unsupported-1-ref.svg diff --git a/layout/reftests/svg/as-image/squaredCircle-100x100.svg b/layout/reftests/svg/as-image/squaredCircle-100x100.svg new file mode 100644 index 000000000..892cc0e8c --- /dev/null +++ b/layout/reftests/svg/as-image/squaredCircle-100x100.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + width="100" height="100" + shape-rendering="crispEdges"> + <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> diff --git a/layout/reftests/svg/as-image/squaredCircle-100x50.svg b/layout/reftests/svg/as-image/squaredCircle-100x50.svg new file mode 100644 index 000000000..57b516958 --- /dev/null +++ b/layout/reftests/svg/as-image/squaredCircle-100x50.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + width="100" height="50" + shape-rendering="crispEdges"> + <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> diff --git a/layout/reftests/svg/as-image/squaredCircle-transparent.svg b/layout/reftests/svg/as-image/squaredCircle-transparent.svg new file mode 100644 index 000000000..32bd67b63 --- /dev/null +++ b/layout/reftests/svg/as-image/squaredCircle-transparent.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" > + <rect x="0" y="0" height="100" width="100" fill="orange"/> + <g style="opacity:.75"> + <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"/> + </g> +</svg> diff --git a/layout/reftests/svg/as-image/squaredCircle-viewBox-100x100.svg b/layout/reftests/svg/as-image/squaredCircle-viewBox-100x100.svg new file mode 100644 index 000000000..4912c656d --- /dev/null +++ b/layout/reftests/svg/as-image/squaredCircle-viewBox-100x100.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" + height="100" width="100" > + <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> diff --git a/layout/reftests/svg/as-image/squaredCircle-viewBox-noSize.svg b/layout/reftests/svg/as-image/squaredCircle-viewBox-noSize.svg new file mode 100644 index 000000000..c0665d15d --- /dev/null +++ b/layout/reftests/svg/as-image/squaredCircle-viewBox-noSize.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> + <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> diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-1-ref.html b/layout/reftests/svg/as-image/svg-border-image-repaint-1-ref.html new file mode 100644 index 000000000..bb11b225b --- /dev/null +++ b/layout/reftests/svg/as-image/svg-border-image-repaint-1-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=809181 +--> +<html> + <head></head> + <body> + <iframe src="svg-border-image-repaint-iframe.html"></iframe> + </body> +</html> + diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-1.html b/layout/reftests/svg/as-image/svg-border-image-repaint-1.html new file mode 100644 index 000000000..bb26bc035 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-border-image-repaint-1.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=809181 +--> +<html class="reftest-wait"> + <head> + <script> + document.addEventListener('MozReftestInvalidate', function() { + document.getElementById('test').style.opacity = '1.0'; + document.documentElement.removeAttribute('class'); + }, false); + </script> + </head> + <body> + <iframe id="test" src="svg-border-image-repaint-iframe.html" style="opacity: 0.5"></iframe> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-helper.svg b/layout/reftests/svg/as-image/svg-border-image-repaint-helper.svg new file mode 100644 index 000000000..ccc782446 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-border-image-repaint-helper.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg viewBox="0 0 40 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> +<path fill="#000000" d=" M 0.00 0.00 L 20.00 0.00 C 20.00 6.67 20.00 13.33 20.00 20.00 C 13.33 20.00 6.67 20.00 0.00 20.00 L 0.00 0.00 Z" /> +<path fill="#ff0000" d=" M 20.00 0.00 L 40.00 0.00 C 40.00 6.67 40.00 13.33 40.00 20.00 C 33.33 20.00 26.67 20.00 20.00 20.00 C 20.00 13.33 20.00 6.67 20.00 0.00 Z" /> +</svg> diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-iframe.html b/layout/reftests/svg/as-image/svg-border-image-repaint-iframe.html new file mode 100644 index 000000000..f0281228e --- /dev/null +++ b/layout/reftests/svg/as-image/svg-border-image-repaint-iframe.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=809181 +--> +<html> + <head> + <style> + div { + background-color: green; + border-image: url("svg-border-image-repaint-helper.svg") 20 repeat; + border-image-width: 20px 20px 20px 20px; + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-datauri-1.html b/layout/reftests/svg/as-image/svg-image-datauri-1.html new file mode 100644 index 000000000..3d7d171b5 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-datauri-1.html @@ -0,0 +1,5 @@ +<html> +<body style="margin: 0"> + <img src="svg-image-datauri.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-datauri.svg b/layout/reftests/svg/as-image/svg-image-datauri.svg new file mode 100644 index 000000000..114a77232 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-datauri.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <!-- This blue rect should always be covered up by the <image>: --> + <circle cx="50" cy="50" r="50" fill="blue"/> + <image width="100" height="100" + xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-external-1.html b/layout/reftests/svg/as-image/svg-image-external-1.html new file mode 100644 index 000000000..3a13e5516 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-external-1.html @@ -0,0 +1,5 @@ +<html> +<body style="margin: 0"> + <img src="svg-image-external.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-external.svg b/layout/reftests/svg/as-image/svg-image-external.svg new file mode 100644 index 000000000..721d4fe13 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-external.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <!-- This blue rect should be covered up by the <image> when this SVG is + loaded as an image by a local document, but not when the document is + served over HTTP: --> + <rect width="100" height="100" fill="blue"/> + <image width="100" height="100" + xlink:href="lime100x100.png"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-recursive-1-ref.svg b/layout/reftests/svg/as-image/svg-image-recursive-1-ref.svg new file mode 100644 index 000000000..b884f4e5b --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-recursive-1-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <circle cx="10" cy="10" r="10" fill="blue"/> + <circle cx="30" cy="30" r="10" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-recursive-1a.svg b/layout/reftests/svg/as-image/svg-image-recursive-1a.svg new file mode 100644 index 000000000..2587877c6 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-recursive-1a.svg @@ -0,0 +1,13 @@ +<!-- This SVG file uses itself as an image. Currently, we don't paint + recursively-referenced images beyond the first level. When this testcase + is viewed directly, it gets treated as a document (not an image), so its + <image> element is painted. However, the <image>'s own *internal* <image> + element does *not* get painted. So we end up painting two blue circles: + one for the <circle> and one for the <image>'s <circle> (and no more). --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <circle cx="10" cy="10" r="10" fill="blue"/> + <image x="20" y="20" width="100" height="100" + xlink:href="svg-image-recursive-1a.svg"/> <!-- my own filename --> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-recursive-1b.svg b/layout/reftests/svg/as-image/svg-image-recursive-1b.svg new file mode 100644 index 000000000..3e5c9befe --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-recursive-1b.svg @@ -0,0 +1,15 @@ +<!-- This SVG file uses itself as an image. Currently, we don't paint + recursively-referenced images beyond the first level. When this testcase + is viewed directly, it gets treated as a document (not an image), so its + <image> element is painted. However, the <image>'s own *internal* <image> + element does *not* get painted. So we end up painting two blue circles: + one for the <circle> and one for the <image>'s <circle> (and no more). --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <circle cx="10" cy="10" r="10" fill="blue"/> + <image x="20" y="20" width="100" height="100" + xlink:href="#foo"/> + <!-- When used as a URL, #foo evaluates to ${my_url}#foo, which (when treated + as an image URL) just turns into ${my_url}. --> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-recursive-2-ref.svg b/layout/reftests/svg/as-image/svg-image-recursive-2-ref.svg new file mode 100644 index 000000000..e548c53f4 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-recursive-2-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <circle cx="10" cy="10" r="10" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-recursive-2a.svg b/layout/reftests/svg/as-image/svg-image-recursive-2a.svg new file mode 100644 index 000000000..651c29e85 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-recursive-2a.svg @@ -0,0 +1,10 @@ +<!-- The SVG file referenced in our <image> tag uses itself as an <image>. + Currently, we don't paint recursively-referenced images beyond the first + level. So, the <image> element inside our helper document doesn't get + painted, and we end up only showing one blue circle. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <image width="100" height="100" + xlink:href="svg-image-recursive-1a.svg"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-recursive-2b.html b/layout/reftests/svg/as-image/svg-image-recursive-2b.html new file mode 100644 index 000000000..2e0708c1d --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-recursive-2b.html @@ -0,0 +1,9 @@ +<!-- The SVG file referenced in our <img> tag uses itself as an <image>. + Currently, we don't paint recursively-referenced images beyond the first + level. So, the <image> element inside our helper document doesn't get + painted, and we end up only showing one blue circle. --> +<html> +<body style="margin: 0"> + <img src="svg-image-recursive-1a.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-simple-1.svg b/layout/reftests/svg/as-image/svg-image-simple-1.svg new file mode 100644 index 000000000..ad657ce2a --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-simple-1.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <rect width="100%" height="100%" fill="red"/> + <image width="100%" height="100%" xlink:href="lime100x100.svg"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-simple-2.svg b/layout/reftests/svg/as-image/svg-image-simple-2.svg new file mode 100644 index 000000000..34cc2277d --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-simple-2.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <rect width="100%" height="100%" fill="red"/> + <image width="100%" height="100%" + xlink:href="lime100x100-noSVGDimensions.svg"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-simple-3.svg b/layout/reftests/svg/as-image/svg-image-simple-3.svg new file mode 100644 index 000000000..31d064a0a --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-simple-3.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <rect width="100%" height="100%" fill="red"/> + <image width="100%" height="100%" + xlink:href="limeInRed-noSVGDimensions-viewBox.svg"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-util.css b/layout/reftests/svg/as-image/svg-image-util.css new file mode 100644 index 000000000..3d5a9338f --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-util.css @@ -0,0 +1,3 @@ +body { margin: 0px; line-height: 10px; } +img { background: purple; vertical-align: top; } +embed { background: purple; vertical-align: top; } diff --git a/layout/reftests/svg/as-image/svg-image-util.js b/layout/reftests/svg/as-image/svg-image-util.js new file mode 100644 index 000000000..ea8425923 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-util.js @@ -0,0 +1,173 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// 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.) + * @param aViewParams Parameters to use for the view element. + * @param aFragmentIdentifier The SVG fragment identifier. + */ +function generateSVGDataURI(aViewboxArr, aWidth, aHeight, + aAlign, aMeetOrSlice, + aViewParams, aFragmentIdentifier) { + // prefix + var datauri = "data:image/svg+xml," + // Begin the SVG tag + datauri += "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20shape-rendering%3D%22crispEdges%22"; + + // Append the custom chunk from our params + // If we're working with views, the align customisation is applied there instead + datauri += generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight, + aViewParams ? null : aAlign, + aMeetOrSlice); + + // Add 'font-size' just in case the client wants to use ems + datauri += "%20font-size%3D%22" + "10px" + "%22"; + + // Put closing right bracket on SVG tag + datauri += "%3E"; + + if (aViewParams) { + // Give the view the id of the fragment identifier + datauri += "%3Cview%20id%3D%22" + aFragmentIdentifier + "%22"; + + // Append the custom chunk from our view params + datauri += generateSVGAttrsForParams(aViewParams.viewBox, null, null, + aAlign, aViewParams.meetOrSlice); + + datauri += "%2F%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) { + str += aViewboxArr[i]; + if (i != aViewboxArr.length - 1) { + str += "%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) { + // 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 hostNodeWidth = hostNodeWidthVals[i]; + for (var j = 0; j < hostNodeHeightVals.length; j++) { + 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, + aSVGParams.view, + aSVGParams.fragmentIdentifier); + + if (aSVGParams.fragmentIdentifier) { + uri += "#" + aSVGParams.fragmentIdentifier; + } + + // 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")); + } + } +} diff --git a/layout/reftests/svg/as-image/svg-image-visited-1-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1-helper.svg new file mode 100644 index 000000000..02b524dc0 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1-helper.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + height="100" width="100"> + <style> + <![CDATA[ + a:link {/* Note: an a:link block was needed to trigger bug 641731. */ } + a:link > rect { fill: lime; } + a:visited > rect { fill: red; } + ]]> + </style> + + <!-- Note: the <a> element below links to _this document_, so it'll + normally be treated as visited. However, in an image context, we want to + ignore visitedness. --> + <a xlink:href="" id="foo"> + <rect x="0" y="0" width="100" height="100" fill="orange"/> + </a> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1.html b/layout/reftests/svg/as-image/svg-image-visited-1.html new file mode 100644 index 000000000..d0a6d1f35 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> + <head> + <title>Test for bug 641731</title> + <script> + function snapshot() { + document.documentElement.removeAttribute("class"); + } + function delay_snapshot() { + setTimeout(snapshot, 100); // delay snapshot to allow time for + // :visited style inside the image to + // resolve (which it hopefully won't) + } + document.addEventListener("MozReftestInvalidate", delay_snapshot, false); + </script> + </head> + <body style="margin: 0"> + <img src="svg-image-visited-1-helper.svg"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-visited-2-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-2-helper.svg new file mode 100644 index 000000000..af1bdec50 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-2-helper.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + height="100" width="100"> + <style> + <![CDATA[ + a:link > rect { fill: lime; } + a:visited > rect { fill: red; } + ]]> + </style> + + <!-- Note: the <a> element below links to _this document_, so it'll + normally be treated as visited. However, in an image context, we want to + ignore visitedness. --> + <a xlink:href="" id="foo"> + <rect x="0" y="0" width="100" height="100" fill="orange"/> + </a> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-visited-2.html b/layout/reftests/svg/as-image/svg-image-visited-2.html new file mode 100644 index 000000000..e1c66698c --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-2.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> + <head> + <title>Test for bug 641731</title> + <script> + function snapshot() { + document.documentElement.removeAttribute("class"); + } + function delay_snapshot() { + setTimeout(snapshot, 100); // delay snapshot to allow time for + // :visited style inside the image to + // resolve (which it hopefully won't) + } + document.addEventListener("MozReftestInvalidate", delay_snapshot, false); + </script> + </head> + <body style="margin: 0"> + <img src="svg-image-visited-2-helper.svg"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-stylesheet-datauri-1.html b/layout/reftests/svg/as-image/svg-stylesheet-datauri-1.html new file mode 100644 index 000000000..9b99258f0 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-stylesheet-datauri-1.html @@ -0,0 +1,5 @@ +<html> +<body style="margin: 0"> + <img src="svg-stylesheet-datauri.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/svg-stylesheet-datauri.svg b/layout/reftests/svg/as-image/svg-stylesheet-datauri.svg new file mode 100644 index 000000000..003e15017 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-stylesheet-datauri.svg @@ -0,0 +1,8 @@ +<?xml-stylesheet href="data:text/css,rect%20%7B%20fill%3A%20lime%20%7D%0A" + type="text/css"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <!-- This blue rect should always be styled as lime by the stylesheet: --> + <rect width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-stylesheet-external-1.html b/layout/reftests/svg/as-image/svg-stylesheet-external-1.html new file mode 100644 index 000000000..c6815579b --- /dev/null +++ b/layout/reftests/svg/as-image/svg-stylesheet-external-1.html @@ -0,0 +1,5 @@ +<html> +<body style="margin: 0"> + <img src="svg-stylesheet-external.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/svg-stylesheet-external.css b/layout/reftests/svg/as-image/svg-stylesheet-external.css new file mode 100644 index 000000000..70025dd20 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-stylesheet-external.css @@ -0,0 +1 @@ +rect { fill: lime } diff --git a/layout/reftests/svg/as-image/svg-stylesheet-external.svg b/layout/reftests/svg/as-image/svg-stylesheet-external.svg new file mode 100644 index 000000000..2b288e426 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-stylesheet-external.svg @@ -0,0 +1,9 @@ +<?xml-stylesheet href="svg-stylesheet-external.css" type="text/css"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <!-- This blue rect should be styled as lime by the stylesheet when this SVG + is loaded as an image by a local document, but not when the document is + served over HTTP: --> + <rect width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/as-image/white-rect-no-viewbox.svg b/layout/reftests/svg/as-image/white-rect-no-viewbox.svg new file mode 100644 index 000000000..76a7efd3d --- /dev/null +++ b/layout/reftests/svg/as-image/white-rect-no-viewbox.svg @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="utf-8"?> + +<svg version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <rect width="6" height="30" style="fill:white;" /> +</svg> diff --git a/layout/reftests/svg/as-image/white-rect-with-viewbox.svg b/layout/reftests/svg/as-image/white-rect-with-viewbox.svg new file mode 100644 index 000000000..6bb59d19a --- /dev/null +++ b/layout/reftests/svg/as-image/white-rect-with-viewbox.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?>
+
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="6px"
+ height="30px"
+ viewBox="0 0 6 30">
+
+ <rect width="6" height="30" style="fill:white;" />
+</svg>
diff --git a/layout/reftests/svg/as-image/zoom/circle-large.svg b/layout/reftests/svg/as-image/zoom/circle-large.svg new file mode 100644 index 000000000..a097f3c66 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/circle-large.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="80"> + <circle cx="40" cy="40" r="40" style="fill: green"/> +</svg> diff --git a/layout/reftests/svg/as-image/zoom/circle-small.svg b/layout/reftests/svg/as-image/zoom/circle-small.svg new file mode 100644 index 000000000..b0cba24a6 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/circle-small.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20"> + <circle cx="10" cy="10" r="10" style="fill: green"/> +</svg> diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomIn-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomIn-1.html new file mode 100644 index 000000000..b4eadba92 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomIn-1.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<head> + <style> + body { + margin: 0px; + padding: 0px; + border: 0px; + } + div { + background: url('circle-small.svg'); + background-size: 40px 40px; + background-repeat: repeat; + margin: 0px; + padding: 0px; + border: 0px; + width: 80px; + height: 80px; + transform: scale(2.0); + transform-origin: 0 0; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomOut-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomOut-1.html new file mode 100644 index 000000000..db0e6c06b --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomOut-1.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<head> + <style> + body { + margin: 0px; + padding: 0px; + border: 0px; + } + div { + background: url('circle-large.svg'); + background-size: 40px 40px; + background-repeat: repeat; + margin: 0px; + padding: 0px; + border: 0px; + width: 80px; + height: 80px; + transform: scale(0.5); + transform-origin: 0 0; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1-ref.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1-ref.html new file mode 100644 index 000000000..81e6011e6 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<head> + <style> + body { + margin: 0px; + padding: 0px; + border: 0px; + } + div { + background: url('circle-large.svg'); + background-size: 80px 80px; + background-repeat: repeat; + margin: 0px; + padding: 0px; + border: 0px; + width: 160px; + height: 160px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1.html new file mode 100644 index 000000000..de39990b9 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html reftest-zoom="2.0"> +<head> + <style> + body { + margin: 0px; + padding: 0px; + border: 0px; + } + div { + background: url('circle-small.svg'); + background-size: 40px 40px; + background-repeat: repeat; + margin: 0px; + padding: 0px; + border: 0px; + width: 80px; + height: 80px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1-ref.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1-ref.html new file mode 100644 index 000000000..48f2d05ff --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<head> + <style> + body { + margin: 0px; + padding: 0px; + border: 0px; + } + div { + background: url('circle-small.svg'); + background-size: 20px 20px; + background-repeat: repeat; + margin: 0px; + padding: 0px; + border: 0px; + width: 40px; + height: 40px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1.html new file mode 100644 index 000000000..75cd1d61a --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html reftest-zoom="0.5"> +<head> + <style> + body { + margin: 0px; + padding: 0px; + border: 0px; + } + div { + background: url('circle-large.svg'); + background-size: 40px 40px; + background-repeat: repeat; + margin: 0px; + padding: 0px; + border: 0px; + width: 80px; + height: 80px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/img-zoomIn-1.html b/layout/reftests/svg/as-image/zoom/img-zoomIn-1.html new file mode 100644 index 000000000..cc31a933e --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-zoomIn-1.html @@ -0,0 +1,5 @@ +<html reftest-zoom="1.5"> +<body> + <img src="squaredCircle.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/img-zoomOut-1.html b/layout/reftests/svg/as-image/zoom/img-zoomOut-1.html new file mode 100644 index 000000000..5133acb8b --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-zoomOut-1.html @@ -0,0 +1,5 @@ +<html reftest-zoom="0.5"> +<body> + <img src="squaredCircle.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/reftest-stylo.list b/layout/reftests/svg/as-image/zoom/reftest-stylo.list new file mode 100644 index 000000000..fe8a9bd67 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/reftest-stylo.list @@ -0,0 +1,12 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +# Tests related to SVG being used as an image, with zooming + +# Simple <img> tests +fuzzy-if(skiaContent,1,408) == img-zoomIn-1.html img-zoomIn-1.html +fuzzy-if(skiaContent,1,74) == img-zoomOut-1.html img-zoomOut-1.html + +# Ensure that scaled SVG images aren't fuzzy when tiled. +== img-fuzzy-zoomOut-1.html img-fuzzy-zoomOut-1.html +== img-fuzzy-zoomIn-1.html img-fuzzy-zoomIn-1.html +== img-fuzzy-transform-zoomOut-1.html img-fuzzy-transform-zoomOut-1.html +== img-fuzzy-transform-zoomIn-1.html img-fuzzy-transform-zoomIn-1.html diff --git a/layout/reftests/svg/as-image/zoom/reftest.list b/layout/reftests/svg/as-image/zoom/reftest.list new file mode 100644 index 000000000..73eb41709 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/reftest.list @@ -0,0 +1,11 @@ +# Tests related to SVG being used as an image, with zooming + +# Simple <img> tests +fuzzy-if(skiaContent,1,408) == img-zoomIn-1.html squaredCircle-150x150-ref.html +fuzzy-if(skiaContent,1,74) == img-zoomOut-1.html squaredCircle-50x50-ref.html + +# Ensure that scaled SVG images aren't fuzzy when tiled. +== img-fuzzy-zoomOut-1.html img-fuzzy-zoomOut-1-ref.html +== img-fuzzy-zoomIn-1.html img-fuzzy-zoomIn-1-ref.html +== img-fuzzy-transform-zoomOut-1.html img-fuzzy-zoomOut-1-ref.html +== img-fuzzy-transform-zoomIn-1.html img-fuzzy-zoomIn-1-ref.html diff --git a/layout/reftests/svg/as-image/zoom/squaredCircle-150x150-ref.html b/layout/reftests/svg/as-image/zoom/squaredCircle-150x150-ref.html new file mode 100644 index 000000000..7f3b524e8 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/squaredCircle-150x150-ref.html @@ -0,0 +1,5 @@ +<html reftest-zoom="1.5"> +<body> + <embed src="squaredCircle.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/squaredCircle-50x50-ref.html b/layout/reftests/svg/as-image/zoom/squaredCircle-50x50-ref.html new file mode 100644 index 000000000..41686f5bc --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/squaredCircle-50x50-ref.html @@ -0,0 +1,5 @@ +<html reftest-zoom="0.5"> +<body> + <embed src="squaredCircle.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/squaredCircle.svg b/layout/reftests/svg/as-image/zoom/squaredCircle.svg new file mode 100644 index 000000000..266c9e776 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/squaredCircle.svg @@ -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> |
