diff options
Diffstat (limited to 'layout/reftests/svg/as-image')
243 files changed, 4098 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 0000000000..9c638134e2 --- /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 0000000000..42813d6694 --- /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 0000000000..728c780acc --- /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 0000000000..15f861d40f --- /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 0000000000..72111ceaf3 --- /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); +</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 0000000000..86df50c02b --- /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); +</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 0000000000..e87c148e74 --- /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); +</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 0000000000..ed4ea4f085 --- /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); +</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 0000000000..e9ee74d29b --- /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 0000000000..e8ea278bb6 --- /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 0000000000..e9ee74d29b --- /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 0000000000..295aedf520 --- /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 0000000000..d368b58318 --- /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 0000000000..1b4cbba245 --- /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 0000000000..3b017fbdf7 --- /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; + } + .should-not-stretch { + width: 6px; + background-color: white; + display: inline-block; + } + .left-spacer { + width: 47px; + float: left; + } + .right-spacer { + width: 47px; + float: right; + } + body { + background-color: black; + } + </style> +</head> +<body> + <div class="container"> + <div class="left-spacer"></div> + <div class="should-not-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 0000000000..0931cf3ccc --- /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 0000000000..077dedfeb7 --- /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/black100x100-ref.html b/layout/reftests/svg/as-image/black100x100-ref.html new file mode 100644 index 0000000000..0d0121ccb8 --- /dev/null +++ b/layout/reftests/svg/as-image/black100x100-ref.html @@ -0,0 +1,5 @@ +<html> +<body> + <div style="width: 100px; height: 100px; background: black"></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 0000000000..33a08a0bca --- /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 0000000000..d43a27951d --- /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-border-ref.html b/layout/reftests/svg/as-image/blue100x100-border-ref.html new file mode 100644 index 0000000000..1bd865856c --- /dev/null +++ b/layout/reftests/svg/as-image/blue100x100-border-ref.html @@ -0,0 +1,5 @@ +<html> +<body> + <div style="width: 100px; height: 100px; border: 10px solid blue; box-sizing: border-box;"></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/blue100x100-ref.html b/layout/reftests/svg/as-image/blue100x100-ref.html new file mode 100644 index 0000000000..307fbd6bd3 --- /dev/null +++ b/layout/reftests/svg/as-image/blue100x100-ref.html @@ -0,0 +1,5 @@ +<html> +<body> + <div style="width: 100px; height: 100px; background: blue"></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/blue100x100.svg b/layout/reftests/svg/as-image/blue100x100.svg new file mode 100644 index 0000000000..a9c8eba794 --- /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 0000000000..e6b696e1d2 --- /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 0000000000..4eba8cee53 --- /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 0000000000..b2be295acb --- /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 0000000000..ca6a362c34 --- /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 0000000000..563e60bb91 --- /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 0000000000..ca56934f6b --- /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 0000000000..c363bad581 --- /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 0000000000..da382386f4 --- /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 0000000000..94154d480e --- /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 0000000000..92eed4e101 --- /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 0000000000..bd4585eaa9 --- /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 0000000000..0e8cf233ff --- /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 0000000000..f3ca821230 --- /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 0000000000..b40d5fc39a --- /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 0000000000..f3348b1e16 --- /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 0000000000..6f173b7d6b --- /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 0000000000..6b56ce1e60 --- /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 0000000000..226a6dd576 --- /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 0000000000..aedd6b38d8 --- /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 0000000000..ff5ff17fb9 --- /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/context-fill-01.html b/layout/reftests/svg/as-image/context-fill-01.html new file mode 100644 index 0000000000..b25eac4c45 --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-01.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Basic context-fill test</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: fill; + fill: lime; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill blue'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-02.html b/layout/reftests/svg/as-image/context-fill-02.html new file mode 100644 index 0000000000..e476d1e04a --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-02.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>Basic context-fill test (without a fallback color)</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: fill; + fill: lime; + border: 1px solid black; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill none'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-03.html b/layout/reftests/svg/as-image/context-fill-03.html new file mode 100644 index 0000000000..066d5a7925 --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-03.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-fill where fill is semi-transparent</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: fill; + fill: rgb(0% 100% 0% / 50%); +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill red'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-04.html b/layout/reftests/svg/as-image/context-fill-04.html new file mode 100644 index 0000000000..4b8b9d84c1 --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-04.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-fill with fill-opacity</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: fill; + fill: lime; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill red' fill-opacity='0.5'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-05.html b/layout/reftests/svg/as-image/context-fill-05.html new file mode 100644 index 0000000000..14c169642f --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-05.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-fill with different fill values (test image caching correctness)</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: fill; +} + +#img1 { + fill: blue; +} + +#img2 { + fill: yellow; +} + + </style> + </head> + <body> + <img id="img1" src="context-fill-05.svg"> + <img id="img2" src="context-fill-05.svg"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-05.svg b/layout/reftests/svg/as-image/context-fill-05.svg new file mode 100644 index 0000000000..c2865ca10e --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-05.svg @@ -0,0 +1,3 @@ +<svg xmlns='http://www.w3.org/2000/svg'> + <rect width='100%' height='100%' fill='context-fill red'/> +</svg> diff --git a/layout/reftests/svg/as-image/context-fill-06.html b/layout/reftests/svg/as-image/context-fill-06.html new file mode 100644 index 0000000000..7ea9c6bf95 --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-06.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-fill works as a stroke value</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: fill; + fill: lime; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-fill red'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-07-ref.html b/layout/reftests/svg/as-image/context-fill-07-ref.html new file mode 100644 index 0000000000..9e52bb402e --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-07-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <style> + +div { + width: 100px; + height: 100px; + background-color: black; + display: inline-block; +} + + </style> + </head> + <body> + <div></div> + <div></div> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-07.html b/layout/reftests/svg/as-image/context-fill-07.html new file mode 100644 index 0000000000..c4e9ab3305 --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-07.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-fill when no context fill value is provided</title> + <style> + +img { + -moz-context-properties: fill; + width: 100px; + height: 100px; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill'/></svg>"> + <!-- The initial value for 'fill' is black, so we expect that to be the + context-fill that the following rect uses (the fallback color should + not be used). --> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill red'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-08.html b/layout/reftests/svg/as-image/context-fill-08.html new file mode 100644 index 0000000000..77f7aca144 --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-08.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-fill when only "-moz-context-properties: stroke" is specified</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: stroke; + fill: red; + stroke: red; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill blue'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-bg-image-01.html b/layout/reftests/svg/as-image/context-fill-bg-image-01.html new file mode 100644 index 0000000000..2c5d0ff362 --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-bg-image-01.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>Basic context-fill in background-image test</title> + <style> + +div { + width: 100px; + height: 100px; + background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill red'/></svg>"); + -moz-context-properties: fill; + fill: blue; +} + + </style> + </head> + <body> + <div></div> + </body> +</html> + diff --git a/layout/reftests/svg/as-image/context-fill-opacity-01.html b/layout/reftests/svg/as-image/context-fill-opacity-01.html new file mode 100644 index 0000000000..1ba306a054 --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-opacity-01.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Basic context-fill-opacity test</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: fill-opacity; + fill-opacity: 0.5; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue' fill-opacity='context-fill-opacity'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-opacity-02.html b/layout/reftests/svg/as-image/context-fill-opacity-02.html new file mode 100644 index 0000000000..8420d0105d --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-opacity-02.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-fill-opacity with different fill-opacity values (test image caching correctness)</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: fill-opacity; +} + +#img1 { + fill-opacity: 0.3; +} + +#img2 { + fill-opacity: 0.7; +} + + </style> + </head> + <body> + <img id="img1" src="context-fill-opacity-02.svg"> + <img id="img2" src="context-fill-opacity-02.svg"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-opacity-02.svg b/layout/reftests/svg/as-image/context-fill-opacity-02.svg new file mode 100644 index 0000000000..bbc1270271 --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-opacity-02.svg @@ -0,0 +1,3 @@ +<svg xmlns='http://www.w3.org/2000/svg'> + <rect width='100%' height='100%' fill='blue' fill-opacity='context-fill-opacity'/> +</svg> diff --git a/layout/reftests/svg/as-image/context-fill-opacity-03.html b/layout/reftests/svg/as-image/context-fill-opacity-03.html new file mode 100644 index 0000000000..33d4684c2b --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-opacity-03.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-fill-opacity works with context-fill</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: fill, fill-opacity; + fill: blue; + fill-opacity: 0.5; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-fill' fill-opacity='context-fill-opacity'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-opacity-04.html b/layout/reftests/svg/as-image/context-fill-opacity-04.html new file mode 100644 index 0000000000..e8b1b343cd --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-opacity-04.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>No context-fill-opacity value is provided</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: fill-opacity; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue' fill-opacity='context-fill-opacity'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-opacity-05.html b/layout/reftests/svg/as-image/context-fill-opacity-05.html new file mode 100644 index 0000000000..ca34db6d51 --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-opacity-05.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-fill-opacity when only '-moz-context-properties: stroke-opacity' is specified</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: stroke-opacity; + fill: 0.5; + stroke: 0.5; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue' fill-opacity='context-fill-opacity'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-or-stroke-05-ref.html b/layout/reftests/svg/as-image/context-fill-or-stroke-05-ref.html new file mode 100644 index 0000000000..369d36bb93 --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-or-stroke-05-ref.html @@ -0,0 +1,17 @@ +<html> +<head> + <style> + +div { + width: 100px; + height: 100px; + display: inline-block; +} + + </style> +</head> +<body> + <div style="background: blue"></div> + <div style="background: yellow"></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-01-ref.html b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-01-ref.html new file mode 100644 index 0000000000..87b98a894d --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-01-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> +<body> + <div style="width: 100px; height: 100px; background: rgba(0, 0, 255, 0.5)"></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-02-ref.html b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-02-ref.html new file mode 100644 index 0000000000..f16b49ff40 --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-02-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <style> + +div { + width: 100px; + height: 100px; + display: inline-block; +} + + </style> +</head> +<body> + <div style="background: rgba(0, 0, 255, 0.3); "></div> + <div style="background: rgba(0, 0, 255, 0.7); "></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-03-ref.html b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-03-ref.html new file mode 100644 index 0000000000..87b98a894d --- /dev/null +++ b/layout/reftests/svg/as-image/context-fill-or-stroke-opacity-03-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> +<body> + <div style="width: 100px; height: 100px; background: rgba(0, 0, 255, 0.5)"></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/context-stroke-01.html b/layout/reftests/svg/as-image/context-stroke-01.html new file mode 100644 index 0000000000..853f72ac5a --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-01.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Basic context-stroke test</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: stroke; + stroke: lime; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke blue'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-stroke-02.html b/layout/reftests/svg/as-image/context-stroke-02.html new file mode 100644 index 0000000000..00d39aff4e --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-02.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>Basic context-stroke test (without a fallback color)</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: stroke; + stroke: lime; + border: 1px solid black; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-stroke-03.html b/layout/reftests/svg/as-image/context-stroke-03.html new file mode 100644 index 0000000000..2bb341f6d4 --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-03.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-stroke where stroke is semi-transparent</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: stroke; + stroke: rgb(0% 100% 0% / 50%); +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke red'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-stroke-04.html b/layout/reftests/svg/as-image/context-stroke-04.html new file mode 100644 index 0000000000..170f8c4970 --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-04.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-stroke with stroke-opacity</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: stroke; + stroke: lime; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke red' stroke-opacity='0.5'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-stroke-05.html b/layout/reftests/svg/as-image/context-stroke-05.html new file mode 100644 index 0000000000..ebd3f6b8e9 --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-05.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-stroke with different stroke values (test image caching correctness)</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: stroke; +} + +#img1 { + stroke: blue; +} + +#img2 { + stroke: yellow; +} + + </style> + </head> + <body> + <img id="img1" src="context-stroke-05.svg"> + <img id="img2" src="context-stroke-05.svg"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-stroke-05.svg b/layout/reftests/svg/as-image/context-stroke-05.svg new file mode 100644 index 0000000000..01e25682b9 --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-05.svg @@ -0,0 +1,3 @@ +<svg xmlns='http://www.w3.org/2000/svg'> + <line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke red'/> +</svg> diff --git a/layout/reftests/svg/as-image/context-stroke-06.html b/layout/reftests/svg/as-image/context-stroke-06.html new file mode 100644 index 0000000000..fb84671d67 --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-06.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-stroke works as a fill value</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: stroke; + stroke: lime; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='context-stroke red'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-stroke-07-ref.html b/layout/reftests/svg/as-image/context-stroke-07-ref.html new file mode 100644 index 0000000000..503e1bfba5 --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-07-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <style> + +div { + width: 100px; + height: 100px; + display: inline-block; + border: 1px solid black; +} + + </style> + </head> + <body> + <div></div> + <div style="background-color: lime;"></div> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-stroke-07.html b/layout/reftests/svg/as-image/context-stroke-07.html new file mode 100644 index 0000000000..885ee221dd --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-07.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-stroke when no context stroke value is provided</title> + <style> + +img { + -moz-context-properties: fill; + width: 100px; + height: 100px; + border: 1px solid black; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke'/></svg>"> + <!-- The following image currently results in the 'lime' fallback color + being used, but it probably shouldn't. See bug 1351243. --> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke lime'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-stroke-08.html b/layout/reftests/svg/as-image/context-stroke-08.html new file mode 100644 index 0000000000..8420fba152 --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-08.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-stroke when only "-moz-context-properties: fill" is specified</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: fill; + fill: red; + stroke: red; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect x='5' y='5' width='90' height='90' fill='none' stroke='context-stroke blue' stroke-width='10'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-stroke-bg-image-01.html b/layout/reftests/svg/as-image/context-stroke-bg-image-01.html new file mode 100644 index 0000000000..57897c93e5 --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-bg-image-01.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <head> + <title>Basic context-stroke in background-image test</title> + <style> + +div { + width: 100px; + height: 100px; + background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect x='5' y='5' width='90' height='90' fill='none' stroke='context-stroke red' stroke-width='10'/></svg>"); + -moz-context-properties: stroke; + stroke: blue; +} + + </style> + </head> + <body> + <div></div> + </body> +</html> + diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-01.html b/layout/reftests/svg/as-image/context-stroke-opacity-01.html new file mode 100644 index 0000000000..6c3e9b386b --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-opacity-01.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Basic context-stroke-opacity test</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: stroke-opacity; + stroke-opacity: 0.5; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='blue' stroke-opacity='context-stroke-opacity'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-02.html b/layout/reftests/svg/as-image/context-stroke-opacity-02.html new file mode 100644 index 0000000000..4445cc7b93 --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-opacity-02.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-stroke-opacity with different stroke-opacity values (test image caching correctness)</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: stroke-opacity; +} + +#img1 { + stroke-opacity: 0.3; +} + +#img2 { + stroke-opacity: 0.7; +} + + </style> + </head> + <body> + <img id="img1" src="context-stroke-opacity-02.svg"> + <img id="img2" src="context-stroke-opacity-02.svg"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-02.svg b/layout/reftests/svg/as-image/context-stroke-opacity-02.svg new file mode 100644 index 0000000000..d00c3a0e59 --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-opacity-02.svg @@ -0,0 +1,3 @@ +<svg xmlns='http://www.w3.org/2000/svg'> + <line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='blue' stroke-opacity='context-stroke-opacity'/> +</svg> diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-03.html b/layout/reftests/svg/as-image/context-stroke-opacity-03.html new file mode 100644 index 0000000000..cc0f5685a7 --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-opacity-03.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-stroke-opacity works with context-stroke</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: stroke, stroke-opacity; + stroke: blue; + stroke-opacity: 0.5; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='context-stroke' stroke-opacity='context-stroke-opacity'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-04.html b/layout/reftests/svg/as-image/context-stroke-opacity-04.html new file mode 100644 index 0000000000..cc329b463a --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-opacity-04.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <head> + <title>No context-stroke-opacity value is provided</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: stroke-opacity; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='blue' stroke-opacity='context-stroke-opacity'/></svg>"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/context-stroke-opacity-05.html b/layout/reftests/svg/as-image/context-stroke-opacity-05.html new file mode 100644 index 0000000000..f31b42d062 --- /dev/null +++ b/layout/reftests/svg/as-image/context-stroke-opacity-05.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <title>Test context-stroke-opacity when only '-moz-context-properties: fill-opacity' is specified</title> + <style> + +img { + width: 100px; + height: 100px; + -moz-context-properties: fill-opacity; + stroke-opacity: 0.5; +} + + </style> + </head> + <body> + <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='50%' x2='100%' y2='50%' stroke-width='120%' stroke='blue' stroke-opacity='context-stroke-opacity'/></svg>"> + </body> +</html> 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 0000000000..a2c4c7a558 --- /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 0000000000..2b49baf71e --- /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 0000000000..4a9d84955e --- /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 0000000000..402d37b491 --- /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-ref.html b/layout/reftests/svg/as-image/image-orientation-ref.html new file mode 100644 index 0000000000..518f899fda --- /dev/null +++ b/layout/reftests/svg/as-image/image-orientation-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + table { + border-spacing: 0px; + } + div { + width: 100px; height: 200px; + } + td { + width: 50px; height: 100px; + } + </style> +</head> +<body> + <div> + <table> + <tr> + <td style="background-color: rgb(0, 191, 0)"></td> + <td style="background-color: rgb(0, 255, 1)"></td> + </tr> + <tr> + <td style="background-color: rgb(254, 0, 122)"></td> + <td style="background-color: rgb(254, 0, 122)"></td> + </tr> + </table> + </div> +</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 0000000000..e531d70cf3 --- /dev/null +++ b/layout/reftests/svg/as-image/image-orientation-viewbox-and-size.html @@ -0,0 +1,19 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + </style> +</head> +<body> + <img src="image-orientation-viewbox-and-size.svg"> + <script> + let fromImage = location.search == "from-image"; + if (fromImage) { + document.querySelector("img").style.imageOrientation = "from-image"; + } + </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 0000000000..148b021e5c --- /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 0000000000..7875aeea22 --- /dev/null +++ b/layout/reftests/svg/as-image/image-orientation-viewbox-no-size.html @@ -0,0 +1,22 @@ +<!DOCTYPE> +<head> + <style> + body { + border: 0px; + margin: 0px; + padding: 0px; + } + img { + image-orientation: from-image; + } + </style> +</head> +<body> + <img src="image-orientation-viewbox-no-size.svg"> + <script> + let fromImage = location.search == "from-image"; + if (fromImage) { + document.querySelector("img").style.imageOrientation = "from-image"; + } + </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 0000000000..5733488010 --- /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 0000000000..254a873933 --- /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 0000000000..6aada7f0f7 --- /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 0000000000..73fe0cb119 --- /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 0000000000..07e977f0e5 --- /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 0000000000..f60e4e2a62 --- /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 0000000000..127689e78d --- /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 0000000000..073ec80620 --- /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 0000000000..abee91c514 --- /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 0000000000..3aad7adfa3 --- /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 0000000000..2ce155c9bf --- /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 0000000000..cb9f2635bd --- /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 0000000000..9be86ff57b --- /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 0000000000..3b1b6a67b9 --- /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 0000000000..de4671ad7e --- /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 0000000000..e7f93d241c --- /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 0000000000..25d5e3eeec --- /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 0000000000..e60fa172ae --- /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 0000000000..2840a1b227 --- /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 0000000000..5bc57390d7 --- /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 0000000000..3ee04d4a72 --- /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 0000000000..babf7b38a6 --- /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 0000000000..31ac73d18b --- /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 0000000000..0835a9d9cd --- /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 0000000000..717a64fdf4 --- /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 0000000000..c05d94372b --- /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 0000000000..953906c004 --- /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 0000000000..681867e479 --- /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 0000000000..02cd1abf8c --- /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 0000000000..2a12d87f2b --- /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 0000000000..c1cf238540 --- /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 0000000000..efaee25c74 --- /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 0000000000..98fca1d366 --- /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 0000000000..5724f8e0cb --- /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 0000000000..1997f37c5b --- /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 0000000000..e9b809e6cd --- /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 0000000000..faab57f736 --- /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 0000000000..999ce5aa63 --- /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 0000000000..ab19b2948f --- /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 0000000000..725277a680 --- /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 0000000000..9d99b4da67 --- /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 0000000000..86ff8afe23 --- /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 0000000000..abbc21e729 --- /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 0000000000..8839c0fa5c --- /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 0000000000..eccc7c5e17 --- /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 0000000000..ed58e83193 --- /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 0000000000..7986e3ec2e --- /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 0000000000..a50f10e659 --- /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 0000000000..1592cbc069 --- /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 0000000000..049b2a3e45 --- /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 0000000000..f77ea89e11 --- /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 0000000000..f20c2877ea --- /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 0000000000..af0f40e31b --- /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 0000000000..f08c94488a --- /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 0000000000..a686a0a1cf --- /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 0000000000..69ab8ebf03 --- /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 0000000000..76f575b447 --- /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 0000000000..3e0138f202 --- /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 0000000000..0793368963 --- /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 0000000000..489b4f7ccc --- /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 0000000000..ecf8776e47 --- /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 0000000000..039aaf1f1b --- /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 0000000000..e306d673c7 --- /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 0000000000..78af6f8b1a --- /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 0000000000..66161ec71d --- /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 0000000000..21740cf708 --- /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 0000000000..0c9c44ba15 --- /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 0000000000..f5453f91d0 --- /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 0000000000..93dfa47b6e --- /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 0000000000..367f52b28d --- /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 0000000000..671aa1ecd8 --- /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 0000000000..b95b7d4ff6 --- /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 0000000000..ed94f8811b --- /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 0000000000..2f89c8b4d8 --- /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-50pct-ref.html b/layout/reftests/svg/as-image/lime100x100-50pct-ref.html new file mode 100644 index 0000000000..46dde81ae6 --- /dev/null +++ b/layout/reftests/svg/as-image/lime100x100-50pct-ref.html @@ -0,0 +1,5 @@ +<html> +<body> + <div style="width: 100px; height: 100px; background: rgb(0% 100% 0% / 50%)"></div> +</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 0000000000..74e4df78aa --- /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 0000000000..daedf45c8d --- /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-w-border-ref.html b/layout/reftests/svg/as-image/lime100x100-w-border-ref.html new file mode 100644 index 0000000000..42f4d03368 --- /dev/null +++ b/layout/reftests/svg/as-image/lime100x100-w-border-ref.html @@ -0,0 +1,5 @@ +<html> +<body> + <div style="width: 100px; height: 100px; background: lime; border: 1px solid black"></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 0000000000..c9bb375943 --- /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 0000000000..8bdec62c1f --- /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 0000000000..75aadf6402 --- /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 0000000000..d746c2848c --- /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 0000000000..9afc0af362 --- /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 0000000000..7f9d530380 --- /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 0000000000..151ec3077f --- /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 0000000000..baa944a81d --- /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 0000000000..b97337d0c3 --- /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 0000000000..d65c62635c --- /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 0000000000..45d9396b98 --- /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 0000000000..b603886ba5 --- /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 0000000000..2e638943fb --- /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 0000000000..b14ff82efa --- /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 0000000000..8da4672989 --- /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 0000000000..9644d44e54 --- /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.list b/layout/reftests/svg/as-image/reftest.list new file mode 100644 index 0000000000..b29afc02fe --- /dev/null +++ b/layout/reftests/svg/as-image/reftest.list @@ -0,0 +1,222 @@ +# 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(0-1,0-2) fuzzy-if(skiaContent&&!remoteCanvas,0-1,0-529) fuzzy-if(remoteCanvas&&webrender,0-97,0-690) == canvas-drawImage-scale-2a.html canvas-drawImage-scale-2-ref.html +fuzzy(0-1,0-2) fuzzy-if(skiaContent&&!remoteCanvas,0-1,0-529) fuzzy-if(remoteCanvas&&webrender,0-97,0-690) == canvas-drawImage-scale-2b.html canvas-drawImage-scale-2-ref.html + +fuzzy-if(winWidget,0-1,0-10000) fuzzy-if(azureSkia,0-1,0-10000) fuzzy-if(Android,0-1,0-10000) == canvas-drawImage-alpha-1.html canvas-drawImage-alpha-1-ref.html +#Same as scale-2a but with globalAlpha: +fuzzy(0-1,0-2) fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-7018) fuzzy-if(azureSkia,0-1,0-40000) fuzzy-if(webrender&&winWidget&&!remoteCanvas,1-1,32679-39838) fuzzy-if(remoteCanvas&&webrender,1-73,32679-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 + +# Context paint tests (this feature is currently not part of any spec.) +# context-fill: +== context-fill-01.html blue100x100-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-fill-01.html lime100x100-ref.html +== context-fill-02.html transparent100x100-w-border-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-fill-02.html lime100x100-w-border-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-fill-03.html lime100x100-50pct-ref.html +# fuzz because on win8 the r & b components are off by one +fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-04.html lime100x100-50pct-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-fill-05.html context-fill-or-stroke-05-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-fill-06.html lime100x100-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-fill-07.html context-fill-07-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-fill-08.html blue100x100-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-fill-bg-image-01.html blue100x100-ref.html +# context-stroke: +== context-stroke-01.html blue100x100-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-stroke-01.html lime100x100-ref.html +== context-stroke-02.html transparent100x100-w-border-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-stroke-02.html lime100x100-w-border-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-stroke-03.html lime100x100-50pct-ref.html +# fuzz because on win8 the r & b components are off by one +fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-04.html lime100x100-50pct-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-stroke-05.html context-fill-or-stroke-05-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-stroke-06.html lime100x100-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-stroke-07.html context-stroke-07-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-stroke-08.html blue100x100-border-ref.html +test-pref(svg.context-properties.content.enabled,true) == context-stroke-bg-image-01.html blue100x100-border-ref.html +# context-fill-opacity: +== context-fill-opacity-01.html blue100x100-ref.html +fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-01.html context-fill-or-stroke-opacity-01-ref.html # Bug 1377327 +fuzzy-if(winWidget,0-1,0-20000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-02.html context-fill-or-stroke-opacity-02-ref.html # Bug 1377327 +fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-03.html context-fill-or-stroke-opacity-03-ref.html # Bug 1377327 +fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-04.html blue100x100-ref.html # Bug 1377327 +fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-fill-opacity-05.html blue100x100-ref.html # Bug 1377327 +# context-stroke-opacity: +== context-stroke-opacity-01.html blue100x100-ref.html +fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-01.html context-fill-or-stroke-opacity-01-ref.html # Bug 1377327 +fuzzy-if(winWidget,0-1,0-20000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-02.html context-fill-or-stroke-opacity-02-ref.html # Bug 1377327 +fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-03.html context-fill-or-stroke-opacity-03-ref.html # Bug 1377327 +fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-04.html blue100x100-ref.html # Bug 1377327 +fuzzy-if(winWidget,0-1,0-10000) test-pref(svg.context-properties.content.enabled,true) == context-stroke-opacity-05.html blue100x100-ref.html # Bug 1377327 + +# Simple <img> tests +== img-simple-1.html lime100x100-ref.html +== img-simple-2.html lime100x100-ref.html +fuzzy-if(skiaContent,0-255,0-350) fuzzy-if(geckoview&&webrender,0-255,0-4063) == img-simple-3.html img-simple-3-ref.html #Bug 1564891, bug 1574154 +== img-simple-4.html lime100x100-ref.html +fuzzy-if(skiaContent,0-255,0-90) fuzzy-if(geckoview&&webrender,0-255,0-1266) == img-simple-5.html img-simple-5-ref.html +== img-simple-6.html lime100x100-ref.html +fuzzy-if(skiaContent,0-255,0-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 +skip-if(webrender) == img-blobURI-2.html lime100x100-ref.html +fuzzy-if(d2d,0-16,0-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 +fuzzy-if(webrender,255-255,9-9) random-if(geckoview&&webrender) == 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 +fuzzy-if(webrender,255-255,9-9) random-if(geckoview&&webrender) == 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 +fuzzy-if(webrender,255-255,3-9) random-if(geckoview&&webrender) == 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,0-255,0-10) == img-novb-width-meet-1.html img-novb-width-all-1-ref.html +fuzzy-if(skiaContent,0-255,0-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 + +fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),0-8,0-1) == 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> +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-1a.svg svg-image-recursive-1-ref.svg +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-1b.svg svg-image-recursive-1-ref.svg +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-2a.svg svg-image-recursive-2-ref.svg +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == 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 + +# tests for SVG <image> that should have a synthetic viewBox +== svg-image-synthetic-viewBox-01.svg svg-image-synthetic-viewBox-01-ref.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(0-2,0-1) == svg-border-image-repaint-1.html svg-border-image-repaint-1-ref.html + +# 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?none +== image-orientation-viewbox-no-size.html?from-image image-orientation-viewbox-no-size.html?none + +# 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 0000000000..892cc0e8c6 --- /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 0000000000..57b5169581 --- /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 0000000000..32bd67b634 --- /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 0000000000..4912c656d0 --- /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 0000000000..c0665d15d6 --- /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 0000000000..bb11b225b6 --- /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 0000000000..2f33345873 --- /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'); + }); + </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 0000000000..ccc7824465 --- /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 0000000000..f0281228ed --- /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 0000000000..3d7d171b55 --- /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 0000000000..114a772325 --- /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 0000000000..3a13e55164 --- /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 0000000000..721d4fe13c --- /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 0000000000..b884f4e5bb --- /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 0000000000..2587877c6a --- /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 0000000000..3e5c9befe9 --- /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 0000000000..e548c53f47 --- /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 0000000000..651c29e85e --- /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 0000000000..2e0708c1d9 --- /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 0000000000..ad657ce2ab --- /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 0000000000..34cc2277d5 --- /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 0000000000..31d064a0a8 --- /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-synthetic-viewBox-01-helper-1.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-1.svg new file mode 100644 index 0000000000..9a185877a6 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-1.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + <circle cx="100" cy="100" r="100" fill="blue"/> +</svg> + diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-2.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-2.svg new file mode 100644 index 0000000000..83f49b787f --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-2.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <circle cx="50" cy="50" r="50" fill="blue"/> +</svg> + diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-ref.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-ref.svg new file mode 100644 index 0000000000..c93d68fc30 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <image width="100" height="100" href="svg-image-synthetic-viewBox-01-helper-2.svg"/> +</svg> + diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01.svg new file mode 100644 index 0000000000..449c61862e --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <image width="100" height="100" href="svg-image-synthetic-viewBox-01-helper-1.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 0000000000..3d5a9338f6 --- /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 0000000000..ea84259238 --- /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-ref.html b/layout/reftests/svg/as-image/svg-image-visited-1-ref.html new file mode 100644 index 0000000000..7539a7ec98 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <title>Reference for bug 641731</title> + <style> + .imgRef, .embedRef { + height: 100px; + width: 100px; + border: 1px solid black; + display: inline-block; + } + .imgRef { background: lime } + .embedRef { background: purple } + </style> + </head> + <body> + <div class="imgRef"></div> + <div class="embedRef"></div> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1a-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1a-helper.svg new file mode 100644 index 0000000000..9843e85f59 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1a-helper.svg @@ -0,0 +1,34 @@ +<!-- + 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: purple; } + ]]> + </style> + + <!-- Note: the <a> element below links to a visited page, so it'll + normally be treated as visited. However, in an image context, we want to + ignore visitedness. --> + <a xlink:href="visited-page.html" id="foo"> + <rect x="0" y="0" width="100" height="100" fill="orange"/> + </a> + + <!-- This trivial SMIL animation ensures that we *won't* get repainted via + imagelib's SurfaceCache optimization. Specifically, we want to bypass + the SurfaceCache so that we can ensure that repaints of this file (as an + image) will *actually repaint the SVG content*, rather than painting a + previously-rasterized snapshot (which may've been rasterized before we + had any chance to consider :visited styles). --> + <rect x="0" y="0" width="100" height="100" fill="teal"> + <set attributeName="fill" to="transparent" + begin="0s" duration="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1a.html b/layout/reftests/svg/as-image/svg-image-visited-1a.html new file mode 100644 index 0000000000..53aff74c9b --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1a.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <title>Test for bug 641731</title> + <style> + img, embed { + height: 100px; + width: 100px; + border: 1px solid black; + } + </style> + </head> + <body> + <!-- This shouldn't show visited link coloring: --> + <img src="svg-image-visited-1a-helper.svg"> + <!-- This should show visited link coloring: --> + <embed src="svg-image-visited-1a-helper.svg"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1b-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1b-helper.svg new file mode 100644 index 0000000000..2a47f02d58 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1b-helper.svg @@ -0,0 +1,33 @@ +<!-- + 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: purple; } + ]]> + </style> + + <!-- Note: the <a> element below links to a visited page, so it'll + normally be treated as visited. However, in an image context, we want to + ignore visitedness. --> + <a xlink:href="visited-page.html" id="foo"> + <rect x="0" y="0" width="100" height="100" fill="orange"/> + </a> + + <!-- This trivial SMIL animation ensures that we *won't* get repainted via + imagelib's SurfaceCache optimization. Specifically, we want to bypass + the SurfaceCache so that we can ensure that repaints of this file (as an + image) will *actually repaint the SVG content*, rather than painting a + previously-rasterized snapshot (which may've been rasterized before we + had any chance to consider :visited styles). --> + <rect x="0" y="0" width="100" height="100" fill="teal"> + <set attributeName="fill" to="transparent" + begin="0s" duration="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1b.html b/layout/reftests/svg/as-image/svg-image-visited-1b.html new file mode 100644 index 0000000000..05227cc85d --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1b.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <title>Test for bug 641731</title> + <style> + img, embed { + height: 100px; + width: 100px; + border: 1px solid black; + } + </style> + </head> + <body> + <!-- This shouldn't show visited link coloring: --> + <img src="svg-image-visited-1b-helper.svg"> + <!-- This should show visited link coloring: --> + <embed src="svg-image-visited-1b-helper.svg"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1c-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1c-helper.svg new file mode 100644 index 0000000000..ca688a2b55 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1c-helper.svg @@ -0,0 +1,33 @@ +<!-- + 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: purple; } + ]]> + </style> + + <!-- Note: our mochitest runner visits "visited-page.html" early on. + Nonetheless, as an image, we should ignore visitedness. --> + <a xlink:href="visited-page.html" id="foo"> + <rect x="0" y="0" width="100" height="100" fill="orange"/> + </a> + + <!-- This trivial SMIL animation ensures that we *won't* get repainted via + imagelib's SurfaceCache optimization. Specifically, we want to bypass + the SurfaceCache so that we can ensure that repaints of this file (as an + image) will *actually repaint the SVG content*, rather than painting a + previously-rasterized snapshot (which may've been rasterized before we + had any chance to consider :visited styles). --> + <rect x="0" y="0" width="100" height="100" fill="teal"> + <set attributeName="fill" to="transparent" + begin="0s" duration="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1c.html b/layout/reftests/svg/as-image/svg-image-visited-1c.html new file mode 100644 index 0000000000..f016d5cebe --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1c.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <title>Test for bug 641731</title> + <style> + img, embed { + height: 100px; + width: 100px; + border: 1px solid black; + } + </style> + </head> + <body> + <!-- This shouldn't show visited link coloring: --> + <img src="svg-image-visited-1c-helper.svg"> + <!-- This should show visited link coloring: --> + <embed src="svg-image-visited-1c-helper.svg"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1d-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1d-helper.svg new file mode 100644 index 0000000000..cc62c3a27c --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1d-helper.svg @@ -0,0 +1,32 @@ +<!-- + 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: purple; } + ]]> + </style> + + <!-- Note: our mochitest runner visits "visited-page.html" early on. + Nonetheless, as an image, we should ignore visitedness. --> + <a xlink:href="visited-page.html" id="foo"> + <rect x="0" y="0" width="100" height="100" fill="orange"/> + </a> + + <!-- This trivial SMIL animation ensures that we *won't* get repainted via + imagelib's SurfaceCache optimization. Specifically, we want to bypass + the SurfaceCache so that we can ensure that repaints of this file (as an + image) will *actually repaint the SVG content*, rather than painting a + previously-rasterized snapshot (which may've been rasterized before we + had any chance to consider :visited styles). --> + <rect x="0" y="0" width="100" height="100" fill="teal"> + <set attributeName="fill" to="transparent" + begin="0s" duration="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1d.html b/layout/reftests/svg/as-image/svg-image-visited-1d.html new file mode 100644 index 0000000000..39005b39d3 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1d.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <title>Test for bug 641731</title> + <style> + img, embed { + height: 100px; + width: 100px; + border: 1px solid black; + } + </style> + </head> + <body> + <!-- This shouldn't show visited link coloring: --> + <img src="svg-image-visited-1d-helper.svg"> + <!-- This should show visited link coloring: --> + <embed src="svg-image-visited-1d-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 0000000000..9b99258f00 --- /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 0000000000..003e150179 --- /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 0000000000..c6815579b9 --- /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 0000000000..70025dd20a --- /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 0000000000..2b288e4268 --- /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/transparent100x100-w-border-ref.html b/layout/reftests/svg/as-image/transparent100x100-w-border-ref.html new file mode 100644 index 0000000000..f0727820c9 --- /dev/null +++ b/layout/reftests/svg/as-image/transparent100x100-w-border-ref.html @@ -0,0 +1,5 @@ +<html> +<body> + <div style="width: 100px; height: 100px; border: 1px solid black"></div> +</body> +</html> 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 0000000000..76a7efd3dc --- /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 0000000000..6bb59d19a4 --- /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 0000000000..a097f3c666 --- /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 0000000000..b0cba24a65 --- /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 0000000000..b4eadba92e --- /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 0000000000..db0e6c06b9 --- /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 0000000000..81e6011e62 --- /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 0000000000..de39990b95 --- /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 0000000000..48f2d05ff7 --- /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 0000000000..75cd1d61af --- /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 0000000000..cc31a933ed --- /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 0000000000..5133acb8b4 --- /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.list b/layout/reftests/svg/as-image/zoom/reftest.list new file mode 100644 index 0000000000..cd464a5dcd --- /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,0-1,0-408) == img-zoomIn-1.html squaredCircle-150x150-ref.html +fuzzy-if(skiaContent,0-1,0-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 0000000000..7f3b524e8e --- /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 0000000000..41686f5bc1 --- /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 0000000000..266c9e776c --- /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> |
