diff options
Diffstat (limited to 'layout/reftests/svg')
2674 files changed, 59257 insertions, 0 deletions
diff --git a/layout/reftests/svg/1570363-1-ref.html b/layout/reftests/svg/1570363-1-ref.html new file mode 100644 index 0000000000..a22b19e038 --- /dev/null +++ b/layout/reftests/svg/1570363-1-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html><head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<style> +path { + stroke: black; + stroke-width: 8; +} + +.small { + transform: scale(0.25, 0.25); + transform-origin: 50% 50%; + /*transform-box: fill-box;*/ +} +</style> +</head> +<body> + +<svg width="500" height="500"> + <g class="small"> + <path d="M 20,250 L 480,250" style="stroke: green"/> + </g> + <g class="small"> + <path d="M 250,20 L 250,480" style="stroke: green"/> + </g> +</svg> +</body> + +</html> diff --git a/layout/reftests/svg/1570363-1.html b/layout/reftests/svg/1570363-1.html new file mode 100644 index 0000000000..6f754a9634 --- /dev/null +++ b/layout/reftests/svg/1570363-1.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html><head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"> +<style> +path { + stroke: black; + stroke-width: 8; +} + +.small { + transform: scale(0.25, 0.25); + transform-origin: 50% 50%; + transform-box: fill-box; +} +</style> +</head> +<body> + +<svg width="500" height="500"> + <g class="small"> + <path d="M 20,250 L 480,250" style="stroke: green"/> + </g> + <g class="small"> + <path d="M 250,20 L 250,480" style="stroke: green"/> + </g> +</svg> +</body> + +</html> diff --git a/layout/reftests/svg/1792313-ref.svg b/layout/reftests/svg/1792313-ref.svg new file mode 100644 index 0000000000..086367c12d --- /dev/null +++ b/layout/reftests/svg/1792313-ref.svg @@ -0,0 +1,4 @@ +<svg width="500" height="500" viewBox="0 0 500 500" version="2.0" xmlns="http://www.w3.org/2000/svg"> + <rect fill="red" x="-5" y="-5" width="510" height="510"/> + <rect fill="blue" x="50" y="50" width="400" height="400"/> +</svg> diff --git a/layout/reftests/svg/1792313.svg b/layout/reftests/svg/1792313.svg new file mode 100644 index 0000000000..639bcec48b --- /dev/null +++ b/layout/reftests/svg/1792313.svg @@ -0,0 +1,4 @@ +<svg width="500" height="500" viewBox="0 0 0.1 0.1" version="2.0" xmlns="http://www.w3.org/2000/svg"> + <rect fill="red" x="-1" y="-1" width="3" height="3"/> + <rect fill="blue" x="0.01" y="0.01" width="0.08" height="0.08"/> +</svg> diff --git a/layout/reftests/svg/active-clip-and-mask-ref.html b/layout/reftests/svg/active-clip-and-mask-ref.html new file mode 100644 index 0000000000..2f26fb66fd --- /dev/null +++ b/layout/reftests/svg/active-clip-and-mask-ref.html @@ -0,0 +1,12 @@ +<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="100%" fill="grey"/> + <g transform="translate(80 30)"> + <rect x="-80" y="100" width="100" height="100" fill="blue"/> + <rect x="-60" y="120" width="40" height="40" fill="grey"/> + + <rect x="60" y="100" width="100" height="100" fill="blue"/> + <rect x="80" y="120" width="40" height="40" fill="grey"/> + + <rect x="180" y="100" width="100" height="100" fill="blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/active-clip-and-mask.html b/layout/reftests/svg/active-clip-and-mask.html new file mode 100644 index 0000000000..64cc269592 --- /dev/null +++ b/layout/reftests/svg/active-clip-and-mask.html @@ -0,0 +1,41 @@ +<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="100%" fill="grey"/> + <g transform="translate(80 30)"> + + <!-- active blob group with clip path and mask --> + <clipPath id="c4" clipPathUnits="userSpaceOnUse"> + <rect x="-80" y="100" width="100" height="100"/> + </clipPath> + <mask id="m4"> + <rect x="-80" y="100" width="100" height="100" fill="white"/> + <rect x="-60" y="120" width="40" height="40" fill="black"/> + </mask> + <g mask="url(#m4)" clip-path="url(#c4)"> + <g style = "will-change: opacity;"> + <rect x="-80" y="100" width="100" height="100" fill="blue"/> + </g> + </g> + + <!-- active blob group with mask only --> + <mask id="m5"> + <rect x="60" y="100" width="100" height="100" fill="white"/> + <rect x="80" y="120" width="40" height="40" fill="black"/> + </mask> + <g mask="url(#m5)"> + <g style = "will-change: opacity;"> + <rect x="60" y="100" width="100" height="100" fill="blue"/> + </g> + </g> + + <!-- active item with clip path only --> + <clipPath id="c6" clipPathUnits="userSpaceOnUse"> + <rect x="180" y="100" width="100" height="100"/> + </clipPath> + <g clip-path="url(#c6)"> + <g style = "will-change: opacity;"> + <rect x="180" y="100" width="100" height="100" fill="blue"/> + </g> + </g> + + </g> +</svg> diff --git a/layout/reftests/svg/active-transform-blend-mode-ref.html b/layout/reftests/svg/active-transform-blend-mode-ref.html new file mode 100644 index 0000000000..6bb1bee6e4 --- /dev/null +++ b/layout/reftests/svg/active-transform-blend-mode-ref.html @@ -0,0 +1,8 @@ +<svg width=1000 height=1000> + <g style="transform: translateY(-2px) translateX(0px) translateZ(0px);"> + <rect fill="#0000ff" height="93" width="32" x="100" y="163"></rect> + </g> + <g style="mix-blend-mode: multiply;"> + <rect fill="#ff0000" height="93" width="32" x="100" y="161"></rect> + </g> +</svg> diff --git a/layout/reftests/svg/active-transform-blend-mode.html b/layout/reftests/svg/active-transform-blend-mode.html new file mode 100644 index 0000000000..2ed8dc4646 --- /dev/null +++ b/layout/reftests/svg/active-transform-blend-mode.html @@ -0,0 +1,8 @@ +<svg width=1000 height=1000> + <g style="transform: translateY(-2px) translateX(0px) translateZ(0px); will-change: transform;"> + <rect fill="#0000ff" height="93" width="32" x="100" y="163"></rect> + </g> + <g style="mix-blend-mode: multiply;"> + <rect fill="#ff0000" height="93" width="32" x="100" y="161"></rect> + </g> +</svg> 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-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..5105f71921 --- /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.setTransform(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..2d7ec38588 --- /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.setTransform(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..fe56ae0489 --- /dev/null +++ b/layout/reftests/svg/as-image/reftest.list @@ -0,0 +1,217 @@ +# 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 +fails-if(useDrawSnapshot) == background-scale-no-viewbox-1.html background-scale-no-viewbox-1-ref.html +fails-if(useDrawSnapshot) == background-scale-with-viewbox-1.html background-scale-with-viewbox-1-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-192,0-2112) == canvas-drawImage-scale-2a.html canvas-drawImage-scale-2-ref.html +fuzzy(0-192,0-2112) == 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-40000) fuzzy-if(azureSkia,0-1,0-40000) fuzzy-if(winWidget&&!remoteCanvas,0-1,0-39900) fuzzy-if(remoteCanvas&&!swgl,1-73,600-40000) fuzzy-if(Android&&device,0-48,0-39989) == 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(0-255,0-350) fuzzy-if(geckoview,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(0-255,0-90) fuzzy-if(geckoview,0-255,0-1268) == img-simple-5.html img-simple-5-ref.html +== img-simple-6.html lime100x100-ref.html +fuzzy(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 == 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 +skip != img-foreignObject-embed-1-helper.svg lime100x100.svg # Bug 1708599 +== img-foreignObject-iframe-1a.html lime100x100-ref.html +== img-foreignObject-iframe-1b.html lime100x100-ref.html +!= img-foreignObject-iframe-1b-helper.svg lime100x100.svg + +== img-widthAndHeight-meet-1.html img-widthAndHeight-meet-1-ref.html +== img-widthAndHeight-meet-2.html img-widthAndHeight-meet-2-ref.html +fuzzy-if(!useDrawSnapshot,255-255,9-9) random-if(geckoview) == 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(!useDrawSnapshot,255-255,9-9) random-if(geckoview) == 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(!useDrawSnapshot,255-255,3-9) random-if(geckoview) == 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(0-255,0-10) == img-novb-width-meet-1.html img-novb-width-all-1-ref.html +fuzzy(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 + +== 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..13df22ead6 --- /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(0-1,0-408) == img-zoomIn-1.html squaredCircle-150x150-ref.html +fuzzy(0-1,0-74) == img-zoomOut-1.html squaredCircle-50x50-ref.html + +# Ensure that scaled SVG images aren't fuzzy when tiled. +fails-if(useDrawSnapshot) == img-fuzzy-zoomOut-1.html img-fuzzy-zoomOut-1-ref.html +fails-if(useDrawSnapshot) == 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> diff --git a/layout/reftests/svg/autofocus-01-ref.svg b/layout/reftests/svg/autofocus-01-ref.svg new file mode 100644 index 0000000000..fb9c7bc16b --- /dev/null +++ b/layout/reftests/svg/autofocus-01-ref.svg @@ -0,0 +1,8 @@ +<svg width="400" height="110" xmlns="http://www.w3.org/2000/svg" onload="document.querySelector('a').focus();"> + <a href="#"> + <rect x="10" y="10" width="300" height="90" fill="lime"/> + </a> + <style> + a:focus { outline: 2px solid blue; } + </style> +</svg> diff --git a/layout/reftests/svg/autofocus-01a.svg b/layout/reftests/svg/autofocus-01a.svg new file mode 100644 index 0000000000..89be07acad --- /dev/null +++ b/layout/reftests/svg/autofocus-01a.svg @@ -0,0 +1,6 @@ +<svg width="400" height="110" xmlns="http://www.w3.org/2000/svg"> + <rect x="10" y="10" width="300" height="90" fill="lime" tabindex="0" autofocus="true"/> + <style> + rect:focus { outline: 2px solid blue; } + </style> +</svg> diff --git a/layout/reftests/svg/autofocus-01b.svg b/layout/reftests/svg/autofocus-01b.svg new file mode 100644 index 0000000000..94bf93b78c --- /dev/null +++ b/layout/reftests/svg/autofocus-01b.svg @@ -0,0 +1,8 @@ +<svg width="400" height="110" xmlns="http://www.w3.org/2000/svg"> + <a href="#" autofocus="true"> + <rect x="10" y="10" width="300" height="90" fill="lime"/> + </a> + <style> + a:focus { outline: 2px solid blue; } + </style> +</svg> diff --git a/layout/reftests/svg/autofocus-02a.svg b/layout/reftests/svg/autofocus-02a.svg new file mode 100644 index 0000000000..7e026a3216 --- /dev/null +++ b/layout/reftests/svg/autofocus-02a.svg @@ -0,0 +1,8 @@ +<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="100%" fill="lime"/> + <!-- need tabindex for autofocus to work --> + <rect x="10" y="10" width="300" height="90" fill="lime" autofocus="true"/> + <style> + rect:focus { outline: 2px solid blue; } + </style> +</svg> diff --git a/layout/reftests/svg/autofocus-02b.svg b/layout/reftests/svg/autofocus-02b.svg new file mode 100644 index 0000000000..5c429900df --- /dev/null +++ b/layout/reftests/svg/autofocus-02b.svg @@ -0,0 +1,10 @@ +<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="100%" fill="lime"/> + <!-- need href for autofocus to work --> + <a autofocus="true"> + <rect x="10" y="10" width="300" height="90" fill="lime"/> + </a> + <style> + a:focus { outline: 2px solid blue; } + </style> +</svg> diff --git a/layout/reftests/svg/background-ref.html b/layout/reftests/svg/background-ref.html new file mode 100644 index 0000000000..c4fd9d9bfd --- /dev/null +++ b/layout/reftests/svg/background-ref.html @@ -0,0 +1,20 @@ +<!doctype html> +<meta charset=utf-8> +<style> + div { + position: relative; + } + svg { + display: block; + margin: auto; + } +</style> +<body> + <div> + <svg xmlns='http://www.w3.org/2000/svg' width='100px' height='200px' + viewport='0 0 100 200'> + <rect x='0' y='100' width='100' height='100' fill='purple'> + </rect> + </svg> + </div> +</body> diff --git a/layout/reftests/svg/background-svg-without-height-width.html b/layout/reftests/svg/background-svg-without-height-width.html new file mode 100644 index 0000000000..2c2d652d4b --- /dev/null +++ b/layout/reftests/svg/background-svg-without-height-width.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset=utf-8> +<style> +.bgsvg { + background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'%3E%3Crect x='0' y='16' width='16' height='16' fill='purple'/%3E%3C/svg%3E") no-repeat; + background-size: contain; + width: 100px; + height: auto; + margin: auto; + position: relative; +} +.bgsvg::after { + content: ' '; + display: block; + padding-bottom: 200%; +} +</style> +<div class="bgsvg"></div> diff --git a/layout/reftests/svg/background-svg-without-height.html b/layout/reftests/svg/background-svg-without-height.html new file mode 100644 index 0000000000..6f4d2fae7d --- /dev/null +++ b/layout/reftests/svg/background-svg-without-height.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset=utf-8> +<style> +.bgsvg { + background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' viewBox='0 0 16 32'%3E%3Crect x='0' y='16' width='16' height='16' fill='purple'/%3E%3C/svg%3E") no-repeat; + background-size: contain; + width: 100px; + height: auto; + margin: auto; + position: relative; +} +.bgsvg::after { + content: ' '; + display: block; + padding-bottom: 200%; +} +</style> +<div class="bgsvg"></div> diff --git a/layout/reftests/svg/background-svg-without-width.html b/layout/reftests/svg/background-svg-without-width.html new file mode 100644 index 0000000000..87a127c505 --- /dev/null +++ b/layout/reftests/svg/background-svg-without-width.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset=utf-8> +<style> +.bgsvg { + background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='32' viewBox='0 0 16 32'%3E%3Crect x='0' y='16' width='16' height='16' fill='purple'/%3E%3C/svg%3E") no-repeat; + background-size: contain; + width: 100px; + height: auto; + margin: auto; + position: relative; +} +.bgsvg::after { + content: ' '; + display: block; + padding-bottom: 200%; +} +</style> +<div class="bgsvg"></div> diff --git a/layout/reftests/svg/baseline-middle-01.svg b/layout/reftests/svg/baseline-middle-01.svg new file mode 100644 index 0000000000..7120c4fa89 --- /dev/null +++ b/layout/reftests/svg/baseline-middle-01.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 20 20" preserveAspectRatio="none" + font-family="sans-serif"> + <rect y="-10" width="20" height="20" fill="lime"/> + <text dominant-baseline="middle" fill="red">x</text> + <text y="0.5ex" fill="lime" stroke-width="1" stroke="lime">x</text> +</svg> diff --git a/layout/reftests/svg/big-image.jpeg b/layout/reftests/svg/big-image.jpeg Binary files differnew file mode 100644 index 0000000000..6a891dcb41 --- /dev/null +++ b/layout/reftests/svg/big-image.jpeg diff --git a/layout/reftests/svg/blend-color-burn-ref.svg b/layout/reftests/svg/blend-color-burn-ref.svg new file mode 100644 index 0000000000..48191f349e --- /dev/null +++ b/layout/reftests/svg/blend-color-burn-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-color-burn.svg b/layout/reftests/svg/blend-color-burn.svg new file mode 100644 index 0000000000..fef6365b99 --- /dev/null +++ b/layout/reftests/svg/blend-color-burn.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: color-burn;"></use> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-color-dodge-ref.svg b/layout/reftests/svg/blend-color-dodge-ref.svg new file mode 100644 index 0000000000..724a4e184b --- /dev/null +++ b/layout/reftests/svg/blend-color-dodge-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(253,253,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-color-dodge.svg b/layout/reftests/svg/blend-color-dodge.svg new file mode 100644 index 0000000000..e2bc7471f8 --- /dev/null +++ b/layout/reftests/svg/blend-color-dodge.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: color-dodge"></use> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-color-ref.svg b/layout/reftests/svg/blend-color-ref.svg new file mode 100644 index 0000000000..2936015617 --- /dev/null +++ b/layout/reftests/svg/blend-color-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,105,105,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(93,0,0,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(255,52,52,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(0,131,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,48,0,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(0,192,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(55,55,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(137,137,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(95,95,255,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(86,86,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(164,164,37,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(31,31,0,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-color.svg b/layout/reftests/svg/blend-color.svg new file mode 100644 index 0000000000..e9efe3d3b9 --- /dev/null +++ b/layout/reftests/svg/blend-color.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: color"></use> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-darken-ref.svg b/layout/reftests/svg/blend-darken-ref.svg new file mode 100644 index 0000000000..d4d16a54be --- /dev/null +++ b/layout/reftests/svg/blend-darken-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(127,0,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,127,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-darken.svg b/layout/reftests/svg/blend-darken.svg new file mode 100644 index 0000000000..472366aede --- /dev/null +++ b/layout/reftests/svg/blend-darken.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: darken"></use> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-difference-ref.svg b/layout/reftests/svg/blend-difference-ref.svg new file mode 100644 index 0000000000..c04c51e0ab --- /dev/null +++ b/layout/reftests/svg/blend-difference-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(128,127,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(127,128,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(128,127,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(127,128,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-difference-stacking-ref.html b/layout/reftests/svg/blend-difference-stacking-ref.html new file mode 100644 index 0000000000..5e8b326f75 --- /dev/null +++ b/layout/reftests/svg/blend-difference-stacking-ref.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +#b { + width: 200px; + height: 200px; + background-color: rgb(0,255,0); +} +#c { + z-index: 1; + position: absolute; + top:100px; +} +</style> +<div id="b"> +<svg width="100" height="100" viewBox="0 0 100 100" > + <rect style="fill:#000000;" width="100" height="100"/> +</svg> +<div id="c"> +<svg width="100" height="100" viewBox="0 0 100 100" > + <rect style="fill:#00FF00;" width="100" height="100"/> +</svg> +</div> +</div> +</html> diff --git a/layout/reftests/svg/blend-difference-stacking.html b/layout/reftests/svg/blend-difference-stacking.html new file mode 100644 index 0000000000..cca18f8ce8 --- /dev/null +++ b/layout/reftests/svg/blend-difference-stacking.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> +<style> +#b { + width: 200px; + height: 200px; + background-color: rgb(0,255,0); +} +#c { + z-index: 1; + position: absolute; + top:100px; +} +</style> +<div id="b"> +<svg width="100" height="100" viewBox="0 0 100 100" > + <rect style="fill:#00FF00;mix-blend-mode:difference;" width="100" height="100"/> +</svg> +<div id="c"> +<svg width="100" height="100" viewBox="0 0 100 100" > + <rect style="fill:#00FF00;mix-blend-mode:difference;" width="100" height="100"/> +</svg> +</div> +</div> +</html> diff --git a/layout/reftests/svg/blend-difference.svg b/layout/reftests/svg/blend-difference.svg new file mode 100644 index 0000000000..9343ab6e1f --- /dev/null +++ b/layout/reftests/svg/blend-difference.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: difference"></use> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-exclusion-ref.svg b/layout/reftests/svg/blend-exclusion-ref.svg new file mode 100644 index 0000000000..b4edd89076 --- /dev/null +++ b/layout/reftests/svg/blend-exclusion-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(128,127,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(127,128,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(128,127,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(127,128,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-exclusion.svg b/layout/reftests/svg/blend-exclusion.svg new file mode 100644 index 0000000000..0c3dbe6b49 --- /dev/null +++ b/layout/reftests/svg/blend-exclusion.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: exclusion"></use> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-hard-light-ref.svg b/layout/reftests/svg/blend-hard-light-ref.svg new file mode 100644 index 0000000000..21afb50c38 --- /dev/null +++ b/layout/reftests/svg/blend-hard-light-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(254,0,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,254,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-hard-light.svg b/layout/reftests/svg/blend-hard-light.svg new file mode 100644 index 0000000000..2cb11ef64b --- /dev/null +++ b/layout/reftests/svg/blend-hard-light.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: hard-light"></use> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-hue-ref.svg b/layout/reftests/svg/blend-hue-ref.svg new file mode 100644 index 0000000000..907064b543 --- /dev/null +++ b/layout/reftests/svg/blend-hue-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,105,105,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(93,0,0,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(202,75,75,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(0,131,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,48,0,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(38,165,38,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(55,55,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(137,137,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(99,99,226,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(87,87,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(169,169,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(31,31,0,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-hue.svg b/layout/reftests/svg/blend-hue.svg new file mode 100644 index 0000000000..79dd51e735 --- /dev/null +++ b/layout/reftests/svg/blend-hue.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: hue"></use> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-layer-blend-ref.svg b/layout/reftests/svg/blend-layer-blend-ref.svg new file mode 100644 index 0000000000..19ec46bc61 --- /dev/null +++ b/layout/reftests/svg/blend-layer-blend-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > + <rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-layer-blend.svg b/layout/reftests/svg/blend-layer-blend.svg new file mode 100644 index 0000000000..cf86914842 --- /dev/null +++ b/layout/reftests/svg/blend-layer-blend.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > + <rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/> + <g style="mix-blend-mode: multiply"> + <rect x="40" y="40" width="80" height="80" fill="rgb(0,255,0)" style="mix-blend-mode: difference"/> + </g> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-layer-filter-ref.svg b/layout/reftests/svg/blend-layer-filter-ref.svg new file mode 100644 index 0000000000..76e1798549 --- /dev/null +++ b/layout/reftests/svg/blend-layer-filter-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > + <rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/> +</svg> diff --git a/layout/reftests/svg/blend-layer-filter.svg b/layout/reftests/svg/blend-layer-filter.svg new file mode 100644 index 0000000000..b74b0f1c9d --- /dev/null +++ b/layout/reftests/svg/blend-layer-filter.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <filter id="f1" x="0" y="0"> + <feGaussianBlur in="SourceGraphic" stdDeviation="15" /> + </filter> +</defs> +<rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/> +<g filter="url(#f1)"> + <rect x="40" y="40" width="80" height="80" fill="rgb(0,255,0)" style="mix-blend-mode: difference"/> +</g> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-layer-mask-ref.svg b/layout/reftests/svg/blend-layer-mask-ref.svg new file mode 100644 index 0000000000..19ec46bc61 --- /dev/null +++ b/layout/reftests/svg/blend-layer-mask-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > + <rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-layer-mask.svg b/layout/reftests/svg/blend-layer-mask.svg new file mode 100644 index 0000000000..8978b7fdc7 --- /dev/null +++ b/layout/reftests/svg/blend-layer-mask.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <mask id="msk"> + <rect x="10" y="10" width="20" height="20" /> + </mask> +</defs> +<rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/> +<g mask="url(#msk)"> + <rect x="40" y="40" width="80" height="80" fill="rgb(0,255,0)" style="mix-blend-mode: difference"/> +</g> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-layer-opacity-ref.svg b/layout/reftests/svg/blend-layer-opacity-ref.svg new file mode 100644 index 0000000000..0b5c8be597 --- /dev/null +++ b/layout/reftests/svg/blend-layer-opacity-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-layer-opacity.svg b/layout/reftests/svg/blend-layer-opacity.svg new file mode 100644 index 0000000000..a472ef991c --- /dev/null +++ b/layout/reftests/svg/blend-layer-opacity.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > + <rect x="0" y="0" width="160" height="160" fill="rgb(0,255,0)"/> + <g opacity=".5"> + <rect x="40" y="40" width="80" height="80" fill="rgb(0,255,0)" style="mix-blend-mode: difference"/> + </g> +</svg> diff --git a/layout/reftests/svg/blend-lighten-ref.svg b/layout/reftests/svg/blend-lighten-ref.svg new file mode 100644 index 0000000000..4ec1bf08a0 --- /dev/null +++ b/layout/reftests/svg/blend-lighten-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(255,127,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(127,255,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-lighten.svg b/layout/reftests/svg/blend-lighten.svg new file mode 100644 index 0000000000..f288d9f32a --- /dev/null +++ b/layout/reftests/svg/blend-lighten.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: lighten"></use> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-luminosity-ref.svg b/layout/reftests/svg/blend-luminosity-ref.svg new file mode 100644 index 0000000000..8dc3c2247f --- /dev/null +++ b/layout/reftests/svg/blend-luminosity-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,131,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(55,55,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(86,86,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,105,105,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(137,137,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(164,164,37,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(93,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,48,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(31,31,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(255,52,52,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,192,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(95,95,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-luminosity.svg b/layout/reftests/svg/blend-luminosity.svg new file mode 100644 index 0000000000..7d9f1a55c4 --- /dev/null +++ b/layout/reftests/svg/blend-luminosity.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: luminosity"></use> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-multiply-alpha-ref.svg b/layout/reftests/svg/blend-multiply-alpha-ref.svg new file mode 100644 index 0000000000..468fd9d91e --- /dev/null +++ b/layout/reftests/svg/blend-multiply-alpha-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,127,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,127,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(127,63,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(127,0,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,127,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(64,127,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(127,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,127,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(63,63,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(191,0,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,191,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,127,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(95,95,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-multiply-alpha.svg b/layout/reftests/svg/blend-multiply-alpha.svg new file mode 100644 index 0000000000..fd707e2236 --- /dev/null +++ b/layout/reftests/svg/blend-multiply-alpha.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="opacity: .5; mix-blend-mode: multiply"></use> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-multiply-ref.svg b/layout/reftests/svg/blend-multiply-ref.svg new file mode 100644 index 0000000000..0addf25093 --- /dev/null +++ b/layout/reftests/svg/blend-multiply-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(127,0,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(0,127,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(127,0,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,127,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(63,63,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-multiply.svg b/layout/reftests/svg/blend-multiply.svg new file mode 100644 index 0000000000..2724f94ee0 --- /dev/null +++ b/layout/reftests/svg/blend-multiply.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: multiply"></use> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-normal-ref.svg b/layout/reftests/svg/blend-normal-ref.svg new file mode 100644 index 0000000000..8b86b74487 --- /dev/null +++ b/layout/reftests/svg/blend-normal-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-normal.svg b/layout/reftests/svg/blend-normal.svg new file mode 100644 index 0000000000..3878c6c4c4 --- /dev/null +++ b/layout/reftests/svg/blend-normal.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: normal"></use> +</svg> diff --git a/layout/reftests/svg/blend-overlay-ref.svg b/layout/reftests/svg/blend-overlay-ref.svg new file mode 100644 index 0000000000..320697f710 --- /dev/null +++ b/layout/reftests/svg/blend-overlay-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(254,0,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(0,254,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(0,0,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(126,126,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-overlay.svg b/layout/reftests/svg/blend-overlay.svg new file mode 100644 index 0000000000..114d6e3da0 --- /dev/null +++ b/layout/reftests/svg/blend-overlay.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: overlay"></use> +</svg> diff --git a/layout/reftests/svg/blend-saturation-ref.svg b/layout/reftests/svg/blend-saturation-ref.svg new file mode 100644 index 0000000000..a8fb06a5a8 --- /dev/null +++ b/layout/reftests/svg/blend-saturation-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(166,39,39,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(76,203,76,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(14,14,141,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(127,127,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-saturation.svg b/layout/reftests/svg/blend-saturation.svg new file mode 100644 index 0000000000..88bd526480 --- /dev/null +++ b/layout/reftests/svg/blend-saturation.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: saturation"></use> +</svg> diff --git a/layout/reftests/svg/blend-screen-ref.svg b/layout/reftests/svg/blend-screen-ref.svg new file mode 100644 index 0000000000..d99af71dc9 --- /dev/null +++ b/layout/reftests/svg/blend-screen-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> +<rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> +<rect x="40" y="0" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="80" y="0" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="120" y="0" width="40" height="40" fill="rgba(255,127,0,1)"></rect> +<rect x="0" y="40" width="40" height="40" fill="rgba(255,255,0,1)"></rect> +<rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> +<rect x="80" y="40" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="120" y="40" width="40" height="40" fill="rgba(127,255,0,1)"></rect> +<rect x="0" y="80" width="40" height="40" fill="rgba(255,0,255,1)"></rect> +<rect x="40" y="80" width="40" height="40" fill="rgba(0,255,255,1)"></rect> +<rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> +<rect x="120" y="80" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="0" y="120" width="40" height="40" fill="rgba(255,127,0,1)"></rect> +<rect x="40" y="120" width="40" height="40" fill="rgba(127,255,0,1)"></rect> +<rect x="80" y="120" width="40" height="40" fill="rgba(127,127,255,1)"></rect> +<rect x="120" y="120" width="40" height="40" fill="rgba(190,190,0,1)"></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/blend-screen.svg b/layout/reftests/svg/blend-screen.svg new file mode 100644 index 0000000000..79ce563a5a --- /dev/null +++ b/layout/reftests/svg/blend-screen.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: screen"></use> +</svg> diff --git a/layout/reftests/svg/blend-soft-light-ref.svg b/layout/reftests/svg/blend-soft-light-ref.svg new file mode 100644 index 0000000000..485314e389 --- /dev/null +++ b/layout/reftests/svg/blend-soft-light-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400"> + <rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,1)"></rect> + <rect x="40" y="0" width="40" height="40" fill="rgba(0,255,0,1)"></rect> + <rect x="80" y="0" width="40" height="40" fill="rgba(0,0,255,1)"></rect> + <rect x="120" y="0" width="40" height="40" fill="rgba(190,63,0,1)"></rect> + <rect x="0" y="40" width="40" height="40" fill="rgba(255,0,0,1)"></rect> + <rect x="40" y="40" width="40" height="40" fill="rgba(0,255,0,1)"></rect> + <rect x="80" y="40" width="40" height="40" fill="rgba(0,0,255,1)"></rect> + <rect x="120" y="40" width="40" height="40" fill="rgba(64,190,0,1)"></rect> + <rect x="0" y="80" width="40" height="40" fill="rgba(255,0,0,1)"></rect> + <rect x="40" y="80" width="40" height="40" fill="rgba(0,255,0,1)"></rect> + <rect x="80" y="80" width="40" height="40" fill="rgba(0,0,255,1)"></rect> + <rect x="120" y="80" width="40" height="40" fill="rgba(63,63,0,1)"></rect> + <rect x="0" y="120" width="40" height="40" fill="rgba(255,0,0,1)"></rect> + <rect x="40" y="120" width="40" height="40" fill="rgba(0,255,0,1)"></rect> + <rect x="80" y="120" width="40" height="40" fill="rgba(0,0,255,1)"></rect> + <rect x="120" y="120" width="40" height="40" fill="rgba(126,126,0,1)"></rect> +</svg> diff --git a/layout/reftests/svg/blend-soft-light.svg b/layout/reftests/svg/blend-soft-light.svg new file mode 100644 index 0000000000..a0f42a4f4f --- /dev/null +++ b/layout/reftests/svg/blend-soft-light.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" > +<defs> + <g id="patch"> + <rect x="0" y="0" width="40" height="160" fill="rgb(255,0,0)"/> + <rect x="40" y="0" width="40" height="160" fill="rgb(0,255,0)"/> + <rect x="80" y="0" width="40" height="160" fill="rgb(0,0,255)"/> + <rect x="120" y="0" width="40" height="160" fill="rgb(127,127,0)"/> + </g> +</defs> +<use xlink:href="#patch" x="0" y="0" width="160" height="160"></use> +<use xlink:href="#patch" x="0" y="0" width="160" height="160" transform="rotate(90 80 80)" style="mix-blend-mode: soft-light"></use> +</svg> diff --git a/layout/reftests/svg/blur-inside-clipPath-ref.svg b/layout/reftests/svg/blur-inside-clipPath-ref.svg new file mode 100644 index 0000000000..0b679f7409 --- /dev/null +++ b/layout/reftests/svg/blur-inside-clipPath-ref.svg @@ -0,0 +1,12 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="786" viewBox="0,0,512,512"> + <defs> + <filter id="filter-wVmTgUOU" filterUnits="objectBoundingBox" x="-30%" y="-30%" width="160%" height="170%" color-interpolation-filters="sRGB"> + <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" in="SourceGraphic"/> + <feOffset dy="28"/> + <feGaussianBlur stdDeviation="18.67" result="blur1"/> + </filter> + </defs> + <g filter="url(#filter-wVmTgUOU)"> + <rect x="58.88" y="58.88" width="394.24" height="394.24" color="#07773e" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/blur-inside-clipPath.svg b/layout/reftests/svg/blur-inside-clipPath.svg new file mode 100644 index 0000000000..0b31241c48 --- /dev/null +++ b/layout/reftests/svg/blur-inside-clipPath.svg @@ -0,0 +1,17 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="786" viewBox="0,0,512,512"> + <defs> + <clipPath id="clip-vXP8Ybe5"> + <path d="M0,512v-512h512v512z"/> + </clipPath> + <filter id="filter-wVmTgUOU" filterUnits="objectBoundingBox" x="-30%" y="-30%" width="160%" height="170%" color-interpolation-filters="sRGB"> + <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" in="SourceGraphic"/> + <feOffset dy="28"/> + <feGaussianBlur stdDeviation="18.67" result="blur1"/> + </filter> + </defs> + <g clip-path="url(#clip-vXP8Ybe5)"> + <g filter="url(#filter-wVmTgUOU)"> + <rect x="58.88" y="58.88" width="394.24" height="394.24" color="#07773e" fill="red"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/border-radius-01.html b/layout/reftests/svg/border-radius-01.html new file mode 100644 index 0000000000..2ea2a0d200 --- /dev/null +++ b/layout/reftests/svg/border-radius-01.html @@ -0,0 +1,13 @@ +<html> +<head> +</head> +<body style="background-color: lime;"> + <svg width="300" height="300" + style="border-radius: 200px; overflow: hidden; background-color: red; position: absolute;"> + <rect width="300" height="300" fill="red"/> + </svg> + <svg width="300" height="300" style="position: absolute;"> + <circle cx="150" cy="150" r="155" fill="lime"/> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/bug-1562091-icon.svg b/layout/reftests/svg/bug-1562091-icon.svg new file mode 100644 index 0000000000..c7839998c0 --- /dev/null +++ b/layout/reftests/svg/bug-1562091-icon.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns="http://www.w3.org/2000/svg" + version="1.1" + x="0" + y="0" + width="24px" + height="7992px" + viewBox="0 0 24 7992" + preserveAspectRatio="none"> + <path + style="opacity:1;fill:#338000;fill-opacity:1;stroke:#333333;stroke-width:0.00377953;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" + d="m 12.254729,7226.1639 a 10.219037,9.9150381 0 0 0 -10.2187504,9.914 10.219037,9.9150381 0 0 0 10.2187504,9.916 10.219037,9.9150381 0 0 0 10.21875,-9.916 10.219037,9.9150381 0 0 0 -10.21875,-9.914 z m -4.8632817,5.4238 a 1.8472255,1.8472254 0 0 1 1.8476563,1.8476 1.8472255,1.8472254 0 0 1 -1.8476563,1.8477 1.8472255,1.8472254 0 0 1 -1.8476563,-1.8477 1.8472255,1.8472254 0 0 1 1.8476563,-1.8476 z m 7.9511717,0.1894 a 2.8750086,2.8750083 0 0 1 2.875,2.875 2.8750086,2.8750083 0 0 1 -2.875,2.875 2.8750086,2.8750083 0 0 1 -2.875,-2.875 2.8750086,2.8750083 0 0 1 2.875,-2.875 z m -9.4726561,5.9942 c 2.3418683,-0.014 5.6283111,3.4184 11.8808601,3.3125 l 0.560546,0.8418 c -2.199521,1.9496 -11.6343041,3.7181 -13.9374997,-3.5078 0.4646917,-0.456 0.9556625,-0.6433 1.4960936,-0.6465 z"/> +</svg> diff --git a/layout/reftests/svg/bug-1562091-ref.html b/layout/reftests/svg/bug-1562091-ref.html new file mode 100644 index 0000000000..78c5f8622f --- /dev/null +++ b/layout/reftests/svg/bug-1562091-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> + <meta charset="UTF-8"> +</head> + +<body> + There should be a visible icon after this text: + <!-- No icon in the reference, we test that the original is different from the reference--> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/bug-1562091.html b/layout/reftests/svg/bug-1562091.html new file mode 100644 index 0000000000..ee192a88dd --- /dev/null +++ b/layout/reftests/svg/bug-1562091.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> + <meta charset="UTF-8"> + <style> + .IconElement { direction: ltr; text-align: left; height: 24px; overflow: hidden; width: 24px; display: inline-block; position: relative; } + .IconImage::before { content: url("./bug-1562091-icon.svg"); } + .IconImage { position: absolute; left: 0px; top: -7224px; } + </style> +</head> + +<body> + There should be a visible icon after this text: + <div class="IconElement"> <div class="IconImage"> </div> </div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/clip-01.svg b/layout/reftests/svg/clip-01.svg new file mode 100644 index 0000000000..e15923b4e6 --- /dev/null +++ b/layout/reftests/svg/clip-01.svg @@ -0,0 +1,24 @@ +<!-- + 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"> + + <title>Testcase for clip property</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=481614 --> + + <rect width="100%" height="100%" fill="lime"/> + + <rect x="10" y="10" width="100" height="100" fill="red"/> + + <svg clip="rect(10, 110, 110, 10)"> + <rect width="100%" height="100%" fill="red" /> + <rect x="10" y="10" width="100" height="100" fill="lime"/> + </svg> + + <svg clip="rect(0, 0, 0, 0)"> + <rect width="100%" height="100%" fill="red" /> + </svg> + +</svg> diff --git a/layout/reftests/svg/clip-02-ref.svg b/layout/reftests/svg/clip-02-ref.svg new file mode 100644 index 0000000000..8148dda729 --- /dev/null +++ b/layout/reftests/svg/clip-02-ref.svg @@ -0,0 +1,20 @@ +<!-- + 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"> + + <title>Reference for clip property</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=481614 --> + + <rect x="10" y="10" width="100" height="100" fill="lime"/> + + <rect x="10" y="210" width="100" height="100" fill="lime"/> + + <rect x="210" y="210" width="100" height="100" fill="lime"/> + + <rect x="10" y="410" width="100" height="100" fill="lime"/> + + <rect x="210" y="410" width="100" height="100" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/clip-02a.svg b/layout/reftests/svg/clip-02a.svg new file mode 100644 index 0000000000..233712bdd9 --- /dev/null +++ b/layout/reftests/svg/clip-02a.svg @@ -0,0 +1,34 @@ +<!-- + 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"> + + <title>Testcase for clip property</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=481614 --> + + <svg clip="auto"> + <rect x="10" y="10" width="100" height="100" fill="lime"/> + </svg> + + <svg clip="rect(auto, 110, 310, 10)"> + <rect y="210" width="120" height="110" fill="red" /> + <rect x="10" y="210" width="100" height="100" fill="lime"/> + </svg> + + <svg clip="rect(210, auto, 310, 210)"> + <rect x="200" y="200" width="110" height="120" fill="red" /> + <rect x="210" y="210" width="100" height="100" fill="lime"/> + </svg> + + <svg clip="rect(410, 110, auto, 10)"> + <rect y="400" width="120" height="110" fill="red" /> + <rect x="10" y="410" width="100" height="100" fill="lime"/> + </svg> + + <svg clip="rect(410, 310, 510, auto)"> + <rect x="210" y="400" width="110" height="120" fill="red" /> + <rect x="210" y="410" width="100" height="100" fill="lime"/> + </svg> +</svg> diff --git a/layout/reftests/svg/clip-02b.svg b/layout/reftests/svg/clip-02b.svg new file mode 100644 index 0000000000..dd77c9aed3 --- /dev/null +++ b/layout/reftests/svg/clip-02b.svg @@ -0,0 +1,34 @@ +<!-- + 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" direction="rtl"> + + <title>Testcase for clip property</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=481614 --> + + <svg clip="auto"> + <rect x="10" y="10" width="100" height="100" fill="lime"/> + </svg> + + <svg clip="rect(auto, 110, 310, 10)"> + <rect y="210" width="120" height="110" fill="red" /> + <rect x="10" y="210" width="100" height="100" fill="lime"/> + </svg> + + <svg clip="rect(210, auto, 310, 210)"> + <rect x="200" y="200" width="110" height="120" fill="red" /> + <rect x="210" y="210" width="100" height="100" fill="lime"/> + </svg> + + <svg clip="rect(410, 110, auto, 10)"> + <rect y="400" width="120" height="110" fill="red" /> + <rect x="10" y="410" width="100" height="100" fill="lime"/> + </svg> + + <svg clip="rect(410, 310, 510, auto)"> + <rect x="210" y="400" width="110" height="120" fill="red" /> + <rect x="210" y="410" width="100" height="100" fill="lime"/> + </svg> +</svg> diff --git a/layout/reftests/svg/clip-surface-clone-01-ref.svg b/layout/reftests/svg/clip-surface-clone-01-ref.svg new file mode 100644 index 0000000000..71790e6ba0 --- /dev/null +++ b/layout/reftests/svg/clip-surface-clone-01-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg" + x="200" y="200" opacity="0.5" width="100" height="100"/> +</svg> diff --git a/layout/reftests/svg/clip-surface-clone-01.svg b/layout/reftests/svg/clip-surface-clone-01.svg new file mode 100644 index 0000000000..7854b756b2 --- /dev/null +++ b/layout/reftests/svg/clip-surface-clone-01.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <svg x="200" y="200" width="200.5" height="200.5"> + <g opacity="0.5"> + <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg" + width="100" height="100"/> + </g> + </svg> +</svg> diff --git a/layout/reftests/svg/clip-use-element-01.svg b/layout/reftests/svg/clip-use-element-01.svg new file mode 100644 index 0000000000..a01f4b9afe --- /dev/null +++ b/layout/reftests/svg/clip-use-element-01.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <clipPath id="myClipPath"> + <rect x="100" y="100" width="100" height="100"/> + </clipPath> + <rect x="0" y="0" width="100" height="100" fill="red" id="abc"/> + </defs> + <rect x="0" y="0" width="100%" height="100%" fill="lime"/> + <use xlink:href="#abc" + x="100" y="100" clip-path="url(#myClipPath)"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/clip-use-element-02.svg b/layout/reftests/svg/clip-use-element-02.svg new file mode 100644 index 0000000000..493edf24b5 --- /dev/null +++ b/layout/reftests/svg/clip-use-element-02.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <rect x="100" y="100" width="100" height="100" fill="red" id="def"/> + <clipPath id="myClipPath"> + <use xlink:href="#def"/> + </clipPath> + <rect x="0" y="0" width="100" height="100" fill="red" id="abc"/> + </defs> + <rect x="0" y="0" width="100%" height="100%" fill="lime"/> + <use xlink:href="#abc" + x="100" y="100" clip-path="url(#myClipPath)"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/clipPath-advanced-01.svg b/layout/reftests/svg/clipPath-advanced-01.svg new file mode 100644 index 0000000000..7690f8bb11 --- /dev/null +++ b/layout/reftests/svg/clipPath-advanced-01.svg @@ -0,0 +1,84 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> + + <title>Testcase for clipPath referencing other clipPaths</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=534612 --> + + <defs> + <clipPath id="clip1"> + <rect id="r1" x="20" y="-40" width="100" height="40" /> + </clipPath> + <clipPath id="clip2"> + <rect x="20" y="20" width="100" height="100" clip-path="url(#clip1)" /> + </clipPath> + <clipPath id="clip3"> + <rect x="140" y="-40" width="100" height="40" /> + </clipPath> + <clipPath id="clip4" clip-path="url(#clip3)"> + <rect x="140" y="20" width="100" height="100" /> + </clipPath> + <clipPath id="clip1"> + <rect x="20" y="-40" width="100" height="40" /> + </clipPath> + <clipPath id="clip5"> + <rect id="r5" x="20" y="140" width="100" height="100" /> + </clipPath> + <clipPath id="clip6"> + <use xlink:href="#r5" clip-path="url(#clip5)" /> + </clipPath> + <clipPath id="clip7"> + <rect id="r7" x="140" y="140" width="100" height="100" /> + </clipPath> + <clipPath id="clip8"> + <use xlink:href="#r7" fill="red" clip-path="url(#clip1)"/> + </clipPath> + <clipPath id="clip9"> + <rect x="20" y="260" width="100" height="100" /> + </clipPath> + <clipPath id="clip10"> + <use xlink:href="#r1" fill="red" clip-path="url(#clip9)"/> + </clipPath> + <clipPath id="clip11"> + <rect id="r11" x="140" y="260" width="100" height="100" clip-path="url(#clip1)"/> + </clipPath> + <clipPath id="clip12"> + <use xlink:href="#r11" fill="red" clip-path="url(#clip11)"/> + </clipPath> + <clipPath id="clip12" clipPathUnits="objectBoundingBox"> + <rect width=".5" height=".5"/> + </clipPath> + <clipPath id="clip13" clip-path="url(#clip12)"> + <circle cx="100" cy="470" r="150"/> + </clipPath> + <clipPath id="clip14"> + <use xlink:href="#clip1"/> + </clipPath> + <clipPath id="clip15" clip-path="url(#clip14)"> + <text x="140" y="500" font-size="100px">CLIP</text> + </clipPath> + </defs> + + <rect width="100%" height="100%" fill="lime" /> + <!-- clip path where an object is itself clipped --> + <rect x="20" y="20" width="100" height="100" fill="red" clip-path="url(#clip2)" /> + + <!-- clip path referencing another clip-path --> + <rect x="140" y="20" width="100" height="100" fill="red" clip-path="url(#clip4)" /> + + <!-- clip paths where object has complex clipping --> + <rect x="20" y="140" width="100" height="100" fill="red" /> + <rect x="20" y="140" width="100" height="100" fill="lime" clip-path="url(#clip6)" /> + + <rect x="140" y="140" width="100" height="100" fill="red" clip-path="url(#clip8)" /> + + <rect x="20" y="260" width="100" height="100" fill="red" clip-path="url(#clip10)" /> + + <rect x="140" y="260" width="100" height="100" fill="red" clip-path="url(#clip12)" /> + + <!-- clip paths with different clipPathUnits --> + <rect x="20" y="400" height="300" width="300" fill="red" clip-path="url(#clip13)" /> + <rect x="20" y="400" width="100" height="100" fill="lime" /> + + <!-- text clipping --> + <rect x="140" y="400" height="300" width="300" fill="red" clip-path="url(#clip15)" /> +</svg> diff --git a/layout/reftests/svg/clipPath-and-mask-on-outflowElement-01a.html b/layout/reftests/svg/clipPath-and-mask-on-outflowElement-01a.html new file mode 100644 index 0000000000..a2cf78f305 --- /dev/null +++ b/layout/reftests/svg/clipPath-and-mask-on-outflowElement-01a.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<style type="text/css"> + #outer { + width: 100px; + height: 100px; + overflow: hidden; + } + + #clipped { + mask: url(#myMask); + clip-path: url(#myClip); + width: 300px; + height: 300px; + } + + #absolutePosition { + position: absolute; + top: 0; + left: 0; + width: 400px; + height: 400px; + background-color: blue; + } +</style> + +<body style="margin: 0px;"> + <div id="outer"> + <div id="clipped"> + <div id="absolutePosition"> + <!-- This should only be clipped by the mask, not by the 100x100 + overflow:hidden clip. --> + </div> + </div> + </div> + <svg height="0"> + <defs> + <mask id="myMask" x="0" y="0" width="400" height="400" maskUnits="userSpaceOnUse"> + <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/> + <rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/> + <rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/> + </mask> + <clipPath id="myClip"> + <rect x="0" y="0" width="100" height="100"/> + <rect x="100" y="100" width="100" height="100"/> + <rect x="200" y="200" width="100" height="100"/> + </clipPath> + </defs> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/clipPath-and-mask-on-outflowElement-01b.html b/layout/reftests/svg/clipPath-and-mask-on-outflowElement-01b.html new file mode 100644 index 0000000000..c3a71e7f7c --- /dev/null +++ b/layout/reftests/svg/clipPath-and-mask-on-outflowElement-01b.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<style type="text/css"> + #outer { + width: 100px; + height: 100px; + overflow: hidden; + } + + #clipped { + mask: url(#myMask); + clip-path: url(#myClip); + } + + #absolutePosition { + position: absolute; + top: 0; + left: 0; + width: 400px; + height: 400px; + background-color: blue; + } +</style> + +<body style="margin: 0px;"> + <div id="outer"> + <div id="clipped"> + <div id="absolutePosition"> + <!-- This should only be clipped by the mask, not by the 100x100 + overflow:hidden clip. --> + </div> + </div> + </div> + <svg height="0"> + <defs> + <mask id="myMask" x="0" y="0" width="400" height="400" maskUnits="userSpaceOnUse"> + <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/> + <rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/> + <rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/> + </mask> + <clipPath id="myClip"> + <rect x="0" y="0" width="100" height="100"/> + <rect x="100" y="100" width="100" height="100"/> + <rect x="200" y="200" width="100" height="100"/> + <!-- The forth rect should be clipped out --> + <rect x="300" y="300" width="100" height="100"/> + </clipPath> + </defs> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/clipPath-and-shape-rendering-01-ref.svg b/layout/reftests/svg/clipPath-and-shape-rendering-01-ref.svg new file mode 100644 index 0000000000..93e57bb385 --- /dev/null +++ b/layout/reftests/svg/clipPath-and-shape-rendering-01-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=489718 --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test that shape-rendering hint affects clipping</title> + <desc> + By not setting explict shape-rendering attribute, this test tells browsers to + apply anti-aliasing to all shape's rendering. And this test checks the hint + correctly affects clip-path, too. + </desc> + <defs> + <g id="circles"> + <circle cx="50" cy="50" r="50" fill="lime"/> + <circle cx="150" cy="50" r="50" fill="lime"/> + </g> + </defs> + + <use xlink:href="#circles"/> +</svg> + diff --git a/layout/reftests/svg/clipPath-and-shape-rendering-01.svg b/layout/reftests/svg/clipPath-and-shape-rendering-01.svg new file mode 100644 index 0000000000..61ef52cce3 --- /dev/null +++ b/layout/reftests/svg/clipPath-and-shape-rendering-01.svg @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=489718 --> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test that shape-rendering hint affects clipping</title> + <desc> + By not setting explict shape-rendering attribute, this test tells browsers to + apply anti-aliasing to all shape's rendering. And this test checks the hint + correctly affects clip-path, too. + </desc> + <defs> + <circle id="circle1" cx="50" cy="50" r="50" fill="lime"/> + <circle id="circle2" cx="150" cy="50" r="50" fill="lime"/> + <clipPath id="clip"> + <use xlink:href="#circle1"/> + <use xlink:href="#circle2"/> + </clipPath> + </defs> + + <rect width="200" height="100" fill="lime" clip-path="url(#clip)"/> +</svg> + diff --git a/layout/reftests/svg/clipPath-and-transform-01.svg b/layout/reftests/svg/clipPath-and-transform-01.svg new file mode 100644 index 0000000000..6d128a01f5 --- /dev/null +++ b/layout/reftests/svg/clipPath-and-transform-01.svg @@ -0,0 +1,23 @@ +<!-- + 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"> + + <title>Testcase for clip-path on elements that are transformed</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=806432 --> + + <clipPath id="cp" clipPathUnits="userSpaceOnUse"> + <!-- Two duplicate rects are used to make us take the non-trivial-clipPath + code path when painting this SVG file. + --> + <rect x="0" y="0" width="100" height="100"/> + <rect x="0" y="0" width="100" height="100"/> + </clipPath> + + <rect width="100%" height="100%" fill="lime"/> + <rect x="10" y="10" width="100" height="100" fill="red"/> + <rect width="100" height="100" transform="translate(10,10)" fill="lime" clip-path="url(#cp)"/> + +</svg> diff --git a/layout/reftests/svg/clipPath-and-transform-02.svg b/layout/reftests/svg/clipPath-and-transform-02.svg new file mode 100644 index 0000000000..c69a013b25 --- /dev/null +++ b/layout/reftests/svg/clipPath-and-transform-02.svg @@ -0,0 +1,13 @@ +<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> + <defs> + <clipPath clipPathUnits="objectBoundingBox" id="clipPathMask" transform="scale(0.01 0.005)"> + <rect width="100" height="100"/> + <rect id="r" width="100" height="100" display="none"/> + </clipPath> + </defs> + <rect fill="lime" height="100%" width="100%"/> + + <rect fill="red" x="102" y="102" height="96" width="96"/> + <rect transform="translate(100, 100)" clip-path="url(#clipPathMask)" fill="lime" y="-100" height="200" width="100"/> +</svg> + diff --git a/layout/reftests/svg/clipPath-basic-01.svg b/layout/reftests/svg/clipPath-basic-01.svg new file mode 100644 index 0000000000..5821d1520f --- /dev/null +++ b/layout/reftests/svg/clipPath-basic-01.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <title>Testcase for basic clipPath</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=377892 --> + + <defs> + <clipPath id="clip"> + <rect width="0%" height="0%"/> + </clipPath> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + + <rect width="100%" height="100%" fill="red" clip-path="url(#clip)"/> + +</svg> diff --git a/layout/reftests/svg/clipPath-basic-02.svg b/layout/reftests/svg/clipPath-basic-02.svg new file mode 100644 index 0000000000..401251b410 --- /dev/null +++ b/layout/reftests/svg/clipPath-basic-02.svg @@ -0,0 +1,24 @@ +<!-- + 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"> + + <title>Testcase for invalid clipPath</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=547062 --> + + <defs> + <clipPath id="clip"> + <!-- containers are not allowed in clipPath --> + <g> + <rect width="100%" height="100%" fill="red"/> + </g> + </clipPath> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + + <rect width="100%" height="100%" fill="red" clip-path="url(#clip)"/> + +</svg> diff --git a/layout/reftests/svg/clipPath-basic-03.svg b/layout/reftests/svg/clipPath-basic-03.svg new file mode 100644 index 0000000000..ab5c9a265e --- /dev/null +++ b/layout/reftests/svg/clipPath-basic-03.svg @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> + + <title>Testcase for invalid clipPath</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=547062 --> + + <defs> + <rect id="r1" width="100%" height="100%" fill="red"/> + <use id="use2" xlink:href="#r1"/> + <clipPath id="clip"> + <!-- use must point directly to text, path or a basic shape --> + <use xlink:href="#use2" fill="red" /> + </clipPath> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + + <rect width="100%" height="100%" fill="red" clip-path="url(#clip)"/> + +</svg> diff --git a/layout/reftests/svg/clipPath-basic-04.svg b/layout/reftests/svg/clipPath-basic-04.svg new file mode 100644 index 0000000000..5353a1081e --- /dev/null +++ b/layout/reftests/svg/clipPath-basic-04.svg @@ -0,0 +1,22 @@ +<!-- + 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"> + + <title>Testcase for clipPath with animateTransform</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=553053 --> + + <defs> + <clipPath id="clip"> + <rect width="100%" height="100%" fill="lime"/> + <animateTransform attributeName="transform" type="scale" values="1"/> + </clipPath> + </defs> + + <rect width="100%" height="100%" fill="red"/> + + <rect width="100%" height="100%" fill="lime" clip-path="url(#clip)"/> + +</svg> diff --git a/layout/reftests/svg/clipPath-basic-05.svg b/layout/reftests/svg/clipPath-basic-05.svg new file mode 100644 index 0000000000..eb80296440 --- /dev/null +++ b/layout/reftests/svg/clipPath-basic-05.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + + <title>Testcase for clip-path that can't be resolved</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=620144 --> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="lime" clip-path="url(#null)"/> +</svg> diff --git a/layout/reftests/svg/clipPath-basic-06.svg b/layout/reftests/svg/clipPath-basic-06.svg new file mode 100644 index 0000000000..46e268e7da --- /dev/null +++ b/layout/reftests/svg/clipPath-basic-06.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <title>Testcase for non-rectilinear clipPath</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=797231 --> + + <clipPath id="cp"> + <ellipse cx="60" cy="60" rx="60" ry="60"/> + </clipPath> + + <rect width="100%" height="100%" fill="lime"/> + <circle cx="60" cy="60" r="58" fill="red"/> + <rect width="200" height="200" fill="lime" clip-path="url(#cp)"/> + +</svg> + diff --git a/layout/reftests/svg/clipPath-basic-07.svg b/layout/reftests/svg/clipPath-basic-07.svg new file mode 100644 index 0000000000..a4d3e4177c --- /dev/null +++ b/layout/reftests/svg/clipPath-basic-07.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <clipPath id="clip"> + <metadata/> + <rect width="100%" height="100%"/> + </clipPath> + </defs> + <rect fill="red" width="100%" height="100%" /> + <rect fill="lime" clip-path="url(#clip)" width="100%" height="100%" /> +</svg> diff --git a/layout/reftests/svg/clipPath-basic-08.svg b/layout/reftests/svg/clipPath-basic-08.svg new file mode 100644 index 0000000000..6b455d68eb --- /dev/null +++ b/layout/reftests/svg/clipPath-basic-08.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <title>Testcase for basic clipPath</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1501057 --> + + <defs> + <clipPath id="clip1"> + <rect width="100%" height="100%" visibility="hidden"/> + </clipPath> + <clipPath id="clip2"> + <rect width="100%" height="100%" visibility="hidden"/> + <rect width="100%" height="100%" visibility="hidden"/> + </clipPath> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + + <rect width="100%" height="50%" fill="red" clip-path="url(#clip1)"/> + <rect width="100%" y="50%" height="50%" fill="red" clip-path="url(#clip2)"/> + +</svg> diff --git a/layout/reftests/svg/clipPath-basic-shape-transform-ref.html b/layout/reftests/svg/clipPath-basic-shape-transform-ref.html new file mode 100644 index 0000000000..23ab7faba0 --- /dev/null +++ b/layout/reftests/svg/clipPath-basic-shape-transform-ref.html @@ -0,0 +1,6 @@ +<svg style="width: 400px; height: 400px"> + <mask id="m1"> + <rect x="100" y="90" width="200" height="200" fill="blue" style="clip-path: inset(50px 50px)"></rect> + </mask> + <rect width="400" height="400" mask="url(#m1)"></rect> +</svg> diff --git a/layout/reftests/svg/clipPath-basic-shape-transform.html b/layout/reftests/svg/clipPath-basic-shape-transform.html new file mode 100644 index 0000000000..1ee187fef1 --- /dev/null +++ b/layout/reftests/svg/clipPath-basic-shape-transform.html @@ -0,0 +1,8 @@ +<svg style="width: 400px; height: 400px"> + <mask id="m1"> + <g transform="translate(100,90)"> + <rect width="200" height="200" fill="blue" style="clip-path: inset(50px 50px)"></rect> + </g> + </mask> + <rect width="400" height="400" mask="url(#m1)"></rect> +</svg> diff --git a/layout/reftests/svg/clipPath-css-transform-ref.html b/layout/reftests/svg/clipPath-css-transform-ref.html new file mode 100644 index 0000000000..d4038e92ca --- /dev/null +++ b/layout/reftests/svg/clipPath-css-transform-ref.html @@ -0,0 +1,18 @@ +<svg style="width: 400px; height: 400px; border: 1px solid red"> + <defs> + <clipPath id="clipPath1"> + <rect id="rec1" x="15px" y="15px" width="40px" height="40px" /> + <rect id="rec2" width="20px" height="10px" /> + </clipPath> + <clipPath id="clipPath2"> + <rect id="rec3" x="100px" y="100px" width="40px" height="40px" /> + </clipPath> + <clipPath id="clipPath3" transform="translate(100,100)"> + <rect id="rec4" x="200px" y="200px" width="40px" height="40px" /> + </clipPath> + </defs> + + <circle cx="25px" cy="25px" r="20px" fill="skyblue" clip-path="url(#clipPath1)" /> + <circle cx="125px" cy="125px" r="20px" fill="skyblue" clip-path="url(#clipPath2)" /> + <circle cx="225px" cy="225px" r="20px" fill="skyblue" clip-path="url(#clipPath3)" /> +</svg> diff --git a/layout/reftests/svg/clipPath-css-transform.html b/layout/reftests/svg/clipPath-css-transform.html new file mode 100644 index 0000000000..19c5cd1711 --- /dev/null +++ b/layout/reftests/svg/clipPath-css-transform.html @@ -0,0 +1,29 @@ +<style> +#rec1 { + transform: translate(15px,15px) scale(2,4); +} +#rec3 { + transform: translate(100px,100px) scale(2,4); +} +#clipPath3 { + transform: translate(100px,100px); +} +</style> +<svg style="width: 400px; height: 400px; border: 1px solid red"> + <defs> + <clipPath id="clipPath1"> + <rect id="rec1" width="20px" height="10px" /> + <rect id="rec2" width="20px" height="10px" /> + </clipPath> + <clipPath id="clipPath2"> + <rect id="rec3" width="20px" height="10px" /> + </clipPath> + <clipPath id="clipPath3"> + <rect id="rec4" x="200px" y="200px" width="40px" height="40px" /> + </clipPath> + </defs> + + <circle cx="25px" cy="25px" r="20px" fill="skyblue" clip-path="url(#clipPath1)" /> + <circle cx="125px" cy="125px" r="20px" fill="skyblue" clip-path="url(#clipPath2)" /> + <circle cx="225px" cy="225px" r="20px" fill="skyblue" clip-path="url(#clipPath3)" /> +</svg> diff --git a/layout/reftests/svg/clipPath-fill-box-ref.html b/layout/reftests/svg/clipPath-fill-box-ref.html new file mode 100644 index 0000000000..0e6e5ee23f --- /dev/null +++ b/layout/reftests/svg/clipPath-fill-box-ref.html @@ -0,0 +1,3 @@ +<svg style="width: 400px; height: 400px"> + <rect width="200" height="200" fill="purple"></rect> +</svg> diff --git a/layout/reftests/svg/clipPath-fill-box.html b/layout/reftests/svg/clipPath-fill-box.html new file mode 100644 index 0000000000..1e4fdfa4a4 --- /dev/null +++ b/layout/reftests/svg/clipPath-fill-box.html @@ -0,0 +1,3 @@ +<svg style="width: 400px; height: 400px"> + <rect width="200" height="200" fill="purple" style="clip-path: fill-box"></rect> +</svg> diff --git a/layout/reftests/svg/clipPath-on-outflowElement-01-ref.html b/layout/reftests/svg/clipPath-on-outflowElement-01-ref.html new file mode 100644 index 0000000000..8a94dc64c3 --- /dev/null +++ b/layout/reftests/svg/clipPath-on-outflowElement-01-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> +<body style="margin: 0px;"> + <svg x="0" y="0" height="300" width="300"> + <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: blue"/> + <rect x="100" y="100" width="100" height="100" style="stroke:none; fill: blue"/> + <rect x="200" y="200" width="100" height="100" style="stroke:none; fill: blue"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/clipPath-on-outflowElement-01a.html b/layout/reftests/svg/clipPath-on-outflowElement-01a.html new file mode 100644 index 0000000000..bd69f85045 --- /dev/null +++ b/layout/reftests/svg/clipPath-on-outflowElement-01a.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<style type="text/css"> + #outer { + width: 100px; + height: 100px; + overflow: hidden; + } + + #clipped { + clip-path: url(#myClip); + width: 200px; + height: 200px; + } + + #absolutePosition { + position: absolute; + top: 0; + left: 0; + width: 400px; + height: 400px; + background-color: blue; + } +</style> + +<body style="margin: 0px;"> + <div id="outer"> + <div id="clipped"> + <div id="absolutePosition"> + <!-- This should only be clipped by the clip-path, not by the 100x100 + overflow:hidden clip. --> + </div> + </div> + </div> + <svg height="0"> + <defs> + <clipPath id="myClip"> + <rect x="0" y="0" width="100" height="100"/> + <rect x="100" y="100" width="100" height="100"/> + <rect x="200" y="200" width="100" height="100"/> + </clipPath> + </defs> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/clipPath-on-outflowElement-01b.html b/layout/reftests/svg/clipPath-on-outflowElement-01b.html new file mode 100644 index 0000000000..16a78d61ba --- /dev/null +++ b/layout/reftests/svg/clipPath-on-outflowElement-01b.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<style type="text/css"> + #outer { + width: 100px; + height: 100px; + overflow: hidden; + } + + #clipped { + clip-path: url(#myClip); + } + + #absolutePosition { + position: absolute; + top: 0; + left: 0; + width: 400px; + height: 400px; + background-color: blue; + } +</style> + +<body style="margin: 0px;"> + <div id="outer"> + <div id="clipped"> + <div id="absolutePosition"> + <!-- This should only be clipped by the clip-path, not by the 100x100 + overflow:hidden clip. --> + </div> + </div> + </div> + <svg height="0"> + <defs> + <clipPath id="myClip"> + <rect x="0" y="0" width="100" height="100"/> + <rect x="100" y="100" width="100" height="100"/> + <rect x="200" y="200" width="100" height="100"/> + </clipPath> + </defs> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/clipPath-on-outflowElement-02-ref.html b/layout/reftests/svg/clipPath-on-outflowElement-02-ref.html new file mode 100644 index 0000000000..6029426ee7 --- /dev/null +++ b/layout/reftests/svg/clipPath-on-outflowElement-02-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> +<body style="margin: 0px;"> + <svg width="200" height="200"> + <rect x="10" y="10" width="180" height="180" fill="blue" opacity="0.5"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/clipPath-on-outflowElement-02a.html b/layout/reftests/svg/clipPath-on-outflowElement-02a.html new file mode 100644 index 0000000000..9004e34204 --- /dev/null +++ b/layout/reftests/svg/clipPath-on-outflowElement-02a.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html> +<style type="text/css"> + #outer { + width: 100px; + height: 100px; + overflow: hidden; + } + + #clipped { + clip-path: inset(10px 10px 10px 10px); + opacity: 0.5; + width: 200px; + height: 200px; + } + + #absolutePosition { + position: absolute; + top: 0; + left: 0; + width: 400px; + height: 400px; + background-color: blue; + } +</style> + +<body style="margin: 0px;"> + <div id="outer"> + <div id="clipped"> + <div id="absolutePosition"> + <!-- This should only be clipped by the clip-path, not by the 100x100 + overflow:hidden clip. --> + </div> + </div> + </div> + <svg height="0"> + <defs> + <clipPath id="myClip"> + <rect x="0" y="0" width="100" height="100"/> + <rect x="100" y="100" width="100" height="100"/> + <rect x="200" y="200" width="100" height="100"/> + </clipPath> + </defs> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/clipPath-on-outflowElement-02b.html b/layout/reftests/svg/clipPath-on-outflowElement-02b.html new file mode 100644 index 0000000000..ecf303a89a --- /dev/null +++ b/layout/reftests/svg/clipPath-on-outflowElement-02b.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<style type="text/css"> + #outer { + width: 100px; + height: 100px; + overflow: hidden; + } + + #clipped { + clip-path: inset(10px 10px 10px 10px); + width: 200px; + height: 200px; + } + + #absolutePosition { + position:absolute; + top: 0; + left: 0; + width: 400px; + height: 400px; + background-color: rgba(0,0,255,0.5); + } +</style> + +<body style="margin: 0px;"> + <div id="outer"> + <div id="clipped"> + <div id="absolutePosition"> + <!-- This should only be clipped by the clip-path, not by the 100x100 + overflow:hidden clip. --> + </div> + </div> + </div> + <svg height="0"> + <defs> + <clipPath id="myClip"> + <rect x="0" y="0" width="100" height="100"/> + <rect x="100" y="100" width="100" height="100"/> + <rect x="200" y="200" width="100" height="100"/> + </clipPath> + </defs> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/clipPath-on-thin-object.svg b/layout/reftests/svg/clipPath-on-thin-object.svg new file mode 100644 index 0000000000..93598f0abb --- /dev/null +++ b/layout/reftests/svg/clipPath-on-thin-object.svg @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + <defs> + <clipPath clipPathUnits="objectBoundingBox" id="myPath"> + <rect x="0" y="0" height="1" width="1"/> + </clipPath> + </defs> + + <!-- You should see a thin horizontal light lime line. --> + <path d="M0 99.6 L500 99.6 L500 100.3 L0 100.3 Z" fill="lime" clip-path="url(#myPath)"/> + <!-- You should see a vertical light lime line. --> + <path d="M199.9 0 L199.9 500 L200.4 500 L200.4 0 Z" fill="lime" clip-path="url(#myPath)"/> +</svg> diff --git a/layout/reftests/svg/clipPath-polygon-01.svg b/layout/reftests/svg/clipPath-polygon-01.svg new file mode 100644 index 0000000000..ef97ea7d09 --- /dev/null +++ b/layout/reftests/svg/clipPath-polygon-01.svg @@ -0,0 +1,51 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for CSS polygon clipPath</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1246741 --> + + <rect width="100%" height="100%" fill="lime"/> + + <!-- test the clip is not too big (or ignored altogether) --> + <rect width="100%" height="100%" fill="red" + clip-path="polygon(100px 100px, 200px 100px, 200px 200px, 100px 200px)"/> + <rect x="98" y="98" width="105" height="105" fill="lime"/> + + <!-- test the clip does not simply make the element not render --> + <rect x="300" y="100" width="100" height="100" fill="red"/> + <rect x="280" y="80" width="150" height="150" fill="lime" + clip-path="polygon(20px 20px, 120px 20px, 120px 120px, 20px 120px)"/> + + <!-- percentage values --> + <svg x="100" y="300" width="100" height="100"> + <rect width="100%" height="100%" fill="red" + clip-path="polygon(0 0, 50% 0, 50% 50%, 0 50%)"/> + <rect width="55" height="55" fill="lime"/> + </svg> + + <!-- mixed absolute and percentage values --> + <svg x="300" y="300" width="100" height="100"> + <rect width="100%" height="100%" fill="red" + clip-path="polygon(0 0, 50% 0, 50px 50%, 0 50px)"/> + <rect width="55" height="55" fill="lime"/> + </svg> + + <!-- mixed other units --> + <svg x="500" y="300" width="100" height="100"> + <rect width="100%" height="100%" fill="red" + clip-path="polygon(0 0, 5em 0, 5em 10%, 0 10px)"/> + <rect width="5em" height="10%" fill="lime"/> + </svg> + + <!-- check fill-rule and clip-rule are ignored for polygon clip-path --> + <svg x="500" y="100" width="100" height="100" fill-rule="evenodd" clip-rule="evenodd"> + <rect width="100%" height="100%" fill="red" + clip-path="polygon(0 0, 50px 0, 50px 50px, 0 50px, 0 0, 50px 0, 50px 50px, 0 50px, 0 0)"/> + <rect width="55" height="55" fill="lime"/> + </svg> + +</svg> diff --git a/layout/reftests/svg/clipPath-polygon-elementFromPoint-01.svg b/layout/reftests/svg/clipPath-polygon-elementFromPoint-01.svg new file mode 100644 index 0000000000..fb2ebf37ce --- /dev/null +++ b/layout/reftests/svg/clipPath-polygon-elementFromPoint-01.svg @@ -0,0 +1,43 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg onload="testElementFromPoint();" xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for CSS polygon clipPath</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1246741 --> + + <rect id="out" width="100%" height="100%"/> + + <!-- test elementFromPoint can get the element using clip-path --> + <rect id="in" x="100" y="100" width="100" height="100" + clip-path="polygon(0 0, 50px 0, 50px 50px, 0 50px)"/> + <script> + function testElementFromPoint() { + let inCount = 0, outCount = 0, inElem, outElem; + document.getElementById("in").style.fill = "red"; + document.getElementById("out").style.fill = "blue"; + + inElem = document.elementFromPoint(100, 100); + if (inElem.style.fill == "red") { ++inCount; } + inElem = document.elementFromPoint(149, 100); + if (inElem.style.fill == "red") { ++inCount; } + inElem = document.elementFromPoint(149, 149); + if (inElem.style.fill == "red") { ++inCount; } + inElem = document.elementFromPoint(100, 149); + if (inElem.style.fill == "red") { ++inCount; } + if (inCount == 4) { document.getElementById("in").style.fill = "lime"; } + + outElem = document.elementFromPoint(99, 100); + if (outElem.style.fill == "blue") { ++outCount; } + outElem = document.elementFromPoint(150, 99); + if (outElem.style.fill == "blue") { ++outCount; } + outElem = document.elementFromPoint(151, 150); + if (outElem.style.fill == "blue") { ++outCount; } + outElem = document.elementFromPoint(100, 151); + if (outElem.style.fill == "blue") { ++outCount; } + if (outCount == 4) { document.getElementById("out").style.fill = "lime"; } + } + </script> +</svg> diff --git a/layout/reftests/svg/clipPath-winding-01.svg b/layout/reftests/svg/clipPath-winding-01.svg new file mode 100644 index 0000000000..6b7b3d29df --- /dev/null +++ b/layout/reftests/svg/clipPath-winding-01.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <title>Testcase for clipPath with evenodd winding</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=525363 --> + + <defs> + <clipPath id="clip"> + <path clip-rule="evenodd" d="M100,100 l 50,0 0,50 -50,0 0,-50 50,0 0,50 -50,0 0,-50z"/> + </clipPath> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + + <rect width="100%" height="100%" fill="red" clip-path="url(#clip)"/> + +</svg> diff --git a/layout/reftests/svg/comments-in-pres-attrs.svg b/layout/reftests/svg/comments-in-pres-attrs.svg new file mode 100644 index 0000000000..fbb88a2bdd --- /dev/null +++ b/layout/reftests/svg/comments-in-pres-attrs.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"> + <title>Test for whether comments are allowed in SVG presentation attributes</title> + <rect width="100%" height="100%" fill="/* comment */lime/* also comment */"/> +</svg> diff --git a/layout/reftests/svg/conditions-01.svg b/layout/reftests/svg/conditions-01.svg new file mode 100644 index 0000000000..87bed97fe2 --- /dev/null +++ b/layout/reftests/svg/conditions-01.svg @@ -0,0 +1,18 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> + <title>Testcase for conditions</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=409383 --> + + <rect width="100%" height="100%" fill="lime"/> + + <rect systemLanguage="foo" x="50" y="100" width="50" height="50" fill="red"/> + + <rect x="200" y="100" width="50" height="50" fill="red"/> + <rect requiredFeatures="http://www.w3.org/TR/SVG11/feature#Gradient" x="200" y="100" width="50" height="50" fill="lime"/> + + <rect requiredExtensions="foo" x="200" y="200" width="50" height="50" fill="red"/> +</svg> diff --git a/layout/reftests/svg/conditions-02.svg b/layout/reftests/svg/conditions-02.svg new file mode 100644 index 0000000000..f5ba400829 --- /dev/null +++ b/layout/reftests/svg/conditions-02.svg @@ -0,0 +1,17 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that paint servers inside a failing conditional attribute subtree work</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=614265 --> + + <g requiredExtensions="http://example.org/hypothetical"> + <linearGradient id="g"> + <stop stop-color="lime" offset="0"/> + <stop stop-color="lime" offset="1"/> + </linearGradient> + </g> + <rect width="100%" height="100%" fill="url(#g) red"/> +</svg> diff --git a/layout/reftests/svg/conditions-03.svg b/layout/reftests/svg/conditions-03.svg new file mode 100644 index 0000000000..9abb90cf5a --- /dev/null +++ b/layout/reftests/svg/conditions-03.svg @@ -0,0 +1,16 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test that 'use'ing elements inside a failing conditional attribute subtree works</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=614265 --> + + <g requiredExtensions="http://example.org/hypothetical"> + <rect id="r" width="100%" height="100%" fill="lime"/> + </g> + <rect width="100%" height="100%" fill="red"/> + <use xlink:href="#r"/> +</svg> diff --git a/layout/reftests/svg/conditions-04.svg b/layout/reftests/svg/conditions-04.svg new file mode 100644 index 0000000000..31d963b45f --- /dev/null +++ b/layout/reftests/svg/conditions-04.svg @@ -0,0 +1,15 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test that 'use'ing an element with a failing conditional fails</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=614265 --> + + <rect id="r1" width="100%" height="100%" fill="lime"/> + <rect systemLanguage="x" id="r2" width="100%" height="100%" fill="red"/> + <use xlink:href="#r1"/> + <use xlink:href="#r2"/> +</svg> diff --git a/layout/reftests/svg/conditions-05.svg b/layout/reftests/svg/conditions-05.svg new file mode 100644 index 0000000000..3a235a85e7 --- /dev/null +++ b/layout/reftests/svg/conditions-05.svg @@ -0,0 +1,11 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" systemLanguage="x"> + <title>Test that conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <rect width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/conditions-07.svg b/layout/reftests/svg/conditions-07.svg new file mode 100644 index 0000000000..15b5ff0dbd --- /dev/null +++ b/layout/reftests/svg/conditions-07.svg @@ -0,0 +1,40 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" width="100%" height="100%" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" onload="runtest()"> + <title>Test conditional processing DOM interface for foreignObject</title> + <defs> + <script> + function runtest() { + try { + var f1 = document.getElementById("f1"); + var i0 = f1.systemLanguage.getItem(0); + + if(i0 != "x") { + return; + } + f1.removeAttribute("systemLanguage"); + + } catch(e) { + var f = document.getElementById("fail"); + f.setAttribute("fill", "red"); + } + } + </script> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + <!-- background images --> + <rect x="100" y="100" width="100" height="100" fill="red"/> + + <!-- tests --> + <foreignObject id="f1" x="100" y="100" width="100" height="100" systemLanguage="x"> + <svg> + <rect width="100%" height="100%" fill="lime"/> + </svg> + </foreignObject> + <rect id="fail" width="100%" height="100%" fill="none"/> +</svg> diff --git a/layout/reftests/svg/conditions-08-ref.svg b/layout/reftests/svg/conditions-08-ref.svg new file mode 100644 index 0000000000..50406bddb9 --- /dev/null +++ b/layout/reftests/svg/conditions-08-ref.svg @@ -0,0 +1,41 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <clipPath id="c1"> + <circle cx="50" cy="50" r="50"/> + </clipPath> + <mask id="m1"> + <circle cx="50" cy="50" r="50" fill="#888"/> + </mask> + <filter id="f1"> + <feColorMatrix type="hueRotate" values="60"/> + </filter> + <linearGradient id="l1"> + <stop stop-color="red"/> + <stop offset="1" stop-color="yellow"/> + </linearGradient> + <pattern id="p1" viewBox="0 0 10 10" width="25%" height="25%"> + <circle cx="5" cy="5" r="5" fill="red"/> + </pattern> + </defs> + <g fill="blue"> + <g transform="translate(200,50)"> + <rect width="100" height="100" clip-path="url(#c1)"/> + </g> + <g transform="translate(200,160)"> + <rect width="100" height="100" mask="url(#m1)"/> + </g> + <g transform="translate(200,270)"> + <rect width="100" height="100" filter="url(#f1)"/> + </g> + <g transform="translate(200,380)"> + <rect width="100" height="100" fill="url(#l1)"/> + </g> + <g transform="translate(200,490)"> + <rect width="100" height="100" fill="url(#p1)"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/conditions-08.svg b/layout/reftests/svg/conditions-08.svg new file mode 100644 index 0000000000..573533d00f --- /dev/null +++ b/layout/reftests/svg/conditions-08.svg @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that clipPath, mask, filter, gradients and patterns ignore failing conditionals</title> + <defs> + <clipPath id="c1" systemLanguage="xx"> + <circle cx="50" cy="50" r="50"/> + </clipPath> + <mask id="m1" systemLanguage="xx"> + <circle cx="50" cy="50" r="50" fill="#888"/> + </mask> + <filter id="f1" systemLanguage="xx"> + <feColorMatrix type="hueRotate" values="60"/> + </filter> + <linearGradient id="l1" systemLanguage="xx"> + <stop stop-color="red"/> + <stop offset="1" stop-color="yellow"/> + </linearGradient> + <pattern id="p1" viewBox="0 0 10 10" width="25%" height="25%" systemLanguage="xx"> + <circle cx="5" cy="5" r="5" fill="red"/> + </pattern> + </defs> + <g fill="blue"> + <g transform="translate(200,50)"> + <rect width="100" height="100" clip-path="url(#c1)"/> + </g> + <g transform="translate(200,160)"> + <rect width="100" height="100" mask="url(#m1)"/> + </g> + <g transform="translate(200,270)"> + <rect width="100" height="100" filter="url(#f1)"/> + </g> + <g transform="translate(200,380)"> + <rect width="100" height="100" fill="url(#l1)"/> + </g> + <g transform="translate(200,490)"> + <rect width="100" height="100" fill="url(#p1)"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/conditions-09-ref.svg b/layout/reftests/svg/conditions-09-ref.svg new file mode 100644 index 0000000000..a6995f19c2 --- /dev/null +++ b/layout/reftests/svg/conditions-09-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="400" height="100"> + <text x="10" y="20"> + <tspan fill="green">This text should display.</tspan> + </text> +</svg> diff --git a/layout/reftests/svg/conditions-09.svg b/layout/reftests/svg/conditions-09.svg new file mode 100644 index 0000000000..a5959b808b --- /dev/null +++ b/layout/reftests/svg/conditions-09.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="400" height="100"> + <text x="10" y="20"> + <tspan systemLanguage="xx" fill="red">This text shouldn't display.</tspan> + <tspan fill="green">This text should display.</tspan> + </text> +</svg> diff --git a/layout/reftests/svg/css-transform-svg-ref.html b/layout/reftests/svg/css-transform-svg-ref.html new file mode 100644 index 0000000000..6167442e74 --- /dev/null +++ b/layout/reftests/svg/css-transform-svg-ref.html @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<style> +</style> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> + <rect id="a" x="0.49" y="0.51" width="2.5" height="2.5"/> + <rect id="b" x="3.5" y="3.5" width="2.5" height="2.5"/> +</svg> diff --git a/layout/reftests/svg/css-transform-svg.html b/layout/reftests/svg/css-transform-svg.html new file mode 100644 index 0000000000..c1c63a8397 --- /dev/null +++ b/layout/reftests/svg/css-transform-svg.html @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<style> +#a { + transform: scaleY(1); +} +</style> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> + <rect id="a" x="0.49" y="0.51" width="2.5" height="2.5"/> + <rect id="b" x="3.5" y="3.5" width="2.5" height="2.5"/> +</svg> diff --git a/layout/reftests/svg/current-translate-01.svg b/layout/reftests/svg/current-translate-01.svg new file mode 100644 index 0000000000..27e7752624 --- /dev/null +++ b/layout/reftests/svg/current-translate-01.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <script> + SVGPoint.prototype.setXY = function(c,d){this.x=c;this.y=d} + document.documentElement.currentTranslate.setXY(200, 200); + </script> + <rect width="100%" height="100%" fill="red"/> + <rect x="-200" y="-200" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/current-translate-02.svg b/layout/reftests/svg/current-translate-02.svg new file mode 100644 index 0000000000..8e272138e0 --- /dev/null +++ b/layout/reftests/svg/current-translate-02.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <script> + onload = function() { + document.documentElement.currentTranslate.x = 200; + document.documentElement.currentTranslate.y = 200; + }; + </script> + <rect width="100%" height="100%" fill="red"/> + <rect x="-200" y="-200" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/currentColor-01.svg b/layout/reftests/svg/currentColor-01.svg new file mode 100644 index 0000000000..503f79ebfa --- /dev/null +++ b/layout/reftests/svg/currentColor-01.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + + <title>Testcase for currentColor</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=414550 --> + + <g style="color:lime"> + <rect x="0%" y="0%" width="100%" height="100%" fill="currentColor"/> + </g> +</svg> diff --git a/layout/reftests/svg/currentColor-02.svg b/layout/reftests/svg/currentColor-02.svg new file mode 100644 index 0000000000..23d387343b --- /dev/null +++ b/layout/reftests/svg/currentColor-02.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + + <title>Testcase for currentColor</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=414550 --> + + <g style="color:lime"> + <rect x="0%" y="0%" width="100%" height="100%" style="fill:currentColor"/> + </g> +</svg> diff --git a/layout/reftests/svg/currentColor-03.svg b/layout/reftests/svg/currentColor-03.svg new file mode 100644 index 0000000000..ea3a93aee7 --- /dev/null +++ b/layout/reftests/svg/currentColor-03.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + + <title>Testcase for currentColor</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=414550 --> + + <style type="text/css"> rect { fill: currentColor; } </style> + + <g style="color:lime"> + <rect x="0%" y="0%" width="100%" height="100%"/> + </g> +</svg> diff --git a/layout/reftests/svg/currentColor-override-flood.svg b/layout/reftests/svg/currentColor-override-flood.svg new file mode 100644 index 0000000000..2c6d9788f8 --- /dev/null +++ b/layout/reftests/svg/currentColor-override-flood.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="floodFilter" filterUnits="userSpaceOnUse" style="color:red; flood-color:currentColor"> + <feFlood x="0" y="0" width="100%" height="100%" style="color:lime;" + flood-color="inherit" flood-opacity="1" + /> + </filter> + </defs> + <use style="filter: url(#floodFilter);"/> +</svg> diff --git a/layout/reftests/svg/currentColor-override-lighting-ref.svg b/layout/reftests/svg/currentColor-override-lighting-ref.svg new file mode 100644 index 0000000000..a9fdd2d4eb --- /dev/null +++ b/layout/reftests/svg/currentColor-override-lighting-ref.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- the light source is a fePointLight element --> + <filter id="lightMe1"> + <feDiffuseLighting + in="SourceGraphic" + result="light" + lighting-color="lime"> + <fePointLight x="0" y="0" z="100" /> + </feDiffuseLighting> + + <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> + </filter> + <rect width="100%" height="100%" fill="white" filter="url(#lightMe1)" /> +</svg> diff --git a/layout/reftests/svg/currentColor-override-lighting.svg b/layout/reftests/svg/currentColor-override-lighting.svg new file mode 100644 index 0000000000..bf91e809f0 --- /dev/null +++ b/layout/reftests/svg/currentColor-override-lighting.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- the light source is a fePointLight element --> + <filter id="lightMe1" style="color: red" lighting-color="currentColor"> + <feDiffuseLighting + in="SourceGraphic" + result="light" + style="color: lime;" + lighting-color="inherit"> + <fePointLight x="0" y="0" z="100" /> + </feDiffuseLighting> + + <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> + </filter> + <rect width="100%" height="100%" fill="white" filter="url(#lightMe1)" /> +</svg> diff --git a/layout/reftests/svg/currentColor-override-stop.svg b/layout/reftests/svg/currentColor-override-stop.svg new file mode 100644 index 0000000000..964dabe2c9 --- /dev/null +++ b/layout/reftests/svg/currentColor-override-stop.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="gradient" color="red" stop-color="currentColor"> + <stop offset="0" style="color:lime;" stop-color="inherit" /> + <stop offset="1" stop-color="lime" /> + </linearGradient> + </defs> + <rect width="100%" height="100%" fill="url(#gradient)" /> +</svg> diff --git a/layout/reftests/svg/data-uri-with-filter-01-ref.svg b/layout/reftests/svg/data-uri-with-filter-01-ref.svg new file mode 100644 index 0000000000..d808930c34 --- /dev/null +++ b/layout/reftests/svg/data-uri-with-filter-01-ref.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="f1" filterUnits="objectBoundingBox" + primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood x="10%" y="10%" width="80%" height="80%" + flood-color="#00ff00" flood-opacity="0.5"/> + </filter> + </defs> + <g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00" opacity="0"/> + </g> +</svg> diff --git a/layout/reftests/svg/data-uri-with-filter-01.xhtml b/layout/reftests/svg/data-uri-with-filter-01.xhtml new file mode 100644 index 0000000000..78ba90e196 --- /dev/null +++ b/layout/reftests/svg/data-uri-with-filter-01.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <style> + body { overflow: hidden; margin: 0px } + </style> + <title>Testcase for referencing a filter within a data URI</title> +</head> +<body> + <embed src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22f1%22%20filterUnits%3D%22objectBoundingBox%22%0A%20%20%20%20%20%20%20%20%20%20%20%20primitiveUnits%3D%22objectBoundingBox%22%0A%20%20%20%20%20%20%20%20%20%20%20%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%3E%0A%20%20%20%20%20%20%3CfeFlood%20x%3D%2210%25%22%20y%3D%2210%25%22%20width%3D%2280%25%22%20height%3D%2280%25%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20flood-color%3D%22%2300ff00%22%20flood-opacity%3D%220.5%22%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20filter%3D%22url(%23f1)%22%3E%0A%20%20%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%2300ff00%22%20opacity%3D%220%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A"/> +</body> +</html> diff --git a/layout/reftests/svg/data-uri-with-gradient-01-ref.svg b/layout/reftests/svg/data-uri-with-gradient-01-ref.svg new file mode 100644 index 0000000000..3f842c69f6 --- /dev/null +++ b/layout/reftests/svg/data-uri-with-gradient-01-ref.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0"> + <stop stop-color="yellow" offset="0"/> + <stop stop-color="blue" offset="1"/> + </linearGradient> + </defs> + <rect x="10" y="10" width="200" height="80" fill="url(#grad1)"/> +</svg> diff --git a/layout/reftests/svg/data-uri-with-gradient-01.xhtml b/layout/reftests/svg/data-uri-with-gradient-01.xhtml new file mode 100644 index 0000000000..490a73c38d --- /dev/null +++ b/layout/reftests/svg/data-uri-with-gradient-01.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <style> + body { overflow: hidden; margin: 0px } + </style> + <title>Testcase for referencing a gradient within a data URI</title> +</head> +<body> + <embed src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3ClinearGradient%20id%3D%22grad1%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%220%22%3E%0A%20%20%20%20%20%20%3Cstop%20stop-color%3D%22yellow%22%20offset%3D%220%22%2F%3E%0A%20%20%20%20%20%20%3Cstop%20stop-color%3D%22blue%22%20%20%20offset%3D%221%22%2F%3E%0A%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22200%22%20height%3D%2280%22%20fill%3D%22url(%23grad1)%22%2F%3E%0A%3C%2Fsvg%3E%0A"/> +</body> +</html> diff --git a/layout/reftests/svg/data-uri-with-pattern-01.xhtml b/layout/reftests/svg/data-uri-with-pattern-01.xhtml new file mode 100644 index 0000000000..2b608a7b04 --- /dev/null +++ b/layout/reftests/svg/data-uri-with-pattern-01.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <style> + body { overflow: hidden; margin: 0px } + html, body, embed { height: 100%; width: 100% } + </style> + <title>Testcase for referencing a pattern within a data URI</title> +</head> +<body> + <embed src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%0A%20%20%20%20%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cpattern%20width%3D%221%22%20height%3D%221%22%20id%3D%22pat%22%20patternUnits%3D%22userSpaceOnUse%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%221%22%20height%3D%221%22%20fill%3D%22lime%22%2F%3E%0A%20%20%20%20%3C%2Fpattern%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20%20fill%3D%22url(%23pat)%22%20%2F%3E%0A%3C%2Fsvg%3E%0A%0A"/> +</body> +</html> diff --git a/layout/reftests/svg/dynamic-attr-change-1.svg b/layout/reftests/svg/dynamic-attr-change-1.svg new file mode 100644 index 0000000000..1e50563a7c --- /dev/null +++ b/layout/reftests/svg/dynamic-attr-change-1.svg @@ -0,0 +1,26 @@ +<!-- + 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"> + + <defs> + <style type="text/css"> + rect[transform="scale(2)"] { fill: red } + rect { fill: lime; } + </style> + </defs> + + <g fill="lime"> + <rect id="rect" transform="scale(2)" width="100%" height="100%" /> + </g> + + <script> + window.addEventListener( + "load", + function() { document.getElementById("rect").setAttributeNS(null, "transform", "scale(1)"); }, + false + ); + </script> + +</svg> diff --git a/layout/reftests/svg/dynamic-attr-change-2.svg b/layout/reftests/svg/dynamic-attr-change-2.svg new file mode 100644 index 0000000000..fe655c5548 --- /dev/null +++ b/layout/reftests/svg/dynamic-attr-change-2.svg @@ -0,0 +1,26 @@ +<!-- + 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" class="reftest-wait"> + <script> + function doTest() { + var target = document.querySelector(".target"); + target.setAttribute("transform", "translate(20,20)"); + document.documentElement.removeAttribute("class"); + } + + document.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Lime background to match pass.svg --> + <rect height="100%" width="100%" fill="lime"/> + + <!-- Red rect, which we'll have to cover up to pass the test: --> + <rect x="20" y="20" width="100" height="100" fill="red"/> + + <!-- Lime rect, which we'll try to transform to cover up the red rect: --> + <g class="target" transform=""> + <rect width="100" height="100" fill="lime"/> + </g> +</svg> diff --git a/layout/reftests/svg/dynamic-attr-removal-1.svg b/layout/reftests/svg/dynamic-attr-removal-1.svg new file mode 100644 index 0000000000..6cc20c5355 --- /dev/null +++ b/layout/reftests/svg/dynamic-attr-removal-1.svg @@ -0,0 +1,26 @@ +<!-- + 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"> + + <defs> + <style type="text/css"> + rect { fill: lime; } + rect[transform="scale(2)"] { fill: red } + </style> + </defs> + + <g fill="lime"> + <rect id="rect" transform="scale(2)" width="100%" height="100%" /> + </g> + + <script> + window.addEventListener( + "load", + function() { document.getElementById("rect").removeAttributeNS(null, "transform"); }, + false + ); + </script> + +</svg> diff --git a/layout/reftests/svg/dynamic-attr-removal-2.svg b/layout/reftests/svg/dynamic-attr-removal-2.svg new file mode 100644 index 0000000000..46f0d38f8b --- /dev/null +++ b/layout/reftests/svg/dynamic-attr-removal-2.svg @@ -0,0 +1,26 @@ +<!-- + 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"> + + <defs> + <style type="text/css"> + rect { fill: red; } + rect:not([transform="scale(2)"]) { fill: lime } + </style> + </defs> + + <g fill="lime"> + <rect id="rect" transform="scale(2)" width="100%" height="100%" /> + </g> + + <script> + window.addEventListener( + "load", + function() { document.getElementById("rect").removeAttributeNS(null, "transform"); }, + false + ); + </script> + +</svg> diff --git a/layout/reftests/svg/dynamic-class-01.svg b/layout/reftests/svg/dynamic-class-01.svg new file mode 100644 index 0000000000..9ef8fd1ca6 --- /dev/null +++ b/layout/reftests/svg/dynamic-class-01.svg @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="set_lime_class();"> + <title>Test invalidation on setting .className.baseVal</title> + <style type="text/css"> + + .lime { fill: lime; } + + </style> + <script> + +function set_lime_class() +{ + document.getElementById('rect').className.baseVal = 'lime'; + document.documentElement.removeAttribute('class'); +} + + </script> + <rect id="rect" width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/dynamic-clipPath-01.svg b/layout/reftests/svg/dynamic-clipPath-01.svg new file mode 100644 index 0000000000..1d1e86ebb8 --- /dev/null +++ b/layout/reftests/svg/dynamic-clipPath-01.svg @@ -0,0 +1,125 @@ +<!-- + 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" + class="reftest-wait" + onload="startTest()" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that dynamic changes to the element for a given ID are reflected in clip-path</title> + <defs> + <svg id="d"> + <rect width="100%" height="50%" fill="lime"/> + <rect y="50%" width="100%" height="50%" fill="red"/> + </svg> + </defs> + + <rect y="30%" width="100%" height="70%" fill="lime"/> + + <use xlink:href="#d" id="u1" x="10%" width="11%" height="100%" clip-path="url(#r1)"/> + <script> + // force frame construction; test that parsing "r1" after frame construction + // is still bound to "u1" eventually + var rect = document.getElementById("u1").getBoundingClientRect(); + </script> + <clipPath id="r1"> + <rect width="100%" height="40%"/> + </clipPath> + + <clipPath id="x"> + <rect width="100%" height="40%"/> + </clipPath> + <use xlink:href="#d" id="u2" x="20%" width="11%" height="100%" clip-path="url(#r2)"/> + + <clipPath id="r3"> + <rect width="100%" height="100%"/> + </clipPath> + <clipPath id="r3"> + <rect width="100%" height="40%"/> + </clipPath> + <use xlink:href="#d" id="u3" x="30%" width="11%" height="100%" clip-path="url(#r3)"/> + + <clipPath id="r4"> + <rect width="100%" height="100%"/> + </clipPath> + <clipPath id="r4"> + <rect width="100%" height="40%"/> + </clipPath> + <use xlink:href="#d" id="u4" x="40%" width="11%" height="100%" clip-path="url(#r4)"/> + + <clipPath id="r5"> + <rect width="100%" height="100%"/> + </clipPath> + <use xlink:href="#d" id="u5" x="50%" width="11%" height="100%" clip-path="url(#r5)"/> + + <clipPath id="r6"> + <rect width="100%" height="100%"/> + </clipPath> + <clipPath id="r6-2"> + <rect width="100%" height="40%"/> + </clipPath> + <use xlink:href="#d" id="u6" x="60%" width="11%" height="100%" clip-path="url(#r6)"/> + + <clipPath id="r7"> + <rect width="100%" height="40%"/> + </clipPath> + <clipPath id="r7-2"> + <rect width="100%" height="100%"/> + </clipPath> + <use xlink:href="#d" id="u7" x="70%" width="11%" height="100%" clip-path="url(#r7)"/> + + <clipPath id="r8-2"> + <rect width="100%" height="40%"/> + </clipPath> + <clipPath id="r8"> + <rect width="100%" height="100%"/> + </clipPath> + <use xlink:href="#d" id="u8" x="80%" width="11%" height="100%" clip-path="url(#r8)"/> + + <rect width="11%" height="100%" fill="lime"/> + <rect x="90%" width="11%" height="100%" fill="lime"/> + + <script> + function startTest() { + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + } + + function doTest() { + // check that changing an id to "r2" lets u2 find it + var r2 = document.getElementById("x"); + r2.setAttribute("id", "r2"); + + var rect = document.getElementById("u3").getBoundingClientRect(); + // check that removing the bad r3 lets u3 find the good one + var r3 = document.getElementById("r3"); + r3.parentNode.removeChild(r3); + + // check that renaming the bad r4 lets u4 find the good one + var r4 = document.getElementById("r4"); + r4.removeAttribute("id"); + + // check that changing u5's reference works + var u5 = document.getElementById("u5"); + u5.setAttribute("clip-path", "url(#r1)"); + + // check that inserting a good element before the bad r6 works + var r6 = document.getElementById("r6-2"); + r6.parentNode.removeChild(r6); + r6.setAttribute("id", "r6"); + document.documentElement.insertBefore(r6, document.documentElement.firstChild); + + // check that inserting a bad element after a good one doesn't break anything + var r7 = document.getElementById("r7-2"); + r7.parentNode.removeChild(r7); + r7.setAttribute("id", "r7"); + document.documentElement.appendChild(r7); + + // check that renaming a good element to r8 works + var r8 = document.getElementById("r8-2"); + r8.setAttribute("id", "r8"); + + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-clipPath-02.svg b/layout/reftests/svg/dynamic-clipPath-02.svg new file mode 100644 index 0000000000..81459e2359 --- /dev/null +++ b/layout/reftests/svg/dynamic-clipPath-02.svg @@ -0,0 +1,36 @@ +<!-- + 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" + class="reftest-wait" + onload="startTest()" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that dynamic changes to the clipPathUnits are reflected in the clipPath</title> + + <defs> + <clipPath id="clip1" clipPathUnits="objectBoundingBox"> + <rect width=".1" height=".1"/> + </clipPath> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + + <g transform="scale(1000)"> + <rect x=".2" y=".2" width=".6" height=".6" fill="red" clip-path="url(#clip1)"/> + </g> + + <script> + function startTest() { + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + } + + function doTest() { + var clip1 = document.getElementById("clip1"); + clip1.clipPathUnits.baseVal = SVGUnitTypes.SVG_UNIT_TYPE_USERSPACEONUSE; + + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-clipPath-clip-rule-01.svg b/layout/reftests/svg/dynamic-clipPath-clip-rule-01.svg new file mode 100644 index 0000000000..f6b19bad84 --- /dev/null +++ b/layout/reftests/svg/dynamic-clipPath-clip-rule-01.svg @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait"> + <title>Testcase for dynamic changes to clip-rule</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1077993 --> + <script> + +function doTest() { + document.getElementById("p2").setAttribute("style", "clip-rule: winding;"); + document.documentElement.removeAttribute("class"); +} + +window.addEventListener("MozReftestInvalidate", doTest, false); +window.setTimeout(doTest, 4000); // fallback for running outside reftest + + </script> + <defs> + <clipPath id="p2" style="clip-rule:evenodd"> + <path + d="M100,50 l0,150 50,0 0,-100 -100,0 0,50 150,0 0,-50 -50,0 0,-50 z"/> + </clipPath> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <path fill-rule="winding" fill="red" + d="M100,50 l0,150 50,0 0,-100 -100,0 0,50 150,0 0,-50 -50,0 0,-50 z"/> + + <rect width="100%" height="100%" fill="lime" clip-path="url(#p2)"/> +</svg> + diff --git a/layout/reftests/svg/dynamic-conditions-01.svg b/layout/reftests/svg/dynamic-conditions-01.svg new file mode 100644 index 0000000000..3c548099f1 --- /dev/null +++ b/layout/reftests/svg/dynamic-conditions-01.svg @@ -0,0 +1,33 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();"> + <title>Testcase for dynamic conditions</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=409383 --> + + <script> + function m() { + var svgns = "http://www.w3.org/2000/svg"; + + var rect1 = document.getElementById("rect1"); + rect1.setAttribute("systemLanguage", "foo"); + + var rect2 = document.getElementById("rect2"); + rect2.setAttribute("requiredFeatures", "http://www.w3.org/TR/SVG11/feature#Gradient"); + + var rect3 = document.getElementById("rect3"); + rect3.setAttribute("requiredExtensions", "foo"); + } + </script> + + <rect width="100%" height="100%" fill="lime"/> + + <rect id="rect1" x="50" y="100" width="50" height="50" fill="red"/> + + <rect x="200" y="100" width="50" height="50" fill="red"/> + <rect id="rect2" x="200" y="100" width="50" height="50" fill="lime"/> + + <rect id="rect3" x="50" y="200" width="50" height="50" fill="red"/> +</svg> diff --git a/layout/reftests/svg/dynamic-conditions-02.svg b/layout/reftests/svg/dynamic-conditions-02.svg new file mode 100644 index 0000000000..af36ed72ef --- /dev/null +++ b/layout/reftests/svg/dynamic-conditions-02.svg @@ -0,0 +1,11 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" onload="this.setAttribute('systemLanguage', 'x')"> + <title>Test that dynamically changed conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <rect width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/dynamic-conditions-03.svg b/layout/reftests/svg/dynamic-conditions-03.svg new file mode 100644 index 0000000000..e9e174ac99 --- /dev/null +++ b/layout/reftests/svg/dynamic-conditions-03.svg @@ -0,0 +1,11 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" requiredExtensions="x" onload="this.removeAttribute('requiredExtensions')"> + <title>Test that dynamically changed conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/dynamic-conditions-04.svg b/layout/reftests/svg/dynamic-conditions-04.svg new file mode 100644 index 0000000000..ffbefec43c --- /dev/null +++ b/layout/reftests/svg/dynamic-conditions-04.svg @@ -0,0 +1,12 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Gradient" +onload="this.setAttribute('systemLanguage', 'x')"> + <title>Test that dynamically changed conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <rect width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/dynamic-conditions-05.svg b/layout/reftests/svg/dynamic-conditions-05.svg new file mode 100644 index 0000000000..d22456ce66 --- /dev/null +++ b/layout/reftests/svg/dynamic-conditions-05.svg @@ -0,0 +1,11 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" requiredFeatures="x" onload="this.setAttribute('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Gradient')"> + <title>Test that dynamically changed conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/dynamic-conditions-06.svg b/layout/reftests/svg/dynamic-conditions-06.svg new file mode 100644 index 0000000000..9fafa4cd48 --- /dev/null +++ b/layout/reftests/svg/dynamic-conditions-06.svg @@ -0,0 +1,24 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()"> + <title>Test that changing conditional processing attributes dynamically on outer 'svg' elements while redraw is suspended is honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <script> + function f() { + var svg = document.documentElement; + svg.suspendRedraw(10000); + setTimeout(function() { + svg.setAttribute("systemLanguage", "x"); + svg.unsuspendRedrawAll(); + setTimeout(function() { + svg.removeAttribute("class"); + }, 1); + }, 1); + } + </script> + <rect width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/dynamic-conditions-07.svg b/layout/reftests/svg/dynamic-conditions-07.svg new file mode 100644 index 0000000000..8132b7ddb7 --- /dev/null +++ b/layout/reftests/svg/dynamic-conditions-07.svg @@ -0,0 +1,24 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()" requiredFeatures="x"> + <title>Test that changing conditional processing attributes dynamically on outer 'svg' elements while redraw is suspended is honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <script> + function f() { + var svg = document.documentElement; + svg.suspendRedraw(10000); + setTimeout(function() { + svg.removeAttribute("requiredFeatures"); + svg.unsuspendRedrawAll(); + setTimeout(function() { + svg.removeAttribute("class"); + }, 1); + }, 1); + } + </script> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/dynamic-conditions-08.svg b/layout/reftests/svg/dynamic-conditions-08.svg new file mode 100644 index 0000000000..7b82d35bfa --- /dev/null +++ b/layout/reftests/svg/dynamic-conditions-08.svg @@ -0,0 +1,24 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()" requiredFeatures="x"> + <title>Test that changing conditional processing attributes dynamically on outer 'svg' elements while redraw is suspended is honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <script> + function f() { + var svg = document.documentElement; + svg.suspendRedraw(10000); + setTimeout(function() { + svg.setAttribute("requiredFeatures", "http://www.w3.org/TR/SVG11/feature#Gradient"); + svg.unsuspendRedrawAll(); + setTimeout(function() { + svg.removeAttribute("class"); + }, 1); + }, 1); + } + </script> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/dynamic-conditions-09.svg b/layout/reftests/svg/dynamic-conditions-09.svg new file mode 100644 index 0000000000..3c9b264b56 --- /dev/null +++ b/layout/reftests/svg/dynamic-conditions-09.svg @@ -0,0 +1,25 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()" +systemLanguage="en"> + <title>Test that changing conditional processing attributes dynamically on outer 'svg' elements while redraw is suspended is honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <script> + function f() { + var svg = document.documentElement; + svg.suspendRedraw(10000); + setTimeout(function() { + svg.setAttribute("systemLanguage", "x"); + svg.unsuspendRedrawAll(); + setTimeout(function() { + svg.removeAttribute("class"); + }, 1); + }, 1); + } + </script> + <rect width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/dynamic-conditions-10.svg b/layout/reftests/svg/dynamic-conditions-10.svg new file mode 100644 index 0000000000..0188818829 --- /dev/null +++ b/layout/reftests/svg/dynamic-conditions-10.svg @@ -0,0 +1,24 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()"> + <title>Test that changing conditional processing attributes dynamically while redraw is suspended is honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <script> + function f() { + var svg = document.documentElement; + svg.suspendRedraw(10000); + setTimeout(function() { + document.getElementById("r").setAttribute("systemLanguage", "x"); + svg.unsuspendRedrawAll(); + setTimeout(function() { + svg.removeAttribute("class"); + }, 1); + }, 1); + } + </script> + <rect id="r" width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/dynamic-conditions-11.svg b/layout/reftests/svg/dynamic-conditions-11.svg new file mode 100644 index 0000000000..2f908938a6 --- /dev/null +++ b/layout/reftests/svg/dynamic-conditions-11.svg @@ -0,0 +1,24 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()"> + <title>Test that changing conditional processing attributes dynamically elements while redraw is suspended is honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <script> + function f() { + var svg = document.documentElement; + svg.suspendRedraw(10000); + setTimeout(function() { + document.getElementById("r").removeAttribute("requiredFeatures"); + svg.unsuspendRedrawAll(); + setTimeout(function() { + svg.removeAttribute("class"); + }, 1); + }, 1); + } + </script> + <rect id="r" width="100%" height="100%" fill="lime" requiredFeatures="x"/> +</svg> diff --git a/layout/reftests/svg/dynamic-conditions-12.svg b/layout/reftests/svg/dynamic-conditions-12.svg new file mode 100644 index 0000000000..284f823044 --- /dev/null +++ b/layout/reftests/svg/dynamic-conditions-12.svg @@ -0,0 +1,24 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()"> + <title>Test that changing conditional processing attributes dynamically elements while redraw is suspended is honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <script> + function f() { + var svg = document.documentElement; + svg.suspendRedraw(10000); + setTimeout(function() { + document.getElementById("r").setAttribute("requiredFeatures", "http://www.w3.org/TR/SVG11/feature#Gradient"); + svg.unsuspendRedrawAll(); + setTimeout(function() { + svg.removeAttribute("class"); + }, 1); + }, 1); + } + </script> + <rect id="r" width="100%" height="100%" fill="lime" requiredFeatures="x"/> +</svg> diff --git a/layout/reftests/svg/dynamic-conditions-13.svg b/layout/reftests/svg/dynamic-conditions-13.svg new file mode 100644 index 0000000000..ba3cf38bce --- /dev/null +++ b/layout/reftests/svg/dynamic-conditions-13.svg @@ -0,0 +1,24 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()"> + <title>Test that changing conditional processing attributes dynamically elements while redraw is suspended is honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <script> + function f() { + var svg = document.documentElement; + svg.suspendRedraw(10000); + setTimeout(function() { + document.getElementById("r").setAttribute("systemLanguage", "x"); + svg.unsuspendRedrawAll(); + setTimeout(function() { + svg.removeAttribute("class"); + }, 1); + }, 1); + } + </script> + <rect id="r" width="100%" height="100%" fill="red" systemLanguage="en"/> +</svg> diff --git a/layout/reftests/svg/dynamic-feFlood-01.svg b/layout/reftests/svg/dynamic-feFlood-01.svg new file mode 100644 index 0000000000..283c3550b4 --- /dev/null +++ b/layout/reftests/svg/dynamic-feFlood-01.svg @@ -0,0 +1,24 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();"> + <title>Testcase for dynamic feFlood changes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=448831 --> + <script> + function m() { + document.getElementById("feFlood").setAttribute("flood-color", "lime"); + } + </script> + + <defs> + <filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood id="feFlood" x="0" y="0" width="100%" height="100%" flood-color="red"/> + </filter> + </defs> + <g filter="url(#f1)"> + <rect x="0" y="0" width="100%" height="100%" fill="red" opacity="0"/> + </g> +</svg> diff --git a/layout/reftests/svg/dynamic-feImage-01.svg b/layout/reftests/svg/dynamic-feImage-01.svg new file mode 100644 index 0000000000..920927790b --- /dev/null +++ b/layout/reftests/svg/dynamic-feImage-01.svg @@ -0,0 +1,28 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="m();"> + <title>Testcase for dynamic feImage changes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=455226 --> + <script> + function m() { + var xlinkNS = "http://www.w3.org/1999/xlink"; + document.getElementById("feImage").removeAttributeNS(xlinkNS, "href"); + } + </script> + + <defs> + <filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + + <feImage id="feImage" + xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg" + x="0" y="0" width="100%" height="100%" + style="color-interpolation-filters:sRGB"/> + </filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <rect width="100%" height="100%" filter="url(#f1)"/> +</svg> diff --git a/layout/reftests/svg/dynamic-fill-01-ref.svg b/layout/reftests/svg/dynamic-fill-01-ref.svg new file mode 100644 index 0000000000..e20c21a3ad --- /dev/null +++ b/layout/reftests/svg/dynamic-fill-01-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Reference for changing fill from url() value to a solid color value not asserting</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=782888 --> + + <text style="font: 16px sans-serif; fill: green" x="100" y="100">Hello</text> +</svg> diff --git a/layout/reftests/svg/dynamic-fill-01.svg b/layout/reftests/svg/dynamic-fill-01.svg new file mode 100644 index 0000000000..d127a2c747 --- /dev/null +++ b/layout/reftests/svg/dynamic-fill-01.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + + <title>Test for changing fill from url() value to a solid color value not asserting</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=782888 --> + + <linearGradient id="g"> + <stop stop-color="red"/> + </linearGradient> + + <text style="font: 16px sans-serif; fill: url(#g)" x="100" y="100">Hello</text> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + document.getElementsByTagName("text")[0].style.fill = "green"; + document.documentElement.removeAttribute("class"); + }, false); + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-fill-rule-01-ref.svg b/layout/reftests/svg/dynamic-fill-rule-01-ref.svg new file mode 100644 index 0000000000..a31a09a7cb --- /dev/null +++ b/layout/reftests/svg/dynamic-fill-rule-01-ref.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> + <title>Reference for dynamic changes to fill-rule</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=932762 --> + + <!-- for p1 --> + <rect x="50" y="100" width="150" height="50"/> + <rect x="100" y="50" width="50" height="150"/> + + <!-- for p2 --> + <rect x="250" y="100" width="50" height="50"/> + <rect x="350" y="100" width="50" height="50"/> + <rect x="300" y="50" width="50" height="50"/> + <rect x="300" y="150" width="50" height="50"/> + +</svg> + diff --git a/layout/reftests/svg/dynamic-fill-rule-01.svg b/layout/reftests/svg/dynamic-fill-rule-01.svg new file mode 100644 index 0000000000..9fb12f4ae0 --- /dev/null +++ b/layout/reftests/svg/dynamic-fill-rule-01.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <title>Testcase for dynamic changes to fill-rule</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=932762 --> + <script> + +function doTest() { + document.getElementById("p1").removeAttribute("style"); + document.getElementById("p2").setAttribute("style", "fill-rule: evenodd;"); + document.documentElement.removeAttribute("class"); +} + +window.addEventListener("MozReftestInvalidate", doTest, false); +window.setTimeout(doTest, 4000); // fallback for running outside reftest + + </script> + <path id="p1" style="fill-rule: evenodd;" + d="M100,50 l0,150 50,0 0,-100 -100,0 0,50 150,0 0,-50 -50,0 0,-50 z"/> + <path id="p2" + d="M300,50 l0,150 50,0 0,-100 -100,0 0,50 150,0 0,-50 -50,0 0,-50 z"/> +</svg> + diff --git a/layout/reftests/svg/dynamic-filter-contents-01-ref.svg b/layout/reftests/svg/dynamic-filter-contents-01-ref.svg new file mode 100644 index 0000000000..a81725da4e --- /dev/null +++ b/layout/reftests/svg/dynamic-filter-contents-01-ref.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"> + <rect width="100" height="100" fill="lime"/> + <rect width="100" height="100" fill="red" opacity="0.5"/> +</svg> diff --git a/layout/reftests/svg/dynamic-filter-contents-01a.svg b/layout/reftests/svg/dynamic-filter-contents-01a.svg new file mode 100644 index 0000000000..4c5fe6a48c --- /dev/null +++ b/layout/reftests/svg/dynamic-filter-contents-01a.svg @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg class="reftest-wait" xmlns="http://www.w3.org/2000/svg" onload="startTest()"> + <style> + .foo feComposite { color-interpolation-filters:sRGB; } + </style> + + <defs id="d"> + <filter id="f" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood"/> + <feComposite width="1" height="1" in="flood" operator="over" in2="SourceGraphic"/> + </filter> + </defs> + + <rect width="100" height="100" fill="lime" filter="url(#f)"/> + + <script> + function startTest() { + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + } + + function doTest() { + document.getElementById("d").setAttribute("class", "foo"); + document.documentElement.removeAttribute('class'); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-filter-contents-01b.svg b/layout/reftests/svg/dynamic-filter-contents-01b.svg new file mode 100644 index 0000000000..c85bf7b606 --- /dev/null +++ b/layout/reftests/svg/dynamic-filter-contents-01b.svg @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg class="reftest-wait" xmlns="http://www.w3.org/2000/svg" onload="startTest()"> + <defs> + <filter id="f" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood"/> + <feComposite id="comp" width="1" height="1" in="flood" operator="over" in2="SourceGraphic"/> + </filter> + </defs> + + <rect width="100" height="100" fill="lime" filter="url(#f)"/> + + <script> + function startTest() { + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + } + + function doTest() { + document.getElementById("comp").setAttribute("color-interpolation-filters", "sRGB"); + document.documentElement.removeAttribute('class'); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-gradient-contents-01.svg b/layout/reftests/svg/dynamic-gradient-contents-01.svg new file mode 100644 index 0000000000..d437b7e023 --- /dev/null +++ b/layout/reftests/svg/dynamic-gradient-contents-01.svg @@ -0,0 +1,32 @@ +<!-- + 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" class="reftest-wait" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="startTest()"> + <title>Testing that dynamic changes to the element for a given ID are reflected in gradients</title> + <style> + .foo stop { stop-color:lime; } + </style> + <defs id="d"> + <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="red" offset="0"/> + <stop stop-color="red" offset="1"/> + </linearGradient> + </defs> + + <rect id="u1" width="100%" height="100%" fill="url(#g)"/> + + <script> + function startTest() { + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + } + + function doTest() { + document.getElementById("g").setAttribute("class", "foo"); + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-gradient-contents-02.svg b/layout/reftests/svg/dynamic-gradient-contents-02.svg new file mode 100644 index 0000000000..8d620816d3 --- /dev/null +++ b/layout/reftests/svg/dynamic-gradient-contents-02.svg @@ -0,0 +1,35 @@ +<!-- + 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" class="reftest-wait" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="startTest()"> + <title>Testing that dynamic changes to the parent element are reflected in gradients</title> + <defs id="d"> + <linearGradient id="g1" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="red" offset="0"/> + <stop stop-color="red" offset="1"/> + </linearGradient> + <linearGradient id="g2" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="lime" offset="0"/> + <stop stop-color="lime" offset="1"/> + </linearGradient> + </defs> + + <g id="g" fill="url(#g1)"> + <rect id="u1" width="100%" height="100%" /> + </g> + + <script> + function startTest() { + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + } + + function doTest() { + document.getElementById("g").setAttribute("fill", "url(#g2)"); + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-inner-svg-01.svg b/layout/reftests/svg/dynamic-inner-svg-01.svg new file mode 100644 index 0000000000..8709a574a6 --- /dev/null +++ b/layout/reftests/svg/dynamic-inner-svg-01.svg @@ -0,0 +1,39 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" + onload="startTest()"> + +<script> +<![CDATA[ + +function startTest() { + document.addEventListener("MozReftestInvalidate", boom, false); + setTimeout(boom, 4000); // fallback for running outside reftest +} + +function boom() { + document.getElementById('inner1').setAttribute('x', 20); + document.getElementById('inner2').setAttribute('width', 100); + document.documentElement.removeAttribute("class"); +} + +]]> +</script> + + <rect width="100%" height="100%" fill="lime"/> + + <rect x="20" y="20" width="100" height="100" fill="red"/> + + <svg id="inner1" x="260" y="20" width="100" height="100"> + <rect x="0" y="0" width="100" height="100" fill="lime"/> + </svg> + + <rect x="20" y="140" width="100" height="100" fill="red"/> + + <svg id="inner2" x="20" y="140" width="1" height="100"> + <rect x="0" y="0" width="100" height="100" fill="lime"/> + </svg> + +</svg> diff --git a/layout/reftests/svg/dynamic-link-style-01.svg b/layout/reftests/svg/dynamic-link-style-01.svg new file mode 100644 index 0000000000..65eb5c54c2 --- /dev/null +++ b/layout/reftests/svg/dynamic-link-style-01.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="setTimeout(function() { document.getElementById('r').removeAttribute('xlink:href'); }, 0);"> + + <title>Testcase for dynamic changes to link styles</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=398105 --> + + <style type="text/css"> + a:link rect { fill: red; } + </style> + + <a xlink:href="do-not-visit-me.xxx" id="r"> + <rect width="100%" height="100%" fill="lime" /> + </a> +</svg> diff --git a/layout/reftests/svg/dynamic-marker-01.svg b/layout/reftests/svg/dynamic-marker-01.svg new file mode 100644 index 0000000000..7bd0e60723 --- /dev/null +++ b/layout/reftests/svg/dynamic-marker-01.svg @@ -0,0 +1,32 @@ +<!-- + 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" class="reftest-wait" onload="startTest()" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that dynamic changes to the element for a given ID are reflected in marker</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=309220 --> + <defs> + <marker id="x" style="overflow: visible;" orient="auto" markerUnits="strokeWidth"> + <rect width="100%" height="100%" fill="lime"/> + </marker> + </defs> + + <rect width="100%" height="100%" fill="red"/> + + <line id="l1" x1="0" x2="0" y1="0" y2="0" fill="none" stroke="black" stroke-width="1" marker-end="url(#m1)"/> + + <script> + function startTest() { + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + } + + function doTest() { + // check that changing an id to "m1" lets l1 find it + var x = document.getElementById("x"); + x.setAttribute("id", "m1"); + + document.documentElement.removeAttribute('class'); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-marker-02-ref.svg b/layout/reftests/svg/dynamic-marker-02-ref.svg new file mode 100644 index 0000000000..3d0e9b6b21 --- /dev/null +++ b/layout/reftests/svg/dynamic-marker-02-ref.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <defs> + <marker style="overflow: visible" id="m1" orient="auto" markerUnits="strokeWidth"> + <rect width="100%" height="100%" fill="blue"/> + </marker> + </defs> + + + <rect width="100%" height="100%" fill="yellow"/> + + <line x1="30" x2="30" y1="10" y2="10" stroke="red" stroke-width="3" marker-end="url(#m1)"/> + +</svg> diff --git a/layout/reftests/svg/dynamic-marker-02.svg b/layout/reftests/svg/dynamic-marker-02.svg new file mode 100644 index 0000000000..88e427bc85 --- /dev/null +++ b/layout/reftests/svg/dynamic-marker-02.svg @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" + onload="startTest()"> + +<script> +<![CDATA[ + +function startTest() { + document.addEventListener("MozReftestInvalidate", boom, false); + setTimeout(boom, 4000); // fallback for running outside reftest +} + +function boom() { + n = document.getElementById("m1"); + n.style.overflow = "visible"; + document.documentElement.removeAttribute("class"); +} + +]]> +</script> + + <defs> + <marker id="m1" orient="auto" markerUnits="strokeWidth"> + <rect width="100%" height="100%" fill="blue"/> + </marker> + </defs> + + + <rect width="100%" height="100%" fill="yellow"/> + + <line x1="30" x2="30" y1="10" y2="10" stroke="red" stroke-width="3" marker-end="url(#m1)"/> + +</svg> diff --git a/layout/reftests/svg/dynamic-marker-03.svg b/layout/reftests/svg/dynamic-marker-03.svg new file mode 100644 index 0000000000..a4944bd906 --- /dev/null +++ b/layout/reftests/svg/dynamic-marker-03.svg @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + + <title>Testing that dynamic changes to preserveAspectRatio are reflected in the marker</title> + <script> +<![CDATA[ + +function doTest() { + m = document.getElementById("m1"); + m.preserveAspectRatio.baseVal.align = + SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE; + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", doTest, false); +setTimeout(doTest, 4000); // fallback for running outside reftest + +]]> + </script> + + <defs> + <marker id="m1" orient="auto" markerUnits="userSpaceOnUse" + preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" markerWidth="60" markerHeight="30"> + <rect width="30" height="40" fill="red"/> + </marker> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + + <line x1="30" x2="30" y1="10" y2="10" stroke="red" stroke-width="3" marker-end="url(#m1)"/> + + <rect x="30" y="10" width="60" height="30" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/dynamic-mask-01.svg b/layout/reftests/svg/dynamic-mask-01.svg new file mode 100644 index 0000000000..7a0e428ee7 --- /dev/null +++ b/layout/reftests/svg/dynamic-mask-01.svg @@ -0,0 +1,48 @@ +<!-- + 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" + class="reftest-wait" + onload="startTest()" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that dynamic changes to mask attributes are reflected in the mask</title> + + <defs> + <mask id="mask1" width="1" height="1"> + <rect width="1" height="1" fill="white"/> + </mask> + <mask id="mask2" width="1" height="1"> + <rect width="1" height="1" fill="white"/> + </mask> + <mask id="mask3" width="1" height="1"> + <rect width="1" height="1" fill="white"/> + </mask> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + + <g transform="scale(500)"> + <rect x=".2" y=".2" width=".2" height=".2" fill="red" mask="url(#mask1)"/> + <rect x=".4" y=".2" width=".2" height=".2" fill="red" mask="url(#mask2)"/> + <rect x=".2" y=".4" width=".2" height=".2" fill="red" mask="url(#mask3)" /> + </g> + + <script> + function startTest() { + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + } + + function doTest() { + var mask1 = document.getElementById("mask1"); + mask1.width.baseVal.value = 0; + var mask2 = document.getElementById("mask2"); + mask2.height.baseVal.value = 0; + var mask3 = document.getElementById("mask3"); + mask3.maskUnits.baseVal = SVGUnitTypes.SVG_UNIT_TYPE_USERSPACEONUSE; + + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-mask-contents-01.svg b/layout/reftests/svg/dynamic-mask-contents-01.svg new file mode 100644 index 0000000000..10d6222e25 --- /dev/null +++ b/layout/reftests/svg/dynamic-mask-contents-01.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" onload="startTest()" class="reftest-wait"> + <style> + .foo .maskrect { fill:white; } + </style> + + <defs id="d"> + <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <rect class="maskrect" width="1" height="1"/> + </mask> + </defs> + + <rect id="rect" width="100%" height="100%" fill="lime" mask="url(#m1)"/> + + <script> + function startTest() { + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + } + + function doTest() { + document.getElementById("d").setAttribute("class", "foo"); + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-mask-pre-effects-bbox-ref.html b/layout/reftests/svg/dynamic-mask-pre-effects-bbox-ref.html new file mode 100644 index 0000000000..4def173a0b --- /dev/null +++ b/layout/reftests/svg/dynamic-mask-pre-effects-bbox-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> + <head> + <style> + #container { + border: 3px dotted black; + background: yellow; + overflow: hidden; + width: 400px; + max-height: 25px; + } + + #container.masked { + mask: url('#fade_mask_bottom'); + } + .item { + font-size: 30px; + } + </style> + </head> + <body> + <div id='container' class="masked"><div class="item">PASS</div></div> + + <!-- BEGIN SVG MASK: --> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <mask id="fade_mask_bottom" + maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <linearGradient id="fade_gradient_bottom" + gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="white" stop-opacity="1" offset="0.7"></stop> + <stop stop-color="white" stop-opacity="0" offset="1"></stop> + </linearGradient> + <rect x="0" y="0" width="1" height="1" + fill="url(#fade_gradient_bottom)"></rect> + </mask> + </svg> + <!-- END SVG MASK --> + + </body> +</html> diff --git a/layout/reftests/svg/dynamic-mask-pre-effects-bbox.html b/layout/reftests/svg/dynamic-mask-pre-effects-bbox.html new file mode 100644 index 0000000000..4ed6f1a372 --- /dev/null +++ b/layout/reftests/svg/dynamic-mask-pre-effects-bbox.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <style> + #container { + border: 3px dotted black; + background: yellow; + overflow: hidden; + width: 400px; + max-height: 25px; + } + + #container.masked { + mask: url('#fade_mask_bottom'); + } + .item { + font-size: 30px; + } + </style> + <script> + function go() { + clear(); + insert(); + } + + function clear() { + // Force reflow: + container.offsetHeight; + + // Remove mask: + container.classList.remove('masked'); + } + + function insert() { + // Add new child: + var notificationNode = document.createElement('div'); + notificationNode.classList.add('item'); + notificationNode.appendChild(document.createTextNode("PASS")); + var container = document.getElementById('container'); + container.appendChild(notificationNode); + + // Force reflow: + container.offsetHeight; + + // Add back mask: + container.classList.add('masked'); + + document.documentElement.classList.remove('reftest-wait'); + } + </script> + </head> + <body onload="go();"> + <div id='container' class="masked"></div> + + <!-- BEGIN SVG MASK: --> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <mask id="fade_mask_bottom" + maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <linearGradient id="fade_gradient_bottom" + gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="white" stop-opacity="1" offset="0.7"></stop> + <stop stop-color="white" stop-opacity="0" offset="1"></stop> + </linearGradient> + <rect x="0" y="0" width="1" height="1" + fill="url(#fade_gradient_bottom)"></rect> + </mask> + </svg> + <!-- END SVG MASK --> + + </body> +</html> diff --git a/layout/reftests/svg/dynamic-opacity-property-01.svg b/layout/reftests/svg/dynamic-opacity-property-01.svg new file mode 100644 index 0000000000..d35f8c82e6 --- /dev/null +++ b/layout/reftests/svg/dynamic-opacity-property-01.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + + <title>Test repainting for opacity property changes</title> + + <script> + +function doTest() { + document.getElementById("r").style.opacity = 1; + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", doTest, false); +setTimeout(doTest, 4000); // fallback for running outside reftest + + </script> + + <rect width="100%" height="100%" fill="lime"/> + <rect width="100" height="100" fill="red"/> + <rect id="r" width="100" height="100" fill="lime" style="opacity:0.5"/> + +</svg> diff --git a/layout/reftests/svg/dynamic-pattern-01.svg b/layout/reftests/svg/dynamic-pattern-01.svg new file mode 100644 index 0000000000..e129d24493 --- /dev/null +++ b/layout/reftests/svg/dynamic-pattern-01.svg @@ -0,0 +1,115 @@ +<!-- + 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" class="reftest-wait" + xmlns:xlink="http://www.w3.org/1999/xlink" onload="startTest()"> + <title>Testing that dynamic changes to the element for a given ID are reflected in patterns</title> + + <rect id="u1" x="10%" width="11%" height="100%" fill="url(#r1)"/> + <script> + // force frame construction; test that parsing "r1" after frame construction + // is still bound to "u1" eventually + var rect = document.getElementById("u1").getBoundingClientRect(); + </script> + <pattern id="r1" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="lime"/> + </pattern> + + <pattern id="x" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="lime"/> + </pattern> + <rect id="u2" x="20%" width="11%" height="100%" fill="url(#r2)"/> + + <pattern id="r3" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="red"/> + </pattern> + <pattern id="r3" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="lime"/> + </pattern> + <rect id="u3" x="30%" width="11%" height="100%" fill="url(#r3)"/> + + <pattern id="r4" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="red"/> + </pattern> + <pattern id="r4" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="lime"/> + </pattern> + <rect id="u4" x="40%" width="11%" height="100%" fill="url(#r4)"/> + + <pattern id="r5" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="red"/> + </pattern> + <rect id="u5" x="50%" width="11%" height="100%" fill="url(#r5)"/> + + <pattern id="r6" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="red"/> + </pattern> + <pattern id="r6-2" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="lime"/> + </pattern> + <rect id="u6" x="60%" width="11%" height="100%" fill="url(#r6)"/> + + <pattern id="r7" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="lime"/> + </pattern> + <pattern id="r7-2" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="red"/> + </pattern> + <rect id="u7" x="70%" width="11%" height="100%" fill="url(#r7)"/> + + <pattern id="r8-2" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="lime"/> + </pattern> + <pattern id="r8" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="red"/> + </pattern> + <rect id="u8" x="80%" width="11%" height="100%" fill="url(#r8)"/> + + <rect width="11%" height="100%" fill="lime"/> + <rect x="90%" width="11%" height="100%" fill="lime"/> + + <script> + function startTest() { + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + } + + function doTest() { + // check that changing an id to "r2" lets u2 find it + var r2 = document.getElementById("x"); + r2.setAttribute("id", "r2"); + + var rect = document.getElementById("u3").getBoundingClientRect(); + // check that removing the bad r3 lets u3 find the good one + var r3 = document.getElementById("r3"); + r3.parentNode.removeChild(r3); + + // check that renaming the bad r4 lets u4 find the good one + var r4 = document.getElementById("r4"); + r4.removeAttribute("id"); + + // check that changing u5's reference works + var u5 = document.getElementById("u5"); + u5.setAttribute("fill", "url(#r1)"); + + // check that inserting a good element before the bad r6 works + var r6 = document.getElementById("r6-2"); + r6.parentNode.removeChild(r6); + r6.setAttribute("id", "r6"); + document.documentElement.insertBefore(r6, document.documentElement.firstChild); + + // check that inserting a bad element after a good one doesn't break anything + var r7 = document.getElementById("r7-2"); + r7.parentNode.removeChild(r7); + r7.setAttribute("id", "r7"); + document.documentElement.appendChild(r7); + + // check that renaming a good element to r8 works + var r8 = document.getElementById("r8-2"); + r8.setAttribute("id", "r8"); + + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-pattern-02.svg b/layout/reftests/svg/dynamic-pattern-02.svg new file mode 100644 index 0000000000..f63492f696 --- /dev/null +++ b/layout/reftests/svg/dynamic-pattern-02.svg @@ -0,0 +1,29 @@ +<!-- + 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" class="reftest-wait" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that href changes are live</title> + <defs> + <pattern id="r1" width="100%" height="100%" patternUnits="userSpaceOnUse"> + </pattern> + </defs> + <defs> + <pattern id="r2"> + <rect width="100%" height="100%" fill="lime"/> + </pattern> + </defs> + + <rect id="u1" width="100%" height="100%" fill="url(#r1)"/> + + <script> + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + document.getElementById("r1").setAttributeNS("http://www.w3.org/1999/xlink", "href", "#r2"); + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-pattern-contents-01.svg b/layout/reftests/svg/dynamic-pattern-contents-01.svg new file mode 100644 index 0000000000..b692de10c0 --- /dev/null +++ b/layout/reftests/svg/dynamic-pattern-contents-01.svg @@ -0,0 +1,32 @@ +<!-- + 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" class="reftest-wait" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that style changes are reflected in patterns</title> + <style> + .foo { fill:lime; } + </style> + <defs> + <pattern id="r1" width="100%" height="100%" patternUnits="userSpaceOnUse" xlink:href="#r2"> + </pattern> + </defs> + <defs id="d"> + <pattern id="r2"> + <rect width="100%" height="100%"/> + </pattern> + </defs> + + <rect id="u1" width="100%" height="100%" fill="url(#r1)"/> + + <script> + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + document.getElementById("d").setAttribute("class", "foo"); + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-pattern-contents-02.svg b/layout/reftests/svg/dynamic-pattern-contents-02.svg new file mode 100644 index 0000000000..d3da2e19f0 --- /dev/null +++ b/layout/reftests/svg/dynamic-pattern-contents-02.svg @@ -0,0 +1,29 @@ +<!-- + 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" class="reftest-wait" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that ID-map changes are tracked by pattern inheritance</title> + <defs> + <pattern id="r1" width="100%" height="100%" patternUnits="userSpaceOnUse" xlink:href="#r2"> + </pattern> + </defs> + <defs> + <pattern id="r0"> + <rect width="100%" height="100%" fill="lime"/> + </pattern> + </defs> + + <rect id="u1" width="100%" height="100%" fill="url(#r1)"/> + + <script> + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + document.getElementById("r0").setAttribute("id", "r2"); + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-rect-01-ref.svg b/layout/reftests/svg/dynamic-rect-01-ref.svg new file mode 100644 index 0000000000..3f3e96e665 --- /dev/null +++ b/layout/reftests/svg/dynamic-rect-01-ref.svg @@ -0,0 +1,13 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> + <title>Reference for dynamic rect changes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 --> + <rect x="50" y="100" width="50" height="50" fill="lime"/> + <rect x="200" y="100" width="50" height="50" fill="lime"/> + <rect x="50" y="200" width="50" height="50" fill="lime"/> + <rect x="200" y="200" width="50" height="50" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/dynamic-rect-01.svg b/layout/reftests/svg/dynamic-rect-01.svg new file mode 100644 index 0000000000..0ff73a4dd5 --- /dev/null +++ b/layout/reftests/svg/dynamic-rect-01.svg @@ -0,0 +1,24 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();"> + <title>Testcase for dynamic rect changes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 --> + <script> + function m() { + document.getElementById("rect1").setAttribute("fill", "lime"); + document.getElementById("rect2").setAttribute("x", "50"); + document.getElementById("rect3").setAttribute("transform", "translate(200,0)"); + document.getElementById("rect4").removeAttribute("filter"); + } + </script> + <filter id="shadow" filterUnits="objectBoundingBox"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + </filter> + <rect id="rect1" x="50" y="100" width="50" height="50" fill="red"/> + <rect id="rect2" x="0" y="200" width="50" height="50" fill="lime"/> + <rect id="rect3" x="0" y="100" width="50" height="50" fill="lime"/> + <rect id="rect4" x="200" y="200" width="50" height="50" filter="url(#shadow)" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/dynamic-rect-02-ref.svg b/layout/reftests/svg/dynamic-rect-02-ref.svg new file mode 100644 index 0000000000..002627412d --- /dev/null +++ b/layout/reftests/svg/dynamic-rect-02-ref.svg @@ -0,0 +1,15 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> + <title>Reference for dynamic rect changes with filters</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 --> + <filter id="shadow" filterUnits="objectBoundingBox"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + </filter> + <rect x="50" y="100" width="50" height="50" filter="url(#shadow)"/> + <rect x="200" y="100" width="50" height="50" filter="url(#shadow)"/> + <rect x="50" y="200" width="50" height="50" filter="url(#shadow)"/> +</svg> diff --git a/layout/reftests/svg/dynamic-rect-02.svg b/layout/reftests/svg/dynamic-rect-02.svg new file mode 100644 index 0000000000..94f0e6444a --- /dev/null +++ b/layout/reftests/svg/dynamic-rect-02.svg @@ -0,0 +1,22 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();"> + <title>Testcase for dynamic rect changes with filters</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 --> + <script> + function m() { + document.getElementById("rect1").setAttribute("x", "50"); + document.getElementById("rect2").setAttribute("transform", "translate(200,0)"); + document.getElementById("rect3").setAttribute("filter", "url(#shadow)"); + } + </script> + <filter id="shadow" filterUnits="objectBoundingBox"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + </filter> + <rect id="rect1" x="0" y="100" width="50" height="50" filter="url(#shadow)" /> + <rect id="rect2" x="0" y="100" width="50" height="50" filter="url(#shadow)" /> + <rect id="rect3" x="50" y="200" width="50" height="50"/> +</svg> diff --git a/layout/reftests/svg/dynamic-rect-03-ref.svg b/layout/reftests/svg/dynamic-rect-03-ref.svg new file mode 100644 index 0000000000..4ecdb81075 --- /dev/null +++ b/layout/reftests/svg/dynamic-rect-03-ref.svg @@ -0,0 +1,16 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> + <title>Reference for dynamic rect changes with filters</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 --> + <filter id="shadow" filterUnits="objectBoundingBox"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + </filter> + <g filter="url(#shadow)"> + <rect x="50" y="100" width="50" height="50"/> + <rect x="200" y="100" width="50" height="50"/> + </g> +</svg> diff --git a/layout/reftests/svg/dynamic-rect-03.svg b/layout/reftests/svg/dynamic-rect-03.svg new file mode 100644 index 0000000000..4b2fde7b2c --- /dev/null +++ b/layout/reftests/svg/dynamic-rect-03.svg @@ -0,0 +1,22 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();"> + <title>Testcase for dynamic rect changes with filters</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 --> + <script> + function m() { + document.getElementById("rect1").setAttribute("x", "50"); + document.getElementById("rect2").setAttribute("transform", "translate(200,0)"); + } + </script> + <filter id="shadow" filterUnits="objectBoundingBox"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + </filter> + <g filter="url(#shadow)"> + <rect id="rect1" x="0" y="100" width="50" height="50" /> + <rect id="rect2" x="0" y="100" width="50" height="50" /> + </g> +</svg> diff --git a/layout/reftests/svg/dynamic-rect-04.xhtml b/layout/reftests/svg/dynamic-rect-04.xhtml new file mode 100644 index 0000000000..479406edb7 --- /dev/null +++ b/layout/reftests/svg/dynamic-rect-04.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>Testcase reference file dynamic svg creation</title> +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=438867 --> +<script> +function m() { + var SVG_NS = "http://www.w3.org/2000/svg"; + var svg = document.createElementNS(SVG_NS, 'svg'); + svg.style.position = 'absolute'; + svg.style.left = '0px'; + svg.style.top = '0px'; + svg.style.width = '100%'; + svg.style.height = '100%'; + document.body.appendChild(svg); + + var rect = document.createElementNS(SVG_NS, "rect"); + rect.setAttribute('width', '100%'); + rect.setAttribute('height', '100%'); + rect.setAttribute('fill', 'lime'); + svg.appendChild(rect); +} +</script> +</head> +<body onload="m();"> +<hr style="clear: both;"/> +</body> +</html> diff --git a/layout/reftests/svg/dynamic-rect-05.svg b/layout/reftests/svg/dynamic-rect-05.svg new file mode 100644 index 0000000000..c3b2f08a52 --- /dev/null +++ b/layout/reftests/svg/dynamic-rect-05.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase ensuring fill works if applied before onload</title> + + <!-- For https://bugzilla.mozilla.org/show_bug.cgi?id=515080 --> + + <rect id="rect" width="100%" height="100%" fill="red"/> + + <script id="script" type="application/javascript"> + + document.documentElement.childNodes[5].setAttribute('fill', 'lime'); + + </script> + +</svg> diff --git a/layout/reftests/svg/dynamic-reflow-01-ref.svg b/layout/reftests/svg/dynamic-reflow-01-ref.svg new file mode 100644 index 0000000000..bd7f1977eb --- /dev/null +++ b/layout/reftests/svg/dynamic-reflow-01-ref.svg @@ -0,0 +1,5 @@ +<?xml version="1.0"?> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> + <rect id="test" x="100" y="100" width="100" height="100" + style="width: 200px"/> +</svg> diff --git a/layout/reftests/svg/dynamic-reflow-01.svg b/layout/reftests/svg/dynamic-reflow-01.svg new file mode 100644 index 0000000000..a882ac8c7b --- /dev/null +++ b/layout/reftests/svg/dynamic-reflow-01.svg @@ -0,0 +1,10 @@ +<?xml version="1.0"?> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> + <rect id="test" x="100" y="100" width="100" height="100"/> + <script> + window.onload = function() { + var node = document.getElementById("test"); + node.style.width = "200px"; + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-small-object-scaled-up-01.svg b/layout/reftests/svg/dynamic-small-object-scaled-up-01.svg new file mode 100644 index 0000000000..5cc3214c7b --- /dev/null +++ b/layout/reftests/svg/dynamic-small-object-scaled-up-01.svg @@ -0,0 +1,30 @@ +<!-- + 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" class="reftest-wait"> + <title>Test invalidation of very small objects that have been scaled up</title> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=465996 + + The very small graphic that has been scaled up to be visible should + invalidate correctly when moved. + --> + <script type="text/javascript">//<![CDATA[ + +function move_small_object() +{ + document.getElementById('circle').setAttribute("transform", "translate(-.2, -.2)"); + document.documentElement.removeAttribute('class'); +} + +document.addEventListener("MozReftestInvalidate", move_small_object, false); +setTimeout(move_small_object, 4000); // fallback for running outside reftest + + //]]></script> + <rect width="100%" height="100%" fill="lime"/> + <g transform="scale(300, 300)"> + <circle id="circle" cx=".05" cy=".05" r=".05" + fill="red" stroke="black" stroke-width="0.005" /> + </g> +</svg> diff --git a/layout/reftests/svg/dynamic-small-object-scaled-up-02.svg b/layout/reftests/svg/dynamic-small-object-scaled-up-02.svg new file mode 100644 index 0000000000..5b747b387a --- /dev/null +++ b/layout/reftests/svg/dynamic-small-object-scaled-up-02.svg @@ -0,0 +1,30 @@ +<!-- + 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" class="reftest-wait"> + <title>Test invalidation of very small objects that have been scaled up</title> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=465996 + + The very small graphic that has been scaled up to be visible should + invalidate correctly when moved. + --> + <script type="text/javascript">//<![CDATA[ + +function move_small_object() +{ + document.getElementById('path').setAttribute("transform", "translate(-.2, -.2)"); + document.documentElement.removeAttribute('class'); +} + +document.addEventListener("MozReftestInvalidate", move_small_object, false); +setTimeout(move_small_object, 4000); // fallback for running outside reftest + + //]]></script> + <rect width="100%" height="100%" fill="lime"/> + <g transform="scale(300, 300)"> + <path id="path" transform="translate(.2, .2)" fill="red" stroke="black" stroke-width="0.005" + d="M 0.05 0 C 0.05 0.06666666 -0.05 0.06666666 -0.05 0 C -0.05 -0.0666666666 0.05 -0.06666666 0.05 0"/> + </g> +</svg> diff --git a/layout/reftests/svg/dynamic-stroke-01.svg b/layout/reftests/svg/dynamic-stroke-01.svg new file mode 100644 index 0000000000..a23375bdd5 --- /dev/null +++ b/layout/reftests/svg/dynamic-stroke-01.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + + <title>Test for changing stroke from none to a solid color value</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=939942 --> + + <rect width="100%" height="100%" fill="red"/> + + <rect id="r" width="100%" height="50%" y="25%" stroke="none" stroke-width="75%" fill="lime"/> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + document.getElementById("r").style.stroke = "lime"; + document.documentElement.removeAttribute("class"); + }, false); + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-stroke-opacity-01.svg b/layout/reftests/svg/dynamic-stroke-opacity-01.svg new file mode 100644 index 0000000000..4b80491988 --- /dev/null +++ b/layout/reftests/svg/dynamic-stroke-opacity-01.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + + <title>Test for changing stroke-opacity from 0 to non-zero</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=939942 --> + + <rect width="100%" height="100%" fill="red"/> + + <rect id="r" width="100%" height="50%" y="25%" stroke-opacity="0" stroke="lime" stroke-width="75%" fill="lime"/> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + document.getElementById("r").style.strokeOpacity = "1"; + document.documentElement.removeAttribute("class"); + }, false); + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-stroke-width-01.svg b/layout/reftests/svg/dynamic-stroke-width-01.svg new file mode 100644 index 0000000000..63090d1f6f --- /dev/null +++ b/layout/reftests/svg/dynamic-stroke-width-01.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + + <title>Test for changing stroke-width from zero to non-zero</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=939942 --> + + <rect width="100%" height="100%" fill="red"/> + + <rect id="r" width="100%" height="50%" y="25%" stroke="lime" stroke-width="0" fill="lime"/> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + document.getElementById("r").style.strokeWidth = "75%"; + document.documentElement.removeAttribute("class"); + }, false); + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-switch-01.svg b/layout/reftests/svg/dynamic-switch-01.svg new file mode 100644 index 0000000000..cb9fcc599b --- /dev/null +++ b/layout/reftests/svg/dynamic-switch-01.svg @@ -0,0 +1,56 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();"> + <title>Testcase for dynamic switch changes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=409383 --> + <script> + function m() { + var svgns = "http://www.w3.org/2000/svg"; + + var rect1 = document.getElementById("rect1"); + rect1.parentNode.removeChild(rect1); + + var rect2a = document.createElementNS(svgns, "rect"); + rect2a.setAttribute("x", "200"); + rect2a.setAttribute("y", "100"); + rect2a.setAttribute("width", "50"); + rect2a.setAttribute("height", "50") + rect2a.setAttribute("fill", "lime"); + var rect2b = document.getElementById("rect2b"); + rect2b.parentNode.insertBefore(rect2a, rect2b); + + var rect3a = document.getElementById("rect3a"); + var rect3b = document.getElementById("rect3b"); + rect3a.parentNode.insertBefore(rect3a, rect3b); + + var rect4a = document.getElementById("rect4a"); + rect4a.setAttribute("systemLanguage", "foo"); + } + </script> + + <rect width="100%" height="100%" fill="lime"/> + + <switch> + <!-- test removing first child --> + <rect id="rect1" x="50" y="100" width="50" height="50" fill="red"/> + <rect x="50" y="100" width="50" height="50" fill="lime"/> + <rect x="50" y="100" width="50" height="50" fill="red"/> + </switch> + <switch> + <!-- test adding first child --> + <rect id="rect2b" x="200" y="100" width="50" height="50" fill="red"/> + </switch> + <switch> + <!-- test change child order --> + <rect id="rect3b" x="50" y="200" width="50" height="50" fill="red"/> + <rect id="rect3a" x="50" y="200" width="50" height="50" fill="lime"/> + </switch> + <switch> + <!-- test change child attribute --> + <rect id="rect4a" x="200" y="200" width="50" height="50" fill="red"/> + <rect x="200" y="200" width="50" height="50" fill="lime"/> + </switch> +</svg> diff --git a/layout/reftests/svg/dynamic-text-01-ref.svg b/layout/reftests/svg/dynamic-text-01-ref.svg new file mode 100644 index 0000000000..6d1ab0307e --- /dev/null +++ b/layout/reftests/svg/dynamic-text-01-ref.svg @@ -0,0 +1,15 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> + <title>Reference for dynamic text changes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 --> + <text id="text1" x="50" y="100" font-size="50">Test1</text> + <text id="text2" x="200" y="100" font-size="50">Test2</text> + <text id="text3" x="50" y="200" font-size="50">Test3</text> + <text id="text4" x="200" y="200" font-size="50">Test4</text> + <text id="text5" x="50" y="300" font-size="50">Test5</text> + <text id="text6" x="200" y="300" font-size="50">Test6</text> +</svg> diff --git a/layout/reftests/svg/dynamic-text-01.svg b/layout/reftests/svg/dynamic-text-01.svg new file mode 100644 index 0000000000..5134aa24ac --- /dev/null +++ b/layout/reftests/svg/dynamic-text-01.svg @@ -0,0 +1,28 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();"> + <title>Testcase for dynamic text changes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 --> + <script> + function m() { + document.getElementById("text1").firstChild.nodeValue = "Test1"; + document.getElementById("text2").setAttribute("x", "200"); + document.getElementById("text3").setAttribute("font-size", "50"); + document.getElementById("text4").setAttribute("font-size", "50"); + document.getElementById("text5").setAttribute("transform", "translate(50,0)"); + document.getElementById("text6").removeAttribute("filter"); + } + </script> + <filter id="shadow" filterUnits="objectBoundingBox"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + </filter> + <text id="text1" x="50" y="100" font-size="50"> </text> + <text id="text2" x="0" y="100" font-size="50">Test2</text> + <text id="text3" x="50" y="200" font-size="5">Test3</text> + <text id="text4" x="200" y="200" font-size="100">Test4</text> + <text id="text5" x="0" y="300" font-size="50">Test5</text> + <text id="text6" x="200" y="300" filter="url(#shadow)" font-size="50">Test6</text> +</svg> diff --git a/layout/reftests/svg/dynamic-text-02-ref.svg b/layout/reftests/svg/dynamic-text-02-ref.svg new file mode 100644 index 0000000000..64cc1e37e0 --- /dev/null +++ b/layout/reftests/svg/dynamic-text-02-ref.svg @@ -0,0 +1,18 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> + <title>Reference for dynamic text changes with filters</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 --> + <filter id="shadow" filterUnits="objectBoundingBox"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + </filter> + <text x="50" y="100" font-size="50" filter="url(#shadow)">Test1</text> + <text x="200" y="100" font-size="50" filter="url(#shadow)">Test2</text> + <text x="50" y="200" font-size="50" filter="url(#shadow)">Test3</text> + <text x="200" y="200" font-size="50" filter="url(#shadow)">Test4</text> + <text x="50" y="300" font-size="50" filter="url(#shadow)">Test5</text> + <text x="200" y="300" font-size="50" filter="url(#shadow)">Test6</text> +</svg> diff --git a/layout/reftests/svg/dynamic-text-02.svg b/layout/reftests/svg/dynamic-text-02.svg new file mode 100644 index 0000000000..5df7e61c73 --- /dev/null +++ b/layout/reftests/svg/dynamic-text-02.svg @@ -0,0 +1,28 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();"> + <title>Testcase for dynamic text changes with filters</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 --> + <script> + function m() { + document.getElementById("text1").firstChild.nodeValue = "Test1"; + document.getElementById("text2").setAttribute("x", "200"); + document.getElementById("text3").setAttribute("font-size", "50"); + document.getElementById("text4").setAttribute("font-size", "50"); + document.getElementById("text5").setAttribute("transform", "translate(50,0)"); + document.getElementById("text6").setAttribute("filter", "url(#shadow)"); + } + </script> + <filter id="shadow" filterUnits="objectBoundingBox"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + </filter> + <text id="text1" x="50" y="100" filter="url(#shadow)" font-size="50"> </text> + <text id="text2" x="0" y="100" filter="url(#shadow)" font-size="50">Test2</text> + <text id="text3" x="50" y="200" filter="url(#shadow)" font-size="5">Test3</text> + <text id="text4" x="200" y="200" filter="url(#shadow)" font-size="100">Test4</text> + <text id="text5" x="0" y="300" filter="url(#shadow)" font-size="50">Test5</text> + <text id="text6" x="200" y="300" font-size="50">Test6</text> +</svg> diff --git a/layout/reftests/svg/dynamic-text-03-ref.svg b/layout/reftests/svg/dynamic-text-03-ref.svg new file mode 100644 index 0000000000..d50459fd0a --- /dev/null +++ b/layout/reftests/svg/dynamic-text-03-ref.svg @@ -0,0 +1,19 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> + <title>Reference for dynamic text changes with filters</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 --> + <filter id="shadow" filterUnits="objectBoundingBox"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + </filter> + <g filter="url(#shadow)"> + <text x="50" y="100" font-size="50">Test1</text> + <text x="200" y="100" font-size="50">Test2</text> + <text x="50" y="200" font-size="50">Test3</text> + <text x="200" y="200" font-size="50">Test4</text> + <text x="50" y="300" font-size="50">Test5</text> + </g> +</svg> diff --git a/layout/reftests/svg/dynamic-text-03.svg b/layout/reftests/svg/dynamic-text-03.svg new file mode 100644 index 0000000000..ecb0ba0f42 --- /dev/null +++ b/layout/reftests/svg/dynamic-text-03.svg @@ -0,0 +1,28 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" onload="m();"> + <title>Testcase for dynamic text changes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=423998 --> + <script> + function m() { + document.getElementById("text1").firstChild.nodeValue = "Test1"; + document.getElementById("text2").setAttribute("x", "200"); + document.getElementById("text3").setAttribute("font-size", "50"); + document.getElementById("text4").setAttribute("font-size", "50"); + document.getElementById("text5").setAttribute("transform", "translate(50,0)"); + } + </script> + <filter id="shadow" filterUnits="objectBoundingBox"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + </filter> + <g filter="url(#shadow)" > + <text id="text1" x="50" y="100" font-size="50"> </text> + <text id="text2" x="0" y="100" font-size="50">Test2</text> + <text id="text3" x="50" y="200" font-size="5">Test3</text> + <text id="text4" x="200" y="200" font-size="100">Test4</text> + <text id="text5" x="0" y="300" font-size="50">Test5</text> + </g> +</svg> diff --git a/layout/reftests/svg/dynamic-text-04-ref.svg b/layout/reftests/svg/dynamic-text-04-ref.svg new file mode 100644 index 0000000000..fb81b2fbfc --- /dev/null +++ b/layout/reftests/svg/dynamic-text-04-ref.svg @@ -0,0 +1,34 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <title>Reference for dynamic changes of rotate attributes</title> + + <!-- based on http://www.w3.org/TR/SVG/images/text/tspan05.svg --> + + <text id="parent" font-size="32" x="40" y="40" rotate="5,15,25,35,45,55"> + Not + + <tspan id="child1" rotate="-10,-20,-30,-40"> + all characters + + <tspan id="child2" rotate="70,60,50,40,30,20,10"> + in + + <tspan id="child3"> + the + </tspan> + </tspan> + + <tspan x="40" y="90" id="child4"> + text + </tspan> + + have a + </tspan> + + <tspan id="child5" rotate="-10"> + specified + </tspan> + + rotation + </text> +</svg> diff --git a/layout/reftests/svg/dynamic-text-04.svg b/layout/reftests/svg/dynamic-text-04.svg new file mode 100644 index 0000000000..b2fab69ac5 --- /dev/null +++ b/layout/reftests/svg/dynamic-text-04.svg @@ -0,0 +1,49 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + class="reftest-wait"> + + <title>Testcase for dynamic changes of rotate attributes</title> + + <!-- based on http://www.w3.org/TR/SVG/images/text/tspan05.svg --> + + <script type="text/javascript"> + +document.addEventListener("MozReftestInvalidate", go, false); +setTimeout(go, 4000); // fallback for running outside reftest + +function go() { + document.getElementById("parent").setAttribute("rotate", "5,15,25,35,45,55"); + document.getElementById("child1").setAttribute("rotate", "-10,-20,-30,-40"); + document.getElementById("child2").setAttribute("rotate", "70,60,50,40,30,20,10"); + document.getElementById("child5").setAttribute("rotate", "-10"); + document.documentElement.removeAttribute("class"); +} + + </script> + <text id="parent" font-size="32" x="40" y="40"> + Not + + <tspan id="child1"> + all characters + + <tspan id="child2"> + in + + <tspan id="child3"> + the + </tspan> + </tspan> + + <tspan x="40" y="90" id="child4"> + text + </tspan> + + have a + </tspan> + + <tspan id="child5" rotate="90"> + specified + </tspan> + + rotation + </text> +</svg> diff --git a/layout/reftests/svg/dynamic-text-05.svg b/layout/reftests/svg/dynamic-text-05.svg new file mode 100644 index 0000000000..f1e8ddf625 --- /dev/null +++ b/layout/reftests/svg/dynamic-text-05.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + + <title>Testcase for text removal</title> + + <script> + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + document.getElementById("text").firstChild.nodeValue=''; + document.documentElement.removeAttribute("class"); + } + </script> + <rect width="100%" height="100%" fill="lime"/> + <text id="text" font-size="32" x="40" y="40">SHOULD NOT SEE ME</text> +</svg> diff --git a/layout/reftests/svg/dynamic-text-06.svg b/layout/reftests/svg/dynamic-text-06.svg new file mode 100644 index 0000000000..8c4d0f851e --- /dev/null +++ b/layout/reftests/svg/dynamic-text-06.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <script> + var curXScale = 3; + function sample() { + var g = document.getElementById("g"); + g.setAttribute("transform", "scale(" + curXScale + " 1)"); + + if (curXScale > 1) { + curXScale -= 0.1; + setTimeout("sample()", 1); + } else { + document.documentElement.removeAttribute('class'); + } + } + document.addEventListener("MozReftestInvalidate", sample, false); + setTimeout(sample, 4000); // fallback for running outside reftest + </script> + + <rect width="100%" height="100%" fill="lime"/> + <g font-family="sans-serif" font-weight="bold" font-size="120px" id="g"> + <text y="100">A</text> + <text y="250">V</text> + </g> + <rect width="100" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/dynamic-text-07-ref.svg b/layout/reftests/svg/dynamic-text-07-ref.svg new file mode 100644 index 0000000000..cafd26bacc --- /dev/null +++ b/layout/reftests/svg/dynamic-text-07-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference to check whitespace handling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=717870 --> + + <text x="10" y="50" font-size="50">A B</text> +</svg> diff --git a/layout/reftests/svg/dynamic-text-07.svg b/layout/reftests/svg/dynamic-text-07.svg new file mode 100644 index 0000000000..b2163094ab --- /dev/null +++ b/layout/reftests/svg/dynamic-text-07.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="m();"> + <title>Testcase to check whitespace handling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=717870 --> + + <text id="t" x="10" y="50" font-size="50">A </text> + <script> + function m() + { + // Force frame construction + document.documentElement.getBoundingClientRect(); + + // A dynamic change + document.getElementById("t").appendChild(document.createTextNode("B")); + + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-text-08-ref.svg b/layout/reftests/svg/dynamic-text-08-ref.svg new file mode 100644 index 0000000000..cb443bc66c --- /dev/null +++ b/layout/reftests/svg/dynamic-text-08-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Reference for scaling from zero</title> + + <text x="100" y="50" font-size="50" text-anchor="middle">ABC</text> +</svg> diff --git a/layout/reftests/svg/dynamic-text-08.svg b/layout/reftests/svg/dynamic-text-08.svg new file mode 100644 index 0000000000..ff55f28198 --- /dev/null +++ b/layout/reftests/svg/dynamic-text-08.svg @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="m();"> + + <title>Testcase to scaling from zero</title> + + <g id="g" transform="scale(0)"> + <text x="100" y="50" font-size="50" text-anchor="middle">ABC</text> + </g> + <script> + function m() + { + // Force frame construction + document.documentElement.getBoundingClientRect(); + + // A dynamic change + document.getElementById("g").removeAttribute("transform"); + + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-text-attr-01-ref.svg b/layout/reftests/svg/dynamic-text-attr-01-ref.svg new file mode 100644 index 0000000000..9f47f153d8 --- /dev/null +++ b/layout/reftests/svg/dynamic-text-attr-01-ref.svg @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font: 16px sans-serif"> + + <title>Reference for modifying attributes on child text content elements</title> + + <text x="200" y="20">Test 1</text> + <text x="20" y="60">Test 2</text> + <text x="20" y="80" rotate="10">Test 3</text> + <text> + <tspan x="200" y="100">Test 4</tspan> + </text> + <text> + <tspan x="20" y="140">Test 5</tspan> + </text> + <text> + <tspan x="20" y="160" rotate="30">Test 6</tspan> + </text> + <path id="p" d="M 20,180 h 400"/> + <text> + <textPath xlink:href="#p" startOffset="180">Test 7</textPath> + </text> + <text x="20" y="200" textLength="100" lengthAdjust="spacingAndGlyphs">Test 8</text> + <text> + <tspan x="20" y="220" textLength="100" lengthAdjust="spacingAndGlyphs">Test 9</tspan> + </text> +</svg> diff --git a/layout/reftests/svg/dynamic-text-attr-01.svg b/layout/reftests/svg/dynamic-text-attr-01.svg new file mode 100644 index 0000000000..3a58b46671 --- /dev/null +++ b/layout/reftests/svg/dynamic-text-attr-01.svg @@ -0,0 +1,46 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + style="font: 16px sans-serif"> + + <title>Testcase for modifying attributes on child text content elements</title> + + <text x="20" y="20" data-test="x=200">Test 1</text> + <text x="20" y="40" data-test="y=60">Test 2</text> + <text x="20" y="80" data-test="rotate=10">Test 3</text> + <text> + <tspan x="20" y="100" data-test="x=200">Test 4</tspan> + </text> + <text> + <tspan x="20" y="120" data-test="y=140">Test 5</tspan> + </text> + <text> + <tspan x="20" y="160" data-test="rotate=30">Test 6</tspan> + </text> + <path id="p" d="M 20,180 h 400"/> + <text> + <textPath xlink:href="#p" data-test="startOffset=180">Test 7</textPath> + </text> + <text x="20" y="200" textLength="100" lengthAdjust="spacing" data-test="lengthAdjust=spacingAndGlyphs">Test 8</text> + <!-- We don't support textLength/lengthAdjust on child text content + elements currently (bug 890692), so Test 9 doesn't really test + anything at the moment. But it is the only animatable enumerated + attribute value on text content elements to test. --> + <text> + <tspan x="20" y="220" textLength="100" lengthAdjust="spacing" data-test="lengthAdjust=spacingAndGlyphs">Test 9</tspan> + </text> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + [...document.querySelectorAll("[data-test]")].forEach(function(e) { + var [name, value] = e.getAttribute("data-test").split("="); + e.setAttribute(name, value); + }); + document.documentElement.removeAttribute("class"); + }, false); + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-textPath-01-ref.svg b/layout/reftests/svg/dynamic-textPath-01-ref.svg new file mode 100644 index 0000000000..b26811006a --- /dev/null +++ b/layout/reftests/svg/dynamic-textPath-01-ref.svg @@ -0,0 +1,15 @@ +<!-- + 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" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Referemce for dynamic changes to textPath</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=458010 --> + <defs> + <path id="m1" d="M 75.5 100 h 251"/> + </defs> + + <text> + <textPath xlink:href="#m1" font-size="20" fill="black">Should see this</textPath> + </text> +</svg> diff --git a/layout/reftests/svg/dynamic-textPath-01.svg b/layout/reftests/svg/dynamic-textPath-01.svg new file mode 100644 index 0000000000..01df1b70c5 --- /dev/null +++ b/layout/reftests/svg/dynamic-textPath-01.svg @@ -0,0 +1,28 @@ +<!-- + 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" class="reftest-wait" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that dynamic changes to the element for a given ID are reflected in textPath</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=458010 --> + <defs> + <path id="x" d="M 75.5 100 h 251"/> + </defs> + + <text> + <textPath xlink:href="#m1" font-size="20" fill="black">Should see this</textPath> + </text> + + <script> + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + // check that changing an id to "m1" lets l1 find it + var x = document.getElementById("x"); + x.setAttribute("id", "m1"); + + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-textPath-02-ref.svg b/layout/reftests/svg/dynamic-textPath-02-ref.svg new file mode 100644 index 0000000000..f4c1f6c02d --- /dev/null +++ b/layout/reftests/svg/dynamic-textPath-02-ref.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for changes to the IDs in the document causing textPath references to update</title> + + <defs> + <path id="p1" d="M 100,200 h 200"/> + </defs> + + <text style="16px sans-serif"><textPath xlink:href="#p1">Hello</textPath></text> +</svg> diff --git a/layout/reftests/svg/dynamic-textPath-02.svg b/layout/reftests/svg/dynamic-textPath-02.svg new file mode 100644 index 0000000000..6775258618 --- /dev/null +++ b/layout/reftests/svg/dynamic-textPath-02.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <title>Test for changes to the IDs in the document causing textPath references to update</title> + + <defs> + <path id="p1" d="M 100,100 h 200"/> + <path id="p1" d="M 100,200 h 200"/> + </defs> + + <text style="16px sans-serif"><textPath xlink:href="#p1">Hello</textPath></text> + + <script> + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + document.getElementsByTagName("path")[0].removeAttribute("id"); + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-textPath-03-ref.svg b/layout/reftests/svg/dynamic-textPath-03-ref.svg new file mode 100644 index 0000000000..420bd5da97 --- /dev/null +++ b/layout/reftests/svg/dynamic-textPath-03-ref.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for changes to the IDs in the document causing textPath references to update</title> + + <defs> + <path id="p1" d="M 100,100 h 200"/> + </defs> + + <text style="16px sans-serif"><textPath xlink:href="#p1">Hello</textPath></text> +</svg> diff --git a/layout/reftests/svg/dynamic-textPath-03.svg b/layout/reftests/svg/dynamic-textPath-03.svg new file mode 100644 index 0000000000..6c604daf0b --- /dev/null +++ b/layout/reftests/svg/dynamic-textPath-03.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" id="p1"> + <title>Test for changes to the IDs in the document causing textPath references to update</title> + + <defs> + <path id="p1" d="M 100,100 h 200"/> + </defs> + + <text style="16px sans-serif"><textPath xlink:href="#p1">Hello</textPath></text> + + <script> + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + document.documentElement.removeAttribute("id"); + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-textPath-04.html b/layout/reftests/svg/dynamic-textPath-04.html new file mode 100644 index 0000000000..870f61fd19 --- /dev/null +++ b/layout/reftests/svg/dynamic-textPath-04.html @@ -0,0 +1,28 @@ +<!doctype html> +<html class="reftest-wait"> +<div id="frame" style="background-color:lime;"> +<svg style="width: 437px; height: 45px; overflow:visible;" viewBox="0 0 437 45"> + <g font-size="40"> + <text x="40" y="40" fill="red">BAD</text> + <text fill="lime" stroke="lime" stroke-width="4"><textPath href="#path">BAD</textPath></text> + </g> + <path id="path" d="M40 40 h 100" fill="transparent"></path> +</svg> +<style> +html, body, div { + width: 100%; + height: 100%; + padding: none; + margin: 0; +} +</style> +<script> + let container = document.getElementById('frame'); + container.getBoundingClientRect(); + setTimeout(function() { + container.style.pointerEvents = 'all'; + document.documentElement.removeAttribute("class"); + }) +</script> +</div> +</html> diff --git a/layout/reftests/svg/dynamic-use-01.svg b/layout/reftests/svg/dynamic-use-01.svg new file mode 100644 index 0000000000..75de1e8072 --- /dev/null +++ b/layout/reftests/svg/dynamic-use-01.svg @@ -0,0 +1,91 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that dynamic changes to the element for a given ID are reflected in 'use'</title> + + <use id="u1" x="10%" xlink:href="#r1"/> + <script> + // force frame construction; test that parsing "r1" after frame construction + // is still bound to "u1" eventually + var rect = document.getElementById("u1").getBoundingClientRect(); + </script> + <rect width="11%" height="100%" fill="lime" id="r1"/> + + <rect width="11%" height="100%" fill="lime" id="x"/> + <use id="u2" x="20%" xlink:href="#r2"/> + <script> + var rect = document.getElementById("u2").getBoundingClientRect(); + // check that changing an id to "r2" lets u2 find it + var r2 = document.getElementById("x"); + r2.setAttribute("id", "r2"); + </script> + + <rect width="10%" height="100%" fill="red" id="r3"/> + <rect width="11%" height="100%" fill="lime" id="r3"/> + <use id="u3" x="30%" xlink:href="#r3"/> + <script> + var rect = document.getElementById("u3").getBoundingClientRect(); + // check that removing the bad r3 lets u3 find the good one + var r3 = document.getElementById("r3"); + r3.parentNode.removeChild(r3); + </script> + + <rect width="10%" height="100%" fill="red" id="r4"/> + <rect width="11%" height="100%" fill="lime" id="r4"/> + <use id="u4" x="40%" xlink:href="#r4"/> + <script> + var rect = document.getElementById("u4").getBoundingClientRect(); + // check that renaming the bad r4 lets u4 find the good one + var r4 = document.getElementById("r4"); + r4.removeAttribute("id"); + </script> + + <rect width="10%" height="100%" fill="red" id="r5"/> + <use id="u5" x="50%" xlink:href="#r5"/> + <script> + var rect = document.getElementById("u5").getBoundingClientRect(); + // check that changing u5's reference works + var u5 = document.getElementById("u5"); + u5.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#r1"); + </script> + + <rect width="10%" height="100%" fill="red" id="r6"/> + <rect width="11%" height="100%" fill="lime" id="r6-2"/> + <use id="u6" x="60%" xlink:href="#r6"/> + <script> + var rect = document.getElementById("u6").getBoundingClientRect(); + // check that inserting a good element before the bad r6 works + var r6 = document.getElementById("r6-2"); + r6.parentNode.removeChild(r6); + r6.setAttribute("id", "r6"); + document.documentElement.insertBefore(r6, document.documentElement.firstChild); + </script> + + <rect width="11%" height="100%" fill="lime" id="r7"/> + <rect width="10%" height="100%" fill="red" id="r7-2"/> + <use id="u7" x="70%" xlink:href="#r7"/> + <script> + var rect = document.getElementById("u7").getBoundingClientRect(); + // check that inserting a bad element after a good one doesn't break anything + var r7 = document.getElementById("r7-2"); + r7.parentNode.removeChild(r7); + r7.setAttribute("id", "r7"); + document.documentElement.appendChild(r7); + </script> + + <rect width="11%" height="100%" fill="lime" id="r8-2"/> + <rect width="10%" height="100%" fill="red" id="r8"/> + <use id="u8" x="80%" xlink:href="#r8"/> + <script> + var rect = document.getElementById("u8").getBoundingClientRect(); + // check that renaming a good element to r8 works + var r8 = document.getElementById("r8-2"); + r8.setAttribute("id", "r8"); + </script> + + <rect width="11%" height="100%" fill="lime"/> + <rect x="90%" width="11%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/dynamic-use-02.svg b/layout/reftests/svg/dynamic-use-02.svg new file mode 100644 index 0000000000..7a63eb14ee --- /dev/null +++ b/layout/reftests/svg/dynamic-use-02.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="background: lime;"> + <defs> + <rect width="100%" height="100%" id="r"/> + </defs> + <use id="u" xlink:href="#r" fill="red"/> + <script type="text/javascript"> + var u = document.getElementById("u"); + u.getBoundingClientRect(); + u.removeAttributeNS("http://www.w3.org/1999/xlink", "href"); + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-use-03.svg b/layout/reftests/svg/dynamic-use-03.svg new file mode 100644 index 0000000000..542b7e9355 --- /dev/null +++ b/layout/reftests/svg/dynamic-use-03.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="background: lime;" class="reftest-wait"> + <defs> + <symbol id="r"> + <rect fill="red" width="100%" height="100%"/> + </symbol> + </defs> + <use id="u" xlink:href="#r" /> + <script type="text/javascript"> + + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + var u = document.getElementById("u"); + u.setAttribute("width", "0"); + document.documentElement.removeAttribute('class'); + } + + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-use-04.svg b/layout/reftests/svg/dynamic-use-04.svg new file mode 100644 index 0000000000..9fa4632209 --- /dev/null +++ b/layout/reftests/svg/dynamic-use-04.svg @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="background: red;" class="reftest-wait"> + <defs> + <symbol id="r"> + <rect fill="lime" width="100%" height="100%"/> + </symbol> + </defs> + <use id="u" xlink:href="#r" width="0" /> + <script type="text/javascript"> + <![CDATA[ + + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + // Setting a non-zero value for width here should show the entire + // referenced <rect>. See + // https://www.w3.org/TR/SVG2/struct.html#UseElement + var u = document.getElementById("u"); + u.setAttribute("width", "100%"); + document.documentElement.removeAttribute('class'); + } + + ]]> +</script> +</svg> diff --git a/layout/reftests/svg/dynamic-use-05.svg b/layout/reftests/svg/dynamic-use-05.svg new file mode 100644 index 0000000000..056c89c062 --- /dev/null +++ b/layout/reftests/svg/dynamic-use-05.svg @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="Windows-1252"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="background: red;" class="reftest-wait"> + <defs> + <symbol id="sym1"> + <rect width="100" height="100" fill="lime" /> + </symbol> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <rect width="100" height="100" fill="red" /> + <use id="u" xlink:href="#sym1" width="1" /> + <script type="text/javascript"> + <![CDATA[ + + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + var u = document.getElementById("u"); + u.setAttribute("width", "100"); + document.documentElement.removeAttribute('class'); + } + + ]]> +</script> +</svg> diff --git a/layout/reftests/svg/dynamic-use-06.svg b/layout/reftests/svg/dynamic-use-06.svg new file mode 100644 index 0000000000..41974db946 --- /dev/null +++ b/layout/reftests/svg/dynamic-use-06.svg @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <defs> + <symbol id="sym1"> + <rect width="100" height="100" fill="lime" /> + </symbol> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <rect x="50%" width="100" height="100" fill="red" /> + <svg id="svg" width="50%"> + <use x="50%" xlink:href="#sym1"/> + </svg> + <script type="text/javascript"> + <![CDATA[ + + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + var svg = document.getElementById("svg"); + svg.setAttribute("width", "100%"); + document.documentElement.removeAttribute('class'); + } + + ]]> + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-use-07.svg b/layout/reftests/svg/dynamic-use-07.svg new file mode 100644 index 0000000000..8591e7ac4a --- /dev/null +++ b/layout/reftests/svg/dynamic-use-07.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <title>Testing that dynamic changes to the text element for a given ID are reflected in 'use'</title> + + <rect width="100%" height="100%" fill="lime"/> + <text id="t1" x="100" y="100" fill="lime" style="font: 16px sans-serif">hello <tspan fill="red">there</tspan></text> + <use y="100" xlink:href="#t1"/> + + <script> + function test() { + document.getElementsByTagName("tspan")[0].style.fill = "lime"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", test, false); + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-use-08.svg b/layout/reftests/svg/dynamic-use-08.svg new file mode 100644 index 0000000000..f6262654e2 --- /dev/null +++ b/layout/reftests/svg/dynamic-use-08.svg @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <title>Testing dynamic changes to use positioning</title> + + <style> + .use { + x: 100%; + } + </style> + <defs> + <rect id="r" width="100%" height="100%" fill="red"/> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <use id="u" xlink:href="#r"/> + + <script> + function test() { + document.getElementById("u").setAttribute("class", "use"); + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", test, false); + setTimeout(test, 4000); // fallback for running outside reftest + </script> +</svg> diff --git a/layout/reftests/svg/dynamic-use-nested-01-ref.svg b/layout/reftests/svg/dynamic-use-nested-01-ref.svg new file mode 100644 index 0000000000..8bdd26e902 --- /dev/null +++ b/layout/reftests/svg/dynamic-use-nested-01-ref.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink" > + + <g style="fill: blue;"> + <g id="g1"> + <rect id="rect" x="20%" width="4%" height="100%"/> + </g> + </g> + + <g style="fill: green;"> + <g id="g2"> + <use x="20%" xlink:href="#g1"/> + </g> + </g> + + <g style="fill: red;"> + <use x="20%" xlink:href="#g2"/> + </g> + +</svg> diff --git a/layout/reftests/svg/dynamic-use-nested-01a.svg b/layout/reftests/svg/dynamic-use-nested-01a.svg new file mode 100644 index 0000000000..2e14508664 --- /dev/null +++ b/layout/reftests/svg/dynamic-use-nested-01a.svg @@ -0,0 +1,33 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="boom();"> + +<script><![CDATA[ + +// reftest for bug 467498 + +function boom() +{ + var rect = document.getElementById("rect"); + rect.setAttribute("height", "100%"); +} + +]]></script> + + <g style="fill: blue;"> + <g id="g1"> + <rect id="rect" x="20%" width="4%" height="20%"/> + </g> + </g> + + <g style="fill: green;"> + <g id="g2"> + <use x="20%" xlink:href="#g1"/> + </g> + </g> + + <g style="fill: red;"> + <use x="20%" xlink:href="#g2"/> + </g> + +</svg> diff --git a/layout/reftests/svg/dynamic-use-nested-01b.svg b/layout/reftests/svg/dynamic-use-nested-01b.svg new file mode 100644 index 0000000000..47b04ec1c6 --- /dev/null +++ b/layout/reftests/svg/dynamic-use-nested-01b.svg @@ -0,0 +1,34 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="setTimeout(boom, 50);" class="reftest-wait"> + +<script><![CDATA[ + +// reftest for bug 467498 + +function boom() +{ + var rect = document.getElementById("rect"); + rect.setAttribute("height", "100%"); + document.documentElement.removeAttribute('class'); +} + +]]></script> + + <g style="fill: blue;"> + <g id="g1"> + <rect id="rect" x="20%" width="4%" height="20%"/> + </g> + </g> + + <g style="fill: green;"> + <g id="g2"> + <use x="20%" xlink:href="#g1"/> + </g> + </g> + + <g style="fill: red;"> + <use x="20%" xlink:href="#g2"/> + </g> + +</svg> diff --git a/layout/reftests/svg/dynamic-use-remove-width-ref.svg b/layout/reftests/svg/dynamic-use-remove-width-ref.svg new file mode 100644 index 0000000000..bc4909e0c6 --- /dev/null +++ b/layout/reftests/svg/dynamic-use-remove-width-ref.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<!-- this is a test for https://bugzilla.mozilla.org/show_bug.cgi?id=521682 --> + + <defs> + <svg id="d"> + <rect height="50%" width="100%" fill="blue" /> + </svg> + </defs> + + <use id="u" xlink:href="#d" height="100%" /> + +</svg> diff --git a/layout/reftests/svg/dynamic-use-remove-width.svg b/layout/reftests/svg/dynamic-use-remove-width.svg new file mode 100644 index 0000000000..ca30f2cad1 --- /dev/null +++ b/layout/reftests/svg/dynamic-use-remove-width.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<!-- this is a test for https://bugzilla.mozilla.org/show_bug.cgi?id=521682 --> + + <defs> + <svg id="d"> + <rect height="50%" width="100%" fill="blue" /> + </svg> + </defs> + + <use id="u" xlink:href="#d" height="100%" width="11%" /> + + <script> + function boom() + { + document.getElementById("u").removeAttribute("width"); + } + window.addEventListener("load", boom, false); + </script> + +</svg> diff --git a/layout/reftests/svg/dynamic-viewBox-change-01.svg b/layout/reftests/svg/dynamic-viewBox-change-01.svg new file mode 100644 index 0000000000..8f6766dbe3 --- /dev/null +++ b/layout/reftests/svg/dynamic-viewBox-change-01.svg @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" + id="target" viewBox="-50 -50 20 20" + preserveAspectRatio="none"> + <script> + function doTest() { + var target = document.getElementById("target"); + target.removeAttribute("viewBox"); + document.documentElement.removeAttribute("class"); + } + + document.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Lime background to match pass.svg --> + <rect height="100%" width="100%" fill="lime"/> + + <!-- Offscreen red rect - the initial |viewBox| makes this visible, + but it shouldn't be visible after we remove that attribute: --> + <rect x="-50" y="-50" width="20" height="20" fill="red"/> +</svg> diff --git a/layout/reftests/svg/dynamic-viewBox-change-02.svg b/layout/reftests/svg/dynamic-viewBox-change-02.svg new file mode 100644 index 0000000000..477341d0b2 --- /dev/null +++ b/layout/reftests/svg/dynamic-viewBox-change-02.svg @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" + id="target" viewBox="-50 -50 20 20" + preserveAspectRatio="none"> + <script> + function doTest() { + var target = document.getElementById("target"); + target.setAttribute("viewBox", ""); + document.documentElement.removeAttribute("class"); + } + + document.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Lime background to match pass.svg --> + <rect height="100%" width="100%" fill="lime"/> + + <!-- Offscreen red rect - the initial |viewBox| makes this visible, + but it shouldn't be visible after we clear that attribute: --> + <rect x="-50" y="-50" width="20" height="20" fill="red"/> +</svg> diff --git a/layout/reftests/svg/dynamic-viewBox-change-03.svg b/layout/reftests/svg/dynamic-viewBox-change-03.svg new file mode 100644 index 0000000000..cb7f1d7a88 --- /dev/null +++ b/layout/reftests/svg/dynamic-viewBox-change-03.svg @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" + id="target" viewBox="-50 -50 20 20" + preserveAspectRatio="none"> + <script> + function doTest() { + var target = document.getElementById("target"); + target.setAttribute("viewBox", "bogus value"); + document.documentElement.removeAttribute("class"); + } + + document.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Lime background to match pass.svg --> + <rect height="100%" width="100%" fill="lime"/> + + <!-- Offscreen red rect - the initial |viewBox| makes this visible, + but it shouldn't be visible after we tweak that attribute: --> + <rect x="-50" y="-50" width="20" height="20" fill="red"/> +</svg> diff --git a/layout/reftests/svg/explosive-use.svg b/layout/reftests/svg/explosive-use.svg new file mode 100644 index 0000000000..1985540df0 --- /dev/null +++ b/layout/reftests/svg/explosive-use.svg @@ -0,0 +1,413 @@ +<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <g id="thing"> + <g id="t0a"> + <use href="#t1a"/> + <use href="#t1b"/> + </g> + <g id="t0b"> + <use href="#t1a"/> + <use href="#t1b"/> + </g> + <g id="t1a"> + <use href="#t2a"/> + <use href="#t2b"/> + </g> + <g id="t1b"> + <use href="#t2a"/> + <use href="#t2b"/> + </g> + <g id="t2a"> + <use href="#t3a"/> + <use href="#t3b"/> + </g> + <g id="t2b"> + <use href="#t3a"/> + <use href="#t3b"/> + </g> + <g id="t3a"> + <use href="#t4a"/> + <use href="#t4b"/> + </g> + <g id="t3b"> + <use href="#t4a"/> + <use href="#t4b"/> + </g> + <g id="t4a"> + <use href="#t5a"/> + <use href="#t5b"/> + </g> + <g id="t4b"> + <use href="#t5a"/> + <use href="#t5b"/> + </g> + <g id="t5a"> + <use href="#t6a"/> + <use href="#t6b"/> + </g> + <g id="t5b"> + <use href="#t6a"/> + <use href="#t6b"/> + </g> + <g id="t6a"> + <use href="#t7a"/> + <use href="#t7b"/> + </g> + <g id="t6b"> + <use href="#t7a"/> + <use href="#t7b"/> + </g> + <g id="t7a"> + <use href="#t8a"/> + <use href="#t8b"/> + </g> + <g id="t7b"> + <use href="#t8a"/> + <use href="#t8b"/> + </g> + <g id="t8a"> + <use href="#t9a"/> + <use href="#t9b"/> + </g> + <g id="t8b"> + <use href="#t9a"/> + <use href="#t9b"/> + </g> + <g id="t9a"> + <use href="#t10a"/> + <use href="#t10b"/> + </g> + <g id="t9b"> + <use href="#t10a"/> + <use href="#t10b"/> + </g> + <g id="t10a"> + <use href="#t11a"/> + <use href="#t11b"/> + </g> + <g id="t10b"> + <use href="#t11a"/> + <use href="#t11b"/> + </g> + <g id="t11a"> + <use href="#t12a"/> + <use href="#t12b"/> + </g> + <g id="t11b"> + <use href="#t12a"/> + <use href="#t12b"/> + </g> + <g id="t12a"> + <use href="#t13a"/> + <use href="#t13b"/> + </g> + <g id="t12b"> + <use href="#t13a"/> + <use href="#t13b"/> + </g> + <g id="t13a"> + <use href="#t14a"/> + <use href="#t14b"/> + </g> + <g id="t13b"> + <use href="#t14a"/> + <use href="#t14b"/> + </g> + <g id="t14a"> + <use href="#t15a"/> + <use href="#t15b"/> + </g> + <g id="t14b"> + <use href="#t15a"/> + <use href="#t15b"/> + </g> + <g id="t15a"> + <use href="#t16a"/> + <use href="#t16b"/> + </g> + <g id="t15b"> + <use href="#t16a"/> + <use href="#t16b"/> + </g> + <g id="t16a"> + <use href="#t17a"/> + <use href="#t17b"/> + </g> + <g id="t16b"> + <use href="#t17a"/> + <use href="#t17b"/> + </g> + <g id="t17a"> + <use href="#t18a"/> + <use href="#t18b"/> + </g> + <g id="t17b"> + <use href="#t18a"/> + <use href="#t18b"/> + </g> + <g id="t18a"> + <use href="#t19a"/> + <use href="#t19b"/> + </g> + <g id="t18b"> + <use href="#t19a"/> + <use href="#t19b"/> + </g> + <g id="t19a"> + <use href="#t20a"/> + <use href="#t20b"/> + </g> + <g id="t19b"> + <use href="#t20a"/> + <use href="#t20b"/> + </g> + <g id="t20a"> + <use href="#t21a"/> + <use href="#t21b"/> + </g> + <g id="t20b"> + <use href="#t21a"/> + <use href="#t21b"/> + </g> + <g id="t21a"> + <use href="#t22a"/> + <use href="#t22b"/> + </g> + <g id="t21b"> + <use href="#t22a"/> + <use href="#t22b"/> + </g> + <g id="t22a"> + <use href="#t23a"/> + <use href="#t23b"/> + </g> + <g id="t22b"> + <use href="#t23a"/> + <use href="#t23b"/> + </g> + <g id="t23a"> + <use href="#t24a"/> + <use href="#t24b"/> + </g> + <g id="t23b"> + <use href="#t24a"/> + <use href="#t24b"/> + </g> + <g id="t24a"> + <use href="#t25a"/> + <use href="#t25b"/> + </g> + <g id="t24b"> + <use href="#t25a"/> + <use href="#t25b"/> + </g> + <g id="t25a"> + <use href="#t26a"/> + <use href="#t26b"/> + </g> + <g id="t25b"> + <use href="#t26a"/> + <use href="#t26b"/> + </g> + <g id="t26a"> + <use href="#t27a"/> + <use href="#t27b"/> + </g> + <g id="t26b"> + <use href="#t27a"/> + <use href="#t27b"/> + </g> + <g id="t27a"> + <use href="#t28a"/> + <use href="#t28b"/> + </g> + <g id="t27b"> + <use href="#t28a"/> + <use href="#t28b"/> + </g> + <g id="t28a"> + <use href="#t29a"/> + <use href="#t29b"/> + </g> + <g id="t28b"> + <use href="#t29a"/> + <use href="#t29b"/> + </g> + <g id="t29a"> + <use href="#t30a"/> + <use href="#t30b"/> + </g> + <g id="t29b"> + <use href="#t30a"/> + <use href="#t30b"/> + </g> + <g id="t30a"> + <use href="#t31a"/> + <use href="#t31b"/> + </g> + <g id="t30b"> + <use href="#t31a"/> + <use href="#t31b"/> + </g> + <g id="t31a"> + <use href="#t32a"/> + <use href="#t32b"/> + </g> + <g id="t31b"> + <use href="#t32a"/> + <use href="#t32b"/> + </g> + <g id="t32a"> + <use href="#t33a"/> + <use href="#t33b"/> + </g> + <g id="t32b"> + <use href="#t33a"/> + <use href="#t33b"/> + </g> + <g id="t33a"> + <use href="#t34a"/> + <use href="#t34b"/> + </g> + <g id="t33b"> + <use href="#t34a"/> + <use href="#t34b"/> + </g> + <g id="t34a"> + <use href="#t35a"/> + <use href="#t35b"/> + </g> + <g id="t34b"> + <use href="#t35a"/> + <use href="#t35b"/> + </g> + <g id="t35a"> + <use href="#t36a"/> + <use href="#t36b"/> + </g> + <g id="t35b"> + <use href="#t36a"/> + <use href="#t36b"/> + </g> + <g id="t36a"> + <use href="#t37a"/> + <use href="#t37b"/> + </g> + <g id="t36b"> + <use href="#t37a"/> + <use href="#t37b"/> + </g> + <g id="t37a"> + <use href="#t38a"/> + <use href="#t38b"/> + </g> + <g id="t37b"> + <use href="#t38a"/> + <use href="#t38b"/> + </g> + <g id="t38a"> + <use href="#t39a"/> + <use href="#t39b"/> + </g> + <g id="t38b"> + <use href="#t39a"/> + <use href="#t39b"/> + </g> + <g id="t39a"> + <use href="#t40a"/> + <use href="#t40b"/> + </g> + <g id="t39b"> + <use href="#t40a"/> + <use href="#t40b"/> + </g> + <g id="t40a"> + <use href="#t41a"/> + <use href="#t41b"/> + </g> + <g id="t40b"> + <use href="#t41a"/> + <use href="#t41b"/> + </g> + <g id="t41a"> + <use href="#t42a"/> + <use href="#t42b"/> + </g> + <g id="t41b"> + <use href="#t42a"/> + <use href="#t42b"/> + </g> + <g id="t42a"> + <use href="#t43a"/> + <use href="#t43b"/> + </g> + <g id="t42b"> + <use href="#t43a"/> + <use href="#t43b"/> + </g> + <g id="t43a"> + <use href="#t44a"/> + <use href="#t44b"/> + </g> + <g id="t43b"> + <use href="#t44a"/> + <use href="#t44b"/> + </g> + <g id="t44a"> + <use href="#t45a"/> + <use href="#t45b"/> + </g> + <g id="t44b"> + <use href="#t45a"/> + <use href="#t45b"/> + </g> + <g id="t45a"> + <use href="#t46a"/> + <use href="#t46b"/> + </g> + <g id="t45b"> + <use href="#t46a"/> + <use href="#t46b"/> + </g> + <g id="t46a"> + <use href="#t47a"/> + <use href="#t47b"/> + </g> + <g id="t46b"> + <use href="#t47a"/> + <use href="#t47b"/> + </g> + <g id="t47a"> + <use href="#t48a"/> + <use href="#t48b"/> + </g> + <g id="t47b"> + <use href="#t48a"/> + <use href="#t48b"/> + </g> + <g id="t48a"> + <use href="#t49a"/> + <use href="#t49b"/> + </g> + <g id="t48b"> + <use href="#t49a"/> + <use href="#t49b"/> + </g> + <g id="t49a"> + <use href="#t50a"/> + <use href="#t50b"/> + </g> + <g id="t49b"> + <use href="#t50a"/> + <use href="#t50b"/> + </g> + <g id="t50a"> + <circle cx="0" cy="0" r="5" /> + </g> + <g id="t50b"> + <circle cx="0" cy="0" r="5" /> + </g> + </g> + </defs> + <use x="5" y="5" href="#thing"/> +</svg> diff --git a/layout/reftests/svg/fallback-color-01a.svg b/layout/reftests/svg/fallback-color-01a.svg new file mode 100644 index 0000000000..3fedc0aa82 --- /dev/null +++ b/layout/reftests/svg/fallback-color-01a.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + +<title>Testcase for fallback colours</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 --> + + <rect x="0%" y="0%" width="100%" height="100%" fill="red"/> + <line x1="0%" y1="50%" x2="100%" y2="50%" stroke="url(#null) lime" stroke-width="200%"/> +</svg> diff --git a/layout/reftests/svg/fallback-color-01b.svg b/layout/reftests/svg/fallback-color-01b.svg new file mode 100644 index 0000000000..abc8206c68 --- /dev/null +++ b/layout/reftests/svg/fallback-color-01b.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + +<title>Testcase for fallback colours</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 --> + + <rect x="0%" y="0%" width="100%" height="100%" fill="red"/> + <rect x="0%" y="0%" width="100%" height="100%" fill="url(#null) lime"/> +</svg> diff --git a/layout/reftests/svg/fallback-color-02-ref.svg b/layout/reftests/svg/fallback-color-02-ref.svg new file mode 100644 index 0000000000..c9b9e32dfc --- /dev/null +++ b/layout/reftests/svg/fallback-color-02-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + +<title>Reference for stroke fallback colours</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 --> + + <rect x="0%" y="0%" width="100%" height="100%" fill="white"/> +</svg> diff --git a/layout/reftests/svg/fallback-color-02.svg b/layout/reftests/svg/fallback-color-02.svg new file mode 100644 index 0000000000..e97da0ca66 --- /dev/null +++ b/layout/reftests/svg/fallback-color-02.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + +<title>Testcase for fallback colours</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 --> +<!-- See also http://www.w3.org/Graphics/SVG/Test/20061213/htmlObjectHarness/full-pservers-grad-17-b.html --> + + <line x1="0%" y1="50%" x2="100%" y2="50%" stroke="url(#null)" stroke-width="200%"/> +</svg> diff --git a/layout/reftests/svg/fallback-color-03.svg b/layout/reftests/svg/fallback-color-03.svg new file mode 100644 index 0000000000..0beab9dc0a --- /dev/null +++ b/layout/reftests/svg/fallback-color-03.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + +<title>Testcase for fallback colours</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 --> + + <defs> + <linearGradient id="grad"> + <stop offset="0" stop-color="black"/> + <stop offset="1" stop-color="white"/> + </linearGradient> + </defs> + + <rect x="0%" y="0%" width="100%" height="100%" fill="red"/> + <line x1="0%" y1="50%" x2="100%" y2="50%" stroke="url(#grad) lime" stroke-width="200%"/> +</svg> diff --git a/layout/reftests/svg/fallback-color-04.svg b/layout/reftests/svg/fallback-color-04.svg new file mode 100644 index 0000000000..556718140b --- /dev/null +++ b/layout/reftests/svg/fallback-color-04.svg @@ -0,0 +1,38 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + + <title>Testcase for fallback colours</title> + + <defs> + <filter id="dilate"> + <feMorphology operator="dilate" radius="6"/> + </filter> + </defs> + + <rect x="0%" y="0%" width="100%" height="100%" fill="lime"/> + <text x="10" y="50" font-size="50" + stroke-width="8" stroke="red" fill="none"> + A B + </text> + <text x="10" y="50" font-size="50" + stroke-width="8" stroke="url(#null) lime" fill="none" filter="url(#dilate)"> + A B + </text> + <text x="200" y="50" font-size="50" fill="red"> + A B + </text> + <text x="200" y="50" font-size="50" fill="url(#null) lime" filter="url(#dilate)"> + A B + </text> + <text x="10" y="200" font-size="50" fill="red" + stroke-width="1" stroke="red"> + A B + </text> + <text x="10" y="200" font-size="50" fill="url(#null) lime" + stroke-width="1" stroke="url(#null) lime" filter="url(#dilate)"> + A B + </text> +</svg> diff --git a/layout/reftests/svg/fallback-color-05-ref.svg b/layout/reftests/svg/fallback-color-05-ref.svg new file mode 100644 index 0000000000..a7031be7da --- /dev/null +++ b/layout/reftests/svg/fallback-color-05-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Reference for context-fill fallback colour</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1352258 --> + + <rect width="100%" height="100%" fill="black"/> +</svg> diff --git a/layout/reftests/svg/fallback-color-05a.svg b/layout/reftests/svg/fallback-color-05a.svg new file mode 100644 index 0000000000..537a15955c --- /dev/null +++ b/layout/reftests/svg/fallback-color-05a.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for context-fill fallback colour</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1352258 --> + + <rect width="100%" height="100%" fill="context-fill"/> +</svg> diff --git a/layout/reftests/svg/fallback-color-05b.svg b/layout/reftests/svg/fallback-color-05b.svg new file mode 100644 index 0000000000..a281172fd0 --- /dev/null +++ b/layout/reftests/svg/fallback-color-05b.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for context-stroke fallback colour</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1807479 --> + + <rect width="100%" height="100%" fill="context-stroke"/> +</svg> diff --git a/layout/reftests/svg/fallback-color-06.svg b/layout/reftests/svg/fallback-color-06.svg new file mode 100644 index 0000000000..8fde9b1c5e --- /dev/null +++ b/layout/reftests/svg/fallback-color-06.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + +<title>Testcase for fallback colours</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 --> + + <rect x="0%" y="0%" width="100%" height="100%" fill="lime"/> + <rect x="0%" y="0%" width="100%" height="100%" fill="url(#null)"/> +</svg> diff --git a/layout/reftests/svg/filter-and-clip-ref.svg b/layout/reftests/svg/filter-and-clip-ref.svg new file mode 100644 index 0000000000..e8c18009f7 --- /dev/null +++ b/layout/reftests/svg/filter-and-clip-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
+ <rect x="100" y="50" width="100" height="100" fill="green" />
+</svg>
diff --git a/layout/reftests/svg/filter-and-clip.svg b/layout/reftests/svg/filter-and-clip.svg new file mode 100644 index 0000000000..be056a47f2 --- /dev/null +++ b/layout/reftests/svg/filter-and-clip.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
+ <defs>
+ <filter id="shift">
+ <feOffset dx="50"/>
+ </filter>
+ <clipPath id="clip">
+ <rect x="100" y="50" width="100" height="100"/>
+ </clipPath>
+ </defs>
+ <rect x="100" y="50" width="100" height="100" fill="red"/>
+ <rect x="50" y="50" width="200" height="100" fill="green" filter="url(#shift)" clip-path="url(#clip)"/>
+</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/filter-basic-01.svg b/layout/reftests/svg/filter-basic-01.svg new file mode 100644 index 0000000000..23d3519f7c --- /dev/null +++ b/layout/reftests/svg/filter-basic-01.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + + <title>Testcase for invalid filter</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=407463 --> + + <rect x="0%" y="0%" width="100%" height="100%" fill="lime" filter="url(#null)"/> +</svg> diff --git a/layout/reftests/svg/filter-basic-02.svg b/layout/reftests/svg/filter-basic-02.svg new file mode 100644 index 0000000000..02e1d35967 --- /dev/null +++ b/layout/reftests/svg/filter-basic-02.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + + <title>Testcase for invalid filter</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=407463 --> + + <defs> + <filter id="null"/> + </defs> + <rect x="0%" y="0%" width="100%" height="100%" fill="lime"/> + <rect x="0%" y="0%" width="100%" height="100%" fill="red" filter="url(#null)"/> +</svg> diff --git a/layout/reftests/svg/filter-basic-03.svg b/layout/reftests/svg/filter-basic-03.svg new file mode 100644 index 0000000000..e2f1db1adf --- /dev/null +++ b/layout/reftests/svg/filter-basic-03.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + + <title>Testcase for invalid filter</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=407463 --> + + <defs> + <filter id="nullreg" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"/> + </defs> + <rect x="0%" y="0%" width="100%" height="100%" fill="lime"/> + <rect x="0%" y="0%" width="100%" height="100%" fill="red" filter="url(#nullreg)"/> +</svg> diff --git a/layout/reftests/svg/filter-bounds-01.svg b/layout/reftests/svg/filter-bounds-01.svg new file mode 100644 index 0000000000..17bfeb60c1 --- /dev/null +++ b/layout/reftests/svg/filter-bounds-01.svg @@ -0,0 +1,24 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <title>Testcase for checking that filter bounds include stroke width</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=647687 --> + + <defs> + <filter id="f1" filterUnits="userSpaceOnUse" x="150" y="150" width="200" height="200"> + <feOffset in="SourceGraphic"/> + </filter> + </defs> + + <rect height="100%" width="100%" fill="lime"/> + + <rect x="150" y="150" height="200" width="200" fill="red"/> + + <rect x="200" y="200" height="100" width="100" stroke-width="100" + fill="none" stroke="lime" filter="url(#f1)"/> +</svg> diff --git a/layout/reftests/svg/filter-bounds-02.svg b/layout/reftests/svg/filter-bounds-02.svg new file mode 100644 index 0000000000..d9c0d474c9 --- /dev/null +++ b/layout/reftests/svg/filter-bounds-02.svg @@ -0,0 +1,25 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <title>Testcase for checking that filter bounds include stroke width</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=647687 --> + + <defs> + <filter id="f1" filterUnits="objectBoundingBox"> + <feFlood flood-color="red"/> + </filter> + </defs> + + <rect height="100%" width="100%" fill="lime"/> + + <polygon points="200,200 300,200 300,300 200,300" stroke-width="100" + fill="none" stroke="lime" filter="url(#f1)"/> + + <rect x="150" y="150" height="200" width="200" fill="lime"/> + +</svg> diff --git a/layout/reftests/svg/filter-extref-differentOrigin-01.svg b/layout/reftests/svg/filter-extref-differentOrigin-01.svg new file mode 100644 index 0000000000..ce5d632546 --- /dev/null +++ b/layout/reftests/svg/filter-extref-differentOrigin-01.svg @@ -0,0 +1,20 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- In case we actually _can_ access the external resource (e.g. on Android + where reftests are served as http:// instead of file://), we include + this <use> element to be sure the resource loads before onload so that + we'll fail reliably. --> + <use xlink:href="../filters.svg#empty" /> + + <!-- giant lime rect, to match pass.svg --> + <rect height="100%" width="100%" fill="lime" /> + + <!-- The filter shouldn't resolve, so this should be transparent: --> + <rect height="100%" width="100%" fill="red" + filter="url(../filters.svg#NonWhiteToBlack)"/> +</svg> diff --git a/layout/reftests/svg/filter-foreignObject-01.svg b/layout/reftests/svg/filter-foreignObject-01.svg new file mode 100644 index 0000000000..0fc9708ee5 --- /dev/null +++ b/layout/reftests/svg/filter-foreignObject-01.svg @@ -0,0 +1,16 @@ +<!-- + 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" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that foreignobject works in filters</title> + <foreignObject width="100%" height="100%" filter="url(#f1)"> + <html:div style="width:100%; height:100%; background:lime;"> + </html:div> + </foreignObject> + <filter id="f1" x="0" y="0" width="100%" height="100%"> + <feOffset/> + </filter> +</svg> diff --git a/layout/reftests/svg/filter-in-mask-01.svg b/layout/reftests/svg/filter-in-mask-01.svg new file mode 100644 index 0000000000..06c987f241 --- /dev/null +++ b/layout/reftests/svg/filter-in-mask-01.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" > + <defs> + <filter x="0" y="0" width="1" height="1" id="filter"> + <feOffset/> + </filter> + <mask id="mask" x="0" y="0" width="1" height="1"> + <g filter="url(#filter)"> + <rect width="100%" height="100%" fill="white"/> + </g> + </mask> + </defs> + <rect width="100%" height="100%" fill="red"/> + <g mask="url(#mask)"> + <rect width="100%" height="100%" fill="lime"/> + </g> +</svg> diff --git a/layout/reftests/svg/filter-in-mask-ref.html b/layout/reftests/svg/filter-in-mask-ref.html new file mode 100644 index 0000000000..be07a24d8c --- /dev/null +++ b/layout/reftests/svg/filter-in-mask-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html style lang=en> +<meta charset=utf-8> +</head> +<body> + <svg viewBox="0 0 225 23" xmlns=http://www.w3.org/2000/svg> + <style>.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#fff}</style> + <defs> + <filter filterUnits=userSpaceOnUse height=22.9 id=Adobe_OpacityMaskFilter_3_ width=27 x=14 y=0> + <fecolormatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></fecolormatrix> + </filter> + </defs> + <mask height=22.9 id=mask-2_4_ maskUnits=userSpaceOnUse width=27 x=14 y=0> + <g> + <path class=st1 d="M0 0h170V23H0z" id=path-1_4_></path> + </g> + </mask> + <rect x=10 y=0 width=1000 height=100 fill=green></rect> + <rect x=10 y=0 width=1000 height=100 mask=url(#mask-2_4_) fill=red></rect> + <rect x=10 y=0 width=1000 height=6 fill=blue></rect> + </svg> diff --git a/layout/reftests/svg/filter-in-mask.html b/layout/reftests/svg/filter-in-mask.html new file mode 100644 index 0000000000..7bb8ddf28f --- /dev/null +++ b/layout/reftests/svg/filter-in-mask.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html style lang=en> +<meta charset=utf-8> +</head> +<body> + <svg viewBox="0 0 225 23" xmlns=http://www.w3.org/2000/svg> + <style>.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#fff}</style> + <defs> + <filter filterUnits=userSpaceOnUse height=22.9 id=Adobe_OpacityMaskFilter_3_ width=27 x=14 y=0> + <fecolormatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"></fecolormatrix> + </filter> + </defs> + <mask height=22.9 id=mask-2_4_ maskUnits=userSpaceOnUse width=27 x=14 y=0> + <g filter=url(#Adobe_OpacityMaskFilter_3_)> + <path class=st1 d="M0 0h170V23H0z" id=path-1_4_></path> + </g> + </mask> + <rect x=10 y=0 width=1000 height=100 fill=green></rect> + <rect x=10 y=0 width=1000 height=100 mask=url(#mask-2_4_) fill=red></rect> + <rect x=10 y=0 width=1000 height=6 fill=blue></rect> + </svg> diff --git a/layout/reftests/svg/filter-invalidation-01.svg b/layout/reftests/svg/filter-invalidation-01.svg new file mode 100644 index 0000000000..442b3a7312 --- /dev/null +++ b/layout/reftests/svg/filter-invalidation-01.svg @@ -0,0 +1,25 @@ +<!-- + 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" class="reftest-wait"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=463939 --> + <title>Test that the area that's covered by a filtered element is invalidated when it moves</title> + <filter id="filter"> + <feGaussianBlur stdDeviation="0.1"/> + </filter> + <script type="text/javascript">//<![CDATA[ + +function hide_red_rect() +{ + document.getElementById("r").setAttribute("y", "-200%"); + document.documentElement.removeAttribute('class'); +} + +document.addEventListener("MozReftestInvalidate", hide_red_rect, false); +setTimeout(hide_red_rect, 4000); // fallback for running outside reftest + + //]]></script> + <rect width="100%" height="100%" fill="lime"/> + <rect width="100%" height="100%" fill="red" id="r" filter="url(#filter)"/> +</svg> diff --git a/layout/reftests/svg/filter-on-continuation-box-01.html b/layout/reftests/svg/filter-on-continuation-box-01.html new file mode 100644 index 0000000000..cc614f1e48 --- /dev/null +++ b/layout/reftests/svg/filter-on-continuation-box-01.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<style type="text/css"> + div { + border: 1px solid grey; + width: 100px; + color: black; + } +</style> + +<div> + <span id="myspan">Wrapped sentence</span> +</div> + +<script> + window.addEventListener("MozReftestInvalidate", + function() { + document.getElementById("myspan").style.filter = "opacity(50%)"; + document.documentElement.classList.remove("reftest-wait"); + }); +</script> + +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/filter-on-continuation-box-ref.html b/layout/reftests/svg/filter-on-continuation-box-ref.html new file mode 100644 index 0000000000..85dcc383a4 --- /dev/null +++ b/layout/reftests/svg/filter-on-continuation-box-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<style type="text/css"> + div { + border: 1px solid grey; + width: 100px; + color: rgba(0,0,0,0.5); + } +</style> + +<div> + <span id="myspan">Wrapped sentence</span> +</div> + +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/filter-result-01-ref.svg b/layout/reftests/svg/filter-result-01-ref.svg new file mode 100644 index 0000000000..cb84d3058a --- /dev/null +++ b/layout/reftests/svg/filter-result-01-ref.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Reference for filter result property</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=935902 --> + + <defs> + <filter id="f1"> + <feGaussianBlur id="gb" in="SourceGraphic" stdDeviation="4" result="blur"/> + <feColorMatrix values="1 0 0 0 0 0 0.333 0 0 0 0 0 1 0 0 0 0 0 1 0" in="blur"/> + </filter> + </defs> + <circle cx="100" cy="50" r="50" fill="yellow" filter="url('#f1')"/> +</svg> diff --git a/layout/reftests/svg/filter-result-01.svg b/layout/reftests/svg/filter-result-01.svg new file mode 100644 index 0000000000..2a2a4cea2b --- /dev/null +++ b/layout/reftests/svg/filter-result-01.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" onload="createFilter();"> + + <title>Testcase for filter result property</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=935902 --> + + <defs> + <filter id="f1"> + <feGaussianBlur id="gb" in="SourceGraphic" stdDeviation="4"/> + <feColorMatrix values="1 0 0 0 0 0 0.333 0 0 0 0 0 1 0 0 0 0 0 1 0" in="blur"/> + </filter> + </defs> + <circle cx="100" cy="50" r="50" fill="yellow" filter="url('#f1')"/> + <script type="text/javascript"> + function createFilter() { + document.getElementById('gb').result.baseVal = 'blur'; + } + </script> +</svg> diff --git a/layout/reftests/svg/filter-scaled-01.svg b/layout/reftests/svg/filter-scaled-01.svg new file mode 100644 index 0000000000..c85eb3bb84 --- /dev/null +++ b/layout/reftests/svg/filter-scaled-01.svg @@ -0,0 +1,18 @@ +<svg width="100%" height="100%" preserveAspectRatio="none" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <title>Testcase for scaled filter with non-integer x and y and objectBoundingBox</title> + <defs> + <filter id="filter" filterUnits="objectBoundingBox" x="0.5" y="0.5" width="0.25" height="0.25"> + <feFlood flood-color="red" width="1" height="1" /> + </filter> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + <g transform="scale(400)"> + <rect width="1" height="1" filter="url(#filter)" /> + </g> + <rect x="200" y="200" width="100" height="100" fill="lime" /> + +</svg> diff --git a/layout/reftests/svg/filter-scaled-02-ref.html b/layout/reftests/svg/filter-scaled-02-ref.html new file mode 100644 index 0000000000..722271375d --- /dev/null +++ b/layout/reftests/svg/filter-scaled-02-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <body style="transform: scale(1.4)"> + <div style="position: absolute; top: 20px; left: 200px"> + <svg width="200" viewBox="0 0 222 222"> + <rect fill="green" x="120" y="100" width="100" height="120"/> + <rect fill="none" stroke="black" stroke-width="4" + x="120" y="100" width="100" height="120"/> + </svg> + </div> + </body> +</html> diff --git a/layout/reftests/svg/filter-scaled-02.html b/layout/reftests/svg/filter-scaled-02.html new file mode 100644 index 0000000000..60b00f8a35 --- /dev/null +++ b/layout/reftests/svg/filter-scaled-02.html @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <title>Test case for scaled SVG with filter region</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=765107 --> + </head> + <body style="transform: scale(1.4)"> + <div style="position: absolute; top: 20px; left: 200px"> + <svg width="200" viewBox="0 0 222 222"> + <filter id="filter" x="-20%" width="140%"> + <feMerge> + <feMergeNode/> + </feMerge> + </filter> + <rect fill="green" x="120" y="100" width="100" height="120" + filter="url(#filter)"/> + <rect fill="none" stroke="black" stroke-width="4" + x="120" y="100" width="100" height="120"/> + </svg> + </div> + </body> +</html> diff --git a/layout/reftests/svg/filter-translated-01-ref.svg b/layout/reftests/svg/filter-translated-01-ref.svg new file mode 100644 index 0000000000..3a77724572 --- /dev/null +++ b/layout/reftests/svg/filter-translated-01-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <g transform="translate(100)"> + <rect fill="lime" width="50" height="50"/> + </g> +</svg> diff --git a/layout/reftests/svg/filter-translated-01.svg b/layout/reftests/svg/filter-translated-01.svg new file mode 100644 index 0000000000..aeb1747524 --- /dev/null +++ b/layout/reftests/svg/filter-translated-01.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="f" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"> + <feOffset/> + </filter> + <g transform="translate(100)" filter="url(#f)"> + <rect fill="lime" width="50" height="50"/> + </g> +</svg> diff --git a/layout/reftests/svg/filter-use-element-01.svg b/layout/reftests/svg/filter-use-element-01.svg new file mode 100644 index 0000000000..48ff4f915e --- /dev/null +++ b/layout/reftests/svg/filter-use-element-01.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="myFilter" filterUnits="userSpaceOnUse" x="100" y="100" width="100" height="100"> + <feGaussianBlur stdDeviation="20 10"/> + </filter> + <rect x="0" y="0" width="100" height="100" fill="red" id="abc"/> + </defs> + <rect x="0" y="0" width="100%" height="100%" fill="lime"/> + <use xlink:href="#abc" x="100" y="100" filter="url(#myFilter)"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/filtered-image-in-pattern-01.svg b/layout/reftests/svg/filtered-image-in-pattern-01.svg new file mode 100644 index 0000000000..d24786d619 --- /dev/null +++ b/layout/reftests/svg/filtered-image-in-pattern-01.svg @@ -0,0 +1,14 @@ +<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="no-op"> + <feColorMatrix type="saturate" values="1" /> + </filter> + <pattern id="pattern" height="50%" width="50%"> + <rect width="24" height="24" fill="red"/> + <!-- 100 x 100 lime image, bigger than the width/height of the element --> + <image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjA4ZXKc4QAAAeNJREFUeF7t0sERgDAQw0DSf9FAqvA+lBRwGsnnef/fgwzcIH3HQDEwAxiOs9QVSUEwAxjOapfO3YJgBjAcZ6krkoJgBjCc1S6duwXBDGA4zlJXJAXBDGA4q106dwuCGcBwnKWuSAqCGcBwVrt07hYEM4DhOEtdkRQEM4DhrHbp3C0IZgDDcZa6IikIZgDDWe3SuVsQzACG4yx1RVIQzACGs9qlc7cgmAEMx1nqiqQgmAEMZ7VL525BMAMYjrPUFUlBMAMYzmqXzt2CYAYwHGepK5KCYAYwnNUunbsFwQxgOM5SVyQFwQxgOKtdOncLghnAcJylrkgKghnAcFa7dO4WBDOA4ThLXZEUBDOA4ax26dwtCGYAw3GWuiIpCGYAw1nt0rlbEMwAhuMsdUVSEMwAhrPapXO3IJgBDMdZ6oqkIJgBDGe1S+duQTADGI6z1BVJQTADGM5ql87dgmAGMBxnqSuSgmAGMJzVLp27BcEMYDjOUlckBcEMYDirXTp3C4IZwHCcpa5ICoIZwHBWu3TuFgQzgOE4S12RFAQzgOGsduncLQhmAMNxlroiKQhmAMNZ7dK5WxDMAIbjLHVFUhDMAIaz2qVztyCYAQzHWeqKpCCYAQxntUvnbkEwAxiOs9QRyQemSBErQhZ+LAAAAABJRU5ErkJggg==" height="24" width="24" filter="url(#no-op)"/> + </pattern> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <rect x="100" y="100" width="48" height="48" fill="url(#pattern)" /> +</svg> diff --git a/layout/reftests/svg/filters-and-group-opacity-01-ref.svg b/layout/reftests/svg/filters-and-group-opacity-01-ref.svg new file mode 100644 index 0000000000..14299cf9ec --- /dev/null +++ b/layout/reftests/svg/filters-and-group-opacity-01-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="200%" fill="white"/> + <rect width="100%" height="200%" fill="blue" fill-opacity=".5"/> +</svg> diff --git a/layout/reftests/svg/filters-and-group-opacity-01.svg b/layout/reftests/svg/filters-and-group-opacity-01.svg new file mode 100644 index 0000000000..0c597809af --- /dev/null +++ b/layout/reftests/svg/filters-and-group-opacity-01.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Test that filters and group opacity are applied in the correct order on an element</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=524104 --> + + <filter id="filter" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%"> + <feFlood in="SourceGraphic" flood-color="blue"/> + </filter> + + <rect width="1" height="1" filter="url(#filter)" opacity=".5"/> + +</svg> diff --git a/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html b/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html new file mode 100644 index 0000000000..573c6e419d --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/long-chain-ref.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filter Chains: Long Filter Chain</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + /* The first 8 CSS filter functions result in this color. */ + background-color: rgba(118, 153, 44, 0.8); + /* Use an equivalent SVG filter for the last 2 CSS filter functions. */ + filter: url(#blur-and-drop-shadow); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square with a green drop shadow.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur-and-drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + <feDropShadow dx="10" dy="10" stdDeviation="10" flood-color="#0f0" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filter-chains/long-chain.html b/layout/reftests/svg/filters/css-filter-chains/long-chain.html new file mode 100644 index 0000000000..b99468eee2 --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/long-chain.html @@ -0,0 +1,41 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filter Chains: Long Filter Chain</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty"> + <link rel="match" href="long-chain-ref.html"> + <meta name="assert" + content="Multiple chained CSS filter functions of different types should + render correctly."> + <style type="text/css"> + #target { + /* + Chain together all 10 CSS filter functions defined in the Filter Effects + Level 1 specification. + */ + filter: brightness(2) + contrast(0.4) + grayscale(0.2) + hue-rotate(270deg) + invert(0.6) + opacity(0.8) + saturate(10) + sepia(0.4) + blur(3px) + drop-shadow(10px 10px 10px #0f0); + background-color: red; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square with a green drop shadow.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html b/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html new file mode 100644 index 0000000000..a769783b2b --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/moz-element-ref.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters Chains: Use a Filtered Element as the Background of Another Element</title> + <style type="text/css"> + #src { + background-color: #0f0; + width: 100px; + height: 100px; + } + #dest { + margin-top: 10px; + background: #0f0; + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>You should see a small green square followed by a large green square.</p> + <div id="src"></div> + <div id="dest"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filter-chains/moz-element.html b/layout/reftests/svg/filters/css-filter-chains/moz-element.html new file mode 100644 index 0000000000..245f6a6464 --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/moz-element.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters Chains: Use a Filtered Element as the Background of Another Element</title> + <style type="text/css"> + #src { + filter: hue-rotate(90deg) saturate(10); + background-color: #f00; + width: 100px; + height: 100px; + } + #dest { + margin-top: 10px; + background: -moz-element(#src); + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <p>You should see a small green square followed by a large green square.</p> + <div id="src"></div> + <div id="dest"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filter-chains/reftest.list b/layout/reftests/svg/filters/css-filter-chains/reftest.list new file mode 100644 index 0000000000..f9b9523329 --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/reftest.list @@ -0,0 +1,7 @@ +# These tests verify that CSS filter chains behave properly. +# e.g. filter: blur(3px) grayscale(0.5) invert(0.2); + +# Some platforms render this complex filter chain a little differently, and that's ok. +fuzzy(4-10,12000-20260) == long-chain.html long-chain-ref.html # Win10: Bug 1258241 +== moz-element.html moz-element-ref.html +fuzzy(0-15,0-14056) == same-filter.html same-filter-ref.html diff --git a/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html b/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html new file mode 100644 index 0000000000..ff5de04da9 --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/same-filter-ref.html @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filter Chains: Filters of the Same Type</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#blur); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="1" color-interpolation-filters="sRGB"/> + <feGaussianBlur stdDeviation="2" color-interpolation-filters="sRGB"/> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filter-chains/same-filter.html b/layout/reftests/svg/filters/css-filter-chains/same-filter.html new file mode 100644 index 0000000000..9dd79d4db4 --- /dev/null +++ b/layout/reftests/svg/filters/css-filter-chains/same-filter.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filter Chains: Filters of the Same Type</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty"> + <link rel="match" href="same-filter-ref.html"> + <meta name="assert" + content="Multiple chained CSS filter functions of the same type should + render correctly."> + <style type="text/css"> + #target { + filter: blur(1px) blur(2px) blur(3px); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-calc-negative-ref.html b/layout/reftests/svg/filters/css-filters/blur-calc-negative-ref.html new file mode 100644 index 0000000000..fc260c2e22 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-calc-negative-ref.html @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur an HTML Element Using a Negative Calc Function Value</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-calc-negative-ref.html"> + <meta name="assert" + content="Given a calc() value that evaluates to a negative result, the + CSS blur filter function should not blur an HTML element."> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-calc-negative.html b/layout/reftests/svg/filters/css-filters/blur-calc-negative.html new file mode 100644 index 0000000000..694c6cfc97 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-calc-negative.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur an HTML Element Using a Negative Calc Function Value</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-calc-negative-ref.html"> + <meta name="assert" + content="Given a calc() value that evaluates to a negative result, the + CSS blur filter function should not blur an HTML element."> + <style type="text/css"> + #target { + filter: blur(calc(-10px)); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-calc-ref.html b/layout/reftests/svg/filters/css-filters/blur-calc-ref.html new file mode 100644 index 0000000000..8f35672749 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-calc-ref.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur an HTML Element Using a Calc Function Value</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: blur(10px); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-calc.html b/layout/reftests/svg/filters/css-filters/blur-calc.html new file mode 100644 index 0000000000..e4dc87e7d7 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-calc.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur an HTML Element Using a Calc Function Value</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-calc-ref.html"> + <meta name="assert" + content="Given a calc() value that evaluates to a positive result, the + CSS blur filter function should blur an HTML element."> + <style type="text/css"> + #target { + filter: blur(calc(2 * 5px)); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software-ref.html b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software-ref.html new file mode 100644 index 0000000000..4ad810f944 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Cap Blur Radius When Rendering in Software</title> + <style type="text/css"> + #target { + filter: blur(100px); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software.html b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software.html new file mode 100644 index 0000000000..81da59e6cb --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-cap-large-radius-on-software.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Cap Blur Radius When Rendering in Software</title> + <!-- + When rendering in software, Firefox should cap large blur radii to a smaller + value in order to keep performance acceptable. + --> + <style type="text/css"> + #target { + filter: blur(1000000px); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-clip-rect.html b/layout/reftests/svg/filters/css-filters/blur-clip-rect.html new file mode 100644 index 0000000000..5bb25b91b8 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-clip-rect.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <title>CSS Filters: Blur an HTML Element and clip to the blur rect</title> + <style type="text/css"> + #target { + filter: url(#blur); + width: 400px; + height: 400px; + } + #inner { + position: relative; + left: 100px; + top: 100px; + width: 100px; + height: 100px; + background-color: #00ff00; + } + body { + margin: 0px; + } + </style> +</head> +<body> + <div id="target"> + <div id="inner"></div> + </div> + <svg width="0" height="0"> + <filter id="blur" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" x="100" y="100" width="100" height="100"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-em-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-em-radius-ref.html new file mode 100644 index 0000000000..929fbb5ab5 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-em-radius-ref.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur an HTML Element Using a Radius in Ems</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#blur); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur"> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-em-radius.html b/layout/reftests/svg/filters/css-filters/blur-em-radius.html new file mode 100644 index 0000000000..7ba53e0a2f --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-em-radius.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur an HTML Element Using a Radius in Ems</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-em-radius-ref.html"> + <meta name="assert" + content="Given a valid blur radius in ems, the CSS blur filter function + should blur an HTML element."> + <style type="text/css"> + #target { + filter: blur(0.3em); + font-size: 10px; + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-invalid-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-invalid-radius-ref.html new file mode 100644 index 0000000000..83f74e2b53 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-invalid-radius-ref.html @@ -0,0 +1,22 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Don't Change Element Rendering with Invalid Blur Radius</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <style type="text/css">
+ #target {
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-invalid-radius.html b/layout/reftests/svg/filters/css-filters/blur-invalid-radius.html new file mode 100644 index 0000000000..aada289dd0 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-invalid-radius.html @@ -0,0 +1,28 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <title>CSS Filters: Don't Change Element Rendering with Invalid Blur Radius</title>
+ <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com">
+ <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur">
+ <link rel="match" href="blur-invalid-radius-ref.html">
+ <meta name="assert"
+ content="Given an invalid blur radius, the CSS blur filter function
+ should not change the rendering of an HTML element.">
+ <style type="text/css">
+ #target {
+ filter: blur(3);
+ background-color: #0f0;
+ width: 100px;
+ height: 100px;
+ }
+ </style>
+</head>
+<body>
+ <p>You should see a green square.</p>
+ <div id="target"></div>
+</body>
+</html>
diff --git a/layout/reftests/svg/filters/css-filters/blur-ref.html b/layout/reftests/svg/filters/css-filters/blur-ref.html new file mode 100644 index 0000000000..62c4c8b9f4 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-ref.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#blur); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur"> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-ref.svg b/layout/reftests/svg/filters/css-filters/blur-ref.svg new file mode 100644 index 0000000000..5e7800a9e7 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-ref.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>CSS Filters: Blur an SVG Element</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + <rect x="20" y="20" width="100" height="100" fill="#0f0" filter="url(#blur)"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/css-filters/blur-rem-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-rem-radius-ref.html new file mode 100644 index 0000000000..1b4b104d8d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-rem-radius-ref.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur an HTML Element Using a Radius in Rems</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + html { + font-size: 30px; + } + #target { + filter: url(#blur); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur"> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-rem-radius.html b/layout/reftests/svg/filters/css-filters/blur-rem-radius.html new file mode 100644 index 0000000000..69fac9a2b3 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-rem-radius.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur an HTML Element Using a Radius in Rems</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-rem-radius-ref.html"> + <meta name="assert" + content="Given a valid blur radius in rems, the CSS blur filter function + should blur an HTML element."> + <style type="text/css"> + html { + font-size: 30px; + } + #target { + filter: blur(0.1rem); + font-size: 16px; + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-zero-radius-ref.html b/layout/reftests/svg/filters/css-filters/blur-zero-radius-ref.html new file mode 100644 index 0000000000..7af2485f53 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-zero-radius-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur with Zero Radius</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square. It should not be blurred.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-zero-radius.html b/layout/reftests/svg/filters/css-filters/blur-zero-radius.html new file mode 100644 index 0000000000..1bd099d898 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-zero-radius.html @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur with Zero Radius</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-zero-radius-ref.html"> + <meta name="assert" content="Given a zero blur radius, the CSS blur filter + function will not blur an HTML element."> + <style type="text/css"> + #target { + filter: blur(0); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square. It should not be blurred.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-zoomed-page-ref.html b/layout/reftests/svg/filters/css-filters/blur-zoomed-page-ref.html new file mode 100644 index 0000000000..f68659241c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-zoomed-page-ref.html @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur on a 2x Zoomed Page</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + body { + margin: 2rem; + } + #target { + filter: url(#blur); + background-color: #0f0; + width: 200px; + height: 200px; + } + </style> +</head> +<body> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur" x="-100" y="-100" width="400" height="400" filterUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="6" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur-zoomed-page.html b/layout/reftests/svg/filters/css-filters/blur-zoomed-page.html new file mode 100644 index 0000000000..98d7ad6610 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur-zoomed-page.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html reftest-zoom="2.0"> +<head> + <title>CSS Filters: Blur on a 2x Zoomed Page</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-zoomed-page-ref.html"> + <meta name="assert" + content="The results of the CSS blur filter function should scale up + proportionally when the page is zoomed. At 1x zoom, you should + see a blurred green square. At 2x zoom, you should see a + blurred green square with a blur radius that's twice as + large."> + <style type="text/css"> + body { + margin: 1rem; + } + #target { + filter: blur(3px); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur.html b/layout/reftests/svg/filters/css-filters/blur.html new file mode 100644 index 0000000000..3510824a0d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Blur an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"> + <link rel="match" href="blur-ref.html"> + <meta name="assert" + content="Given a valid blur radius, the CSS blur filter function should + blur an HTML element."> + <style type="text/css"> + #target { + filter: blur(3px); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/blur.svg b/layout/reftests/svg/filters/css-filters/blur.svg new file mode 100644 index 0000000000..8c6cf9536d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/blur.svg @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>CSS Filters: Blur an SVG Element</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://www.w3.org/TR/filter-effects-1/#funcdef-blur"/> + <link rel="match" + href="blur-ref.svg"/> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + This test verifies that the CSS blur filter function can filter SVG + elements. If the test passes, you should see a green square. + </desc> + </g> + + <g id="test-body-content"> + <rect x="20" y="20" width="100" height="100" fill="#0f0" filter="blur(3px)"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/css-filters/brightness-darken-ref.html b/layout/reftests/svg/filters/css-filters/brightness-darken-ref.html new file mode 100644 index 0000000000..466164dd1d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-darken-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Darken an HTML Element Using the Brightness Function</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(0, 64, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a dark green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-darken.html b/layout/reftests/svg/filters/css-filters/brightness-darken.html new file mode 100644 index 0000000000..544498e6b5 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-darken.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Darken an HTML Element Using the Brightness Function</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness"> + <link rel="match" href="brightness-darken-ref.html"> + <meta name="assert" + content="Given a factor less than one, the CSS brightness filter + function should darken the color of an HTML element."> + <style type="text/css"> + #target { + filter: brightness(0.25); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a dark green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-extreme-ref.html b/layout/reftests/svg/filters/css-filters/brightness-extreme-ref.html new file mode 100644 index 0000000000..c38cd9a5bd --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-extreme-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Brighten an HTML Element Using a Large Factor</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-extreme.html b/layout/reftests/svg/filters/css-filters/brightness-extreme.html new file mode 100644 index 0000000000..11a7a68949 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-extreme.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Brighten an HTML Element Using a Large Factor</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness"> + <link rel="match" href="brightness-extreme-ref.html"> + <meta name="assert" + content="Given a large factor, the CSS brightness filter function should + completely change the color of an HTML element."> + <style type="text/css"> + #target { + filter: brightness(1000); + background-color: rgb(0, 1, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-one-ref.html b/layout/reftests/svg/filters/css-filters/brightness-one-ref.html new file mode 100644 index 0000000000..79e59d3403 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-one-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Brighten an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(0, 128, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-one.html b/layout/reftests/svg/filters/css-filters/brightness-one.html new file mode 100644 index 0000000000..9e061eab6c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-one.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Brighten an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness"> + <link rel="match" href="brightness-one-ref.html"> + <meta name="assert" + content="Given a factor of one, the CSS brightness filter function + should not change the color of an HTML element."> + <style type="text/css"> + #target { + filter: brightness(1); + background-color: rgb(0, 128, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-percent-ref.html b/layout/reftests/svg/filters/css-filters/brightness-percent-ref.html new file mode 100644 index 0000000000..bd62450884 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-percent-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Brighten an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(0, 128, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-percent.html b/layout/reftests/svg/filters/css-filters/brightness-percent.html new file mode 100644 index 0000000000..cbe1477728 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-percent.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Brighten an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness"> + <link rel="match" href="brightness-percent-ref.html"> + <meta name="assert" + content="Given a percentage, the CSS brightness filter function should + change the color of an HTML element."> + <style type="text/css"> + #target { + filter: brightness(400%); + background-color: rgb(0, 32, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-ref.html b/layout/reftests/svg/filters/css-filters/brightness-ref.html new file mode 100644 index 0000000000..31ca2a729a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Brighten an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(0, 128, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-zero-ref.html b/layout/reftests/svg/filters/css-filters/brightness-zero-ref.html new file mode 100644 index 0000000000..f49520c258 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-zero-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Darken an HTML Element Using the Brightness Function and a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: black; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a black square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness-zero.html b/layout/reftests/svg/filters/css-filters/brightness-zero.html new file mode 100644 index 0000000000..71670a7fe2 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness-zero.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Darken an HTML Element Using the Brightness Function and a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness"> + <link rel="match" href="brightness-zero-ref.html"> + <meta name="assert" + content="Given a factor of zero, the CSS brightness filter function + should change the color of an HTML element to black."> + <style type="text/css"> + #target { + filter: brightness(0); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a black square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/brightness.html b/layout/reftests/svg/filters/css-filters/brightness.html new file mode 100644 index 0000000000..92e7f0ec00 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/brightness.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Brighten an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-brightness"> + <link rel="match" href="brightness-ref.html"> + <meta name="assert" + content="The CSS brightness filter function should change the color of + an HTML element."> + <style type="text/css"> + #target { + filter: brightness(4); + background-color: rgb(0, 32, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/containing-block-1-ref.html b/layout/reftests/svg/filters/css-filters/containing-block-1-ref.html new file mode 100644 index 0000000000..696893b47f --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/containing-block-1-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE HTML> +<body> +<div style="position:absolute; left:150px; top:150px; width:200px; height:200px; background:lime;"></div> +<div style="position:absolute; left:180px; top:180px; width:200px; height:200px; background:yellow;"></div> + diff --git a/layout/reftests/svg/filters/css-filters/containing-block-1.html b/layout/reftests/svg/filters/css-filters/containing-block-1.html new file mode 100644 index 0000000000..503f6ee35a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/containing-block-1.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<body style="margin:0"> +<div style="margin:100px; width:100px; height:100px; filter:opacity(1);"> + <div style="position:absolute; left:50px; top:50px; width:200px; height:200px; background:lime;"></div> + <div style="position:fixed; left:80px; top:80px; width:200px; height:200px; background:yellow;"></div> +</div> diff --git a/layout/reftests/svg/filters/css-filters/contrast-extreme-ref.html b/layout/reftests/svg/filters/css-filters/contrast-extreme-ref.html new file mode 100644 index 0000000000..c276e8bca7 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-extreme-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Increase the Contrast of an HTML Element Using a Large Factor</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-extreme.html b/layout/reftests/svg/filters/css-filters/contrast-extreme.html new file mode 100644 index 0000000000..e5b80f8ed6 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-extreme.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Increase the Contrast of an HTML Element Using a Large Factor</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast"> + <link rel="match" href="contrast-extreme-ref.html"> + <meta name="assert" + content="Given a large factor, the CSS contrast filter function should + should change color channel values to be much farther from + their middle value."> + <style type="text/css"> + #target { + filter: contrast(1000); + background-color: rgb(127, 129, 127); /* 127 should change to 0, and 129 should change to 255. */ + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-one-ref.html b/layout/reftests/svg/filters/css-filters/contrast-one-ref.html new file mode 100644 index 0000000000..90df359cc1 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-one-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Set the Contrast of HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(0, 128, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-one.html b/layout/reftests/svg/filters/css-filters/contrast-one.html new file mode 100644 index 0000000000..c7c4cca19a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-one.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Set the Contrast of HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast"> + <link rel="match" href="contrast-one-ref.html"> + <meta name="assert" + content="Given a factor of one, the CSS contrast filter function + should not change the color of an HTML element."> + <style type="text/css"> + #target { + filter: contrast(1); + background-color: rgb(0, 128, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-percent-ref.html b/layout/reftests/svg/filters/css-filters/contrast-percent-ref.html new file mode 100644 index 0000000000..84f5eb0410 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-percent-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Increase the Contrast of an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-percent.html b/layout/reftests/svg/filters/css-filters/contrast-percent.html new file mode 100644 index 0000000000..7d0337f642 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-percent.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Increase the Contrast of an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast"> + <link rel="match" href="contrast-percent-ref.html"> + <meta name="assert" + content="Given a percentage, the CSS contrast filter function should + change the color of an HTML element."> + <style type="text/css"> + #target { + filter: contrast(200%); + background-color: rgb(0, 196, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-reduce-ref.html b/layout/reftests/svg/filters/css-filters/contrast-reduce-ref.html new file mode 100644 index 0000000000..ef169da13b --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-reduce-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Reduce the Contrast of an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(64, 191, 64); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-reduce.html b/layout/reftests/svg/filters/css-filters/contrast-reduce.html new file mode 100644 index 0000000000..f4482d4937 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-reduce.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Reduce the Contrast of an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast"> + <link rel="match" href="contrast-reduce-ref.html"> + <meta name="assert" + content="Given a factor of less than one, the CSS contrast filter + function should change color channel values to be closer to + their middle value."> + <style type="text/css"> + #target { + filter: contrast(0.5); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-ref.html b/layout/reftests/svg/filters/css-filters/contrast-ref.html new file mode 100644 index 0000000000..84f5eb0410 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Increase the Contrast of an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-zero-ref.html b/layout/reftests/svg/filters/css-filters/contrast-zero-ref.html new file mode 100644 index 0000000000..5f1a1f6ea6 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-zero-ref.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Reduce the Contrast of an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: contrast(0); + background-color: rgb(128, 128, 128); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a gray square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast-zero.html b/layout/reftests/svg/filters/css-filters/contrast-zero.html new file mode 100644 index 0000000000..59db11b60c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast-zero.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Reduce the Contrast of an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast"> + <link rel="match" href="contrast-zero-ref.html"> + <meta name="assert" + content="Given a factor of zero, the CSS contrast filter function + should change the color of an HTML element to gray."> + <style type="text/css"> + #target { + filter: contrast(0); + background-color: rgb(0, 128, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a gray square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/contrast.html b/layout/reftests/svg/filters/css-filters/contrast.html new file mode 100644 index 0000000000..e12b6ebbc9 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/contrast.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Increase the Contrast of an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-contrast"> + <link rel="match" href="contrast-ref.html"> + <meta name="assert" + content="The CSS contrast filter function should change the color of + an HTML element."> + <style type="text/css"> + #target { + filter: contrast(2); + background-color: rgb(0, 196, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-default-color-ref.html b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color-ref.html new file mode 100644 index 0000000000..2fe89507c5 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color-ref.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Drop Shadow Default Color</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#drop-shadow); + background-color: #00f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blue square with a green drop shadow.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feDropShadow dx="10" dy="10" stdDeviation="3" flood-color="#0f0" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-default-color.html b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color.html new file mode 100644 index 0000000000..ac9f8ecb12 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/drop-shadow-default-color.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Drop Shadow Default Color</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-drop-shadow"> + <link rel="help" href="http://www.w3.org/TR/css3-background/#the-box-shadow"> + <link rel="match" href="drop-shadow-default-color-ref.html"> + <meta name="assert" + content="If the color is unspecified in a CSS drop-shadow filter + function, it should default to the value of the CSS color + property."> + <style type="text/css"> + #target { + filter: drop-shadow(10px 10px 3px); + color: #0f0; + background-color: #00f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blue square with a green drop shadow.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset-ref.html b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset-ref.html new file mode 100644 index 0000000000..bf04c1d511 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset-ref.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> +<title>CSS Filters: Negative Drop Shadow Offset</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#drop-shadow); + background-color: #00f; + position: relative; + top: 20px; + left: 20px; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blue square with a green drop shadow in its top left corner.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feDropShadow dx="-10" dy="-10" stdDeviation="3" flood-color="#0f0" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset.html b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset.html new file mode 100644 index 0000000000..79b301daba --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/drop-shadow-negative-offset.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Negative Drop Shadow Offset</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-drop-shadow"> + <link rel="match" href="drop-shadow-negative-offset-ref.html"> + <meta name="assert" + content="Given negative shadow offsets, the CSS drop-shadow filter + function should add a drop shadow extending from the top left + corner of an HTML element."> + <style type="text/css"> + #target { + filter: drop-shadow(-10px -10px 3px #0f0); + background-color: #00f; + position: relative; + top: 20px; + left: 20px; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blue square with a green drop shadow in its top left corner.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow-ref.html b/layout/reftests/svg/filters/css-filters/drop-shadow-ref.html new file mode 100644 index 0000000000..211fbfbc43 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/drop-shadow-ref.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Drop Shadow on HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#drop-shadow); + background-color: #00f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blue square with a green drop shadow.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="drop-shadow" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feDropShadow dx="10" dy="10" stdDeviation="3" flood-color="#0f0" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/drop-shadow.html b/layout/reftests/svg/filters/css-filters/drop-shadow.html new file mode 100644 index 0000000000..1e46734651 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/drop-shadow.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Drop Shadow on HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-drop-shadow"> + <link rel="match" href="drop-shadow-ref.html"> + <meta name="assert" + content="The CSS drop-shadow filter function should add a drop shadow to + an HTML element."> + <style type="text/css"> + #target { + filter: drop-shadow(10px 10px 3px #0f0); + background-color: #00f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blue square with a green drop shadow.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/filter-on-huge-bbox.html b/layout/reftests/svg/filters/css-filters/filter-on-huge-bbox.html new file mode 100644 index 0000000000..6a75f19b27 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/filter-on-huge-bbox.html @@ -0,0 +1,26 @@ +<head> +<style> +body { + filter: blur(0px); + background-color: red; + margin:0px; +} + +a { + text-indent: -9999em; + top: -9999em; + position: absolute; +} + +div { + width: 100%; + height: 100%; + background-color: lime; + margin: 0px; +} +</style> +</head> +<body> + <div></div> + <a href="http://example.com">http://example.com</a> +</body>
\ No newline at end of file diff --git a/layout/reftests/svg/filters/css-filters/filter-on-outer-svg.html b/layout/reftests/svg/filters/css-filters/filter-on-outer-svg.html new file mode 100644 index 0000000000..72e533a4ed --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/filter-on-outer-svg.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +</head> +<body style="background-color: lime;"> + <div style="width: 100px; height: 100px; background-color: red;"> + <svg width="100" height="100" style="filter: opacity(100%);"> + <g transform="matrix(200,0,0,200,-20000,-20000)"> + <rect width="200" height="200" style="fill:lime"> + </g> + </svg> + </div> + </body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/grayscale-one-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-one-ref.html new file mode 100644 index 0000000000..1a71de85ec --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/grayscale-one-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Grayscale an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(53, 53, 53); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a gray square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/grayscale-one.html b/layout/reftests/svg/filters/css-filters/grayscale-one.html new file mode 100644 index 0000000000..a13aaec7ff --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/grayscale-one.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Grayscale an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale"> + <link rel="match" href="grayscale-one-ref.html"> + <meta name="assert" + content="Given a factor of one, the CSS grayscale filter function should + completely desaturate an HTML element."> + <style type="text/css"> + #target { + filter: grayscale(1); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a gray square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/grayscale-over-one-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-over-one-ref.html new file mode 100644 index 0000000000..16bac92715 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/grayscale-over-one-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Grayscale an HTML Element Using a Factor Over One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(53, 53, 53); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a gray square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/grayscale-over-one.html b/layout/reftests/svg/filters/css-filters/grayscale-over-one.html new file mode 100644 index 0000000000..ac3f0496da --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/grayscale-over-one.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Grayscale an HTML Element Using a Factor Over One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale"> + <link rel="match" href="grayscale-over-one-ref.html"> + <meta name="assert" + content="Given a factor over one, the CSS grayscale filter function + should completely desaturate an HTML element."> + <style type="text/css"> + #target { + filter: grayscale(1000); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a gray square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/grayscale-percent-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-percent-ref.html new file mode 100644 index 0000000000..90e4b69f52 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/grayscale-percent-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Grayscale an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(145, 197, 145); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a dull green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/grayscale-percent.html b/layout/reftests/svg/filters/css-filters/grayscale-percent.html new file mode 100644 index 0000000000..5500e7ce8d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/grayscale-percent.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Grayscale an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale"> + <link rel="match" href="grayscale-percent-ref.html"> + <meta name="assert" + content="Given a percentage, the CSS grayscale filter function should + desaturate an HTML element."> + <style type="text/css"> + #target { + filter: grayscale(80%); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a dull green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/grayscale-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-ref.html new file mode 100644 index 0000000000..06da896192 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/grayscale-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Grayscale an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(145, 197, 145); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a dull green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/grayscale-zero-ref.html b/layout/reftests/svg/filters/css-filters/grayscale-zero-ref.html new file mode 100644 index 0000000000..1c023606fd --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/grayscale-zero-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Grayscale an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/grayscale-zero.html b/layout/reftests/svg/filters/css-filters/grayscale-zero.html new file mode 100644 index 0000000000..5cf259540c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/grayscale-zero.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Grayscale an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale"> + <link rel="match" href="grayscale-zero-ref.html"> + <meta name="assert" + content="Given a factor of zero, the CSS grayscale filter function + should not change the color of an HTML element."> + <style type="text/css"> + #target { + filter: grayscale(0); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/grayscale.html b/layout/reftests/svg/filters/css-filters/grayscale.html new file mode 100644 index 0000000000..ac15725ab0 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/grayscale.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Grayscale an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-grayscale"> + <link rel="match" href="grayscale-ref.html"> + <meta name="assert" + content="The CSS grayscale filter function should desaturate an HTML + element."> + <style type="text/css"> + #target { + filter: grayscale(0.8); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a dull green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-360-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-360-ref.html new file mode 100644 index 0000000000..39583b518b --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-360-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using a 360 Degree Angle</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-360.html b/layout/reftests/svg/filters/css-filters/hue-rotate-360.html new file mode 100644 index 0000000000..de8791e03d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-360.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using a 360 Degree Angle</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-360-ref.html"> + <meta name="assert" + content="Given a 360 degree angle, the CSS hue-rotate filter function + should not change the color of an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(360deg); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-grad-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-grad-ref.html new file mode 100644 index 0000000000..855749647f --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-grad-ref.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using Gradians</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#hue-rotate); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> + <!-- + This equivalent SVG filter is defined in: + http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent + --> + <svg width="0" height="0"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-grad.html b/layout/reftests/svg/filters/css-filters/hue-rotate-grad.html new file mode 100644 index 0000000000..13ff77499a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-grad.html @@ -0,0 +1,29 @@ + +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using Gradians</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-turns-ref.html"> + <meta name="assert" + content="Given an angle in gradians, the CSS hue-rotate filter function + should change the color of an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(100grad); /* Equivalent to 90deg. */ + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel-ref.html new file mode 100644 index 0000000000..7fa26b5036 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel-ref.html @@ -0,0 +1,37 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Containing Colors with Multiple RGB Channels</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + width: 150px; + height: 150px; + } + .color-strip { + height: 50px; + } + #color-strip-1 { + background-color: rgb(64, 187, 46); + } + #color-strip-2 { + background-color: rgb(64, 250, 255); + } + #color-strip-3 { + background-color: rgb(255, 14, 109); + } + </style> +</head> +<body> + <p>You should see a horizontal green strip, followed by a cyan strip, followed by a magenta strip.</p> + <div id="target"> + <div id="color-strip-1" class="color-strip"></div> + <div id="color-strip-2" class="color-strip"></div> + <div id="color-strip-3" class="color-strip"></div> + </div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel.html b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel.html new file mode 100644 index 0000000000..d6e9650c7a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-multichannel.html @@ -0,0 +1,38 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Containing Colors with Multiple RGB Channels</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: hue-rotate(90deg); + width: 150px; + height: 150px; + } + .color-strip { + height: 50px; + } + #color-strip-1 { + background-color: rgb(255, 128, 64); + } + #color-strip-2 { + background-color: rgb(128, 255, 64); + } + #color-strip-3 { + background-color: rgb(32, 64, 255); + } + </style> +</head> +<body> + <p>You should see a horizontal green strip, followed by a cyan strip, followed by a magenta strip.</p> + <div id="target"> + <div id="color-strip-1" class="color-strip"></div> + <div id="color-strip-2" class="color-strip"></div> + <div id="color-strip-3" class="color-strip"></div> + </div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-negative-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-negative-ref.html new file mode 100644 index 0000000000..19c843d0f0 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-negative-ref.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using a Negative Angle</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#hue-rotate); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> + <!-- + This equivalent SVG filter is defined in: + http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent + --> + <svg width="0" height="0"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-negative.html b/layout/reftests/svg/filters/css-filters/hue-rotate-negative.html new file mode 100644 index 0000000000..97b84be5be --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-negative.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using a Negative Angle</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-negative-ref.html"> + <meta name="assert" + content="Given a negative angle, the CSS hue-rotate filter function + should change the color of an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(-270deg); /* Equivalent to 90deg. */ + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-over-360-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360-ref.html new file mode 100644 index 0000000000..c1744b9601 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360-ref.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using an Angle Over 360 Degrees</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#hue-rotate); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> + <!-- + This equivalent SVG filter is defined in: + http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent + --> + <svg width="0" height="0"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-over-360.html b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360.html new file mode 100644 index 0000000000..dfc067ee2e --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-over-360.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using an Angle Over 360 Degrees</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-over-360-ref.html"> + <meta name="assert" + content="Given an angle over 360 degress, the CSS hue-rotate filter + function should change the color of an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(450deg); /* Equivalent to 90deg. */ + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-rad-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-rad-ref.html new file mode 100644 index 0000000000..82ae7b28cb --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-rad-ref.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using Radians</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#hue-rotate); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> + <!-- + This equivalent SVG filter is defined in: + http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent + --> + <svg width="0" height="0"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-rad.html b/layout/reftests/svg/filters/css-filters/hue-rotate-rad.html new file mode 100644 index 0000000000..5622f441d1 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-rad.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using Radians</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-turns-ref.html"> + <meta name="assert" + content="Given an angle in radians, the CSS hue-rotate filter function + should change the color of an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(1.57079632679rad); /* Equivalent to 90deg. */ + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-ref.html new file mode 100644 index 0000000000..aec99216a9 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-ref.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#hue-rotate); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> + <!-- + This equivalent SVG filter is defined in: + http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent + --> + <svg width="0" height="0"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-turn-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-turn-ref.html new file mode 100644 index 0000000000..c3a76ea4b5 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-turn-ref.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using Turns</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#hue-rotate); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> + <!-- + This equivalent SVG filter is defined in: + http://www.w3.org/TR/filter-effects-1/#huerotateEquivalent + --> + <svg width="0" height="0"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-turn.html b/layout/reftests/svg/filters/css-filters/hue-rotate-turn.html new file mode 100644 index 0000000000..d6d8a17f63 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-turn.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using Turns</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-turn-ref.html"> + <meta name="assert" + content="Given an angle in turns, the CSS hue-rotate filter function + should change the color of an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(0.25turn); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-zero-ref.html b/layout/reftests/svg/filters/css-filters/hue-rotate-zero-ref.html new file mode 100644 index 0000000000..996b22e0fd --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-zero-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using a Zero Angle</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate-zero.html b/layout/reftests/svg/filters/css-filters/hue-rotate-zero.html new file mode 100644 index 0000000000..c79f23e5c0 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate-zero.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element Using a Zero Angle</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-zero-ref.html"> + <meta name="assert" + content="Given a zero angle, the CSS hue-rotate filter function should + not change the color of an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(0); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/hue-rotate.html b/layout/reftests/svg/filters/css-filters/hue-rotate.html new file mode 100644 index 0000000000..a4536eea7a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/hue-rotate.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Hue Rotate an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-hue-rotate"> + <link rel="match" href="hue-rotate-ref.html"> + <meta name="assert" + content="The CSS hue-rotate filter function should change the color of + an HTML element."> + <style type="text/css"> + #target { + filter: hue-rotate(90deg); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/invert-half-ref.html b/layout/reftests/svg/filters/css-filters/invert-half-ref.html new file mode 100644 index 0000000000..bd0d67d66b --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/invert-half-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Invert an HTML Element Using a Factor of One Half</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(127, 127, 127); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a gray square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/invert-half.html b/layout/reftests/svg/filters/css-filters/invert-half.html new file mode 100644 index 0000000000..818d751169 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/invert-half.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Invert an HTML Element Using a Factor of One Half</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert"> + <link rel="match" href="invert-half-ref.html"> + <meta name="assert" + content="Given a factor of one half, the CSS invert filter function + should change the color of an HTML element to gray."> + <style type="text/css"> + #target { + filter: invert(0.5); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a gray square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/invert-one-ref.html b/layout/reftests/svg/filters/css-filters/invert-one-ref.html new file mode 100644 index 0000000000..6882b501c9 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/invert-one-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Invert an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/invert-one.html b/layout/reftests/svg/filters/css-filters/invert-one.html new file mode 100644 index 0000000000..f9e8eaa98a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/invert-one.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Invert an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert"> + <link rel="match" href="invert-one-ref.html"> + <meta name="assert" + content="Given a factor of one, the CSS invert filter function should + completely change the color of an HTML element."> + <style type="text/css"> + #target { + filter: invert(1); + background-color: #f0f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/invert-over-one-ref.html b/layout/reftests/svg/filters/css-filters/invert-over-one-ref.html new file mode 100644 index 0000000000..4452898e3b --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/invert-over-one-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Invert an HTML Element Using a Factor Over One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/invert-over-one.html b/layout/reftests/svg/filters/css-filters/invert-over-one.html new file mode 100644 index 0000000000..374fe6dfde --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/invert-over-one.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Invert an HTML Element Using a Factor Over One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert"> + <link rel="match" href="invert-over-one-ref.html"> + <meta name="assert" + content="Given a factor over one, the CSS invert filter function + should completely change the color of an HTML element."> + <style type="text/css"> + #target { + filter: invert(1000); + background-color: #f0f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/invert-percent-ref.html b/layout/reftests/svg/filters/css-filters/invert-percent-ref.html new file mode 100644 index 0000000000..fd197f038c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/invert-percent-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Invert an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(63, 191, 63); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/invert-percent.html b/layout/reftests/svg/filters/css-filters/invert-percent.html new file mode 100644 index 0000000000..d56dc17418 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/invert-percent.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Invert an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert"> + <link rel="match" href="invert-percent-ref.html"> + <meta name="assert" + content="Given a percentage, the CSS invert filter function should + change the color of an HTML element."> + <style type="text/css"> + #target { + filter: invert(75%); + background-color: #f0f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/invert-ref.html b/layout/reftests/svg/filters/css-filters/invert-ref.html new file mode 100644 index 0000000000..c5af4b6116 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/invert-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Invert an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(63, 191, 63); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/invert-zero-ref.html b/layout/reftests/svg/filters/css-filters/invert-zero-ref.html new file mode 100644 index 0000000000..3f000a71dd --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/invert-zero-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Invert an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/invert-zero.html b/layout/reftests/svg/filters/css-filters/invert-zero.html new file mode 100644 index 0000000000..9adb505dd4 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/invert-zero.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Invert an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert"> + <link rel="match" href="invert-zero-ref.html"> + <meta name="assert" + content="Given a factor of zero, the CSS invert filter function should + not change the color of an HTML element."> + <style type="text/css"> + #target { + filter: invert(0); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/invert.html b/layout/reftests/svg/filters/css-filters/invert.html new file mode 100644 index 0000000000..8ba201e227 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/invert.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Invert an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-invert"> + <link rel="match" href="invert-ref.html"> + <meta name="assert" + content="The CSS invert filter function should change the color of an + HTML element."> + <style type="text/css"> + #target { + filter: invert(0.75); + background-color: #f0f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-one-ref.html b/layout/reftests/svg/filters/css-filters/opacity-one-ref.html new file mode 100644 index 0000000000..b75678edbb --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-one-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-one.html b/layout/reftests/svg/filters/css-filters/opacity-one.html new file mode 100644 index 0000000000..8e0f26ba01 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-one.html @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity"> + <link rel="match" href="opacity-one-ref.html"> + <meta name="assert" + content="Given a factor of one, the CSS opacity filter function should + not change the opaqueness of an HTML element."> + <style type="text/css"> + #below-target { + background-color: #f00; + width: 100px; + height: 100px; + } + #target { + filter: opacity(1000); + background-color: #0f0; + position: relative; + top: -100px; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="below-target"></div> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one-ref.html b/layout/reftests/svg/filters/css-filters/opacity-over-one-ref.html new file mode 100644 index 0000000000..d674607041 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-over-one-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor Over One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source-ref.html b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source-ref.html new file mode 100644 index 0000000000..dea9f84a5a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source-ref.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to a Translucent HTML Element Using a Factor Over One</title> + <style type="text/css"> + #target { + background-color: rgba(0, 255, 0, 0.25); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a faded green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source.html b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source.html new file mode 100644 index 0000000000..07ff65ed7b --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-over-one-translucent-source.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to a Translucent HTML Element Using a Factor Over One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity"> + <link rel="match" href="opacity-over-one-translucent-source-ref.html"> + <meta name="assert" + content="Given a factor over one, the CSS opacity filter function should + not change the translucency of an HTML element."> + <style type="text/css"> + #target { + filter: opacity(1000); + background-color: rgba(0, 255, 0, 0.25); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a faded green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-over-one.html b/layout/reftests/svg/filters/css-filters/opacity-over-one.html new file mode 100644 index 0000000000..2716d39bf1 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-over-one.html @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor Over One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity"> + <link rel="match" href="opacity-over-one-ref.html"> + <meta name="assert" + content="Given a factor over one, the CSS opacity filter function should + not change the opaqueness of an HTML element."> + <style type="text/css"> + #below-target { + background-color: #f00; + width: 100px; + height: 100px; + } + #target { + filter: opacity(1000); + background-color: #0f0; + position: relative; + top: -100px; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="below-target"></div> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-percent-ref.html b/layout/reftests/svg/filters/css-filters/opacity-percent-ref.html new file mode 100644 index 0000000000..f673701fe8 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-percent-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(192, 255, 192); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a faded green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-percent.html b/layout/reftests/svg/filters/css-filters/opacity-percent.html new file mode 100644 index 0000000000..5cc4ab5d23 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-percent.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity"> + <link rel="match" href="opacity-percent-ref.html"> + <meta name="assert" + content="Given a percentage, the CSS opacity filter function should make + an HTML element translucent."> + <style type="text/css"> + #target { + filter: opacity(25%); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a faded green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-ref.html b/layout/reftests/svg/filters/css-filters/opacity-ref.html new file mode 100644 index 0000000000..adbfcf2bb7 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(192, 255, 192); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a faded green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-zero-ref.html b/layout/reftests/svg/filters/css-filters/opacity-zero-ref.html new file mode 100644 index 0000000000..69821d5ac4 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-zero-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #below-target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="below-target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity-zero.html b/layout/reftests/svg/filters/css-filters/opacity-zero.html new file mode 100644 index 0000000000..da5e6899ff --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity-zero.html @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity"> + <link rel="match" href="opacity-zero-ref.html"> + <meta name="assert" + content="Given a factor of zero, the CSS opacity filter function should + make an HTML element completely transparent."> + <style type="text/css"> + #below-target { + background-color: #0f0; + width: 100px; + height: 100px; + } + #target { + filter: opacity(0); + background-color: #f00; + position: relative; + top: -100px; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="below-target"></div> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/opacity.html b/layout/reftests/svg/filters/css-filters/opacity.html new file mode 100644 index 0000000000..3ea8f1589c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/opacity.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Opacity to an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-opacity"> + <link rel="match" href="opacity-ref.html"> + <meta name="assert" + content="The CSS opacity filter function should make an HTML element + translucent."> + <style type="text/css"> + #target { + filter: opacity(0.25); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a faded green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/pass.svg b/layout/reftests/svg/filters/css-filters/pass.svg new file mode 100644 index 0000000000..e76380c89a --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/pass.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"> + <title>Testcase reference file for generic pass condition</title> + <rect width="100%" height="100%" fill="lime"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/filters/css-filters/reftest.list b/layout/reftests/svg/filters/css-filters/reftest.list new file mode 100644 index 0000000000..f204de98cd --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/reftest.list @@ -0,0 +1,71 @@ +# These tests verify that CSS filters behave properly. +# e.g. filter: blur(3px) + +== blur.html blur-ref.html +== blur.svg blur-ref.svg +== blur-calc.html blur-calc-ref.html +== blur-calc-negative.html blur-calc-negative-ref.html +fuzzy-if(cocoaWidget,0-1,0-2) skip-if(d2d) == blur-cap-large-radius-on-software.html blur-cap-large-radius-on-software-ref.html +fuzzy-if(!useDrawSnapshot,2-5,4764-8168) fuzzy-if(Android&&device&&!swgl,5-5,8574-8574) == blur-clip-rect.html ../feGaussianBlur-4-ref.svg +== blur-em-radius.html blur-em-radius-ref.html +== blur-invalid-radius.html blur-invalid-radius-ref.html +== blur-rem-radius.html blur-rem-radius-ref.html +== blur-zero-radius.html blur-zero-radius-ref.html +fails-if(useDrawSnapshot) == blur-zoomed-page.html blur-zoomed-page-ref.html +== brightness.html brightness-ref.html +== brightness-darken.html brightness-darken-ref.html +== brightness-extreme.html brightness-extreme-ref.html +== brightness-one.html brightness-one-ref.html +== brightness-percent.html brightness-percent-ref.html +== brightness-zero.html brightness-zero-ref.html +== containing-block-1.html containing-block-1-ref.html +== contrast.html contrast-ref.html +== contrast-extreme.html contrast-extreme-ref.html +== contrast-one.html contrast-one-ref.html +== contrast-percent.html contrast-percent-ref.html +== contrast-reduce.html contrast-reduce-ref.html +== contrast-zero.html contrast-zero-ref.html +== drop-shadow.html drop-shadow-ref.html +== drop-shadow-default-color.html drop-shadow-default-color-ref.html +== drop-shadow-negative-offset.html drop-shadow-negative-offset-ref.html +== filter-on-huge-bbox.html pass.svg +fuzzy(0-1,0-44) fuzzy-if(winWidget,0-1,0-198) == filter-on-outer-svg.html pass.svg +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale.html grayscale-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale-one.html grayscale-one-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale-over-one.html grayscale-over-one-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == grayscale-percent.html grayscale-percent-ref.html +fuzzy(0-1,0-10000) == grayscale-zero.html grayscale-zero-ref.html +== hue-rotate.html hue-rotate-ref.html +== hue-rotate-360.html hue-rotate-360-ref.html +== hue-rotate-grad.html hue-rotate-grad-ref.html +fuzzy-if(!useDrawSnapshot&&!geckoview,2-2,7500-7500) fuzzy-if(d2d,0-2,0-7500) == hue-rotate-multichannel.html hue-rotate-multichannel-ref.html +== hue-rotate-negative.html hue-rotate-negative-ref.html +== hue-rotate-over-360.html hue-rotate-over-360-ref.html +== hue-rotate-rad.html hue-rotate-rad-ref.html +== hue-rotate-turn.html hue-rotate-turn-ref.html +== hue-rotate-zero.html hue-rotate-zero-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == invert.html invert-ref.html +fuzzy(0-1,0-10000) == invert-half.html invert-half-ref.html +== invert-one.html invert-one-ref.html +== invert-over-one.html invert-over-one-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == invert-percent.html invert-percent-ref.html +== invert-zero.html invert-zero-ref.html +fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == opacity.html opacity-ref.html +== opacity-one.html opacity-one-ref.html +== opacity-over-one.html opacity-over-one-ref.html +fuzzy(0-1,0-10000) == opacity-over-one-translucent-source.html opacity-over-one-translucent-source-ref.html +fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == opacity-percent.html opacity-percent-ref.html +== opacity-zero.html opacity-zero-ref.html +== saturate.html saturate-ref.html +fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == saturate-desaturate.html saturate-desaturate-ref.html +== saturate-extreme.html saturate-extreme-ref.html +== saturate-one.html saturate-one-ref.html +== saturate-percent.html saturate-percent-ref.html +fuzzy-if(!useDrawSnapshot&&!geckoview,1-1,10000-10000) fuzzy-if(d2d,0-1,0-10000) == saturate-zero.html saturate-zero-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia.html sepia-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia-one.html sepia-one-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia-over-one.html sepia-over-one-ref.html +fuzzy(0-1,0-10000) fuzzy-if(d2d,0-1,0-10000) == sepia-percent.html sepia-percent-ref.html +== sepia-zero.html sepia-zero-ref.html + +fuzzy(0-2,0-125000) == scale-filtered-content-01.html scale-filtered-content-01-ref.html diff --git a/layout/reftests/svg/filters/css-filters/saturate-desaturate-ref.html b/layout/reftests/svg/filters/css-filters/saturate-desaturate-ref.html new file mode 100644 index 0000000000..61cd7036b2 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-desaturate-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Desaturate an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(145, 197, 145); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a dull green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-desaturate.html b/layout/reftests/svg/filters/css-filters/saturate-desaturate.html new file mode 100644 index 0000000000..fdd080361f --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-desaturate.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Desaturate an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate"> + <link rel="match" href="saturate-desaturate-ref.html"> + <meta name="assert" + content="Given a factor of less than one, the CSS saturate filter + function should dull the color of an HTML element."> + <style type="text/css"> + #target { + filter: saturate(0.2); + background-color: rgb(0, 255, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a dull green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-extreme-ref.html b/layout/reftests/svg/filters/css-filters/saturate-extreme-ref.html new file mode 100644 index 0000000000..fd7f3711c1 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-extreme-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Saturate an HTML Element Using a Large Factor</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-extreme.html b/layout/reftests/svg/filters/css-filters/saturate-extreme.html new file mode 100644 index 0000000000..d533074f00 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-extreme.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Saturate an HTML Element Using a Large Factor</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate"> + <link rel="match" href="saturate-extreme-ref.html"> + <meta name="assert" + content="Given a large factor, the CSS saturate filter function should + significantly increase any non-zero color channels in an HTML + element."> + <style type="text/css"> + #target { + filter: saturate(1000); + background-color: rgb(0, 1, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-one-ref.html b/layout/reftests/svg/filters/css-filters/saturate-one-ref.html new file mode 100644 index 0000000000..09c46b9f98 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-one-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Saturate an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(0, 128, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-one.html b/layout/reftests/svg/filters/css-filters/saturate-one.html new file mode 100644 index 0000000000..7633f568fa --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-one.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Saturate an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate"> + <link rel="match" href="saturate-one-ref.html"> + <meta name="assert" + content="Given a factor of one, the CSS saturate filter function should + not change the color of an HTML element."> + <style type="text/css"> + #target { + filter: saturate(1); + background-color: rgb(0, 128, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-percent-ref.html b/layout/reftests/svg/filters/css-filters/saturate-percent-ref.html new file mode 100644 index 0000000000..9ffb3a5ae1 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-percent-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Saturate an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-percent.html b/layout/reftests/svg/filters/css-filters/saturate-percent.html new file mode 100644 index 0000000000..17b6ea791c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-percent.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Saturate an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate"> + <link rel="match" href="saturate-percent-ref.html"> + <meta name="assert" + content="Given a percentage, the CSS saturate filter function should + change the color of an HTML element."> + <style type="text/css"> + #target { + filter: saturate(500%); + background-color: rgb(0, 128, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-ref.html b/layout/reftests/svg/filters/css-filters/saturate-ref.html new file mode 100644 index 0000000000..9f142cd743 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Saturate an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-zero-ref.html b/layout/reftests/svg/filters/css-filters/saturate-zero-ref.html new file mode 100644 index 0000000000..fd439a899c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-zero-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Desaturate an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(53, 53, 53); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a gray square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate-zero.html b/layout/reftests/svg/filters/css-filters/saturate-zero.html new file mode 100644 index 0000000000..0b281e017d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate-zero.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Desaturate an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate"> + <link rel="match" href="saturate-zero-ref.html"> + <meta name="assert" + content="Given a factor of zero, the CSS saturate filter function should + completely desaturate an HTML element."> + <style type="text/css"> + #target { + filter: saturate(0); + background-color: rgb(255, 0, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a gray square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/saturate.html b/layout/reftests/svg/filters/css-filters/saturate.html new file mode 100644 index 0000000000..330464a643 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/saturate.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Saturate an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-saturate"> + <link rel="match" href="saturate-ref.html"> + <meta name="assert" + content="The CSS saturate filter function should change the color of an + HTML element."> + <style type="text/css"> + #target { + filter: saturate(5); + background-color: rgb(0, 128, 0); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a bright green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/scale-filtered-content-01-ref.html b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01-ref.html new file mode 100644 index 0000000000..a212778d0d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01-ref.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Filtered content should be rendered in device space</title> + <style type="text/css"> + #filtered { + width: 100px; + height: 50px; + background-color: lime; + opacity: 0.5; + transform: translate(10px) scale(5); + transform-origin: 0 0; + } + .inner { + position: absolute; + background-color: blue; + width: 10px; + height:10px; + } + </style> +</head> +<body> + <p>You should see clear blue rects.</p> + <div id="filtered"> + <div class="inner" style="left:10px; top:10px;"></div> + <div class="inner" style="left:50px; top:20px;"></div> + <div class="inner" style="left:80px; top:30px;"></div> + </div> +</body> diff --git a/layout/reftests/svg/filters/css-filters/scale-filtered-content-01.html b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01.html new file mode 100644 index 0000000000..4546980179 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/scale-filtered-content-01.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Filtered content should be rendered in device space</title> + <style type="text/css"> + #filtered { + width: 100px; + height: 50px; + background-color: lime; + filter: opacity(50%); + transform: translate(10px) scale(5); + transform-origin: 0 0; + } + .inner { + position: absolute; + background-color: blue; + width: 10px; + height:10px; + } + </style> +</head> +<body> + <p>You should see clear blue rects.</p> + <div id="filtered"> + <div class="inner" style="left:10px; top:10px;"></div> + <div class="inner" style="left:50px; top:20px;"></div> + <div class="inner" style="left:80px; top:30px;"></div> + </div> +</body> diff --git a/layout/reftests/svg/filters/css-filters/sepia-one-ref.html b/layout/reftests/svg/filters/css-filters/sepia-one-ref.html new file mode 100644 index 0000000000..c0f77edcbc --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-one-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(99, 89, 69); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brown square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-one.html b/layout/reftests/svg/filters/css-filters/sepia-one.html new file mode 100644 index 0000000000..cad7d6fc93 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-one.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor of One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia"> + <link rel="match" href="sepia-one-ref.html"> + <meta name="assert" + content="Given a factor of one, the CSS sepia filter function should + change the color of an HTML element to a brown hue."> + <style type="text/css"> + #target { + filter: sepia(1); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brown square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-over-one-ref.html b/layout/reftests/svg/filters/css-filters/sepia-over-one-ref.html new file mode 100644 index 0000000000..9863aa6466 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-over-one-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor Over One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(99, 89, 69); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brown square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-over-one.html b/layout/reftests/svg/filters/css-filters/sepia-over-one.html new file mode 100644 index 0000000000..6836fbbd5d --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-over-one.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor Over One</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia"> + <link rel="match" href="sepia-over-one-ref.html"> + <meta name="assert" + content="Given a factor over one, the CSS sepia filter function should + change the color of an HTML element to a brown hue."> + <style type="text/css"> + #target { + filter: sepia(1000); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brown square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-percent-ref.html b/layout/reftests/svg/filters/css-filters/sepia-percent-ref.html new file mode 100644 index 0000000000..47dea90f0c --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-percent-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Sepia to an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(167, 187, 115); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brownish green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-percent.html b/layout/reftests/svg/filters/css-filters/sepia-percent.html new file mode 100644 index 0000000000..f044a7771e --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-percent.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Sepia to an HTML Element Using a Percentage</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia"> + <link rel="match" href="sepia-percent-ref.html"> + <meta name="assert" + content="Given a percentage, the CSS sepia filter function should + change the color of an HTML element to a more brownish hue."> + <style type="text/css"> + #target { + filter: sepia(85%); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brownish green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-ref.html b/layout/reftests/svg/filters/css-filters/sepia-ref.html new file mode 100644 index 0000000000..e30ae8a859 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply sepia to an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: rgb(167, 187, 115); + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brownish green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-zero-ref.html b/layout/reftests/svg/filters/css-filters/sepia-zero-ref.html new file mode 100644 index 0000000000..4a358c45d5 --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-zero-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia-zero.html b/layout/reftests/svg/filters/css-filters/sepia-zero.html new file mode 100644 index 0000000000..720e22e15b --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia-zero.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply Sepia to an HTML Element Using a Factor of Zero</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia"> + <link rel="match" href="sepia-zero-ref.html"> + <meta name="assert" + content="Given a factor of zero, the CSS sepia filter function should + not change the color of an HTML element."> + <style type="text/css"> + #target { + filter: sepia(0); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-filters/sepia.html b/layout/reftests/svg/filters/css-filters/sepia.html new file mode 100644 index 0000000000..4af24919fa --- /dev/null +++ b/layout/reftests/svg/filters/css-filters/sepia.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Apply sepia to an HTML Element</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#funcdef-sepia"> + <link rel="match" href="sepia-ref.html"> + <meta name="assert" + content="The CSS sepia filter function should change the color of an + HTML element to a more brownish hue."> + <style type="text/css"> + #target { + filter: sepia(0.85); + background-color: #0f0; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a brownish green square.</p> + <div id="target"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter-ref.html new file mode 100644 index 0000000000..8c2a796d3c --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter-ref.html @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS and SVG Filter Chains: Clip Input CSS Filter with Following SVG Filter's Filter Region</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#blur) url(#clip-and-red-to-green); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur" x="-50" y="-50" width="200" height="200"> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + <!-- Use a small filter region that clips the blur extents. --> + <filter id="clip-and-red-to-green" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter.html b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter.html new file mode 100644 index 0000000000..2fcb027818 --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/clip-input-css-filter.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS and SVG Filter Chains: Clip Input CSS Filter with Following SVG Filter's Filter Region</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterEffectsRegion"> + <link rel="match" href="css-filter-first-ref.html"> + <meta name="assert" + content="An SVG filter's filter region should clip the input from a CSS + filter function."> + <style type="text/css"> + #target { + filter: blur(3px) url(#clip-and-red-to-green); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <!-- Use a small filter region that clips the blur extents. --> + <filter id="clip-and-red-to-green" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first-ref.html new file mode 100644 index 0000000000..838eeaf4b9 --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first-ref.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS and SVG Filter Chains: CSS Filter as First Filter</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#blur-and-red-to-green); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="blur-and-red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- Blur the red square. --> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + <!-- Turn the red square into a green square. --> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first.html new file mode 100644 index 0000000000..d2e208dd6c --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-first.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS and SVG Filter Chains: CSS Filter as First Filter</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty"> + <link rel="match" href="css-filter-first-ref.html"> + <meta name="assert" + content="A filter chain starting with a CSS filter function followed by + an SVG reference filter should render correctly."> + <style type="text/css"> + #target { + filter: blur(3px) url(#red-to-green); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last-ref.html new file mode 100644 index 0000000000..c335d1683e --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last-ref.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS and SVG Filter Chains: CSS Filter as Last Filter</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#red-to-green-and-blur); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="red-to-green-and-blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a green square. --> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + <!-- Blur the red square. --> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last.html new file mode 100644 index 0000000000..d4e00fb30e --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-last.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS and SVG Filter Chains: CSS Filter as Last Filter</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty"> + <link rel="match" href="css-filter-last-ref.html"> + <meta name="assert" + content="A filter chain starting with an SVG reference filter followed + by a CSS filter function should render correctly."> + <style type="text/css"> + #target { + filter: url(#red-to-green) blur(3px); + background-color: #f00; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a green square. --> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle-ref.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle-ref.html new file mode 100644 index 0000000000..9340231a24 --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle-ref.html @@ -0,0 +1,38 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS and SVG Filter Chains: CSS Filter as Last Filter</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <style type="text/css"> + #target { + filter: url(#magenta-to-green-and-blur); + background-color: #f0f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="magenta-to-green-and-blur" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- Turn the magenta square into a red square. --> + <feComponentTransfer color-interpolation-filters="sRGB"> + <feFuncR type="identity"/> + <feFuncG type="table" tableValues="0 0"/> + <feFuncB type="table" tableValues="0 0"/> + <feFuncA type="identity"/> + </feComponentTransfer> + <!-- Blur the red square. --> + <feGaussianBlur stdDeviation="3" color-interpolation-filters="sRGB"/> + <!-- Turn the blurred red square into a blurred green square. --> + <feColorMatrix type="hueRotate" values="90" color-interpolation-filters="sRGB"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle.html b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle.html new file mode 100644 index 0000000000..89020a641c --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/css-filter-middle.html @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS and SVG Filter Chains: CSS Filter as Middle Filter</title> + <link rel="author" title="Max Vujovic" href="mailto:mvujovic@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/filter-effects-1/#FilterProperty"> + <link rel="match" href="css-filter-middle-ref.html"> + <meta name="assert" + content="A filter chain starting with an SVG reference filter, followed + by a CSS filter function, and followed by an SVG reference + filter should render correctly."> + <style type="text/css"> + #target { + filter: url(#magenta-to-red) blur(3px) url(#red-to-green); + background-color: #f0f; + width: 100px; + height: 100px; + } + </style> +</head> +<body> + <p>You should see a blurred green square.</p> + <div id="target"></div> + <svg width="0" height="0"> + <filter id="magenta-to-red" color-interpolation-filters="sRGB"> + <feComponentTransfer> + <feFuncR type="identity"/> + <feFuncG type="table" tableValues="0 0"/> + <feFuncB type="table" tableValues="0 0"/> + <feFuncA type="identity"/> + </feComponentTransfer> + </filter> + <filter id="red-to-green" x="-50" y="-50" width="200" height="200" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/css-svg-filter-chains/reftest.list b/layout/reftests/svg/filters/css-svg-filter-chains/reftest.list new file mode 100644 index 0000000000..ac3ee0dc0b --- /dev/null +++ b/layout/reftests/svg/filters/css-svg-filter-chains/reftest.list @@ -0,0 +1,8 @@ +# These tests verify that filter chains of combined CSS and SVG filters behave +# properly. +# e.g. filter: url(#f1) blur(3px) url(#2) grayscale(0.5); + +== clip-input-css-filter.html clip-input-css-filter-ref.html +fuzzy(0-1,0-288) == css-filter-first.html css-filter-first-ref.html +== css-filter-last.html css-filter-last-ref.html +== css-filter-middle.html css-filter-middle-ref.html diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-01.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-01.svg new file mode 100644 index 0000000000..ba8e5bb421 --- /dev/null +++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-01.svg @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=879682 --> + <script> + +var NS_SVG = 'http://www.w3.org/2000/svg'; + +function run_test() { + var gNode = document.createElementNS(NS_SVG, "g"); + gNode.setAttribute('filter', 'url(#filter)'); + + var rect = document.createElementNS(NS_SVG, 'rect'); + rect.setAttribute('width', '100'); + rect.setAttribute('height', '100'); + rect.setAttribute('fill', 'white'); + gNode.appendChild(rect); + + document.documentElement.appendChild(gNode); + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", run_test); +setTimeout(run_test, 4000); // fallback for running outside reftest + + </script> + <filter id="filter" x="20" y="20" width="100" height="100" + filterUnits="userSpaceOnUse" + primitiveUnits="userSpaceOnUse"> + <feFlood flood-color="lime"/> + </filter> + <rect width="100%" height="100%" fill="lime"/> + <rect x="20" y="20" width="100" height="100" fill="red"/> +</svg> diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-02.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-02.svg new file mode 100644 index 0000000000..b424e0734e --- /dev/null +++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-02.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="run_test();"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769942 --> + <script> + +function run_test() { + document.documentElement.getBoundingClientRect(); + document.getElementById("setFilterOnThis").setAttribute('filter', 'url(#filter)'); + document.documentElement.removeAttribute("class"); +} + + </script> + <filter id="filter" x="20%" y="20%" width="100%" height="100%"> + <feFlood flood-color="lime"/> + </filter> + <rect width="100%" height="100%" fill="lime"/> + <rect x="20" y="20" width="100" height="100" fill="red"/> + <rect width="100" height="100" fill="white" id="setFilterOnThis"/> +</svg> diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-03.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-03.svg new file mode 100644 index 0000000000..4fc7dc8857 --- /dev/null +++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-03.svg @@ -0,0 +1,30 @@ +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=488702 + --> + <title>Test that invalidation takes filters into account</title> + <desc> + This test checks that when a container element changes, the area of + the screen that is invalidated and repainted takes account of any + filter effects on the changed element. + </desc> + <script type="text/javascript">//<![CDATA[ + +function show_lime_rect() +{ + document.getElementById("g").setAttribute("opacity", "1"); + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", show_lime_rect, false); +setTimeout(show_lime_rect, 1000); + + //]]></script> + <filter id="filter" filterUnits="userSpaceOnUse" x="0" y="0" width="200%" height="100%"> + <feOffset dx="-20"/> + </filter> + <rect width="100%" height="100%" fill="red"/> + <g id="g" opacity="0" filter="url(#filter)"> + <rect x="20" width="100%" height="100%" fill="lime"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/dynamic-filter-invalidation-04.svg b/layout/reftests/svg/filters/dynamic-filter-invalidation-04.svg new file mode 100644 index 0000000000..0e12e8d826 --- /dev/null +++ b/layout/reftests/svg/filters/dynamic-filter-invalidation-04.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=488702 + --> + <title>Test that invalidation takes filters on ancestors into account</title> + <desc> + This test checks that when a container element changes, the area of + the screen that is invalidated and repainted takes account of any + filter effects on the ancestors of the changed element. + </desc> + <script type="text/javascript">//<![CDATA[ + +function show_lime_rect() +{ + document.getElementById("g").setAttribute("opacity", "1"); + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", show_lime_rect, false); +setTimeout(show_lime_rect, 1000); + + //]]></script> + <filter id="filter" filterUnits="userSpaceOnUse" x="0" y="0" width="200%" height="100%"> + <feOffset dx="-20"/> + </filter> + <rect width="100%" height="100%" fill="red"/> + <g filter="url(#filter)"> + <g id="g" opacity="0"> + <rect x="20" width="100%" height="100%" fill="lime"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/filters/dynamic-filtered-foreignObject-01.svg b/layout/reftests/svg/filters/dynamic-filtered-foreignObject-01.svg new file mode 100644 index 0000000000..2320f21cf6 --- /dev/null +++ b/layout/reftests/svg/filters/dynamic-filtered-foreignObject-01.svg @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769942 --> + <script> + +function run_test() { + var fO = document.getElementById("fO"); + fO.parentNode.removeChild(fO); + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", run_test); +setTimeout(run_test, 4000); // fallback for running outside reftest + + </script> + <filter id="filter" x="0" y="0" width="150" height="150" + filterUnits="userSpaceOnUse" + primitiveUnits="userSpaceOnUse"> + <feOffset dx="-50" dy="-50"/> + </filter> + <rect width="100%" height="100%" fill="lime"/> + <g filter="url(#filter)"> + <foreignObject id="fO" x="50" y="50" width="100" height="100"> + <div xmlns="http://www.w3.org/1999/xhtml" + style="display:block; width:100%; height:100%; background:red;"/> + </foreignObject> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feBlend-1-ref.svg b/layout/reftests/svg/filters/feBlend-1-ref.svg new file mode 100644 index 0000000000..24a6fdfd6a --- /dev/null +++ b/layout/reftests/svg/filters/feBlend-1-ref.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="0" y="0" width="50" height="50" fill="#DFB53F"/> +<rect x="50" y="0" width="50" height="50" fill="#B5B53F"/> +<rect x="100" y="0" width="50" height="50" fill="#DFDF3F"/> +<rect x="150" y="0" width="50" height="50" fill="#B5B53F"/> +<rect x="200" y="0" width="50" height="50" fill="#DFDF3F"/> +<rect x="250" y="0" width="50" height="50" fill="#B5DF3F"/> +<rect x="300" y="0" width="50" height="50" fill="#B5DF3F"/> +<rect x="350" y="0" width="50" height="50" fill="#B5DF3F"/> +<rect x="0" y="50" width="50" height="50" fill="#DFB53F"/> +<rect x="50" y="50" width="50" height="50" fill="#B5DF3F"/> +<rect x="100" y="50" width="50" height="50" fill="#DFDF3F"/> +<rect x="150" y="50" width="50" height="50" fill="#DFDF3F"/> +<rect x="200" y="50" width="50" height="50" fill="#DFC88E"/> +<rect x="250" y="50" width="50" height="50" fill="#B5DF3F"/> +<rect x="300" y="50" width="50" height="50" fill="#DFC88E"/> +<rect x="350" y="50" width="50" height="50" fill="#B5CC3F"/> +<rect x="0" y="100" width="50" height="50" fill="#DFB53F"/> +</svg> diff --git a/layout/reftests/svg/filters/feBlend-1.svg b/layout/reftests/svg/filters/feBlend-1.svg new file mode 100644 index 0000000000..6a94853f5b --- /dev/null +++ b/layout/reftests/svg/filters/feBlend-1.svg @@ -0,0 +1,104 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%"> +<filter id="f0" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="normal"/> +</filter> +<rect x="0" y="0" width="50" height="50" filter="url(#f0)"/> +<filter id="f1" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="multiply"/> +</filter> +<rect x="50" y="0" width="50" height="50" filter="url(#f1)"/> +<filter id="f2" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="screen"/> +</filter> +<rect x="100" y="0" width="50" height="50" filter="url(#f2)"/> +<filter id="f3" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="darken"/> +</filter> +<rect x="150" y="0" width="50" height="50" filter="url(#f3)"/> +<filter id="f4" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="lighten"/> +</filter> +<rect x="200" y="0" width="50" height="50" filter="url(#f4)"/> +<filter id="f5" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="overlay"/> +</filter> +<rect x="250" y="0" width="50" height="50" filter="url(#f5)"/> +<filter id="f6" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="color-dodge"/> +</filter> +<rect x="300" y="0" width="50" height="50" filter="url(#f6)"/> +<filter id="f7" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="color-burn"/> +</filter> +<rect x="350" y="0" width="50" height="50" filter="url(#f7)"/> +<filter id="f8" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="hard-light"/> +</filter> +<rect x="0" y="50" width="50" height="50" filter="url(#f8)"/> +<filter id="f9" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="soft-light"/> +</filter> +<rect x="50" y="50" width="50" height="50" filter="url(#f9)"/> +<filter id="f10" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="difference"/> +</filter> +<rect x="100" y="50" width="50" height="50" filter="url(#f10)"/> +<filter id="f11" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="exclusion"/> +</filter> +<rect x="150" y="50" width="50" height="50" filter="url(#f11)"/> +<filter id="f12" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="hue"/> +</filter> +<rect x="200" y="50" width="50" height="50" filter="url(#f12)"/> +<filter id="f13" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="saturation"/> +</filter> +<rect x="250" y="50" width="50" height="50" filter="url(#f13)"/> +<filter id="f14" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="color"/> +</filter> +<rect x="300" y="50" width="50" height="50" filter="url(#f14)"/> +<filter id="f15" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="luminosity"/> +</filter> +<rect x="350" y="50" width="50" height="50" filter="url(#f15)"/> +<filter id="f16" x="0%" y="0%" width="100%" height="100%"> + <feFlood result="a" flood-color="rgb(255,0,0)" flood-opacity="0.5"/> + <feFlood result="b" flood-color="rgb(0,255,0)" flood-opacity="0.5"/> + <feBlend in="a" in2="b" mode="undefined"/> +</filter> +<rect x="0" y="100" width="50" height="50" filter="url(#f16)"/> +</svg> diff --git a/layout/reftests/svg/filters/feBlend-2-ref.svg b/layout/reftests/svg/filters/feBlend-2-ref.svg new file mode 100644 index 0000000000..6b62e6a270 --- /dev/null +++ b/layout/reftests/svg/filters/feBlend-2-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +<rect x="150" y="0" width="100" height="100" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feBlend-2.svg b/layout/reftests/svg/filters/feBlend-2.svg new file mode 100644 index 0000000000..c03e665d20 --- /dev/null +++ b/layout/reftests/svg/filters/feBlend-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feFlood flood-color="#ff0000" result="flood" x="0" y="0" width="100" height="100"/> + <feBlend mode="normal" in="SourceGraphic" in2="flood"/> +</filter> +<rect x="0" y="0" width="100" height="100" fill="#00ff00" filter="url(#f1)"/> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1181317 --> +<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feFlood flood-color="#ff0000" result="red" x="150" y="0" + width="100" height="100"/> + <feBlend mode="hard-light" in="SourceGraphic" in2="red"/> +</filter> +<rect x="150" y="0" width="100" height="100" fill="#00ff00" filter="url(#f2)"/> + +</svg> diff --git a/layout/reftests/svg/filters/feColorMatrix-1-ref.svg b/layout/reftests/svg/filters/feColorMatrix-1-ref.svg new file mode 100644 index 0000000000..f7328b21ef --- /dev/null +++ b/layout/reftests/svg/filters/feColorMatrix-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="10" width="80" height="80" fill="#345612" fill-opacity="0.5"/> + +</svg> diff --git a/layout/reftests/svg/filters/feColorMatrix-1.svg b/layout/reftests/svg/filters/feColorMatrix-1.svg new file mode 100644 index 0000000000..4cfd34cc4c --- /dev/null +++ b/layout/reftests/svg/filters/feColorMatrix-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0%" y="0%" width="100%" height="100%"> + <feColorMatrix type="matrix" values="0 1 0 0 0 0 0 1 0 0 1 0 0 0 0 0 0 0 0.5 0" + x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB"/> +</filter> +<rect x="0" y="0" width="100" height="100" fill="#123456" filter="url(#f1)"/> + +</svg> diff --git a/layout/reftests/svg/filters/feColorMatrix-2-ref.svg b/layout/reftests/svg/filters/feColorMatrix-2-ref.svg new file mode 100644 index 0000000000..f155cd01f4 --- /dev/null +++ b/layout/reftests/svg/filters/feColorMatrix-2-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="0" y="0" width="100" height="100" fill="#345612" fill-opacity="0.5"/> + +</svg> diff --git a/layout/reftests/svg/filters/feColorMatrix-2.svg b/layout/reftests/svg/filters/feColorMatrix-2.svg new file mode 100644 index 0000000000..08c7b04122 --- /dev/null +++ b/layout/reftests/svg/filters/feColorMatrix-2.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feColorMatrix type="matrix" values="0 1 0 0 0 0 0 1 0 0 1 0 0 0 0 0 0 0 0.5 0" + style="color-interpolation-filters:sRGB"/> +</filter> +<rect x="0" y="0" width="100" height="100" fill="#123456" filter="url(#f1)"/> + +</svg> diff --git a/layout/reftests/svg/filters/feColorMatrix-saturate-01.svg b/layout/reftests/svg/filters/feColorMatrix-saturate-01.svg new file mode 100644 index 0000000000..7961889798 --- /dev/null +++ b/layout/reftests/svg/filters/feColorMatrix-saturate-01.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for Filter Effects Module Level 1 over-saturation</title> + + <defs> + <filter id="SaturateHigh"> + <feColorMatrix in="SourceGraphic" type="saturate" values="11"/> + </filter> + </defs> + + <rect width="100%" height="100%" fill="#00A654" filter="url(#SaturateHigh)"/> +</svg> diff --git a/layout/reftests/svg/filters/feComponentTransfer-03.svg b/layout/reftests/svg/filters/feComponentTransfer-03.svg new file mode 100644 index 0000000000..d4ee019848 --- /dev/null +++ b/layout/reftests/svg/filters/feComponentTransfer-03.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase for feComponentTransfer with default arguments for gamma and linear</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=534841 --> + <defs> + <filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="100%" height="100%"> + <feComponentTransfer x="0" y="0" width="100%" height="100%" + style="color-interpolation-filters:sRGB"> + <feFuncR type="identity"/> + <feFuncG type="gamma"/> + <feFuncB type="identity"/> + <feFuncA type="linear"/> + </feComponentTransfer> + </filter> + </defs> + <rect x="0" y="0" width="100%" height="100%" fill="lime" filter="url(#f1)"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComponentTransfer-04.svg b/layout/reftests/svg/filters/feComponentTransfer-04.svg new file mode 100644 index 0000000000..bc470d5f30 --- /dev/null +++ b/layout/reftests/svg/filters/feComponentTransfer-04.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase for feComponentTransfer with single discrete value</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=845985 --> + <defs> + <filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="100%" height="100%"> + <feComponentTransfer x="0" y="0" width="100%" height="100%" + in="SourceAlpha" style="color-interpolation-filters:sRGB"> + <feFuncG type="discrete" tableValues="1" /> + </feComponentTransfer> + </filter> + </defs> + <rect x="0" y="0" width="100%" height="100%" fill="red" filter="url(#f1)"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComponentTransfer-1-ref.svg b/layout/reftests/svg/filters/feComponentTransfer-1-ref.svg new file mode 100644 index 0000000000..cb579e5fd1 --- /dev/null +++ b/layout/reftests/svg/filters/feComponentTransfer-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="10" width="80" height="80" fill="#00ffff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComponentTransfer-1.svg b/layout/reftests/svg/filters/feComponentTransfer-1.svg new file mode 100644 index 0000000000..6acdb7b567 --- /dev/null +++ b/layout/reftests/svg/filters/feComponentTransfer-1.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer x="10%" y="10%" width="80%" height="80%" + style="color-interpolation-filters:sRGB"> + <feFuncR type="table" tableValues="1 0 0 1"/> + <feFuncG type="discrete" tableValues="0 1 0"/> + <feFuncB type="linear" slope="0.5" intercept="0.75"/> + <feFuncA type="identity"/> + </feComponentTransfer> +</filter> +<rect x="0" y="0" width="100" height="100" fill="#808080" filter="url(#f1)"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComponentTransfer-2-ref.svg b/layout/reftests/svg/filters/feComponentTransfer-2-ref.svg new file mode 100644 index 0000000000..bf9d547d17 --- /dev/null +++ b/layout/reftests/svg/filters/feComponentTransfer-2-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="0" y="0" width="100" height="100" fill="#00ffff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComponentTransfer-2.svg b/layout/reftests/svg/filters/feComponentTransfer-2.svg new file mode 100644 index 0000000000..3514ec92f4 --- /dev/null +++ b/layout/reftests/svg/filters/feComponentTransfer-2.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feComponentTransfer + style="color-interpolation-filters:sRGB"> + <feFuncR type="table" tableValues="1 0 0 1"/> + <feFuncG type="discrete" tableValues="0 1 0"/> + <feFuncB type="linear" slope="0.5" intercept="0.75"/> + <feFuncA type="identity"/> + </feComponentTransfer> +</filter> +<rect x="0" y="0" width="100" height="100" fill="#808080" filter="url(#f1)"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComposite-1-ref.svg b/layout/reftests/svg/filters/feComposite-1-ref.svg new file mode 100644 index 0000000000..97b56241b3 --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-1-ref.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="10" width="40" height="80" fill="#00ff00"/> +<rect x="10" y="10" width="40" height="80" fill="#ff0000" opacity="0.5"/> +<rect x="50" y="10" width="40" height="80" fill="#ff0000" opacity="0.5"/> + +<rect x="110" y="10" width="40" height="80" fill="#ff0000"/> + +<rect x="250" y="10" width="40" height="80" fill="#ff0000"/> + +<rect x="310" y="10" width="40" height="80" fill="#00ff00"/> +<rect x="310" y="10" width="40" height="80" fill="#ff0000" opacity="0.5"/> + +<rect x="450" y="10" width="40" height="80" fill="#ff0000"/> + +<rect x="510" y="10" width="40" height="80" fill="#ffff00"/> +<rect x="550" y="10" width="40" height="80" fill="#ff0000"/> + +<rect x="0" y="100" width="100" height="100" fill="#000000"/> +<rect x="10" y="110" width="80" height="80" fill="#ffffff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComposite-1.svg b/layout/reftests/svg/filters/feComposite-1.svg new file mode 100644 index 0000000000..a1dfacc774 --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-1.svg @@ -0,0 +1,82 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood"/> + <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + in="flood" operator="over" in2="SourceGraphic"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="50" height="100" fill="#00ff00"/> + <rect x="50" y="0" width="50" height="100" fill="#00ff00" opacity="0"/> +</g> + +<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" result="flood"/> + <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + in="flood" operator="in" in2="SourceGraphic"/> +</filter> +<g filter="url(#f2)"> + <rect x="100" y="0" width="50" height="100" fill="#00ff00"/> + <rect x="150" y="0" width="50" height="100" fill="#00ff00" opacity="0"/> +</g> + +<filter id="f3" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" result="flood"/> + <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + in="flood" operator="out" in2="SourceGraphic"/> +</filter> +<g filter="url(#f3)"> + <rect x="200" y="0" width="50" height="100" fill="#00ff00"/> + <rect x="250" y="0" width="50" height="100" fill="#00ff00" opacity="0"/> +</g> + +<filter id="f4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood"/> + <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + in="flood" operator="atop" in2="SourceGraphic"/> +</filter> +<g filter="url(#f4)"> + <rect x="300" y="0" width="50" height="100" fill="#00ff00"/> + <rect x="350" y="0" width="50" height="100" fill="#00ff00" opacity="0"/> +</g> + +<filter id="f5" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" result="flood"/> + <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + in="flood" operator="xor" in2="SourceGraphic"/> +</filter> +<g filter="url(#f5)"> + <rect x="400" y="0" width="50" height="100" fill="#00ff00"/> + <rect x="450" y="0" width="50" height="100" fill="#00ff00" opacity="0"/> +</g> + +<filter id="f6" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" result="flood"/> + <feComposite x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + in="flood" operator="arithmetic" in2="SourceGraphic" + k2="1" k3="1"/> +</filter> +<g filter="url(#f6)"> + <rect x="500" y="0" width="50" height="100" fill="#00ff00"/> + <rect x="550" y="0" width="50" height="100" fill="#00ff00" opacity="0"/> +</g> + +<!-- Test the tricky case where the arithmetic operator leads to drawing outside + the bounding box of the source images --> +<filter id="f7" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" + x="0" y="100" width="100" height="100"> + <feComposite x="10" y="110" width="80" height="80" style="color-interpolation-filters:sRGB" + in="SourceGraphic" operator="arithmetic" in2="SourceGraphic" + k4="1"/> +</filter> +<rect x="0" y="100" width="100" height="100" fill="#000000"/> +<g filter="url(#f7)"> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feComposite-2-ref.svg b/layout/reftests/svg/filters/feComposite-2-ref.svg new file mode 100644 index 0000000000..464b6de23b --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-2-ref.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="0" y="0" width="50" height="100" fill="#00ff00"/> +<rect x="0" y="0" width="50" height="100" fill="#ff0000" opacity="0.5"/> +<rect x="50" y="0" width="50" height="100" fill="#ff0000" opacity="0.5"/> + +<rect x="100" y="0" width="50" height="100" fill="#808080"/> + +</svg> diff --git a/layout/reftests/svg/filters/feComposite-2.svg b/layout/reftests/svg/filters/feComposite-2.svg new file mode 100644 index 0000000000..e43088ea84 --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-2.svg @@ -0,0 +1,27 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feFlood flood-color="#ff0000" flood-opacity="0.5" result="flood" x="0" y="0" width="100" height="100"/> + <feComposite style="color-interpolation-filters:sRGB" + in="flood" operator="over" in2="SourceGraphic"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="50" height="100" fill="#00ff00"/> + <rect x="50" y="0" width="50" height="100" fill="#00ff00" opacity="0"/> +</g> + +<!-- Test that the arithmetic operator actually clamp the result --> +<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" style="color-interpolation-filters:sRGB"> + <feFlood flood-color="#ffffff" result="flood" x="100" y="0" width="50" height="100"/> + <feComposite result="c" in="SourceGraphic" in2="flood" operator="arithmetic" k2="1" k3="1"/> + <feComponentTransfer in="c"> + <feFuncR type="linear" slope="0.5"/> + <feFuncG type="linear" slope="0.5"/> + <feFuncB type="linear" slope="0.5"/> + </feComponentTransfer> +</filter> +<g filter="url(#f2)"> + <rect x="100" y="0" width="50" height="100" fill="#ff0000"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feComposite-arguments-01.svg b/layout/reftests/svg/filters/feComposite-arguments-01.svg new file mode 100644 index 0000000000..acec685ffc --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-arguments-01.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="filter"> + <feFlood flood-color="lime" result="flood1"/> + <feFlood flood-color="red" result="flood2"/> + <feComposite in="flood1" in2="flood2" + operator="arithmetic" k1="0" k2="1" k3="0" k4="0" /> + </filter> + </defs> + <rect width="100%" height="100%" fill="yellow" filter="url(#filter)"/> +</svg> + diff --git a/layout/reftests/svg/filters/feComposite-operator-lighter-ref.html b/layout/reftests/svg/filters/feComposite-operator-lighter-ref.html new file mode 100644 index 0000000000..561ade1582 --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-operator-lighter-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<style>* { margin: 0; padding: 0; }</style> +<canvas id="canvas" width="200" height="200"></canvas> +<script> +var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var width = canvas.width; +var height = canvas.height; + +ctx.globalCompositeOperation = 'lighter'; +ctx.fillStyle = '#f00'; +ctx.fillRect(0,0,width,height); + +gradient = ctx.createLinearGradient(0, 0, 0, height); +gradient.addColorStop(0, "#0f0"); +gradient.addColorStop(1, "#00f"); +ctx.fillStyle = gradient; +ctx.fillRect(0, 0, width, height); +</script> diff --git a/layout/reftests/svg/filters/feComposite-operator-lighter.svg b/layout/reftests/svg/filters/feComposite-operator-lighter.svg new file mode 100644 index 0000000000..74a969d1ba --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-operator-lighter.svg @@ -0,0 +1,11 @@ +<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + <filter id="f" x="0" y="0" width="1" height="1" color-interpolation-filters="sRGB"> + <feFlood flood-color="red"/> + <feComposite operator="lighter" in2="SourceGraphic"/> + </filter> + <linearGradient id="g2b" x1="0" x2="0" y1="0" y2="1"> + <stop offset="0" stop-color="#0f0"/> + <stop offset="1" stop-color="#00f"/> + </linearGradient> + <rect width="200" height="200" fill="url(#g2b)" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/filters/feComposite-paint-01-ref.svg b/layout/reftests/svg/filters/feComposite-paint-01-ref.svg new file mode 100644 index 0000000000..eb0e773d3a --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-paint-01-ref.svg @@ -0,0 +1,9 @@ +<svg id="svg-root" width="100%" height="100%" + viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" shape-rendering="crispEdges"> + + <rect transform="translate(100 30)" fill="lime" width="120" height="120"/> + <rect transform="translate(249 29)" width="122" height="122" fill="#80FF80"/> + <rect transform="translate(99 179)" width="122" height="122" fill="#666"/> + <rect transform="translate(249 179)" width="122" height="122" fill="rgb(0,255,255)"/> +</svg> diff --git a/layout/reftests/svg/filters/feComposite-paint-01.svg b/layout/reftests/svg/filters/feComposite-paint-01.svg new file mode 100644 index 0000000000..c6c2aac2e8 --- /dev/null +++ b/layout/reftests/svg/filters/feComposite-paint-01.svg @@ -0,0 +1,35 @@ +<svg id="svg-root" width="100%" height="100%" + viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" shape-rendering="crispEdges"> + <defs> + <filter id="composite-ident" x="0" y="0" width="1" height="1"> + <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="1" k3="-1" k4="0"/> + </filter> + <filter id="composite-negative" x="0" y="0" width="1" height="1"> + <feComposite operator="arithmetic" in="FillPaint" in2="FillPaint" k1="0" k2="2" k3="-1.5" k4="0"/> + </filter> + <filter id="composite-mixed" x="0" y="0" width="1" height="1"> + <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="1" k2="-0.5" k3="0.2" k4="-0.1"/> + </filter> + <filter id="composite-clamped" x="0" y="0" width="1" height="1"> + <feComposite operator="arithmetic" in="FillPaint" in2="StrokePaint" k1="0" k2="10" k3="20" k4="0"/> + </filter> + </defs> + + <g transform="translate(100 30)"> + <rect fill="lime" width="120" height="120"/> + <rect fill="red" stroke="red" filter="url(#composite-ident)" x="10" y="10" width="100" height="100"/> + </g> + <g transform="translate(250 30)"> + <rect fill="#0F0" filter="url(#composite-negative)" x="10" y="10" width="100" height="100"/> + <rect stroke="#80FF80" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/> + </g> + <g transform="translate(100 180)"> + <rect fill="rgb(43,17,12)" stroke="rgb(32,42,37)" filter="url(#composite-mixed)" x="10" y="10" width="100" height="100"/> + <rect stroke="#666" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/> + </g> + <g transform="translate(250 180)"> + <rect fill="rgb(0,127,0)" stroke="rgb(0,0,127)" filter="url(#composite-clamped)" x="10" y="10" width="100" height="100"/> + <rect stroke="rgb(0,255,255)" x="5" y="5" width="110" height="110" stroke-width="12" fill="none"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-1-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-1-ref.svg new file mode 100644 index 0000000000..60474fb6b2 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-1-ref.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="48" y="10" width="1" height="80" fill="#00ff00"/> +<rect x="51" y="10" width="1" height="80" fill="#00ff00"/> + +<rect x="249" y="10" width="2" height="80" fill="#000000"/> + +<rect x="349" y="10" width="2" height="80" fill="#000000"/> + +<rect x="1" y="100" width="1" height="100" fill="#00ff00"/> +<rect x="99" y="100" width="1" height="100" fill="#00ff00"/> + +<rect x="101" y="100" width="1" height="100" fill="#ff0000"/> + +<rect x="201" y="100" width="1" height="100" fill="#0000ff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-1.svg b/layout/reftests/svg/filters/feConvolveMatrix-1.svg new file mode 100644 index 0000000000..8bdc267d71 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-1.svg @@ -0,0 +1,75 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" in="SourceGraphic"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00" opacity="0"/> + <rect x="49" y="0" width="2" height="100" fill="#00ff00"/> +</g> + +<!-- can't figure out a good way to test kernelUnitLength +<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + order="3" kernelUnitLength="0.1" kernelMatrix="0 1 0 1 -4 1 0 1 0" in="SourceGraphic"/> +</filter> +<g filter="url(#f2)"> + <rect x="100" y="0" width="100" height="100" fill="#00ff00" opacity="0"/> + <rect x="140" y="0" width="20" height="100" fill="#00ff00"/> +</g> +--> + +<filter id="f3" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" bias="-1" preserveAlpha="true" in="SourceGraphic"/> +</filter> +<g filter="url(#f3)"> + <rect x="200" y="0" width="100" height="100" fill="#00ff00" opacity="0"/> + <rect x="249" y="0" width="2" height="100" fill="#00ff00"/> +</g> + +<filter id="f4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feConvolveMatrix x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" divisor="100000" preserveAlpha="true" in="SourceGraphic"/> +</filter> +<g filter="url(#f4)"> + <rect x="300" y="0" width="100" height="100" fill="#00ff00" opacity="0"/> + <rect x="349" y="0" width="2" height="100" fill="#00ff00"/> +</g> + +<filter id="f5" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feConvolveMatrix style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" edgeMode="wrap" in="SourceGraphic"/> +</filter> +<g filter="url(#f5)"> + <rect x="0" y="100" width="100" height="100" fill="#00ff00" opacity="0"/> + <rect x="0" y="100" width="1" height="100" fill="#00ff00"/> +</g> + +<filter id="f6" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feConvolveMatrix style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" edgeMode="duplicate" in="SourceGraphic"/> +</filter> +<g filter="url(#f6)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00" opacity="0"/> + <rect x="100" y="100" width="1" height="100" fill="#ff0000"/> +</g> + +<filter id="f7" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feConvolveMatrix style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" edgeMode="none" in="SourceGraphic"/> +</filter> +<g filter="url(#f7)"> + <rect x="200" y="100" width="100" height="100" fill="#00ff00" opacity="0"/> + <rect x="200" y="100" width="1" height="100" fill="#0000ff"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-2-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-2-ref.svg new file mode 100644 index 0000000000..5b4ba420a1 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-2-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="48" y="0" width="1" height="500" fill="#00ff00"/> +<rect x="51" y="0" width="1" height="500" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-2.svg b/layout/reftests/svg/filters/feConvolveMatrix-2.svg new file mode 100644 index 0000000000..a804320863 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-2.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feConvolveMatrix style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 1 0 1 -4 1 0 1 0" in="SourceGraphic"/> +</filter> +<g filter="url(#f1)"> + <rect x="49" y="0" width="2" height="10000" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-bias-01-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-bias-01-ref.svg new file mode 100644 index 0000000000..c3c0805595 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-bias-01-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference for feConvolveMatrix with bias</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=527325 --> + <rect x="0" y="0" width="100" height="100" fill="rgb(128,255,128)"/> +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-bias-01.svg b/layout/reftests/svg/filters/feConvolveMatrix-bias-01.svg new file mode 100644 index 0000000000..fe96b0b348 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-bias-01.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for feConvolveMatrix with bias</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=527325 --> + <defs> + <filter id="filter" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%" style="color-interpolation-filters: sRGB"> + <feConvolveMatrix kernelMatrix="1 1 1 1 1 1 1 1 1" bias="0.5"/> + </filter> + </defs> + <rect x="0" y="0" width="100" height="100" fill="rgb(0,255,0)" filter="url(#filter)"/> +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-order-01-ref.svg b/layout/reftests/svg/filters/feConvolveMatrix-order-01-ref.svg new file mode 100644 index 0000000000..957c65e577 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-order-01-ref.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="convoluted_lime" x="0%" y="0%" width="100%" height="100%"> + <feFlood flood-color="lime"/> + <feConvolveMatrix order="3" kernelMatrix=" + 0 0 0 + 0 1 0 + 0 0 0"/> + </filter> + </defs> + <rect x="30" y="30" width="97" height="60" filter="url(#convoluted_lime)"/> +</svg> diff --git a/layout/reftests/svg/filters/feConvolveMatrix-order-01.svg b/layout/reftests/svg/filters/feConvolveMatrix-order-01.svg new file mode 100644 index 0000000000..6d0d116e77 --- /dev/null +++ b/layout/reftests/svg/filters/feConvolveMatrix-order-01.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> + <desc> + <html:p>When the 'order' attribute of feConvolveMatrix is + omitted the effect is the same as if the value "3" were given. + Per <html:a href="https://bugzilla.mozilla.org/show_bug.cgi?id=478570">Bug 478570</html:a> + discussion and linked spec errata.</html:p> + </desc> + <defs> + <filter id="convoluted_lime" x="0%" y="0%" width="100%" height="100%"> + <feFlood flood-color="lime"/> + <feConvolveMatrix kernelMatrix=" + 0 0 0 + 0 1 0 + 0 0 0"/> + </filter> + </defs> + <rect x="30" y="30" width="97" height="60" fill="red" filter="url(#convoluted_lime)"/> +</svg> diff --git a/layout/reftests/svg/filters/feDiffuseLighting-1-ref.svg b/layout/reftests/svg/filters/feDiffuseLighting-1-ref.svg new file mode 100644 index 0000000000..efdf453903 --- /dev/null +++ b/layout/reftests/svg/filters/feDiffuseLighting-1-ref.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> + <image width='100' height='100' + xlink:href="data:image/png;base64, +iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI +WXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH3wkbDDIilL5aRAAAAB1pVFh0Q29tbWVudAAAAAAAQ3Jl +YXRlZCB3aXRoIEdJTVBkLmUHAAAA9UlEQVR42u3csRHDIBBFwbPHddADiqmEduhFlSiWelBOSirX +YFsB49lXAMHf4DIeEXGFpqi1Fk8zzFPOGchsAQEiIEAEBIiAABEQIAIiIEAEBIiAAPmgUkosy2LV +H3rd+VitNXrvse+7ZWcASSlFSsmqbggQAQEiIAICRECACAgQAQEiIEAERECACAgQAQEiIEAERECA +CAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAfnHbv3Z+jzP6L1bdRaQdV1j +jGHVWUC2bbOoGwJEQIAIiIAAERAgAgJEQIAIiIAAERAg+qrjOOINBcEbJFN4kugAAAAASUVORK5C +YII="/> +</svg> diff --git a/layout/reftests/svg/filters/feDiffuseLighting-1.svg b/layout/reftests/svg/filters/feDiffuseLighting-1.svg new file mode 100644 index 0000000000..8c5f49b101 --- /dev/null +++ b/layout/reftests/svg/filters/feDiffuseLighting-1.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px'> + <!-- + A basic test for the <feDiffuseLighting> filter primitive. + Setting kernelUnitLength on the <feDiffuseLighting> should allow us to + assume pixel perfection. + --> + <filter id='f' x='0' y='0' width='1' height='1'> + <feDiffuseLighting kernelUnitLength='1'> + <feDistantLight/> + </feDiffuseLighting> + </filter> + <path d='M0,0 h100 v100 h-100 z M20,20 v60 h60 v-60 z' filter='url(#f)'/> +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-1-ref.svg b/layout/reftests/svg/filters/feDisplacementMap-1-ref.svg new file mode 100644 index 0000000000..8ac9dff0be --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="50" width="40" height="40" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-1.svg b/layout/reftests/svg/filters/feDisplacementMap-1.svg new file mode 100644 index 0000000000..5061bbe053 --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-1.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#ff0000" result="flood"/> + <feDisplacementMap x="10%" y="10%" width="80%" height="80%" style="color-interpolation-filters:sRGB" + in="SourceGraphic" in2="flood" scale="1" xChannelSelector="R" yChannelSelector="G"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-2-ref.svg b/layout/reftests/svg/filters/feDisplacementMap-2-ref.svg new file mode 100644 index 0000000000..3665d027bc --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-2-ref.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="0" y="50" width="50" height="50" fill="#00ff00"/> +<rect x="100" y="50" width="50" height="50" fill="#00ff00"/> +<rect x="50" y="100" width="100" height="50" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-2.svg b/layout/reftests/svg/filters/feDisplacementMap-2.svg new file mode 100644 index 0000000000..29a7224b86 --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-2.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feFlood flood-color="#ff0000" result="flood" x="0" y="0" width="100" height="100"/> + <feDisplacementMap style="color-interpolation-filters:sRGB" + in="SourceGraphic" in2="flood" scale="100" xChannelSelector="R" yChannelSelector="G"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-alpha-01.svg b/layout/reftests/svg/filters/feDisplacementMap-alpha-01.svg new file mode 100644 index 0000000000..6933b78f2b --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-alpha-01.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase for feDisplacementMap processing in2 with premultiplied colour values</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=584322 --> + <defs> + <filter id="f1"> + <feTurbulence baseFrequency="0.1" type="fractalNoise" result="result1"/> + <feDisplacementMap id="feDisplacementMap" in2="result1" + xChannelSelector="G" yChannelSelector="G" + scale="50" in="SourceGraphic"/> + </filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <g transform="translate(100,100)"> + <circle cx="0" cy="0" r="60" fill="red" filter="url('#f1')"/> + <circle cx="0" cy="0" r="80" fill="lime"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-colour-01-ref.svg b/layout/reftests/svg/filters/feDisplacementMap-colour-01-ref.svg new file mode 100644 index 0000000000..2edd897b72 --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-colour-01-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference for feDisplacementMap processing in1 with linearRGB colours</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=603584 --> + + <rect width="100%" height="100%" fill="#ea2"/> +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-colour-01.svg b/layout/reftests/svg/filters/feDisplacementMap-colour-01.svg new file mode 100644 index 0000000000..6c8b1cb34e --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-colour-01.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase for feDisplacementMap processing in1 with linearRGB colours</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=603584 --> + <defs> + <filter id="sponge"> + <feTurbulence baseFrequency="0.1" type="fractalNoise" result="result1"/> + <feDisplacementMap id="feDisplacementMap" in2="result1" xChannelSelector="G" yChannelSelector="G" scale="50" in="SourceGraphic"/> + </filter> + </defs> + + <!-- we can't use our usual lime here as that's the same colour in both colour spaces --> + <rect width="100%" height="100%" fill="#ea2"/> + <rect stroke="none" style="filter:url(#sponge)" x="50" y="50" width="100" height="100" fill="#ea2" /> +</svg> diff --git a/layout/reftests/svg/filters/feDisplacementMap-scale-01.svg b/layout/reftests/svg/filters/feDisplacementMap-scale-01.svg new file mode 100644 index 0000000000..0b2231e974 --- /dev/null +++ b/layout/reftests/svg/filters/feDisplacementMap-scale-01.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that directionless filter primitive attributes are resolved to user units correctly</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=619967 --> + <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="200" color-interpolation-filters="sRGB"> + <feFlood flood-color="#800" result="map"/> + <feDisplacementMap in="SourceGraphic" in2="map" xChannelSelector="R" yChannelSelector="G" scale="100"/> + </filter> + <rect width="100%" height="100%" fill="lime"/> + <rect y="82" width="300" height="8" fill="red"/> + <rect width="400" height="200" fill="lime" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/filters/feDropShadow-01-ref.svg b/layout/reftests/svg/filters/feDropShadow-01-ref.svg new file mode 100644 index 0000000000..47058f256f --- /dev/null +++ b/layout/reftests/svg/filters/feDropShadow-01-ref.svg @@ -0,0 +1,68 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Reference for Filter Effects Module Level 1 feDropShadow</title> + + <defs> + <filter id="dropShadow1"> + <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> + <feOffset dx="2" dy="2" result="offsetblur"/> + <feFlood flood-color="green"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <filter id="dropShadow2"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + <feOffset dx="-2" dy="-5" result="offsetblur"/> + <feFlood flood-color="green"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <filter id="dropShadow3"> + <feGaussianBlur in="SourceAlpha" stdDeviation="2 5"/> + <feOffset dx="5" dy="5" result="offsetblur"/> + <feFlood flood-color="green" flood-opacity="0.2"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <filter id="dropShadow4" color-interpolation-filters="sRGB"> + <feGaussianBlur in="SourceAlpha" stdDeviation="5"/> + <feOffset dx="5" dy="5" result="offsetblur"/> + <feFlood flood-color="green"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <filter id="dropShadow5"> + <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> + <feOffset dx="2" dy="2" result="offsetblur"/> + <feFlood flood-color="green"/> + <feComposite in2="offsetblur" operator="in"/> + <feMerge> + <feMergeNode/> + <feMergeNode in="SourceAlpha"/> + </feMerge> + </filter> + </defs> + <g fill="yellow" transform="translate(10,10)"> + <circle cx="75" cy="75" r="70" filter="url(#dropShadow1)" /> + <circle cx="250" cy="75" r="70" filter="url(#dropShadow2)" /> + <circle cx="425" cy="75" r="70" filter="url(#dropShadow3)" /> + <circle cx="600" cy="75" r="70" filter="url(#dropShadow4)" /> + <circle cx="75" cy="250" r="70" filter="url(#dropShadow5)" /> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feDropShadow-01.svg b/layout/reftests/svg/filters/feDropShadow-01.svg new file mode 100644 index 0000000000..847b878fbc --- /dev/null +++ b/layout/reftests/svg/filters/feDropShadow-01.svg @@ -0,0 +1,43 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for Filter Effects Module Level 1 feDropShadow</title> + + <defs> + <!-- check default values --> + <filter id="dropShadow1"> + <feDropShadow flood-color="green"/> + </filter> + <!-- check negative dx, dy --> + <filter id="dropShadow2"> + <feDropShadow stdDeviation="5" dx="-2" dy="-5" flood-color="green"/> + </filter> + <!-- check flood-opacity and non-default values --> + <filter id="dropShadow3"> + <feDropShadow stdDeviation="2 5" dx="5" dy="5" flood-color="green" flood-opacity="0.2"/> + </filter> + <!-- check sRGB --> + <filter id="dropShadow4" color-interpolation-filters="sRGB"> + <feDropShadow stdDeviation="5" dx="5" dy="5" flood-color="green"/> + </filter> + <!-- check sourceAlpha input --> + <filter id="dropShadow5"> + <feDropShadow in="SourceAlpha" flood-color="green"/> + </filter> + <!-- check negative stdDeviation (should not display anything) --> + <filter id="dropShadow6"> + <feDropShadow stdDeviation="-2" flood-color="green"/> + </filter> + </defs> + <g fill="yellow" transform="translate(10,10)"> + <circle cx="75" cy="75" r="70" filter="url(#dropShadow1)" /> + <circle cx="250" cy="75" r="70" filter="url(#dropShadow2)" /> + <circle cx="425" cy="75" r="70" filter="url(#dropShadow3)" /> + <circle cx="600" cy="75" r="70" filter="url(#dropShadow4)" /> + <circle cx="75" cy="250" r="70" filter="url(#dropShadow5)" /> + <circle cx="250" cy="250" r="70" filter="url(#dropShadow6)" /> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feFlood-1-ref.svg b/layout/reftests/svg/filters/feFlood-1-ref.svg new file mode 100644 index 0000000000..3cc5e99005 --- /dev/null +++ b/layout/reftests/svg/filters/feFlood-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="10" width="80" height="80" fill="#00ff00" opacity="0.5"/> + +</svg> diff --git a/layout/reftests/svg/filters/feFlood-1.svg b/layout/reftests/svg/filters/feFlood-1.svg new file mode 100644 index 0000000000..1a11222682 --- /dev/null +++ b/layout/reftests/svg/filters/feFlood-1.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood x="10%" y="10%" width="80%" height="80%" flood-color="#00ff00" flood-opacity="0.5"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00" opacity="0"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feFlood-2-ref.svg b/layout/reftests/svg/filters/feFlood-2-ref.svg new file mode 100644 index 0000000000..cb122fd129 --- /dev/null +++ b/layout/reftests/svg/filters/feFlood-2-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<rect x="0" y="0" width="100%" height="100%" fill="#00ff00" opacity="0.5"/> + +</svg> diff --git a/layout/reftests/svg/filters/feFlood-2.svg b/layout/reftests/svg/filters/feFlood-2.svg new file mode 100644 index 0000000000..8902a5a263 --- /dev/null +++ b/layout/reftests/svg/filters/feFlood-2.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feFlood flood-color="#00ff00" flood-opacity="0.5"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#0000ff"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feFlood-color-01.svg b/layout/reftests/svg/filters/feFlood-color-01.svg new file mode 100644 index 0000000000..779fa5e4b0 --- /dev/null +++ b/layout/reftests/svg/filters/feFlood-color-01.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="floodFilter" filterUnits="userSpaceOnUse"> + <feFlood x="0" y="0" width="100" height="100" color="lime" + flood-color="currentColor" flood-opacity="1" + /> + </filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <use style="filter: url(#floodFilter);"/> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-1-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-1-ref.svg new file mode 100644 index 0000000000..8728e9adff --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-1-ref.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="10" width="80" height="80" fill="#00ff00"/> + +<rect x="110" y="10" width="80" height="80" fill="#00ff00" fill-opacity="0.5"/> + +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-1.svg b/layout/reftests/svg/filters/feGaussianBlur-1.svg new file mode 100644 index 0000000000..ef628ba047 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-1.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feGaussianBlur x="10%" y="10%" width="80%" height="80%" in="SourceGraphic" stdDeviation="0.04"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feGaussianBlur x="10%" y="10%" width="80%" height="80%" in="SourceAlpha" stdDeviation="0.04" + result="blur" style="color-interpolation-filters:sRGB"/> + <feFlood flood-color="#00ff00" result="flood"/> + <feComposite in="flood" operator="in" in2="blur"/> +</filter> +<g filter="url(#f2)"> + <rect x="100" y="0" width="100" height="100" fill="#00ff00" fill-opacity="0.5"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-2-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-2-ref.svg new file mode 100644 index 0000000000..8d12555188 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-2-ref.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<rect x="130" y="130" width="40" height="40" fill="#00ff00"/> + +<rect x="90" y="390" width="120" height="120" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-2.svg b/layout/reftests/svg/filters/feGaussianBlur-2.svg new file mode 100644 index 0000000000..7af12c6102 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-2.svg @@ -0,0 +1,40 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<!-- It's unfortunately hard to reftest the extent of the blur. We can at + least make sure it paints *something* --> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10"/> +</filter> +<g filter="url(#f1)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> + +<!-- the radius affected by the box-blur is bounded by 3 times the standard + deviation --> +<rect x="0" y="0" width="300" height="130" fill="#ffffff"/> +<rect x="0" y="130" width="130" height="40" fill="#ffffff"/> +<rect x="170" y="130" width="130" height="40" fill="#ffffff"/> +<rect x="0" y="170" width="300" height="130" fill="#ffffff"/> + +<!-- we can test whether the blur is a reasonable size by bumping up + non-zero alpha values a lot --> + +<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10"/> + <feComponentTransfer> + <feFuncA type="linear" slope="1000"/> + </feComponentTransfer> +</filter> +<g filter="url(#f2)"> + <rect x="100" y="400" width="100" height="100" fill="#00ff00"/> +</g> + +<!-- there should be nonzero alpha values everywhere within 1 standard + deviation of the original image --> +<rect x="0" y="300" width="300" height="90" fill="#ffffff"/> +<rect x="0" y="390" width="90" height="120" fill="#ffffff"/> +<rect x="210" y="390" width="90" height="120" fill="#ffffff"/> +<rect x="0" y="510" width="300" height="90" fill="#ffffff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-3-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-3-ref.svg new file mode 100644 index 0000000000..542e8a6d55 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-3-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<rect x="100" y="100" width="100" height="100" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-3.svg b/layout/reftests/svg/filters/feGaussianBlur-3.svg new file mode 100644 index 0000000000..4d3e640c54 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-3.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/> + <feFlood flood-opacity="0" flood-color="black"/> + <feComposite in="blur" operator="over" x="100" y="100" width="100" height="100"/> +</filter> +<g filter="url(#f1)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-4-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-4-ref.svg new file mode 100644 index 0000000000..1b729e3177 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-4-ref.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/> + <feFlood flood-opacity="0" flood-color="black"/> + <feComposite in="blur" operator="over" x="100" y="100" width="100" height="100"/> +</filter> +<g filter="url(#f1)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-4.svg b/layout/reftests/svg/filters/feGaussianBlur-4.svg new file mode 100644 index 0000000000..c5fc07d42a --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-4.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" x="100" y="100" width="100" height="100"/> +</filter> +<g filter="url(#f1)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-5-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-5-ref.svg new file mode 100644 index 0000000000..1ed5b8b47c --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-5-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> +<g> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-5.svg b/layout/reftests/svg/filters/feGaussianBlur-5.svg new file mode 100644 index 0000000000..ef910f498b --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-5.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="0.0001"/> +</filter> +<g filter="url(#f1)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-6-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-6-ref.svg new file mode 100644 index 0000000000..1ed5b8b47c --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-6-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> +<g> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-6.svg b/layout/reftests/svg/filters/feGaussianBlur-6.svg new file mode 100644 index 0000000000..275027ba1c --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-6.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="0"/> +</filter> +<g filter="url(#f1)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00"/> +</g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-alpha-01-ref.svg b/layout/reftests/svg/filters/feGaussianBlur-alpha-01-ref.svg new file mode 100644 index 0000000000..6dd3b1466b --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-alpha-01-ref.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>SourceAlpha pseudo input reference</title> + + <defs> + <filter id="blur"> + <feGaussianBlur in="SourceGraphic" stdDeviation="2"/> + </filter> + </defs> + + <g fill-opacity="0.6" stroke="black" fill="black" stroke-width="3" filter="url(#blur)"> + <circle cx="98" cy="85" r="25"/> + <circle cx="80" cy="110" r="25"/> + <circle cx="116" cy="110" r="25"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-alpha-01.svg b/layout/reftests/svg/filters/feGaussianBlur-alpha-01.svg new file mode 100644 index 0000000000..8e74d9ca01 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-alpha-01.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>SourceAlpha pseudo input test</title> + + <defs> + <filter id="alphaBlur"> + <feGaussianBlur in="SourceAlpha" stdDeviation="2"/> + </filter> + </defs> + + <g fill-opacity="0.6" stroke="black" stroke-width="3" filter="url(#alphaBlur)"> + <circle cx="98" cy="85" r="25" fill="red"/> + <circle cx="80" cy="110" r="25" fill="blue"/> + <circle cx="116" cy="110" r="25" fill="green"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software-ref.html b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software-ref.html new file mode 100644 index 0000000000..4797720d2e --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software-ref.html @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="blur"> + <feGaussianBlur stdDeviation="100 0"/> + </filter> + <g filter="url(#blur)"> + <rect x="0" y="0" width="100" height="100" fill="#0f0"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software.html b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software.html new file mode 100644 index 0000000000..f8d7566ed4 --- /dev/null +++ b/layout/reftests/svg/filters/feGaussianBlur-cap-large-directional-radius-on-software.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="blur"> + <!-- + When rendering in software, Firefox should cap large blur radii to a + smaller value in order to keep performance acceptable. + --> + <feGaussianBlur stdDeviation="1000000 0"/> + </filter> + <g filter="url(#blur)"> + <rect x="0" y="0" width="100" height="100" fill="#0f0"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/feImage-1-ref.svg b/layout/reftests/svg/filters/feImage-1-ref.svg new file mode 100644 index 0000000000..3122ae49d2 --- /dev/null +++ b/layout/reftests/svg/filters/feImage-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + +<image xlink:href="mozilla-banner.gif" x="10" y="10" width="600" height="58"/> + +</svg> diff --git a/layout/reftests/svg/filters/feImage-1.svg b/layout/reftests/svg/filters/feImage-1.svg new file mode 100644 index 0000000000..73fff9ee55 --- /dev/null +++ b/layout/reftests/svg/filters/feImage-1.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse" + x="10" y="10" width="700" height="700"> + <feImage xlink:href="mozilla-banner.gif" x="10" y="10" width="600" height="58" + style="color-interpolation-filters:sRGB"/> +</filter> +<g filter="url(#f1)"> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion-ref.html b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion-ref.html new file mode 100644 index 0000000000..dc7d3d8dca --- /dev/null +++ b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion-ref.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE HTML> +<html> +<title>feImage Rendering Should Scale To Its Primitive Subregion</title> +<head> + <style> + .filtered { + height: 30px; + width: 600px; + background: #0f0; + } + </style> +</head> +<body> + <p>You should see a long horizontal green rectangle.</p> + <div class="filtered"></div> +</body> +</html> diff --git a/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion.html b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion.html new file mode 100644 index 0000000000..c66db69110 --- /dev/null +++ b/layout/reftests/svg/filters/feImage-scale-to-primitive-subregion.html @@ -0,0 +1,44 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE HTML> +<html> +<title>feImage Rendering Should Scale To Its Primitive Subregion</title> +<!-- + Test for https://bugzilla.mozilla.org/show_bug.cgi?id=1065606 + + This test verifies that an feImage renders as large as its primitive subregion + before being clipped by its filter region. + + In this case, the primitive subregion is 600x600. The filter region is equal + to the bounding box of the filtered element (100% x 30px). + + Thus, the 1x1 green pixel feImage rendering should scale up to the 600x600 + primitive subregion and then be clipped by the 100% x 30px filter region. + Assuming the browser window is more than 600px wide, the final rendering + should be a 600x30 green rectangle. +--> +<head> + <style> + .filtered { + filter: url(#f); + height: 30px; + background: red; + } + </style> +</head> +<body> + <p>You should see a long horizontal green rectangle.</p> + <div class="filtered"></div> + <svg> + <defs> + <filter id="f" x="0" y="0" width="1" height="1"> + <!-- Data URI represents a 1x1 green pixel. --> + <feImage width="600" height="600" + xlink:href="data:image/gif;base64,R0lGODlhAQABAIAAAAD/AAAAACwAAAAAAQABAAACAkQBADs="/> + </filter> + </defs> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/feMerge-1-ref.svg b/layout/reftests/svg/filters/feMerge-1-ref.svg new file mode 100644 index 0000000000..080cb98645 --- /dev/null +++ b/layout/reftests/svg/filters/feMerge-1-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="10" width="30" height="80" fill="#00ff00"/> +<rect x="40" y="10" width="50" height="80" fill="#0000ff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feMerge-1.svg b/layout/reftests/svg/filters/feMerge-1.svg new file mode 100644 index 0000000000..b4c05d2ba2 --- /dev/null +++ b/layout/reftests/svg/filters/feMerge-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood x="0" y="0" width="50%" height="100%" flood-color="#00ff00" result="left"/> + <feFlood x="40%" y="0" width="60%" height="100%" flood-color="#0000ff" result="right"/> + <feMerge x="10%" y="10%" width="80%" height="80%"> + <feMergeNode in="left"/> + <feMergeNode in="right"/> + </feMerge> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#000000"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feMerge-2-ref.svg b/layout/reftests/svg/filters/feMerge-2-ref.svg new file mode 100644 index 0000000000..a42ad06263 --- /dev/null +++ b/layout/reftests/svg/filters/feMerge-2-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<rect x="0" y="0" width="40%" height="100%" fill="#00ff00"/> +<rect x="40%" y="0" width="60%" height="100%" fill="#0000ff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feMerge-2.svg b/layout/reftests/svg/filters/feMerge-2.svg new file mode 100644 index 0000000000..278b52f39e --- /dev/null +++ b/layout/reftests/svg/filters/feMerge-2.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feFlood x="0" y="0" width="50%" height="100%" flood-color="#00ff00" result="left"/> + <feFlood x="40%" y="0" width="60%" height="100%" flood-color="#0000ff" result="right"/> + <feMerge> + <feMergeNode in="left"/> + <feMergeNode in="right"/> + </feMerge> +</filter> +<g filter="url(#f1)"> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-1-ref.svg b/layout/reftests/svg/filters/feMorphology-1-ref.svg new file mode 100644 index 0000000000..ac4fd4ed72 --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-1-ref.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="20" y="20" width="60" height="60" fill="#00ff00"/> + +<rect x="135" y="45" width="30" height="10" fill="#00ff00"/> + +<rect x="10" y="110" width="80" height="80" fill="#00ff00"/> +<rect x="30" y="130" width="40" height="40" fill="#000000"/> + +<rect x="125" y="115" width="50" height="70" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-1.svg b/layout/reftests/svg/filters/feMorphology-1.svg new file mode 100644 index 0000000000..cdf91fc01b --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-1.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feMorphology operator="erode" radius="0.2 0.2" x="10%" y="10%" width="80%" height="80%"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +<filter id="f2" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feMorphology operator="erode" radius="0.3 0.4" x="10%" y="10%" width="80%" height="80%"/> +</filter> +<g filter="url(#f2)"> + <rect x="100" y="0" width="100" height="100" fill="#00ff00" fill-opacity="0"/> + <rect x="105" y="5" width="90" height="90" fill="#00ff00"/> +</g> + +<filter id="f3" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feMorphology operator="dilate" radius="0.2 0.2" x="10%" y="10%" width="80%" height="80%"/> +</filter> +<g filter="url(#f3)"> + <rect x="0" y="100" width="100" height="100" fill="#00ff00"/> + <rect x="10" y="110" width="80" height="80" fill="#000000"/> +</g> + +<filter id="f4" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feMorphology operator="dilate" radius="0.2 0.3" x="10%" y="10%" width="80%" height="80%"/> +</filter> +<g filter="url(#f4)"> + <rect x="100" y="100" width="100" height="100" fill="#00ff00" fill-opacity="0"/> + <rect x="145" y="145" width="10" height="10" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-2-ref.svg b/layout/reftests/svg/filters/feMorphology-2-ref.svg new file mode 100644 index 0000000000..27b0336e94 --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-2-ref.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="20" y="20" width="60" height="60" fill="#00ff00"/> + +<rect x="135" y="45" width="30" height="10" fill="#00ff00"/> + +<rect x="-20" y="80" width="140" height="140" fill="#00ff00"/> +<rect x="30" y="130" width="40" height="40" fill="#000000"/> + +<rect x="125" y="115" width="50" height="70" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-2.svg b/layout/reftests/svg/filters/feMorphology-2.svg new file mode 100644 index 0000000000..7b19aa2458 --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-2.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feMorphology operator="erode" radius="20 20"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +<filter id="f2" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feMorphology operator="erode" radius="30 40"/> +</filter> +<g filter="url(#f2)"> + <rect x="105" y="5" width="90" height="90" fill="#00ff00"/> +</g> + +<filter id="f3" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feMorphology operator="dilate" radius="20 20"/> +</filter> +<g filter="url(#f3)"> + <rect x="0" y="100" width="100" height="100" fill="#00ff00"/> + <rect x="10" y="110" width="80" height="80" fill="#000000"/> +</g> + +<filter id="f4" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feMorphology operator="dilate" radius="20 30"/> +</filter> +<g filter="url(#f4)"> + <rect x="145" y="145" width="10" height="10" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-radius-negative-01.svg b/layout/reftests/svg/filters/feMorphology-radius-negative-01.svg new file mode 100644 index 0000000000..40a6b7d283 --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-radius-negative-01.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test 'feMorphology' with a negative value for its 'radius'</title> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and + https://bugzilla.mozilla.org/show_bug.cgi?id=1432250 + + The negative value should disable the primitive effect and output + the input image. + --> + <filter id="f1"> + <feMorphology operator="erode" radius="-1"/> + </filter> + <filter id="f2"> + <feMorphology operator="erode" radius="-1 50"/> + </filter> + <rect width="100%" height="100%" fill="red"/> + <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/> + <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/> +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-radius-negative-02.svg b/layout/reftests/svg/filters/feMorphology-radius-negative-02.svg new file mode 100644 index 0000000000..ccf44aa844 --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-radius-negative-02.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test 'feMorphology' with a negative value for its 'radius'</title> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and + https://bugzilla.mozilla.org/show_bug.cgi?id=1432250 + + The negative value should disable the primitive effect and output + the input image. + --> + <filter id="f1"> + <feMorphology operator="dilate" radius="-1"/> + </filter> + <filter id="f2"> + <feMorphology operator="dilate" radius="-1 50"/> + </filter> + <rect width="100%" height="100%" fill="red"/> + <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/> + <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/> +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-radius-zero-01.svg b/layout/reftests/svg/filters/feMorphology-radius-zero-01.svg new file mode 100644 index 0000000000..a6646b16f6 --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-radius-zero-01.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test 'feMorphology' with a zero value for its 'radius'</title> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and + https://bugzilla.mozilla.org/show_bug.cgi?id=1432250 + + The zero value should disable the primitive effect and output + the input image. + --> + <filter id="f1"> + <feMorphology operator="erode" radius="0"/> + </filter> + <filter id="f2"> + <feMorphology operator="erode" radius="0 50"/> + </filter> + <rect width="100%" height="100%" fill="red"/> + <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/> + <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/> +</svg> diff --git a/layout/reftests/svg/filters/feMorphology-radius-zero-02.svg b/layout/reftests/svg/filters/feMorphology-radius-zero-02.svg new file mode 100644 index 0000000000..a819e3b358 --- /dev/null +++ b/layout/reftests/svg/filters/feMorphology-radius-zero-02.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test 'feMorphology' with a zero value for its 'radius'</title> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=485786 and + https://bugzilla.mozilla.org/show_bug.cgi?id=1432250 + + The zero value should disable the primitive effect and output + the input image. + --> + <filter id="f1"> + <feMorphology operator="dilate" radius="0"/> + </filter> + <filter id="f2"> + <feMorphology operator="dilate" radius="0 50"/> + </filter> + <rect width="100%" height="100%" fill="red"/> + <rect width="50%" height="100%" fill="lime" filter="url(#f1)"/> + <rect x="50%" width="50%" height="100%" fill="lime" filter="url(#f2)"/> +</svg> diff --git a/layout/reftests/svg/filters/feOffset-1-ref.svg b/layout/reftests/svg/filters/feOffset-1-ref.svg new file mode 100644 index 0000000000..ab54616e89 --- /dev/null +++ b/layout/reftests/svg/filters/feOffset-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="15" y="25" width="75" height="65" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feOffset-1.svg b/layout/reftests/svg/filters/feOffset-1.svg new file mode 100644 index 0000000000..c94b2ba8eb --- /dev/null +++ b/layout/reftests/svg/filters/feOffset-1.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feOffset x="10%" y="10%" width="80%" height="80%" dx="0.15" dy="0.25"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feOffset-2-ref.svg b/layout/reftests/svg/filters/feOffset-2-ref.svg new file mode 100644 index 0000000000..e54bb9be8d --- /dev/null +++ b/layout/reftests/svg/filters/feOffset-2-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="15" y="25" width="100" height="100" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feOffset-2.svg b/layout/reftests/svg/filters/feOffset-2.svg new file mode 100644 index 0000000000..dc22641c97 --- /dev/null +++ b/layout/reftests/svg/filters/feOffset-2.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feOffset dx="15" dy="25"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/fePointLight-zoomed-page-ref.svg b/layout/reftests/svg/filters/fePointLight-zoomed-page-ref.svg new file mode 100644 index 0000000000..d201169a9a --- /dev/null +++ b/layout/reftests/svg/filters/fePointLight-zoomed-page-ref.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="illuminate-center"> + <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white"> + <fePointLight x="100" y="100" z="100"/> + </feDiffuseLighting> + <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> + </filter> + </defs> + <rect width="200" height="200" fill="green" filter="url(#illuminate-center)"/> +</svg> diff --git a/layout/reftests/svg/filters/fePointLight-zoomed-page.svg b/layout/reftests/svg/filters/fePointLight-zoomed-page.svg new file mode 100644 index 0000000000..9bd24878cd --- /dev/null +++ b/layout/reftests/svg/filters/fePointLight-zoomed-page.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test verifies that fePointLight stays in the right place when the user + zooms the page. + + If the test passes, you should see a green box with its center illuminated + by a point light. If the test fails, the illumination will be off-center. + + This test checks that SVG filters transform points in user space to points + in filter space correctly. + + The root SVG element specifies a width and height to prevent scrollbars + from appearing when the page is zoomed. +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" + reftest-zoom="2.0" width="100" height="100"> + <defs> + <filter id="illuminate-center"> + <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white"> + <fePointLight x="50" y="50" z="50"/> + </feDiffuseLighting> + <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> + </filter> + </defs> + <rect width="100" height="100" fill="green" filter="url(#illuminate-center)"/> +</svg> diff --git a/layout/reftests/svg/filters/feSpecularLighting-1-ref.svg b/layout/reftests/svg/filters/feSpecularLighting-1-ref.svg new file mode 100644 index 0000000000..c57f91f06d --- /dev/null +++ b/layout/reftests/svg/filters/feSpecularLighting-1-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> + <image width='100' height='100' xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00d%00%00%00d%08%06%00%00%00p%E2%95T%00%00%17DiCCPICC%20Profile%00%00x%DA%D5yWTUK%B0m%AD%B5%D7N%C0%26%E7%9Cs%CE9%07I%92%B3%92s%DCl2(%02%02%12%14%04%14%11P%14TDT%10%25%8A%80%A8(%E2ADAET%82H%10%15%03%8A%8Ar%3F%F4%9Cs%C3%BB%1Fo%8C%F7%F3%E6G%8F9fU%CF%AA%FA%EA%D1%DD%00%3C%AB%01Tj4%CA%0C%10%13%9BHs%B62%15%F6%F4%F2%16%26N%01%3D%E0%80%0C8%40%02%82%12%A8%26%8E%8Ev%F0%BF%E2%CB%24%20%00%00%0F%15%02%A8%D4h%F8%BF%03KpHB%10%00%E2%08%00%81%C1%09A1%00%C8%15%00%D44%88JK%04%C0m%00%C0XJ%225%11%00%BB%03%00%EC4O%2Fo%00l%1A%00%D8%C3~%F35%00%60%0F%F4%F4%F2%06%C0c%00%C0Nsu6%03%C0s%03%90%18%02%02ha%00%14q%00%10N%0E%0AK%04%A0%98%03%10Xc%83%23b%01%D8%3C%01%08%86A%E1%01%C1%00%3CU%00%20%1F%13%13%17%0C%C0s%13%00%A4%03%FF%93O%D8%7F%F1%0C%FC%C73%20%20%EC%1F%FE%7B%16%00%00%20%99G%24P%A3%03%D2%E0%FF5b%A2%93%FE%AE%C1%0A%00%0C%B1%D1%DB%ED%00%80%13%00%96%82%03%CCm%01%80%1F%00~Q%A3%1D%ED~%E7%20%BC!%B1n.%7F%B8%7Cl%E0v%87%3F%DC0%94f%E9%FC%7B%2F%E2HM4u%06%00n%00%24%94%9A%E8%E8%FAG%CFL%0F7%DB%0E%00%0C%00%C8%A1%90%04%8B%BF%7DND%06%D88%02%00%23%00%D2FKrv%03%00q%00d%20!%D9%C5%02%00%98%01%90W%E9%E1%AE%1E%7Fr%3E%07%87%98%FF%D1Q44%C2%D2%FA%0Fg%8DH%B4v%05%00v%00T4*%CE%D6%F9w-T%13l!%1AB%20%09h%10%02%B1%A0%00v%60%06%E6%7FV%05%08%85%00%A0A2%84%40%02D%C1k%A0A%0C%D8B%1CDC%1C%D0%40%F8O%9E%D9%FFP%2C!%00h%10%06!%FF%CDQ%18%82%20%0E%92%FE%A9%F9%B7%FA%AFC%04%04C%DC%3Fz%C0%9F%18%0DB%20%C1%2F%22%E7%DF%0A%FF%D9%2F%1A%E2%80%A6%DC%AC%BC%AC%BC%F9w%1C%93%C4T1%0D%CC%143%C0%0C1%1D%10%C681%5EP%C0%D41m%CC%043%C2%F40%0DL%07%2C%E1%15%D0%20%EC%EF%1E%FD%22rh1m%A1%C9Uqi%BA%EE%E1%7Ff%08%FCg%02wx%054%88%F8%3FN%F4%A7%F7%D1%D5%CE%D5%7F%3A%84%C4%90%D4D%00%00%B38j%1A-%22%2C%3CQ%D8%84J%8D%0E%91%17%B6%8E%0DR%94%17VUVQ%86%FF%9F%E0%E9%E5-%FC%9B%7Dr%06%04%00%10%CE%FB%FFjq*%00%3AA%00%C8%DE%7F5%FFw%00%9D%91%00%24%D6%7F5%C9N%00%26U%80%E1%23AI%B4%E4%DF%1A%06%00%80%07%3A%60%02v%E0%01A%10%03iP%00U%D0%04%3D0%06%0B%B0%01%07p%05%2F%F0%85%20%08%87%18%A0A%0A%EC%82l%C8%87b8%08%87%A1%1A%EA%A0%01%CE%C2%05h%83N%E8%85%EB0%04%230%06%13%F0%0Cf%60%01%DE%C0%1A%7C%81%1F%08%82%10%11%0A%C2%86%F0%20B%88%04%22%87%A8%22%DA%88!b%81%D8!%CE%88%17%E2%8F%84!%B1H%12%B2%0B%D9%8B%14%23%E5H5r%12iB.!%DD%C8ud%18y%80%3CEf%91e%E4%23%F2%1D%C5%A1%0C(%3B*%80J%A2J%A86j%82%DA%A2%AE%E8N4%0C%8DG%D3%D1%5C%B4%04%ADB%EB%D1%F3h%07z%1D%1DA'%D0%19%F4%0D%BA%8E%03%1C%3D%8E%13'%82S%C0i%E3%CCp%0E8o%5C(%8E%86%CB%C4%15%E1*q%F5%B8%8B%B8%1E%DCm%DCC%DC%0Cn%15%F7%0D%23%60l%980%A6%80%E9a%DB07%2C%08%8B%C72%B1%FDX5v%16%EB%C0nb%0F%B1Yl%0D%FB%85%A7%E0%F9%F1rx%5D%BC5%DE%13%1F%86O%C1%E7%E3%2B%F1g%F0%ED%F8%5B%F8%09%FC%02%FE%0B%81%40%E0%24H%11%B4%08%DB%08%5E%84HB%06a%3F%E1%18%A1%850%40x%40%98'%AC%13%89D%1E%A2%1C%D1%80%E8%40%0C%20%26%12%F3%89G%89%E7%89%FD%C4q%E2%02q%83DO%12%22%A9%92%2CI%DE%A4XR%0E%A9%92t%8E%D4G%1A'-%92~%90%99%C9%12d%5D%B2%039%98%9CF.%25%9F%22%F7%90%EF%93%17%C8%3F%E8X%E8%A4%E8%0C%E8%5C%E9%22%E9%B2%E9%AA%E8.%D2%DD%A2%9B%A6%FBDOO%2FJ%AFC%EFD%1FA%9FE_E%DFJ%7F%87~%96%FE%1B%03%2B%83%2C%83%19%C3%0E%86%24%86%12%86F%86%01%86%A7%0C%9F(%14%8A%24%C5%98%E2MI%A4%94P%9A(7(%2F(%1B%8Cl%8C%8A%8C%D6%8C%C1%8C%7B%18k%18%3B%18%C7%19%DF1%91%99%24%98L%98%7C%99%D2%99*%99.3%DDgZe%263K2%9B1%070g2%D70w3%3Ff%5EgacQaq%60%89a%D9%CFr%8Ee%98e%89%95%C8*%C9j%C1%1A%CC%9A%CB%DA%C0z%83u%9E%0D%C7%26%C6f%C6%16%C4%B6%97%ED%14%DB-%B6%05v%02%BB%14%BB5%7B%24%7B1%FB%05%F6Q%F65%0EV%0Eu%0Ew%8ET%8E%1A%8Ek%1C3%9C8NINk%CEh%CER%CE6%CEI%CE%EF%5C%02%5C%26%5C!%5C%85%5C%17%B9%C6%B9%BEr%F3q%1Bs%87p%17q%B7pOp%7F%E7%11%E6%B1%E0%89%E2)%E3%E9%E4y%CE%8B%F1%CA%F2%3A%F1%A6%F0%1E%E7%BD%C5%BB%CA%C7%CE%A7%C7%17%C4W%C4%D7%C67%C5%8F%F2%CB%F2%3B%F3g%F07%F0%DF%E3_%17%10%14%B0%12%A0%0A%1C%15%B8!%B0*%C8)h%2C%18)xH%B0OpY%88M%C8P(B%E8%90P%BF%D0%8A0%87%B0%89p%B4p%95%F0M%E15%11~%91m%22I%22'EFE~%88J%89%BA%89%E6%88%B6%88%3E%17%A3%13%D3%16%0B%15%3B%246(%B6%26.%24n%2F%BEK%BCY%7CJ%82%2C%A1-%11.qD%E2%B6%C4WI)I%0F%C9%7D%92%9D%92KR%DCR%D6R%E9R%CDR%D3%D2%14i%23%E9x%E9z%E9G2%04%19m%99(%99c2c%B2%A8%AC%86l%B8l%8D%EC%7D9TNS.B%EE%98%DC%03y%BC%BC%8E%7C%AC%7C%BD%FCc%05%06%05%13%85d%85f%85YENE%3B%C5%1C%C5N%C5wJ%E2J%DEJeJ%B7%95~)k(G%2B%9FR~%A6%C2%AAb%A3%92%A3%D2%A3%F2QUV5H%B5F%F5%91%1AE%CDRm%8FZ%97%DA%07u9%F5%10%F5%E3%EAO4%D84%EC5%F6i%0Cj%FC%D4%D4%D2%A4i%5E%D4%5C%D6%12%D7%F2%D7%AA%D5z%AC%CD%AE%ED%A8%BD_%FB%8E%0E%5E%C7Tg%8FN%AF%CE7%5DM%DDD%DD6%DD%F7z%0AzQz%E7%F4%96%F4%A5%F4C%F4O%E9%CF%1B%88%1A%04%18%9C4%981%146%F47%3Ca8c%24b%14%60To4g%2Cf%1Cl%7C%C6x%D1D%C6%24%D2%E4%BC%C9%3BSeS%9Ai%BB%E9W3%5D%B3%DDf%03%E68s%2B%F3%22%F3Q%0BV%0B7%8Bj%8B%17%96%A2%96a%96%CD%96kV%1AV%19V%03%DB%F0%DBl%B7%95m%7Bl-%60%1Dd%DDd%BDf%A3e%B3%DB%E6%A6-%83%AD%8Bm%B5%ED%9C%9D%AC%1D%CD%AE%C7%1E%B5%B7%B1%AF%B0%9F%DE.%B1%3Dv%7B%A7%038X%3BT8%3Cw%94r%8Cw%BC%EADprt%AAqz%ED%AC%E2%BC%CB%F9%B6%0B%9B%8B%9F%CB9%97%2F%AE%A6%AE%A5%AE%CF%DC%A4%DD%92%DC%06%DD%99%DCw%B87%B9%7F%F50%F7(%F7%98%F1T%F2%DC%ED9%E2%C5%EB%15%E1%D5%E5M%F4v%F7%3E%E3%BD%EEc%E1s%D8ga%87%C6%8E%FC%1D%93%3B%A5v%A6%EE%1C%F6%E5%F5%8D%F6%BD%E6%C7%E4%17%E0w%D9%1F%EF%EF%E1%7F%CE%7F3%C0!%A0%3E%60%3D%D0%3A%B06p-%C8%2C%E8H%D0%9B%60%E3%E0C%C1%CB!%06!%E5!%8B%A1%06%A1%E5%A1Ka%06a%15a%CB%E1F%E1%95%E1%AB%11f%11%D5%11%1F%22%B7E%D6E~%8Dr%88j%8C%DA%8A%F6%88n%89!%C5%F8%C7t%C7%B2%C6F%C5%DE%8C%13%8CK%8D%7B%40%95%A3%E6Sg%E2u%E3%0F%C7%AF%D1lig%12%90%84%9D%09%5D%89%EC%89%D4%C4%7BI%D2IyI%B3%C9%86%C95%C9%1B)%EE)%97SYRcS%EF%A5%C9%A6%15%A6-%A6%5B%A6%9F%CE%C02%822%06w%89%EC%CA%DE5%BB%DBd%F7%C9L%2430sp%8F%D8%9E%DC%3D%0BYVYg%B3%E9%B2%A3%B2%FF%CAQ%CE)%CF%F9%BC%D7coO%AE%40nV%EE%7C%9EU%5Es%3Ec%3E-%FF%F1%3E%BD%7Du%05XAD%C1h%A1Z%E1%D1%C2_E%C1Ew%8B%95%8B%2B%8B7%F7%07%ED%BF%7B%40%E5%40%D5%81%AD%92%D0%92%D1R%CD%D2%E3%07%09%07c%0FN%96%19%95%9D-g)O%2F%9F%AF%B0%AF%E88%24%7C%A8%E8%D0%E7%C3~%87%87%2B%D5%2B%EB%8E%D0%1DI%3A2SeW%D5uT%FC%E8%C1%A3%9B%D5%E1%D5%135%A65-%B5%FC%B5%85%B5_%8F%05%1F%1B%3Fn%7C%FCb%9D%40%5Dq%DD%F7%13%11'%9E%9C%B4%3A%D9Q%2FY_%D9%40hHnx%7D%CA%FD%D4%ED%D3%DA%A7%9B%CE%F0%9E)%3E%F3%B31%B6q%E6%AC%F3%D9%9BMZMM%E7%F8%CF%956%A3%CDI%CD%CB%E7w%9C%1F%BB%60~%A1%EB%A2%C2%C5%93-%9C-%C5%AD%D0%9A%D4%BAr%C9%FF%D2d%9Bm%DB%E0e%ED%CB%17%AFH%5C%A9mgk%2F%EA%40%3A%D2%3A%D6%3A%C3%3Bg%BA%BC%BA%1Et%DBt%0F%F6%E8%F5%B4_U%BC%DA%D8%2B%D2%5Bs%8D%E3Zi%1F%5D_n%DFV%7Fz%FF%FA%00u%60%F5z%D8%F5%F9A%BF%C1g7%3Co%3C%BA%E9ts%F4%96%ED%AD%3BC%96C7n%9B%DC%EE%BFcp%A7wXw%B8%FB%AE%F6%DD%CE%11%CD%91%8E%7B%1A%F7%DA%FF%D2%F8%AB%7DTs%B4%E3%BE%D6%FD%AE1%9D%B1%9E%07%FA%0F%FA%C6%8D%C6%AF%3F4%7F8%F4%C8%FA%D1%C8%C4%F6%89%07%93n%93O%1E%EFx%3C%F3%24%F8%C9%D2%D3%E8%A7%1F%A6%92%A7~%3C%CB%9A%C6O%17%3Dg~%5E%F9%82%FFE%FDK%99%97-3%9A3%D7f%CDg%EF%CD%B9%CC%3D%9B%0F%9A%7F%F3*%E1%D5%E6B%EEk%CA%EB%CAE%A1%C5%A6%25%D5%A5%DEe%CB%E5%B1%15%9F%95%857%D47%3FV%F3%DF%B2%BC%AD%7D'%FD%EE%CA%7B%E3%F7%F7%D6%3C%D7%16%3E%D0%3El%7D%DC%FF%89%E7S%E3g%F5%CF%83%EB%8E%EB%2F%BE%C4%7C%F9%F1%B5h%83g%E3%EC7%EDo%B7%BF%7B%7C_%FC%91%B2I%DC%AC%FA)%F3%B3%E7%97%ED%AF%E9%AD%98%AD-j%00-%00%00%00p%00%80%86%86%02%7Cl%04%A0x%01%B0%8D%01%D0%0D%FC%BES%FC%01%0E%01%40%01%80%08%82%60%03%C50%8F%C8%22%B1%C8%00%CA%83%26%A2S8k%DC%0D%CC%0A%7B%84%8F!%B0%10%06%89%BBH%86d%22%F99%5D7%7D-C)%A5%91q%9A%99%99%C5%96%B5%90m%98%83%85s%07%D7y%1E%8C7%80%EF%9A%80%B0%E0~%A1%0D%91%60%D1)%F1%ED%12%C3RJ%D2%252o%E4%AC%E5%EB%14%BE(%99)%1FP%19S%A3%A8%9Bj%24h%D6j%0Dh%CF%E8%FC%D4%E3%D2%973%D01%B40r6%0E2I0%CD5%3Bb%DEl%D1o%F9%D0jy%DB%96%0D%87%AD%BC%9D%99%BD%CF%F6%08%87d%C7%3C%A7r%E7%3A%97f%D7N%B7A%F7%11%8Fq%CF%A7%5E%2F%BD%E7%7D%96v%BC%DD%B9%E4%3B%ED7%EA%DF%1F%D0%12x%3C%E8%40pzHh%A8S%98%5E%B8x%04c%C4%97%C8%97QC%D1M1%07b%A9q.T%ADx%DE%F8M%DA%8B%84%81%C4%86%A4%BC%E4%D0%14%EBT%B94%BA%B4%95%F4%7B%19%AD%BB%AAv%E7f%A6%EC%89%CF%A2e%A7%E7%14%ED%3D%99%7B-%EF%E5%3Er%81~!%B5%A8%A1x%F2%00%5D%89~i%CC%C1%E3e%A3%E5%3F%0F%C9%1F%F6%A9%2C%3A%D2Q5SM_%A3Q%EBw%AC%F0x%5B%DD%B3%93X%BDB%83%FB%A9%3D%A7%CF%9Ey%D0%B8%D1%24%7C%CE%AEy%D7%F9%B6%0B%1FZt%5BK%2F%BD%BF%ECs%E5~%87C%E7%A3n%FD%9E%C4%ABM%BD%D3%7D%F4%FDj%03%EE%D7%E3%07%F3n%94%DD%AC%BCU9Tv%BB%E0%CE%DE%E1%7Dw%0F%8C%1C%B8%97%F7W%E2%A8%C7%7D%C5%FB%3F%C6%06%1Ed%8Ck%8E%7Fy%F8%F8Q%F7D%F5%E4%EE%C7~OL%9FJL%91%A7%DE%3E%7B0%DD%FE%BC%FA%C5%EE%97%FE3%E6%B32s%CCs%DF%E6_%BF%9A%5C%18~%7D%7D%F1%EAR%F7r%F7%CA%E97%25%AB%C9o%7D%DFY%BC%97%5Bc%5E%5B%FF0%F5%B1%EF%D3%C9%CFy%EB%E1_l%BF*m%B0m%7C%FD6%FD%7D%E0G%FDf%EE%CF%90_%E6%5B%A2%5B%5B%00%40%00%5E0%86T%B8%85%B0!v%C8A%E4%25%AA%86%96%A0%9Fp~%B8I%CC%0D%7B%8E%A7%12%18%09%9D%C4%10%12%2Fi%8A%5CK%17Fo%CA%60%40qe%0Cg%CAb%3E%C1r%9Du%99%9D%83%C3%9C3%8D%AB%85%FB%3D%AF%22%1F%8D%BFW%90%5E%C8%5D%F8%9C%C8%96%98%89x%B6D%BF%E4%A6%B4%96L%A4%EC1%B9%11%F9%8F%8A%1CJj%CA%DBT%7CT%C3%D4%E2%D5%D34vk%A6kEj%FB%E8%D8%E9%1A%E8)%EB%8B%1Ap%18%92%0C%BF%1B%BD5%9E5%990%BDk%D6g~%D9%A2%D1%B2%CA%AA%60%5B%8Au%B8%8D%97%ED6%3Bm%7B%A9%ED%1C%0E%98%C3g%C79%A7%07%CE%03.%AD%AE%C7%DD%0A%DC%13%3C%7C%3D%AD%BD%D4%BC%05%7C%08%3E%EFvL%EE%BC%E6%DB%E0W%E4%1F%17%E0%1A%A8%1E%C4%104%17%DC%1DR%1A%1A%1A%A6%1F%CE%12%FE%3A%E2jdYTH%B4n%0CS%CC%7Clg%5C%01%D5%2B%5E.~%936%9Ap%22%91%96d%96%CC%91%BC%98%D2%9D%BA%3F%CD7%5D9%03%CDx%BC%ABewqf%CC%1E%B7%2C%F3l%DD%1C%9D%BD%06%B9%DB%F2%3C%F3c%F7%ED%2B8%5Dx%A3h%B6%F8%D7%01%FE%12%9DR%F7%83%09e%07%CB%CFW%0C%1Fz%5D%89%1E%E1%AF%D2%3C%EAT%1DSS%5C%7B%FE%D8%D8%F1%2F'DO%3A%D6%EFm%E8%3E%F5%E1%8Cbc%FC%D9%2BM_%9Bu%CE%EF%BA%D0%D7%02%AD%26%97%F6%B6%DD%BA%82o%B7%EA(%E8%BC%DDM%EC%B1%B8%9A%D3%7B%ED%DA%E7~%C9%01%97%EB%19%83%C7o%5C%BD9qky%E8%EB%1Dl%98%ED%AE%C8%88%D2%3D%83%BF%ECF%BD%EF%87%8F%A5%3C%C8%1F%3F%FC%B0%FEQ%CBD%EF%E4%F0%E3%C9'%0BO%3F%3F%C3M%B3%3F%97x%A1%FD%D2n%26l%B6an%F9%95%D4%82%F7%EB%FC%C5sK%B7%97gW6V%19%DFJ%BC3z%EF%B3%96%F5a%EC%93%DA%E7%8A%F5O_%9D7%AE%7C%E7%FE%91%B7%B9%F1%2Bek%0B%000%60%01Y%D8%0EY0%80%10%11%5D%24%11%E9DQ%D4%1E%3D%81%FE%C0%F9%E2%EEb%FAX%07%5E%1B%3FHp%24%CC%133H%7C%A4%DB%E4%03tA%F4%FA%0C%7C%0C%BF(s%8C%23L%ED%CC%A7Y%AAXK%D8%0A%D8%F38%F29%8B%B9*%B8%EBx%9Ay%BB%F8%AE%F1_%13%E8%13%EC%17%EA%13%BE*%D2.%DA%2CvL%BCX%22Ir%87%94%B1%B4%A8%0C%C8%3C%93%ED%94%2B%96wW%10VXQlW%CAR%B6U%E1T%99UmVKR7%D2%20k%3C%D4%3C%A6%15%AE%AD%AE%BD%A1%D3%A7%9B%A7g%AB%CF%AA%3FePo%18i%A4j%B4i%3CdRf%BA%D3L%D6%EC%AB%F9%0D%8BRK%1F%2B)%AB%8F%DB%FA%AC%8Bl%DCmEl%DF%D8u%D8gm%B7s%E0t%98ulvJp%D6sA%5D%EE%BA%96%BBy%BB%0B%BB%2Fz%5C%F4L%F2%D2%F3F%BD%87%7DJw%B8%EC%E4%DC%F9%D4%B7%C6o%A7%BF%80%FF%F3%80c%81%3B%83%F8%83%A6%82%ABB%DCC%D9B%EF%87%15%87%5BD%40%C4%D5%C8%E4(%95%A8%D5%E8%C6%98%C0X%FE%D8%C7q%15%D4%ED%F1%A4%F8%EB%B4%F4%04%B5%84%D5%C4%D3I%BE%C9%5C%C9%F7S%F6%A5%1A%A5n%A4%B5%A6Gd%08g%3C%DDuh%B7k%26O%E6%C2%9E%AE%ACC%D9i9%A1%7Bw%E4z%E5%F9%E4%87%ECK*%C8%2B%AC%2C%3AS%DC%B1%7F%E8%C0D%C9B%E9%E72%5C9%5B%85%E8!%E5%C3%BA%95fGl%AA%9C%8EzU%07%D6%C4%D5%EE9Vq%FC%7C%DD%C8%89%F7%F5%12%0Di%A7%C6%CEH5f%9E%9D%3C%A7%D0%9C%7B%FE%D9E%95%96%82%D6%17m%9A%97%8B%AF%BC%ECP%EB%DC%D75%DD%A3v%B5%A8w%AEO%BF%BFj%E0%CB%A0%EB%8D%F6%5BRC%A7%EE(%0C%DF%1A%89%FAK%7Ctu%EC%F6%F8%A5GM%93%ADO%AEO%3D%7F%0E%2F%95g%1B_%E5%2F%16%ADt%BEc%FAP%B0%CE%BD%D1%BE%E9%B1%B5%05%F0%FBm%09%00%80%A0%09pz%1E%C0%FD%24%80%93%0F%40%A3%1C%80D%0D%00%23%3B%80%23%05%C0U%07P%D3R%40%9E%1E%05%C4%EA%E2%3F%E7%07%05%A4%C0%12Ba%1F%9C%85ax%830%22*%88%1B%92%8E%1CCz%91g%C8%26*%80%1A%A1%81h%3Ez%0E%BD%8F~%C6%F1%E1Lp%E1%B8%83%B8n%DC%1CF%8Fi%60%FE%D8~%AC%0B%7B%85g%C5%1B%E1c%F1'%F1%13%04%3A%82%09!%95%D0FX%25J%13%C3%88%8D%C4e%92%22)%89%D4O%A6'%7B%93%CF%D3!t%9Etm%F4%8C%F4%B1%F4%E3%0C%DA%0C'(%24%0A%8D%F2%82%D1%86%B1%9BI%9A%A9%9A%99%C2%9C%CD%FC%95%25%8Ee%895%88%F5%25%5B%20%DB%22%7B%0C%FB%17%8ElNF%CEc%5CJ%5C7%B8%7D%B8%D7y%CAxUx%1F%F2%A5%F0%0B%F0%8F%09%EC%134%15%02%A1%EB%C2y%22%F6%A2%3C%A2KbW%C5%CB%24%22%25-%A5%24%A4%19%A4%D7e%E6d%C7%E5n%CA%F7(%5CVlUjQnS%E9R%1DP%1BQ%7F%A1%F1A%0B%D3%E6%D0%11%D3U%D0S%D1W6%905%146b5F%8D%DF%9B%3C3%ED7%AB7%2F%B0%88%B3%F4%B42%DD%A6d-h%C3d%8B%B3%DD%B0%5B%B3_%D9%BE%E00%E78%EB%F4%CA%F9%8D%CB'%D7%9F%EEd%0F.O)%2F%1Do%7B%9F%A0%1D%19%3B%0F%FB%B6%FA%8D%FA%BF%0Dd%0CR%0B%F6%0A%D9%13%DA%10v%2B%7C%3E%E2g%14k%B4H%8Cl%ACb%9C%02U%26%5E%94%C6%99%40N%F8%9E%B8%9C%CC%9Bb%9F%9A%9B%D6%9F%FEk%97%C5%EE%8A%CC7Y%F6%D9W%F7%AA%E7v%E7%5B%EF%9B%2F%DCW%2C%B2%FFb%89q%E9LYY%85%E7a%83%23%D6GSjn%1D%E7%3B%C1X%8F6%7C%3B%FD%B1%F1%5D%D3j%F3%EA%85%F7-%EB%97~%5E!u%F0u)%F5%98%F7z%F5E%0C%24%0Ff%DE%CC%1A%DA%7D'%F9n%F4%3D%FF%D1%E2%B1%AE%F1%95%09%91%C7%3B%9F%D6%3D%7B%FDBe%26%7BnbAn%B1%60yq%D5%EA%DD%B9%0F%CC%9F2%D6%DFn%84~_%FCI%DD%DA%02%00%26P%04'H%82j%E8%87W%08%3D%A2%8A%F8%20%B9H%132%82%BCG%D9Q%5D%D4%1F-%40%5B%D1%A78%1CN%01%E7%85%CB%C3%5D%C2%BD%C4(%98%3E%16%85%D5%60%7Fa%BF%F0*%F8%60%7C-~%82%C0D%B0%23%14%12%EE%10%E9%88%F6%C4r%E2%14I%82D%23%0D%929%C9%D1%E4!%3A1%BA%1C%BA%05z%1B%FA%1E%069%86%3A%0A%07e%3F%23%811%87%09%98%B2%99q%CC%05%2C%8C%2CGXEY%5B%D8%8C%D9%26%D8c8%08%1C%F5%9C%26%9Cs%5C%F9%DC%0A%DC%93%3C%D9%BC%CA%BC3%7C%15%FC%DB%040%81A%C1%BDB%96%C2%0C%C2%93%22%F5%A2%09b%96%E2%82%E2%1B%12%93%92%9DR'%A4%8F%C8%94%C9%96%C8%95%C8%97%2BT%2B%9EQjW%BE%A3%F2B%F5%AB%3A%87%86%AEf%90V%89%F65%9D%F7z%12%FA~%065%86%CF%8C%05M%82M%5B%CC~XXX%16%5B%8DX%E3m%B4l%03%ED%F2%ED%CFl%BF%EE0%E5%B8%E6%8C%B9p%BA%CA%BA%19%BB%7By%24x%96z%5D%F4%1E%F5%F9%B0%93%D3%D7%C0%2F%D4%BF%2C%A0%2F%F0%5D%B0X%88ghi%D8P%F8%CFH%F5%A8%88%E8%E31%0F%E2P%AAj%BC%3F%AD%24%E1j%E2R2S%8AV%AA%7FZqzW%C6%E2n%AEL%EB%3D%BB%B3%DA%B2W%F6%8A%E5%EE%CC%AB%CE%7FR%C0U%E8Ut%BC%F8%D5%01%85%92%D4%D2%A12%EE%F2%B8%8A%7B%87%95%2Bk%AA%18%8F%16%D60%D4%1E%3E.Uw%FBdD%03%C3%A9%B63%DEg%B1%A6%D6f%BF%0B%CC%17o%B4%A6%B6)%5D%5Ejo%EC%8C%E8V%E8%F9%D8%DB%D3%973%607%C8uc%FEV%EB%ED%5D%C36%23%3C%F7%C6F%DD%EE%CF%3FH%7F(%F8ht%B2%F8%89%CB%94%E44%F2%7C%EE%E5%D0l%F3%7C%E9%02m%D1e%99o%A5nU%EA%ED%A5%F7%86k%A3%1F%FD%3E%BD_%CF%FA%CA%B4q%F4%BB%E0%8F%BA%9F%BC%BFJ%B7%B6%00%80%0BL%80%0Aup%1F%B6%10U%24%149%8A%DCB%3E%A1%A2%A83%9A%8Bv%A2%AB8%11%9C'%EE%20n%18%C3a%86X%3A%D6%89%AD%E35%F0%C9%F8k%04%3C%C1%81PCX!%EA%11%0F%12%97H%E6%A4Sd%12%99J%9E%A6%B3%A3%1B%A0%D7%A2%EFa0e%B8G%F1%A2%AC0f2q0%B52%3B0%7F%60%A9d5d%5Df%3B%C6%EE%C2A%E1%B8%CBY%C8e%C7%CD%CA%3D%C5s%9A%97%C6g%C2%CF%C6%FFF%60H%F0%94P%BEp%94%88%AB%A8%89%98%AA%B8%94%84%90%24%9F%14%AF%B4%B0%8C%9C%AC%8E%9C%AD%7C%80%C2.%C5j%A5k%CA%AFT%19%D5%F4%D5i%1A%175%DFkk%E8d%EB%8E%EBK%1B%E4%1A%BE6%B63%E94%933%3Fe)b%D5%60-c%D3ngn%FF%C4%81%EA%C4%E0%DC%EA%EA%E3N%F6%B8%E6%95%EC%A3%BEc%C3w%C0%FF%40%A0o%B0f(C%D8%D3%88%EA(%EB%E8%E5%D8%B4%B8%CD%F8D%DAB%A2c%D2%E5%14%96TZ%DA%A3%0C%DD%5D'3%E9%F7%A4f-%E6x%EE%BD%97g%9A%DFS%A0%5E%D8Ql%B0%7F%B8%C4%AB%F4MYf%05%CB%A1%FAJ%A5%23%DDG%0D%AB%FBk%F5%8Fu%D4%E1O%D8%9D%3C%5C%FF%F2%94%EC%E9%943%B7%CEr4%85%9E%EB9%CFx!%F8bo%2B%C7%25j%DB%C8%15%E9%F6%A2%8E%B7%5DN%DD%9DW%05%7B%F3%AF%BD%EB%F7%18%B8%3E(w%E3%F0%CD%AD%A1%C8%DB%8F%86%8D%EF6%DF%E3%FC%2Ba%F4%EE%18%DF%83%F0%F1%F3%0FW%26%C4%26%3D%1E%E7%3C9%FB%F4%EE%D4%C2%B3%CD%E7%CC%2F%84%5E%CA%CDh%CC%EA%CE%19%CE%1B%BF2%5E0%7C%AD%BB%A8%B5%A4%B2%2C%BB%22%FA%86%F1%CD%F2j%F7%DB%94w%1A%EFV%DF%9F%5E%F3%FA%40%F7%A1%F7c%E8'%E6O%5D%9Fw%AC%C3z%FD%17%D3%2Fs_%F7l%F0ot%7Fs%FB%B6%F6%7D%FF%0F%A9%1F%83%9B%BE%9B%1B%3F%2B~)%FD%1A%DE%0A%DE%DA%02H%08US%05%00%00%84%C1%14%00%FFbk%EB%93%24%00%B1%1C%E0g%D9%D6%D6%8F%FA%AD%AD%9F%0D%00%B8i%80%81%E8%DF%FF%15%00%00%04f%80%DA%86%FF%ED%8D%F4%3F%00%BD%06~%C6%80N%5E%00%00%00%00%06bKGD%00%FF%00%FF%00%FF%A0%BD%A7%93%00%00%00%09pHYs%00%00%0B%13%00%00%0B%13%01%00%9A%9C%18%00%00%00%07tIME%07%DA%0B%0F%12%004n%D47%05%00%00%01%1BIDATx%DA%ED%DC%B1%11%820%14%80%E1%87G%97%3B%98%22%0E%C0%0Ct%B2%1B%CB%E0Nl%11%0B%3B*%3D9%89%F2%FD5U%3E%1E%B9P%A4%89(%25TM%17K%00D%40%80%08%08%10%01%01%22%20%E7%AE%7D%F5%C1e%B9%5B%AD%0F%9A%A6%9B%09%F1%C9%12%10%20%02%02D%40%F4%E69D%DBs%C5%B49%A7-%F5%81%0C%C3%10)%A5X%D7%95X%0D%20)%A5%E8%FB.%22%3A%2B%5B%C3%1Eb2l%EA%07V%22%A2D%CEy%B7%FD%03%88%09%11%10%20%02%02D%40%80%08%88%80%00%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%01%11%10%20%02%02D%40%80%08%08%10%1D%DEn7%5Bo%EFB%7F%DEk%2B%13%F2%ED7%BAm%EB%9C%90m9_O%811%8E%E3o%80%CC%F3l%7C%8E%04%D9%F3%FEs%7B%88%80%08%08%10%01%01%22%20%7F%5D%13Q%FCt2!%02%02D%40%80%08%08%10%01%01%A2Zz%00g%F8%1C%DE%87%AF%C0%09%00%00%00%00IEND%AEB%60%82"/> +</svg> diff --git a/layout/reftests/svg/filters/feSpecularLighting-1.svg b/layout/reftests/svg/filters/feSpecularLighting-1.svg new file mode 100644 index 0000000000..838a60b7e0 --- /dev/null +++ b/layout/reftests/svg/filters/feSpecularLighting-1.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns='http://www.w3.org/2000/svg'> + <!-- + A basic test for the <feSpecularLighting> filter primitive. + Setting kernelUnitLength on the <feSpecularLighting> should allow us to + assume pixel perfection. + --> + <filter id='f' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'> + <feSpecularLighting kernelUnitLength='1' result='a'> + <feDistantLight azimuth='45'/> + </feSpecularLighting> + <feComposite in='a' in2='SourceAlpha' operator='in' result='b'/> + <feComposite in='SourceGraphic' in2='b' operator='arithmetic' k1='0' k2='1' k3='1' k4='0' x='10' y='10' width='80' height='80'/> + </filter> + <rect width='100' height='100' fill='blue'/> + <path d='M0,0 h100 v100 h-100 z M20,20 v60 h60 v-60 z' filter='url(#f)'/> + + <!-- Cover two spots in the test whose rendering differs in opt builds + vs. debug builds (see Bug 610945). --> + <rect x='78' y='18' width='4' height='4'/> + <rect x='18' y='78' width='4' height='4'/> +</svg> diff --git a/layout/reftests/svg/filters/feTile-1-ref.svg b/layout/reftests/svg/filters/feTile-1-ref.svg new file mode 100644 index 0000000000..c0135fca35 --- /dev/null +++ b/layout/reftests/svg/filters/feTile-1-ref.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="10" y="10" width="10" height="10" fill="#00ff00"/> +<rect x="40" y="10" width="20" height="10" fill="#00ff00"/> +<rect x="80" y="10" width="10" height="10" fill="#00ff00"/> + +<rect x="20" y="20" width="20" height="20" fill="#0000ff"/> +<rect x="60" y="20" width="20" height="20" fill="#0000ff"/> + +<rect x="10" y="40" width="10" height="20" fill="#00ff00"/> +<rect x="40" y="40" width="20" height="20" fill="#00ff00"/> +<rect x="80" y="40" width="10" height="20" fill="#00ff00"/> + +<rect x="20" y="60" width="20" height="20" fill="#0000ff"/> +<rect x="60" y="60" width="20" height="20" fill="#0000ff"/> + +<rect x="10" y="80" width="10" height="10" fill="#00ff00"/> +<rect x="40" y="80" width="20" height="10" fill="#00ff00"/> +<rect x="80" y="80" width="10" height="10" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feTile-1.svg b/layout/reftests/svg/filters/feTile-1.svg new file mode 100644 index 0000000000..c64ab37491 --- /dev/null +++ b/layout/reftests/svg/filters/feTile-1.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/> + <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/> + <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/> + <feTile x="10%" y="10%" width="80%" height="80%" in="pair"/> +</filter> +<g filter="url(#f1)"> + <rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feTile-2-ref.svg b/layout/reftests/svg/filters/feTile-2-ref.svg new file mode 100644 index 0000000000..186d21cbcf --- /dev/null +++ b/layout/reftests/svg/filters/feTile-2-ref.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + +<rect x="0" y="0" width="100" height="100" fill="#00ff00"/> +<rect x="200" y="0" width="100" height="100" fill="#00ff00"/> +<rect x="400" y="0" width="100" height="100" fill="#00ff00"/> + +<rect x="100" y="100" width="100" height="100" fill="#0000ff"/> +<rect x="300" y="100" width="100" height="100" fill="#0000ff"/> + +<rect x="0" y="200" width="100" height="100" fill="#00ff00"/> +<rect x="200" y="200" width="100" height="100" fill="#00ff00"/> +<rect x="400" y="200" width="100" height="100" fill="#00ff00"/> + +<rect x="100" y="300" width="100" height="100" fill="#0000ff"/> +<rect x="300" y="300" width="100" height="100" fill="#0000ff"/> + +<rect x="0" y="400" width="100" height="100" fill="#00ff00"/> +<rect x="200" y="400" width="100" height="100" fill="#00ff00"/> +<rect x="400" y="400" width="100" height="100" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feTile-2.svg b/layout/reftests/svg/filters/feTile-2.svg new file mode 100644 index 0000000000..7f137b8d4c --- /dev/null +++ b/layout/reftests/svg/filters/feTile-2.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"> + +<filter id="f1" filterUnits="userSpaceOnUse" primitiveUnits="userSpaceOnUse"> + <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/> + <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/> + <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/> + <feTile in="pair"/> +</filter> +<g filter="url(#f1)"> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feTile-large-01.svg b/layout/reftests/svg/filters/feTile-large-01.svg new file mode 100644 index 0000000000..c04c145295 --- /dev/null +++ b/layout/reftests/svg/filters/feTile-large-01.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tile larger than surface</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=521207 --> + <defs> + <filter primitiveUnits="objectBoundingBox" filterUnits="objectBoundingBox" + id="filter_1" x="-50%" y="-50%" width="200%" height="200%"> + <feTile /> + </filter> + </defs> + + <rect width="100%" height="100%" fill="lime" /> + <rect x="10" y="10" width="100" height="100" fill="red" /> + <rect x="10" y="10" width="100" height="100" fill="lime" style="filter:url(#filter_1);"/> +</svg> diff --git a/layout/reftests/svg/filters/feTile-large-02-ref.svg b/layout/reftests/svg/filters/feTile-large-02-ref.svg new file mode 100644 index 0000000000..cb6ed6047c --- /dev/null +++ b/layout/reftests/svg/filters/feTile-large-02-ref.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> +<title>Reference for feTile filter with tile exceeding the bounds of the target area on all sides</title> + +<rect width="20" height="20" fill="#00ff00"/> +<rect x="40" width="20" height="20" fill="#00ff00"/> +<rect x="80" width="20" height="20" fill="#00ff00"/> + +<rect x="20" y="20" width="20" height="20" fill="#0000ff"/> +<rect x="60" y="20" width="20" height="20" fill="#0000ff"/> + +<rect y="40" width="20" height="20" fill="#00ff00"/> +<rect x="40" y="40" width="20" height="20" fill="#00ff00"/> +<rect x="80" y="40" width="20" height="20" fill="#00ff00"/> + +<rect x="20" y="60" width="20" height="20" fill="#0000ff"/> +<rect x="60" y="60" width="20" height="20" fill="#0000ff"/> + +<rect y="80" width="20" height="20" fill="#00ff00"/> +<rect x="40" y="80" width="20" height="20" fill="#00ff00"/> +<rect x="80" y="80" width="20" height="20" fill="#00ff00"/> + +</svg> diff --git a/layout/reftests/svg/filters/feTile-large-02.svg b/layout/reftests/svg/filters/feTile-large-02.svg new file mode 100644 index 0000000000..aa41cf34f5 --- /dev/null +++ b/layout/reftests/svg/filters/feTile-large-02.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> +<title>Test case for feTile filter with tile exceeding the bounds of the target area on all sides</title> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/> + <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/> + <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/> + <feTile x="-10%" y="-10%" width="120%" height="120%" in="pair"/> +</filter> +<g filter="url(#f1)"> + <rect width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feTile-outside-01-ref.svg b/layout/reftests/svg/filters/feTile-outside-01-ref.svg new file mode 100644 index 0000000000..f84634f7c0 --- /dev/null +++ b/layout/reftests/svg/filters/feTile-outside-01-ref.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> +<title>Reference for feTile filter with x and y for feTile set to values outside the target area.</title> + +<rect width="20" height="20" fill="#00ff00"/> +<rect x="40" width="20" height="20" fill="#00ff00"/> + +<rect x="20" y="20" width="20" height="20" fill="#0000ff"/> +<rect x="60" y="20" width="10" height="20" fill="#0000ff"/> + +<rect x="00" y="40" width="20" height="20" fill="#00ff00"/> +<rect x="40" y="40" width="20" height="20" fill="#00ff00"/> + +<rect x="20" y="60" width="20" height="10" fill="#0000ff"/> +<rect x="60" y="60" width="10" height="10" fill="#0000ff"/> + +</svg> diff --git a/layout/reftests/svg/filters/feTile-outside-01.svg b/layout/reftests/svg/filters/feTile-outside-01.svg new file mode 100644 index 0000000000..4f1f0b5c8a --- /dev/null +++ b/layout/reftests/svg/filters/feTile-outside-01.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> +<title>Test case for feTile filter with x and y for feTile set to values outside the target area.</title> + +<filter id="f1" filterUnits="objectBoundingBox" primitiveUnits="objectBoundingBox" + x="0" y="0" width="1" height="1"> + <feFlood flood-color="#00ff00" x="0%" y="0%" width="20%" height="20%" result="flood1"/> + <feFlood flood-color="#0000ff" x="20%" y="20%" width="20%" height="20%" result="flood2"/> + <feComposite in="flood1" in2="flood2" x="0%" y="0%" width="40%" height="40%" result="pair"/> + <feTile x="-10%" y="-10%" width="80%" height="80%" in="pair"/> +</filter> +<g filter="url(#f1)"> + <rect width="100" height="100" fill="#00ff00"/> +</g> + +</svg> diff --git a/layout/reftests/svg/filters/feTurbulence-offset-ref.svg b/layout/reftests/svg/filters/feTurbulence-offset-ref.svg new file mode 100644 index 0000000000..fbfaf840af --- /dev/null +++ b/layout/reftests/svg/filters/feTurbulence-offset-ref.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- + Place the filtered rect and the filter region at (0, 0) in user space. + Remove the filter output before (50, 50) using a clipPath. + --> + <filter id="f" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"></feTurbulence> + </filter> + <clipPath id="clip-top-left"> + <rect x="50" y="50" width="100" height="100"/> + </clipPath> + <rect x="0" y="0" width="150" height="150" filter="url(#f)" clip-path="url(#clip-top-left)"/> +</svg> diff --git a/layout/reftests/svg/filters/feTurbulence-offset.svg b/layout/reftests/svg/filters/feTurbulence-offset.svg new file mode 100644 index 0000000000..c48db258b3 --- /dev/null +++ b/layout/reftests/svg/filters/feTurbulence-offset.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test verifies that feTurbulence creates a noise image that remains + anchored at the user space origin, not the filter region origin. The filter + region should act as a viewport into the anchored noise image. +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- + Place the filtered rect at (75, 75) in user space. + Make the filter region start at (-25, -25) from the top left corner of the rect. + Thus, the filter output should start at (50, 50). + --> + <filter id="f" x="-25%" y="-25%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"></feTurbulence> + </filter> + <rect x="75" y="75" width="100" height="100" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01-ref.svg b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01-ref.svg new file mode 100644 index 0000000000..ec92fc28e1 --- /dev/null +++ b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01-ref.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This is the reference image for feTurbulence-zero-baseFreq.svg. +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="400" height="100" fill="blue"/> + <rect x="0" y="100" width="400" height="100" fill="lime"/> + <!-- nothing in place of the type="turbulence" filter --> + <rect x="200" y="50" width="100" height="100" fill="rgba(128, 128, 128, 0.5)"/> +</svg> diff --git a/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01.svg b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01.svg new file mode 100644 index 0000000000..c55cbf07a8 --- /dev/null +++ b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-01.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- + This test verifies that feTurbulence with baseFrequency="0" creates + a transparent black result for type="turbulence" and a 50% alpha + 50% gray result for type="fractalNoise". +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="filterTurbulence" primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB"> + <feTurbulence type="turbulence" baseFrequency="0" numOctaves="1" + x="0%" y="0%" width="100%" height="100%"/> + </filter> + <filter id="filterFractalNoise" primitiveUnits="objectBoundingBox" color-interpolation-filters="sRGB"> + <feTurbulence type="fractalNoise" baseFrequency="0" numOctaves="1" + x="0%" y="0%" width="100%" height="100%"/> + </filter> + <rect x="0" y="0" width="400" height="100" fill="blue"/> + <rect x="0" y="100" width="400" height="100" fill="lime"/> + <rect x="50" y="50" width="100" height="100" filter="url(#filterTurbulence)"/> + <rect x="200" y="50" width="100" height="100" filter="url(#filterFractalNoise)"/> +</svg> diff --git a/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-02.svg b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-02.svg new file mode 100644 index 0000000000..2992737d16 --- /dev/null +++ b/layout/reftests/svg/filters/feTurbulence-zero-baseFreq-02.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="a"> + <feTurbulence baseFrequency="0 0.1"/> + </filter> + </defs> + <rect fill="#7989a6" height="400px" width="400px" filter="url(#a)"/> +</svg> + diff --git a/layout/reftests/svg/filters/filter-clipped-rect-01.svg b/layout/reftests/svg/filters/filter-clipped-rect-01.svg new file mode 100644 index 0000000000..0e339cf42a --- /dev/null +++ b/layout/reftests/svg/filters/filter-clipped-rect-01.svg @@ -0,0 +1,25 @@ +<!-- + 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.0"> + <desc> + This test checks that the filtering with a clipPath doesn't interact + badly with transforms. + </desc> + <defs> + <clipPath id="clipPath"> + <rect x="100" width="100" height="100"/> + </clipPath> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <g transform="translate(50, 0)"> + <!-- This 3-rect setup is to show red *both* if too much or if too little is clipped. --> + <rect x="150" width="100" height="100" fill="red"/> + <g clip-path="url(#clipPath)" filter="url(#filter)" transform="translate(50, 0)"> + <rect x="-20" y="-20" width="140" height="140" fill="red"/> + <rect x="100" width="100" height="100" fill="lime"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-giant.svg b/layout/reftests/svg/filters/filter-giant.svg new file mode 100644 index 0000000000..e0a373a892 --- /dev/null +++ b/layout/reftests/svg/filters/filter-giant.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> +<defs> +<filter id="dropShadow" x="0" y="0" width="200%" height="200%"> + <feOffset result="offOut" in="SourceAlpha" dx="1.5" dy="1.5"/> + <feGaussianBlur result="blurOut" in="offOut" stdDeviation="2"/> + <feBlend in="SourceGraphic" in2="blurOut" mode="normal"/> +</filter> +</defs> +<g filter="url(#dropShadow)"> + <rect x="-20000" y="-20000" width="40000" height="40000" fill="lime" /> +</g> +</svg> diff --git a/layout/reftests/svg/filters/filter-in-mask-01.svg b/layout/reftests/svg/filters/filter-in-mask-01.svg new file mode 100644 index 0000000000..e73efd3796 --- /dev/null +++ b/layout/reftests/svg/filters/filter-in-mask-01.svg @@ -0,0 +1,12 @@ +<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 1 1" preserveAspectRatio="xMidYMid slice"> + <!-- filter effects region covers whole viewbox --> + <filter id="myFilter" filterUnits="userSpaceOnUse" x="-1" y="-1" width="1" height="1"> + <feGaussianBlur stdDeviation="0"/> + </filter> + <!-- mask effects region covers whole viewbox, opaque white mask --> + <mask id="myMask" maskUnits="userSpaceOnUse" x="-1" y="-1" width="1" height="1"> + <rect filter="url(#myFilter)" x="-1" y="-1" width="1" height="1" fill="#FFFFFF"/> + </mask> + <rect x="-1" y="-1" width="1" height="1" fill="red"/> + <rect mask="url(#myMask)" x="-1" y="-1" width="1" height="1" fill="lime"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/filters/filter-in-mask-02.svg b/layout/reftests/svg/filters/filter-in-mask-02.svg new file mode 100644 index 0000000000..7c7fd86f1f --- /dev/null +++ b/layout/reftests/svg/filters/filter-in-mask-02.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter x="0" y="0" width="1" height="1" id="solid"> + <feFlood flood-color="black"/> + </filter> + <mask id="myMask"> + <rect fill="white" width="100%" height="100%"/> + <g transform="translate(10000, 0)"> + <rect fill="blue" width="100%" height="100%" filter="url(#solid)"/> + </g> + </mask> + </defs> + <!-- You should see pure lime color as background color of a whole page. --> + <rect fill="red" width="100%" height="100%"/> + <g mask="url(#myMask)"> + <rect x="0" y="0" width="100%" height="100%" fill="lime"></rect> + </g> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/filters/filter-in-pattern-01.svg b/layout/reftests/svg/filters/filter-in-pattern-01.svg new file mode 100644 index 0000000000..e6df8d7627 --- /dev/null +++ b/layout/reftests/svg/filters/filter-in-pattern-01.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid slice"> + <defs> + <filter id="blur"> + <feGaussianBlur stdDeviation="0" /> + </filter> + <pattern id="pattern1" patternUnits="userSpaceOnUse" width="10" height="10"> + <rect width="10" height="10" fill="lime" filter="url(#blur)" /> + </pattern> + </defs> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="url(#pattern1)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-in-pattern-02-ref.svg b/layout/reftests/svg/filters/filter-in-pattern-02-ref.svg new file mode 100644 index 0000000000..a712134d6b --- /dev/null +++ b/layout/reftests/svg/filters/filter-in-pattern-02-ref.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100"> + <defs> + <filter id="blur-filter"> + <feGaussianBlur stdDeviation="0.5"/> + </filter> + <pattern id="pattern1" width="8" height="8" patternUnits="userSpaceOnUse"> + <path d="M-1,1 l2,-2" stroke="blue" filter="url(#blur-filter)" /> + </pattern> + </defs> + + <rect x="-20%" y="-20%" width="10%" height="10%" fill="url(#pattern1)"/> +</svg> + diff --git a/layout/reftests/svg/filters/filter-in-pattern-02.svg b/layout/reftests/svg/filters/filter-in-pattern-02.svg new file mode 100644 index 0000000000..ed4bae1020 --- /dev/null +++ b/layout/reftests/svg/filters/filter-in-pattern-02.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -50 100 100"> + <defs> + <filter id="blur-filter" filterUnits="userSpaceOnUse" x="0" y="0"> + <feGaussianBlur stdDeviation="0.5"/> + </filter> + <pattern id="pattern1" width="8" height="8" patternUnits="userSpaceOnUse"> + <path d="M-1,1 l2,-2" stroke="blue" filter="url(#blur-filter)" /> + </pattern> + </defs> + + <rect x="-20%" y="-20%" width="10%" height="10%" fill="url(#pattern1)"/> +</svg> + diff --git a/layout/reftests/svg/filters/filter-inner-svg-01.svg b/layout/reftests/svg/filters/filter-inner-svg-01.svg new file mode 100644 index 0000000000..e00bde4636 --- /dev/null +++ b/layout/reftests/svg/filters/filter-inner-svg-01.svg @@ -0,0 +1,16 @@ +<!-- + 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.0"> + <desc> + The 'x' attribute on the inner 'svg' should not result in any of the lime 'circle' + it contains from being clipped when the inner 'svg' is filtered. + </desc> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" cx="200" cy="100" r="98"/> + <svg x="100" width="200" height="200" filter="url(#filter)"> + <circle fill="lime" r="100" cx="100" cy="100"/> + </svg> +</svg> diff --git a/layout/reftests/svg/filters/filter-inner-svg-02.svg b/layout/reftests/svg/filters/filter-inner-svg-02.svg new file mode 100644 index 0000000000..82809d9301 --- /dev/null +++ b/layout/reftests/svg/filters/filter-inner-svg-02.svg @@ -0,0 +1,18 @@ +<!-- + 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.0"> + <desc> + The 'viewBox' attribute on the inner 'svg' should push the red 'rect' it + contains outside the viewport, so if transforms and clipping are working + correctly when the inner 'svg' is being filtered, then none of the red + 'rect' should be visible. + </desc> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + <!--circle fill="lime" r="100" cx="300" cy="100"/--> + <rect width="100%" height="100%" fill="lime"/> + <svg width="200" height="200" viewBox="-200 0 200 200" filter="url(#filter)"> + <circle fill="red" r="98" cx="100" cy="100"/> + </svg> +</svg> diff --git a/layout/reftests/svg/filters/filter-inner-svg-03.svg b/layout/reftests/svg/filters/filter-inner-svg-03.svg new file mode 100644 index 0000000000..0ce543e157 --- /dev/null +++ b/layout/reftests/svg/filters/filter-inner-svg-03.svg @@ -0,0 +1,19 @@ +<!-- + 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.0"> + <desc> + The 'transform' attribute on the 'g' parent of the inner 'svg' should + not cause the lime 'circle' inside the inner 'svg' to be clipped when + the inner 'svg' is filtered. + </desc> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <g transform="translate(100, 0)"> + <svg width="200" height="200" filter="url(#filter)"> + <circle fill="lime" r="100" cx="100" cy="100"/> + </svg> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-kernelUnitLength-01-ref.svg b/layout/reftests/svg/filters/filter-kernelUnitLength-01-ref.svg new file mode 100644 index 0000000000..e19dfe1f82 --- /dev/null +++ b/layout/reftests/svg/filters/filter-kernelUnitLength-01-ref.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="emboss"> + <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/> + <!-- without kernelUnitLength attribute --> + <feSpecularLighting in="blur" result="spec" surfaceScale="-3" + specularConstant="2" specularExponent="16" + lighting-color="#ffb155"> + <feDistantLight azimuth="45" elevation="45"/> + </feSpecularLighting> + <feComposite in="spec" in2="SourceGraphic" operator="in" result="specOut"/> + </filter> + </defs> + <path filter="url(#emboss)" d="M 44.408917,5.7095287 C 535.13945,101.91182 534.01725,101.52506 532.53904,101.52499 C 531.36871,101.52506 530.17420,101.85117 528.96683,102.49024 z "/> +</svg> diff --git a/layout/reftests/svg/filters/filter-kernelUnitLength-01.svg b/layout/reftests/svg/filters/filter-kernelUnitLength-01.svg new file mode 100644 index 0000000000..9b192214f0 --- /dev/null +++ b/layout/reftests/svg/filters/filter-kernelUnitLength-01.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="emboss"> + <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/> + <!-- with kernelUnitLength attribute --> + <feSpecularLighting in="blur" result="spec" surfaceScale="-3" + specularConstant="2" specularExponent="16" + lighting-color="#ffb155" kernelUnitLength="1"> + <feDistantLight azimuth="45" elevation="45"/> + </feSpecularLighting> + <feComposite in="spec" in2="SourceGraphic" operator="in" result="specOut"/> + </filter> + </defs> + <path filter="url(#emboss)" d="M 44.408917,5.7095287 C 535.13945,101.91182 534.01725,101.52506 532.53904,101.52499 C 531.36871,101.52506 530.17420,101.85117 528.96683,102.49024 z "/> +</svg> diff --git a/layout/reftests/svg/filters/filter-lighting-region-ref.svg b/layout/reftests/svg/filters/filter-lighting-region-ref.svg new file mode 100644 index 0000000000..d7337102b7 --- /dev/null +++ b/layout/reftests/svg/filters/filter-lighting-region-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="300px"> + + <rect x="50" y="50" width="200" height="200" fill="black" /> + + <rect x="340" y="40" width="220" height="220" fill="grey" /> + <rect x="350" y="50" width="200" height="200" fill="white" /> +</svg> diff --git a/layout/reftests/svg/filters/filter-lighting-region.svg b/layout/reftests/svg/filters/filter-lighting-region.svg new file mode 100644 index 0000000000..883b6d805d --- /dev/null +++ b/layout/reftests/svg/filters/filter-lighting-region.svg @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="600px" height="300px"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1203376 --> + <defs> + <!-- the filter lights are intentionally chosen to fill the entire area with + a solid color since we're only testing the extents of the filter region + --> + <filter id="diffuse" x="-50%" y="-50%" width="200%" height="200%"> + <!-- gives a black filter region --> + <feDiffuseLighting lighting-color="black"> + <feDistantLight /> + </feDiffuseLighting> + </filter> + + <filter id="specular" x="-50%" y="-50%" width="200%" height="200%"> + <!-- gives a white filter region --> + <feSpecularLighting lighting-color="white" specularConstant="100"> + <feDistantLight elevation="90"/> + </feSpecularLighting> + </filter> + </defs> + + <rect x="100" y="100" width="100" height="100" filter="url(#diffuse)" /> + + <rect x="340" y="40" width="220" height="220" fill="grey" /> + <rect x="400" y="100" width="100" height="100" filter="url(#specular)" /> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-01.svg b/layout/reftests/svg/filters/filter-marked-line-01.svg new file mode 100644 index 0000000000..406615443c --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-01.svg @@ -0,0 +1,19 @@ +<!-- + 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.0"> + <desc> + Filtering the 'line' should not cause the mark (lime 'circle') to be clipped. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="100" refY="100" + markerUnits="userSpaceOnUse"> + <circle fill="lime" r="100" cx="100" cy="100"/> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="100" cy="100"/> + <line x2="100" y2="100" marker-end="url(#marker)" filter="url(#filter)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-02.svg b/layout/reftests/svg/filters/filter-marked-line-02.svg new file mode 100644 index 0000000000..76dea08b9c --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-02.svg @@ -0,0 +1,20 @@ +<!-- + 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.0"> + <desc> + The 'transform' attribute on the 'path' should not cause the mark + (lime 'circle') to be clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="100" refY="100" + markerUnits="userSpaceOnUse"> + <circle fill="lime" r="100" cx="100" cy="100"/> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <path d="M0,0 L100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)" transform="translate(100, 0)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-03.svg b/layout/reftests/svg/filters/filter-marked-line-03.svg new file mode 100644 index 0000000000..d59c71f49e --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-03.svg @@ -0,0 +1,20 @@ +<!-- + 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.0"> + <desc> + The 'viewBox' attribute on the 'marker' should not cause the mark + (lime 'circle') to be clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" + markerUnits="userSpaceOnUse" viewBox="-100 0 200 200"> + <circle fill="lime" r="100" cx="0" cy="100"/> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-04.svg b/layout/reftests/svg/filters/filter-marked-line-04.svg new file mode 100644 index 0000000000..0b90aaf557 --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-04.svg @@ -0,0 +1,20 @@ +<!-- + 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.0"> + <desc> + The 'transform' attribute on the 'circle' should not cause the mark + (lime 'circle') to be clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="100" refY="100" + markerUnits="userSpaceOnUse"> + <circle fill="lime" r="100" cx="0" cy="100" transform="translate(100, 0)"/> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-05.svg b/layout/reftests/svg/filters/filter-marked-line-05.svg new file mode 100644 index 0000000000..6f3fc0938f --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-05.svg @@ -0,0 +1,21 @@ +<!-- + 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.0"> + <desc> + The combination of the 'viewBox' attribute on the 'marker' and the 'transform' + attribute on the 'circle' element should not cause the mark (lime 'circle') to + be clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" + markerUnits="userSpaceOnUse" viewBox="-100 0 200 200"> + <circle fill="lime" r="100" cx="-100" cy="100" transform="translate(100, 0)"/> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-06.svg b/layout/reftests/svg/filters/filter-marked-line-06.svg new file mode 100644 index 0000000000..147d3a2aa0 --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-06.svg @@ -0,0 +1,23 @@ +<!-- + 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.0"> + <desc> + The combination of the 'viewBox' attribute on the 'marker' and the 'transform' + attribute on the 'g' element should not cause the mark (lime 'circle') to be + clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" + markerUnits="userSpaceOnUse" viewBox="-100 0 200 200"> + <g transform="translate(100, 0)"> + <circle fill="lime" r="100" cx="-100" cy="100"/> + </g> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <path d="M100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-07.svg b/layout/reftests/svg/filters/filter-marked-line-07.svg new file mode 100644 index 0000000000..94d1deca8e --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-07.svg @@ -0,0 +1,25 @@ +<!-- + 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.0"> + <desc> + The combination of the 'viewBox' attribute on the 'marker' and the 'transform' + attributes on the 'g' and 'path' elements should not cause the mark (lime + 'circle') to be clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" + markerUnits="userSpaceOnUse" viewBox="-100 0 200 200"> + <g transform="translate(100, 0)"> + <circle fill="lime" r="100" cx="-100" cy="100"/> + </g> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <g transform="translate(100, 0)"> + <path d="M-100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)" transform="translate(100, 0)"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-08.svg b/layout/reftests/svg/filters/filter-marked-line-08.svg new file mode 100644 index 0000000000..58d4f9e983 --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-08.svg @@ -0,0 +1,25 @@ +<!-- + 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.0"> + <desc> + The combination of the 'viewBox' attribute on the 'marker' and the 'transform' + attributes on the 'g', 'path' and 'circle' elements should not cause the mark + (lime 'circle') to be clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" + markerUnits="userSpaceOnUse" viewBox="-100 0 200 200"> + <g transform="translate(100, 0)"> + <circle fill="lime" r="100" cx="-200" cy="100" transform="translate(100, 0)"/> + </g> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <g transform="translate(100, 0)"> + <path d="M-100,0 l100,100 200,200" marker-mid="url(#marker)" filter="url(#filter)" transform="translate(100, 0)"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-marked-line-09.svg b/layout/reftests/svg/filters/filter-marked-line-09.svg new file mode 100644 index 0000000000..55ff716067 --- /dev/null +++ b/layout/reftests/svg/filters/filter-marked-line-09.svg @@ -0,0 +1,27 @@ +<!-- + 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.0"> + <desc> + The combination of the 'viewBox' attribute on the 'marker' and the 'transform' + attributes on the 'g', 'path' and 'circle' elements should not cause the mark + (lime 'circle') to be clipped when the 'path' is filtered. + </desc> + <defs> + <marker id="marker" markerWidth="200" markerHeight="200" refX="0" refY="100" + markerUnits="userSpaceOnUse" viewBox="-100 0 200 200"> + <g transform="translate(100, 0)"> + <circle fill="lime" r="100" cx="-200" cy="100" transform="translate(100, 0)"/> + </g> + </marker> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <g transform="translate(100, 0)"> + <g filter="url(#filter)"> + <path d="M-100,0 l100,100 200,200" marker-mid="url(#marker)" transform="translate(100, 0)"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-nested-filtering-01.svg b/layout/reftests/svg/filters/filter-nested-filtering-01.svg new file mode 100644 index 0000000000..57e1d1a65b --- /dev/null +++ b/layout/reftests/svg/filters/filter-nested-filtering-01.svg @@ -0,0 +1,18 @@ +<!-- + 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.0"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=461863 --> + <desc> + This test checks that transforms and filtering a descendant of a + filtered element interact correctly. + </desc> + <filter id="a"><feGaussianBlur stdDeviation="0.001"/></filter> + <filter id="b"><feGaussianBlur stdDeviation="0.001"/></filter> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" cx="200" cy="200" r="98"/> + <g id="g" filter="url(#a)" transform="translate(100, 0)"> + <circle fill="lime" filter="url(#b)" cx="100" cy="200" r="100"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-nested-filtering-02.svg b/layout/reftests/svg/filters/filter-nested-filtering-02.svg new file mode 100644 index 0000000000..77de499799 --- /dev/null +++ b/layout/reftests/svg/filters/filter-nested-filtering-02.svg @@ -0,0 +1,18 @@ +<!-- + 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.0"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=461863 --> + <desc> + This test checks that transforms and filtering a decedent of a + filtered element interact correctly. + </desc> + <filter id="a"><feGaussianBlur stdDeviation="0.001"/></filter> + <filter id="b"><feGaussianBlur stdDeviation="0.001"/></filter> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" cx="200" cy="200" r="98" transform="scale(1.2)"/> + <g id="g" filter="url(#a)" transform="scale(1.2) translate(100, 0)"> + <circle fill="lime" filter="url(#b)" cx="100" cy="200" r="100"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-patterned-rect-01.svg b/layout/reftests/svg/filters/filter-patterned-rect-01.svg new file mode 100644 index 0000000000..436d3648cf --- /dev/null +++ b/layout/reftests/svg/filters/filter-patterned-rect-01.svg @@ -0,0 +1,21 @@ +<!-- + 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.0"> + <desc> + Filtering the patterned 'rect' should not cause the pattern (lime + 'circle') to be clipped or misplaced due to bad interaction with + the transforms. + </desc> + <defs> + <pattern id="pattern" patternUnits="userSpaceOnUse" + x="0" y="0" width="200" height="200"> + <circle fill="lime" r="100" cx="100" cy="100"/> + </pattern> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="200" cy="100"/> + <rect width="200" height="200" fill="url(#pattern)" filter="url(#filter)" transform="translate(100, 0)"/> +</svg> diff --git a/layout/reftests/svg/filters/filter-patterned-rect-02.svg b/layout/reftests/svg/filters/filter-patterned-rect-02.svg new file mode 100644 index 0000000000..f15baa4afc --- /dev/null +++ b/layout/reftests/svg/filters/filter-patterned-rect-02.svg @@ -0,0 +1,23 @@ +<!-- + 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.0"> + <desc> + Filtering the patterned 'rect' should not cause the pattern (lime + 'circle') to be clipped or misplaced due to bad interaction with + the transforms. + </desc> + <defs> + <pattern id="pattern" patternUnits="userSpaceOnUse" + x="0" y="0" width="200" height="200"> + <circle fill="lime" r="100" cx="100" cy="100"/> + </pattern> + <filter id="filter"><feGaussianBlur stdDeviation="0.001"/></filter> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle fill="red" r="98" cx="300" cy="100"/> + <g transform="translate(100, 0)"> + <rect width="200" height="200" fill="url(#pattern)" filter="url(#filter)" transform="translate(100, 0)"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/filter-region-01a.html b/layout/reftests/svg/filters/filter-region-01a.html new file mode 100644 index 0000000000..f66e9bd34d --- /dev/null +++ b/layout/reftests/svg/filters/filter-region-01a.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<body style="background-color: lime;"> +<svg width="0" height="0"> + <filter id="myFilter" filterUnits="objectBoundingBox" x="0" y="0" width="50%" height="50%"> + <feMerge> + <feMergeNode/> + </feMerge> + </filter> +</svg> + +<!-- This outer svg element should be totally covered by the next filtered outer svg element. --> +<svg style="position: fixed;" x="0" y ="0" width="120" height="120"> + <rect x="10" y="10" width="100" height="100" fill="red"/> +</svg> + +<svg filter="url(#myFilter)" style="position: fixed;" x="0" y ="0" width="240" height="240"> + <rect x="10" y="10" width="100" height="100" fill="lime"/> +</svg> + +</body>
\ No newline at end of file diff --git a/layout/reftests/svg/filters/filter-region-01b.html b/layout/reftests/svg/filters/filter-region-01b.html new file mode 100644 index 0000000000..21d5add6e3 --- /dev/null +++ b/layout/reftests/svg/filters/filter-region-01b.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<body style="background-color: lime;"> +<svg width="0" height="0"> + <filter id="myFilter" filterUnits="objectBoundingBox" x="0" y="0" width="50%" height="50%"> + <feMerge> + <feMergeNode/> + </feMerge> + </filter> +</svg> + +<svg style="position: fixed;" x="0" y ="0" width="400" height="400"> + <!-- This filtered inner element should be covered by the next outer svg element. --> + <svg filter="url(#myFilter)" style="position: fixed;" x="0" y ="0" width="200" height="200"> + <rect x="10" y="10" width="120" height="120" fill="red"/> + </svg> +</svg> + +<svg style="position: fixed;" x="0" y ="0" width="120" height="120"> + <rect x="10" y="10" width="100" height="100" fill="lime"/> +</svg> + +</body>
\ No newline at end of file diff --git a/layout/reftests/svg/filters/filter-transform-01.svg b/layout/reftests/svg/filters/filter-transform-01.svg new file mode 100644 index 0000000000..5536a14020 --- /dev/null +++ b/layout/reftests/svg/filters/filter-transform-01.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" style="background-color:lime" viewBox="-50 -50 100 100"> + <defs> + <filter id="blur"> + <feGaussianBlur stdDeviation="1"/> + </filter> + </defs> + + <circle r="15" fill="red" filter="url(#blur)" transform="rotate(45)"/> + <circle r="15" fill="red" filter="url(#blur)" transform="rotate(90)"/> + <circle r="15" fill="red" filter="url(#blur)" transform="skewX(0) skewY(0)"/> + <circle cx="-10" cy="-10" r="15" fill="red" filter="url(#blur)" transform="translate(10, 10)"/> + <circle cx="-10000" cy="-10000" r="15" fill="red" filter="url(#blur)" transform="translate(10000, 10000)"/> + <circle r="10" fill="red" filter="url(#blur)" transform="scale(1.5, 1.5)"/> + + <!-- The circles above should be completely covered by the next one. --> + <circle r="20" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/filters/mozilla-banner.gif b/layout/reftests/svg/filters/mozilla-banner.gif Binary files differnew file mode 100644 index 0000000000..dd0f077753 --- /dev/null +++ b/layout/reftests/svg/filters/mozilla-banner.gif diff --git a/layout/reftests/svg/filters/nested-filter-ref.html b/layout/reftests/svg/filters/nested-filter-ref.html new file mode 100644 index 0000000000..70ee403d7f --- /dev/null +++ b/layout/reftests/svg/filters/nested-filter-ref.html @@ -0,0 +1,14 @@ +<html style="background: red"> +<body> + <svg height="100px" width="100px"> + <g transform="translate(0, 25)">> + <defs> + <mask id="m" maskUnits="userSpaceOnUse"> + <rect x=10 y=10 width=51 height=45 fill="white"></rect> + </mask> + </defs> + <rect fill="yellow" x=0 y=0 width=100 height=100 mask="url(#m)"></rect> + </g> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/nested-filter.html b/layout/reftests/svg/filters/nested-filter.html new file mode 100644 index 0000000000..86407bc5c0 --- /dev/null +++ b/layout/reftests/svg/filters/nested-filter.html @@ -0,0 +1,23 @@ +<html style="background: red"> +<body> + <svg height="100px" width="100px"> + <defs> + <filter filterUnits="userSpaceOnUse" id="merge" color-interpolation-filters="sRGB"> + <feMerge> + <feMergeNode in="SourceGraphic"></feMergeNode> + </feMerge> + </filter> + </defs> + <g filter="url(#merge)"> + <g transform="translate(0, 25)">> + <defs> + <mask id="m" maskUnits="userSpaceOnUse"> + <rect x=10 y=10 width=51 height=45 fill="white"></rect> + </mask> + </defs> + <rect fill="yellow" x=0 y=0 width=100 height=100 mask="url(#m)"></rect> + </g> + </g> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-1.svg b/layout/reftests/svg/filters/outside-sourcegraphic-1.svg new file mode 100644 index 0000000000..f360aa12fd --- /dev/null +++ b/layout/reftests/svg/filters/outside-sourcegraphic-1.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <feFlood flood-color="lime"/> + </filter> + <rect width="100" height="100" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-2.svg b/layout/reftests/svg/filters/outside-sourcegraphic-2.svg new file mode 100644 index 0000000000..6699d620b9 --- /dev/null +++ b/layout/reftests/svg/filters/outside-sourcegraphic-2.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <feColorMatrix type="matrix" values="0 0 0 0 0 + 0 0 0 0 1 + 0 0 0 0 0 + 0 0 0 0 1"/> + </filter> + <rect width="100" height="100" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-3.svg b/layout/reftests/svg/filters/outside-sourcegraphic-3.svg new file mode 100644 index 0000000000..f8f6b36387 --- /dev/null +++ b/layout/reftests/svg/filters/outside-sourcegraphic-3.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="f" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 0" /> + <feFuncG type="table" tableValues="1 1" /> + <feFuncB type="table" tableValues="0 0" /> + <feFuncA type="table" tableValues="1 1" /> + </feComponentTransfer> + </filter> + <rect width="100" height="100" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/filters/outside-sourcegraphic-ref.svg b/layout/reftests/svg/filters/outside-sourcegraphic-ref.svg new file mode 100644 index 0000000000..a336d22158 --- /dev/null +++ b/layout/reftests/svg/filters/outside-sourcegraphic-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="200" height="200" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/filters/pass.svg b/layout/reftests/svg/filters/pass.svg new file mode 100644 index 0000000000..c09c6601e8 --- /dev/null +++ b/layout/reftests/svg/filters/pass.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"> + <title>Testcase reference file for generic pass condition</title> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/filters/reftest.list b/layout/reftests/svg/filters/reftest.list new file mode 100644 index 0000000000..9975eb190d --- /dev/null +++ b/layout/reftests/svg/filters/reftest.list @@ -0,0 +1,142 @@ +# In general, the fe*-1 tests test basic functionality clipped to a filter primitive +# subregion. The fe*-2 tests test with no clipping (which stresses +# the automatic optimal surface-size computation a bit more). + +# CSS filter tests +include css-filters/reftest.list + +# CSS filter chain tests +include css-filter-chains/reftest.list + +# Combined CSS and SVG filter chain tests +include css-svg-filter-chains/reftest.list + +# SVG filter chain tests +include svg-filter-chains/reftest.list + +== dynamic-filtered-foreignObject-01.svg pass.svg +== dynamic-filter-invalidation-01.svg pass.svg +== dynamic-filter-invalidation-02.svg pass.svg +== dynamic-filter-invalidation-03.svg pass.svg +== dynamic-filter-invalidation-04.svg pass.svg + +fuzzy(0-1,0-42500) == feBlend-1.svg feBlend-1-ref.svg +== feBlend-2.svg feBlend-2-ref.svg + +fuzzy(0-1,0-6400) == feColorMatrix-1.svg feColorMatrix-1-ref.svg +fuzzy(0-1,0-10000) == feColorMatrix-2.svg feColorMatrix-2-ref.svg + +== feComponentTransfer-1.svg feComponentTransfer-1-ref.svg +== feComponentTransfer-2.svg feComponentTransfer-2-ref.svg + +fuzzy(0-1,0-9600) == feComposite-1.svg feComposite-1-ref.svg +fuzzy(0-1,0-10000) == feComposite-2.svg feComposite-2-ref.svg + +== feConvolveMatrix-1.svg feConvolveMatrix-1-ref.svg +== feConvolveMatrix-2.svg feConvolveMatrix-2-ref.svg + +== feDisplacementMap-1.svg feDisplacementMap-1-ref.svg +== feDisplacementMap-2.svg feDisplacementMap-2-ref.svg + +fuzzy(0-1,0-1600) == feFlood-1.svg feFlood-1-ref.svg +skip-if(d2d) fuzzy(0-1,0-6400) == feFlood-2.svg feFlood-2-ref.svg + +fuzzy(0-2,0-6404) fuzzy-if(Android&&device&&!swgl,6-6,6400-6400) == feGaussianBlur-1.svg feGaussianBlur-1-ref.svg +fuzzy(0-2,0-304) == feGaussianBlur-2.svg feGaussianBlur-2-ref.svg +# != feGaussianBlur-3.svg feGaussianBlur-3-ref.svg +fuzzy-if(!useDrawSnapshot,2-5,4764-8168) fuzzy-if(Android&&device&&!swgl,5-5,8574-8574) == feGaussianBlur-4.svg feGaussianBlur-4-ref.svg +fuzzy-if(geckoview,0-4,0-200) == feGaussianBlur-5.svg feGaussianBlur-5-ref.svg +== feGaussianBlur-6.svg feGaussianBlur-6-ref.svg +skip-if(d2d) == feGaussianBlur-cap-large-directional-radius-on-software.html feGaussianBlur-cap-large-directional-radius-on-software-ref.html + +!= feImage-1.svg about:blank # (Make sure our image renders at all) +== feImage-1.svg feImage-1-ref.svg +== feImage-scale-to-primitive-subregion.html feImage-scale-to-primitive-subregion-ref.html + +== feMerge-1.svg feMerge-1-ref.svg +== feMerge-2.svg feMerge-2-ref.svg + +== feMorphology-1.svg feMorphology-1-ref.svg +== feMorphology-2.svg feMorphology-2-ref.svg + +== feOffset-1.svg feOffset-1-ref.svg +== feOffset-2.svg feOffset-2-ref.svg + +== feTile-1.svg feTile-1-ref.svg +== feTile-2.svg feTile-2-ref.svg + +# no tests for feTurbulence + +fuzzy-if(geckoview,0-36,0-220) == filter-clipped-rect-01.svg pass.svg +== filter-in-pattern-01.svg pass.svg +fuzzy(0-5,0-67) != filter-in-pattern-02.svg filter-in-pattern-02-ref.svg +random-if(winWidget) == filter-in-mask-01.svg pass.svg # bug 1356139 +== filter-in-mask-02.svg pass.svg +== filter-inner-svg-01.svg pass.svg +== filter-inner-svg-02.svg pass.svg +== filter-inner-svg-03.svg pass.svg +fails == filter-marked-line-01.svg pass.svg # bug 477704 +== filter-kernelUnitLength-01.svg filter-kernelUnitLength-01-ref.svg +== filter-marked-line-02.svg pass.svg +== filter-marked-line-03.svg pass.svg +== filter-marked-line-04.svg pass.svg +== filter-marked-line-05.svg pass.svg +== filter-marked-line-06.svg pass.svg +== filter-marked-line-07.svg pass.svg +== filter-marked-line-08.svg pass.svg +== filter-marked-line-09.svg pass.svg +== filter-nested-filtering-01.svg pass.svg +fuzzy(0-10,0-1200) == filter-nested-filtering-02.svg pass.svg +== filter-patterned-rect-01.svg pass.svg +== filter-patterned-rect-02.svg pass.svg +== filter-region-01a.html pass.svg +== filter-region-01b.html pass.svg +== filter-transform-01.svg pass.svg + +== feColorMatrix-saturate-01.svg pass.svg + +== feComponentTransfer-03.svg pass.svg +== feComponentTransfer-04.svg pass.svg +== feComposite-arguments-01.svg pass.svg +fuzzy-if(winWidget,0-1,0-39600) == feComposite-operator-lighter.svg feComposite-operator-lighter-ref.html +fuzzy(0-85,0-28600) == feComposite-paint-01.svg feComposite-paint-01-ref.svg +fuzzy(0-1,0-10000) == feConvolveMatrix-bias-01.svg feConvolveMatrix-bias-01-ref.svg +== feConvolveMatrix-order-01.svg feConvolveMatrix-order-01-ref.svg + +fuzzy(0-1,0-400) == feDisplacementMap-alpha-01.svg pass.svg +fuzzy(0-2,0-500) == feDisplacementMap-colour-01.svg feDisplacementMap-colour-01-ref.svg +== feDisplacementMap-scale-01.svg pass.svg + +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-2,0-25) fuzzy-if(!useDrawSnapshot,55-98,14033-16467) == feDropShadow-01.svg feDropShadow-01-ref.svg + +== feFlood-color-01.svg pass.svg + +fuzzy-if(!useDrawSnapshot||(winWidget&&isCoverageBuild),20-21,5540-5647) == feGaussianBlur-alpha-01.svg feGaussianBlur-alpha-01-ref.svg + +== feMorphology-radius-negative-01.svg pass.svg +== feMorphology-radius-negative-02.svg pass.svg +== feMorphology-radius-zero-01.svg pass.svg +== feMorphology-radius-zero-02.svg pass.svg + +== feTile-large-01.svg pass.svg +== feTile-large-02.svg feTile-large-02-ref.svg +== feTile-outside-01.svg feTile-outside-01-ref.svg + +fuzzy(0-1,0-219) == feDiffuseLighting-1.svg feDiffuseLighting-1-ref.svg + +fuzzy(0-2,0-2659) skip-if(d2d) == feSpecularLighting-1.svg feSpecularLighting-1-ref.svg + +== filter-lighting-region.svg filter-lighting-region-ref.svg + +fails-if(useDrawSnapshot) == fePointLight-zoomed-page.svg fePointLight-zoomed-page-ref.svg + +== feTurbulence-offset.svg feTurbulence-offset-ref.svg +fuzzy(0-1,0-10000) == feTurbulence-zero-baseFreq-01.svg feTurbulence-zero-baseFreq-01-ref.svg +!= feTurbulence-zero-baseFreq-02.svg about:blank + +== outside-sourcegraphic-1.svg outside-sourcegraphic-ref.svg +# These failures are caused by bug 1586055 +fails-if(!useDrawSnapshot) == outside-sourcegraphic-2.svg outside-sourcegraphic-ref.svg +fails-if(!useDrawSnapshot) == outside-sourcegraphic-3.svg outside-sourcegraphic-ref.svg +== nested-filter.html nested-filter-ref.html +== filter-giant.svg pass.svg diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-input-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-input-ref.svg new file mode 100644 index 0000000000..4939ce12ae --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/clip-input-ref.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Clip Input Filter</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <rect x="0" y="0" width="100" height="100" fill="green"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-input.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-input.svg new file mode 100644 index 0000000000..8dd2841add --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/clip-input.svg @@ -0,0 +1,52 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Clip Input Filter</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="clip-input-ref.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that a filter region clips a + SourceGraphic input filter. If the test passes, you should see a green + square. + </desc> + </g> + + <g id="test-body-content"> + <filter id="f1" x="100" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Create a red square at x=100. --> + <feFlood flood-color="red"/> + </filter> + <filter id="f2" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Create a green square at x=0. --> + <feFlood result="green" flood-color="green"/> + <!-- + Attempt to offset the red square left to cover up the green square. + However, this filter's filter region should clip away the red square, + and only transparent pixels should be offset left, leaving the green + square intact. + --> + <feOffset result="red" in="SourceGraphic" dx="-100" x="0" y="0" width="200" height="100"/> + <feMerge> + <feMergeNode in="green"/> + <feMergeNode in="red"/> + </feMerge> + </filter> + <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic-ref.svg new file mode 100644 index 0000000000..048dc64687 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic-ref.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Clip Original SourceGraphic</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <rect x="0" y="0" width="100" height="100" fill="green"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic.svg new file mode 100644 index 0000000000..f6349768ed --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/clip-original-SourceGraphic.svg @@ -0,0 +1,50 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Clip Original SourceGraphic</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="clip-original-SourceGraphic-ref.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that the filter region of the + first filter clips the original SourceGraphic. If the test passes, you + should see a green square. + </desc> + </g> + + <g id="test-body-content"> + <!-- + Use a filter region less wide than the red rectangle SourceGraphic. This + should clip the red rectangle, resulting in a red square. + --> + <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Create a green square at x=0. --> + <feFlood result="green" flood-color="green" x="0" y="0" width="100" height="100"/> + <!-- + Offset the red SourceGraphic left. If it wasn't clipped properly, it + will cover up the green square. If it was clipped properly, it won't. + --> + <feOffset result="offset-red" in="SourceGraphic" dx="-100" x="0" y="0" width="200" height="100"/> + <feMerge> + <feMergeNode in="green"/> + <feMergeNode in="offset-red"/> + </feMerge> + </filter> + <rect x="0" y="0" width="200" height="100" filter="url(#f1)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-output-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-output-ref.svg new file mode 100644 index 0000000000..26b6cc7f03 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/clip-output-ref.svg @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Clip Filter Output</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="hue-rotate"> + <!-- Turn the red square green. --> + <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/> + </filter> + <rect x="0" y="0" width="100" height="100" filter="url(#hue-rotate)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/clip-output.svg b/layout/reftests/svg/filters/svg-filter-chains/clip-output.svg new file mode 100644 index 0000000000..94d3a953ab --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/clip-output.svg @@ -0,0 +1,52 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Clip Filter Output</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="clip-output-ref.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies a filter region clips its + filter's output into the next filter. If the test passes, you should see a + green square. + </desc> + </g> + + <g id="test-body-content"> + <filter id="flood" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- + Create a red square followed by a blue square. The blue square should be + clipped away due to this filter's filter region. + --> + <feFlood result="red" flood-color="red" x="0" y="0" width="100" height="100"/> + <feFlood result="blue" flood-color="blue" x="100" y="0" width="100" height="100"/> + <feMerge> + <feMergeNode in="red"/> + <feMergeNode in="blue"/> + </feMerge> + </filter> + <filter id="hue-rotate" x="0" y="0" width="200" height="100" filterUnits="userSpaceOnUse"> + <!-- + Turn the red square green. If the blue square wasn't clipped by the + previous filter's filter region, it will turn red. + --> + <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/> + </filter> + <rect x="0" y="0" width="100" height="100" filter="url(#flood) url(#hue-rotate)"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/default-subregion-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/default-subregion-ref.svg new file mode 100644 index 0000000000..86d77e2008 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/default-subregion-ref.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Default Filter Primitive Subregion</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="f1" x="50" y="50" width="200" height="200" filterUnits="userSpaceOnUse"> + <feGaussianBlur stdDeviation="10"/> + </filter> + <rect x="100" y="100" width="100" height="100" filter="url(#f1)" fill="green"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/default-subregion.svg b/layout/reftests/svg/filters/svg-filter-chains/default-subregion.svg new file mode 100644 index 0000000000..b175fe0a31 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/default-subregion.svg @@ -0,0 +1,48 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Default Filter Primitive Subregion</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="default-subregion-ref.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that the default filter + primitive subregion is equal to the filter region. If the test passes, + you should see a blurred green square. + </desc> + </g> + + <g id="test-body-content"> + <filter id="f1" x="100" y="100" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Fill a 100x100 square with green. --> + <feFlood flood-color="green"/> + </filter> + <filter id="f2" x="50" y="50" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- + This feGaussianBlur primitive blurs the 100x100 green square from the + previous filter. It does not explicitly define a filter primitive + subregion, so its subregion should equal the filter region. The filter + region has plenty of space for the blur outsets, so the blur should not + appear clipped. If the blur incorrectly uses a primitive subregion or + filter region from a previous filter, the blur may appear clipped. + --> + <feGaussianBlur stdDeviation="10"/> + </filter> + <rect x="100" y="100" width="100" height="100" filter="url(#f1) url(#f2)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions-ref.svg new file mode 100644 index 0000000000..fb405de255 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions-ref.svg @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Use Same FillPaint Input with Different Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="f1"> + <!-- Turn the red square into a green square. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="0" y="0" width="200" height="200" filter="url(#f1)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions.svg b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions.svg new file mode 100644 index 0000000000..57277b62d6 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/different-FillPaint-filter-regions.svg @@ -0,0 +1,43 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Use Same FillPaint Input with Different Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="different-FillPaint-filter-regions-ref.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that a FillPaint input is large + enough to cover the largest filter region in the chain. If the test + passes, you should see a green square. + </desc> + </g> + + <g id="test-body-content"> + <!-- Use a small filter region. --> + <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a blue square. --> + <feColorMatrix in="FillPaint" type="hueRotate" values="180"/> + </filter> + <!-- Use a large filter region. --> + <filter id="f2" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a green square. --> + <feColorMatrix in="FillPaint" type="hueRotate" values="90"/> + </filter> + <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions-ref.svg new file mode 100644 index 0000000000..ecdff269c0 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions-ref.svg @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Use Same StrokePaint Input with Different Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="f1"> + <!-- Turn the red square into a green square. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="0" y="0" width="200" height="200" filter="url(#f1)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions.svg b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions.svg new file mode 100644 index 0000000000..2e0d1adb2b --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/different-StrokePaint-filter-regions.svg @@ -0,0 +1,43 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Use Same StrokePaint Input with Different Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="different-StrokePaint-filter-regions-ref.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that a StrokePaint input is large + enough to cover the largest filter region in the chain. If the test + passes, you should see a green square. + </desc> + </g> + + <g id="test-body-content"> + <!-- Use a small filter region. --> + <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a blue square. --> + <feColorMatrix in="StrokePaint" type="hueRotate" values="180"/> + </filter> + <!-- Use a large filter region. --> + <filter id="f2" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a green square. --> + <feColorMatrix in="StrokePaint" type="hueRotate" values="90"/> + </filter> + <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)" stroke="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives-ref.svg new file mode 100644 index 0000000000..214be69ea2 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives-ref.svg @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Don't Clip Primitives in Previous Filters to Subsequent Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="f1" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a green square. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="0" y="0" width="100" height="100" filter="url(#f1)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives.svg b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives.svg new file mode 100644 index 0000000000..50b2be3a62 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/dont-clip-previous-primitives.svg @@ -0,0 +1,51 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Don't Clip Primitives in Previous Filters to Subsequent Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="dont-clip-previous-primitives.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that a second filter's filter + region does not clip the primitives inside a first filter. If the test + passes, you should see a green square. + </desc> + </g> + + <g id="test-body-content"> + <!-- Use a wide filter region. --> + <filter id="f1" x="0" y="0" width="200" height="100" filterUnits="userSpaceOnUse"> + <!-- Create a red square at x=100. --> + <feFlood flood-color="red" x="100" y="0" width="100" height="100"/> + <!-- Offset the red square left to x=0. --> + <feOffset dx="-100" x="0" y="0" width="200" height="100"/> + </filter> + <!-- + Use a less wide filter region. The intermediate results of the previous + filter do not fit in this filter region, but that shouldn't matter. The + previous filter's intermediate results should not be affected by this + filter region. The final result of the previous filter should fit in this + filter region. + --> + <filter id="f2" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse"> + <!-- Turn the red square into a green square. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="0" y="0" width="100" height="100" filter="url(#f1) url(#f2)" fill="blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions-ref.svg new file mode 100644 index 0000000000..2f97ca88ad --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions-ref.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Intersecting Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="hue-rotate"> + <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/> + </filter> + <rect x="100" y="100" width="100" height="100" filter="url(#hue-rotate)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions.svg b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions.svg new file mode 100644 index 0000000000..f9ff60aa2f --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/intersecting-filter-regions.svg @@ -0,0 +1,45 @@ +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Intersecting Filter Regions</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="intersecting-filter-regions-ref.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that filters with intersecting + filter regions render properly. If the test passes, you should see a green + square. + </desc> + </g> + + <g id="test-body-content"> + <filter id="flood" x="0" y="0" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- + This filter clips the SourceGraphic to its top left corner and fills it + with red. + --> + <feFlood flood-color="red"/> + </filter> + <filter id="hue-rotate" x="100" y="100" width="200" height="200" filterUnits="userSpaceOnUse"> + <!-- + This filter clips the output of the previous filter to the bottom right + corner, and it changes red into green. If the previous filter didn't run + or it didn't clip the SourceGraphic, this filter will change the + SourceGraphic's blue fill into red. + --> + <feColorMatrix type="hueRotate" values="90" style="color-interpolation-filters:sRGB"/> + </filter> + <rect x="0" y="0" width="300" height="300" filter="url(#flood) url(#hue-rotate)" fill="blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/long-chain.svg b/layout/reftests/svg/filters/svg-filter-chains/long-chain.svg new file mode 100644 index 0000000000..00f0c9dc62 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/long-chain.svg @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="flood-with-yellow"> + <!-- Turn the black rect into a yellow rect. --> + <feFlood x="20" y="20" width="100" height="100" flood-color="#ffff00"/> + </filter> + <filter id="extract-red-channel"> + <!-- Turn the yellow rect into a red rect. --> + <feComponentTransfer x="0" y="0" width="120" height="120"> + <feFuncR type="identity"/> + <feFuncG type="table" tableValues="0 0"/> + <feFuncB type="table" tableValues="0 0"/> + <feFuncA type="identity"/> + </feComponentTransfer> + </filter> + <filter id="blur"> + <!-- Blur the red rect. --> + <feGaussianBlur stdDeviation="3" x="10" y="10" width="120" height="120"/> + </filter> + <filter id="hue-rotate"> + <!-- Turn the red rect into a green rect. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="20" y="20" width="100" height="100" filter="url(#flood-with-yellow) url(#extract-red-channel) url(#blur) url(#hue-rotate)"/> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/multiple-primitives-per-filter.svg b/layout/reftests/svg/filters/svg-filter-chains/multiple-primitives-per-filter.svg new file mode 100644 index 0000000000..9bdf8fe2c0 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/multiple-primitives-per-filter.svg @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="flood-with-red"> + <!-- Turn the black rect into a yellow rect. --> + <feFlood x="20" y="20" width="100" height="100" flood-color="#ffff00"/> + <!-- Turn the yellow rect into a red rect. --> + <feComponentTransfer x="0" y="0" width="120" height="120"> + <feFuncR type="identity"/> + <feFuncG type="table" tableValues="0 0"/> + <feFuncB type="table" tableValues="0 0"/> + <feFuncA type="identity"/> + </feComponentTransfer> + </filter> + <filter id="blur-and-hue-rotate"> + <!-- Blur the red rect. --> + <feGaussianBlur stdDeviation="3" x="10" y="10" width="120" height="120"/> + <!-- Turn the red rect into a green rect. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="20" y="20" width="100" height="100" filter="url(#flood-with-red) url(#blur-and-hue-rotate)"/> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/reftest.list b/layout/reftests/svg/filters/svg-filter-chains/reftest.list new file mode 100644 index 0000000000..12ddf9d8bb --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/reftest.list @@ -0,0 +1,16 @@ +# These tests verify that SVG filter chains behave properly. +# e.g. filter: url(#f1) url(#f2) url(#f3) + +== clip-input.svg clip-input-ref.svg +== clip-original-SourceGraphic.svg clip-original-SourceGraphic-ref.svg +== clip-output.svg clip-output-ref.svg +fuzzy(0-5,0-20300) fuzzy-if(Android&&device&&!swgl,5-5,21751-21751) == default-subregion.svg default-subregion-ref.svg +== different-FillPaint-filter-regions.svg different-FillPaint-filter-regions-ref.svg +== different-StrokePaint-filter-regions.svg different-StrokePaint-filter-regions-ref.svg +== dont-clip-previous-primitives.svg dont-clip-previous-primitives-ref.svg +== intersecting-filter-regions.svg intersecting-filter-regions-ref.svg +fuzzy-if(!useDrawSnapshot,9-9,5168-5536) fuzzy-if(!useDrawSnapshot&&swgl,7-7,13170-13184) fuzzy-if(Android&&device&&!swgl,8-8,12391-12391) == long-chain.svg simple-chain-ref.svg +fuzzy-if(!useDrawSnapshot,9-9,5168-5536) fuzzy-if(!useDrawSnapshot&&swgl,7-7,13170-13184) fuzzy-if(Android&&device&&!swgl,8-8,12391-12391) == multiple-primitives-per-filter.svg simple-chain-ref.svg +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-173) fuzzy-if(!useDrawSnapshot||(winWidget&&isCoverageBuild),9-9,5128-5496) fuzzy-if(!useDrawSnapshot&&swgl,7-7,12820-12830) fuzzy-if(Android&&device&&!swgl,8-8,12355-12355) == second-filter-uses-SourceAlpha.svg second-filter-uses-SourceAlpha-ref.svg +fuzzy-if(!useDrawSnapshot,9-9,5168-5536) fuzzy-if(!useDrawSnapshot&&swgl,7-7,13170-13180) fuzzy-if(Android&&device&&!swgl,8-8,12391-12391) == second-filter-uses-SourceGraphic.svg simple-chain-ref.svg +== simple-chain.svg simple-chain-ref.svg diff --git a/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha-ref.svg new file mode 100644 index 0000000000..e809e55bb3 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha-ref.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Second Filter Uses SourceAlpha</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <metadata class="flags">namespace svg</metadata> + </g> + + <g id="test-body-content"> + <filter id="blur"> + <feGaussianBlur stdDeviation="3"/> + </filter> + <rect x="100" y="100" width="100" height="100" filter="url(#blur)" fill="#00ff00"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha.svg b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha.svg new file mode 100644 index 0000000000..474c9da14c --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceAlpha.svg @@ -0,0 +1,49 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg id="svg-root" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <g id="testmeta"> + <title>SVG Filter Chains: Second Filter Uses SourceAlpha</title> + <link rel="copyright" + href="http://www.w3.org/Graphics/SVG/Test/Copyright"/> + <link rel="license" + href="http://www.w3.org/Consortium/Legal/2008/03-bsd-license.html"/> + <link rel="author" + title="Max Vujovic" + href="mailto:mvujovic@adobe.com"/> + <link rel="help" + href="http://dev.w3.org/fxtf/filters/#FilterPrimitiveSubRegion"/> + <link rel="match" + href="second-filter-uses-SourceAlpha.svg" /> + <metadata class="flags">namespace svg</metadata> + <desc class="assert"> + In an SVG filter chain, this test verifies that a filter receives the + correct SourceAlpha input from the previous filter in the chain. If the + test passes, you should see a blurred green square. + </desc> + </g> + + <g id="test-body-content"> + <filter id="blur"> + <feGaussianBlur stdDeviation="3"/> + </filter> + <filter id="add-green"> + <!-- + This filter receives transparent black and the alpha channel of the + previous blur filter. Then, it adds to the green channel where the alpha + channel is set, resulting in a blurred green square. + --> + <feComponentTransfer in="SourceAlpha"> + <feFuncR type="identity"/> + <feFuncG type="table" tableValues="1 1"/> + <feFuncB type="identity"/> + <feFuncA type="identity"/> + </feComponentTransfer> + </filter> + <rect x="100" y="100" width="100" height="100" filter="url(#blur) url(#add-green)" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceGraphic.svg b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceGraphic.svg new file mode 100644 index 0000000000..f8dc040b83 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/second-filter-uses-SourceGraphic.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="blur"> + <!-- Blur the red rect. --> + <feGaussianBlur stdDeviation="3"/> + </filter> + <filter id="hue-rotate"> + <feFlood flood-color="#0000ff"/> + <!-- Turn the red rect into a green rect. feColorMatrix should use the + result of the #blur filter, not feFlood, as its SourceGraphic. --> + <feColorMatrix in="SourceGraphic" type="hueRotate" values="90"/> + </filter> + <rect x="20" y="20" width="100" height="100" fill="#ff0000" filter="url(#blur) url(#hue-rotate)"/> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/simple-chain-ref.svg b/layout/reftests/svg/filters/svg-filter-chains/simple-chain-ref.svg new file mode 100644 index 0000000000..4194849054 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/simple-chain-ref.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- Test multiple SVG filters chained together against a single SVG filter. --> + <filter id="blur-and-hue-rotate"> + <!-- Blur the red rect. --> + <feGaussianBlur stdDeviation="3"/> + <!-- Turn the red rect into a green rect. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="20" y="20" width="100" height="100" fill="#ff0000" filter="url(#blur-and-hue-rotate)"/> +</svg> diff --git a/layout/reftests/svg/filters/svg-filter-chains/simple-chain.svg b/layout/reftests/svg/filters/svg-filter-chains/simple-chain.svg new file mode 100644 index 0000000000..e391bf8e03 --- /dev/null +++ b/layout/reftests/svg/filters/svg-filter-chains/simple-chain.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="blur"> + <!-- Blur the red rect. --> + <feGaussianBlur stdDeviation="3"/> + </filter> + <filter id="hue-rotate"> + <!-- Turn the red rect into a green rect. --> + <feColorMatrix type="hueRotate" values="90"/> + </filter> + <rect x="20" y="20" width="100" height="100" fill="#ff0000" filter="url(#blur) url(#hue-rotate)"/> +</svg> diff --git a/layout/reftests/svg/foreignObject-01.svg b/layout/reftests/svg/foreignObject-01.svg new file mode 100644 index 0000000000..68d4072f4a --- /dev/null +++ b/layout/reftests/svg/foreignObject-01.svg @@ -0,0 +1,17 @@ +<!-- + 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"> + + <title>Testcase for foreignObject</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=367366 --> + + <rect width="100%" height="100%" fill="red"/> + <foreignObject width="100%" height="100%"> + <div xmlns="http://www.w3.org/1999/xhtml" + style="background:lime; display:block; width:100%; height:100%;"/> + </foreignObject> + +</svg> diff --git a/layout/reftests/svg/foreignObject-02-ref.svg b/layout/reftests/svg/foreignObject-02-ref.svg new file mode 100644 index 0000000000..999e278074 --- /dev/null +++ b/layout/reftests/svg/foreignObject-02-ref.svg @@ -0,0 +1,20 @@ +<!-- + 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" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that foreignobject works in filters</title> + <foreignObject id="fo1" x="150" y="50" width="50" height="50"> + <html:div style="width:100%; height:100%; background:lime;"> + </html:div> + </foreignObject> + <foreignObject id="fo2" x="150" y="150" width="50" height="50" filter="url(#f1)"> + <html:div style="width:100%; height:100%; background:lime;"> + </html:div> + </foreignObject> + <filter id="f1" x="0" y="0" width="100%" height="100%"> + <feOffset/> + </filter> +</svg> diff --git a/layout/reftests/svg/foreignObject-02.svg b/layout/reftests/svg/foreignObject-02.svg new file mode 100644 index 0000000000..fb02d375bf --- /dev/null +++ b/layout/reftests/svg/foreignObject-02.svg @@ -0,0 +1,31 @@ +<!-- + 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" + xmlns:html="http://www.w3.org/1999/xhtml" + xmlns:xlink="http://www.w3.org/1999/xlink" onload="m();"> + <title>Testing that foreignobject works in filters</title> + <foreignObject id="fo1" x="50" y="50" width="50" height="50"> + <html:div style="width:100%; height:100%; background:lime;"> + </html:div> + </foreignObject> + <foreignObject id="fo2" x="50" y="150" width="50" height="50" filter="url(#f1)"> + <html:div style="width:100%; height:100%; background:lime;"> + </html:div> + </foreignObject> + <filter id="f1" x="0" y="0" width="100%" height="100%"> + <feOffset/> + </filter> + <script> + function m() { + var svgns = "http://www.w3.org/2000/svg"; + + var fo1 = document.getElementById("fo1"); + fo1.setAttribute("x", "150"); + + var fo2 = document.getElementById("fo2"); + fo2.setAttribute("x", "150"); + } + </script> +</svg> diff --git a/layout/reftests/svg/foreignObject-ancestor-style-change-01-ref.svg b/layout/reftests/svg/foreignObject-ancestor-style-change-01-ref.svg new file mode 100644 index 0000000000..0896a08062 --- /dev/null +++ b/layout/reftests/svg/foreignObject-ancestor-style-change-01-ref.svg @@ -0,0 +1,27 @@ +<!-- + 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"> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=381285 --> + + <title>Reference for foreignObject-ancestor-style-change-01.svg</title> + + <foreignObject width="100%" height="100%"> + <div xmlns="http://www.w3.org/1999/xhtml" + style="width: 100%; height: 100%; font-size: 16px;"> + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + </div> + </foreignObject> + +</svg> diff --git a/layout/reftests/svg/foreignObject-ancestor-style-change-01.svg b/layout/reftests/svg/foreignObject-ancestor-style-change-01.svg new file mode 100644 index 0000000000..be4e9749eb --- /dev/null +++ b/layout/reftests/svg/foreignObject-ancestor-style-change-01.svg @@ -0,0 +1,45 @@ +<!-- + 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" class="reftest-wait"> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=381285 --> + + <title>Testcase for style change on foreignObject ancestor</title> + + <!-- + This testcase checks that foreignObject content is correctly updated when + a style change that requires layout changes occurs on an ancestor. + --> + + <script> + + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + document.getElementById('g').style.fontSize = '16px'; + + document.documentElement.removeAttribute('class'); + } + </script> + + <g id="g" style="font-size: 26px;"> + <foreignObject width="100%" height="100%"> + <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%;"> + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + Padding text. Padding text. Padding text. Padding text. Padding text. + </div> + </foreignObject> + </g> + +</svg> diff --git a/layout/reftests/svg/foreignObject-change-transform-01.svg b/layout/reftests/svg/foreignObject-change-transform-01.svg new file mode 100644 index 0000000000..6f165dc254 --- /dev/null +++ b/layout/reftests/svg/foreignObject-change-transform-01.svg @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:html="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + + <title>Testcase for changing the 'transform' on foreignObject</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=369911 --> + + <script type="application/javascript"> + +// The foreignObject is inverted so that it is outside the viewport. +// After the rect has rendered the transform on the +// foreignObject is removed and the green div should fill the viewport. + + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + document.getElementById('fo').setAttribute('transform', ''); + + document.documentElement.removeAttribute('class'); + } + </script> + <rect width="100%" height="100%" fill="red"/> + <foreignObject id="fo" width="100%" height="100%" transform="scale(-1)"> + <html:div style="display:block;width:100%;height:100%;background:lime;"/> + </foreignObject> +</svg> diff --git a/layout/reftests/svg/foreignObject-display-01.svg b/layout/reftests/svg/foreignObject-display-01.svg new file mode 100644 index 0000000000..dfdbc0eca2 --- /dev/null +++ b/layout/reftests/svg/foreignObject-display-01.svg @@ -0,0 +1,30 @@ +<!-- + 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" class="reftest-wait"> + + <title>Testcase for removing display:none from foreignObject child</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=281260 --> + + <script type="application/ecmascript"> + <![CDATA[ + +function doTest(event) +{ + document.getElementById('div').style.display = 'block'; + document.documentElement.removeAttribute('class'); +} + +document.addEventListener("MozReftestInvalidate", doTest, false); +setTimeout(doTest, 4000); // fallback for running outside reftest + + ]]> + </script> + <rect width="100%" height="100%" fill="red"/> + <foreignObject width="100%" height="100%"> + <div xmlns="http://www.w3.org/1999/xhtml" id="div" + style="display:none; background:lime; width:100%; height:100%;"/> + </foreignObject> +</svg> diff --git a/layout/reftests/svg/foreignObject-dynamic-abspos-01-ref.html b/layout/reftests/svg/foreignObject-dynamic-abspos-01-ref.html new file mode 100644 index 0000000000..37bd9b6f14 --- /dev/null +++ b/layout/reftests/svg/foreignObject-dynamic-abspos-01-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<div style="height: 100px"> +</div> +<svg width="200" height="200" style="overflow: visible"> + <foreignObject width="200" height="200"> + <div id="x" style="position:absolute; top: 0; left: 0"> + This is a test + </div> + </foreignObject> +</svg> diff --git a/layout/reftests/svg/foreignObject-dynamic-abspos-01.html b/layout/reftests/svg/foreignObject-dynamic-abspos-01.html new file mode 100644 index 0000000000..583ba42031 --- /dev/null +++ b/layout/reftests/svg/foreignObject-dynamic-abspos-01.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<div style="height: 100px"> +</div> +<svg width="200" height="200" style="overflow: visible"> + <foreignObject width="200" height="200"> + <div id="x" style="position:absolute; top: 0; left: 0"> + This is a test + </div> + </foreignObject> + <script> + document.body.offsetWidth; + var kid = document.getElementById("x"); + var parent = kid.parentNode; + var nextSibling = kid.nextSibling; + parent.removeChild(kid); + parent.insertBefore(kid, nextSibling); + </script> +</svg> diff --git a/layout/reftests/svg/foreignObject-dynamic-fixedpos-01.html b/layout/reftests/svg/foreignObject-dynamic-fixedpos-01.html new file mode 100644 index 0000000000..fd560c2263 --- /dev/null +++ b/layout/reftests/svg/foreignObject-dynamic-fixedpos-01.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<div style="height: 100px"> +</div> +<svg width="200" height="200" style="overflow: visible"> + <foreignObject width="200" height="200"> + <div id="x" style="position:fixed; top: 0; left: 0"> + This is a test + </div> + </foreignObject> + <script> + document.body.offsetWidth; + var kid = document.getElementById("x"); + var parent = kid.parentNode; + var nextSibling = kid.nextSibling; + parent.removeChild(kid); + parent.insertBefore(kid, nextSibling); + </script> +</svg> diff --git a/layout/reftests/svg/foreignObject-dynamic-line-height-01-ref.html b/layout/reftests/svg/foreignObject-dynamic-line-height-01-ref.html new file mode 100644 index 0000000000..c69fbd2361 --- /dev/null +++ b/layout/reftests/svg/foreignObject-dynamic-line-height-01-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <svg> + <foreignObject width="100" height="100" style="line-height: 3"> + This is long text that wraps. + </foreignObject> + </svg> +</htmml> diff --git a/layout/reftests/svg/foreignObject-dynamic-line-height-01.html b/layout/reftests/svg/foreignObject-dynamic-line-height-01.html new file mode 100644 index 0000000000..6eed65e7a3 --- /dev/null +++ b/layout/reftests/svg/foreignObject-dynamic-line-height-01.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <svg> + <foreignObject width="100" height="100"> + This is long text that wraps. + </foreignObject> + </svg> + <script> + onload = function() { + var obj = document.querySelector("foreignObject"); + window.w = obj.getBoundingClientRect().width; + obj.style.lineHeight = 3; + document.documentElement.className = ""; + } + </script> +</htmml> diff --git a/layout/reftests/svg/foreignObject-fixedpos-01.html b/layout/reftests/svg/foreignObject-fixedpos-01.html new file mode 100644 index 0000000000..eee77e4da5 --- /dev/null +++ b/layout/reftests/svg/foreignObject-fixedpos-01.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<div style="height: 100px"> +</div> +<svg width="200" height="200" style="overflow: visible"> + <foreignObject width="200" height="200"> + <div id="x" style="position:fixed; top: 0; left: 0"> + This is a test + </div> + </foreignObject> +</svg> diff --git a/layout/reftests/svg/foreignObject-fixedpos-02.html b/layout/reftests/svg/foreignObject-fixedpos-02.html new file mode 100644 index 0000000000..c4047625c0 --- /dev/null +++ b/layout/reftests/svg/foreignObject-fixedpos-02.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<div style="height: 100px"> +</div> +<svg width="200" height="200" style="overflow: visible"> + <foreignObject width="200" height="200"> + <div id="x" style="position:fixed; top: 0; left: 0; width: 100px; height: 100px; background-color: red"> + </div> + </foreignObject> +</svg> diff --git a/layout/reftests/svg/foreignObject-fixedpos-ref.html b/layout/reftests/svg/foreignObject-fixedpos-ref.html new file mode 100644 index 0000000000..da29d249b4 --- /dev/null +++ b/layout/reftests/svg/foreignObject-fixedpos-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="height: 100px"> +</div> +<div style="top: 100px; width: 100px; height: 100px; background-color:red"></div> diff --git a/layout/reftests/svg/foreignObject-form-no-theme.svg b/layout/reftests/svg/foreignObject-form-no-theme.svg new file mode 100644 index 0000000000..8ee6bb71d3 --- /dev/null +++ b/layout/reftests/svg/foreignObject-form-no-theme.svg @@ -0,0 +1,14 @@ +<svg xmlns='http://www.w3.org/2000/svg' width='500' height='200'> + <foreignObject width='500' height='500'> + <div xmlns='http://www.w3.org/1999/xhtml'> + <button style='-moz-appearance:none'>this is a button inside of SVG</button> + <br/> + <select style='-moz-appearance:none'> + <option>This is a menu inside of SVG</option> + <option>a second menu option</option> + </select> + </div> + </foreignObject> +</svg> + +<!-- Bug 686581 --> diff --git a/layout/reftests/svg/foreignObject-form-theme-ref.html b/layout/reftests/svg/foreignObject-form-theme-ref.html new file mode 100644 index 0000000000..6ef303e005 --- /dev/null +++ b/layout/reftests/svg/foreignObject-form-theme-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html><head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>Testcase #2 for bug 686581</title> + <style type="text/css"> + + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + + </style> +</head> +<body> + <button>this is a button inside of SVG</button> + <br/> + <select> + <option>This is a menu inside of SVG</option> + <option>a second menu option</option> + </select> + +</body> +</html> diff --git a/layout/reftests/svg/foreignObject-form-theme.svg b/layout/reftests/svg/foreignObject-form-theme.svg new file mode 100644 index 0000000000..d6e7190dd3 --- /dev/null +++ b/layout/reftests/svg/foreignObject-form-theme.svg @@ -0,0 +1,14 @@ +<svg xmlns='http://www.w3.org/2000/svg' width='500' height='200'> + <foreignObject width='500' height='500'> + <div xmlns='http://www.w3.org/1999/xhtml'> + <button style="-moz-appearance: button !important">this is a button inside of SVG</button> + <br/> + <select style="-moz-appearance: menulist !important"> + <option>This is a menu inside of SVG</option> + <option>a second menu option</option> + </select> + </div> + </foreignObject> +</svg> + +<!-- Bug 686581 --> diff --git a/layout/reftests/svg/foreignObject-img-form-theme-ref.html b/layout/reftests/svg/foreignObject-img-form-theme-ref.html new file mode 100644 index 0000000000..c78c1e0162 --- /dev/null +++ b/layout/reftests/svg/foreignObject-img-form-theme-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<html><head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>Testcase for bug 686581</title> + <style type="text/css"> + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + </style> +</head> +<body> + +<img src="foreignObject-form-no-theme.svg"> + +</body> +</html> diff --git a/layout/reftests/svg/foreignObject-img-form-theme.html b/layout/reftests/svg/foreignObject-img-form-theme.html new file mode 100644 index 0000000000..e7dac89993 --- /dev/null +++ b/layout/reftests/svg/foreignObject-img-form-theme.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<html><head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>Testcase for bug 686581</title> + <style type="text/css"> + html,body { + color:black; background-color:white; font-size:16px; padding:0; margin:0; + } + </style> +</head> +<body> + +<img src="foreignObject-form-theme.svg"> + +</body> +</html> diff --git a/layout/reftests/svg/foreignObject-img-helper.svg b/layout/reftests/svg/foreignObject-img-helper.svg new file mode 100644 index 0000000000..dde74111ae --- /dev/null +++ b/layout/reftests/svg/foreignObject-img-helper.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <foreignObject width="100" height="100"> + <img xmlns="http://www.w3.org/1999/xhtml" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1%2B%2FAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMTAvMjEvMTOQGbMAAAAC8HByVld4nO2a3UtUQRjGXz%2F6voluDDL73EAJQQIt9iKSlYqoDIpYWSUvbIOsVjOtVCzrRjEy0LUINy1zV9ouAisQyQsxRAu8iK4WCjZ2z8a6%2FQPR05xJ4Sx1UWzMHJh54GHPx3B%2B87wzZzgMO%2FfjzTfykQ8AgbwwQq0Y9beCiPChoxz%2BOy38%2BGV9Kab8PlBRObqLiLVr4m0zcTx4DbHRFkSHGhB70oTbFS4YhvFPvulyITbcgOjgBcQeX0Z8hPUr2Jyxn%2FVeYln38OwHmSM9J9Lufx5pxnyAtSnYj4maAn5tuL%2BJt19oLePnzhoPLrJzI%2BhlxzX8OfO9pzHf74XnnBtO817Ak3Ffzcxmdl4DVguzJn9bP9bfyqFPrxfazTr2uRG9dxKx%2FirE%2FVUwBjz%2Fzd2NxxkrDx4zc99RTPV4UFhawutVuIn478SpfN42wkzF%2B%2BAvJswOuNm9nZiu3bZ0vZS3XXYhM3%2Fm3cMZ9Y8EKzF4BlaL5jvdR1BNOXR2SURZAvWnHmm%2BJH7lL4vn59ojv8L8LFo4MLmWDjEL5qct4hLy24FPCue3x%2FxXnZ%2Bt7PyzA1%2B%2F%2F7Lnv%2BaTpO%2B%2FVZLzb5bMX2Gf8ZfCX22D%2FCsVrr%2FmE6Xvg4nl%2F74PJ4O%2FRunx13wuafs%2Fyb0zYRvk13zN13zN13zN13zN13wB%2FO%2FZb8My%2Bfk5cvn1ZTNS%2BbLHv01y%2FU0Nrbu1RdX6az5RItyJZYvm1%2B1yROIjV%2FBluBHx4FXh%2FMRYGxJjGwhmLXLF19%2FkG6HrPLtZA%2BH8UAusVo0v%2B%2F1L3K%2BG1arxvwZqYbVqfNnzb%2FHpeVitGj8VbobVqvFlz7%2FUeAeslslX8fsvNdkFq0Xzk686YbxoR3L8Bo45HBHh%2Baf7YLVq%2FGXt3pjX5fe5U8Lzv38Eq8XzA0i9G8Ti3EMkZx%2BI5398DqtV48te%2Fyp2bI9YrRqfaX26leNLnX%2Babxv%2B0v8%2FtLS0tLQUk17%2FtZRXJdWSl%2BpoK5XI7oqWBP0EUXzHivRvgJoAAABIbWtCRvreyv4AAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACmkM6EAADkmbWtUU3ic7X1Zd9tIki6muly2LHmr6tPzMC86Z%2B4992mqsXF7FElRUpcWNkHZcr34kCBR5pS8jCyrysOD%2F34jIjOxJBIgAHFzG1YVk8Sa%2BUXkF5GRkcDZL%2B27%2BcuBM5uP%2FJeDs9nc8HuDTqQY%2FPN8Np80GmajZfpXpx1vrvuvWfHqpOvNDV33j0%2BG7Mvg0PHmDdMfOJczOKB9BJfwPF3H%2F%2F3%2B6endvN2Hj87B8NNc29HGmqu90fraVHsP32batX9yfgZ7HsOe97DH0P4L9s60P%2BGIa3%2FQvRjjRQ%2FO6doHUGdr2vTb3ROsZ%2FsMKu9BQU1pO4d0kNOjfc4xFe1T2tj%2BhYrOOb%2FAYY9%2BD4Z0UK9Nv3oDKs7ZRqc%2Fm7fqfnvIdg7Z1YcOu8kZux4rTg6wludYK93vXhizeRMKEy%2FTvbCo6MFGEwqTFRYWfi5k%2Fl2FjLavHcDWW%2Fj9X%2FDtGsqR9gn2TNaJmXFPzIxVYbbLMTvSbgCXj9pb2HerTTOxsRk20wxsdCU2rhvDRs%2FAxm0ybCyzMDqGzeAZMXhGDJ4mg6fJ4Gn6Tv9XuMvYdxxe9i8AtdoINvAv%2BQB8wQHsaB9AuT4AjKBaoHTRI6NgwoUJTbOWheYoB5qSpmWhKWnaaLm9kyCs1xUQOv022%2BOwMgrpIw5pm%2FrjTHM5oM84oA6A6YEu7msD%2BPYZtk0W9lolloZnL7ffWm7Jfjsq2m%2FTMNrjGB3D9htSt1PY%2B35V%2FbaAHSiAjb4abJ4lsLmn%2FizZUm4eob1EDyutPXLfKqI%2FG%2B5bgtK7hM5b0o24BkX2kD5N4fed9uWrZCAjbhtrDKYag2nEYBoxmNSWLy9MobJlwWRuN0xLVKadAKUP0NVu12jCMh0C1y7Zz3QGjc6g0Rk0OoNGZ9DoOaF5mtLPiLeLq8%2FGLVmW8tQYQjWGUC0nQs%2BVCA0Bnxn46tcLGHtbO5m19E6mxqlLdn%2F81eJklsRpj%2BN0AFpyA9a9DZ%2BfERdpzDcEnP4ESvrMBi2ZGFlKkGh3KkhGi8NkjrMGfjTEKzv0U7pIJoPKZFDZDCqbQWWzkZ9htuJDP2wKjVtgQxEwH3Ew89k9VIIIjHU7D45C2Zp2ARQn93Qz82AIXSQXhk85hh3A6JpCML8F4YYvkp1EHN%2FB9w%2Fah%2BwADTeUhpXbWTd0u7ilrOkMR%2BIDRNLLGj3HbaXZzI2l1eTjaMuYFMYuWwcbEwZd02XITZdkPPUs42mWdC%2FyQVYWoH9C153hUTGA7BoDyBhLuiWifzrDyM3qpKgWi3WL%2BnAEpzp3w0ipVgBUUreCjlq2gw5g75g66PtMNTNay9Wz5Q4XV6NnP3CMXoE9vVWi05BUTHI6skbTeGoMH3Pj%2BFB8j4Ko7QTp7wZ4vSWP3gWNGSXizkV8EDVmFEhN53zXLK5VgQdSMxluhunmtp%2FGNDdyzF7CF9MrAJ3oiB2CDK1ldkhCgo3aolA2CbeGWxw3m4eZR1zdrImdG7byfNYWQWdupfMj%2BTAeCCuCItmChcMEwppQRO8sJ4r1Kfc4SOkOefR%2BqSgOADxzOoUv7aQxyKd9ffI1bhdPPkra59k5HDXPLgGbMKVc%2BagTL1%2F3UOUcMYBAW8pGEuJLrFvTl4FCLXcCiNGCfCFbGvdUhjQT52q%2FFwGXxlmLwM3nqKixJUyxY4%2BXrpIELgGHujn2mJIGKDPc2dDCGRwnKDMd0YeB3zLSfl8QCWgyOFsMTnLWInDq9w2%2B2QxN1rGRtprc7aORMuKJs4MIqJkBaI2H4MDBYhGBFoO0zjGtc1DrHFVGjgLV2BydANNTx3zT1TPfaNctrp0lfEChnEk0c2inZaq0s86R5ECm4Rh0%2FRSlFEzao0QEnGgZYuBOip%2Bfkiv5lvafEeOCmmo3me6jq4zGmBneY2iKShj0JbmP9cQcfFQZQ2uO%2BJI1b04L4PkwRp3vlzvRlzOWpS8nwSMvfFGw5JSFbLCisXdUuHTVS%2BHIIp3aqE3zhLDWrHttEcFKH7tkY3fMO%2B510IFl7ESyB41CyGDrMQvDxi4JC6OrKJGcorxBq9FKsYtC9QOH6kKRouYAJGhBcOr9Ux6lEsE8ERc1RtP7xkU5MDXJ9MaRwY7qUH5fuqWo86lTmkK1WIngwBCb0KHSopJcF0x7GQxQboFtcDCVULIRKvx2A%2FxwkmfE5w2zu%2BVIOTzJY2on06yAlTtSDo2DwUlmODTFccmJILmDyZyiwQXvuP1BiLI3YujKg5ks9WzTPBoOYhbNEI2KmguBLfrJi1TTklRTONliAENmPeETGjmCDriVZol4zzWbDFhyVw4YaIgvgXhMlEsgGotV9EUEQxweYp7NWtQVh6051NXkoLqmpK8THslhA9EFGgu8wGBtclybDFiXZxO6HFi3KbuIpKjii1qH2RcxTERlJn8StZkNHHOq80%2FqUBqfq8qn4I2SCp7LG%2BLDHm8kzaRw8rXHMf22VfotyFcWRI1nHtR46gGU8ek9NoAcMPp1Blz3%2BW%2FUecNT6vwTDvQr0ucpD4NQgqc0FMqXFyTNnwaGP980M8YhC%2FqcgcITv98rdqlMnQ0CIeFoiJwp8WVwETGBOsNaygBdjHERl97jLoQXdyG80ZJo%2Br6ulRpbUxUHYT59lD2C8Ic8PZhfT%2FNFlMymigmYl79ELRVjdksE2Gv5lVTto1oqICn1OC05WRXxGHBv9YP2TvLFML%2F7vebhxA4uJlCBaNRsBmI9roqjAppYV2KoqzBkYY4yU%2FwCwXiGvMkhpNKikvXeOu%2B%2Bsu6lgxYOAP4HzNGIDFL2AKBWdrKwgNIxwxPxsAoE1sFIKYNuuL3Ht%2FfYdnKtREqE0eCc2GBmSJgf8lePmX3Kh6ngwteEZzYXxjtxrpi7wDPPGg1u0MfKHELJnCu5MG0slRbCjM%2F4IG6Eo5MYuC%2BGj%2BVhZiujpVJGafZfrY16fvTIBUjCN7YXR4AD%2BCRlRJvPtNHkQyn8whyi5pQ7RPilL7q1I1RxIMw2Gwbkw1RMd%2FfQ51QhOrZj3r4gxCKj00x9JAxVkXX18J5jaqkwdZtqD7PFgx8tHgxu1cMOPhCh33bYsUUoOCWN7BIAe0%2B2%2BjOFRoQT%2FzcO5Uty2F3KXPxEa9cwuoRLifZpyg3z9LMnKpWhYTbpmzfobi0erbpx5SU7nhyr2oXCANwXsnhSI5SkunxOiI9dmf5y4GPeJlFuxNNvxh39ggIRJswCxtjXjsil%2BiN7Mk5JG%2FlS%2BwTyxmLecJW0YUxVKm7kAt5sKsIEx8wNLQLZk8DT%2FEAk%2B1b7KCaJs4FbXgJulso2lTlp6PBGgDOLhP7SgGNWykl6THmV7gK231LPX7QqZxlKV8s%2FdpeUrrXY1IsJNsnXXJLK7QXe%2BVvKhMFw%2FTSRmiaDVi8bzjPyh%2BCDcbhVLz4rKcaKi5awHoshzXFySLMIuheB8b6mrMiiETz1FOT92Y6ShiIhvJFa9ab5I%2FaySVcqnzAtgyAOl%2FSEFkH6ILQZJRLZGkWgy8F3daV7DgOR0hZ6Wb32acRQ%2FElBiX0KYBQ2FZQfVGAhQgCfvXh4XfqJBjh%2BztF5Kb7jNhSZBDQzSRvEF%2BHH9PnIB5vIYsSRoZAcK85LAIFbuXoCSOQeKT1Nq9WMB%2FE9pSar50Wk9A5Xrckqr15%2BIEAYvudufTR8zLgCGtioMfQxtun3Trt38150Ba5HInAoJjeLLAr0CPpzemDAOxLKZeoeLoQeg6DHun%2BPNb13SBrbG3TpkMGA7TtmxRUWfi86lmMV4gt%2BMZQgVSm65zJ1T7kqmaxKUBwFNXoB9XGDB1BM%2BGDnNvI8hU%2BBe%2BnyKSfUUFf7HThDPK6id%2FQSgD%2FvsIufwPejPj6FpScesoL%2F%2FMguQ%2Bxi%2F1B2R69xn37%2F6xglLyF2wW%2BCzo%2BJbpeLrkMLkVzozNcK8Q04iEmNiu4pJz6Lic%2BqxFdCfE%2B5%2BAYAkAuNxljKb5IQnwaiUh1zmeOYcoIdMcGOKsGWEOzjoF%2FiBAE6M9HxnBeZPBD7LjP2lROgzQRoVwK8R89kgril0NuNgE3qmepjLnMccy%2FKNYxKsiUkG7pfI3oAWJjF7PHpKbH9MmV7OanVmNRqldDuIbQ%2BuZtuZKG1x4crYvtlyvZyQmswoTUqod1DaD0CZhLAIoQTbr9M2V5OaE0mtGYltBJCe8KFdsjXs34k0ov6L0%2B4mFRHXC48opxIW0ykrUqkJUT6kIu0TUkCn4K5by9YtXMT9EF5azlxuUxcbiWuEuLaCQaF2HPYE33k8Xy4Rx7Ph3vKiW7CRDepRHcPi%2FeKkj%2BnCYsXbr9M2V5OaFMmtGkltHuM1fthiDsYFDwO%2FMjovsuMfeUE6DEBerGK7QXaNNXGWpck8pYi8GKeU2iPvP9ywf5ylTR49BjLrhEBttc1Y7%2Bs2C879mvIBHBEQfEy2rrDtdWhh7bcUXtCLa2rVKNltfRWTDX0n82m2Gub%2BBffa9fE3nFtbI2N%2BN662Fmnf%2FGdjeDUyRT%2FlBrZ1PEv2Tm%2Bvuovr0%2Fei7sCxgpZbBF3CWLJrtxi7sp3nS3B6Rvi%2BFI4PeY4RZ5kAfsW8AvrSWkdFLtKXD%2BiHbRel7Un0kHxxIaX1kHZjVMAbcB%2FOfllq6u%2FYX14xvUBUzA%2FUB7RrXbB16%2F%2BtrjvmC19VGultdHNzTH5rrMlfWdAK83alEK0ECF2d3W1Wro%2BNnOzcJ7rbIk2MYSOaAkEHpvEysrXRv3nWlhFemdIWu1VNL2qm2wYZeEh4h4cDMc9RFtVqVbDrhujeKOtAJHxpOnW4jubwd66a04NNY1NvcnYnSRx30wVNiyVpxGpjDEUSLlFSc1Xmihdt5qymQlNlK6brVEjzURB56%2BnmijVqY2MUw25Rrks7FZXf8N68ZzrxSFl6lIuGqWdBuy4SDdM3XJlwgrBNcathjFOA9eY2p5dSwG3Ppq6upEGbvLChlyjXLqx1dXfEt3gLMHt5mvyytnaiwUWU5h%2BpTHLcBngn1KCq7rJhnHeDWIqH3kGET7P%2Bt2inqdyFczozsS4IcJbowxSk50MMHYR0NI8EFGdXN1ue%2Bu%2BYV14IfW5SG9b5Kf%2BHNZlDCCN0rrExIPd8Z0t%2BczMnrfkGy0xrnzY697ND3uR6dQp4X5C%2BdZo39rweUdPyGR4%2F0iSwL73LlgixY6n2CZ%2FO8hh37mbdzuH%2BPELjSQONY9WnmNvPdE%2B8UWCM%2F5qg27nJRz1Pe%2FJU9%2BPnLsbO%2FeMHtVyonX5Of9Xm2sN2lvXDPjTNVP7L%2Fjuwhb8htsm9Dq9JmxrwB6d%2Fmp0ZAM%2BDdiDv%2FzYXXfClmtD7QsyDb%2Fjv2l67MjHkSNf0SIUwIQf%2Bx3WKHb0k8jRIsvqhkVvgnMaWk065xCuCuN3egACLUSHkrIOUur0hF4Y%2BBtFAMQrkt7TeZ%2BCM6zYGXv08LRP2u%2Bpx8t3CJ%2F51%2BVPaBlR8orA6S8kDRmr8KyghpHjLanlO1CbaxoXTRNSMGNHPosceUa5pLf8BSMzGlGJswzpLLZMLabpIcvwsx5q%2Fwn4e1xz4i16Squx%2F%2BCjYuwbk8T5O3C%2BHvmzNE%2FC8phim9lX8CJ%2F8hV26QrXPKasqn%2FkbOlMh9adTagVqjMjNZewO%2BRvOQAt0XoUp03eW257UiMc0uU%2FQBJj7b9ZL%2BfnPoDaon%2F9KcEIbZLaLfUfhzTvNrV%2FvhArX%2FmRN6kaK5%2B5E5wp92v5yP8HSPwO9e%2BRFKYU4b%2Fh0riAe1yD7rKnG70DnfxAPf4GtkWZ7RKOP2crAPlddiM8vB9hYiLuApy9wzn7V%2Bp7v8I9fqsYumLolTO0VTF0xdAVQxdg6IhXXTF0xdArZ2iZayuGrhi6YmgVQz9O%2BtAwAq04uuLoVXO0XXF0xdEVR%2Bfg6Iecowe0jK6KcVTsvHp2rlXsXLFzxc4FYhwDQA3vh32uYuiKoVfN0PWKoSuGrhi6gP%2BMj9MEpCp2rth55ewsc0XFzhU7f8vsrNDkKvMupd9XnF1l3lWcXXH2Kjg71M77cPa3l3lXMfQ2MHSVeVcxdMXQRRj628m8qxh6Gxi6yryrGLpi6DwM%2FS1m3lUcvQ0cXWXeVRxdcXQejv62Mu8qdt4Gdq4y7yp2rti5SIzj28m8qxh6Gxi6yryrGLpi6CL%2B87eReVex8zawc5V5V7Fzxc4hO3fhKNT%2FiDyD52Azdg7fRvAmdtR62XoE%2FNbSbPibwPWaS2HrbC2WdXAkZYA9jp29KM86eix7QmPILrbEDdFj03SukdGSJEdagEBtLbon9Gk%2FpitFdU94BtyqfHO6VpdGEcvTtWZhXUNvxPyKte0p17ao3ZE90Udc3zCvGOzGv7wvakkak%2B6LynmvX68nKrej8kQrT7S4J2pIfbvyRNP5eS%2FkU2DoCNr3YOgB3GFGiP5rM7Tsa1YMXTF0xdBVrGC5DP0k5FNtksnRz2JS3Kd2sTfAXEfGbXuxVX%2BbixbUOAd7xL7I0Q34s%2BF4wdYWfMM3HGH9hN40id89GvchZ98vWlBTaGEVLUj6ByptKaN7z8iuXFM%2Fil1N%2Bxn%2FEhq4WIvGWgsk6cIn2u4p2XybeFpoEcYGUIc80DEhdzy6Cb9R9yZwvL8GJBe1PVqD%2F4C2tuEeHtWAWaY3cK8bsk5oy%2F6A37dB%2FbBP%2Fm9wpwfU9n38jF31gTaS9Og7aHtcix5pk5wRhgewN9s%2BEcuX0JLHMZ0T%2B9bLTiYxTxP0A9pNTIT6ghpUnp3yeH11SR6LPTI5FzSvL5Nmi1djKe019DC13sQ1cA%2B4dAIexmdqz34EGaZ7P0TXrZfgownoSA3kj1rTovEGWrcJyFUegzQDNkLrh3ZvAv%2BjX9haCx%2FFW7oi9imE%2Fd%2FgrjfByIDrufZ3ua%2BUthUWoIzojqmnMj%2BjBdgbsT6N%2BydwFZ3sic7liDKskczWIZtiSMR771hx5hu6%2BgdA%2Fn3ANcmxkytdPc9Zm9KVHRhDCnb7VFojkKVt2O%2BRPjAf1AAEa4ream60t6raG%2FcxP5Gkbmj89Ybz8Bv4%2FZs2TpV4%2FJy3XG%2FiZ%2F2FGE22ShPSrNucd3oSOT7%2FXXZgP2LwDj7l6xs5Wz9NjY5ktT48K3%2Fr0%2B%2BU1vrsu8itj14%2F3vrnKa3%2FTRNv%2FkwbE6chIJ%2Bpqt9TBQqL7vhMiUSeu%2B3G0EjeR47oqBEZa%2By9e%2BrayTiGNYyfp6rfEwUa2Xd7qsRi8Z0ex5CQ72FsBTu%2F0I7pnYd%2FBx8SozKfieXwPmhhlmO%2FJ4H9NrfOfudpf1ymb%2Bn4PBYXe23ymnnOfE6jz%2BKewR6ccU3HBiM%2BSU%2FUEbrN%2BQYdQueO2rgcbZsG2mZtnbap2hvXLrKdhP0HbUY%2B3if%2FqA%2BAHvWHd%2FOr0w6%2Bp%2FM1K%2Fxwm1mrsa34xU9cE%2BORy7zmXsjrS73urmDJpV51U9q9C%2Fs%2FU9R7P%2BoT3tv7NQLv19467zetzZUHXHnAlQdcecDb5wE%2FDrfAXsaG12uOYU%2FIC7EpQu1S5HpEuQ4tKYaNXs0olg9Bc8uUWTldC7%2Br0Yre90HqfLYqhv0Q6vKR5qKxZl8CXUrmIuxE5tvRD57EtTUm8wdwVXy26TQi5R55E2xelmVnlLHEHuWk6CAJxB2trkdzVOFcqE6WGOWxWUusbvE6elwS%2Fec8HiqeMrvPPYQDuPJHnGcqIQmTZGBSzxnRyNKF0qZZxKhPVKOZnnw5RKuRxOLWr0Mq3wdz30wm4e8yvcCAfR7ZHjvwR8XYa5v80bCVm8B4R%2FyGo8%2BozslMu6Jom1uMtqq9m8D9uXYE9fpMcZMZzYXuBzVbzgyEHozBrK2TwuLWR%2BvwV%2FLRokcLT%2B2GfPkR5Rl8Duaxf4QW%2FUwWMP2vvhGpPyW5iTjb%2FSVeA4k1yVbUAZE62XqPzxDb1AM98tQMymupUX4LZrWit9%2BkI0Zr8sqyW74iWcRGZ%2B8i94%2FqTzKPpSX5dX9NPTc9v0X295KaMOB6i9HOZfR9ZGCLcrkYA5t0%2FSZpAs5L10gTsId7pAsT8k5sYgOPer%2B7Jk3IavnqNeHHgDHw%2FnFNkKPX3wFCcV34KfXs%2F4FypF3HRgnfIc8u0IQ97VcNn8n6bgla0OJr2JAB6kFM2SQ7jOvbxsQHyBh1GsuNiQs8Gt2ZNIZD33MdWpDe6tVrwHM4ht27qPRfKM%2FMK%2FmHPGPthnLK3wdrH%2BNbi0vdJWuOYzzMNGMjPrYuITnia2zU7sttXYcNVqO%2BF996L%2B%2FXoHxQj6JLLE%2BrRb2wkfC7RH7fpvBPb%2FXmJPEM6vme1p%2BwPftBlmJZFoyPRuwtHo0savvqufAnYrywBm8oEvqJVv8vw7POur6KcWsS4%2F4t4%2FzbrLVLUrznnObqcFZZ9P8Dsnr74Z7S%2BjYlzdEpV3dMcTaXdMoiq%2BvyERh%2B1mhFksj%2BRVs7JYuNPtl6%2Bn9aq%2BP2cURHvYH7iKPySesn5ZmfeSnneK97rv%2BhxtYdxjPExXPjzglF1K51x9bXvdYwnj%2B9%2FCcTyXnneVYbGtIZi1Ybon9VLLs9ueqgWnEo5s6qFYff4orDdaz5%2Bj5l7YSai8VzYI4Jsw8VD9%2BTh%2BVztoGHZb2rWLhi4X89Fm7mZuF1rGZLY%2BEfAOVr8uon0D9FvjW2iV3thrQIpbEfO1Lm5R3q718UPj7KvUXjG8xCaBXOOjEpZoV826KRVZ1i1mHWSZNGVjir0dKiK3Lxf4%2BOXc%2F8Rh7UVj%2Ba34W7ivuly6JFkX8rhy78sBGpezSDafNYmctj161ILilbh62DXmx2HfYPX5F8f6Qsmy9cK9lq6S%2Fw3eYIYjbsYTAmPqP2k1d1jzmpJlnuKcmFxaWbNFMZjUvXKf%2FFotlI%2FGS%2FsZzQtvVkBSTbu46IRBGZRD0%2BnDNh1nJTsmmtjVmz2r1tMnomzXIPqY14x831odrankmR3fZ1yOonylibaWxuw4FWzvg39N%2FRt4tK61GYdbhi%2BTRAKg2amW%2FQDD1%2B1smrqZFtW4d8kq1dh0R2CfspZc%2BiBy7yccUq%2FT757LfUq99q7NmeOLK7o%2F4WbVHS%2F8gXDUj3%2FRfJFmeMpjSi8Whkj%2FN6UzpDyHZEfkiDeprOn8Jgcq%2BlBXtwFn49a%2FyL4Bitz%2Ffkt7qRqAHPXfHPHBCi%2Fyt99g%2BGd%2FN253Q29zyd%2Fvk99ov99tv9QOI7NAfyBmrEvOBZIO1%2Fhz0Y3cFe0oftf3JOP6DoxQy2st47ovmCiT%2FoXozncO2D8xkVzmxuTZt%2Bu3symxt%2B%2B%2BwMKgAFbB75beeQDnJ6tM85pqJ9Shvbv1DROecXOOzR78GQDuq1WTGgjedso9OfzVt1vz1s09Yhu%2FrQYTc5Y9djxcnBGM44x1rpfvfCmM2bUJh4me6FRUUPNppQmKywsPB7IWaPaLbyTfhUn8AP8xJzE5epezhePVbnHmtlDytrwi9qV2%2FQpUMGA7bvmBVXWPjDq%2FbdnN34AQwYGX2%2FB0X45W7%2Bqg%2FHNHX%2FmJdD51e4Hkh%2BeAKtGJ50Z%2FOGN7E90p3hVW85F%2FIPr%2Fp3897ZEJvQOR1g0T%2BllvQPSDFPSTf6uAsv0h%2Fy3xcok4P%2BKSscbPTBQYd%2BHXSpcOAyUziyiycc4UV1%2Fx%2F9f87mNSwd9vOCFX08%2F6h3gsU%2FHDxmBOUh%2BznEy%2F3DaROwp31C9Bwrd%2BSc4rZT5xKLLitOHZJAxznD0w47Djbm%2FLWDv04d%2BnU8JMU6HjIC7RIJY3f%2Fg0pK0vavenTs1RnVfzigy8GZWFx1SSUPe1dwAc0%2FP7Pv5vAxm9d9KjxWGKzQpQLKHh4P6lPzqQBSP3d0di3H4KXJS4vKw%2FMOHjc8oB437L%2FC4gobYvid9iUd02mT1nXaB7S1e0C%2Fumd389Pe0JvrP9f84UWffRmc8C3tC%2F7F71wRxP7ZOVTv7LxL1%2FT7R%2Bc0EOtrIzJu%2B2CCTs5IYP2TU1bgof8HKNckx1Wn8EAP6MailI0DGmB2KcyAFNSD77itS0TegX1tOPKAvuOw6tSBGvsnp0y4r0HSpwevgR5%2FOcINlwPSuVPeS19BlcbExSPyIW%2F801OC6Myh4846dJnuCSlA5xQp4RAv2fkFtx%2Be4r18%2F%2BUJtPklO8j3E%2FfT%2Bf0ehvchIKL30tm9jIL38o8G3bv50cUVrmY9unhNhQO%2FrDqUr1kpLAPaAzijC3b6qEv3POr%2BEtl11D3GftF9iTe6cIinLhzSA7%2Ff7cBtB8TmLwdnjK06kWLwT%2Bjbk0bDbLRMP77K9tVJ16P%2Bf4xqg18Gh443b5j%2BwLkkkj7qiGogS2DTc5msxyqTtU7DpN%2FTMOklDFNlzFeE2S7HjJnEj7RQEcPNWdjYDJtpBja6EhvXjWGjZ2DjNhk2llkYHcNm8IwYPCMGT5PB02TwNH2nD0beHfuOw0s0rCYYUcfhX%2FIB%2BIIDGK7wY88xjR4ZBRMuTGiatSw0RznQlDQtC01J00bL7Z0EYb2ugNDpt9keh5VRSB9xSNvUH8HhDwIWDFAxVbevDXiSz2Rhr1ViaXj2cvut5Zbst6Oi%2FTYNoz2O0TENxSZ8YPV%2BVf22gB0ogI2%2BGmyeJbC5p%2F4s2VJuHqG9RA8rrT1y3yqiPxvuW4LSu4TOW9KNuAZF9pA%2BsZHOl6%2BSgYy4bawxmGoMphGDacRgUlu%2BvDCFypYFk7ndMC1RmXYClD7QrP76TFimQ%2BDaJfuZzqDRGTQ6g0Zn0OgMGj0nNE9T%2BhnxdnH12bgly1KeGkOoxhCq5UTouRKhIYVnP1JA%2BWvsZNbSO5kapy7Z%2FfFXi5NZEqc9jtMBaAl7AeMNJby%2FlcZ8GNL%2FU2OP2ltES5YSJNqdCpLR4jCZ46yBHw3xyg79lC6SyaAyGVQ2g8pmUNls5GeYrfjQD5tC4xbYUATMRxzMfHYPlSACY93Og6NQtqZdAMXJPd3MPBhCF8mF4VOOYYdmvdhTGkW44YtkJ9sUVsbMuw%2FZARpuKA0rt7Nu6HZxS1nTGY7EB4iklzV6jttKs5kbS6vJx9GWMSmMXbYONiYMuqbLkJsuyXjqWcbTLOle5IOsLED%2FhK7LJnujANk1BpAxlnRLRP90hpGb1UlRLRbrFvXhCE517oaRUq0AqKRuBR21bAcd0GQ2dtD3mWpmtJarZ8sdLq5Gz37gGOEUy60SnYakYpLTkTWaxlNj%2BJgbx4fiexREbSdIfzfAiy2UdCmdQY47F%2FFB1JhRIDWd812zuFYFHkjNZLgZppvbfhrT3MgxewlfTK8AdKIjdoJJ2OyQhAQbtUWhbBJuDbc4bjYPM4%2B4ulkTOzds5fmsLYLO3ErnR%2FJhPBBWBEWyBQuHCYQ1oYjeWU4U61PucZDSHfLo%2FVJRHAB45nQKX9pJY5BP%2B%2FpsZc%2FiyUdJ%2Bzw7h6Pm2SVgE6aUKx914uXrHqqcIwYQaEvZSEJ8iXVr%2BjJQqOVOAPENTY5%2FCB498CjgxbeUBPV7EXBpnLUI3HyOihpbwhQ79njpKkngEnCom2OPKWmAMsOdDS2cwXGCMtMRfRj4LSPt9wWRgCaDs8XgJGctAqd%2B3%2BCbzdBkHRtpq8ndPhopI544O8iyo9IBrfEQHDhYLCLQYpDWOaZ1Dmqdo8rIUaAam6MTYHrqmG%2B6euYb7brFtbOEDyiUM4lmDu20TJV21jmSHMg0HIOun6KUgkl7lIhwSxnIM%2B2jFD8PVw3u85z%2F3ykrJ8t9dJXRGDPDewxNUQmDviT3sZ6Yg48qY2jNEV%2By5s1pATwfxqjz%2FXIn%2BnLGsvTlJHjkhS8KlpyykA1WNPaOCpeueikcWaRTG7VpnhDWmnWvLSJY6WOXbOyOeccNXzsiYyeSPWgUQgZbj1kYNnZJWBhdRYnkFOUNWo1Wil0Uqh84VBeKFDWHrwB%2FT2vRciiVCOaJuKgxmt43LsqBqUmmN44MdlSH8vvSLUWdT53SFKrFSgQHhtiEDpUWleS6YNoL5jQbXmAbHEwllGyECr%2FdAD%2BxRiSpWjKCI%2BXwJI%2BpnUyzAlbuSDk0DgYnmeHQFMclJ4LkDiZzigYXvOP2ByHK3oihKw9mstSTvYQQBzGLZohGRc2FwBb95EWqaUmqKZxsMYAhs57wCY0cQQfcSrNEvOeaTQYsuSsHDDTEl0A8JsolEI3FKvoiguEHWpCyvx51xWFrDnU1OaiuKenrhEdy2EB0gcYCLzBYmxzXJgPW5dmELgfWbcouIimq%2BKLWYfZFDBNRmcmfRG1mA8ec6vyTOpTG56ryKXijpILn8ob4sMcbSTMpnHztcUy%2FbZV%2BC%2FKVBVHjmQc1nnoAZXx6jw0gB4x%2BnQHXff4bdd7wlDr%2FhAP9ij1%2BgYdBoq%2FAeBR4AXnygqT508Dw55tmxjhkQZ8zUHji93vFLpWps0EgJBwNkTMlvgwuIiZQZ1hLGaCLMS7i0nvchfDiLoQ3WhJN39e1UmNrquIgzKePskcQ%2FpCnB%2FPrab6IktlUMQHz8peopWLMbokAey2%2Fkqp9VEsFJKUepyUnqyIeA%2B6tftDeSb4Ye6IRrlhE8zZTgWjUbAZiPa6KowKaWFdiqKswZGGOMlP8AsF4hrzJIaTSopL13jrvvrLupYMWDgDYg4jpwU6ZelcrO1lYQOmY4Yl4WAUC62CklEE33N7j23tsO7lWIiXCaHBObDAzJMwP%2BavHzD7lw1Rw4WvCM5sL4504V8xd4JlnjQY36GNlDqFkzpVcmDaWSgthxmd8EDfC0UkM3BfDx%2FIws5XRUimjNPuv1kY9P3rkAiThG9uLI8ABfJIyos1n2mjyoRR%2BYQ5Rc8odIvzSF93aEao4EGabDQPyYSqmu3v07HgFomM75u0LQiwyOs3UR8JQFVlXD%2B85ppYKU7ep9jBbPPjR4sHgVj3s4AMR%2Bm2HHVuEglPSyPDhyu%2B18AW34WMHGJTscQEuZS5%2B4q87Eg%2BP6LNFywsmKpWhYTbpmzfobi0erbpx5SU7nhyr2oXCANwXsnhSI5SkunxOiI9dmf5y4GPeJlFuxNNvxh39ggIRJswCxtgPnlWWORmnpI18qX0CeWMxb7hK2jCmKhU3cgFvNhVhgmPmhhaB7EngaX4gkn1LL6n7tHA9obG8BNwslW0qc9LQ4Y0AZxYJ%2FaUBx6yUk%2FSY8iode3DjdY5VOctQulr%2BsbukdK3Fpl5MsEm%2B5pJUbi%2Fwzt%2Byp4%2FQE0zk1DQZtHrZcJ6RPwQfjMOtevFZSTFWXLSE9VgMaY6TQ5pF0L0IjPc1ZUUWjeCppyDvz3aUNBQJ4Y3UqjfNH7GXTbpS%2BYRpGQRxuKQntAjSB6HNKJHI1igCXQ6%2BqyvdcxiIlLbQy%2Bq1TyOG4k8KSuxTAKOwqaD8oAILEQL47MXD69JPNMDxc47OS%2FEdt6HIJKCZSdogvgg%2Fps9HPthEFiOODIXkWHFeAgjcytUTQCL3SOlpWq1mPIjvKTVZPS8ipXe4ak1WefXyAwHC8D1366PhY8YV0MBGjaGPsU2%2Fd9q9m2%2FdQ5R60bEcqxBf8IuhBKlK0T2XqXvKVclkVYLiKKjRC6iPGzyAYsIHO7eR5yl8CtxLl085oYa62u%2FAGeJxFb2jlwA8PvAHL34C34%2FwqT3wvRN5QFhklyF2sX8ou6PXuE%2B%2F%2F3WMkpcQu%2BA3QefHRLfLRdehhUguPQY8Kb7Ii%2Bwk8UX3lBOfxcRnVeIrIb6nXHwD%2Fsw79o7HuBCfBqJSHXOZ45hygh0xwY4qwZYQ7OOgX%2BIEAToz0fGcF5k8EPsuM%2FaVE6DNBGhXArxHzxTvrPhAfhKHTeqZ6mMucxxzL8o1jEqyJSQbul8jegBYmMXs8ekpsf0yZXs5qdWY1GqV0O4htD65m25kobXHhyti%2B2XK9nJCazChNSqh3UNoPQImfFuDEE64%2FTJlezmhNZnQmpXQSgjtCRfaIV%2FP%2BpFIL%2Bq%2FPOFiUh1xufCIciJtMZG2KpGWEOlDLtI2JQl8Cua%2BvWDVzk3QB%2BWt5cTlMnG5lbhKiGsnGBRiz2FP9JHH8%2BEeeTwf7iknugkT3aQS3T0s3iuNPf5atnjh9suU7eWENmVCm1ZCu8dYvR%2BGuINBwePAj4zuu8zYV06AHhOgF6vYXqBN%2BGzuLknkLUXgxTyn0B55%2F%2BWC%2FeUqafDoMZZdI%2FqOha4Z%2B2XFftmxX0MmgCMKipfR1h2urQ49tIU9ZD7U0rpKNVpWS2%2FFVEP%2F2WyKvbaJf%2FG9dk3sHdfG1tiI762LnXX6F9%2FZCE6dTPFPqZFNHf%2BSnePrq%2F7y%2BuS9uCtgrJDFFnGXIJbsyi3mrnzX2RKcviGOL4XTY45T5EkWsG8Bv7CelNZBsavE9SPaQet1WXsiHRRPbHhpHZTdOAXQBvyXk1%2B2uvob1odnXB8wBfMD5RHdahd8%2Fepvi%2FuO2dJHtVZaG93cHJPvOlvSdwa00qxNKUQLEeIvZlJWq6XrYzM3C%2Be5zpZoE0PoiJZA4LFJrKx8bcQXzgRVpHeGpNVeRdOrusmGURYeYofeL%2FZR8hBtVaVaDbtujOKNtgJExpOmW4vvbAZ76645NdQ0NvUmY3eSxH0zVdiwVJ5GpDLGUCDlFiU1X2midN1qymYmNFG6brZGjTQTBZ2%2FnmqiVKc2Mk415BrlsrBbXf0N68VzrheHlKlLuWiUdhqw4yLdMHXLlQkrBNcYtxrGOA1cY2p7di0F3Ppo6upGGrjJCxtyjXLpxlZXf0t0g7MEt5uvyStnay8WWExh%2BpXGLMNlgH9KCa7qJhvGeTeIqXzkGUT4POt3i3qeylUwozsT44YIb40ySE12MsDYRUBL80BEdXJ1u%2B2t%2B4Z14YXU5yK9bZGf%2BnNYlzGANErrEhMPdsd3tuQzM3vekm%2B0xLjyYa97N4%2B8V%2FgJ9ac32gnlW6N9C94SzvH%2BkSSBfe9dsESKHU%2BxTf52kHLvFP6e9%2BSibxRu0N46vT0Y3xSMb%2B52YYsZvFEYX6fXhG0NeqOwTi%2BrxCMb8GnAHvzlx%2B66E3k%2F%2BlD7gkzD7%2Fhv%2BCbfyJGPI0e%2BokUogEn8vb%2BRo6PvXRdZVjcsehOc09Bq0jniHdP4AARaiE5vIwbPI6VOT%2BiFgb9RBEC8Iuk9nfcpOMOKnbFHD0%2F7pP2eerx8h%2FCZf13%2BhJYRJa8InP5C0pCxCs8Kahg53pJavgO1uaZx0TQhBTN25LPIkWeUS3rLXzAyoxGVOMuQzmLL1GKaHrIMP%2Buh9p%2F0tmqmOfEWPaXV2H%2FwUTH2jUni%2FB04X4%2F8WZonYXlMsc3sK3iRP%2FkKu3SFax5TVtU%2FcrZ0pkPrzibUCtWZkZpL2B3ytxyAlmg9itMm7y23PakRDunyHyCJsfbfrJcvfMd4m6R2S%2F3HIc27Te2fL8TKV37kTarGymfuBGfK%2FVo%2BcjXvH9%2BN8PB%2BhIn92LvgF3P2DufsX6nv%2FQr3%2BK1i6IqhV87QVsXQFUNXDF2AoSNedcXQFUOvnKFlrq0YumLoiqFVDP046UPDCLTi6IqjV83RdsXRFUdXHJ2Dox9yjh7QMroqxlGx8%2BrZuVaxc8XOFTsXiHEMADW8H%2Fa5iqErhl41Q9crhq4YumLoAv4zPk4TkKrYuWLnlbOzzBUVO1fs%2FC2zs0KTq8y7lH5fcXaVeVdxdsXZq%2BDsUDvvw9nfXuZdxdDbwNBV5l3F0BVDF2HobyfzrmLobWDoKvOuYuiKofMw9LeYeVdx9DZwdJV5V3F0xdF5OPrbyryr2Hkb2LnKvKvYuWLnIjGObyfzrmLobWDoKvOuYuiKoYv4z99G5l3FztvAzlXmXcXOFTuH7NyFo1D%2FI%2FIMnoPN2Dl8G8Gb2FHrZesR8FtLs%2BFvAtdrLoWts7VY1sGRlAH2OHb2ojzr6LHsCY0hu9gSN0SPTdO5RkZLkhxpAQK1teie0Kf9mK4U1T3hGXCr8s3pWl0aRSxP15qFdQ29EfMr1ranXNuidkf2RB9xfcO8YrAb%2F%2FK%2BqCVpTLovKue9fr2eqNyOyhOtPNHinqgh9e3KE03n572QT4GhI2jfg6EHcIcZIfqvzdCyr1kxdMXQFUNXsYLlMvSTkE%2B1SSZHP4tJcZ%2Faxd4Acx0Zt%2B3FVv1tLlpQ4xzsEfsiRzfgz4bjBVtb8A3fcIT1E3rTJH73aNyHnH2%2FaEFNoYVVtCDpH6i0pYzuPSO7ck39KHY17Wf8S2jgYi0aay2QpAufaLunZPNt4mmhRRgbQB3yQMeE3PHoJvxG3ZvA8f4akFzU9mgN%2FgPa2oZ7eFQDZpnewL1uyDqhLfsDft8G9cM%2B%2Bb%2FBnR5Q2%2FfxM3bVB9pI0qPvoO1xLXqkTXJGGB7A3mz7RCxfQksex3RO7FsvO5nEPE3QD2g3MRHqC2pQeXbK4%2FXVJXks9sjkXNC8vkyaLV6NpbTX0MPUehPXwD3g0gl4GJ%2BpPfsRZJju%2FRBdt16CjyagIzWQP2pNi8YbaN0mIFd5DNIM2AitH9q9CfyPfmFrLXwUb%2BmK2KcQ9n%2BDu94EIwOu59rf5b5S2lZYgDKiO6aeyvyMFmBvxPo07p%2FAVXSyJzqXI8qwRjJbh2yKIRHvvWPFmW%2Fo6h8A%2BfcB1yTHTq509TxnbUpXdmAMKdjtU2mNQJa2Yb9H%2BsB8UAMQrCl6q7nR3qpqb9zH%2FESSuqHx1xvOw2%2Fg92%2FaOFXi8XPecr2Jn%2FUXYjTZKk1Is25z3ulJ5Pj8d9mB%2FYjBO%2FiUr2%2FkbP00NTqS1frwrPytT79TWuuz7yK3Pnr9eOufp7T%2BN028%2BTNtTJyGgHymqn5PFSgsuuMzJRJ57rYbQyN5Hzmio0ZkrLH37qlrJ%2BMY1jB%2Bnqp%2BTxRoZN%2FtqRKLxXd6HENCvoexFez8Qjumdx7%2BHXxIjMp8JpbD%2B6CFWY79ngT229w6%2B52n%2FXGZvqXj81hc7LXJa%2BY58zmNPot7BntwxjUdG4z4JD1RR%2Bg25xt0CJ07auNytG0aaJu1ddqmam9cu8h2EvYftBn5eJ%2F8oz4AetQf3s2vTjv4ns7XrPDDbWatxrbiFz9xTYxHLvOaeyGvL%2FW6u4Ill3rVTWn3Luz%2FTFHv%2FahPeG%2Fv1wi8X3vrvN%2B0NlcecOUBVx5w5QFvnwf8ONwCexkbXq85hj0hL8SmCLVLkesR5Tq0pBg2ejWjWD4EzS1TZuV0LfyuRit63wep89mqGPZDqMtHmovGmn0JdCmZi7ATmW9HP3gS19aYzB%2FAVfHZptOIlHvkTbB5WZadUcYSe5STooMkEHe0uh7NUYVzoTpZYpTHZi2xusXr6HFJ9J%2FzeKh4yuw%2B9xAO4MofcZ6phCRMkoFJPWdEI0sXSptmEaM%2BUY1mevLlEK1GEotbvw6pfB%2FMfTOZhL%2FL9AID9nlke%2BzAHxVjr23yR8NWbgLjHfEbjj6jOicz7YqibW4x2qr2bgL359oR1OszxU1mNBe6H9RsOTMQejAGs7ZOCotbH63DX8lHix4tPLUb8uVHlGfwOZjH%2FhFa9DNZwPS%2F%2Bkak%2FpTkJuJs95d4DSTWJFtRB0TqZOs9PkNsUw%2F0yFMzKK%2BlRvktmNWK3n6TjhitySvLbvmKZBEbnb2L3D%2BqP8k8lpbk1%2F019dz0%2FBbZ30tqwoDrLUY7l9H3kYEtyuViDGzS9ZukCTgvXSNNwB7ukS5MyDuxiQ086v3umjQhq%2BWr14QfA8bA%2B8c1QY5efwcIxXXhp9Sz%2FwfKkXYdGyV8hzy7QBP2tF81fCbruyVoQYuvYUMGqAcxZZPsMK5vGxMfIGPUaSw3Ji7waHRn0hgOfc91aEF6q1evAc%2FhGHbvotJ%2FoTwzr%2BQf8oy1G8opfx%2BsfYxvLS51l6w5jvEw04yN%2BNi6hOSIr7FRuy%2B3dR02WI36Xnzrvbxfg%2FJBPYousTytFvXCRsLvEvl9m8I%2FvdWbk8QzqOd7Wn%2FC9uwHWYplWTA%2BGrG3eDSyqO2r58KfiPHCGryhSOgnWv2%2FDM866%2Foqxq1JjPu3jPNvs9YuSfGec5qrw1ll0f8PyOrth3tK69uUNEenXN0xxdlc0imLrK7LR2D4WaMVSSL7F23tlCw2%2BmTr6f9prY7bxxEd9QbuI47KJ62flGd%2B5qWc473uuf6HGlt3GM8QF8%2BNOycUUbvWHVtf91rDeP708p9MJOed51ltaEhnLFptiP5Vsez25KqDasWhmDurVhx%2BiysO17Hm6%2FuUtRNqLhbPgTkmzD5UPHxPHpbP2QYelvWuYuGKhf%2F1WLiZm4XXsZotjYV%2FAJSvyaufQP8U%2BdbYJna1G9IilMZ%2B7EiZl3eov39R%2BPgo9xaNbzALoVU468SkmBXybYtGVnWKWYdZJ00aWeGsRkuLrsjF%2Fz06dj3zG3lQW%2F1ofhfuKu6XLosWRf6tHLrww0ak7tEMps1jZS6PXbciuaRsHbYOerHZddg%2FfEXy%2FZGybL5wrWSrpb%2FAd5sjiNmwh8GY%2BIzaT17VPeakmmS5pyQXFpdu0kxlNC5dp%2FwXi2Yj8ZP9xnJC29aTFZBs7zoiEkVkEvX4cM6EWctNyaa1NmbNave2yeiZNMs9pDbiHTfXh2preyZFdtvXIaufKGNtprG5DQdaOePf0H9H3y4qrUdh1uGK5dMAqTRoZr5BM%2FT4WSevpka2bR3ySbZ2HRLZJeynlD2LHrjIxxWr9Pvks99Sr36rsWd74sjujvpbtEVJ%2FyNfNCDd918kW5wxmtKIxqORPc7rTekMIdsR%2BSEN6mk6fwqDyb2WFuzBWfj1rPEvgmO0Pt%2BT3%2BpGogY8d8XvHwzv5u3O6WzueTr983vsF%2Fvtt%2FuBlHdo3uMN1IJ5vrNAwv8OezCigz2jD9v%2F5Dx%2BQBGLGWxlPXZEcwQTf9C9GM%2Fh2gfnMyqc2dyaNv1292Q2N%2Fz22RlUAArYPPLbziEd5PRon3NMRfuUNrZ%2FoaJzzi9w2KPfgyEd1GuzYkAbz9lGpz%2Bbt%2Bp%2Be9imrUN29aHDbnLGrseKk4MxnHGOtdL97oUxmzehMPEy3QuLih5sNKEwWWFh4fdCzB7RDOWb8Ek%2Bge%2FlJeYjLlP3cLx6rM491soeVtaEX9Su3qBLhwwGbN8xK66w8IdX7bs5u%2FEDGCQyyn7vnzm%2F3M1f9eGYpu4f83Lo%2FArXA8kPT6AVw5PubN7wJrZH%2BjK86i3nQv7hVf9u3jsbYhM6pwMs%2BqfUkv4BHA4%2FSDf6uAsv0h%2Fy3xcok4P%2BKSscbPTBQYd%2BHXSpcOAyUziyiycc4UV1%2Fx%2F9f87mNSwd9vOCFX08%2F6h3gsU%2FHDxmBOUh%2BznEy%2F3DaROwp31C9Bwrd%2BSc4rZT5xKLLitOHZJAxznD0w47Djbm%2FLWDv04d%2BnU8JMU6HjLS7BLxYhf%2Fg0pKzPavenTs1RnVfzigy8GZWFx1SSUPe1dwAc0%2FP7Pv5vAxm9d9KjxWGKzQpQLKHh4P6lPzqQAiP3d0di3H4KXJS4vKw%2FMOHjc8oB437L%2FC4gobYvid9iUd02mT1nXaB7S1e0C%2Fumd389Pe0JvrP9f84UWffRmc8C3tC%2F7F71wRxP7ZOVTv7LxL1%2FT7R%2Bc0%2BOprIzJo%2B2B2Ts5IYP2TU1bgof%2BHyLhGZG3TtDWa4g4%2BDpMGlVh2KaRr8bR8nY7DY3AAWgNyqgNVN0FKUGP%2F9DWI%2BPTgNfDiL0d4m8sBkzYPXp9Cfb5o7JFBINlTwuWMacRZh%2FSye0JS75wiDxzi5Tq%2F4O7DU7yB7788gYa%2BZAf5fuJeBr%2FXDpiNKVDrfnjP2P0Mdj%2B94P38oy6Y2KPuMWpy9yUeceEQs1w4JDn%2F%2FwPpjvxPed4eZQAAAL5ta0JTeJxdTssOgjAQ7M3f8BMAg8BRyqthqwZqBG9obMJVkyZms%2F9uy8ODc5nJzM5mZJ0aLBo%2Bok8dcI0e9TNdRaYxCPdUCaXRjwJq8laj4%2FYy2oO0tC29gKAHg3DoDaZ1ebfxpQFHcJRvZBsGbGAf9mQvtmU%2ByXYKOdgSz12T187IQRoUsvwZ3amYNs30t%2FDc2dmeR5UTw4NUexsx9kgJ%2B1GJbMRIJzqKadGDjp6r3sWPcNVhGCdEmToYpAVfuh5fpkOx3EUAAAR5bWtCVPrOyv4AfzjFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4nO2aiW3rMBAFXUgaSSEpJI2kkBSSRlKIPzb4YzxsSNmxZPiaBwx0kOKxy0Mitd8rpZRSSimllFJK%2Fdf39%2Ff%2B6%2BtrSoXfg7Iel0z7EulfU1Wf3W435fPzc%2F%2F6%2Bvpzfst1px5V1i1Vvn95eTnYY%2Bv0r630%2F%2Fv7%2By9Kdax6P6P%2FafvP4P%2BZPj4%2BftoAcwFto64rjHbBdYXVkfgVzr1ZmnXMOLO0%2BrN1ThnSP6RXUD7KMUpzpIpXaVb%2F5%2FyR%2FV91S%2FBFH%2F%2BJz7iIL3KczPmjwohf4ppnS5VXXdexnpnNRVke8mNsyvMsW6afVJxZG0i7VL7P4P8Otpv5%2F%2B3t7fCOiH14pvfHTCN9QZsgvNLinPZH%2FJ5WHcs3vJeRXvd9PpNp0p66si3nHPjo%2Fp9p5v%2FsO32eTEr4sOxY7SbHVMpQ9zP9VN4jr%2FTfqB1n%2F67wSh8f1vlsDiAeZeT9J%2B89itb4P4XNmG%2Fp5%2FlugO2xYfbr7Jv0vXw3GI0V%2BT6a%2FT%2FHkPRVliXLO6vvEo%2BirfyPL%2FFt9rWeTn8v6ONJjrXZ92bzUdaD%2FHp7yPE802TM6TbpZJlu%2BTvor9rK%2F6WyUb4Dlm37e3v3Ne0k%2FcD7BGnRpnjmFP9nPMYk8iLNXr4lPer8r5RSSimlnlOX2ufNdO9lL%2FnWlOsgl7BhfRvNvmv699RftfZ5tT%2BsOdSayWzNeo3S%2F31tI7%2FzR9%2F8S2shrJv082soyznqR%2FzjMbu%2FlN7oepbXLK1RvybubM1pVua%2Fiv2y3PsjX9Y88pz2wjO5zp5tJPdeOWcNl3s5JrB3sya82zrLmeuJdY%2F1Ztaa%2BrpShfc61r1MK21Xx%2FQZkFdeox6nxHol90mXve6lMp%2Bj7pdsb6P%2Bz1obtmY%2Fvms09le83Mct6COs860JP1Yv7JdjXv%2B3IfchEHsZdcy1yrRVptnzGtm3%2FxNBnNH9kf9HZT5Hff4%2Fxf8Zf%2Fb%2BkHbinL0Zjvgz%2F8lYE35qvfqcl3sC%2BHpUp%2FRBt09ez%2FLKsNE%2BE%2FezP3OdeY%2FKfK628H%2FfRymfUKY8LzHWMX4yltGe14afUi%2FCGDf4jwAb074Qc233fx9zco%2FymP%2F5fyLzKPX73f%2BzMp%2BrY%2F7PuR079H6SdS318Sl9g7%2BIyzy2Vfgxu2cYtuT9OudhxnDiYue0NXud%2BDP3KI%2BVg39r8SFtJ23KntnI%2F6Myn%2FMuyH5b1il9R9%2FOumKP0VhF3Eyv59f92fvBmnDCluqVYdSDuaT7N%2Bfy0TcYz%2FfnRnn1MNpA34tMGxM%2F856Vufe1S2hpvUA9vvS%2FUkoppZRSSimllFJKXU07EREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREREZE75B%2BHl45qN6ZdJgAAAVNta0JU%2Bs7K%2FgB%2FVYkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHic7dbhaYNgFIZRB3ERB3EQF3EQB3ERB7G8gQu3piH%2FignngUObT%2FvrTWzOU5IkSZIkSZIkSZIkSZIkSZIkSR%2FRcRznvu9P5znLtXf3v7pP929d13Mcx3OapsfP7Bj9LPfUvXUWy7I8XscwDH%2B%2Bh3TvsmOVfbNhdq3N%2Bz21f9U3v%2F6N7l%2B263tWOeuf5XqdffvG2b%2B6XtP9y3O%2B71%2F%2F1%2Bd5fto%2F1%2Bz%2FfWXbeu7X79u2%2FfrM9%2Be%2F%2Fb%2Bv%2Bh7X96v3QK7Vd%2FucRdWfHddrkiRJkiRJkiRJ%2BvcGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4QD8K%2Bay4PVSpiAAADtdta0JU%2Bs7K%2FgB%2Fn3gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHic7Z2NkRwpDIUdiBNxIA7EiTgQB%2BJEHMhe6eo%2B17tnSUDPz%2F5Yr2pqZ7tpEBII0IOel5fBYDAYDAaDwWAwGAwGg8HgP%2Fz69evl58%2Bff3ziOveq5%2BJzpawAZfj3wf9R6fmK%2FjN8%2F%2F795dOnT3984jr3Mnz58uXfzy6%2Bffv2O%2B%2BwN2UE9PtHRtT7tJ6Vnk%2F1vwI20f6u9l%2F1Ufp2laaT1%2B3f%2BZ1dVPKs5ARdGr1epcuuZ%2B28ez5wauereuvsH%2BVr33W5tG97HpoPeQWq%2Fq95ZfWO%2B58%2Ff%2F73e%2Bgt0v348eP3vXiGuqgvC0Q6vR7pM0T%2BnibyiLy5F2WrXkgX1%2FV56qBpIy9PRx30evyNz6r%2Fx9%2BvX7%2F%2Bfu4KOvtzTWXR8iNNlM8zWZ8jPfcy%2B7sMUZ7bCJvH39CZponvjFtccz1FGp3zOLR9RT6kRxfIqelU7vigC9qyyh3XVB%2BqZy2f8X3X%2FvrMFaz8f1Zm1v%2Fpf528gcz%2B6m%2BoU1Z37Bx6Vn3RLuKDL9A%2BqH6BPFZydrpAPsohP%2FcVVZ39%2BZDPy98Z%2F%2B8xF7jF%2Fug8%2BiP17uSl%2FpX9fR3iwLbYPf5GWyB%2F%2Fvd%2Bhqz0UdqLQvOhTpku8LcuK%2B2RuV5lf2TU5738TG8rW1zFLfanHWu77%2BQNZPZXf4fvzfoofd39j%2Bo27nHd%2FSS%2BI7M%2FetA2lulC06nNaRfI7%2FbHP%2FJM%2FOUZzTeuIeMz7E9fUX3QnwF19e%2FqbxnfHJoemelb%2Bj2epQ90a6XIi%2Fv4TcD%2FkcbvISd9LwP1xodkutByMvnJX8dD%2Bof%2F77Ko%2FDqXqfTpuh0MBoPBYDAYDDo495fdf83yb8E9uIQrOC3zNH3F257CY%2BXEpVjPZHGBe2JV%2FurZFZ%2FWcZiPwqnOrui44m3vIavGtqtnKs6q8h9VXHq3%2FFv5tEdB5dY9E16nK3J18fx7tetMVuXV%2FP4J51WlPyn%2FVj6t0pPzhs4p%2Bh4F53iQhXycA1nprNKBxhW7Zx5pf%2FTjnFzFeWncXmPmVfrT8m%2Fh0yo9EaMLwLPC8yHzyv7E7VQWlbPTWaUDtT9yZvJn%2Fv%2FKHpoT%2B1ecl3PWyr1WHNlu%2BdT1Kp9W2R%2FuWPkj5RQ9%2F8xGyNz9f6oDz6uSf5crW6Eaq%2BBG9H7FeQVIq1xMl363%2FFv5tM5P0oejjGgP9DWe3bW%2Fjhme9lQHp%2Fa%2FFepv4BqUd698U2YXrvvcwdOflH8rn9bpKbO3zjsZF7TszEYB5RaztDs6eA3769jJx%2FfiKS%2BIT1POC3my61X6k%2FJv4dMy3s5lA8opVmUzJ3eulOeRZ0dnmY4970r%2Brl6DwWAwGAwGg8EKxL6I%2BZyCdSBrmFUsqksTc9sd%2Fuce2JE1gG4eWeauLPcG52JYd3sMfwXiH6y%2Fd9Ym3fr1mfsZM65R15SB%2BE6s8FFldtcfCY9dB6ivxre69q9nY0iv%2Bsue5xnuab2d94p77pf0zEGmM57p9El%2F8ziGx2iz8nfyymTM0nXXd8vI9LiDVRxJ9%2BRX53GUg%2FA4re7V1%2BdJoz4HnSuXo%2FFA5eyUD3CZ9BxRxZ%2Fh88hHY%2F5al6r8nfJcxqrM6vqOvMQbVcYTrOzfnbcEXczS%2BS%2F4Ou3%2F6MrPM2TnO8mrOmdCOchSnY3I9O98R1d%2BlZfu13cZqzKr6zvyZno8QcePkd%2BKZ%2BzsX%2Bl%2F52wR%2Bfqnyxd50P2Oz9L%2BnsXis%2FI9r52zhFWZ1fUdeTM9niAb%2F5Vb9DZf7fu52v8zXVX9X8vu7O8c9Kr%2Fa95d%2F6%2Fmf13%2F17KrMqvrO%2FLeav%2BAji0%2BhuGfdHzp%2BCuXaTX%2Bq9xu%2F4Ce4avOn2e6Ws1ZfDz1MU55xax8RTf%2Ba%2FqqzOr6jrz3sD%2F1rtb%2Fei9rm9zXPuQ8ms%2F%2FPY3OkX1On83luxiBzoX5ngEZ%2FD7ldeVXea1krMqsrq%2FSZHocDAaDwWAwGAwq6NxcP1c4wEejksvXHx8Bz%2BICWbv7HszVOoL90s9EFWer9mO%2BZzyLC8z2MiuyuIDu2dX9%2FyfrV7UVsTa9nnFu2J97ngdy6HXnIne4PNJUa%2FTOLpke9FygcqSVvm7lG0%2Fg%2B%2B%2FVPlXsj5gTfmOHI1Q%2Fo%2FErruueefbve7xR%2BcIsjyxenXFGHS9Yxft2OLou1qlnE%2BHXM33tyLjiAk9Q%2BX%2Fsjwx%2BbiXjaFUH3kc0Dqfn%2BChf%2B4VzbnxXfVRnJnheY%2Bv0kyxG7f2Ftsf5FbDD0a24DvKr9LUr44oLPMHK%2FyMrfS%2FjVXc4Qs5SaF%2FPyu%2Fk0Xy7MzMhD22Wclw3VTmMberfKHvF0Z1wnZm%2BdmXc5QJ30Olb%2B6z6eK%2FrDkeo77XM%2Br%2BO313%2F37E%2FZzv1LOdu39K9A9pvdzi6Xa6z0teV%2Fq%2FP32J%2F9%2F%2FI7uM%2F%2BsdPVum8Pfm4Wtlf887G%2Fx37oyO%2FdmX8P%2BHodrnOTl9Xxv%2Bds44VqvW%2Fct5ZTIDr2m87jhD5sJ%2FOMbNnsjlwVl6VR7V%2BPplbX%2BHodrhOT7dT9x0ZnxUzGAwGg8FgMBi8f8Dn6NrvUbiSt75b4x7vvtfYwAl2ZX9PXBRrXjgA1pSPqAN2PAHrWmJ6uq%2By2wdcAY7hFBpP7HCljq8FYha%2BbiR%2BFvB9rL4Ox2%2FoepUzGPHRmA1tS%2BML6KvjdlXGzv5dXrtptE66D97luFcdQfa7I7T3eI7rlKvpApHmat%2FKdMT17BwLcQuNszoHo7%2FPRT3QDXol1oXfcfkpQ2Px1VkBtUXF0e2kcZm0rsp5Ukf9LaErdQwoD0tcD%2FtorFDTESel3Cpe2KGyv16v7K%2Fxcdo9bRI9eXxL8%2FL4dsWrZfyJ21z9mHLIip00AbWfxx89jpvxe1fquPrdMdL7%2BwSdOz3dt%2BXyeBza6xNw%2BztvQD76m5TImOkGVFzUjv0rHkOxkwY9Ku%2BZyat8mL9H8EodT7hDyuUDV135lhV4jjEus5nvtaAPOV9Fn9CxqeINvf1W%2FXHH%2FgH1f8rjKXbSKOeo46DKkX3P7L9bR%2BUE8fkdd6icn%2B7HugId2%2FTjey3ig2%2F0vRzcUx1k15Vfy57vzteDyv74MuXUHTtpVCafdyrfznf6h7eZkzoG1Aa6p8fHZ9ettpNT%2Fk%2Bh4wdzzOzeao%2Fd6rrvJVqNW35fy69k6daut6TxsiudnNbx9LnMd13Z%2FzcYDAaDwWAw%2BLug6xhdz9xrHtntSYx1kL4rZadMXasS787Wgu8Bb0Fej%2Bew7js9R1Khsz%2BcAOl27K%2BxFtY7PPcW9HmCtyBvFo8kTu4xG%2Be0iD0636VQ7lbjFQGedZ%2BjPLTHIDwmq%2Fy%2F6jNLq3kTQ6m4GC8X%2BTSWoxxyxylpPbX%2BKi98zo5ekF3LUblO0J0xcY5HuQiNpXc%2Bw7l75ZXhCzxGqvXz843OwVb%2Bn3KyMr1u2d5sb%2F%2FYjdinx3yxbbZvm7YCJ%2BJxYuyt7aLTi8vucp1gZX%2Fs6mVmsf8Vj%2Bg2CjAHqGx6kp9zQd5fsryrGLDuD9J4N7HW7LejKu5VfY3urVKuJfMZK724v0OuE6z8v9tf5wm32p9%2BSVz9UfbXfrFrf%2FwGeanPI1%2B3%2F2pvB35EeVXlD8CuXqr6nmA1%2F6OecIy6B%2BUW%2B2u57odvtT86pBzVy679yUPHDrW57nfZyQd%2Frvyfy%2Bs%2BP9NLds%2FlOkG2%2FvN9RTq3yM5fq24cK3vR%2FnX%2Fwz3sr%2FO%2F6txyoLOb93HNk77Ms10%2BPv%2FLZNF9GCu9%2BPzP5Rp8TLyF9eLg9TD2%2F7sx%2FP5gMBgM7oVs%2FbeKZYC39K75jmc6ha7XuvG2ip2eYFfX9ywzy0%2FjP6u9kQFdl74FXDn7UIH41%2B5%2BzVuwo2tP%2Fwj7V%2Flp7EdjFX7GKeMIHcQtPJ4Od6a8Lv2PM3HMfZUP455%2FJ3aqdfB3JFaxkqxuGpPRduHyKLJysrrC%2F7iuNY7vMqm9iFM7V7iLyv9rjF%2FPS9HPlPOtOEIvB93BnWj56EXP1aAflyeLOep3P39LO9J4OvJ4G%2FC6BTyW7HxAtg%2FbY7PEz72uFYen%2BVb64HnixhUHu2N%2F9%2F9A25aOUx53zThCBxyV8nGuw%2B7%2FXfujFz2P6TIH9GyPQtNlNlZ9Zfb3uYieravyUv0ot9jpw8vh3glW%2Ft9lyvZaVByh64Q03fsf72F%2FZKKtZTIH3pL9K27xWfbP5n%2F4QvWXuo8Cn1RxhK5T%2FH%2FX%2FwO7%2Fg7flOk8m8Pv%2BH%2BtWybPPfx%2FZv%2BOW3yG%2F%2FcP9fdzsHruUOcpGUfo5ejZwap9e1rXhc4zq7OZbjfFav4XcPtX87%2FOd2bldPbvuEW%2Fd8%2F531vHvdc7g%2FeFsf9gbD8YDAaDwWAwGAwGg8FgMBgMBoPBYPD34RF70dn79JHBfhP%2FrPa9s8fS32kRYG9M9nmEPnVvqcPfaVxxiexL83x9%2FwjvANIP%2BzeeyVN2dTnNR%2Fft8ansr79jwr4j9tnpPrcsz2pv8K3yd3v11Yb6HhCH1hvdsodM%2BwT5PattV%2Bjq8sgydV%2Bk9o2s%2FzjYr5bl6Z9qb54%2Fu9obsmt%2F3stE%2Bvjf37Gh9n9tvIb9%2FXcH1D70ww7sI66gfanbyxbX9bdFOqzsT9uhTzs8%2F6z%2Fc538eZeb7qHUfZsB2pu%2Ba4l9fvqM7rHVfLVNkobvJzgZQ1QX%2Fq6hrG8rqFtXnvqCzPaMvfiGVZnkqe%2FvUZn1%2FXIn9ve97lznf60n55J0nFRZuM939IrMei5E86U9qNxXfNPJfnE9X6G%2BAHmqvk273PHn2dkBzcf3lq%2Fkx49r%2FgF0p%2B9iUz0y5vt8pdKxz3m0TtpffU%2Bv7mXX%2BZTmkb3bj%2Fbg%2FfB0TOCcUzafcWBD%2F%2B3Mahxm%2FbQzliPL6dywsz961TEL%2F%2BntSO2v%2Fl33mpPnif31XCLtV8vM3l3l86zK%2FvxPO74yJ0C%2B7ONAfnRHG878Orqr%2FKrne%2BXddYHK%2Fuo3AW0xixXomVFd31BXnR9W5xsy%2B1OujuV6Xc%2Blep%2FScx%2Bd%2FZHJ29cz0MVdducWke6q3N14d9Ke9N062pc%2B2nmKwWDwofEPiCRqoj90VfkAAAq1bWtCVPrOyv4Af69%2BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4nO2djZHbOAxGU0gaSSEpJI2kkBSSRlJIbpCbd%2FPuC0jJWa8d23gzntXqh6QIEqIAkPr5cxiGYRiGYRiGYRiGYXhJvn%2F%2F%2Ftvvx48f%2Fx27J1WOe5fh2fnw4cNvv69fv%2F6q99q%2BZ%2F1XOaoMw%2FuBvM%2Fi9vCW%2Frm7to7Vbyd%2FrkdXDXs%2BfvzY1tVK%2Fu7%2FbH%2F69OnX32%2Ffvv388uXLf%2Fqi9he1r%2FIpKi%2FO5RjnkU79XK7az7Hab%2FmTdp1baVpf1bFhz0rOnf4vOvl%2F%2Fvz51zb1T%2F8tuZQMkDkyYj%2FnVP7IFJnX%2FmwX9GvOJT%2B3E9oC5Rv27ORfMvL4r%2BjkzzHkQn%2B1DJFztRX3WeTHNeA%2BvjqGPgDKYz0x7NnJ%2F6z%2BT%2Fl37wzoeeRef6stINfatiz9zFjJ33oA6PuVnnXD0HNN%2BSPXklVd6z5IX%2FeYwHn4WZLHdroh24n1jOVfbcRpDP9SdeL%2Bc7QfXc1YnG0fp19n%2BylZWd4pD%2Fpt5l3XeSyXsqxt2iB6hjHJ6pphGIZhGIZheEUYx9%2BTR7DXp%2F%2Fzby%2FvWfLd%2Bh5c6mu6NvWueITL6O1qB8%2FmZ0id8Jb2vruW9%2FOd%2FM%2FY8Y98hnme93W%2BxC69lfz%2Fhv7zFlz%2B9LNhz8Omjk0m%2FXfp28MX5GvpI53PkPokP85d%2BQNN52%2BkjFyP%2Fci%2BLNsv7d%2FapZfytx%2FiUdtAyt9%2BNh9zPyl9ic4suSAbbL7s55z0C9hnWCAj7HYF51HntA%2BT9me3HdoM90KemRby7uzZmV7K33X0qOOBrv8DdWi94L5tP459e12M0C5%2ByH3Qdl%2F3%2F0o763jnb8xnSvbr9Fldkt6z639AtukDLuyrKZnhb3F%2FQ5b8v5M%2Ffd8%2BQMf7WJ%2FAzt%2BY8ict%2FADk08n%2FKL1XkT%2FP9vqbsrG8i%2FTF2xfn%2Bt7pBvSJ2wm6xboYdv7GlL%2FP6%2BRPnMqZ9FL%2BnNf5w%2F527FtLP1tBfaU%2FLf139u3ltdRt0dWR%2FX08R8hj5UuElb8xfYi8p3Xl8XjmTHreph4eVf7DMAzDMAzDUGNb7Jv8PD6%2FZ1w99oAZY78ftn3xs02%2Biwu9FX%2FD%2FMNnZ2fT6vzg1gnoDseE59zA9C1CXuvza19nP8zyoK9GP5yjs6sg%2F5Xd13YwfHzYjtAb2H89x6dIv1DG7ttn53Pst%2BMvx2gf2JHxSQ3HdP3cfhfXe5Hy5%2FpuXqd9gbbvWub4D7p5RJ7rl%2FPP7LfzNeiI6f%2FnWMl%2Fpf9XdvD0padPHRsp7SL7sWMwzhzLdlngk9jFCwz%2F51ry73x%2B4LlfJS%2FPBSzO9H9wXIDLybl5zrDnWvIv0MnpOy94hhfW4c5z9fxf6Qa3OT%2F%2FHatQzNyvNd27XO1bveN5fN7ZAhjD5%2FXEjTid1M%2Fd%2BJ9nAOT7v8vKsUx75D8MwzAMwzAM5xhf4GszvsDnhj60kuP4Ap8b29zGF%2Fh65BqryfgCX4Od%2FMcX%2BPxcU%2F7jC3w8rin%2FYnyBj8XK5ze%2BwGEYhmEYhmF4bi61lXTrhhxhfxI%2FbMT3XkPjld8RdmutrNi9I67g%2Fdx%2BZfuQ7in%2FtDM8M17XB9sbtrnCa%2FCsZGz5Y3%2FBJrdqSyubnOVvfyJl8vo8LuPKnmCbwepeKDN6zPLP9uh1Cp%2FBpmzbKza7%2Bt92tO6bPJmG1xDDr4cNvms3Xf8vbNNjG1tg%2FU%2Fa9vnQbn291%2BfymoSr7wuRR8rf646xBprXxHp0kBG4Xnbf5DIpfz87V23GcvU1nfwdb%2BRj9h%2Bzn%2F5Jeuw%2F%2Br6Yj5FP7vd6ePeMe7km2Mch%2B4VluXou%2Fqn8u%2F2d%2FNMX1MUi0a%2FR7aR%2F9A253TH8FNbz5MHxR2fX%2F%2B17K9KPA7eSf9cebPt3PAH9PX1H3b3s2kbGqJBe%2Bikf9Z2Btux6SR1w5Ee%2FlfwLr%2BNL7ACs1pzOe8172cnfZcjvC%2FuaR5V%2FkTEy6cfbra%2FPca%2BnmWl1bWYXl5M%2Bvy6%2F1f7dfayuzevynK5%2BnmHsPwzDMAzDMAywmlt1tL%2BbK%2FA3%2BFN2cazD7%2Bzm1q32ec6F5wodvT%2FegpF%2Fj30YtqHlnBpY%2Bed37cW2kdp2zD%2Ff5bDfqfD3RPD%2FgY%2F5WtuT8C1xL5Y%2F37PxPb%2FqPBHLzH62jJuHI%2F3f2eat%2F9nmuz6209lGa%2F%2BM2yJx%2Fvh6sAFyrb9R6G8JOcbEcqYs%2BIjuraduzVlbOxztp2%2FmOgEpf0APuC1g16ct2DeL%2FCh7zhux36%2BbU9Ltp936u0CvwrXl3%2FWfS%2BTvOR%2Fo7vzWoL%2FJuJN%2FPg86n27BM%2BkV5wpfW%2F9fKn%2FrbXSwY23sw0M%2B5HGk%2F1P%2BtI1Mk%2FgQxwg8sj%2FnEjxuoo%2FRr24h%2F8I%2BPffn3TzyvDbHfzv548er9HP89%2Bj%2B3GEYhmEYhmEYhnvgeMuMmVzFf96K3fvqcB1457Y%2FMNeLvBcj%2FzWe3%2BD4eubH0Y%2BZg2O%2FXaazsqF4Dl766myH8ryglQ%2FQxygT12b5sf86fh%2BfpsvT2aNeAWygaQ%2FFbuc1Gjmvs6kXnlfHz363XDsU2z92%2Fm6Ol%2B279ueSNmXMcqXf0f2%2F81ViU352%2Baf%2Bo16591UMTzdPKOl8Oyv5U8%2FpR%2FT8NHw%2F2GbtH7T%2F0Pe2Kj%2FHco6X91d%2BzzLPb8VO%2FpbZn8p%2Fpf9T%2Fjn%2F135kjmGr55jn8u7Wh9zJ320USIs29uxtwFj%2FW%2F%2FdSv6F%2FZB%2BznMu4xLaA3mc0f%2BQbYM02bZP3O3vFXxCHv%2BtZPye8vf4L%2Bf42QeY%2FsFiNf7byb%2FIef7d%2BO9V5D8MwzAMwzAMwzAMwzAMwzAMwzAMwzC8LsRQFpd%2BDwQf%2FirWzjFAR1zin7%2Fk3EvK8N4Q33JLWP%2BYtXMyf%2BKxKN%2Bl8ue6jkrr7LcWujiUjownPuKSWEDilrwOzlGs%2B1H9GmKj4Npx9I6d8nd4iQvsYvcpk7%2Fr7rhfykt8lY%2BRds4XIN7cMeeO1U28NhBrCGWfZS0yx5vv%2BjX5nzmX8x0%2FS16ORbqkfok58s%2BxUe%2Bxrlmu10a5OJbrfxEPTj%2Flfjs6PUo8l%2B%2Fb3%2F6hLex0APG6xJJ5TkHeG8fpZ7v%2BQ%2F6OCVzh%2B0794ljKS%2BqXcykn6V5L%2F2dcfuLnMn2bNu191LO%2Ft%2BHvKbke3G5dT7v7ct4dXhvM97Nqh36GIrfuex9w5rni%2BTI5d4A2lBzVL9AuHJ96LXbtOvsr%2Fcf%2Fo%2FOyTXveV5ce%2FY%2F7Slm5r1r3rcrqtaJgJbeMDe3SpGw5j4W8EueV7Z62mRzVr88jT89VeivowVX%2FPzvu%2FRP5c47n3GSafh528eBOt5uHRJ3nNyouWeerGyt2OtN5ZTv0%2BDjLfaZ%2B6f%2FdfIW3sivDkd6FTv45f6Pg3cB9lXtCxp4jdAav6ZjXeO6Q49Wtc49Yyb9rr4xTrB9W7Zv8L9Xnu3VKPW%2FqDEf9v%2FA8i9W7TCf%2Fo7LzTKzyOg%2FkRF2yNtxqrGadmfJnTJjrBHqdL68r2L1be46Z3x26cvDdQ%2FRNrlnXcaZ%2B4ehbuxx7j3mLvKOu8s15GgljBch6Qb%2Bn3vS79JHeO9Pud%2B%2BEq7GAxzmXrBN6yXN6V7%2BU%2B0iunPPs81aHYXgz%2FwCggvogrdejwgAAKhdta0JU%2Bs7K%2FgB%2F1PAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHic7X0ruOwo1vaSSCwSicQikUgkFhmJxCIjkVgkEhmJjYyMjI0smX9R%2B5zunp7p%2BdT%2F1Ihac%2Bk%2BVXvXCbAu77suVObnfTaeANqzkS3G10Zgh6PDAnBdxQVrAN%2BFfsPzYh3ggQoQAbYKG9CeJMF33ZPZsYTB8c18c%2FzxQ28AlZvdQSvVcTO2vmxPFRTgeJ1A4SjpMPBhua8rP%2FcJEqDcVCykX40DrzeBuHNcndvez5heQmwxKfxDEfOV0g8PK9Rr2yjuRnlOIjj1lmRQQ8xfORbI0j5PBjAmbKs0uI9JbSv%2B7utukHfu20cXj3LFsPiNmeABPFGqg3EJD9EUCSuvl7KFSJN9DPqhrsFlobcdf3GPua5%2BfoJbKS6jNWODiTYs1vq4xcDBgm0Onh0EdU%2Bg%2BO%2BoOXBc%2BNP9PC8bDy8%2FvPy3uE7EOhKek03CmwVwKbYVIBX2xJwtHNUeMnDAJw%2BHdUtxYAK%2BtM1ft%2BDa5sAf1S%2B4mfs2%2FDQdPH4AhQu0Hjc3U%2BobgcfhTt3VQlHX4dbt8%2BunqJR1TeD3e4%2BO%2BzXIJS5Cpk7JigsYazoYCWubTsC8bYE52A%2F85wIqp3WBVcV8MqiG2SU70e8RgZurHbhdRuFh15IpzwuqUkUlSFdjME1nA8Y%2Bu%2FgpL3RpaJNmmPXVCdG4WIY%2BysocqBLLRcvF8uMpFZbUPA8s6Tb2czTF4cB%2F1jWbeuBi8D%2Bkokof8OD2XBs8GU8cTSVPIyg35DbgOqcWPQmdqur904sHWUGj98KDSA22qwiQTKBzNpvOA02DWOrI%2BUJjWJ0mx5hKvRN0BGW7Lsr2EvyozwkzLhhqZSiUzz%2FUPD%2BdLTHpJHCdTwE9AP1%2FeBQaEowL%2F9r9CR9dPEp0wqG3VmebmmB8SSw85LiVfeBG8w5Ral3QbyVbUGHR%2FQGINv0YWBJZv8084ReqPxCoWW9oAIBGnhf8MDY34YGtHzZKRvGXR1vwhQV3dimazzc%2FLBzkQHeOCo0Gbk3gx6bdE23MBcprPj%2F16MlM2mrvD7MVPYDdD9old4NaiGl6RlR4BoEQ9IQkEYGva1D2OJtFt5Bt8vgJakFPmfHU1%2FregKueHD5%2B%2FpKG5dzg2IaRugbpQjn6teIJhgvWpAI4Va2rSxwOQ8N2tGpi6w9MC%2Bjl50O8Au%2BAea8FoQvnHo07pG0XagtQLtQFIJf44%2B9Ea%2FEVwup3%2FqFV%2F0XCwoAz9NyowZSRlZI4eOtVwIVKyvy5cxKPoxKJnlyEswgO6Mmfjis7Bn0HBHOtGEYQ4x1RKB5LSa3u96ZY3ZuExqgKuTELy%2Fr%2BK0uP%2BqjoZFiMH107SsSjju9jCIh4JJ2nRNHXt94PEJ6iE1hgadceIOyo69EQQGzMj%2FtybrBtJIGoxl7XOc6E73pCR8%2BeoFE9FcZuZhDka4RE6vasZTsKPKj9%2BBZh0%2Fw%2BLLXiop6basbva4cwQp9bcCj14iS%2FHQC6h8egkdv2zHD9NAxuyxnLcWCUWMaT%2BQn6ds%2B19ugY2S549UhujPuNb3KfSr6AzzWs8cHg%2F0jgHHWpifHq64eXjwtm4KcWDO3X12HsGJWGiVtaFxk6PjzHTUBKoznzAv0CrOIk03FdFQGhAH09SIUWDGsE0P4zxsoYuuOv%2BemyunS%2FUZM9f4IBLAk3xscGtd%2B7%2Fezq53MNxD6Q46Iz%2BLbv3tw2W6bRZ5WolwxSTI3Yjaqo%2BRGtPxe3KAyNJnfdLjdDI35CewiCXa%2FTCtfil1XUVwKyDDeZ0jF%2Famt%2BgmWUY0e7v3IWy8f5H9DjRNguGxI99MtLtNzu6wjFQN1X3cexTRID%2BzDlgJAD4%2Fvt6OS8MM5cBtryeH%2BQ8652z3HfTlqiCz4jBMYNg4SM4EJFlwmZpSmVgromedhBfXTlP0L76gtZ7G0owldJcOGBybHygPELuHy9Mpcr6P3gXDK39iDt3imQbNw4t9Z0bBgFHMFAWi5CvYCj7xgElWXxhYuNg1JT3%2FSBxoNtPmSYSYHp%2Fmz%2B9PInTg1hhmTEokczuSWNhrwjqyk%2F6LzPJAUBcx8c3wkDXzU9E7LtWRzHQlIjLWsicUdQLdBlEv4i52atwQjC4SXWqS3PkzMeN%2BrQ5MzIONRNOZkZgc%2BKGYosG6zo5F8qbjtIgsH6xkUWQsaxhh3WY2y%2FfvjO7rHnDcudW4OOL3Nhn2e4SRUXRQgy5Sx6A9Ix2hd0gRs6kmtMxtPnzsEGoc3tHMiZCA%2Flo4tHKeYc1HsSN8pv8MvFbmSo%2BKTot%2FDhlXtAcvVQmD4QxmvCd4xr172%2BoQsjuA9rWBdmeZES1kXH95rIQanNQsI5wnVNELDb3jRQPblfBNNskpDGZ1ePrtiH3U6VFNUjll9umYdH76RwA3ALLFqFHhL%2FVXWbNsiT98NWppvTsLjlMEVLkTcqfLf9GF2ve538NzVGXOnUtrv6elHYFaB6IeGCxwcJdRVIgD7u%2F%2FOmdXCastr29VTZo7tvM1ApiPi0W%2BBe1Tbj1trz42AgLZpkJhLhKj22JcTAymZZkjy%2FXpKD2LdgXzadqN%2FIfGgduMzrBTPYoT6AhDIgGVC6EPpx%2F9c3BxXPjrML%2FdUO%2FCxOc75qu0aZPUK1ivxgC6jtgbOVQ6fy9gRpjlWSKQFS6ZCPQEzF3wbSroSL%2F4kdArfHp21iPDITRkiTUnGwshzDuUa9HuXj%2BPdYHLppjeSOsvVPbaxHQf3dELf00n06tioavssTdQzEZgXYOh1AyqtSSJkuA%2FLZ74qwNsLxvLHDNo5qkOUBp2PmR09wTy0NEPqtNh1IF9L9%2BtzKf0udyUrm21XAzuwWOrpKx4O%2BnYr9yXY8Z3qO44zoBPEg8f8IMUYqcW2ZLTuTDUnyjRQANw0%2FA94e4k%2FsKFlyDdlkZccKz8lGBsoXDeWZCdL60aX%2FlnLF2EiWEB%2FLwWHsx8fboeilPhjGEAAsoZW4rzP%2FixtE7FoIi7lF8crGrgHScXHw7Ng3cBuBP7iDyIzeS6wGkPfFJQ7IpySBOw%2FivD8e%2FVGschiNNrNwUAM3YLxhmYa46V49hAeE%2FclS57ZfF4b1mbMpbaOExz7ARDMjHsKjDLxfJw3nSf7CHcmtdQ%2FNi0PByi1SjW4QZeOvhLOyz%2FMfc3OVwO5Mz8w8yK0vE7XgG1IpfEx0XzG76fLBPHX1fUUKRMh6bMLxJBRI0xEOK%2B9OCB1fFTLsv3MHYwHbry3yckiRVi6gGbOliPQa%2F87U1o8ngJHvjJmFKH0L4G8Jsu06Xeisp9s2p0ZobHexhrxAjNJ6xns2ulBfmT8MAbYNResb0t0Y0GizovbfuaODw3ai5kurDC%2F7QukiTdL%2Bsmg7wNfx8foX5wTQsaFvv%2BspZ1ICbSDDJKw1vywglEWDePwoP6o6E7ZnwFXrtYUXRrw0npnqwCAJ6OAWCPO137nDRTSMgQYhlrNxPxBs5JgHkPVBrvUOiJ8WWXa07nM6bVIeqihHB%2F%2BwWt952kdxhCt3MBEpTnr79ufhdYhZ9C3FJpWnj%2BjAIqJZEAk9J0mG%2Fc4dgzjwt%2BgYe7uZbYgbTC9%2BhLmPGYPCIf6Px%2Fv%2FLuNC767g2NHMQT2onvjnvLFZmcsMfHoE9PA6ZokbI8Ksf29ouTJYaoH4x7xJfDHW2GkzE0EofPmndhBmMcUDE6XWDU5LgIiaTMDNqxraLp%2Fr0%2Bs%2F0nLZXcNxQlOgXiNvFvL%2BLmyAJQR6AuLigYsNr8T3WdLjfmmI5JSDUK4AiHEQHut1JjcohAUc%2BVU7QgKhkmwgekbreNeOBrOBootNm%2FfL8gssfFBmDFb11qD2a4KRJ5tOuvRizJQvoSRFTpW5qgpIA0HXad77UQs9gnUtHy9U5lFBRDmTo6jSZ9XsV%2B3w4CVZWu%2BuXICf2mHUpaTjNZBPrWpyqA%2FL0fGp%2BHUiOePWQth6cIPMrNZ2bKWtbD0LgxCPHhXJuFns6Md5nxXcvjV0A%2F2FptIRC9dtRYOBep4r%2FKod700bsb6LPqhMv2vHPYtycgw0jQP57Oqn%2FBQvZ%2F0PmkXAchL%2BwH5QhhimbkLfW6CuXGdbFXuhq4eSZxqj41nbA3ZSn1cnG4aHCntGZbBtMe%2FeAYx7CwLdd74HA0z%2F1TuQHTeoJiSR5%2F54%2BmPa%2BMPQMJ8LgY6ebt32ifPtJhH62nXFQDVzQ%2BgUQ9WxbZzxHzhIGIPjZWbx77nGdAySzjxQSlr%2F9I6wQIOP75D5yNz%2F6B2huxY0nUt8ro8jYA4XfRdhn2sRUk7i%2F6Anl35JVSHCa%2FJXAYCBTIybWtf1RJgETkuVwaUF98yhVeMGDKOcz8T3%2Fd07tJpnzBLvTH5hKF3lr94hQmp26CjRZvLH9R%2Bjv7n0XLfzQuUFfZJBdUj3UqGkoBEGzgIA1Wfr95juGk0f7guoPDeHDE%2BLtzrI7cpb9202de129o7dxzszjua1Pcj87ncd6ad3jG4e6Puv%2F%2Fj6j5cEpKQzcEv%2Bzk2ipLalg6ire%2FMuAHQLriKhA%2FNudJoaPxPg641kafGwYsxDNrPzPbDKRQmzGaAerR7VDoUsgKUb0a5PyAqynPUwuWj%2BdofLRxePkjsePbrv9U1WJaUT9vebyqqIcvynAMDkwjSdSBgNHThy5NnUBkvsjYDJeLrtQRz0OsoyDdoRZcAuqawB192fME48Z53r5IP4mSeIpsruzTaj6YclwcNHzDHW1rdtfe6hXmqubu3SvdNT%2FTAMQ3oBi8ftTFiGM%2F2cyFWD9oRNO14F4v5eFX5YY7C9joABYQEa6HYDR0gFdSLh5w0xivNrTtdL%2FVSCPyyI2edygz3u3I6GWH02Q0IQVzbbuwCQRt8XqFzuM5ZtezQhXTn%2F4but19xKNG7pFNgTNUrTc4R3gtxeDKpEn%2FdoqA%2BCjfSMevaCu7aj3%2F04%2F5XgHFDrlF2Xep0X8PO6MbYbeKXifhcA%2FLVKOCNjviWBz74TrrdjRntk85cb3d8DHbq9bx33iEB3xTCJUXNQr%2BO5EppfFcyBziA%2FCDN5QjLEkHt8vv8FNbOnuId9yz54e3EoYb%2By29GCYaE%2FBYCO0P5RkyXyp8xswaz2NPSCpM%2BCeG1XSdeGgEftr6ZD6BrS9OwxEuoSkgjbEmvXUdb9jDNpSmgb3CzH%2F4D64%2FqJGku6mlKI98XE8KIVxMLI9shPAWD6yOeFyrK7ho88IfONWxCeuE532fS2YcTc%2BLaiWoCOwHiJXFJ0dpoB0l5aSu3dYVwoAcoeyFqZUEWWj%2Bv%2F7iAxipreowWhaI7g953seQYw91MAkEwhyHkOzVEDUA%2FMnhDtI1JA07EmNK9hnzkQAicyyQGexIvgtkkVrEXHOFjJ%2BEly1cQKNKgTlip5nv1iH89%2Fi8u80xovI4kNeLDd0dw7xjJSfhcAqosB9eIZ1uFPN8%2Ftomjvk9WYVY7zXginawT0DbuapeOnKOS%2BoCyliJ8yGIf81ynPQwf3OijZkDuXHFEzPr3%2BNOEp%2BiWI%2BdRiNu4XQjgB%2FVygFB%2BzAHC19ZrJ7KtlPOq67VPpuRCQgtjs2ivTanPwxHCMhLgI3yU8Jhl0ezM%2FjKMIrHxOBilwNxFimdQCf%2B7j6T%2FUYaRp5EQTtVdsCH%2BSFgGhvfCIWJefAsBa2j47dfidKaRrbwMpI1fhyM1Tmm6uY1K9ePSUe1vAc1h2MaSsOTWJEV%2BsGqwwS%2BkY9cEYihG21Zk32j6eAFRwoTWHi7jZtKRsGjOlU%2Fwi2J3qTO69iFiQ6oXnnatb4TVt9qH4Dgy6v1EAPSJ1ffaRxnDPmCp4jWL21Ym67uOX4yNpTSuz%2BUC7WiGQCf63z65%2BauDSWZTdrBUYkaG00iQePzWKlaBtBnTqdYhdIIcljkCO992FOg40aDjbg7iYobt0dewXM8A7%2BgrOkU%2BkMUEvcou%2FBL6ZBQobxhHPUio1wMf7%2F8vsadwmaiMEWR4yOrokWggoYa1k5kDfPid6Cp4UBoTXTBCsr7Os2wIX64e2qb02WpDRwDh8YBvGNt0iAuWMWAEx31%2BAD3oFJxAN7kYtqfe70Y%2F7P7D6WF4C8gtBOj8xCKIHO9jMaC9LGJ5WQif1Bwz8dk9uEh8ZzwRGU%2FKCvMkM9QbGpOqw78zeUXs9a2g3mcAXTeWvwHdYUflw%2FFx2782Tzk8v%2F7Yuxfba8bkK9I1OM7fNSEtS8MlsikuWIptxHQ%2FylB6JXlfcBLNogbwxd3T5HuOgC2hABwKnrNEz8GUSHzb%2BTnyWkhe2wamLSTt57o%2FzPx8DOHRbBoNb6SGRC%2FqltSQsH86uTK23ZZYijwV6puUlSd6GQepr3MwXEVLkbCEzdfo44NqBeRPf6z8TX55Xxem9KYNBYkPS9en1T%2Fkhcnq%2FhGGipDVTsc1u1pejs4gRI8IUPP00M3mP3DYiqhWg0lL96tH034NDgYJRBOW%2FJj64W4%2B8IwpCAEjNx73fe3ahZeAF12tPw9dUyWxxKI9VSAPwzbVojw8Mu92UOBC6LEB0sLX2yMPVgkzbe3AItBmV%2FB%2BJL9gqy0wijRRkX3kMH%2B9%2Fn2ssNO4LR8yW%2FdFiRD4swc8ub2sSIv1EO4Z8N5ZbLhUctUTWQ%2B0XQZyfEeQjiWnH5uls%2F%2Fyvic%2BfoUnWrNAW8gji894fRL9xvV0r3hhlRQmV8pZfqy0toJmDpgvasGOpHJuz6OeAXvi%2FpUz0EphxsTF%2BEesQQ5DfQ5P%2FlPieQ5M5oY4IZ06NEeTz%2Ff%2F7GpP1SMgEOEIWa2jq56tKwY4jWqQtYPpWgW%2BnmU3LYSA5chgRFyQAE%2B7VuhQDWi28aPNraPIfCh8%2FQ5Mktwn7XpbxdMSP9785ZCiROBZQ3YVd2raao9d3WxKiAXdsGOnPO7WMZJXUbpfXhvRvzkur6I1k%2BQxIGqbehChE%2Bq%2BFr5%2BhSW78ScwgTe%2Fj%2FF8oAPmBvA4Z8Bqckhju8DUpNhJIL%2Fb1zFnNMYe4ILFRUuaMax8sbsvW%2B1hIva0GyonwDpGDyss%2FFD7%2FGJpkZpMEAecmNrN%2F%2FPy9XkV%2FFUqWbYsSFKrpdN7Ie6VDl7WbvcxDrAJjYL3u2TDKhXYeNR3Dwng85IPzXDlZArfd%2F2Ph%2B9fQ5H0x2jA2Ite0IdaP85%2FrOepkbDonlgz7MUgiwTxITrYCJl0LxDXP9o82tjnHIRZJ7TE7IpDJHvjuWXhBz9dLLZd59X9tfGh%2FH5oMZBwNoiJd8M%2FX%2F9vruQhVuS5ha6tnYmJ3MjSsjab9mIPAai25IFEOqszCAE9kli3WBNbBOk6KFAlkR6eXy6VN2f6l8eX496FJCVb4Rz2zV%2Fh%2FIQFyNumbd9FIM%2FOxGLsW%2B9JwIvEd19uLFwwBuaGCoyNnNip4pTkf8K6E72t7SJCuPFeQqPYI7dxCFlHfjU%2Fnvw9NVgQR%2BYV7S2j1n148zEZ%2FFYlXDR085LVMwIbH%2FTp3JHywb1mAnC1RXTwTyqvN2iHhIeWeufvwRs8ecUAQfTNmoVL4JR27mI1vFcS%2FD02Oo9AGcq9E9fLx%2Fg8ry0587FnNWfyZjjb9ahuXcgMx0TEVazT4%2BmknWMkZ%2FGaDXDrcZa7evPcg3H65UDma5dIx7d%2BNj7MK9h%2BGJjeOOFGhYXBl9cfx74bo9og1IDlvc6ZN2nmXCfVLBC3R23WKpHUWOebcB0JkeDdIh1aZvtbYJqZfD6ivnSFD8qNsARhnTA4g%2FzA0ibF%2Ft3lT9wKlfXz%2Bcdmz3mvQ8OwB2frMYq5zOgFmuicv0PyCwA4d47yzQCH%2BXSW5g9x6I9c9xEqkc8dgM5d%2FVyBlejyNUElH8g9Dk4Ku%2BzCoQOg07cf7vwsD1d4e%2BzW4AjVntZV4%2F2OO7VS%2FR%2FTc%2B1UZ9COvUtQbQ0PGP3RkeMcc9Ib4TGCMxoE4p%2FXr6WRnc1TiPw9NNn0sDAJfnZqTIB%2BWXIJr2awE3viebHTOhGyvc6CLOm0iMtfjNbdiAWVcXQhc8gzLm9zke3hh30xvuYtR039sUHdLN43s6T8PTe6liQBeYSzVH1%2F%2BbGIo1MAxhz%2Fxv%2BuDBu3zDs8zkx2E3YxeN6Lb9jrwEIXL3oPDw166dXOsz5pxQrk4KsGN6GiAR3iMH7BZ%2Fg9Dk201AoNNfu17Ux9nwDlu6JFSWJYdQ31b%2BauLF59oB0%2FOdEOblzEjVzPoByqa%2Bzo7vSZfGIdHFNvbgrQmnEh8id3Q4MHoNYJMkYn%2FPDTJg%2B%2FyXGIFpvvH%2B7%2BGEZdEP11mTXtWNiqCU%2BQ8h5vZ22WZjTAsoCGr2A1BtMvYvrzn9oXkofaMS7gIn22knG2dwcbfjcNyi529T%2FdvQ5OtpJr8vDKJCggf93%2FW4SODw3AnJLRGkMu%2FQCHSezCeF1aEEaZZV6nYwm9lrSypiieqi0gnur%2F3YOdy%2FTHO4troFYMjms2%2FD01SU5Ya3RATWbqP33%2BSWkId0GjEfJZ4srdI80ANNttZemlXH2yEd1ETwQwRHOF9gnlxDxdz4K3ssyFgq7Mffnkjoi1PGN0L1ZGq9rehSaJYlfeQbdbLERR%2FvP4H8ajMec%2FxgdH1n3zv%2FCowb0CigRtd25OJXihgUA8RynHtq8KDdratZWa3AenPdu4nmk9BPUKA%2Bx6Mg92CcOTvQ5NKIwq8qBAM1p6ej6f%2FcZXmNbENUtHD7he6gOuBd1Ym7YUpDNSpg9luQHBv743nsl3dzHszrHa2Ogv6DhjH%2BrWG3sNZkejNZiphV%2B%2FSX4cmJwpKazBupYmir0S4eOiP%2B38LlFwvSJPczMlEDOF1A85xD1qWXNqMRyvllbVYC3%2FsWqVUPnonETf5UYeBcRGbhLmOvrnJjO0CI0viUi7yL0OTuwdW1txnx1HXyKyo5enj8x9cC%2BIQ7GC4tz9k3NsXMXmzlOV1Tds2xrU4WlhdOMP4XnCFqndR6xZFvucNJgjvjIetMRZmchNSmgPBS2n78efQJBBHpBbOE9Pw1N2cnY%2FbxwHQlRgejK%2FwaDMngcCuwviUt5MGx3u8HBQBsZoeHjs71n5GoPZL7jM30GuaFJbMdTwIcPa1ZMqO5eiIK0OofxmapAiZDI1S4Q%2BR9016ucaP5783GyluANKACKnmBPbUIGxFAw5HHRt5zWy9hzoSzJH%2FSY3e7ZJvH7FC7DxBXI6Mmlw2j2Tw6P1GpuBxH%2BDPocmFUYlb4rUxPGuo7t1Owz7e%2F5dTJXzrgs7Qle9zAVR1xmxlwfWSYppBfUG46%2BbtFp7NtP4x4%2F0bMMBBex%2FJS%2FmTypgbFNO6vHRq0Qfyx9BkFkxJPXKeCREPolBSZ%2FP7x%2FNfTGK4UrOj6Q3FnusQbD%2Br4pCUnikhsNZbq4lGwuYIb9bnC3dpJgJrXpRDVih0QHD8VzLT97IO83to0niBSJdHUm6yBM2JjGURBENi%2BngF1ImwgarpNkfBs6n3HZGsjVGF1mQyN1zM2KtknFORG8k9XLtGAqdmKrww6ZEdA9ujANwOT1ADkPrHNShyhFrfmRN4UZEQWhY%2BCKV%2BR6BBZR5OLfXj%2Bf9qWfTcN5fSvm47%2Bm4%2F07kiULeveNJ9Foe3lRoWEB0v4E7k9hgA3lc63YomtJfXvobZOngiDOqtpdGDEDuGxFLnFO2OlLkXDIGuY%2BSbhdGZ9bHx3BX9%2FP0XRWxtR8KnYT2PCxdoCPIWwqhCR1%2FmdYWz11luWuyrrUZZcyD0Vem1IhV6TRsmyzrL3UduuAHPde0u9URYiRqDyTVYbhQcmsGh9gKbO959ttSrJVhPP71%2BMib53dgc7rgHRnJqaqIRGKIdhTiImwt5QcrG5BcqsVcQCRGhsxOJgKnSEEmQ0hGY9wSTOS%2B5p3WCYin1gVqzbBg66wxz4bwOuSA4sgg1wMBK9Zo%2Bfv9ptIGcgZDQ85hJPJBrne0OwrYNiNmk416iU9d4mluL6Aey1nMOgK1HRBe44RbA4yiGACuJlyJFo7mzSG7WhkFfm%2BFcRrALWvm92Rkl0swbi5LE0j%2Fe%2FzRgtQSsrHed1x5fe9k3oRwcErkQIvTdMKtZ7QbxrkCTZn2YpbbJ%2F%2BfFUEVqr23I2nY671HIHh2IvwTv0t5yTr6vW3fM9J164Cr2sYo1HAiLYz%2Biah%2Bf%2F%2BUYlKyUZp03tbWXP0tf0RpQndEnLCBzWihvVA18kerDk1wtJerolJL7aISS7HmDwfjF88pcCWNLLxcJy6dZR9S72pD%2Bho0S0XomYyIMKscoLN%2FRf9z%2Ft3ntRZ9xKJp5B5hb9byyHHFg5WGgN1jEvN3gfhD%2Fwf6kvlKupdAv5sl7aJJohfHMIqZn%2BMMaET13CJiO992g%2B9WXiIqEP%2FrT6f%2FMtpF1Ek4daHvcZxcP8%2Fo%2FdHGqnoht7SzlonWiW%2FdZwvPab3T%2FBqEr9IAUIatoZtrnLjJd7N25P4cmlZx3QeFSiLS%2BRsPEvuu2vhFVZa2Cqwcl%2FZ1kz8tsAhuzafiBi9r%2Bcf6XTXMm5zaZWJt3Fi0mzh4WWe2%2BhTMopa2ZRzmRrHtj14HM1qzHvw9N5t07o6Kt6Rx23vD6gG6BIpfOCAHtYrUduSkEvTyD177N3PGHZV%2FwMbYVHfyccOjo9%2Bd996sxMfTdRiOR31lYg4FwFaRxFBpdl9xzjn8fmixbwiUqJhyhBrFAgx1EvGbzw9K5QYfZmWZzlAy9yyyog94%2Bv%2F4zWc8c1JUXCDvnOiNoRUys151bAVJPZIvKEV5H6ZpBjcupZt9%2BWSH9y9DkReXqGPEIbhe3DvT8MK9%2BxeAvq0EO3fKBCpZL5W33ggGxED5e%2F91XWaJxhiK1ARITpeI8GAjRhkaKss7rKmMHub06Gnjbd4R8pM2ed62XJf1laFJnsOXY%2BgHm3OZkvznntPzMlarLw3aeM8B2DURnmY1o5z4%2BP%2F%2FyM%2BmJaJ9ZRGuQZ0PjKAPKuRDCg6rUlY3011PJAbeGrNScfOgNETJRwfw5NKko8b0%2FT0cUlVEzNIUNZutjY7O2UG9wA1SAWWGDllcooz4fx%2F9ArXTjWDSIYPBMR6bZnnCVCIvJhONh7%2BOaxbBsHlykWzmCY%2FsyNvPiVQ5%2FDE02Ziy6ivK8ywAnmxekEYUGnkPQ1vE0%2BGk8RPduBLLvoSP4ePyX0LMNSHo1574PW6oKsl%2Bpz8G36Bu0UXScwW2Jdk7LQ1%2FM8WCgh3jo0fzifg1NYggNcwAW1xRQRXi7hsfYhzviwPdjV8EXjCpuXAKY1j%2BZ%2F4%2FXv3aDOk8I9bEzQGa%2BH4PC0lLPJsZl2%2FL18x0V78dtBZZbbdmcQweEh%2Bo1Zhco%2FAxN1uTW2U5pA7%2BOWVjQeNCoE6Xm1T2nNAp5xEgYT5E85J4wfJqP538cEzP0pcwQCMxb%2F%2FZCCTp%2FZDGRIlrZTyQrS3j3acySPe9zmOVKuP6A1GemiMgMBX7faVtSeieGGLyaB8ZHFZ4jr3aRl33aPqU%2FV35wH69zz6A%2Fnv9rs95B99dLw3LFtcTFzmtAlknwfD5eePBzuD%2F9XNXwYCxEG%2Bjk9cySAamMsI77Na8H6Z1XAxeP2%2FzJXqMT6PjndwuARNMZtU0HiOEW%2BFhmXzg8JXweABM4X%2ByZiXASUPMxhoXj7oRX%2FsBsbd%2BDmJOKZj80nv28uzq98syBD5Nfo9SUdiD7jx37TeA7a546cM3Wf7IfDuIcjV%2FW%2BeFzatiOcXddJEaHo30c%2F6IVu3mrDdfX%2ByxiGCfV6LBOh87%2BPdRvufbW9NQwLAr1qMf%2FurvifpbGTYseg8T7ClmVUrSJpTTiNishj5R9QH51h2qwY3SdQ9T64PVQLsVZKP14%2F9eOj6C913q1PzcSMMZXWEbco75vGwOMG723r4szeg6LgYqAMAh%2FsBauEMFjOKhSo%2BpHsaJnH5sw4PYTDAKmVJdV6xr48oS9uwSLnXetIi80s97Wj4%2F3v77uQ75RYFsFe0%2BzkwS6Y8hur12VA7YrlXvbe63nvN7VzgtOESGBM5WBPK7ex1btgux5eOksIUMK5plisi6g6ghsZtbX5cH4Jw6E0sFcINefzs%2Ft4%2BtndSwQzry3uJp3LS8W9N8z26X5uvHtTrDt4lgom2MNg47T4m%2F1TRFE8JFzyhmiYbcj%2FCMwe2MNwcjA8CW1dURXQ0IBE6VagEHpzVo2uyzYj%2Bf7eP0LKFolh7G12Od3gNHA4YpIYgZoVGIy%2Bf48JPfGKmPAvOYIbmv3s5Rf99eQlfCr0Pe%2FI3tEK0IQPJkh4sf8Uy%2B8Z%2F8Dw49g%2BDmUrS5eB12fj8OfmcZD7cwrPpnsM%2B%2BDK5UF%2FTXG612kBnGdh4TEcKZqJwpyrzm1vEZEyKwpfjoM4%2BgTup%2BXOUdt3OyTeDKSpfktP3MGlnJhRyJ5dlWzgXBhO1IPDwKr5%2BP498SDnBcgzEGfXCYX%2BrmTCv8%2FjSPEB%2BxuCdvtMNplZY29tJNkfm%2BSceW2ra8hACHHslBeSCk%2Bvm%2B168iRLq7EvAiR1LY9SHm7GTe0U7QtTQK9CuE%2F3v%2F0OHmjY7bOEZnfp3EThHzcIwjeNSL5MtCRC4dstW0jl%2F1VidHKDrvs%2FWX8zqTOVobOyGIXTZAUg6TNmAX3akHMYzcGvlofCuRdPgs0vWdi9grEFf3x9XMJMldScxVLZwPtNt4I5ucNJ3M4cR8bevFUVFuUUptbd8QAzSlJi5c5%2BDV4pY7cV2r92g0jlCFuTit6UJLE2pQT4gnBSxBn4rLB3lRFjCwHwgHB%2BcfrP7Ole%2BleUn%2BoRN2lPbQEUqV1XnrDrmOvkqezzAelJkQOvASJJ2k3NPhTFctKvRzflI%2FtJkil5lWpG0fguxxbEfuC4WNyCMPNpoGKPPqSi6Ee179%2BHv6JNH3ahRie7WiisM47r%2FzybHBBWvC0JZJY1FoWO3SuUT%2BEE7H39x0OnvN5me9rMSvGs3U2wh1bq6nM1uiGDOFE9ZljNL%2FGnNrz0N0qZISVQiMhfd7%2FZT7Hc2FtaKG5%2F%2BpHM2Ne5x7mlzh1OfO8tZUb4riI34LPVel5h4dCO2YLIlmQaT3WRKcLPcriHILBNJHtiiahjpLe13y%2BQ%2F2T0jO7xPeaZ13Yfvz%2Bm1dnagZoU0lYVQ6TkSIxQTVGHn9yNAbXEnv84dzrQeSX6Wxqn3e4VPDO4ZbddDY8He8vTsGgII1c%2B6T186tSpXTH%2Bw6YYXwMxmmozM0%2BiVQumldvPj7%2FeIyVz6%2B8WbzmyHvnt7cAbSwHSrJ7Z2d9yXZ%2BKepdDxfR5nMhP3f46PdYm4mB5uiYHkeXRrClbCE3joZVnNZ8Q27hFmbvs4U6LkBtcSWuweiHlLF%2F3P%2FTUgYXdT8HLpaPOq%2FoYULrvNa6zMwPRSNHHINnJ3lYq0Tl%2F3WHU1e65JnHikQpjJgyMdfRtRmJVrWIYWdXrOBQjrOycY2956vPyJLPCwPNFnOUHz9%2FwraVQOVnIimq7arnqXNc1lTy4vR73gHqq2YzZ%2FeJbwLR%2Fs8dXhB3Ol7rvCIAld17uRiqZCOzFRghz4Z04H2pLG7GeVdGS3YIj8KEWJQSNJaDfDz7jUIrBKDorsI4iGk9jy07tAizWAk1HGw9L3hs6vOOd5WW5fcdbrNd7CAKGeArU9vTvCx71Z4Ary%2FQlOJWAKH7uys8PA3YzAikrsBvIB6f4t7n6NSHZU5w%2BV5P%2F%2F4WvNn5jk92C3FStiCjE3dIAUYz%2B92B3z1v%2FY87%2FGB%2Ba5JSzwN3Q9%2FP7bKUdcKm4xlroWpFmBN8%2B4lxz6mO1BQEgktWLM8L4M8qP97%2F%2Fnhr4dx9UZB4wVW56RMGnC9N2%2FzeA8TC4YE9nQuk1bBw%2Fb7K5j3nipAIHs5eePpCFsuP9xfe2kt4q6fTQPBbkPLOSZm%2B1FlCXRZUqqbinpAHmY%2Fn%2F%2FrRS3EFyS4C4b2AUNbbdxv%2FvMPTQUdc9JpXws%2BLgdjiOfnjDs8yUx6zl%2BVBXOiTWVyc33k9x6jwR2r3vszpx%2FXVosJN7kAa4ox01IK2hHYDRH%2B%2B%2FIMOes4rstnMQg7Euly3n6z8vMPVrIX32es2y9trmTZM%2FrjKptpS319y%2FW6dbHxVQc%2BvEDwRCqK5y3ymsiGCuDu6EsE4mV8x3Gfpc96N%2BcZDn4f%2Fv%2BQgCz7qVkKJfuYstrmuGaDLmF%2F%2FJmaZ5NVqcPEvV9nUjcp3YQD5TyC8mrBIDBIzydv7%2Fr4BSWCYyPJ12PkVu%2FW4MerNpMn7twjIz%2Ff%2Ff%2BUrX%2FnKV77yla985Stf%2BcpXvvKVr3zlK1%2F5yle%2B8pWvfOUrX%2FnKV77yla985Stf%2BcpXvvKVr3zlK1%2F5yle%2B8pWvfOUrX%2FnKV77yla985Stf%2BcpXvvKVr3zlK1%2F5yle%2B8pWvfOUrX%2FnKV77yla985Stf%2BcpXvvKVr3zlK1%2F5yle%2B8pWvfOUrX%2FnKV77yla985Stf%2BcpXvvKVr3zlK1%2F5yle%2B8pWvfOUrX%2FnKV77yFYD%2FB92aGZl3Kab3AAAyGmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPgogICAgICAgICA8eG1wOkNyZWF0b3JUb29sPkFkb2JlIEZpcmV3b3JrcyBDUzYgKE1hY2ludG9zaCk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMTMtMTAtMjFUMTQ6NDU6NTZaPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMTMtMTAtMjFUMTQ6NTU6MjBaPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24%2BCiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI%2BCiAgICAgICAgIDxkYzpmb3JtYXQ%2BaW1hZ2UvcG5nPC9kYzpmb3JtYXQ%2BCiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY%2BCjwveDp4bXBtZXRhPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgIAo8P3hwYWNrZXQgZW5kPSJ3Ij8%2Be2F%2F5wAAAQBJREFUeJzt0UENACAQwLAD%2F57hjQL2aBUs2ZozZ8jYvwN4GRJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSIwhMYbEGBJjSMwF600CxovzoBMAAAAASUVORK5CYII%3D"/> + </foreignObject> +</svg> diff --git a/layout/reftests/svg/foreignObject-img-ref.html b/layout/reftests/svg/foreignObject-img-ref.html new file mode 100644 index 0000000000..1829e76cbb --- /dev/null +++ b/layout/reftests/svg/foreignObject-img-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<style> +div { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color: lime; } +</style> +<div></div> diff --git a/layout/reftests/svg/foreignObject-img.html b/layout/reftests/svg/foreignObject-img.html new file mode 100644 index 0000000000..7245267a2a --- /dev/null +++ b/layout/reftests/svg/foreignObject-img.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<style> +img { position: absolute; top: 0; left: 0; } +</style> +<img src="foreignObject-img-helper.svg"> +<script> + +// The load of the data: URL inside foreignObject-img-helper.svg does not block +// the load event of the <img> in this document, so we loop, painting the image +// to a canvas, to tell when it's ready. (So if this test fails, it will fail +// by timing out.) + +var img = document.querySelector("img"); +var canvas = document.createElement("canvas"); +var ctx = canvas.getContext("2d"); + +function paint() { + ctx.drawImage(img, 0, 0); + if (ctx.getImageData(0, 0, 1, 1).data[1] == 255) { + document.documentElement.className = ""; + } else { + requestAnimationFrame(paint); + } +} + +paint(); + +</script> diff --git a/layout/reftests/svg/foreignObject-move-repaint-01.svg b/layout/reftests/svg/foreignObject-move-repaint-01.svg new file mode 100644 index 0000000000..43dd296286 --- /dev/null +++ b/layout/reftests/svg/foreignObject-move-repaint-01.svg @@ -0,0 +1,41 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:html="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + + <title>Testcase for repaint of the area previously covered by a foreignObject</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=369992 --> + + <script type="application/javascript"> + +// The green rect is initially covered by the red div. After the div +// has rendered the foreignObject (and thus div) is moved out +// of the viewport which should then be filled by the green rect as a result. + + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + document.getElementById('fo').setAttribute('y', '100%'); + + document.documentElement.removeAttribute('class'); + } + </script> + + <rect width="100%" height="100%" fill="red"/> + + <!-- Create the "pass" rect using a foreignObject so the testcase doesn't + seem to pass if foreignObject is not supported --> + <foreignObject width="100%" height="100%"> + <html:div style="display:block;width:100%;height:100%;background:lime;"/> + </foreignObject> + + <foreignObject id="fo" width="100%" height="100%"> + <html:div style="display:block;width:100%;height:100%;background:red;"/> + </foreignObject> + +</svg> diff --git a/layout/reftests/svg/foreignObject-overflow-01.svg b/layout/reftests/svg/foreignObject-overflow-01.svg new file mode 100644 index 0000000000..e75c1b1389 --- /dev/null +++ b/layout/reftests/svg/foreignObject-overflow-01.svg @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> + + <title>Testcase: foreignObject should clip its content</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=378897 --> + + <rect width="100%" height="100%" fill="red"/> + + <!-- Create the "pass" rect using a foreignObject so the testcase doesn't + seem to pass if foreignObject is not supported --> + <foreignObject width="100%" height="100%"> + <html:div style="display:block; height:100%; width:100%; background: lime;"/> + </foreignObject> + + <!-- test 'overflow' --> + <foreignObject x="-10" y="-10" width="10" height="10"> + <html:div style="display:block; height:10000px; width:10000px; background:red;"/> + </foreignObject> + +</svg> diff --git a/layout/reftests/svg/foreignObject-start-hidden-01.svg b/layout/reftests/svg/foreignObject-start-hidden-01.svg new file mode 100644 index 0000000000..d6464b7f00 --- /dev/null +++ b/layout/reftests/svg/foreignObject-start-hidden-01.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="reftest-wait" + height="0" width="0"> + <script> + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + document.documentElement.removeAttribute("width"); + document.documentElement.removeAttribute("height"); + document.documentElement.removeAttribute("class"); + } + </script> + <rect width="100%" height="100%" fill="red"/> + <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/foreignObject-start-hidden-02.svg b/layout/reftests/svg/foreignObject-start-hidden-02.svg new file mode 100644 index 0000000000..fc95ef5acf --- /dev/null +++ b/layout/reftests/svg/foreignObject-start-hidden-02.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="reftest-wait" + height="0" width="0" viewBox="0 0 50 50" preserveAspectRatio="none"> + <script> + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + document.documentElement.removeAttribute("width"); + document.documentElement.removeAttribute("height"); + document.documentElement.removeAttribute("class"); + } + </script> + <rect width="100%" height="100%" fill="red"/> + <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/foreignObject-style-change-01.svg b/layout/reftests/svg/foreignObject-style-change-01.svg new file mode 100644 index 0000000000..eaf52c6b31 --- /dev/null +++ b/layout/reftests/svg/foreignObject-style-change-01.svg @@ -0,0 +1,30 @@ +<!-- + 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" + class="reftest-wait"> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=708155 --> + + <title>Testcase for style change on foreignObject</title> + + <script> + + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + document.getElementById('fo').style.opacity = '1'; + + document.documentElement.removeAttribute('class'); + } + </script> + + <rect width="100%" height="100%" fill="red"/> + <foreignObject id="fo" width="100%" height="100%" opacity="0"> + <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%;background-color: lime;"> + </div> + </foreignObject> + +</svg> diff --git a/layout/reftests/svg/foreignObject-vertical-01-ref.svg b/layout/reftests/svg/foreignObject-vertical-01-ref.svg new file mode 100644 index 0000000000..2f468e7647 --- /dev/null +++ b/layout/reftests/svg/foreignObject-vertical-01-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + + <rect width="100" height="200" fill="lime"/> + +</svg> diff --git a/layout/reftests/svg/foreignObject-vertical-01.svg b/layout/reftests/svg/foreignObject-vertical-01.svg new file mode 100644 index 0000000000..ea6d80b6f8 --- /dev/null +++ b/layout/reftests/svg/foreignObject-vertical-01.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + + <rect width="100" height="200" fill="red"/> + <foreignObject width="100" height="200" style="writing-mode: vertical-lr;"> + <div xmlns="http://www.w3.org/1999/xhtml" + style="background:lime; display:block; width:100%; height:100%;"/> + </foreignObject> + +</svg> diff --git a/layout/reftests/svg/fragid-shadow-1.html b/layout/reftests/svg/fragid-shadow-1.html new file mode 100644 index 0000000000..80ec6eb5bc --- /dev/null +++ b/layout/reftests/svg/fragid-shadow-1.html @@ -0,0 +1,22 @@ +<!doctype html> +<svg style="position: absolute; width: 0; height: 0"> + <defs> + <pattern id="rect" width="100" height="100"> + <rect fill="red" width="100" height="100" /> + </pattern> + </defs> +</svg> +<div id="host"></div> +<script> + // Should peek the pattern from the shadow root (green), not from the document (red). + host.attachShadow({ mode: "open" }).innerHTML = ` + <svg width="100" height="100"> + <defs> + <pattern id="rect" width="100" height="100"> + <rect fill="lime" width="100" height="100" /> + </pattern> + </defs> + <rect fill="url(#rect)" width="100" height="100" /> + </svg> + `; +</script> diff --git a/layout/reftests/svg/fragid-shadow-10.html b/layout/reftests/svg/fragid-shadow-10.html new file mode 100644 index 0000000000..a334a86aee --- /dev/null +++ b/layout/reftests/svg/fragid-shadow-10.html @@ -0,0 +1,18 @@ +<!doctype html> +<style> + #shadow rect { + fill: red !important; + } +</style> +<div id="host"></div> +<svg height="0"> + <!-- use an empty g to force fragid-shadow-resource.svg to load before onload --> + <use href="fragid-shadow-resource.svg#empty" /> +</svg> +<script> + host.attachShadow({ mode: "open" }).innerHTML = ` + <svg width="100" height="100"> + <use href="fragid-shadow-resource.svg#shadow" /> + </svg> + `; +</script> diff --git a/layout/reftests/svg/fragid-shadow-2.html b/layout/reftests/svg/fragid-shadow-2.html new file mode 100644 index 0000000000..55bd9edc10 --- /dev/null +++ b/layout/reftests/svg/fragid-shadow-2.html @@ -0,0 +1,17 @@ +<!doctype html> +<div id="host"></div> +<script> + // Test dynamic id changes inside the shadow root. + host.attachShadow({ mode: "open" }).innerHTML = ` + <svg width="100" height="100"> + <defs> + <pattern id="rect1" width="100" height="100"> + <rect fill="lime" width="100" height="100" /> + </pattern> + </defs> + <rect fill="url(#rect)" width="100" height="100" /> + </svg> + `; + document.body.offsetTop; + host.shadowRoot.getElementById("rect1").id = "rect"; +</script> diff --git a/layout/reftests/svg/fragid-shadow-3.html b/layout/reftests/svg/fragid-shadow-3.html new file mode 100644 index 0000000000..6ad2a491d0 --- /dev/null +++ b/layout/reftests/svg/fragid-shadow-3.html @@ -0,0 +1,14 @@ +<!doctype html> +<div id="host"></div> +<svg height="0"> + <!-- use an empty g to force fragid-shadow-resource.svg to load before onload --> + <use href="fragid-shadow-resource.svg#empty"> +</svg> +<script> + // Test that external resource URIs resolve properly inside shadow trees. + host.attachShadow({ mode: "open" }).innerHTML = ` + <svg width="100" height="100"> + <rect fill="url(fragid-shadow-resource.svg#rect)" width="100" height="100" /> + </svg> + `; +</script> diff --git a/layout/reftests/svg/fragid-shadow-4.html b/layout/reftests/svg/fragid-shadow-4.html new file mode 100644 index 0000000000..ade93f70a6 --- /dev/null +++ b/layout/reftests/svg/fragid-shadow-4.html @@ -0,0 +1,13 @@ +<!doctype html> +<div id="host"></div> +<script> + // Test references in <svg:use> work properly. + host.attachShadow({ mode: "open" }).innerHTML = ` + <svg width="100" height="100"> + <defs> + <rect fill="lime" id="rect-4" width="100" height="100"> + </defs> + <use href="#rect-4" /> + </svg> + `; +</script> diff --git a/layout/reftests/svg/fragid-shadow-5.html b/layout/reftests/svg/fragid-shadow-5.html new file mode 100644 index 0000000000..02d0d6941c --- /dev/null +++ b/layout/reftests/svg/fragid-shadow-5.html @@ -0,0 +1,13 @@ +<!doctype html> +<div id="host"></div> +<script> + // Test absolute URIs inside shadow trees, which behave the same way as just the fragment id. + host.attachShadow({ mode: "open" }).innerHTML = ` + <svg width="100" height="100"> + <defs> + <rect fill="lime" id="rect-5" width="100" height="100"> + </defs> + <use href="${location.href}#rect-5" /> + </svg> + `; +</script> diff --git a/layout/reftests/svg/fragid-shadow-6.html b/layout/reftests/svg/fragid-shadow-6.html new file mode 100644 index 0000000000..684f4fe71d --- /dev/null +++ b/layout/reftests/svg/fragid-shadow-6.html @@ -0,0 +1,23 @@ +<!doctype html> +<svg style="position: absolute; width: 0; height: 0"> + <defs> + <pattern id="rect" width="100" height="100"> + <rect fill="red" width="100" height="100" /> + </pattern> + </defs> +</svg> +<div id="host"></div> +<script> + // Should peek the pattern from the shadow root (green), not from the document (red), + // even though the uri is absolute. + host.attachShadow({ mode: "open" }).innerHTML = ` + <svg width="100" height="100"> + <defs> + <pattern id="rect" width="100" height="100"> + <rect fill="lime" width="100" height="100" /> + </pattern> + </defs> + <rect fill="url(${location.href}#rect)" width="100" height="100" /> + </svg> + `; +</script> diff --git a/layout/reftests/svg/fragid-shadow-7.html b/layout/reftests/svg/fragid-shadow-7.html new file mode 100644 index 0000000000..2f4702d9a1 --- /dev/null +++ b/layout/reftests/svg/fragid-shadow-7.html @@ -0,0 +1,28 @@ +<!doctype html> +<svg style="position: absolute; width: 0; height: 0"> + <defs> + <pattern id="rect" width="100" height="100"> + <rect fill="red" width="100" height="100" /> + </pattern> + </defs> +</svg> +<div id="host"></div> +<script> + // Test references from a <svg:use> subtree. + host.attachShadow({ mode: "open" }).innerHTML = ` + <svg width="100" height="100"> + <defs> + <pattern id="rect" width="100" height="100"> + <rect fill="red" width="100" height="100" /> + </pattern> + <symbol id="useme"> + <pattern id="rect" width="100" height="100"> + <rect fill="lime" width="100" height="100" /> + </pattern> + <rect fill="url(#rect)" width="100" height="100" /> + </symbol> + </defs> + <use href="#useme" /> + </svg> + `; +</script> diff --git a/layout/reftests/svg/fragid-shadow-8.html b/layout/reftests/svg/fragid-shadow-8.html new file mode 100644 index 0000000000..169fdd6ecc --- /dev/null +++ b/layout/reftests/svg/fragid-shadow-8.html @@ -0,0 +1,15 @@ +<!doctype html> +<svg width="100" height="100"> + <defs> + <pattern id="rect" width="100" height="100"> + <rect fill="red" width="100" height="100" /> + </pattern> + <symbol id="useme"> + <pattern id="rect" width="100" height="100"> + <rect fill="lime" width="100" height="100" /> + </pattern> + <rect fill="url(#rect)" width="100" height="100" /> + </symbol> + </defs> + <use href="#useme" /> +</svg> diff --git a/layout/reftests/svg/fragid-shadow-9.html b/layout/reftests/svg/fragid-shadow-9.html new file mode 100644 index 0000000000..c689d76590 --- /dev/null +++ b/layout/reftests/svg/fragid-shadow-9.html @@ -0,0 +1,24 @@ +<!doctype html> +<style> + #shadow { + fill: red; + } +</style> +<div id="host"></div> +<script> + host.attachShadow({ mode: "open" }).innerHTML = ` + <style> + #shadow { + fill: lime; + } + </style> + <svg width="100" height="100"> + <defs> + <g id="shadow" width="100" height="100"> + <rect width="100" height="100" /> + </g> + </defs> + <use href="#shadow" /> + </svg> + `; +</script> diff --git a/layout/reftests/svg/fragid-shadow-ref.html b/layout/reftests/svg/fragid-shadow-ref.html new file mode 100644 index 0000000000..e943ddf7fd --- /dev/null +++ b/layout/reftests/svg/fragid-shadow-ref.html @@ -0,0 +1,4 @@ +<!doctype html> +<svg width="100" height="100"> + <rect fill="lime" width="100" height="100" /> +</svg> diff --git a/layout/reftests/svg/fragid-shadow-resource.svg b/layout/reftests/svg/fragid-shadow-resource.svg new file mode 100644 index 0000000000..0a2f2359b8 --- /dev/null +++ b/layout/reftests/svg/fragid-shadow-resource.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <g id="empty" /> + <pattern id="rect" width="100" height="100"> + <rect fill="lime" width="100" height="100" /> + </pattern> + <g id="shadow" width="100" height="100"> + <rect fill="lime" width="100" height="100" /> + </g> + </defs> +</svg> diff --git a/layout/reftests/svg/fragmentIdentifier-01.xhtml b/layout/reftests/svg/fragmentIdentifier-01.xhtml new file mode 100644 index 0000000000..5a2682825e --- /dev/null +++ b/layout/reftests/svg/fragmentIdentifier-01.xhtml @@ -0,0 +1,31 @@ +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Testcases for SVG fragment identifiers</title> + <style> + +iframe { + border: none; +} + + </style> + </head> + <body style="background-color: lime;"> + <div> + <iframe scrolling="no" type="image/svg+xml" width="100" height="100" src="fragmentIdentifier-rect-01.svg#limeView" /> + <iframe scrolling="no" type="image/svg+xml" width="100" height="100" src="fragmentIdentifier-rect-01.svg#svgView(viewBox(0,200,100,100))" /> + <iframe scrolling="no" type="image/svg+xml" width="100" height="100" src="fragmentIdentifier-rect-01.svg#view" /> + </div> + <div> + <iframe scrolling="no" type="image/svg+xml" width="100" height="100" src="fragmentIdentifier-rect-01.svg#svgView(viewBox(0,0,100,100);transform(translate(0,200)))" /> + <iframe scrolling="no" id="replace" type="image/svg+xml" width="100" height="100" src="fragmentIdentifier-rect-01.svg#svgView(viewBox(0,0,100,100);transform(translate(0,0))" /> + <iframe scrolling="no" id="remove" type="image/svg+xml" width="100" height="100" src="fragmentIdentifier-rect-01.svg#svgView(viewBox(0,200,100,100);transform(translate(0,200)))" /> + </div> + <script type="text/javascript"> + window.onload = function() { + document.getElementById("replace").setAttribute("src","fragmentIdentifier-rect-01.svg#svgView(viewBox(0,0,100,100);transform(translate(0,200)))"); + document.getElementById("remove").setAttribute("src","fragmentIdentifier-rect-01.svg#svgView(viewBox(0,200,100,100))"); + document.documentElement.removeAttribute("class"); + } + </script> + </body> +</html> diff --git a/layout/reftests/svg/fragmentIdentifier-rect-01.svg b/layout/reftests/svg/fragmentIdentifier-rect-01.svg new file mode 100644 index 0000000000..29edaa4917 --- /dev/null +++ b/layout/reftests/svg/fragmentIdentifier-rect-01.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <style> + view:target + a rect { + fill: lime; + } + </style> + + <view id="limeView" viewBox="0 200 100 100"/> + + <rect fill="red" height="100%" width="100%"/> + <rect fill="lime" x="0" y="200" height="100" width="100"/> + + <view id="view" viewBox="200 200 100 100"/> + <a xlink:href="#view"> + <rect fill="red" x="200" y="200" height="100" width="100"/> + </a> +</svg> diff --git a/layout/reftests/svg/g-transform-01.svg b/layout/reftests/svg/g-transform-01.svg new file mode 100644 index 0000000000..bd4071abb5 --- /dev/null +++ b/layout/reftests/svg/g-transform-01.svg @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <script> + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + document.getElementById("g").transform.baseVal.getItem(0).setTranslate(20, 20); + document.getElementById("r2").transform.baseVal.getItem(0).setTranslate(70, 70); + document.getElementById("r1").transform.baseVal.getItem(0).setTranslate(180, 180); + + document.documentElement.removeAttribute("class"); + } + </script> + <rect width="100%" height="100%" fill="lime"/> + <g transform="translate(20 20)"> + <rect transform="translate(70 70)" width="40" height="40" fill="red"/> + <rect transform="translate(180 180)" width="40" height="40" fill="red"/> + </g> + <g transform="translate(0 1)" id="g"> + <rect transform="translate(49 49)" width="42" height="42" id="r2" fill="lime"/> + <rect transform="translate(89 89)" width="42" height="42" id="r1" fill="lime"/> + </g> +</svg> diff --git a/layout/reftests/svg/geometry-properties-in-css-ref.html b/layout/reftests/svg/geometry-properties-in-css-ref.html new file mode 100644 index 0000000000..8fb46ac7dd --- /dev/null +++ b/layout/reftests/svg/geometry-properties-in-css-ref.html @@ -0,0 +1,25 @@ +<!doctype html> +<svg width="800" height="600"> + <g> + <rect x="40" y="40" width="100" height="100" rx="30" ry="30" fill="purple" /> + <rect x="40" y="150" width="30" height="200" rx="20" ry="20" fill="magenta" /> + </g> + <circle cx="170" cy="340" r="70px" fill="pink" /> + <g> + <circle cx="230" cy="130" r="70px" fill="skyblue" /> + </g> + <svg x="300" width="200" height="200" viewBox="0 0 100 100"> + <ellipse cx="30" cy="100" rx="20" ry="40" fill="cyan" /> + <ellipse cx="80" cy="50" rx="20" ry="40" fill="navy" /> + </svg> + <foreignObject x="450" y="200" width="80" height="130"> + <svg> + <rect width="50" height="50" rx="4" ry="4" fill="brown" /> + </svg> + </foreignObject> + <rect x="300" y="260" width="50" height="50" fill="red" /> + <defs> + <rect id="r3" width="80" height="80" fill="skyblue" /> + </defs> + <use x="400" y="310" href="#r3"/> +</svg> diff --git a/layout/reftests/svg/geometry-properties-in-css.html b/layout/reftests/svg/geometry-properties-in-css.html new file mode 100644 index 0000000000..a17795f3f3 --- /dev/null +++ b/layout/reftests/svg/geometry-properties-in-css.html @@ -0,0 +1,92 @@ +<!doctype html> +<style> + svg { + width: 800px; + height: 600px; + font-size: 10px; + } + svg svg { + width: 80px; + height: 80px; + } + rect:first-child { + x: 40px; + y: calc(5% + 10px); + width: calc(80px + 2em); + height: 10em; + rx: auto; + ry: 5%; + cx: 100px; + cy: 200px; + } + circle { + r: calc(70px); + } + g > #c2 { + cx: 80px; + cy: calc(20% + 10px); + x: 40px; + y: calc(5% + 10px); + } + svg > svg > ellipse { + cx: 30%; + cy: 100px; + rx: 20px; + ry: 40px; + } + svg > svg > ellipse:nth-child(2) { + transform: translate(50px, -50px); + } + svg ellipse { + cx: 10px; + cy: 10px; + rx: 10px; + ry: 10px; + } + foreignObject { + transform: translate(450px,0); + y: 200px; + width: 80px; + height: 130px; + } + #r2 { + width: 50px; + height:50px; + } + svg image { + x: 300px; + y: 260px; + height: 50px; + } + use { + x:400px; + y:310px; + } +</style> +<svg> + <g> + <rect x="0" y="-10" width="30px" height="10px" rx="-5px" ry="auto" fill="purple" /> + <rect x=" 40px /* some nonsense */ " y="150" width="30" height="20em" rx="20px" ry="20px" fill="magenta" /> + </g> + <circle cx="/* more nonsense */ 170" cy="340" r="-5px" fill="pink" /> + <g transform="translate(150,0)"> + <circle id="c2" cx="20" cy="40" fill="skyblue" /> + </g> + <svg x="300" width="200px" height="200px" viewBox="0 0 100 100"> + <ellipse fill="cyan" /> + <ellipse fill="navy" /> + </svg> + <foreignObject> + <svg> + <rect id="r2" style="x:0;y:0" fill="brown" /> + </svg> + </foreignObject> + <image href="data:image/svg+xml,<svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='red' /></svg>" /> + <defs> + <g id="g"> + <rect display="none"/> + <rect width="80" height="80" fill="skyblue" /> + </g> + </defs> + <use href="#g"/> +</svg> diff --git a/layout/reftests/svg/getElementById-a-element-01.svg b/layout/reftests/svg/getElementById-a-element-01.svg new file mode 100644 index 0000000000..272e312913 --- /dev/null +++ b/layout/reftests/svg/getElementById-a-element-01.svg @@ -0,0 +1,27 @@ +<!-- + 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" + onload="handleLoad(evt);"> + + <title>Testcase for getElementById finding <a> element</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=320724 --> + + <script type="application/ecmascript"> + <![CDATA[ + +function handleLoad(event) +{ + document.getElementById('a').setAttribute('fill', 'lime'); +} + + ]]> + </script> + + <a id="a" fill="red"> + <rect width="100%" height="100%" fill="inherit"/> + </a> + +</svg> diff --git a/layout/reftests/svg/gradient-href-01.html b/layout/reftests/svg/gradient-href-01.html new file mode 100644 index 0000000000..32a5fb35b8 --- /dev/null +++ b/layout/reftests/svg/gradient-href-01.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <head> + <base href="/"/> + </head> + <body bgcolor="lime"> + <svg width="100%" height="100%"> + <defs> + <linearGradient id="b"> + <stop offset="0" stop-color="lime"/> + <stop offset="1" stop-color="lime"/> + </linearGradient> + <linearGradient id="a" xlink:href="#b"/> + </defs> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="url(#a)"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/gradient-live-01-ref.svg b/layout/reftests/svg/gradient-live-01-ref.svg new file mode 100644 index 0000000000..2b02d6926c --- /dev/null +++ b/layout/reftests/svg/gradient-live-01-ref.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" font-size="80"> + +<linearGradient id="grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"> + <stop id="green" stop-color="#00dd00" offset="0"/> + <stop id="blue" stop-color="#0000dd" offset="0.5"/> + <stop id="magenta" stop-color="magenta" offset="1"/> +</linearGradient> +<rect x="20" y="20" width="440" height="80" fill="url(#grad1)" /> + +<linearGradient id="grad2" xlink:href="#grad1"/> +<rect x="20" y="150" width="440" height="80" fill="url(#grad2)" /> +<text x="20" y="300" width="440" height="80" fill="url(#grad1)">gradiation</text> +<text x="20" y="400" width="440" height="80" fill="url(#grad2)">gradiation</text> + +</svg> diff --git a/layout/reftests/svg/gradient-live-01a.svg b/layout/reftests/svg/gradient-live-01a.svg new file mode 100644 index 0000000000..4c3c1633fe --- /dev/null +++ b/layout/reftests/svg/gradient-live-01a.svg @@ -0,0 +1,30 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" font-size="80"> + +<script type="application/javascript"> + document.addEventListener("MozReftestInvalidate", doTest, false); + + function doTest() { + document.getElementById('grad1').removeChild(document.getElementById('red')); + document.documentElement.removeAttribute('class'); + } + +</script> + +<!-- Tests that gradients are live to stop removal. --> + +<linearGradient id="grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"> + <stop id="green" stop-color="#00dd00" offset="0"/> + <stop id="blue" stop-color="#0000dd" offset="0.5"/> + <stop id="red" stop-color="red" offset="0.6"/> + <stop id="magenta" stop-color="magenta" offset="1"/> +</linearGradient> +<rect x="20" y="20" width="440" height="80" fill="url(#grad1)" /> + +<linearGradient id="grad2" xlink:href="#grad1"/> +<rect x="20" y="150" width="440" height="80" fill="url(#grad2)" /> +<text x="20" y="300" width="440" height="80" fill="url(#grad1)">gradiation</text> +<text x="20" y="400" width="440" height="80" fill="url(#grad2)">gradiation</text> + +</svg> diff --git a/layout/reftests/svg/gradient-live-01b.svg b/layout/reftests/svg/gradient-live-01b.svg new file mode 100644 index 0000000000..d5f134b915 --- /dev/null +++ b/layout/reftests/svg/gradient-live-01b.svg @@ -0,0 +1,28 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" font-size="80"> + +<script type="application/javascript"> + document.addEventListener("MozReftestInvalidate", doTest, false); + + function doTest() { + document.getElementById('blue').setAttribute('offset', '0.5'); + document.documentElement.removeAttribute('class'); + } +</script> + +<!-- Tests that gradients are live to stop offset changes. --> + +<linearGradient id="grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"> + <stop id="green" stop-color="#00dd00" offset="0"/> + <stop id="blue" stop-color="#0000dd" offset="0.9"/> + <stop id="magenta" stop-color="magenta" offset="1"/> +</linearGradient> +<rect x="20" y="20" width="440" height="80" fill="url(#grad1)" /> + +<linearGradient id="grad2" xlink:href="#grad1"/> +<rect x="20" y="150" width="440" height="80" fill="url(#grad2)" /> +<text x="20" y="300" width="440" height="80" fill="url(#grad1)">gradiation</text> +<text x="20" y="400" width="440" height="80" fill="url(#grad2)">gradiation</text> + +</svg> diff --git a/layout/reftests/svg/gradient-live-01c.svg b/layout/reftests/svg/gradient-live-01c.svg new file mode 100644 index 0000000000..5cf26a20ed --- /dev/null +++ b/layout/reftests/svg/gradient-live-01c.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" font-size="80"> + + <script type="application/javascript"> + document.addEventListener("MozReftestInvalidate", doTest, false); + + function doTest() { + document.getElementById('blue').setAttribute('stop-color', '#0000dd'); + document.documentElement.removeAttribute('class'); + } + + </script> + +<!-- Tests that gradients are live to stop color changes. --> + +<linearGradient id="grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"> + <stop id="green" stop-color="#00dd00" offset="0"/> + <stop id="blue" stop-color="red" offset="0.5"/> + <stop id="magenta" stop-color="magenta" offset="1"/> +</linearGradient> +<rect x="20" y="20" width="440" height="80" fill="url(#grad1)" /> + +<linearGradient id="grad2" xlink:href="#grad1"/> +<rect x="20" y="150" width="440" height="80" fill="url(#grad2)" /> +<text x="20" y="300" width="440" height="80" fill="url(#grad1)">gradiation</text> +<text x="20" y="400" width="440" height="80" fill="url(#grad2)">gradiation</text> + +</svg> diff --git a/layout/reftests/svg/gradient-live-01d.svg b/layout/reftests/svg/gradient-live-01d.svg new file mode 100644 index 0000000000..bbfe3098ee --- /dev/null +++ b/layout/reftests/svg/gradient-live-01d.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" font-size="80"> + +<!-- Tests that gradients are live to stop addition. --> + +<script> +document.addEventListener("MozReftestInvalidate", addBlueStop, false); + +function addBlueStop() +{ + var stop = document.createElementNS("http://www.w3.org/2000/svg", "stop"); + stop.setAttribute("stop-color", "#0000dd"); + stop.setAttribute("offset", "0.5"); + document.getElementById("grad1").insertBefore(stop, document.getElementById("magenta")); + document.documentElement.removeAttribute('class'); +} + +</script> + +<linearGradient id="grad1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"> + <stop id="green" stop-color="#00dd00" offset="0"/> + <stop id="magenta" stop-color="magenta" offset="1"/> +</linearGradient> +<rect x="20" y="20" width="440" height="80" fill="url(#grad1)" /> + +<linearGradient id="grad2" xlink:href="#grad1"/> +<rect x="20" y="150" width="440" height="80" fill="url(#grad2)" /> +<text x="20" y="300" width="440" height="80" fill="url(#grad1)">gradiation</text> +<text x="20" y="400" width="440" height="80" fill="url(#grad2)">gradiation</text> + +</svg> diff --git a/layout/reftests/svg/gradient-transform-01.svg b/layout/reftests/svg/gradient-transform-01.svg new file mode 100644 index 0000000000..5b06d7ef7f --- /dev/null +++ b/layout/reftests/svg/gradient-transform-01.svg @@ -0,0 +1,28 @@ +<!-- + 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" + viewBox="0 0 100 100" preserveAspectRatio="none"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=946529 --> + <title>Test for gradientTransform with scientific notation</title> + <desc> + Creates a horizontal linear gradient when the left half is red and the right + half is green and with a width just over twice the width of the rectangle. + + Then a gradientTransform using exponential notation shifts the gradient to + the left so that only the red part shows. + </desc> + <defs> + <linearGradient id="grad" + gradientUnits="userSpaceOnUse" + gradientTransform="translate(-1.1e2 0)" + x1="0" y1="0" x2="210" y2="0"> + <stop stop-color="red" offset="0"/> + <stop stop-color="red" offset="0.5"/> + <stop stop-color="lime" offset="0.5"/> + <stop stop-color="lime" offset="1"/> + </linearGradient> + </defs> + <rect width="100" height="100" fill="url(#grad) orange"/> +</svg> diff --git a/layout/reftests/svg/href-attr-change-restyles-ref.svg b/layout/reftests/svg/href-attr-change-restyles-ref.svg new file mode 100644 index 0000000000..3294f4e4b5 --- /dev/null +++ b/layout/reftests/svg/href-attr-change-restyles-ref.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title>Test for bug 549797 - Removing href attribute doesn't remove link styling</title>
+
+ <style type="text/css">
+ <![CDATA[
+a {
+ fill: blue;
+}
+a:link, a:visited {
+ fill: red;
+}
+ ]]>
+ </style>
+
+ <a>
+ <text x="10" y="100">Test anchor 1</text>
+ </a>
+
+ <a xlink:href="http://example.com/1">
+ <text x="10" y="200">Test anchor 2</text>
+ </a>
+
+ <a xlink:href="">
+ <text x="10" y="300">Test anchor 3</text>
+ </a>
+
+</svg>
diff --git a/layout/reftests/svg/href-attr-change-restyles.svg b/layout/reftests/svg/href-attr-change-restyles.svg new file mode 100644 index 0000000000..d418f45620 --- /dev/null +++ b/layout/reftests/svg/href-attr-change-restyles.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ onload="document.getElementById('link1').removeAttribute('xlink:href');
+ document.getElementById('link2').setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'http://example.com/1');
+ document.getElementById('link3').setAttributeNS('http://www.w3.org/1999/xlink', 'href', '');">
+
+ <title>Test for bug 549797 - Removing href attribute doesn't remove link styling</title>
+
+ <style type="text/css">
+ <![CDATA[
+a {
+ fill: blue;
+}
+a:link, a:visited {
+ fill: red;
+}
+ ]]>
+ </style>
+
+ <a id="link1" xlink:href="http://example.com/1">
+ <text x="10" y="100">Test anchor 1</text>
+ </a>
+
+ <a id="link2">
+ <text x="10" y="200">Test anchor 2</text>
+ </a>
+
+ <a id="link3">
+ <text x="10" y="300">Test anchor 3</text>
+ </a>
+
+</svg>
diff --git a/layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg b/layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg new file mode 100644 index 0000000000..9168e86355 --- /dev/null +++ b/layout/reftests/svg/image/blueRect10x10-viewBox-animPAR.svg @@ -0,0 +1,12 @@ +<!-- Helper SVG file used by some reftests --> +<!-- This file has an animated preserveAspectRatio value on the root node, so + any uses of this file via <image preserveAspectRatio="defer..."> should + end up using our *animated* preserveAspectRatio value. --> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="root" + viewBox="0 0 10 10" preserveAspectRatio="xMaxYMax"> + <set attributeName="preserveAspectRatio" to="none"/> + + <rect x="0" y="0" width="10" height="10" fill="blue"/> + <rect x="1" y="1" width="8" height="8" fill="lightblue"/> + <rect x="1" y="1" width="8" height="4" fill="teal"/> +</svg> diff --git a/layout/reftests/svg/image/blueRect10x10-viewBox.svg b/layout/reftests/svg/image/blueRect10x10-viewBox.svg new file mode 100644 index 0000000000..d5bb444a94 --- /dev/null +++ b/layout/reftests/svg/image/blueRect10x10-viewBox.svg @@ -0,0 +1,7 @@ +<!-- Helper SVG file used by some reftests --> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="root" + viewBox="0 0 10 10"> + <rect x="0" y="0" width="10" height="10" fill="blue"/> + <rect x="1" y="1" width="8" height="8" fill="lightblue"/> + <rect x="1" y="1" width="8" height="4" fill="teal"/> +</svg> diff --git a/layout/reftests/svg/image/blueRect10x10.png b/layout/reftests/svg/image/blueRect10x10.png Binary files differnew file mode 100644 index 0000000000..722e97c1eb --- /dev/null +++ b/layout/reftests/svg/image/blueRect10x10.png diff --git a/layout/reftests/svg/image/blueRect10x10.svg b/layout/reftests/svg/image/blueRect10x10.svg new file mode 100644 index 0000000000..65e4014467 --- /dev/null +++ b/layout/reftests/svg/image/blueRect10x10.svg @@ -0,0 +1,6 @@ +<!-- Helper SVG file used by some reftests --> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="root"> + <rect x="0" y="0" width="10" height="10" fill="blue"/> + <rect x="1" y="1" width="8" height="8" fill="lightblue"/> + <rect x="1" y="1" width="8" height="4" fill="teal"/> +</svg> diff --git a/layout/reftests/svg/image/image-fill-01.svg b/layout/reftests/svg/image/image-fill-01.svg new file mode 100644 index 0000000000..832be6c048 --- /dev/null +++ b/layout/reftests/svg/image/image-fill-01.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <title>Testcase to ensure that fill is ignored for images</title> + + <rect width="100%" height="100%" fill="lime"/> + <rect width="64" height="64" fill="red"/> + <image fill="none" width="64" height="64" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJFJREFUaEPt1UEOg0AMBEHz/0ez8IY5zFqqKFdLkGrHz7yz/PO9wOrv7qf/81n983uBCwAl1EYgQCD8H5eQhCTUboAAgbCBcNwdaBdIgIAlbjdAgEDYQDjuDrQLJEDAErcbIEAgbCAcdwfaBRIgYInbDRAgEDYQjrsD7QIJELDE7QYIEAgbCMfdgXaBBAhkS3wAXsqyIo0zj4gAAAAASUVORK5CYII="/> + +</svg> diff --git a/layout/reftests/svg/image/image-fill-opacity-ref.html b/layout/reftests/svg/image/image-fill-opacity-ref.html new file mode 100644 index 0000000000..92b1508cac --- /dev/null +++ b/layout/reftests/svg/image/image-fill-opacity-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<svg height=400 width=400> + <rect height=20 width=20 x=152 y=138 fill=lime></rect> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/image/image-fill-opacity.html b/layout/reftests/svg/image/image-fill-opacity.html new file mode 100644 index 0000000000..e0b5f31e0f --- /dev/null +++ b/layout/reftests/svg/image/image-fill-opacity.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<svg height=400 width=400> + <image fill-opacity=0 height=20 width=20 x=152 y=138 href=lime100x100.png></image> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/image/image-filter-01-ref.svg b/layout/reftests/svg/image/image-filter-01-ref.svg new file mode 100644 index 0000000000..66ad638ebf --- /dev/null +++ b/layout/reftests/svg/image/image-filter-01-ref.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <g transform="translate(2, 2)"> + <image x="0" y="0" width="10" height="10" xlink:href="blueRect10x10.png"/> + <image x="20" y="0" width="10" height="10" xlink:href="blueRect10x10.png"/> + <image x="0" y="20" width="10" height="10" xlink:href="blueRect10x10.png"/> + <image x="20" y="20" width="10" height="10" xlink:href="blueRect10x10.png"/> + </g> +</svg> diff --git a/layout/reftests/svg/image/image-filter-01.svg b/layout/reftests/svg/image/image-filter-01.svg new file mode 100644 index 0000000000..6ec5a576dc --- /dev/null +++ b/layout/reftests/svg/image/image-filter-01.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- This test confirms that images with filters get drawn. + (This test uses a no-op filter, for simplicity). + --> + <style> + image { filter: url(#noop); } + </style> + <defs> + <filter id="noop" x="0%" y="0%" width="100%" height="100%"> + <feConvolveMatrix order="1" kernelMatrix="1"/> + </filter> + </defs> + + <g transform="translate(2, 2)"> + <image x="0" y="0" width="10" height="10" xlink:href="blueRect10x10.png"/> + <image x="20" y="0" width="10" height="10" xlink:href="blueRect10x10.png"/> + <image x="0" y="20" width="10" height="10" xlink:href="blueRect10x10.png"/> + <image x="20" y="20" width="10" height="10" xlink:href="blueRect10x10.png"/> + </g> +</svg> diff --git a/layout/reftests/svg/image/image-load-01.svg b/layout/reftests/svg/image/image-load-01.svg new file mode 100644 index 0000000000..1b8d4264fc --- /dev/null +++ b/layout/reftests/svg/image/image-load-01.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <title>Testcase to ensure that images load when they don't have frames</title> + + <rect width="100%" height="100%" fill="lime"/> + <rect width="64" height="64" fill="red"/> + + <script> + var img = document.createElementNS("http://www.w3.org/2000/svg", "image"); + img.setAttribute("width", "64"); + img.setAttribute("height", "64"); + document.querySelector("svg").appendChild(img); + img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJFJREFUaEPt1UEOg0AMBEHz/0ez8IY5zFqqKFdLkGrHz7yz/PO9wOrv7qf/81n983uBCwAl1EYgQCD8H5eQhCTUboAAgbCBcNwdaBdIgIAlbjdAgEDYQDjuDrQLJEDAErcbIEAgbCAcdwfaBRIgYInbDRAgEDYQjrsD7QIJELDE7QYIEAgbCMfdgXaBBAhkS3wAXsqyIo0zj4gAAAAASUVORK5CYII="); + </script> + +</svg> diff --git a/layout/reftests/svg/image/image-opacity-01-ref.svg b/layout/reftests/svg/image/image-opacity-01-ref.svg new file mode 100644 index 0000000000..63a3f60546 --- /dev/null +++ b/layout/reftests/svg/image/image-opacity-01-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <use xlink:href="blueRect10x10.svg#root" + style="opacity: 0.3"/> +</svg> diff --git a/layout/reftests/svg/image/image-opacity-01.svg b/layout/reftests/svg/image/image-opacity-01.svg new file mode 100644 index 0000000000..9c589d4bfa --- /dev/null +++ b/layout/reftests/svg/image/image-opacity-01.svg @@ -0,0 +1,6 @@ +<!-- Test to make sure "opacity" value is applied correctly on svg:image --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <image xlink:href="blueRect10x10.png" width="10" height="10" + style="opacity: 0.3"/> +</svg> diff --git a/layout/reftests/svg/image/image-opacity-02-ref.svg b/layout/reftests/svg/image/image-opacity-02-ref.svg new file mode 100644 index 0000000000..548d1d54f1 --- /dev/null +++ b/layout/reftests/svg/image/image-opacity-02-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <g style="opacity: 0.3"> + <use xlink:href="blueRect10x10.svg#root"/> + </g> +</svg> diff --git a/layout/reftests/svg/image/image-opacity-02.svg b/layout/reftests/svg/image/image-opacity-02.svg new file mode 100644 index 0000000000..5fd8598d0f --- /dev/null +++ b/layout/reftests/svg/image/image-opacity-02.svg @@ -0,0 +1,7 @@ +<!-- Test to make sure "opacity" value is applied correctly on svg:image --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <g style="opacity: 0.3"> + <image xlink:href="blueRect10x10.png" width="10" height="10"/> + </g> +</svg> diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-01-raster.svg b/layout/reftests/svg/image/image-preserveAspectRatio-01-raster.svg new file mode 100644 index 0000000000..d702a798c8 --- /dev/null +++ b/layout/reftests/svg/image/image-preserveAspectRatio-01-raster.svg @@ -0,0 +1,13 @@ +<!-- Test to make sure "preserveAspectRatio" value is applied correctly on + <image> tag, when the width:height ratio is less than the image's + nativeWidth:nativeHeight --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="image-rendering: -moz-crisp-edges"> + <script xlink:href="util.js" type="text/javascript"/> + <script> + var grid = generateImageGrid("blueRect10x10.png", 20, 40); + grid.setAttribute("transform", "translate(10, 10)"); + document.documentElement.appendChild(grid); + </script> +</svg> diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-01-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-01-ref.svg new file mode 100644 index 0000000000..a0405b3ea9 --- /dev/null +++ b/layout/reftests/svg/image/image-preserveAspectRatio-01-ref.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script xlink:href="util.js" type="text/javascript"/> + <script> + var grid = generateSymbolGrid("blueRect10x10.svg#root", 20, 40); + grid.setAttribute("transform", "translate(10, 10)"); + document.documentElement.appendChild(grid); + </script> +</svg> diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-01-svg.svg b/layout/reftests/svg/image/image-preserveAspectRatio-01-svg.svg new file mode 100644 index 0000000000..8022671653 --- /dev/null +++ b/layout/reftests/svg/image/image-preserveAspectRatio-01-svg.svg @@ -0,0 +1,12 @@ +<!-- Test to make sure "preserveAspectRatio" value is applied correctly on + <image> tag, when the width:height ratio is less than the image's + nativeWidth:nativeHeight --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script xlink:href="util.js" type="text/javascript"/> + <script> + var grid = generateImageGrid("blueRect10x10-viewBox.svg", 20, 40); + grid.setAttribute("transform", "translate(10, 10)"); + document.documentElement.appendChild(grid); + </script> +</svg> diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-02-raster.svg b/layout/reftests/svg/image/image-preserveAspectRatio-02-raster.svg new file mode 100644 index 0000000000..14b9ff8fae --- /dev/null +++ b/layout/reftests/svg/image/image-preserveAspectRatio-02-raster.svg @@ -0,0 +1,13 @@ +<!-- Test to make sure "preserveAspectRatio" value is applied correctly on + <image> tag, when the width:height ratio is greater than the image's + nativeWidth:nativeHeight --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="image-rendering: -moz-crisp-edges"> + <script xlink:href="util.js" type="text/javascript"/> + <script> + var grid = generateImageGrid("blueRect10x10.png", 40, 20); + grid.setAttribute("transform", "translate(10, 10)"); + document.documentElement.appendChild(grid); + </script> +</svg> diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg new file mode 100644 index 0000000000..5ebaa19b03 --- /dev/null +++ b/layout/reftests/svg/image/image-preserveAspectRatio-02-ref.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script xlink:href="util.js" type="text/javascript"/> + <script> + var grid = generateSymbolGrid("blueRect10x10.svg#root", 40, 20); + grid.setAttribute("transform", "translate(10, 10)"); + document.documentElement.appendChild(grid); + </script> +</svg> diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg b/layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg new file mode 100644 index 0000000000..cbe5bc0bcb --- /dev/null +++ b/layout/reftests/svg/image/image-preserveAspectRatio-02-svg.svg @@ -0,0 +1,12 @@ +<!-- Test to make sure "preserveAspectRatio" value is applied correctly on + <image> tag, when the width:height ratio is greater than the image's + nativeWidth:nativeHeight --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script xlink:href="util.js" type="text/javascript"/> + <script> + var grid = generateImageGrid("blueRect10x10-viewBox.svg", 40, 20); + grid.setAttribute("transform", "translate(10, 10)"); + document.documentElement.appendChild(grid); + </script> +</svg> diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg new file mode 100644 index 0000000000..101ad403b0 --- /dev/null +++ b/layout/reftests/svg/image/image-preserveAspectRatio-03-ref.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script xlink:href="util.js" type="text/javascript"/> + <script> + // My corresponding testcase uses an image with preserveAspectRatio + // set to "none" via SMIL animation. So the testcase's final bonus + // "defer" grid-entry will end up rendering with that "none" value. + var grid = generateSymbolGrid("blueRect10x10.svg#root", 40, 20, + "none"); + grid.setAttribute("transform", "translate(10, 10)"); + document.documentElement.appendChild(grid); + </script> +</svg> diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-03.svg b/layout/reftests/svg/image/image-preserveAspectRatio-03.svg new file mode 100644 index 0000000000..7bcd0d35bf --- /dev/null +++ b/layout/reftests/svg/image/image-preserveAspectRatio-03.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script xlink:href="util.js" type="text/javascript"/> + <script> + // This image has a preserveAspectRatio attribute (animated into + // existence), so the bonus image element will use that value + // because of the "defer" in its preserveAspectRatio. + var grid = generateImageGrid("blueRect10x10-viewBox-animPAR.svg", 40, 20, + "defer xMinYMin"); + grid.setAttribute("transform", "translate(10, 10)"); + document.documentElement.appendChild(grid); + </script> +</svg> diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg b/layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg new file mode 100644 index 0000000000..66e8dcf292 --- /dev/null +++ b/layout/reftests/svg/image/image-preserveAspectRatio-04-ref.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script xlink:href="util.js" type="text/javascript"/> + <script> + // My corresponding testcase uses an image with no preserveAspectRatio on + // its root node. So, the testcase's final bonus "defer" grid-entry will + // fall back on the preserveAspectRatio value that comes along with + // "defer" (which is "xMinYMin slice" in this case). + var grid = generateSymbolGrid("blueRect10x10.svg#root", 40, 20, + "xMinYMin slice"); + grid.setAttribute("transform", "translate(10, 10)"); + document.documentElement.appendChild(grid); + </script> +</svg> diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-04.svg b/layout/reftests/svg/image/image-preserveAspectRatio-04.svg new file mode 100644 index 0000000000..58c8f2b305 --- /dev/null +++ b/layout/reftests/svg/image/image-preserveAspectRatio-04.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script xlink:href="util.js" type="text/javascript"/> + <script> + // This image has no preserveAspectRatio attribute, so in the bonus + // image element, we'll actually apply the value that comes along with + // "defer" ("xMinYMin slice"). + var grid = generateImageGrid("blueRect10x10-viewBox.svg", 40, 20, + "defer xMinYMin slice"); + grid.setAttribute("transform", "translate(10, 10)"); + document.documentElement.appendChild(grid); + </script> +</svg> diff --git a/layout/reftests/svg/image/image-preserveAspectRatio-05.svg b/layout/reftests/svg/image/image-preserveAspectRatio-05.svg new file mode 100644 index 0000000000..11fadbcb86 --- /dev/null +++ b/layout/reftests/svg/image/image-preserveAspectRatio-05.svg @@ -0,0 +1,41 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait"> + + <title>Testing that dynamic changes to preserveAspectRatio cause a reflow</title> + <script> +<![CDATA[ + +function doTest() { + var i1 = document.getElementById("i1"); + i1.preserveAspectRatio.baseVal.align = + SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID; + var i2 = document.getElementById("i2"); + i2.preserveAspectRatio.baseVal.align = + SVGPreserveAspectRatio.SVG_PRESERVEASPECTRATIO_NONE; + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", doTest, false); +setTimeout(doTest, 4000); // fallback for running outside reftest + +]]> + </script> + + <rect width="100%" height="100%" fill="lime"/> + + <!-- this image is a 1x1 red gif --> + <image id="i1" preserveAspectRatio="none" x="50" y="50" width="200" height="300" + style="image-rendering: optimizeSpeed;" + xlink:href="data:image/gif,GIF87a%01%00%01%00%80%01%00%FF%00%00%FF%FF%FF%2C%00%00%00%00%01%00%01%00%00%02%02D%01%00%3B"/> + <!-- exactly cover the image if it had preserveAspectRatio="xMidYMid" --> + <rect x="50" y="100" width="200" height="200" fill="lime"/> + + <rect x="300" y="100" width="200" height="300" fill="red"/> + <!-- and this one is a 1x1 lime PNG --> + <!-- which would cover the red rect if it had preserveAspectRatio="none" --> + <image id="i2" x="300" y="100" width="200" height="300" preserveAspectRatio="xMidYMid" xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" /> + +</svg> diff --git a/layout/reftests/svg/image/image-rotate-01-ref.svg b/layout/reftests/svg/image/image-rotate-01-ref.svg new file mode 100644 index 0000000000..bcda450606 --- /dev/null +++ b/layout/reftests/svg/image/image-rotate-01-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <use xlink:href="blueRect10x10.svg#root" + transform="rotate(90 50 50)"/> +</svg> diff --git a/layout/reftests/svg/image/image-rotate-01.svg b/layout/reftests/svg/image/image-rotate-01.svg new file mode 100644 index 0000000000..9a1600f9c2 --- /dev/null +++ b/layout/reftests/svg/image/image-rotate-01.svg @@ -0,0 +1,6 @@ +<!-- Test to make sure "rotate" value is applied correctly on svg:image --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <image xlink:href="blueRect10x10.png" width="10" height="10" + transform="rotate(90 50 50)"/> +</svg> diff --git a/layout/reftests/svg/image/image-rotate-02-ref.svg b/layout/reftests/svg/image/image-rotate-02-ref.svg new file mode 100644 index 0000000000..e807ff2f49 --- /dev/null +++ b/layout/reftests/svg/image/image-rotate-02-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <use xlink:href="blueRect10x10.svg#root" + transform="translate(60, 80) rotate(180 40 40)"/> +</svg> diff --git a/layout/reftests/svg/image/image-rotate-02a.svg b/layout/reftests/svg/image/image-rotate-02a.svg new file mode 100644 index 0000000000..b04035037f --- /dev/null +++ b/layout/reftests/svg/image/image-rotate-02a.svg @@ -0,0 +1,6 @@ +<!-- Test to make sure "rotate" value is applied correctly on svg:image --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <image xlink:href="blueRect10x10.png" width="10" height="10" + transform="translate(60, 80) rotate(180 40 40)"/> +</svg> diff --git a/layout/reftests/svg/image/image-rotate-02b.svg b/layout/reftests/svg/image/image-rotate-02b.svg new file mode 100644 index 0000000000..69bef2794c --- /dev/null +++ b/layout/reftests/svg/image/image-rotate-02b.svg @@ -0,0 +1,7 @@ +<!-- Test to make sure parent's "rotate" value is applied on svg:image --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <g transform="translate(60, 80) rotate(180 40 40)"> + <image xlink:href="blueRect10x10.png" width="10" height="10"/> + </g> +</svg> diff --git a/layout/reftests/svg/image/image-scaling-01.svg b/layout/reftests/svg/image/image-scaling-01.svg new file mode 100644 index 0000000000..449101a4d6 --- /dev/null +++ b/layout/reftests/svg/image/image-scaling-01.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=421780 + + Test related to bug 421780; make sure that 1-pixel, single-colour images + are correctly scaled to the right size. + + This test makes sure that images aren't sized too big; it takes a 100% + width lime rect, overlaid with a 183x183 width stretched red image, + overlaid with a 183x183 lime rect. + + 183 in particular is used because 183*183 > 2^16, and we can easily run + into double-scaling bugs that will overflow in pixman. +--> + +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <title> Ensure images aren't scaled too big </title> + + <rect width="100%" height="100%" fill="lime"/> + <image width="183" height="183" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAAxJREFUCNdj+M/AAAADAQEAGN2NsAAAAABJRU5ErkJggg"/> + <rect width="183" height="183" fill="lime"/> + +</svg> diff --git a/layout/reftests/svg/image/image-scaling-02.svg b/layout/reftests/svg/image/image-scaling-02.svg new file mode 100644 index 0000000000..302e46c96f --- /dev/null +++ b/layout/reftests/svg/image/image-scaling-02.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=421780 + + Test related to bug 421780; make sure that 1-pixel, single-colour images + are correctly scaled to the right size. + + This test makes sure that images aren't sized too small; it takes a 100% + width lime rect, overlaid with a 183x183 width red rect, overlaid with a + 183x183 stretched lime image. + + 183 in particular is used because 183*183 > 2^16, and we can easily run + into double-scaling bugs that will overflow in pixman. +--> + +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <title> Ensure images aren't scaled too small </title> + + <rect width="100%" height="100%" fill="lime"/> + <rect width="183" height="183" fill="red"/> + <image style="image-rendering: -moz-crisp-edges" width="183" height="183" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAABGdBTUEAALGPC%2FxhBQAAAAxJREFUGFdjYPjPAAACAgEA0dNGRAAAAABJRU5ErkJggg%3D%3D"/> + +</svg> diff --git a/layout/reftests/svg/image/image-scaling-03.svg b/layout/reftests/svg/image/image-scaling-03.svg new file mode 100644 index 0000000000..5a5ca8c930 --- /dev/null +++ b/layout/reftests/svg/image/image-scaling-03.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1776098 + + Make sure small scaled vector images display. +--> + +<svg xmlns="http://www.w3.org/2000/svg"> + + <title> Ensure small vector images display</title> + + <rect width="100%" height="100%" fill="lime"/> + <rect width="98" height="98" fill="red"/> + <image transform="scale(200)" width="0.5" height="0.5" href="lime100x100.svg"/> + +</svg> + diff --git a/layout/reftests/svg/image/image-svg-inline-01.html b/layout/reftests/svg/image/image-svg-inline-01.html new file mode 100644 index 0000000000..8fe8aac39f --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-01.html @@ -0,0 +1,16 @@ +<html> + <!-- Test to make sure svg:image is painted at correct position when its + containing SVG is included inline in HTML at some non-(0,0) position. --> + <body style="background: lime"> + <!-- 100x100 red div --> + <div style="background: red; + margin-left: 60px; margin-top: 80px; + width: 100px; height: 100px;"> + <svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- 1x1 lime PNG, scaled to 100x100 --> + <image xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" width="100" height="100"/> + </svg> + </div> + </body> +</html> diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01-ref.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01-ref.html new file mode 100644 index 0000000000..669241ab73 --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01-ref.html @@ -0,0 +1,8 @@ +<html> +<body style="margin: 0"> + <svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="15" height="30" fill="lime"/> + <rect x="15" y="0" width="15" height="30" fill="blue"/> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01a.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01a.html new file mode 100644 index 0000000000..821147f9af --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01a.html @@ -0,0 +1,16 @@ +<html reftest-zoom="1.5"> + <!-- Test to make sure svg:image is painted correctly when its containing SVG + is included inline in a zoomed webpage and it has a transformation + applied, as is often used for SVG sprites. --> +<body style="margin: 0"> + <svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="shape-rendering: crispEdges"> + <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath> + <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. --> + <g clip-path="url(#clip)"> + <image xlink:href="sprite.svg" width="200" height="200" transform="translate(0, -100)"/> + </g> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01b.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01b.html new file mode 100644 index 0000000000..0b68b7d888 --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-in-01b.html @@ -0,0 +1,15 @@ +<html reftest-zoom="1.5"> + <!-- Test to make sure svg:image is painted correctly when its containing SVG + is included inline in a zoomed webpage and it has a transformation + applied, as is often used for SVG sprites. --> +<body style="margin: 0; image-rendering: -moz-crisp-edges"> + <svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath> + <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. --> + <g clip-path="url(#clip)"> + <image xlink:href="sprite.png" width="200" height="200" transform="translate(0, -100)"/> + </g> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01-ref.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01-ref.html new file mode 100644 index 0000000000..1fe71d0904 --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01-ref.html @@ -0,0 +1,8 @@ +<html> +<body style="margin: 0"> + <svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="5" height="10" fill="lime"/> + <rect x="5" y="0" width="5" height="10" fill="blue"/> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01a.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01a.html new file mode 100644 index 0000000000..d1f7bc35a4 --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01a.html @@ -0,0 +1,16 @@ +<html reftest-zoom="0.5"> + <!-- Test to make sure svg:image is painted correctly when its containing SVG + is included inline in a zoomed webpage and it has a transformation + applied, as is often used for SVG sprites. --> +<body style="margin: 0"> + <svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="shape-rendering: crispEdges"> + <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath> + <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. --> + <g clip-path="url(#clip)"> + <image xlink:href="sprite.svg" width="200" height="200" transform="translate(0, -100)"/> + </g> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01b.html b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01b.html new file mode 100644 index 0000000000..dcb118a7df --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-sprite-zoom-out-01b.html @@ -0,0 +1,15 @@ +<html reftest-zoom="0.5"> + <!-- Test to make sure svg:image is painted correctly when its containing SVG + is included inline in a zoomed webpage and it has a transformation + applied, as is often used for SVG sprites. --> +<body style="margin: 0; image-rendering: -moz-crisp-edges"> + <svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <clipPath id="clip"><rect x="0" y="0" width="20" height="20"/></clipPath> + <!-- Translate and clip-path are used to pull a sprite out of the otherwise red image. --> + <g clip-path="url(#clip)"> + <image xlink:href="sprite.png" width="200" height="200" transform="translate(0, -100)"/> + </g> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01a.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01a.html new file mode 100644 index 0000000000..ef187a5a57 --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01a.html @@ -0,0 +1,17 @@ +<html reftest-zoom="1.5"> + <!-- Test to make sure svg:image is painted correctly when its containing SVG + is included inline in a zoomed webpage. --> + <body style="background: lime"> + <!-- 100x100 red div --> + <div style="background: red; + margin-left: 30px; margin-top: 30px; + width: 100px; height: 100px;"> + <svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="shape-rendering: crispEdges"> + <!-- SVG with no intrinsic dimensions --> + <image xlink:href="lime-no-dimensions.svg" width="100%" height="100%"/> + </svg> + </div> + </body> +</html> diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01b.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01b.html new file mode 100644 index 0000000000..419f3168ca --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01b.html @@ -0,0 +1,16 @@ +<html reftest-zoom="1.5"> + <!-- Test to make sure svg:image is painted correctly when its containing SVG + is included inline in a zoomed webpage. --> + <body style="background: lime"> + <!-- 100x100 red div --> + <div style="background: red; + margin-left: 30px; margin-top: 30px; + width: 100px; height: 100px;"> + <svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- 1x1 lime PNG, scaled to 100x100 --> + <image xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" width="100" height="100"/> + </svg> + </div> + </body> +</html> diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01c.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01c.html new file mode 100644 index 0000000000..9d273c91ec --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01c.html @@ -0,0 +1,18 @@ +<html reftest-zoom="1.5"> + <!-- Test to make sure svg:image is painted correctly when its containing SVG + is included inline in a zoomed webpage. --> + <body style="background: lime"> + <!-- 100x100 red div --> + <div style="background: red; + margin-left: 30px; margin-top: 30px; + width: 100px; height: 100px;"> + <svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="shape-rendering: crispEdges"> + <!-- SVG with an intrinsic size of 100px x 100px; percentage size on + image element. --> + <image xlink:href="lime100x100.svg" width="100%" height="100%"/> + </svg> + </div> + </body> +</html> diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-in-01d.html b/layout/reftests/svg/image/image-svg-inline-zoom-in-01d.html new file mode 100644 index 0000000000..921fa4ec2f --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-zoom-in-01d.html @@ -0,0 +1,18 @@ +<html reftest-zoom="1.5"> + <!-- Test to make sure svg:image is painted correctly when its containing SVG + is included inline in a zoomed webpage. --> + <body style="background: lime"> + <!-- 100x100 red div --> + <div style="background: red; + margin-left: 30px; margin-top: 30px; + width: 100px; height: 100px;"> + <svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="shape-rendering: crispEdges"> + <!-- SVG with an intrinsic size of 100px x 100px; explicit size on + image element. --> + <image xlink:href="lime100x100.svg" width="100px" height="100px"/> + </svg> + </div> + </body> +</html> diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01a.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01a.html new file mode 100644 index 0000000000..6532c1576a --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01a.html @@ -0,0 +1,16 @@ +<html reftest-zoom="0.5"> + <!-- Test to make sure svg:image is painted correctly when its containing SVG + is included inline in a zoomed webpage. --> + <body style="background: lime"> + <!-- 100x100 red div --> + <div style="background: red; + margin-left: 30px; margin-top: 30px; + width: 100px; height: 100px;"> + <svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- SVG with no intrinsic dimensions --> + <image xlink:href="lime-no-dimensions.svg" width="100%" height="100%"/> + </svg> + </div> + </body> +</html> diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01b.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01b.html new file mode 100644 index 0000000000..c45f016015 --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01b.html @@ -0,0 +1,16 @@ +<html reftest-zoom="0.5"> + <!-- Test to make sure svg:image is painted correctly when its containing SVG + is included inline in a zoomed webpage. --> + <body style="background: lime"> + <!-- 100x100 red div --> + <div style="background: red; + margin-left: 30px; margin-top: 30px; + width: 100px; height: 100px;"> + <svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- 1x1 lime PNG, scaled to 100x100 --> + <image xlink:href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%01%00%00%00%01%08%02%00%00%00%90wS%DE%00%00%00%01sRGB%00%AE%CE%1C%E9%00%00%00%0CIDAT%08%D7c%60%F8%CF%00%00%02%02%01%00%AA*%9E'%00%00%00%00IEND%AEB%60%82" width="100" height="100"/> + </svg> + </div> + </body> +</html> diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01c.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01c.html new file mode 100644 index 0000000000..5c88134c03 --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01c.html @@ -0,0 +1,17 @@ +<html reftest-zoom="0.5"> + <!-- Test to make sure svg:image is painted correctly when its containing SVG + is included inline in a zoomed webpage. --> + <body style="background: lime"> + <!-- 100x100 red div --> + <div style="background: red; + margin-left: 30px; margin-top: 30px; + width: 100px; height: 100px;"> + <svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- SVG with an intrinsic size of 100px x 100px; percentage size on + image element. --> + <image xlink:href="lime100x100.svg" width="100%" height="100%"/> + </svg> + </div> + </body> +</html> diff --git a/layout/reftests/svg/image/image-svg-inline-zoom-out-01d.html b/layout/reftests/svg/image/image-svg-inline-zoom-out-01d.html new file mode 100644 index 0000000000..ad24ce81e5 --- /dev/null +++ b/layout/reftests/svg/image/image-svg-inline-zoom-out-01d.html @@ -0,0 +1,17 @@ +<html reftest-zoom="0.5"> + <!-- Test to make sure svg:image is painted correctly when its containing SVG + is included inline in a zoomed webpage. --> + <body style="background: lime"> + <!-- 100x100 red div --> + <div style="background: red; + margin-left: 30px; margin-top: 30px; + width: 100px; height: 100px;"> + <svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- SVG with an intrinsic size of 100px x 100px; explicit size on + image element. --> + <image xlink:href="lime100x100.svg" width="100px" height="100px"/> + </svg> + </div> + </body> +</html> diff --git a/layout/reftests/svg/image/image-translate-01-ref.svg b/layout/reftests/svg/image/image-translate-01-ref.svg new file mode 100644 index 0000000000..161aaa3f2e --- /dev/null +++ b/layout/reftests/svg/image/image-translate-01-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <use xlink:href="blueRect10x10.svg#root" + transform="translate(60, 80)"/> +</svg> diff --git a/layout/reftests/svg/image/image-translate-01.svg b/layout/reftests/svg/image/image-translate-01.svg new file mode 100644 index 0000000000..29311478bf --- /dev/null +++ b/layout/reftests/svg/image/image-translate-01.svg @@ -0,0 +1,6 @@ +<!-- Test to make sure transform value is applied correctly on svg:image --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <image xlink:href="blueRect10x10.png" width="10" height="10" + transform="translate(60, 80)"/> +</svg> diff --git a/layout/reftests/svg/image/image-with-following-content.svg b/layout/reftests/svg/image/image-with-following-content.svg new file mode 100644 index 0000000000..b3f6d98a79 --- /dev/null +++ b/layout/reftests/svg/image/image-with-following-content.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> + + <rect width="100%" height="100%" fill="lime" /> + + <rect width="220" height="220" fill="red" /> + + <svg x="10" y="10" width="200" height="200"> + <image width="200" height="200" href="blueRect10x10.png"/> + </svg> + + <rect width="220" height="220" fill="lime" /> +</svg> diff --git a/layout/reftests/svg/image/image-with-mask-and-clipPath.svg b/layout/reftests/svg/image/image-with-mask-and-clipPath.svg new file mode 100644 index 0000000000..d010eca527 --- /dev/null +++ b/layout/reftests/svg/image/image-with-mask-and-clipPath.svg @@ -0,0 +1,13 @@ +<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="100%" fill="lime"/> + <rect width="100" height="100" fill="red"/> + <g transform="translate(80 30)"> + <clipPath id="c" clipPathUnits="userSpaceOnUse"> + <rect x="-80" y="-30" width="100" height="100"/> + </clipPath> + <mask id="m" x="-80" y="-30" width="100" height="100"> + <rect x="-80" y="-30" width="100" height="100" fill="white"/> + </mask> + <image x="-80" y="-30" width="100" height="100" href="lime100x100.png" mask="url(#m)" clip-path="url(#c)"/> + </g> +</svg> diff --git a/layout/reftests/svg/image/image-x-01-ref.svg b/layout/reftests/svg/image/image-x-01-ref.svg new file mode 100644 index 0000000000..4c69676845 --- /dev/null +++ b/layout/reftests/svg/image/image-x-01-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <use xlink:href="blueRect10x10.svg#root" + x="123"/> +</svg> diff --git a/layout/reftests/svg/image/image-x-01.svg b/layout/reftests/svg/image/image-x-01.svg new file mode 100644 index 0000000000..db3be2af38 --- /dev/null +++ b/layout/reftests/svg/image/image-x-01.svg @@ -0,0 +1,6 @@ +<!-- Test to make sure "x" value is applied correctly on svg:image --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <image xlink:href="blueRect10x10.png" width="10" height="10" + x="123"/> +</svg> diff --git a/layout/reftests/svg/image/image-xy-01-ref.svg b/layout/reftests/svg/image/image-xy-01-ref.svg new file mode 100644 index 0000000000..2821f93246 --- /dev/null +++ b/layout/reftests/svg/image/image-xy-01-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <use xlink:href="blueRect10x10.svg#root" + x="123" y="234"/> +</svg> diff --git a/layout/reftests/svg/image/image-xy-01.svg b/layout/reftests/svg/image/image-xy-01.svg new file mode 100644 index 0000000000..1afa32a60d --- /dev/null +++ b/layout/reftests/svg/image/image-xy-01.svg @@ -0,0 +1,7 @@ +<!-- Test to make sure "x" and "y" value are simultaneously applied correctly + on svg:image --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <image xlink:href="blueRect10x10.png" width="10" height="10" + x="123" y="234"/> +</svg> diff --git a/layout/reftests/svg/image/image-y-01-ref.svg b/layout/reftests/svg/image/image-y-01-ref.svg new file mode 100644 index 0000000000..9a608e8dbd --- /dev/null +++ b/layout/reftests/svg/image/image-y-01-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <use xlink:href="blueRect10x10.svg#root" + y="123"/> +</svg> diff --git a/layout/reftests/svg/image/image-y-01.svg b/layout/reftests/svg/image/image-y-01.svg new file mode 100644 index 0000000000..2c8d04fd88 --- /dev/null +++ b/layout/reftests/svg/image/image-y-01.svg @@ -0,0 +1,6 @@ +<!-- Test to make sure "y" value is applied correctly on svg:image --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <image xlink:href="blueRect10x10.png" width="10" height="10" + y="123"/> +</svg> diff --git a/layout/reftests/svg/image/image-zoom-02-ref.svg b/layout/reftests/svg/image/image-zoom-02-ref.svg new file mode 100644 index 0000000000..fca1d5703e --- /dev/null +++ b/layout/reftests/svg/image/image-zoom-02-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <image width="15" height="15" xlink:href="blueRect10x10.png"/> +</svg> diff --git a/layout/reftests/svg/image/image-zoom-02.svg b/layout/reftests/svg/image/image-zoom-02.svg new file mode 100644 index 0000000000..f426dfca2a --- /dev/null +++ b/layout/reftests/svg/image/image-zoom-02.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + reftest-zoom="1.5" width="10" height="10"> + <title>Testcase to ensure that full-page-zoom will zoom raster + images the right amount.</title> + <image width="10" height="10" xlink:href="blueRect10x10.png"/> +</svg> diff --git a/layout/reftests/svg/image/imported-image-01.svg b/layout/reftests/svg/image/imported-image-01.svg new file mode 100644 index 0000000000..b7ef5d5acf --- /dev/null +++ b/layout/reftests/svg/image/imported-image-01.svg @@ -0,0 +1,12 @@ +<?xml version="1.0" standalone="yes"?> +<svg version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script> + <![CDATA[ + var doc = new DOMParser().parseFromString('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><image width="10" height="10" xlink:href="blueRect10x10.png"/></svg>', 'text/xml'); + document.documentElement.appendChild(doc.documentElement.firstChild); + ]]> + </script> + +</svg> diff --git a/layout/reftests/svg/image/imported-image-02.svg b/layout/reftests/svg/image/imported-image-02.svg new file mode 100644 index 0000000000..7e51025795 --- /dev/null +++ b/layout/reftests/svg/image/imported-image-02.svg @@ -0,0 +1,17 @@ +<?xml version="1.0" standalone="yes"?> +<svg version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <script> + <![CDATA[ + var doc = document.implementation.createDocument("", "", null); + var img = doc.createElementNS("http://www.w3.org/2000/svg", "image"); + img.setAttribute("width", "10"); + img.setAttribute("height", "10"); + img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", + "blueRect10x10.png"); + document.documentElement.appendChild(img); + ]]> + </script> + +</svg> diff --git a/layout/reftests/svg/image/imported-image-ref.svg b/layout/reftests/svg/image/imported-image-ref.svg new file mode 100644 index 0000000000..4b0d1accc9 --- /dev/null +++ b/layout/reftests/svg/image/imported-image-ref.svg @@ -0,0 +1,6 @@ +<?xml version="1.0" standalone="yes"?> +<svg version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <image width="10" height="10" xlink:href="blueRect10x10.png"/> +</svg> diff --git a/layout/reftests/svg/image/lime-no-dimensions.svg b/layout/reftests/svg/image/lime-no-dimensions.svg new file mode 100644 index 0000000000..1723cb66c0 --- /dev/null +++ b/layout/reftests/svg/image/lime-no-dimensions.svg @@ -0,0 +1,7 @@ +<!-- + 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" style="shape-rendering: crispEdges"> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/image/lime100x100.png b/layout/reftests/svg/image/lime100x100.png Binary files differnew file mode 100644 index 0000000000..c9bb375943 --- /dev/null +++ b/layout/reftests/svg/image/lime100x100.png diff --git a/layout/reftests/svg/image/lime100x100.svg b/layout/reftests/svg/image/lime100x100.svg new file mode 100644 index 0000000000..bba9d34236 --- /dev/null +++ b/layout/reftests/svg/image/lime100x100.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="100px"> + <rect width="100px" height="100px" style="fill: lime"/> +</svg> diff --git a/layout/reftests/svg/image/reftest.list b/layout/reftests/svg/image/reftest.list new file mode 100644 index 0000000000..408fa954e2 --- /dev/null +++ b/layout/reftests/svg/image/reftest.list @@ -0,0 +1,45 @@ +# Tests of the SVG <image> element + +== image-fill-01.svg ../pass.svg +== image-filter-01.svg image-filter-01-ref.svg +== image-load-01.svg ../pass.svg +fuzzy(0-4,0-110) == image-opacity-01.svg image-opacity-01-ref.svg # Bug 779514 for Android +fuzzy(0-1,0-100) == image-opacity-02.svg image-opacity-02-ref.svg # Bug 776039 for Android +== image-rotate-01.svg image-rotate-01-ref.svg +== image-rotate-02a.svg image-rotate-02-ref.svg +== image-rotate-02b.svg image-rotate-02-ref.svg +== image-scaling-01.svg ../pass.svg +== image-scaling-02.svg ../pass.svg +== image-scaling-03.svg ../pass.svg +== image-svg-inline-01.html ../pass.svg +== image-svg-inline-zoom-in-01a.html ../pass.svg +== image-svg-inline-zoom-in-01b.html ../pass.svg +== image-svg-inline-zoom-in-01c.html ../pass.svg +== image-svg-inline-zoom-in-01d.html ../pass.svg +== image-svg-inline-zoom-out-01a.html ../pass.svg +== image-svg-inline-zoom-out-01b.html ../pass.svg +== image-svg-inline-zoom-out-01c.html ../pass.svg +== image-svg-inline-zoom-out-01d.html ../pass.svg +fails-if(useDrawSnapshot) == image-svg-inline-sprite-zoom-in-01a.html image-svg-inline-sprite-zoom-in-01-ref.html +fails-if(useDrawSnapshot) == image-svg-inline-sprite-zoom-in-01b.html image-svg-inline-sprite-zoom-in-01-ref.html +fails-if(useDrawSnapshot) == image-svg-inline-sprite-zoom-out-01a.html image-svg-inline-sprite-zoom-out-01-ref.html +fails-if(useDrawSnapshot) == image-svg-inline-sprite-zoom-out-01b.html image-svg-inline-sprite-zoom-out-01-ref.html +== image-translate-01.svg image-translate-01-ref.svg +== image-with-following-content.svg ../pass.svg +== image-with-mask-and-clipPath.svg ../pass.svg +== image-x-01.svg image-x-01-ref.svg +== image-xy-01.svg image-xy-01-ref.svg +== image-y-01.svg image-y-01-ref.svg +fails-if(useDrawSnapshot) == image-zoom-02.svg image-zoom-02-ref.svg +== imported-image-01.svg imported-image-ref.svg +== imported-image-02.svg imported-image-ref.svg +== image-fill-opacity.html image-fill-opacity-ref.html + +# Tests for <image> with preserveAspectRatio +fuzzy(0-57,0-352) == image-preserveAspectRatio-01-raster.svg image-preserveAspectRatio-01-ref.svg +fuzzy(0-57,0-352) == image-preserveAspectRatio-01-svg.svg image-preserveAspectRatio-01-ref.svg +fuzzy(0-57,0-288) == image-preserveAspectRatio-02-raster.svg image-preserveAspectRatio-02-ref.svg +fuzzy(0-57,0-288) == image-preserveAspectRatio-02-svg.svg image-preserveAspectRatio-02-ref.svg +fuzzy(0-57,0-288) == image-preserveAspectRatio-03.svg image-preserveAspectRatio-03-ref.svg +fuzzy(0-57,0-288) == image-preserveAspectRatio-04.svg image-preserveAspectRatio-04-ref.svg +== image-preserveAspectRatio-05.svg ../pass.svg diff --git a/layout/reftests/svg/image/sprite.png b/layout/reftests/svg/image/sprite.png Binary files differnew file mode 100644 index 0000000000..830eb77731 --- /dev/null +++ b/layout/reftests/svg/image/sprite.png diff --git a/layout/reftests/svg/image/sprite.svg b/layout/reftests/svg/image/sprite.svg new file mode 100644 index 0000000000..2ec702dfb2 --- /dev/null +++ b/layout/reftests/svg/image/sprite.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" style="shape-rendering: crispEdges"> +<rect x="0" y="0" width="200" height="200" fill="red"/> +<rect x="-1" y="99" width="11" height="22" fill="lime"/> +<rect x="10" y="99" width="11" height="22" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/image/util.js b/layout/reftests/svg/image/util.js new file mode 100644 index 0000000000..144edd356a --- /dev/null +++ b/layout/reftests/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/. */ + +// The possible values of the "align" component of preserveAspectRatio. +const ALIGN_VALS = ["none", + "xMinYMin", "xMinYMid", "xMinYMax", + "xMidYMin", "xMidYMid", "xMidYMax", + "xMaxYMin", "xMaxYMid", "xMaxYMax"]; + +// The possible values of the "meetOrSlice" component of preserveAspectRatio. +const MEETORSLICE_VALS = [ "meet", "slice" ]; + +const SVGNS = "http://www.w3.org/2000/svg"; +const XLINKNS = "http://www.w3.org/1999/xlink"; + +// This is the separation between the x & y values of each <image> in a +// generated grid. +const IMAGE_OFFSET = 50; + +function generateBorderRect(aX, aY, aWidth, aHeight) { + var rect = document.createElementNS(SVGNS, "rect"); + rect.setAttribute("x", aX); + rect.setAttribute("y", aY); + rect.setAttribute("width", aWidth); + rect.setAttribute("height", aHeight); + rect.setAttribute("fill", "none"); + rect.setAttribute("stroke", "black"); + rect.setAttribute("stroke-width", "2"); + rect.setAttribute("stroke-dasharray", "3 2"); + return rect; +} + +// Returns an SVG <image> element with the given xlink:href, width, height, +// and preserveAspectRatio=[aAlign aMeetOrSlice] attributes +function generateImageElementForParams(aX, aY, aWidth, aHeight, + aHref, aAlign, aMeetOrSlice) { + var image = document.createElementNS(SVGNS, "image"); + image.setAttribute("x", aX); + image.setAttribute("y", aY); + image.setAttribute("width", aWidth); + image.setAttribute("height", aHeight); + image.setAttributeNS(XLINKNS, "href", aHref); + image.setAttribute("preserveAspectRatio", aAlign + " " + aMeetOrSlice); + return image; +} + +// Returns a <g> element filled with a grid of <image> elements which each +// have the specified aWidth & aHeight and which use all possible values of +// preserveAspectRatio. +// +// The final "aBonusPARVal" argument (if specified) is used as the +// preserveAspectRatio value on a bonus <image> element, added at the end. +function generateImageGrid(aHref, aWidth, aHeight, aBonusPARVal) { + var grid = document.createElementNS(SVGNS, "g"); + var y = 0; + var x = 0; + for (var i = 0; i < ALIGN_VALS.length; i++) { + // Jump to next line of grid, for every other "i" value. + // (every fourth entry) + if (i && i % 2 == 0) { + y += IMAGE_OFFSET; + x = 0; + } + var alignVal = ALIGN_VALS[i]; + for (var j = 0; j < MEETORSLICE_VALS.length; j++) { + var meetorsliceVal = MEETORSLICE_VALS[j]; + var border = generateBorderRect(x, y, aWidth, aHeight); + var image = generateImageElementForParams(x, y, aWidth, aHeight, + aHref, alignVal, + meetorsliceVal); + grid.appendChild(border); + grid.appendChild(image); + x += IMAGE_OFFSET; + } + } + + if (aBonusPARVal) { + // Add one final entry with "bonus" pAR value. + y += IMAGE_OFFSET; + x = 0; + var border = generateBorderRect(x, y, aWidth, aHeight); + var image = generateImageElementForParams(x, y, aWidth, aHeight, + aHref, aBonusPARVal, ""); + grid.appendChild(border); + grid.appendChild(image); + } + + return grid; +} + +// Returns an SVG <symbol> element that... +// (a) has the given ID +// (b) contains only a <use> element to the given URI +// (c) has a hardcoded viewBox="0 0 10 10" attribute +// (d) has the given preserveAspectRatio=[aAlign aMeetOrSlice] attribute +function generateSymbolElementForParams(aSymbolID, aHref, + aAlign, aMeetOrSlice) { + var use = document.createElementNS(SVGNS, "use"); + use.setAttributeNS(XLINKNS, "href", aHref); + + var symbol = document.createElementNS(SVGNS, "symbol"); + symbol.setAttribute("id", aSymbolID); + symbol.setAttribute("viewBox", "0 0 10 10"); + symbol.setAttribute("preserveAspectRatio", aAlign + " " + aMeetOrSlice); + + symbol.appendChild(use); + return symbol; +} + +function generateUseElementForParams(aTargetURI, aX, aY, aWidth, aHeight) { + var use = document.createElementNS(SVGNS, "use"); + use.setAttributeNS(XLINKNS, "href", aTargetURI); + use.setAttribute("x", aX); + use.setAttribute("y", aY); + use.setAttribute("width", aWidth); + use.setAttribute("height", aHeight); + return use; +} + +// Returns a <g> element filled with a grid of <use> elements which each +// have the specified aWidth & aHeight and which reference <symbol> elements +// with all possible values of preserveAspectRatio. Each <symbol> contains +// a <use> that links to the given URI, aHref. +// +// The final "aBonusPARVal" argument (if specified) is used as the +// preserveAspectRatio value on a bonus <symbol> element, added at the end. +function generateSymbolGrid(aHref, aWidth, aHeight, aBonusPARVal) { + var grid = document.createElementNS(SVGNS, "g"); + var y = 0; + var x = 0; + for (var i = 0; i < ALIGN_VALS.length; i++) { + // Jump to next line of grid, for every other "i" value. + // (every fourth entry) + if (i && i % 2 == 0) { + y += IMAGE_OFFSET; + x = 0; + } + var alignVal = ALIGN_VALS[i]; + for (var j = 0; j < MEETORSLICE_VALS.length; j++) { + var meetorsliceVal = MEETORSLICE_VALS[j]; + var border = generateBorderRect(x, y, aWidth, aHeight); + + var symbolID = "symbol_" + alignVal + "_" + meetorsliceVal; + var symbol = generateSymbolElementForParams(symbolID, aHref, + alignVal, meetorsliceVal); + var use = generateUseElementForParams("#" + symbolID, + x, y, aWidth, aHeight); + grid.appendChild(symbol); // This isn't painted + grid.appendChild(border); + grid.appendChild(use); + x += IMAGE_OFFSET; + } + } + + if (aBonusPARVal) { + // Add one final entry with "bonus" pAR value. + y += IMAGE_OFFSET; + x = 0; + var border = generateBorderRect(x, y, aWidth, aHeight); + var symbolID = "symbol_Bonus"; + var symbol = generateSymbolElementForParams(symbolID, aHref, + aBonusPARVal, ""); + var use = generateUseElementForParams("#" + symbolID, + x, y, aWidth, aHeight); + grid.appendChild(symbol); // This isn't painted + grid.appendChild(border); + grid.appendChild(use); + } + + return grid; +} diff --git a/layout/reftests/svg/import-svg-01.html b/layout/reftests/svg/import-svg-01.html new file mode 100644 index 0000000000..2ea66f4666 --- /dev/null +++ b/layout/reftests/svg/import-svg-01.html @@ -0,0 +1,22 @@ +<html class="reftest-wait"> +<head> +<script> +function setup() { + var data = + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 -100 50 100" width="100%" height="100%">' + + ' <rect transform="rotate(180,0,0)" fill="red" x="-50" y="-50" width="100" height="100" />'+ + ' <rect fill="lime" x="-55" y="-55" width="110" height="110" />'+ + '</svg>'; + var drawing = document.getElementById("drawing"); + var parser = new DOMParser(); + var svg1 = document.importNode(parser.parseFromString(data, "text/xml").documentElement, true); + drawing.appendChild(svg1); + document.documentElement.className = ""; +} +</script> +</head> +<body style="background-color: lime;" onload="setup()"> +<div id="drawing"> +</div> +</body> +</html> diff --git a/layout/reftests/svg/invalid-text-01.svg b/layout/reftests/svg/invalid-text-01.svg new file mode 100644 index 0000000000..fd8b12f48b --- /dev/null +++ b/layout/reftests/svg/invalid-text-01.svg @@ -0,0 +1,15 @@ +<!-- + 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"> + + <title>Testcase for invalid text</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=445687 --> + + <rect width="100%" height="100%" fill="lime"/> + + <text x="50" y="50" font-size="30"><tspan><text x="50" y="50" font-size="30">Should not see this</text></tspan></text> + +</svg> diff --git a/layout/reftests/svg/lang-attribute-01.svg b/layout/reftests/svg/lang-attribute-01.svg new file mode 100644 index 0000000000..ee66b8be4f --- /dev/null +++ b/layout/reftests/svg/lang-attribute-01.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" lang="foo"> + <title>Test the 'lang' attribute in SVG</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 --> + <style type="text/css"> + +rect:lang(foo) { + fill: lime; +} + + </style> + <rect width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/lang-attribute-02.svg b/layout/reftests/svg/lang-attribute-02.svg new file mode 100644 index 0000000000..d63468cc0b --- /dev/null +++ b/layout/reftests/svg/lang-attribute-02.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xml:lang="foo"> + <title>Test the 'xml:lang' attribute in SVG</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 --> + <style type="text/css"> + +rect:lang(foo) { + fill: lime; +} + + </style> + <rect width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/lang-attribute-03.svg b/layout/reftests/svg/lang-attribute-03.svg new file mode 100644 index 0000000000..62ce918d12 --- /dev/null +++ b/layout/reftests/svg/lang-attribute-03.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xml:lang="foo" lang="bar"> + <title>Test the 'xml:lang' attribute in SVG</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 --> + <style type="text/css"> + +rect:lang(foo) { + fill: lime; +} + + </style> + <rect width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/linearGradient-basic-01.svg b/layout/reftests/svg/linearGradient-basic-01.svg new file mode 100644 index 0000000000..63486368d8 --- /dev/null +++ b/layout/reftests/svg/linearGradient-basic-01.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + +<title>Testcase for gradient</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 --> + + <defs> + <!-- No stops, like fill = none --> + <linearGradient id="nostops" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"/> + </defs> + + <rect x="0%" y="0%" width="100%" height="100%" fill="lime"/> + <rect x="0%" y="0%" width="100%" height="100%" fill="url(#nostops)"/> +</svg> diff --git a/layout/reftests/svg/linearGradient-basic-02.svg b/layout/reftests/svg/linearGradient-basic-02.svg new file mode 100644 index 0000000000..368363c711 --- /dev/null +++ b/layout/reftests/svg/linearGradient-basic-02.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + +<title>Testcase for gradient</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 --> + + <defs> + <!-- One stop, like fill = stop-color --> + <linearGradient id="onestop" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"> + <stop stop-color="lime" offset="1"/> + </linearGradient> + </defs> + + <rect x="0%" y="0%" width="100%" height="100%" fill="red"/> + <rect x="0%" y="0%" width="100%" height="100%" fill="url(#onestop)"/> +</svg> diff --git a/layout/reftests/svg/linearGradient-basic-03-ref.svg b/layout/reftests/svg/linearGradient-basic-03-ref.svg new file mode 100644 index 0000000000..2820cdd649 --- /dev/null +++ b/layout/reftests/svg/linearGradient-basic-03-ref.svg @@ -0,0 +1,18 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that spreadMethod="reflect" works</title> + <linearGradient id="g1" gradientUnits="objectBoundingBox" x1="0" x2="1"> + <stop stop-color="blue" offset="0"/> + <stop stop-color="yellow" offset="1"/> + </linearGradient> + <linearGradient id="g2" gradientUnits="objectBoundingBox" x1="0" x2="1"> + <stop stop-color="yellow" offset="0"/> + <stop stop-color="blue" offset="1"/> + </linearGradient> + <rect width="100" height="100" fill="url(#g1)"/> + <rect x="100" width="100" height="100" fill="url(#g2)"/> +</svg> diff --git a/layout/reftests/svg/linearGradient-basic-03.svg b/layout/reftests/svg/linearGradient-basic-03.svg new file mode 100644 index 0000000000..3a5e3b5f1d --- /dev/null +++ b/layout/reftests/svg/linearGradient-basic-03.svg @@ -0,0 +1,14 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that spreadMethod="reflect" works</title> + <linearGradient id="g" gradientUnits="objectBoundingBox" + x1="0" x2="0.5" spreadMethod="reflect"> + <stop stop-color="blue" offset="0"/> + <stop stop-color="yellow" offset="1"/> + </linearGradient> + <rect width="200" height="100" fill="url(#g)"/> +</svg> diff --git a/layout/reftests/svg/linked-filter-01.svg b/layout/reftests/svg/linked-filter-01.svg new file mode 100644 index 0000000000..226e792ef9 --- /dev/null +++ b/layout/reftests/svg/linked-filter-01.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test for linked filter</title> + <defs> + <filter id="filter01" filterUnits="objectBoundingBox" x="0" y="0" width="1" height="1"> + <feFlood flood-color="lime" /> + </filter> + <filter id="filter02" xlink:href="#filter01"/> + </defs> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" filter="url(#filter02)"/> +</svg> + diff --git a/layout/reftests/svg/linked-pattern-01.svg b/layout/reftests/svg/linked-pattern-01.svg new file mode 100644 index 0000000000..aef9df1258 --- /dev/null +++ b/layout/reftests/svg/linked-pattern-01.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test for linked pattern scaling</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=448906 --> + <defs> + <pattern id="pattern01" height="20" width="20" + patternTransform="scale(0.5)" + patternUnits="userSpaceOnUse"> + <rect height="20" width="20" fill="lime" /> + </pattern> + <pattern id="pattern02" xlink:href="#pattern01"/> + </defs> + <rect width="100%" height="100%" style="fill:url(#pattern02)" transform="scale(2)"/> +</svg> + diff --git a/layout/reftests/svg/load-only/filter-primitives-01.svg b/layout/reftests/svg/load-only/filter-primitives-01.svg new file mode 100644 index 0000000000..fa4ea14c54 --- /dev/null +++ b/layout/reftests/svg/load-only/filter-primitives-01.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait"> + <script> + +function test(e) { + var root = document.documentElement; + var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); + document.getElementById("feMerge").appendChild(rect); + root.removeAttribute("class") +} + +window.addEventListener("MozReftestInvalidate", test, false); + + </script> + <filter id="filter"> + <feMerge id="feMerge"></feMerge> + </filter> +</svg> + diff --git a/layout/reftests/svg/load-only/reftest.list b/layout/reftests/svg/load-only/reftest.list new file mode 100644 index 0000000000..f98db03a32 --- /dev/null +++ b/layout/reftests/svg/load-only/reftest.list @@ -0,0 +1,3 @@ + +load filter-primitives-01.svg + diff --git a/layout/reftests/svg/marker-attribute-01.svg b/layout/reftests/svg/marker-attribute-01.svg new file mode 100644 index 0000000000..9ba365b75e --- /dev/null +++ b/layout/reftests/svg/marker-attribute-01.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test there is no 'marker' presentation attribute</title> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=350100 + + This test checks that the 'marker' presentation attribute is ignored. + --> + <defs> + <marker id="marker" markerWidth="40" markerHeight="40" refX="20" refY="20"> + <circle cx="20" cy="20" r="20" fill="red"/> + </marker> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <path d="M20,20 L60,20 L100,20" fill="none" stroke="none" marker="url(#marker)"/> +</svg> diff --git a/layout/reftests/svg/marker-css-transform-ref.html b/layout/reftests/svg/marker-css-transform-ref.html new file mode 100644 index 0000000000..2a1a23c0be --- /dev/null +++ b/layout/reftests/svg/marker-css-transform-ref.html @@ -0,0 +1,12 @@ +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <defs> + <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" + markerWidth="6" markerHeight="6" + orient="auto-start-reverse"> + <path id="ap" transform="scale(2,2)" d="M 0 0 L 5 2.5 L 0 5 z" /> + </marker> + </defs> + + <polyline points="10,30 90,30" fill="none" stroke="black" + marker-start="url(#arrow)" marker-end="url(#arrow)" /> +</svg> diff --git a/layout/reftests/svg/marker-css-transform.html b/layout/reftests/svg/marker-css-transform.html new file mode 100644 index 0000000000..5903008f67 --- /dev/null +++ b/layout/reftests/svg/marker-css-transform.html @@ -0,0 +1,17 @@ +<style> +#ap { + transform: scale(2,2); +} +</style> +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <defs> + <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" + markerWidth="6" markerHeight="6" + orient="auto-start-reverse"> + <path id="ap" d="M 0 0 L 5 2.5 L 0 5 z" /> + </marker> + </defs> + + <polyline points="10,30 90,30" fill="none" stroke="black" + marker-start="url(#arrow)" marker-end="url(#arrow)" /> +</svg> diff --git a/layout/reftests/svg/marker-dynamic-opacity-ref.html b/layout/reftests/svg/marker-dynamic-opacity-ref.html new file mode 100644 index 0000000000..605b74d3d8 --- /dev/null +++ b/layout/reftests/svg/marker-dynamic-opacity-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<svg> + <defs> + <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" + markerWidth="6" markerHeight="6" orient="auto" + style="opacity: 0.2"> + <path d="M 0 0 L 10 5 L 0 10 z" /> + </marker> + </defs> + <polyline points="10,90 50,80 90,20" fill="none" stroke="black" + stroke-width="2" marker-end="url(#Triangle)" /> +</svg> diff --git a/layout/reftests/svg/marker-dynamic-opacity.html b/layout/reftests/svg/marker-dynamic-opacity.html new file mode 100644 index 0000000000..d4887fe808 --- /dev/null +++ b/layout/reftests/svg/marker-dynamic-opacity.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <svg> + <defs> + <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" + markerWidth="6" markerHeight="6" orient="auto"> + <path d="M 0 0 L 10 5 L 0 10 z" /> + </marker> + </defs> + <polyline points="10,90 50,80 90,20" fill="none" stroke="black" + stroke-width="2" marker-end="url(#Triangle)" /> + </svg> + <script> + onload = function() { + var m = document.querySelector("marker"); + m.style.opacity = 0.2; + document.documentElement.className = ""; + } + </script> +</html> diff --git a/layout/reftests/svg/marker-effects-01-ref.svg b/layout/reftests/svg/marker-effects-01-ref.svg new file mode 100644 index 0000000000..116d2dda3f --- /dev/null +++ b/layout/reftests/svg/marker-effects-01-ref.svg @@ -0,0 +1,44 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference for clip-path, filter, mask and opacity applying to marker elements</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=874507 --> + <defs> + <clipPath id="c"> + <circle cx="50" cy="50" r="50"/> + </clipPath> + <filter id="f"> + <feColorMatrix type="saturate" values="0"/> + </filter> + <mask id="m"> + <circle cx="50" cy="50" r="50" fill="white"/> + </mask> + <marker id="m-clip-path" markerWidth="100" markerHeight="100" fill="green"> + <g clip-path="url(#c)"> + <rect width="100" height="100"/> + </g> + </marker> + <marker id="m-filter" markerWidth="100" markerHeight="100" fill="green"> + <g filter="url(#f)"> + <rect width="100" height="100"/> + </g> + </marker> + <marker id="m-mask" markerWidth="100" markerHeight="100" fill="green"> + <g mask="url(#m)"> + <rect width="100" height="100"/> + </g> + </marker> + <marker id="m-opacity" markerWidth="100" markerHeight="100" fill="green"> + <g opacity="0.5"> + <rect width="100" height="100"/> + </g> + </marker> + </defs> + + <line x1="10" y1="10" x2="11" y2="10" marker-start="url(#m-clip-path)"/> + <line x1="120" y1="10" x2="121" y2="10" marker-start="url(#m-filter)"/> + <line x1="230" y1="10" x2="231" y2="10" marker-start="url(#m-mask)"/> + <line x1="340" y1="10" x2="341" y2="10" marker-start="url(#m-opacity)"/> +</svg> diff --git a/layout/reftests/svg/marker-effects-01.svg b/layout/reftests/svg/marker-effects-01.svg new file mode 100644 index 0000000000..b438b0725a --- /dev/null +++ b/layout/reftests/svg/marker-effects-01.svg @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that clip-path, filter, mask and opacity apply to marker elements</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=874507 --> + <defs> + <clipPath id="c"> + <circle cx="50" cy="50" r="50"/> + </clipPath> + <filter id="f"> + <feColorMatrix type="saturate" values="0"/> + </filter> + <mask id="m"> + <circle cx="50" cy="50" r="50" fill="white"/> + </mask> + <marker id="m-clip-path" markerWidth="100" markerHeight="100" fill="green" clip-path="url(#c)"> + <rect width="100" height="100"/> + </marker> + <marker id="m-filter" markerWidth="100" markerHeight="100" fill="green" filter="url(#f)"> + <rect width="100" height="100"/> + </marker> + <marker id="m-mask" markerWidth="100" markerHeight="100" fill="green" mask="url(#m)"> + <rect width="100" height="100"/> + </marker> + <marker id="m-opacity" markerWidth="100" markerHeight="100" fill="green" opacity="0.5"> + <rect width="100" height="100"/> + </marker> + </defs> + + <line x1="10" y1="10" x2="11" y2="10" marker-start="url(#m-clip-path)"/> + <line x1="120" y1="10" x2="121" y2="10" marker-start="url(#m-filter)"/> + <line x1="230" y1="10" x2="231" y2="10" marker-start="url(#m-mask)"/> + <line x1="340" y1="10" x2="341" y2="10" marker-start="url(#m-opacity)"/> +</svg> diff --git a/layout/reftests/svg/marker-orientation-01-ref.svg b/layout/reftests/svg/marker-orientation-01-ref.svg new file mode 100644 index 0000000000..00cc9a3a4a --- /dev/null +++ b/layout/reftests/svg/marker-orientation-01-ref.svg @@ -0,0 +1,68 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for test that marker orientation is correct at the end of arcs</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=769115 --> + + <defs> + <g id="m1" transform="translate(-20,-20)" fill="blue"> + <rect x="5" y="15" width="22" height="10"/> + <path d="M 25,10 35,20 25,30 z"/> + </g> + + <g id="m2" transform="translate(-20,-20)" fill="red"> + <rect x="5" y="15" width="22" height="10"/> + <path d="M 25,10 35,20 25,30 z"/> + </g> + </defs> + + <g fill="none"> + <!-- arcs that go from the left of the circle to... --> + <g> + <!-- ...90 degrees anti-clockwise --> + <use xlink:href="#m1" transform="translate(100,100)rotate(90)"/> + <use xlink:href="#m2" transform="rotate(-90,150,100)translate(100,100)rotate(90)"/> + <!-- ...180 degrees anti-clockwise --> + <use xlink:href="#m2" transform="rotate(-180,150,100)translate(100,100)rotate(90)"/> + <!-- ...270 degrees anti-clockwise --> + <use xlink:href="#m2" transform="rotate(-270,150,100)translate(100,100)rotate(90)"/> + </g> + + <!-- arcs that go from the left of the circle to... --> + <g transform="translate(250,0)"> + <!-- ...90 degrees anti-clockwise --> + <use xlink:href="#m1" transform="translate(100,100)rotate(-90)"/> + <use xlink:href="#m2" transform="rotate(90,150,100)translate(100,100)rotate(-90)"/> + <!-- ...180 degrees anti-clockwise --> + <use xlink:href="#m2" transform="rotate(180,150,100)translate(100,100)rotate(-90)"/> + <!-- ...270 degrees anti-clockwise --> + <use xlink:href="#m2" transform="rotate(270,150,100)translate(100,100)rotate(-90)"/> + </g> + + <!-- arcs that go from the right of the circle to... --> + <g transform="translate(0,250)"> + <!-- ...90 degrees anti-clockwise --> + <use xlink:href="#m1" transform="translate(200,100)rotate(90)"/> + <use xlink:href="#m2" transform="rotate(90,150,100)translate(200,100)rotate(90)"/> + <!-- ...180 degrees anti-clockwise --> + <use xlink:href="#m2" transform="rotate(180,150,100)translate(200,100)rotate(90)"/> + <!-- ...270 degrees anti-clockwise --> + <use xlink:href="#m2" transform="rotate(270,150,100)translate(200,100)rotate(90)"/> + </g> + + <!-- arcs that go from the right of the circle to... --> + <g transform="translate(250,250)"> + <!-- ...90 degrees clockwise --> + <use xlink:href="#m1" transform="translate(200,100)rotate(-90)"/> + <use xlink:href="#m2" transform="rotate(-90,150,100)translate(200,100)rotate(-90)"/> + <!-- ...180 degrees clockwise --> + <use xlink:href="#m2" transform="rotate(-180,150,100)translate(200,100)rotate(-90)"/> + <!-- ...270 degrees clockwise --> + <use xlink:href="#m2" transform="rotate(-270,150,100)translate(200,100)rotate(-90)"/> + </g> + </g> + +</svg> diff --git a/layout/reftests/svg/marker-orientation-01.svg b/layout/reftests/svg/marker-orientation-01.svg new file mode 100644 index 0000000000..350c43d7b4 --- /dev/null +++ b/layout/reftests/svg/marker-orientation-01.svg @@ -0,0 +1,63 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that marker orientation is correct at the end of arcs</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=769115 --> + + <marker id="m1" markerWidth="40" markerHeight="40" refX="20" refY="20" + markerUnits="userSpaceOnUse" orient="auto" fill="blue"> + <rect x="5" y="15" width="22" height="10"/> + <path d="M 25,10 35,20 25,30 z"/> + </marker> + + <marker id="m2" markerWidth="40" markerHeight="40" refX="20" refY="20" + markerUnits="userSpaceOnUse" orient="auto" fill="red"> + <rect x="5" y="15" width="22" height="10"/> + <path d="M 25,10 35,20 25,30 z"/> + </marker> + + <g fill="none"> + <!-- arcs that go from the left of the circle to... --> + <g marker-end="url(#m2)"> + <!-- ...90 degrees anti-clockwise --> + <path d="M100,100 A 50,50 0 1 0 150,50" marker-start="url(#m1)"/> + <!-- ...180 degrees anti-clockwise --> + <path d="M100,100 A 50,50 0 0 0 200,100"/> + <!-- ...270 degrees anti-clockwise --> + <path d="M100,100 A 50,50 0 0 0 150,150"/> + </g> + + <!-- arcs that go from the left of the circle to... --> + <g marker-end="url(#m2)" transform="translate(250,0)"> + <!-- ...90 degrees clockwise --> + <path d="M100,100 A 50,50 0 0 1 150,50" marker-start="url(#m1)"/> + <!-- ...180 degrees clockwise --> + <path d="M100,100 A 50,50 0 1 1 200,100"/> + <!-- ...270 degrees clockwise --> + <path d="M100,100 A 50,50 0 1 1 150,150"/> + </g> + + <!-- arcs that go from the right of the circle to... --> + <g marker-end="url(#m2)" transform="translate(0,250)"> + <!-- ...90 degrees anti-clockwise --> + <path d="M200,100 A 50,50 0 0 1 150,150" marker-start="url(#m1)"/> + <!-- ...180 degrees anti-clockwise --> + <path d="M200,100 A 50,50 0 0 1 100,100"/> + <!-- ...270 degrees anti-clockwise --> + <path d="M200,100 A 50,50 0 1 1 150,50"/> + </g> + + <!-- arcs that go from the right of the circle to... --> + <g marker-end="url(#m2)" transform="translate(250,250)"> + <!-- ...90 degrees anti-clockwise --> + <path d="M200,100 A 50,50 0 0 0 150,50" marker-start="url(#m1)"/> + <!-- ...180 degrees anti-clockwise --> + <path d="M200,100 A 50,50 0 1 0 100,100"/> + <!-- ...270 degrees anti-clockwise --> + <path d="M200,100 A 50,50 0 1 0 150,150"/> + </g> + </g> + +</svg> diff --git a/layout/reftests/svg/marker-orientation-02-ref.svg b/layout/reftests/svg/marker-orientation-02-ref.svg new file mode 100644 index 0000000000..0dc75c1f2c --- /dev/null +++ b/layout/reftests/svg/marker-orientation-02-ref.svg @@ -0,0 +1,69 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for test that marker orientation is correct at the end of + arcs when orient="auto-start-reverse" is used</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=769115 --> + + <defs> + <g id="m1" transform="translate(-20,-20)" fill="blue"> + <rect x="5" y="15" width="22" height="10"/> + <path d="M 25,10 35,20 25,30 z"/> + </g> + + <g id="m2" transform="translate(-20,-20)" fill="red"> + <rect x="5" y="15" width="22" height="10"/> + <path d="M 25,10 35,20 25,30 z"/> + </g> + </defs> + + <g fill="none"> + <!-- arcs that go from the left of the circle to... --> + <g> + <!-- ...90 degrees anti-clockwise --> + <use xlink:href="#m1" transform="translate(100,100)rotate(270)"/> + <use xlink:href="#m2" transform="rotate(-90,150,100)translate(100,100)rotate(90)"/> + <!-- ...180 degrees anti-clockwise --> + <use xlink:href="#m2" transform="rotate(-180,150,100)translate(100,100)rotate(90)"/> + <!-- ...270 degrees anti-clockwise --> + <use xlink:href="#m2" transform="rotate(-270,150,100)translate(100,100)rotate(90)"/> + </g> + + <!-- arcs that go from the left of the circle to... --> + <g transform="translate(250,0)"> + <!-- ...90 degrees anti-clockwise --> + <use xlink:href="#m1" transform="translate(100,100)rotate(90)"/> + <use xlink:href="#m2" transform="rotate(90,150,100)translate(100,100)rotate(-90)"/> + <!-- ...180 degrees anti-clockwise --> + <use xlink:href="#m2" transform="rotate(180,150,100)translate(100,100)rotate(-90)"/> + <!-- ...270 degrees anti-clockwise --> + <use xlink:href="#m2" transform="rotate(270,150,100)translate(100,100)rotate(-90)"/> + </g> + + <!-- arcs that go from the right of the circle to... --> + <g transform="translate(0,250)"> + <!-- ...90 degrees anti-clockwise --> + <use xlink:href="#m1" transform="translate(200,100)rotate(270)"/> + <use xlink:href="#m2" transform="rotate(90,150,100)translate(200,100)rotate(90)"/> + <!-- ...180 degrees anti-clockwise --> + <use xlink:href="#m2" transform="rotate(180,150,100)translate(200,100)rotate(90)"/> + <!-- ...270 degrees anti-clockwise --> + <use xlink:href="#m2" transform="rotate(270,150,100)translate(200,100)rotate(90)"/> + </g> + + <!-- arcs that go from the right of the circle to... --> + <g transform="translate(250,250)"> + <!-- ...90 degrees clockwise --> + <use xlink:href="#m1" transform="translate(200,100)rotate(90)"/> + <use xlink:href="#m2" transform="rotate(-90,150,100)translate(200,100)rotate(-90)"/> + <!-- ...180 degrees clockwise --> + <use xlink:href="#m2" transform="rotate(-180,150,100)translate(200,100)rotate(-90)"/> + <!-- ...270 degrees clockwise --> + <use xlink:href="#m2" transform="rotate(-270,150,100)translate(200,100)rotate(-90)"/> + </g> + </g> + +</svg> diff --git a/layout/reftests/svg/marker-orientation-02.svg b/layout/reftests/svg/marker-orientation-02.svg new file mode 100644 index 0000000000..ec9d845aad --- /dev/null +++ b/layout/reftests/svg/marker-orientation-02.svg @@ -0,0 +1,64 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that marker orientation is correct at the end of arcs when + orient="auto-start-reverse" is used</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=769115 --> + + <marker id="m1" markerWidth="40" markerHeight="40" refX="20" refY="20" + markerUnits="userSpaceOnUse" orient="auto-start-reverse" fill="blue"> + <rect x="5" y="15" width="22" height="10"/> + <path d="M 25,10 35,20 25,30 z"/> + </marker> + + <marker id="m2" markerWidth="40" markerHeight="40" refX="20" refY="20" + markerUnits="userSpaceOnUse" orient="auto-start-reverse" fill="red"> + <rect x="5" y="15" width="22" height="10"/> + <path d="M 25,10 35,20 25,30 z"/> + </marker> + + <g fill="none"> + <!-- arcs that go from the left of the circle to... --> + <g marker-end="url(#m2)"> + <!-- ...90 degrees anti-clockwise --> + <path d="M100,100 A 50,50 0 1 0 150,50" marker-start="url(#m1)"/> + <!-- ...180 degrees anti-clockwise --> + <path d="M100,100 A 50,50 0 0 0 200,100"/> + <!-- ...270 degrees anti-clockwise --> + <path d="M100,100 A 50,50 0 0 0 150,150"/> + </g> + + <!-- arcs that go from the left of the circle to... --> + <g marker-end="url(#m2)" transform="translate(250,0)"> + <!-- ...90 degrees clockwise --> + <path d="M100,100 A 50,50 0 0 1 150,50" marker-start="url(#m1)"/> + <!-- ...180 degrees clockwise --> + <path d="M100,100 A 50,50 0 1 1 200,100"/> + <!-- ...270 degrees clockwise --> + <path d="M100,100 A 50,50 0 1 1 150,150"/> + </g> + + <!-- arcs that go from the right of the circle to... --> + <g marker-end="url(#m2)" transform="translate(0,250)"> + <!-- ...90 degrees anti-clockwise --> + <path d="M200,100 A 50,50 0 0 1 150,150" marker-start="url(#m1)"/> + <!-- ...180 degrees anti-clockwise --> + <path d="M200,100 A 50,50 0 0 1 100,100"/> + <!-- ...270 degrees anti-clockwise --> + <path d="M200,100 A 50,50 0 1 1 150,50"/> + </g> + + <!-- arcs that go from the right of the circle to... --> + <g marker-end="url(#m2)" transform="translate(250,250)"> + <!-- ...90 degrees anti-clockwise --> + <path d="M200,100 A 50,50 0 0 0 150,50" marker-start="url(#m1)"/> + <!-- ...180 degrees anti-clockwise --> + <path d="M200,100 A 50,50 0 1 0 100,100"/> + <!-- ...270 degrees anti-clockwise --> + <path d="M200,100 A 50,50 0 1 0 150,150"/> + </g> + </g> + +</svg> diff --git a/layout/reftests/svg/marker-orientation-03.svg b/layout/reftests/svg/marker-orientation-03.svg new file mode 100644 index 0000000000..1bd365df9b --- /dev/null +++ b/layout/reftests/svg/marker-orientation-03.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <marker id="startMarker" markerUnits="userSpaceOnUse" orient="auto" markerWidth="30" markerHeight="45" refX="15" refY="22.5"> + <rect fill="red" x="0.5" y="0.5" width="29" height="44"/> + </marker> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <polyline fill="none" marker-start="url(#startMarker)" points="190 40 220 40 310 190 340 190"/> + <rect x="175" y="18" width="30" height="45" fill="lime" /> + +</svg> diff --git a/layout/reftests/svg/marker-orientation-04.svg b/layout/reftests/svg/marker-orientation-04.svg new file mode 100644 index 0000000000..3fb2fdd0b9 --- /dev/null +++ b/layout/reftests/svg/marker-orientation-04.svg @@ -0,0 +1,39 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <marker id="redTriangle" + refX="0" refY="12" markerUnits="userSpaceOnUse" + markerWidth="24" markerHeight="24" orient="auto"> + <path fill="red" d="M 0 0 L 24 12 L 0 24 z" /> + </marker> + <marker id="limeTriangle" + refX="0" refY="12" markerUnits="userSpaceOnUse" + markerWidth="24" markerHeight="24" orient="auto" overflow="visible"> + <path fill="lime" stroke-width="3" stroke="lime" d="M 0 0 L 24 12 L 0 24 z" /> + </marker> + <marker id="reverseLimeTriangle" + refX="0" refY="12" markerUnits="userSpaceOnUse" + markerWidth="24" markerHeight="24" orient="auto" overflow="visible"> + <path transform="rotate(180, 0, 12)" fill="lime" stroke-width="3" stroke="lime" d="M 0 0 L 24 12 L 0 24 z" /> + </marker> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + + <!-- Control point vectors are zero --> + <path d="M 50,125 C 50,125, 100,25, 100,25" stroke-width="10" stroke="red" + marker-end="url(#redTriangle)" /> + + <path d="M 150,125 C 200,25, 200,25, 200,25" stroke-width="10" stroke="red" + marker-end="url(#redTriangle)" /> + + <!-- Non-degenerate covering --> + <path d="M 50,125 L 100,25" stroke-width="13" stroke="lime" + marker-end="url(#limeTriangle)" marker-start="url(#reverseLimeTriangle)" /> + + <path d="M 150,125 L 200,25" stroke-width="13" stroke="lime" + marker-end="url(#limeTriangle)" marker-start="url(#reverseLimeTriangle)" /> +</svg> diff --git a/layout/reftests/svg/marker-orientation-05.svg b/layout/reftests/svg/marker-orientation-05.svg new file mode 100644 index 0000000000..129e14cf20 --- /dev/null +++ b/layout/reftests/svg/marker-orientation-05.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> + <defs> + <marker id="arrowAutoStartRev" orient="auto-start-reverse" markerUnits="userSpaceOnUse" overflow="visible"> + <path d="M25,25 L0,0 L0,50 z" fill="lime" stroke="lime" stroke-width="2" /> + </marker> + <marker id="arrowSW" orient="135" markerUnits="userSpaceOnUse" overflow="visible"> + <path d="M25,25 L0,0 L0,50 z" fill="red"/> + </marker> + <marker id="arrowAuto" orient="auto" markerUnits="userSpaceOnUse" overflow="visible"> + <path d="M25,25 L0,0 L0,50 z" fill="red"/> + </marker> + </defs> + <rect width="100%" height="100%" fill="lime" /> + <path d="M 340,100 h50 v50 h-50 z" marker-start="url(#arrowSW)" fill="none"/> + <path d="M 340,100 h50 v50 h-50 z" marker-start="url(#arrowAutoStartRev)" fill="none"/> + <g transform="translate(0, 50)"> + <path d="M 340,100 h50 v50 h-50 z" marker-start="url(#arrowAuto)" fill="none"/> + <path d="M 340,100 h50 v50 h-50 z" marker-end="url(#arrowAutoStartRev)" fill="none"/> + </g> +</svg> diff --git a/layout/reftests/svg/marker-viewBox-01-ref.svg b/layout/reftests/svg/marker-viewBox-01-ref.svg new file mode 100644 index 0000000000..9a57366631 --- /dev/null +++ b/layout/reftests/svg/marker-viewBox-01-ref.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference for the 'marker' element with viewBox and preserveAspectRatio</title> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=487649 + + This test checks that when the 'marker' support for viewBox + and preserveAspectRatio. You should see what appears to be + a blue circle right in the top left of the window. + --> + <ellipse cx="20" cy="20" rx="20" ry="20" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/marker-viewBox-01.svg b/layout/reftests/svg/marker-viewBox-01.svg new file mode 100644 index 0000000000..84afb97ee8 --- /dev/null +++ b/layout/reftests/svg/marker-viewBox-01.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test the 'marker' element with viewBox and preserveAspectRatio</title> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=487649 + + This test checks that when the 'marker' support for viewBox + and preserveAspectRatio. You should see what appears to be + a blue circle right in the top left of the window. + --> + <marker id="marker" markerUnits="userSpaceOnUse" markerWidth="40" markerHeight="40" + viewBox="10 0 20 40" preserveAspectRatio="none" refX="20" refY="20"> + <ellipse cx="20" cy="20" rx="10" ry="20" fill="blue"/> + </marker> + <path d="M20,20 L20,21" fill="none" stroke="none" marker-start="url(#marker)"/> +</svg> diff --git a/layout/reftests/svg/markers-and-group-opacity-01-ref.svg b/layout/reftests/svg/markers-and-group-opacity-01-ref.svg new file mode 100644 index 0000000000..14299cf9ec --- /dev/null +++ b/layout/reftests/svg/markers-and-group-opacity-01-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="200%" fill="white"/> + <rect width="100%" height="200%" fill="blue" fill-opacity=".5"/> +</svg> diff --git a/layout/reftests/svg/markers-and-group-opacity-01.svg b/layout/reftests/svg/markers-and-group-opacity-01.svg new file mode 100644 index 0000000000..18b7d807c0 --- /dev/null +++ b/layout/reftests/svg/markers-and-group-opacity-01.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Test that markers are affected by group opacity on the marked element</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=524104 --> + + <marker id="mark" markerUnits="userSpaceOnUse" markerContentUnits="userSpaceOnUse" markerWidth="100%" markerHeight="200%" refX="0" refY="0"> + <rect width="100%" height="200%" fill="blue"/> + </marker> + + <line x1="0" y1="-1" x2="1" y2="-1" fill="none" stroke="black" opacity=".5" marker-start="url(#mark)"/> + +</svg> diff --git a/layout/reftests/svg/mask-and-clipPath-2.svg b/layout/reftests/svg/mask-and-clipPath-2.svg new file mode 100644 index 0000000000..2069bae7f2 --- /dev/null +++ b/layout/reftests/svg/mask-and-clipPath-2.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <polygon id="p" points="0.25,0 0.75,0 0.75,1 0.25,1"/> + <clipPath id="cp" clipPathUnits="objectBoundingBox"> + <use xlink:href="#p"/> + </clipPath> + <mask id="m" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0.25" width="1" height="0.5" fill="white"/> + </mask> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <rect x="101" y="101" width="198" height="198" fill="red"/> + <rect width="400" height="400" fill="lime" mask="url(#m)" clip-path="url(#cp)" + x="-400" y="-400" transform="translate(400,400)"/> +</svg> + diff --git a/layout/reftests/svg/mask-and-clipPath-ref.html b/layout/reftests/svg/mask-and-clipPath-ref.html new file mode 100644 index 0000000000..86098fa835 --- /dev/null +++ b/layout/reftests/svg/mask-and-clipPath-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta content="text/html; charset=utf-8" http-equiv="content-type"/> + </head> + <body> + <svg height="100%" preserveAspectRatio="none meet" viewBox="0 0 1070 462" width="100%"> + <g height="462" width="1070"> + <g mask="url(#mask-1)" transform="translate(0,10)"> + <g> + <path class="data-line" d="M30,260L61,266.5L900,266.5" fill="none" stroke="#cc0000" stroke-width="20" visibility="visible"> + </path> + </g> + </g> + </g> + <g> + <g> + <mask id="mask-1"> + <rect fill="#000" height="100%" width="100%" x="0" y="0"> + </rect> + <rect fill="#fff" height="462" width="400" x="40" y="-10"> + </rect> + <rect fill="#fff" height="460" width="100" x="800" y="-10"> + </rect> + <rect fill="#000" height="447" offset="164" width="60" x="164" y="0"> + </rect> + <rect fill="#000" height="447" offset="376" width="56" x="376" y="0"> + </rect> + </mask> + </g> + </g> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/mask-and-clipPath.html b/layout/reftests/svg/mask-and-clipPath.html new file mode 100644 index 0000000000..19759a6a31 --- /dev/null +++ b/layout/reftests/svg/mask-and-clipPath.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta content="text/html; charset=utf-8" http-equiv="content-type"/> + </head> + <body> + <svg height="100%" preserveAspectRatio="none meet" viewBox="0 0 1070 462" width="100%"> + <g height="462" width="1070"> + <g clip-path="url(#clip-1)" mask="url(#mask-1)" transform="translate(0,10)"> + <g> + <path class="data-line" d="M30,260L61,266.5L900,266.5" fill="none" stroke="#cc0000" stroke-width="20" visibility="visible"> + </path> + </g> + </g> + </g> + <g> + <clipPath id="clip-1"> + <rect height="462" width="400" x="40" y="-10"> + </rect> + <rect height="460" width="100" x="800" y="-10"> + </rect> + </clipPath> + <g> + <mask id="mask-1"> + <rect fill="#fff" height="100%" width="100%" x="0" y="0"> + </rect> + <rect fill="#000" height="447" offset="164" width="60" x="164" y="0"> + </rect> + <rect fill="#000" height="447" offset="376" width="56" x="376" y="0"> + </rect> + </mask> + </g> + </g> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/mask-basic-01.svg b/layout/reftests/svg/mask-basic-01.svg new file mode 100644 index 0000000000..99764efa05 --- /dev/null +++ b/layout/reftests/svg/mask-basic-01.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + + <title>Testcase for mask that can't be resolved</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=620144 --> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="lime" mask="url(#null)"/> +</svg> diff --git a/layout/reftests/svg/mask-basic-02-ref.svg b/layout/reftests/svg/mask-basic-02-ref.svg new file mode 100644 index 0000000000..ac4e7f3f32 --- /dev/null +++ b/layout/reftests/svg/mask-basic-02-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Reference that mask defaults to sRGB</title> + + <rect width="100" height="100" x="100" y="100" fill="#FFC0C0"/> + +</svg> diff --git a/layout/reftests/svg/mask-basic-02.svg b/layout/reftests/svg/mask-basic-02.svg new file mode 100644 index 0000000000..71204df0e7 --- /dev/null +++ b/layout/reftests/svg/mask-basic-02.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <title>Testcase that mask defaults to sRGB</title> + + <defs> + <mask id="mask" maskContentUnits="objectBoundingBox"> + <rect width="1" height="1" fill="#3f3f3f" /> + </mask> + </defs> + + <rect width="100" height="100" x="100" y="100" mask="url(#mask)" fill="#FF0000"/> + +</svg> diff --git a/layout/reftests/svg/mask-basic-03.svg b/layout/reftests/svg/mask-basic-03.svg new file mode 100644 index 0000000000..6358507883 --- /dev/null +++ b/layout/reftests/svg/mask-basic-03.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=779029 --> + + <title>Test that the x/y/width/height attributes work on the mask element</title> + + <mask id="mask" x="20%" y="20%" width="60%" height="60%"> + <rect width="1000" height="1000" fill="white"/> + </mask> + + <rect width="100%" height="100%" fill="lime"/> + <rect x="50" y="50" width="100" height="100" fill="red" mask="url(#mask)"/> + <rect x="70" y="70" width="60" height="60" fill="lime"/> + +</svg> diff --git a/layout/reftests/svg/mask-basic-04.svg b/layout/reftests/svg/mask-basic-04.svg new file mode 100644 index 0000000000..db90104bf9 --- /dev/null +++ b/layout/reftests/svg/mask-basic-04.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=995813 --> + + <title>Test mapped attributes work on the mask element</title> + + <mask id="mask" fill="white" maskContentUnits="objectBoundingBox"> + <rect width="100%" height="100%"/> + </mask> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="lime" mask="url(#mask)"/> + +</svg> diff --git a/layout/reftests/svg/mask-basic-05.svg b/layout/reftests/svg/mask-basic-05.svg new file mode 100644 index 0000000000..c98e81b1f1 --- /dev/null +++ b/layout/reftests/svg/mask-basic-05.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none"> + <title>Testcase for mask that can't be resolved</title> + <rect width="100%" height="100%" fill="red"/> + <g mask="url(#foo)"> + <!-- Draw a line path with zero area --> + <path stroke="lime" stroke-width="200%" d="M0,50L100,50"/> + </g> +</svg> diff --git a/layout/reftests/svg/mask-containing-masked-content-01.svg b/layout/reftests/svg/mask-containing-masked-content-01.svg new file mode 100644 index 0000000000..eb672a9771 --- /dev/null +++ b/layout/reftests/svg/mask-containing-masked-content-01.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test 'mask' containing masked content</title> + <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <rect width="0.5" height="1" fill="white"/> + </mask> + <mask id="m2" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <rect width="1" height="1" fill="white" mask="url(#m1)"/> + </mask> + <rect width="100%" height="100%" fill="lime"/> + <rect width="50" height="100%" fill="red"/> + <g mask="url(#m2)"> + <rect width="50" height="100%" fill="lime"/> + <rect x="50" width="50" height="100%" fill="red"/> + </g> +</svg> diff --git a/layout/reftests/svg/mask-contains-inner-svg-01.svg b/layout/reftests/svg/mask-contains-inner-svg-01.svg new file mode 100644 index 0000000000..619fe66ea9 --- /dev/null +++ b/layout/reftests/svg/mask-contains-inner-svg-01.svg @@ -0,0 +1,13 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <mask id="myMask"> + <svg x="50%" overflow="visible"> + <polygon fill="white" points="-50 0 50 0 50 100 -50 100"/> + </svg> + </mask> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle cx="50%" cy="50" r="40" fill="red"/> + <rect mask="url(#myMask)" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/mask-contains-inner-svg-02.svg b/layout/reftests/svg/mask-contains-inner-svg-02.svg new file mode 100644 index 0000000000..78a5ce004e --- /dev/null +++ b/layout/reftests/svg/mask-contains-inner-svg-02.svg @@ -0,0 +1,15 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <mask id="myMask"> + <svg x="25%" overflow="visible"> + <svg x="25%" overflow="visible"> + <polygon fill="white" points="-50 0 50 0 50 100 -50 100"/> + </svg> + </svg> + </mask> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <circle cx="50%" cy="50" r="40" fill="red"/> + <rect mask="url(#myMask)" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/mask-css-transform-ref.html b/layout/reftests/svg/mask-css-transform-ref.html new file mode 100644 index 0000000000..3a27179a21 --- /dev/null +++ b/layout/reftests/svg/mask-css-transform-ref.html @@ -0,0 +1,9 @@ +<svg style="width: 500px; height: 500px; border: 1px solid green;"> + <defs> + <mask id="mask"> + <rect x="200px" y="250px" width="100px" height="150px" fill="#ffffff" /> + <rect x="50px" y="105px" width="110px" height="195px" fill="blue" /> + </mask> + </defs> + <rect mask="url(#mask)" width="500px" height="500px" fill="red" /> +</svg> diff --git a/layout/reftests/svg/mask-css-transform.html b/layout/reftests/svg/mask-css-transform.html new file mode 100644 index 0000000000..e6bc8f69ed --- /dev/null +++ b/layout/reftests/svg/mask-css-transform.html @@ -0,0 +1,19 @@ +<style> + #square1 { + transform: translate(100px, 100px) scale(2,3); + } + #square2 { + transform: scale(2,3); + } +</style> +<svg style="width: 500px; height: 500px; border: 1px solid green;"> + <defs> + <mask id="mask"> + <rect id="square1" x="50px" y="50px" width="50px" height="50px" fill="#ffffff" /> + <svg viewBox="0 0 100 100"> + <rect id="square2" x="5" y="7" width="11" height="13" fill="blue" /> + </svg> + </mask> + </defs> + <rect mask="url(#mask)" width="500px" height="500px" fill="red" /> +</svg> diff --git a/layout/reftests/svg/mask-empty-size.svg b/layout/reftests/svg/mask-empty-size.svg new file mode 100644 index 0000000000..161c8b36b2 --- /dev/null +++ b/layout/reftests/svg/mask-empty-size.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + <title>Testcase for mask with empty size</title> + <mask id="m1" width="1" height="0"> + <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/> + </mask> + <!-- Since the size of m1 is empty, the following rect should be invisible. --> + <rect width="100" height="100" fill="blue" mask="url(#m1)"/> +</svg> diff --git a/layout/reftests/svg/mask-extref-dataURI-01.svg b/layout/reftests/svg/mask-extref-dataURI-01.svg new file mode 100644 index 0000000000..b79258fb17 --- /dev/null +++ b/layout/reftests/svg/mask-extref-dataURI-01.svg @@ -0,0 +1,38 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE svg [ + <!-- entities etc. here --> + <!ENTITY dataURI + "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><g id='empty'/><mask id='mask' maskContentUnits='userSpaceOnUse'><rect width='50' height='50' fill='white'/></mask></svg>"> +]> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title> + Testcase for bug 686013: CSS mask targeting a fragment in a data URI + </title> + <style type="text/css"> + .masked { + mask: url("&dataURI;#mask"); + } + </style> + + <!-- use an empty g to force resource document to load before onload --> + <use xlink:href="&dataURI;#empty"/> + + <!-- giant lime background --> + <rect width="100%" height="100%" fill="lime"/> + + <!-- Masked red rect, covered by lime rect + (to make sure mask doesn't let too much through) --> + <rect width="75" height="75" fill="red" class="masked"/> + <rect width="50" height="50" fill="lime"/> + + <!-- Masked lime rect, covering red rect + (to make sure mask lets enough through) --> + <g transform="translate(0, 100)"> + <rect width="50" height="50" fill="red"/> + <rect width="75" height="75" fill="lime" class="masked"/> + </g> +</svg> diff --git a/layout/reftests/svg/mask-image-filter-transform-ref.html b/layout/reftests/svg/mask-image-filter-transform-ref.html new file mode 100644 index 0000000000..d040e160a9 --- /dev/null +++ b/layout/reftests/svg/mask-image-filter-transform-ref.html @@ -0,0 +1,7 @@ +<svg width="400" height="400"> + <mask id="m"> + <image x="20" y="20" width="100" height="100" + href="data:image/svg+xml,<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='red' /></svg>" /> + </mask> + <rect mask="url(#m)" x="50" y="50" width="50%" height="50%" fill="black"></rect> +</svg> diff --git a/layout/reftests/svg/mask-image-filter-transform.html b/layout/reftests/svg/mask-image-filter-transform.html new file mode 100644 index 0000000000..d5196e8327 --- /dev/null +++ b/layout/reftests/svg/mask-image-filter-transform.html @@ -0,0 +1,9 @@ +<svg width="400" height="400" viewBox="0 0 800 800"> + <mask id="m"> + <g transform="scale(.5,.5)"> + <image filter="blur(0)" x="80" y="80" width="400" height="400" + href="data:image/svg+xml,<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='red' /></svg>" /> + </g> + </mask> + <rect mask="url(#m)" x="100" y="100" width="50%" height="50%" fill="black"></rect> +</svg> diff --git a/layout/reftests/svg/mask-img-ref.html b/layout/reftests/svg/mask-img-ref.html new file mode 100644 index 0000000000..a9505112c2 --- /dev/null +++ b/layout/reftests/svg/mask-img-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html>
+<html>
+ <body style="margin:0">
+ <img src='data:image/svg+xml,
+<!-- vim: set expandtab ts=2 sw=2 tw=80: -->
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ viewBox="0 0 700 130">
+ <defs>
+ <style type="text/css">
+ .fillSpan {
+ fill: lightgrey;
+ stroke: black;
+ }
+ </style>
+ <!-- Fade out effect -->
+ <mask id="fadeout" maskContentUnits="objectBoundingBox">
+ <rect x="-0.05" y="-0.05" width="1.1" height="1.1"
+ fill="url(%23fadeoutGrad)"/>
+ </mask>
+ <linearGradient id="fadeoutGrad">
+ <stop offset="0" stop-color="white" stop-opacity="1"/>
+ <stop offset="0.35" stop-color="white" stop-opacity="1"/>
+ <stop offset="0.9" stop-color="white" stop-opacity="0"/>
+ </linearGradient>
+ </defs>
+ <rect y="50" width="150" height="80" class="fillSpan" mask="url(%23fadeout)"/>
+</svg>
+ ' border=0 width="700">
+ </body>
+</html>
diff --git a/layout/reftests/svg/mask-img.html b/layout/reftests/svg/mask-img.html new file mode 100644 index 0000000000..e080a1b088 --- /dev/null +++ b/layout/reftests/svg/mask-img.html @@ -0,0 +1,32 @@ +<!DOCTYPE html>
+<html>
+ <body style="margin:0">
+ <div style="height:50px"></div>
+ <img border=0 src='data:image/svg+xml,
+<!-- vim: set expandtab ts=2 sw=2 tw=80: -->
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ viewBox="0 0 700 80">
+ <defs>
+ <style type="text/css">
+ .fillSpan {
+ fill: lightgrey;
+ stroke: black;
+ }
+ </style>
+ <!-- Fade out effect -->
+ <mask id="fadeout" maskContentUnits="objectBoundingBox">
+ <rect x="-0.05" y="-0.05" width="1.1" height="1.1"
+ fill="url(%23fadeoutGrad)"/>
+ </mask>
+ <linearGradient id="fadeoutGrad">
+ <stop offset="0" stop-color="white" stop-opacity="1"/>
+ <stop offset="0.35" stop-color="white" stop-opacity="1"/>
+ <stop offset="0.9" stop-color="white" stop-opacity="0"/>
+ </linearGradient>
+ </defs>
+ <rect width="150" height="80" class="fillSpan" mask="url(%23fadeout)"/>
+</svg>
+ ' width="700">
+ </body>
+</html>
diff --git a/layout/reftests/svg/mask-invalidation-ref.html b/layout/reftests/svg/mask-invalidation-ref.html new file mode 100644 index 0000000000..43a8baa51a --- /dev/null +++ b/layout/reftests/svg/mask-invalidation-ref.html @@ -0,0 +1,5 @@ +<html> +<svg> + <rect width=110 height=50 x=0 y=50 fill=green /> +</svg> + diff --git a/layout/reftests/svg/mask-invalidation.html b/layout/reftests/svg/mask-invalidation.html new file mode 100644 index 0000000000..2866c1f692 --- /dev/null +++ b/layout/reftests/svg/mask-invalidation.html @@ -0,0 +1,24 @@ +<html class="reftest-wait"> +<svg> + <clipPath id=myClip> + <circle cx=100 cy=100 r=100 /> + </clipPath> + <g style="transform: translate(0px, 0)" clip-path="url(#myClip)"> + <!-- for some reason this first rect is needed to trigger the bug --> + <rect width=100 height=50 x=10 y=50 fill=green /> + <rect id=gr width=100 height=50 x=0 y=50 fill=red /> + </g> + <rect width=50 height=50 x=0 y=50 fill=green /> +</svg> +<script> + function blam() { + let gr = document.getElementById("gr"); + gr.setAttribute('fill', 'green'); + document.documentElement.removeAttribute("class"); + } +document.addEventListener("MozReftestInvalidate", function() { + requestAnimationFrame(function() { + blam(); + }); +}); +</script> diff --git a/layout/reftests/svg/mask-on-outflowElement-01a.html b/layout/reftests/svg/mask-on-outflowElement-01a.html new file mode 100644 index 0000000000..09bd71aba6 --- /dev/null +++ b/layout/reftests/svg/mask-on-outflowElement-01a.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<style type="text/css"> + #outer { + width: 100px; + height: 100px; + overflow: hidden; + } + + #clipped { + mask: url(#myMask); + width: 300px; + height: 300px; + } + + #absolutePosition { + position: absolute; + top: 0; + left: 0; + width: 400px; + height: 400px; + background-color: blue; + } +</style> + +<body style="margin: 0px;"> + <div id="outer"> + <div id="clipped"> + <div id="absolutePosition"> + <!-- This should only be clipped by the mask, not by the 100x100 + overflow:hidden clip. --> + </div> + </div> + </div> + <svg height="0"> + <defs> + <mask id="myMask" x="0" y="0" width="1" height="1" maskUnits="objectBoundingBox"> + <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/> + <rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/> + <rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/> + <!-- The forth rect should be clipped out --> + <rect x="300" y="300" width="100" height="100" style="stroke:none; fill: #ffffff"/> + </mask> + </defs> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/mask-on-outflowElement-01b.html b/layout/reftests/svg/mask-on-outflowElement-01b.html new file mode 100644 index 0000000000..dae39f06e9 --- /dev/null +++ b/layout/reftests/svg/mask-on-outflowElement-01b.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<style type="text/css"> + #outer { + width: 100px; + height: 100px; + overflow: hidden; + } + + #clipped { + mask: url(mask-on-outflowElement.svg); + width: 300px; + height: 300px; + } + + #absolutePosition { + position:absolute; + top: 0; + left: 0; + width: 400px; + height: 400px; + background-color: blue; + } +</style> + +<body style="margin: 0px;"> + <div id="outer"> + <div id="clipped"> + <div id="absolutePosition"> + <!-- This should only be clipped by the mask, not by the 100x100 + overflow:hidden clip. + image mask is always clipped by the rect of associated element. The + forth rectangle in mask-on-outflowElement.svg is clipped out since + the size of #clipped is (w=300, height=300) + --> + </div> + </div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/mask-on-outflowElement.svg b/layout/reftests/svg/mask-on-outflowElement.svg new file mode 100644 index 0000000000..17b86769ff --- /dev/null +++ b/layout/reftests/svg/mask-on-outflowElement.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/> + <rect x="100" y="100" width="100" height="100" style="stroke:none; fill: #ffffff"/> + <rect x="200" y="200" width="100" height="100" style="stroke:none; fill: #ffffff"/> + <rect x="300" y="300" width="100" height="100" style="stroke:none; fill: #ffffff"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/mask-opacity-01-ref.svg b/layout/reftests/svg/mask-opacity-01-ref.svg new file mode 100644 index 0000000000..72de542d1d --- /dev/null +++ b/layout/reftests/svg/mask-opacity-01-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + <rect width="50" height="100" fill="blue" fill-opacity="0.5"/> +</svg> diff --git a/layout/reftests/svg/mask-opacity-01.svg b/layout/reftests/svg/mask-opacity-01.svg new file mode 100644 index 0000000000..edf9f6f911 --- /dev/null +++ b/layout/reftests/svg/mask-opacity-01.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + <title>Testcase for the combination of mask, clipPath and opacity</title> + <defs> + <mask id="m1" maskContentUnits="objectBoundingBox" style="mask-type: alpha;"> + <rect width="1" height="1" style="stroke:#ffffff; fill: #ffffff; opacity: 0.5;" mask="url(#m2)"/> + </mask> + <mask id="m2" maskContentUnits="objectBoundingBox" style="mask-type: alpha;"> + <rect width="0.5" height="1" style="stroke:none; fill: #ffffff"/> + </mask> + </defs> + <rect width="100" height="100" fill="blue" mask="url(#m1)"/> +</svg> diff --git a/layout/reftests/svg/mask-opacity-02-ref.svg b/layout/reftests/svg/mask-opacity-02-ref.svg new file mode 100644 index 0000000000..8b5d3d0ccf --- /dev/null +++ b/layout/reftests/svg/mask-opacity-02-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="256" height="256"> + <circle id="outter" cx="128" cy="128" r="128" fill-opacity="0.33"></circle> +</svg> diff --git a/layout/reftests/svg/mask-opacity-02.svg b/layout/reftests/svg/mask-opacity-02.svg new file mode 100644 index 0000000000..c9a7b90181 --- /dev/null +++ b/layout/reftests/svg/mask-opacity-02.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" +xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for the combination of use, mask, opacity</title> + <!-- Shapes --> + <defs> + <rect id="frame" x="0" y="0" width="256" height="256"></rect> + <circle id="outter" cx="128" cy="128" r="128"></circle> + </defs> + + <!-- Masks --> + <defs> + <mask id="donut"> + <use xlink:href="#outter" fill="white"></use> + </mask> + </defs> + + <g transform="translate(0,0)"> + <use xlink:href="#frame" class="shape" opacity="0.33" mask="url(#donut)"></use> + </g> +</svg> diff --git a/layout/reftests/svg/mask-opacity-03.svg b/layout/reftests/svg/mask-opacity-03.svg new file mode 100644 index 0000000000..62aad437c2 --- /dev/null +++ b/layout/reftests/svg/mask-opacity-03.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" +xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for the combination of shape, mask, opacity</title> + <!-- Shapes --> + <defs> + <rect id="frame" x="0" y="0" width="256" height="256"></rect> + <circle id="outter" cx="128" cy="128" r="128"></circle> + </defs> + + <!-- Masks --> + <defs> + <mask id="donut"> + <use xlink:href="#outter" fill="white"></use> + </mask> + </defs> + + <g transform="translate(0,0)"> + <rect x="0" y="0" width="512" height="256" class="shape" opacity="0.33" mask="url(#donut)"></rect> + </g> +</svg> diff --git a/layout/reftests/svg/mask-opacity-04.svg b/layout/reftests/svg/mask-opacity-04.svg new file mode 100644 index 0000000000..d4046e2b43 --- /dev/null +++ b/layout/reftests/svg/mask-opacity-04.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" +xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for the combination of use, mask, fill-opacity</title> + <!-- Shapes --> + <defs> + <rect id="frame" x="0" y="0" width="256" height="256"></rect> + <circle id="outter" cx="128" cy="128" r="128"></circle> + </defs> + + <!-- Masks --> + <defs> + <mask id="donut"> + <use xlink:href="#outter" fill="white"></use> + </mask> + </defs> + + <g transform="translate(0,0)"> + <use xlink:href="#frame" class="shape" fill-opacity="0.33" mask="url(#donut)"></use> + </g> +</svg> diff --git a/layout/reftests/svg/mask-opacity-05.svg b/layout/reftests/svg/mask-opacity-05.svg new file mode 100644 index 0000000000..c832577438 --- /dev/null +++ b/layout/reftests/svg/mask-opacity-05.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" +xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for the combination of rect, mask, fill-opacity</title> + <!-- Shapes --> + <defs> + <rect id="frame" x="0" y="0" width="256" height="256"></rect> + <circle id="outter" cx="128" cy="128" r="128"></circle> + </defs> + + <!-- Masks --> + <defs> + <mask id="donut"> + <use xlink:href="#outter" fill="white"></use> + </mask> + </defs> + + <g transform="translate(0,0)"> + <rect x="0" y="0" width="512" height="256" class="shape" fill-opacity="0.33" mask="url(#donut)"></rect> + </g> +</svg> diff --git a/layout/reftests/svg/mask-opacity-invalidation-1-ref.html b/layout/reftests/svg/mask-opacity-invalidation-1-ref.html new file mode 100644 index 0000000000..b60ccca0a8 --- /dev/null +++ b/layout/reftests/svg/mask-opacity-invalidation-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> + <title></title> + <style> + #mask { + clip-path: circle(50%); + width: 100px; + height: 100px; + opacity: 0.5; + } + + #content { + width: 100px; + height: 100px; + background-color: green; + } + </style> +</head> + +<body> + <div id="mask"> + <div id="content"></div> + </div> +</body> +</html> diff --git a/layout/reftests/svg/mask-opacity-invalidation-1.html b/layout/reftests/svg/mask-opacity-invalidation-1.html new file mode 100644 index 0000000000..d7b8de5fd4 --- /dev/null +++ b/layout/reftests/svg/mask-opacity-invalidation-1.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> + <title></title> + <style> + #mask { + clip-path: circle(50%); + width: 100px; + height: 100px; + opacity: 0.9; + } + + #content { + width: 100px; + height: 100px; + background-color: green; + } + </style> +</head> + +<body> + <div id="mask"> + <div id="content"></div> + </div> + + <script type="text/javascript"> + function step1() { + document.querySelector("#mask").style.opacity = 0.1; + window.requestAnimationFrame(() => window.requestAnimationFrame(step2)); + }; + + function step2() { + document.querySelector("#mask").style.opacity = 0.5; + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", step1); + </script> +</body> +</html> diff --git a/layout/reftests/svg/mask-ref-loop-01.svg b/layout/reftests/svg/mask-ref-loop-01.svg new file mode 100644 index 0000000000..e4be5acd5d --- /dev/null +++ b/layout/reftests/svg/mask-ref-loop-01.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1392235 --> + + <title>Test handling of simple mask reference loop</title> + + <mask id="mask" x="20" y="20" width="100" height="100" + maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"> + <rect x="20" y="20" width="100" height="100" fill="white" mask="url(#mask)"/> + </mask> + + <rect width="100%" height="100%" fill="lime"/> + <rect width="140" height="140" fill="red" mask="url(#mask)"/> + <rect x="20" y="20" width="100" height="100" fill="lime"/> + +</svg> diff --git a/layout/reftests/svg/mask-resource-ref.html b/layout/reftests/svg/mask-resource-ref.html new file mode 100644 index 0000000000..ebcf3bc9da --- /dev/null +++ b/layout/reftests/svg/mask-resource-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<style> + div { + width: 100px; + height: 100px; + background-image: url(resource://usercontext-content/fingerprint.svg); + background-size: 100px 100px; + background-color: white; + } +</style> +<div></div> diff --git a/layout/reftests/svg/mask-resource.html b/layout/reftests/svg/mask-resource.html new file mode 100644 index 0000000000..f11e7685ad --- /dev/null +++ b/layout/reftests/svg/mask-resource.html @@ -0,0 +1,11 @@ +<!doctype html> +<style> + div { + width: 100px; + height: 100px; + mask-image: url(resource://usercontext-content/fingerprint.svg); + mask-size: 100px 100px; + background-color: black; + } +</style> +<div></div> diff --git a/layout/reftests/svg/mask-root-svg.svg b/layout/reftests/svg/mask-root-svg.svg new file mode 100644 index 0000000000..e5a2ed582b --- /dev/null +++ b/layout/reftests/svg/mask-root-svg.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.0" mask="url(#mask1)"> + <defs> + <mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" x="0" y="0" width="0.5" height="0.5"> + <rect x="0" y="0" width="1" height="1" style="stroke:none; fill: #ffffff"/> + </mask> + </defs> + <rect width="50%" height="50%" fill="white"/> + <rect x="30%" y="30%" width="20%" height="20%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/mask-transformed-01-ref.svg b/layout/reftests/svg/mask-transformed-01-ref.svg new file mode 100644 index 0000000000..28ae8e2828 --- /dev/null +++ b/layout/reftests/svg/mask-transformed-01-ref.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" width="400" height="400"> + <rect width="50%" height="50%" fill="lime"/> +</svg> + diff --git a/layout/reftests/svg/mask-transformed-01.svg b/layout/reftests/svg/mask-transformed-01.svg new file mode 100644 index 0000000000..254c3e9666 --- /dev/null +++ b/layout/reftests/svg/mask-transformed-01.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"> + <defs> + <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="white"/> + </mask> + </defs> + <foreignObject width="100%" height="100%" transform="scale(0.5)"> + <svg style="width:100%; height:100%;"> + <rect width="100%" height="100%" fill="lime" mask="url(#m1)"/> + </svg> + </foreignObject> +</svg> + diff --git a/layout/reftests/svg/mask-transformed-02.svg b/layout/reftests/svg/mask-transformed-02.svg new file mode 100644 index 0000000000..4361895d86 --- /dev/null +++ b/layout/reftests/svg/mask-transformed-02.svg @@ -0,0 +1,19 @@ +<!-- + 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"> + + <title>Testcase for mask on elements that are transformed</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=806432 --> + + <mask id="m" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"> + <rect x="0" y="0" width="100" height="100" fill="white"/> + </mask> + + <rect width="100%" height="100%" fill="lime"/> + <rect x="10" y="10" width="100" height="100" fill="red"/> + <rect width="100" height="100" transform="translate(10,10)" fill="lime" mask="url(#m)"/> + +</svg> diff --git a/layout/reftests/svg/mask-transformed-child-01-ref.svg b/layout/reftests/svg/mask-transformed-child-01-ref.svg new file mode 100644 index 0000000000..19c7f22e6b --- /dev/null +++ b/layout/reftests/svg/mask-transformed-child-01-ref.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"> + <rect x="50" y="75" width="100" height="50" fill="blue"/> +</svg> + diff --git a/layout/reftests/svg/mask-transformed-child-01.svg b/layout/reftests/svg/mask-transformed-child-01.svg new file mode 100644 index 0000000000..e619d64d48 --- /dev/null +++ b/layout/reftests/svg/mask-transformed-child-01.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <rect x="0.25" y="0" width="0.5" height="1" fill="white" transform="rotate(90,0.5,0.5)"/> + </mask> + <rect x="50" y="50" width="100" height="100" fill="blue" mask="url(#mask)"/> +</svg> + diff --git a/layout/reftests/svg/mask-type-01-ref.svg b/layout/reftests/svg/mask-type-01-ref.svg new file mode 100644 index 0000000000..3885c41219 --- /dev/null +++ b/layout/reftests/svg/mask-type-01-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + + <title>Reference for alpha mask</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=793617 --> + + <rect x="10" y="10" width="80" height="80" fill="blue" fill-opacity="0.5"/> +</svg> diff --git a/layout/reftests/svg/mask-type-01.svg b/layout/reftests/svg/mask-type-01.svg new file mode 100644 index 0000000000..1e83b457b7 --- /dev/null +++ b/layout/reftests/svg/mask-type-01.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + + <title>Testcase for alpha mask</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=793617 --> + + <mask id="m" maskContentUnits="objectBoundingBox" style="mask-type: alpha"> + <rect x=".1" y=".1" width=".8" height=".8" fill="black" fill-opacity="0.5"/> + </mask> + <rect width="100" height="100" fill="blue" mask="url(#m)"/> +</svg> diff --git a/layout/reftests/svg/mask-type-02.svg b/layout/reftests/svg/mask-type-02.svg new file mode 100644 index 0000000000..f3679b3c8a --- /dev/null +++ b/layout/reftests/svg/mask-type-02.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + + <title>Testcase for alpha mask using the presentation attribute</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=793617 --> + + <mask id="m" maskContentUnits="objectBoundingBox" mask-type="alpha"> + <rect x=".1" y=".1" width=".8" height=".8" fill="black" fill-opacity="0.5"/> + </mask> + <rect width="100" height="100" fill="blue" mask="url(#m)"/> +</svg> diff --git a/layout/reftests/svg/mask-type-03.svg b/layout/reftests/svg/mask-type-03.svg new file mode 100644 index 0000000000..b333b6bf08 --- /dev/null +++ b/layout/reftests/svg/mask-type-03.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" + class="reftest-wait" onload="run()"> + + <title>Testcase for alpha mask, dynamically setting mask-type</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=793617 --> + + <mask id="m" maskContentUnits="objectBoundingBox"> + <rect x=".1" y=".1" width=".8" height=".8" fill="black" fill-opacity="0.5"/> + </mask> + <rect width="100" height="100" fill="blue" mask="url(#m)"/> + + <script> + function run() { + document.getElementById("m").style.maskType = "alpha"; + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/mask-type-04.svg b/layout/reftests/svg/mask-type-04.svg new file mode 100644 index 0000000000..ee46b5d57c --- /dev/null +++ b/layout/reftests/svg/mask-type-04.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + + <title>Testcase for alpha mask, dynamically setting mask-type</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=793617 --> + + <mask id="m" maskContentUnits="objectBoundingBox"> + <rect x=".1" y=".1" width=".8" height=".8" fill="black" fill-opacity="0.5"/> + <set attributeName="mask-type" to="alpha"/> + </mask> + <rect width="100" height="100" fill="blue" mask="url(#m)"/> +</svg> diff --git a/layout/reftests/svg/mask-use-element-01.svg b/layout/reftests/svg/mask-use-element-01.svg new file mode 100644 index 0000000000..c2490ad0a1 --- /dev/null +++ b/layout/reftests/svg/mask-use-element-01.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <mask id="myMask"> + <rect x="100" y="100" width="100" height="100" fill="white"/> + </mask> + <rect x="0" y="0" width="100" height="100" fill="red" id="abc"/> + </defs> + <rect x="0" y="0" width="100%" height="100%" fill="lime"/> + <use xlink:href="#abc" + x="100" y="100" mask="url(#myMask)"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/moz-only/big.png b/layout/reftests/svg/moz-only/big.png Binary files differnew file mode 100644 index 0000000000..76a32497c7 --- /dev/null +++ b/layout/reftests/svg/moz-only/big.png diff --git a/layout/reftests/svg/moz-only/feImage-zoom-01-ref.svg b/layout/reftests/svg/moz-only/feImage-zoom-01-ref.svg new file mode 100644 index 0000000000..92046f8d2c --- /dev/null +++ b/layout/reftests/svg/moz-only/feImage-zoom-01-ref.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<title>test image-rendering: -moz-crisp-edges</title> +<defs> + <filter id="i" x="0%" y="0%" width="100%" height="100%"> + <feImage xlink:href="big.png"/> + </filter> +</defs> +<rect x="0" y="0" width="10" height="10" filter="url(#i)"/> +</svg> diff --git a/layout/reftests/svg/moz-only/feImage-zoom-01a.svg b/layout/reftests/svg/moz-only/feImage-zoom-01a.svg new file mode 100644 index 0000000000..3b2ea655ff --- /dev/null +++ b/layout/reftests/svg/moz-only/feImage-zoom-01a.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + reftest-zoom="5" + width="20%" height="20%"> +<title>test image-rendering: -moz-crisp-edges</title> +<defs> + <filter id="i" x="0%" y="0%" width="100%" height="100%"> + <feImage image-rendering="-moz-crisp-edges" xlink:href="small.png"/> + </filter> +</defs> +<rect x="0" y="0" width="10" height="10" filter="url(#i)"/> +</svg> diff --git a/layout/reftests/svg/moz-only/feImage-zoom-01b.svg b/layout/reftests/svg/moz-only/feImage-zoom-01b.svg new file mode 100644 index 0000000000..c8be9ea6b5 --- /dev/null +++ b/layout/reftests/svg/moz-only/feImage-zoom-01b.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + reftest-zoom="5" + width="20%" height="20%"> +<title>test image-rendering: -moz-crisp-edges</title> +<defs> + <filter id="i" x="0%" y="0%" width="100%" height="100%"> + <feImage style="image-rendering:-moz-crisp-edges" xlink:href="small.png"/> + </filter> +</defs> +<rect x="0" y="0" width="10" height="10" filter="url(#i)"/> +</svg> diff --git a/layout/reftests/svg/moz-only/foreignObject-zoom-01.svg b/layout/reftests/svg/moz-only/foreignObject-zoom-01.svg new file mode 100644 index 0000000000..42250464a9 --- /dev/null +++ b/layout/reftests/svg/moz-only/foreignObject-zoom-01.svg @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + onload="startTest()" reftest-zoom="2" class="reftest-wait" + style="width:50%; height:50%;"> + + <title>Testcase for zoomed foreignObject</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=484677 --> + + <style type="text/css"> + * { margin:0;height:100%;width:100% } + </style> + <foreignObject width="100%" height="100%"> + <html xmlns="http://www.w3.org/1999/xhtml"> + <body> + <div id="div" style="width:20px;height:20px;background:yellow;"/> + </body> + </html> + </foreignObject> + <script type="text/javascript"> + function startTest() { + document.addEventListener("MozReftestInvalidate", doTest, false); + } + function doTest() { + var elem = document.elementFromPoint(25, 25); + var div = document.getElementById("div"); + div.setAttribute("style", "background:" + ((elem == div) ? "red" : "lime") + ";"); + document.documentElement.removeAttribute("class"); + } + </script> +</svg> diff --git a/layout/reftests/svg/moz-only/pass-black.svg b/layout/reftests/svg/moz-only/pass-black.svg new file mode 100644 index 0000000000..d80f66d63e --- /dev/null +++ b/layout/reftests/svg/moz-only/pass-black.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"> + <title>Testcase reference file for black pass condition</title> + <rect width="100%" height="100%" fill="black"/> +</svg> diff --git a/layout/reftests/svg/moz-only/pass.svg b/layout/reftests/svg/moz-only/pass.svg new file mode 100644 index 0000000000..c09c6601e8 --- /dev/null +++ b/layout/reftests/svg/moz-only/pass.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"> + <title>Testcase reference file for generic pass condition</title> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/moz-only/reftest.list b/layout/reftests/svg/moz-only/reftest.list new file mode 100644 index 0000000000..ce73d4119c --- /dev/null +++ b/layout/reftests/svg/moz-only/reftest.list @@ -0,0 +1,7 @@ +# Tests for zooming with the full page zoom UI +random-if(d2d) == feImage-zoom-01a.svg feImage-zoom-01-ref.svg +random-if(d2d) == feImage-zoom-01b.svg feImage-zoom-01-ref.svg +== foreignObject-zoom-01.svg pass.svg +== zoom-invalidation-01.svg pass.svg +== replaced-element-zoom-01.html pass.svg +fuzzy-if(winWidget,0-12,0-7) == zoomed-svg-with-viewBox-01.svg zoomed-svg-with-viewBox-01-ref.svg diff --git a/layout/reftests/svg/moz-only/replaced-element-zoom-01.html b/layout/reftests/svg/moz-only/replaced-element-zoom-01.html new file mode 100644 index 0000000000..724bb304eb --- /dev/null +++ b/layout/reftests/svg/moz-only/replaced-element-zoom-01.html @@ -0,0 +1,39 @@ +<!doctype html> +<html reftest-zoom="2" class="reftest-wait"> + <head> + <title>SVG page zoom test</title> + <style> + iframe, object, img { + width: 150px; + height: 100px; + border: none; + } + body { + background-color: lime; + } + </style> + <script> + +var expected = 3; +var actual = 0; + +function process_load() { + ++actual; + if (actual == expected) + document.documentElement.removeAttribute("class"); +} + + </script> + </head> + <body> + <div> + <iframe onload="process_load()" src="pass.svg"></iframe> + </div> + <div> + <object onload="process_load()" data="pass.svg"></object> + </div> + <div> + <img onload="process_load()" src="pass.svg"> + </div> + </body> +</html> diff --git a/layout/reftests/svg/moz-only/small.png b/layout/reftests/svg/moz-only/small.png Binary files differnew file mode 100644 index 0000000000..9ff11a9932 --- /dev/null +++ b/layout/reftests/svg/moz-only/small.png diff --git a/layout/reftests/svg/moz-only/zoom-invalidation-01.svg b/layout/reftests/svg/moz-only/zoom-invalidation-01.svg new file mode 100644 index 0000000000..e8270968b1 --- /dev/null +++ b/layout/reftests/svg/moz-only/zoom-invalidation-01.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + reftest-zoom="2" class="reftest-wait" + width="50%" height="50%"> + + <title>Test invalidation of zoomed SVG</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=726928 --> + + <script type="text/javascript"> + +document.addEventListener("MozReftestInvalidate", doTest, false); + +function doTest() { + var redRect = document.getElementById('red-rect'); + redRect.parentNode.removeChild(redRect); + document.documentElement.removeAttribute("class"); +} + + </script> + <rect width="100%" height="100%" fill="lime"/> + <rect id="red-rect" x="10" y="10" width="100" height="100" fill="red"/> +</svg> diff --git a/layout/reftests/svg/moz-only/zoomed-svg-with-viewBox-01-ref.svg b/layout/reftests/svg/moz-only/zoomed-svg-with-viewBox-01-ref.svg new file mode 100644 index 0000000000..99a3d36b52 --- /dev/null +++ b/layout/reftests/svg/moz-only/zoomed-svg-with-viewBox-01-ref.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=407959 --> + + <title>Reference for zoomed-svg-with-viewBox-01.svg</title> + + <ellipse cx="20" cy="15" rx="20" ry="15" fill="blue"/> + +</svg> diff --git a/layout/reftests/svg/moz-only/zoomed-svg-with-viewBox-01.svg b/layout/reftests/svg/moz-only/zoomed-svg-with-viewBox-01.svg new file mode 100644 index 0000000000..530f892f4d --- /dev/null +++ b/layout/reftests/svg/moz-only/zoomed-svg-with-viewBox-01.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" reftest-zoom="3" + width="40" height="30" viewBox="20 20 120 90"> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=407959 --> + + <title>Test that zooming isn't broken when we have a viewBox</title> + + <ellipse cx="40" cy="35" rx="20" ry="15" fill="blue"/> + +</svg> diff --git a/layout/reftests/svg/nested-mask-mode.svg b/layout/reftests/svg/nested-mask-mode.svg new file mode 100644 index 0000000000..2d87eab674 --- /dev/null +++ b/layout/reftests/svg/nested-mask-mode.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + <title>Testcase for mask-mode in a nested mask.</title> + <mask id="m1" width="1" height="1"> + <!-- Set mask-mode as alpha. The fill color of the rect in m2 should + not effect mask result. --> + <rect x="0" y="0" width="100" height="100" mask="url(#m2)" style="fill: #ffffff; mask-mode:alpha;"/> + </mask> + <mask id="m2" width="1" height="1"> + <rect x="0" y="0" width="100" height="50" style="fill:#000000"/> + </mask> + + <rect width="100" height="100" fill="blue" mask="url(#m1)" /> +</svg> diff --git a/layout/reftests/svg/nested-viewBox-01.svg b/layout/reftests/svg/nested-viewBox-01.svg new file mode 100644 index 0000000000..d78ca4c4c5 --- /dev/null +++ b/layout/reftests/svg/nested-viewBox-01.svg @@ -0,0 +1,21 @@ +<!-- + 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"> + + <title>Testcase for child <svg> with viewBox</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=369402 + + The presense of the viewBox attribute below should not be stopping the + lime rect from rendering. (The preserveAspectRatio is only there to make + the lime rect fully cover the red rect on success. It is not the problem.) + --> + + <rect width="100%" height="100%" fill="red"/> + <svg viewBox="0 0 100 100" preserveAspectRatio="none"> + <rect width="100%" height="100%" fill="lime"/> + </svg> + +</svg> diff --git a/layout/reftests/svg/nesting-invalid-01-ref.svg b/layout/reftests/svg/nesting-invalid-01-ref.svg new file mode 100644 index 0000000000..8b61e19756 --- /dev/null +++ b/layout/reftests/svg/nesting-invalid-01-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' font-size='16px'> + <script xlink:href='nesting-invalid-01.js'/> + <script><![CDATA[ + for (var i = 0; i < es.length; i++) { + document.documentElement.appendChild(makeGroup(i, false, es[i])); + } + ]]></script> +</svg> diff --git a/layout/reftests/svg/nesting-invalid-01.js b/layout/reftests/svg/nesting-invalid-01.js new file mode 100644 index 0000000000..da40c17783 --- /dev/null +++ b/layout/reftests/svg/nesting-invalid-01.js @@ -0,0 +1,35 @@ +// Any copyright is dedicated to the Public Domain. +// http://creativecommons.org/publicdomain/zero/1.0/ + +// These are all of the SVG 1.1 and Filter Effects element names, except for container and deprecated elements, +// with the addition of an "UNKNOWN" element in the SVG namespace. +var es = 'animate animateMotion animateTransform circle color-profile cursor desc ellipse feBlend feColorMatrix feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feDistantLight feDropShadow feFlood feFuncA feFuncB feFuncG feFuncR feGaussianBlur feImage feMerge feMergeNode feMorphology feOffset fePointLight feSpecularLighting feSpotLight feTile feTurbulence filter image line linearGradient metadata mpath path polygon polyline radialGradient rect script set stop style text textPath title tspan use view UNKNOWN'.split(' '); +var colwidth = 200; +var size = 40; +var rows = 14; + +function makeElement(localName, attrs, children) { + var e = document.createElementNS('http://www.w3.org/2000/svg', localName); + for (var an in attrs) { + e.setAttribute(an, attrs[an]); + } + if (children) { + for (var i = 0; i < children.length; i++) { + if (typeof children[i] == 'object') { + e.appendChild(children[i]); + } else { + e.appendChild(document.createTextNode(children[i])); + } + } + } + return e; +} + +function makeGroup(i, failing, text) { + var x = colwidth * Math.floor(i / rows), + y = size * (i % rows); + return makeElement('g', { 'fill-opacity': failing ? '1' : '0.25' }, + [makeElement('rect', { x: x, y: y, width: colwidth, height: size, fill: 'white' }), + makeElement('rect', { x: x, y: y, width: size, height: size, fill: failing ? 'red' : 'green' }), + makeElement('text', { x: x + size + 10, y: y + size / 2 + 6 }, [text])]); +} diff --git a/layout/reftests/svg/nesting-invalid-01.svg b/layout/reftests/svg/nesting-invalid-01.svg new file mode 100644 index 0000000000..aa9e6f1444 --- /dev/null +++ b/layout/reftests/svg/nesting-invalid-01.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' font-size='16px'> + <!-- + This tests that elements that are not container elements do not render their + children. + --> + <rect id='r' width='100%' height='100%' fill='red'/> + <script xlink:href='nesting-invalid-01.js'/> + <script><![CDATA[ + for (var i = 0; i < es.length; i++) { + document.documentElement.appendChild(makeGroup(i, false, es[i])); + document.documentElement.appendChild(makeElement(es[i], { }, [makeGroup(i, true, es[i])])); + } + + document.documentElement.removeChild(document.getElementById('r')); + ]]></script> +</svg> diff --git a/layout/reftests/svg/non-scaling-stroke-01-ref.svg b/layout/reftests/svg/non-scaling-stroke-01-ref.svg new file mode 100644 index 0000000000..0bd75876f6 --- /dev/null +++ b/layout/reftests/svg/non-scaling-stroke-01-ref.svg @@ -0,0 +1,33 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<style type="text/css" > +rect { + stroke-width: 15px; +} +</style> +<defs> + <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"> + <stop offset="0" stop-color="blue"/> + <stop offset="1" stop-color="yellow"/> + </linearGradient> + <linearGradient id="grad2" x1="180" y1="250" x2="280" y2="300" gradientUnits="userSpaceOnUse" gradientTransform="scale(0.25,1)"> + <stop offset="0" stop-color="blue"/> + <stop offset="1" stop-color="yellow"/> + </linearGradient> + <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="scale(1,0.5), skewX(45)"> + <rect x="0" y="0" width="10" height="10" fill="red"/> + <rect x="10" y="0" width="10" height="10" fill="green"/> + <rect x="0" y="10" width="10" height="10" fill="blue"/> + <rect x="10" y="10" width="10" height="10" fill="yellow"/> + </pattern> + <rect id="rect" width="100" height="50" fill="none"/> +</defs> + +<rect x="20" y="20" width="100" height="50" fill="none" stroke="url(#grad1)"/> + +<rect x="20" y="100" width="100" height="50" fill="none" stroke="url(#grad2)" /> + +<use xlink:href="#rect" transform="translate(20, 180)" stroke="url(#pattern)"/> + +<use xlink:href="#rect" x="20" y="260" stroke="green"/> + +</svg> diff --git a/layout/reftests/svg/non-scaling-stroke-01.svg b/layout/reftests/svg/non-scaling-stroke-01.svg new file mode 100644 index 0000000000..db2954b685 --- /dev/null +++ b/layout/reftests/svg/non-scaling-stroke-01.svg @@ -0,0 +1,36 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<style type="text/css" > +rect { + stroke-width: 15px; + vector-effect: non-scaling-stroke; +} +</style> +<defs> + <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"> + <stop offset="0" stop-color="blue"/> + <stop offset="1" stop-color="yellow"/> + </linearGradient> + <linearGradient id="grad2" x1="100" y1="150" x2="200" y2="200" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="blue"/> + <stop offset="1" stop-color="yellow"/> + </linearGradient> + <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="scale(4,0.5), skewX(45)"> + <rect x="0" y="0" width="10" height="10" fill="red"/> + <rect x="10" y="0" width="10" height="10" fill="green"/> + <rect x="0" y="10" width="10" height="10" fill="blue"/> + <rect x="10" y="10" width="10" height="10" fill="yellow"/> + </pattern> + <rect id="rect" width="400" height="50" fill="none"/> +</defs> + +<g transform="translate(20,20)"> + <rect width="400" height="50" fill="none" stroke="url(#grad1)" transform="scale(0.25,1)"/> +</g> + +<rect width="400" height="50" fill="none" stroke="url(#grad2)" transform="translate(20,100) scale(0.25,1)"/> + +<use xlink:href="#rect" transform="translate(20, 180) scale(0.25,1)" stroke="url(#pattern)"/> + +<use xlink:href="#rect" x="40" y="80" transform="translate(10, 180) scale(0.25,1)" stroke="green"/> + +</svg> diff --git a/layout/reftests/svg/non-scaling-stroke-02-ref.svg b/layout/reftests/svg/non-scaling-stroke-02-ref.svg new file mode 100644 index 0000000000..2264924193 --- /dev/null +++ b/layout/reftests/svg/non-scaling-stroke-02-ref.svg @@ -0,0 +1,33 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" overflow="hidden"> +<style type="text/css" > +rect { + stroke-width: 30px; +} +</style> +<defs> + <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"> + <stop offset="0" stop-color="blue"/> + <stop offset="1" stop-color="yellow"/> + </linearGradient> + <linearGradient id="grad2" x1="360" y1="500" x2="560" y2="600" gradientUnits="userSpaceOnUse" gradientTransform="scale(0.25,1)"> + <stop offset="0" stop-color="blue"/> + <stop offset="1" stop-color="yellow"/> + </linearGradient> + <pattern id="pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse" patternTransform="scale(1,0.5), skewX(45)"> + <rect x="0" y="0" width="20" height="20" fill="red"/> + <rect x="20" y="0" width="20" height="20" fill="green"/> + <rect x="0" y="20" width="20" height="20" fill="blue"/> + <rect x="20" y="20" width="20" height="20" fill="yellow"/> + </pattern> + <rect id="rect" width="200" height="100" fill="none"/> +</defs> + +<rect x="40" y="40" width="200" height="100" fill="none" stroke="url(#grad1)"/> + +<rect x="40" y="200" width="200" height="100" fill="none" stroke="url(#grad2)" /> + +<use xlink:href="#rect" transform="translate(40, 360)" stroke="url(#pattern)"/> + +<use xlink:href="#rect" x="40" y="520" stroke="green"/> + +</svg> diff --git a/layout/reftests/svg/non-scaling-stroke-02.svg b/layout/reftests/svg/non-scaling-stroke-02.svg new file mode 100644 index 0000000000..b098bb5688 --- /dev/null +++ b/layout/reftests/svg/non-scaling-stroke-02.svg @@ -0,0 +1,36 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" reftest-zoom="2" overflow="hidden"> +<style type="text/css" > +rect { + stroke-width: 15px; + vector-effect: non-scaling-stroke; +} +</style> +<defs> + <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"> + <stop offset="0" stop-color="blue"/> + <stop offset="1" stop-color="yellow"/> + </linearGradient> + <linearGradient id="grad2" x1="100" y1="150" x2="200" y2="200" gradientUnits="userSpaceOnUse"> + <stop offset="0" stop-color="blue"/> + <stop offset="1" stop-color="yellow"/> + </linearGradient> + <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="scale(4,0.5), skewX(45)"> + <rect x="0" y="0" width="10" height="10" fill="red"/> + <rect x="10" y="0" width="10" height="10" fill="green"/> + <rect x="0" y="10" width="10" height="10" fill="blue"/> + <rect x="10" y="10" width="10" height="10" fill="yellow"/> + </pattern> + <rect id="rect" width="400" height="50" fill="none"/> +</defs> + +<g transform="translate(20,20)"> + <rect width="400" height="50" fill="none" stroke="url(#grad1)" transform="scale(0.25,1)"/> +</g> + +<rect width="400" height="50" fill="none" stroke="url(#grad2)" transform="translate(20,100) scale(0.25,1)"/> + +<use xlink:href="#rect" transform="translate(20, 180) scale(0.25,1)" stroke="url(#pattern)"/> + +<use xlink:href="#rect" x="40" y="80" transform="translate(10, 180) scale(0.25,1)" stroke="green"/> + +</svg> diff --git a/layout/reftests/svg/non-scaling-stroke-03-ref.svg b/layout/reftests/svg/non-scaling-stroke-03-ref.svg new file mode 100644 index 0000000000..895836568a --- /dev/null +++ b/layout/reftests/svg/non-scaling-stroke-03-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <line x1="100" y1="100" x2="100" y2="200" stroke="blue" stroke-width="10"/> +</svg> diff --git a/layout/reftests/svg/non-scaling-stroke-03.svg b/layout/reftests/svg/non-scaling-stroke-03.svg new file mode 100644 index 0000000000..9b62d1cafe --- /dev/null +++ b/layout/reftests/svg/non-scaling-stroke-03.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <title>Test non-scaling-stroke repainting when ancestor transforms change</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=875069 --> + <script> + +function doTest() { + document.getElementById("g").setAttribute("transform", "scale(2)"); + document.documentElement.removeAttribute('class'); +} + +document.addEventListener("MozReftestInvalidate", doTest, false); +setTimeout(doTest, 4000); // fallback for running outside reftest + + </script> + <g id="g"> + <line x1="50" y1="50" x2="50" y2="100" stroke="blue" stroke-width="10" + style="vector-effect:non-scaling-stroke;"/> + </g> +</svg> diff --git a/layout/reftests/svg/non-scaling-stroke-css-transform-ref.html b/layout/reftests/svg/non-scaling-stroke-css-transform-ref.html new file mode 100644 index 0000000000..651b50102e --- /dev/null +++ b/layout/reftests/svg/non-scaling-stroke-css-transform-ref.html @@ -0,0 +1,3 @@ +<svg style="width: 500px; height: 500px; border: 1px solid green;"> + <rect id="square" transform="translate(100,200) scale(1,2.5)" stroke="blue" vector-effect="non-scaling-stroke" stroke-width="6" x="50px" y="50px" width="50px" height="50px" fill="pink" /> +</svg> diff --git a/layout/reftests/svg/non-scaling-stroke-css-transform.html b/layout/reftests/svg/non-scaling-stroke-css-transform.html new file mode 100644 index 0000000000..e7db2ac145 --- /dev/null +++ b/layout/reftests/svg/non-scaling-stroke-css-transform.html @@ -0,0 +1,8 @@ +<style> + #square{ + transform: translate(100px,200px) scale(1,2.5); + } +</style> +<svg style="width: 500px; height: 500px; border: 1px solid green;"> + <rect id="square" stroke="blue" vector-effect="non-scaling-stroke" stroke-width="6" x="50px" y="50px" width="50px" height="50px" fill="pink" /> +</svg> diff --git a/layout/reftests/svg/objectBoundingBox-and-clipPath.svg b/layout/reftests/svg/objectBoundingBox-and-clipPath.svg new file mode 100644 index 0000000000..40968d9ee9 --- /dev/null +++ b/layout/reftests/svg/objectBoundingBox-and-clipPath.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=489151 --> + +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test objectBoundingBox clip-path on element with ancestor transform</title> + <desc> + This test checks that the bbox calculation for an objectBoundingBox + clip-path is correctly getting the bbox in the userspace of the + clipped element, and not it's bbox in an ancestor userspace or rootspace. + </desc> + <clipPath id="clip" clipPathUnits="objectBoundingBox"> + <rect x="0.5" width="0.5" height="1"/> + </clipPath> + <rect width="100%" height="100%" fill="lime"/> + <rect x="100" width="100" height="100" fill="red"/> + <g transform="translate(-100,0)"> + <g clip-path="url(#clip)"> + <rect x="100" width="100" height="100" fill="red"/> + <rect x="200" width="100" height="100" fill="lime"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/objectBoundingBox-and-fePointLight-01-ref.svg b/layout/reftests/svg/objectBoundingBox-and-fePointLight-01-ref.svg new file mode 100644 index 0000000000..67532ffb68 --- /dev/null +++ b/layout/reftests/svg/objectBoundingBox-and-fePointLight-01-ref.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for objectBoundingBox with fePointLight</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=544742 --> + + <defs> + <filter id="light" primitiveUnits="userSpaceOnUse"> + <feSpecularLighting lighting-color="blue" surfaceScale="5" specularConstant="10" specularExponent="6"> + <fePointLight x="30" y="30" z="-5"/> + </feSpecularLighting> + <feComposite operator="in" in2="SourceGraphic"/> + </filter> + </defs> + + <g transform="translate(20 20)"> + <rect width="40" height="20" filter="url(#light)" fill="black" stroke="none"/> + </g> + +</svg> + diff --git a/layout/reftests/svg/objectBoundingBox-and-fePointLight-01.svg b/layout/reftests/svg/objectBoundingBox-and-fePointLight-01.svg new file mode 100644 index 0000000000..c77200c847 --- /dev/null +++ b/layout/reftests/svg/objectBoundingBox-and-fePointLight-01.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for objectBoundingBox with fePointLight</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=544742 --> + + <defs> + <filter id="light" primitiveUnits="objectBoundingBox"> + <feSpecularLighting lighting-color="blue" surfaceScale="5" specularConstant="10" specularExponent="6"> + <!-- Note: for z the scalefactor is 31,622776601683793319988935444327 + sqrt(bbox.width*bbox.width + bbox.height*bbox.height)/sqrt(2) --> + <fePointLight x="0.75" y="1.5" z="-0.15811388300841896659994467722167"/> + </feSpecularLighting> + <feComposite operator="in" in2="SourceGraphic"/> + </filter> + </defs> + + <rect x="20" y="20" width="40" height="20" filter="url(#light)" fill="black" stroke="none" /> + +</svg> + diff --git a/layout/reftests/svg/objectBoundingBox-and-fePointLight-02-ref.svg b/layout/reftests/svg/objectBoundingBox-and-fePointLight-02-ref.svg new file mode 100644 index 0000000000..0e27de608f --- /dev/null +++ b/layout/reftests/svg/objectBoundingBox-and-fePointLight-02-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg width="100%" height="100%" + viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for objectBoundingBox with fePointLight</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=619992 --> + + <defs> + <filter id="f" primitiveUnits="objectBoundingBox"> + <feSpecularLighting lighting-color="blue" surfaceScale="5" specularConstant="10" specularExponent="6"> + <fePointLight x="0.875" y="0.875" z="-0.0625"/> + </feSpecularLighting> + </filter> + </defs> + + <g transform="translate(50 50)"> + <rect x="-40" y="-40" width="80" height="80" filter="url(#f)" fill="none"/> + </g> +</svg> diff --git a/layout/reftests/svg/objectBoundingBox-and-fePointLight-02.svg b/layout/reftests/svg/objectBoundingBox-and-fePointLight-02.svg new file mode 100644 index 0000000000..00f549add4 --- /dev/null +++ b/layout/reftests/svg/objectBoundingBox-and-fePointLight-02.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg width="100%" height="100%" + viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for objectBoundingBox with fePointLight</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=619992 --> + + <defs> + <filter id="f" primitiveUnits="userSpaceOnUse"> + <feSpecularLighting lighting-color="blue" surfaceScale="5" specularConstant="10" specularExponent="6"> + <fePointLight x="30" y="30" z="-5"/> + </feSpecularLighting> + </filter> + </defs> + + <g transform="translate(50 50)"> + <rect x="-40" y="-40" width="80" height="80" filter="url(#f)" fill="none"/> + </g> +</svg> diff --git a/layout/reftests/svg/objectBoundingBox-and-mask-02.svg b/layout/reftests/svg/objectBoundingBox-and-mask-02.svg new file mode 100644 index 0000000000..8cab2d32ac --- /dev/null +++ b/layout/reftests/svg/objectBoundingBox-and-mask-02.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=621210 --> + +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase for re-using an objectBoundingBox mask with a <g> child</title> + <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <g> + <rect width="1" height="1" fill="white"/> + </g> + </mask> + <rect width="100%" height="100%" fill="red"/> + <rect mask="url(#mask)" width="1" height="1" fill="red"/> + <rect mask="url(#mask)" width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/objectBoundingBox-and-mask.svg b/layout/reftests/svg/objectBoundingBox-and-mask.svg new file mode 100644 index 0000000000..e247913aed --- /dev/null +++ b/layout/reftests/svg/objectBoundingBox-and-mask.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=489151 --> + +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test objectBoundingBox mask on element with ancestor transform</title> + <desc> + This test checks that the bbox calculation for an objectBoundingBox + mask is correctly getting the bbox in the userspace of the masked + element, and not it's bbox in an ancestor userspace or rootspace. + </desc> + <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <rect x="0.5" width="0.5" height="1" fill="white"/> + </mask> + <rect width="100%" height="100%" fill="lime"/> + <rect x="100" width="100" height="100" fill="red"/> + <g transform="translate(-100,0)"> + <g mask="url(#mask)"> + <rect x="100" width="100" height="100" fill="red"/> + <rect x="200" width="100" height="100" fill="lime"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/objectBoundingBox-and-pattern-01-ref.svg b/layout/reftests/svg/objectBoundingBox-and-pattern-01-ref.svg new file mode 100644 index 0000000000..fcf4e8d164 --- /dev/null +++ b/layout/reftests/svg/objectBoundingBox-and-pattern-01-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Reference for elements referencing an objectBoundingBox pattern</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=338596 --> + + <rect x="20" y="20" width="200" height="200" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/objectBoundingBox-and-pattern-01a.svg b/layout/reftests/svg/objectBoundingBox-and-pattern-01a.svg new file mode 100644 index 0000000000..10623a95bf --- /dev/null +++ b/layout/reftests/svg/objectBoundingBox-and-pattern-01a.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for elements referencing an objectBoundingBox pattern</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=338596 --> + + <defs> + <pattern id="test" width="100%" height="100%" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="1" fill="lime"/> + </pattern> + </defs> + + <rect x="20" y="20" width="200" height="200" fill="url(#test)"/> +</svg> diff --git a/layout/reftests/svg/objectBoundingBox-and-pattern-01b.svg b/layout/reftests/svg/objectBoundingBox-and-pattern-01b.svg new file mode 100644 index 0000000000..e932cf91b5 --- /dev/null +++ b/layout/reftests/svg/objectBoundingBox-and-pattern-01b.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for elements referencing an objectBoundingBox pattern</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=377399 --> + + <defs> + <pattern id="test" width="100%" height="100%" viewBox="0 0 40 40" patternContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="40" height="40" fill="lime" /> + </pattern> + </defs> + <g transform="translate(20 20)"> + <rect x="0" y="0" width="200" height="200" fill="url(#test)" /> + </g> +</svg> diff --git a/layout/reftests/svg/objectBoundingBox-and-pattern-01c.svg b/layout/reftests/svg/objectBoundingBox-and-pattern-01c.svg new file mode 100644 index 0000000000..ef63c994c3 --- /dev/null +++ b/layout/reftests/svg/objectBoundingBox-and-pattern-01c.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for elements referencing an objectBoundingBox pattern</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=377399 --> + + <defs> + <pattern id="test" width="100%" height="100%" viewBox="0 0 40 40" patternContentUnits="objectBoundingBox"> + <rect x="0" y="0" width="40" height="40" fill="lime" /> + </pattern> + </defs> + <g transform="translate(20 20) scale(2)"> + <rect x="0" y="0" width="100" height="100" fill="url(#test)" /> + </g> +</svg> diff --git a/layout/reftests/svg/objectBoundingBox-and-pattern-02.svg b/layout/reftests/svg/objectBoundingBox-and-pattern-02.svg new file mode 100644 index 0000000000..ca77584198 --- /dev/null +++ b/layout/reftests/svg/objectBoundingBox-and-pattern-02.svg @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for elements referencing an objectBoundingBox pattern with a viewBox</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=605022 --> + + <defs> + <pattern id="test" x="0" y="0" width="20%" height="20%" patternContentUnits="objectBoundingBox" viewBox="0 0 20 20"> + <rect width="20" height="20" stroke="none" fill="lime"/> + <rect width="1" height="1" stroke="none" fill="red"/> + </pattern> + <pattern id="cover" x="0" y="0" width="20%" height="20%" patternContentUnits="objectBoundingBox"> + <rect width="0.01" height="0.01" stroke="none" fill="lime"/> + </pattern> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + <rect x="20" y="20" width="200" height="200" fill="url(#test)"/> + <rect x="20" y="20" width="200" height="200" fill="url(#cover)"/> +</svg> diff --git a/layout/reftests/svg/objectBoundingBox-and-pattern-03-ref.svg b/layout/reftests/svg/objectBoundingBox-and-pattern-03-ref.svg new file mode 100644 index 0000000000..1530ce82c5 --- /dev/null +++ b/layout/reftests/svg/objectBoundingBox-and-pattern-03-ref.svg @@ -0,0 +1,9 @@ +<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <title>Reference for re-using an objectBoundingBox pattern with a <g> + child</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=615788--> + <rect fill="blue" stroke="red" stroke-width="3" + width="100" height="100"/> + <rect fill="blue" stroke="red" stroke-width="3" + y="100" width="200" height="100"/> +</svg> diff --git a/layout/reftests/svg/objectBoundingBox-and-pattern-03.svg b/layout/reftests/svg/objectBoundingBox-and-pattern-03.svg new file mode 100644 index 0000000000..1af490f66a --- /dev/null +++ b/layout/reftests/svg/objectBoundingBox-and-pattern-03.svg @@ -0,0 +1,17 @@ +<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> + <title>Testcase for re-using an objectBoundingBox pattern with a <g> + child</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=615788--> + <defs> + <pattern id="blue" patternContentUnits="objectBoundingBox" + width="100%" height="100%"> + <g> + <rect fill="blue" stroke="none" x="0" y="0" width="1" height="1"/> + </g> + </pattern> + </defs> + <rect fill="url(#blue)" stroke="red" stroke-width="3" + width="100" height="100"/> + <rect fill="url(#blue)" stroke="red" stroke-width="3" + y="100" width="200" height="100"/> +</svg> diff --git a/layout/reftests/svg/opacity-and-gradient-01.svg b/layout/reftests/svg/opacity-and-gradient-01.svg new file mode 100644 index 0000000000..178525b0ae --- /dev/null +++ b/layout/reftests/svg/opacity-and-gradient-01.svg @@ -0,0 +1,35 @@ +<!-- + 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"> + + <title>Testcase for opacity on elements referencing a gradient</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=357163 --> + + <defs> + <linearGradient id="lime" gradientUnits="userSpaceOnUse"> + <stop stop-color="lime"/> + </linearGradient> + <linearGradient id="red" gradientUnits="userSpaceOnUse"> + <stop stop-color="red"/> + </linearGradient> + </defs> + + <rect width="100%" height="100%" fill="red"/> + + <!-- Create the "pass" rect using a gradient so the testcase doesn't seem to + pass if gradients are not supported --> + <rect width="100%" height="100%" fill="url(#lime)"/> + + <!-- test 'opacity' --> + <rect width="25%" height="100%" fill="url(#red)" opacity="0"/> + + <!-- test 'fill-opacity' --> + <rect x="25%" width="25%" height="100%" fill="url(#red)" fill-opacity="0"/> + + <!-- test 'stroke-opacity' --> + <line x1="75%" x2="75%" y2="100%" stroke="url(#red)" stroke-width="50%" stroke-opacity="0"/> + +</svg> diff --git a/layout/reftests/svg/opacity-and-gradient-02-ref.svg b/layout/reftests/svg/opacity-and-gradient-02-ref.svg new file mode 100644 index 0000000000..085d8b6f1a --- /dev/null +++ b/layout/reftests/svg/opacity-and-gradient-02-ref.svg @@ -0,0 +1,34 @@ +<!-- + 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"> + + <title>Testcase for opacity on elements referencing a gradient</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=539165 --> + + <defs> + <linearGradient id="lime" gradientUnits="userSpaceOnUse"> + <stop stop-color="lime"/> + </linearGradient> + <!-- OS X doesn't draw solid gradients as a solid color so we need to use + a gradient fill below + --> + <linearGradient id="red" gradientUnits="userSpaceOnUse"> + <stop stop-color="red"/> + </linearGradient> + </defs> + + <rect width="100%" height="100%" fill="url(#lime)"/> + + <!-- test 'opacity' --> + <rect width="25%" height="100%" fill="url(#red)" opacity="1"/> + + <!-- test 'fill-opacity' --> + <rect x="25%" width="25%" height="100%" fill="url(#red)" opacity="0.5"/> + + <!-- test 'fill-opacity' --> + <rect x="50%" width="25%" height="100%" fill="url(#red)" opacity="0.5"/> + +</svg> diff --git a/layout/reftests/svg/opacity-and-gradient-02.svg b/layout/reftests/svg/opacity-and-gradient-02.svg new file mode 100644 index 0000000000..d4f34f0cc9 --- /dev/null +++ b/layout/reftests/svg/opacity-and-gradient-02.svg @@ -0,0 +1,42 @@ +<!-- + 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"> + + <title>Testcase for opacity on elements referencing a gradient</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=539165 --> + + <defs> + <linearGradient id="lime" gradientUnits="userSpaceOnUse"> + <stop stop-color="lime"/> + </linearGradient> + <linearGradient id="red" gradientUnits="userSpaceOnUse"> + <stop stop-color="red"/> + </linearGradient> + <linearGradient id="red2" gradientUnits="userSpaceOnUse"> + <stop stop-color="red" offset="0%"/> + <stop stop-color="red" offset="100%"/> + </linearGradient> + <linearGradient id="redgreen" gradientUnits="userSpaceOnUse"> + <stop stop-color="red" offset="0%"/> + <stop stop-color="lime" offset="100%"/> + </linearGradient> + </defs> + + <rect width="100%" height="100%" fill="url(#lime)"/> + + <!-- test 'opacity' --> + <rect width="25%" height="100%" fill="red" opacity="1"/> + + <!-- test 'fill-opacity' --> + <rect x="25%" width="25%" height="100%" fill="url(#red)" fill-opacity="0.5"/> + + <!-- test 'fill-opacity' --> + <rect x="50%" width="25%" height="100%" fill="url(#red2)" fill-opacity="0.5"/> + + <!-- test 'fill-opacity' --> + <rect x="75%" width="25%" height="100%" fill="url(#redgreen)" fill-opacity="0"/> + +</svg> diff --git a/layout/reftests/svg/opacity-and-pattern-01.svg b/layout/reftests/svg/opacity-and-pattern-01.svg new file mode 100644 index 0000000000..665c9064a4 --- /dev/null +++ b/layout/reftests/svg/opacity-and-pattern-01.svg @@ -0,0 +1,36 @@ +<!-- + 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"> + + <title>Testcase for opacity on elements referencing a pattern</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=374280 --> + + <defs> + <pattern id="lime" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="lime"/> + </pattern> + + <pattern id="red" width="100%" height="100%" patternUnits="userSpaceOnUse"> + <rect width="100%" height="100%" fill="red"/> + </pattern> + </defs> + + <rect width="100%" height="100%" fill="red"/> + + <!-- Create the "pass" rect using a pattern so the testcase doesn't seem to + pass if patterns are not supported --> + <rect width="100%" height="100%" fill="url(#lime)"/> + + <!-- test 'opacity' --> + <rect width="25%" height="100%" fill="url(#red)" opacity="0"/> + + <!-- test 'fill-opacity' --> + <rect x="25%" width="25%" height="100%" fill="url(#red)" fill-opacity="0"/> + + <!-- test 'stroke-opacity' --> + <line x1="75%" x2="75%" y2="100%" stroke="url(#red)" stroke-width="50%" stroke-opacity="0"/> + +</svg> diff --git a/layout/reftests/svg/opacity-and-transform-01-ref.svg b/layout/reftests/svg/opacity-and-transform-01-ref.svg new file mode 100644 index 0000000000..9123b3255f --- /dev/null +++ b/layout/reftests/svg/opacity-and-transform-01-ref.svg @@ -0,0 +1,7 @@ +<!-- + 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"> + <rect x="10" y="10" width="100" height="100" fill="blue" opacity="0.5"/> +</svg> diff --git a/layout/reftests/svg/opacity-and-transform-01.svg b/layout/reftests/svg/opacity-and-transform-01.svg new file mode 100644 index 0000000000..74cd984e00 --- /dev/null +++ b/layout/reftests/svg/opacity-and-transform-01.svg @@ -0,0 +1,22 @@ +<!-- + 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"> + + <title>Testcase for opacity on elements that are transformed</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=806432 --> + + <filter id="f"> + <feOffset dx="0.0001"/> + </filter> + + <!-- The filter is purely to force the element to be rendered via the + nsSVGIntegrationUtils code path. (A mask or non-trivial clipPath that + have no effect would do just as well.) + --> + + <rect width="100" height="100" transform="translate(10,10)" fill="blue" opacity="0.5" filter="url(#f)"/> + +</svg> diff --git a/layout/reftests/svg/outer-svg-border-and-padding-01-ref.svg b/layout/reftests/svg/outer-svg-border-and-padding-01-ref.svg new file mode 100644 index 0000000000..688c760d42 --- /dev/null +++ b/layout/reftests/svg/outer-svg-border-and-padding-01-ref.svg @@ -0,0 +1,9 @@ +<!-- + 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" + style="border: 10px solid lime; padding: 10px; background: lime;"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=490003 --> + <title>Reference that invalidation takes account of outer-<svg> border/padding</title> +</svg> diff --git a/layout/reftests/svg/outer-svg-border-and-padding-01.svg b/layout/reftests/svg/outer-svg-border-and-padding-01.svg new file mode 100644 index 0000000000..f9f7b20685 --- /dev/null +++ b/layout/reftests/svg/outer-svg-border-and-padding-01.svg @@ -0,0 +1,58 @@ +<!-- + 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" class="reftest-wait" + style="border: 10px solid lime; padding: 10px; background: lime;"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=490003 --> + <title>Test that invalidation takes account of outer-<svg> border/padding</title> + <desc> + This test checks that SVG implementations take account of border and + padding on outer <svg> when doing invalidation. + </desc> + + <filter id="identity"> + <feColorMatrix type="saturate" in="SourceGraphic"/> + </filter> + + <script type="text/javascript">//<![CDATA[ + +function hide_red_rects() +{ + var background = document.getElementById("background"); + + document.getElementById('r').setAttribute('opacity','0'); + document.getElementById('f').setAttribute('opacity','0'); + + <!-- top left --> + document.elementFromPoint(121, 121).setAttribute('opacity','0'); + <!-- bottom right --> + document.elementFromPoint(269, 169).setAttribute('opacity','0'); + + <!-- outside top left --> + if (document.elementFromPoint(119, 119) != background) { + background.setAttribute("fill", "red"); + } + <!-- outside bottom right --> + if (document.elementFromPoint(271, 171) != background) { + background.setAttribute("fill", "purple"); + } + + document.documentElement.removeAttribute('class'); +} + +document.addEventListener("MozReftestInvalidate", hide_red_rects, false); +setTimeout(hide_red_rects, 4000); // fallback for running outside reftest + + //]]> + </script> + + <!-- to catch misses--> + <rect id="background" width="100%" height="100%" fill="lime"/> + + <rect id="r" width="50" height="50" fill="red"/> + <rect id="f" y="100" width="50" height="50" fill="red"/> + + <rect x="100" y="100" width="50" height="50" fill="red"/> + <rect x="200" y="100" width="50" height="50" fill="red"/> +</svg> diff --git a/layout/reftests/svg/outline-ref.html b/layout/reftests/svg/outline-ref.html new file mode 100644 index 0000000000..871446d41b --- /dev/null +++ b/layout/reftests/svg/outline-ref.html @@ -0,0 +1,93 @@ +<!DOCTYPE HTML> +<html lang="en"> +<body> +<svg xmlns="http://www.w3.org/2000/svg" overflow="visible"> + <g> + <rect id="rect" width="100" height="100" style="fill: yellow"/> + <text id="text" x="0" y="140" font-family="Verdana" font-size="20"> + Hello world + </text> + <foreignObject id="foreignObject" x="0" y="160" width="200" height="60"> + <div xmlns="http://www.w3.org/1999/xhtml"> + Here is a paragraph that requires word wrap + </div> + </foreignObject> + <circle id="circle" cx="40" cy="275" r="40" style="fill: green"/> + <ellipse id="ellipse" cx="70" cy="380" rx="70" ry="50" style="fill: yellow"/> + <image id="image" x="0" y="450" height="100" width="100"/> + <line id="line" x1="0" y1="580" x2="100" y2="580" style="stroke: red; stroke-width: 2"/> + <path id="path" d="M50 600 L10 650 L90 650 Z"/> + <polygon id="polygon" points="300,50 350,0 400,50" style="fill: lime"/> + <polyline id="polyline" points="300,80 350,70 400,80" style="fill: none;stroke: black; stroke-width: 3"/> + <g transform="translate(300, 70)"> + <circle id="gCircle" cx="50" cy="50" r="20" style="fill: blue"/> + </g> + <g transform="translate(300, 150)"> + <circle id="ggCircle" cx="50" cy="50" r="20" style="fill: green"/> + <g> + <rect id="ggRect" x="15" y ="15" width="30" height="10" style="fill: blue"/> + </g> + </g> + <svg x="300" y="250"> + <rect id="innerRect" x="30" y="10" height="50" width="50" style="fill: red"/> + </svg> + <a xlink:href="#" id="link"> + <text x="300" y="350" font-family="Verdana" font-size="20"> + link + </text> + </a> + </g> +</svg> +<script> + +function createOutline(boundingRect) { + // Outline starts from a top-left shift pixel of the bounding rect + var left = boundingRect.left - 1; + var top = boundingRect.top - 1; + var right = boundingRect.right; + var bottom = boundingRect.bottom; + var width = boundingRect.width; + var height = boundingRect.height; + + var lines = document.createElement("div"); + var styles = 'border: 1px solid black;' + + 'width: ' + width + 'px;' + + 'height: ' + height + 'px;' + + 'position: absolute;' + + 'top: ' + top + 'px;' + + 'left: ' + left + 'px;'; + + lines.setAttribute('style', styles); + document.body.appendChild(lines); +} + +window.onload = function drawOutline() { + var elements = ['rect', 'foreignObject', 'circle', + 'ellipse', 'image', 'line', 'path', + 'polygon', 'polyline', 'text','gCircle', + 'innerRect', 'link']; + elements.forEach(id => { + var element = document.getElementById(id); + createOutline(element.getBoundingClientRect()); + }); + + var ggRect = document.getElementById('ggRect'); + var ggRectbbox = ggRect.getBoundingClientRect(); + createOutline(ggRectbbox); + + var ggCircle = document.getElementById('ggCircle'); + var ggCirclebbox = ggCircle.getBoundingClientRect(); + + var ggbbox = { + left: ggRectbbox.left, + top: ggRectbbox.top, + right: ggCirclebbox.right, + bottom: ggCirclebbox.bottom + }; + ggbbox.width = ggbbox.right - ggbbox.left; + ggbbox.height = ggbbox.bottom - ggbbox.top; + createOutline(ggbbox); +} +</script> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/outline.html b/layout/reftests/svg/outline.html new file mode 100644 index 0000000000..11b6dced5d --- /dev/null +++ b/layout/reftests/svg/outline.html @@ -0,0 +1,57 @@ +<!DOCTYPE HTML> +<html lang="en"> +<style> +rect, +text, +foreignObject, +circle, +ellipse, +image, +line, +path, +polygon, +polyline { + outline: 1px solid black; +} + +</style> +<body> +<svg xmlns="http://www.w3.org/2000/svg" overflow="visible"> + <g> + <rect width="100" height="100" style="fill: yellow"/> + <text x="0" y="140" font-family="Verdana" font-size="20"> + Hello world + </text> + <foreignObject x="0" y="160" width="200" height="60"> + <div xmlns="http://www.w3.org/1999/xhtml"> + Here is a paragraph that requires word wrap + </div> + </foreignObject> + <circle cx="40" cy="275" r="40" style="fill: green"/> + <ellipse cx="70" cy="380" rx="70" ry="50" style="fill: yellow"/> + <image x="0" y="450" height="100" width="100"/> + <line x1="0" y1="580" x2="100" y2="580" style="stroke: red; stroke-width: 2"/> + <path d="M50 600 L10 650 L90 650 Z"/> + <polygon points="300,50 350,0 400,50" style="fill: lime"/> + <polyline points="300,80 350,70 400,80" style="fill: none; stroke: black;stroke-width: 3"/> + <g transform="translate(300, 70)" style="outline: 1px solid"> + <circle cx="50" cy="50" r="20" style="fill: blue; outline: 0px"/> + </g> + <g transform="translate(300, 150)" style="outline: 1px solid"> + <circle cx="50" cy="50" r="20" style="fill: green; outline: 0px"/> + <g> + <rect x="15" y="15" width="30" height="10" style="fill: blue"/> + </g> + </g> + <svg x="300" y="250"> + <rect x="30" y="10" height="50" width="50" style="fill: red"/> + </svg> + <a xlink:href="#" id="link"> + <text x="300" y="350" font-family="Verdana" font-size="20"> + link + </text> + </a> + </g> +</svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/overflow-on-outer-svg-01-ref.svg b/layout/reftests/svg/overflow-on-outer-svg-01-ref.svg new file mode 100644 index 0000000000..a3908ab112 --- /dev/null +++ b/layout/reftests/svg/overflow-on-outer-svg-01-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/overflow-on-outer-svg-01.svg b/layout/reftests/svg/overflow-on-outer-svg-01.svg new file mode 100644 index 0000000000..f18b8595b0 --- /dev/null +++ b/layout/reftests/svg/overflow-on-outer-svg-01.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + style="overflow:visible;" + width="100" height="100"> + <title>Test that we always clip root-<svg> regardless of 'overflow'</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=378923 --> + <rect width="100%" height="100%" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/overflow-on-outer-svg-02-ref.xhtml b/layout/reftests/svg/overflow-on-outer-svg-02-ref.xhtml new file mode 100644 index 0000000000..96f8aa1250 --- /dev/null +++ b/layout/reftests/svg/overflow-on-outer-svg-02-ref.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <body> + <div style="background-color: blue; width: 100px; height: 100px;"></div> + </body> +</html> diff --git a/layout/reftests/svg/overflow-on-outer-svg-02a.xhtml b/layout/reftests/svg/overflow-on-outer-svg-02a.xhtml new file mode 100644 index 0000000000..aadf9b5430 --- /dev/null +++ b/layout/reftests/svg/overflow-on-outer-svg-02a.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Test that non-root outer-<svg> clips for overflow="auto"</title> + </head> + <body> + <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" + overflow="auto"> + <rect x="-50" y="-50" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/overflow-on-outer-svg-02b.xhtml b/layout/reftests/svg/overflow-on-outer-svg-02b.xhtml new file mode 100644 index 0000000000..48ae9dd571 --- /dev/null +++ b/layout/reftests/svg/overflow-on-outer-svg-02b.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Test that non-root outer-<svg> clips for overflow="scroll"</title> + </head> + <body> + <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" + overflow="scroll"> + <rect x="-50" y="-50" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/overflow-on-outer-svg-02c.xhtml b/layout/reftests/svg/overflow-on-outer-svg-02c.xhtml new file mode 100644 index 0000000000..151f04c304 --- /dev/null +++ b/layout/reftests/svg/overflow-on-outer-svg-02c.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Test that non-root outer-<svg> clips for overflow="hidden"</title> + </head> + <body> + <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" + overflow="hidden"> + <rect x="-50" y="-50" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/overflow-on-outer-svg-02d.xhtml b/layout/reftests/svg/overflow-on-outer-svg-02d.xhtml new file mode 100644 index 0000000000..02788d1e00 --- /dev/null +++ b/layout/reftests/svg/overflow-on-outer-svg-02d.xhtml @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <title>Test that non-root outer-<svg> repaints correctly changing to overflow="hidden"</title> + <script> + +function doTest() { + document.getElementById("svg").setAttribute("overflow", "hidden"); + document.documentElement.removeAttribute("class"); +} + +window.addEventListener("MozReftestInvalidate", doTest, false); +setTimeout(doTest, 4000); // fallback for running outside reftest + + </script> + </head> + <body> + <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="100" height="100" + overflow="visible"> + <rect x="-50" y="-50" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/overflow-on-outer-svg-03-ref.xhtml b/layout/reftests/svg/overflow-on-outer-svg-03-ref.xhtml new file mode 100644 index 0000000000..9b9a433d23 --- /dev/null +++ b/layout/reftests/svg/overflow-on-outer-svg-03-ref.xhtml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <body> + <div style="background-color: blue; transform: translate(-50px, -50px); width: 200px; height: 200px;"></div> + </body> +</html> diff --git a/layout/reftests/svg/overflow-on-outer-svg-03a.xhtml b/layout/reftests/svg/overflow-on-outer-svg-03a.xhtml new file mode 100644 index 0000000000..4eb948f1a6 --- /dev/null +++ b/layout/reftests/svg/overflow-on-outer-svg-03a.xhtml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Test that non-root outer-<svg> clips for overflow="auto"</title> + </head> + <body> + <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" + overflow="visible"> + <rect x="-50" y="-50" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/overflow-on-outer-svg-03b.xhtml b/layout/reftests/svg/overflow-on-outer-svg-03b.xhtml new file mode 100644 index 0000000000..3c41dd97a2 --- /dev/null +++ b/layout/reftests/svg/overflow-on-outer-svg-03b.xhtml @@ -0,0 +1,28 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <title>Test that non-root outer-<svg> repaints correctly changing to overflow="visible"</title> + <script> + +function doTest() { + document.getElementById("svg").setAttribute("overflow", "visible"); + document.documentElement.removeAttribute("class"); +} + +window.addEventListener("MozReftestInvalidate", doTest, false); +setTimeout(doTest, 4000); // fallback for running outside reftest + + </script> + </head> + <body> + <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="100" height="100" + overflow="hidden"> + <rect x="-50" y="-50" width="200" height="200" fill="blue"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/overflow-visible-image-ref.html b/layout/reftests/svg/overflow-visible-image-ref.html new file mode 100644 index 0000000000..ca4cdd7db8 --- /dev/null +++ b/layout/reftests/svg/overflow-visible-image-ref.html @@ -0,0 +1,10 @@ +<html> + <svg style="position: absolute; top: 0px; overflow: visible"> + <rect width=100 height=100 x=100 y=200 fill=black /> + <image width=100 height=100 x=0 y=0 + xlink:href='data:image/svg+xml, + <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200"> + <rect width="100" height="100" x="0" y="0" fill="green"/> + </svg>' + /> + </svg> diff --git a/layout/reftests/svg/overflow-visible-image.html b/layout/reftests/svg/overflow-visible-image.html new file mode 100644 index 0000000000..f2652bfa08 --- /dev/null +++ b/layout/reftests/svg/overflow-visible-image.html @@ -0,0 +1,10 @@ +<html> + <svg style="position: absolute; top: 100px; overflow: visible"> + <rect width=100 height=100 x=100 y=100 fill=black /> + <image width=100 height=100 x=0 y=-100 + xlink:href='data:image/svg+xml, + <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200"> + <rect width="100" height="100" x="0" y="0" fill="green"/> + </svg>' + /> + </svg> diff --git a/layout/reftests/svg/paint-on-maskLayer-1-ref.html b/layout/reftests/svg/paint-on-maskLayer-1-ref.html new file mode 100644 index 0000000000..5667f47bb6 --- /dev/null +++ b/layout/reftests/svg/paint-on-maskLayer-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> +<style type="text/css"> + div { + background: blue; + width: 100px; + height: 100px; + } +</style> +<div></div> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/paint-on-maskLayer-1a.html b/layout/reftests/svg/paint-on-maskLayer-1a.html new file mode 100644 index 0000000000..88c39177cb --- /dev/null +++ b/layout/reftests/svg/paint-on-maskLayer-1a.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<title>Paint clip-path onto mask layer</title> +<style type="text/css"> + #inner { + width: 200px; + height: 200px; + box-sizing:border-box; + background: blue; + /* make clip-path pained on mask layer */ + border: 1px solid transparent; + will-change: transform; + } + + #outer { + width: 200px; + height: 200px; + clip-path: url(#path); + /* make it fixed so that inner div has different AGR with outter div */ + position: fixed; + } +</style> +<div id="outer"> + <div id="inner"></div> +</div> + +<svg height="0"> + <defs> + <clipPath id="path"> + <rect x="0" y="0" width="100" height="100"/> + </clipPath> + </defs> +</svg> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/paint-on-maskLayer-1b.html b/layout/reftests/svg/paint-on-maskLayer-1b.html new file mode 100644 index 0000000000..6c6a433d0b --- /dev/null +++ b/layout/reftests/svg/paint-on-maskLayer-1b.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<title>Paint positioned mask onto mask layer</title> +<style type="text/css"> + #inner { + width: 200px; + height: 200px; + box-sizing:border-box; + background: blue; + /* make mask pained on mask layer */ + border: 1px solid transparent; + will-change: transform; + } + + #outer { + width: 200px; + height: 200px; + mask-image: url(#mymask); + /* make it fixed so that inner div has different AGR with outter div */ + position: fixed; + } +</style> +<div id="outer"> + <div id="inner"></div> +</div> + +<svg height="0"> + <defs> + <mask id="mymask" x="0" y="0" width="1" height="1"> + <rect x="0" y="0" width="100" height="100" fill="white"/> + </mask> + </defs> +</svg> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/paint-on-maskLayer-1c.html b/layout/reftests/svg/paint-on-maskLayer-1c.html new file mode 100644 index 0000000000..9389cf5b92 --- /dev/null +++ b/layout/reftests/svg/paint-on-maskLayer-1c.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<title>Paint clip-path onto mask layer</title> +<style type="text/css"> + #inner { + width: 200px; + height: 200px; + box-sizing: border-box; + background: blue; + /* make clip-path pained on mask layer */ + border: 1px solid transparent; + will-change: transform; + } + + #outer { + width: 200px; + height: 200px; + clip-path: inset(0px 100px 100px 0px); + /* make it fixed so that inner div has different AGR with outter div */ + position: fixed; + } +</style> +<div id="outer"> + <div id="inner"></div> +</div> + +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/paint-order-01-ref.svg b/layout/reftests/svg/paint-order-01-ref.svg new file mode 100644 index 0000000000..e73a988b0e --- /dev/null +++ b/layout/reftests/svg/paint-order-01-ref.svg @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference for paint-order-01.svg</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=828805 --> + + <g fill="gold" stroke="black" stroke-width="8"> + + <circle cx="50" cy="50" r="20" fill-opacity="1" stroke-opacity="0"/> + <circle cx="50" cy="50" r="20" fill-opacity="0" stroke-opacity="1"/> + + <circle cx="50" cy="100" r="20" fill-opacity="0" stroke-opacity="1"/> + <circle cx="50" cy="100" r="20" fill-opacity="1" stroke-opacity="0"/> + + <circle cx="50" cy="150" r="20" fill-opacity="0" stroke-opacity="1"/> + <circle cx="50" cy="150" r="20" fill-opacity="1" stroke-opacity="0"/> + + <circle cx="50" cy="200" r="20" fill-opacity="0" stroke-opacity="1"/> + <circle cx="50" cy="200" r="20" fill-opacity="1" stroke-opacity="0"/> + + <circle cx="50" cy="250" r="20" fill-opacity="0" stroke-opacity="1"/> + <circle cx="50" cy="250" r="20" fill-opacity="1" stroke-opacity="0"/> + + <circle cx="50" cy="300" r="20" fill-opacity="0" stroke-opacity="1"/> + <circle cx="50" cy="300" r="20" fill-opacity="1" stroke-opacity="0"/> + + <circle cx="50" cy="350" r="20" fill-opacity="1" stroke-opacity="0"/> + <circle cx="50" cy="350" r="20" fill-opacity="0" stroke-opacity="1"/> + </g> +</svg> diff --git a/layout/reftests/svg/paint-order-01.svg b/layout/reftests/svg/paint-order-01.svg new file mode 100644 index 0000000000..6229b28bf2 --- /dev/null +++ b/layout/reftests/svg/paint-order-01.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that the paint-order property works</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=828805 --> + + <g fill="gold" stroke="black" stroke-width="8"> + <circle cx="50" cy="50" r="20"/> + <circle cx="50" cy="100" r="20" style="paint-order: stroke fill markers"/> + <circle cx="50" cy="150" r="20" paint-order="stroke fill markers"/> + <circle cx="50" cy="200" r="20" paint-order="stroke markers fill"/> + <circle cx="50" cy="250" r="20" paint-order="stroke fill"/> + <circle cx="50" cy="300" r="20" paint-order="stroke"/> + <circle cx="50" cy="350" r="20" paint-order="normal"/> + </g> +</svg> diff --git a/layout/reftests/svg/paint-order-02-ref.svg b/layout/reftests/svg/paint-order-02-ref.svg new file mode 100644 index 0000000000..46731a5bff --- /dev/null +++ b/layout/reftests/svg/paint-order-02-ref.svg @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference for paint-order-02.svg</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=828805 --> + + <linearGradient id="gold"> + <stop stop-color="gold"/> + </linearGradient> + + <linearGradient id="black"> + <stop stop-color="black"/> + </linearGradient> + + <g fill="url(#gold)" stroke="url(#black)" stroke-width="8" paint-order="stroke"> + <ellipse cx="50" cy="50" rx="40" ry="20" fill="none"/> + <ellipse cx="50" cy="50" rx="40" ry="20" stroke="none"/> + + <path d="M 50,100 h 40 v 30 z" fill="none"/> + <path d="M 50,100 h 40 v 30 z" stroke="none"/> + + <polygon points="50,150 90,150 90,180" fill="none"/> + <polygon points="50,150 90,150 90,180" stroke="none"/> + + <polyline points="50,200 90,200 90,230" fill="none"/> + <polyline points="50,200 90,200 90,230" stroke="none"/> + + <rect x="50" y="250" width="80" height="30" r="16" fill="none"/> + <rect x="50" y="250" width="80" height="30" r="16" stroke="none"/> + + <text x="50" y="350" font-size="80" stroke-width="4"><tspan fill="none">hello</tspan> <tspan stroke="none">there</tspan></text> + <text x="50" y="350" font-size="80" stroke-width="4"><tspan stroke="none">hello</tspan> <tspan fill="none">there</tspan></text> + </g> +</svg> diff --git a/layout/reftests/svg/paint-order-02.svg b/layout/reftests/svg/paint-order-02.svg new file mode 100644 index 0000000000..52e7ac2dd9 --- /dev/null +++ b/layout/reftests/svg/paint-order-02.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that the paint-order property works</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=828805 --> + + <linearGradient id="gold"> + <stop stop-color="gold"/> + </linearGradient> + + <linearGradient id="black"> + <stop stop-color="black"/> + </linearGradient> + + <g fill="url(#gold)" stroke="url(#black)" stroke-width="8" paint-order="stroke"> + <ellipse cx="50" cy="50" rx="40" ry="20"/> + <path d="M 50,100 h 40 v 30 z"/> + <polygon points="50,150 90,150 90,180"/> + <polyline points="50,200 90,200 90,230"/> + <rect x="50" y="250" width="80" height="30" r="16"/> + <text x="50" y="350" font-size="80" stroke-width="4">hello <tspan paint-order="normal">there</tspan></text> + </g> +</svg> diff --git a/layout/reftests/svg/paint-order-03-ref.svg b/layout/reftests/svg/paint-order-03-ref.svg new file mode 100644 index 0000000000..1adf907031 --- /dev/null +++ b/layout/reftests/svg/paint-order-03-ref.svg @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference for paint-order-03.svg</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=828805 --> + + <defs> + <marker id="m" markerWidth="40" markerHeight="40" refX="20" refY="20" markerUnits="userSpaceOnUse"> + <circle cx="20" cy="20" r="16" fill="fuchsia"/> + </marker> + </defs> + + <g stroke-width="8"> + <g fill="none" stroke="none" style="marker: url(#m)"> + <path d="M 50,50 h 100 v 100 h -50 z"/> + <line x1="200" y1="50" x2="300" y2="150"/> + <polygon points="50,200 50,300 200,200 200,300"/> + </g> + <g fill="none" stroke="black"> + <path d="M 50,50 h 100 v 100 h -50 z"/> + <line x1="200" y1="50" x2="300" y2="150"/> + <polygon points="50,200 50,300 200,200 200,300"/> + </g> + <g fill="gold" stroke="none"> + <path d="M 50,50 h 100 v 100 h -50 z"/> + <line x1="200" y1="50" x2="300" y2="150"/> + <polygon points="50,200 50,300 200,200 200,300"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/paint-order-03.svg b/layout/reftests/svg/paint-order-03.svg new file mode 100644 index 0000000000..8b2c02d777 --- /dev/null +++ b/layout/reftests/svg/paint-order-03.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that the paint-order property works</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=828805 --> + + <defs> + <marker id="m" markerWidth="40" markerHeight="40" refX="20" refY="20" markerUnits="userSpaceOnUse"> + <circle cx="20" cy="20" r="16" fill="fuchsia"/> + </marker> + </defs> + + <g fill="gold" stroke="black" stroke-width="8" style="marker: url(#m)" paint-order="markers stroke fill"> + <path d="M 50,50 h 100 v 100 h -50 z"/> + <line x1="200" y1="50" x2="300" y2="150"/> + <polygon points="50,200 50,300 200,200 200,300"/> + </g> +</svg> diff --git a/layout/reftests/svg/pass.svg b/layout/reftests/svg/pass.svg new file mode 100644 index 0000000000..c09c6601e8 --- /dev/null +++ b/layout/reftests/svg/pass.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"> + <title>Testcase reference file for generic pass condition</title> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/path-01-ref.svg b/layout/reftests/svg/path-01-ref.svg new file mode 100644 index 0000000000..09ba749aa9 --- /dev/null +++ b/layout/reftests/svg/path-01-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + <title>Reference for path consisting of a single point</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=510177 --> + + <circle cx="100" cy="100" r="10" fill="black"/> +</svg> diff --git a/layout/reftests/svg/path-01.svg b/layout/reftests/svg/path-01.svg new file mode 100644 index 0000000000..7085d8701d --- /dev/null +++ b/layout/reftests/svg/path-01.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + <title>Testcase for path consisting of a single point</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=510177 --> + + <path stroke="black" stroke-width="20" stroke-linecap="round" d="M100 100 Z" /> +</svg> diff --git a/layout/reftests/svg/path-02.svg b/layout/reftests/svg/path-02.svg new file mode 100644 index 0000000000..c863c08338 --- /dev/null +++ b/layout/reftests/svg/path-02.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> + <title>Testcase for path with errors</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=553905 --> + + <rect width="100%" height="100%" fill="lime"/> + <g shape-rendering="crispEdges"> + <path d="M 20 200 H 80" stroke-width="20%" stroke="red"/> + <path d="M 20 200 H 80#90" stroke-width="20%" stroke="lime"/> + </g> +</svg> diff --git a/layout/reftests/svg/path-04.svg b/layout/reftests/svg/path-04.svg new file mode 100644 index 0000000000..e58254da15 --- /dev/null +++ b/layout/reftests/svg/path-04.svg @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + + <title>Test that selectors detect changes to the 'd' attribute</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=610990 --> + + <style> + +path[d="M0,0 V100 H100 V0 Z"] { + fill: lime; +} + + </style> + <script><![CDATA[ + +function run() +{ + document.getElementById('path').setAttribute('d', 'M0,0 V100 H100 V0 Z'); + document.documentElement.removeAttribute('class'); +} + +window.addEventListener('MozReftestInvalidate', run, false); + + ]]></script> + + <rect width="100%" height="100%" fill="lime"/> + <path id="path" fill="red" d="M0,0 H100 V100 H0 Z"/> + +</svg> diff --git a/layout/reftests/svg/path-05.svg b/layout/reftests/svg/path-05.svg new file mode 100644 index 0000000000..28a7305b29 --- /dev/null +++ b/layout/reftests/svg/path-05.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + shape-rendering="crispEdges"> + + <title>Testcase for path arc handling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=657862 --> + + <rect width="100%" height="100%" fill="lime"/> + + <!-- Check that arc paints over entire circle: --> + + <circle cx="100" cy="100" r="79" fill="red"/> + <path d="M20,100 A80,80 0,0,1 180,100 A80,80 0,0,1 20,100" fill="lime"/> + + <!-- Check that arc does not paint outside circle: --> + + <g transform="translate(200,0)"> + <path d="M20,100 A80,80 0,0,1 180,100 A80,80 0,0,1 20,100" fill="red"/> + <circle cx="100" cy="100" r="81" fill="lime"/> + </g> + +</svg> diff --git a/layout/reftests/svg/path-06-ref.svg b/layout/reftests/svg/path-06-ref.svg new file mode 100644 index 0000000000..5e7a726fd8 --- /dev/null +++ b/layout/reftests/svg/path-06-ref.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Reference for zero-sized path arc handling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=793612 --> + + <!-- Check that a zero-sized arc segment is ignored. --> + <path d="M 100,100 H 200 H 300" stroke="red" stroke-width="3px"/> +</svg> diff --git a/layout/reftests/svg/path-06.svg b/layout/reftests/svg/path-06.svg new file mode 100644 index 0000000000..a206e0f38c --- /dev/null +++ b/layout/reftests/svg/path-06.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for zero-sized path arc handling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=793612 --> + + <!-- Check that a zero-sized arc segment is ignored. --> + <path d="M 100,100 H 200 A 200,100 0 0 0 200,100 H 300" stroke="red" stroke-width="3px"/> +</svg> diff --git a/layout/reftests/svg/path-07-ref.svg b/layout/reftests/svg/path-07-ref.svg new file mode 100644 index 0000000000..91192b3a6e --- /dev/null +++ b/layout/reftests/svg/path-07-ref.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Reference for negative radius path arc handling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=729139 --> + + <!-- Check that a negative arc radius is treated as positive. --> + <path d="M 150,0 + a 150,150 0 0,1 106.066,256.066 + l -35.355,-35.355 + a 100,100 0 0,0 -70.711,-170.711 + z" fill="#3d7fe6" shape-rendering="crispEdges"/> +</svg> diff --git a/layout/reftests/svg/path-07.svg b/layout/reftests/svg/path-07.svg new file mode 100644 index 0000000000..221e70d46c --- /dev/null +++ b/layout/reftests/svg/path-07.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for negative radius path arc handling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=729139 --> + + <!-- Check that a negative arc radius is treated as positive. --> + <path d="M 150,0 + a 150,150 0 0,1 106.066,256.066 + l -35.355,-35.355 + a -100,-100 0 0,0 -70.711,-170.711 + z" fill="#3d7fe6" shape-rendering="crispEdges"/> +</svg> diff --git a/layout/reftests/svg/path-08.svg b/layout/reftests/svg/path-08.svg new file mode 100644 index 0000000000..e18a36d224 --- /dev/null +++ b/layout/reftests/svg/path-08.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"> + + <title>Testcase move followed by comma and line co-ordinates</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=938569 --> + + <rect width="100%" height="100%" fill="red"/> + + <path d="M0,0,100,0,100,100,0,100z" fill="lime" shape-rendering="crispEdges"/> +</svg> diff --git a/layout/reftests/svg/path-transform-box.svg b/layout/reftests/svg/path-transform-box.svg new file mode 100644 index 0000000000..955c4a8cc7 --- /dev/null +++ b/layout/reftests/svg/path-transform-box.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"> + <title>Testcase transform-box on a path with fill=none</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1474834 --> + + <style> + path { + stroke-width: 12; + transform-origin: 50% 50%; + transform-box: fill-box; + transform: rotate(180deg); + } + </style> + <rect fill="lime" width="100" height="100" stroke="red" stroke-width="10"/> + <path fill="none" stroke="lime" d="M0 0 0 100 100 100 100 0z"/> +</svg> diff --git a/layout/reftests/svg/pathLength-01.svg b/layout/reftests/svg/pathLength-01.svg new file mode 100644 index 0000000000..c9261fd46b --- /dev/null +++ b/layout/reftests/svg/pathLength-01.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg viewBox="0 0 100 2" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="100%" fill="red"/> + <!-- This path is really 400 units long (and its halfway point is at the + right edge of our viewBox). We use pathLength to normalize its length + to 20, though, so the first 10-unit-long dash in stroke-dasharray ends + up covering 10/20 = 1/2 of the path. This covers the whole viewBox. --> + <path d="M-100,1 h400" pathLength="20" stroke-dasharray="10" fill="none" stroke="lime" stroke-width="2"/> +</svg> diff --git a/layout/reftests/svg/pathLength-02.svg b/layout/reftests/svg/pathLength-02.svg new file mode 100644 index 0000000000..8e939bd0fd --- /dev/null +++ b/layout/reftests/svg/pathLength-02.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg viewBox="0 0 100 2" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="100%" fill="lime"/> + <!-- This path is really 400 units long (and its halfway point is at the + right edge of our viewBox). We use pathLength to normalize its length + to 20, though, so the first 5-unit-long dash in stroke-dasharray ends + up covering 5/20 = 1/4 of the path. The hole in the dasharray spans + the viewBox --> + <path d="M-100,1 h400" pathLength="20" stroke-dasharray="5" fill="none" stroke="red" stroke-width="2"/> +</svg> diff --git a/layout/reftests/svg/pattern-basic-01.svg b/layout/reftests/svg/pattern-basic-01.svg new file mode 100644 index 0000000000..b643a8943e --- /dev/null +++ b/layout/reftests/svg/pattern-basic-01.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=995813 --> + + <title>Test mapped attributes work on the pattern element</title> + + <pattern id="pattern" width="100%" height="100%" fill="lime" patternContentUnits="objectBoundingBox"> + <rect width="100%" height="100%"/> + </pattern> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="url(#pattern)"/> + +</svg> diff --git a/layout/reftests/svg/pattern-big-image-ref.html b/layout/reftests/svg/pattern-big-image-ref.html new file mode 100644 index 0000000000..0f3eeb5a4d --- /dev/null +++ b/layout/reftests/svg/pattern-big-image-ref.html @@ -0,0 +1,5 @@ +<div style="left: 0px; top: 0px; width: 10px; height: 10px;"> + <svg x="0" y="0" height="100%" width="100%" preserveAspectRatio="xMidYMid slice" viewBox="0 0 4000 3000"> + <image xlink:href="big-image.jpeg" width="4000" height="3000"/> + </svg> +</div>
\ No newline at end of file diff --git a/layout/reftests/svg/pattern-big-image.html b/layout/reftests/svg/pattern-big-image.html new file mode 100644 index 0000000000..caa30a9b7b --- /dev/null +++ b/layout/reftests/svg/pattern-big-image.html @@ -0,0 +1,10 @@ +<div style="left: 0px; top: 0px; width: 10px; height: 10px;"> + <svg x="0" y="0" height="100%" width="100%"> + <defs> + <pattern id="pattern-big-image" patternUnits="objectBoundingBox" preserveAspectRatio="xMidYMid slice" width="1" height="1" x="0" y="0" viewBox="0 0 4000 3000"> + <image xlink:href="big-image.jpeg" width="4000" height="3000"/> + </pattern> + </defs> + <rect fill="url(#pattern-big-image)" x="0" y="0" width="100%" height="100%"/> + </svg> +</div>
\ No newline at end of file diff --git a/layout/reftests/svg/pattern-css-transform-ref.html b/layout/reftests/svg/pattern-css-transform-ref.html new file mode 100644 index 0000000000..532166fe76 --- /dev/null +++ b/layout/reftests/svg/pattern-css-transform-ref.html @@ -0,0 +1,10 @@ +<svg width="200" height="200"> + <defs> + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="30" height="30" fill="skyblue"/> + <rect x="40" y="40" width="10" height="10" fill="skyblue" /> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> +</svg> diff --git a/layout/reftests/svg/pattern-css-transform.html b/layout/reftests/svg/pattern-css-transform.html new file mode 100644 index 0000000000..fa6cf5e955 --- /dev/null +++ b/layout/reftests/svg/pattern-css-transform.html @@ -0,0 +1,20 @@ +<style> +#rec1 { + transform: scale(.6,.6); +} +#rec2 { + transform: translate(40px,40px) scale(.2,.2); +} +</style> +<svg width="200" height="200"> + <defs> + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect id="rec1" x="0" y="0" width="50" height="50" fill="skyblue"/> + <g> + <rect id="rec2" x="0" y="0" width="50" height="50" fill="skyblue"/> + </g> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> +</svg> diff --git a/layout/reftests/svg/pattern-invalid-01-ref.svg b/layout/reftests/svg/pattern-invalid-01-ref.svg new file mode 100644 index 0000000000..289335a173 --- /dev/null +++ b/layout/reftests/svg/pattern-invalid-01-ref.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"> + <title>Reference that pattern without width/height does not display</title> + <rect width="100%" height="100%" fill="black"/> +</svg> diff --git a/layout/reftests/svg/pattern-invalid-01.svg b/layout/reftests/svg/pattern-invalid-01.svg new file mode 100644 index 0000000000..bbcdda85c1 --- /dev/null +++ b/layout/reftests/svg/pattern-invalid-01.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase for pattern with no width/height is not displayed</title> + <defs> + <pattern id="p"> + <rect width="100%" height="100%" fill="red"/> + </pattern> + </defs> + <rect width="100%" height="100%" fill="black"/> + <rect width="100%" height="100%" fill="url(#p)"/> +</svg> diff --git a/layout/reftests/svg/pattern-live-01-ref.svg b/layout/reftests/svg/pattern-live-01-ref.svg new file mode 100644 index 0000000000..374c84d343 --- /dev/null +++ b/layout/reftests/svg/pattern-live-01-ref.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + +<pattern patternUnits="userSpaceOnUse" id="pat1" width="20" height="20"> + <rect x="10" y="10" width="10" height="10" fill="green" id="green" /> +</pattern> + +<rect x="25" y="25" width="430" height="60" stroke="black" fill="url(#pat1)" /> + +</svg> diff --git a/layout/reftests/svg/pattern-live-01a.svg b/layout/reftests/svg/pattern-live-01a.svg new file mode 100644 index 0000000000..1409495e46 --- /dev/null +++ b/layout/reftests/svg/pattern-live-01a.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <script type="application/javascript"> + document.addEventListener("MozReftestInvalidate", doTest, false); + + function doTest() { + document.getElementById('pat1').removeChild(document.getElementById('red')); + document.documentElement.removeAttribute('class'); + } + + </script> + +<!-- Tests that patterns are live to element removal. --> + +<pattern patternUnits="userSpaceOnUse" id="pat1" width="20" height="20"> + <rect x="10" y="10" width="10" height="10" fill="green" id="green" /> + <rect x="5" y="5" width="10" height="10" fill="red" id="red" /> +</pattern> + +<rect x="25" y="25" width="430" height="60" stroke="black" fill="url(#pat1)" /> + +</svg> diff --git a/layout/reftests/svg/pattern-live-01b.svg b/layout/reftests/svg/pattern-live-01b.svg new file mode 100644 index 0000000000..60011c4efa --- /dev/null +++ b/layout/reftests/svg/pattern-live-01b.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <script type="application/javascript"> + document.addEventListener("MozReftestInvalidate", doTest, false); + + function doTest() { + document.getElementById('red').setAttribute('fill', 'green'); + document.documentElement.removeAttribute('class'); + } + + </script> + +<!-- Tests that patterns are live to fill attribute changes. --> + +<pattern patternUnits="userSpaceOnUse" id="pat1" width="20" height="20"> + <rect x="10" y="10" width="10" height="10" fill="red" id="red" /> +</pattern> + +<rect x="25" y="25" width="430" height="60" stroke="black" fill="url(#pat1)" /> + +</svg> diff --git a/layout/reftests/svg/pattern-live-01c.svg b/layout/reftests/svg/pattern-live-01c.svg new file mode 100644 index 0000000000..46c421b929 --- /dev/null +++ b/layout/reftests/svg/pattern-live-01c.svg @@ -0,0 +1,27 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <script type="application/javascript"> + document.addEventListener("MozReftestInvalidate", doTest, false); + + function doTest() { + document.getElementById('redsquare').setAttribute('fill', 'green'); + document.documentElement.removeAttribute('class'); + } + + </script> + +<!-- Tests that patterns are live to fill attribute changes in elements referenced through the |use| element. --> + +<defs> + <rect id="redsquare" x="10" y="10" width="10" height="10" fill="red" /> +</defs> + +<pattern patternUnits="userSpaceOnUse" id="pat1" width="20" height="20"> + <use xlink:href="#redsquare" /> +</pattern> + +<rect x="25" y="25" width="430" height="60" stroke="black" fill="url(#pat1)" /> + +</svg> diff --git a/layout/reftests/svg/pattern-scale-01-ref.svg b/layout/reftests/svg/pattern-scale-01-ref.svg new file mode 100644 index 0000000000..2a1f9805aa --- /dev/null +++ b/layout/reftests/svg/pattern-scale-01-ref.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <pattern id="pattern" width="200" height="200" patternUnits="userSpaceOnUse"> + <circle cx="100" cy="100" r="100" fill="lime" /> + </pattern> + </defs> + <rect width="200" height="200" fill="url(#pattern)" /> + <circle cx="100" cy="100" r="100" fill="none" stroke="lime" stroke-width="3.5" shape-rendering="crispEdges" /> +</svg> diff --git a/layout/reftests/svg/pattern-scale-01a.svg b/layout/reftests/svg/pattern-scale-01a.svg new file mode 100644 index 0000000000..bc3e79a38b --- /dev/null +++ b/layout/reftests/svg/pattern-scale-01a.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <pattern id="pattern" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="scale(-40)"> + <circle cx="2.5" cy="2.5" r="2.5" fill="lime" /> + </pattern> + </defs> + <rect width="200" height="200" fill="url(#pattern)" /> + <circle cx="100" cy="100" r="100" fill="none" stroke="lime" stroke-width="3.5" shape-rendering="crispEdges" /> +</svg> diff --git a/layout/reftests/svg/pattern-scale-01b.svg b/layout/reftests/svg/pattern-scale-01b.svg new file mode 100644 index 0000000000..4ce61a1042 --- /dev/null +++ b/layout/reftests/svg/pattern-scale-01b.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <pattern id="pattern" width="1" height="1" patternUnits="userSpaceOnUse"> + <circle cx="0.5" cy="0.5" r="0.5" fill="lime" /> + </pattern> + </defs> + <g transform="scale(200)"> + <rect width="1" height="1" fill="url(#pattern)" /> + </g> + <circle cx="100" cy="100" r="100" fill="none" stroke="lime" stroke-width="3.5" shape-rendering="crispEdges" /> +</svg> diff --git a/layout/reftests/svg/pattern-scale-01c.svg b/layout/reftests/svg/pattern-scale-01c.svg new file mode 100644 index 0000000000..6b18698120 --- /dev/null +++ b/layout/reftests/svg/pattern-scale-01c.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <pattern id="pattern" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(90) scale(-40)"> + <circle cx="2.5" cy="2.5" r="2.5" fill="lime" /> + </pattern> + </defs> + <rect width="200" height="200" fill="url(#pattern)" /> + <circle cx="100" cy="100" r="100" fill="none" stroke="lime" stroke-width="3.5" shape-rendering="crispEdges" /> +</svg> diff --git a/layout/reftests/svg/pattern-transform-presence-01-ref.svg b/layout/reftests/svg/pattern-transform-presence-01-ref.svg new file mode 100644 index 0000000000..f57dcf0ddf --- /dev/null +++ b/layout/reftests/svg/pattern-transform-presence-01-ref.svg @@ -0,0 +1,25 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100"> +<defs> + <pattern id="patternRotated" width="1" height="1" + patternTransform="rotate(45 50 50)"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + <pattern id="patternNotRotated" width="1" height="1"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> +</defs> +<rect width="100" height="100" stroke="black" fill="url(#patternRotated)"/> +<g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#patternRotated)"/> +</g> +<g transform="translate(200)"> + <rect width="100" height="100" stroke="black" fill="url(#patternNotRotated)"/> +</g> +</svg> diff --git a/layout/reftests/svg/pattern-transform-presence-01.svg b/layout/reftests/svg/pattern-transform-presence-01.svg new file mode 100644 index 0000000000..f5e59e3bfc --- /dev/null +++ b/layout/reftests/svg/pattern-transform-presence-01.svg @@ -0,0 +1,58 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="addTransform()" viewBox="0 0 300 100" class="reftest-wait"> +<!-- Test that the presence/absence of a patternTransform is correctly detected. + + Details are below but, in summary, the first two squares should contain the + same pattern (a diagonal checkerbox) whilst the third square should contain + a different pattern (actually the same pattern but WITHOUT the rotation). + --> +<script> +function addTransform() +{ + var g = document.getElementById("patternBase"); + var list = g.patternTransform.baseVal; + var t = document.documentElement.createSVGTransform(); + t.setRotate(45,50,50); + list.appendItem(t); + document.documentElement.removeAttribute("class"); +} +</script> +<defs> + <!-- 1. The base pattern that will be referenced by others. + When the document loads, script will add a patternTransform to this + pattern. It does this using *only SVG DOM APIs* (i.e. not setAttribute) + so that we can test that when a transform is not specified by markup but + is added via the DOM we still correctly detect its presence. --> + <pattern id="patternBase" width="1" height="1"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + <!-- 2. References the base pattern and should detect the base pattern's + patternTransform (added by script) and inherit it. (SVG 1.1 F2 13.3, + xlink:href 'Any attributes which are defined on the referenced element + which are not defined on this element are inherited by this element.'). + Hence this pattern should look IDENTICAL to patternBase. --> + <pattern xlink:href="#patternBase" id="patternRefWithoutTransform"/> + <!-- 3. References the base pattern but patternTransform is defined (although + empty) and hence the patternTransform should NOT be inherited and this + pattern should look DIFFERENT to patternBase. --> + <pattern xlink:href="#patternBase" id="patternRefWithTransform" + patternTransform=""/> + <!-- The case of a patternTransform being supplied by animation is covered by + SMIL reftest anim-pattern-attr-presence-01.svg --> +</defs> +<rect width="100" height="100" stroke="black" + fill="url(#patternBase)"/> +<g transform="translate(100)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternRefWithoutTransform)"/> +</g> +<g transform="translate(200)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternRefWithTransform)"/> +</g> +</svg> diff --git a/layout/reftests/svg/pattern-transformed-01-ref.svg b/layout/reftests/svg/pattern-transformed-01-ref.svg new file mode 100644 index 0000000000..eba434a14a --- /dev/null +++ b/layout/reftests/svg/pattern-transformed-01-ref.svg @@ -0,0 +1,21 @@ +<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg"> + + <pattern x="0" y="0" width="1" height="1" id="pattern" patternContentUnits="objectBoundingBox"> + <rect width="1" height="1" fill="red"/> + <rect width="1" height="1" fill="url(#gradient)"/> + </pattern> + + <linearGradient id="gradient" x1="0" y1="1" x2="0" y2="0"> + <stop offset="0%" stop-color="black" stop-opacity="1"/> + <stop offset="100%" stop-color="black" stop-opacity="0"/> + </linearGradient> + + <circle r="120" cx="120" cy="120" fill="url(#pattern)"/> + + <path + transform="matrix(1,0,0,1,360,120)" + d="M0 0M 120 0 A 120 120 0 0 0 -120 0 A 120 120 0 0 0 120 0" + fill="url(#pattern)"/> + +</svg> + diff --git a/layout/reftests/svg/pattern-transformed-01.svg b/layout/reftests/svg/pattern-transformed-01.svg new file mode 100644 index 0000000000..3391ace8ec --- /dev/null +++ b/layout/reftests/svg/pattern-transformed-01.svg @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg"> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773595 --> + + <pattern x="0" y="0" width="1" height="1" id="pattern"> + <rect width="240" height="240" fill="red"/> + <rect width="240" height="240" fill="url(#gradient)"/> + </pattern> + + <linearGradient id="gradient" x1="0" y1="1" x2="0" y2="0"> + <stop offset="0%" stop-color="black" stop-opacity="1"/> + <stop offset="100%" stop-color="black" stop-opacity="0"/> + </linearGradient> + + <circle r="120" cx="120" cy="0" fill="url(#pattern)" + transform="translate(0,120)"/> + + <path + transform="translate(0,120)" + d="M 480 0 A 120 120 0 0 0 240 0 A 120 120 0 0 0 480 0" + fill="url(#pattern)"/> + +</svg> + diff --git a/layout/reftests/svg/pattern-transformed-02-ref.svg b/layout/reftests/svg/pattern-transformed-02-ref.svg new file mode 100644 index 0000000000..b099042810 --- /dev/null +++ b/layout/reftests/svg/pattern-transformed-02-ref.svg @@ -0,0 +1,20 @@ +<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg"> + + <text x="25" y="25">Both patterns should render without blurriness</text> + + <pattern id="pattern1" viewBox="0 0 100 20" width="100" height="20" + patternUnits="userSpaceOnUse"> + <circle r="2" cx="10" cy="10" fill="green"/> + <circle r="4" cx="30" cy="10" fill="green"/> + <circle r="6" cx="50" cy="10" fill="green"/> + <circle r="8" cx="70" cy="10" fill="green"/> + <circle r="10" cx="90" cy="10" fill="green"/> + </pattern> + + <circle r="150" cx="200" cy="200" stroke="gray" fill="none"/> + <circle r="150" cx="200" cy="200" fill="url(#pattern1)"/> + + <circle r="150" cx="600" cy="200" stroke="gray" fill="none"/> + <circle r="150" cx="600" cy="200" fill="url(#pattern1)"/> + +</svg> diff --git a/layout/reftests/svg/pattern-transformed-02.svg b/layout/reftests/svg/pattern-transformed-02.svg new file mode 100644 index 0000000000..078f3c66dd --- /dev/null +++ b/layout/reftests/svg/pattern-transformed-02.svg @@ -0,0 +1,29 @@ +<svg width="800" height="500" xmlns="http://www.w3.org/2000/svg"> + + <text x="25" y="25">Both patterns should render without blurriness</text> + + <pattern id="pattern1" viewBox="0 0 100 20" width="100" height="20" + patternUnits="userSpaceOnUse"> + <circle r="2" cx="10" cy="10" fill="green"/> + <circle r="4" cx="30" cy="10" fill="green"/> + <circle r="6" cx="50" cy="10" fill="green"/> + <circle r="8" cx="70" cy="10" fill="green"/> + <circle r="10" cx="90" cy="10" fill="green"/> + </pattern> + + <circle r="150" cx="200" cy="200" stroke="gray" fill="none"/> + <circle r="150" cx="200" cy="200" fill="url(#pattern1)"/> + + <pattern id="pattern2" viewBox="0 0 20 100" width="20" height="100" + patternUnits="userSpaceOnUse" patternTransform="rotate(270)"> + <circle r="2" cx="10" cy="10" fill="green"/> + <circle r="4" cx="10" cy="30" fill="green"/> + <circle r="6" cx="10" cy="50" fill="green"/> + <circle r="8" cx="10" cy="70" fill="green"/> + <circle r="10" cx="10" cy="90" fill="green"/> + </pattern> + + <circle r="150" cx="600" cy="200" stroke="gray" fill="none"/> + <circle r="150" cx="600" cy="200" fill="url(#pattern2)"/> + +</svg> diff --git a/layout/reftests/svg/polygon-01-ref.svg b/layout/reftests/svg/polygon-01-ref.svg new file mode 100644 index 0000000000..abcff19dd4 --- /dev/null +++ b/layout/reftests/svg/polygon-01-ref.svg @@ -0,0 +1,12 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Reference for stroking of close section of polygon</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1085092 -->
+
+ <rect fill="none" stroke="blue" stroke-width="10"
+ x="100" y="100" width="100" height="100"/>
+</svg>
diff --git a/layout/reftests/svg/polygon-01.svg b/layout/reftests/svg/polygon-01.svg new file mode 100644 index 0000000000..7c26555fab --- /dev/null +++ b/layout/reftests/svg/polygon-01.svg @@ -0,0 +1,13 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/licenses/publicdomain/
+-->
+<svg xmlns="http://www.w3.org/2000/svg">
+ <title>Test stroking of close section of polygon</title>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1085092 -->
+
+ <polygon fill="none" stroke="blue" stroke-width="10"
+ transform="translate(50,50)"
+ points="50,50 150,50 150,150 50,150"/>
+</svg>
diff --git a/layout/reftests/svg/polygon-marker-01.svg b/layout/reftests/svg/polygon-marker-01.svg new file mode 100644 index 0000000000..a6092ceb6a --- /dev/null +++ b/layout/reftests/svg/polygon-marker-01.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that marker-start and marker-end are co-located for polygon elements</title> + <!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=577475 + + This test checks that marker-start and marker-end are co-located for polygon elements. + --> + <defs> + <marker id="markerStart" markerWidth="40" markerHeight="40" refX="20" refY="20"> + <rect width="50" height="55" fill="red"/> + </marker> + <marker id="markerEnd" markerWidth="40" markerHeight="40" refX="20" refY="20"> + <rect width="50" height="55" fill="lime"/> + </marker> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <polygon marker-start="url(#markerStart)" marker-end="url(#markerEnd)" points="250,150 200,150" /> +</svg> diff --git a/layout/reftests/svg/polygon-points-negative-01.svg b/layout/reftests/svg/polygon-points-negative-01.svg new file mode 100644 index 0000000000..a228605589 --- /dev/null +++ b/layout/reftests/svg/polygon-points-negative-01.svg @@ -0,0 +1,20 @@ +<!-- + 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"> + <title>Testing for x-y |points| attribute</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=619630 --> + + <rect fill="lime" height="100%" width="100%"/> + <rect width="100" height="100" fill="red"/> + + <!-- this should render --> + <polygon points="-10-110 -10-10 -110-10 -110-110" fill="lime" + transform="translate(110,110)"/> + + <!-- this should not --> + <polygon fill="red" transform="translate(110,110)" + points="-110-10-110-110-10-110-10-10"/> +</svg> diff --git a/layout/reftests/svg/polyline-points-invalid-01.svg b/layout/reftests/svg/polyline-points-invalid-01.svg new file mode 100644 index 0000000000..bfb6010042 --- /dev/null +++ b/layout/reftests/svg/polyline-points-invalid-01.svg @@ -0,0 +1,50 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <title>Testing invalid values for |points| attribute</title> + <style> + polyline { + fill: red; + stroke: lime; + stroke-width: 4; + } + </style> + <rect fill="lime" height="100%" width="100%"/> + + <!-- First row: Initial comma(s) --> + <g transform="translate(0, 0)"> + <polyline points=",0,0 10,20 20,0" /> + <polyline points=",,0,0 10,20 20,0" transform="translate( 40, 0)"/> + <polyline points=", ,0,0 10,20 20,0" transform="translate( 80, 0)"/> + <polyline points=", 0,0 10,20 20,0" transform="translate(120, 0)"/> + <polyline points=",,, 0,0 10,20 20,0" transform="translate(160, 0)"/> + </g> + <!-- Second row: Trailing comma(s) --> + <g transform="translate(0, 40)"> + <polyline points="0,0 10,20 20,0" /> + <polyline points="0,0 10,20 20,0," style="fill: lime;" /> + <polyline points="0,0 10,20 20,0" transform="translate( 40, 0)"/> + <polyline points="0,0 10,20 20,0 ," transform="translate( 40, 0)" style="fill: lime;" /> + <polyline points="0,0 10,20 20,0" transform="translate( 80, 0)"/> + <polyline points="0,0 10,20 20,0,," transform="translate( 80, 0)" style="fill: lime;" /> + <polyline points="0,0 10,20 20,0" transform="translate(120, 0)"/> + <polyline points="0,0 10,20 20,0, ," transform="translate(120, 0)" style="fill: lime;" /> + <polyline points="0,0 10,20 20,0" transform="translate(160, 0)"/> + <polyline points="0,0 10,20 20,0 ,,," transform="translate(160, 0)" style="fill: lime;" /> + </g> + <!-- Third row: Repeated commas in the middle --> + <g transform="translate(0, 80)"> + <polyline points="0,,0 10,20 20,0" /> + <polyline points="0,,,0,10,20 20,0" transform="translate( 40, 0)"/> + <polyline points="0, ,0 10,20 20,0" transform="translate( 80, 0)"/> + <polyline points="0 0,, 10,20 20,0" transform="translate(120, 0)"/> + <polyline points="0,0,,10,20 20,0" transform="translate(160, 0)"/> + </g> + <!-- Fourth row: wrong number of values (at least 3, to get anything drawn) --> + <g transform="translate(0, 120)"> + <polyline points="" /> + <polyline points="0,0" transform="translate( 40, 0)"/> + <polyline points="0,0 10" transform="translate( 80, 0)"/> + <polyline points="0,0 10,20 20" transform="translate(120, 0)"/> + <polyline points="0,0 10,20 20,0" transform="translate(160, 0)"/> + <polyline points="0,0 10,20 20,0 0" transform="translate(160, 0)" style="fill: lime;"/> + </g> +</svg> diff --git a/layout/reftests/svg/pseudo-classes-01.svg b/layout/reftests/svg/pseudo-classes-01.svg new file mode 100644 index 0000000000..74ffaf9aa3 --- /dev/null +++ b/layout/reftests/svg/pseudo-classes-01.svg @@ -0,0 +1,43 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <title>Testcase for the :first-child, :link, :visited and :lang pseudo-classes</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=268135 --> + + <style type="text/css"> + <![CDATA[ + +rect:first-child { fill: lime; } +a:link > rect { fill: lime; } +a:visited > rect { fill: lime; } +rect:lang(it) { fill: lime; } + + ]]> + </style> + + <!-- test :first-child --> + <g> + <rect x="0" width="25%" height="100%" fill="red"/> + </g> + + <!-- test :link --> + <a xlink:href="do-not-visit-me.xxx" onclick="evt.preventDefault()"> + <first-child xmlns=""/> + <rect x="25%" width="25%" height="100%" fill="red"/> + </a> + + <!-- test :visited --> + <a xlink:href=""> + <first-child xmlns=""/> + <rect x="50%" width="25%" height="100%" fill="red"/> + </a> + + <!-- test :lang --> + <rect xml:lang="it" x="75%" width="25%" height="100%" fill="red"/> + +</svg> diff --git a/layout/reftests/svg/pseudo-classes-02-ref.svg b/layout/reftests/svg/pseudo-classes-02-ref.svg new file mode 100644 index 0000000000..a76db85a41 --- /dev/null +++ b/layout/reftests/svg/pseudo-classes-02-ref.svg @@ -0,0 +1,22 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <title>Reference for pseudo-classes and text/links</title> + + <!-- link in text --> + <text x="10" y="25" fill="lime" font-size="1em">This should be green</text> + + <!-- text in link --> + <text x="10" y="50" fill="lime" font-size="1em">This should be green</text> + + <!-- link in tspan --> + <text x="10" y="75" fill="lime" font-size="1em">This should be green</text> + + <!-- tspan in link --> + <text x="10" y="100" fill="lime" font-size="1em">This should be green</text> + +</svg> diff --git a/layout/reftests/svg/pseudo-classes-02.svg b/layout/reftests/svg/pseudo-classes-02.svg new file mode 100644 index 0000000000..03c79660b9 --- /dev/null +++ b/layout/reftests/svg/pseudo-classes-02.svg @@ -0,0 +1,48 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <title>Testcase for pseudo-classes and text/links</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=268135 --> + + <style type="text/css"> + <![CDATA[ + +:root { font-size: 1em; } +text > a:link { fill: lime; } +a:visited > text { fill: lime; } +tspan > a:link { fill: lime; } +a:visited > tspan { fill: lime; } + + ]]> + </style> + + <!-- link in text --> + <text x="10" y="25"> + <a xlink:href="do-not-visit-me.xxx" fill="red">This should be green</a> + </text> + + <!-- text in link --> + <a xlink:href="visited-page.html"> + <text x="10" y="50" fill="red">This should be green</text> + </a> + + <!-- link in tspan --> + <text> + <tspan x="10" y="75"> + <a xlink:href="do-not-visit-me.xxx" fill="red">This should be green</a> + </tspan> + </text> + + <!-- tspan in link --> + <text> + <a xlink:href="visited-page.html"> + <tspan x="10" y="100" fill="red">This should be green</tspan> + </a> + </text> + +</svg> diff --git a/layout/reftests/svg/radialGradient-basic-01.svg b/layout/reftests/svg/radialGradient-basic-01.svg new file mode 100644 index 0000000000..c875b2dc3b --- /dev/null +++ b/layout/reftests/svg/radialGradient-basic-01.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + +<title>Testcase for gradient</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 --> + + <defs> + <!-- No stops, like fill = none --> + <radialGradient id="nostops" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"/> + </defs> + + <rect x="0%" y="0%" width="100%" height="100%" fill="lime"/> + <rect x="0%" y="0%" width="100%" height="100%" fill="url(#nostops)"/> +</svg> diff --git a/layout/reftests/svg/radialGradient-basic-02.svg b/layout/reftests/svg/radialGradient-basic-02.svg new file mode 100644 index 0000000000..dda5a7a1d1 --- /dev/null +++ b/layout/reftests/svg/radialGradient-basic-02.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + +<title>Testcase for gradient</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=368840 --> + + <defs> + <!-- One stop, like fill = stop-color --> + <radialGradient id="onestop" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"> + <stop stop-color="lime" offset="1"/> + </radialGradient> + </defs> + + <rect x="0%" y="0%" width="100%" height="100%" fill="red"/> + <rect x="0%" y="0%" width="100%" height="100%" fill="url(#onestop)"/> +</svg> diff --git a/layout/reftests/svg/radialGradient-basic-03-ref.html b/layout/reftests/svg/radialGradient-basic-03-ref.html new file mode 100644 index 0000000000..cbc45573c0 --- /dev/null +++ b/layout/reftests/svg/radialGradient-basic-03-ref.html @@ -0,0 +1,37 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<head> + <title>Reference for gradient</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=441780 --> +</head> +<body onload="go()"> +<canvas width="400" height="400"></canvas> +<style> +* { margin: 0; } +</style> +<script> +function go() { + let canvas = document.querySelector('canvas'); + let ctx = canvas.getContext('2d'); + + function createCircleWithGradient(x, y, r, fx, fy) { + let gradient = ctx.createRadialGradient(fx, y, 0, x, y, r); + gradient.addColorStop(0, 'lime'); + gradient.addColorStop(1, 'red'); + + ctx.beginPath(); + ctx.arc(x, y, 50, 0, 2 * Math.PI); + + ctx.fillStyle = gradient; + ctx.fill(); + } + + createCircleWithGradient(100, 100, 50, 50); + createCircleWithGradient(100, 200, 40, 60); + createCircleWithGradient(200, 100, 50, 250); + createCircleWithGradient(200, 200, 70, 280); +} +</script> +</body> diff --git a/layout/reftests/svg/radialGradient-basic-03.svg b/layout/reftests/svg/radialGradient-basic-03.svg new file mode 100644 index 0000000000..622d8e38eb --- /dev/null +++ b/layout/reftests/svg/radialGradient-basic-03.svg @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + + <title>Testcase for gradient</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=441780 --> + + <defs> + <radialGradient id="gradient1" fx="0"> + <stop offset="0" stop-color="lime" /> + <stop offset="1" stop-color="red"/> + </radialGradient> + <radialGradient id="gradient2" r="0.4" fx="0.1"> + <stop offset="0" stop-color="lime" /> + <stop offset="1" stop-color="red"/> + </radialGradient> + <radialGradient id="gradient3" fx="1"> + <stop offset="0" stop-color="lime" /> + <stop offset="1" stop-color="red"/> + </radialGradient> + <radialGradient id="gradient4" r="0.7" fx="1.3"> + <stop offset="0" stop-color="lime" /> + <stop offset="1" stop-color="red"/> + </radialGradient> + </defs> + + <circle cx="100" cy="100" r="50" fill="url(#gradient1)"/> + <circle cx="100" cy="200" r="50" fill="url(#gradient2)"/> + <circle cx="200" cy="100" r="50" fill="url(#gradient3)"/> + <circle cx="200" cy="200" r="50" fill="url(#gradient4)"/> +</svg> diff --git a/layout/reftests/svg/radialGradient-basic-04.svg b/layout/reftests/svg/radialGradient-basic-04.svg new file mode 100644 index 0000000000..e2e262d6ee --- /dev/null +++ b/layout/reftests/svg/radialGradient-basic-04.svg @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for gradient with offset focal point</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=828157 --> + + <rect width="100%" height="100%" fill="lime"/> + + <radialGradient id="g" r="50%" fy="0%"> + <stop stop-color="lime" offset="0%"/> + <stop stop-color="lime" offset="100%"/> + <stop stop-opacity="0" offset="100%"/> + </radialGradient>" + + <circle cx="50" cy="50" r="48" fill="red"/> + + <rect width="100" height="100" fill="url(#g)"/> + +</svg> + diff --git a/layout/reftests/svg/radialGradient-fr-01.svg b/layout/reftests/svg/radialGradient-fr-01.svg new file mode 100644 index 0000000000..2f28d3aba2 --- /dev/null +++ b/layout/reftests/svg/radialGradient-fr-01.svg @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test gradient fr attribute</title> + <defs> + <radialGradient id="grad1" fr="100%"> + <stop offset="0%" stop-color="red" /> + <stop offset="100%" stop-color="lime" /> + </radialGradient> + <radialGradient id="grad2" xlink:href="#grad1"/> + <style> + circle { + stroke-width: 3px; + stroke: lime; + } + </style> + </defs> + <rect width="100%" height="100%" fill="lime"/> + + <circle cx="100" cy="100" r="50" fill="url(#grad1)" /> + + <circle cx="300" cy="100" r="50" fill="url(#grad2)" /> +</svg> + diff --git a/layout/reftests/svg/radialGradient-fr-02-ref.svg b/layout/reftests/svg/radialGradient-fr-02-ref.svg new file mode 100644 index 0000000000..c256f72a24 --- /dev/null +++ b/layout/reftests/svg/radialGradient-fr-02-ref.svg @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test gradient fr attribute</title> + <defs> + <radialGradient id="grad1"> + <stop offset="0%" stop-color="red" /> + <stop offset="20%" stop-color="red" /> + <stop offset="100%" stop-color="lime" /> + </radialGradient> + <style> + .cover { + stroke-width: 3px; + stroke: lime; + fill: none; + image-rendering: optimizeSpeed; + } + </style> + </defs> + <rect width="100%" height="100%" fill="lime"/> + + <circle cx="100" cy="100" r="50" fill="url(#grad1)" /> + <circle class="cover" cx="100" cy="100" r="50" fill="none"/> +</svg> + diff --git a/layout/reftests/svg/radialGradient-fr-02.svg b/layout/reftests/svg/radialGradient-fr-02.svg new file mode 100644 index 0000000000..1933203be0 --- /dev/null +++ b/layout/reftests/svg/radialGradient-fr-02.svg @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test gradient fr attribute</title> + <defs> + <radialGradient id="grad1" fr="10%"> + <stop offset="0%" stop-color="red" /> + <stop offset="100%" stop-color="lime" /> + </radialGradient> + <style> + .cover { + stroke-width: 3px; + stroke: lime; + fill: none; + image-rendering: optimizeSpeed; + } + </style> + </defs> + <rect width="100%" height="100%" fill="lime"/> + + <circle cx="100" cy="100" r="50" fill="url(#grad1)" /> + <circle class="cover" cx="100" cy="100" r="50" /> +</svg> + diff --git a/layout/reftests/svg/rect-01.svg b/layout/reftests/svg/rect-01.svg new file mode 100644 index 0000000000..c1157e65ff --- /dev/null +++ b/layout/reftests/svg/rect-01.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + +<title>Testcase for rect with fill=none</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=458068 --> + + <rect x1="0" y1="0" width="100%" height="100%" fill="lime"/> + <rect x1="0" y1="0" width="100%" height="100%" fill="none" stroke="lime"/> +</svg> diff --git a/layout/reftests/svg/rect-02.svg b/layout/reftests/svg/rect-02.svg new file mode 100644 index 0000000000..69aac4e8ef --- /dev/null +++ b/layout/reftests/svg/rect-02.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + +<title>Testcase for rect with missing and clamped ry</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=552830s --> + + <rect x1="0" y1="0" width="100%" height="100%" fill="lime"/> + <g shape-rendering="crispEdges"> + <rect x="20" y="50" width="200" height="100" rx="100" fill="red" /> + <rect x="20" y="50" width="200" height="100" rx="100" ry="50" fill="lime" /> + </g> +</svg> diff --git a/layout/reftests/svg/rect-03.svg b/layout/reftests/svg/rect-03.svg new file mode 100644 index 0000000000..3b16bbabcf --- /dev/null +++ b/layout/reftests/svg/rect-03.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + +<title>Testcase for rect with unsupported rx and ry</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=554091 --> + + <rect x="0" y="0" width="100%" height="100%" fill="red"/> + <rect x="0" y="0" width="50%" height="100%" rx="-1" fill="lime" /> + <rect x="50%" y="0" width="50%" height="100%" ry="-1" fill="lime" /> +</svg> diff --git a/layout/reftests/svg/rect-04.svg b/layout/reftests/svg/rect-04.svg new file mode 100644 index 0000000000..bac509417b --- /dev/null +++ b/layout/reftests/svg/rect-04.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test that a rect with no width/height does not display even with a filter</title> + + <rect width="100%" height="100%" fill="lime"/> + + <filter id="filter" filterUnits="userSpaceOnUse" + x="0" y="0" width="100%" height="100%"> + <!-- data: URI is a 1x1 red GIF --> + <feImage preserveAspectRatio="xMidYMid slice" + style="image-rendering: optimizeSpeed;" + xlink:href="data:image/gif,GIF87a%01%00%01%00%80%01%00%FF%00%00%FF%FF%FF%2C%00%00%00%00%01%00%01%00%00%02%02D%01%00%3B"> + </feImage> + </filter> + + <rect filter="url(#filter)"/> + +</svg> diff --git a/layout/reftests/svg/rect-with-rx-and-ry-01.svg b/layout/reftests/svg/rect-with-rx-and-ry-01.svg new file mode 100644 index 0000000000..081314b5ac --- /dev/null +++ b/layout/reftests/svg/rect-with-rx-and-ry-01.svg @@ -0,0 +1,21 @@ +<!-- + 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"> + + <title>Testcase for rect with both rx and ry set</title> + + <!-- This is an additional test (i.e. not from a Mozilla bug) --> + + <rect width="100%" height="100%" fill="lime"/> + + <!-- check that rect with rx and ry is drawn --> + <circle cx="50" cy="50" r="48" fill="red"/> + <rect width="100" height="100" rx="50" ry="50" fill="lime"/> + + <!-- check rx and ry aren't ignored --> + <rect x="110" width="100" height="100" rx="50" ry="50" fill="red"/> + <circle cx="160" cy="50" r="52" fill="lime"/> + +</svg> diff --git a/layout/reftests/svg/rect-with-rx-or-ry-01-ref.svg b/layout/reftests/svg/rect-with-rx-or-ry-01-ref.svg new file mode 100644 index 0000000000..63f7d5d04f --- /dev/null +++ b/layout/reftests/svg/rect-with-rx-or-ry-01-ref.svg @@ -0,0 +1,20 @@ +<!-- + 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"> + + <title>Reference for rect with one of rx or ry</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=111993 --> + + <rect x="10" y="10" width="100" height="100"/> + <rect x="10" y="120" width="100" height="100"/> + + <rect x="120" y="10" width="100" height="100" rx="30" ry="30"/> + <rect x="120" y="120" width="100" height="100" rx="30" ry="30"/> + + <rect x="230" y="10" width="100" height="100" rx="50" ry="50"/> + <rect x="230" y="120" width="100" height="100" rx="50" ry="50"/> + +</svg> diff --git a/layout/reftests/svg/rect-with-rx-or-ry-01.svg b/layout/reftests/svg/rect-with-rx-or-ry-01.svg new file mode 100644 index 0000000000..7050ed9617 --- /dev/null +++ b/layout/reftests/svg/rect-with-rx-or-ry-01.svg @@ -0,0 +1,23 @@ +<!-- + 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"> + + <title>Testcase for rect with one of rx or ry</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=111993 --> + + <!-- test one of rx/ry being non-zero, the other zero --> + <rect x="10" y="10" width="100" height="100" rx="30" ry="0"/> + <rect x="10" y="120" width="100" height="100" rx="0" ry="30"/> + + <!-- test one of rx/ry being non-zero, the other not set --> + <rect x="120" y="10" width="100" height="100" rx="30"/> + <rect x="120" y="120" width="100" height="100" ry="30"/> + + <!-- test one of rx/ry being set to a value greater than width/2 --> + <rect x="230" y="10" width="100" height="100" rx="70"/> + <rect x="230" y="120" width="100" height="100" ry="70"/> + +</svg> diff --git a/layout/reftests/svg/reftest.list b/layout/reftests/svg/reftest.list new file mode 100644 index 0000000000..3504084b5d --- /dev/null +++ b/layout/reftests/svg/reftest.list @@ -0,0 +1,636 @@ +# svg-as-an-image tests +include as-image/reftest.list + +# <image> tests +include image/reftest.list + +# sizing tests +include sizing/reftest.list + +# filter tests +include filters/reftest.list + +# smil / animation tests +include smil/reftest.list + +# text tests +include text/reftest.list + +# load only tests +include load-only/reftest.list + +# Mozilla only tests (i.e. those containing XUL/XBL/etc.) +skip-if(useDrawSnapshot) include moz-only/reftest.list + +# svg-integration tests (using svg effects in e.g. HTML) +include svg-integration/reftest.list + +needs-focus == autofocus-01a.svg autofocus-01-ref.svg +needs-focus == autofocus-01b.svg autofocus-01-ref.svg +needs-focus == autofocus-02a.svg pass.svg +needs-focus == autofocus-02b.svg pass.svg + +== background-svg-without-height.html background-ref.html +== background-svg-without-height-width.html background-ref.html +== background-svg-without-width.html background-ref.html + +== baseline-middle-01.svg pass.svg + +== blend-color-burn.svg blend-color-burn-ref.svg +fuzzy-if(winWidget&&gpuProcess&&!d2d,0-1,0-1600) == blend-color-dodge.svg blend-color-dodge-ref.svg +# == blend-color.svg blend-color-ref.svg +== blend-darken.svg blend-darken-ref.svg +== blend-difference.svg blend-difference-ref.svg +fuzzy(0-1,0-1600) fuzzy-if(geckoview,0-5,0-254) == blend-exclusion.svg blend-exclusion-ref.svg +# == blend-hard-light.svg blend-hard-light-ref.svg +# == blend-hue.svg blend-hue-ref.svg +== blend-layer-blend.svg blend-layer-blend-ref.svg +== blend-layer-filter.svg blend-layer-filter-ref.svg +== blend-layer-mask.svg blend-layer-mask-ref.svg +== blend-layer-opacity.svg blend-layer-opacity-ref.svg +random-if(Android) == blend-lighten.svg blend-lighten-ref.svg +# == blend-luminosity.svg blend-luminosity-ref.svg +#skip-if(Android) == blend-multiply-alpha.svg blend-multiply-alpha-ref.svg +fuzzy(0-1,0-1600) random-if(Android) == blend-multiply.svg blend-multiply-ref.svg +== blend-normal.svg blend-normal-ref.svg +#skip-if(Android) == blend-overlay.svg blend-overlay-ref.svg +#skip-if(Android) == blend-saturation.svg blend-saturation-ref.svg +#skip-if(Android) == blend-screen.svg blend-screen-ref.svg +#skip-if(Android) == blend-soft-light.svg blend-soft-light-ref.svg +skip == blend-difference-stacking.html blend-difference-stacking-ref.html # bug 1458353 +== active-transform-blend-mode.html active-transform-blend-mode-ref.html +== active-clip-and-mask.html active-clip-and-mask-ref.html + +fuzzy(0-11,0-7155) == blur-inside-clipPath.svg blur-inside-clipPath-ref.svg + +== border-radius-01.html pass.svg +== mask-image-filter-transform.html mask-image-filter-transform-ref.html + +== current-translate-01.svg pass.svg +== current-translate-02.svg pass.svg + +== clip-01.svg pass.svg +== clip-02a.svg clip-02-ref.svg +== clip-02b.svg clip-02-ref.svg +fuzzy(0-1,0-10000) == clip-surface-clone-01.svg clip-surface-clone-01-ref.svg +== clip-use-element-01.svg pass.svg +== clip-use-element-02.svg pass.svg + +== clipPath-advanced-01.svg pass.svg +fuzzy(0-3,0-350) == clipPath-and-mask-on-outflowElement-01a.html clipPath-on-outflowElement-01-ref.html +fuzzy(0-3,0-350) == clipPath-and-mask-on-outflowElement-01b.html clipPath-on-outflowElement-01-ref.html +fuzzy(0-1,0-630) == clipPath-and-shape-rendering-01.svg clipPath-and-shape-rendering-01-ref.svg # bug 614840 +== clipPath-and-transform-01.svg pass.svg +== clipPath-and-transform-02.svg pass.svg +== clipPath-basic-01.svg pass.svg +== clipPath-basic-02.svg pass.svg +== clipPath-basic-03.svg pass.svg +== clipPath-basic-04.svg pass.svg +== clipPath-basic-05.svg pass.svg +== clipPath-basic-06.svg pass.svg +== clipPath-basic-07.svg pass.svg +== clipPath-basic-08.svg pass.svg +== clipPath-basic-shape-transform.html clipPath-basic-shape-transform-ref.html +== clipPath-css-transform.html clipPath-css-transform-ref.html +== clipPath-fill-box.html clipPath-fill-box-ref.html +fuzzy(0-3,0-350) == clipPath-on-outflowElement-01a.html clipPath-on-outflowElement-01-ref.html +fuzzy(0-3,0-350) == clipPath-on-outflowElement-01b.html clipPath-on-outflowElement-01-ref.html +fuzzy(0-1,0-32400) == clipPath-on-outflowElement-02a.html clipPath-on-outflowElement-02-ref.html +fuzzy(0-1,0-32400) == clipPath-on-outflowElement-02b.html clipPath-on-outflowElement-02-ref.html +== clipPath-polygon-01.svg pass.svg +== clipPath-polygon-elementFromPoint-01.svg pass.svg +!= clipPath-on-thin-object.svg about:blank +== clipPath-winding-01.svg pass.svg + +== comments-in-pres-attrs.svg pass.svg + +== conditions-01.svg pass.svg +== conditions-02.svg pass.svg +== conditions-03.svg pass.svg +== conditions-04.svg pass.svg +== conditions-05.svg about:blank +== conditions-07.svg pass.svg +fuzzy(0-1,0-320) == conditions-08.svg conditions-08-ref.svg +== conditions-09.svg conditions-09-ref.svg + +== currentColor-01.svg pass.svg +== currentColor-02.svg pass.svg +== currentColor-03.svg pass.svg + +skip-if(fission) == data-uri-with-filter-01.xhtml data-uri-with-filter-01-ref.svg # Bug 1669323 +== data-uri-with-gradient-01.xhtml data-uri-with-gradient-01-ref.svg +== data-uri-with-pattern-01.xhtml pass.svg + +== dynamic-attr-removal-1.svg pass.svg +== dynamic-attr-removal-2.svg pass.svg +== dynamic-attr-change-1.svg pass.svg +== dynamic-attr-change-2.svg pass.svg +== dynamic-class-01.svg pass.svg +fuzzy-if(Android,0-4,0-87) == dynamic-clipPath-01.svg pass.svg +== dynamic-clipPath-02.svg pass.svg +== dynamic-clipPath-clip-rule-01.svg pass.svg +== dynamic-conditions-01.svg pass.svg +== dynamic-conditions-02.svg about:blank +== dynamic-conditions-03.svg pass.svg +== dynamic-conditions-04.svg about:blank +== dynamic-conditions-05.svg pass.svg +== dynamic-conditions-06.svg about:blank +== dynamic-conditions-07.svg pass.svg +== dynamic-conditions-08.svg pass.svg +== dynamic-conditions-09.svg about:blank +== dynamic-conditions-10.svg about:blank +== dynamic-conditions-11.svg pass.svg +== dynamic-conditions-12.svg pass.svg +== dynamic-conditions-13.svg about:blank +== dynamic-feFlood-01.svg pass.svg +asserts(0-1) == dynamic-feImage-01.svg pass.svg # intermittent assertions (bug 886080) +== dynamic-fill-01.svg dynamic-fill-01-ref.svg +== dynamic-fill-rule-01.svg dynamic-fill-rule-01-ref.svg +fuzzy(0-1,0-10000) == dynamic-filter-contents-01a.svg dynamic-filter-contents-01-ref.svg +fuzzy(0-1,0-10000) == dynamic-filter-contents-01b.svg dynamic-filter-contents-01-ref.svg +== dynamic-gradient-contents-01.svg pass.svg +== dynamic-gradient-contents-02.svg pass.svg +== dynamic-inner-svg-01.svg pass.svg +== dynamic-link-style-01.svg pass.svg +== dynamic-marker-01.svg pass.svg +== dynamic-marker-02.svg dynamic-marker-02-ref.svg +== dynamic-marker-03.svg pass.svg +== dynamic-mask-01.svg pass.svg +== dynamic-mask-contents-01.svg pass.svg +== dynamic-mask-pre-effects-bbox.html dynamic-mask-pre-effects-bbox-ref.html +== dynamic-opacity-property-01.svg pass.svg +== dynamic-pattern-01.svg pass.svg +== dynamic-pattern-02.svg pass.svg +== dynamic-pattern-contents-01.svg pass.svg +== dynamic-pattern-contents-02.svg pass.svg +== dynamic-rect-01.svg dynamic-rect-01-ref.svg +fuzzy-if(d2d&&layersGPUAccelerated,0-3,0-1200) == dynamic-rect-02.svg dynamic-rect-02-ref.svg # bug 776038 for Win7, Win8 +== dynamic-rect-03.svg dynamic-rect-03-ref.svg +== dynamic-rect-04.xhtml pass.svg +== dynamic-rect-05.svg pass.svg +== dynamic-reflow-01.svg dynamic-reflow-01-ref.svg +== dynamic-small-object-scaled-up-01.svg pass.svg +== dynamic-small-object-scaled-up-02.svg pass.svg +== dynamic-stroke-01.svg pass.svg +== dynamic-stroke-opacity-01.svg pass.svg +== dynamic-stroke-width-01.svg pass.svg +== dynamic-switch-01.svg pass.svg +== dynamic-text-01.svg dynamic-text-01-ref.svg +fuzzy-if(d2d&&layersGPUAccelerated,0-3,0-12739) == dynamic-text-02.svg dynamic-text-02-ref.svg # bug 776038 for Win7, Win8 +fuzzy-if(d2d&&layersGPUAccelerated,0-2,0-10539) == dynamic-text-03.svg dynamic-text-03-ref.svg # bug 776038 for Win7 +== dynamic-text-04.svg dynamic-text-04-ref.svg +== dynamic-text-05.svg pass.svg +== dynamic-text-06.svg pass.svg +== dynamic-text-07.svg dynamic-text-07-ref.svg +== dynamic-text-08.svg dynamic-text-08-ref.svg +== dynamic-text-attr-01.svg dynamic-text-attr-01-ref.svg +== dynamic-textPath-01.svg dynamic-textPath-01-ref.svg +== dynamic-textPath-02.svg dynamic-textPath-02-ref.svg +== dynamic-textPath-03.svg dynamic-textPath-03-ref.svg +== dynamic-textPath-04.html pass.svg +== dynamic-use-01.svg pass.svg +== dynamic-use-02.svg pass.svg +== dynamic-use-03.svg pass.svg +== dynamic-use-04.svg pass.svg +== dynamic-use-05.svg pass.svg +== dynamic-use-06.svg pass.svg +== dynamic-use-07.svg pass.svg +== dynamic-use-08.svg pass.svg +random == dynamic-use-nested-01a.svg dynamic-use-nested-01-ref.svg +random == dynamic-use-nested-01b.svg dynamic-use-nested-01-ref.svg +== dynamic-use-remove-width.svg dynamic-use-remove-width-ref.svg +== dynamic-viewBox-change-01.svg pass.svg +== dynamic-viewBox-change-02.svg pass.svg +== dynamic-viewBox-change-03.svg pass.svg + +== fallback-color-01a.svg pass.svg +== fallback-color-01b.svg pass.svg +== fallback-color-02.svg fallback-color-02-ref.svg +== fallback-color-03.svg pass.svg +fuzzy(0-1,0-2) == fallback-color-04.svg pass.svg +== fallback-color-05a.svg fallback-color-05-ref.svg +== fallback-color-05b.svg fallback-color-05-ref.svg +== fallback-color-06.svg pass.svg + +== filter-and-clip.svg filter-and-clip-ref.svg +== filter-basic-01.svg pass.svg +== filter-basic-02.svg pass.svg +== filter-basic-03.svg pass.svg +== filter-bounds-01.svg pass.svg +== filter-bounds-02.svg pass.svg +# Disabled for now, see bug 1286798 comment 180, 187, 190 and 196. +# This pref is normally on by default, but we turn it off in reftest runs to +# disable an unnecessary security-check. This reftest is actually testing that +# the security check works, though, so it needs the pref to be turned on: +skip pref(security.fileuri.strict_origin_policy,true) == filter-extref-differentOrigin-01.svg pass.svg # Bug 695385 +== filter-foreignObject-01.svg pass.svg +== filter-in-mask-01.svg pass.svg +== filter-invalidation-01.svg pass.svg +fuzzy(0-71,0-821) fails-if(winWidget) fuzzy-if(OSX&&!swgl,1-1,216-458) == filter-on-continuation-box-01.html filter-on-continuation-box-ref.html +== filter-result-01.svg filter-result-01-ref.svg +== filter-scaled-01.svg pass.svg +fuzzy(0-1,0-500) == filter-scaled-02.html filter-scaled-02-ref.html +== filter-translated-01.svg filter-translated-01-ref.svg +== filter-use-element-01.svg pass.svg +== filtered-image-in-pattern-01.svg pass.svg +fuzzy(0-1,0-800000) == filters-and-group-opacity-01.svg filters-and-group-opacity-01-ref.svg + +== foreignObject-01.svg pass.svg +== foreignObject-02.svg foreignObject-02-ref.svg +== foreignObject-ancestor-style-change-01.svg foreignObject-ancestor-style-change-01-ref.svg +== foreignObject-change-transform-01.svg pass.svg +== foreignObject-display-01.svg pass.svg +fuzzy-if(cocoaWidget,0-1,0-1) fuzzy-if(gtkWidget,0-2,0-2) fuzzy-if(geckoview,0-4,0-9) == foreignObject-form-theme.svg foreignObject-form-theme-ref.html # Bug 1727811 +== foreignObject-img.html foreignObject-img-ref.html +== foreignObject-img-form-theme.html foreignObject-img-form-theme-ref.html +== foreignObject-move-repaint-01.svg pass.svg +== foreignObject-overflow-01.svg pass.svg +== foreignObject-start-hidden-01.svg pass.svg # followup from Bug 596765 +== foreignObject-start-hidden-02.svg pass.svg +== foreignObject-style-change-01.svg pass.svg +== foreignObject-dynamic-abspos-01.html foreignObject-dynamic-abspos-01-ref.html +fuzzy-if(Android,0-18,0-600) == foreignObject-fixedpos-01.html foreignObject-dynamic-abspos-01-ref.html +== foreignObject-fixedpos-02.html foreignObject-fixedpos-ref.html +== foreignObject-dynamic-fixedpos-01.html foreignObject-dynamic-abspos-01-ref.html +== foreignObject-dynamic-line-height-01.html foreignObject-dynamic-line-height-01-ref.html +== foreignObject-vertical-01.svg foreignObject-vertical-01-ref.svg + +== fragmentIdentifier-01.xhtml pass.svg + +== g-transform-01.svg pass.svg + +== getElementById-a-element-01.svg pass.svg +== geometry-properties-in-css.html geometry-properties-in-css-ref.html + +== gradient-href-01.html pass.svg +fuzzy(0-3,0-32000) == gradient-live-01a.svg gradient-live-01-ref.svg +fuzzy(0-3,0-32000) == gradient-live-01b.svg gradient-live-01-ref.svg +fuzzy(0-3,0-32000) == gradient-live-01c.svg gradient-live-01-ref.svg +fuzzy(0-3,0-32000) == gradient-live-01d.svg gradient-live-01-ref.svg +== gradient-transform-01.svg pass.svg +== href-attr-change-restyles.svg href-attr-change-restyles-ref.svg +fuzzy(0-1,0-550) == import-svg-01.html pass.svg +== invalid-text-01.svg pass.svg +== lang-attribute-01.svg pass.svg +== lang-attribute-02.svg pass.svg +== lang-attribute-03.svg pass.svg +== linearGradient-basic-01.svg pass.svg +== linearGradient-basic-02.svg pass.svg +# off-by-one fuzziness expected. OS X is broken with bad aliasing though (bug 1023640). +fuzzy(0-1,0-5000) == linearGradient-basic-03.svg linearGradient-basic-03-ref.svg + +== linked-filter-01.svg pass.svg +== linked-pattern-01.svg pass.svg + +fuzzy(0-1,0-800000) == markers-and-group-opacity-01.svg markers-and-group-opacity-01-ref.svg +== marker-attribute-01.svg pass.svg +fuzzy(0-1,0-1) == marker-dynamic-opacity.html marker-dynamic-opacity-ref.html +== marker-css-transform.html marker-css-transform-ref.html +== marker-effects-01.svg marker-effects-01-ref.svg +fuzzy(0-1,0-100) == marker-viewBox-01.svg marker-viewBox-01-ref.svg +fuzzy(0-65,0-570) == marker-orientation-01.svg marker-orientation-01-ref.svg +fuzzy(0-65,0-570) == marker-orientation-02.svg marker-orientation-02-ref.svg +== marker-orientation-03.svg pass.svg +== marker-orientation-04.svg pass.svg +== marker-orientation-05.svg pass.svg + +fuzzy(0-28,0-28) == mask-and-clipPath.html mask-and-clipPath-ref.html +== mask-and-clipPath-2.svg pass.svg +== mask-ref-loop-01.svg pass.svg +== mask-basic-01.svg pass.svg +fuzzy(0-1,0-10000) == mask-basic-02.svg mask-basic-02-ref.svg +== mask-basic-03.svg pass.svg +== mask-basic-04.svg pass.svg +== mask-basic-05.svg pass.svg +== mask-containing-masked-content-01.svg pass.svg +== mask-contains-inner-svg-01.svg pass.svg +== mask-contains-inner-svg-02.svg pass.svg +== mask-css-transform.html mask-css-transform-ref.html +== mask-empty-size.svg about:blank +== mask-extref-dataURI-01.svg pass.svg +fuzzy(0-128,0-142) == mask-img.html mask-img-ref.html +fuzzy(0-4,0-800) == mask-on-outflowElement-01a.html clipPath-on-outflowElement-01-ref.html +fuzzy(0-4,0-800) == mask-on-outflowElement-01b.html clipPath-on-outflowElement-01-ref.html +fuzzy(0-1,0-5000) == mask-opacity-01.svg mask-opacity-01-ref.svg +fuzzy(0-2,0-65536) == mask-opacity-02.svg mask-opacity-02-ref.svg +fuzzy(0-1,0-5000) == mask-opacity-03.svg mask-opacity-02-ref.svg +fuzzy(0-1,0-5000) == mask-opacity-04.svg mask-opacity-02-ref.svg +fuzzy(0-1,0-5000) == mask-opacity-05.svg mask-opacity-02-ref.svg +!= mask-root-svg.svg about:blank +== mask-transformed-01.svg mask-transformed-01-ref.svg +== mask-transformed-02.svg pass.svg +== mask-transformed-child-01.svg mask-transformed-child-01-ref.svg +# fuzzy because of the differences between clipPath and mask clipping +fuzzy(0-1,0-6400) == mask-type-01.svg mask-type-01-ref.svg +fuzzy(0-1,0-6400) == mask-type-02.svg mask-type-01-ref.svg +fuzzy(0-1,0-6400) == mask-type-03.svg mask-type-01-ref.svg +fuzzy(0-1,0-6400) == mask-type-04.svg mask-type-01-ref.svg +== mask-use-element-01.svg pass.svg + +!= nested-mask-mode.svg about:blank +== nested-viewBox-01.svg pass.svg +== non-scaling-stroke-css-transform.html non-scaling-stroke-css-transform-ref.html + +fuzzy(0-3,0-448000) == nesting-invalid-01.svg nesting-invalid-01-ref.svg + +fuzzy(0-2,0-1000) == non-scaling-stroke-01.svg non-scaling-stroke-01-ref.svg # bug 1074161 for Win7 and OSX 10.8 +fuzzy(0-51,0-900) fuzzy-if(Android,0-51,0-4090) fails-if(useDrawSnapshot) == non-scaling-stroke-02.svg non-scaling-stroke-02-ref.svg +== non-scaling-stroke-03.svg non-scaling-stroke-03-ref.svg + +== objectBoundingBox-and-clipPath.svg pass.svg +# Bug 588684 +== objectBoundingBox-and-fePointLight-01.svg objectBoundingBox-and-fePointLight-01-ref.svg +== objectBoundingBox-and-fePointLight-02.svg objectBoundingBox-and-fePointLight-02-ref.svg +== objectBoundingBox-and-mask.svg pass.svg +== objectBoundingBox-and-mask-02.svg pass.svg +== objectBoundingBox-and-pattern-01a.svg objectBoundingBox-and-pattern-01-ref.svg +== objectBoundingBox-and-pattern-01b.svg objectBoundingBox-and-pattern-01-ref.svg +== objectBoundingBox-and-pattern-01c.svg objectBoundingBox-and-pattern-01-ref.svg +== objectBoundingBox-and-pattern-02.svg pass.svg +== objectBoundingBox-and-pattern-03.svg objectBoundingBox-and-pattern-03-ref.svg + +== opacity-and-gradient-01.svg pass.svg +skip-if(d2d) fuzzy(0-1,0-200000) == opacity-and-gradient-02.svg opacity-and-gradient-02-ref.svg +== opacity-and-pattern-01.svg pass.svg +fuzzy(0-1,0-10000) == opacity-and-transform-01.svg opacity-and-transform-01-ref.svg + +fuzzy-if(Android,0-8,0-200) == outer-svg-border-and-padding-01.svg outer-svg-border-and-padding-01-ref.svg + +fuzzy(0-7,0-214) == outline.html outline-ref.html # Bug 1503525 + +== overflow-on-outer-svg-01.svg overflow-on-outer-svg-01-ref.svg +== overflow-on-outer-svg-02a.xhtml overflow-on-outer-svg-02-ref.xhtml +== overflow-on-outer-svg-02b.xhtml overflow-on-outer-svg-02-ref.xhtml +== overflow-on-outer-svg-02c.xhtml overflow-on-outer-svg-02-ref.xhtml +== overflow-on-outer-svg-02d.xhtml overflow-on-outer-svg-02-ref.xhtml +== overflow-on-outer-svg-03a.xhtml overflow-on-outer-svg-03-ref.xhtml +== overflow-on-outer-svg-03b.xhtml overflow-on-outer-svg-03-ref.xhtml + +== paint-on-maskLayer-1a.html paint-on-maskLayer-1-ref.html +== paint-on-maskLayer-1b.html paint-on-maskLayer-1-ref.html +== paint-on-maskLayer-1c.html paint-on-maskLayer-1-ref.html +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-16,0-5) == paint-order-01.svg paint-order-01-ref.svg +== paint-order-02.svg paint-order-02-ref.svg +== paint-order-03.svg paint-order-03-ref.svg + +#fuzzy(0-23,0-60) fails-if(d2d) == path-01.svg path-01-ref.svg +== path-02.svg pass.svg +== path-04.svg pass.svg +== path-05.svg pass.svg +fuzzy(0-1,0-400) == path-06.svg path-06-ref.svg +== path-07.svg path-07-ref.svg +== path-08.svg pass.svg +== path-transform-box.svg pass.svg + +== pathLength-01.svg pass.svg +== pathLength-02.svg pass.svg + +== pattern-basic-01.svg pass.svg +# Massively downsampling an image plays out differently when using WR instead of blob images. +# In practive the two *look* identical, unfortunately the fuzziness is so high that the test is +# barely meaningful. +fuzzy(0-128,0-100) == pattern-big-image.html pattern-big-image-ref.html +== pattern-css-transform.html pattern-css-transform-ref.html +== pattern-invalid-01.svg pattern-invalid-01-ref.svg +== pattern-live-01a.svg pattern-live-01-ref.svg +== pattern-live-01b.svg pattern-live-01-ref.svg +== pattern-live-01c.svg pattern-live-01-ref.svg +== pattern-scale-01a.svg pattern-scale-01-ref.svg +== pattern-scale-01b.svg pattern-scale-01-ref.svg +== pattern-scale-01c.svg pattern-scale-01-ref.svg +== pattern-transform-presence-01.svg pattern-transform-presence-01-ref.svg +== pattern-transformed-01.svg pattern-transformed-01-ref.svg +fuzzy(0-27,0-9058) fuzzy-if(Android,0-28,0-11159) == pattern-transformed-02.svg pattern-transformed-02-ref.svg + +== polygon-01.svg polygon-01-ref.svg +== polygon-marker-01.svg pass.svg +== polygon-points-negative-01.svg pass.svg +== polyline-points-invalid-01.svg pass.svg + +== pseudo-classes-01.svg pass.svg +# This test depends on :visited styles (which are asynchronous), so we run +# it in layout/style/test/test_visited_reftests.html instead of using the +# reftest harness. +# == pseudo-classes-02.svg pseudo-classes-02-ref.svg + +== radialGradient-basic-01.svg pass.svg +== radialGradient-basic-02.svg pass.svg +fuzzy(0-1,0-5) fuzzy-if(winWidget,0-96,0-21713) skip-if(winWidget&&isCoverageBuild) fuzzy-if(Android&&device,0-4,0-946) == radialGradient-basic-03.svg radialGradient-basic-03-ref.html # Bug 1718175 (Win CCov: Bug 1740155) +== radialGradient-basic-04.svg pass.svg +== radialGradient-fr-01.svg pass.svg +fuzzy(0-1,0-3235) fuzzy-if(winWidget,0-1,0-7030) == radialGradient-fr-02.svg radialGradient-fr-02-ref.svg + +fuzzy(0-1,0-3600) == rect-01.svg pass.svg +== rect-02.svg pass.svg +== rect-03.svg pass.svg +== rect-04.svg pass.svg +== rect-with-rx-and-ry-01.svg pass.svg +== rect-with-rx-or-ry-01.svg rect-with-rx-or-ry-01-ref.svg + +== rootElement-null-01.svg pass.svg + +== script-empty-01.svg pass.svg + +== selector-01.svg pass.svg + +== stroke-dasharray-01.svg stroke-dasharray-01-ref.svg +fuzzy(0-1,0-340) == stroke-dasharray-02.svg pass.svg +fuzzy(0-1,0-340) == stroke-dasharray-03.svg pass.svg +== stroke-dasharray-and-pathLength-01.svg pass.svg +fails-if(useDrawSnapshot) == stroke-dasharray-and-text-01.svg stroke-dasharray-and-text-01-ref.svg +== stroke-dashoffset-01.svg pass.svg +== stroke-dashoffset-and-pathLength-01.svg pass.svg +== stroke-linecap-circle-ellipse-01.svg stroke-linecap-circle-ellipse-01-ref.svg +== stroke-linecap-circle-ellipse-dashed-01.svg pass.svg +== stroke-linecap-round-w-zero-length-segs-01.svg pass.svg +== stroke-linecap-round-w-zero-length-segs-02.svg pass.svg +== stroke-linecap-round-w-zero-length-segs-03.svg pass.svg +== stroke-linecap-square-w-zero-length-segs-01.svg pass.svg +== stroke-linecap-square-w-zero-length-segs-02.svg pass.svg +== stroke-width-percentage-01.svg pass.svg +== stroke-width-percentage-02a.svg stroke-width-percentage-02-ref.svg +== stroke-width-percentage-02b.svg stroke-width-percentage-02-ref.svg +== stroke-width-percentage-03.xhtml stroke-width-percentage-03-ref.xhtml + +== style-property-on-script-element-01.svg pass.svg +== style-without-type-attribute.svg pass.svg + +== svg-in-foreignObject-01.xhtml svg-in-foreignObject-01-ref.xhtml +fuzzy(0-1,0-2600) == svg-in-foreignObject-02.xhtml svg-in-foreignObject-01-ref.xhtml # reuse -01-ref.xhtml +== svg-in-inner-svg-dimensions.svg pass.svg +== switch-01.svg pass.svg + +== suspend-01.svg pass.svg +== suspend-02.svg pass.svg +== suspend-03.svg pass.svg +== suspend-04.svg pass.svg +== suspend-05.svg pass.svg +== suspend-06.svg pass.svg +== suspend-07.svg pass.svg +== suspend-08.svg pass.svg + +== svg-effects-area-unzoomed.xhtml svg-effects-area-unzoomed-ref.xhtml +== svg-effects-area-zoomed-in.xhtml svg-effects-area-zoomed-in-ref.xhtml +== svg-effects-area-zoomed-out.xhtml svg-effects-area-zoomed-out-ref.xhtml +== svg-transform-01.svg pass.svg +== svg-transform-02.svg pass.svg + +fuzzy(0-39,0-269) == symbol-01.svg symbol-01-ref.svg + +== text-font-size-01.svg pass.svg +== text-font-weight-01.svg text-font-weight-01-ref.svg +== text-gradient-01.svg text-gradient-01-ref.svg +random-if(winWidget) fuzzy-if(Android,0-10,0-2) == text-gradient-02.svg text-gradient-02-ref.svg # see bug 590101 +fuzzy(0-1,0-5500) == text-gradient-03.svg pass.svg +== text-gradient-04.svg text-gradient-04-ref.svg +== text-in-link-01.svg text-in-link-01-ref.svg +== text-in-link-02.svg text-in-link-02-ref.svg +== text-in-link-03.svg text-in-link-03-ref.svg +# Tests for bug 546813: sanity-check using HTML text, then test SVG behavior. +!= text-language-00.xhtml text-language-00-ref.xhtml +random-if(gtkWidget) != text-language-01.xhtml text-language-01-ref.xhtml # Fails on Linux tryserver due to lack of CJK fonts. +== text-layout-01.svg text-layout-01-ref.svg +== text-layout-02.svg text-layout-02-ref.svg +== text-layout-03.svg text-layout-03-ref.svg +== text-layout-04.svg text-layout-04-ref.svg +== text-layout-05.svg text-layout-05-ref.svg +fuzzy-if(cocoaWidget&&layersGPUAccelerated,0-1,0-3) == text-layout-06.svg text-layout-06-ref.svg +== text-layout-07.svg text-layout-07-ref.svg +== text-layout-08.svg text-layout-08-ref.svg +== text-layout-09.svg pass.svg +== text-layout-10.svg pass.svg # Bug 1392106 +== text-scale-01.svg text-scale-01-ref.svg +fuzzy(0-2,0-1000) == text-scale-02.svg text-scale-02-ref.svg +== text-scale-03.svg text-scale-03-ref.svg + +== text-style-01a.svg text-style-01-ref.svg +== text-style-01b.svg text-style-01-ref.svg +== text-style-01c.svg text-style-01-ref.svg +== text-style-01d.svg text-style-01-ref.svg +== text-style-01e.svg text-style-01-ref.svg + +== text-stroke-scaling-01.svg text-stroke-scaling-01-ref.svg +fuzzy(0-16,0-3) == text-stroke-scaling-02a.html text-stroke-scaling-02-ref.html # antialiasing +fuzzy(0-16,0-3) == text-stroke-scaling-02b.html text-stroke-scaling-02-ref.html # antialiasing +== text-stroke-scaling-02a.html text-stroke-scaling-02b.html +== textPath-01.svg textPath-01-ref.svg +== textPath-02.svg pass.svg +fuzzy(0-1,0-610) == textPath-03.svg pass.svg +== textPath-04.svg pass.svg +== textPath-05.html pass.svg +== textPath-06.svg pass.svg +== textPath-line-01.svg textPath-line-01-ref.svg +== textPath-path-attribute-01.svg textPath-path-attribute-01-ref.svg +== textPath-side-attribute-01.svg pass.svg + +== text-white-space-01.svg text-white-space-01-ref.svg + +== thin-stroke-01.svg pass.svg + +== transform-origin-presentation-01.svg pass.svg + +== transform-outer-svg-01.svg transform-outer-svg-01-ref.svg +== css-transform-svg.html css-transform-svg-ref.html + +== tspan-dxdy-01.svg tspan-dxdy-ref.svg +== tspan-dxdy-02.svg tspan-dxdy-ref.svg +== tspan-dxdy-03.svg tspan-dxdy-ref.svg +== tspan-dxdy-04.svg tspan-dxdy-ref.svg +== tspan-dxdy-05.svg tspan-dxdy-ref.svg +== tspan-dxdy-06.svg tspan-dxdy-ref.svg +== tspan-dxdy-textPath-01.svg tspan-dxdy-textPath-01-ref.svg +== tspan-rotate-01.svg tspan-rotate-ref.svg +fuzzy(0-1,0-550) == tspan-rotate-02.svg tspan-rotate-02.svg +fuzzy(0-1,0-550) == tspan-rotate-02.svg tspan-rotate-02-ref.svg +fuzzy(0-1,0-550) == tspan-rotate-03.svg tspan-rotate-ref.svg +fuzzy(0-1,0-550) == tspan-rotate-04.svg tspan-rotate-04.svg +fuzzy(0-1,0-550) == tspan-rotate-04.svg tspan-rotate-04-ref.svg +fuzzy(0-1,0-550) == tspan-rotate-05.svg tspan-rotate-ref.svg +fuzzy(0-1,0-550) == tspan-rotate-06.svg tspan-rotate-ref.svg +fuzzy(0-1,0-550) == tspan-rotate-07.svg tspan-rotate-07-ref.svg +== tspan-rotate-textPath-01.svg tspan-rotate-textPath-01-ref.svg +fuzzy(0-1,0-100) == tspan-xy-01.svg tspan-xy-ref.svg +== tspan-xy-02.svg tspan-xy-ref.svg +fuzzy(0-1,0-300) == tspan-xy-03.svg tspan-xy-ref.svg +fuzzy(0-1,0-300) == tspan-xy-04.svg tspan-xy-ref.svg +fuzzy(0-1,0-300) == tspan-xy-05.svg tspan-xy-ref.svg +fuzzy(0-1,0-300) == tspan-xy-06.svg tspan-xy-ref.svg +fuzzy(0-1,0-100) == tspan-xy-anchor-middle-01.svg tspan-xy-anchor-middle-ref.svg +fuzzy(0-1,0-100) == tspan-xy-anchor-end-01.svg tspan-xy-anchor-end-ref.svg + +pref(layout.css.devPixelsPerPx,"1.0") == svg-blurry-with-subpixel-position.html svg-blurry-with-subpixel-position-ref.html + +== use-01.svg pass.svg +== use-02.svg pass.svg +== use-01-extref.svg pass.svg +== use-02-extref.svg use-02-extref-ref.svg +pref(svg.use-element.data-url-href.allowed,true) == use-extref-dataURI-01.svg pass.svg +== use-children.svg pass.svg + +test-pref(svg.use-element.graphics-element-restrictions,0) == use-restrictions.svg use-restrictions-not-restricted-ref.svg +test-pref(svg.use-element.graphics-element-restrictions,1) != use-restrictions.svg use-restrictions-not-restricted-ref.svg +test-pref(svg.use-element.graphics-element-restrictions,1) ref-pref(svg.use-element.graphics-element-restrictions,2) != use-restrictions.svg use-restrictions.svg + +== use-element-shadow-tree-rule-matching.html pass.svg +== use-image-01.svg pass.svg + +# test case for Fragment URLs +# https://drafts.csswg.org/css-values/#local-urls +== use-localRef-marker-01.svg use-localRef-marker-01-ref.svg +== use-localRef-clipPath-01.svg use-localRef-clipPath-01-ref.svg +== use-localRef-filter-01.svg use-localRef-filter-01-ref.svg +== use-localRef-fill-01.svg use-localRef-fill-01-ref.svg +== use-localRef-link.html pass.svg +== use-localRef-stroke-01.svg use-localRef-stroke-01-ref.svg +== use-localRef-mask-01.svg use-localRef-mask-01-ref.svg + +== userSpaceOnUse-and-pattern-01.svg userSpaceOnUse-and-pattern-01-ref.svg + +== viewBox-and-pattern-01.svg pass.svg +== viewBox-and-pattern-02.svg pass.svg +== viewBox-and-pattern-03.svg pass.svg +== viewBox-and-pattern-04.svg pass.svg +== viewBox-and-symbol-01.svg pass.svg +== viewBox-invalid-01.svg pass.svg +== viewBox-invalid-02.svg pass.svg +== viewBox-valid-01.svg pass.svg +== viewBox-valid-02.xhtml pass.svg +== viewport-percent-graphic-user-01.svg pass.svg +== winding-01.svg pass.svg + +== zero-stroke-01.svg pass.svg + +# currentColor override by color attribute +== currentColor-override-flood.svg pass.svg +== currentColor-override-lighting.svg currentColor-override-lighting-ref.svg +== currentColor-override-stop.svg pass.svg + +defaults skip-if(ThreadSanitizer) + +== mask-invalidation.html mask-invalidation-ref.html +== filter-in-mask.html filter-in-mask-ref.html +== overflow-visible-image.html overflow-visible-image-ref.html + +# Shadow DOM id tracking. +skip-if(geckoview) == fragid-shadow-1.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(geckoview) == fragid-shadow-2.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(geckoview) == fragid-shadow-3.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(geckoview) == fragid-shadow-4.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(geckoview) == fragid-shadow-5.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(geckoview) == fragid-shadow-6.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(geckoview) == fragid-shadow-7.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(geckoview) == fragid-shadow-8.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(geckoview) == fragid-shadow-9.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(geckoview) == fragid-shadow-10.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 + +== mask-resource.html mask-resource-ref.html +fails-if(Android) != mask-resource.html about:blank # The image the test uses is not on Android + +!= bug-1562091.html bug-1562091-ref.html +== 1570363-1.html 1570363-1-ref.html + +fuzzy(0-1,0-150) == mask-opacity-invalidation-1.html mask-opacity-invalidation-1-ref.html # clip-path mask/opacity optimization +skip-if(Android) skip-if(cocoaWidget) skip-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)) == transform-animation-on-path.html transform-animation-on-path-ref.html #Bug 1638909 + +fuzzy(0-20,0-110) == 1792313.svg 1792313-ref.svg +pref(svg.use-element.recursive-clone-limit.enabled,1) != about:blank explosive-use.svg diff --git a/layout/reftests/svg/rootElement-null-01.svg b/layout/reftests/svg/rootElement-null-01.svg new file mode 100644 index 0000000000..2562bd1dcc --- /dev/null +++ b/layout/reftests/svg/rootElement-null-01.svg @@ -0,0 +1,29 @@ +<!-- + 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" + onload="handleLoad(evt);"> + + <title>Testcase for accessing null rootContent</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=365611 --> + + <script type="application/ecmascript"> + <![CDATA[ + +function handleLoad(event) +{ + var root = document.removeChild(document.documentElement); + if (document.documentElement == null) { // this shouldn't crash + document.appendChild(root); + document.getElementById('rect').setAttribute('fill', 'lime'); + } +} + + ]]> + </script> + + <rect id="rect" width="100%" height="100%" fill="red"/> + +</svg> diff --git a/layout/reftests/svg/script-empty-01.svg b/layout/reftests/svg/script-empty-01.svg new file mode 100644 index 0000000000..528f6a8aad --- /dev/null +++ b/layout/reftests/svg/script-empty-01.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <title>Testcase for that xlink:href attribute overrides script content</title> + + <rect id="r" width="100%" height="100%" fill="lime"/> + + <script xlink:href=""> + document.getElementById("r").style.fill = "red"; + </script> +</svg> diff --git a/layout/reftests/svg/selector-01.svg b/layout/reftests/svg/selector-01.svg new file mode 100644 index 0000000000..595d92ea43 --- /dev/null +++ b/layout/reftests/svg/selector-01.svg @@ -0,0 +1,19 @@ +<!-- + 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"> + + <title>Testcase for invalid text</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=477996 --> + + <defs> + <style type="text/css"> + [transform="scale(2)"] { fill: lime } + </style> + </defs> + <g fill="red"> + <rect transform="scale(2)" width="100%" height="100%" /> + </g> +</svg> diff --git a/layout/reftests/svg/sizing/ahem.css b/layout/reftests/svg/sizing/ahem.css new file mode 100644 index 0000000000..5cea74d04f --- /dev/null +++ b/layout/reftests/svg/sizing/ahem.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "Ahem"; + src: url(../../fonts/Ahem.ttf); +} diff --git a/layout/reftests/svg/sizing/canvas-drawImage-height-with-no-width-ref.html b/layout/reftests/svg/sizing/canvas-drawImage-height-with-no-width-ref.html new file mode 100644 index 0000000000..f68abfeecf --- /dev/null +++ b/layout/reftests/svg/sizing/canvas-drawImage-height-with-no-width-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<script src="svg-image-util.js"></script> +<style> + canvas { + background: blue; + } +</style> +<body> + <script> + let viewBoxes = [null, "0 0 50 50", "0 0 50 20"]; + let promises = []; + for (viewBox of viewBoxes) { + // Without a given width or height the svg should be sized as if a width + // of 300px and height of 150px were given. + promises.push(generateCanvasDrawImageSVG("350", "200", "300px", "200px", viewBox)); + } + Promise.all(promises).then(() => { document.documentElement.className = "" }); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/sizing/canvas-drawImage-height-with-no-width.html b/layout/reftests/svg/sizing/canvas-drawImage-height-with-no-width.html new file mode 100644 index 0000000000..da4f20a2f9 --- /dev/null +++ b/layout/reftests/svg/sizing/canvas-drawImage-height-with-no-width.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<script src="svg-image-util.js"></script> +<style> + canvas { + background: blue; + } +</style> +<body> + <script> + let viewBoxes = [null, "0 0 50 50", "0 0 50 20"]; + let promises = []; + for (viewBox of viewBoxes) { + // Without a given width or height the svg should be sized as if a width + // of 300px and height of 150px were given. + promises.push(generateCanvasDrawImageSVG("350", "200", null, "200px", viewBox)); + } + Promise.all(promises).then(() => { document.documentElement.className = "" }); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/sizing/canvas-drawImage-no-width-or-height-ref.html b/layout/reftests/svg/sizing/canvas-drawImage-no-width-or-height-ref.html new file mode 100644 index 0000000000..045d626743 --- /dev/null +++ b/layout/reftests/svg/sizing/canvas-drawImage-no-width-or-height-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<script src="svg-image-util.js"></script> +<style> + canvas { + background: blue; + } +</style> +<body> + <script> + let viewBoxes = [null, "0 0 50 50", "0 0 50 20"]; + let promises = []; + for (viewBox of viewBoxes) { + promises.push(generateCanvasDrawImageSVG("350", "200", "300px", "150px", viewBox)); + } + Promise.all(promises).then(() => { document.documentElement.className = "" }); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/sizing/canvas-drawImage-no-width-or-height.html b/layout/reftests/svg/sizing/canvas-drawImage-no-width-or-height.html new file mode 100644 index 0000000000..e5bc8c16ca --- /dev/null +++ b/layout/reftests/svg/sizing/canvas-drawImage-no-width-or-height.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<script src="svg-image-util.js"></script> +<style> + canvas { + background: blue; + } +</style> +<body> + <script> + let viewBoxes = [null, "0 0 50 50", "0 0 50 20"]; + let promises = []; + for (viewBox of viewBoxes) { + // Without a given width or height the svg should be sized as if a width + // of 300px and height of 150px were given. + promises.push(generateCanvasDrawImageSVG("350", "200", null, null, viewBox)); + } + Promise.all(promises).then(() => { document.documentElement.className = "" }); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/sizing/canvas-drawImage-width-with-no-height-ref.html b/layout/reftests/svg/sizing/canvas-drawImage-width-with-no-height-ref.html new file mode 100644 index 0000000000..24d91d32c4 --- /dev/null +++ b/layout/reftests/svg/sizing/canvas-drawImage-width-with-no-height-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<script src="svg-image-util.js"></script> +<style> + canvas { + background: blue; + } +</style> +<body> + <script> + let viewBoxes = [null, "0 0 50 50", "0 0 50 20"]; + let promises = []; + for (viewBox of viewBoxes) { + // Without a given width or height the svg should be sized as if a width + // of 300px and height of 150px were given. + promises.push(generateCanvasDrawImageSVG("350", "200", "200px", "150px", viewBox)); + } + Promise.all(promises).then(() => { document.documentElement.className = "" }); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/sizing/canvas-drawImage-width-with-no-height.html b/layout/reftests/svg/sizing/canvas-drawImage-width-with-no-height.html new file mode 100644 index 0000000000..7a4452face --- /dev/null +++ b/layout/reftests/svg/sizing/canvas-drawImage-width-with-no-height.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<script src="svg-image-util.js"></script> +<style> + canvas { + background: blue; + } +</style> +<body> + <script> + let viewBoxes = [null, "0 0 50 50", "0 0 50 20"]; + let promises = []; + for (viewBox of viewBoxes) { + // Without a given width or height the svg should be sized as if a width + // of 300px and height of 150px were given. + promises.push(generateCanvasDrawImageSVG("350", "200", "200px", null, viewBox)); + } + Promise.all(promises).then(() => { document.documentElement.className = "" }); + </script> + <!-- Body gets populated by script --> +</body> +</html> diff --git a/layout/reftests/svg/sizing/dynamic--inline-css-height.xhtml b/layout/reftests/svg/sizing/dynamic--inline-css-height.xhtml new file mode 100644 index 0000000000..2abf3a32b1 --- /dev/null +++ b/layout/reftests/svg/sizing/dynamic--inline-css-height.xhtml @@ -0,0 +1,49 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: change CSS 'height' property on inline SVG</title>
+
+ <!--
+ This testcase checks that when the value of the CSS 'height' property on
+ inline SVG is changed, the SVG resizes as expected.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background: red;
+}
+
+ </style>
+ <script type="text/javascript">
+
+function resize_svg()
+{
+ document.getElementById('svg').style.height = '100%';
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", resize_svg, false);
+
+ </script>
+ </head>
+ <body>
+
+ <svg id="svg" xmlns="http://www.w3.org/2000/svg"
+ style="display:block; width:100%; height:0;" width="0" height="0">
+ <rect width="100%" height="100%" fill="lime"/>
+ </svg>
+
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/dynamic--inline-css-width.xhtml b/layout/reftests/svg/sizing/dynamic--inline-css-width.xhtml new file mode 100644 index 0000000000..b23407b6dc --- /dev/null +++ b/layout/reftests/svg/sizing/dynamic--inline-css-width.xhtml @@ -0,0 +1,49 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: change CSS 'width' property on inline SVG</title>
+
+ <!--
+ This testcase checks that when the value of the CSS 'width' property on
+ inline SVG is changed, the SVG resizes as expected.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background: red;
+}
+
+ </style>
+ <script type="text/javascript">
+
+function resize_svg()
+{
+ document.getElementById('svg').style.width = '100%';
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", resize_svg, false);
+
+ </script>
+ </head>
+ <body>
+
+ <svg id="svg" xmlns="http://www.w3.org/2000/svg"
+ style="display:block; width:0; height:100%;" width="0" height="0">
+ <rect width="100%" height="100%" fill="lime"/>
+ </svg>
+
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/dynamic--inline-resize-window-height.xhtml b/layout/reftests/svg/sizing/dynamic--inline-resize-window-height.xhtml new file mode 100644 index 0000000000..3091947d88 --- /dev/null +++ b/layout/reftests/svg/sizing/dynamic--inline-resize-window-height.xhtml @@ -0,0 +1,52 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: resize of window height</title>
+
+ <!--
+ This testcase checks that SVG embedded inline with a percentage height is
+ updated correctly when the window is resized.
+ -->
+
+ <style type="text/css">
+
+html, body, div {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background: red;
+ overflow: hidden;
+}
+
+ </style>
+ <script type="text/javascript">
+
+var initial_height = top.innerHeight;
+top.innerHeight /= 2;
+
+function restore_height()
+{
+ top.innerHeight = initial_height;
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", restore_height, false);
+
+ </script>
+ </head>
+ <body>
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="5000" height="100%">
+ <rect width="100%" height="100%" fill="lime"/>
+ </svg>
+
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/dynamic--inline-resize-window-width.xhtml b/layout/reftests/svg/sizing/dynamic--inline-resize-window-width.xhtml new file mode 100644 index 0000000000..dbf0c87620 --- /dev/null +++ b/layout/reftests/svg/sizing/dynamic--inline-resize-window-width.xhtml @@ -0,0 +1,52 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: resize of window width</title>
+
+ <!--
+ This testcase checks that SVG embedded inline with a percentage width is
+ updated correctly when the window is resized.
+ -->
+
+ <style type="text/css">
+
+html, body, div {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background: red;
+ overflow: hidden;
+}
+
+ </style>
+ <script type="text/javascript">
+
+var initial_width = top.innerWidth;
+top.innerWidth /= 2;
+
+function restore_width()
+{
+ top.innerWidth = initial_width;
+ document.documentElement.removeAttribute('class');
+}
+
+document.addEventListener("MozReftestInvalidate", restore_width, false);
+
+ </script>
+ </head>
+ <body onload="restore_width()">
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="5000">
+ <rect width="100%" height="100%" fill="lime"/>
+ </svg>
+
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/dynamic--object--auto-auto--pct-px.html b/layout/reftests/svg/sizing/dynamic--object--auto-auto--pct-px.html new file mode 100644 index 0000000000..1fbecb0dc7 --- /dev/null +++ b/layout/reftests/svg/sizing/dynamic--object--auto-auto--pct-px.html @@ -0,0 +1,43 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="49%" height="70px"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic
+ height of the embedded SVG, but ignores the percentage width. Since
+ the intrinsic height is 70px, you should see a blue rectangle 300px
+ (the magic default) wide by 70px high when viewing this file. You
+ should not see any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--pct-px.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/dynamic--object-svg-unloaded-a.svg b/layout/reftests/svg/sizing/dynamic--object-svg-unloaded-a.svg new file mode 100644 index 0000000000..8ee8e25709 --- /dev/null +++ b/layout/reftests/svg/sizing/dynamic--object-svg-unloaded-a.svg @@ -0,0 +1,40 @@ +<!--
+ 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="70" height="70"
+ onload="handle_load(evt);">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by dynamic--object-svg-unloaded.xhtml</title>
+
+ <script type="text/javascript">
+
+var embedding_element;
+
+function handle_load(e)
+{
+ embedding_element = e.originalTarget.ownerDocument.defaultView.frameElement;
+ top.document.addEventListener("MozReftestInvalidate", load_new_page, false);
+}
+
+function load_new_page()
+{
+ // We could set embedding_element.data to load the new page, but that:
+ //
+ // a) Crashes if we don't use setTimeout
+ //
+ // b) Actually works, perhaps because it takes a different code path to the
+ // path that's taken when a user clicks on a link in the embedded SVG
+ //
+ // For these reasons we set document.location.href on the SVG document.
+
+ document.location.href = 'dynamic--object-svg-unloaded-b.xhtml';
+}
+
+ </script>
+
+ <rect width="100%" height="100%" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/dynamic--object-svg-unloaded-b.xhtml b/layout/reftests/svg/sizing/dynamic--object-svg-unloaded-b.xhtml new file mode 100644 index 0000000000..7ed4c539ce --- /dev/null +++ b/layout/reftests/svg/sizing/dynamic--object-svg-unloaded-b.xhtml @@ -0,0 +1,37 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by dynamic--object-svg-unloaded.xhtml</title>
+
+ <style type="text/css">
+
+html {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ background: lime;
+}
+
+ </style>
+
+ <script type="text/javascript">
+
+var embedding_element;
+
+function handle_load(e)
+{
+ embedding_element = e.originalTarget.defaultView.frameElement;
+ embedding_element.ownerDocument.documentElement.removeAttribute('class');
+}
+
+ </script>
+
+ </head>
+ <body onload="handle_load(event);" style="display:none;"></body>
+</html>
diff --git a/layout/reftests/svg/sizing/dynamic--object-svg-unloaded.xhtml b/layout/reftests/svg/sizing/dynamic--object-svg-unloaded.xhtml new file mode 100644 index 0000000000..6095e7cb18 --- /dev/null +++ b/layout/reftests/svg/sizing/dynamic--object-svg-unloaded.xhtml @@ -0,0 +1,48 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: object should resize when SVG is unloaded</title>
+
+ <!--
+ This testcase checks that HTML <object> will resize correctly if it depends
+ on the intrinsic size of some embedded SVG, and then the SVG is replaced by
+ some other content (perhaps as a result of a link in the SVG being
+ clicked).
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background: lime;
+}
+
+object {
+ background: red;
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+
+ </style>
+ </head>
+ <body>
+
+ <div style="width:300px; height:150px; background:red;"></div>
+
+ <object data="dynamic--object-svg-unloaded-a.svg" type="image/svg+xml">
+ FAIL
+ </object>
+
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--display-block--01-ref.xhtml b/layout/reftests/svg/sizing/inline--display-block--01-ref.xhtml new file mode 100644 index 0000000000..f258873729 --- /dev/null +++ b/layout/reftests/svg/sizing/inline--display-block--01-ref.xhtml @@ -0,0 +1,40 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test inline--display-block--01.xhtml</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <div style="width:51px; height:51px; background:blue; display:block; padding:0; border:1px solid blue; margin:0;">
+ </div>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--display-block--01.xhtml b/layout/reftests/svg/sizing/inline--display-block--01.xhtml new file mode 100644 index 0000000000..4b8cbe4266 --- /dev/null +++ b/layout/reftests/svg/sizing/inline--display-block--01.xhtml @@ -0,0 +1,47 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: display:block with width="51" height="51"</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ <!--
+ This testcase checks that SVG embedded inline with display:block is
+ positioned correctly.
+ -->
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="51" height="51"
+ style="display:block; padding:0; border:1px solid blue; margin:0;">
+ <rect width="100%" height="100%" fill="blue"/>
+ </svg>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--display-inline--01-ref.xhtml b/layout/reftests/svg/sizing/inline--display-inline--01-ref.xhtml new file mode 100644 index 0000000000..65cb6542ba --- /dev/null +++ b/layout/reftests/svg/sizing/inline--display-inline--01-ref.xhtml @@ -0,0 +1,40 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test inline--display-inline--01.xhtml</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <img src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAIAAAACAAICAAAAAgIAAgACAgICAgMDAwP8AAAD%2FAP%2F%2FAAAA%2F%2F8A%2FwD%2F%2F%2F%2F%2F%2FwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMwAAZgAAmQAAzAAA%2FwAzAAAzMwAzZgAzmQAzzAAz%2FwBmAABmMwBmZgBmmQBmzABm%2FwCZAACZMwCZZgCZmQCZzACZ%2FwDMAADMMwDMZgDMmQDMzADM%2FwD%2FAAD%2FMwD%2FZgD%2FmQD%2FzAD%2F%2FzMAADMAMzMAZjMAmTMAzDMA%2FzMzADMzMzMzZjMzmTMzzDMz%2FzNmADNmMzNmZjNmmTNmzDNm%2FzOZADOZMzOZZjOZmTOZzDOZ%2FzPMADPMMzPMZjPMmTPMzDPM%2FzP%2FADP%2FMzP%2FZjP%2FmTP%2FzDP%2F%2F2YAAGYAM2YAZmYAmWYAzGYA%2F2YzAGYzM2YzZmYzmWYzzGYz%2F2ZmAGZmM2ZmZmZmmWZmzGZm%2F2aZAGaZM2aZZmaZmWaZzGaZ%2F2bMAGbMM2bMZmbMmWbMzGbM%2F2b%2FAGb%2FM2b%2FZmb%2FmWb%2FzGb%2F%2F5kAAJkAM5kAZpkAmZkAzJkA%2F5kzAJkzM5kzZpkzmZkzzJkz%2F5lmAJlmM5lmZplmmZlmzJlm%2F5mZAJmZM5mZZpmZmZmZzJmZ%2F5nMAJnMM5nMZpnMmZnMzJnM%2F5n%2FAJn%2FM5n%2FZpn%2FmZn%2FzJn%2F%2F8wAAMwAM8wAZswAmcwAzMwA%2F8wzAMwzM8wzZswzmcwzzMwz%2F8xmAMxmM8xmZsxmmcxmzMxm%2F8yZAMyZM8yZZsyZmcyZzMyZ%2F8zMAMzMM8zMZszMmczMzMzM%2F8z%2FAMz%2FM8z%2FZsz%2Fmcz%2FzMz%2F%2F%2F8AAP8AM%2F8AZv8Amf8AzP8A%2F%2F8zAP8zM%2F8zZv8zmf8zzP8z%2F%2F9mAP9mM%2F9mZv9mmf9mzP9m%2F%2F%2BZAP%2BZM%2F%2BZZv%2BZmf%2BZzP%2BZ%2F%2F%2FMAP%2FMM%2F%2FMZv%2FMmf%2FMzP%2FM%2F%2F%2F%2FAP%2F%2FM%2F%2F%2FZv%2F%2Fmf%2F%2FzP%2F%2F%2FywAAAAAAQABAAAIBAAZBAQAOw%3D%3D"
+ style="width:51px; height:51px; display:inline; padding:0; border:1px solid blue; margin:0;"/>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--display-inline--01.xhtml b/layout/reftests/svg/sizing/inline--display-inline--01.xhtml new file mode 100644 index 0000000000..5139f6e477 --- /dev/null +++ b/layout/reftests/svg/sizing/inline--display-inline--01.xhtml @@ -0,0 +1,47 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: display:inline with width="51" height="51"</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ <!--
+ This testcase checks that SVG embedded inline with display:inline is
+ positioned correctly.
+ -->
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="51" height="51"
+ style="display:inline; padding:0; border:1px solid blue; margin:0;">
+ <rect width="100%" height="100%" fill="blue"/>
+ </svg>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--display-inline-block--01-ref.xhtml b/layout/reftests/svg/sizing/inline--display-inline-block--01-ref.xhtml new file mode 100644 index 0000000000..93cb2d1ddf --- /dev/null +++ b/layout/reftests/svg/sizing/inline--display-inline-block--01-ref.xhtml @@ -0,0 +1,40 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test inline--display-inline-block--01.xhtml</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <div style="width:51px; height:51px; background:blue; display:inline-block; padding:0; border:1px solid blue; margin:0;">
+ </div>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--display-inline-block--01.xhtml b/layout/reftests/svg/sizing/inline--display-inline-block--01.xhtml new file mode 100644 index 0000000000..f2f9a84812 --- /dev/null +++ b/layout/reftests/svg/sizing/inline--display-inline-block--01.xhtml @@ -0,0 +1,47 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: display:inline-block with width="51" height="51"</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ <!--
+ This testcase checks that SVG embedded inline with display:inline-block is
+ positioned correctly.
+ -->
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="51" height="51"
+ style="display:inline-block; padding:0; border:1px solid blue; margin:0;">
+ <rect width="100%" height="100%" fill="blue"/>
+ </svg>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--float-left--01-ref.xhtml b/layout/reftests/svg/sizing/inline--float-left--01-ref.xhtml new file mode 100644 index 0000000000..f46dc85919 --- /dev/null +++ b/layout/reftests/svg/sizing/inline--float-left--01-ref.xhtml @@ -0,0 +1,39 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test inline--float-left--01.xhtml</title>
+
+ </head>
+ <body>
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <div style="width:51px; height:51px; background:blue; float:left; padding:0; border:1px solid blue; margin:0;">
+ </div>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--float-left--01.xhtml b/layout/reftests/svg/sizing/inline--float-left--01.xhtml new file mode 100644 index 0000000000..f575db2e74 --- /dev/null +++ b/layout/reftests/svg/sizing/inline--float-left--01.xhtml @@ -0,0 +1,46 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: float:left with width="51" height="51"</title>
+
+ <!--
+ This testcase checks that SVG embedded inline with float:left is
+ positioned correctly.
+ -->
+
+ </head>
+ <body>
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="51" height="51"
+ style="float:left; padding:0; border:1px solid blue; margin:0;">
+ <rect width="100%" height="100%" fill="blue"/>
+ </svg>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--float-right--01-ref.xhtml b/layout/reftests/svg/sizing/inline--float-right--01-ref.xhtml new file mode 100644 index 0000000000..1803862f9e --- /dev/null +++ b/layout/reftests/svg/sizing/inline--float-right--01-ref.xhtml @@ -0,0 +1,39 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test inline--float-right--01.xhtml</title>
+
+ </head>
+ <body>
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <div style="width:51px; height:51px; background:blue; float:right; padding:0; border:1px solid blue; margin:0;">
+ </div>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--float-right--01.xhtml b/layout/reftests/svg/sizing/inline--float-right--01.xhtml new file mode 100644 index 0000000000..1054c1b62f --- /dev/null +++ b/layout/reftests/svg/sizing/inline--float-right--01.xhtml @@ -0,0 +1,46 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: float:right with width="51" height="51"</title>
+
+ <!--
+ This testcase checks that SVG embedded inline with float:right is
+ positioned correctly.
+ -->
+
+ </head>
+ <body>
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="51" height="51"
+ style="float:right; padding:0; border:1px solid blue; margin:0;">
+ <rect width="100%" height="100%" fill="blue"/>
+ </svg>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--position-absolute--01-ref.xhtml b/layout/reftests/svg/sizing/inline--position-absolute--01-ref.xhtml new file mode 100644 index 0000000000..24464c520a --- /dev/null +++ b/layout/reftests/svg/sizing/inline--position-absolute--01-ref.xhtml @@ -0,0 +1,39 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test inline--position-absolute--01.xhtml</title>
+
+ </head>
+ <body>
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <div style="width:51px; height:51px; background:blue; position:absolute; top:51px; right:51px; padding:0; border:1px solid blue; margin:0;">
+ </div>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--position-absolute--01.xhtml b/layout/reftests/svg/sizing/inline--position-absolute--01.xhtml new file mode 100644 index 0000000000..370a9bc438 --- /dev/null +++ b/layout/reftests/svg/sizing/inline--position-absolute--01.xhtml @@ -0,0 +1,46 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: position:absolute with width="51" height="51"</title>
+
+ <!--
+ This testcase checks that SVG embedded inline with position:absolute is
+ positioned correctly.
+ -->
+
+ </head>
+ <body>
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="51" height="51"
+ style="position:absolute; top:51px; right:51px; padding:0; border:1px solid blue; margin:0;">
+ <rect width="100%" height="100%" fill="blue"/>
+ </svg>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--position-absolute--02.xhtml b/layout/reftests/svg/sizing/inline--position-absolute--02.xhtml new file mode 100644 index 0000000000..a9f7a2b7ed --- /dev/null +++ b/layout/reftests/svg/sizing/inline--position-absolute--02.xhtml @@ -0,0 +1,50 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=342532 -->
+
+ <title>Test: percentage height on absolutely positioned SVG</title>
+
+ <!--
+ This testcase checks that percentage values for height on absolutely
+ positioned SVG will be computed relative to their containing block, and
+ not relative to the content area of the user agent.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ height: 100%;
+ background: lime;
+}
+
+ </style>
+ </head>
+ <body>
+
+ <!-- create containing block for absolutely positioned children -->
+ <div style="position:relative;">
+
+ <!-- div to expand parent div to a computed height of 20px -->
+ <div style="height:20px; background:red;"/>
+
+ <!-- absolutely positioned SVG - the explicit 100% percentage height
+ should compute as a percentage of the parent div's computed height,
+ not as a percentage of the body's height! I.e. no red should show.
+ -->
+ <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute; top:0; width: 100%; height: 100%">
+ <rect width="100%" height="100%" fill="red"/>
+ <rect width="100%" height="20px" fill="lime"/>
+ </svg>
+
+ </div>
+
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--position-relative--01-ref.xhtml b/layout/reftests/svg/sizing/inline--position-relative--01-ref.xhtml new file mode 100644 index 0000000000..dd7cff1e18 --- /dev/null +++ b/layout/reftests/svg/sizing/inline--position-relative--01-ref.xhtml @@ -0,0 +1,40 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test inline--position-relative--01.xhtml</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <img src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAIAAAACAAICAAAAAgIAAgACAgICAgMDAwP8AAAD%2FAP%2F%2FAAAA%2F%2F8A%2FwD%2F%2F%2F%2F%2F%2FwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMwAAZgAAmQAAzAAA%2FwAzAAAzMwAzZgAzmQAzzAAz%2FwBmAABmMwBmZgBmmQBmzABm%2FwCZAACZMwCZZgCZmQCZzACZ%2FwDMAADMMwDMZgDMmQDMzADM%2FwD%2FAAD%2FMwD%2FZgD%2FmQD%2FzAD%2F%2FzMAADMAMzMAZjMAmTMAzDMA%2FzMzADMzMzMzZjMzmTMzzDMz%2FzNmADNmMzNmZjNmmTNmzDNm%2FzOZADOZMzOZZjOZmTOZzDOZ%2FzPMADPMMzPMZjPMmTPMzDPM%2FzP%2FADP%2FMzP%2FZjP%2FmTP%2FzDP%2F%2F2YAAGYAM2YAZmYAmWYAzGYA%2F2YzAGYzM2YzZmYzmWYzzGYz%2F2ZmAGZmM2ZmZmZmmWZmzGZm%2F2aZAGaZM2aZZmaZmWaZzGaZ%2F2bMAGbMM2bMZmbMmWbMzGbM%2F2b%2FAGb%2FM2b%2FZmb%2FmWb%2FzGb%2F%2F5kAAJkAM5kAZpkAmZkAzJkA%2F5kzAJkzM5kzZpkzmZkzzJkz%2F5lmAJlmM5lmZplmmZlmzJlm%2F5mZAJmZM5mZZpmZmZmZzJmZ%2F5nMAJnMM5nMZpnMmZnMzJnM%2F5n%2FAJn%2FM5n%2FZpn%2FmZn%2FzJn%2F%2F8wAAMwAM8wAZswAmcwAzMwA%2F8wzAMwzM8wzZswzmcwzzMwz%2F8xmAMxmM8xmZsxmmcxmzMxm%2F8yZAMyZM8yZZsyZmcyZzMyZ%2F8zMAMzMM8zMZszMmczMzMzM%2F8z%2FAMz%2FM8z%2FZsz%2Fmcz%2FzMz%2F%2F%2F8AAP8AM%2F8AZv8Amf8AzP8A%2F%2F8zAP8zM%2F8zZv8zmf8zzP8z%2F%2F9mAP9mM%2F9mZv9mmf9mzP9m%2F%2F%2BZAP%2BZM%2F%2BZZv%2BZmf%2BZzP%2BZ%2F%2F%2FMAP%2FMM%2F%2FMZv%2FMmf%2FMzP%2FM%2F%2F%2F%2FAP%2F%2FM%2F%2F%2FZv%2F%2Fmf%2F%2FzP%2F%2F%2FywAAAAAAQABAAAIBAAZBAQAOw%3D%3D"
+ style="width:51px; height:51px; display:inline; position:relative; top:51px; right:51px; padding:0; border:1px solid blue; margin:0;"/>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/inline--position-relative--01.xhtml b/layout/reftests/svg/sizing/inline--position-relative--01.xhtml new file mode 100644 index 0000000000..0e4c334fd1 --- /dev/null +++ b/layout/reftests/svg/sizing/inline--position-relative--01.xhtml @@ -0,0 +1,47 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: position:relative with width="51" height="51"</title>
+ <link rel="stylesheet" type="text/css" href="ahem.css" />
+
+ <!--
+ This testcase checks that SVG embedded inline with position:relative is
+ positioned correctly.
+ -->
+
+ </head>
+ <body style="font: 10px/12px Ahem">
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+
+ <svg xmlns="http://www.w3.org/2000/svg" width="51" height="51"
+ style="position:relative; top:51px; right:51px; padding:0; border:1px solid blue; margin:0;">
+ <rect width="100%" height="100%" fill="blue"/>
+ </svg>
+
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ Padding text. Padding text. Padding text. Padding text. Padding text.
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-0.html b/layout/reftests/svg/sizing/object--auto-auto--0-0.html new file mode 100644 index 0000000000..4601a0c37a --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--0-0.html @@ -0,0 +1,42 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="0" height="0"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic width and
+ height of the embedded SVG. Since the intrinsic width and height are both
+ zero, you should not see any red when viewing this file.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ border: 0;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--0-0.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-0.svg b/layout/reftests/svg/sizing/object--auto-auto--0-0.svg new file mode 100644 index 0000000000..fa0eddd82c --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--0-0.svg @@ -0,0 +1,13 @@ +<!--
+ 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="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--0-0.html</title>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-pct--ref.html b/layout/reftests/svg/sizing/object--auto-auto--0-pct--ref.html new file mode 100644 index 0000000000..1dff62fda5 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--0-pct--ref.html @@ -0,0 +1,37 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--0-pct.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ width: 0;
+ height: 150px;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-pct.html b/layout/reftests/svg/sizing/object--auto-auto--0-pct.html new file mode 100644 index 0000000000..92e266e5fd --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--0-pct.html @@ -0,0 +1,44 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="0" height="49%"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic
+ width of the embedded SVG but ignores the (percentage) height.
+ Since the intrinsic width is zero, you should see a 1px blue border
+ around rectangle 0px wide by 150px high when viewing this file. You
+ should not see any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--0-pct.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-pct.svg b/layout/reftests/svg/sizing/object--auto-auto--0-pct.svg new file mode 100644 index 0000000000..e955c400f0 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--0-pct.svg @@ -0,0 +1,13 @@ +<!--
+ 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="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--0-pct.html</title>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-px--ref.html b/layout/reftests/svg/sizing/object--auto-auto--0-px--ref.html new file mode 100644 index 0000000000..5c44bf52b6 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--0-px--ref.html @@ -0,0 +1,37 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--0-px.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ width: 0;
+ height: 70px;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-px.html b/layout/reftests/svg/sizing/object--auto-auto--0-px.html new file mode 100644 index 0000000000..ec0d8d694e --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--0-px.html @@ -0,0 +1,44 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="0" height="70px"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic width and
+ height of the embedded SVG. Since the intrinsic width is zero and the
+ intrinsic height is 70px, you should see a 1px blue border around a
+ rectangle 0px wide by 70px high when viewing this file. You should not see
+ any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--0-px.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--0-px.svg b/layout/reftests/svg/sizing/object--auto-auto--0-px.svg new file mode 100644 index 0000000000..0b4b0984d4 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--0-px.svg @@ -0,0 +1,13 @@ +<!--
+ 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="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--0-px.html</title>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-0--ref.html b/layout/reftests/svg/sizing/object--auto-auto--pct-0--ref.html new file mode 100644 index 0000000000..257ff52684 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--pct-0--ref.html @@ -0,0 +1,37 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--pct-0.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ width: 300px;
+ height: 0;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-0.html b/layout/reftests/svg/sizing/object--auto-auto--pct-0.html new file mode 100644 index 0000000000..231d4e4b3c --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--pct-0.html @@ -0,0 +1,44 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="49%" height="0"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic
+ height of the embedded SVG, but ignores the percentage intrinsic
+ width. Since the intrinsic height is zero, you should see a 1px blue
+ border around a rectangle 300px wide by 0px high when viewing this
+ file. You should not see any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--pct-0.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-0.svg b/layout/reftests/svg/sizing/object--auto-auto--pct-0.svg new file mode 100644 index 0000000000..d460c2fa69 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--pct-0.svg @@ -0,0 +1,13 @@ +<!--
+ 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="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--pct-0.html</title>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-pct--ref.html b/layout/reftests/svg/sizing/object--auto-auto--pct-pct--ref.html new file mode 100644 index 0000000000..8e9ae6f878 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--pct-pct--ref.html @@ -0,0 +1,38 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--pct-pct.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 0;
+ margin: 50px;
+ width: 49%;
+ height: 49%;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-pct.html b/layout/reftests/svg/sizing/object--auto-auto--pct-pct.html new file mode 100644 index 0000000000..3d05e12c41 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--pct-pct.html @@ -0,0 +1,42 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="49%" height="49%"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic width and
+ height of the embedded SVG. Since the intrinsic width and height are both
+ 49%, you should see a blue rectangle 49% wide by 49% high when viewing this
+ file. You should not see any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--pct-pct.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-pct.svg b/layout/reftests/svg/sizing/object--auto-auto--pct-pct.svg new file mode 100644 index 0000000000..c96b04a738 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--pct-pct.svg @@ -0,0 +1,13 @@ +<!--
+ 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="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--pct-pct.html</title>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-px--ref.html b/layout/reftests/svg/sizing/object--auto-auto--pct-px--ref.html new file mode 100644 index 0000000000..af3fa39a7d --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--pct-px--ref.html @@ -0,0 +1,38 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--pct-px.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 0;
+ margin: 50px;
+ width: 49%;
+ height: 70px;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-px.html b/layout/reftests/svg/sizing/object--auto-auto--pct-px.html new file mode 100644 index 0000000000..d711e1bda1 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--pct-px.html @@ -0,0 +1,42 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="49%" height="70px"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic width and
+ height of the embedded SVG. Since the intrinsic width is 49% and the
+ intrinsic height is 70px, you should see a blue rectangle 49% wide by 70px
+ high when viewing this file. You should not see any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--pct-px.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--pct-px.svg b/layout/reftests/svg/sizing/object--auto-auto--pct-px.svg new file mode 100644 index 0000000000..41fe8bd1d7 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--pct-px.svg @@ -0,0 +1,13 @@ +<!--
+ 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="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--pct-px.html</title>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-0--ref.html b/layout/reftests/svg/sizing/object--auto-auto--px-0--ref.html new file mode 100644 index 0000000000..19a3ac08a6 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--px-0--ref.html @@ -0,0 +1,37 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--px-0.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ width: 70px;
+ height: 0;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-0.html b/layout/reftests/svg/sizing/object--auto-auto--px-0.html new file mode 100644 index 0000000000..9bdd4ed4a1 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--px-0.html @@ -0,0 +1,42 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="70px" height="0"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic width and
+ height of the embedded SVG. Since the intrinsic width is 70px and the
+ intrinsic height is zero, you should see a 1px blue border around a
+ rectangle 70px wide by 0px high when viewing this file. You should not see
+ any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+}
+
+object {
+ padding: 0;
+ border: 1px solid blue;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--px-0.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-0.svg b/layout/reftests/svg/sizing/object--auto-auto--px-0.svg new file mode 100644 index 0000000000..9e0c2b1cf7 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--px-0.svg @@ -0,0 +1,13 @@ +<!--
+ 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="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--px-0.html</title>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-pct--ref.html b/layout/reftests/svg/sizing/object--auto-auto--px-pct--ref.html new file mode 100644 index 0000000000..7464351dd5 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--px-pct--ref.html @@ -0,0 +1,38 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--px-pct.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 0;
+ margin: 50px;
+ width: 70px;
+ height: 49%;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-pct.html b/layout/reftests/svg/sizing/object--auto-auto--px-pct.html new file mode 100644 index 0000000000..3d1591077e --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--px-pct.html @@ -0,0 +1,42 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="70px" height="49%"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic width and
+ height of the embedded SVG. Since the intrinsic width is 70px and the
+ intrinsic height is 49%, you should see a blue rectangle 70px wide by 49%
+ high when viewing this file. You should not see any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--px-pct.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-pct.svg b/layout/reftests/svg/sizing/object--auto-auto--px-pct.svg new file mode 100644 index 0000000000..b409562ac3 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--px-pct.svg @@ -0,0 +1,13 @@ +<!--
+ 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="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--px-pct.html</title>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-px--ref.html b/layout/reftests/svg/sizing/object--auto-auto--px-px--ref.html new file mode 100644 index 0000000000..8f7b4ff769 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--px-px--ref.html @@ -0,0 +1,38 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Reference for test object--auto-auto--px-px.html</title>
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ /* XXX Not sure why we get scrolling with 'div' but not 'object'. */
+ overflow: hidden;
+}
+
+div {
+ padding: 0;
+ border: 0;
+ margin: 50px;
+ width: 70px;
+ height: 70px;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body>
+ <div></div>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-px.html b/layout/reftests/svg/sizing/object--auto-auto--px-px.html new file mode 100644 index 0000000000..7cb3011b4a --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--px-px.html @@ -0,0 +1,42 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="70px" height="70px"</title>
+
+ <!--
+ This testcase checks that the <object> element uses the intrinsic width and
+ height of the embedded SVG. Since the intrinsic width is 70px and the
+ intrinsic height is 70px, you should see a blue rectangle 70px wide by 70px
+ high when viewing this file. You should not see any red.
+ -->
+
+ <style type="text/css">
+
+html, body {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ padding: 0;
+ margin: 50px;
+ background: red;
+}
+
+ </style>
+ </head>
+ <body>
+ <object data="object--auto-auto--px-px.svg" type="image/svg+xml">
+ FAIL
+ </object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/object--auto-auto--px-px.svg b/layout/reftests/svg/sizing/object--auto-auto--px-px.svg new file mode 100644 index 0000000000..6721898076 --- /dev/null +++ b/layout/reftests/svg/sizing/object--auto-auto--px-px.svg @@ -0,0 +1,13 @@ +<!--
+ 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="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>SVG embedded by reference by object--auto-auto--px-px.html</title>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/object--pct-pct--0-0.html b/layout/reftests/svg/sizing/object--pct-pct--0-0.html new file mode 100644 index 0000000000..22b287df62 --- /dev/null +++ b/layout/reftests/svg/sizing/object--pct-pct--0-0.html @@ -0,0 +1,30 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html>
+ <head>
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=288276 -->
+
+ <title>Test: the width/height of SVG embedded by reference must be overridden</title>
+
+ <style type="text/css">
+
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ background: red;
+}
+
+ </style>
+
+ </head>
+ <body>
+ <!-- embedded SVG has width="0" height="0" which should be overridden -->
+ <object type="image/svg+xml" data="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPg0KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJsaW1lIi8%2BDQo8L3N2Zz4%3D">FAILED TO LOAD</object>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/pass-empty.svg b/layout/reftests/svg/sizing/pass-empty.svg new file mode 100644 index 0000000000..67be674dc3 --- /dev/null +++ b/layout/reftests/svg/sizing/pass-empty.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"> + <title>Reference SVG for comparisons</title> + <!-- empty --> +</svg> diff --git a/layout/reftests/svg/sizing/pass-pct-height-square.xhtml b/layout/reftests/svg/sizing/pass-pct-height-square.xhtml new file mode 100644 index 0000000000..ac6a60d1b4 --- /dev/null +++ b/layout/reftests/svg/sizing/pass-pct-height-square.xhtml @@ -0,0 +1,26 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Reference file for comparisons</title>
+ <style type="text/css">
+
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+}
+
+html, body {
+ height: 100%;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAIAAAACAAICAAAAAgIAAgACAgICAgMDAwP8AAAD%2FAP%2F%2FAAAA%2F%2F8A%2FwD%2F%2F%2F%2F%2F%2FwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMwAAZgAAmQAAzAAA%2FwAzAAAzMwAzZgAzmQAzzAAz%2FwBmAABmMwBmZgBmmQBmzABm%2FwCZAACZMwCZZgCZmQCZzACZ%2FwDMAADMMwDMZgDMmQDMzADM%2FwD%2FAAD%2FMwD%2FZgD%2FmQD%2FzAD%2F%2FzMAADMAMzMAZjMAmTMAzDMA%2FzMzADMzMzMzZjMzmTMzzDMz%2FzNmADNmMzNmZjNmmTNmzDNm%2FzOZADOZMzOZZjOZmTOZzDOZ%2FzPMADPMMzPMZjPMmTPMzDPM%2FzP%2FADP%2FMzP%2FZjP%2FmTP%2FzDP%2F%2F2YAAGYAM2YAZmYAmWYAzGYA%2F2YzAGYzM2YzZmYzmWYzzGYz%2F2ZmAGZmM2ZmZmZmmWZmzGZm%2F2aZAGaZM2aZZmaZmWaZzGaZ%2F2bMAGbMM2bMZmbMmWbMzGbM%2F2b%2FAGb%2FM2b%2FZmb%2FmWb%2FzGb%2F%2F5kAAJkAM5kAZpkAmZkAzJkA%2F5kzAJkzM5kzZpkzmZkzzJkz%2F5lmAJlmM5lmZplmmZlmzJlm%2F5mZAJmZM5mZZpmZmZmZzJmZ%2F5nMAJnMM5nMZpnMmZnMzJnM%2F5n%2FAJn%2FM5n%2FZpn%2FmZn%2FzJn%2F%2F8wAAMwAM8wAZswAmcwAzMwA%2F8wzAMwzM8wzZswzmcwzzMwz%2F8xmAMxmM8xmZsxmmcxmzMxm%2F8yZAMyZM8yZZsyZmcyZzMyZ%2F8zMAMzMM8zMZszMmczMzMzM%2F8z%2FAMz%2FM8z%2FZsz%2Fmcz%2FzMz%2F%2F%2F8AAP8AM%2F8AZv8Amf8AzP8A%2F%2F8zAP8zM%2F8zZv8zmf8zzP8z%2F%2F9mAP9mM%2F9mZv9mmf9mzP9m%2F%2F%2BZAP%2BZM%2F%2BZZv%2BZmf%2BZzP%2BZ%2F%2F%2FMAP%2FMM%2F%2FMZv%2FMmf%2FMzP%2FM%2F%2F%2F%2FAP%2F%2FM%2F%2F%2FZv%2F%2Fmf%2F%2FzP%2F%2F%2FywAAAAAAQABAAAIBAAZBAQAOw%3D%3D"
+ style="height:49%;"/>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/pass-pct-pct.xhtml b/layout/reftests/svg/sizing/pass-pct-pct.xhtml new file mode 100644 index 0000000000..e53d3e5fda --- /dev/null +++ b/layout/reftests/svg/sizing/pass-pct-pct.xhtml @@ -0,0 +1,30 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Reference file for comparisons</title>
+ <style type="text/css">
+
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+}
+
+html, body {
+ width: 100%;
+ height: 100%;
+}
+
+div {
+ width: 49%;
+ height: 49%;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body><div></div></body>
+</html>
diff --git a/layout/reftests/svg/sizing/pass-pct-px.xhtml b/layout/reftests/svg/sizing/pass-pct-px.xhtml new file mode 100644 index 0000000000..e1f5b4f7ae --- /dev/null +++ b/layout/reftests/svg/sizing/pass-pct-px.xhtml @@ -0,0 +1,30 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Reference file for comparisons</title>
+ <style type="text/css">
+
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+}
+
+html, body {
+ width: 100%;
+ height: 100%;
+}
+
+div {
+ width: 49%;
+ height: 70px;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body><div></div></body>
+</html>
diff --git a/layout/reftests/svg/sizing/pass-pct-width-square.xhtml b/layout/reftests/svg/sizing/pass-pct-width-square.xhtml new file mode 100644 index 0000000000..e257bde4aa --- /dev/null +++ b/layout/reftests/svg/sizing/pass-pct-width-square.xhtml @@ -0,0 +1,22 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Reference file for comparisons</title>
+ <style type="text/css">
+
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+}
+
+ </style>
+ </head>
+ <body>
+ <img src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAIAAAACAAICAAAAAgIAAgACAgICAgMDAwP8AAAD%2FAP%2F%2FAAAA%2F%2F8A%2FwD%2F%2F%2F%2F%2F%2FwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMwAAZgAAmQAAzAAA%2FwAzAAAzMwAzZgAzmQAzzAAz%2FwBmAABmMwBmZgBmmQBmzABm%2FwCZAACZMwCZZgCZmQCZzACZ%2FwDMAADMMwDMZgDMmQDMzADM%2FwD%2FAAD%2FMwD%2FZgD%2FmQD%2FzAD%2F%2FzMAADMAMzMAZjMAmTMAzDMA%2FzMzADMzMzMzZjMzmTMzzDMz%2FzNmADNmMzNmZjNmmTNmzDNm%2FzOZADOZMzOZZjOZmTOZzDOZ%2FzPMADPMMzPMZjPMmTPMzDPM%2FzP%2FADP%2FMzP%2FZjP%2FmTP%2FzDP%2F%2F2YAAGYAM2YAZmYAmWYAzGYA%2F2YzAGYzM2YzZmYzmWYzzGYz%2F2ZmAGZmM2ZmZmZmmWZmzGZm%2F2aZAGaZM2aZZmaZmWaZzGaZ%2F2bMAGbMM2bMZmbMmWbMzGbM%2F2b%2FAGb%2FM2b%2FZmb%2FmWb%2FzGb%2F%2F5kAAJkAM5kAZpkAmZkAzJkA%2F5kzAJkzM5kzZpkzmZkzzJkz%2F5lmAJlmM5lmZplmmZlmzJlm%2F5mZAJmZM5mZZpmZmZmZzJmZ%2F5nMAJnMM5nMZpnMmZnMzJnM%2F5n%2FAJn%2FM5n%2FZpn%2FmZn%2FzJn%2F%2F8wAAMwAM8wAZswAmcwAzMwA%2F8wzAMwzM8wzZswzmcwzzMwz%2F8xmAMxmM8xmZsxmmcxmzMxm%2F8yZAMyZM8yZZsyZmcyZzMyZ%2F8zMAMzMM8zMZszMmczMzMzM%2F8z%2FAMz%2FM8z%2FZsz%2Fmcz%2FzMz%2F%2F%2F8AAP8AM%2F8AZv8Amf8AzP8A%2F%2F8zAP8zM%2F8zZv8zmf8zzP8z%2F%2F9mAP9mM%2F9mZv9mmf9mzP9m%2F%2F%2BZAP%2BZM%2F%2BZZv%2BZmf%2BZzP%2BZ%2F%2F%2FMAP%2FMM%2F%2FMZv%2FMmf%2FMzP%2FM%2F%2F%2F%2FAP%2F%2FM%2F%2F%2FZv%2F%2Fmf%2F%2FzP%2F%2F%2FywAAAAAAQABAAAIBAAZBAQAOw%3D%3D"
+ style="width:49%;"/>
+ </body>
+</html>
diff --git a/layout/reftests/svg/sizing/pass-px-pct.xhtml b/layout/reftests/svg/sizing/pass-px-pct.xhtml new file mode 100644 index 0000000000..73f92e2adc --- /dev/null +++ b/layout/reftests/svg/sizing/pass-px-pct.xhtml @@ -0,0 +1,30 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Reference file for comparisons</title>
+ <style type="text/css">
+
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+}
+
+html, body {
+ width: 100%;
+ height: 100%;
+}
+
+div {
+ width: 70px;
+ height: 49%;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body><div></div></body>
+</html>
diff --git a/layout/reftests/svg/sizing/pass-px-px.xhtml b/layout/reftests/svg/sizing/pass-px-px.xhtml new file mode 100644 index 0000000000..5e2f598d53 --- /dev/null +++ b/layout/reftests/svg/sizing/pass-px-px.xhtml @@ -0,0 +1,30 @@ +<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>Reference file for comparisons</title>
+ <style type="text/css">
+
+* {
+ padding: 0;
+ border: 0;
+ margin: 0;
+}
+
+html, body {
+ width: 100%;
+ height: 100%;
+}
+
+div {
+ width: 70px;
+ height: 70px;
+ background: blue;
+}
+
+ </style>
+ </head>
+ <body><div></div></body>
+</html>
diff --git a/layout/reftests/svg/sizing/pass.svg b/layout/reftests/svg/sizing/pass.svg new file mode 100644 index 0000000000..c09c6601e8 --- /dev/null +++ b/layout/reftests/svg/sizing/pass.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"> + <title>Testcase reference file for generic pass condition</title> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/sizing/reftest.list b/layout/reftests/svg/sizing/reftest.list new file mode 100644 index 0000000000..789d551147 --- /dev/null +++ b/layout/reftests/svg/sizing/reftest.list @@ -0,0 +1,317 @@ + +# This directory contains tests that test the sizing of the SVG viewport into +# which SVG is rendered. It includes tests for standalone SVG, SVG embedded by +# reference using the HTML <object> element, and SVG rendered inline within +# XHTML. +# +# SVG's <svg> element is a "replaced element". The main specification texts +# covering how the <svg> element is sized are: +# +# http://www.w3.org/TR/SVGMobile12/coords.html#InitialViewport +# http://www.w3.org/TR/SVGMobile12/coords.html#IntrinsicSizing +# http://www.w3.org/TR/CSS21/visudet.html + +!= scrollbars-01.svg scrollbars-01-anti-ref.svg +!= scrollbars-02.svg scrollbars-01-anti-ref.svg + +# Standalone tests +# +# To get reasonable test coverage of the implementation of the replaced element +# algorythm we test all permutations of the CSS 'width' and 'height' properties +# having the values zero, auto, a px value or a percentage value, and of the +# intrinsic width and height (the 'width' and 'height' attributes) having the +# values zero, a px value or a percentage value. This gives us 4*4*3*3 == 144 +# tests. On top of that, there are 12 cases from the 144 permutations for which +# the 'viewBox' attribute should have an affect (see below). +# +# In the file names for the standalone tests that follow, the first two fields +# denote the type of value specified for the CSS 'width' and 'height' +# properties, and the third and four fields denote the type of value used for +# the intrinsic width and height (i.e. the 'width' and 'height' attributes). +# +# Note that the standalone SVG testcases can't test defaulting to 300x150 px +# because SVG always has an intrinsic width and height. To get the size of an +# SVG to default to 300x150 px the SVG will need to have a containing block +# that depends on the SVG's size (e.g. a floating containing block). Again, see +# below for those tests. + +== standalone--0-0--0-0.svg pass-empty.svg +== standalone--0-0--0-pct.svg pass-empty.svg +== standalone--0-0--0-px.svg pass-empty.svg +== standalone--0-0--pct-0.svg pass-empty.svg +== standalone--0-0--pct-pct.svg pass-empty.svg +== standalone--0-0--pct-px.svg pass-empty.svg +== standalone--0-0--px-0.svg pass-empty.svg +== standalone--0-0--px-pct.svg pass-empty.svg +== standalone--0-0--px-px.svg pass-empty.svg + +== standalone--0-auto--0-0.svg pass-empty.svg +== standalone--0-auto--0-pct.svg pass-empty.svg +== standalone--0-auto--0-px.svg pass-empty.svg +== standalone--0-auto--pct-0.svg pass-empty.svg +== standalone--0-auto--pct-pct.svg pass-empty.svg +== standalone--0-auto--pct-px.svg pass-empty.svg +== standalone--0-auto--px-0.svg pass-empty.svg +== standalone--0-auto--px-pct.svg pass-empty.svg +== standalone--0-auto--px-px.svg pass-empty.svg + +== standalone--0-pct--0-0.svg pass-empty.svg +== standalone--0-pct--0-pct.svg pass-empty.svg +== standalone--0-pct--0-px.svg pass-empty.svg +== standalone--0-pct--pct-0.svg pass-empty.svg +== standalone--0-pct--pct-pct.svg pass-empty.svg +== standalone--0-pct--pct-px.svg pass-empty.svg +== standalone--0-pct--px-0.svg pass-empty.svg +== standalone--0-pct--px-pct.svg pass-empty.svg +== standalone--0-pct--px-px.svg pass-empty.svg + +== standalone--0-px--0-0.svg pass-empty.svg +== standalone--0-px--0-pct.svg pass-empty.svg +== standalone--0-px--0-px.svg pass-empty.svg +== standalone--0-px--pct-0.svg pass-empty.svg +== standalone--0-px--pct-pct.svg pass-empty.svg +== standalone--0-px--pct-px.svg pass-empty.svg +== standalone--0-px--px-0.svg pass-empty.svg +== standalone--0-px--px-pct.svg pass-empty.svg +== standalone--0-px--px-px.svg pass-empty.svg + +== standalone--auto-0--0-0.svg pass-empty.svg +== standalone--auto-0--0-pct.svg pass-empty.svg +== standalone--auto-0--0-px.svg pass-empty.svg +== standalone--auto-0--pct-0.svg pass-empty.svg +== standalone--auto-0--pct-pct.svg pass-empty.svg +== standalone--auto-0--pct-px.svg pass-empty.svg +== standalone--auto-0--px-0.svg pass-empty.svg +== standalone--auto-0--px-pct.svg pass-empty.svg +== standalone--auto-0--px-px.svg pass-empty.svg + +== standalone--auto-auto--0-0.svg pass-empty.svg +== standalone--auto-auto--0-pct.svg pass-empty.svg +== standalone--auto-auto--0-px.svg pass-empty.svg +== standalone--auto-auto--pct-0.svg pass-empty.svg +fuzzy-if(d2d,0-1,0-400) == standalone--auto-auto--pct-pct.svg pass-pct-pct.xhtml +== standalone--auto-auto--pct-px.svg pass-pct-px.xhtml +== standalone--auto-auto--px-0.svg pass-empty.svg +== standalone--auto-auto--px-pct.svg pass-px-pct.xhtml +== standalone--auto-auto--px-px.svg pass-px-px.xhtml + +== standalone--auto-pct--0-0.svg pass-empty.svg +== standalone--auto-pct--0-pct.svg pass-empty.svg +== standalone--auto-pct--0-px.svg pass-empty.svg +fuzzy-if(d2d,0-1,0-400) == standalone--auto-pct--pct-0.svg pass-pct-pct.xhtml +fuzzy-if(d2d,0-1,0-400) == standalone--auto-pct--pct-pct.svg pass-pct-pct.xhtml +fuzzy-if(d2d,0-1,0-400) == standalone--auto-pct--pct-px.svg pass-pct-pct.xhtml +== standalone--auto-pct--px-0.svg pass-px-pct.xhtml +== standalone--auto-pct--px-pct.svg pass-px-pct.xhtml +fuzzy-if(d2d,0-1,0-1000) == standalone--auto-pct--px-px.svg pass-pct-height-square.xhtml # intrinsic ratio! + +== standalone--auto-px--0-0.svg pass-empty.svg +== standalone--auto-px--0-pct.svg pass-empty.svg +== standalone--auto-px--0-px.svg pass-empty.svg +== standalone--auto-px--pct-0.svg pass-pct-px.xhtml +== standalone--auto-px--pct-pct.svg pass-pct-px.xhtml +== standalone--auto-px--pct-px.svg pass-pct-px.xhtml +== standalone--auto-px--px-0.svg pass-px-px.xhtml +== standalone--auto-px--px-pct.svg pass-px-px.xhtml +== standalone--auto-px--px-px.svg pass-px-px.xhtml # intrinsic ratio! + +== standalone--pct-0--0-0.svg pass-empty.svg +== standalone--pct-0--0-pct.svg pass-empty.svg +== standalone--pct-0--0-px.svg pass-empty.svg +== standalone--pct-0--pct-0.svg pass-empty.svg +== standalone--pct-0--pct-pct.svg pass-empty.svg +== standalone--pct-0--pct-px.svg pass-empty.svg +== standalone--pct-0--px-0.svg pass-empty.svg +== standalone--pct-0--px-pct.svg pass-empty.svg +== standalone--pct-0--px-px.svg pass-empty.svg + +== standalone--pct-auto--0-0.svg pass-empty.svg +fuzzy-if(d2d,0-1,0-400) == standalone--pct-auto--0-pct.svg pass-pct-pct.xhtml +== standalone--pct-auto--0-px.svg pass-pct-px.xhtml +== standalone--pct-auto--pct-0.svg pass-empty.svg +fuzzy-if(d2d,0-1,0-400) == standalone--pct-auto--pct-pct.svg pass-pct-pct.xhtml +== standalone--pct-auto--pct-px.svg pass-pct-px.xhtml +== standalone--pct-auto--px-0.svg pass-empty.svg +fuzzy-if(d2d,0-1,0-400) == standalone--pct-auto--px-pct.svg pass-pct-pct.xhtml +== standalone--pct-auto--px-px.svg pass-pct-width-square.xhtml # intrinsic ratio! + +fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--0-0.svg pass-pct-pct.xhtml +fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--0-pct.svg pass-pct-pct.xhtml +fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--0-px.svg pass-pct-pct.xhtml +fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--pct-0.svg pass-pct-pct.xhtml +fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--pct-pct.svg pass-pct-pct.xhtml +fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--pct-px.svg pass-pct-pct.xhtml +fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--px-0.svg pass-pct-pct.xhtml +fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--px-pct.svg pass-pct-pct.xhtml +fuzzy-if(d2d,0-1,0-400) == standalone--pct-pct--px-px.svg pass-pct-pct.xhtml + +== standalone--pct-px--0-0.svg pass-pct-px.xhtml +== standalone--pct-px--0-pct.svg pass-pct-px.xhtml +== standalone--pct-px--0-px.svg pass-pct-px.xhtml +== standalone--pct-px--pct-0.svg pass-pct-px.xhtml +== standalone--pct-px--pct-pct.svg pass-pct-px.xhtml +== standalone--pct-px--pct-px.svg pass-pct-px.xhtml +== standalone--pct-px--px-0.svg pass-pct-px.xhtml +== standalone--pct-px--px-pct.svg pass-pct-px.xhtml +== standalone--pct-px--px-px.svg pass-pct-px.xhtml + +== standalone--px-0--0-0.svg pass-empty.svg +== standalone--px-0--0-pct.svg pass-empty.svg +== standalone--px-0--0-px.svg pass-empty.svg +== standalone--px-0--pct-0.svg pass-empty.svg +== standalone--px-0--pct-pct.svg pass-empty.svg +== standalone--px-0--pct-px.svg pass-empty.svg +== standalone--px-0--px-0.svg pass-empty.svg +== standalone--px-0--px-pct.svg pass-empty.svg +== standalone--px-0--px-px.svg pass-empty.svg + +== standalone--px-auto--0-0.svg pass-empty.svg +== standalone--px-auto--0-pct.svg pass-px-pct.xhtml +== standalone--px-auto--0-px.svg pass-px-px.xhtml +== standalone--px-auto--pct-0.svg pass-empty.svg +== standalone--px-auto--pct-pct.svg pass-px-pct.xhtml +== standalone--px-auto--pct-px.svg pass-px-px.xhtml +== standalone--px-auto--px-0.svg pass-empty.svg +== standalone--px-auto--px-pct.svg pass-px-pct.xhtml +== standalone--px-auto--px-px.svg pass-px-px.xhtml # intrinsic ratio! + +== standalone--px-pct--0-0.svg pass-px-pct.xhtml +== standalone--px-pct--0-pct.svg pass-px-pct.xhtml +== standalone--px-pct--0-px.svg pass-px-pct.xhtml +== standalone--px-pct--pct-0.svg pass-px-pct.xhtml +== standalone--px-pct--pct-pct.svg pass-px-pct.xhtml +== standalone--px-pct--pct-px.svg pass-px-pct.xhtml +== standalone--px-pct--px-0.svg pass-px-pct.xhtml +== standalone--px-pct--px-pct.svg pass-px-pct.xhtml +== standalone--px-pct--px-px.svg pass-px-pct.xhtml + +== standalone--px-px--0-0.svg pass-px-px.xhtml +== standalone--px-px--0-pct.svg pass-px-px.xhtml +== standalone--px-px--0-px.svg pass-px-px.xhtml +== standalone--px-px--pct-0.svg pass-px-px.xhtml +== standalone--px-px--pct-pct.svg pass-px-px.xhtml +== standalone--px-px--pct-px.svg pass-px-px.xhtml +== standalone--px-px--px-0.svg pass-px-px.xhtml +== standalone--px-px--px-pct.svg pass-px-px.xhtml +== standalone--px-px--px-px.svg pass-px-px.xhtml + + +# As mentioned above, the 'viewBox' attribute may play a part in the sizing of +# the SVG viewport in 12 of the 144 standalone tests above. The 'viewBox' +# attribute only affects the replaced element sizing algorithm (by providing an +# intrinsic ratio) when the SVG 'width' and 'height' attributes don't provide +# an intrinsic ratio but the algorithm says the intrinsic ratio should be used +# if avaliable. In other words, this is when one of the CSS properties 'width' +# or 'height' has the value 'auto' and the other has a non-zero value, while +# one or both of the SVG 'width' and 'height' attributes has a percentage +# value. For the standalone tests above that means the value of the 'viewBox' +# attribute matters in the 12 cases that follow. +# +# XXX We could also check that 'viewBox' does NOT have an affect in the other +# cases. +# +# XXX What about cases like standalone--auto-pct--0-px--viewBox.svg? Is the +# intrinsic ratio zero and not used, or should we use the viewBox ratio? + +== standalone--auto-pct--pct-pct--viewBox.svg pass-pct-height-square.xhtml +== standalone--auto-pct--pct-px--viewBox.svg pass-pct-height-square.xhtml +== standalone--auto-pct--px-pct--viewBox.svg pass-pct-height-square.xhtml +== standalone--auto-px--pct-pct--viewBox.svg pass-px-px.xhtml +== standalone--auto-px--pct-px--viewBox.svg pass-px-px.xhtml +== standalone--auto-px--px-pct--viewBox.svg pass-px-px.xhtml +== standalone--pct-auto--pct-pct--viewBox.svg pass-pct-width-square.xhtml +== standalone--pct-auto--pct-px--viewBox.svg pass-pct-width-square.xhtml +== standalone--pct-auto--px-pct--viewBox.svg pass-pct-width-square.xhtml +== standalone--px-auto--pct-pct--viewBox.svg pass-px-px.xhtml +== standalone--px-auto--pct-px--viewBox.svg pass-px-px.xhtml +== standalone--px-auto--px-pct--viewBox.svg pass-px-px.xhtml + + +# Sanity tests. These tests check that our choice of percentage width (49%) +# doesn't coincidently result in the same width as our choice of px width +# (70px) or the fall back width (300 px), and that our choice of percentage +# height (49%) doesn't coincidently result in the same height as our choice of +# px height (70px) or the fall back height (150 px). This ensures that we won't +# miss false positives for the tests: +# +# standalone--pct-xxx--px-xxx.svg +# standalone--xxx-pct--xxx-px.svg +# standalone--px-xxx--pct-xxx.svg +# standalone--xxx-px--xxx-pct.svg +# +# if the user agent ignores the CSS property and uses the attribute instead. +# This will happen if the content area width is 612 px or the content height is +# 306 px. Hopefully it's unlikely testers will encounter this. + +!= standalone-sanity-width-pct.svg standalone-sanity-width-px.svg +!= standalone-sanity-width-pct.svg standalone-sanity-width-300px.svg +!= standalone-sanity-height-pct.svg standalone-sanity-height-px.svg +!= standalone-sanity-height-pct.svg standalone-sanity-height-150px.svg + + +# Embedded inline tests +# +# The standalone tests provide a reasonable workout for replaced element +# algorithm sizing, but we also want to test that SVG embedded inline is +# positioned correctly when the properties 'display', 'float' and 'position' +# are set to different values. +# +# We could certainly expand on these tests, but they provide reasonable base +# coverage. + +== inline--display-block--01.xhtml inline--display-block--01-ref.xhtml +fuzzy-if(OSX,0-1,0-10) == inline--display-inline--01.xhtml inline--display-inline--01-ref.xhtml +== inline--display-inline-block--01.xhtml inline--display-inline-block--01-ref.xhtml +== inline--float-left--01.xhtml inline--float-left--01-ref.xhtml +== inline--float-right--01.xhtml inline--float-right--01-ref.xhtml +== inline--position-absolute--01.xhtml inline--position-absolute--01-ref.xhtml +== inline--position-absolute--02.xhtml pass.svg +== inline--position-relative--01.xhtml inline--position-relative--01-ref.xhtml + + +# Embedded by reference tests +# +# One issue when it comes to documents embedded by reference is whether +# non-'auto' values for the CSS 'width' and 'height' properties on the +# _embedded_ document's root element should be used as intrinsic values by +# replaced elements like HTML <object>. For the sake of simplicity we will +# ignore this case for now, but it's certainly worth revisiting at some point +# in the future. +# +# Since we have given the replaced element algorithm a reasonable workout in +# the standalone tests, for the embedded by reference tests we will simply +# check that the embedded SVG's intrinsic dimensions are used. The following +# tests do not have any width or height on the <object> element so they should +# be sized purely by the embedded SVG's intrinsic size. + +random-if(Android) == object--auto-auto--0-0.html pass-empty.svg # XXX add border +random-if(Android) == object--auto-auto--0-pct.html object--auto-auto--0-pct--ref.html +random-if(Android) == object--auto-auto--0-px.html object--auto-auto--0-px--ref.html +random-if(Android) == object--auto-auto--pct-0.html object--auto-auto--pct-0--ref.html +# The following four commented out tests fail post bug 428023: +#== object--auto-auto--pct-pct.html object--auto-auto--pct-pct--ref.html +#== object--auto-auto--pct-px.html object--auto-auto--pct-px--ref.html +random-if(Android) == object--auto-auto--px-0.html object--auto-auto--px-0--ref.html +#== object--auto-auto--px-pct.html object--auto-auto--px-pct--ref.html +random-if(Android) == object--auto-auto--px-px.html object--auto-auto--px-px--ref.html +#== object--pct-pct--0-0.html pass.svg + + +# Assorted tests to check that dynamic changes work correctly +# +# Here we have an assortment of different tests to check that updates occur +# correctly when changes are made that should result in a change in the size +# or position of the SVG. + +== dynamic--inline-css-height.xhtml pass.svg +== dynamic--inline-css-width.xhtml pass.svg +skip == dynamic--inline-resize-window-height.xhtml pass.svg # XXX breaks the reftest run as the window height somehow is not restored +skip == dynamic--inline-resize-window-width.xhtml pass.svg # Fails way too much +random-if(Android) == dynamic--object-svg-unloaded.xhtml pass.svg +# == dynamic--object--auto-auto--pct-px.html + +# FIXME(dlrobertson): Blink and WebKit do no not pass the following tests due +# due to a difference in surface size calculation. +== canvas-drawImage-no-width-or-height.html canvas-drawImage-no-width-or-height-ref.html +== canvas-drawImage-width-with-no-height.html canvas-drawImage-width-with-no-height-ref.html +== canvas-drawImage-height-with-no-width.html canvas-drawImage-height-with-no-width-ref.html diff --git a/layout/reftests/svg/sizing/scrollbars-01-anti-ref.svg b/layout/reftests/svg/sizing/scrollbars-01-anti-ref.svg new file mode 100644 index 0000000000..a8d92e0847 --- /dev/null +++ b/layout/reftests/svg/sizing/scrollbars-01-anti-ref.svg @@ -0,0 +1,11 @@ +<!--
+ 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">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=771935 -->
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/scrollbars-01.svg b/layout/reftests/svg/sizing/scrollbars-01.svg new file mode 100644 index 0000000000..4433307db4 --- /dev/null +++ b/layout/reftests/svg/sizing/scrollbars-01.svg @@ -0,0 +1,13 @@ +<!--
+ 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="101%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=771935 -->
+
+ <title>Test that we're given scrollbars if wider than the browser's content area</title>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/scrollbars-02.svg b/layout/reftests/svg/sizing/scrollbars-02.svg new file mode 100644 index 0000000000..9f9bc4af4e --- /dev/null +++ b/layout/reftests/svg/sizing/scrollbars-02.svg @@ -0,0 +1,13 @@ +<!--
+ 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" height="101%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=771935 -->
+
+ <title>Test that we're given scrollbars if wider than the browser's content area</title>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--0-0.svg b/layout/reftests/svg/sizing/standalone--0-0--0-0.svg new file mode 100644 index 0000000000..06ee1b22b8 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-0--0-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:0;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--0-pct.svg b/layout/reftests/svg/sizing/standalone--0-0--0-pct.svg new file mode 100644 index 0000000000..e5a9a9f777 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-0--0-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:0;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--0-px.svg b/layout/reftests/svg/sizing/standalone--0-0--0-px.svg new file mode 100644 index 0000000000..5fa9391ad6 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-0--0-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:0;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="0" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--pct-0.svg b/layout/reftests/svg/sizing/standalone--0-0--pct-0.svg new file mode 100644 index 0000000000..a017d7d66a --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-0--pct-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:0;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--pct-pct.svg b/layout/reftests/svg/sizing/standalone--0-0--pct-pct.svg new file mode 100644 index 0000000000..8f50583adf --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-0--pct-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:0;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--pct-px.svg b/layout/reftests/svg/sizing/standalone--0-0--pct-px.svg new file mode 100644 index 0000000000..5ceba989bf --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-0--pct-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:0;" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="49%" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--px-0.svg b/layout/reftests/svg/sizing/standalone--0-0--px-0.svg new file mode 100644 index 0000000000..3bcf767095 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-0--px-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:0;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="70" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--px-pct.svg b/layout/reftests/svg/sizing/standalone--0-0--px-pct.svg new file mode 100644 index 0000000000..c414d1301a --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-0--px-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:0;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="70" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-0--px-px.svg b/layout/reftests/svg/sizing/standalone--0-0--px-px.svg new file mode 100644 index 0000000000..8bb0391948 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-0--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:0;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:0; width="70" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' and 'height' properties
+ to zero prevents the SVG from being displayed. You should not see any red
+ when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--0-0.svg b/layout/reftests/svg/sizing/standalone--0-auto--0-0.svg new file mode 100644 index 0000000000..a7f9833d75 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-auto--0-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:auto;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--0-pct.svg b/layout/reftests/svg/sizing/standalone--0-auto--0-pct.svg new file mode 100644 index 0000000000..206b4111cf --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-auto--0-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:auto;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--0-px.svg b/layout/reftests/svg/sizing/standalone--0-auto--0-px.svg new file mode 100644 index 0000000000..e130c8ffc1 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-auto--0-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:auto;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="0" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--pct-0.svg b/layout/reftests/svg/sizing/standalone--0-auto--pct-0.svg new file mode 100644 index 0000000000..25f4e4dd9e --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-auto--pct-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:auto;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--pct-pct.svg b/layout/reftests/svg/sizing/standalone--0-auto--pct-pct.svg new file mode 100644 index 0000000000..c9bfd7ac3f --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-auto--pct-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:auto;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--pct-px.svg b/layout/reftests/svg/sizing/standalone--0-auto--pct-px.svg new file mode 100644 index 0000000000..c86f758553 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-auto--pct-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:auto;" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="49%" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--px-0.svg b/layout/reftests/svg/sizing/standalone--0-auto--px-0.svg new file mode 100644 index 0000000000..38fca0bd7f --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-auto--px-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:auto;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="70" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--px-pct.svg b/layout/reftests/svg/sizing/standalone--0-auto--px-pct.svg new file mode 100644 index 0000000000..7fc50a5b6a --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-auto--px-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:auto;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="70" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-auto--px-px.svg b/layout/reftests/svg/sizing/standalone--0-auto--px-px.svg new file mode 100644 index 0000000000..a7d132473d --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-auto--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:auto;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:auto; width="70" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--0-0.svg b/layout/reftests/svg/sizing/standalone--0-pct--0-0.svg new file mode 100644 index 0000000000..9938ee6892 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-pct--0-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:49%;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--0-pct.svg b/layout/reftests/svg/sizing/standalone--0-pct--0-pct.svg new file mode 100644 index 0000000000..8917bf10fe --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-pct--0-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:49%;" width="0" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="0" height="10%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--0-px.svg b/layout/reftests/svg/sizing/standalone--0-pct--0-px.svg new file mode 100644 index 0000000000..5d1ccdc873 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-pct--0-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:49%;" width="0" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="0" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--pct-0.svg b/layout/reftests/svg/sizing/standalone--0-pct--pct-0.svg new file mode 100644 index 0000000000..8df3fa2c79 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-pct--pct-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:49%;" width="10%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="10%" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--pct-pct.svg b/layout/reftests/svg/sizing/standalone--0-pct--pct-pct.svg new file mode 100644 index 0000000000..22c6a8f817 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-pct--pct-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:90%;" width="10%" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="10%" height="10%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--pct-px.svg b/layout/reftests/svg/sizing/standalone--0-pct--pct-px.svg new file mode 100644 index 0000000000..99e317c310 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-pct--pct-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:49%;" width="10%" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="10%" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--px-0.svg b/layout/reftests/svg/sizing/standalone--0-pct--px-0.svg new file mode 100644 index 0000000000..98e1a83803 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-pct--px-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:49%;" width="10" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="10" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--px-pct.svg b/layout/reftests/svg/sizing/standalone--0-pct--px-pct.svg new file mode 100644 index 0000000000..cb06033245 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-pct--px-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:49%;" width="10" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="10" height="10%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-pct--px-px.svg b/layout/reftests/svg/sizing/standalone--0-pct--px-px.svg new file mode 100644 index 0000000000..80e9c1ac88 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-pct--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:49%;" width="10" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:49%; width="10" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--0-0.svg b/layout/reftests/svg/sizing/standalone--0-px--0-0.svg new file mode 100644 index 0000000000..6ee5a3b425 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-px--0-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:70px;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--0-pct.svg b/layout/reftests/svg/sizing/standalone--0-px--0-pct.svg new file mode 100644 index 0000000000..9b62bac9dd --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-px--0-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:70px;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--0-px.svg b/layout/reftests/svg/sizing/standalone--0-px--0-px.svg new file mode 100644 index 0000000000..a324130290 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-px--0-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:70px;" width="0" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="0" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--pct-0.svg b/layout/reftests/svg/sizing/standalone--0-px--pct-0.svg new file mode 100644 index 0000000000..c9179e12ed --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-px--pct-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:70px;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--pct-pct.svg b/layout/reftests/svg/sizing/standalone--0-px--pct-pct.svg new file mode 100644 index 0000000000..c4d82009cb --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-px--pct-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:70px;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--pct-px.svg b/layout/reftests/svg/sizing/standalone--0-px--pct-px.svg new file mode 100644 index 0000000000..df2055df87 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-px--pct-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:70px;" width="49%" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="49%" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--px-0.svg b/layout/reftests/svg/sizing/standalone--0-px--px-0.svg new file mode 100644 index 0000000000..920cf6ef27 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-px--px-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:70px;" width="10" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="10" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--px-pct.svg b/layout/reftests/svg/sizing/standalone--0-px--px-pct.svg new file mode 100644 index 0000000000..bf9200e159 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-px--px-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:70px;" width="10" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="10" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--0-px--px-px.svg b/layout/reftests/svg/sizing/standalone--0-px--px-px.svg new file mode 100644 index 0000000000..7a62c3f633 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--0-px--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:0; height:70px;" width="10" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:0; height:70px; width="10" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'width' property to zero prevents
+ the SVG from being displayed. You should not see any red when viewing this
+ file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--0-0.svg b/layout/reftests/svg/sizing/standalone--auto-0--0-0.svg new file mode 100644 index 0000000000..4dd222ddc1 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-0--0-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:0;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--0-pct.svg b/layout/reftests/svg/sizing/standalone--auto-0--0-pct.svg new file mode 100644 index 0000000000..c564b9fd0d --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-0--0-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:0;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--0-px.svg b/layout/reftests/svg/sizing/standalone--auto-0--0-px.svg new file mode 100644 index 0000000000..44defae6b6 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-0--0-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:0;" width="0" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="0" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--pct-0.svg b/layout/reftests/svg/sizing/standalone--auto-0--pct-0.svg new file mode 100644 index 0000000000..649b8224cc --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-0--pct-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:0;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--pct-pct.svg b/layout/reftests/svg/sizing/standalone--auto-0--pct-pct.svg new file mode 100644 index 0000000000..8c9b139b7b --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-0--pct-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:0;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--pct-px.svg b/layout/reftests/svg/sizing/standalone--auto-0--pct-px.svg new file mode 100644 index 0000000000..f62c14757d --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-0--pct-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:0;" width="49%" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="49%" height="10"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--px-0.svg b/layout/reftests/svg/sizing/standalone--auto-0--px-0.svg new file mode 100644 index 0000000000..5e38222fca --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-0--px-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:0;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="70" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--px-pct.svg b/layout/reftests/svg/sizing/standalone--auto-0--px-pct.svg new file mode 100644 index 0000000000..cb77527312 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-0--px-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:0;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="70" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-0--px-px.svg b/layout/reftests/svg/sizing/standalone--auto-0--px-px.svg new file mode 100644 index 0000000000..f4b0539ba9 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-0--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:0;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:0; width="70" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--0-0.svg b/layout/reftests/svg/sizing/standalone--auto-auto--0-0.svg new file mode 100644 index 0000000000..4156c11b41 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-auto--0-0.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:auto;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="0" height="0"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. Setting the
+ 'width' and 'height' attributes to zero should prevent the SVG from being
+ displayed. You should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--0-pct.svg b/layout/reftests/svg/sizing/standalone--auto-auto--0-pct.svg new file mode 100644 index 0000000000..b72fafff85 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-auto--0-pct.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:auto;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="0" height="49%"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. Setting the
+ 'width' attributes to zero should prevent the SVG from being displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--0-px.svg b/layout/reftests/svg/sizing/standalone--auto-auto--0-px.svg new file mode 100644 index 0000000000..284d422bad --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-auto--0-px.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:auto;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="0" height="70"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. Setting the
+ 'width' attributes to zero should prevent the SVG from being displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--pct-0.svg b/layout/reftests/svg/sizing/standalone--auto-auto--pct-0.svg new file mode 100644 index 0000000000..fb93cccc8a --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-auto--pct-0.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:auto;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="49%" height="0"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. Setting the
+ 'height' attributes to zero should prevent the SVG from being displayed.
+ You should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--pct-pct.svg b/layout/reftests/svg/sizing/standalone--auto-auto--pct-pct.svg new file mode 100644 index 0000000000..4692dfc6fa --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-auto--pct-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:auto;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="49%" height="49%"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. You should see
+ a blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--pct-px.svg b/layout/reftests/svg/sizing/standalone--auto-auto--pct-px.svg new file mode 100644 index 0000000000..be7d7736c5 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-auto--pct-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:auto;" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="49%" height="70"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. You should see
+ a blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--px-0.svg b/layout/reftests/svg/sizing/standalone--auto-auto--px-0.svg new file mode 100644 index 0000000000..1ee6488d68 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-auto--px-0.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:auto;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="70" height="0"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. Setting the
+ 'height' attributes to zero should prevent the SVG from being displayed.
+ You should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--px-pct.svg b/layout/reftests/svg/sizing/standalone--auto-auto--px-pct.svg new file mode 100644 index 0000000000..97efb10be5 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-auto--px-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:auto;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="70" height="49%"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. You should see
+ a blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-auto--px-px.svg b/layout/reftests/svg/sizing/standalone--auto-auto--px-px.svg new file mode 100644 index 0000000000..20c2717b55 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-auto--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:auto;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:auto; width="70" height="70"</title>
+
+ <desc>
+ This test checks that the 'width' and 'height' attributes are used when the
+ CSS 'width' and 'height' properties are both set to 'auto'. You should see
+ a blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--0-0.svg b/layout/reftests/svg/sizing/standalone--auto-pct--0-0.svg new file mode 100644 index 0000000000..8b76885e1c --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-pct--0-0.svg @@ -0,0 +1,22 @@ +<!--
+ 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"
+ style="width:auto; height:49%;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. Since the
+ 'width' attribute is set to zero, nothing should be displayed. You should
+ not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--0-pct.svg b/layout/reftests/svg/sizing/standalone--auto-pct--0-pct.svg new file mode 100644 index 0000000000..6409627b4c --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-pct--0-pct.svg @@ -0,0 +1,22 @@ +<!--
+ 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"
+ style="width:auto; height:49%;" width="0" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="0" height="10%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. Since the
+ 'width' attribute is set to zero, nothing should be displayed. You should
+ not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--0-px.svg b/layout/reftests/svg/sizing/standalone--auto-pct--0-px.svg new file mode 100644 index 0000000000..0e1edda2ed --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-pct--0-px.svg @@ -0,0 +1,22 @@ +<!--
+ 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"
+ style="width:auto; height:49%;" width="0" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="0" height="10"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. Since the
+ 'width' attribute is set to zero, nothing should be displayed. You should
+ not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--pct-0.svg b/layout/reftests/svg/sizing/standalone--auto-pct--pct-0.svg new file mode 100644 index 0000000000..85c961c788 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-pct--pct-0.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:49%;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--pct-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--auto-pct--pct-pct--viewBox.svg new file mode 100644 index 0000000000..c7262a5ebd --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-pct--pct-pct--viewBox.svg @@ -0,0 +1,23 @@ +<!--
+ 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"
+ style="width:auto; height:49%;" width="20%" height="10%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="20%" height="10%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'width' property is set to 'auto', the
+ 'height' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides 49% the height of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--pct-pct.svg b/layout/reftests/svg/sizing/standalone--auto-pct--pct-pct.svg new file mode 100644 index 0000000000..4c3e98c00e --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-pct--pct-pct.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:49%;" width="49%" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="49%" height="10%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--pct-px--viewBox.svg b/layout/reftests/svg/sizing/standalone--auto-pct--pct-px--viewBox.svg new file mode 100644 index 0000000000..caf4a17d91 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-pct--pct-px--viewBox.svg @@ -0,0 +1,23 @@ +<!--
+ 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"
+ style="width:auto; height:49%;" width="10%" height="10"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="10%" height="10" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'width' property is set to 'auto', the
+ 'height' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides 49% the height of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--pct-px.svg b/layout/reftests/svg/sizing/standalone--auto-pct--pct-px.svg new file mode 100644 index 0000000000..d6c789f7e1 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-pct--pct-px.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:49%;" width="49%" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="49%" height="10"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--px-0.svg b/layout/reftests/svg/sizing/standalone--auto-pct--px-0.svg new file mode 100644 index 0000000000..c2fd1e603b --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-pct--px-0.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:49%;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="70" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--px-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--auto-pct--px-pct--viewBox.svg new file mode 100644 index 0000000000..f2a789684a --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-pct--px-pct--viewBox.svg @@ -0,0 +1,23 @@ +<!--
+ 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"
+ style="width:auto; height:49%;" width="70" height="10%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="70" height="10%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'width' property is set to 'auto', the
+ 'height' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides 49% the height of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--px-pct.svg b/layout/reftests/svg/sizing/standalone--auto-pct--px-pct.svg new file mode 100644 index 0000000000..4c601494a9 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-pct--px-pct.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:49%;" width="70" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="70" height="10%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-pct--px-px.svg b/layout/reftests/svg/sizing/standalone--auto-pct--px-px.svg new file mode 100644 index 0000000000..ffe7fd570d --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-pct--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:49%;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:49%; width="70" height="70"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio (1:1) will be used since the
+ CSS 'width' property is set to auto. You should see a blue square with
+ sides 49% the height of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--0-0.svg b/layout/reftests/svg/sizing/standalone--auto-px--0-0.svg new file mode 100644 index 0000000000..df1800ec28 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-px--0-0.svg @@ -0,0 +1,22 @@ +<!--
+ 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"
+ style="width:auto; height:70px;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. Since the
+ 'width' attribute is set to zero, nothing should be displayed. You should
+ not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--0-pct.svg b/layout/reftests/svg/sizing/standalone--auto-px--0-pct.svg new file mode 100644 index 0000000000..ffb2400a62 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-px--0-pct.svg @@ -0,0 +1,22 @@ +<!--
+ 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"
+ style="width:auto; height:70px;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. Since the
+ 'width' attribute is set to zero, nothing should be displayed. You should
+ not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--0-px.svg b/layout/reftests/svg/sizing/standalone--auto-px--0-px.svg new file mode 100644 index 0000000000..72809a1305 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-px--0-px.svg @@ -0,0 +1,22 @@ +<!--
+ 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"
+ style="width:auto; height:70px;" width="0" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="0" height="10"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. Since the
+ 'width' attribute is set to zero, nothing should be displayed. You should
+ not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--pct-0.svg b/layout/reftests/svg/sizing/standalone--auto-px--pct-0.svg new file mode 100644 index 0000000000..efdab07b21 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-px--pct-0.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:70px;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--pct-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--auto-px--pct-pct--viewBox.svg new file mode 100644 index 0000000000..f98e2b9d68 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-px--pct-pct--viewBox.svg @@ -0,0 +1,23 @@ +<!--
+ 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"
+ style="width:auto; height:70px;" width="10%" height="49%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="10%" height="49%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'width' property is set to 'auto', the
+ 'height' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--pct-pct.svg b/layout/reftests/svg/sizing/standalone--auto-px--pct-pct.svg new file mode 100644 index 0000000000..c5783ca175 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-px--pct-pct.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:70px;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--pct-px--viewBox.svg b/layout/reftests/svg/sizing/standalone--auto-px--pct-px--viewBox.svg new file mode 100644 index 0000000000..1327012dca --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-px--pct-px--viewBox.svg @@ -0,0 +1,23 @@ +<!--
+ 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"
+ style="width:auto; height:70px;" width="49%" height="10"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="49%" height="10" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'width' property is set to 'auto', the
+ 'height' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--pct-px.svg b/layout/reftests/svg/sizing/standalone--auto-px--pct-px.svg new file mode 100644 index 0000000000..91c62bb28c --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-px--pct-px.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:70px;" width="49%" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="49%" height="10"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--px-0.svg b/layout/reftests/svg/sizing/standalone--auto-px--px-0.svg new file mode 100644 index 0000000000..32c113b429 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-px--px-0.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:70px;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="70" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--px-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--auto-px--px-pct--viewBox.svg new file mode 100644 index 0000000000..32151187a9 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-px--px-pct--viewBox.svg @@ -0,0 +1,23 @@ +<!--
+ 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"
+ style="width:auto; height:70px;" width="10" height="49%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="10" height="49%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'width' property is set to 'auto', the
+ 'height' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--px-pct.svg b/layout/reftests/svg/sizing/standalone--auto-px--px-pct.svg new file mode 100644 index 0000000000..fe35b2b1a0 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-px--px-pct.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:auto; height:70px;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="70" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic width will be taken as the used
+ width when the CSS 'width' property is set to 'auto', the 'height' property
+ is set to some other value, and there is no intrinsic ratio. You should see
+ a blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--auto-px--px-px.svg b/layout/reftests/svg/sizing/standalone--auto-px--px-px.svg new file mode 100644 index 0000000000..f7cfc6f9e4 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--auto-px--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:auto; height:70px;" width="1" height="1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:auto; height:70px; width="1" height="1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio (1:1) will be used since the
+ CSS 'width' property is set to auto. You should see a blue square with
+ sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--0-0.svg b/layout/reftests/svg/sizing/standalone--pct-0--0-0.svg new file mode 100644 index 0000000000..788019e256 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-0--0-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:0;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--0-pct.svg b/layout/reftests/svg/sizing/standalone--pct-0--0-pct.svg new file mode 100644 index 0000000000..b9734786bc --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-0--0-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:0;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--0-px.svg b/layout/reftests/svg/sizing/standalone--pct-0--0-px.svg new file mode 100644 index 0000000000..f092b9a038 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-0--0-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:0;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="0" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--pct-0.svg b/layout/reftests/svg/sizing/standalone--pct-0--pct-0.svg new file mode 100644 index 0000000000..bc29ce6a3e --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-0--pct-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:0;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--pct-pct.svg b/layout/reftests/svg/sizing/standalone--pct-0--pct-pct.svg new file mode 100644 index 0000000000..0cc62c5049 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-0--pct-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:0;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--pct-px.svg b/layout/reftests/svg/sizing/standalone--pct-0--pct-px.svg new file mode 100644 index 0000000000..c65ed72dca --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-0--pct-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:0;" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="49%" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--px-0.svg b/layout/reftests/svg/sizing/standalone--pct-0--px-0.svg new file mode 100644 index 0000000000..2fb91a78d7 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-0--px-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:0;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="70" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--px-pct.svg b/layout/reftests/svg/sizing/standalone--pct-0--px-pct.svg new file mode 100644 index 0000000000..32d8c31738 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-0--px-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:0;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="70" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-0--px-px.svg b/layout/reftests/svg/sizing/standalone--pct-0--px-px.svg new file mode 100644 index 0000000000..99d685c106 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-0--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:0;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:0; width="70" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--0-0.svg b/layout/reftests/svg/sizing/standalone--pct-auto--0-0.svg new file mode 100644 index 0000000000..1615ea6d37 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-auto--0-0.svg @@ -0,0 +1,22 @@ +<!--
+ 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"
+ style="width:49%; height:auto;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. Since
+ the 'height' attribute is set to zero, nothing should be displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--0-pct.svg b/layout/reftests/svg/sizing/standalone--pct-auto--0-pct.svg new file mode 100644 index 0000000000..46b14f432c --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-auto--0-pct.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:49%; height:auto;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--0-px.svg b/layout/reftests/svg/sizing/standalone--pct-auto--0-px.svg new file mode 100644 index 0000000000..44e82d75ad --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-auto--0-px.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:49%; height:auto;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="0" height="70"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--pct-0.svg b/layout/reftests/svg/sizing/standalone--pct-auto--pct-0.svg new file mode 100644 index 0000000000..bc9917af28 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-auto--pct-0.svg @@ -0,0 +1,22 @@ +<!--
+ 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"
+ style="width:49%; height:auto;" width="10%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="10%" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. Since
+ the 'height' attribute is set to zero, nothing should be displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--pct-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--pct-auto--pct-pct--viewBox.svg new file mode 100644 index 0000000000..f29e6fca75 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-auto--pct-pct--viewBox.svg @@ -0,0 +1,23 @@ +<!--
+ 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"
+ style="width:49%; height:auto;" width="10%" height="20%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="10%" height="20%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'height' property is set to 'auto', the
+ 'width' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides 49% the height of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--pct-pct.svg b/layout/reftests/svg/sizing/standalone--pct-auto--pct-pct.svg new file mode 100644 index 0000000000..6c0dae659d --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-auto--pct-pct.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:49%; height:auto;" width="10%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="10%" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--pct-px--viewBox.svg b/layout/reftests/svg/sizing/standalone--pct-auto--pct-px--viewBox.svg new file mode 100644 index 0000000000..6622bd6f75 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-auto--pct-px--viewBox.svg @@ -0,0 +1,23 @@ +<!--
+ 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"
+ style="width:49%; height:auto;" width="10%" height="70"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="10%" height="70" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'height' property is set to 'auto', the
+ 'width' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides 49% the height of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--pct-px.svg b/layout/reftests/svg/sizing/standalone--pct-auto--pct-px.svg new file mode 100644 index 0000000000..c3bacfdff0 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-auto--pct-px.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:49%; height:auto;" width="10%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="10%" height="70"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--px-0.svg b/layout/reftests/svg/sizing/standalone--pct-auto--px-0.svg new file mode 100644 index 0000000000..058d60b0cd --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-auto--px-0.svg @@ -0,0 +1,22 @@ +<!--
+ 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"
+ style="width:49%; height:auto;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="70" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. Since
+ the 'height' attribute is set to zero, nothing should be displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--px-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--pct-auto--px-pct--viewBox.svg new file mode 100644 index 0000000000..9e5d41bf8a --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-auto--px-pct--viewBox.svg @@ -0,0 +1,23 @@ +<!--
+ 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"
+ style="width:49%; height:auto;" width="70" height="20%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="70" height="20%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'height' property is set to 'auto', the
+ 'width' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides 49% the height of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--px-pct.svg b/layout/reftests/svg/sizing/standalone--pct-auto--px-pct.svg new file mode 100644 index 0000000000..141fa273ff --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-auto--px-pct.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:49%; height:auto;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="70" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-auto--px-px.svg b/layout/reftests/svg/sizing/standalone--pct-auto--px-px.svg new file mode 100644 index 0000000000..ef19a9be11 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-auto--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:auto;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:auto; width="70" height="70"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio (1:1) will be used since the
+ CSS 'height' property is set to auto. You should see a blue square with
+ sides 49% the width of the content area when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--0-0.svg b/layout/reftests/svg/sizing/standalone--pct-pct--0-0.svg new file mode 100644 index 0000000000..d13cb402eb --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-pct--0-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:49%;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="0" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--0-pct.svg b/layout/reftests/svg/sizing/standalone--pct-pct--0-pct.svg new file mode 100644 index 0000000000..42f674f1c7 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-pct--0-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:49%;" width="0" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="0" height="10%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--0-px.svg b/layout/reftests/svg/sizing/standalone--pct-pct--0-px.svg new file mode 100644 index 0000000000..31c2d0f917 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-pct--0-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:49%;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="0" height="70"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--pct-0.svg b/layout/reftests/svg/sizing/standalone--pct-pct--pct-0.svg new file mode 100644 index 0000000000..6ebadb5fed --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-pct--pct-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:49%;" width="10%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="10%" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--pct-pct.svg b/layout/reftests/svg/sizing/standalone--pct-pct--pct-pct.svg new file mode 100644 index 0000000000..85ff4a96bd --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-pct--pct-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:49%;" width="10%" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="10%" height="10%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--pct-px.svg b/layout/reftests/svg/sizing/standalone--pct-pct--pct-px.svg new file mode 100644 index 0000000000..7c5c13d7a8 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-pct--pct-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:49%;" width="10%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="10%" height="70"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--px-0.svg b/layout/reftests/svg/sizing/standalone--pct-pct--px-0.svg new file mode 100644 index 0000000000..08b549457d --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-pct--px-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:49%;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="70" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--px-pct.svg b/layout/reftests/svg/sizing/standalone--pct-pct--px-pct.svg new file mode 100644 index 0000000000..9c7cff9dac --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-pct--px-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:49%;" width="70" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="70" height="10%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-pct--px-px.svg b/layout/reftests/svg/sizing/standalone--pct-pct--px-px.svg new file mode 100644 index 0000000000..131719ec99 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-pct--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:49%;" width="70" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:49%; width="70" height="70"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--0-0.svg b/layout/reftests/svg/sizing/standalone--pct-px--0-0.svg new file mode 100644 index 0000000000..7de487cc27 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-px--0-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:70px;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="0" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--0-pct.svg b/layout/reftests/svg/sizing/standalone--pct-px--0-pct.svg new file mode 100644 index 0000000000..82e8c58ebe --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-px--0-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:70px;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="0" height="49%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--0-px.svg b/layout/reftests/svg/sizing/standalone--pct-px--0-px.svg new file mode 100644 index 0000000000..165613e31a --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-px--0-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:70px;" width="0" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="0" height="10"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--pct-0.svg b/layout/reftests/svg/sizing/standalone--pct-px--pct-0.svg new file mode 100644 index 0000000000..e194b61893 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-px--pct-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:70px;" width="10%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="10%" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--pct-pct.svg b/layout/reftests/svg/sizing/standalone--pct-px--pct-pct.svg new file mode 100644 index 0000000000..47a36ddbd9 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-px--pct-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:70px;" width="10%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="10%" height="49%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--pct-px.svg b/layout/reftests/svg/sizing/standalone--pct-px--pct-px.svg new file mode 100644 index 0000000000..0c90cf5fbc --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-px--pct-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:70px;" width="10%" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="10%" height="10"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--px-0.svg b/layout/reftests/svg/sizing/standalone--pct-px--px-0.svg new file mode 100644 index 0000000000..892cd41ed3 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-px--px-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:70px;" width="70" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="70" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--px-pct.svg b/layout/reftests/svg/sizing/standalone--pct-px--px-pct.svg new file mode 100644 index 0000000000..bb95c9b6f0 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-px--px-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:70px;" width="70" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="70" height="49%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--pct-px--px-px.svg b/layout/reftests/svg/sizing/standalone--pct-px--px-px.svg new file mode 100644 index 0000000000..c846ffda9c --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--pct-px--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:49%; height:70px;" width="70" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:49%; height:70px; width="70" height="10"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 49% wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--0-0.svg b/layout/reftests/svg/sizing/standalone--px-0--0-0.svg new file mode 100644 index 0000000000..16f26042ab --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-0--0-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:0;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--0-pct.svg b/layout/reftests/svg/sizing/standalone--px-0--0-pct.svg new file mode 100644 index 0000000000..ba8566af7a --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-0--0-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:0;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--0-px.svg b/layout/reftests/svg/sizing/standalone--px-0--0-px.svg new file mode 100644 index 0000000000..c227eb9887 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-0--0-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:0;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="0" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--pct-0.svg b/layout/reftests/svg/sizing/standalone--px-0--pct-0.svg new file mode 100644 index 0000000000..af2e327bc5 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-0--pct-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:0;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--pct-pct.svg b/layout/reftests/svg/sizing/standalone--px-0--pct-pct.svg new file mode 100644 index 0000000000..014341caa9 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-0--pct-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:0;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--pct-px.svg b/layout/reftests/svg/sizing/standalone--px-0--pct-px.svg new file mode 100644 index 0000000000..89d5a4725b --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-0--pct-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:0;" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="49%" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--px-0.svg b/layout/reftests/svg/sizing/standalone--px-0--px-0.svg new file mode 100644 index 0000000000..d9cded74b0 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-0--px-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:0;" width="10" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="10" height="0"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--px-pct.svg b/layout/reftests/svg/sizing/standalone--px-0--px-pct.svg new file mode 100644 index 0000000000..ae3f2e83a3 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-0--px-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:0;" width="10" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="10" height="49%"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-0--px-px.svg b/layout/reftests/svg/sizing/standalone--px-0--px-px.svg new file mode 100644 index 0000000000..9fd20fe474 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-0--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:0;" width="10" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:0; width="10" height="70"</title>
+
+ <desc>
+ This testcase checks that setting the CSS 'height' property to zero
+ prevents the SVG from being displayed. You should not see any red when
+ viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--0-0.svg b/layout/reftests/svg/sizing/standalone--px-auto--0-0.svg new file mode 100644 index 0000000000..a5dceb2643 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-auto--0-0.svg @@ -0,0 +1,22 @@ +<!--
+ 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"
+ style="width:70px; height:auto;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="0" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. Since
+ the 'height' attribute is set to zero, nothing should be displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--0-pct.svg b/layout/reftests/svg/sizing/standalone--px-auto--0-pct.svg new file mode 100644 index 0000000000..7fe4ee8275 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-auto--0-pct.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:70px; height:auto;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="0" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--0-px.svg b/layout/reftests/svg/sizing/standalone--px-auto--0-px.svg new file mode 100644 index 0000000000..06b4bd45ba --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-auto--0-px.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:70px; height:auto;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="0" height="70"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--pct-0.svg b/layout/reftests/svg/sizing/standalone--px-auto--pct-0.svg new file mode 100644 index 0000000000..23db638fb4 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-auto--pct-0.svg @@ -0,0 +1,22 @@ +<!--
+ 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"
+ style="width:70px; height:auto;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="49%" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. Since
+ the 'height' attribute is set to zero, nothing should be displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--pct-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--px-auto--pct-pct--viewBox.svg new file mode 100644 index 0000000000..3551c67b8a --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-auto--pct-pct--viewBox.svg @@ -0,0 +1,23 @@ +<!--
+ 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"
+ style="width:70px; height:auto;" width="20%" height="49%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="20%" height="49%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'height' property is set to 'auto', the
+ 'width' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--pct-pct.svg b/layout/reftests/svg/sizing/standalone--px-auto--pct-pct.svg new file mode 100644 index 0000000000..f823a264fc --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-auto--pct-pct.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:70px; height:auto;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="49%" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--pct-px--viewBox.svg b/layout/reftests/svg/sizing/standalone--px-auto--pct-px--viewBox.svg new file mode 100644 index 0000000000..d311a1681e --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-auto--pct-px--viewBox.svg @@ -0,0 +1,23 @@ +<!--
+ 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"
+ style="width:70px; height:auto;" width="49%" height="10"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="49%" height="10" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'height' property is set to 'auto', the
+ 'width' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--pct-px.svg b/layout/reftests/svg/sizing/standalone--px-auto--pct-px.svg new file mode 100644 index 0000000000..881a1f29c0 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-auto--pct-px.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:70px; height:auto;" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="49%" height="70"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--px-0.svg b/layout/reftests/svg/sizing/standalone--px-auto--px-0.svg new file mode 100644 index 0000000000..8e62aff883 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-auto--px-0.svg @@ -0,0 +1,22 @@ +<!--
+ 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"
+ style="width:70px; height:auto;" width="10" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="10" height="0"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. Since
+ the 'height' attribute is set to zero, nothing should be displayed. You
+ should not see any red when viewing this file.
+ </desc>
+
+ <rect width="1000" height="1000" fill="red"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--px-pct--viewBox.svg b/layout/reftests/svg/sizing/standalone--px-auto--px-pct--viewBox.svg new file mode 100644 index 0000000000..79d6e39e70 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-auto--px-pct--viewBox.svg @@ -0,0 +1,23 @@ +<!--
+ 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"
+ style="width:70px; height:auto;" width="10" height="49%"
+ viewBox="0 0 1 1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="10" height="49%" viewBox="0 0 1 1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio will be taken from the
+ 'viewBox' attribute when the CSS 'height' property is set to 'auto', the
+ 'width' property is set to some other value, and the 'width' and 'height'
+ attributes do not provide an intrinsic ratio. You should see a blue square
+ with sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--px-pct.svg b/layout/reftests/svg/sizing/standalone--px-auto--px-pct.svg new file mode 100644 index 0000000000..af42e2f270 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-auto--px-pct.svg @@ -0,0 +1,21 @@ +<!--
+ 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"
+ style="width:70px; height:auto;" width="10" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="10" height="49%"</title>
+
+ <desc>
+ This testcase checks that the intrinsic height will be taken as the used
+ height when the CSS 'height' property is set to 'auto', the 'width'
+ property is set to some other value, and there is no intrinsic ratio. You
+ should see a blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-auto--px-px.svg b/layout/reftests/svg/sizing/standalone--px-auto--px-px.svg new file mode 100644 index 0000000000..ce7872b456 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-auto--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:auto;" width="1" height="1">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:auto; width="1" height="1"</title>
+
+ <desc>
+ This testcase checks that the intrinsic ratio (1:1) will be used since the
+ CSS 'height' property is set to auto. You should see a blue square with
+ sides of length 70px when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--0-0.svg b/layout/reftests/svg/sizing/standalone--px-pct--0-0.svg new file mode 100644 index 0000000000..66c7159c52 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-pct--0-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:49%;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="0" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--0-pct.svg b/layout/reftests/svg/sizing/standalone--px-pct--0-pct.svg new file mode 100644 index 0000000000..43b2fe4f3a --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-pct--0-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:49%;" width="0" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="0" height="10%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--0-px.svg b/layout/reftests/svg/sizing/standalone--px-pct--0-px.svg new file mode 100644 index 0000000000..caa951ca20 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-pct--0-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:49%;" width="0" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="0" height="70"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--pct-0.svg b/layout/reftests/svg/sizing/standalone--px-pct--pct-0.svg new file mode 100644 index 0000000000..5dd6e8cf4f --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-pct--pct-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:49%;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="49%" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--pct-pct.svg b/layout/reftests/svg/sizing/standalone--px-pct--pct-pct.svg new file mode 100644 index 0000000000..bca83300e1 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-pct--pct-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:49%;" width="49%" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="49%" height="10%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--pct-px.svg b/layout/reftests/svg/sizing/standalone--px-pct--pct-px.svg new file mode 100644 index 0000000000..7e5036407c --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-pct--pct-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:49%;" width="49%" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="49%" height="70"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--px-0.svg b/layout/reftests/svg/sizing/standalone--px-pct--px-0.svg new file mode 100644 index 0000000000..b81a35d96d --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-pct--px-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:49%;" width="10" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="10" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--px-pct.svg b/layout/reftests/svg/sizing/standalone--px-pct--px-pct.svg new file mode 100644 index 0000000000..9a0cabbf11 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-pct--px-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:49%;" width="10" height="10%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="10" height="10%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-pct--px-px.svg b/layout/reftests/svg/sizing/standalone--px-pct--px-px.svg new file mode 100644 index 0000000000..85f4bc946a --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-pct--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:49%;" width="10" height="70">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:49%; width="10" height="70"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 49% high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--0-0.svg b/layout/reftests/svg/sizing/standalone--px-px--0-0.svg new file mode 100644 index 0000000000..5cd0d5cd2b --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-px--0-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:70px;" width="0" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="0" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--0-pct.svg b/layout/reftests/svg/sizing/standalone--px-px--0-pct.svg new file mode 100644 index 0000000000..f9c54e45af --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-px--0-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:70px;" width="0" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="0" height="49%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--0-px.svg b/layout/reftests/svg/sizing/standalone--px-px--0-px.svg new file mode 100644 index 0000000000..1c802d12e2 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-px--0-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:70px;" width="0" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="0" height="10"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--pct-0.svg b/layout/reftests/svg/sizing/standalone--px-px--pct-0.svg new file mode 100644 index 0000000000..c311b88edd --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-px--pct-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:70px;" width="49%" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="49%" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--pct-pct.svg b/layout/reftests/svg/sizing/standalone--px-px--pct-pct.svg new file mode 100644 index 0000000000..3f89fe4e13 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-px--pct-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:70px;" width="49%" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="49%" height="49%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--pct-px.svg b/layout/reftests/svg/sizing/standalone--px-px--pct-px.svg new file mode 100644 index 0000000000..567bff9538 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-px--pct-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:70px;" width="49%" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="49%" height="10"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--px-0.svg b/layout/reftests/svg/sizing/standalone--px-px--px-0.svg new file mode 100644 index 0000000000..d33e353918 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-px--px-0.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:70px;" width="10" height="0">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="10" height="0"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--px-pct.svg b/layout/reftests/svg/sizing/standalone--px-px--px-pct.svg new file mode 100644 index 0000000000..94d3d6e9de --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-px--px-pct.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:70px;" width="10" height="49%">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="10" height="49%"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone--px-px--px-px.svg b/layout/reftests/svg/sizing/standalone--px-px--px-px.svg new file mode 100644 index 0000000000..fbd9142af8 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone--px-px--px-px.svg @@ -0,0 +1,20 @@ +<!--
+ 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"
+ style="width:70px; height:70px;" width="10" height="10">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=294086 -->
+
+ <title>Test: width:70px; height:70px; width="10" height="10"</title>
+
+ <desc>
+ This test checks that the CSS 'width' and 'height' properties take
+ precedence over the SVG 'width' and 'height' attributes. You should see a
+ blue rectangle 70px wide and 70px high when viewing this file.
+ </desc>
+
+ <rect width="100%" height="100%" fill="blue"/>
+
+</svg>
diff --git a/layout/reftests/svg/sizing/standalone-sanity-height-150px.svg b/layout/reftests/svg/sizing/standalone-sanity-height-150px.svg new file mode 100644 index 0000000000..b460f4b808 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone-sanity-height-150px.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"> + <title>Sanity check percentage width</title> + <rect width="100%" height="150" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/sizing/standalone-sanity-height-pct.svg b/layout/reftests/svg/sizing/standalone-sanity-height-pct.svg new file mode 100644 index 0000000000..113613fa36 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone-sanity-height-pct.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"> + <title>Sanity check percentage width</title> + <rect width="100%" height="49%" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/sizing/standalone-sanity-height-px.svg b/layout/reftests/svg/sizing/standalone-sanity-height-px.svg new file mode 100644 index 0000000000..01c72df5a8 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone-sanity-height-px.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"> + <title>Sanity check percentage width</title> + <rect width="100%" height="70" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/sizing/standalone-sanity-width-300px.svg b/layout/reftests/svg/sizing/standalone-sanity-width-300px.svg new file mode 100644 index 0000000000..318bf38af2 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone-sanity-width-300px.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"> + <title>Sanity check percentage width</title> + <rect width="300" height="100%" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/sizing/standalone-sanity-width-pct.svg b/layout/reftests/svg/sizing/standalone-sanity-width-pct.svg new file mode 100644 index 0000000000..050cad0943 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone-sanity-width-pct.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"> + <title>Sanity check percentage width</title> + <rect width="49%" height="100%" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/sizing/standalone-sanity-width-px.svg b/layout/reftests/svg/sizing/standalone-sanity-width-px.svg new file mode 100644 index 0000000000..2abcc29dd6 --- /dev/null +++ b/layout/reftests/svg/sizing/standalone-sanity-width-px.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"> + <title>Sanity check percentage width</title> + <rect width="70" height="100%" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/sizing/svg-image-util.js b/layout/reftests/svg/sizing/svg-image-util.js new file mode 100644 index 0000000000..d58e622ec7 --- /dev/null +++ b/layout/reftests/svg/sizing/svg-image-util.js @@ -0,0 +1,74 @@ +/** + * Reusable SVG data uri prefix for generated SVGs. + */ +const SVG_DATA_URI_PREFIX = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"'; +/** + * Reusable SVG data uri suffix for generated SVGs. + */ +const SVG_DATA_URI_SUFFIX = '><rect fill="brown" x="-2000" y="-2000" width="4000" height="4000"></rect><rect fill="green" height="50" width="50"></rect><rect fill="yellow" x="10" y="10" height="30" width="30"></rect></svg>'; + +/** + * Generates full data URI for an SVG document, with the given parameters + * on the SVG element. + * + * @param aWidth The width attribute, or null for no width. + * @param aHeight The height attribute, or null for no height. + * @param aViewbox The viewBox attribute, or null for no viewBox. + */ +function generateSVGDataURI(aWidth, aHeight, aViewBox) { + let datauri = SVG_DATA_URI_PREFIX; + + if (aWidth) { + datauri += " width=\"" + aWidth + "\"" + } + + if (aHeight) { + datauri += " height=\"" + aHeight + "\""; + } + + if (aViewBox) { + datauri += " viewBox=\"" + aViewBox + "\""; + } + + datauri += SVG_DATA_URI_SUFFIX; + + return datauri; +} + +/** + * Generates a canvas, with the given width and height parameters, and uses + * CanvasRenderingContext2D.drawImage() to draw a SVG image with the given + * width and height attributes. + * + * @param aCanvasWidth The width attribute of the canvas. + * @param aCanvasHeight The height attribute of the canvas. + * @param aSVGWidth The width attribute of the svg, or null for no width. + * @param aSVGHeight The height attribute of the svg, or null for no height. + * @param aSVGViewBox The viewBox attribute sf the svg, or null for no viewBox. + * + * @returns A promise that resolves when the SVG image has been drawn to the + * created canvas + */ +async function generateCanvasDrawImageSVG(aCanvasWidth, aCanvasHeight, aSVGWidth, + aSVGHeight, aSVGViewBox) { + let canvas = document.createElement("canvas"); + let ctx = canvas.getContext("2d"); + document.body.appendChild(canvas); + + canvas.setAttribute("width", aCanvasWidth); + canvas.setAttribute("height", aCanvasHeight); + + let img = document.createElement("img"); + + let promise = new Promise(resolve => { + img.onload = () => { + ctx.drawImage(img, 0, 0); + resolve(); + }; + }); + + let uri = generateSVGDataURI(aSVGWidth, aSVGHeight, aSVGViewBox); + img.src = uri; + + return promise; +} diff --git a/layout/reftests/svg/smil/anim-additive-fallback-1.svg b/layout/reftests/svg/smil/anim-additive-fallback-1.svg new file mode 100644 index 0000000000..1978663e2c --- /dev/null +++ b/layout/reftests/svg/smil/anim-additive-fallback-1.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.5, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue" display="none"> + <!-- The following animation is marked as additive even though the display + property is not additive. We should basically behave as if the additive + attribute were not specified and set display to 'block' after 0.5s. + --> + <animate attributeName="display" from="none" to="block" additive="sum" + dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-change-display-block-for-dynamically-appended-elem.html b/layout/reftests/svg/smil/anim-change-display-block-for-dynamically-appended-elem.html new file mode 100644 index 0000000000..e9be6a7cae --- /dev/null +++ b/layout/reftests/svg/smil/anim-change-display-block-for-dynamically-appended-elem.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>Test dynamically-appended animation in a subtree that dynamically became 'display:none'</title> + </head> + <body style="background-color: lime;"> + <div id="target" style="display: none;"> + <svg> + <rect width="100" height="100" fill="brown" id="rect"> + </rect> + </svg> + </div> + <script> + document.addEventListener('MozReftestInvalidate', function() { + var svg = document.getElementsByTagName("svg")[0]; + svg.pauseAnimations(); // pause svg animation. + + var target = document.getElementById("target"); + var rect = document.getElementById("rect"); + var animate = document.createElementNS('http://www.w3.org/2000/svg', + 'animate'); + animate.setAttribute('attributeName', 'fill'); + animate.setAttribute('from', 'blue'); + animate.setAttribute('to', 'red'); + animate.setAttribute('dur', '100s'); + rect.appendChild(animate); + + requestAnimationFrame(function(time) { + target.style.display = 'block'; + requestAnimationFrame(function(time) { + document.documentElement.removeAttribute("class"); + }); + }); + }); + </script> + </body> +</html> diff --git a/layout/reftests/svg/smil/anim-change-display-none-for-ancestor-elem.html b/layout/reftests/svg/smil/anim-change-display-none-for-ancestor-elem.html new file mode 100644 index 0000000000..e34f52056e --- /dev/null +++ b/layout/reftests/svg/smil/anim-change-display-none-for-ancestor-elem.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>Test animation in a subtree that dynamically becames 'display:none'</title> + </head> + <body style="background-color: lime;"> + <div id="target"> + <svg> + <rect width="100%" height="100%" fill="blue"> + <animate attributeName="fill" from="brown" to="red" dur="100s"/> + </rect> + </svg> + </div> + <script> + document.addEventListener('MozReftestInvalidate', function() { + var target = document.getElementById("target"); + target.style.display = "none"; + + requestAnimationFrame(function(time) { + document.documentElement.removeAttribute("class"); + }); + }); + </script> + </body> +</html> diff --git a/layout/reftests/svg/smil/anim-change-display-none-for-dynamically-appended-elem.html b/layout/reftests/svg/smil/anim-change-display-none-for-dynamically-appended-elem.html new file mode 100644 index 0000000000..ecb1720b9b --- /dev/null +++ b/layout/reftests/svg/smil/anim-change-display-none-for-dynamically-appended-elem.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>Test dynamically-appended animation on an element that dynamically becomes 'display:none'</title> + </head> + <body style="background-color: lime;"> + <div> + <svg> + <rect width="100" height="100" fill="brown" id="rect"> + </rect> + </svg> + </div> + <script> + document.addEventListener('MozReftestInvalidate', function() { + var rect = document.getElementById("rect"); + var animate = document.createElementNS('http://www.w3.org/2000/svg', + 'animate'); + animate.setAttribute('attributeName', 'fill'); + animate.setAttribute('from', 'blue'); + animate.setAttribute('to', 'red'); + animate.setAttribute('dur', '100s'); + rect.appendChild(animate); + + requestAnimationFrame(function(time) { + rect.style.display = 'none'; + requestAnimationFrame(function(time) { + document.documentElement.removeAttribute("class"); + }); + }); + }); + </script> + </body> +</html> diff --git a/layout/reftests/svg/smil/anim-change-display-none-for-target-elem.html b/layout/reftests/svg/smil/anim-change-display-none-for-target-elem.html new file mode 100644 index 0000000000..6852994571 --- /dev/null +++ b/layout/reftests/svg/smil/anim-change-display-none-for-target-elem.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <head> + <title>Test animation on an element that dynamically becomes 'display:none'</title> + </head> + <body style="background-color: lime;"> + <div> + <svg> + <rect width="100%" height="100%" fill="blue" id="rect"> + <animate attributeName="fill" from="brown" to="red" dur="100s"/> + </rect> + </svg> + </div> + <script> + document.addEventListener('MozReftestInvalidate', function() { + var rect = document.getElementById("rect"); + rect.style.display = "none"; + + requestAnimationFrame(function(time) { + document.documentElement.removeAttribute("class"); + }); + }); + </script> + </body> +</html> diff --git a/layout/reftests/svg/smil/anim-class-01.svg b/layout/reftests/svg/smil/anim-class-01.svg new file mode 100644 index 0000000000..4fe4faab21 --- /dev/null +++ b/layout/reftests/svg/smil/anim-class-01.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the class attribute on "rect" elements</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <style type="text/css"> + + .start {visibility: hidden; fill: red; } + .midway {visibility: visible; fill: red; } + .final {fill: lime; } + + </style> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%"> + <animate attributeName="class" attributeType="XML" + from="midway" to="final midway" begin="0.5s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-class-02.svg b/layout/reftests/svg/smil/anim-class-02.svg new file mode 100644 index 0000000000..67b2b3f4d9 --- /dev/null +++ b/layout/reftests/svg/smil/anim-class-02.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the class attribute on "rect" elements</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <style type="text/css"> + + * {fill: lime;} + .start {visibility: visible; fill: red; } + + </style> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" class="start"> + <set attributeName="class" attributeType="XML" + to="" begin="0.5s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-class-03.svg b/layout/reftests/svg/smil/anim-class-03.svg new file mode 100644 index 0000000000..297569edfd --- /dev/null +++ b/layout/reftests/svg/smil/anim-class-03.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the class attribute on "rect" elements</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <style type="text/css"> + + .start {fill: red; } + .finish {fill: lime;} + + </style> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" class="start"> + <set attributeName="class" attributeType="XML" + to="finish" begin="0.5s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-class-04-ref.svg b/layout/reftests/svg/smil/anim-class-04-ref.svg new file mode 100644 index 0000000000..0f5d535bd4 --- /dev/null +++ b/layout/reftests/svg/smil/anim-class-04-ref.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"> + <title>Reference for animation of the class attribute to an invalid value on "rect" elements</title> + <rect width="100%" height="100%" fill="black"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-class-04.svg b/layout/reftests/svg/smil/anim-class-04.svg new file mode 100644 index 0000000000..191b5d3b97 --- /dev/null +++ b/layout/reftests/svg/smil/anim-class-04.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the class attribute on "rect" elements</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <style type="text/css"> + + .start {fill: red; } + + </style> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" class="start"> + <set attributeName="class" attributeType="XML" + to="#ThisIsAnInvalidClassName" begin="0.5s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-clipPath-viewBox-ref.svg b/layout/reftests/svg/smil/anim-clipPath-viewBox-ref.svg new file mode 100644 index 0000000000..ffc7694ba4 --- /dev/null +++ b/layout/reftests/svg/smil/anim-clipPath-viewBox-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="600" height="400"> + <circle cx="300" cy="200" r="100" style="fill:blue;"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/smil/anim-clipPath-viewBox.svg b/layout/reftests/svg/smil/anim-clipPath-viewBox.svg new file mode 100644 index 0000000000..e02dbea7d3 --- /dev/null +++ b/layout/reftests/svg/smil/anim-clipPath-viewBox.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="600" height="400" preserveAspectRatio="none" + viewBox="50 100 500 200" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="50" y="100" width="500" height="200" style="fill:blue;" + clip-path="circle(100px at center) view-box"/> + <animate attributeName="viewBox" values="50 100 500 200; 0 0 600 400" + dur="0.5s" fill="freeze"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/smil/anim-conditions-01.svg b/layout/reftests/svg/smil/anim-conditions-01.svg new file mode 100644 index 0000000000..093a425e1e --- /dev/null +++ b/layout/reftests/svg/smil/anim-conditions-01.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation is disabled if conditional processing fails</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="lime"> + <set systemLanguage="foo" attributeName="width" + to="0%" dur="5s" begin="0s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-conditions-02.svg b/layout/reftests/svg/smil/anim-conditions-02.svg new file mode 100644 index 0000000000..0b24d9a3e3 --- /dev/null +++ b/layout/reftests/svg/smil/anim-conditions-02.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation is enabled if conditional processing succeeds</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="red"/> + <rect width="0%" height="100%" fill="lime"> + <set requiredFeatures="http://www.w3.org/TR/SVG11/feature#Gradient" attributeName="width" + to="100%" dur="5s" begin="0s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-defs-fill.svg b/layout/reftests/svg/smil/anim-defs-fill.svg new file mode 100644 index 0000000000..e71e59f0b2 --- /dev/null +++ b/layout/reftests/svg/smil/anim-defs-fill.svg @@ -0,0 +1,22 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <title>Test animation element in 'defs' element with 'fill' property</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect id="target" fill="red" width="100%" height="100%"/> + <defs> + <animate xlink:href="#target" + attributeName="fill" + calcMode="discrete" + values="red;lime" + dur="100s"/> + </defs> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + setTimeAndWaitToSnapshot(49.9, 0.1); + }); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-defs-gradient-attribute.svg b/layout/reftests/svg/smil/anim-defs-gradient-attribute.svg new file mode 100644 index 0000000000..56fea42473 --- /dev/null +++ b/layout/reftests/svg/smil/anim-defs-gradient-attribute.svg @@ -0,0 +1,25 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <title>Test animation of gradient attribute in 'defs' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect fill="url(#gradient)" width="100%" height="100%"/> + <defs> + <linearGradient id="gradient" x1="0"> + <stop offset="0%" stop-color="red" /> + <stop offset="100%" stop-color="lime" /> + <animate attributeName="x1" + values="0;1" + calcMode="discrete" + dur="100s"/> + </linearGradient> + </defs> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + setTimeAndWaitToSnapshot(49.9, 0.1); + }); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-defs-gradient-property.svg b/layout/reftests/svg/smil/anim-defs-gradient-property.svg new file mode 100644 index 0000000000..11cc58687e --- /dev/null +++ b/layout/reftests/svg/smil/anim-defs-gradient-property.svg @@ -0,0 +1,25 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <title>Test animation of gradient property in 'defs' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect fill="url(#gradient)" width="100%" height="100%"/> + <defs> + <linearGradient id="gradient"> + <stop> + <animate attributeName="stop-color" + values="red;lime" + calcMode="discrete" + dur="100s"/> + </stop> + </linearGradient> + </defs> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + setTimeAndWaitToSnapshot(49.9, 0.1); + }); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-defs-width.svg b/layout/reftests/svg/smil/anim-defs-width.svg new file mode 100644 index 0000000000..1308e0edfd --- /dev/null +++ b/layout/reftests/svg/smil/anim-defs-width.svg @@ -0,0 +1,22 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <title>Test animation element in 'defs' element with 'width' attribute</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect id="target" fill="lime" width="0%" height="100%"/> + <defs> + <animate xlink:href="#target" + attributeName="width" + values="0%;100%" + calcMode="discrete" + dur="100s"/> + </defs> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + setTimeAndWaitToSnapshot(49.9, 0.1); + }); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-replace-sum-1.svg b/layout/reftests/svg/smil/anim-discrete-replace-sum-1.svg new file mode 100644 index 0000000000..d973c4a857 --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-replace-sum-1.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="20" fill="blue"> + <animate attributeName="height" calcMode="discrete" + additive="replace" accumulate="sum" + from="20" to="100" repeatCount="2" + begin="0s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-sum-none-1.svg b/layout/reftests/svg/smil/anim-discrete-sum-none-1.svg new file mode 100644 index 0000000000..dd554cc78a --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-sum-none-1.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="20" fill="blue"> + <animate attributeName="height" calcMode="discrete" + additive="sum" accumulate="none" + from="20" to="180" + begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-sum-sum-1.svg b/layout/reftests/svg/smil/anim-discrete-sum-sum-1.svg new file mode 100644 index 0000000000..e57c692122 --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-sum-sum-1.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="20" fill="blue"> + <animate attributeName="height" calcMode="discrete" + additive="sum" accumulate="sum" + from="20" to="90" repeatCount="2" + begin="0s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-to-1.svg b/layout/reftests/svg/smil/anim-discrete-to-1.svg new file mode 100644 index 0000000000..41a078764c --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-to-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.0, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate attributeName="height" calcMode="discrete" + to="100" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-to-2.svg b/layout/reftests/svg/smil/anim-discrete-to-2.svg new file mode 100644 index 0000000000..e64d5d9d0f --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-to-2.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.99, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate attributeName="height" calcMode="discrete" + to="100" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-to-3.svg b/layout/reftests/svg/smil/anim-discrete-to-3.svg new file mode 100644 index 0000000000..0430821609 --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-to-3.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.0, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="100" fill="blue"> + <animate attributeName="height" calcMode="discrete" + to="200" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-to-4.svg b/layout/reftests/svg/smil/anim-discrete-to-4.svg new file mode 100644 index 0000000000..4295ce0552 --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-to-4.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="100" fill="blue"> + <animate attributeName="height" calcMode="discrete" + to="200" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-values-1.svg b/layout/reftests/svg/smil/anim-discrete-values-1.svg new file mode 100644 index 0000000000..8af8ac636c --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-values-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" calcMode="discrete" + values="100; 200; 50" begin="0s" dur="5s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-values-2.svg b/layout/reftests/svg/smil/anim-discrete-values-2.svg new file mode 100644 index 0000000000..c05693e143 --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-values-2.svg @@ -0,0 +1,31 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(29, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <title>Test discrete keyTimes are scaled correctly (Bug 681645)</title> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate attributeName="fill" begin="0" dur="100s" + calcMode="discrete" + values="red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;blue; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red" + keyTimes="0.00;0.01;0.02;0.03;0.04;0.05;0.06;0.07;0.08;0.09; + 0.10;0.11;0.12;0.13;0.14;0.15;0.16;0.17;0.18;0.19; + 0.20;0.21;0.22;0.23;0.24;0.25;0.26;0.27;0.28;0.29; + 0.30;0.31;0.32;0.33;0.34;0.35;0.36;0.37;0.38;0.39; + 0.40;0.41;0.42;0.43;0.44;0.45;0.46;0.47;0.48;0.49; + 0.50;0.51;0.52;0.53;0.54;0.55;0.56;0.57;0.58;0.59; + 0.60;0.61;0.62;0.63;0.64;0.65;0.66;0.67;0.68;0.69; + 0.70;0.71;0.72;0.73;0.74;0.75;0.76;0.77;0.78;0.79; + 0.80;0.81;0.82;0.83;0.84;0.85;0.86;0.87;0.88;0.89; + 0.90;0.91;0.92;0.93;0.94;0.95;0.96;0.97;0.98;0.99"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-discrete-values-3.svg b/layout/reftests/svg/smil/anim-discrete-values-3.svg new file mode 100644 index 0000000000..c6b850bfd6 --- /dev/null +++ b/layout/reftests/svg/smil/anim-discrete-values-3.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(29, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <title>Test discrete keyTimes are scaled correctly (Bug 681645)</title> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate attributeName="fill" begin="0" dur="100s" + calcMode="discrete" + values="red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;blue; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red; + red;red;red;red;red;red;red;red;red;red"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-display-in-g-element.svg b/layout/reftests/svg/smil/anim-display-in-g-element.svg new file mode 100644 index 0000000000..8916aea893 --- /dev/null +++ b/layout/reftests/svg/smil/anim-display-in-g-element.svg @@ -0,0 +1,23 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <title>Test animation that changes 'display' attribute on an element that is not the immediate parent</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <g display="none" id="g"> + <rect width="100%" height="100%" fill="lime"> + <animate xlink:href="#g" + attributeName="display" + values="none;inline" + calcMode="discrete" + dur="100s"/> + </rect> + </g> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + setTimeAndWaitToSnapshot(49.9, 0.1); + }); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-display.svg b/layout/reftests/svg/smil/anim-display.svg new file mode 100644 index 0000000000..53e92d26bb --- /dev/null +++ b/layout/reftests/svg/smil/anim-display.svg @@ -0,0 +1,20 @@ +<svg version="1.1" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <title>Test animation that changes 'display' attribute</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect display="none" width="100%" height="100%" fill="lime"> + <animate attributeName="display" + values="none;inline" + calcMode="discrete" + dur="100s"/> + </rect> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + setTimeAndWaitToSnapshot(49.9, 0.1); + }); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-feComponentTransfer-01.svg b/layout/reftests/svg/smil/anim-feComponentTransfer-01.svg new file mode 100644 index 0000000000..69f879d804 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feComponentTransfer-01.svg @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "intercept" attribute of the "feComponentTransfer" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <filter id="flood_filter" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="linear" slope="0" intercept="1"> + <animate attributeName="intercept" + calcMode="linear" + begin="0s" dur="2s" + from="1" to="-1" + fill="freeze"/> + </feFuncR> + <feFuncG type="linear" slope="0" intercept="0"> + <animate attributeName="intercept" + calcMode="linear" + begin="0s" dur="2s" + from="0" to="2" + fill="freeze"/> + </feFuncG> + <feFuncB type="identity"/> + </feComponentTransfer> + </filter> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="red" filter="url(#flood_filter)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feComposite-operator-01.svg b/layout/reftests/svg/smil/anim-feComposite-operator-01.svg new file mode 100644 index 0000000000..0223cea931 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feComposite-operator-01.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "operator" enum attribute on the "feComposite" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <filter id="composite_filter_1" x="-100%" y="0%" width="200%" height="100%"> + <feFlood flood-color="lime" result="lime"/> + <feComposite in="lime" in2="SourceGraphic" operator="out"> + <!-- this should turn the referencing element red at 1.25s --> + <animate attributeName="operator" + calcMode="discrete" + begin="0s" dur="2.5s" + from="out" to="in" + fill="freeze"/> + </feComposite> + </filter> + <filter id="composite_filter_2" x="0%" y="0%" width="200%" height="100%"> + <feFlood flood-color="lime" result="lime"/> + <feComposite in="lime" in2="SourceGraphic" operator="out"> + <!-- this should turn the referencing element lime at 1s --> + <animate attributeName="operator" + calcMode="discrete" + begin="0s" dur="2s" + from="out" to="in" + fill="freeze"/> + </feComposite> + </filter> + <rect width="100%" height="100%" fill="lime"/> + + <!-- 40% through discrete animation simple duration - test animation doesn't affect the element too early --> + <rect width="100" height="100" fill="red"/> + <rect x="100" width="100" height="100" fill="red" filter="url(#composite_filter_1)"/> + + <!-- 50% through discrete animation simple duration - test animation affects the element now --> + <rect y="100" width="100" height="100" fill="red"/> + <rect y="100" width="100" height="100" fill="red" filter="url(#composite_filter_2)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01-ref.svg b/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01-ref.svg new file mode 100644 index 0000000000..db5ab20e38 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01-ref.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <title>Testcase for animation of the "order" attribute of the "feConvolveMatrix" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <defs> + <filter id="f"> + <feConvolveMatrix order="3" kernelMatrix="1 1 1 1 1 1 1 1 1" edgeMode="none"></feConvolveMatrix> + </filter> + </defs> + <g filter="url(#f)"> + <rect x="10" y="10" width="50" height="100" fill="orange"/> + <rect x="60" y="10" width="50" height="100" fill="blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg b/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg new file mode 100644 index 0000000000..d24eb3b8d7 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feConvolveMatrix-order-01.svg @@ -0,0 +1,53 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <title>Testcase for animation of the "order" attribute of the "feConvolveMatrix" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <defs> + <filter id="f"> + <feConvolveMatrix order="1" kernelMatrix="1" edgeMode="none"> + <!-- Animate the kernel matrix dimensions from 1x1 to 5x5. --> + <animate attributeName="order" + calcMode="linear" + begin="0s" dur="4s" + from="1" to="5 5" + fill="freeze"/> + <!-- + Animate the kernel matrix values. + Each successive matrix blurs the image more. + We will pause on the 3x3 matrix. + --> + <animate attributeName="kernelMatrix" + calcMode="linear" + begin="0s" dur="1s" + from="1" to="1 1 1 1" + fill="freeze"/> + <animate attributeName="kernelMatrix" + calcMode="linear" + begin="1s" dur="1s" + from="1 1 1 1" to="1 1 1 1 1 1 1 1 1" + fill="freeze"/> + <animate attributeName="kernelMatrix" + calcMode="linear" + begin="2s" dur="1s" + from="1 1 1 1 1 1 1 1 1" to="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" + fill="freeze"/> + <animate attributeName="kernelMatrix" + calcMode="linear" + begin="3s" dur="1s" + from="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" to="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1" + fill="freeze"/> + </feConvolveMatrix> + </filter> + </defs> + <g filter="url(#f)"> + <!-- The edge between the orange rect and the blue rect will become blurry. --> + <rect x="10" y="10" width="50" height="100" fill="orange"/> + <rect x="60" y="10" width="50" height="100" fill="blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/anim-feConvolveMatrix-preserveAlpha-01.svg b/layout/reftests/svg/smil/anim-feConvolveMatrix-preserveAlpha-01.svg new file mode 100644 index 0000000000..0eb3a7a7d6 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feConvolveMatrix-preserveAlpha-01.svg @@ -0,0 +1,41 @@ +<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ class="reftest-wait"
+ onload="setTimeAndSnapshot(1, true)">
+ <title>Test animation of the "preserveAlpha" <boolean> attribute on the "feConvolveMatrix" element</title>
+ <script xlink:href="smil-util.js" type="text/javascript"/>
+ <filter id="convolve_1">
+ <feConvolveMatrix order="2 2" kernelMatrix="0 0 0 0" preserveAlpha="true">
+ <!-- turn the referencing element from transparent to red at 1.25s -->
+ <animate attributeName="preserveAlpha"
+ calcMode="discrete"
+ begin="0s" dur="2.5s"
+ from="false" to="true"
+ fill="freeze"/>
+ </feConvolveMatrix>
+ <feColorMatrix type="matrix"
+ values="0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+ </filter>
+ <filter id="convolve_2">
+ <feConvolveMatrix order="2 2" kernelMatrix="0 0 0 0" preserveAlpha="true">
+ <!-- turn the referencing element from red to transparent at 1s -->
+ <animate attributeName="preserveAlpha"
+ calcMode="discrete"
+ begin="0s" dur="2s"
+ from="true" to="false"
+ fill="freeze"/>
+ </feConvolveMatrix>
+ <feColorMatrix type="matrix"
+ values="0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+ </filter>
+ <rect width="100%" height="100%" fill="lime"/>
+
+ <!-- 40% through discrete animation simple duration -
+ tests that the animation doesn't affect the element too early -->
+ <rect width="100" height="50" fill="red" filter="url(#convolve_1)"/>
+
+ <!-- 50% through discrete animation simple duration -
+ tests that the animation affects the element now -->
+ <rect y="50" width="100" height="50" fill="red" filter="url(#convolve_2)"/>
+
+</svg>
diff --git a/layout/reftests/svg/smil/anim-feDistantLight-01-ref.svg b/layout/reftests/svg/smil/anim-feDistantLight-01-ref.svg new file mode 100644 index 0000000000..6fe45b7faf --- /dev/null +++ b/layout/reftests/svg/smil/anim-feDistantLight-01-ref.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for animation of the "elevation" attribute of the "feDistantLight" element</title> + <defs> + <filter id="f" x="0" y="0" width="0.5" height="0.5"> + <feDiffuseLighting kernelUnitLength="1" lighting-color="lime"> + <feDistantLight elevation="100"> + </feDistantLight> + </feDiffuseLighting> + </filter> + </defs> + <path d="M0,0 h100 v100 h-100 z" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feDistantLight-01.svg b/layout/reftests/svg/smil/anim-feDistantLight-01.svg new file mode 100644 index 0000000000..42221cdb48 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feDistantLight-01.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Testcase for animation of the "elevation" attribute of the "feDistantLight" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <defs> + <filter id="f" x="0" y="0" width="0.5" height="0.5"> + <feDiffuseLighting kernelUnitLength="1" lighting-color="lime"> + <feDistantLight elevation="0"> + <animate attributeName="elevation" + calcMode="linear" + begin="0s" dur="2s" + from="0" to="200" + fill="freeze"/> + </feDistantLight> + </feDiffuseLighting> + </filter> + </defs> + <path d="M0,0 h100 v100 h-100 z" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feFuncR-tableValues-01-ref.svg b/layout/reftests/svg/smil/anim-feFuncR-tableValues-01-ref.svg new file mode 100644 index 0000000000..fd09b807e7 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feFuncR-tableValues-01-ref.svg @@ -0,0 +1,52 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <title></title> + + <linearGradient id="gradient"> + <stop offset="0" stop-color="black" /> + <stop offset="100%" stop-color="red" /> + </linearGradient> + + <!-- Comparison for calcMode="linear". --> + + <filter id="f_calcMode_linear_to" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 2 2 0"/> + </feComponentTransfer> + </filter> + <rect x="20" y="20" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_linear_to)"/> + + + <!-- Comparison for 'by' animation. --> + + <filter id="f_calcMode_linear_by" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 2 2 0"/> + </feComponentTransfer> + </filter> + <rect x="20" y="60" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_linear_by)"/> + + + <!-- Comparison for calcMode="paced". --> + + <filter id="f_calcMode_paced" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 2 2 0"/> + </feComponentTransfer> + </filter> + <rect x="20" y="100" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_paced)"/> + + + <!-- Comparison for calcMode="discrete". --> + + <filter id="f_calcMode_discrete" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 2 2 0"/> + </feComponentTransfer> + </filter> + <rect x="20" y="140" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_discrete)"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-feFuncR-tableValues-01.svg b/layout/reftests/svg/smil/anim-feFuncR-tableValues-01.svg new file mode 100644 index 0000000000..512e1ab074 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feFuncR-tableValues-01.svg @@ -0,0 +1,101 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the <number-list> attribute on the 'text' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <linearGradient id="gradient"> + <stop offset="0" stop-color="black" /> + <stop offset="100%" stop-color="red" /> + </linearGradient> + + <!-- The difference between respective numbers in the effective 'from' and + 'to' lists below is carefully designed to be a factor of 3. That way + our reference file (which checks against a one third complete animation) + can contain whole numbers, which is necessary to avoid failure due to + hard coded rounded numbers in the reference not matching platform + specific rounding behaviour. + --> + + + <!-- Test calcMode="linear". --> + + <filter id="f_calcMode_linear_to" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="-1 3 3 -1"> + + <!-- At 1s the animVal should be "0 2 2 0". --> + <animate attributeName="tableValues" + calcMode="linear" + begin="0s" dur="3s" + to="2 0 0 2" + fill="freeze"/> + + </feFuncR> + </feComponentTransfer> + </filter> + <rect x="20" y="20" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_linear_to)"/> + + + <!-- Test 'by' animation. --> + + <filter id="f_calcMode_linear_by" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="-1 3 3 -1"> + + <!-- At 1s the animVal should be "0 2 2 0". --> + <animate attributeName="tableValues" + calcMode="linear" + begin="0s" dur="3s" + by="3 -3 -3 3" + fill="freeze"/> + + </feFuncR> + </feComponentTransfer> + </filter> + <rect x="20" y="60" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_linear_by)"/> + + + <!-- Test calcMode="paced". --> + + <filter id="f_calcMode_paced" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="-1 3 3 -1"> + + <!-- At 1s the animVal should be "0 2 2 0". --> + <animate attributeName="tableValues" + calcMode="paced" + begin="0s" dur="3s" + values="-1 3 3 -1; 1 1 1 1; 2 0 0 2" + fill="freeze"/> + + </feFuncR> + </feComponentTransfer> + </filter> + <rect x="20" y="100" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_paced)"/> + + + <!-- Test calcMode="discrete". --> + + <filter id="f_calcMode_discrete" x="0%" y="0%" width="100%" height="100%"> + <feComponentTransfer> + <feFuncR type="table" tableValues="0 0 0 0"> + + <!-- The value should be "0 2 2 0" from 1s onwards. --> + <animate attributeName="tableValues" + calcMode="discrete" + begin="0s" dur="2s" + to="0 2 2 0" + fill="freeze"/> + + </feFuncR> + </feComponentTransfer> + </filter> + <rect x="20" y="140" width="256" height="20" fill="url(#gradient)" + filter="url(#f_calcMode_discrete)"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-feGaussianBlur-01.svg b/layout/reftests/svg/smil/anim-feGaussianBlur-01.svg new file mode 100644 index 0000000000..40f804d74c --- /dev/null +++ b/layout/reftests/svg/smil/anim-feGaussianBlur-01.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.9999, true)"> + <title>Test animation of the "stdDeviation" <number-optional-number> attribute on "feGaussianBlur" elements</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <filter id="filter" x="0" y="0" width="1" height="1"> + <feGaussianBlur stdDeviation="50"> + <animate attributeName="stdDeviation" + calcMode="linear" + begin="0s" dur="2s" + from="100,100" to="0" + fill="freeze"/> + </feGaussianBlur> + </filter> + <rect width="100%" height="100%" fill="lime"/> + <g transform="translate(50, 0)"> + <circle fill="red" cx="100" cy="100" r="98" transform="translate(50, 0)" filter="url(#filter)"/> + </g> + <circle fill="lime" cx="200" cy="100" r="100"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feImage-preserveAspectRatio-01.svg b/layout/reftests/svg/smil/anim-feImage-preserveAspectRatio-01.svg new file mode 100644 index 0000000000..13d3113a21 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feImage-preserveAspectRatio-01.svg @@ -0,0 +1,31 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <title>Test animation of the "preserveAspectRatio" attribute on the "feImage" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(1, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <rect width="100%" height="100%" fill="lime"/> + + <filter id="filter" filterUnits="userSpaceOnUse" + x="0" y="0" width="100" height="20"> + <!-- data: URI is a 1x1 lime GIF --> + <feImage preserveAspectRatio="xMidYMid meet" + style="image-rendering: optimizeSpeed;" + xlink:href="data:image/gif,GIF87a%01%00%01%00%80%01%00%00%FF%00%FF%FF%FF%2C%00%00%00%00%01%00%01%00%00%02%02D%01%00%3B"> + <animate attributeName="preserveAspectRatio" + begin="0s" dur="2s" + to="xMidYMid slice" + fill="freeze"/> + </feImage> + </filter> + + <rect width="100" height="20" fill="red"/> + <rect width="100" height="20" filter="url(#filter)"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-feOffset-01.svg b/layout/reftests/svg/smil/anim-feOffset-01.svg new file mode 100644 index 0000000000..30c8795670 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feOffset-01.svg @@ -0,0 +1,34 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "dx" and "dy" attributes on the "feOffset" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <filter id="offset_filter_1" x="0%" y="0%" width="300%" height="100%"> + <feOffset in="SourceGraphic"> + <animate attributeName="dx" + calcMode="linear" + begin="0s" dur="2s" + from="0" to="200" + fill="freeze"/> + </feOffset> + </filter> + <filter id="offset_filter_2" x="0%" y="0%" width="100%" height="200%"> + <feOffset in="SourceGraphic"> + <animate attributeName="dy" + calcMode="linear" + begin="0s" dur="1s" + from="0" to="100" + fill="freeze"/> + </feOffset> + </filter> + <rect width="100%" height="100%" fill="lime"/> + + <!-- test 50% completed animation --> + <rect x="100" width="100" height="100" fill="red"/> + <rect width="100" height="100" fill="lime" filter="url(#offset_filter_1)"/> + + <!-- test 100% completed animation --> + <rect y="100" width="100" height="100" fill="red"/> + <rect width="100" height="100" fill="lime" filter="url(#offset_filter_2)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feSpotLight-01-ref.svg b/layout/reftests/svg/smil/anim-feSpotLight-01-ref.svg new file mode 100644 index 0000000000..adc43569ee --- /dev/null +++ b/layout/reftests/svg/smil/anim-feSpotLight-01-ref.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for animation of the "elevation" attribute of the "feSpotLight" element</title> + <defs> + <filter id="f" x="0" y="0" width="0.5" height="0.5"> + <feSpecularLighting surfaceScale="5" specularConstant=".75" + specularExponent="20" lighting-color="lime"> + <feSpotLight x="0.25" y="0.25" z="100"> + </feSpotLight> + </feSpecularLighting> + </filter> + </defs> + <path d="M0,0 h100 v100 h-100 z" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feSpotLight-01.svg b/layout/reftests/svg/smil/anim-feSpotLight-01.svg new file mode 100644 index 0000000000..011a9ecff9 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feSpotLight-01.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Testcase for animation of the "elevation" attribute of the "feSpotLight" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <defs> + <filter id="f" x="0" y="0" width="0.5" height="0.5"> + <feSpecularLighting surfaceScale="5" specularConstant=".75" + specularExponent="20" lighting-color="lime"> + <feSpotLight x="0.25" y="0.25" z="0"> + <animate attributeName="z" + calcMode="linear" + begin="0s" dur="2s" + from="0" to="200" + fill="freeze"/> + </feSpotLight> + </feSpecularLighting> + </filter> + </defs> + <path d="M0,0 h100 v100 h-100 z" filter="url(#f)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01-ref.svg b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01-ref.svg new file mode 100644 index 0000000000..74f4070e5f --- /dev/null +++ b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01-ref.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <filter id="filter_1" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"/> + </filter> + <filter id="filter_2" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="2"/> + </filter> + <filter id="filter_3" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3"/> + </filter> + <filter id="filter_4" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"/> + </filter> + <rect x="0" y="0" width="20" height="20" filter="url(#filter_3)"/> + <rect x="20" y="0" width="20" height="20" filter="url(#filter_4)"/> + <rect x="0" y="20" width="20" height="20" filter="url(#filter_2)"/> + <rect x="20" y="20" width="20" height="20" filter="url(#filter_1)"/> + <rect x="0" y="40" width="20" height="20" filter="url(#filter_3)"/> + <rect x="20" y="40" width="20" height="20" filter="url(#filter_4)"/> + <rect x="0" y="60" width="20" height="20" filter="url(#filter_2)"/> + <rect x="20" y="60" width="20" height="20" filter="url(#filter_1)"/> + <rect x="0" y="80" width="20" height="20" filter="url(#filter_1)"/> + <rect x="20" y="80" width="20" height="20" filter="url(#filter_4)"/> + <rect x="0" y="100" width="20" height="20" filter="url(#filter_4)"/> + <rect x="20" y="100" width="20" height="20" filter="url(#filter_1)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01.svg b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01.svg new file mode 100644 index 0000000000..e48a6bd55e --- /dev/null +++ b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-01.svg @@ -0,0 +1,217 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(5, true)"> + <title>Test animation of the "numOctaves" <integer> attribute on the "feTurbulence" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + + <!-- Our implementation strategy for animating integers with + calcMode="linear" is to use round(), with the slight twist that we + round "to the NEXT value" when the current time puts us exactly midway + between two integer values. (This is so that the result of midpoint + rounding does not depend on whether we're animating up to a higher + value or animating down to a lower value.) Note that one of the quirks + of using round() is that the start and end values of any integer + range only receive half as much time as any intermediary values. This + is as you would expect mathematically, but it's probably unexpected + for most users! + + We could try to avoid this round() quirk by coming up with a better + implementation strategy for calcMode="linear", but animation of the + few integer attributes in SVG 1.1 is extremely unlikely (so this + issue is very low priority), and it's actually difficult to find a + better strategy that doesn't have its own undesirable quirks. + + One alternative could be to divide the time evenly amoungst each + integer. (I.e. it would be similar to calcMode="discrete", except it + would also visit all the intermediary values, not just the start and + end values). The issue with this approach is that for a simple "to" + animation the animation wouldn't actually seem to change anything until + interpolation reaches the second integer value. This could be avoided + by skipping the initial value and distributing the time between the + other values, but then in the case of a "from-to" animation where the + from value is different to the underlying attribute value, the + animation would seem to skip the first value. Not that the same sort of + problem exists at the other end of the simple duration, where it will + reach the final integer value before the end of the simple duration. + This could be avoided by only setting the final value right at the end + of the simple duration and distributing the time between evenly + between the other values, but then the final value will only be seen if + fill="freeze". + + There are many other problems with other implementation strategies. The + more you think about them, add the complexity of 'values', 'by' etc, + and think of cases where they behave strangely (e.g. animating between + just two adjacent integers, up or down, etc.), the more ugly it gets. + It's really not worth it for SVG 1.1. Maybe if you could use SMIL for + 'font-size' or something even more likely to be animated it would be. + --> + + + <!-- Some calcMode="linear" tests animating *up* to higher values. --> + + <!-- At 5s the animated value should be 3. --> + <filter id="filter_1" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="6.1s" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="0" width="20" height="20" filter="url(#filter_1)"/> + + <!-- At exactly 5s the animated value should change to 4. --> + <filter id="filter_2" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="6s" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" width="20" height="20" filter="url(#filter_2)"/> + + + <!-- Some calcMode="linear" tests animating *down* to lower values. --> + + <!-- At 5s the animated value should be 2. --> + <filter id="filter_3" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="6.1s" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="0" y="20" width="20" height="20" filter="url(#filter_3)"/> + + <!-- At exactly 5s the animated value should change to 1. --> + <filter id="filter_4" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="6s" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="20" width="20" height="20" filter="url(#filter_4)"/> + + + <!-- Some 'by' animation tests --> + + <!-- At 5s the animated value should be 3. --> + <filter id="filter_5" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="6.1s" + by="3" + fill="freeze"/> + </feTurbulence> + </filter> + <rect y="40" width="20" height="20" filter="url(#filter_5)"/> + + <!-- At exactly 5s the animated value should change to 4. --> + <filter id="filter_6" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="6s" + by="3" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="40" width="20" height="20" filter="url(#filter_6)"/> + + + <!-- calcMode="paced" tests --> + + <!-- At 5s the animated value should be 2. --> + <filter id="filter_7" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="paced" + begin="0s" dur="6.1s" + values="4; 3; 1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect y="60" width="20" height="20" filter="url(#filter_7)"/> + + <!-- At exactly 5s the animated value should change to 1. --> + <filter id="filter_8" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="paced" + begin="0s" dur="6s" + values="4; 3; 1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="60" width="20" height="20" filter="url(#filter_8)"/> + + + <!-- Some calcMode="discrete" tests animating *up* to higher values. --> + + <!-- At 5s the animated value should be 1. --> + <filter id="filter_9" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="discrete" + begin="0s" dur="10.1s" + from="1" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="0" y="80" width="20" height="20" filter="url(#filter_9)"/> + + <!-- At exactly 5s the animated value should change to 4. --> + <filter id="filter_10" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="discrete" + begin="0s" dur="10s" + from="1" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="80" width="20" height="20" filter="url(#filter_10)"/> + + + <!-- Some calcMode="discrete" tests animating *down* to lower values. --> + + <!-- At 5s the animated value should be 4. --> + <filter id="filter_11" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="discrete" + begin="0s" dur="10.1s" + from="4" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="0" y="100" width="20" height="20" filter="url(#filter_11)"/> + + <!-- At exactly 5s the animated value should change to 1. --> + <filter id="filter_12" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="discrete" + begin="0s" dur="10s" + from="4" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="100" width="20" height="20" filter="url(#filter_12)"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-02.svg b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-02.svg new file mode 100644 index 0000000000..ffade083b0 --- /dev/null +++ b/layout/reftests/svg/smil/anim-feTurbulence-numOctaves-02.svg @@ -0,0 +1,202 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(3, true)"> + <title>Test animation of the "numOctaves" <integer> attribute on the "feTurbulence" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <!-- This is an unfinished and unused testcase that would not pass given the + current implementation strategy. This testcase assumes that the + strategy should be to give each value an equal slice of the simple + duration. In other words if animating from 1 to 4 in 4 seconds, then + each of the values 1, 2, 3 and 4 would get 1 second each. + + See the comment in anim-feTurbulence-numOctaves-01.svg for more on + implementation strategy. + --> + + + + <!-- Animation of integers is actually more complicated than lengths. It's + necessary to "jump" from value to value since you're dealing with + discrete integers rather than continuous real numbers. + + The spec doesn't say exactly how to behave, but we assume that the each + of the values in a from-to animation gets an equal slice of the simple + duration. We also assume that at times that are exactly midway between + two integers, we should jump to the "next" integer. In other words, when + animating from 0 to 1 in 1 second, at 0.5 seconds the value changes to + 1; but when animating from 1 to 0 in 1 second, at 0.5 seconds the value + changes to 0. This is different from floor(), round() or ceil() + behavior, and we test that by animating both "up" and "down" below. + --> + + + <!-- Some tests animating *up* to higher values. --> + + <!-- Each of the four values should get an equal slice of the duration - + that is 3.25s - so at 3s the animated value should still be 1. --> + <filter id="filter_1" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="13s" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect width="20" height="20" filter="url(#filter_1)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 3s - so at exactly 3s the animated value should become 2. --> + <filter id="filter_2" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="12s" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" width="20" height="20" filter="url(#filter_2)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1.25s - so at 3s the animated value should still be 3. --> + <filter id="filter_3" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="5s" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="40" width="20" height="20" filter="url(#filter_3)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1s - so at exactly 3s the animated value should become 4. --> + <filter id="filter_4" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="4s" + to="4" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="60" width="20" height="20" filter="url(#filter_4)"/> + + + <!-- Some tests animating *down* to lower values. --> + + <!-- Each of the four values should get an equal slice of the duration - + that is 3.25s - so at 3s the animated value should still be 4. --> + <filter id="filter_5" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="13s" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect y="20" width="20" height="20" filter="url(#filter_5)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 3s - so at exactly 3s the animated value should become 3. --> + <filter id="filter_6" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="12s" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="20" width="20" height="20" filter="url(#filter_6)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1.25s - so at 3s the animated value should still be 2. --> + <filter id="filter_7" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="5s" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="40" y="20" width="20" height="20" filter="url(#filter_7)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1s - so at exactly 3s the animated value should become 1. --> + <filter id="filter_8" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="4s" + to="1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="60" y="20" width="20" height="20" filter="url(#filter_8)"/> + + + <!-- Some 'by' animation tests --> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1.25s - so at 3s the animated value should still be 3. --> + <filter id="filter_9" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="5s" + by="3" + fill="freeze"/> + </feTurbulence> + </filter> + <rect y="40" width="20" height="20" filter="url(#filter_9)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1s - so at exactly 3s the animated value should become 4. --> + <filter id="filter_10" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="1"> + <animate attributeName="numOctaves" + calcMode="linear" + begin="0s" dur="4s" + by="3" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="40" width="20" height="20" filter="url(#filter_10)"/> + + + <!-- calcMode="paced" tests --> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1.25s - so at 3s the animated value should still be 2. --> + <filter id="filter_11" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="paced" + begin="0s" dur="5s" + values="4; 3; 1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect y="60" width="20" height="20" filter="url(#filter_11)"/> + + <!-- Each of the four values should get an equal slice of the duration - + that is 1s - so at exactly 3s the animated value should become 1. --> + <filter id="filter_12" x="0%" y="0%" width="100%" height="100%"> + <feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="4"> + <animate attributeName="numOctaves" + calcMode="paced" + begin="0s" dur="4s" + values="4; 3; 1" + fill="freeze"/> + </feTurbulence> + </filter> + <rect x="20" y="60" width="20" height="20" filter="url(#filter_12)"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-fill-overpaintserver-1.svg b/layout/reftests/svg/smil/anim-fill-overpaintserver-1.svg new file mode 100644 index 0000000000..d1a8d61597 --- /dev/null +++ b/layout/reftests/svg/smil/anim-fill-overpaintserver-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="red"> + <stop offset="0.0" stop-color="#f00"/> + </linearGradient> + </defs> + <rect width="100%" height="100%" fill="url(#red)"> + <set attributeName="fill" to="lime"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-fill-overpaintserver-2.svg b/layout/reftests/svg/smil/anim-fill-overpaintserver-2.svg new file mode 100644 index 0000000000..e3ee053636 --- /dev/null +++ b/layout/reftests/svg/smil/anim-fill-overpaintserver-2.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <!-- In this test we will attempt to interpolate since fill is interpolatable + but fail since the base value can't be converted to an RGB color value + and hence should fall back to discrete calcMode which, in the case of + to-animation, sets the to value for the second half of the simple + duration. --> + <defs> + <linearGradient id="red"> + <stop offset="0.0" stop-color="#f00"/> + </linearGradient> + </defs> + <rect width="100%" height="100%" fill="url(#red)"> + <animate attributeName="fill" to="lime" dur="3s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-fillcolor-1.svg b/layout/reftests/svg/smil/anim-fillcolor-1.svg new file mode 100644 index 0000000000..7b6ed390f1 --- /dev/null +++ b/layout/reftests/svg/smil/anim-fillcolor-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="rgb(255,0,0)"> + <animateColor attributeName="fill" from="rgb(255,0,0)" to="rgb(0,0,255)" + begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-fillopacity-1css.svg b/layout/reftests/svg/smil/anim-fillopacity-1css.svg new file mode 100644 index 0000000000..68462b6e53 --- /dev/null +++ b/layout/reftests/svg/smil/anim-fillopacity-1css.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue" fill-opacity="0"> + <animate attributeName="fill-opacity" attributeType="CSS" + from="0" to="1" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-fillopacity-1none.svg b/layout/reftests/svg/smil/anim-fillopacity-1none.svg new file mode 100644 index 0000000000..7a8bfcc81e --- /dev/null +++ b/layout/reftests/svg/smil/anim-fillopacity-1none.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue" fill-opacity="0"> + <animate attributeName="fill-opacity" + from="0" to="1" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-fillopacity-1xml.svg b/layout/reftests/svg/smil/anim-fillopacity-1xml.svg new file mode 100644 index 0000000000..f543745cc5 --- /dev/null +++ b/layout/reftests/svg/smil/anim-fillopacity-1xml.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue" fill-opacity="0"> + <animate attributeName="fill-opacity" attributeType="XML" + from="0" to="1" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-filter-filterUnits-01.svg b/layout/reftests/svg/smil/anim-filter-filterUnits-01.svg new file mode 100644 index 0000000000..641f711931 --- /dev/null +++ b/layout/reftests/svg/smil/anim-filter-filterUnits-01.svg @@ -0,0 +1,42 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "filterUnits" enum attributes of the "filter" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <filter id="flood_filter_1" filterUnits="userSpaceOnUse" + x="0%" y="0%" width="100%" height="100%"> + <!-- this should reduce the referencing element to 50% of the + viewport width at 1.25s --> + <animate attributeName="filterUnits" + calcMode="discrete" + begin="0s" dur="2.5s" + from="userSpaceOnUse" to="objectBoundingBox" + fill="freeze"/> + <feFlood width="100%" height="100%" flood-color="lime"/> + </filter> + <filter id="flood_filter_2" x="0%" y="0%" width="100%" height="100%"> + <!-- this should expand the referencing element to 100% of the + viewport width at 1s --> + <animate attributeName="filterUnits" + calcMode="discrete" + begin="0s" dur="2s" + from="objectBoundingBox" to="userSpaceOnUse" + fill="freeze"/> + <feFlood width="100%" height="100%" flood-color="lime"/> + </filter> + <rect width="100%" height="100%" fill="lime"/> + <rect width="100%" height="100" fill="red"/> + + <!-- 40% through discrete animation simple duration - + tests animation doesn't affect the element too early --> + <svg height="50"> + <rect width="50%" height="100%" fill="red" filter="url(#flood_filter_1)"/> + </svg> + + <!-- 50% through discrete animation simple duration - + tests animation affects the element now --> + <svg y="50" height="50"> + <rect width="50%" height="100%" fill="red" filter="url(#flood_filter_2)"/> + </svg> +</svg> diff --git a/layout/reftests/svg/smil/anim-filter-href-01.svg b/layout/reftests/svg/smil/anim-filter-href-01.svg new file mode 100644 index 0000000000..fa259de4ee --- /dev/null +++ b/layout/reftests/svg/smil/anim-filter-href-01.svg @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "in" and "result" <string> attributes on "filter" elements</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <defs> + <filter id="filt"> + <feFlood flood-color="red" result="flood1"/> + <feFlood flood-color="lime" result="nowhere"> + <animate attributeName="result" + calcMode="discrete" + begin="0s" dur="0.5s" + from="nowhere" to="flood2" + fill="freeze"/> + </feFlood> + <feOffset in="flood1"> + <animate attributeName="in" + calcMode="discrete" + begin="0s" dur="0.5s" + from="flood1" to="flood2" + fill="freeze"/> + </feOffset> + </filter> + </defs> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="red" filter="url(#filt)"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-filter-primitive-size-01.svg b/layout/reftests/svg/smil/anim-filter-primitive-size-01.svg new file mode 100644 index 0000000000..ceb7c32856 --- /dev/null +++ b/layout/reftests/svg/smil/anim-filter-primitive-size-01.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <title>Test animation of the "width" and "height" attributes of a filter primitive element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script> + +window.addEventListener("MozReftestInvalidate", run, false); +setTimeout(run, 4000); // fallback for running outside reftest + +function run() { + setTimeAndSnapshot(1, true) +} + + </script> + <filter id="flood_filter" x="0%" y="0%" width="100%" height="100%"> + <feFlood width="0%" height="0%" flood-color="lime"> + <animate attributeName="width" + calcMode="linear" + begin="0s" dur="2s" + from="0%" to="200%" + fill="freeze"/> + <animate attributeName="height" + calcMode="linear" + begin="0s" dur="1s" + from="0%" to="100%" + fill="freeze"/> + </feFlood> + </filter> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="red" filter="url(#flood_filter)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-filter-size-01.svg b/layout/reftests/svg/smil/anim-filter-size-01.svg new file mode 100644 index 0000000000..e047b89d92 --- /dev/null +++ b/layout/reftests/svg/smil/anim-filter-size-01.svg @@ -0,0 +1,31 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <title>Test animation of the "width" and "height" attributes of the "filter" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script> + +window.addEventListener("MozReftestInvalidate", run, false); +setTimeout(run, 4000); // fallback for running outside reftest + +function run() { + setTimeAndSnapshot(1, true) +} + + </script> + <filter id="flood_filter" x="0%" y="0%" width="0%" height="0%"> + <animate attributeName="width" + calcMode="linear" + begin="0s" dur="2s" + from="0%" to="200%" + fill="freeze"/> + <animate attributeName="height" + calcMode="linear" + begin="0s" dur="1s" + from="0%" to="100%" + fill="freeze"/> + <feFlood width="100%" height="100%" flood-color="lime"/> + </filter> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="red" filter="url(#flood_filter)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-gradient-attr-presence-01-ref.svg b/layout/reftests/svg/smil/anim-gradient-attr-presence-01-ref.svg new file mode 100644 index 0000000000..77212fbb3f --- /dev/null +++ b/layout/reftests/svg/smil/anim-gradient-attr-presence-01-ref.svg @@ -0,0 +1,142 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 900"> + <!-- 1. gradientUnits --> + <defs> + <linearGradient id="gradientUnits" x1="0" y1="0" x2="100" y2="0" + gradientUnits="userSpaceOnUse"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <rect width="100px" height="100px" fill="url(#gradientUnits)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#gradientUnits)"/> + </g> + <!-- 2. gradientTransform --> + <defs> + <linearGradient id="gradientTransform" + gradientTransform="rotate(90 0.5 0.5)"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 100px)"> + <rect width="100px" height="100px" fill="url(#gradientTransform)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#gradientTransform)"/> + </g> + </g> + <!-- 3. x1, x2 --> + <defs> + <linearGradient id="x1x2" x1="40%" x2="60%"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 200px)"> + <rect width="100px" height="100px" fill="url(#x1x2)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#x1x2)"/> + </g> + </g> + <!-- 4. y1, y2 --> + <defs> + <linearGradient id="y1y2" x2="0%" y1="40%" y2="60%"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 300px)"> + <rect width="100px" height="100px" fill="url(#y1y2)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#y1y2)"/> + </g> + </g> + <!-- 5. cx, cy --> + <defs> + <radialGradient id="cxcy" cx="0%" cy="100%"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </radialGradient> + </defs> + <g transform="translate(0px 400px)"> + <rect width="100px" height="100px" fill="url(#cxcy)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#cxcy)"/> + </g> + </g> + <!-- 6. r --> + <defs> + <radialGradient id="r" r="100%"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </radialGradient> + </defs> + <g transform="translate(0px 500px)"> + <rect width="100px" height="100px" fill="url(#r)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#r)"/> + </g> + </g> + <!-- 7. fx, fy --> + <defs> + <radialGradient id="fxfy" fx="20%" fy="80%"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </radialGradient> + </defs> + <g transform="translate(0px 600px)"> + <rect width="100px" height="100px" fill="url(#fxfy)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#fxfy)"/> + </g> + </g> + <!-- 8. spreadMethod --> + <defs> + <linearGradient id="spreadMethod" x1="50%" spreadMethod="reflect"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 700px)"> + <rect width="100px" height="100px" fill="url(#spreadMethod)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#spreadMethod)"/> + </g> + </g> + <!-- 9. xlink:href --> + <defs> + <linearGradient id="xlink" xlink:href="#xlinkRef"/> + <linearGradient id="xlinkRef"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 800px)"> + <rect width="100px" height="100" fill="url(#xlink)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#xlinkRef)"/> + </g> + </g> + <!-- We were getting random but very minor anti-aliasing differences on OSX + and OSX64 along the edges of these gradients so we draw a thick stroke + over all the edges. --> + <path stroke="black" stroke-width="3px" stroke-linecap="square" fill="none" + d="M0 0H200V900H0V0 + M0 100H200 + M0 200H200 + M0 300H200 + M0 400H200 + M0 500H200 + M0 600H200 + M0 700H200 + M0 800H200 + M0 900H200 + M100 0V900"/> + <!-- If adding more tests here, be sure to update the viewBox on the root svg + element --> +</svg> diff --git a/layout/reftests/svg/smil/anim-gradient-attr-presence-01.svg b/layout/reftests/svg/smil/anim-gradient-attr-presence-01.svg new file mode 100644 index 0000000000..36b1339376 --- /dev/null +++ b/layout/reftests/svg/smil/anim-gradient-attr-presence-01.svg @@ -0,0 +1,193 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 900"> + <!-- Bug 608161 - SVG SMIL: Don't use HasAttr to test for presence of animated + attributes. + + Test animating gradient attributes doesn't rely on the presence of + attributes in the DOM, but also correctly detects attributes set by + animation. + + The format of each test is that we have a base gradient named + (attName)Ref which does NOT specify the attribute under test, but instead + sets the attribute to a non-default value using animation. + + Then we have a referencing gradient named (attName) that refers to the + base gradient and also does NOT specify the attribute under test. + + When we go to look up the attribute under test we begin at (attName), + notice the attribute isn't specified (either in the DOM or by animation), + then go to (attName)Ref and detect that the attribute is specified there + by animation and use that value. + + To the right of each test we also include a rect that directly references + (attName)Ref. The two rectangles should be identical but prior to fixing + this bug they were not. + --> + <!-- 1. gradientUnits: defaults to objectBoundingBox --> + <defs> + <linearGradient xlink:href="#gradientUnitsRef" id="gradientUnits"/> + <linearGradient id="gradientUnitsRef" x1="0" y1="0" x2="100" y2="0"> + <set attributeName="gradientUnits" to="userSpaceOnUse"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <rect width="100px" height="100px" fill="url(#gradientUnits)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#gradientUnitsRef)"/> + </g> + <!-- 2. gradientTransform: defaults to identity --> + <defs> + <linearGradient xlink:href="#gradientTransformRef" id="gradientTransform"/> + <linearGradient id="gradientTransformRef"> + <animateTransform attributeName="gradientTransform" type="rotate" + values="90 0.5 0.5" fill="freeze"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 100px)"> + <rect width="100px" height="100px" fill="url(#gradientTransform)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#gradientTransformRef)"/> + </g> + </g> + <!-- 3. x1: defaults to 0% + x2: defaults to 100% --> + <defs> + <linearGradient xlink:href="#x1x2Ref" id="x1x2"/> + <linearGradient id="x1x2Ref"> + <set attributeName="x1" to="40%"/> + <set attributeName="x2" to="60%"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 200px)"> + <rect width="100px" height="100px" fill="url(#x1x2)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#x1x2Ref)"/> + </g> + </g> + <!-- 4. y1: defaults to 0% + y2: defaults to 0% --> + <defs> + <linearGradient xlink:href="#y1y2Ref" id="y1y2"/> + <linearGradient id="y1y2Ref" x2="0%"> + <set attributeName="y1" to="40%"/> + <set attributeName="y2" to="60%"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 300px)"> + <rect width="100px" height="100px" fill="url(#y1y2)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#y1y2Ref)"/> + </g> + </g> + <!-- 5. cx: defaults to 50% + cy: defaults to 50% --> + <defs> + <radialGradient xlink:href="#cxcyRef" id="cxcy"/> + <radialGradient id="cxcyRef"> + <set attributeName="cx" to="0%"/> + <set attributeName="cy" to="100%"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </radialGradient> + </defs> + <g transform="translate(0px 400px)"> + <rect width="100px" height="100px" fill="url(#cxcy)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#cxcyRef)"/> + </g> + </g> + <!-- 6. r: defaults to 50% --> + <defs> + <radialGradient xlink:href="#rRef" id="r"/> + <radialGradient id="rRef"> + <set attributeName="r" to="100%"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </radialGradient> + </defs> + <g transform="translate(0px 500px)"> + <rect width="100px" height="100px" fill="url(#r)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#rRef)"/> + </g> + </g> + <!-- 7. fx: defaults to cx + fy: defaults to cy --> + <defs> + <radialGradient xlink:href="#fxfyRef" id="fxfy"/> + <radialGradient id="fxfyRef"> + <set attributeName="fx" to="20%"/> + <set attributeName="fy" to="80%"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </radialGradient> + </defs> + <g transform="translate(0px 600px)"> + <rect width="100px" height="100px" fill="url(#fxfy)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#fxfyRef)"/> + </g> + </g> + <!-- 8. spreadMethod: defaults to pad --> + <defs> + <linearGradient xlink:href="#spreadMethodRef" id="spreadMethod"/> + <linearGradient id="spreadMethodRef" x1="50%"> + <set attributeName="spreadMethod" to="reflect"/> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 700px)"> + <rect width="100px" height="100px" fill="url(#spreadMethod)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#spreadMethodRef)"/> + </g> + </g> + <!-- 9. xlink:href + This attribute is not affected by bug 608161 but we test it here for + completeness. + --> + <defs> + <linearGradient id="xlink"> + <set attributeName="xlink:href" to="#xlinkRef"/> + </linearGradient> + <linearGradient id="xlinkRef"> + <stop offset="0%" stop-color="#F60" /> + <stop offset="100%" stop-color="#FF6" /> + </linearGradient> + </defs> + <g transform="translate(0px 800px)"> + <rect width="100px" height="100px" fill="url(#xlink)"/> + <g transform="translate(100px)"> + <rect width="100px" height="100px" fill="url(#xlinkRef)"/> + </g> + </g> + <!-- We were getting random but very minor anti-aliasing differences on OSX + and OSX64 along the edges of these gradients so we draw a thick stroke + over all the edges. --> + <path stroke="black" stroke-width="3px" stroke-linecap="square" fill="none" + d="M0 0H200V900H0V0 + M0 100H200 + M0 200H200 + M0 300H200 + M0 400H200 + M0 500H200 + M0 600H200 + M0 700H200 + M0 800H200 + M0 900H200 + M100 0V900"/> + <!-- If adding more tests here, be sure to update the viewBox on the root svg + element --> +</svg> diff --git a/layout/reftests/svg/smil/anim-gradient-href-01.svg b/layout/reftests/svg/smil/anim-gradient-href-01.svg new file mode 100644 index 0000000000..717454e47d --- /dev/null +++ b/layout/reftests/svg/smil/anim-gradient-href-01.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.25, true)"> + <title>Test animation of the "xlink:href" <string> attribute on the "linearGradient" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <defs> + <linearGradient id="grad1a" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"> + <stop id="red" stop-color="red" offset="0"/> + </linearGradient> + <linearGradient id="grad1b" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="0"> + <stop id="lime" stop-color="lime" offset="0"/> + </linearGradient> + <linearGradient id="grad2" xlink:href="#grad1a"> + <animate attributeName="xlink:href" + begin="0s" dur="0.5s" + from="#grad1a" to="#grad1b" + fill="freeze"/> + </linearGradient> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <rect x="20" y="150" width="440" height="80" fill="url(#grad2)" /> + +</svg> diff --git a/layout/reftests/svg/smil/anim-height-done-1a.svg b/layout/reftests/svg/smil/anim-height-done-1a.svg new file mode 100644 index 0000000000..2c76c78820 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-done-1a.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="50" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> + diff --git a/layout/reftests/svg/smil/anim-height-done-1b.svg b/layout/reftests/svg/smil/anim-height-done-1b.svg new file mode 100644 index 0000000000..e36788264a --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-done-1b.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="50" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> + diff --git a/layout/reftests/svg/smil/anim-height-done-2.svg b/layout/reftests/svg/smil/anim-height-done-2.svg new file mode 100644 index 0000000000..9b967b8b73 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-done-2.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, false)" width="0%" height="0%" viewBox="0 0 100 100" preserveAspectRatio="none"> + <animate attributeName="height" + from="0%" to="100%" begin="0s" dur="2s" fill="freeze"/> + <animate attributeName="width" + from="0%" to="100%" begin="0s" dur="2s" fill="freeze"/> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="lime"/> +</svg> + diff --git a/layout/reftests/svg/smil/anim-height-interp-1-ref.svg b/layout/reftests/svg/smil/anim-height-interp-1-ref.svg new file mode 100644 index 0000000000..27a02e1471 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-1-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="115" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-1.svg b/layout/reftests/svg/smil/anim-height-interp-1.svg new file mode 100644 index 0000000000..d9bae4605d --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.3, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-2-ref.svg b/layout/reftests/svg/smil/anim-height-interp-2-ref.svg new file mode 100644 index 0000000000..7c9ee8e593 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-2-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="125" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-2.svg b/layout/reftests/svg/smil/anim-height-interp-2.svg new file mode 100644 index 0000000000..5226dad75d --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-2.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.5, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-3-ref.svg b/layout/reftests/svg/smil/anim-height-interp-3-ref.svg new file mode 100644 index 0000000000..d7c16a4d18 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-3-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="160" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-3.svg b/layout/reftests/svg/smil/anim-height-interp-3.svg new file mode 100644 index 0000000000..170fc41936 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-3.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.2, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-4-ref.svg b/layout/reftests/svg/smil/anim-height-interp-4-ref.svg new file mode 100644 index 0000000000..5d51804a08 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-4-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="170" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-4.svg b/layout/reftests/svg/smil/anim-height-interp-4.svg new file mode 100644 index 0000000000..ffea9649cb --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-4.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.4, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-5-ref.svg b/layout/reftests/svg/smil/anim-height-interp-5-ref.svg new file mode 100644 index 0000000000..1c8991152f --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-5-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="190" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-5.svg b/layout/reftests/svg/smil/anim-height-interp-5.svg new file mode 100644 index 0000000000..d0562ee6f1 --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-5.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.8, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-6-ref.svg b/layout/reftests/svg/smil/anim-height-interp-6-ref.svg new file mode 100644 index 0000000000..a809eb515c --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-6-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="195" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-height-interp-6.svg b/layout/reftests/svg/smil/anim-height-interp-6.svg new file mode 100644 index 0000000000..eeb3bdfadb --- /dev/null +++ b/layout/reftests/svg/smil/anim-height-interp-6.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.9, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="50" fill="blue"> + <animate attributeName="height" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-image-href-01.svg b/layout/reftests/svg/smil/anim-image-href-01.svg new file mode 100644 index 0000000000..44d63b23b3 --- /dev/null +++ b/layout/reftests/svg/smil/anim-image-href-01.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "xlink:href" <string> attribute on the "image" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect width="100%" height="100%" fill="lime"/> + <rect width="64" height="64" fill="red"/> + <image fill="none" width="64" height="64" xlink:href=""> + <animate attributeName="xlink:href" + calcMode="discrete" + begin="0s" dur="0.5s" + from="" to="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJFJREFUaEPt1UEOg0AMBEHz/0ez8IY5zFqqKFdLkGrHz7yz/PO9wOrv7qf/81n983uBCwAl1EYgQCD8H5eQhCTUboAAgbCBcNwdaBdIgIAlbjdAgEDYQDjuDrQLJEDAErcbIEAgbCAcdwfaBRIgYInbDRAgEDYQjrsD7QIJELDE7QYIEAgbCMfdgXaBBAhkS3wAXsqyIo0zj4gAAAAASUVORK5CYII=" + fill="freeze"/> + </image> + +</svg> diff --git a/layout/reftests/svg/smil/anim-indefinite-to-1.svg b/layout/reftests/svg/smil/anim-indefinite-to-1.svg new file mode 100644 index 0000000000..0826e113b1 --- /dev/null +++ b/layout/reftests/svg/smil/anim-indefinite-to-1.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- Test that an indefinite to-animation just sticks to the base value for + interpolatable attributes. --> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate attributeName="height" to="100" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-indefinite-to-2.svg b/layout/reftests/svg/smil/anim-indefinite-to-2.svg new file mode 100644 index 0000000000..3de1aecad7 --- /dev/null +++ b/layout/reftests/svg/smil/anim-indefinite-to-2.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- Test that an indefinite to-animation with discrete calcMode applies + the underlying value for the whole time. --> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate attributeName="height" to="100" dur="indefinite" + calcMode="discrete"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-indefinite-to-3.svg b/layout/reftests/svg/smil/anim-indefinite-to-3.svg new file mode 100644 index 0000000000..e4e7d22f86 --- /dev/null +++ b/layout/reftests/svg/smil/anim-indefinite-to-3.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- Test that an indefinite to-animation that falls back to discrete calcMode + because the property is not interpolatable, applies the underlying value + for the whole time. --> + <rect x="15" y="15" width="200" height="200" fill="blue" visibility="visible"> + <animate attributeName="visibility" to="hidden" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-indefinite-to-4.svg b/layout/reftests/svg/smil/anim-indefinite-to-4.svg new file mode 100644 index 0000000000..29086705f6 --- /dev/null +++ b/layout/reftests/svg/smil/anim-indefinite-to-4.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- This is not really a to-animation, but we want to check that set + animation isn't incorrectly treated as to-animation. + + Provided the attribute being animated is interpolatable (as it is in this + case) and calcMode != discrete, to-animation will begin from the base + value (and never change in this case as the simple duration is + indefinite). + + Set animation, however, never sets the base value, only the to value. --> + <rect x="15" y="15" width="200" height="100" fill="blue"> + <set attributeName="height" to="200" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-length-reset-01.svg b/layout/reftests/svg/smil/anim-length-reset-01.svg new file mode 100644 index 0000000000..a4bab46520 --- /dev/null +++ b/layout/reftests/svg/smil/anim-length-reset-01.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="document.documentElement.setCurrentTime(0); + if (document.getElementById('x').width.animVal.value != 0) { + /* fail */ + document.documentElement.textContent = ''; + } + setTimeAndSnapshot(1, true)"> + <title>Test that an animation for a length correctly restores the original + pixel size when the animation is done.</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="lime"/> + <rect width="100" height="100" fill="red"/> + <rect width="100" height="100" fill="lime" id="x"> + <set attributeName="width" to="0" dur="1s" begin="0s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-marker-orient-01.svg b/layout/reftests/svg/smil/anim-marker-orient-01.svg new file mode 100644 index 0000000000..1172961cf7 --- /dev/null +++ b/layout/reftests/svg/smil/anim-marker-orient-01.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(4, true)"> + <title>Test animation of the "orient" attribute of the "marker" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect width="100%" height="100%" fill="lime"/> + + <!-- Check that midway through the simple duration the orient attribute has + an animated value of -90deg --> + <marker id="marker_1" markerWidth="50" markerHeight="50" + markerUnits="userSpaceOnUse"> + <rect width="20" height="20" fill="lime"/> + <animate attributeName="orient" + calcMode="linear" + begin="0s" dur="8s" + from="0deg" to="-180deg" + fill="freeze"/> + </marker> + <rect width="20" height="20" fill="red"/> + <line x2="0" y2="20" marker-end="url(#marker_1)" stroke="transparent"/> + + <!-- Check that at the end of the simple duration the orient attribute has + an animated value of -90deg --> + <marker id="marker_2" markerWidth="50" markerHeight="50" + markerUnits="userSpaceOnUse"> + <rect width="20" height="20" fill="lime"/> + <animate attributeName="orient" + calcMode="linear" + begin="0s" dur="4s" + from="0deg" to="-90deg" + fill="freeze"/> + </marker> + <rect x="20" width="20" height="20" fill="red"/> + <line x2="20" y2="20" marker-end="url(#marker_2)" stroke="transparent"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-marker-orient-02.svg b/layout/reftests/svg/smil/anim-marker-orient-02.svg new file mode 100644 index 0000000000..2c2d96ceaf --- /dev/null +++ b/layout/reftests/svg/smil/anim-marker-orient-02.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(4, true)"> + <title>Test animation of the "orient" attribute of the "marker" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect width="100%" height="100%" fill="lime"/> + <!-- Check that partway through the simple duration, the orient attribute is + still stuck at the initial value ("-90deg"), since we currently can't + interpolate between angle-values and "auto" --> + <marker id="marker_1" markerWidth="50" markerHeight="50" + markerUnits="userSpaceOnUse"> + <rect width="20" height="20" fill="lime"/> + <animate attributeName="orient" + calcMode="linear" + begin="0s" dur="10s" + from="-90deg" to="auto" + fill="freeze"/> + </marker> + <rect width="20" height="20" fill="red"/> + <line x2="0" y2="20" marker-end="url(#marker_1)" stroke="transparent"/> + + <!-- Check that at the end of the simple duration the orient attribute has + an animated value of "auto" (which in this case corresponds to 90deg) --> + <marker id="marker_2" markerWidth="50" markerHeight="50" + markerUnits="userSpaceOnUse"> + <rect width="20" height="20" fill="lime"/> + <animate attributeName="orient" + calcMode="linear" + begin="0s" dur="4s" + from="-45deg" to="auto" + fill="freeze"/> + </marker> + <rect x="20" width="20" height="20" fill="red"/> + <line x1="40" y1="-20" x2="40" y2="0" marker-end="url(#marker_2)" + stroke="transparent"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-nonpixel-length-reset-01.svg b/layout/reftests/svg/smil/anim-nonpixel-length-reset-01.svg new file mode 100644 index 0000000000..c362695a75 --- /dev/null +++ b/layout/reftests/svg/smil/anim-nonpixel-length-reset-01.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="document.documentElement.setCurrentTime(0); + if (document.getElementById('x').width.animVal.value != 0) { + /* fail */ + document.documentElement.textContent = ''; + } + setTimeAndSnapshot(1, true)"> + <title>Test that an animation for a length correctly restores the original + pixel size when the animation is done.</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="lime"/> + <rect width="100" height="100" fill="red"/> + <rect width="10em" height="100" fill="lime" font-size="10px" id="x"> + <set attributeName="width" to="0" dur="1s" begin="0s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-offset-01.svg b/layout/reftests/svg/smil/anim-offset-01.svg new file mode 100644 index 0000000000..6fd68fc848 --- /dev/null +++ b/layout/reftests/svg/smil/anim-offset-01.svg @@ -0,0 +1,52 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "offset" attribute on the "stop" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <linearGradient id="gradient_1"> + <stop stop-color="lime" offset="0"/> + <stop stop-color="lime" offset="0"> + <animate attributeName="offset" attributeType="XML" + calcMode="linear" + begin="0s" dur="2s" + to="100%" + fill="freeze"/> + </stop> + <stop stop-color="red" offset="0"> + <animate attributeName="offset" attributeType="XML" + calcMode="linear" + begin="0s" dur="2s" + to="1" + fill="freeze"/> + </stop> + <stop stop-color="red" offset="1"/> + </linearGradient> + <linearGradient id="gradient_2"> + <stop stop-color="lime" offset="0"/> + <stop stop-color="lime" offset="0"> + <animate attributeName="offset" attributeType="XML" + calcMode="linear" + begin="0s" dur="1s" + to="100%" + fill="freeze"/> + </stop> + <stop stop-color="red" offset="0"> + <animate attributeName="offset" attributeType="XML" + calcMode="linear" + begin="0s" dur="1s" + to="1" + fill="freeze"/> + </stop> + <stop stop-color="red" offset="1"/> + </linearGradient> + <rect width="100%" height="100%" fill="lime"/> + <rect width="200" height="200" fill="red"/> + + <!-- test 50% completed animation --> + <rect width="200" height="100" fill="url(#gradient_1)"/> + <rect x="100" width="100" height="100" fill="lime"/> + + <!-- test 100% completed animation --> + <rect y="100" width="200" height="100" fill="url(#gradient_2)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-opacity-01.svg b/layout/reftests/svg/smil/anim-opacity-01.svg new file mode 100644 index 0000000000..bc4a368de5 --- /dev/null +++ b/layout/reftests/svg/smil/anim-opacity-01.svg @@ -0,0 +1,23 @@ +<!-- + 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" class="reftest-wait" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="setTimeAndSnapshot(101, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <title>Testing that opacity changes are reflected in patterns</title> + + <defs> + <pattern id="p" width="100%" height="100%"> + <g> + <rect width="100%" height="100%" fill="lime" stroke="lime" stroke-width="1" opacity="0"> + <animate attributeName="opacity" values="0;1" dur="1s" begin="99s" fill="freeze" /> + </rect> + </g> + </pattern> + </defs> + + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="url(#p)"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-overflow-shorthand-ref.svg b/layout/reftests/svg/smil/anim-overflow-shorthand-ref.svg new file mode 100644 index 0000000000..07676395d3 --- /dev/null +++ b/layout/reftests/svg/smil/anim-overflow-shorthand-ref.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for animation of the "overflow" shorthand attribute</title> + + <rect width="100%" height="100%" fill="none"/> + <marker id="marker" markerWidth="20" markerHeight="20" + viewBox="0 0 10 10" style="overflow: hidden"> + <path fill="red" d="M 0 0 L 20 10 L 0 20 z" /> + </marker> + <line x2="0" y2="0" marker-end="url(#marker)" stroke="transparent"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-overflow-shorthand.svg b/layout/reftests/svg/smil/anim-overflow-shorthand.svg new file mode 100644 index 0000000000..a79dd44db2 --- /dev/null +++ b/layout/reftests/svg/smil/anim-overflow-shorthand.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(4, true)"> + <title>Test animation of the "overflow" shorthand attribute</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <rect width="100%" height="100%" fill="none"/> + <marker id="marker" markerWidth="20" markerHeight="20" + viewBox="0 0 10 10"> + <path fill="red" d="M 0 0 L 20 10 L 0 20 z" /> + <set attributeName="overflow" + calcMode="linear" + begin="0s" dur="2s" + from="hidden" to="hidden" + fill="freeze"/> + </marker> + <line x2="0" y2="0" marker-end="url(#marker)" stroke="transparent"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-paintserver-1-ref.svg b/layout/reftests/svg/smil/anim-paintserver-1-ref.svg new file mode 100644 index 0000000000..d6cf9488ee --- /dev/null +++ b/layout/reftests/svg/smil/anim-paintserver-1-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="0" y="0" width="300" height="400" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-paintserver-1.svg b/layout/reftests/svg/smil/anim-paintserver-1.svg new file mode 100644 index 0000000000..33f5fa158a --- /dev/null +++ b/layout/reftests/svg/smil/anim-paintserver-1.svg @@ -0,0 +1,86 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="lime"> + <stop offset="0.0" stop-color="lime"/> + </linearGradient> + <linearGradient id="red"> + <stop offset="0.0" stop-color="red"/> + </linearGradient> + </defs> + + <!-- 1. Set paint server --> + <rect x="0" y="0" width="100" height="100" fill="red"> + <set attributeName="fill" to="url(#lime)"/> + </rect> + <!-- 2. Get paint server. We're looking for a code path that will fetch the + base value, fail to replace it, and end up setting the animation + value as the fetched base value. + To-animation requires fetching the base value so we use that, plus + invalid animation values so that we won't replace the base value. --> + <rect x="100" y="0" width="100" height="100" fill="url(#lime)"> + <animate attributeName="fill" to="pikapikaglittergold"/> + </rect> + <!-- 3. "Interpolate" paint servers. We should fall back to discrete mode + which should mean that 150s into a 3-valued animation of 400s duration + we're in the middle value since each value will get about 133s each. + --> + <rect x="200" y="0" width="100" height="100" fill="red"> + <animate attributeName="fill" values="orange; url(#lime); purple" + begin="-150s" dur="400s"/> + </rect> + + <!-- By addition tests: In the following cases we'll go to calculate our + animation function values but since they're by-animation we'll try to do + some addition which should fail since addition with paint servers isn't + supported and hence the animation should not be applied. --> + <!-- 4. Check by-addition behaves (1): by: paint server --> + <rect x="0" y="100" width="100" height="100" fill="lime"> + <animate attributeName="fill" from="#f00" by="url(#red)"/> + </rect> + <!-- 5. Check by-addition behaves (2): from: paint server --> + <rect x="100" y="100" width="100" height="100" fill="lime"> + <animate attributeName="fill" from="url(#red)" by="#f00"/> + </rect> + <!-- 6. Check by-addition behaves (3): from-by paint server --> + <rect x="200" y="100" width="100" height="100" fill="#0f0"> + <animate attributeName="fill" from="url(#red)" by="url(#red)"/> + </rect> + + <!-- 7. Check that by-addition without a paint server is ok though. + (Since the animation has indefinite simple duration we'll never get past + the first value which is is lime green.) --> + <rect x="0" y="200" width="100" height="100" fill="red"> + <animate attributeName="fill" from="#0f0" by="#00f" dur="indefinite"/> + </rect> + <!-- 8. Sandwich addition test. In the following cases we should be able to + calculate the animation function ok, but we'll fail to add it to the + underlying values (since paint servers can't be added) and just set the + value instead. (SMIL 3 12.6.3 says, "[The additive] attribute is + ignored if the target attribute does not support additive animation.") + --> + <rect x="100" y="200" width="100" height="100" fill="red"> + <animate attributeName="fill" values="url(#lime)" additive="sum"/> + </rect> + <!-- 9. Check paced animation fails expectedly. The operation is as with case + 3 and we should fall back to discrete mode --> + <rect x="200" y="200" width="100" height="100" fill="red"> + <animate attributeName="fill" values="#0f1; url(#lime); #00f" + begin="-150s" dur="400s" calcMode="paced"/> + </rect> + + <!-- 10. Fallback color - specified color --> + <rect x="0" y="300" width="100" height="100" fill="red"> + <set attributeName="fill" to="url(#nonexistant) lime"/> + </rect> + <!-- 11. Fallback color - currentColor --> + <g color="lime"> + <rect x="100" y="300" width="100" height="100" fill="red"> + <set attributeName="fill" to="url(#nonexistant) currentColor"/> + </rect> + </g> + <!-- 12. Fallback color - none --> + <rect x="200" y="300" width="100" height="100" fill="lime"/> + <rect x="200" y="300" width="100" height="100" fill="red"> + <set attributeName="fill" to="url(#nonexistant) none"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-path-d-01-ref.svg b/layout/reftests/svg/smil/anim-path-d-01-ref.svg new file mode 100644 index 0000000000..b32fd77dbe --- /dev/null +++ b/layout/reftests/svg/smil/anim-path-d-01-ref.svg @@ -0,0 +1,134 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style type="text/css"> + path { fill: none; stroke: blue; stroke-width: 1px; + shape-rendering: crispEdges; } + </style> + + <path d="M10,10 + L26,10 + l-16,32 + H26 + V10 + h16 + v32 + + M80,10 + C90,30 85,30 96,30 + S102,30 112,10 + + m30,0 + c10,20 5,20 16,20 + s6,0 16,-20 + + M220,20 + Q225,46 236,26 + T252,20 + + M290,20 + q5,26 16,6 + t16,-6 + + M364,36 + A16,11 -30 1 1 380,36 + + M410,36 + a16,11 -30 1 1 16,0 + "/> + + <path transform="translate(0,70)" + d="M10,10 + L26,10 + l-16,32 + H26 + V10 + h16 + v32 + + M80,10 + C90,30 85,30 96,30 + S102,30 112,10 + + m30,0 + c10,20 5,20 16,20 + s6,0 16,-20 + + M220,20 + Q225,46 236,26 + T252,20 + + M290,20 + q5,26 16,6 + t16,-6 + + M364,36 + A16,11 -30 1 1 380,36 + + M410,36 + a16,11 -30 1 1 16,0 + "/> + + <path transform="translate(0,140)" + d="M10,10 + L33,10 + l-23,46 + H33 + V10 + h23 + v46 + + M80,10 + C100,20 90,50 103,50 + S106,20 126,10 + + m20,0 + c20,10 10,40 23,40 + s3,-30 23,-40 + + M220,30 + Q230,72 243,33 + T266,30 + + M290,30 + q10,42 23,3 + t23,-3 + + M368,53 + A23,13 -60 1 1 382,53 + + M410,53 + a23,13 -60 1 1 14,0 + "/> + + <path transform="translate(0,210)" + d="M10,10 + L40,10 + l-30,60 + H40 + V10 + h30 + v60 + + M80,10 + C110,10 95,70 110,70 + S110,10 140,10 + + m10,0 + c30,0 15,60 30,60 + s0,-60 30,-60 + + M220,40 + Q235,98 250,40 + T280,40 + + M290,40 + q15,58 30,0 + t30,0 + + M372,70 + A30,15 -90 1 1 384,70 + + M410,70 + a30,15 -90 1 1 12,0 + "/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-path-d-01.svg b/layout/reftests/svg/smil/anim-path-d-01.svg new file mode 100644 index 0000000000..180cfe5679 --- /dev/null +++ b/layout/reftests/svg/smil/anim-path-d-01.svg @@ -0,0 +1,340 @@ +<!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=522306 +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the 'd' attribute on the 'path' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <style type="text/css"> + path { fill: none; stroke: blue; stroke-width: 1px; + shape-rendering: crispEdges; } + </style> + + + <!-- The difference between respective numbers in the effective 'from' and + 'to' path data below is carefully designed to be a factor of 3. That way + our reference file (which checks against a one third complete animation) + can contain whole numbers, which is necessary to avoid failure due to + hard coded rounded numbers in the reference not matching platform + specific rounding behaviour. + --> + + <!-- Test 'to' animation. --> + + <path d="M10,10 + L19,10 + l-9,18 + H19 + V10 + h9 + v18 + + M80,10 + C80,40 80,10 89,10 + S98,40 98,10 + + m40,0 + c0,30 0,0 9,0 + s9,30 9,0 + + M220,10 + Q220,20 229,19 + T238,10 + + M290,10 + q0,10 9,9 + t9,-9 + + M360,19 + A9,9 0 1 1 378,19 + + M410,19 + a9,9 0 1 1 18,0 + "> + <animate attributeName="d" + calcMode="linear" + begin="0s" dur="3s" + to="M10,10 + L40,10 + l-30,60 + H40 + V10 + h30 + v60 + + M80,10 + C110,10 95,70 110,70 + S110,10 140,10 + + m10,0 + c30,0 15,60 30,60 + s0,-60 30,-60 + + M220,40 + Q235,98 250,40 + T280,40 + + M290,40 + q15,58 30,0 + t30,0 + + M372,70 + A30,15 -90 1 1 384,70 + + M410,70 + a30,15 -90 1 1 12,0 + " + fill="freeze"/> + </path> + + + <!-- Test 'by' animation. --> + + <path transform="translate(0, 70)" + d="M10,10 + L19,10 + l-9,18 + H19 + V10 + h9 + v18 + + M80,10 + C80,40 80,10 89,10 + S98,40 98,10 + + m40,0 + c0,30 0,0 9,0 + s9,30 9,0 + + M220,10 + Q220,20 229,19 + T238,10 + + M290,10 + q0,10 9,9 + t9,-9 + + M360,19 + A9,9 0 1 1 378,19 + + M410,19 + a9,9 0 1 1 18,0 + "> + <animate attributeName="d" + calcMode="linear" + begin="0s" dur="3s" + by="M0,0 + L21,0 + l-21,42 + H21 + V0 + h21 + v42 + + M0,0 + C30,-30 15,60 21,60 + S12,-30 42,0 + + m-30,0 + c30,-30 15,60 21,60 + s-9,-90 21,-60 + + M0,30 + Q15,78 21,21 + T42,30 + + M0,30 + q15,48 21,-9 + t21,9 + + M12,51 + A21,6 -90 1 1 6,51 + + M0,51 + a21,6 -90 1 1 -6,0 + " + fill="freeze"/> + </path> + + + <!-- Test calcMode="paced". We don't currently support paced animation, so + we're just testing that we don't do anything unexpected (that we behave + as if calcMode="discrete"). + --> + + <path transform="translate(0, 140)"> + <animate attributeName="d" + calcMode="paced" + begin="0s" dur="3s" + values=" + M10,10 + L19,10 + l-9,18 + H19 + V10 + h9 + v18 + + M80,10 + C80,40 80,10 89,10 + S98,40 98,10 + + m40,0 + c0,30 0,0 9,0 + s9,30 9,0 + + M220,10 + Q220,20 229,19 + T238,10 + + M290,10 + q0,10 9,9 + t9,-9 + + M360,19 + A9,9 0 1 1 378,19 + + M410,19 + a9,9 0 1 1 18,0 + + ; + + M10,10 + L33,10 + l-23,46 + H33 + V10 + h23 + v46 + + M80,10 + C100,20 90,50 103,50 + S106,20 126,10 + + m20,0 + c20,10 10,40 23,40 + s3,-30 23,-40 + + M220,30 + Q230,72 243,33 + T266,30 + + M290,30 + q10,42 23,3 + t23,-3 + + M368,53 + A23,13 -60 1 1 382,53 + + M410,53 + a23,13 -60 1 1 14,0 + + ; + + M10,10 + L40,10 + l-30,60 + H40 + V10 + h30 + v60 + + M80,10 + C110,10 95,70 110,70 + S110,10 140,10 + + m10,0 + c30,0 15,60 30,60 + s0,-60 30,-60 + + M220,40 + Q235,98 250,40 + T280,40 + + M290,40 + q15,58 30,0 + t30,0 + + M372,70 + A30,15 -90 1 1 384,70 + + M410,70 + a30,15 -90 1 1 12,0 + " + fill="freeze"/> + </path> + + + <!-- Test calcMode="discrete". --> + + <path transform="translate(0, 210)" + d="M10,10 + L19,10 + l-9,18 + H19 + V10 + h9 + v18 + + M80,10 + C80,40 80,10 89,10 + S98,40 98,10 + + m40,0 + c0,30 0,0 9,0 + s9,30 9,0 + + M220,10 + Q220,20 229,19 + T238,10 + + M290,10 + q0,10 9,9 + t9,-9 + + M360,19 + A9,9 0 1 1 378,19 + + M410,19 + a9,9 0 1 1 18,0 + "> + <animate attributeName="d" + calcMode="discrete" + begin="0s" dur="2s" + to="M10,10 + L40,10 + l-30,60 + H40 + V10 + h30 + v60 + + M80,10 + C110,10 95,70 110,70 + S110,10 140,10 + + m10,0 + c30,0 15,60 30,60 + s0,-60 30,-60 + + M220,40 + Q235,98 250,40 + T280,40 + + M290,40 + q15,58 30,0 + t30,0 + + M372,70 + A30,15 -90 1 1 384,70 + + M410,70 + a30,15 -90 1 1 12,0 + " + fill="freeze"/> + </path> + +</svg> diff --git a/layout/reftests/svg/smil/anim-pathLength-01-ref.svg b/layout/reftests/svg/smil/anim-pathLength-01-ref.svg new file mode 100644 index 0000000000..3766e11912 --- /dev/null +++ b/layout/reftests/svg/smil/anim-pathLength-01-ref.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path id="path_1" fill="none" d="M 0,50 h 500"/> + <path id="path_2" fill="none" d="M 0,100 h 500"/> + <text fill="blue"> + <textPath xlink:href="#path_1" startOffset="20"> + Some text + </textPath> + </text> + <text fill="blue"> + <textPath xlink:href="#path_2" startOffset="20"> + Some text + </textPath> + </text> +</svg> diff --git a/layout/reftests/svg/smil/anim-pathLength-01.svg b/layout/reftests/svg/smil/anim-pathLength-01.svg new file mode 100644 index 0000000000..66e60b3350 --- /dev/null +++ b/layout/reftests/svg/smil/anim-pathLength-01.svg @@ -0,0 +1,35 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "pathLength" attribute on the "path" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <path id="path_1" fill="none" d="M 0,50 h 500" pathLength="5000"> + <animate attributeName="pathLength" + calcMode="linear" + begin="0s" dur="2s" + from="5000" to="95000" + fill="freeze"/> + </path> + <path id="path_2" fill="none" d="M 0,100 h 500" pathLength="5000"> + <animate attributeName="pathLength" + calcMode="linear" + begin="0s" dur="1s" + from="5000" to="50000" + fill="freeze"/> + </path> + + <!-- test 50% completed animation --> + <text fill="blue"> + <textPath xlink:href="#path_1" startOffset="2000"> + Some text + </textPath> + </text> + + <!-- test 100% completed animation --> + <text fill="blue"> + <textPath xlink:href="#path_2" startOffset="2000"> + Some text + </textPath> + </text> +</svg> diff --git a/layout/reftests/svg/smil/anim-pattern-attr-presence-01-ref.svg b/layout/reftests/svg/smil/anim-pattern-attr-presence-01-ref.svg new file mode 100644 index 0000000000..078798d2e8 --- /dev/null +++ b/layout/reftests/svg/smil/anim-pattern-attr-presence-01-ref.svg @@ -0,0 +1,133 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 800"> + <!-- 1. patternUnits --> + <defs> + <pattern id="patternUnits" width="80" height="80" + patternUnits="userSpaceOnUse"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <rect width="100" height="100" stroke="black" fill="url(#patternUnits)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#patternUnits)"/> + </g> + <!-- 2. patternContentUnits --> + <defs> + <pattern id="patternContentUnits" width="1" height="1" + patternContentUnits="objectBoundingBox"> + <rect width="0.5" height="0.5" fill="blue"/> + <rect x="0.5" width="0.5" height="0.5" fill="red"/> + <rect y="0.5" width="0.5" height="0.5" fill="red"/> + <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 100)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternContentUnits)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternContentUnits)"/> + </g> + </g> + <!-- 3. patternTransform --> + <defs> + <pattern id="patternTransform" width="1" height="1" + patternTransform="rotate(45 50 50)"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 200)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternTransform)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternTransform)"/> + </g> + </g> + <!-- 4. preserveAspectRatio --> + <defs> + <pattern id="par" width="1" height="1" viewBox="0.1 0.1 0.6 0.85" + preserveAspectRatio="none"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 300)"> + <rect width="100" height="100" stroke="black" fill="url(#par)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#par)"/> + </g> + </g> + <!-- 5. viewBox --> + <defs> + <pattern id="viewBox" width="1" height="1" viewBox="0.1 0.1 0.6 0.85" + preserveAspectRatio="none"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 400)"> + <rect width="100" height="100" stroke="black" fill="url(#viewBox)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#viewBox)"/> + </g> + </g> + <!-- 6. xlink:href --> + <defs> + <pattern id="xlink" xlink:href="#xlinkRef"/> + <pattern id="xlinkRef" width="1" height="1"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 500)"> + <rect width="100" height="100" stroke="black" fill="url(#xlink)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#xlink)"/> + </g> + </g> + <!-- 6. x, y --> + <defs> + <pattern id="xy" width="1" height="1" x="0.1" y="-0.1"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 600)"> + <rect width="100" height="100" stroke="black" fill="url(#xy)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#xy)"/> + </g> + </g> + <!-- 7. width, height --> + <defs> + <pattern id="widthHeight" width="1" height="1"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 700)"> + <rect width="100" height="100" stroke="black" fill="url(#widthHeight)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#widthHeight)"/> + </g> + </g> + <!-- If adding more tests here, be sure to update the viewBox on the root svg + element --> +</svg> diff --git a/layout/reftests/svg/smil/anim-pattern-attr-presence-01.svg b/layout/reftests/svg/smil/anim-pattern-attr-presence-01.svg new file mode 100644 index 0000000000..8a75347a81 --- /dev/null +++ b/layout/reftests/svg/smil/anim-pattern-attr-presence-01.svg @@ -0,0 +1,175 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 800"> + <!-- Bug 544809 - nsSVGPatternFrame::GetPatternWithAttr and callers should + take account of SMIL animation. + + Test animating pattern attributes doesn't rely on the presence of + attributes in the DOM, but also correctly detects attributes set by + animation. + + The format of each test is that we have a base pattern named (attName)Ref + which does NOT specify the attribute under test, but instead sets the + attribute to a non-default value using animation. + + Then we have a referencing pattern named (attName) that refers to the + base pattern and also does NOT specify the attribute under test. + + When we go to look up the attribute under test we begin at (attName), + notice the attribute isn't specified (either in the DOM or by animation), + then go to (attName)Ref and detect that the attribute is specified there + by animation and use that value. + + To the right of each test we also include a rect that directly references + (attName)Ref. The two rectangles should be identical but prior to fixing + this bug they were not. + --> + <!-- 1. patternUnits: defaults to objectBoundingBox --> + <defs> + <pattern xlink:href="#patternUnitsRef" id="patternUnits"/> + <pattern id="patternUnitsRef" width="80" height="80"> + <set attributeName="patternUnits" to="userSpaceOnUse"/> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <rect width="100" height="100" stroke="black" fill="url(#patternUnits)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#patternUnitsRef)"/> + </g> + <!-- 2. patternContentUnits: defaults to userSpaceOnUse --> + <defs> + <pattern xlink:href="#patternContentUnitsRef" id="patternContentUnits"/> + <pattern id="patternContentUnitsRef" width="1" height="1"> + <set attributeName="patternContentUnits" to="objectBoundingBox"/> + <rect width="0.5" height="0.5" fill="blue"/> + <rect x="0.5" width="0.5" height="0.5" fill="red"/> + <rect y="0.5" width="0.5" height="0.5" fill="red"/> + <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 100)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternContentUnits)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternContentUnitsRef)"/> + </g> + </g> + <!-- 3. patternTransform: defaults to identity --> + <defs> + <pattern xlink:href="#patternTransformRef" id="patternTransform"/> + <pattern id="patternTransformRef" width="1" height="1"> + <animateTransform attributeName="patternTransform" type="rotate" + values="45 50 50" fill="freeze"/> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 200)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternTransform)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" + fill="url(#patternTransformRef)"/> + </g> + </g> + <!-- 4. preserveAspectRatio: defaults to xMidYMid meet --> + <defs> + <pattern xlink:href="#parRef" id="par"/> + <pattern id="parRef" width="1" height="1" viewBox="0.1 0.1 0.6 0.85"> + <set attributeName="preserveAspectRatio" to="none"/> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 300)"> + <rect width="100" height="100" stroke="black" fill="url(#par)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#parRef)"/> + </g> + </g> + <!-- 5. viewBox --> + <defs> + <pattern xlink:href="#viewBoxRef" id="viewBox"/> + <pattern id="viewBoxRef" width="1" height="1" + preserveAspectRatio="none"> + <set attributeName="viewBox" to="0.1 0.1 0.6 0.85"/> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 400)"> + <rect width="100" height="100" stroke="black" fill="url(#viewBox)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#viewBoxRef)"/> + </g> + </g> + <!-- 6. xlink:href + This attribute is not affected by bug 544809, i.e. it doesn't use + nsSVGPatternFrame::GetPatternWithAttr, but we test it here for completeness + --> + <defs> + <pattern id="xlink"> + <set attributeName="xlink:href" to="#xlinkRef"/> + </pattern> + <pattern id="xlinkRef" width="1" height="1"> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 500)"> + <rect width="100" height="100" stroke="black" fill="url(#xlink)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#xlinkRef)"/> + </g> + </g> + <!-- 6. x, y: defaults to 0 --> + <defs> + <pattern xlink:href="#xyRef" id="xy"/> + <pattern id="xyRef" width="1" height="1"> + <set attributeName="x" to="0.1"/> + <set attributeName="y" to="-0.1"/> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 600)"> + <rect width="100" height="100" stroke="black" fill="url(#xy)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" fill="url(#xyRef)"/> + </g> + </g> + <!-- 7. width, height: defaults to 0 (disables rendering) --> + <defs> + <pattern xlink:href="#widthHeightRef" id="widthHeight"/> + <pattern id="widthHeightRef"> + <set attributeName="width" to="1"/> + <set attributeName="height" to="1"/> + <rect width="50" height="50" fill="blue"/> + <rect x="50" width="50" height="50" fill="red"/> + <rect y="50" width="50" height="50" fill="red"/> + <rect x="50" y="50" width="50" height="50" fill="blue"/> + </pattern> + </defs> + <g transform="translate(0 700)"> + <rect width="100" height="100" stroke="black" fill="url(#widthHeight)"/> + <g transform="translate(100)"> + <rect width="100" height="100" stroke="black" + fill="url(#widthHeightRef)"/> + </g> + </g> + <!-- If adding more tests here, be sure to update the viewBox on the root svg + element --> +</svg> diff --git a/layout/reftests/svg/smil/anim-pattern-href-01.svg b/layout/reftests/svg/smil/anim-pattern-href-01.svg new file mode 100644 index 0000000000..3c9b051558 --- /dev/null +++ b/layout/reftests/svg/smil/anim-pattern-href-01.svg @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.5, true)"> + <title>Test animation of the "xlink:href" <string> attribute on the "pattern" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <defs> + <pattern id="pat1a" patternUnits="objectBoundingBox" width="1" height="1"> + <rect width="100%" height="100%" fill="red"/> + </pattern> + <pattern id="pat1b" patternUnits="objectBoundingBox" width="1" height="1"> + <rect width="100%" height="100%" fill="lime"/> + </pattern> + <pattern id="pat2" xlink:href="#pat1a"> + <animate attributeName="xlink:href" + begin="0s" dur="1s" + from="#pat1a" to="#pat1b"/> + </pattern> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <rect x="20" y="150" width="440" height="80" fill="url(#pat2)" /> + +</svg> diff --git a/layout/reftests/svg/smil/anim-polygon-points-01-ref.svg b/layout/reftests/svg/smil/anim-polygon-points-01-ref.svg new file mode 100644 index 0000000000..fc5393f525 --- /dev/null +++ b/layout/reftests/svg/smil/anim-polygon-points-01-ref.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style type="text/css"> + polygon { fill: blue; } + </style> + + <polygon points="10,10 70,50 110,10 160,30 210,10"/> + + <polygon transform="translate(0, 70)" + points="10,10 70,50 110,10 160,30 210,10"/> + + <polygon transform="translate(0, 140)" + points="10,10 70,50 110,10 160,30 210,10"/> + + <polygon transform="translate(0, 210)" + points="10,10 70,10 110,10 160,70 210,10"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-polygon-points-01.svg b/layout/reftests/svg/smil/anim-polygon-points-01.svg new file mode 100644 index 0000000000..1f4f9e6432 --- /dev/null +++ b/layout/reftests/svg/smil/anim-polygon-points-01.svg @@ -0,0 +1,73 @@ +<!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=522308 +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the 'points' attribute on the 'polygon' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <style type="text/css"> + polygon { fill: blue; } + </style> + + + <!-- The difference between respective numbers in the effective 'from' and + 'to' lists below is carefully designed to be a factor of 3. That way + our reference file (which checks against a one third complete animation) + can contain whole numbers, which is necessary to avoid failure due to + hard coded rounded numbers in the reference not matching platform + specific rounding behaviour. + --> + + <!-- Test 'to' animation. --> + + <polygon points="10,10 70,70 110,10 160,10 210,10"> + <animate attributeName="points" + calcMode="linear" + begin="0s" dur="3s" + to="10,10 70,10 110,10 160,70 210,10" + fill="freeze"/> + </polygon> + + + <!-- Test 'by' animation. --> + + <polygon transform="translate(0, 70)" + points="10,10 70,70 110,10 160,10 210,10"> + <animate attributeName="points" + calcMode="linear" + begin="0s" dur="3s" + by="0,0 0,-60 0,0 0,60 0,0" + fill="freeze"/> + </polygon> + + + <!-- Test calcMode="paced". We don't currently support paced animation, so + we're just testing that we don't do anything unexpected (that we behave + as if calcMode="discrete"). + --> + + <polygon transform="translate(0, 140)"> + <animate attributeName="points" + calcMode="paced" + begin="0s" dur="3s" + values="10,10 70,70 110,10 160,10 210,10; + 10,10 70,30 110,10 160,50 210,10; + 10,10 70,10 110,10 160,70 210,10" + fill="freeze"/> + </polygon> + + + <!-- Test calcMode="discrete". --> + + <polygon transform="translate(0, 210)" + points="10,10 70,70 110,10 160,10 210,10"> + <animate attributeName="points" + calcMode="discrete" + begin="0s" dur="2s" + to="10,10 70,10 110,10 160,70 210,10" + fill="freeze"/> + </polygon> + +</svg> diff --git a/layout/reftests/svg/smil/anim-polyline-points-01-ref.svg b/layout/reftests/svg/smil/anim-polyline-points-01-ref.svg new file mode 100644 index 0000000000..812b1ae2e8 --- /dev/null +++ b/layout/reftests/svg/smil/anim-polyline-points-01-ref.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style type="text/css"> + polyline { fill: none; stroke: blue; stroke-width: 2px; } + </style> + + <polyline points="10,10 70,50 110,10 160,30 210,10"/> + + <polyline transform="translate(0, 70)" + points="10,10 70,50 110,10 160,30 210,10"/> + + <polyline transform="translate(0, 140)" + points="10,10 70,50 110,10 160,30 210,10"/> + + <polyline transform="translate(0, 210)" + points="10,10 70,10 110,10 160,70 210,10"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-polyline-points-01.svg b/layout/reftests/svg/smil/anim-polyline-points-01.svg new file mode 100644 index 0000000000..89dc2f3b1e --- /dev/null +++ b/layout/reftests/svg/smil/anim-polyline-points-01.svg @@ -0,0 +1,73 @@ +<!-- + From https://bugzilla.mozilla.org/show_bug.cgi?id=522308 +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the 'points' attribute on the 'polyline' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <style type="text/css"> + polyline { fill: none; stroke: blue; stroke-width: 2px; } + </style> + + + <!-- The difference between respective numbers in the effective 'from' and + 'to' lists below is carefully designed to be a factor of 3. That way + our reference file (which checks against a one third complete animation) + can contain whole numbers, which is necessary to avoid failure due to + hard coded rounded numbers in the reference not matching platform + specific rounding behaviour. + --> + + <!-- Test 'to' animation. --> + + <polyline points="10,10 70,70 110,10 160,10 210,10"> + <animate attributeName="points" + calcMode="linear" + begin="0s" dur="3s" + to="10,10 70,10 110,10 160,70 210,10" + fill="freeze"/> + </polyline> + + + <!-- Test 'by' animation. --> + + <polyline transform="translate(0, 70)" + points="10,10 70,70 110,10 160,10 210,10"> + <animate attributeName="points" + calcMode="linear" + begin="0s" dur="3s" + by="0,0 0,-60 0,0 0,60 0,0" + fill="freeze"/> + </polyline> + + + <!-- Test calcMode="paced". We don't currently support paced animation, so + we're just testing that we don't do anything unexpected (that we behave + as if calcMode="discrete"). + --> + + <polyline transform="translate(0, 140)"> + <animate attributeName="points" + calcMode="paced" + begin="0s" dur="3s" + values="10,10 70,70 110,10 160,10 210,10; + 10,10 70,30 110,10 160,50 210,10; + 10,10 70,10 110,10 160,70 210,10" + fill="freeze"/> + </polyline> + + + <!-- Test calcMode="discrete". --> + + <polyline transform="translate(0, 210)" + points="10,10 70,70 110,10 160,10 210,10"> + <animate attributeName="points" + calcMode="discrete" + begin="0s" dur="2s" + to="10,10 70,10 110,10 160,70 210,10" + fill="freeze"/> + </polyline> + +</svg> diff --git a/layout/reftests/svg/smil/anim-rect-rxry-1-ref.svg b/layout/reftests/svg/smil/anim-rect-rxry-1-ref.svg new file mode 100644 index 0000000000..bda4c9e518 --- /dev/null +++ b/layout/reftests/svg/smil/anim-rect-rxry-1-ref.svg @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"> + <g fill="blue" stroke="red" stroke-width="10" transform="translate(10 10)"> + <!-- Squares --> + <rect x="0" width="40" height="40"/> + <rect x="60" width="40" height="40"/> + <rect x="120" width="40" height="40"/> + <rect x="180" width="40" height="40"/> + + <!-- rx=0 ry=20 --> + <rect x="0" y="60" width="40" height="40" rx="0" ry="20"/> + <rect x="60" y="60" width="40" height="40" rx="0" ry="20"/> + <rect x="120" y="60" width="40" height="40" rx="0" ry="20"/> + <rect x="180" y="60" width="40" height="40" rx="0" ry="20"/> + <rect x="240" y="60" width="40" height="40" rx="0" ry="20"/> + + <!-- rx=20 (hence ry=20) --> + <rect x="0" y="120" width="40" height="40" rx="20"/> + <rect x="60" y="120" width="40" height="40" rx="20"/> + <rect x="120" y="120" width="40" height="40" rx="20"/> + <rect x="180" y="120" width="40" height="40" rx="20"/> + <rect x="240" y="120" width="40" height="40" rx="20"/> + <rect x="300" y="120" width="40" height="40" rx="20"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/anim-rect-rxry-1.svg b/layout/reftests/svg/smil/anim-rect-rxry-1.svg new file mode 100644 index 0000000000..462388b719 --- /dev/null +++ b/layout/reftests/svg/smil/anim-rect-rxry-1.svg @@ -0,0 +1,65 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" shape-rendering="crispEdges"> + <g fill="blue" stroke="red" stroke-width="10" transform="translate(10 10)"> + <!-- Squares --> + <rect x="0" width="40" height="40"/> + <rect x="60" width="40" height="40"> + <set attributeName="rx" to="0"/> + </rect> + <rect x="120" width="40" height="40" rx="20"> + <set attributeName="rx" to="0"/> + </rect> + <rect x="180" width="40" height="40" rx="20" ry="20"> + <set attributeName="rx" to="0"/> + <set attributeName="ry" to="0"/> + </rect> + + <!-- rx=0 ry=20 --> + <rect x="0" y="60" width="40" height="40" rx="0" ry="20"/> + <rect x="60" y="60" width="40" height="40" ry="20"> + <set attributeName="rx" to="0"/> + </rect> + <rect x="120" y="60" width="40" height="40" rx="20" ry="20"> + <set attributeName="rx" to="0"/> + </rect> + <rect x="180" y="60" width="40" height="40"> + <set attributeName="rx" to="0"/> + <set attributeName="ry" to="20"/> + </rect> + <rect x="240" y="60" width="40" height="40" id="a"> + <set attributeName="ry" to="20"/> + <!-- rx.baseVal will be set to 0 by script --> + </rect> + + <!-- rx=20 (hence ry=20) --> + <rect x="0" y="120" width="40" height="40" rx="20"/> + <rect x="60" y="120" width="40" height="40"> + <set attributeName="rx" to="20"/> + </rect> + <rect x="120" y="120" width="40" height="40" rx="0"> + <set attributeName="rx" to="20"/> + </rect> + <rect x="180" y="120" width="40" height="40" rx="10"> + <set attributeName="rx" to="20"/> + </rect> + <rect x="240" y="120" width="40" height="40" ry="0" id="b"> + <set attributeName="rx" to="20"/> + <!-- ry attribute will be removed by script --> + </rect> + <!-- rx.baseVal attribute will be set by script --> + <rect x="300" y="120" width="40" height="40" id="c"/> + </g> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + document.getElementById('a').rx.baseVal.value = 0; + document.getElementById('b').removeAttribute('ry'); + document.getElementById('c').rx.baseVal.value = 20; + // We can get very minor rendering differences on Windows due to the + // presence of animation in the document, even on un-animated content. + // This is most likely due to interaction with layers so we forcibly seek + // the animation timeline to try to produce a steady state for snapshot. + setTimeAndSnapshot(0.0, true); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-1.svg b/layout/reftests/svg/smil/anim-remove-1.svg new file mode 100644 index 0000000000..825a4c817d --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-1.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we delete an <animate> node while its animation is in + progress. We verify that animation effects are removed from its former + target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + anim.parentNode.removeChild(anim); + setTimeAndSnapshot(1, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-2.svg b/layout/reftests/svg/smil/anim-remove-2.svg new file mode 100644 index 0000000000..e48104bd37 --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-2.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we delete an <animate> node after its animation is + completed & frozen. We verify that animation effects are removed from its + former target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var anim = document.getElementById("anim"); + anim.parentNode.removeChild(anim); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-3.svg b/layout/reftests/svg/smil/anim-remove-3.svg new file mode 100644 index 0000000000..783cc2d02f --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-3.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we delete an <animate> node while its animation is in + progress. We verify that animation effects are removed from its former + target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + anim.parentNode.removeChild(anim); + setTimeAndSnapshot(1, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-4.svg b/layout/reftests/svg/smil/anim-remove-4.svg new file mode 100644 index 0000000000..ff2f7a4502 --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-4.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we delete an <animate> node after its animation is + completed & frozen. We verify that animation effects are removed from its + former target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var anim = document.getElementById("anim"); + anim.parentNode.removeChild(anim); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-5.svg b/layout/reftests/svg/smil/anim-remove-5.svg new file mode 100644 index 0000000000..a65ae5aba4 --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-5.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we remove an animation element's "attributeName" + attribute, which invalidates a completed, frozen animation. We verify + that animation effects are removed from the previously-targeted + attribute. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var anim = document.getElementById("anim"); + anim.removeAttributeNS(null, "attributeName"); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="x" + begin="0s" dur="2s" by="100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-6.svg b/layout/reftests/svg/smil/anim-remove-6.svg new file mode 100644 index 0000000000..841884619f --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-6.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we change an animation element's "attributeType" attribute + to refer to another namespace, which invalidates a completed, frozen animation + (since there is no animatable 'x' attribute in the xlink namespace on a rect) + We verify that animation effects are removed from the previously-targeted + attribute. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var anim = document.getElementById("anim"); + anim.setAttributeNS(null, "attributeName", "xlink:x"); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="x" + begin="0s" dur="2s" by="100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-7.svg b/layout/reftests/svg/smil/anim-remove-7.svg new file mode 100644 index 0000000000..6aa58cd16c --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-7.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we change an animation element's "by" attribute to an + invalid value. We verify that animation effects are removed from the + previously-targeted attribute. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var anim = document.getElementById("anim"); + anim.setAttributeNS(null, "by", "invalid value that can't be added"); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="x" + begin="0s" dur="2s" by="100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-8css.svg b/layout/reftests/svg/smil/anim-remove-8css.svg new file mode 100644 index 0000000000..6e4b0517a3 --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-8css.svg @@ -0,0 +1,35 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()" + class="reftest-wait"> + <!-- In this test, we temporarily remove the animation target, detach + its <animate> node, and then reinsert the (now former) animation target. + We verify that animation effects are removed from the former target. --> + <script> + var parent; + var rect; + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + rect = anim.parentNode; + parent = rect.parentNode; + parent.removeChild(rect); + rect.removeChild(anim); + + setTimeout(reinsert, 50); // Allow time for a sample + } + function reinsert() { + parent.appendChild(rect); + document.documentElement.removeAttribute("class"); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue" + stroke="red" stroke-width="0"> + <animate id="anim" attributeName="stroke-width" + begin="0s" dur="2s" from="25" to="50" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-8xml.svg b/layout/reftests/svg/smil/anim-remove-8xml.svg new file mode 100644 index 0000000000..bef228d49e --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-8xml.svg @@ -0,0 +1,34 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()" + class="reftest-wait"> + <!-- In this test, we temporarily remove the animation target, detach + its <animate> node, and then reinsert the (now former) animation target. + We verify that animation effects are removed from the former target. --> + <script> + var parent; + var rect; + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + rect = anim.parentNode; + parent = rect.parentNode; + parent.removeChild(rect); + rect.removeChild(anim); + + setTimeout(reinsert, 50); // Allow time for a sample + } + function reinsert() { + parent.appendChild(rect); + document.documentElement.removeAttribute("class"); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="height" + begin="0s" dur="2s" from="25" to="50" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-remove-9.svg b/layout/reftests/svg/smil/anim-remove-9.svg new file mode 100644 index 0000000000..0cbe3d0a90 --- /dev/null +++ b/layout/reftests/svg/smil/anim-remove-9.svg @@ -0,0 +1,27 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <!-- Bug 728758 - Removing a stacked animation fails to update --> + <!-- In this test we check that removing an animation applied on top of + another animation causes the underlying animation's result to show. --> + <script> + function go() { + document.documentElement.pauseAnimations(); + // Force a sample after starting the bottom animation, but before starting + // the top animation. + document.documentElement.setCurrentTime(0.5); + // Sample again after the top animation has started + document.documentElement.setCurrentTime(1); + // Remove top animation + var anim = document.getElementById("anim"); + anim.parentNode.removeChild(anim); + // Sample again + document.documentElement.setCurrentTime(1); + document.documentElement.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="orange"> + <set attributeName="fill" to="blue"/> + <set attributeName="fill" to="red" begin="1s" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-1.svg b/layout/reftests/svg/smil/anim-retarget-1.svg new file mode 100644 index 0000000000..8b44bd7cb6 --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-1.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we move an in-progress animation from one parent to + another. We verify that animation effects are removed from the old + parent and are applied to the new parent. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + var redRect = document.getElementById("redRect"); + redRect.appendChild(anim); + setTimeAndSnapshot(1, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="redRect" x ="15" y="15" width="200" height="250" fill="red"/> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-2.svg b/layout/reftests/svg/smil/anim-retarget-2.svg new file mode 100644 index 0000000000..7972e47ee7 --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-2.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we move a completed & frozen animation from one parent to + another. We verify that animation effects are removed from the old + parent and are applied to the new parent. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var anim = document.getElementById("anim"); + var redRect = document.getElementById("redRect"); + redRect.appendChild(anim); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="redRect" x ="15" y="15" width="200" height="300" fill="red"/> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-3.svg b/layout/reftests/svg/smil/anim-retarget-3.svg new file mode 100644 index 0000000000..e42365211a --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-3.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we retarget an in-progress animation from one target to + another. We verify that animation effects are removed from the old + target and are applied to the new target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + anim.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#redRect"); + setTimeAndSnapshot(1, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="redRect" x="15" y="15" width="200" height="250" fill="red"/> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-4.svg b/layout/reftests/svg/smil/anim-retarget-4.svg new file mode 100644 index 0000000000..c48c3e11af --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-4.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we remove the "xlink:href" attribute on an in-progress + animation, changing it to target its parent. We verify that animation + effects are removed from the old target and are applied to the new + target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + anim.removeAttributeNS("http://www.w3.org/1999/xlink", "href"); + setTimeAndSnapshot(1, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="redRect" x="15" y="15" width="200" height="250" fill="red"> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> + </rect> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-5.svg b/layout/reftests/svg/smil/anim-retarget-5.svg new file mode 100644 index 0000000000..b1e50efd27 --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-5.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we add an "xlink:href" attribute to an in-progress + animation, changing it to no longer target its parent. We verify that + animation effects are removed from the old target and are applied to the + new target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var anim = document.getElementById("anim"); + anim.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#redRect"); + setTimeAndSnapshot(1, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="redRect" x="15" y="15" width="200" height="250" fill="red"/> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-6.svg b/layout/reftests/svg/smil/anim-retarget-6.svg new file mode 100644 index 0000000000..2f2f8b05d9 --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-6.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we tweak an element's "id" attribute, which retargets an + in-progress animation to that element. We verify that animation effects + are removed from the old target and are applied to the new target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(0.5); + + var newTarget = document.getElementById("newTarget"); + newTarget.setAttributeNS(null, "id", "target"); + setTimeAndSnapshot(1, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="newTarget" x="15" y="15" width="200" height="250" fill="red"/> + <rect id="target" x="15" y="15" width="200" height="200" fill="blue"/> + <animate id="anim" xlink:href="#target" attributeName="height" + begin="0s" dur="2s" by="-100" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-7.svg b/layout/reftests/svg/smil/anim-retarget-7.svg new file mode 100644 index 0000000000..d54c4e9468 --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-7.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we remove an element's "id" attribute, which retargets a + completed, frozen animation from that element to another. We verify + that animation effects are removed from the old target and are applied + to the new target. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var newTarget = document.getElementById("target"); + newTarget.removeAttributeNS(null, "id"); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="target" x="15" y="15" width="200" height="200" fill="red"/> + <rect id="target" x="15" y="15" width="200" height="100" fill="blue"/> + <animate id="anim" xlink:href="#target" attributeName="height" + begin="0s" dur="2s" by="100" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-retarget-8.svg b/layout/reftests/svg/smil/anim-retarget-8.svg new file mode 100644 index 0000000000..6b4a3fc220 --- /dev/null +++ b/layout/reftests/svg/smil/anim-retarget-8.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()"> + <!-- In this test, we change an animation element's "attributeName" + attribute, which retargets a completed, frozen animation from one + attribute to another. We verify that animation effects are removed from + the old attribute and are applied to the new one. --> + <script> + function go() { + // Seek animation before we start tweaking things, to make sure we've + // already started sampling it. + document.documentElement.setCurrentTime(2.0); + + var anim = document.getElementById("anim"); + anim.setAttributeNS(null, "attributeName", "height"); + setTimeAndSnapshot(2.5, false); + } + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="100" fill="blue"> + <animate id="anim" attributeName="x" + begin="0s" dur="2s" by="100" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-standard-ref.html b/layout/reftests/svg/smil/anim-standard-ref.html new file mode 100644 index 0000000000..cc2ca1a67f --- /dev/null +++ b/layout/reftests/svg/smil/anim-standard-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <head> + <title>Testcase reference file for animated pass condition(HTML)</title> + </head> + <body style="background-color: lime;"> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-standard-ref.svg b/layout/reftests/svg/smil/anim-standard-ref.svg new file mode 100644 index 0000000000..39f37ae6d1 --- /dev/null +++ b/layout/reftests/svg/smil/anim-standard-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-strokecolor-1.svg b/layout/reftests/svg/smil/anim-strokecolor-1.svg new file mode 100644 index 0000000000..8da75727d5 --- /dev/null +++ b/layout/reftests/svg/smil/anim-strokecolor-1.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="20" y="20" width="190" height="190" + fill="rgb(0,0,255)" stroke="rgb(255,0,0)" stroke-width="10"> + <animateColor attributeName="stroke" + from="rgb(255,0,0)" to="rgb(0,0,255)" + begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-strokewidth-1xml.svg b/layout/reftests/svg/smil/anim-strokewidth-1xml.svg new file mode 100644 index 0000000000..828ecdb84e --- /dev/null +++ b/layout/reftests/svg/smil/anim-strokewidth-1xml.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="200" height="200" + fill="blue" stroke="red" stroke-width="10"> + <animate attributeName="stroke-width" attributeType="XML" + from="10" to="0" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-svg-preserveAspectRatio-01.svg b/layout/reftests/svg/smil/anim-svg-preserveAspectRatio-01.svg new file mode 100644 index 0000000000..c6b43efdbe --- /dev/null +++ b/layout/reftests/svg/smil/anim-svg-preserveAspectRatio-01.svg @@ -0,0 +1,40 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "preserveAspectRatio" attribute on the "svg" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="lime"/> + + <!-- 40% through animation simple duration - + tests that the animation doesn't affect the element too early --> + <svg width="100" height="50" viewBox="0 0 100 100" + preserveAspectRatio="xMidYMid meet"> + <!-- this should change the referencing element at 1.25s, + causing the red rect to stretch to fill its whole viewport --> + <animate attributeName="preserveAspectRatio" + calcMode="discrete" + begin="0s" dur="2.5s" + from="xMidYMid meet" + to="xMidYMid slice" + fill="freeze"/> + <rect width="100%" height="100%" fill="red"/> + </svg> + <rect x="25" width="50" height="50" fill="lime"/> + + <!-- 50% through animation simple duration - + tests that the animation affects the element now --> + <rect y="50" width="100" height="50" fill="red"/> + <svg y="50" width="100" height="50" viewBox="0 0 100 100" + preserveAspectRatio="xMidYMid meet"> + <!-- this should change the referencing element at 1s, + causing the lime rect to stretch to fill its whole viewport --> + <animate attributeName="preserveAspectRatio" + calcMode="discrete" + begin="0s" dur="2s" + from="xMidYMid meet" + to="xMidYMid slice" + fill="freeze"/> + <rect width="100%" height="100%" fill="lime"/> + </svg> +</svg> diff --git a/layout/reftests/svg/smil/anim-svg-viewBox-01.svg b/layout/reftests/svg/smil/anim-svg-viewBox-01.svg new file mode 100644 index 0000000000..cd4d863a78 --- /dev/null +++ b/layout/reftests/svg/smil/anim-svg-viewBox-01.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test linear animation of the "viewBox" attribute on the "svg" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="lime"/> + + <!-- 50% through animation simple duration - + the red rect should only be half the width of the viewport --> + <svg width="100" height="50" viewBox="0 0 0 50"> + <animate attributeName="viewBox" + calcMode="linear" + begin="0s" dur="2s" + to="0 0 100 50" + fill="freeze"/> + <rect width="100%" height="100%" fill="red"/> + </svg> + <rect x="25" width="50" height="50" fill="lime"/> + + <!-- 100% through animation simple duration - + the lime rect should stretch the entire width of the viewport --> + <rect y="50" width="100" height="50" fill="red"/> + <svg y="50" width="100" height="50" viewBox="0 0 0 50"> + <animate attributeName="viewBox" + calcMode="linear" + begin="0s" dur="1s" + to="0 0 100 50" + fill="freeze"/> + <rect width="100%" height="100%" fill="lime"/> + </svg> +</svg> diff --git a/layout/reftests/svg/smil/anim-svg-viewBox-02.svg b/layout/reftests/svg/smil/anim-svg-viewBox-02.svg new file mode 100644 index 0000000000..196d3bfe34 --- /dev/null +++ b/layout/reftests/svg/smil/anim-svg-viewBox-02.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test paced animation of the "viewBox" attribute on the "svg" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="lime"/> + + <!-- Check that the simple duration is split one third to the first + animation and two thirds to the second. This is because in the first + animation the left side travels 50, and in the second animation the + right side travels 100. --> + <svg width="50" height="50" viewBox="0 0 100 50"> + <animate attributeName="viewBox" + calcMode="paced" + begin="0s" dur="3s" + values="0 0 100 50; 50 0 50 50; 50 0 150 50" + fill="freeze"/> + <rect x="-100" y="-100" width="1000" height="1000" fill="red"/> + <rect x="50" y="0" width="50" height="50" fill="lime"/> + </svg> +</svg> diff --git a/layout/reftests/svg/smil/anim-svg-viewBox-03.svg b/layout/reftests/svg/smil/anim-svg-viewBox-03.svg new file mode 100644 index 0000000000..5415840333 --- /dev/null +++ b/layout/reftests/svg/smil/anim-svg-viewBox-03.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(12, true)"> + <title>Test discrete animation of the "viewBox" attribute on the "svg" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="lime"/> + + <svg width="200" height="200" viewBox="200 0 150 50"> + <animate attributeName="viewBox" + calcMode="discrete" + begin="10s" dur="4s" + values="200 0 150 50; none; 200 0 150 50" + fill="freeze"/> + <rect x="-100" y="-100" width="1000" height="1000" fill="red"/> + <rect width="200" height="200" fill="lime"/> + </svg> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-1.svg b/layout/reftests/svg/smil/anim-targethref-1.svg new file mode 100644 index 0000000000..23f8ade19b --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <!-- This test checks a basic animation with "xlink:href" targeting --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"/> + <animate xlink:href="#blueRect" attributeName="height" + to="200" begin="0s" dur="2s" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-10.svg b/layout/reftests/svg/smil/anim-targethref-10.svg new file mode 100644 index 0000000000..f015d8c052 --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-10.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <animate href="#x" attributeName="href" values="https://www.google.com"/> + <a id="x" fill="red"><rect x="15" y="15" width="200" height="200"/></a> + <style> + a:any-link { + fill: blue; + } + </style> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-2.svg b/layout/reftests/svg/smil/anim-targethref-2.svg new file mode 100644 index 0000000000..fd3864df4f --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-2.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks our behavior when "xlink:href" is modified --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function go() { + var anim = document.getElementById("anim"); + anim.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#blueRect"); + setTimeAndSnapshot(2.5, false) + } + </script> + <rect id="redRect" x="15" y="15" width="200" height="100" fill="red"/> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"/> + <animate id="anim" xlink:href="#redRect" attributeName="height" + to="200" begin="0s" dur="2s" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-3.svg b/layout/reftests/svg/smil/anim-targethref-3.svg new file mode 100644 index 0000000000..e15886fbad --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-3.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <!-- This test checks our behavior with animations that target nodes + other than their parents. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"/> + <animate id="anim" xlink:href="#redRect" attributeName="height" + to="0" begin="0s" dur="2s" fill="freeze"/> + <rect id="redRect" x="15" y="215" width="200" height="100" fill="red"> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-4.svg b/layout/reftests/svg/smil/anim-targethref-4.svg new file mode 100644 index 0000000000..34cd3f346d --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-4.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks our behavior with animations that are initially + href-targeted, but lose their href attribute. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function go() { + var anim = document.getElementById("anim"); + anim.removeAttributeNS("http://www.w3.org/1999/xlink", "href"); + setTimeAndSnapshot(2.5, false) + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"> + <animate id="anim" xlink:href="#redRect" attributeName="height" + to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> + <rect id="redRect" x="15" y="215" width="200" height="0" fill="red"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-5.svg b/layout/reftests/svg/smil/anim-targethref-5.svg new file mode 100644 index 0000000000..1e7e2f907a --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-5.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks our behavior with animations that initially + have no 'xlink:href' attribute, but receive one via scripting. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function go() { + var anim = document.getElementById("anim"); + anim.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#blueRect"); + setTimeAndSnapshot(2.5, false) + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"> + </rect> + <rect id="redRect" x="15" y="215" width="200" height="0" fill="red"> + <animate id="anim" attributeName="height" + to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-6.svg b/layout/reftests/svg/smil/anim-targethref-6.svg new file mode 100644 index 0000000000..0d8998a2b9 --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-6.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks our behavior with an 'xlink:href'-targeted animation + when the target's ID is changed (which makes it no longer the target) --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function go() { + var rect = document.getElementById("blueRect"); + rect.setAttributeNS(null, "id", "differentBlueRect"); + setTimeAndSnapshot(2.5, false) + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + to="0" begin="0s" dur="2s" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-7.svg b/layout/reftests/svg/smil/anim-targethref-7.svg new file mode 100644 index 0000000000..f131a45d0c --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-7.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks our behavior with an 'xlink:href'-targeted animation + when the target's ID is removed (which makes it no longer the target) --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function go() { + var rect = document.getElementById("blueRect"); + rect.removeAttributeNS(null, "id"); + setTimeAndSnapshot(2.5, false) + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"/> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + to="0" begin="0s" dur="2s" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-8.svg b/layout/reftests/svg/smil/anim-targethref-8.svg new file mode 100644 index 0000000000..c95e34e237 --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-8.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks our behavior with an 'xlink:href'-targeted animation + when an earlier node suddenly obtains the target ID string (thereby + becoming the new animation target). --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function go() { + var rect = document.getElementById("myLaterRect"); + rect.setAttributeNS(null, "id", "myRect"); + setTimeAndSnapshot(2.5, false) + } + </script> + <rect id="myLaterRect" x="15" y="15" width="200" height="0" fill="blue"/> + <rect id="myRect" x="15" y="215" width="200" height="0" fill="red"/> + <animate id="anim" xlink:href="#myRect" attributeName="height" + to="200" begin="0s" dur="2s" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-targethref-9.svg b/layout/reftests/svg/smil/anim-targethref-9.svg new file mode 100644 index 0000000000..b13e97c71c --- /dev/null +++ b/layout/reftests/svg/smil/anim-targethref-9.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks our behavior with an 'xlink:href'-targeted animation + where there's initially no matching target, but then an element's ID is + set to match (making it the target) --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function go() { + var rect = document.getElementById("rect"); + rect.setAttributeNS(null, "id", "blueRect"); + setTimeAndSnapshot(2.5, false) + } + </script> + <rect id="rect" x="15" y="15" width="200" height="100" fill="blue"/> + <animate id="anim" xlink:href="#blueRect" attributeName="height" + to="200" begin="0s" dur="2s" fill="freeze"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-text-attr-01-ref.svg b/layout/reftests/svg/smil/anim-text-attr-01-ref.svg new file mode 100644 index 0000000000..6cd3dff448 --- /dev/null +++ b/layout/reftests/svg/smil/anim-text-attr-01-ref.svg @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font: 16px sans-serif"> + + <title>Reference for animating attributes on child text content elements</title> + + <text x="200" y="20">Test 1</text> + <text x="20" y="60">Test 2</text> + <text x="20" y="80" rotate="10">Test 3</text> + <text> + <tspan x="200" y="100">Test 4</tspan> + </text> + <text> + <tspan x="20" y="140">Test 5</tspan> + </text> + <text> + <tspan x="20" y="160" rotate="30">Test 6</tspan> + </text> + <path id="p" d="M 20,180 h 400"/> + <text> + <textPath xlink:href="#p" startOffset="180">Test 7</textPath> + </text> + <text x="20" y="200" textLength="100" lengthAdjust="spacingAndGlyphs">Test 8</text> + <text> + <tspan x="20" y="220" textLength="100" lengthAdjust="spacingAndGlyphs">Test 9</tspan> + </text> +</svg> diff --git a/layout/reftests/svg/smil/anim-text-attr-01.svg b/layout/reftests/svg/smil/anim-text-attr-01.svg new file mode 100644 index 0000000000..c61c612fb4 --- /dev/null +++ b/layout/reftests/svg/smil/anim-text-attr-01.svg @@ -0,0 +1,61 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + style="font: 16px sans-serif"> + + <title>Testcase for animating attributes on child text content elements</title> + + <text x="20" y="20">Test 1 + <set attributeName="x" to="200" begin="indefinite"/> + </text> + <text x="20" y="40">Test 2 + <set attributeName="y" to="60" begin="indefinite"/> + </text> + <text x="20" y="80">Test 3 + <set attributeName="rotate" to="10" begin="indefinite"/> + </text> + <text> + <tspan x="20" y="100">Test 4 + <set attributeName="x" to="200" begin="indefinite"/> + </tspan> + </text> + <text> + <tspan x="20" y="120">Test 5 + <set attributeName="y" to="140" begin="indefinite"/> + </tspan> + </text> + <text> + <tspan x="20" y="160">Test 6 + <set attributeName="rotate" to="30" begin="indefinite"/> + </tspan> + </text> + <path id="p" d="M 20,180 h 400"/> + <text> + <textPath xlink:href="#p">Test 7 + <set attributeName="startOffset" to="180" begin="indefinite"/> + </textPath> + </text> + <text x="20" y="200" textLength="100" lengthAdjust="spacing">Test 8 + <set attributeName="lengthAdjust" to="spacingAndGlyphs" begin="indefinite"/> + </text> + <!-- We don't support textLength/lengthAdjust on child text content + elements currently (bug 890692), so Test 9 doesn't really test + anything at the moment. But it is the only animatable enumerated + attribute value on text content elements to test. --> + <text> + <tspan x="20" y="220" textLength="100" lengthAdjust="spacing">Test 9 + <set attributeName="lengthAdjust" to="spacingAndGlyphs" begin="indefinite"/> + </tspan> + </text> + + <script> + window.addEventListener("MozReftestInvalidate", function() { + [...document.querySelectorAll("set")].forEach((e) => e.beginElement()); + document.documentElement.removeAttribute("class"); + }, false); + </script> +</svg> diff --git a/layout/reftests/svg/smil/anim-text-rotate-01-ref.svg b/layout/reftests/svg/smil/anim-text-rotate-01-ref.svg new file mode 100644 index 0000000000..8e9f604695 --- /dev/null +++ b/layout/reftests/svg/smil/anim-text-rotate-01-ref.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <title></title> + + <text transform="translate(20, 20)" rotate="110 120 130">ABC</text> + <text transform="translate(120, 20)" rotate="110 120 130">DEF</text> + <text transform="translate(220, 20)" rotate="110 120 130">GHI</text> + <text transform="translate(320, 20)" rotate="310 320 330">JKL</text> + +</svg> diff --git a/layout/reftests/svg/smil/anim-text-rotate-01.svg b/layout/reftests/svg/smil/anim-text-rotate-01.svg new file mode 100644 index 0000000000..828ed87799 --- /dev/null +++ b/layout/reftests/svg/smil/anim-text-rotate-01.svg @@ -0,0 +1,73 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(5, true)"> + <title>Test animation of the <number-list> attribute on the 'text' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <!-- The difference between respective numbers in the effective 'from' and + 'to' lists below is carefully designed to be a factor of 3. That way + our reference file (which checks against a one third complete animation) + can contain whole numbers, which is necessary to avoid failure due to + hard coded rounded numbers in the reference not matching platform + specific rounding behaviour. + --> + + <!-- Test calcMode="linear". --> + + <text transform="translate(20, 20)" + rotate="10 20 30">ABC + + <!-- At 5s the animVal should be "110 120 130". --> + <animate attributeName="rotate" + calcMode="linear" + begin="0s" dur="15s" + to="310 320 330" + fill="freeze"/> + + </text> + + + <!-- Test 'by' animation. --> + + <text transform="translate(120, 20)" + rotate="10 20 30">DEF + + <!-- At 5s the animVal should be "110 120 130". --> + <animate attributeName="rotate" + calcMode="linear" + begin="0s" dur="15s" + by="300 300 300" + fill="freeze"/> + + </text> + + + <!-- Test calcMode="paced". --> + + <text transform="translate(220, 20)">GHI + + <!-- At 5s the animVal should be "110 120 130". --> + <animate attributeName="rotate" + calcMode="paced" + begin="0s" dur="15s" + values="10 20 30; 210 220 230; 310 320 330" + fill="freeze"/> + + </text> + + + <!-- Test calcMode="discrete". --> + + <text transform="translate(320, 20)" rotate="10 20 30">JKL + + <!-- The value should be "310 320 330" at 3s. --> + <animate attributeName="rotate" + calcMode="discrete" + begin="0s" dur="6s" + to="310 320 330" + fill="freeze"/> + + </text> + +</svg> diff --git a/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01-ref.svg b/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01-ref.svg new file mode 100644 index 0000000000..795c39ba7f --- /dev/null +++ b/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + + <text transform="translate(20, 20)" + x="20 10mm 3pc 72pt 2em 3% 1ex" + dy="20 10mm 3pc 36pt 2em 3% 1ex 1">ABCDEFGH + </text> + + <text transform="translate(120, 20)" + x="20 10mm 3pc 72pt 2em 3% 1ex" + dy="20 10mm 3pc 36pt 2em 3% 1ex">IJKLMNOP + </text> + + <text transform="translate(220, 20)" + x="20 10mm 3pc 72pt 2em 3% 1ex" + dy="20 10mm 3pc 36pt 2em 3% 1ex 1">QRSTUVWX + </text> + + <text transform="translate(320, 20)" + x="20 10mm 3pc 72pt 2em 3% 1ex" + dy="20 10mm 3pc 36pt 2em 3% 1ex">YZ123456 + </text> + + <text transform="translate(420, 20)" + x="20 10mm 3pc 72pt 2em 3% 1ex" + dy="20 10mm 3pc 36pt 2em 3% 1ex">7890abcd + </text> + + <text transform="translate(520, 20)" + x="20 10mm 3pc 72pt 2em 3% 1ex" + dy="20 10mm 3pc 36pt 2em 3% 1ex">efghijkl + </text> +</svg> diff --git a/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01.svg b/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01.svg new file mode 100644 index 0000000000..5e9208271c --- /dev/null +++ b/layout/reftests/svg/smil/anim-text-x-y-dx-dy-01.svg @@ -0,0 +1,222 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(5, true)"> + <title>Test animation of the <length-list> attributes on the 'text' element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <style type="text/css"> + :root { font-size: 16px; } /* see comment below - sets 1em == 16px */ + </style> + + <!-- If we start getting random orange on this test, see: + https://bugzilla.mozilla.org/show_bug.cgi?id=515116#c34 + --> + + <!-- One of the things that this file tests is animation between lengths + of _different unit_. One difficulty this creates is knowing the + values to use in the reference file. For example, what length should + be used in the reference to comparing against an animation that's mid + way between 50px and 10in? The SMIL engine will convert the start + length to the unit of the end length and then interpolate, but the + number of inches in 50px is not always the same, so we can't fix how + many inches is midway between 50px and 10in in the reference file. To + get around this problem this test mainly pairs different units with a + known, fixed, relationship. For example, animating between cm and mm, + or between 'in' and pt (72 pt/in) or between 'in' and pc (6 pc/in). + Note that we can animate between px and em by fixing the relationship + between these units by setting the CSS 'font-size' property to a fixed + number of px units as we've done above. + + The problem with only testing pairs with a fixed relationship is that + implementations may only implement interpolation between those pairs + because it's easy. To test interpolation between pairs of units + without a fixed relationship we use another strategy: we animate from + zero of the start unit. Since zero is zero regardless of the unit, we + then know what to use in the reference. In theory implementations might + specialize for zero, but that's unlikely (hopefully!). + + (An alternative would be to only test end points of the animation, but + implementations may use discrete animation rather than interpolation + when lengths of different units are encountered, so that would be a bad + approach.) + + (Another better alternative would be to use + SVGLength.convertToSpecifiedUnits() in the reference file to figure out + the conversion of the start unit and set values in the reference file + dynamically.) + --> + + <!-- Another thing that this file test is animation between lists + of _different length_. One implementation strategy when faced with such + an animation is to pad the shorter list with zeros for the purposes of + animation. This works exactly as you would hope in the case of the + <text> element's 'dx' and 'dy' attributes, since for those attributes + lengths are offsets from the coordinate at which respective glyph's + would otherwise be positioned. In other words, appending a list of + zeros to any 'dx' or 'dy' attribute will never have an affect on + rendering. However, in the case of 'x' and 'y' attributes on <text>, + any lengths given are distances from zero along the relevant axis of + the current coordinate system, and zero is not likely to be the + position that all glyphs would otherwise be given. Their position will + actually depend on CSS parameters, the implementation's text layout + algorithm, and the layout of the characters that came before it. Hence + zero padding any 'x' or 'y' attribute will likely drastically alter + the rendering of the text, and in the case of animation would cause + glyphs to animate from/to zero in their coordinate system instead of + from/to their natural position. Clearly this is neither what authors + would expect, or want, so Mozilla currently disallows animation of 'x' + and 'y' if lists of different length are encountered to prevent content + being created that relies on such undesirable behavior. + + Ideally the implementation would provide the SMIL engine with the + natural position of each glyph so that it can animate from/to those + positions. That's tricky, but we do have a bug open to try and + implement that. See: + + https://bugzilla.mozilla.org/show_bug.cgi?id=573431 + --> + + <!-- Test calcMode="linear". --> + + <text transform="translate(20, 20)" + x="10px 0.5cm 0.25in 0.5in 16px 0cm 0%">ABCDEFGH + + <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". --> + <animate attributeName="x" + calcMode="linear" + begin="0s" dur="15s" + to="40 20mm 6pc 144pt 4em 9% 3ex" + fill="freeze"/> + + <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex 1". + Note that the 'to' list has one extra list item on purpose! --> + <animate attributeName="dy" + calcMode="linear" + begin="0s" dur="15s" + from="10px 0.5cm 0.25in 0.25in 16px 0cm 0%" + to="40 20mm 6pc 72pt 4em 9% 3ex 3" + fill="freeze"/> + </text> + + + <!-- Test 'by' animation. --> + + <text transform="translate(120, 20)" + x="10px 0.5cm 0.25in 0.5in 16px 0cm 0%">IJKLMNOP + + <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". --> + <animate attributeName="x" + calcMode="linear" + begin="0s" dur="15s" + by="30 15mm 4.5pc 108pt 3em 9% 3ex" + fill="freeze"/> + + <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex". + Note that the 'from' list is essentially zero length! --> + <animate attributeName="dy" + calcMode="linear" + begin="0s" dur="15s" + by="60 30mm 9pc 108pt 6em 9% 3ex" + fill="freeze"/> + </text> + + + <!-- Test calcMode="paced". It doesn't make a lot of sense to use paced + animation with a length list, but since we support it, we test it. + --> + + <text transform="translate(220, 20)">QRSTUVWX + + <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". --> + <animate attributeName="x" + calcMode="paced" + begin="0s" dur="15s" + values="10px 0.5cm 0.25in 0.5in 16px 0cm 0%; + 30 15mm 4.5pc 108pt 3em 6% 2ex; + 40 20mm 6pc 144pt 4em 9% 3ex" + fill="freeze"/> + + <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex 1". + Note that the 'to' lists have one extra list item on purpose! --> + <animate attributeName="dy" + calcMode="paced" + begin="0s" dur="15s" + values="10px 0.5cm 0.25in 0.25in 16px 0cm 0%; + 30 15mm 4.5pc 54pt 3em 6% 2ex 2; + 40 20mm 6pc 72pt 4em 9% 3ex 3" + fill="freeze"/> + </text> + + + <!-- Test calcMode="discrete". In this case SMIL treats the 'from' and 'to' + as two discrete values to jump between. Some authors may expect + discrete animation to jump from integer to integer in the unit of the + list item in question (or the unit of the 'to' item if the units of + corresponding 'from' and 'to' items differ), but that's not the case. + --> + + <text transform="translate(320, 20)">YZ123456 + + <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". --> + <animate attributeName="x" + calcMode="discrete" + begin="0s" dur="10s" + from="10px 0.5cm 0.25in 0.5in 16px 0cm 0%" + to="20 10mm 3pc 72pt 2em 3% 1ex" + fill="freeze"/> + + <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex". + Note that the 'to' list has one extra list item on purpose! --> + <animate attributeName="dy" + calcMode="discrete" + begin="0s" dur="10.1s" + from="20 10mm 3pc 36pt 2em 3% 1ex" + to="40px 2cm 1in 1in 16px 0cm 0% 3" + fill="freeze"/> + </text> + + + <!-- Test 'by' animation with calcMode="discrete". --> + + <text transform="translate(420, 20)" + x="20 10mm 3pc 72pt 2em 3% 1ex">7890abcd + + <!-- At 5s the animVal should be "10px 0.5cm 0.25in 0.5in 16px 0cm 0%", + since the discrete animation is considered to be an additive + animation from an empty list to the list specified in by="". --> + <animate attributeName="x" + calcMode="discrete" + begin="0s" dur="15s" + by="30 15mm 4.5pc 108pt 3em 9% 3ex" + fill="freeze"/> + + <!-- At 5s the animVal should be the empty list, as both the underlying + value and the first value of the equivalent additive animation are + empty lists. --> + <animate attributeName="dy" + calcMode="discrete" + begin="0s" dur="15s" + by="20 10mm 3pc 36pt 2em 3% 1ex" + fill="freeze"/> + </text> + + <text transform="translate(520, 20)" + x="10px 0.5cm 0.25in 0.5in 16px 0cm 0%">efghijkl + + <!-- At 5s the animVal should be "20 10mm 3pc 72pt 2em 3% 1ex". --> + <animate attributeName="x" + calcMode="discrete" + begin="0s" dur="8s" + by="10 5mm 1.5pc 36pt 1em 3% 1ex" + fill="freeze"/> + + <!-- At 5s the animVal should be "20 10mm 3pc 36pt 2em 3% 1ex". --> + <animate attributeName="dy" + calcMode="discrete" + begin="0s" dur="8s" + by="20 10mm 3pc 36pt 2em 3% 1ex" + fill="freeze"/> + </text> + +</svg> diff --git a/layout/reftests/svg/smil/anim-use-href-01.svg b/layout/reftests/svg/smil/anim-use-href-01.svg new file mode 100644 index 0000000000..a3aa5a2586 --- /dev/null +++ b/layout/reftests/svg/smil/anim-use-href-01.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "xlink:href" <string> attribute on the "use" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <defs> + <symbol id="sym1"> + <rect x="20" y="150" width="440" height="80" fill="red" /> + </symbol> + <symbol id="sym2"> + <rect x="20" y="150" width="440" height="80" fill="lime" /> + </symbol> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <use xlink:href="#sym1"> + <animate attributeName="xlink:href" + calcMode="discrete" + begin="0s" dur="0.5s" + from="#sym1" to="#sym2" + fill="freeze"/> + </use> + +</svg> diff --git a/layout/reftests/svg/smil/anim-use-length-01.svg b/layout/reftests/svg/smil/anim-use-length-01.svg new file mode 100644 index 0000000000..d89e37c018 --- /dev/null +++ b/layout/reftests/svg/smil/anim-use-length-01.svg @@ -0,0 +1,38 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1, true)"> + <title>Test animation of the "width" & "height" <length> attributes on the "use" element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <defs> + <symbol id="sym1"> + <rect width="100" height="50" fill="lime" /> + </symbol> + <symbol id="sym2"> + <rect y="100" width="100" height="50" fill="red" /> + </symbol> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <rect width="100" height="50" fill="red" /> + <use xlink:href="#sym1" height="100%" width="0%"> + <animate attributeName="width" + calcMode="linear" + begin="0s" dur="2s" + from="0%" to="200%" + fill="freeze"/> + </use> + <use xlink:href="#sym2" height="100%" width="200%"> + <animate attributeName="width" + calcMode="linear" + begin="0s" dur="2s" + from="200%" to="0%" + fill="freeze"/> + </use> + <rect y="100" width="100" height="50" fill="lime" /> + +</svg> diff --git a/layout/reftests/svg/smil/anim-use-length-02.svg b/layout/reftests/svg/smil/anim-use-length-02.svg new file mode 100644 index 0000000000..a9d7390d88 --- /dev/null +++ b/layout/reftests/svg/smil/anim-use-length-02.svg @@ -0,0 +1,37 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <title>Test animation of the "width" & "height" <length> attributes on the "use" element</title> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(1, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + <script xlink:href="smil-util.js" type="text/javascript"/> + + <defs> + <g id="g1"> + <rect width="100" height="50" fill="lime" /> + </g> + <g id="g2"> + <rect y="50" width="100" height="50" fill="lime" /> + </g> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + <rect width="100" height="100" fill="red" /> + <use xlink:href="#g1"> + <set attributeName="width" + to="0" begin="0s" dur="0.5s"/> + </use> + <use xlink:href="#g2"> + <set attributeName="height" + to="0" begin="0s" dur="0.5s"/> + </use> + +</svg> diff --git a/layout/reftests/svg/smil/anim-view-01.svg b/layout/reftests/svg/smil/anim-view-01.svg new file mode 100644 index 0000000000..b6730263a7 --- /dev/null +++ b/layout/reftests/svg/smil/anim-view-01.svg @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + viewBox="0 0 100 100" preserveAspectRatio="none"> + + <title>Test animation of view on view overriding svg element</title> + <script xlink:href="smil-util.js" type="text/javascript"/> + <script> + window.addEventListener("MozReftestInvalidate", run, false); + setTimeout(run, 4000); // fallback for running outside reftest + + function run() { + setTimeAndSnapshot(101, true); + } + </script> + + <view id="view"> + <animate attributeName="viewBox" + calcMode="linear" + begin="100s" dur="2s" + values="0 0 100 100;10 10 10 10;0 0 100 100" + fill="freeze"/> + </view> + + <rect width="100%" height="100%" fill="red"/> + + <rect x="10" y="10" width="10" height="10" fill="lime"/> + +</svg> diff --git a/layout/reftests/svg/smil/anim-width-done-1a.svg b/layout/reftests/svg/smil/anim-width-done-1a.svg new file mode 100644 index 0000000000..3f4e01bb67 --- /dev/null +++ b/layout/reftests/svg/smil/anim-width-done-1a.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="50" height="200" fill="blue"> + <animate attributeName="width" + from="50" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> + diff --git a/layout/reftests/svg/smil/anim-width-done-1b.svg b/layout/reftests/svg/smil/anim-width-done-1b.svg new file mode 100644 index 0000000000..64289244e2 --- /dev/null +++ b/layout/reftests/svg/smil/anim-width-done-1b.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="15" width="50" height="200" fill="blue"> + <animate attributeName="width" + from="50" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> + diff --git a/layout/reftests/svg/smil/anim-x-done-1a.svg b/layout/reftests/svg/smil/anim-x-done-1a.svg new file mode 100644 index 0000000000..ba41cc8209 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-done-1a.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="200" to="15" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-done-1b.svg b/layout/reftests/svg/smil/anim-x-done-1b.svg new file mode 100644 index 0000000000..efba0023b6 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-done-1b.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="200" to="15" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-1-ref.svg b/layout/reftests/svg/smil/anim-x-interp-1-ref.svg new file mode 100644 index 0000000000..a4995ebbbf --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-1-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="115" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-1.svg b/layout/reftests/svg/smil/anim-x-interp-1.svg new file mode 100644 index 0000000000..3a03306469 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.3, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-2-ref.svg b/layout/reftests/svg/smil/anim-x-interp-2-ref.svg new file mode 100644 index 0000000000..6ff54764f6 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-2-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="125" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-2.svg b/layout/reftests/svg/smil/anim-x-interp-2.svg new file mode 100644 index 0000000000..7b3d456a84 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-2.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.5, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-3-ref.svg b/layout/reftests/svg/smil/anim-x-interp-3-ref.svg new file mode 100644 index 0000000000..f533524f81 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-3-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="160" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-3.svg b/layout/reftests/svg/smil/anim-x-interp-3.svg new file mode 100644 index 0000000000..44d1b1c058 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-3.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.2, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-4-ref.svg b/layout/reftests/svg/smil/anim-x-interp-4-ref.svg new file mode 100644 index 0000000000..5b846c7a2e --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-4-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="170" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-4.svg b/layout/reftests/svg/smil/anim-x-interp-4.svg new file mode 100644 index 0000000000..c231dc8376 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-4.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.4, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-5-ref.svg b/layout/reftests/svg/smil/anim-x-interp-5-ref.svg new file mode 100644 index 0000000000..889ad4c335 --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-5-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="190" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-5.svg b/layout/reftests/svg/smil/anim-x-interp-5.svg new file mode 100644 index 0000000000..e9fce72fae --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-5.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.8, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-6-ref.svg b/layout/reftests/svg/smil/anim-x-interp-6-ref.svg new file mode 100644 index 0000000000..007aa0b88a --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-6-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="195" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-x-interp-6.svg b/layout/reftests/svg/smil/anim-x-interp-6.svg new file mode 100644 index 0000000000..150286be2d --- /dev/null +++ b/layout/reftests/svg/smil/anim-x-interp-6.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.9, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="200" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-done-1a.svg b/layout/reftests/svg/smil/anim-y-done-1a.svg new file mode 100644 index 0000000000..5a7fb9c580 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-done-1a.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="200" to="15" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-done-1b.svg b/layout/reftests/svg/smil/anim-y-done-1b.svg new file mode 100644 index 0000000000..9d964d4e32 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-done-1b.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2.5, false)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="200" to="15" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-1-ref.svg b/layout/reftests/svg/smil/anim-y-interp-1-ref.svg new file mode 100644 index 0000000000..b64a0c62ee --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-1-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="115" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-1.svg b/layout/reftests/svg/smil/anim-y-interp-1.svg new file mode 100644 index 0000000000..a4a3750c31 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.3, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-2-ref.svg b/layout/reftests/svg/smil/anim-y-interp-2-ref.svg new file mode 100644 index 0000000000..a57a0c0617 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-2-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="125" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-2.svg b/layout/reftests/svg/smil/anim-y-interp-2.svg new file mode 100644 index 0000000000..4affbcfb70 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-2.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(0.5, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-3-ref.svg b/layout/reftests/svg/smil/anim-y-interp-3-ref.svg new file mode 100644 index 0000000000..bf096b395d --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-3-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="160" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-3.svg b/layout/reftests/svg/smil/anim-y-interp-3.svg new file mode 100644 index 0000000000..a6f91720a1 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-3.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.2, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-4-ref.svg b/layout/reftests/svg/smil/anim-y-interp-4-ref.svg new file mode 100644 index 0000000000..f90829237d --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-4-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="170" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-4.svg b/layout/reftests/svg/smil/anim-y-interp-4.svg new file mode 100644 index 0000000000..8b5a137f64 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-4.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.4, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-5-ref.svg b/layout/reftests/svg/smil/anim-y-interp-5-ref.svg new file mode 100644 index 0000000000..8cb83e9020 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-5-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="190" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-5.svg b/layout/reftests/svg/smil/anim-y-interp-5.svg new file mode 100644 index 0000000000..44d5165ae0 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-5.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.8, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-6-ref.svg b/layout/reftests/svg/smil/anim-y-interp-6-ref.svg new file mode 100644 index 0000000000..b0c80b09f5 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-6-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="195" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/anim-y-interp-6.svg b/layout/reftests/svg/smil/anim-y-interp-6.svg new file mode 100644 index 0000000000..bd0f537432 --- /dev/null +++ b/layout/reftests/svg/smil/anim-y-interp-6.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.9, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect x="15" y="200" width="200" height="200" fill="blue"> + <animate attributeName="y" + from="100" to="200" begin="0s" dur="2s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/api-sanity-1.svg b/layout/reftests/svg/smil/api-sanity-1.svg new file mode 100644 index 0000000000..22807d91b6 --- /dev/null +++ b/layout/reftests/svg/smil/api-sanity-1.svg @@ -0,0 +1,33 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + onload="go()" + class="reftest-wait" +> + <script type="application/javascript"> + function go() { + // Try calling the animation-related methods in SVGSVGElement.cpp + // If any aren't implemented, we'll throw an exception and + // the rect will stay red. + + try { + document.documentElement.animationsPaused(); + document.documentElement.pauseAnimations(); + document.documentElement.unpauseAnimations(); + document.documentElement.getCurrentTime(); + document.documentElement.setCurrentTime(0); + } catch (e) { + // If something failed and threw an exception, we still need to remove + // the "reftest-wait" class + document.documentElement.removeAttribute("class"); + throw e; + } + + // If we get here, we're successful! + // Change the rect color. + var rect = document.getElementById("rect"); + rect.setAttributeNS(null, "fill", "lime"); + document.documentElement.removeAttribute("class"); + } + </script> + <rect id="rect" width="100%" height="100%" fill="red" /> +</svg> diff --git a/layout/reftests/svg/smil/container/deferred-anim-1-ref.xhtml b/layout/reftests/svg/smil/container/deferred-anim-1-ref.xhtml new file mode 100644 index 0000000000..ea59e77c8d --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-anim-1-ref.xhtml @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Deferred animation</title> + </head> + + <body> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect width="199" height="199" fill="green"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-anim-1.xhtml b/layout/reftests/svg/smil/container/deferred-anim-1.xhtml new file mode 100644 index 0000000000..369f572045 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-anim-1.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred animation</title> + <!-- + PURPOSE: Although we'd like to disable animation components for those + documents that don't use animation, there's always the possibility that an + animation element will be added via the DOM after the document is loaded. + This test case checks that this case is not neglected. + + OPERATION: There is an un-animated document. Then an <animate> element is + attached to the rectangle by script causing it to move to the right. + + EXPECTED RESULTS: The box begins moving from the center. + --> + <script> + var timeoutID; + + function animate() + { + addAnimation(); + var svg = document.getElementsByTagName('svg')[0]; + var anim = svg.getElementsByTagName('animate')[0]; + // We should pass quickly and fail slowly. + // In the pass case, we'll get an end event almost immediately. + // In the failure case, wait 30s before giving up. + timeoutID = window.setTimeout(giveUp, 30000); + anim.addEventListener('endEvent', finish, true); + } + + function giveUp() { + var svg = document.getElementsByTagName('svg')[0]; + var rect = svg.getElementsByTagName('rect')[0]; + rect.setAttribute("fill", "red"); + var anim = svg.getElementsByTagName('animate')[0]; + anim.parentNode.removeChild(anim); + timeoutID = null; + finish(); + } + + function finish() { + if (timeoutID) { + window.clearTimeout(timeoutID); + timeoutID = null; + } + document.documentElement.removeAttribute('class'); + } + + function addAnimation() + { + const svgns="http://www.w3.org/2000/svg"; + var anim = document.createElementNS(svgns,'animate'); + anim.setAttribute('attributeName','fill'); + anim.setAttribute('from', 'red'); + anim.setAttribute('to','green'); + anim.setAttribute('begin','0s'); + anim.setAttribute('dur','0.001s'); + anim.setAttribute('fill','freeze'); + var target = document.getElementById('target'); + target.appendChild(anim); + } + </script> + </head> + + <body onload="animate()"> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect width="199" height="199" fill="red" id="target"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-1-ref.xhtml b/layout/reftests/svg/smil/container/deferred-tree-1-ref.xhtml new file mode 100644 index 0000000000..e70151c7cc --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-1-ref.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Deferred tree</title> + </head> + + <body> + <p id="tree-container"> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="created-svg"> + <rect x="0" y="0" width="199" height="199" fill="green"/> + </svg> + </p> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-1.xhtml b/layout/reftests/svg/smil/container/deferred-tree-1.xhtml new file mode 100644 index 0000000000..ac83d53340 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-1.xhtml @@ -0,0 +1,87 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred tree</title> + <!-- + PURPOSE: This is similar to the deferred-anim test case. The animation + controller is not created for every web page, but only for those pages that + contain SMIL animatable content. But, if some SVG content containing + animation is added after the page is loaded, the animation should still run. + + OPERATION: There is a plain XHTML document, but later an SVG document is + added. This document contains a moving circle. + + EXPECTED RESULTS: The SVG document fragment appears containing a circle that + is animated. + --> + <script> + var timeoutID; + + function animate() + { + makeTree(); + var svg = document.getElementById('created-svg'); + var anim = svg.getElementsByTagName('animate')[0]; + // We should pass quickly and fail slowly. + // In the pass case, we'll get an end event almost immediately. + // In the failure case, wait 30s before giving up. + timeoutID = window.setTimeout(giveUp, 30000); + anim.addEventListener('endEvent', finish, true); + } + + function giveUp() { + var svg = document.getElementById('created-svg'); + var rect = svg.getElementsByTagName('rect')[0]; + // It's possible we could arrive here after successfully running the + // animation but failing to fire the end event. + // Technically that's a pass as far as this test is concerned, but it + // will mean every test run is taking 30s longer than it should and + // we'd like to know about that so we'll make it a failure. + rect.setAttribute("fill", "red"); + // We'll need to clear the animation for this to take effect + var anim = svg.getElementsByTagName('animate')[0]; + anim.parentNode.removeChild(anim); + timeoutID = null; + finish(); + } + + function finish() { + if (timeoutID) { + window.clearTimeout(timeoutID); + timeoutID = null; + } + document.documentElement.removeAttribute('class'); + } + + function makeTree() + { + const svgns="http://www.w3.org/2000/svg"; + var svg = document.createElementNS(svgns, 'svg'); + svg.setAttribute('xmlns', svgns); + svg.setAttribute('width', '200px'); + svg.setAttribute('height', '200px'); + svg.setAttribute('id', 'created-svg'); + var rect = document.createElementNS(svgns, 'rect'); + rect.setAttribute('x', '0'); + rect.setAttribute('y', '0'); + rect.setAttribute('width', '199'); + rect.setAttribute('height', '199'); + var anim = document.createElementNS(svgns, 'animate'); + anim.setAttribute('attributeName', 'fill'); + anim.setAttribute('begin', '0s'); + anim.setAttribute('from', 'red'); + anim.setAttribute('to', 'green'); + anim.setAttribute('dur', '0.001s'); + anim.setAttribute('fill', 'freeze'); + rect.appendChild(anim); + svg.appendChild(rect); + var target = document.getElementById('tree-container'); + target.appendChild(svg); + } + </script> + </head> + + <body onload="animate()"> + <p id="tree-container"/> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-2-ref.xhtml b/layout/reftests/svg/smil/container/deferred-tree-2-ref.xhtml new file mode 100644 index 0000000000..8aff24fdd2 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-2-ref.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Deferred tree</title> + </head> + + <body> + <p id="tree-container"/> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="created-svg"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <ellipse stroke-width="1" stroke="black" fill="yellow" cx="100" + cy="20" rx="40" ry="20"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-2a.xhtml b/layout/reftests/svg/smil/container/deferred-tree-2a.xhtml new file mode 100644 index 0000000000..821986a706 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-2a.xhtml @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred tree</title> + <!-- + PURPOSE: If a SVG subdocument is created dynamically, any timing-related + animation API calls on the subdocument should silently fail until it's + been attached to a document. + + OPERATION: We start with a plain XHTML document, but later a div and an SVG + subdocument are created. We attempt an animation API call on the SVG + element before attaching it to the XHTML document. + + EXPECTED RESULTS: The animation API call should have no effect. + --> + <script src="deferred-tree-util.js" type="text/javascript"/> + <script> + function animate() + { + // Set up + var div = makeDiv(); + var svg = makeSvg(); + var target = document.getElementById('tree-container'); + + // Make an animation api call (should have no effect, if we're sane) + svg.setCurrentTime(1.0); + + // Trigger a "BindToTree" call on the SVG element + div.appendChild(svg); + + // Finally, we attach to the document and pause animations. + target.appendChild(div); + + // Reftest Snapshot + svg.pauseAnimations(); + document.documentElement.removeAttribute("class"); + } + </script> + </head> + + <body onload="animate()"> + <p id="tree-container"/> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-2b.xhtml b/layout/reftests/svg/smil/container/deferred-tree-2b.xhtml new file mode 100644 index 0000000000..890159f4c3 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-2b.xhtml @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred tree</title> + <!-- + PURPOSE: If a SVG subdocument is created dynamically, any timing-related + animation API calls on the subdocument should silently fail until it's + been attached to a document. + + OPERATION: We start with a plain XHTML document, but later a div and an SVG + subdocument are created. We attempt an animation API call on the SVG + element before attaching it to the XHTML document. + + EXPECTED RESULTS: The animation API call should have no effect. + --> + <script src="deferred-tree-util.js" type="text/javascript"/> + <script> + function animate() + { + // Set up + var div = makeDiv(); + var svg = makeSvg(); + var target = document.getElementById('tree-container'); + + // Trigger a "BindToTree" call on the SVG element + div.appendChild(svg); + + // Make an animation api call (should have no effect, if we're sane) + svg.setCurrentTime(1.0); + + // Finally, we attach to the document and pause animations. + target.appendChild(div); + + // Reftest Snapshot + svg.pauseAnimations(); + document.documentElement.removeAttribute("class"); + } + </script> + </head> + + <body onload="animate()"> + <p id="tree-container"/> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-3-ref.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3-ref.xhtml new file mode 100644 index 0000000000..96818ff54b --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-3-ref.xhtml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Deferred tree</title> + </head> + + <body> + <p id="tree-container"/> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="created-svg"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <ellipse stroke-width="1" stroke="black" fill="yellow" cx="100" + cy="95" rx="40" ry="20"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-3a.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3a.xhtml new file mode 100644 index 0000000000..3d9fed19e9 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-3a.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred tree</title> + <script src="deferred-tree-util.js" type="text/javascript"/> + <script> + function animate() + { + // Set up + var div = makeDiv(); + var svg = makeSvg(); + var target = document.getElementById('tree-container'); + + div.appendChild(svg); + target.appendChild(div); + + // These calls *should* have an effect, since they happen + // after 'svg' has been attached to the XHTML document. + svg.setCurrentTime(1.0); + svg.pauseAnimations(); + + // Reattach the SVG element to its parent div. + // (If we're sane, this shouldn't reset its time container.) + div.appendChild(svg); + + // Reftest Snapshot + document.documentElement.removeAttribute("class"); + } + </script> + </head> + + <body onload="animate()"> + <p id="tree-container"/> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-3b.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3b.xhtml new file mode 100644 index 0000000000..ab894f54ef --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-3b.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred tree</title> + <script src="deferred-tree-util.js" type="text/javascript"/> + <script> + function animate() + { + // Set up + var div = makeDiv(); + var svg = makeSvg(); + var target = document.getElementById('tree-container'); + + div.appendChild(svg); + target.appendChild(div); + + // These calls *should* have an effect, since they happen + // after 'svg' has been attached to the XHTML document. + svg.setCurrentTime(1.0); + svg.pauseAnimations(); + + // Shift the SVG element to its parent's parent. + // (If we're sane, this shouldn't reset its time container.) + target.appendChild(svg); + + // Reftest Snapshot + document.documentElement.removeAttribute("class"); + } + </script> + </head> + + <body onload="animate()"> + <p id="tree-container"/> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-3c.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3c.xhtml new file mode 100644 index 0000000000..12dc91fe5d --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-3c.xhtml @@ -0,0 +1,40 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred tree</title> + <script src="deferred-tree-util.js" type="text/javascript"/> + <script> + function animate() + { + // Set up + var div = makeDiv(); + var svg = makeSvg(); + var target = document.getElementById('tree-container'); + + div.appendChild(svg); + target.appendChild(div); + + // These calls *should* have an effect, since they happen + // after 'svg' has been attached to the XHTML document. + svg.setCurrentTime(1.0); + svg.pauseAnimations(); + + // Create another div container, and move svg element there + // (temporarily detaching it from the document), before attaching + // this new subtree back onto the document. Our current behavior + // (which matches Opera 9.64) is to preserve svg's time container + // through this manipulation. + div2 = makeDiv(); + div2.appendChild(svg); + div.appendChild(div2); + + // Reftest Snapshot + document.documentElement.removeAttribute("class"); + } + </script> + </head> + + <body onload="animate()"> + <p id="tree-container"/> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-3d.xhtml b/layout/reftests/svg/smil/container/deferred-tree-3d.xhtml new file mode 100644 index 0000000000..d5dc4d0a58 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-3d.xhtml @@ -0,0 +1,42 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Deferred tree</title> + <script src="deferred-tree-util.js" type="text/javascript"/> + <script> + function animate() + { + // Set up + var div = makeDiv(); + var svg = makeSvg(); + var target = document.getElementById('tree-container'); + + div.appendChild(svg); + target.appendChild(div); + + // Create another div container, and move svg element there + // (temporarily detaching it from the document). + div2 = makeDiv(); + div2.appendChild(svg); + + // These calls *should* have an effect, since they happen + // after 'svg' has been attached to the XHTML document (even though + // it's not currently attached) + svg.setCurrentTime(1.0); + svg.pauseAnimations(); + + // Attach the div2+svg subtree onto the document. Our current + // behavior (which matches Opera 9.64) is to preserve svg's time + // container through this manipulation. + div.appendChild(div2); + + // Reftest Snapshot + document.documentElement.removeAttribute("class"); + } + </script> + </head> + + <body onload="animate()"> + <p id="tree-container"/> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/deferred-tree-util.js b/layout/reftests/svg/smil/container/deferred-tree-util.js new file mode 100644 index 0000000000..71d0b41f53 --- /dev/null +++ b/layout/reftests/svg/smil/container/deferred-tree-util.js @@ -0,0 +1,39 @@ +function makeDiv() +{ + const xhtmlns="http://www.w3.org/1999/xhtml"; + return document.createElementNS(xhtmlns, 'div'); +} + +function makeSvg() +{ + const svgns="http://www.w3.org/2000/svg"; + var svg = document.createElementNS(svgns, 'svg'); + svg.setAttribute('xmlns', svgns); + svg.setAttribute('width', '200px'); + svg.setAttribute('height', '200px'); + var rect = document.createElementNS(svgns, 'rect'); + rect.setAttribute('x', '0'); + rect.setAttribute('y', '0'); + rect.setAttribute('width', '199'); + rect.setAttribute('height', '199'); + rect.setAttribute('style', 'fill: none; stroke: black'); + var ellipse = document.createElementNS(svgns, 'ellipse'); + ellipse.setAttribute('stroke-width', '1'); + ellipse.setAttribute('stroke', 'black'); + ellipse.setAttribute('fill', 'yellow'); + ellipse.setAttribute('cx', '100'); + ellipse.setAttribute('cy', '20'); + ellipse.setAttribute('rx', '40'); + ellipse.setAttribute('ry', '20'); + var anim = document.createElementNS(svgns, 'animate'); + anim.setAttribute('attributeName', 'cy'); + anim.setAttribute('attributeType', 'XML'); + anim.setAttribute('begin', '0s'); + anim.setAttribute('from', '20'); + anim.setAttribute('to', '170'); + anim.setAttribute('dur', '2s'); + ellipse.appendChild(anim); + svg.appendChild(rect); + svg.appendChild(ellipse); + return svg; +} diff --git a/layout/reftests/svg/smil/container/enveloped-tree-1-ref.xhtml b/layout/reftests/svg/smil/container/enveloped-tree-1-ref.xhtml new file mode 100644 index 0000000000..b529c052e3 --- /dev/null +++ b/layout/reftests/svg/smil/container/enveloped-tree-1-ref.xhtml @@ -0,0 +1,25 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Enveloped tree</title> + </head> + + <body> + <!-- First tree --> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="adopter"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="100" cy="50" r="15" fill="skyblue" stroke="black" + stroke-width="1"/> + <!-- Second tree --> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="adoptee"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="100" cy="110" r="15" fill="greenyellow" stroke="black" + stroke-width="1"/> + </svg> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/enveloped-tree-1.xhtml b/layout/reftests/svg/smil/container/enveloped-tree-1.xhtml new file mode 100644 index 0000000000..49d3db6b7c --- /dev/null +++ b/layout/reftests/svg/smil/container/enveloped-tree-1.xhtml @@ -0,0 +1,70 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Enveloped tree</title> + <!-- + PURPOSE: This test case is the reverse of the promoted tree case. As time + containers are defined relative to the outermost SVG document fragment this + case tests that when an outermost <svg> fragment is added as a child of + another svg document fragment, the animations behave correctly and the time + containers are resolved correctly. + + OPERATION: There are two animations that are more-or-less identical except + for a few aesthetic features. Both contain a circle that moves to the right. + The second document fragment (on the right) is removed and added as a child + of the first document fragment. + + EXPECTED RESULTS: After combining the two document fragments the circles + should have the same horizontal position as they are now controlled by the + same time container. + --> + <script> + function moveAndAdopt() + { + var svgs = document.getElementsByTagName('svg'); + for (var i = 0; i < svgs.length; i++) { + var svg = svgs[i]; + svg.pauseAnimations(); + svg.setCurrentTime(0.5); + } + adopt(); + var svg = document.getElementById('adopter'); + svg.setCurrentTime(1.5); + setTimeout('document.documentElement.removeAttribute("class")', 0); + } + + function adopt() + { + var adoptee = document.getElementById('adoptee'); + adoptee.parentNode.removeChild(adoptee); + var adopter = document.getElementById('adopter'); + adopter.appendChild(adoptee); + } + </script> + </head> + + <body onload="moveAndAdopt()"> + <!-- First tree --> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="adopter"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="0" cy="50" r="15" fill="skyblue" stroke="black" + stroke-width="1"> + <animate attributeName="cx" from="0" to="200" begin="0s" dur="3s" + fill="freeze"/> + </circle> + </svg> + <!-- Second tree --> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="adoptee"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="0" cy="110" r="15" fill="greenyellow" stroke="black" + stroke-width="1"> + <animate attributeName="cx" from="0" to="200" begin="0s" dur="3s" + fill="freeze"/> + </circle> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/invalid-elem-1-ref.xhtml b/layout/reftests/svg/smil/container/invalid-elem-1-ref.xhtml new file mode 100644 index 0000000000..74a74adb49 --- /dev/null +++ b/layout/reftests/svg/smil/container/invalid-elem-1-ref.xhtml @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Valid, invalid, valid</title> + </head> + + <body> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <!-- rect to be animated second --> + <rect x="100" y="80" width="40" height="40" fill="royalblue" + stroke="black" stroke-width="1" id="target"/> + <!-- circle to be animated first --> + <circle cx="0" cy="100" r="15" fill="skyblue" stroke="black" + stroke-width="1"/> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/invalid-elem-1.xhtml b/layout/reftests/svg/smil/container/invalid-elem-1.xhtml new file mode 100644 index 0000000000..3a2f79be14 --- /dev/null +++ b/layout/reftests/svg/smil/container/invalid-elem-1.xhtml @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Valid, invalid, valid</title> + <!-- + PURPOSE: When manipulating the DOM tree it is quite likely that at some + instant the document will be invalid such as during a chain of + operations. SVG 1.1, section F.2 states: + + "Because of situations where a block of scripting changes might cause + a given SVG document fragment to go into and out of error, error + processing shall occur only at times when document presentation (e.g., + rendering to the display device) is updated" + + A similar requirement exists regarding unsuspend / suspend redraw. + This test checks that behaviour. + + OPERATION: There is a box and a circle. Initially the circle is animated and + should move to the right. The animation element is moved to the rectangle. + At this point the animation points to an invalid attribute. This attribute + is then updated to be valid again. + + EXPECTED RESULTS: The circle is moved and then the rectangle is moved. There + should not be any errors reported in the Javascript console or assertions + etc. + + After the animation is removed from the circle it should reset (I think). + + Currently this hasn't been implemented (we need to make use of + mLastCompositors table in nsSMILAnimationController), so this test is + disabled for now. As the code stands now you'll normally get the correct + result but under other conditions the circle moves a fraction before the + call to pauseAnimations and this effect is not then cleared. + --> + <script> + function moveAnimation() + { + var svg = document.getElementsByTagName('svg')[0]; + svg.pauseAnimations(); + svg.setCurrentTime(0.5); + doMove(); + svg.setCurrentTime(1.0); + setTimeout('document.documentElement.removeAttribute("class")', 0); + } + + function doMove() + { + var anim = document.getElementById('animation-to-move'); + anim.parentNode.removeChild(anim); + var rect = document.getElementById('target'); + rect.appendChild(anim); + // The animation is now in error + anim.setAttribute('attributeName', 'x'); + // Now it's fixed + } + </script> + </head> + + <body onload="moveAnimation()"> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <!-- rect to be animated second --> + <rect x="-20" y="80" width="40" height="40" fill="royalblue" + stroke="black" stroke-width="1" id="target"/> + <!-- circle to be animated first --> + <circle cx="0" cy="100" r="15" fill="skyblue" stroke="black" + stroke-width="1"> + <animate attributeName="cx" from="0" to="200" begin="0s" dur="2s" + fill="freeze" id="animation-to-move"/> + </circle> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/moved-tree-1-ref.xhtml b/layout/reftests/svg/smil/container/moved-tree-1-ref.xhtml new file mode 100644 index 0000000000..0041785b3a --- /dev/null +++ b/layout/reftests/svg/smil/container/moved-tree-1-ref.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Moving sub-trees</title> + </head> + + <body> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <g> + <!-- background rect to track progress --> + <rect x="0" y="80" width="100" height="40" fill="royalblue" + stroke="black" stroke-width="1"/> + </g> + </svg> + <!-- Second animation --> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <g id="new-parent"> + <!-- background rect to track progress --> + <rect x="0" y="80" width="100" height="40" fill="greenyellow" + stroke="black" stroke-width="1"/> + <!-- circle to transfer --> + <circle cx="100" cy="100" r="15" fill="skyblue" stroke="black" + stroke-width="1" id="circle-to-move"/> + </g> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/moved-tree-1.xhtml b/layout/reftests/svg/smil/container/moved-tree-1.xhtml new file mode 100644 index 0000000000..2206c8837d --- /dev/null +++ b/layout/reftests/svg/smil/container/moved-tree-1.xhtml @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Moving sub-trees</title> + <!-- + PURPOSE: This case tests moving an animated sub-tree from one SVG document + fragment to another. Different document fragments have different time + containers and so this test ensures the animation is correctly transferred + from one time container to the other. + + OPERATION: Both animations contain a moving box. The first animation also + contains a circle. Both this circle and its child animation element are + removed from the first animation and added to the second animation. + + EXPECTED RESULTS: The circle appears in the second box at the appropriate + offset. + --> + <script> + function move() + { + var svgs = document.getElementsByTagName('svg'); + for (var i = 0; i < svgs.length; i++) { + var svg = svgs[i]; + svg.pauseAnimations(); + svg.setCurrentTime(1.5); + } + doMove(); + setTimeout('document.documentElement.removeAttribute("class")', 0); + } + + function doMove() + { + var circle = document.getElementById('circle-to-move'); + circle.parentNode.removeChild(circle); + var target = document.getElementById('new-parent'); + target.appendChild(circle); + } + </script> + </head> + + <body onload="move()"> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <g> + <!-- background rect to track progress --> + <rect x="0" y="80" width="0" height="40" fill="royalblue" + stroke="black" stroke-width="1"> + <animate attributeName="width" from="0" to="200" begin="0s" dur="3s" + fill="freeze"/> + </rect> + <!-- circle to transfer --> + <circle cx="0" cy="100" r="15" fill="skyblue" stroke="black" + stroke-width="1" id="circle-to-move"> + <animate attributeName="cx" from="0" to="200" begin="0s" dur="3s" + fill="freeze"/> + </circle> + </g> + </svg> + <!-- Second animation --> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <g id="new-parent"> + <!-- background rect to track progress --> + <rect x="0" y="80" width="0" height="40" fill="greenyellow" + stroke="black" stroke-width="1"> + <animate attributeName="width" from="0" to="200" begin="0s" dur="3s" + fill="freeze"/> + </rect> + </g> + </svg> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/promoted-tree-1-ref.xhtml b/layout/reftests/svg/smil/container/promoted-tree-1-ref.xhtml new file mode 100644 index 0000000000..9b40914541 --- /dev/null +++ b/layout/reftests/svg/smil/container/promoted-tree-1-ref.xhtml @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>Promoted subtree</title> + </head> + + <body> + <p id="container"> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="outer"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="100" cy="50" r="15" fill="skyblue" stroke="black" + stroke-width="1"/> + </svg> + <!-- (was) nested svg fragment --> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="nested"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="50" cy="110" r="15" fill="greenyellow" stroke="black" + stroke-width="1"/> + </svg> + </p> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/promoted-tree-1.xhtml b/layout/reftests/svg/smil/container/promoted-tree-1.xhtml new file mode 100644 index 0000000000..f788d57e11 --- /dev/null +++ b/layout/reftests/svg/smil/container/promoted-tree-1.xhtml @@ -0,0 +1,71 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> + <head> + <title>Promoted subtree</title> + <!-- + PURPOSE: As timing containers are defined according to the outermost SVG + document fragment, this case tests when a nested <svg> element is removed + and added as the outermost svg fragment, that is, promoted. + + OPERATION: There is one animation containing two circles that move to the + right. The second circle is contained in a nested <svg> element. This nested + <svg> is removed from the outer <svg> element and then appended to + the parent <p> element. + + EXPECTED RESULTS: After removing the inner <svg> and making it a child of + the <p> it becomes an outermost <svg> and therefore a new time container and + so the animation resets. This behaviour is the same in Opera and we believe + it to be correct. + --> + <script> + function moveAndSplit() + { + var svg = document.getElementById('outer'); + svg.pauseAnimations(); + svg.setCurrentTime(0.5); + split(); + svg = document.getElementById('nested'); + svg.pauseAnimations(); + var svgs = document.getElementsByTagName('svg'); + for (var i = 0; i < svgs.length; i++) { + var svg = svgs[i]; + svg.setCurrentTime(svg.getCurrentTime() + 0.5); + } + setTimeout('document.documentElement.removeAttribute("class")', 0); + } + + function split() + { + var nested = document.getElementById('nested'); + nested.parentNode.removeChild(nested); + var container = document.getElementById('container'); + container.appendChild(nested); + } + </script> + </head> + + <body onload="moveAndSplit()"> + <p id="container"> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" + id="outer"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="0" cy="50" r="15" fill="skyblue" stroke="black" + stroke-width="1"> + <animate attributeName="cx" from="0" to="200" begin="0s" dur="2s" + fill="freeze"/> + </circle> + <!-- nested svg fragment --> + <svg width="200px" height="200px" id="nested"> + <rect x="0" y="0" width="199" height="199" + style="fill: none; stroke: black"/> + <circle cx="0" cy="110" r="15" fill="greenyellow" stroke="black" + stroke-width="1"> + <animate attributeName="cx" from="0" to="200" begin="0s" dur="2s" + fill="freeze"/> + </circle> + </svg> + </svg> + </p> + </body> +</html> diff --git a/layout/reftests/svg/smil/container/reftest.list b/layout/reftests/svg/smil/container/reftest.list new file mode 100644 index 0000000000..c492817d3f --- /dev/null +++ b/layout/reftests/svg/smil/container/reftest.list @@ -0,0 +1,18 @@ +# Tests related to SVG Animation (using SMIL), focusing on animation-sorting +# to see which animation takes precedence (out of multiple animations on the +# same attribute) + +random == enveloped-tree-1.xhtml enveloped-tree-1-ref.xhtml # bug 470868 +fuzzy(0-1,0-810) == promoted-tree-1.xhtml promoted-tree-1-ref.xhtml +random == moved-tree-1.xhtml moved-tree-1-ref.xhtml # bug 470868 +random-if(cocoaWidget||d2d) == deferred-anim-1.xhtml deferred-anim-1-ref.xhtml # bug 470868, bug 585484 +random-if(cocoaWidget&&layersGPUAccelerated) == deferred-tree-1.xhtml deferred-tree-1-ref.xhtml # bug 470868 +random-if(cocoaWidget&&layersGPUAccelerated) fuzzy(0-1,0-530) == deferred-tree-2a.xhtml deferred-tree-2-ref.xhtml # bug 470868 +random-if(cocoaWidget&&layersGPUAccelerated) fuzzy(0-1,0-530) == deferred-tree-2b.xhtml deferred-tree-2-ref.xhtml # bug 470868 +fuzzy(0-1,0-410) == deferred-tree-3a.xhtml deferred-tree-3-ref.xhtml +fuzzy(0-1,0-110) == deferred-tree-3b.xhtml deferred-tree-3-ref.xhtml +fuzzy(0-1,0-110) == deferred-tree-3c.xhtml deferred-tree-3-ref.xhtml +fuzzy(0-1,0-110) == deferred-tree-3d.xhtml deferred-tree-3-ref.xhtml +# this will occasionally fail until we correctly clear animation effects from +# no-longer-targeted elements +random == invalid-elem-1.xhtml invalid-elem-1-ref.xhtml diff --git a/layout/reftests/svg/smil/event/event-begin-1.svg b/layout/reftests/svg/smil/event/event-begin-1.svg new file mode 100644 index 0000000000..3b87def1df --- /dev/null +++ b/layout/reftests/svg/smil/event/event-begin-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + click('circle'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" + begin="circle.click" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-begin-load-1.svg b/layout/reftests/svg/smil/event/event-begin-load-1.svg new file mode 100644 index 0000000000..e53d845e16 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-begin-load-1.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" id="svg" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" + begin="svg.SVGLoad" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-begin-offset-1.svg b/layout/reftests/svg/smil/event/event-begin-offset-1.svg new file mode 100644 index 0000000000..30b541b8dc --- /dev/null +++ b/layout/reftests/svg/smil/event/event-begin-offset-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + click('circle'); + delayedSnapshot(6)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" + begin="circle.click+4s" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-begin-offset-2.svg b/layout/reftests/svg/smil/event/event-begin-offset-2.svg new file mode 100644 index 0000000000..f1e503cf0d --- /dev/null +++ b/layout/reftests/svg/smil/event/event-begin-offset-2.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(4); + click('circle'); + delayedSnapshot(4)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="red"> + <animate attributeName="fill" attributeType="CSS" + values="orange; green" calcMode="discrete" + begin="circle.click-4s" dur="8s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-begin-timeevent-1.svg b/layout/reftests/svg/smil/event/event-begin-timeevent-1.svg new file mode 100644 index 0000000000..37fa8d9c86 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-begin-timeevent-1.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + /* Make sure the event gets fired */ + document.documentElement.setCurrentTime(0.1); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red"> + <set attributeName="x" to="0" begin="0s" id="a"/> + <set attributeName="fill" attributeType="CSS" + to="green" + begin="a.beginEvent" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-begin-timeevent-2.svg b/layout/reftests/svg/smil/event/event-begin-timeevent-2.svg new file mode 100644 index 0000000000..6472fab70a --- /dev/null +++ b/layout/reftests/svg/smil/event/event-begin-timeevent-2.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + /* Make sure the event gets fired */ + document.documentElement.setCurrentTime(0.1); + document.documentElement.setCurrentTime(0.6); + delayedSnapshot(2.5)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red"> + <set attributeName="x" to="0" begin="0s" dur="0.5s" id="a"/> + <set attributeName="fill" attributeType="CSS" + to="green" + begin="a.endEvent" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-begin-timeevent-3.svg b/layout/reftests/svg/smil/event/event-begin-timeevent-3.svg new file mode 100644 index 0000000000..35247ed46d --- /dev/null +++ b/layout/reftests/svg/smil/event/event-begin-timeevent-3.svg @@ -0,0 +1,36 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="fastForwardToEvent()"> + <script xlink:href="event-util.js" type="text/javascript"/> + <script type="text/javascript"> + const gTimeoutDur = 60000; // Time until we give up waiting for events in ms + var timeoutID; + function fastForwardToEvent() + { + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(4.99); + // This test is designed to pass quickly and fail slowly. + // + // In the success case, the second animation will start almost + // immediately, fire a beginEvent and trigger gotBegin below. + // + // In the failure case, the following timeout will fire (after + // gTimeoutDur), we'll seek to t=1s (to make sure we show the red + // square) and then finish. + timeoutID = window.setTimeout(finish, gTimeoutDur, + 1 /*seekTimeInSeconds*/); + document.documentElement.unpauseAnimations(); + } + function gotBegin() + { + window.clearTimeout(timeoutID); + finish(); + } + </script> + <rect width="100" height="100" fill="red"> + <set attributeName="x" to="0" begin="0s" dur="5s" repeatCount="2" id="a"/> + <set attributeName="fill" attributeType="CSS" to="green" + begin="a.repeatEvent" onbegin="gotBegin()"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-bubble-1.svg b/layout/reftests/svg/smil/event/event-bubble-1.svg new file mode 100644 index 0000000000..b4b4ed4cd8 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-bubble-1.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + click('circle'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <g id="g"> + <circle id="circle" r="10"/> + </g> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" + begin="g.click" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-custom-1.svg b/layout/reftests/svg/smil/event/event-custom-1.svg new file mode 100644 index 0000000000..c3b9a50d3e --- /dev/null +++ b/layout/reftests/svg/smil/event/event-custom-1.svg @@ -0,0 +1,26 @@ +<!-- Tests support for custom events --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="sendEvent()"> + <script xlink:href="event-util.js" type="text/javascript"/> + <script type="text/javascript"> + function sendEvent() + { + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + var evt = document.createEvent("SVGEvents"); + evt.initEvent("user.defined", false, false); + var target = document.getElementById('rect'); + target.dispatchEvent(evt); + delayedSnapshot(2); + } + </script> + <rect width="100" height="100" fill="red" id="rect"> + <!-- SMIL allows periods to be embedded in the event name by escaping them + with a backslash. (Otherwise the part before the period would be + treated as an ID reference.) Test that we support that. --> + <set attributeName="fill" attributeType="CSS" to="green" + begin="rect.user\.defined" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-end-1.svg b/layout/reftests/svg/smil/event/event-end-1.svg new file mode 100644 index 0000000000..b846de94dd --- /dev/null +++ b/layout/reftests/svg/smil/event/event-end-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(2); + click('circle'); + delayedSnapshot(3)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="green"> + <set attributeName="fill" attributeType="CSS" + to="red" + begin="1s" end="circle.click" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-end-2.svg b/layout/reftests/svg/smil/event/event-end-2.svg new file mode 100644 index 0000000000..36bbb9f26f --- /dev/null +++ b/layout/reftests/svg/smil/event/event-end-2.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + /* Click event should be ignored since the element is inactive as per + * SMIL's event sensitivity rules */ + click('circle'); + delayedSnapshot(3)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" + begin="1s" end="circle.click+2s" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-end-open-1.svg b/layout/reftests/svg/smil/event/event-end-open-1.svg new file mode 100644 index 0000000000..0b9afb913a --- /dev/null +++ b/layout/reftests/svg/smil/event/event-end-open-1.svg @@ -0,0 +1,20 @@ +<!-- + Generally speaking, when constructing intervals if all the end instance times + are before the next begin time there's no valid interval. + + However, SMIL specifically makes an exception when the end attribute has event + conditions in which case an unresolved end is used. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(2); + document.documentElement.removeAttribute('class')"> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" to="green" + begin="0s; 2s" end="1s; circle.click"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-end-trimmed-1.svg b/layout/reftests/svg/smil/event/event-end-trimmed-1.svg new file mode 100644 index 0000000000..d4c06b5992 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-end-trimmed-1.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1); + document.getElementById('a').setAttribute('end', '0s'); + /* Force a sample to make sure that event gets fired */ + document.documentElement.setCurrentTime(1); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red"> + <set attributeName="x" to="0" begin="0.5s" dur="10s" id="a"/> + <set attributeName="fill" attributeType="CSS" + to="green" begin="a.endEvent" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-preventDefault-1.svg b/layout/reftests/svg/smil/event/event-preventDefault-1.svg new file mode 100644 index 0000000000..4ebadda39b --- /dev/null +++ b/layout/reftests/svg/smil/event/event-preventDefault-1.svg @@ -0,0 +1,16 @@ +<!-- Calling preventDefault on the event should have no effect --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + click('circle'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10" onclick="evt.preventDefault()"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" begin="circle.click" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-seek-1.svg b/layout/reftests/svg/smil/event/event-seek-1.svg new file mode 100644 index 0000000000..727c244c6c --- /dev/null +++ b/layout/reftests/svg/smil/event/event-seek-1.svg @@ -0,0 +1,20 @@ +<!-- Test a backwards seek with an event-generated time --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + id="svg" + class="reftest-wait"> + <script xlink:href="event-util.js" type="text/javascript"/> + <script type="text/javascript"> + function seek() + { + document.documentElement.setCurrentTime(40); + finish(30); + } + document.addEventListener("MozReftestInvalidate", seek, false); + setTimeout(seek, 4000); // fallback for running outside reftest + </script> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" to="green" + begin="svg.SVGLoad+20s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-default-1.svg b/layout/reftests/svg/smil/event/event-target-default-1.svg new file mode 100644 index 0000000000..2fedc40369 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-default-1.svg @@ -0,0 +1,15 @@ +<!-- Test default parent target --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red" id="rect"> + <set attributeName="fill" attributeType="CSS" to="green" + begin="click" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-default-2.svg b/layout/reftests/svg/smil/event/event-target-default-2.svg new file mode 100644 index 0000000000..dec770e7e9 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-default-2.svg @@ -0,0 +1,14 @@ +<!-- Test default target with xlink:href --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red" id="rect"/> + <set xlink:href="#rect" attributeName="fill" attributeType="CSS" to="green" + begin="click" dur="4s"/> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-id-change-1.svg b/layout/reftests/svg/smil/event/event-target-id-change-1.svg new file mode 100644 index 0000000000..836ebc9d46 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-id-change-1.svg @@ -0,0 +1,15 @@ +<!-- Test that changes to ID assignments are reflected in event registration --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('square').setAttribute('id', 'rect'); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red" id="square"/> + <set xlink:href="#rect" attributeName="fill" attributeType="CSS" to="green" + begin="click" dur="4s"/> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-id-change-2.svg b/layout/reftests/svg/smil/event/event-target-id-change-2.svg new file mode 100644 index 0000000000..2046eb9c82 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-id-change-2.svg @@ -0,0 +1,16 @@ +<!-- Test that changes to ID assignments are reflected in event registration. + Test for when the animation target becomes invalid. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('rect').setAttribute('id', 'square'); + click('square'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="green" id="rect"/> + <set xlink:href="#rect" attributeName="fill" attributeType="CSS" to="red" + begin="click" dur="4s"/> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-id-change-3.svg b/layout/reftests/svg/smil/event/event-target-id-change-3.svg new file mode 100644 index 0000000000..9e73efb26b --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-id-change-3.svg @@ -0,0 +1,16 @@ +<!-- Test that changes to ID assignments are reflected in event registration. + Test with end specifications. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1); + document.getElementById('square').setAttribute('id', 'rect'); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="green" id="square"/> + <set xlink:href="#rect" attributeName="fill" attributeType="CSS" to="red" + begin="0s" end="click" dur="4s"/> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-non-svg-1.xhtml b/layout/reftests/svg/smil/event/event-target-non-svg-1.xhtml new file mode 100644 index 0000000000..d57948d6c3 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-non-svg-1.xhtml @@ -0,0 +1,41 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> +<!-- + Test for non-SVG event bases. This isn't strictly required but we at very + least we want to make sure our behaviour is defined. + --> +<head> +<script src="event-util.js" type="text/javascript"></script> +<script> +function snapshot() { + var svg = document.getElementById("svg"); + svg.pauseAnimations(); + svg.setCurrentTime(0); + click('a'); + var a = document.getElementById('a'); + a.style.display = 'none'; + window.setTimeout(doSnapshot, 10); +} + +function doSnapshot() { + var svg = document.getElementById("svg"); + svg.pauseAnimations(); + svg.setCurrentTime(2); + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", snapshot, false); +setTimeout(snapshot, 4000); // fallback for running outside reftest + +</script> +</head> +<body> +<a href="#" id="a">Play!</a> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg"> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" to="green" + begin="a.click" dur="4s"/> + </rect> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/event/event-target-surgery-1.svg b/layout/reftests/svg/smil/event/event-target-surgery-1.svg new file mode 100644 index 0000000000..9959a14df2 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-surgery-1.svg @@ -0,0 +1,17 @@ +<!-- Test that animations are unregistered when removed --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('rect').removeChild( + document.getElementById('anim')); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="green" id="rect"> + <set attributeName="fill" attributeType="CSS" + to="red" begin="click" dur="4s" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-surgery-2.svg b/layout/reftests/svg/smil/event/event-target-surgery-2.svg new file mode 100644 index 0000000000..b9a778b38d --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-surgery-2.svg @@ -0,0 +1,15 @@ +<!-- Test that animations are unregistered when removed --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.documentElement.removeChild(document.getElementById('anim')); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="green" id="rect"/> + <set xlink:href="#rect" attributeName="fill" attributeType="CSS" + to="red" begin="click" dur="4s" id="anim"/> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-surgery-3.svg b/layout/reftests/svg/smil/event/event-target-surgery-3.svg new file mode 100644 index 0000000000..cf68fc691b --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-surgery-3.svg @@ -0,0 +1,32 @@ +<!-- Test that event registration is updated when reparenting --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="reparent()"> + <script xlink:href="event-util.js" type="text/javascript"/> + <script type="text/javascript"> + function reparent() + { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(0); + var circle = document.getElementById('circle'); + var rect = document.getElementById('rect'); + var animmove = document.getElementById('anim-move'); + var animcolor = document.getElementById('anim-color'); + circle.appendChild(animmove); + rect.appendChild(animcolor); + click('rect'); + delayedSnapshot(2); + } + </script> + <circle id="circle" r="10"> + <set attributeName="fill" attributeType="CSS" + to="green" begin="click" dur="4s" id="anim-color"/> + </circle> + <rect width="100" height="100" fill="red" id="rect"> + <animateTransform attributeName="transform" type="translate" + values="100; 100" calcMode="discrete" + begin="click" dur="4s" id="anim-move"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-xlink-change-1.svg b/layout/reftests/svg/smil/event/event-target-xlink-change-1.svg new file mode 100644 index 0000000000..f742e9276e --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-xlink-change-1.svg @@ -0,0 +1,17 @@ +<!-- Test that changes to animation targets update event registration. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('anim').setAttributeNS( + 'http://www.w3.org/1999/xlink', 'href', '#rect'); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="red" id="rect"/> + <set xlink:href="#circle" attributeName="fill" attributeType="CSS" to="green" + begin="click" dur="4s" id="anim"/> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-xlink-change-2.svg b/layout/reftests/svg/smil/event/event-target-xlink-change-2.svg new file mode 100644 index 0000000000..0b8283f8bd --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-xlink-change-2.svg @@ -0,0 +1,18 @@ +<!-- Test that changes to animation targets update event registration. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('anim').setAttributeNS( + 'http://www.w3.org/1999/xlink', 'href', '#circle'); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="green" id="rect"> + <set attributeName="fill" attributeType="CSS" + to="red" begin="click" dur="4s" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-xlink-change-3.svg b/layout/reftests/svg/smil/event/event-target-xlink-change-3.svg new file mode 100644 index 0000000000..d88f1aa77a --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-xlink-change-3.svg @@ -0,0 +1,18 @@ +<!-- Test that changes to animation targets update event registration. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('anim').removeAttributeNS( + 'http://www.w3.org/1999/xlink', 'href'); + click('rect'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="red" id="rect"> + <set xlink:href="#circle" attributeName="fill" attributeType="CSS" + to="green" begin="click" dur="4s" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-target-xlink-change-4.svg b/layout/reftests/svg/smil/event/event-target-xlink-change-4.svg new file mode 100644 index 0000000000..14e6a46553 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-target-xlink-change-4.svg @@ -0,0 +1,18 @@ +<!-- Test that changes to animation targets update event registration. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('anim').removeAttributeNS( + 'http://www.w3.org/1999/xlink', 'href'); + click('circle'); + delayedSnapshot(2)"> + <script xlink:href="event-util.js" type="text/javascript"/> + <circle id="circle" r="10"/> + <rect width="100" height="100" fill="green" id="rect"> + <set xlink:href="#circle" attributeName="fill" attributeType="CSS" + to="red" begin="click" dur="4s" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/event/event-util.js b/layout/reftests/svg/smil/event/event-util.js new file mode 100644 index 0000000000..fd0d1bd3e9 --- /dev/null +++ b/layout/reftests/svg/smil/event/event-util.js @@ -0,0 +1,24 @@ +// Allows a moment for events to be processed then performs a seek and runs +// a snapshot. +function delayedSnapshot(seekTimeInSeconds) +{ + // Allow time for events to be processed + window.setTimeout(finish, 10, seekTimeInSeconds); +} + +function finish(seekTimeInSeconds) +{ + document.documentElement.pauseAnimations(); + if (seekTimeInSeconds) + document.documentElement.setCurrentTime(seekTimeInSeconds); + document.documentElement.removeAttribute("class"); +} + +function click(targetId) +{ + var evt = document.createEvent("MouseEvents"); + evt.initMouseEvent("click", true, true, window, + 0, 0, 0, 0, 0, false, false, false, false, 0, null); + var target = document.getElementById(targetId); + target.dispatchEvent(evt); +} diff --git a/layout/reftests/svg/smil/event/green-box-ref.svg b/layout/reftests/svg/smil/event/green-box-ref.svg new file mode 100644 index 0000000000..120941444a --- /dev/null +++ b/layout/reftests/svg/smil/event/green-box-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="green"/> +</svg> diff --git a/layout/reftests/svg/smil/event/green-box-ref.xhtml b/layout/reftests/svg/smil/event/green-box-ref.xhtml new file mode 100644 index 0000000000..ce0bc78f12 --- /dev/null +++ b/layout/reftests/svg/smil/event/green-box-ref.xhtml @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<body> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px"> + <rect width="100" height="100" fill="green"/> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/event/reftest.list b/layout/reftests/svg/smil/event/reftest.list new file mode 100644 index 0000000000..74add0ead3 --- /dev/null +++ b/layout/reftests/svg/smil/event/reftest.list @@ -0,0 +1,30 @@ +# Tests related to SVG Animation (using SMIL) that use event timing. + +== event-begin-1.svg green-box-ref.svg +== event-begin-offset-1.svg green-box-ref.svg +== event-begin-offset-2.svg green-box-ref.svg +== event-begin-timeevent-1.svg green-box-ref.svg +== event-begin-timeevent-2.svg green-box-ref.svg +random-if(Android) == event-begin-timeevent-3.svg green-box-ref.svg +== event-begin-load-1.svg green-box-ref.svg +== event-bubble-1.svg green-box-ref.svg +== event-custom-1.svg green-box-ref.svg +== event-end-1.svg green-box-ref.svg +== event-end-2.svg green-box-ref.svg +== event-end-open-1.svg green-box-ref.svg +== event-end-trimmed-1.svg green-box-ref.svg +== event-preventDefault-1.svg green-box-ref.svg +== event-seek-1.svg green-box-ref.svg +== event-target-default-1.svg green-box-ref.svg +== event-target-default-2.svg green-box-ref.svg +== event-target-id-change-1.svg green-box-ref.svg +== event-target-id-change-2.svg green-box-ref.svg +== event-target-id-change-3.svg green-box-ref.svg +== event-target-xlink-change-1.svg green-box-ref.svg +== event-target-xlink-change-2.svg green-box-ref.svg +== event-target-xlink-change-3.svg green-box-ref.svg +== event-target-xlink-change-4.svg green-box-ref.svg +== event-target-surgery-1.svg green-box-ref.svg +== event-target-surgery-2.svg green-box-ref.svg +== event-target-surgery-3.svg green-box-ref.svg +== event-target-non-svg-1.xhtml green-box-ref.xhtml diff --git a/layout/reftests/svg/smil/filtered-instance-time-1.svg b/layout/reftests/svg/smil/filtered-instance-time-1.svg new file mode 100644 index 0000000000..36d69cd122 --- /dev/null +++ b/layout/reftests/svg/smil/filtered-instance-time-1.svg @@ -0,0 +1,63 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- Instance time filtering involves removing instance times that are no + longer needed. However, under some arrangements an excessive number of + instance times may be generated that will never be cleaned up since they + might potentially still affect the behavior of the timing model. + + For example, consider the case where we have a valid cyclic dependency + (e.g. a ping-pong effect) between TimeEvents. For example, + a.begin=b.endEvent and b.begin=a.endEvent. The times generated by this + arrangement won't be cleared by regular filtering since they're + technically unpredictable (e.g. seeking the document will cause some + events to be suppressed) and so we preserve them to provide correct + backwards seeking support. + + Therefore, after reaching a certain threshold, old instance times are + simply discarded indiscriminantly to avoid consuming memory in unbounded + fashion as the animation progresses. + + This test checks this second stage of instance time filtering. --> + <script> + function go() { + var svg = document.documentElement; + var anim = document.getElementById('anim'); + + // To begin with we have an animation from 0s-2s + svg.pauseAnimations(); + svg.setCurrentTime(1.0); // Seek to mid-interval + + // Generate a lot of instance times beyond the interval end at t=2s + // The threshold will be something like 100 but just in case it's 200 + // let's make 210 instance times. + for (var i = 0; i < 210; i++) { + // The first instance time will be at t=3s and then we'll generate lots + // of times following on from there + anim.beginElementAt(2 + i * 0.1); + } + + // Seek past the interval end -- this will cause the filtering to kick in. + // The first stage of filtering will only filter instance times before the + // end of the previous interval (i.e. before t=2s in this case). + // The second stage of filtering should take care of the rest. + svg.setCurrentTime(2.5); + + // The second stage of filtering will clear out the oldest times first. + // However, since first time we generated at t=3s is now used as begin of + // the yet-to-begin current interval it should not be cleared. + // So if we force the current interval to be updated by adding another + // instance time the next interval should still start at t=3s. + anim.beginElementAt(100); + + // Now when we go to do a snapshot at t=3s, the animation should be in + // effect. + svg.setCurrentTime(3.0); + svg.removeAttribute("class"); + } + </script> + <rect id="blueRect" x="100" y="15" width="200" height="200" fill="blue"> + <set id="anim" attributeName="x" to="15" begin="0s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/freeze-applied-late-1.svg b/layout/reftests/svg/smil/freeze-applied-late-1.svg new file mode 100644 index 0000000000..2dd25e1392 --- /dev/null +++ b/layout/reftests/svg/smil/freeze-applied-late-1.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks for correct behavior when fill="freeze" is applied + *after* the end of an animation's interval. In this case, we immediately + seek to a time after the end, so that no samples will have been taken + when we apply fill="freeze". --> + <script> + function go() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(4.0); + document.getElementById("anim").setAttribute("fill", "freeze"); + svg.removeAttribute("class"); + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"> + <animate id="anim" attributeName="height" + to="200" begin="0s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/freeze-applied-late-2.svg b/layout/reftests/svg/smil/freeze-applied-late-2.svg new file mode 100644 index 0000000000..fd15cd9915 --- /dev/null +++ b/layout/reftests/svg/smil/freeze-applied-late-2.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks for correct behavior when fill="freeze" is applied + *after* the end of an animation's interval. In this case, we take one + sample partway through the animation. Then we immediately seek to a + time after the end, so that only the one sample will have been taken + when we apply fill="freeze". --> + <script> + function go() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(1.0); + svg.setCurrentTime(4.0); + document.getElementById("anim").setAttribute("fill", "freeze"); + svg.removeAttribute("class"); + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"> + <animate id="anim" attributeName="height" + to="200" begin="0s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/freeze-applied-late-3.svg b/layout/reftests/svg/smil/freeze-applied-late-3.svg new file mode 100644 index 0000000000..d6f150df0c --- /dev/null +++ b/layout/reftests/svg/smil/freeze-applied-late-3.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks for correct behavior when fill="freeze" is applied when + the only interval on an animation is entirely before the document begins + (before 0). The SMIL Animation spec says that such intervals should be + filtered out[1] (ignored). So, since we have no valid intervals, + applying fill="freeze" shouldn't have any effect in this case. + [1] http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-BeginEnd-LC-Start + --> + <script> + function go() { + var svg = document.documentElement; + document.getElementById("anim").setAttribute("fill", "freeze"); + svg.removeAttribute("class"); + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="200" fill="blue"> + <animate id="anim" attributeName="height" + to="100" begin="-2s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/freeze-applied-late-4.svg b/layout/reftests/svg/smil/freeze-applied-late-4.svg new file mode 100644 index 0000000000..f755ee5c62 --- /dev/null +++ b/layout/reftests/svg/smil/freeze-applied-late-4.svg @@ -0,0 +1,30 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This test checks for correct behavior when fill="freeze" is applied when + one interval on an animation is entirely before the document begins + (before 0), and a second interval is at least partly after the document + begins (yet before our first sample, since we immediately seek forward + on document load). + + The SMIL Animation spec says that the former interval should be + filtered out[1] (ignored), but the latter should not. So, because of + the latter interval, applying fill="freeze" should have an effect in + this case. + [1] http://www.w3.org/TR/2001/REC-smil-animation-20010904/#Timing-BeginEnd-LC-Start + --> + <script> + function go() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(4.0); + document.getElementById("anim").setAttribute("fill", "freeze"); + svg.removeAttribute("class"); + } + </script> + <rect id="blueRect" x="15" y="15" width="200" height="100" fill="blue"> + <animate id="anim" attributeName="height" + to="200" begin="-3s; -1s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/frozen-to-anim-1.svg b/layout/reftests/svg/smil/frozen-to-anim-1.svg new file mode 100644 index 0000000000..a934d45342 --- /dev/null +++ b/layout/reftests/svg/smil/frozen-to-anim-1.svg @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="utf-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(50, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <!-- Covered up red area, if we succeed --> + <rect width="100%" height="100%" fill="red"/> + <rect width="100%" height="100%" fill="lime"> + <!-- At time t=50s, this will give a base value of 50% --> + <animate attributeName="width" from="0%" to="100%" + dur="100s"/> + <!-- From time t=1s onwards this should apply 50% of its effect to the base + value (since it is frozen at repeatCount=0.5). + So, if the base value is 50%, and the to-value is 150%, it will produce + 100%. --> + <animate attributeName="width" to="150%" fill="freeze" + dur="2s" repeatCount="0.5"/> + <!-- The above will check that the resulting width is *at least* 100%. But + if it's, say, 120%, we won't see any failure. + Therefore, we perform the reverse operation on the height to ensure we + don't apply a value that's too large. --> + <!-- At time t=50s, this will give a base value of 150% --> + <animate attributeName="height" from="200%" to="100%" + dur="100s"/> + <!-- From time t=1s onwards this should apply 50% of its effect to the + value. + So, if the base value is 150%, and the to-value is 50%, it will produce + 100%. --> + <animate attributeName="height" to="50%" fill="freeze" + dur="2s" repeatCount="0.5"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/inactivate-with-active-unchanged-1.svg b/layout/reftests/svg/smil/inactivate-with-active-unchanged-1.svg new file mode 100644 index 0000000000..c3e734aea0 --- /dev/null +++ b/layout/reftests/svg/smil/inactivate-with-active-unchanged-1.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1); + setTimeAndSnapshot(2, false);"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <!-- + Test that we correctly handle "HasChanged()" flags when an animation becomes + inactive while its siblings haven't changed. + In this test case, we take our first sample at 1s, and both animations are + active. We take our second sample at 2s, and the first animation is the only + active animation. It hasn't changed, so we might think that we don't need to + recompose its target - BUT we *do* need to recompose, because the other + animation is newly inactive, and we need to reevaluate the animation + sandwich now that it's gone. + --> + <rect x="15" y="15" width="200" height="200" fill="orange"> + <set attributeName="fill" to="blue" begin="0s" dur="indefinite"/> + <set attributeName="fill" to="red" begin="1s" dur="0.5s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/inactivate-with-active-unchanged-2.svg b/layout/reftests/svg/smil/inactivate-with-active-unchanged-2.svg new file mode 100644 index 0000000000..be23416fe1 --- /dev/null +++ b/layout/reftests/svg/smil/inactivate-with-active-unchanged-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1); + setTimeAndSnapshot(2, false);"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <!-- + Same as in inactivate-with-active-unchanged-1.svg, but with a frozen + animation. + --> + <rect x="15" y="15" width="200" height="200" fill="orange"> + <set attributeName="fill" to="blue" begin="0s" dur="0.5s" fill="freeze"/> + <set attributeName="fill" to="red" begin="1s" dur="0.5s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/lime.html b/layout/reftests/svg/smil/lime.html new file mode 100644 index 0000000000..c4542815b5 --- /dev/null +++ b/layout/reftests/svg/smil/lime.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <head> + <title>Testcase reference file for generic pass condition(HTML)</title> + </head> + <body style="background-color: lime;"> + </body> +</html> diff --git a/layout/reftests/svg/smil/lime.svg b/layout/reftests/svg/smil/lime.svg new file mode 100644 index 0000000000..c09c6601e8 --- /dev/null +++ b/layout/reftests/svg/smil/lime.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"> + <title>Testcase reference file for generic pass condition</title> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/smil/mapped-attr-long-url-1.svg b/layout/reftests/svg/smil/mapped-attr-long-url-1.svg new file mode 100644 index 0000000000..7c4c3b66cb --- /dev/null +++ b/layout/reftests/svg/smil/mapped-attr-long-url-1.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect height="100%" width="100%" fill="lime" /> + <rect height="100" width="100" fill="red"> + <set attributeName="fill" attributeType="XML" dur="indefinite" + to="url(#reaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallyLongURL) transparent"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/mapped-attr-long-url-2.svg b/layout/reftests/svg/smil/mapped-attr-long-url-2.svg new file mode 100644 index 0000000000..94c0c6ebc2 --- /dev/null +++ b/layout/reftests/svg/smil/mapped-attr-long-url-2.svg @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + window.addEventListener("MozReftestInvalidate", run, false); + + function run() { + var svg = document.documentElement; + svg.pauseAnimations(); + + // Seek to first half of animation + svg.setCurrentTime(101); + + // Seek to second half of animation + svg.setCurrentTime(103); + + // Take snapshot + svg.removeAttribute("class"); + } + </script> + <rect height="100%" width="100%" fill="lime" /> + <rect height="100" width="100" fill="red"> + <animate attributeName="fill" attributeType="XML" begin="100s" dur="4s" + from="url(#another_reaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallyLongURL) purple" + to="url(#reaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaallyLongURL) transparent"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/min-1.svg b/layout/reftests/svg/smil/min-1.svg new file mode 100644 index 0000000000..6ba576d452 --- /dev/null +++ b/layout/reftests/svg/smil/min-1.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(115, true)"> + <script xlink:href="smil-util.js" type="text/javascript"/> + <!-- Test min behavior + + Set up is as follows: + 1. There is a rectangle with a lime fill. + 2. A <set> animation (with default fill="none") sets the fill to + orange at t=100s. + It has a simple duration of 10s and a min duration of 20s. + 3. A further <set> animation sets the fill to red when the first + animation finishes (using syncbase timing). + + At time t=115s we should still be in the first animation's active + interval with its fill mode of 'none' applied which should mean the + original lime fill is used. --> + <rect width="100%" height="100%" fill="lime"> + <set attributeName="fill" to="orange" dur="10s" min="20s" begin="100s" + id="a"/> + <set attributeName="fill" to="red" begin="a.end"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-by-1.svg b/layout/reftests/svg/smil/motion/animateMotion-by-1.svg new file mode 100644 index 0000000000..072947735e --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-by-1.svg @@ -0,0 +1,53 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(101, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Big green background to match lime.svg --> + <rect width="100%" height="100%" fill="lime"/> + <!-- Red "workspaces" (should be covered up, if tests pass) --> + <rect x="100" y="100" width="100" height="100" fill="red"/> + <rect x="100" y="300" width="100" height="100" fill="red"/> + + <!-- FIRST ROW --> + <!-- Check that 'by' works at all --> + <rect fill="lime" x="0" y="0" width="50" height="50"> + <animateMotion by="100, 100" begin="100" dur="1" fill="freeze"/> + </rect> + + <!-- Check that 'by' is additive w/ 'by' --> + <rect fill="lime" x="50" y="50" width="50" height="50"> + <animateMotion by="60, 75" begin="100" dur="1" fill="freeze"/> + <animateMotion by="40, -25" begin="100" dur="1" fill="freeze"/> + </rect> + + <!-- SECOND ROW --> + <!-- Check that 'by' is additive w/ 'to' --> + <rect fill="lime" width="50" height="50"> + <animateMotion to="50,100" begin="100" dur="1" fill="freeze"/> + <animateMotion by="50, 50" begin="100" dur="1" fill="freeze"/> + </rect> + + <!-- Check that 'from-to' replaces 'by' --> + <rect fill="lime" width="50" height="50"> + <animateMotion by="500, 500" begin="100" dur="1" fill="freeze"/> + <animateMotion from="300,300" to="150,150" begin="100" dur="1" fill="freeze"/> + </rect> + + <!-- Other tags --> + <foreignObject id="fo" x="0" y="0" width="100" height="50"> + <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;background-color:lime"/> + </foreignObject> + <animateMotion xlink:href="#fo" by="100, 300" begin="100" dur="1" fill="freeze"/> + + <svg x="0" y="50" width="100" height="50"> + <rect width="100" height="50" fill="lime"/> + <animateMotion by="100, 300" begin="100" dur="1" fill="freeze"/> + </svg> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-by-2.svg b/layout/reftests/svg/smil/motion/animateMotion-by-2.svg new file mode 100644 index 0000000000..9502828c35 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-by-2.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" transform="translate(100,0)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(101, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <animateMotion by="-100, 0" begin="100" dur="1" fill="freeze"/> + + <!-- Big green background to match lime.svg --> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg b/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg new file mode 100644 index 0000000000..cf3a55523a --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-flattening-1.svg @@ -0,0 +1,26 @@ + <svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100%" height="100%" viewBox="0 0 45 45" preserveAspectRatio="none"
+ class="reftest-wait">
+ <!--
+ Bug 946540. Test that motion paths with inflection points that both lie
+ outside of (0, 1) are flattened correctly.
+
+ We have a lime background and move a red square along a motion path. If
+ the path is not flattened correctly the red square will get stuck at the
+ point where it covers the viewport.
+ -->
+ <script xlink:href="../smil-util.js"/>
+ <script>
+ window.addEventListener("MozReftestInvalidate", function() {
+ setTimeAndSnapshot(110, true);
+ }, false);
+ </script>
+ <!-- Lime background -->
+ <rect width="100%" height="100%" fill="lime"/>
+ <!-- Animated square -->
+ <rect x="-25" y="-25" width="50" height="50" fill="red">
+ <animateMotion calcMode="paced" begin="100s" dur="1s" fill="freeze"
+ path="m0-32c0 25 10 46 22 56 34 28 75 35 102 38"/>
+ </rect>
+ </svg>
diff --git a/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg b/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg new file mode 100644 index 0000000000..065ee36b12 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-from-to-1.svg @@ -0,0 +1,44 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(101, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Big green background to match lime.svg --> + <rect width="100%" height="100%" fill="lime"/> + <!-- Red "workspace" (should be covered up, if tests pass) --> + <rect x="100" y="100" width="100" height="100" fill="red"/> + + <!-- FIRST ROW --> + <!-- Check that 'from' gets applied at begin time --> + <rect fill="lime" x="0" y="0" width="50" height="50"> + <animateMotion from="100, 100" to="500, 500" begin="101" dur="1"/> + </rect> + + <!-- Check that 'to' gets hit at end time --> + <rect fill="lime" x="0" y="0" width="50" height="50"> + <animateMotion from="200,200" to="150,100" begin="100" dur="1" fill="freeze"/> + </rect> + + <!-- SECOND ROW --> + <!-- Check that animation effects are removed after end time + (note that fill="remove" is default; just specifying it for clarity --> + <rect fill="lime" x="100" y="150" width="50" height="50"> + <animateMotion from="500,500" to="600,600" begin="1000" dur="1" fill="remove"/> + </rect> + <rect fill="purple" x="-25" y="-25" width="25" height="25"> + <!-- With the purple rect's x/y offsets, this animateMotion path moves us + around the 2nd row, 1st col --> + <animateMotion from="125,175" to="150,175" begin="100" dur="1" fill="remove"/> + </rect> + + <!-- Check interpolation halfway through animation --> + <rect fill="lime" width="50" height="50"> + <animateMotion from="200,100" to="100,200" begin="100.5" dur="1"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg new file mode 100644 index 0000000000..12c62da2c8 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-1.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- Test that an indefinite to-animation just sticks to the base value for + animateMotion. --> + <rect width="100%" height="100%" fill="lime"/> + + <rect x="15" y="15" width="100" height="100" fill="red"/> + <rect x="15" y="15" width="100" height="100" fill="lime"> + <animateMotion to="500,500" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg new file mode 100644 index 0000000000..82f5a61a05 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-indefinite-to-2.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- Test that an indefinite to-animation with discrete calcMode applies + the underlying value for the whole time. --> + <rect width="100%" height="100%" fill="lime"/> + + <rect x="15" y="15" width="100" height="100" fill="red"/> + <rect x="15" y="15" width="100" height="100" fill="lime"> + <animateMotion to="500,500" dur="indefinite" + calcMode="discrete"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg new file mode 100644 index 0000000000..ffb991c1a6 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-pathLength-1.svg @@ -0,0 +1,31 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait"> + <title>Test that pathLength of paths has no effect in animation</title> + <defs> + <path id="path" pathLength="100" d="M0,0 h400" /> + </defs> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(100.5, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + <rect width="100%" height="100%" fill="lime"/> + + <!-- calcMode="linear" --> + <rect x="10" y="10" width="100" height="100" fill="red"/> + <rect x="-190" y="10" width="100" height="100" fill="lime"> + <animateMotion begin="100s" dur="1s" keyPoints="0;1" keyTimes="0;1" calcMode="linear"> + <mpath xlink:href="#path" /> + </animateMotion> + </rect> + + <!-- calcMode="paced" --> + <rect x="10" y="110" width="100" height="100" fill="red"/> + <rect x="-190" y="110" width="100" height="100" fill="lime"> + <animateMotion begin="100s" dur="1s"> + <mpath xlink:href="#path" /> + </animateMotion> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-shadow.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-shadow.svg new file mode 100644 index 0000000000..d57aa1a29f --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-shadow.svg @@ -0,0 +1,34 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" class="reftest-wait"> + <title>Test that pathLength works inside a shadow tree</title> + <defs> + <path id="path" pathLength="100" d="M0,0 h400" /> + <g id="content"> + <rect width="100%" height="100%" fill="lime"/> + + <!-- calcMode="linear" --> + <rect x="10" y="10" width="100" height="100" fill="red"/> + <rect x="-190" y="10" width="100" height="100" fill="lime"> + <animateMotion begin="100s" dur="1s" keyPoints="0;1" keyTimes="0;1" calcMode="linear"> + <mpath xlink:href="#path" /> + </animateMotion> + </rect> + + <!-- calcMode="paced" --> + <rect x="10" y="110" width="100" height="100" fill="red"/> + <rect x="-190" y="110" width="100" height="100" fill="lime"> + <animateMotion begin="100s" dur="1s"> + <mpath xlink:href="#path" /> + </animateMotion> + </rect> + </g> + </defs> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(100.5, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + <use xlink:href="#content"></use> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg new file mode 100644 index 0000000000..c8f5919b79 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-target-transform-1.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test that 'transform' on the <mpath> target has no affect</title> + <defs> + <path id="path" d="M0,0 L100,100" transform="translate(100,0)"/> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <rect x="10" y="10" width="100" height="100" fill="red"/> + <rect x="10" y="10" width="100" height="100" fill="lime"> + <animateMotion dur="indefinite"> + <mpath xlink:href="#path"/> + </animateMotion> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg b/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg new file mode 100644 index 0000000000..b2a408ca62 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-mpath-targetChange-1.svg @@ -0,0 +1,151 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <style> + .background { fill: lime } + .workspace { fill: red } + .test { fill: lime } + </style> + <defs> + <!-- 'Dummy' path --> + <path id="moveFarAway" d="M300,300 h0"/> + + <path id="moveToUpperLeft" d="M100,100 h0"/> + + <path id="pathWhoseDAttrChanges" d="M360,360 h0"/> + + <!-- The first of these two elems w/ same ID should be used. --> + <path id="moveToMiddleLeft" d="M100,150 h0"/> + <path id="moveToMiddleLeft" d="M350,350 h0"/> + + <!-- The first of these two elems w/ same ID initially wins, but then + it gets removed via script. --> + <path id="moveToMiddleCenter" d="M340,340 h0"/> + <path id="moveToMiddleCenter" d="M150,150 h0"/> + + <!-- This elem doesn't do what its id would suggest, but we'll use JS to + add an earlier elem with the same ID that *does* do what it says. --> + <path id="moveToMiddleRight" d="M330,330 h0"/> + + <path id="moveToLowerLeft" d="M100,200 h0"/> + <path id="moveToLowerCenter" d="M150,200 h0"/> + + </defs> + + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + const SVGNS = "http://www.w3.org/2000/svg"; + const XLINKNS = "http://www.w3.org/1999/xlink"; + + + function insertPathElem(aPathId, aPathSpec) { + var newPath = document.createElementNS(SVGNS, "path"); + newPath.setAttribute("id", aPathId); + newPath.setAttribute("d", aPathSpec); + + // Insert new path into defs + var defsElem = document.getElementsByTagName("defs")[0]; + defsElem.insertBefore(newPath, defsElem.firstChild); + } + + function doTest() { + // Seek already, so we'll have sampled the initial 'stale' state + document.documentElement.setCurrentTime(1); + + // Make tweaks + var mpathToModify = document.getElementById("modifyMyTarget"); + mpathToModify.setAttributeNS(XLINKNS, "href", "#moveToUpperLeft"); + + var mpathWhoseHrefNeedsClearing = document.getElementById("unsetMyTarget"); + mpathWhoseHrefNeedsClearing.removeAttributeNS(XLINKNS, "href"); + + var pathToTweak = document.getElementById("pathWhoseDAttrChanges"); + pathToTweak.setAttribute("d", "M200 100 h0"); + + var mpathToDelete = document.getElementById("removeMe"); + mpathToDelete.parentNode.removeChild(mpathToDelete); + + var pathToDelete = document.getElementById("moveToMiddleCenter"); + pathToDelete.parentNode.removeChild(pathToDelete); + + insertPathElem("moveToMiddleRight", "M200,150 h0"); + insertPathElem("moveToLowerRight", "M200,200 h0"); + + setTimeAndSnapshot(1, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Big green background to match lime.svg --> + <rect class="background" width="100%" height="100%" /> + <!-- Red "workspace" (should be covered up, if tests pass) --> + <rect class="workspace" x="100" y="100" width="150" height="150"/> + + <!-- FIRST ROW: Test behavior... --> + <!-- ...when mpath's 'xlink:href' attr is modified. --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath id="modifyMyTarget" xlink:href="#moveFarAway"/> + </animateMotion> + </rect> + + <!-- ...when mpath's 'xlink:href' is unset. --> + <rect class="test" x="150" y="100" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath id="unsetMyTarget" xlink:href="#moveFarAway"/> + </animateMotion> + </rect> + + <!-- ...when the target-path's "d" attr is modified. --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath xlink:href="#pathWhoseDAttrChanges"/> + </animateMotion> + </rect> + + <!-- SECOND ROW: Test behavior... --> + <!-- ...when there are two paths with same ID (first should win) --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath xlink:href="#moveToMiddleLeft"/> + </animateMotion> + </rect> + + <!-- ...when there are two paths with same ID, and the first is removed. --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath xlink:href="#moveToMiddleCenter"/> + </animateMotion> + </rect> + + <!-- ...when an earlier path is added with our target ID. --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath xlink:href="#moveToMiddleRight"/> + </animateMotion> + </rect> + + <!-- THIRD ROW: Test behavior... --> + <!-- ...when there are two mpath children (first should win). --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath xlink:href="#moveToLowerLeft"/> + <mpath xlink:href="#moveFarAway"/> + </animateMotion> + </rect> + + <!-- ...when there are two mpath children, and the first is removed. --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath id="removeMe" xlink:href="#moveFarAway"/> + <mpath xlink:href="#moveToLowerCenter"/> + </animateMotion> + </rect> + <!-- ...when there's an mpath child that initially matches nothing, until + a node with the right ID is inserted into the DOM. --> + <rect class="test" x="0" y="0" width="50" height="50"> + <animateMotion begin="1" dur="1" fill="freeze"> + <mpath xlink:href="#moveToLowerRight"/> + </animateMotion> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg new file mode 100644 index 0000000000..414a6c718b --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-1a.svg @@ -0,0 +1,63 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <style> + .background { fill: lime } + .workspace { fill: red } + .test { fill: lime } + .filler { fill: lime } + </style> + + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(101, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Big green background to match lime.svg --> + <rect class="background" width="100%" height="100%" /> + <!-- Red "workspace" (should be covered up, if tests pass) --> + <rect class="workspace" x="100" y="100" width="100" height="100"/> + + <!-- FIRST ROW --> + <!-- Check that 'rotate' gets applied at begin time --> + <g> + <animateMotion from="150, 100" to="500, 500" rotate="90" + begin="101" dur="1"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="100" y="120" width="30" height="30"/> + + <!-- Check that 'rotate' gets applied at end time --> + <g> + <animateMotion from="600, 700" to="200, 150" rotate="180" begin="100" + dur="1" fill="freeze"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="150" y="100" width="30" height="30"/> + + <!-- SECOND ROW --> + <!-- Check that rotate combines with existing rotate --> + <g transform="rotate(90)"> + <animateMotion from="150,200" to="600,600" rotate="90" + begin="101" dur="1"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="100" y="150" width="30" height="30"/> + + <!-- Check additivity of <animateMotion> "rotate" adds --> + <g> + <animateMotion from="100,100" to="100,200" rotate="90" + begin="100.5" dur="1"/> + <animateMotion by="100,-200" rotate="90" + begin="100.5" dur="1"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="150" y="150" width="30" height="30"/> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg new file mode 100644 index 0000000000..8c4287d33e --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-1b.svg @@ -0,0 +1,63 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <style> + .background { fill: lime } + .workspace { fill: red } + .test { fill: lime } + .filler { fill: lime } + </style> + + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(101, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Big green background to match lime.svg --> + <rect class="background" width="100%" height="100%" /> + <!-- Red "workspace" (should be covered up, if tests pass) --> + <rect class="workspace" x="100" y="100" width="100" height="100"/> + + <!-- FIRST ROW --> + <!-- Check that 'rotate' gets applied at begin time --> + <g> + <animateMotion from="150, 100" to="500, 500" rotate="100grad" + begin="101" dur="1"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="100" y="120" width="30" height="30"/> + + <!-- Check that 'rotate' gets applied at end time --> + <g> + <animateMotion from="600, 700" to="200, 150" rotate="200grad" begin="100" + dur="1" fill="freeze"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="150" y="100" width="30" height="30"/> + + <!-- SECOND ROW --> + <!-- Check that rotate combines with existing rotate --> + <g transform="rotate(90)"> + <animateMotion from="150,200" to="600,600" rotate="100grad" + begin="101" dur="1"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="100" y="150" width="30" height="30"/> + + <!-- Check additivity of <animateMotion> "rotate" adds --> + <g> + <animateMotion from="100,100" to="100,200" rotate="100grad" + begin="100.5" dur="1"/> + <animateMotion by="100,-200" rotate="100grad" + begin="100.5" dur="1"/> + <rect class="test" x="0" y="0" width="20" height="50"/> + <rect class="test" x="0" y="0" width="50" height="20"/> + </g> + <rect class="filler" x="150" y="150" width="30" height="30"/> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg b/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg new file mode 100644 index 0000000000..7f6fcc7cf5 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-rotate-2.svg @@ -0,0 +1,52 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <!-- Tests for rotate="auto" and "auto-reverse" --> + <!-- The idea here is to create positioned red "holes" in the lime + background, and then hopefully use paused <animateMotion> elements to + position other elements exactly on top of the hole. --> + <style> + .background { fill: lime } + .hole { color: red } + .testBegin { color: purple } + .testEnd { color: orange } + .mask { color: lime } + </style> + <defs> + <!-- A 'pin' marker, just offscreen, pointing directly down at 0,0 --> + <!-- NOTE: The lime 2.83px-wide stroke is a hack to get around "seams" in + SVG when redrawing the same non-pixel-aligned shape on top of itself + in different colors. 2.83 is just over 2*sqrt(2), sqrt(2) being the + maximum distance from a path that antialiasing of square pixels can + cause the path to affect. --> + <path id="marker" d="m0,0 l-10,-30 c-5,-20 25,-20 20,0 z" + style="fill: currentColor; stroke: lime; stroke-width: 2.83px"/> + </defs> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(101, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Big green background to match lime.svg --> + <rect class="background" width="100%" height="100%" /> + <g transform="translate(50,50)"> + <!-- Here's the hole --> + <use xlink:href="#marker" class="hole" + transform="translate(20,20) rotate(45)"/> + + <!-- And here's a stack of elements animated with 'animateMotion' that + should end up there. --> + <use xlink:href="#marker" class="testBegin"> + <animateMotion from="20,20" to="40,40" rotate="auto" begin="101s" dur="1s"/> + </use> + <use xlink:href="#marker" class="testEnd"> + <animateMotion by="20,20" rotate="auto" begin="100" dur="1s" fill="freeze"/> + </use> + <use xlink:href="#marker" class="mask"> + <animateMotion by="40,40" rotate="auto" begin="100s" dur="2s"/> + </use> + </g> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg b/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg new file mode 100644 index 0000000000..2c6179640a --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-to-overridden-1.svg @@ -0,0 +1,61 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function doTest() { + setTimeAndSnapshot(101, true); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <!-- Big green background to match lime.svg --> + <rect fill="lime" width="100%" height="100%" /> + + <!-- In the following pairs of rects, the only pairwise differences are the + fill-color and the presence of the "to" attribute on the animateMotion + element. "to" shouldn't have any effect in these cases, since it has + lower priority than "values," "path," and "mpath". So in each case, the + lime rect should cover up the red rect at all times. --> + + <!-- Single-point path specified with "values" attribute: --> + <g transform="translate(0,0)"> + <rect width="20" height="20" fill="red"> + <animateMotion values="20,0" dur="2" begin="100"/> + </rect> + <rect width="20" height="20" fill="lime"> + <animateMotion values="20,0" dur="2" to="-50,0" begin="100"/> + </rect> + </g> + + <!-- Multi-point path specified with "values" attribute: --> + <g transform="translate(0,30)"> + <rect width="20" height="20" fill="red"> + <animateMotion values="20,0; 80,0" dur="2" begin="100"/> + </rect> + <rect width="20" height="20" fill="lime"> + <animateMotion values="20,0; 80,0" dur="2" to="-50,0" begin="100"/> + </rect> + </g> + + <!-- Path specified with "path" attribute: --> + <g transform="translate(0,60)"> + <rect width="20" height="20" fill="red"> + <animateMotion path="m0,0 h100" dur="2" begin="100"/> + </rect> + <rect width="20" height="20" fill="lime"> + <animateMotion path="m0,0 h100" dur="2" to="-50,0" begin="100"/> + </rect> + </g> + + <!-- Path specified with "mpath" subelement: --> + <path id="p" d="m0,0 h100"/> + <g transform="translate(0,90)"> + <rect width="20" height="20" fill="red"> + <animateMotion dur="2" begin="100"><mpath xlink:href="#p"/></animateMotion> + </rect> + <rect width="20" height="20" fill="lime"> + <animateMotion dur="2" to="-50,0" begin="100"><mpath xlink:href="#p"/></animateMotion> + </rect> + </g> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg new file mode 100644 index 0000000000..fbb06fcf13 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1-ref.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- First row --> + <g transform="translate(20,20)"> + <g> + <rect width="15px" height="15px"/> + </g> + <g transform="translate(50,0)"> + <rect x="0" y="10" width="15px" height="15px"/> + </g> + <g transform="translate(100,0)"> + <rect x="9" y="10" width="15px" height="15px"/> + </g> + </g> + <!-- Second row --> + <g transform="translate(20,70)"> + <g> + <rect x="22.5" y="10" width="15px" height="15px"/> + </g> + <g transform="translate(50,0)"> + <rect x="29.7" y="10" width="15px" height="15px"/> + </g> + <g transform="translate(100,0)"> + <rect x="45" y="30" width="15px" height="15px"/> + </g> + </g> + <!-- Third row --> + <g transform="translate(20,120)"> + <g> + <rect x="48" y="34" width="15px" height="15px"/> + </g> + <g transform="translate(50,0)"> + <rect x="60" y="50" width="15px" height="15px"/> + </g> + <g transform="translate(100,0)"> + <rect x="60" y="50" width="15px" height="15px"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg new file mode 100644 index 0000000000..6c4721cca0 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-values-linear-1.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- Tests for <animateMotion> with 'values' attribute --> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "values" : "0,10; 30,10; 60,50", + "calcMode" : "linear" }; + testAnimatedRectGrid("animateMotion", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg new file mode 100644 index 0000000000..d933fb8381 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1-ref.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- First row --> + <g transform="translate(20,20)"> + <g> + <rect width="15px" height="15px"/> + </g> + <g transform="translate(50,0)"> + <rect x="0" y="10" width="15px" height="15px"/> + </g> + <g transform="translate(100,0)"> + <rect x="12" y="10" width="15px" height="15px"/> + </g> + </g> + <!-- Second row --> + <g transform="translate(20,70)"> + <g> + <rect x="30" y="10" width="15px" height="15px"/> + </g> + <g transform="translate(50,0)"> + <rect x="35.76" y="17.68" width="15px" height="15px"/> + </g> + <g transform="translate(100,0)"> + <rect x="48" y="34" width="15px" height="15px"/> + </g> + </g> + <!-- Third row --> + <g transform="translate(20,120)"> + <g> + <rect x="50.4" y="37.2" width="15px" height="15px"/> + </g> + <g transform="translate(50,0)"> + <rect x="60" y="50" width="15px" height="15px"/> + </g> + <g transform="translate(100,0)"> + <rect x="60" y="50" width="15px" height="15px"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg new file mode 100644 index 0000000000..737574cae5 --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1a.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- Tests for <animateMotion> with 'values' attribute --> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "values" : "0,10; 30,10; 60,50"}; + testAnimatedRectGrid("animateMotion", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg new file mode 100644 index 0000000000..9d72807d9e --- /dev/null +++ b/layout/reftests/svg/smil/motion/animateMotion-values-paced-1b.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- Tests for <animateMotion> with 'values' attribute --> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "values" : "0,10; 30,10; 60,50", + "calcMode" : "paced" }; + testAnimatedRectGrid("animateMotion", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/motion/lime.svg b/layout/reftests/svg/smil/motion/lime.svg new file mode 100644 index 0000000000..c09c6601e8 --- /dev/null +++ b/layout/reftests/svg/smil/motion/lime.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"> + <title>Testcase reference file for generic pass condition</title> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/smil/motion/reftest.list b/layout/reftests/svg/smil/motion/reftest.list new file mode 100644 index 0000000000..9163259736 --- /dev/null +++ b/layout/reftests/svg/smil/motion/reftest.list @@ -0,0 +1,22 @@ +# Tests related to SVG Animation (using SMIL), focusing on the animateMotion +# element. + +== animateMotion-by-1.svg lime.svg +== animateMotion-by-2.svg lime.svg +fuzzy(0-15,0-1600) == animateMotion-flattening-1.svg lime.svg # bug 951541 +== animateMotion-from-to-1.svg lime.svg +== animateMotion-indefinite-to-1.svg lime.svg +== animateMotion-indefinite-to-2.svg lime.svg +== animateMotion-rotate-1a.svg lime.svg +== animateMotion-rotate-1b.svg lime.svg +fuzzy(0-1,0-40) == animateMotion-rotate-2.svg lime.svg +== animateMotion-to-overridden-1.svg lime.svg +fuzzy(0-4,0-15) == animateMotion-values-linear-1.svg animateMotion-values-linear-1-ref.svg +fuzzy(0-5,0-91) == animateMotion-values-paced-1a.svg animateMotion-values-paced-1-ref.svg +fuzzy(0-5,0-91) == animateMotion-values-paced-1b.svg animateMotion-values-paced-1-ref.svg + +# Tests involving <mpath> sub-element +== animateMotion-mpath-pathLength-1.svg lime.svg +== animateMotion-mpath-targetChange-1.svg lime.svg +== animateMotion-mpath-target-transform-1.svg lime.svg +== animateMotion-mpath-shadow.svg lime.svg diff --git a/layout/reftests/svg/smil/pause/init-pause-1-ref.svg b/layout/reftests/svg/smil/pause/init-pause-1-ref.svg new file mode 100644 index 0000000000..7d9aa5082f --- /dev/null +++ b/layout/reftests/svg/smil/pause/init-pause-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <circle cx="150" cy="50" r="30" fill="blue"/> + <!-- Tick mark to show where the circle should be --> + <path d="M150 40v20" stroke="green"/> +</svg> diff --git a/layout/reftests/svg/smil/pause/init-pause-1.svg b/layout/reftests/svg/smil/pause/init-pause-1.svg new file mode 100644 index 0000000000..a352dd8345 --- /dev/null +++ b/layout/reftests/svg/smil/pause/init-pause-1.svg @@ -0,0 +1,49 @@ +<!-- + + Tests various aspects of initial pause behaviour including getCurrentTime and + setCurrentTime. In particular, we test the behaviour described in + +http://www.w3.org/2003/01/REC-SVG11-20030114-errata#getCurrentTime_setCurrentTime_undefined_before_document_timeline_begin + + --> +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="unpause()"> + <script type="text/ecmascript"><![CDATA[ + // If we try to update the DOM as we go we very occasionally run into timing + // issues that produce false positives for this test. So instead we just set + // this flag and update the DOM at the end of the test. + var ok = true; + + function assert(condition) { + ok = ok & condition; + } + + // === Test the state before the document starts === + document.documentElement.setCurrentTime(2); + assert(document.documentElement.getCurrentTime() == 0); + assert(!document.documentElement.animationsPaused()); + document.documentElement.pauseAnimations(); + + function unpause() { + // === Test the state after that the document has started === + assert(document.documentElement.getCurrentTime() == 2); + assert(document.documentElement.animationsPaused()); + + if (!ok) { + document.getElementById('wrong').style.visibility = 'visible'; + } + + document.documentElement.removeAttribute("class"); + } + ]]></script> + <circle cx="50" cy="50" r="30" fill="blue"> + <animate attributeName="cx" attributeType="XML" + to="250" begin="1s" dur="2s" fill="freeze"/> + </circle> + <!-- Tick mark to show where the circle should be --> + <path d="M150 40v20" stroke="green"/> + <!-- Marker to show if something is wrong in the DOM --> + <text fill="red" stroke="none" font-size="60" x="125" y="70" + font-family="sans-serif" id="wrong" visibility="hidden">X</text> +</svg> diff --git a/layout/reftests/svg/smil/pause/reftest.list b/layout/reftests/svg/smil/pause/reftest.list new file mode 100644 index 0000000000..a4af69c477 --- /dev/null +++ b/layout/reftests/svg/smil/pause/reftest.list @@ -0,0 +1,2 @@ +# Tests for pause behaviour +== init-pause-1.svg init-pause-1-ref.svg diff --git a/layout/reftests/svg/smil/reftest.list b/layout/reftests/svg/smil/reftest.list new file mode 100644 index 0000000000..1ec28de14a --- /dev/null +++ b/layout/reftests/svg/smil/reftest.list @@ -0,0 +1,295 @@ +# Tests related to SVG Animation (using SMIL) +# XXXdholbert Partial list of features that still need reftests: +# - calcMode=discrete, paced, spline +# - Stacking of additive=[sum|replace] animations +# - Stacking of additive animations, w/ "hybrid case of to-animation" +# - Repeating animations, w/ & w/out accumulate=sum +# - Interpolation between different units (e.g. font-size attr, 3em to 50px) +# - Correct behavior for em/ex font-size animations, when context changes +# (with change happening 1. when completed/frozen and 2. when animating) +# - CSS properties +# - DOM interfaces: +# * Section 6.2 of http://www.w3.org/TR/smil-animation/ +# * Animation-related bits of http://www.w3.org/TR/SVG/struct.html#DOMInterfaces +# - Some more "anim-retarget" tests, with attributeType being changed/cleared. +# (after we've got support for SVG/SMIL animation of CSS properties) + +# animateMotion tests +include motion/reftest.list + +# animation sort-order tests +include sort/reftest.list + +# set tests +include set/reftest.list + +# style tests +include style/reftest.list + +# animateTransform tests +include transform/reftest.list + +# time-dependent tests +# XXXdholbert Disabling this class of tests for now, because most of them +# can & should be converted so they don't depend on specific timeout values. +# (to prevent sporadic failures due to nondeterminism) +# include timed/reftest.list + +# time container tests +include container/reftest.list + +# repeat tests +include repeat/reftest.list + +# restart tests +include restart/reftest.list + +# pause tests +include pause/reftest.list + +# syncbase tests +include syncbase/reftest.list + +# seek tests +include seek/reftest.list + +# event tests +include event/reftest.list + +# General tests +== anim-discrete-values-1.svg anim-standard-ref.svg +== anim-discrete-values-2.svg anim-standard-ref.svg +== anim-discrete-values-3.svg anim-standard-ref.svg +== anim-discrete-replace-sum-1.svg anim-standard-ref.svg +== anim-discrete-sum-none-1.svg anim-standard-ref.svg +== anim-discrete-sum-sum-1.svg anim-standard-ref.svg + +== anim-discrete-to-1.svg anim-standard-ref.svg +== anim-discrete-to-2.svg anim-standard-ref.svg +== anim-discrete-to-3.svg anim-standard-ref.svg +== anim-discrete-to-4.svg anim-standard-ref.svg + +== anim-indefinite-to-1.svg anim-standard-ref.svg +== anim-indefinite-to-2.svg anim-standard-ref.svg +== anim-indefinite-to-3.svg anim-standard-ref.svg +== anim-indefinite-to-4.svg anim-standard-ref.svg + +fails == anim-fillcolor-1.svg anim-standard-ref.svg # bug 436296 +== anim-fillopacity-1none.svg anim-standard-ref.svg +== anim-fillopacity-1css.svg anim-standard-ref.svg +== anim-fillopacity-1xml.svg anim-standard-ref.svg + +fuzzy(0-1,0-3600) == anim-opacity-01.svg lime.svg + +== anim-height-done-1a.svg anim-standard-ref.svg +== anim-height-done-1b.svg anim-standard-ref.svg +== anim-height-done-2.svg lime.svg +== anim-height-interp-1.svg anim-height-interp-1-ref.svg +== anim-height-interp-2.svg anim-height-interp-2-ref.svg +== anim-height-interp-3.svg anim-height-interp-3-ref.svg +== anim-height-interp-4.svg anim-height-interp-4-ref.svg +== anim-height-interp-5.svg anim-height-interp-5-ref.svg +== anim-height-interp-6.svg anim-height-interp-6-ref.svg + +# check conditional processing +== anim-conditions-01.svg lime.svg +== anim-conditions-02.svg lime.svg + +# animate some <length> attributes: +== anim-filter-primitive-size-01.svg lime.svg +== anim-filter-size-01.svg lime.svg +== anim-length-reset-01.svg lime.svg +== anim-nonpixel-length-reset-01.svg lime.svg +== anim-use-length-01.svg lime.svg +== anim-use-length-02.svg lime.svg + +# animate some <number> attributes: +== anim-feComponentTransfer-01.svg lime.svg +== anim-feDistantLight-01.svg anim-feDistantLight-01-ref.svg +== anim-feOffset-01.svg lime.svg +== anim-feSpotLight-01.svg anim-feSpotLight-01-ref.svg +== anim-offset-01.svg lime.svg +== anim-pathLength-01.svg anim-pathLength-01-ref.svg + +# animate some <number-optional-number> attributes: +fuzzy(0-1,0-600) == anim-feGaussianBlur-01.svg lime.svg + +# animate some <integer> attributes: +== anim-feTurbulence-numOctaves-01.svg anim-feTurbulence-numOctaves-01-ref.svg + +# animate some <integer-optional-integer> attributes: +== anim-feConvolveMatrix-order-01.svg anim-feConvolveMatrix-order-01-ref.svg + +# animate some <angle> attributes: +== anim-marker-orient-01.svg lime.svg +# The test fails intermittently if this pref is enabled, see bug 1768650. +pref(gfx.webrender.svg-shapes,false) == anim-marker-orient-02.svg lime.svg + +#animate points list: +== anim-polygon-points-01.svg anim-polygon-points-01-ref.svg +== anim-polyline-points-01.svg anim-polyline-points-01-ref.svg + +# animate path data: +== anim-path-d-01.svg anim-path-d-01-ref.svg + +# animate some enumeration attributes: +== anim-feComposite-operator-01.svg lime.svg +== anim-filter-filterUnits-01.svg lime.svg + +# animate some boolean attributes: +== anim-feConvolveMatrix-preserveAlpha-01.svg lime.svg + +# animate some viewBox attributes +fuzzy-if(Android,0-4,0-1) == anim-svg-viewBox-01.svg lime.svg +== anim-svg-viewBox-02.svg lime.svg +== anim-svg-viewBox-03.svg lime.svg +== anim-view-01.svg#view lime.svg + +# animate some preserveAspectRatio attributes +== anim-feImage-preserveAspectRatio-01.svg lime.svg +== anim-svg-preserveAspectRatio-01.svg lime.svg + +# animate some string attributes: +== anim-filter-href-01.svg lime.svg +== anim-gradient-href-01.svg lime.svg +== anim-image-href-01.svg lime.svg +== anim-pattern-href-01.svg lime.svg +== anim-use-href-01.svg lime.svg + +# animate the class attribute +== anim-class-01.svg lime.svg +== anim-class-02.svg lime.svg +== anim-class-03.svg lime.svg +== anim-class-04.svg anim-class-04-ref.svg + +# animate with some paint server values +== anim-paintserver-1.svg anim-paintserver-1-ref.svg + +# animate attributes on text content children +== anim-text-attr-01.svg anim-text-attr-01-ref.svg + +# animate where the base value is non-interpolatable but will be replaced anyway +== anim-fill-overpaintserver-1.svg lime.svg +== anim-fill-overpaintserver-2.svg lime.svg + +# animate where we fallback from 'additive' animation to non-additive +== anim-additive-fallback-1.svg anim-standard-ref.svg + +== anim-remove-1.svg anim-standard-ref.svg +== anim-remove-2.svg anim-standard-ref.svg +== anim-remove-3.svg anim-standard-ref.svg +== anim-remove-4.svg anim-standard-ref.svg +== anim-remove-5.svg anim-standard-ref.svg +== anim-remove-6.svg anim-standard-ref.svg +== anim-remove-7.svg anim-standard-ref.svg +== anim-remove-8css.svg anim-standard-ref.svg +== anim-remove-8xml.svg anim-standard-ref.svg +== anim-remove-9.svg anim-standard-ref.svg +== anim-retarget-1.svg anim-standard-ref.svg +== anim-retarget-2.svg anim-standard-ref.svg +== anim-retarget-3.svg anim-standard-ref.svg +== anim-retarget-4.svg anim-standard-ref.svg +== anim-retarget-5.svg anim-standard-ref.svg +== anim-retarget-6.svg anim-standard-ref.svg +== anim-retarget-7.svg anim-standard-ref.svg +== anim-retarget-8.svg anim-standard-ref.svg + +fails == anim-strokecolor-1.svg anim-standard-ref.svg # bug 436296 +== anim-strokewidth-1xml.svg anim-standard-ref.svg + +== anim-targethref-1.svg anim-standard-ref.svg +== anim-targethref-2.svg anim-standard-ref.svg +== anim-targethref-3.svg anim-standard-ref.svg +== anim-targethref-4.svg anim-standard-ref.svg +== anim-targethref-5.svg anim-standard-ref.svg +== anim-targethref-6.svg anim-standard-ref.svg +== anim-targethref-7.svg anim-standard-ref.svg +== anim-targethref-8.svg anim-standard-ref.svg +== anim-targethref-9.svg anim-standard-ref.svg +== anim-targethref-10.svg anim-standard-ref.svg + +== anim-text-rotate-01.svg anim-text-rotate-01-ref.svg +== anim-feFuncR-tableValues-01.svg anim-feFuncR-tableValues-01-ref.svg + +skip == anim-text-x-y-dx-dy-01.svg anim-text-x-y-dx-dy-01-ref.svg # bug 579588 + +== anim-width-done-1a.svg anim-standard-ref.svg +== anim-width-done-1b.svg anim-standard-ref.svg + +== anim-x-done-1a.svg anim-standard-ref.svg +== anim-x-done-1b.svg anim-standard-ref.svg +== anim-x-interp-1.svg anim-x-interp-1-ref.svg +== anim-x-interp-2.svg anim-x-interp-2-ref.svg +== anim-x-interp-3.svg anim-x-interp-3-ref.svg +== anim-x-interp-4.svg anim-x-interp-4-ref.svg +== anim-x-interp-5.svg anim-x-interp-5-ref.svg +== anim-x-interp-6.svg anim-x-interp-6-ref.svg + +== anim-y-done-1a.svg anim-standard-ref.svg +== anim-y-done-1b.svg anim-standard-ref.svg +== anim-y-interp-1.svg anim-y-interp-1-ref.svg +== anim-y-interp-2.svg anim-y-interp-2-ref.svg +== anim-y-interp-3.svg anim-y-interp-3-ref.svg +== anim-y-interp-4.svg anim-y-interp-4-ref.svg +== anim-y-interp-5.svg anim-y-interp-5-ref.svg +== anim-y-interp-6.svg anim-y-interp-6-ref.svg + +# Test we don't rely on HasAttr to see if an attribute has been set +== anim-rect-rxry-1.svg anim-rect-rxry-1-ref.svg +fuzzy(0-1,0-350) == anim-pattern-attr-presence-01.svg anim-pattern-attr-presence-01-ref.svg +fuzzy-if(cocoaWidget&&layersGPUAccelerated,0-1,0-2) == anim-gradient-attr-presence-01.svg anim-gradient-attr-presence-01-ref.svg + +== api-sanity-1.svg lime.svg + +== freeze-applied-late-1.svg anim-standard-ref.svg +== freeze-applied-late-2.svg anim-standard-ref.svg +== freeze-applied-late-3.svg anim-standard-ref.svg +== freeze-applied-late-4.svg anim-standard-ref.svg +== frozen-to-anim-1.svg lime.svg + +== inactivate-with-active-unchanged-1.svg anim-standard-ref.svg +== inactivate-with-active-unchanged-2.svg anim-standard-ref.svg + +== mapped-attr-long-url-1.svg lime.svg +== mapped-attr-long-url-2.svg lime.svg + +== min-1.svg lime.svg + +== shadow-dom-01.html lime.svg + +== smil-transitions-interaction-1a.svg lime.svg +== smil-transitions-interaction-1b.svg lime.svg +== smil-transitions-interaction-2a.svg lime.svg +== smil-transitions-interaction-2b.svg lime.svg +== smil-transitions-interaction-3a.svg lime.svg +== smil-transitions-interaction-3b.svg lime.svg +== smil-transitions-interaction-4a.svg lime.svg +== smil-transitions-interaction-4b.svg lime.svg + +# Test filtering of excessive times +== filtered-instance-time-1.svg anim-standard-ref.svg + +# Animation tests disable reduceTimerPrecision because they use a screenshot +# mechanism that relies on performance.now(), and on low precision that can be +# finnicky. + +# Test animation using defs element +pref(privacy.reduceTimerPrecision,false) == anim-defs-gradient-property.svg lime.svg +pref(privacy.reduceTimerPrecision,false) == anim-defs-gradient-attribute.svg lime.svg +pref(privacy.reduceTimerPrecision,false) == anim-defs-fill.svg lime.svg +pref(privacy.reduceTimerPrecision,false) == anim-defs-width.svg lime.svg + +# Test animation that changes 'display' attribute +pref(privacy.reduceTimerPrecision,false) == anim-display.svg lime.svg +pref(privacy.reduceTimerPrecision,false) == anim-display-in-g-element.svg lime.svg + +# Test animation that change 'display' style value to 'none' +== anim-change-display-none-for-ancestor-elem.html lime.html +== anim-change-display-none-for-target-elem.html lime.html +== anim-change-display-none-for-dynamically-appended-elem.html lime.html +== anim-change-display-block-for-dynamically-appended-elem.html anim-standard-ref.html + +fuzzy(0-31,0-308) == anim-clipPath-viewBox.svg anim-clipPath-viewBox-ref.svg + +# Test animations for overflow. +== anim-overflow-shorthand.svg anim-overflow-shorthand-ref.svg diff --git a/layout/reftests/svg/smil/repeat/green-box-ref.svg b/layout/reftests/svg/smil/repeat/green-box-ref.svg new file mode 100644 index 0000000000..120941444a --- /dev/null +++ b/layout/reftests/svg/smil/repeat/green-box-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="green"/> +</svg> diff --git a/layout/reftests/svg/smil/repeat/indefinite-repeat-1.svg b/layout/reftests/svg/smil/repeat/indefinite-repeat-1.svg new file mode 100644 index 0000000000..5283736bdb --- /dev/null +++ b/layout/reftests/svg/smil/repeat/indefinite-repeat-1.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(5)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" to="green" dur="1s" repeatDur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/repeat/init-repeat-1-ref.svg b/layout/reftests/svg/smil/repeat/init-repeat-1-ref.svg new file mode 100644 index 0000000000..88af1199fd --- /dev/null +++ b/layout/reftests/svg/smil/repeat/init-repeat-1-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <g transform="translate(50 50)"> + <circle r="40" style="fill: yellow; stroke: black; stroke-width: 1"/> + <path d="M0 -10v20" stroke="blue"/> + <path d="M100 -10v20" stroke="blue"/> + <path d="M200 -10v20" stroke="blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/repeat/init-repeat-1.svg b/layout/reftests/svg/smil/repeat/init-repeat-1.svg new file mode 100644 index 0000000000..7481fbcba8 --- /dev/null +++ b/layout/reftests/svg/smil/repeat/init-repeat-1.svg @@ -0,0 +1,47 @@ +<!-- + The following tests an anomaly in the SMIL Animation spec. + + SMILANIM 3.6.8 says: + + Thus the strict definition of the first acceptable interval for the element + is the first interval that ends after the document begins. + + This is then demonstrated in pseudocode. + + However, it is contradicted by a statement just before the first that says: + + The element has one or more intervals defined that begin and end before the + document begins (before 0). These are filtered out of the model. + + So there is some ambiguity about intervals that end at time zero. However, the + first statement seems more authorative ("the strict definition") and the + second statement does not explicitly say that intervals that end at t=0 are + not filtered. Furthermore, the pseudocode is in agreement with the first + statement so we conclude that if an interval finishes at time zero it is not + an acceptable interval and is filtered out. + + The following animation sets up such an interval, that, based on its + repeatCount has an active duration of 1s, producing an interval of (-1s, 0s). + Therefore this interval should be filtered out and no animation effect should + be produced. The circle should remain at position 0 (the first marker). If the + interval is not correctly filtered out it will be at position 100 (the second + marker). + + We include this test as a regression test so that no one is tempted to "fix" + this behaviour. + + Note that this behaviour persists even in SMIL 3 (including the ambiguity + noted above). + See http://www.w3.org/TR/SMIL3/smil-timing.html#Timing-BeginEnd-LC-Start + --> +<svg xmlns="http://www.w3.org/2000/svg"> + <g transform="translate(50 50)"> + <circle r="40" style="fill: yellow; stroke: black; stroke-width: 1"> + <animate attributeName="cx" attributeType="XML" fill="freeze" + values="0; 200" dur="2s" begin="-1s" repeatCount="0.5"/> + </circle> + <path d="M0 -10v20" stroke="blue"/> + <path d="M100 -10v20" stroke="blue"/> + <path d="M200 -10v20" stroke="blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/repeat/reftest.list b/layout/reftests/svg/smil/repeat/reftest.list new file mode 100644 index 0000000000..9249500c7c --- /dev/null +++ b/layout/reftests/svg/smil/repeat/reftest.list @@ -0,0 +1,3 @@ +# Tests for repeat behaviour +== indefinite-repeat-1.svg green-box-ref.svg +== init-repeat-1.svg init-repeat-1-ref.svg diff --git a/layout/reftests/svg/smil/restart/green-box-ref.svg b/layout/reftests/svg/smil/restart/green-box-ref.svg new file mode 100644 index 0000000000..120941444a --- /dev/null +++ b/layout/reftests/svg/smil/restart/green-box-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="green"/> +</svg> diff --git a/layout/reftests/svg/smil/restart/reftest.list b/layout/reftests/svg/smil/restart/reftest.list new file mode 100644 index 0000000000..98ed6d4b13 --- /dev/null +++ b/layout/reftests/svg/smil/restart/reftest.list @@ -0,0 +1,8 @@ +# Tests for restart behaviour +== reset-1.svg reset-1-ref.svg +== reset-2.svg green-box-ref.svg +== reset-3.svg green-box-ref.svg +== reset-4.svg green-box-ref.svg +# reset-5.svg is no longer valid and has been removed +== reset-6.svg green-box-ref.svg +== reset-7.svg green-box-ref.svg diff --git a/layout/reftests/svg/smil/restart/reset-1-ref.svg b/layout/reftests/svg/smil/restart/reset-1-ref.svg new file mode 100644 index 0000000000..2e85bda91d --- /dev/null +++ b/layout/reftests/svg/smil/restart/reset-1-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <circle cx="150" cy="50" r="30" fill="blue"/> + <circle cx="150" cy="120" r="30" fill="blue"/> + <circle cx="150" cy="190" r="30" fill="blue"/> + <circle cx="50" cy="260" r="30" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/restart/reset-1.svg b/layout/reftests/svg/smil/restart/reset-1.svg new file mode 100644 index 0000000000..d33c3b38a1 --- /dev/null +++ b/layout/reftests/svg/smil/restart/reset-1.svg @@ -0,0 +1,84 @@ +<!-- + This tests reset behaviour (SMILANIM 3.3.7). + + Reset behaviour is invoked when an element restarts. Some instance times + (DOM calls, event-based instance times etc.) should be cleared on a reset. + Other instance times should not. This test build up the following timegraph: + + |...| |...| |...| |...| + ^ ^ ^ ^ + A B C D + + Instance times A and C are created by the begin spec and are offset time + values which should NOT be cleared on a reset, e.g. begin="1s; 3s" + + Instance times B and D are created by DOM calls and SHOULD be cleared on + a reset. + + A reset will occur when the interval beginning with begin instance time + B begins. At this time a reset is performed and only instance time D should + be cleared. That is, the animation should play THREE (3) times, not four. + + We would like to inspect the result at each of the intervals. To do this + using a reftest we duplicate the animate four-times and adjust the timing so + that at the animation sample time we are mid-way through each of the four + intervals. + + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="addInstanceTimes()"> + <script type="text/ecmascript"><![CDATA[ + function addInstanceTimes() { + document.documentElement.setCurrentTime(0); + var animate1 = document.getElementById('animate1'); + animate1.beginElementAt(10); + animate1.beginElementAt(4); + var animate2 = document.getElementById('animate2'); + animate2.beginElementAt(1.8); + animate2.beginElementAt(3.8); + var animate3 = document.getElementById('animate3'); + animate3.beginElementAt(1.2); + animate3.beginElementAt(2.4); + var animate4 = document.getElementById('animate4'); + animate4.beginElementAt(0.6); + animate4.beginElementAt(1.8); + setTimeAndSnapshot(2, true); + } + ]]></script> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Animation #1: Should be mid-way through first interval at t=2 + Set up intervals: 1-3 4-6 7-9 10-12 + --> + <circle cx="50" cy="50" r="30" fill="blue"> + <animate attributeName="cx" attributeType="XML" + to="250" begin="1s; 7s" dur="2s" fill="remove" id="animate1"/> + </circle> + <!-- + Animation #2: Should be mid-way through second interval at t=2 + Set up intervals: 0.8-1.2 1.8-2.2 2.8-3.2 3.8-4.2 + --> + <circle cx="50" cy="120" r="30" fill="blue"> + <animate attributeName="cx" attributeType="XML" + to="250" begin="0.8; 2.8" dur="0.4s" fill="remove" id="animate2"/> + </circle> + <!-- + Animation #3: Should be mid-way through third interval at t=2 + Set up intervals: 0.6-1.0 1.2-1.6 1.8-2.2 2.4-2.8 + --> + <circle cx="50" cy="190" r="30" fill="blue"> + <animate attributeName="cx" attributeType="XML" + to="250" begin="0.6; 1.8" dur="0.4s" fill="remove" id="animate3"/> + </circle> + <!-- + Animation #4: Would be mid-way through fourth interval at t=2 if the + instance time wasn't cleared + Set up intervals: 0.1-0.5 0.6-1.0 1.2-1.6 1.8-2.2 + --> + <circle cx="50" cy="260" r="30" fill="blue"> + <animate attributeName="cx" attributeType="XML" + to="250" begin="0.1; 1.2" dur="0.4s" fill="remove" id="animate4"/> + </circle> +</svg> diff --git a/layout/reftests/svg/smil/restart/reset-2.svg b/layout/reftests/svg/smil/restart/reset-2.svg new file mode 100644 index 0000000000..04b4b1bfff --- /dev/null +++ b/layout/reftests/svg/smil/restart/reset-2.svg @@ -0,0 +1,33 @@ +<!-- + We want to test that reset behaviour is actually applied when an animation + restarts and not before. + + Therefore we build up the following graph: + + |..| |..| + 1 2 3 4 + + But at t=2.5s we add a begin instance at t=3.9s. This should be cleared when + we restart at t=3s and hence the animation should no longer be playing at + t=4s. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="addInstanceTimes()"> + <script type="text/ecmascript"><![CDATA[ + function addInstanceTimes() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(2.5); + var anim = document.getElementById('anim'); + anim.beginElementAt(1.4); + setTimeAndSnapshot(4.0, true); + } + ]]></script> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="green"> + <set attributeName="fill" attributeType="CSS" + to="red" begin="1s; 3s" dur="1s" fill="remove" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/restart/reset-3.svg b/layout/reftests/svg/smil/restart/reset-3.svg new file mode 100644 index 0000000000..e4f44b29c0 --- /dev/null +++ b/layout/reftests/svg/smil/restart/reset-3.svg @@ -0,0 +1,39 @@ +<!-- + A variation on reset-2.svg. + + Perhaps surprisingly, restart behaviour only applies for the second interval + onwards. This is inconsistent but it's the spec + (see http://lists.w3.org/Archives/Public/www-smil/2009OctDec/0004.html) + + In this test we ensure that times are NOT cleared upon starting the first + interval. + + Therefore we build up the following graph: + + |..| + 1 2 + + But at t=0.5s we add a begin instance at t=1.5s. This should NOT be cleared + when we start at t=1s and hence the animation should STILL be playing + at t=2.0s. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="addInstanceTimes()"> + <script type="text/ecmascript"><![CDATA[ + function addInstanceTimes() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(0.5); + var anim = document.getElementById('anim'); + anim.beginElementAt(1); + setTimeAndSnapshot(2.0, true); + } + ]]></script> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" begin="1s" dur="1s" fill="remove" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/restart/reset-4.svg b/layout/reftests/svg/smil/restart/reset-4.svg new file mode 100644 index 0000000000..320a8245a4 --- /dev/null +++ b/layout/reftests/svg/smil/restart/reset-4.svg @@ -0,0 +1,27 @@ +<!-- + According to the SMIL pseudocode if no end attribute is specified the end of + an interval is just the active end. This, however, effectively makes + endElement useless on animations which have no end attribute specified. This + seems counter-intuitive, so this test checks that endElement still takes + effect on animation without an end attribute. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="addInstanceTimes()"> + <script type="text/ecmascript"><![CDATA[ + function addInstanceTimes() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(1.0); + var anim = document.getElementById('anim'); + anim.endElementAt(0.5); + setTimeAndSnapshot(1.5, true); + } + ]]></script> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="green"> + <set attributeName="fill" attributeType="CSS" + to="red" begin="1s" dur="1s" fill="remove" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/restart/reset-6.svg b/layout/reftests/svg/smil/restart/reset-6.svg new file mode 100644 index 0000000000..a0fe33ae2d --- /dev/null +++ b/layout/reftests/svg/smil/restart/reset-6.svg @@ -0,0 +1,58 @@ +<!-- + SMIL3 5.4.3, "Resetting element state" has: + + Any instance times associated with past Event-values, Repeat-values, + Accesskey-values or added via DOM method calls are removed from the + dependent begin and end instance times lists. In effect, all events and DOM + methods calls in the past are cleared. This does not apply to an instance + time that defines the begin of the current interval. + + In this test we have the following scenario: + + <set begin="1s" end="2s" dur="1s" ... /> + + giving us: + + |...| + 1 2 + + Then at t=1.5s we have the following DOM calls + + anim.beginElementAt(1.5); + anim.endElementAt(2); + + potentially giving us: + + |...| | | + ^ + 1 2 3 3.5 + + At t=2s we'll go to look for the next interval and construct one from 3s-3.5s. + We should apply restart behaviour at t=3s meaning we'll reset instance times + generated by DOM calls in the past however we'll keep the begin instance time + at 3s since it defines the beginning of the (now) current interval. Sticking + to the letter of the spec quoted above however, we'll end up clearing the end + instance at 3.5s. Yet in this case we should use the active end (t=4s) since + there's no end attribute specified. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="addInstanceTimes()"> + <script type="text/ecmascript"><![CDATA[ + function addInstanceTimes() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(1.5); + var anim = document.getElementById('anim'); + anim.beginElementAt(1.5); + anim.endElementAt(2); + setTimeAndSnapshot(3.7, true); + } + ]]></script> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="red"> + <set attributeName="fill" attributeType="CSS" + to="green" begin="1s" dur="1s" fill="remove" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/restart/reset-7.svg b/layout/reftests/svg/smil/restart/reset-7.svg new file mode 100644 index 0000000000..4614b81198 --- /dev/null +++ b/layout/reftests/svg/smil/restart/reset-7.svg @@ -0,0 +1,25 @@ +<!-- + A variation on reset-6.svg but this time since the animation has an end + specification the second interval SHOULD be deleted. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="addInstanceTimes()"> + <script type="text/ecmascript"><![CDATA[ + function addInstanceTimes() { + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(1.5); + var anim = document.getElementById('anim'); + anim.beginElementAt(1.5); + anim.endElementAt(2.5); + setTimeAndSnapshot(3.2, true); + } + ]]></script> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect width="100" height="100" fill="green"> + <set attributeName="fill" attributeType="CSS" + to="red" begin="1s" end="2s" dur="1s" fill="remove" id="anim"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-standard-ref.svg b/layout/reftests/svg/smil/seek/anim-standard-ref.svg new file mode 100644 index 0000000000..39f37ae6d1 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-standard-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-standard-ref.xhtml b/layout/reftests/svg/smil/seek/anim-standard-ref.xhtml new file mode 100644 index 0000000000..a50c83bd0e --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-standard-ref.xhtml @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<body> +<svg xmlns="http://www.w3.org/2000/svg" width="230px" height="230px"> + <rect x="15" y="15" width="200" height="200" fill="blue"/> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1a.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1a.svg new file mode 100644 index 0000000000..76c4f098ab --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-1a.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Pause, seek to middle of animation, and then seek to exactly 1 duration + // before the animation begins (to make sure animation effects are cleared) + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(3); + svg.setCurrentTime(0); + svg.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="100" begin="2s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1b.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1b.svg new file mode 100644 index 0000000000..76c4f098ab --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-1b.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Pause, seek to middle of animation, and then seek to exactly 1 duration + // before the animation begins (to make sure animation effects are cleared) + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(3); + svg.setCurrentTime(0); + svg.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="100" begin="2s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1c.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1c.svg new file mode 100644 index 0000000000..95fd19bb4b --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-1c.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Pause, seek to middle of animation, and then seek to the exact ending + // of the animation (to make sure animation effects are cleared) + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(3); + svg.setCurrentTime(4); + svg.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="100" begin="2s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1d.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1d.svg new file mode 100644 index 0000000000..bb0edc7474 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-1d.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Pause, seek to middle of animation, and then seek to a time after + // the animation is over (to make sure animation effects are cleared) + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(3); + svg.setCurrentTime(5); + svg.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="100" begin="2s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-1e.svg b/layout/reftests/svg/smil/seek/anim-x-seek-1e.svg new file mode 100644 index 0000000000..b8175fb4cd --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-1e.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Test a backwards seek covering many intervals + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(15); + svg.setCurrentTime(3.5); + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="15" begin="1s; 3s; 5s; 7s; 9s; 11s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-cross-container-1a.xhtml b/layout/reftests/svg/smil/seek/anim-x-seek-cross-container-1a.xhtml new file mode 100644 index 0000000000..4e7cc65222 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-cross-container-1a.xhtml @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> +<!-- + Test backwards seeking with cross-time container dependencies. + --> +<head> +<script> +function snapshot() +{ + var a = document.getElementById("svg-a"); + var b = document.getElementById("svg-b"); + a.pauseAnimations(); + b.pauseAnimations(); + a.setCurrentTime(0); + b.setCurrentTime(2); // 'b' has now begun and 'a' has a begin time of '-1s' in + // a's container time + b.setCurrentTime(1); // Perform a backwards seek--'a' should now have a begin + // time of '0s' in container time + a.setCurrentTime(1); // So seeking forward 1s should get us to the middle of + // the interval + document.documentElement.removeAttribute("class"); +} +</script> +</head> +<body onload="snapshot()"> +<svg xmlns="http://www.w3.org/2000/svg" width="230px" height="230px" id="svg-a"> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" from="0" to="30" begin="b.begin" dur="2s"/> + </rect> +</svg> +<svg xmlns="http://www.w3.org/2000/svg" width="230px" height="230px" id="svg-b"> + <set attributeName="y" to="0" begin="1s" id="b"/> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1a.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1a.svg new file mode 100644 index 0000000000..75a782ab52 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1a.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Perform a backwards seek within an interval whose begin point is + // generated by a dynamic event (to make sure such times are preserved when + // we rewind). + var svg = document.documentElement; + svg.pauseAnimations(); + document.getElementById('a').beginElementAt(2); + svg.setCurrentTime(3); + svg.setCurrentTime(2.5); + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="15" begin="indefinite" dur="2s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1b.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1b.svg new file mode 100644 index 0000000000..e17b49edf2 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1b.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that dynamic end times are preserved during a backwards seek + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(3); + document.getElementById('a').endElement(); + svg.setCurrentTime(4); + svg.setCurrentTime(3); + svg.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="100" begin="2s" dur="2s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1c.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1c.svg new file mode 100644 index 0000000000..0a015bf4b3 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1c.svg @@ -0,0 +1,31 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that dynamic times are preserved even from filtering + var svg = document.documentElement; + var a = document.getElementById('a'); + svg.pauseAnimations(); + // Generate a series of intervals with dynamic begin points + svg.setCurrentTime(1); + a.beginElement(); + svg.setCurrentTime(3); + a.beginElement(); + svg.setCurrentTime(5); + a.beginElement(); + svg.setCurrentTime(7); + a.beginElement(); + svg.setCurrentTime(9); + a.beginElement(); + svg.setCurrentTime(11); + // By now, the first interval will have been filtered but test that we have + // preserved the instance time in order to reconstruct it + svg.setCurrentTime(1.5); + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="15" begin="indefinite" dur="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1d.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1d.svg new file mode 100644 index 0000000000..e02ecd9ff9 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1d.svg @@ -0,0 +1,30 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that whilst processing past intervals reset does not clear dynamic + // instance times of future intervals + var svg = document.documentElement; + var a = document.getElementById('a'); + svg.pauseAnimations(); + // Generate a series of intervals with dynamic begin points + svg.setCurrentTime(1); + a.beginElement(); + svg.setCurrentTime(3); + a.beginElement(); + svg.setCurrentTime(5); + a.beginElement(); + svg.setCurrentTime(7); + a.beginElement(); + svg.setCurrentTime(5.5); // Backwards seek will cause us to rebuild the + // world but in the process we should not clear the + // dynamic instance times for future intervals on + // each restart + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="15" begin="indefinite" dur="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1e.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1e.svg new file mode 100644 index 0000000000..87743e9dd6 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1e.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that dynamic times are reset during a forwards seek + var svg = document.documentElement; + var a = document.getElementById('a'); + svg.pauseAnimations(); + svg.setCurrentTime(1); // First interval 1s-2s + a.beginElement(); + svg.setCurrentTime(2); + a.beginElementAt(1); // Add instance time t=3s + a.beginElementAt(3); // Add instance time t=5s -- should be cleared during + // the seek when we process the restart at t=3s + svg.setCurrentTime(5); // Hence at t=5s we should be inactive + svg.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="100" begin="indefinite" dur="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1f.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1f.svg new file mode 100644 index 0000000000..9164c2ca6a --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1f.svg @@ -0,0 +1,30 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that dynamic times are reset during a backwards seek + var svg = document.documentElement; + var a = document.getElementById('a'); + svg.pauseAnimations(); + svg.setCurrentTime(1); + a.beginElement(); // First interval: 1s-2s + a.endElementAt(1); + a.beginElementAt(2); // Second interval: 3s-indef + svg.setCurrentTime(5); + a.endElementAt(1); // Add end time at 6s + svg.setCurrentTime(4); // Perform backwards seek from 5s->4s + svg.setCurrentTime(6); // End time at 6s should have been cleared + // and we should still be active + // (See SMIL 3.0, 'Hyperlinks and timing' which has: + // Resolved end times associated with events, + // Repeat-values, Accesskey-values or added via DOM + // method calls are cleared when seeking to time + // earlier than the resolved end time. + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="15" begin="indefinite" dur="indefinite" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1g.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1g.svg new file mode 100644 index 0000000000..43a0d4e907 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1g.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that dynamic interval end times are reset during a backwards seek + var svg = document.documentElement; + var a = document.getElementById('a'); + svg.pauseAnimations(); + svg.setCurrentTime(1); + a.beginElement(); // First interval 1s-2s + a.endElementAt(1); + svg.setCurrentTime(3); + svg.setCurrentTime(1.5); // Backwards seek to 1.5s -- instance time at t=2s + // should be reset + svg.setCurrentTime(3); // Should still be active + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="15" begin="indefinite" dur="indefinite" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1h.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1h.svg new file mode 100644 index 0000000000..a00cefdf48 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1h.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that dynamic times are not prematurely reset during a forwards seek + var svg = document.documentElement; + var a = document.getElementById('a'); + svg.pauseAnimations(); + svg.setCurrentTime(1); + a.beginElement(); // Interval: 1s-3s + a.endElementAt(2); + svg.setCurrentTime(2); // Should not cause end time at t=3s to be reset + svg.setCurrentTime(3); // Should no longer be active + svg.removeAttribute("class"); + } + </script> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="100" begin="indefinite" dur="indefinite" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1i.svg b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1i.svg new file mode 100644 index 0000000000..9f19eefcd6 --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-dynamic-1i.svg @@ -0,0 +1,31 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // Check that past dynamic times are still preserved after a backwards seek. + // (The converse, that now-future dynamic times are reset during a backwards + // seek is covered by anim-x-seek-dynamic-1g.svg) + var svg = document.documentElement; + var a = document.getElementById('a'); + svg.pauseAnimations(); + // Generate a series of intervals with dynamic begin points + svg.setCurrentTime(1); + a.beginElement(); + svg.setCurrentTime(3); + a.beginElement(); + svg.setCurrentTime(5); + a.beginElement(); + svg.setCurrentTime(7); + a.beginElement(); + svg.setCurrentTime(5); // Backwards seek (1) -- at this point we'll do + // a reset but old dynamic times (e.g. t=1s) should + // be preserved + svg.setCurrentTime(1); // Backwards seek (2) + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <set attributeName="x" to="15" begin="indefinite" dur="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/anim-x-seek-negative-1a.svg b/layout/reftests/svg/smil/seek/anim-x-seek-negative-1a.svg new file mode 100644 index 0000000000..5e04739a0e --- /dev/null +++ b/layout/reftests/svg/smil/seek/anim-x-seek-negative-1a.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + class="reftest-wait" + onload="go()"> + <script type="text/javascript"> + function go() { + // A negative seek should be clamped to 0 + var svg = document.documentElement; + svg.pauseAnimations(); + svg.setCurrentTime(-1); + svg.removeAttribute("class"); + } + </script> + <rect x="100" y="15" width="200" height="200" fill="blue"> + <animate attributeName="x" from="0" to="30" begin="-1s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/seek/reftest.list b/layout/reftests/svg/smil/seek/reftest.list new file mode 100644 index 0000000000..28e055885e --- /dev/null +++ b/layout/reftests/svg/smil/seek/reftest.list @@ -0,0 +1,17 @@ +# Tests for seeking behaviour +== anim-x-seek-1a.svg anim-standard-ref.svg +== anim-x-seek-1b.svg anim-standard-ref.svg +== anim-x-seek-1c.svg anim-standard-ref.svg +== anim-x-seek-1d.svg anim-standard-ref.svg +== anim-x-seek-1e.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1a.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1b.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1c.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1d.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1e.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1f.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1g.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1h.svg anim-standard-ref.svg +== anim-x-seek-dynamic-1i.svg anim-standard-ref.svg +== anim-x-seek-negative-1a.svg anim-standard-ref.svg +== anim-x-seek-cross-container-1a.xhtml anim-standard-ref.xhtml diff --git a/layout/reftests/svg/smil/set/reftest.list b/layout/reftests/svg/smil/set/reftest.list new file mode 100644 index 0000000000..d5ec83f243 --- /dev/null +++ b/layout/reftests/svg/smil/set/reftest.list @@ -0,0 +1,2 @@ +== set-css-fontsize-freeze-1.svg set-css-fontsize-freeze-1-ref.svg +== set-css-fontsize-remove-1.svg set-css-fontsize-remove-1-ref.svg diff --git a/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1-ref.svg b/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1-ref.svg new file mode 100644 index 0000000000..086c9367a5 --- /dev/null +++ b/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1-ref.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="20px" y="20px" style="font-size: 10px">abc</text> + <text x="70px" y="20px" style="font-size: 20px">abc</text> + <text x="120px" y="20px" style="font-size: 20px">abc</text> + <text x="20px" y="70px" style="font-size: 20px">abc</text> + <text x="70px" y="70px" style="font-size: 20px">abc</text> + <text x="120px" y="70px" style="font-size: 20px">abc</text> + <text x="20px" y="120px" style="font-size: 20px">abc</text> + <text x="70px" y="120px" style="font-size: 20px">abc</text> + <text x="120px" y="120px" style="font-size: 20px">abc</text> +</svg> diff --git a/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1.svg b/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1.svg new file mode 100644 index 0000000000..f2865b1e80 --- /dev/null +++ b/layout/reftests/svg/smil/set/set-css-fontsize-freeze-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 10px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "to" : "20px", + "fill" : "freeze"}; + testAnimatedTextGrid("set", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/set/set-css-fontsize-remove-1-ref.svg b/layout/reftests/svg/smil/set/set-css-fontsize-remove-1-ref.svg new file mode 100644 index 0000000000..d8ac85218a --- /dev/null +++ b/layout/reftests/svg/smil/set/set-css-fontsize-remove-1-ref.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="20px" y="20px" style="font-size: 10px">abc</text> + <text x="70px" y="20px" style="font-size: 20px">abc</text> + <text x="120px" y="20px" style="font-size: 20px">abc</text> + <text x="20px" y="70px" style="font-size: 20px">abc</text> + <text x="70px" y="70px" style="font-size: 20px">abc</text> + <text x="120px" y="70px" style="font-size: 20px">abc</text> + <text x="20px" y="120px" style="font-size: 20px">abc</text> + <text x="70px" y="120px" style="font-size: 10px">abc</text> + <text x="120px" y="120px" style="font-size: 10px">abc</text> +</svg> diff --git a/layout/reftests/svg/smil/set/set-css-fontsize-remove-1.svg b/layout/reftests/svg/smil/set/set-css-fontsize-remove-1.svg new file mode 100644 index 0000000000..4264c07ef8 --- /dev/null +++ b/layout/reftests/svg/smil/set/set-css-fontsize-remove-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 10px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "to" : "20px", + "fill" : "remove"}; + testAnimatedTextGrid("set", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/shadow-dom-01.html b/layout/reftests/svg/smil/shadow-dom-01.html new file mode 100644 index 0000000000..01a3309340 --- /dev/null +++ b/layout/reftests/svg/smil/shadow-dom-01.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <svg width="100%" height="100%" viewBox="0 0 100 100"> + <rect width="100" height="100" fill="red"> + <set attributeName="width" to="0" begin="0s" fill="freeze"/> + </rect> + </svg> + <p></p> + <script> + let p = document.querySelector("p") + let shadow = p.attachShadow({mode: 'open'}); + shadow.appendChild(document.querySelector("svg")) + document.documentElement.removeAttribute("class"); + </script> + <style> + * { + margin: 0; + } + html { + background-color: lime; + } + </style> +</html> diff --git a/layout/reftests/svg/smil/smil-grid.js b/layout/reftests/svg/smil/smil-grid.js new file mode 100644 index 0000000000..0c8036ea27 --- /dev/null +++ b/layout/reftests/svg/smil/smil-grid.js @@ -0,0 +1,200 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ts=2 sw=2 sts=2 et: */ +/* 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/. */ + +/* Javascript library for dynamically generating a simple SVG/SMIL reftest + * with several copies of the same animation, each seeked to a different time. + */ + +// Global variables +const START_TIMES = [ "4.0s", "3.0s", "2.7s", + "2.25s", "2.01s", "1.5s", + "1.4s", "1.0s", "0.5s" ]; + +const X_POSNS = [ "20px", "70px", "120px", + "20px", "70px", "120px", + "20px", "70px", "120px" ]; + +const Y_POSNS = [ "20px", "20px", "20px", + "70px", "70px", "70px", + "120px", "120px", "120px" ]; + +const DURATION = "2s"; +const SNAPSHOT_TIME ="3"; +const SVGNS = "http://www.w3.org/2000/svg"; + +// Convenience wrapper using testAnimatedGrid to make 15pt-by-15pt rects +function testAnimatedRectGrid(animationTagName, animationAttrHashList) { + var targetTagName = "rect"; + var targetAttrHash = {"width" : "15px", + "height" : "15px" }; + testAnimatedGrid(targetTagName, targetAttrHash, + animationTagName, animationAttrHashList); +} + +// Convenience wrapper using testAnimatedGrid to make grid of text +function testAnimatedTextGrid(animationTagName, animationAttrHashList) { + var targetTagName = "text"; + var targetAttrHash = { }; + testAnimatedGrid(targetTagName, targetAttrHash, + animationTagName, animationAttrHashList); +} + +// Generates a visual grid of elements of type "targetTagName", with the +// attribute values given in targetAttrHash. Each generated element has +// exactly one child -- an animation element of type "animationTagName", with +// the attribute values given in animationAttrHash. +function testAnimatedGrid(targetTagName, targetAttrHash, + animationTagName, animationAttrHashList) { + // SANITY CHECK + const numElementsToMake = START_TIMES.length; + if (X_POSNS.length != numElementsToMake || + Y_POSNS.length != numElementsToMake) { + return; + } + + for (var i = 0; i < animationAttrHashList.length; i++) { + var animationAttrHash = animationAttrHashList[i]; + // Default to fill="freeze" so we can test the final value of the animation + if (!animationAttrHash["fill"]) { + animationAttrHash["fill"] = "freeze"; + } + } + + // Build the grid! + var svg = document.documentElement; + for (var i = 0; i < numElementsToMake; i++) { + // Build target & animation elements + var targetElem = buildElement(targetTagName, targetAttrHash); + for (var j = 0; j < animationAttrHashList.length; j++) { + var animationAttrHash = animationAttrHashList[j]; + var animElem = buildElement(animationTagName, animationAttrHash); + + // Customize them using global constant values + targetElem.setAttribute("x", X_POSNS[i]); + targetElem.setAttribute("y", Y_POSNS[i]); + animElem.setAttribute("begin", START_TIMES[i]); + animElem.setAttribute("dur", DURATION); + + // Append to target + targetElem.appendChild(animElem); + } + // Insert target into DOM + svg.appendChild(targetElem); + } + + // Take snapshot + setTimeAndSnapshot(SNAPSHOT_TIME, true); +} + +// Generates a visual grid of elements of type |graphicElemTagName|, with the +// attribute values given in |graphicElemAttrHash|. This is a variation of the +// above function. We use <defs> to include the reference elements because +// some animatable properties are only applicable to some specific elements +// (e.g. feFlood, stop), so then we apply an animation element of type +// |animationTagName|, with the attribute values given in |animationAttrHash|, +// to those specific elements. |defTagNameList| is an array of tag names. +// We will create elements hierarchically according to this array. The first tag +// in |defTagNameList| is the outer-most one in <defs>, and the last tag is the +// inner-most one and it is the target to which the animation element will be +// applied. We visualize the effect of our animation by referencing each +// animated subtree from some graphical element that we generate. The +// |graphicElemIdValueProperty| parameter provides the name of the CSS property +// that we should use to hook up this reference. +// +// e.g. if a caller passes a defTagNameList of [ "linearGradient", "stop" ], +// this function will generate the following subtree: +// <defs> +// <linearGradient id="elem0"> +// <stop> +// <animate ..../> +// </stop> +// </linearGradient> +// <linearGradient id="elem1"> +// <stop> +// <animate ..../> +// </stop> +// </linearGradient> +// +// <!--- more similar linearGradients here, up to START_TIMES.length --> +// </defs> +function testAnimatedGridWithDefs(graphicElemTagName, + graphicElemAttrHash, + graphicElemIdValuedProperty, + defTagNameList, + animationTagName, + animationAttrHashList) { + // SANITY CHECK + const numElementsToMake = START_TIMES.length; + if (X_POSNS.length != numElementsToMake || + Y_POSNS.length != numElementsToMake) { + return; + } + + if (defTagNameList.length == 0) { + return; + } + + for (var i = 0; i < animationAttrHashList.length; i++) { + var animationAttrHash = animationAttrHashList[i]; + // Default to fill="freeze" so we can test the final value of the animation + if (!animationAttrHash["fill"]) { + animationAttrHash["fill"] = "freeze"; + } + } + + var svg = document.documentElement; + + // Build defs element. + var defs = buildElement('defs'); + for (var i = 0; i < numElementsToMake; i++) { + // This will track the innermost element in our subtree: + var innerElement = defs; + + for (var defIdx = 0; defIdx < defTagNameList.length; ++defIdx) { + // Set an ID on the first level of nesting (on child of defs): + var attrs = defIdx == 0 ? { "id": "elem" + i } : {}; + + var newElem = buildElement(defTagNameList[defIdx], attrs); + innerElement.appendChild(newElem); + innerElement = newElem; + } + + for (var j = 0; j < animationAttrHashList.length; ++j) { + var animationAttrHash = animationAttrHashList[j]; + var animElem = buildElement(animationTagName, animationAttrHash); + animElem.setAttribute("begin", START_TIMES[i]); + animElem.setAttribute("dur", DURATION); + innerElement.appendChild(animElem); + } + } + svg.appendChild(defs); + + // Build the grid! + for (var i = 0; i < numElementsToMake; ++i) { + var graphicElem = buildElement(graphicElemTagName, graphicElemAttrHash); + graphicElem.setAttribute("x", X_POSNS[i]); + graphicElem.setAttribute("y", Y_POSNS[i]); + graphicElem.setAttribute("style", graphicElemIdValuedProperty + + ":url(#elem" + i + ")"); + svg.appendChild(graphicElem); + } + + // Take snapshot + setTimeAndSnapshot(SNAPSHOT_TIME, true); +} + +function buildElement(tagName, attrHash) { + var elem = document.createElementNS(SVGNS, tagName); + for (var attrName in attrHash) { + var attrValue = attrHash[attrName]; + elem.setAttribute(attrName, attrValue); + } + // If we're creating a text node, populate it with some text. + if (tagName == "text") { + elem.appendChild(document.createTextNode("abc")); + } + return elem; +} diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-1a.svg b/layout/reftests/svg/smil/smil-transitions-interaction-1a.svg new file mode 100644 index 0000000000..493ce991d8 --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-1a.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.0, true)"> + <!-- This test checks that we don't trigger a CSS transition when + SMIL animation effects are first applied. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" + style="fill: red; transition: 200s fill"> + <set attributeName="fill" to="lime" begin="1s" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-1b.svg b/layout/reftests/svg/smil/smil-transitions-interaction-1b.svg new file mode 100644 index 0000000000..ee67deb63b --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-1b.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.0, true)"> + <!-- This test checks that we don't trigger a CSS transition when + SMIL animation effects are first applied. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="red" + style="transition: 200s fill"> + <set attributeName="fill" attributeType="XML" + to="lime" begin="1s" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-2a.svg b/layout/reftests/svg/smil/smil-transitions-interaction-2a.svg new file mode 100644 index 0000000000..05a5082998 --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-2a.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.0, true)"> + <!-- This test checks that we don't trigger a CSS transition after + SMIL animation effects are applied. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" + style="fill: red; transition: 1s fill"> + <set attributeName="fill" to="lime" begin="1s" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-2b.svg b/layout/reftests/svg/smil/smil-transitions-interaction-2b.svg new file mode 100644 index 0000000000..8742b208a3 --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-2b.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.0, true)"> + <!-- This test checks that we don't trigger a CSS transition after + SMIL animation effects are applied. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="red" + style="transition: 1s fill"> + <set attributeName="fill" attributeType="XML" + to="lime" begin="1s" dur="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-3a.svg b/layout/reftests/svg/smil/smil-transitions-interaction-3a.svg new file mode 100644 index 0000000000..64077c9076 --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-3a.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.0); + setTimeAndSnapshot(2.0, false)"> + <!-- This test checks that we don't trigger a CSS transition when + SMIL animation effects are removed. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" + style="fill: lime; transition: 200s fill"> + <set attributeName="fill" to="red" begin="1s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-3b.svg b/layout/reftests/svg/smil/smil-transitions-interaction-3b.svg new file mode 100644 index 0000000000..331fc6f407 --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-3b.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.0); + setTimeAndSnapshot(2.0, false)"> + <!-- This test checks that we don't trigger a CSS transition when + SMIL animation effects are removed. --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" fill="lime" + style="transition: 200s fill"> + <set attributeName="fill" attributeType="XML" + to="red" begin="1s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-4a.svg b/layout/reftests/svg/smil/smil-transitions-interaction-4a.svg new file mode 100644 index 0000000000..2e967ccf0d --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-4a.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.0); + setTimeAndSnapshot(1.5, false)"> + <!-- This test checks that we don't trigger a CSS transition during + interpolation from-to animation. We seek to 1.5s, halfway through the + animation, when we're *just* to the point where the lime stroke is wide + enough to cover up the red rect behind it. If a transition were to + start, it would slow us down and allow some red to show. + --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" style="fill: lime"/> + <rect width="30" height="30" style="fill: red"/> + <rect width="20" height="20" + style="fill: lime; stroke: lime; transition: 200s stroke-width"> + <animate attributeName="stroke-width" from="10px" to="30px" + begin="1s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-transitions-interaction-4b.svg b/layout/reftests/svg/smil/smil-transitions-interaction-4b.svg new file mode 100644 index 0000000000..8033ff7cd3 --- /dev/null +++ b/layout/reftests/svg/smil/smil-transitions-interaction-4b.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.0); + setTimeAndSnapshot(1.5, false)"> + <!-- This test checks that we don't trigger a CSS transition during + interpolation from-to animation. We seek to 1.5s, halfway through the + animation, when we're *just* to the point where the lime stroke is wide + enough to cover up the red rect behind it. If a transition were to + start, it would slow us down and allow some red to show. + --> + <script xlink:href="smil-util.js" type="text/javascript"/> + <rect width="100%" height="100%" style="fill: lime"/> + <rect width="30" height="30" style="fill: red"/> + <rect width="20" height="20" + style="fill: lime; stroke: lime; transition: 200s stroke-width"> + <animate attributeName="stroke-width" attributeType="XML" + from="10px" to="30px" begin="1s" dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/smil-util.js b/layout/reftests/svg/smil/smil-util.js new file mode 100644 index 0000000000..18573c4b64 --- /dev/null +++ b/layout/reftests/svg/smil/smil-util.js @@ -0,0 +1,26 @@ +// Seeks to the given time and then removes the SVG document's class to trigger +// a reftest snapshot. If pauseFlag is true, animations will be paused. +function setTimeAndSnapshot(timeInSeconds, pauseFlag) { + var svg = document.documentElement; + if (pauseFlag) { + svg.pauseAnimations(); + } + svg.setCurrentTime(timeInSeconds); + svg.removeAttribute("class"); +} + +// Seeks to the given time and then removes the SVG document's class to trigger +// a reftest snapshot after waiting at least minWaitTimeInSeconds. +function setTimeAndWaitToSnapshot(seekTimeInSeconds, minWaitTimeInSeconds) { + var svg = document.documentElement; + svg.setCurrentTime(seekTimeInSeconds); + var timeToTakeSnapshot = + window.performance.now() + minWaitTimeInSeconds * 1000; + requestAnimationFrame(function takeSnapshot(currentTime) { + if (currentTime > timeToTakeSnapshot) { + svg.removeAttribute("class"); + } else { + requestAnimationFrame(takeSnapshot); + } + }); +} diff --git a/layout/reftests/svg/smil/sort/reftest.list b/layout/reftests/svg/smil/sort/reftest.list new file mode 100644 index 0000000000..9303754773 --- /dev/null +++ b/layout/reftests/svg/smil/sort/reftest.list @@ -0,0 +1,12 @@ +# Tests related to SVG Animation (using SMIL), focusing on animation-sorting +# to see which animation takes precedence (out of multiple animations on the +# same attribute) + +== sort-startAfter-1.svg sort-startAfter-1-ref.svg +== sort-startAfter-2.svg sort-startAfter-2-ref.svg +== sort-startAfter-3.svg sort-startAfter-3-ref.svg +== sort-startSame-1a.svg sort-startSame-1-ref.svg +== sort-startSame-1b.svg sort-startSame-1-ref.svg +== sort-startSame-2a.svg sort-startSame-2-ref.svg +== sort-startSame-2b.svg sort-startSame-2-ref.svg +random == sort-additive-1.svg sort-additive-1-ref.svg # bug 547801 diff --git a/layout/reftests/svg/smil/sort/sort-additive-1-ref.svg b/layout/reftests/svg/smil/sort/sort-additive-1-ref.svg new file mode 100644 index 0000000000..755c5cf02d --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-additive-1-ref.svg @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- start line --> + <line x1="5" x2="5" y1="0" y2="330" stroke="grey" stroke-width="2" + stroke-dasharray="5,5"/> + <!-- non-additive line --> + <line x1="105" x2="105" y1="0" y2="330" stroke="grey" stroke-width="2" + stroke-dasharray="5,5"/> + <!-- additive line --> + <line x1="205" x2="205" y1="0" y2="330" stroke="grey" stroke-width="2" + stroke-dasharray="5,5"/> + <g transform="translate(5, 5)"> + <rect style="stroke: black; fill: lightskyblue" x="100" y="0" width="30" + height="30"/> + </g> + <g transform="translate(5, 45)"> + <rect style="stroke: black; fill: lightskyblue" x="200" y="0" width="30" + height="30"/> + </g> + <g transform="translate(5, 85)"> + <rect style="stroke: black; fill: lightskyblue" x="100" y="0" width="30" + height="30"/> + </g> + <g transform="translate(5, 125)"> + <rect style="stroke: black; fill: lightskyblue" x="200" y="0" width="30" + height="30"/> + </g> + <g transform="translate(5, 165)"> + <rect style="stroke: black; fill: lightskyblue" x="100" y="0" width="30" + height="30"/> + </g> + <g transform="translate(5, 205)"> + <rect style="stroke: black; fill: lightskyblue" x="200" y="0" width="30" + height="30"/> + </g> + <g transform="translate(5, 245)"> + <rect style="stroke: black; fill: lightskyblue" x="100" y="0" width="30" + height="30"/> + </g> + <g transform="translate(5, 285)"> + <rect style="stroke: black; fill: lightskyblue" x="200" y="0" width="30" + height="30"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-additive-1.svg b/layout/reftests/svg/smil/sort/sort-additive-1.svg new file mode 100644 index 0000000000..e60ff0a15f --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-additive-1.svg @@ -0,0 +1,116 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script type="text/ecmascript"><![CDATA[ + function swapAnimations() { + var high = document.getElementById("high"); + high.parentNode.insertBefore(high, null); + + var low = document.getElementById("low"); + low.parentNode.insertBefore(low, low.parentNode.firstChild); + + setTimeAndSnapshot(103.1, true); + } + window.addEventListener("MozReftestInvalidate", swapAnimations, false); + ]]></script> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- start line --> + <line x1="5" x2="5" y1="0" y2="330" stroke="grey" stroke-width="2" + stroke-dasharray="5,5"/> + <!-- non-additive line --> + <line x1="105" x2="105" y1="0" y2="330" stroke="grey" stroke-width="2" + stroke-dasharray="5,5"/> + <!-- additive line --> + <line x1="205" x2="205" y1="0" y2="330" stroke="grey" stroke-width="2" + stroke-dasharray="5,5"/> + <!-- Not additive group --> + <!-- additive behaviour defaults to replace so this shouldn't add --> + <g transform="translate(5, 5)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + </rect> + </g> + <!-- Additive group --> + <!-- We only need to specify additive behaviour on the second animation as + it will be higher in the animation sandwich --> + <g transform="translate(5, 45)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze" + additive="sum"/> + </rect> + </g> + <!-- Not additive group --> + <!-- Specifying additive behaviour on the first animation has no effect + as it is lower in the animation sandwich (begin times are the same + so the order in the document takes precedence). --> + <g transform="translate(5, 85)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze" + additive="sum"/> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + </rect> + </g> + <!-- Additive group --> + <!-- The first animation should be composed second as it has a later begin + time so its additive attribute should apply even though it appears + first in the document --> + <g transform="translate(5, 125)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100.001s" dur="3s" fill="freeze" + additive="sum"/> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + </rect> + </g> + <!-- Not additive group --> + <!-- The first animation overrides the second animation because of its + later begin time. --> + <g transform="translate(5, 165)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100.001s" dur="3s" fill="freeze"/> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze" + additive="sum"/> + </rect> + </g> + <!-- Additive group --> + <!-- Even though additive is replace, by animation is always additive --> + <g transform="translate(5, 205)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + <animate attributeName="x" by="100" dur="3s" begin="100s" fill="freeze" + additive="replace"/> + </rect> + </g> + <!-- Not additive group --> + <!-- This begins as additive, but after the document loads the two animations + will be swapped giving them the opposite priority and making this not + additive. --> + <g transform="translate(5, 245)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze" + additive="sum" id="low"/> + </rect> + </g> + <!-- Additive group --> + <!-- This is the inverse of the above. The animations will have their + positions in the document swapped effectively making this not additive. + --> + <g transform="translate(5, 285)"> + <rect style="stroke: black; fill: lightskyblue" x="0" y="0" width="30" + height="30"> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze" + additive="sum" id="high"/> + <animate attributeName="x" from="0" to="100" begin="100s" dur="3s" fill="freeze"/> + </rect> + </g> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-1-ref.svg b/layout/reftests/svg/smil/sort/sort-startAfter-1-ref.svg new file mode 100644 index 0000000000..e0d50579b0 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startAfter-1-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="125" y="0" width="100" height="100" fill="blue"/> + <rect x="125" y="200" width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-1.svg b/layout/reftests/svg/smil/sort/sort-startAfter-1.svg new file mode 100644 index 0000000000..43b6ed9e13 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startAfter-1.svg @@ -0,0 +1,16 @@ +<!-- If two conflicting animations start at diffent times, the one starting + later should win. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.0, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect x="0" y="0" width="100" height="100" fill="blue"> + <animate attributeName="x" from="100" to="200" begin="0.5s" dur="2s"/> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/> + </rect> + <rect x="0" y="200" width="100" height="100" fill="blue"> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/> + <animate attributeName="x" from="100" to="200" begin="0.5s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-2-ref.svg b/layout/reftests/svg/smil/sort/sort-startAfter-2-ref.svg new file mode 100644 index 0000000000..aacb1998e4 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startAfter-2-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="150" y="0" width="100" height="100" fill="blue"/> + <rect x="150" y="200" width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-2.svg b/layout/reftests/svg/smil/sort/sort-startAfter-2.svg new file mode 100644 index 0000000000..3d82a59cc2 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startAfter-2.svg @@ -0,0 +1,18 @@ +<!-- If two conflicting animations start at diffent times, the one starting + later should win. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.5, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect x="0" y="0" width="100" height="100" fill="blue"> + <animate attributeName="x" from="100" to="200" begin="0.5s" dur="2s"/> + <animate attributeName="x" from="300" to="400" begin="0s" dur="1s" + fill="freeze"/> + </rect> + <rect x="0" y="200" width="100" height="100" fill="blue"> + <animate attributeName="x" from="300" to="400" begin="0s" dur="1s" + fill="freeze"/> + <animate attributeName="x" from="100" to="200" begin="0.5s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-3-ref.svg b/layout/reftests/svg/smil/sort/sort-startAfter-3-ref.svg new file mode 100644 index 0000000000..a20bbc496e --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startAfter-3-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="200" y="0" width="100" height="100" fill="blue"/> + <rect x="200" y="200" width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startAfter-3.svg b/layout/reftests/svg/smil/sort/sort-startAfter-3.svg new file mode 100644 index 0000000000..2fb71aab33 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startAfter-3.svg @@ -0,0 +1,18 @@ +<!-- If two conflicting animations start at diffent times, the one starting + later (including its lasting "freeze" effect) should win. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.5, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect x="0" y="0" width="100" height="100" fill="blue"> + <animate attributeName="x" from="100" to="200" begin="0.25s" dur="1s" + fill="freeze"/> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/> + </rect> + <rect x="0" y="200" width="100" height="100" fill="blue"> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/> + <animate attributeName="x" from="100" to="200" begin="0.25s" dur="1s" + fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startSame-1-ref.svg b/layout/reftests/svg/smil/sort/sort-startSame-1-ref.svg new file mode 100644 index 0000000000..5c0bf560e3 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startSame-1-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="350" y="0" width="100" height="100" fill="blue"/> + <rect x="150" y="200" width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startSame-1a.svg b/layout/reftests/svg/smil/sort/sort-startSame-1a.svg new file mode 100644 index 0000000000..af503df445 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startSame-1a.svg @@ -0,0 +1,16 @@ +<!-- If two conflicting animations start at same time, the one appearing + later in the document should win. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.0, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect x="0" y="0" width="100" height="100" fill="blue"> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/> + </rect> + <rect x="0" y="200" width="100" height="100" fill="blue"> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startSame-1b.svg b/layout/reftests/svg/smil/sort/sort-startSame-1b.svg new file mode 100644 index 0000000000..7e99e50865 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startSame-1b.svg @@ -0,0 +1,31 @@ +<!-- If two conflicting animations start at same time, and if we swap their + positions, the one that ends up later in the document should win. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + + <script><![CDATA[ + function go() { + // Move "a" and "b" to both be their parents' last child + var a = document.getElementById("a"); + a.parentNode.insertBefore(a, null); + + var b = document.getElementById("b"); + b.parentNode.insertBefore(b, null); + + setTimeAndSnapshot(1.0, true) + } + document.addEventListener("MozReftestInvalidate", go, false); + setTimeout(go, 4000); // fallback for running outside reftest + ]]></script> + + <rect x="0" y="0" width="100" height="100" fill="blue"> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s" id="a"/> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/> + </rect> + <rect x="0" y="200" width="100" height="100" fill="blue"> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s" id="b"/> + <animate attributeName="x" from="300" to="400" begin="0s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startSame-2-ref.svg b/layout/reftests/svg/smil/sort/sort-startSame-2-ref.svg new file mode 100644 index 0000000000..77e5427399 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startSame-2-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="400" y="0" width="100" height="100" fill="blue"/> + <rect x="175" y="200" width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startSame-2a.svg b/layout/reftests/svg/smil/sort/sort-startSame-2a.svg new file mode 100644 index 0000000000..b2404be941 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startSame-2a.svg @@ -0,0 +1,18 @@ +<!-- If two conflicting animations start at same time, the one appearing + later in the document should win (including its freeze effects). --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.5, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <rect x="0" y="0" width="100" height="100" fill="blue"> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/> + <animate attributeName="x" from="300" to="400" begin="0s" dur="1s" + fill="freeze"/> + </rect> + <rect x="0" y="200" width="100" height="100" fill="blue"> + <animate attributeName="x" from="300" to="400" begin="0s" dur="1s" + fill="freeze"/> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/sort/sort-startSame-2b.svg b/layout/reftests/svg/smil/sort/sort-startSame-2b.svg new file mode 100644 index 0000000000..f028b35033 --- /dev/null +++ b/layout/reftests/svg/smil/sort/sort-startSame-2b.svg @@ -0,0 +1,33 @@ +<!-- If two conflicting animations start at same time, and if we swap their + positions, the one that ends up later in the document should win + (including its freeze effects). --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeout('go()', 0)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + + <script><![CDATA[ + function go() { + // Move "a" and "b" to both be their parents' last child + var a = document.getElementById("a"); + a.parentNode.insertBefore(a, null); + + var b = document.getElementById("b"); + b.parentNode.insertBefore(b, null); + + setTimeAndSnapshot(1.5, true) + } + ]]></script> + + <rect x="0" y="0" width="100" height="100" fill="blue"> + <animate attributeName="x" from="300" to="400" begin="0s" dur="1s" id="a" + fill="freeze"/> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s"/> + </rect> + <rect x="0" y="200" width="100" height="100" fill="blue"> + <animate attributeName="x" from="100" to="200" begin="0s" dur="2s" id="b"/> + <animate attributeName="x" from="300" to="400" begin="0s" dur="1s" + fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-by-ident-hex.svg new file mode 100644 index 0000000000..acda8e0c50 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-1-by-ident-hex.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: indigo; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "by" : "#AAF573" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-by-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-hex-hex.svg new file mode 100644 index 0000000000..42f4b65b6f --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-hex-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: indigo; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "from" : "#4B0082", + "by" : "#AAF573" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-ident-hex.svg new file mode 100644 index 0000000000..8b480cd864 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-by-ident-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: indigo; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "from" : "indigo", + "by" : "#AAF573" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-to-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-hex-hex.svg new file mode 100644 index 0000000000..f15b4a3c22 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-hex-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: indigo; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "from" : "#4B0082", + "to" : "#F5F5F5" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-from-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-ident-ident.svg new file mode 100644 index 0000000000..553b95f12f --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-1-from-to-ident-ident.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: indigo; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "from" : "indigo", + "to" : "whitesmoke" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-hex.svg new file mode 100644 index 0000000000..727107841f --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-hex.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: indigo; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "to" : "#F5F5F5" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-ident.svg new file mode 100644 index 0000000000..9702370931 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-1-to-ident-ident.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: indigo; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "to" : "whitesmoke" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-2-paced-rgb.svg b/layout/reftests/svg/smil/style/anim-css-color-2-paced-rgb.svg new file mode 100644 index 0000000000..c44f16b7c5 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-2-paced-rgb.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { color: yellow; fill: currentColor; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "calcMode" : "paced", + "values" : "rgb(0, 10, 20); " + + "rgb(20, 50, 80); " + + "rgb(140, 130, 120)" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-3-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-3-by-ident-ident.svg new file mode 100644 index 0000000000..1c6d06895c --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-3-by-ident-ident.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) --> + <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). --> + <style> + rect { color: DarkOliveGreen; fill: currentColor; stroke: Black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "by" : "DarkSlateGray" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-3-from-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-ident-ident.svg new file mode 100644 index 0000000000..cd34fc58df --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-ident-ident.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) --> + <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). --> + <style> + rect { color: DarkOliveGreen; fill: currentColor; stroke: Black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "from" : "DarkOliveGreen", + "by" : "DarkSlateGray" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-color-3-from-by-rgb-ident.svg b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-rgb-ident.svg new file mode 100644 index 0000000000..163c392e00 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-color-3-from-by-rgb-ident.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) --> + <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). --> + <style> + rect { color: DarkOliveGreen; fill: currentColor; stroke: Black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "color", + "from" : "rgb(85, 107, 47)", + "by" : "DarkSlateGray" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-curcol.svg new file mode 100644 index 0000000000..b30fa4963f --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-curcol.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; color: #AAF573} + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "by" : "currentColor" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-hex.svg new file mode 100644 index 0000000000..cdd1dd1d52 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-by-ident-hex.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "by" : "#AAF573" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-curcol-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-curcol-hex.svg new file mode 100644 index 0000000000..e2832b174a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-curcol-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; color: Indigo } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "currentColor", + "by" : "#AAF573" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-curcol.svg new file mode 100644 index 0000000000..fca9cc1d7a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-curcol.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; color: #AAF573 } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "#4B0082", + "by" : "currentColor" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-hex.svg new file mode 100644 index 0000000000..61dc61da05 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-hex-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "#4B0082", + "by" : "#AAF573" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-ident-hex.svg new file mode 100644 index 0000000000..a6fe27433a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-by-ident-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "indigo", + "by" : "#AAF573" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-curcol-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-curcol-hex.svg new file mode 100644 index 0000000000..86cc1fedd7 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-curcol-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; color: Indigo; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "currentColor", + "to" : "#F5F5F5" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-curcol.svg new file mode 100644 index 0000000000..6cb3da74fd --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-curcol.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; color: Whitesmoke; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "#4B0082", + "to" : "currentColor" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-hex.svg new file mode 100644 index 0000000000..f5f8114da9 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-hex-hex.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "#4B0082", + "to" : "#F5F5F5" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-ident-ident.svg new file mode 100644 index 0000000000..e1b968d35a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-from-to-ident-ident.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "indigo", + "to" : "whitesmoke" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-ref.svg new file mode 100644 index 0000000000..767407048d --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill: #4B0082"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill: #4B0082"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill: #652593"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill: #8B5CAD"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill: #9F79BB"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill: #CBB8D8"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill: #D3C4DE"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill: #F5F5F5"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill: #F5F5F5"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-curcol.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-curcol.svg new file mode 100644 index 0000000000..65a6812694 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-curcol.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; color: Whitesmoke; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "to" : "currentColor" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-hex.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-hex.svg new file mode 100644 index 0000000000..73540fcc49 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-hex.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "to" : "#F5F5F5" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-ident.svg new file mode 100644 index 0000000000..9b1010426a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-1-to-ident-ident.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: Indigo; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "to" : "whitesmoke" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-2-paced-rgb.svg b/layout/reftests/svg/smil/style/anim-css-fill-2-paced-rgb.svg new file mode 100644 index 0000000000..4c1e16c53f --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-2-paced-rgb.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: yellow; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "calcMode" : "paced", + "values" : "rgb(0, 10, 20); " + + "rgb(20, 50, 80); " + + "rgb(140, 130, 120)" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-2-ref.svg new file mode 100644 index 0000000000..1058125a66 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-2-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill: yellow"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill: rgb(0, 10, 20)"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill: rgb(9, 28, 47)"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill: rgb(28, 55, 83)"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill: rgb(49, 69, 90)"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill: rgb(95, 100, 105)"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill: rgb(104, 106, 108)"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill: rgb(140, 130, 120)"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill: rgb(140, 130, 120)"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-by-ident-ident.svg new file mode 100644 index 0000000000..16fbbc062d --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-3-by-ident-ident.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) --> + <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). --> + <style> + rect { fill: DarkOliveGreen; stroke: Black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "by" : "DarkSlateGray" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-ident-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-ident-ident.svg new file mode 100644 index 0000000000..a2bdf8e8fc --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-ident-ident.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) --> + <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). --> + <style> + rect { fill: DarkOliveGreen; stroke: Black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "DarkOliveGreen", + "by" : "DarkSlateGray" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-rgb-ident.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-rgb-ident.svg new file mode 100644 index 0000000000..b2b8b689ea --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-3-from-by-rgb-ident.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a test with a named color (DarkSlateGray == rgb(47, 79, 79)) --> + <!-- being added to another color (DarkOliveGreen == rbg(85, 107, 47)). --> + <style> + rect { fill: DarkOliveGreen; stroke: Black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "rgb(85, 107, 47)", + "by" : "DarkSlateGray" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-3-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-3-ref.svg new file mode 100644 index 0000000000..8a14da61ea --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-3-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill: rgb(85, 107, 47)"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill: rgb(85, 107, 47)"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill: rgb(92, 119, 59)"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill: rgb(103, 137, 77)"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill: rgb(108, 146, 86)"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill: rgb(120, 166, 106)"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill: rgb(123, 170, 110)"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill: rgb(132, 186, 126)"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill: rgb(132, 186, 126)"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-by.svg b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-by.svg new file mode 100644 index 0000000000..d65f963b33 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-by.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a series of snapshots of a color animation, starting at --> + <!-- YellowGreen (#9ACD32 == rgb(154,205,50)) and increasing each --> + <!-- channel beyond its maximum. (which should clamp it to 255) --> + <style> + rect { fill: yellowgreen; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "by" : "rgb(200, 100, 250)" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-from-by.svg b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-from-by.svg new file mode 100644 index 0000000000..df06aea2de --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-from-by.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a series of snapshots of a color animation, starting at --> + <!-- YellowGreen (#9ACD32 == rgb(154,205,50)) and increasing each --> + <!-- channel beyond its maximum. (which should clamp it to 255) --> + <style> + rect { fill: yellowgreen; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill", + "from" : "yellowgreen", + "by" : "rgb(200, 100, 250)" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-ref.svg new file mode 100644 index 0000000000..917bfef9f5 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fill-overflow-1-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill: yellowgreen"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill: yellowgreen"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill: rgb(184, 220, 88)"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill: rgb(229, 243, 144)"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill: rgb(253, 255, 174)"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill: rgb(255, 255, 238)"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill: rgb(255, 255, 250)"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill: rgb(255, 255, 255)"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill: rgb(255, 255, 255)"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-by.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-by.svg new file mode 100644 index 0000000000..fc3f4b042e --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-by.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: blue; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill-opacity", + "by" : "-1" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-by.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-by.svg new file mode 100644 index 0000000000..39e03b8db2 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-by.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: blue; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill-opacity", + "from" : "1", + "by" : "-1" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-to.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-to.svg new file mode 100644 index 0000000000..2ec29db9b2 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-from-to.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: blue; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill-opacity", + "from" : "1", + "to" : "0" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-ref.svg new file mode 100644 index 0000000000..f35de241c1 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { fill: blue; stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill-opacity: 1"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill-opacity: 1"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill-opacity: 0.85"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.625"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.505"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.25"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.2"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.0"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.0"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-1-to.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-to.svg new file mode 100644 index 0000000000..110cbd6d82 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-1-to.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: blue; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill-opacity", + "to" : "0" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-2-paced.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-paced.svg new file mode 100644 index 0000000000..61ac49a8d1 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-paced.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: blue; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "fill-opacity", + "calcMode" : "paced", + "values" : "0.6;0.1;0.95;0.3" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-ref.svg new file mode 100644 index 0000000000..c30942bcf6 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-2-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { fill: blue; stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill-opacity: 1"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill-opacity: 0.6"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill-opacity: 0.3"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.35"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.59"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.8"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.7"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.3"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.3"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-big.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-big.svg new file mode 100644 index 0000000000..0faec1156b --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-big.svg @@ -0,0 +1,27 @@ +<!-- + This testcase checks that we don't clamp negative opacity values to their + valid range [0,1] until *after* we've done animation & interpolation. + If we clamped intermediate results too early (e.g. after parsing, during + interpolation, or right after we add the first animation's interpolated + value), we'd end up with the wrong intermediate opacity values here. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: blue; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHashA = { "attributeName" : "fill-opacity", + "from" : "-0.4", + "by" : "1.2" }; + var animAttrHashB = { "attributeName" : "fill-opacity", + "by" : "0.2" }; + testAnimatedRectGrid("animate", [animAttrHashA, animAttrHashB]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-small.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-small.svg new file mode 100644 index 0000000000..d7ff87e20a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-clamp-small.svg @@ -0,0 +1,27 @@ +<!-- + This testcase checks that we don't clamp negative opacity values to their + valid range [0,1] until *after* we've done animation & interpolation. + If we clamped intermediate results too early (e.g. after parsing, during + interpolation, or right after we add the first animation's interpolated + value), we'd end up with the wrong intermediate opacity values here. + --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { fill: blue; stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHashA = { "attributeName" : "fill-opacity", + "from" : "-0.4", + "by" : "0.6" }; + var animAttrHashB = { "attributeName" : "fill-opacity", + "by" : "0.4" }; + testAnimatedRectGrid("animate", [animAttrHashA, animAttrHashB]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fillopacity-3-ref.svg b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-ref.svg new file mode 100644 index 0000000000..bc089e43c4 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fillopacity-3-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { fill: blue; stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill-opacity: 1"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill-opacity: 0"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill-opacity: 0"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill-opacity: 0"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.095"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill-opacity: 0.35"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.4"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.6"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill-opacity: 0.6"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-from-by.svg b/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-from-by.svg new file mode 100644 index 0000000000..1def47fafd --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-from-by.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a series of snapshots of a color animation, starting at --> + <!-- YellowGreen (#9ACD32 == rgb(154,205,50)) and increasing each --> + <!-- channel beyond its maximum. (which should clamp it to 255) --> + <style> + feFlood { flood-color: yellowgreen; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "flood-color", + "from" : "yellowgreen", + "by" : "rgb(200, 100, 250)" }; + var graphicElemTag = "rect"; + var graphicElemAttrHash = { "width" : "15px", + "height" : "15px" }; + testAnimatedGridWithDefs(graphicElemTag, graphicElemAttrHash, "filter", + [ "filter", "feFlood" ], + "animate", [ animAttrHash ]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-ref.svg new file mode 100644 index 0000000000..27d0bcd56e --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-floodcolor-overflow-1-ref.svg @@ -0,0 +1,40 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <filter id="f0"><feFlood flood-color="yellowgreen" /></filter> + <filter id="f1"><feFlood flood-color="yellowgreen" /></filter> + <filter id="f2"><feFlood flood-color="rgb(184, 220, 88)" /></filter> + <filter id="f3"><feFlood flood-color="rgb(229, 243, 144)" /></filter> + <filter id="f4"><feFlood flood-color="rgb(253, 255, 174)" /></filter> + <filter id="f5"><feFlood flood-color="rgb(255, 255, 238)" /></filter> + <filter id="f6"><feFlood flood-color="rgb(255, 255, 250)" /></filter> + <filter id="f7"><feFlood flood-color="rgb(255, 255, 255)" /></filter> + <filter id="f8"><feFlood flood-color="rgb(255, 255, 255)" /></filter> + </defs> + <rect x="20px" y="20px" width="15px" height="15px" + style="filter:url(#f0)"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="filter:url(#f1)"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="filter:url(#f2)"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="filter:url(#f3)"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="filter:url(#f4)"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="filter:url(#f5)"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="filter:url(#f6)"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="filter:url(#f7)"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="filter:url(#f8)"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-font-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-font-1-ref.svg new file mode 100644 index 0000000000..de028ec6be --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-font-1-ref.svg @@ -0,0 +1,76 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="300px" height="400px"> + + <!-- 'inherit' to 'caption' --> + <text x="0px" y="50px" style="font: inherit">abc + </text> + <text x="50px" y="50px" style="font: inherit">abc + </text> + <text x="100px" y="50px" style="font: inherit">abc + </text> + <text x="150px" y="50px" style="font: caption">abc + </text> + <text x="200px" y="50px" style="font: caption">abc + </text> + + <!-- 'caption' to 'inherit' --> + <text x="0px" y="100px" style="font: inherit">abc + </text> + <text x="50px" y="100px" style="font: caption">abc + </text> + <text x="100px" y="100px" style="font: caption">abc + </text> + <text x="150px" y="100px" style="font: inherit">abc + </text> + <text x="200px" y="100px" style="font: inherit">abc + </text> + + <!-- 'caption' to 'icon' --> + <text x="0px" y="150px" style="font: inherit">abc + </text> + <text x="50px" y="150px" style="font: caption">abc + </text> + <text x="100px" y="150px" style="font: caption">abc + </text> + <text x="150px" y="150px" style="font: icon">abc + </text> + <text x="200px" y="150px" style="font: icon">abc + </text> + + <!-- 'caption' to 'menu' --> + <text x="0px" y="200px" style="font: inherit">abc + </text> + <text x="50px" y="200px" style="font: caption">abc + </text> + <text x="100px" y="200px" style="font: caption">abc + </text> + <text x="150px" y="200px" style="font: menu">abc + </text> + <text x="200px" y="200px" style="font: menu">abc + </text> + + <!-- 'caption' to 'message-box' --> + <text x="0px" y="250px" style="font: inherit">abc + </text> + <text x="50px" y="250px" style="font: caption">abc + </text> + <text x="100px" y="250px" style="font: caption">abc + </text> + <text x="150px" y="250px" style="font: message-box">abc + </text> + <text x="200px" y="250px" style="font: message-box">abc + </text> + + <!-- 'caption' to 'small-caption' --> + <text x="0px" y="300px" style="font: inherit">abc + </text> + <text x="50px" y="300px" style="font: caption">abc + </text> + <text x="100px" y="300px" style="font: caption">abc + </text> + <text x="150px" y="300px" style="font: small-caption">abc + </text> + <text x="200px" y="300px" style="font: small-caption">abc + </text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-font-1.svg b/layout/reftests/svg/smil/style/anim-css-font-1.svg new file mode 100644 index 0000000000..0cd69258fd --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-font-1.svg @@ -0,0 +1,144 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="300px" height="400px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + requestAnimationFrame(() => { setTimeAndSnapshot(3.0, true) }); + } + </script> + + <!-- 'inherit' to 'caption' --> + <text x="0px" y="50px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="inherit" to="caption" begin="4.0s" dur="2s"/> + </text> + <text x="50px" y="50px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="inherit" to="caption" begin="3.0s" dur="2s"/> + </text> + <text x="100px" y="50px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="inherit" to="caption" begin="2.01s" dur="2s"/> + </text> + <text x="150px" y="50px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="inherit" to="caption" begin="2.0s" dur="2s"/> + </text> + <text x="200px" y="50px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="inherit" to="caption" begin="1.0s" dur="2s"/> + </text> + + <!-- 'caption' to 'inherit' --> + <text x="0px" y="100px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="inherit" begin="4.0s" dur="2s"/> + </text> + <text x="50px" y="100px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="inherit" begin="3.0s" dur="2s"/> + </text> + <text x="100px" y="100px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="inherit" begin="2.01s" dur="2s"/> + </text> + <text x="150px" y="100px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="inherit" begin="2.0s" dur="2s"/> + </text> + <text x="200px" y="100px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="inherit" begin="1.0s" dur="2s"/> + </text> + + <!-- 'caption' to 'icon' --> + <text x="0px" y="150px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="icon" begin="4.0s" dur="2s"/> + </text> + <text x="50px" y="150px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="icon" begin="3.0s" dur="2s"/> + </text> + <text x="100px" y="150px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="icon" begin="2.01s" dur="2s"/> + </text> + <text x="150px" y="150px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="icon" begin="2.0s" dur="2s"/> + </text> + <text x="200px" y="150px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="icon" begin="1.0s" dur="2s"/> + </text> + + <!-- 'caption' to 'menu' --> + <text x="0px" y="200px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="menu" begin="4.0s" dur="2s"/> + </text> + <text x="50px" y="200px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="menu" begin="3.0s" dur="2s"/> + </text> + <text x="100px" y="200px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="menu" begin="2.01s" dur="2s"/> + </text> + <text x="150px" y="200px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="menu" begin="2.0s" dur="2s"/> + </text> + <text x="200px" y="200px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="menu" begin="1.0s" dur="2s"/> + </text> + + <!-- 'caption' to 'message-box' --> + <text x="0px" y="250px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="message-box" begin="4.0s" dur="2s"/> + </text> + <text x="50px" y="250px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="message-box" begin="3.0s" dur="2s"/> + </text> + <text x="100px" y="250px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="message-box" begin="2.01s" dur="2s"/> + </text> + <text x="150px" y="250px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="message-box" begin="2.0s" dur="2s"/> + </text> + <text x="200px" y="250px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="message-box" begin="1.0s" dur="2s"/> + </text> + + <!-- 'caption' to 'small-caption' --> + <text x="0px" y="300px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="small-caption" begin="4.0s" dur="2s"/> + </text> + <text x="50px" y="300px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="small-caption" begin="3.0s" dur="2s"/> + </text> + <text x="100px" y="300px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="small-caption" begin="2.01s" dur="2s"/> + </text> + <text x="150px" y="300px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="small-caption" begin="2.0s" dur="2s"/> + </text> + <text x="200px" y="300px">abc + <animate attributeName="font" attributeType="CSS" fill="freeze" + from="caption" to="small-caption" begin="1.0s" dur="2s"/> + </text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-pct.svg new file mode 100644 index 0000000000..38afe61f07 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-pct.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "500%", + "by" : "1000%" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-px.svg new file mode 100644 index 0000000000..ea4d7c3e8c --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-pct-px.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "500%", + "by" : "20px" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-pct.svg new file mode 100644 index 0000000000..8e4b6d5866 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-pct.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "10px", + "by" : "1000%" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-px.svg new file mode 100644 index 0000000000..637c49e318 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-by-px-px.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "10px", + "by" : "20px" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-no.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-no.svg new file mode 100644 index 0000000000..2b4e18030e --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-no.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "attributeType" : "CSS", + "from" : "10", + "to" : "30" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-px.svg new file mode 100644 index 0000000000..7ced25e9af --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-no-px.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "attributeType" : "CSS", + "from" : "10", + "to" : "30px" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-pct.svg new file mode 100644 index 0000000000..0cf6c0cf36 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-pct.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "500%", + "to" : "1500%" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-px.svg new file mode 100644 index 0000000000..fc4ff3afd1 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-pct-px.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "500%", + "to" : "30px" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-no.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-no.svg new file mode 100644 index 0000000000..56e51eeab7 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-no.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "attributeType" : "CSS", + "from" : "10px", + "to" : "30" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-pct.svg new file mode 100644 index 0000000000..94c195c2f3 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-pct.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "10px", + "to" : "1500%" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-px.svg new file mode 100644 index 0000000000..7158f64644 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-from-to-px-px.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "10px", + "to" : "30px" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-1-ref.svg new file mode 100644 index 0000000000..4747c2824c --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-1-ref.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="20px" y="20px" style="font-size: 2px">abc + </text> + <text x="70px" y="20px" style="font-size: 10px">abc + </text> + <text x="120px" y="20px" style="font-size: 13px">abc + </text> + <text x="20px" y="70px" style="font-size: 17.5px">abc + </text> + <text x="70px" y="70px" style="font-size: 19.9px">abc + </text> + <text x="120px" y="70px" style="font-size: 25px">abc + </text> + <text x="20px" y="120px" style="font-size: 26px">abc + </text> + <text x="70px" y="120px" style="font-size: 30px">abc + </text> + <text x="120px" y="120px" style="font-size: 30px">abc + </text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-em-em.svg new file mode 100644 index 0000000000..3fe3ae0ce9 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-em-em.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "15em", + "by" : "-10em" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-em.svg new file mode 100644 index 0000000000..44b407e185 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-em.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "30px", + "by" : "-10em" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-px.svg new file mode 100644 index 0000000000..70199be78b --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-from-by-px-px.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "from" : "30px", + "by" : "-20px" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-fontsize-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-fontsize-2-ref.svg new file mode 100644 index 0000000000..6edb8deff6 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-fontsize-2-ref.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="20px" y="20px" style="font-size: 2px">abc + </text> + <text x="70px" y="20px" style="font-size: 30px">abc + </text> + <text x="120px" y="20px" style="font-size: 27px">abc + </text> + <text x="20px" y="70px" style="font-size: 22.5px">abc + </text> + <text x="70px" y="70px" style="font-size: 20.1px">abc + </text> + <text x="120px" y="70px" style="font-size: 15px">abc + </text> + <text x="20px" y="120px" style="font-size: 14px">abc + </text> + <text x="70px" y="120px" style="font-size: 10px">abc + </text> + <text x="120px" y="120px" style="font-size: 10px">abc + </text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-letterspacing-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-letterspacing-1-ref.svg new file mode 100644 index 0000000000..b56522931c --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-letterspacing-1-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="50" y="50" font-size="20" letter-spacing="15">abc</text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-letterspacing-1.svg b/layout/reftests/svg/smil/style/anim-css-letterspacing-1.svg new file mode 100644 index 0000000000..e10d430cf0 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-letterspacing-1.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="setTimeAndSnapshot(3.0, true)"> + <script xlink:href="../smil-util.js"/> + <text x="50" y="50" font-size="20">abc + <animate attributeName="letter-spacing" fill="freeze" from="0" to="20" begin="0s" dur="4s"/> + </text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-from-by.svg b/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-from-by.svg new file mode 100644 index 0000000000..da3ace6784 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-from-by.svg @@ -0,0 +1,27 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <!-- This is a series of snapshots of a color animation, starting at --> + <!-- YellowGreen (#9ACD32 == rgb(154,205,50)) and increasing each --> + <!-- channel beyond its maximum. (which should clamp it to 255) --> + <style> + stop { stop-color: yellowgreen; } + rect { stroke: black; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stop-color", + "from" : "yellowgreen", + "by" : "rgb(200, 100, 250)" }; + var graphicElemTag = "rect"; + var graphicElemAttrHash = { "width" : "15px", + "height" : "15px" }; + testAnimatedGridWithDefs(graphicElemTag, graphicElemAttrHash, "fill", + [ "linearGradient", "stop" ], + "animate", [ animAttrHash ]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-ref.svg new file mode 100644 index 0000000000..917bfef9f5 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-stopcolor-overflow-1-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { stroke: black; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="fill: yellowgreen"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="fill: yellowgreen"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="fill: rgb(184, 220, 88)"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="fill: rgb(229, 243, 144)"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="fill: rgb(253, 255, 174)"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="fill: rgb(255, 255, 238)"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="fill: rgb(255, 255, 250)"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="fill: rgb(255, 255, 255)"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="fill: rgb(255, 255, 255)"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg new file mode 100644 index 0000000000..d2cfe9b4bb --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1-ref.svg @@ -0,0 +1,32 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + rect { stroke: blue; stroke-width: 5px; } + </style> + <rect x="20px" y="20px" width="15px" height="15px" + style="stroke-dasharray: 20px, 5px"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" + style="stroke-dasharray: 20px, 5px"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" + style="stroke-dasharray: 18.5px, 6.5px"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" + style="stroke-dasharray: 16.25px, 8.75px"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" + style="stroke-dasharray: 15.05px, 9.95px"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" + style="stroke-dasharray: 12.5px, 12.5px"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" + style="stroke-dasharray: 12px, 13px"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" + style="stroke-dasharray: 10px, 15px"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" + style="stroke-dasharray: 10px, 15px"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokedasharray-1.svg b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1.svg new file mode 100644 index 0000000000..9488f6546e --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokedasharray-1.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-dasharray", + "from" : "20px, 5px", + "to" : "10px, 15px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-em.svg new file mode 100644 index 0000000000..1472123ee7 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-em.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "10em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-px.svg new file mode 100644 index 0000000000..2b6a983f2d --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-em-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-no-no.svg new file mode 100644 index 0000000000..0ae489d628 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-no-no.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "20" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-pct.svg new file mode 100644 index 0000000000..e9e1cc2d6e --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-pct.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "10%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-px.svg new file mode 100644 index 0000000000..3199059764 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-pct-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-em.svg new file mode 100644 index 0000000000..f1a918ea75 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-em.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "10em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-pct.svg new file mode 100644 index 0000000000..076e49adf4 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-pct.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "10%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-px.svg new file mode 100644 index 0000000000..65d3bbc6e9 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-by-px-px.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "by" : "20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-em.svg new file mode 100644 index 0000000000..2058d83661 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-em.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5em", + "by" : "10em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-px.svg new file mode 100644 index 0000000000..e37bc12cf3 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-em-px.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5em", + "by" : "20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-no-no.svg new file mode 100644 index 0000000000..0c1afad42b --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-no-no.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10", + "by" : "20" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-pct.svg new file mode 100644 index 0000000000..76e5c1e520 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-pct.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5%", + "by" : "10%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-px.svg new file mode 100644 index 0000000000..3394572e76 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-pct-px.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5%", + "by" : "20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-em.svg new file mode 100644 index 0000000000..3e26f8973a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-em.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10px", + "by" : "10em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-pct.svg new file mode 100644 index 0000000000..66c0f137ba --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-pct.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10px", + "by" : "10%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-px.svg new file mode 100644 index 0000000000..e4bba5ae2e --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-by-px-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10px", + "by" : "20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-em.svg new file mode 100644 index 0000000000..7e7d035739 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-em.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5em", + "to" : "15em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-px.svg new file mode 100644 index 0000000000..5c538b65b4 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-em-px.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5em", + "to" : "30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-no-no.svg new file mode 100644 index 0000000000..1f4e5d09a2 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-no-no.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10", + "to" : "30" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-pct.svg new file mode 100644 index 0000000000..0da954bb54 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-pct.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5%", + "to" : "15%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-px.svg new file mode 100644 index 0000000000..37afdef686 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-pct-px.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "5%", + "to" : "30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-em.svg new file mode 100644 index 0000000000..4dd6908d09 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-em.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10px", + "to" : "15em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-pct.svg new file mode 100644 index 0000000000..3c0b237f08 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-pct.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10px", + "to" : "15%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-px.svg new file mode 100644 index 0000000000..2e4631b7a4 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-from-to-px-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "10px", + "to" : "30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-ref.svg new file mode 100644 index 0000000000..0c6ad16742 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-ref.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"> + <rect x="20px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10px"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10px"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 13px"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 17.5px"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 19.9px"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 25px"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 26px"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 30px"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 30px"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-em.svg new file mode 100644 index 0000000000..07df6d5a1a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-em.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "15em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-px.svg new file mode 100644 index 0000000000..56ffff8d02 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-em-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5em; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-no-no.svg new file mode 100644 index 0000000000..7784dd6ca2 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-no-no.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "30" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-pct.svg new file mode 100644 index 0000000000..d44e56b499 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-pct.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "15%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-px.svg new file mode 100644 index 0000000000..9d00d27444 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-pct-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 5%; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-em.svg new file mode 100644 index 0000000000..17d5b76284 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-em.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "15em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-pct.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-pct.svg new file mode 100644 index 0000000000..c7dd235f25 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-pct.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="200px" height="200px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "15%" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-px.svg new file mode 100644 index 0000000000..5121cb2bf0 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-1-to-px-px.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; shape-rendering: crispEdges; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "to" : "30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-ref.svg new file mode 100644 index 0000000000..fc16e65154 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-ref.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="20px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10px"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 20px"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 17px"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 12.5px"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10.1px"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 20px"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 22px"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 30px"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 30px"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-em.svg new file mode 100644 index 0000000000..d26e7d7041 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-em.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "values" : "10em; 5em; 15em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-px.svg new file mode 100644 index 0000000000..27a15b6663 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-em-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "values" : "10em; 10px; 15em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-em.svg new file mode 100644 index 0000000000..4fb2e61906 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-em.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "values" : "20px; 5em; 30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-px.svg new file mode 100644 index 0000000000..b1a21817d3 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-2-values-px-px.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "values" : "20px; 10px; 30px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-3-paced.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-paced.svg new file mode 100644 index 0000000000..2449345ecd --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-paced.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 10px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "calcMode" : "paced", + "values" : "10px; 5px; 30px; 20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-3-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-ref.svg new file mode 100644 index 0000000000..2ddabf480c --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-3-ref.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="20px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10px"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10px"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 6px"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 15px"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 19.8px"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 30px"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 28px"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 20px"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 20px"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-em-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-em-em.svg new file mode 100644 index 0000000000..9a55c55fc6 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-em-em.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 30px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "15em", + "by" : "-10em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-no-no.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-no-no.svg new file mode 100644 index 0000000000..43845db4f7 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-no-no.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 30px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "30", + "by" : "-20" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-em.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-em.svg new file mode 100644 index 0000000000..96aa4e4095 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-em.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 30px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "30px", + "by" : "-10em" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-px.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-px.svg new file mode 100644 index 0000000000..f70c9617b1 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-from-by-px-px.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="go()"> + <style> + rect { stroke: blue; stroke-width: 30px; } + </style> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "stroke-width", + "from" : "30px", + "by" : "-20px" }; + testAnimatedRectGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-strokewidth-4-ref.svg b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-ref.svg new file mode 100644 index 0000000000..bfbb8e3fae --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-strokewidth-4-ref.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="20px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 30px"> + </rect> + <rect x="70px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 30px"> + </rect> + <rect x="120px" y="20px" width="15px" height="15px" stroke="blue" + style="stroke-width: 27px"> + </rect> + <rect x="20px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 22.5px"> + </rect> + <rect x="70px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 20.1px"> + </rect> + <rect x="120px" y="70px" width="15px" height="15px" stroke="blue" + style="stroke-width: 15px"> + </rect> + <rect x="20px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 14px"> + </rect> + <rect x="70px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10px"> + </rect> + <rect x="120px" y="120px" width="15px" height="15px" stroke="blue" + style="stroke-width: 10px"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-wordspacing-1-ref.svg b/layout/reftests/svg/smil/style/anim-css-wordspacing-1-ref.svg new file mode 100644 index 0000000000..18ab815f77 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-wordspacing-1-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="50" y="50" font-size="20" word-spacing="15">hello there</text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-css-wordspacing-1.svg b/layout/reftests/svg/smil/style/anim-css-wordspacing-1.svg new file mode 100644 index 0000000000..46e636e076 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-css-wordspacing-1.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" onload="setTimeAndSnapshot(3.0, true)"> + <script xlink:href="../smil-util.js"/> + <text x="50" y="50" font-size="20">hello there + <animate attributeName="word-spacing" fill="freeze" from="0" to="20" begin="0s" dur="4s"/> + </text> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-no.svg b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-no.svg new file mode 100644 index 0000000000..2583c2a7ce --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-no.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "attributeType" : "XML", + "from" : "10", + "to" : "30" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-px.svg b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-px.svg new file mode 100644 index 0000000000..4a487ece7a --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-no-px.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "attributeType" : "XML", + "from" : "10", + "to" : "30px" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-px-no.svg b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-px-no.svg new file mode 100644 index 0000000000..689fd045d4 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-mapped-fontsize-1-from-to-px-no.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size: 2px" + class="reftest-wait" + onload="go()"> + <script xlink:href="../smil-grid.js" type="text/javascript"/> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function go() { + var animAttrHash = { "attributeName" : "font-size", + "attributeType" : "XML", + "from" : "10px", + "to" : "30" }; + testAnimatedTextGrid("animate", [animAttrHash]); + } + </script> +</svg> diff --git a/layout/reftests/svg/smil/style/anim-standard-ref.svg b/layout/reftests/svg/smil/style/anim-standard-ref.svg new file mode 100644 index 0000000000..39f37ae6d1 --- /dev/null +++ b/layout/reftests/svg/smil/style/anim-standard-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="15" y="15" width="200" height="200" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/smil/style/important-set-1.svg b/layout/reftests/svg/smil/style/important-set-1.svg new file mode 100644 index 0000000000..197ba26b6f --- /dev/null +++ b/layout/reftests/svg/smil/style/important-set-1.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect x="15" y="15" width="200" height="200" style="fill: blue !important"> + <set attributeName="fill" attributeType="CSS" + to="red" begin="0s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/important-set-2.svg b/layout/reftests/svg/smil/style/important-set-2.svg new file mode 100644 index 0000000000..e5515db10c --- /dev/null +++ b/layout/reftests/svg/smil/style/important-set-2.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <style> + rect { fill: blue !important; } + </style> + <rect x="15" y="15" width="200" height="200"> + <set attributeName="fill" attributeType="CSS" + to="red" begin="0s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/namespaced-property-1.svg b/layout/reftests/svg/smil/style/namespaced-property-1.svg new file mode 100644 index 0000000000..415c1ffb62 --- /dev/null +++ b/layout/reftests/svg/smil/style/namespaced-property-1.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="15" y="15" width="200" height="200" fill="blue"> + <set attributeName="xlink:opacity" to="0.5" begin="0s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/style/reftest.list b/layout/reftests/svg/smil/style/reftest.list new file mode 100644 index 0000000000..a7888a3abe --- /dev/null +++ b/layout/reftests/svg/smil/style/reftest.list @@ -0,0 +1,169 @@ +# Tests related to SVG Animation (using SMIL) of CSS properties + +# XXXdholbert TODO: Test color animation with "color-interpolation: linearRGB" +# (when it's implemented) + +# 'color' property, from/to/by with named colors & hex values +== anim-css-color-1-by-ident-hex.svg anim-css-fill-1-ref.svg +== anim-css-color-1-from-by-hex-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-color-1-from-by-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-color-1-from-to-hex-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-color-1-from-to-ident-ident.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-color-1-to-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-color-1-to-ident-ident.svg anim-css-fill-1-ref.svg + +# 'color' property, paced calcMode +== anim-css-color-2-paced-rgb.svg anim-css-fill-2-ref.svg + +# 'color' property, animating *by* a named color +fuzzy(0-1,0-580) == anim-css-color-3-by-ident-ident.svg anim-css-fill-3-ref.svg +fuzzy(0-1,0-580) == anim-css-color-3-from-by-ident-ident.svg anim-css-fill-3-ref.svg +fuzzy(0-1,0-580) == anim-css-color-3-from-by-rgb-ident.svg anim-css-fill-3-ref.svg + +# 'fill' property, from/to/by with named colors & hex values +fuzzy(0-1,0-550) == anim-css-fill-1-by-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-by-hex-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-by-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-to-hex-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-to-ident-ident.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-to-ident-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-to-ident-ident.svg anim-css-fill-1-ref.svg + +# 'fill' property, from/to/by, with 'currentColor' keyword +fuzzy(0-1,0-550) == anim-css-fill-1-by-ident-curcol.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-by-curcol-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-by-hex-curcol.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-to-curcol-hex.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-from-to-hex-curcol.svg anim-css-fill-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fill-1-to-ident-curcol.svg anim-css-fill-1-ref.svg + +# 'fill' property, paced calcMode +== anim-css-fill-2-paced-rgb.svg anim-css-fill-2-ref.svg + +# 'fill' property, animating *by* a named color +fuzzy(0-1,0-580) == anim-css-fill-3-by-ident-ident.svg anim-css-fill-3-ref.svg +fuzzy(0-1,0-580) == anim-css-fill-3-from-by-ident-ident.svg anim-css-fill-3-ref.svg +fuzzy(0-1,0-580) == anim-css-fill-3-from-by-rgb-ident.svg anim-css-fill-3-ref.svg + +# check handling of overflowing color values +# NOTE: Some of the tests below fail in Gecko because we compute +# "from + by" as the animation end-point, and we clamp that final color value +# (due to bug 515919) and use the clamped value for interpolation. +# That's earlier than the SVG spec wants us to clamp -- we're only supposed to +# clamp *final presentation values*. +# (Reference: SVG 1.1 Appendix F.4) +== anim-css-fill-overflow-1-by.svg anim-css-fill-overflow-1-ref.svg +== anim-css-fill-overflow-1-from-by.svg anim-css-fill-overflow-1-ref.svg # bug 515919 +== anim-css-stopcolor-overflow-1-from-by.svg anim-css-stopcolor-overflow-1-ref.svg # bug 515919 +== anim-css-floodcolor-overflow-1-from-by.svg anim-css-floodcolor-overflow-1-ref.svg # bug 515919 + +# 'fill-opacity' property +fuzzy(0-1,0-885) == anim-css-fillopacity-1-by.svg anim-css-fillopacity-1-ref.svg +fuzzy(0-1,0-210) == anim-css-fillopacity-1-from-by.svg anim-css-fillopacity-1-ref.svg +== anim-css-fillopacity-1-from-to.svg anim-css-fillopacity-1-ref.svg +fuzzy(0-1,0-550) == anim-css-fillopacity-1-to.svg anim-css-fillopacity-1-ref.svg +== anim-css-fillopacity-2-paced.svg anim-css-fillopacity-2-ref.svg +fails == anim-css-fillopacity-3-clamp-big.svg anim-css-fillopacity-3-ref.svg # bug 501188 +fuzzy(0-1,0-365) == anim-css-fillopacity-3-clamp-small.svg anim-css-fillopacity-3-ref.svg + +# 'font' shorthand property +fuzzy-if(gtkWidget,255-255,1520-1520) == anim-css-font-1.svg anim-css-font-1-ref.svg # Windows: Bug 1392106 Linux: Bug 1599619 + +# 'font-size' property, from/by/to with pixel values only +== anim-css-fontsize-1-from-by-px-px.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-to-px-px.svg anim-css-fontsize-1-ref.svg + +# 'font-size' property (accepts unitless values) +== anim-css-fontsize-1-from-to-no-no.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-to-no-px.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-to-px-no.svg anim-css-fontsize-1-ref.svg + +# 'font-size' mapped attribute (accepts unitless values) +== anim-mapped-fontsize-1-from-to-no-no.svg anim-css-fontsize-1-ref.svg +== anim-mapped-fontsize-1-from-to-no-px.svg anim-css-fontsize-1-ref.svg +== anim-mapped-fontsize-1-from-to-px-no.svg anim-css-fontsize-1-ref.svg + +# 'font-size' property, from/by/to with percent values +== anim-css-fontsize-1-from-by-pct-pct.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-by-pct-px.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-by-px-pct.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-to-pct-pct.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-to-pct-px.svg anim-css-fontsize-1-ref.svg +== anim-css-fontsize-1-from-to-px-pct.svg anim-css-fontsize-1-ref.svg + +# 'font-size' property, with negative addition +== anim-css-fontsize-2-from-by-px-px.svg anim-css-fontsize-2-ref.svg +== anim-css-fontsize-2-from-by-px-em.svg anim-css-fontsize-2-ref.svg +== anim-css-fontsize-2-from-by-em-em.svg anim-css-fontsize-2-ref.svg + +# 'stroke-dasharray' property, from/to with pixel values only +fails == anim-css-strokedasharray-1.svg anim-css-strokedasharray-1-ref.svg # bug 474049 + +# 'stroke-width' property, from/by/to with pixel values only +== anim-css-strokewidth-1-by-px-px.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-by-px-px.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-to-px-px.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-to-px-px.svg anim-css-strokewidth-1-ref.svg + +# 'stroke-width' property, from/by/to with unitless values only +== anim-css-strokewidth-1-by-no-no.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-by-no-no.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-to-no-no.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-to-no-no.svg anim-css-strokewidth-1-ref.svg + +# 'stroke-width' property, from/by/to with percent values +# XXXdholbert the mixed pct + px tests fail right now, because we need calc() +# in order to interpolate between pct and non-pct values, and we don't yet +# support calc() for stroke-width & other SVG-specific properties. +# +# Bug 1258270 and 1386967 +== anim-css-strokewidth-1-by-pct-pct.svg anim-css-strokewidth-1-ref.svg +fails == anim-css-strokewidth-1-by-pct-px.svg anim-css-strokewidth-1-ref.svg +fails == anim-css-strokewidth-1-by-px-pct.svg anim-css-strokewidth-1-ref.svg +fails-if(!useDrawSnapshot) == anim-css-strokewidth-1-from-by-pct-pct.svg anim-css-strokewidth-1-ref.svg # bug 1459418 +fails == anim-css-strokewidth-1-from-by-pct-px.svg anim-css-strokewidth-1-ref.svg +fails == anim-css-strokewidth-1-from-by-px-pct.svg anim-css-strokewidth-1-ref.svg +fails-if(!useDrawSnapshot) == anim-css-strokewidth-1-from-to-pct-pct.svg anim-css-strokewidth-1-ref.svg # bug 1459418 +fails == anim-css-strokewidth-1-from-to-pct-px.svg anim-css-strokewidth-1-ref.svg +fails == anim-css-strokewidth-1-from-to-px-pct.svg anim-css-strokewidth-1-ref.svg +fails-if(!useDrawSnapshot) == anim-css-strokewidth-1-to-pct-pct.svg anim-css-strokewidth-1-ref.svg # bug 1459418 +fails == anim-css-strokewidth-1-to-pct-px.svg anim-css-strokewidth-1-ref.svg +fails == anim-css-strokewidth-1-to-px-pct.svg anim-css-strokewidth-1-ref.svg + +# 'stroke-width' property, from/by/to with em values +== anim-css-strokewidth-1-by-px-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-by-em-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-by-em-px.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-by-px-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-by-em-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-by-em-px.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-to-px-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-to-em-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-from-to-em-px.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-to-px-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-to-em-em.svg anim-css-strokewidth-1-ref.svg +== anim-css-strokewidth-1-to-em-px.svg anim-css-strokewidth-1-ref.svg + +# 'stroke-width' property, values-array & paced calc-mode support +== anim-css-strokewidth-2-values-em-em.svg anim-css-strokewidth-2-ref.svg +== anim-css-strokewidth-2-values-em-px.svg anim-css-strokewidth-2-ref.svg +== anim-css-strokewidth-2-values-px-em.svg anim-css-strokewidth-2-ref.svg +fuzzy(0-1,0-360) == anim-css-strokewidth-2-values-px-px.svg anim-css-strokewidth-2-ref.svg +== anim-css-strokewidth-3-paced.svg anim-css-strokewidth-3-ref.svg + +# 'stroke-width' property, negative addition +== anim-css-strokewidth-4-from-by-px-px.svg anim-css-strokewidth-4-ref.svg +== anim-css-strokewidth-4-from-by-px-em.svg anim-css-strokewidth-4-ref.svg +== anim-css-strokewidth-4-from-by-em-em.svg anim-css-strokewidth-4-ref.svg +fuzzy(0-1,0-170) == anim-css-strokewidth-4-from-by-no-no.svg anim-css-strokewidth-4-ref.svg + +# check correct handling of "!important" values +== important-set-1.svg anim-standard-ref.svg +== important-set-2.svg anim-standard-ref.svg + +# check namespaced attribute +== namespaced-property-1.svg anim-standard-ref.svg + +# 'letter-spacing' and 'word-spacing' +== anim-css-letterspacing-1.svg anim-css-letterspacing-1-ref.svg +== anim-css-wordspacing-1.svg anim-css-wordspacing-1-ref.svg diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-1.svg b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-1.svg new file mode 100644 index 0000000000..5952d99125 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-1.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.5); + document.getElementById('a').removeAttribute('begin'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Deleting the begin spec whilst the element is active should not cause + a change notification to be generated. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="green" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-2.svg b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-2.svg new file mode 100644 index 0000000000..c2db156479 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-2.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.2); + document.getElementById('a').removeAttribute('begin'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Deleting the begin spec whilst the syncbase element is active should not + cause a change notification to be generated since the begin time is fixed + once the element is active. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="green" + begin="a.begin+0.5s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-3.svg b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-3.svg new file mode 100644 index 0000000000..103b0e780c --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-3.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.2); + document.getElementById('a').setAttribute('begin', '0s'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Changing the begin spec whilst the syncbase element is active should not + cause a change notification to be generated since the begin time is fixed + once the element is active. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="green" + begin="a.begin+0.5s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-4.svg b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-4.svg new file mode 100644 index 0000000000..ef7ba61a94 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-change-spec-4.svg @@ -0,0 +1,27 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('b').removeAttribute('begin'); + document.getElementById('a').setAttribute('dur', '1s'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + 1. Initially, we have a begin time that is dependent on an unresolved time + (a.end). + 2. The begin attribute that created the begin time is then removed. + 3. The base interval on which the begin time is dependent is then resolved. + + In this case, the unresolved dependent begin should have been cleared in + at point 2 and no new interval should be created. + --> + <rect width="100" height="100" fill="green"> + <!-- Base interval with unresolved end time --> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a"/> + <!-- Dependent interval --> + <animate attributeName="fill" attributeType="CSS" id="b" + values="red" begin="a.end" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-resolved-1.svg b/layout/reftests/svg/smil/syncbase/changed-interval-resolved-1.svg new file mode 100644 index 0000000000..d6bbd1da78 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-resolved-1.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + When the animations are initially set up there's potential for a change + notification once b is resolved. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="10s; b.begin" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + <set attributeName="y" begin="1s" id="b" to="0"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-resolved-2.svg b/layout/reftests/svg/smil/syncbase/changed-interval-resolved-2.svg new file mode 100644 index 0000000000..d4b3c681ef --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-resolved-2.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.getElementById('c').setAttribute('id', 'b'); + setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + When the animations are initially set up a change notice should resolved + when c's id is updated to b. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="10s; b.begin" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + <set attributeName="y" begin="1s" id="c" to="0"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-1.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-1.svg new file mode 100644 index 0000000000..3ba8c6687d --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-1.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple case of a changing interval. + The end will be updated when the syncbase does an early end. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.end" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-2.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-2.svg new file mode 100644 index 0000000000..fc7756800f --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-2.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').beginElementAt(1); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + We'll add another begin instance time at t=1s for 'a' by script, causing a + change notification. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="10s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-3.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-3.svg new file mode 100644 index 0000000000..ae5f28fbfb --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-3.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').endElementAt(1); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + We'll add another end instance time at t=1s for 'a' by script, causing a + change notification. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.end" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-4.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-4.svg new file mode 100644 index 0000000000..671e9cd370 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-4.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + An early end should generate two change notices here and because + restart="whenNotActive" we should only apply the earlier one, regardless of + what order they arrive in. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1.5s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.end; a.end-0.5s" dur="2s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-simple-5.svg b/layout/reftests/svg/smil/syncbase/changed-interval-simple-5.svg new file mode 100644 index 0000000000..07648813c1 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-simple-5.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').removeAttribute('begin'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Changing the begin attribute by script should cause a change notice to be + generated. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="red; red" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/changed-interval-sort-1.svg b/layout/reftests/svg/smil/syncbase/changed-interval-sort-1.svg new file mode 100644 index 0000000000..6fbd62a462 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/changed-interval-sort-1.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple case of a changing interval to check that instances times are + re-sorted. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="3s; a.end" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cross-container-1.xhtml b/layout/reftests/svg/smil/syncbase/cross-container-1.xhtml new file mode 100644 index 0000000000..72d7eb782e --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cross-container-1.xhtml @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> +<!-- + The simplest possible test of a cross-time container dependency. + --> +<head> +<script> +function snapshot() { + var a = document.getElementById("svg-a"); + var b = document.getElementById("svg-b"); + b.pauseAnimations(); + a.pauseAnimations(); + b.setCurrentTime(1); // In document time, 'b' has now begun and therefore so + // has 'a' + a.setCurrentTime(1); // So we only need seek forward 1s to get to the middle + // of the animation + document.documentElement.removeAttribute("class"); +} +</script> +</head> +<body onload="snapshot()"> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-a"> + <rect width="100" height="100" fill="red"> + <animate attributeName="fill" attributeType="CSS" id="a" + values="orange; green; purple" calcMode="discrete" + begin="b.begin" dur="2s"/> + </rect> +</svg> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-b"> + <set attributeName="y" to="0" begin="1s" id="b"/> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/syncbase/cross-container-2.xhtml b/layout/reftests/svg/smil/syncbase/cross-container-2.xhtml new file mode 100644 index 0000000000..272b65ae75 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cross-container-2.xhtml @@ -0,0 +1,43 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> +<!-- + Check that pausing the base time container makes dependent times unresolved. + --> +<head> +<script><!----><![CDATA[ +function snapshot() { + var a = document.getElementById("svg-a"); + var b = document.getElementById("svg-b"); + a.pauseAnimations(); + b.pauseAnimations(); + a.setCurrentTime(2); // Since b is paused, the start time of a is now + // unresolved. + // Check DOM state as well + var wrong = document.getElementById("wrong"); + try { + document.getElementById("a").getStartTime(); + } catch (e) { + if (e.name == "InvalidStateError" && + e.code == DOMException.INVALID_STATE_ERR) { + wrong.style.setProperty('visibility', 'hidden', ''); + } + } + document.documentElement.removeAttribute("class"); +} +//]]></script> +</head> +<body onload="snapshot()"> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-a"> + <rect width="100" height="100" fill="green"> + <set attributeName="fill" to="red" begin="b.begin" id="a"/> + </rect> + <g id="wrong"> + <line stroke="black" stroke-width="8" x1="0" y1="0" x2="100" y2="100"/> + <line stroke="black" stroke-width="8" x1="0" y1="100" x2="100" y2="0"/> + </g> +</svg> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-b"> + <set attributeName="y" to="0" begin="1s" id="b"/> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/syncbase/cross-container-3.xhtml b/layout/reftests/svg/smil/syncbase/cross-container-3.xhtml new file mode 100644 index 0000000000..d5e94ac12e --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cross-container-3.xhtml @@ -0,0 +1,63 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml" class="reftest-wait"> +<!-- + Check that calls to beginElement cause the pause time to be updated. + + This is an area that's underspecified so we're just going with what's + intuitive. A is supposed to start at the same time as B. However, whilst B is + paused, a script calls 'beginElement'. Yet A is not paused. Intuitively, + A should start at the time beginElement is called. However, unless we handle + this situation specifically, what happens instead is that A is considered to + begin at the time when B was paused as follows: + + + Document time: + 0 1 2 3 4 ... + A: + B: |.......*.......... + ^ Pause starts here + ^ beginElement called here + + Intuitively, A should start at t=2s, not t=1s. To provide this behaviour we + must specifically handle it. + + Perhaps a more fundamental question is whether a call to beginElement should + take effect whilst the document is paused. Currently it does. This is + consistent with Opera but not Safari. + --> +<head> +<script> +function snapshot() { + var svgb = document.getElementById("svg-b"); + svgb.pauseAnimations(); + setTimeout('snapshotB()', 100); +} + +function snapshotB() { + var svga = document.getElementById("svg-a"); + svga.pauseAnimations(); + var b = document.getElementById("b"); + b.beginElement(); + // Force a sample on the first document fragment before taking a snapshot + svga.setCurrentTime(svga.getCurrentTime()); + document.documentElement.removeAttribute("class"); +} + +document.addEventListener("MozReftestInvalidate", snapshot, false); +setTimeout(snapshot, 4000); // fallback for running outside reftest + +</script> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-a"> + <rect width="100" height="100" fill="orange"> + <animate attributeName="fill" attributeType="CSS" id="a" + values="green; red" + begin="b.begin" dur="0.5s"/> + </rect> +</svg> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px" id="svg-b"> + <set attributeName="y" to="0" begin="indefinite" id="b"/> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/syncbase/cycle-change-1.svg b/layout/reftests/svg/smil/syncbase/cycle-change-1.svg new file mode 100644 index 0000000000..25a3c4ad39 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-change-1.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').beginElementAt(1); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test that cycles don't cause problems for change notices as well. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin; 3s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-change-2.svg b/layout/reftests/svg/smil/syncbase/cycle-change-2.svg new file mode 100644 index 0000000000..861be05c9a --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-change-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test that cycles don't cause problems for change notices as well. In this + case we have an early end. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin; 0s; 1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-delete-1.svg b/layout/reftests/svg/smil/syncbase/cycle-delete-1.svg new file mode 100644 index 0000000000..79408a0483 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-delete-1.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').setAttribute('end', '0s'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test that cycles don't cause problems for deleted intervals. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin; 1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="red; red" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-invalid-1.svg b/layout/reftests/svg/smil/syncbase/cycle-invalid-1.svg new file mode 100644 index 0000000000..863de4a938 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-invalid-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + An invalid cycle. Example 1 from SMIL3 section 5.4.5. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="red" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-invalid-2.svg b/layout/reftests/svg/smil/syncbase/cycle-invalid-2.svg new file mode 100644 index 0000000000..97829d6554 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-invalid-2.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + An invalid cycle. Example 2 From SMIL3 section 5.4.5. + --> + <rect width="100" height="100" fill="blue"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="c.end" dur="4s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="b" + begin="a.begin" dur="3s"/> + <animate attributeName="fill" attributeType="CSS" id="c" + values="green; red" + begin="0" end="b.end"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-invalid-3.svg b/layout/reftests/svg/smil/syncbase/cycle-invalid-3.svg new file mode 100644 index 0000000000..9e7d460aff --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-invalid-3.svg @@ -0,0 +1,54 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + An invalid cycle that propagates backwards. + Example 4 from SMIL3 section 5.4.5. + + Regarding cycle detection SMIL 3.0 says: + + "When a cycle is detected, the change propagation is ignored. The element + that detected the second visit ignores the second change notice, and so + breaks the cycle." + + So we are only concerned with cycles amongst CHANGE notices. We understand + this as follows: + + a: 5s-7s + new -> b: 4s-6s + new -> a: 3s-5s + change -> b: 2s-4s + change -> a: 1s-3s + change -> b: second change notice, break cycle! + + Thus giving us: + a: 1s-3s; 3s-5s; 5s-7s + b: 2s-4s; 4s-6s + + Opera gives us: + a: -1s-1s; 1s-3s; 3s-5s; 5s-7s + b: 0s-2s; 2s-4s; 4s-6s + + Safari gives us: + a: 3s-5s; 5s-7s + b: 2s-4s; 4s-6s + + Batik 1.7 gives: + a: 5s-7s + b: 4s-6s + + Currently we have the result described above, i.e. + a: 1s-3s; 3s-5s; 5s-7s + b: 2s-4s; 4s-6s + + --> + <rect y="100" width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="-50" to="50" id="a" + begin="5s; b.begin-1s" dur="2s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="green; orange" + begin="a.begin-1s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-invalid-4.svg b/layout/reftests/svg/smil/syncbase/cycle-invalid-4.svg new file mode 100644 index 0000000000..ddf489308d --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-invalid-4.svg @@ -0,0 +1,33 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').removeAttribute('dur'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A cycle that is valid at first but then becomes invalid. + + So at first we have: + a: 0s-1.5s + new -> b: 1.5s-2.5s + new -> a: add 1.5s begin instance time + + Remove 'dur' attr: + a: 0s-unresolved + change -> b: unresolved... delete interval + delete -> a: already visited <break> + + a: 0s-unresolved + b: unresolved-unresolved + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin; 0s" dur="1.5s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="red; red" + begin="a.end" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-1.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-1.svg new file mode 100644 index 0000000000..7040027044 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-ok-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A cycle that should be allowed. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin; 1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-2.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-2.svg new file mode 100644 index 0000000000..df53f6f80c --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-ok-2.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A ping-pong cycle that should be allowed. + Example 3 from SMIL3 section 5.4.5. + We have: + t=0s --> b: 0s-1s, a: 1s-2s + t=1s --> a: 1s-2s, b: 1.5s->2.5s + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin+1s" dur="1s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="orange; green; purple" + begin="0s; a.begin+0.5s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-3.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-3.svg new file mode 100644 index 0000000000..7ef9b866c1 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-ok-3.svg @@ -0,0 +1,34 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('c').setAttribute('dur', '1s'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Based on Example 2 from SMIL3 section 5.4.5, an invalid cycle, + but made valid by a DOM call. + + At first we have: + a: unresolved-unresolved + b: unresolved-unresolved + c: 0s-unresolved + + Then we set dur on c=1s, giving us + a: 1s-1.5s + b: 1s-3s + c: 0s-1s + --> + <rect width="100" height="100" fill="blue"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="c.end" dur="0.5s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + <animate attributeName="fill" attributeType="CSS" id="c" + values="red; red" + begin="0" end="b.end"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-4.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-4.svg new file mode 100644 index 0000000000..02bd95f928 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-ok-4.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A cycle that should be allowed. Here ends and begins coincide. + + So we have: + a: 0s-1.5s, 1.5s-3s, 3s-4.5s, ... + b: 1.5s-2.5s, 3s-4s, ... + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="b.begin; 0s" dur="1.5s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="orange; green; purple" + begin="a.end" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-ok-5.svg b/layout/reftests/svg/smil/syncbase/cycle-ok-5.svg new file mode 100644 index 0000000000..f6597a0cc3 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-ok-5.svg @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + From SVG 1.2 Tiny Test Suite, animate-elem-221-t.svg + + This test case is interesting because begin is not set on the first + animation. If we incorrectly detect this as a deleted begin time and thus + a deleted interval we get stuck in a loop marking the interval as deleted + and the new. + --> + <rect y="100" width="100" height="100" fill="red"> + <animate id="a1" attributeName="y" attributeType="XML" + from="-20" to="80" dur="10s" + end="a1.begin+6s" max="2.5s" /> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" keyTimes="0; 0.1; 1" dur="10s" + begin="1s" end="a1.end+6s" + max="7.5s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-recursion-1.svg b/layout/reftests/svg/smil/syncbase/cycle-recursion-1.svg new file mode 100644 index 0000000000..cb0411dc27 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-recursion-1.svg @@ -0,0 +1,42 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('c').removeAttribute('dur'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + At first we have: + c: 0s-1s + new -> a: 1s-1.5s + new -> b: 1s-2s + new -> c: 0s-1s [end: 2s] + + Then we remove dur on c giving us: + c: 0s-2s + change -> a: 2s-2.5s + change -> b: 2s-3s + change -> c: 0s-3s + change -> a: 3s-3.5s [Should break the cycle here] + change -> b: 3s-4s + change -> c: 0s-4s + etc. + + If we break on the second change notice we should arrive at: + a: 2s-2.5s + b: 2s-3s + c: 0s-3s + --> + <rect x="100" y="100" width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="c.end" dur="0.5s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="green; blue" + begin="a.begin" dur="1s"/> + <animate attributeName="x" attributeType="XML" id="c" + from="0" to="100" fill="freeze" + begin="0" end="b.end" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-recursion-2.svg b/layout/reftests/svg/smil/syncbase/cycle-recursion-2.svg new file mode 100644 index 0000000000..df859a5305 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-recursion-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + If we don't detect the cycle here, we'll keep doing reverse propagation for + a very long time. Probably long enough for something to go really wrong. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="100" to="100" id="a" + begin="20h; b.begin-1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="red; red" + begin="a.begin-1s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-1.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-1.svg new file mode 100644 index 0000000000..2163529726 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-1.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A valid self-referential cycle. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="fill" attributeType="CSS" id="a" + values="orange; green; purple" + begin="a.begin+1.5s; -0.5s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-2.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-2.svg new file mode 100644 index 0000000000..b5fe6e1dd4 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-2.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A valid self-referential cycle. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="fill" attributeType="CSS" id="a" + values="orange; green; purple" + begin="a.end; -1s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-3.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-3.svg new file mode 100644 index 0000000000..50fdaf9739 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-3.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A valid self-referential cycle. + + We have a 4s animation which should give us green after 1s of its active + duration. The active duration is constrained to 2s using a self-referential + end spec. Furthermore a self-referential begin spec causes the animation to + restart as soon as it begins. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="fill" attributeType="CSS" id="a" + values="orange; green; blue; yellow; purple" + begin="a.end; -1s" end="a.begin+2s" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-4.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-4.svg new file mode 100644 index 0000000000..c53b3c5fa7 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-4.svg @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="byeByeB()"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function byeByeB() + { + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + // Drop b + var b = document.getElementById('b'); + b.parentNode.removeChild(b); + b = null; + // Snapshot at time t=4s. This is because there are two possible error cases + // we want to detect: + // i) b disappears and we just keep the existing time for a.begin+1s of t=2s + // ii) b disappears and we update the time for a.begin+1s to t=3s + setTimeAndSnapshot(4, false); + } + </script> + <!-- We have an arrangement where a is dependent on b and itself. If b's + interval disappears while a is still in the waiting state then the begin + time "a.begin+1s" should disappear too since a never begun. --> + <rect width="100" height="100" fill="green"> + <set id="a" attributeName="fill" attributeType="CSS" to="red" + begin="b.begin; a.begin+1s"/> + <set id="b" attributeName="y" attributeType="XML" to="0" + begin="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/cycle-self-ref-5.svg b/layout/reftests/svg/smil/syncbase/cycle-self-ref-5.svg new file mode 100644 index 0000000000..e0e36e152a --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/cycle-self-ref-5.svg @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no" ?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="byeByeB()"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script type="text/javascript"> + function byeByeB() + { + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(2.5); + // Drop b + var b = document.getElementById('b'); + b.parentNode.removeChild(b); + b = null; + setTimeAndSnapshot(8, false); + } + </script> + <!-- Similar to cycle-self-ref-4.svg but with end times. + + We have an arrangement where a's end time is dependent on b and on + itself. + + Initially: + - a's end time will be resolved as "b.end", i.e. 3s. + - Accordingly, the instance time for "a.end+2s" will be 5s (3s+2s). + - i.e. a's list of end instance times will be: [3, 5, 9]. + + If b's interval disappears (because we delete b): + - The end time "b.end" will become unresolved. + - i.e. a's list of end instance times will be: [5, 9, unresolved]. + + However, when updating a's end time we should not use the "5s" instance + time since it is based on a's end time which is what we are updating. + + Expected behaviour: + - The instance time of "5s" will be skipped and the time of "9s" will be + used instead. + - At t=8s the animation will still be playing and the rectangle will be + green. + + Failure behaviour: + - The next end instance time in the list will be used, giving a an end + time of 5s. + - The time "a.end+2s" will then be accordingly updated to 7s since a's + end time is now 5s. (Any subsequent attempts to update the time will be + ignored according to SMIL's cycle detection rules.) + - At t=8s the animation will have stopped and the rectangle will be red. + --> + <rect width="100" height="100" fill="red"> + <set id="a" attributeName="fill" attributeType="CSS" to="green" + begin="2s" end="b.end; a.end+2s; 9s"/> + <set id="b" attributeName="y" attributeType="XML" to="0" + begin="1s" end="3s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-1.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-1.svg new file mode 100644 index 0000000000..cb516275a8 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-1.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').setAttribute('end', '0s'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple case of a deleting interval. + The timebase interval is made invalid by script and hence a delete + notification should be propagated to the dependent interval. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="red; red" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-2.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-2.svg new file mode 100644 index 0000000000..6e4df7dbce --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-2.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0.75); + document.getElementById('a').setAttribute('restart', 'never'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Originally we have an interval from -1.5s to 0.5s. We'll ignore 'a's begin + time of t=0s because we are restart="whenNotActive". + At time t=0.1s, 'a' will create a new interval from 1.0 to 1.1s and we'll + add the new instance time of 1.0s. + However, at t=0.75s the restart mode of 'a' is changed to restart="never" + therefore the second interval is deleted and the change should be propagated + to us. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1s" dur="0.1s"/> + <animate attributeName="fill" attributeType="CSS" + values="red; red" + begin="-1.5s; a.begin" dur="2s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-3.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-3.svg new file mode 100644 index 0000000000..7f290b8a0c --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-3.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0.25); + document.getElementById('a').setAttribute('restart', 'never'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + As with deleted-interval-simple-2.svg but this time we should get the + deleted interval notice while in the active state. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1s" dur="0.1s"/> + <animate attributeName="fill" attributeType="CSS" + values="red; red" + begin="-1.5s; a.begin" dur="2s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-4.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-4.svg new file mode 100644 index 0000000000..e7d1a8e599 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-4.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').beginElementAt(0.5); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Originally the third animation's interval is from 1s->3s, but then by + script we add another begin time to 'a' at 0.5, and since 'a' can't + restart, this is the only begin time it will ever generate. Therefore, all + the ends for animation 'b' are before the begin, and there's no valid + interval. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="3s" dur="10s" restart="never"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="b" + begin="1s" end="a.begin" dur="3s"/> + <animate attributeName="fill" attributeType="CSS" + values="red; red" + begin="b.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/deleted-interval-simple-5.svg b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-5.svg new file mode 100644 index 0000000000..677c960330 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/deleted-interval-simple-5.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').removeAttribute('dur'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A case of a changing interval that causes another interval to have an + unresolved begin time and hence be deleted. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s" dur="1s"/> + <animate attributeName="fill" attributeType="CSS" id="b" + values="red; red" + begin="a.end" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/filtered-interval-1.svg b/layout/reftests/svg/smil/syncbase/filtered-interval-1.svg new file mode 100644 index 0000000000..2ed6d549be --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/filtered-interval-1.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + This test ensures that even if we have an old interval, if it is part of an + active dependency chain it should not be filtered. + --> + <rect width="100" height="100" fill="orange"> + <!-- This animation is indirectly dependent on anim 'b' and hence, even + though it appears earlier in the document it should be given + priority. --> + <set attributeName="fill" to="green" begin="a.begin"/> + + <!-- This will generate a series of short intervals such that by t=2s the + interval via which the first animation depends on b might be considered + as a candidate for filtering. --> + <set attributeName="width" to="100" begin="b.begin-2s; a.begin+0.2s" + dur="0.1s" id="a"/> + + <set attributeName="fill" to="red" begin="2s" id="b"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/green-box-ref.svg b/layout/reftests/svg/smil/syncbase/green-box-ref.svg new file mode 100644 index 0000000000..120941444a --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/green-box-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="green"/> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/green-box-ref.xhtml b/layout/reftests/svg/smil/syncbase/green-box-ref.xhtml new file mode 100644 index 0000000000..ce0bc78f12 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/green-box-ref.xhtml @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<html xmlns="http://www.w3.org/1999/xhtml"> +<body> +<svg xmlns="http://www.w3.org/2000/svg" width="120px" height="120px"> + <rect width="100" height="100" fill="green"/> +</svg> +</body> +</html> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-chain-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-chain-1.svg new file mode 100644 index 0000000000..ec71c47eee --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-chain-1.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test some chained interval creation. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1s" dur="4s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="b" + begin="a.begin" dur="4s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="c" + begin="b.begin-1s" dur="4s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="d" + begin="c.begin+0.5s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="d.begin; a.begin" dur="5s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-chain-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-chain-2.svg new file mode 100644 index 0000000000..831f12e262 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-chain-2.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test some chained interval creation. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1s" dur="4s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="b" + begin="a.begin" dur="4s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="c" + begin="b.begin-1s" dur="4s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="d" + begin="c.begin+0.5s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="d.begin; a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-1.svg new file mode 100644 index 0000000000..17f5daf97e --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test a relationship where one element depends on another twice. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin+0.5s; a.begin" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-2.svg new file mode 100644 index 0000000000..1f669b0898 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test a relationship where one element depends on another twice. + (As with previous test but reversing the order of the specifications.) + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin; a.begin+0.5s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-3.svg b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-3.svg new file mode 100644 index 0000000000..d3d2908ebd --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-doubly-dependent-3.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test a relationship where one element depends on another twice and where the + restart mode should cause one instance time to be ignored. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin+0.5s; a.begin" dur="2s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-1.svg new file mode 100644 index 0000000000..3fd87aff8f --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-1.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test an early end with a negative offset. + (An early end is when a new interval restarts the current animation + mid-way.) + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 2s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-0.5s" dur="1s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-2.svg new file mode 100644 index 0000000000..9dc79c318d --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test an early end where two times could be chosen for the following + interval. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1.5s" dur="1s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin+0.25s; a.begin" dur="1s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-3.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-3.svg new file mode 100644 index 0000000000..de8920f48f --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-3.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test an early end where two times could be chosen for the following + interval. + (As before but with a negative offset.) + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1.75s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-0.25s; a.begin" dur="1s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-4.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-4.svg new file mode 100644 index 0000000000..e46c2d62da --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-4.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test an early end where two times could be chosen for the following + interval. + (As before but with a negative offset and with the second animation getting + overlapping intervals from a's begin times, with one such interval being + rejected since it overlaps an already-completed interval when it's + created.) + + Details: At time t=1.75, we generate an interval starting at 1.35 for the + second animation. However, this overlaps that animation's already-complete + previous interval from 0.4s to 1.4s (which is "already complete" because + we're at t=1.75, past its end at 1.4s). So, the new interval is rejected. + --> + <rect width="100" height="100" fill="green"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1.75s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="red" + begin="a.begin-0.4s; a.begin+0.4s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-5.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-5.svg new file mode 100644 index 0000000000..545e640a22 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-5.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test two early ends where one generates an earlier time for the other. + + So both restart at 1.5s, and both old intervals should be ended off. Hence + the syncbase time should be ignored. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0.5s; 1.5s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="0.75s; 1.5s; a.begin-0.5s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-6.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-6.svg new file mode 100644 index 0000000000..f4ea84c903 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-6.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test two early ends where one generates a later time for the other. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0.5s; 1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="0.5s; 1s; a.begin+0.5s" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-early-end-7.svg b/layout/reftests/svg/smil/syncbase/new-interval-early-end-7.svg new file mode 100644 index 0000000000..79f99594a5 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-early-end-7.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test that we don't apply an early end too soon. + + Although the second animation will have an interval from 2s-6s, it shouldn't + be informed about this until the early end happens, at t=3s. Until that time + it should be expecting to start at t=4s. + + If the second animation is started at t=2s it means the early end has been + applied too soon. + --> + <rect width="100" height="100" fill="green"> + <set attributeName="y" attributeType="XML" to="0" id="a" + begin="0s; 3s" dur="5s"/> + <set attributeName="fill" attributeType="CSS" + to="red" begin="a.end-1s" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-end-dep-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-end-dep-1.svg new file mode 100644 index 0000000000..4140569239 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-end-dep-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + The simplest possible end dependency. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s" dur="1s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.end" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-end-negative-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-end-negative-1.svg new file mode 100644 index 0000000000..0ba96dbeb4 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-end-negative-1.svg @@ -0,0 +1,39 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test a dependency with a negative offset that occurs at the end of another + interval. + + This is one of the most important tests in the suite. + + REALLY IMPORTANT: Suppose we generate a new instance time, placed at a + particular instant during the previous interval. In fact, correct behavior + depends on *when* we generate this instance time. If we generate it AFTER + the previous interval has ended, then the new instance time will be + IGNORED. However, if we generate it BEFORE the previous interval has ended + (and if restart="always"), then a new interval will be generated, and the + animation will restart. + (To be absolutely clear: above, the words "AFTER" and "BEFORE" describe + *when the instance time is generated*, as opposed to *where on the timeline + the instance time is placed*). + + So, if a new instance time is generated at the same time as an interval is + due to end what should happen? SMIL's endpoint-exclusive timing seems to + imply that interval ends should be processed first and hence the new + instance time should be ignored. Opera, WebKit and Batik seem to agree on + this. + + Hence why this test is so important. It tests that we are actually + processing ends first. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1.5s" dur="1.5s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green" fill="freeze" + begin="a.begin-0.5s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-end-negative-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-end-negative-2.svg new file mode 100644 index 0000000000..e9c1f2f448 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-end-negative-2.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test a dependency with a negative offset that occurs at the end of another + interval. + (As with the previous test but with an early end.) + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0s; 1.5s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green" fill="freeze" + begin="a.begin-0.5s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-freeze-begin-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-freeze-begin-1.svg new file mode 100644 index 0000000000..07df8fc111 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-freeze-begin-1.svg @@ -0,0 +1,31 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1.5); + document.getElementById('a').setAttribute('begin', '3s'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Tests that when we create an interval we freeze the begin time once it has + started. + + So we have: + + a: begin: 2s + b: begin: a.begin-1s + + at t=1s, b begins + at t=1.5s, a's begin time is updated to 3s which will create a change notice + + However, b should not then restart at t=2s regardless of the restart mode + because once the interval has started the begin time is fixed. + --> + <rect width="100" height="100" fill="red"> + <set attributeName="y" attributeType="XML" to="0" id="a" begin="2s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-1s" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-1.svg new file mode 100644 index 0000000000..8116606d74 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Simple case of a negative offset. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-0.5s" dur="3s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-2.svg new file mode 100644 index 0000000000..e06b9607d8 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-2.svg @@ -0,0 +1,30 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Simple case of a negative offset before the syncbase has begun. + + SMILANIM 3.3.6 Propagating changes to times has: + + When an element begins or ends, the time dependents of the element are + effectively notified of the action, and the schedule for the time + dependents may be affected. Note than an element must actually begin + before any of the time dependents (dependent on the begin) are affected, + and that an element must actually end before any of the time dependents + (dependent on the end) are affected. + + This would suggest that a time dependent that is defined to start BEFORE its + syncbase does not actually start until the syncbase starts. However Opera, + WebKit, and Batik all agree that when we know when the syncbase will start, + we resolve the negative offset in advance. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="3s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="green; orange" + begin="a.begin-1s" dur="3s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-3.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-3.svg new file mode 100644 index 0000000000..fc8f5c0324 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-3.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple syncbase relationship using a negative offset that creates a begin + time before the document begin. We're really just testing for unwanted + clamping here. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-3s" dur="8s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-4.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-4.svg new file mode 100644 index 0000000000..663e3c562a --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-offset-4.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple syncbase relationship using a negative offset that creates a begin + time of 0. Just checking that 0 is not treated as a special value. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="2s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-2s" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-negative-syncbase-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-negative-syncbase-1.svg new file mode 100644 index 0000000000..428becb376 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-negative-syncbase-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple syncbase relationship using negative times. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="-1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-1s" dur="8s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-restart-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-restart-1.svg new file mode 100644 index 0000000000..ce7f6480d1 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-restart-1.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple test that a syncbase that fires twice will also cause its dependent + to run twice (assuming restart="always" which is the default). + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0.5s; 1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-restart-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-restart-2.svg new file mode 100644 index 0000000000..dc03b9bcac --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-restart-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test that restart="whenNotActive" on the syncbase prevents a new instance + time from being propagated to the time dependent. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s; 1.5s" dur="4s" restart="whenNotActive"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-restart-3.svg b/layout/reftests/svg/smil/syncbase/new-interval-restart-3.svg new file mode 100644 index 0000000000..78e79d8c83 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-restart-3.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test that restart="whenNotActive" on the time dependent causes new instance + times from the syncbase to be ignored. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s; 1.5s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s" restart="whenNotActive"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-sample-order-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-sample-order-1.svg new file mode 100644 index 0000000000..3f7b668b02 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-sample-order-1.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test that ends are sampled first. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="-3s; 1.5s" dur="20s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-0.5s; 1.5s" dur="2s" restart="whenNotActive"/> + <!-- + So initially we have: + a: -3->17s + (b): -3.5->-1.5s (instance times: -3.5s, 1.5s) + + At t=1.5s we get an early end on 'a', giving us: + a: 1.5->21.5s + (b): 1.0->3.0s (instance times: 1.0s, 1.5s) + + If, at t=1.5s, we sample the second animation first, we'll start an + interval from 1.5s instead of 1.0s. So this is a test that ends are + actually sampled first. + --> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-simple-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-simple-1.svg new file mode 100644 index 0000000000..ed0ea22d62 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-simple-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + The simplest possible syncbase test. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-simple-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-simple-2.svg new file mode 100644 index 0000000000..25d627805b --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-simple-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + A simple syncbase relationship where the syncbase appears after the + time dependent in the document. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin" dur="2s"/> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-1.svg b/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-1.svg new file mode 100644 index 0000000000..c3b7cc3ead --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-1.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test a relationship where one element depends on another thrice. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin; a.begin; a.begin" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-2.svg b/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-2.svg new file mode 100644 index 0000000000..b1ade9c624 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/new-interval-triply-dependent-2.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test a relationship where one element depends on another thrice. + (As before but with different offsets.) + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="1s" dur="4s"/> + <animate attributeName="fill" attributeType="CSS" + values="orange; green; purple" + begin="a.begin-0.5s; a.begin+0.5s; a.begin" dur="1s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/reftest.list b/layout/reftests/svg/smil/syncbase/reftest.list new file mode 100644 index 0000000000..52728b2a53 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/reftest.list @@ -0,0 +1,99 @@ +# Tests related to SVG Animation (using SMIL) that use syncbase timing. + +# New intervals +== new-interval-simple-1.svg green-box-ref.svg +== new-interval-simple-2.svg green-box-ref.svg +== new-interval-negative-offset-1.svg green-box-ref.svg +== new-interval-negative-offset-2.svg green-box-ref.svg +== new-interval-negative-offset-3.svg green-box-ref.svg +== new-interval-negative-offset-4.svg green-box-ref.svg +== new-interval-negative-syncbase-1.svg green-box-ref.svg +== new-interval-restart-1.svg green-box-ref.svg +== new-interval-restart-2.svg green-box-ref.svg +== new-interval-restart-3.svg green-box-ref.svg +== new-interval-early-end-1.svg green-box-ref.svg +== new-interval-early-end-2.svg green-box-ref.svg +== new-interval-early-end-3.svg green-box-ref.svg +== new-interval-early-end-4.svg green-box-ref.svg +== new-interval-early-end-5.svg green-box-ref.svg +== new-interval-early-end-6.svg green-box-ref.svg +== new-interval-early-end-7.svg green-box-ref.svg +== new-interval-doubly-dependent-1.svg green-box-ref.svg +== new-interval-doubly-dependent-2.svg green-box-ref.svg +== new-interval-doubly-dependent-3.svg green-box-ref.svg +== new-interval-triply-dependent-1.svg green-box-ref.svg +== new-interval-triply-dependent-2.svg green-box-ref.svg +== new-interval-end-negative-1.svg green-box-ref.svg +== new-interval-end-negative-2.svg green-box-ref.svg +== new-interval-end-dep-1.svg green-box-ref.svg +== new-interval-chain-1.svg green-box-ref.svg +== new-interval-chain-2.svg green-box-ref.svg +== new-interval-sample-order-1.svg green-box-ref.svg +== new-interval-freeze-begin-1.svg green-box-ref.svg + +# Changing intervals +== changed-interval-simple-1.svg green-box-ref.svg +== changed-interval-simple-2.svg green-box-ref.svg +== changed-interval-simple-3.svg green-box-ref.svg +== changed-interval-simple-4.svg green-box-ref.svg +== changed-interval-simple-5.svg green-box-ref.svg +== changed-interval-resolved-1.svg green-box-ref.svg +== changed-interval-resolved-2.svg green-box-ref.svg +== changed-interval-sort-1.svg green-box-ref.svg +== changed-interval-change-spec-1.svg green-box-ref.svg +== changed-interval-change-spec-2.svg green-box-ref.svg +== changed-interval-change-spec-3.svg green-box-ref.svg +== changed-interval-change-spec-4.svg green-box-ref.svg + +# Deleted intervals +== deleted-interval-simple-1.svg green-box-ref.svg +== deleted-interval-simple-2.svg green-box-ref.svg +== deleted-interval-simple-3.svg green-box-ref.svg +== deleted-interval-simple-4.svg green-box-ref.svg +== deleted-interval-simple-5.svg green-box-ref.svg + +# Trimmed intervals +== trimmed-interval-1.svg green-box-ref.svg + +# Cyclic dependencies +== cycle-ok-1.svg green-box-ref.svg +== cycle-ok-2.svg green-box-ref.svg +== cycle-ok-3.svg green-box-ref.svg +== cycle-ok-4.svg green-box-ref.svg +== cycle-ok-5.svg green-box-ref.svg +== cycle-self-ref-1.svg green-box-ref.svg +== cycle-self-ref-2.svg green-box-ref.svg +== cycle-self-ref-3.svg green-box-ref.svg +== cycle-self-ref-4.svg green-box-ref.svg +== cycle-self-ref-5.svg green-box-ref.svg +== cycle-invalid-1.svg green-box-ref.svg +== cycle-invalid-2.svg green-box-ref.svg +== cycle-invalid-3.svg green-box-ref.svg +== cycle-invalid-4.svg green-box-ref.svg +== cycle-change-1.svg green-box-ref.svg +== cycle-change-2.svg green-box-ref.svg +== cycle-delete-1.svg green-box-ref.svg +== cycle-recursion-1.svg green-box-ref.svg +== cycle-recursion-2.svg green-box-ref.svg + +# Animation sandwich priority +== sandwich-priority-1.svg green-box-ref.svg +== sandwich-priority-2.svg green-box-ref.svg +== sandwich-priority-3.svg green-box-ref.svg +== sandwich-priority-4.svg green-box-ref.svg +== sandwich-priority-5.svg green-box-ref.svg +== sandwich-priority-6.svg green-box-ref.svg +== sandwich-priority-7.svg green-box-ref.svg +== sandwich-priority-8.svg green-box-ref.svg +== sandwich-priority-9.svg green-box-ref.svg +== sandwich-priority-10.svg green-box-ref.svg +== sandwich-priority-11.svg green-box-ref.svg +== sandwich-priority-12.svg green-box-ref.svg + +# Cross-time container dependencies +== cross-container-1.xhtml green-box-ref.xhtml +== cross-container-2.xhtml green-box-ref.xhtml +== cross-container-3.xhtml green-box-ref.xhtml + +# Filtering +== filtered-interval-1.svg green-box-ref.svg diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-1.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-1.svg new file mode 100644 index 0000000000..9d99fa0829 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-1.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + Normally, the second element would win because it appears later in the + document, but since the first element is dependent on the second, it should + apply on top of the second. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="green" begin="a.begin"/> + <set attributeName="fill" to="red" begin="0s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-10.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-10.svg new file mode 100644 index 0000000000..0732c695f5 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-10.svg @@ -0,0 +1,26 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('b').setAttribute('end', 'a.begin'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + Tests a change to an interval end that leaves the time the same but changes + the dependency chain. + + At first c is dependent on b only. + Then via script we make b dependent on a's begin time so that c's begin time + is indirectly dependent on a's begin time and so should have a higher + priority. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="green" begin="b.end" id="c"/> + <set attributeName="fill" to="orange" begin="0s" end="1s" id="b"/> + <set attributeName="fill" to="red" begin="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-11.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-11.svg new file mode 100644 index 0000000000..05407bd6c9 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-11.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + Test in the waiting state, with frozen animation effects from an + earlier interval. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="green" begin="a.begin" dur="1s" + fill="freeze"/> + <set attributeName="fill" to="red" begin="0s; 3s" dur="1s" id="a" + fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-12.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-12.svg new file mode 100644 index 0000000000..8164e56fa8 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-12.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('a').beginElementAt(1); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + This case includes a complex cycle that should nevertheless produce + consistent results. + + If this fails, it will fail intermittently. The test is not so much + concerned with which colour should win (there are other tests for that) but + simply with determinancy. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" id="a" to="green" begin="b.begin; 3s"/> + <set attributeName="fill" id="b" to="red" begin="a.begin"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-2.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-2.svg new file mode 100644 index 0000000000..3d6d458f50 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-2.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + A longer chain. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="blue" begin="a.begin-0.5s" id="b"/> + <set attributeName="fill" to="green" begin="d.begin"/> + <set attributeName="fill" to="black" begin="c.begin-0.5s" id="d"/> + <set attributeName="x" to="0" begin="b.begin+1s" id="c"/> + <set attributeName="fill" to="red" begin="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-3.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-3.svg new file mode 100644 index 0000000000..f8ba708d75 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-3.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + This chain goes through end and begin specs but SMIL seems to imply that + it's only when one element's begin time is dependent on another's begin time + that it affects the chaining because it should act as if the time base begun + before the the dependent. So in this case 'c' is (indirectly) dependent on + 'a's end time and so shouldn't be given the higher priority. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="red" begin="b.begin-1s" id="c"/> + <set attributeName="x" to="0" begin="a.end-1s" id="b"/> + <set attributeName="fill" to="green" begin="1s" dur="2s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-4.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-4.svg new file mode 100644 index 0000000000..7ce158672a --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-4.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + This case includes a cycle. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" id="b" to="green" begin="a.begin"/> + <set attributeName="fill" id="a" to="red" begin="0s; b.begin"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-5.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-5.svg new file mode 100644 index 0000000000..05d82ffdf1 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-5.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + This case includes many cycles. + + c is dependent on a. + b is dependent on c. + So b is the most dependent and should be on top. + --> + <rect width="100" height="100" fill="purple"> + <set attributeName="fill" id="c" to="orange" begin="a.begin; b.begin"/> + <set attributeName="fill" id="b" to="green" begin="c.begin; b.begin"/> + <set attributeName="fill" id="a" to="red" begin="1s; b.begin; c.begin"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-6.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-6.svg new file mode 100644 index 0000000000..a27b81dfab --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-6.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + Test in the postactive state. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="green" begin="a.begin" + dur="1s" fill="freeze"/> + <set attributeName="fill" to="red" begin="0s" id="a" + dur="1s" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-7.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-7.svg new file mode 100644 index 0000000000..db72072a75 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-7.svg @@ -0,0 +1,27 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(2, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + Test for true dependency checking. + + We construct a tree as follows: + + b-c + a< + d + + If we're doing naive dependency checking that only considers the depth of + a dependency in the tree we'll end up saying that 'c' is dependent on 'd' + but it's not. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="yellow" begin="1s" dur="2s" id="a"/> + <set attributeName="fill" to="purple" begin="a.begin" dur="2s" id="b"/> + <set attributeName="fill" to="red" begin="b.begin" dur="2s" id="c"/> + <set attributeName="fill" to="green" begin="a.begin" dur="2s" id="d"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-8.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-8.svg new file mode 100644 index 0000000000..7d31b87bff --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-8.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('b').setAttribute('begin', 'a.begin'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + Test that we don't filter out a change to the timing model that does not + affect the start time of an interval but which DOES affect the dependency + chain. + + Given the arrangement below, 'a' will have higher priority, as it is later + in the document. However, via script, we make 'b' dependent on 'a' giving + it a higher priority whilst preserving the interval times. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="green" begin="1s" id="b"/> + <set attributeName="fill" to="red" begin="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/sandwich-priority-9.svg b/layout/reftests/svg/smil/syncbase/sandwich-priority-9.svg new file mode 100644 index 0000000000..d8ec1709cd --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/sandwich-priority-9.svg @@ -0,0 +1,21 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(0); + document.getElementById('b').setAttribute('begin', 'a.begin'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + Test of animation sandwich priority based on syncbase dependencies. + + As with test 8 but here we check that such changes are propagated to + dependent elements. + --> + <rect width="100" height="100" fill="orange"> + <set attributeName="fill" to="yellow" begin="1s" id="b"/> + <set attributeName="fill" to="green" begin="b.begin" id="c"/> + <set attributeName="fill" to="red" begin="1s" id="a"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/syncbase/trimmed-interval-1.svg b/layout/reftests/svg/smil/syncbase/trimmed-interval-1.svg new file mode 100644 index 0000000000..c22af2e315 --- /dev/null +++ b/layout/reftests/svg/smil/syncbase/trimmed-interval-1.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload=" + document.documentElement.pauseAnimations(); + document.documentElement.setCurrentTime(1); + document.getElementById('a').setAttribute('end', '0s'); + setTimeAndSnapshot(2, false)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- + The timebase interval is updated such that it would be deleted but because + it is active, it is trimmed instead. Test that the dependent interval is + notified accordingly. + --> + <rect width="100" height="100" fill="red"> + <animate attributeName="y" attributeType="XML" from="0" to="0" id="a" + begin="0.5s" dur="10s"/> + <animate attributeName="fill" attributeType="CSS" + values="purple; green; orange" keyTimes="0; 0.75; 1" + begin="a.end" dur="2s"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-1a-ref.svg b/layout/reftests/svg/smil/timed/appendChild-1a-ref.svg new file mode 100644 index 0000000000..65d4170afa --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-1a-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + </rect> + <rect id="rect2" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-1a.svg b/layout/reftests/svg/smil/timed/appendChild-1a.svg new file mode 100644 index 0000000000..4d740087c1 --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-1a.svg @@ -0,0 +1,30 @@ +<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll + remove the animate element at time 1.1sec to capture this, and + then wait a little, and make sure the animation is frozen there. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + var rect1 = document.getElementById("rect1"); + var rect2 = document.getElementById("rect2"); + var anim = document.getElementById("anim"); + rect2.appendChild(anim); + + // Wait >= 1s before taking screenshot, to give animation time to finish + setTimeout('document.documentElement.removeAttribute("class")', 1100); + } + function delay_go() { + setTimeout(go, 1100); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + <animate id="anim" attributeName="x" + dur="2s" values="0; 50; 100; 150" + calcMode="discrete" /> + </rect> + <rect id="rect2" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-1b-ref.svg b/layout/reftests/svg/smil/timed/appendChild-1b-ref.svg new file mode 100644 index 0000000000..cee137ecc9 --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-1b-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect id="rect2" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-1b.svg b/layout/reftests/svg/smil/timed/appendChild-1b.svg new file mode 100644 index 0000000000..cedf58a8f6 --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-1b.svg @@ -0,0 +1,29 @@ +<!-- This test makes the first rect white (invisible), so that we can + focus just on the second rect. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + var rect1 = document.getElementById("rect1"); + var rect2 = document.getElementById("rect2"); + var anim = document.getElementById("anim"); + rect2.appendChild(anim); + + // Wait >= 1s before taking screenshot, to give animation time to finish + setTimeout('document.documentElement.removeAttribute("class")', 1100); + } + function delay_go() { + setTimeout(go, 1100); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect id="rect1" y="40" width="10" height="10" fill="white"> + <animate id="anim" attributeName="x" + dur="2s" values="0; 50; 100; 150" + calcMode="discrete" /> + </rect> + <rect id="rect2" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-2a-ref.svg b/layout/reftests/svg/smil/timed/appendChild-2a-ref.svg new file mode 100644 index 0000000000..db44b46a7a --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-2a-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + </rect> + <rect id="rect2" x="150" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-2a.svg b/layout/reftests/svg/smil/timed/appendChild-2a.svg new file mode 100644 index 0000000000..19d7c85b8d --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-2a.svg @@ -0,0 +1,30 @@ +<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll + remove the animate element at time 1.1sec to capture this, and + then wait a little, and make sure the animation is frozen there. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + var rect1 = document.getElementById("rect1"); + var rect2 = document.getElementById("rect2"); + var anim = document.getElementById("anim"); + rect2.appendChild(anim); + + // Wait >= 1s before taking screenshot, to give animation time to finish + setTimeout('document.documentElement.removeAttribute("class")', 1100); + } + function delay_go() { + setTimeout(go, 1100); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + <animate id="anim" attributeName="x" + dur="2s" values="0; 50; 100; 150" + calcMode="discrete" fill="freeze"/> + </rect> + <rect id="rect2" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-2b-ref.svg b/layout/reftests/svg/smil/timed/appendChild-2b-ref.svg new file mode 100644 index 0000000000..6bef89aca7 --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-2b-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect id="rect2" x="150" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/appendChild-2b.svg b/layout/reftests/svg/smil/timed/appendChild-2b.svg new file mode 100644 index 0000000000..f8b772bd56 --- /dev/null +++ b/layout/reftests/svg/smil/timed/appendChild-2b.svg @@ -0,0 +1,29 @@ +<!-- This test makes the first rect white (invisible), so that we can + focus just on the second rect. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + var rect1 = document.getElementById("rect1"); + var rect2 = document.getElementById("rect2"); + var anim = document.getElementById("anim"); + rect2.appendChild(anim); + + // Wait >= 1s before taking screenshot, to give animation time to finish + setTimeout('document.documentElement.removeAttribute("class")', 1100); + } + function delay_go() { + setTimeout(go, 1100); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect id="rect1" y="40" width="10" height="10" fill="white"> + <animate id="anim" attributeName="x" + dur="2s" values="0; 50; 100; 150" + calcMode="discrete" fill="freeze"/> + </rect> + <rect id="rect2" y="80" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/paced-1-ref.svg b/layout/reftests/svg/smil/timed/paced-1-ref.svg new file mode 100644 index 0000000000..4a2165f26e --- /dev/null +++ b/layout/reftests/svg/smil/timed/paced-1-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect height="90" width="90" fill="green"></rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/paced-1.svg b/layout/reftests/svg/smil/timed/paced-1.svg new file mode 100644 index 0000000000..0416e0eace --- /dev/null +++ b/layout/reftests/svg/smil/timed/paced-1.svg @@ -0,0 +1,22 @@ +<!-- In paced calcmode, this animation should jump to -990 really fast, + despite the many small-jump values before it, leaving the canvas blank. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + document.documentElement.removeAttribute("class"); + } + function delay_go() { + setTimeout(go, 1000); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect height="90" width="90" fill="green"></rect> + <rect x="40" y="40" width="10" height="10" fill="red"> + <animate attributeName="x" + dur="5s" values="40; 41; 42; 43; 44; 45; 46; 47; 48; 49; 50; -950" + calcMode="paced" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/pause-1-ref.svg b/layout/reftests/svg/smil/timed/pause-1-ref.svg new file mode 100644 index 0000000000..ef492d492b --- /dev/null +++ b/layout/reftests/svg/smil/timed/pause-1-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect x="100" y="40" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/pause-1.svg b/layout/reftests/svg/smil/timed/pause-1.svg new file mode 100644 index 0000000000..36101cadf0 --- /dev/null +++ b/layout/reftests/svg/smil/timed/pause-1.svg @@ -0,0 +1,38 @@ +<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll + pause the animation at time 1.1sec to capture this, and then wait + a little, and make sure the animation is frozen there. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + // Use try/catch, so that we make sure to remove the reftest-wait + // attribute even on older browser versions that don't support + // pauseAnimations. + try { + document.documentElement.pauseAnimations(); + } catch (e) { + // pauseAnimations not implemented. Change rect to red, + // and clear class to fail/end immediately. + document.documentElement.removeAttribute("class"); + var rect = document.getElementById("rect"); + rect.setAttributeNS(null, "fill", "red"); + throw e; + } + + // Wait > 0.5s before taking screenshot, to give animation time to + // jump to next value if the freeze didn't work. + setTimeout('document.documentElement.removeAttribute("class")', 600); + } + function delay_go() { + setTimeout(go, 1100); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect y="40" width="10" height="10" fill="blue"> + <animate id="rect" attributeName="x" + dur="3s" values="0; 50; 100; 150; 200; 250" + calcMode="discrete" fill="freeze"/> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/reftest.list b/layout/reftests/svg/smil/timed/reftest.list new file mode 100644 index 0000000000..600a690d9b --- /dev/null +++ b/layout/reftests/svg/smil/timed/reftest.list @@ -0,0 +1,14 @@ +# Tests related to SVG Animation that use timeouts to interrupt, modify, +# and examine animations. +# +# NOTE: Most of these tests require a few seconds to run. +# (That's longer than most other reftests) + +== paced-1.svg paced-1-ref.svg +== pause-1.svg pause-1-ref.svg +fails == removeChild-1.svg removeChild-1-ref.svg # rect needs to reset +fails == removeChild-2.svg removeChild-2-ref.svg # rect needs to reset +fails == appendChild-1a.svg appendChild-1a-ref.svg # first rect needs to reset +== appendChild-1b.svg appendChild-1b-ref.svg +fails == appendChild-2a.svg appendChild-2a-ref.svg # first rect needs to reset +== appendChild-2b.svg appendChild-2b-ref.svg diff --git a/layout/reftests/svg/smil/timed/removeChild-1-ref.svg b/layout/reftests/svg/smil/timed/removeChild-1-ref.svg new file mode 100644 index 0000000000..a1bbb50933 --- /dev/null +++ b/layout/reftests/svg/smil/timed/removeChild-1-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/removeChild-1.svg b/layout/reftests/svg/smil/timed/removeChild-1.svg new file mode 100644 index 0000000000..905373d710 --- /dev/null +++ b/layout/reftests/svg/smil/timed/removeChild-1.svg @@ -0,0 +1,28 @@ +<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll + remove the animate element at time 1.1sec, give it a little more + time, and see what happens. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + var rect1 = document.getElementById("rect1"); + var anim = document.getElementById("anim"); + rect1.removeChild(anim); + + // Wait > 0.5s before taking screenshot, to give animation time to + // finish, if it's still going + setTimeout('document.documentElement.removeAttribute("class")', 700); + } + function delay_go() { + setTimeout(go, 1100); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + <animate id="anim" attributeName="x" + dur="2s" values="0; 50; 100; 150" + calcMode="discrete" /> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/removeChild-2-ref.svg b/layout/reftests/svg/smil/timed/removeChild-2-ref.svg new file mode 100644 index 0000000000..a1bbb50933 --- /dev/null +++ b/layout/reftests/svg/smil/timed/removeChild-2-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" +> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/timed/removeChild-2.svg b/layout/reftests/svg/smil/timed/removeChild-2.svg new file mode 100644 index 0000000000..ba07abc2af --- /dev/null +++ b/layout/reftests/svg/smil/timed/removeChild-2.svg @@ -0,0 +1,28 @@ +<!-- This test's animation sets x=100 from 1sec to 1.5sec. We'll + remove the animate element at time 1.1sec, give it a little more + time, and see what happens. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script> + function go() { + var rect1 = document.getElementById("rect1"); + var anim = document.getElementById("anim"); + rect1.removeChild(anim); + + // Wait > 0.5s before taking screenshot, to give animation time to + // finish, if it's still going + setTimeout('document.documentElement.removeAttribute("class")', 700); + } + function delay_go() { + setTimeout(go, 1100); + } + document.addEventListener("MozReftestInvalidate", delay_go, false); + setTimeout(delay_go, 4000); // fallback for running outside reftest + </script> + <rect id="rect1" y="40" width="10" height="10" fill="blue"> + <animate id="anim" attributeName="x" + dur="2s" values="0; 50; 100; 150" + calcMode="discrete" fill="freeze" /> + </rect> +</svg> diff --git a/layout/reftests/svg/smil/transform/additive-1-ref.svg b/layout/reftests/svg/smil/transform/additive-1-ref.svg new file mode 100644 index 0000000000..1b5f9a5aad --- /dev/null +++ b/layout/reftests/svg/smil/transform/additive-1-ref.svg @@ -0,0 +1,42 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <g transform="translate(50 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(150 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(250 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(50 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(150 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(250 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(50 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(150 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(250 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(50 350)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/additive-1.svg b/layout/reftests/svg/smil/transform/additive-1.svg new file mode 100644 index 0000000000..20f035a3ac --- /dev/null +++ b/layout/reftests/svg/smil/transform/additive-1.svg @@ -0,0 +1,111 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(1.5, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- not additive --> + <g transform="translate(50 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="90" dur="1s" fill="freeze"/> + </path> + </g> + <!-- to-animation: special additive --> + <g transform="translate(150 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90)"> + <animateTransform attributeName="transform" + type="rotate" to="90" dur="1s" fill="freeze"/> + </path> + </g> + <!-- by-animation: special additive --> + <g transform="translate(250 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90)"> + <animateTransform attributeName="transform" + type="rotate" by="180" dur="1s" fill="freeze"/> + </path> + </g> + <!-- normal additive: same type --> + <g transform="translate(50 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(45)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" dur="1s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- normal additive: different type --> + <g transform="translate(100 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="translate(50)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="90" dur="1s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- stacked additive: same type --> + <g transform="translate(250 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="90" dur="1s" fill="freeze" + additive="sum"/> + <animateTransform attributeName="transform" + type="rotate" from="0" to="90" dur="1s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- stacked additive: different types #1 --> + <g transform="translate(0 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="translate(50)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" dur="1s" fill="freeze" + additive="sum"/> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" dur="1s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- stacked additive: different types #2 --> + <g transform="translate(100 250) skewX(-20)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="skewX(20) translate(50)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" dur="1s" fill="freeze" + additive="sum"/> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" dur="1s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- stacked additive: different types #3 --> + <g transform="translate(200 250) skewX(-20)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="skewX(20) translate(50)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" dur="1s" fill="freeze" + additive="sum"/> + <animateTransform attributeName="transform" + type="translate" from="0" to="30" dur="1s" fill="freeze" + additive="sum"/> + <animateTransform attributeName="transform" + type="translate" from="0" to="-30" dur="1s" fill="freeze" + additive="sum"/> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" dur="1s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- base value with rotation around a centre --> + <g transform="translate(-50 300)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90 50 50)"> + <animateTransform attributeName="transform" + type="translate" from="0 0" to="0 -50" dur="1s" fill="freeze" + additive="sum"/> + </path> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/animate-width-1.svg b/layout/reftests/svg/smil/transform/animate-width-1.svg new file mode 100644 index 0000000000..3f874cdd95 --- /dev/null +++ b/layout/reftests/svg/smil/transform/animate-width-1.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function doTest() { + setTimeAndSnapshot(101, false); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <rect width="100%" height="100%" fill="lime" /> + + <!-- Test 1: We shouldn't animate a width attribute with animateTransform --> + + <rect width="0px" height="50px" fill="red"> + <animateTransform attributeName="width" begin="100s" dur="1s" + from="0" to="100" fill="freeze" /> + </rect> + +</svg> diff --git a/layout/reftests/svg/smil/transform/lime.svg b/layout/reftests/svg/smil/transform/lime.svg new file mode 100644 index 0000000000..c09c6601e8 --- /dev/null +++ b/layout/reftests/svg/smil/transform/lime.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"> + <title>Testcase reference file for generic pass condition</title> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/smil/transform/paced-1-ref.svg b/layout/reftests/svg/smil/transform/paced-1-ref.svg new file mode 100644 index 0000000000..ac843a13e4 --- /dev/null +++ b/layout/reftests/svg/smil/transform/paced-1-ref.svg @@ -0,0 +1,31 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <g id="smiley"> + <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0" + r="40"/> + <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14" + r="14"/> + <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14" + r="14"/> + <circle cx="-10" cy="-14" r="4"/> + <circle cx="10" cy="-14" r="4"/> + <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/> + </g> + </defs> + <g transform="translate(50 50)"> + <use xlink:href="#smiley"/> + </g> + <g transform="translate(150 50)"> + <use xlink:href="#smiley"/> + </g> + <g transform="translate(250 50)"> + <use xlink:href="#smiley"/> + </g> + <g transform="translate(50 150)"> + <use xlink:href="#smiley"/> + </g> + <g transform="translate(150 150)"> + <use xlink:href="#smiley"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/paced-1.svg b/layout/reftests/svg/smil/transform/paced-1.svg new file mode 100644 index 0000000000..2e8238b3cb --- /dev/null +++ b/layout/reftests/svg/smil/transform/paced-1.svg @@ -0,0 +1,64 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(101, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <defs> + <g id="smiley"> + <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0" + r="40"/> + <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14" + r="14"/> + <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14" + r="14"/> + <circle cx="-10" cy="-14" r="4"/> + <circle cx="10" cy="-14" r="4"/> + <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/> + </g> + </defs> + <!-- translation --> + <g transform="translate(0 50)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="translate" fill="freeze" begin="100s" dur="2s" calcMode="paced" + values="-5 -10; 35 20; 95 -60"/> + </use> + </g> + <!-- rotation --> + <g transform="translate(150 50) rotate(-90)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="rotate" fill="freeze" begin="100s" dur="2s" calcMode="paced" + values="20 10 10; 40 -15 25; 160 21 -35"/> + </use> + </g> + <!-- skewY --> + <g transform="translate(250 50) skewY(-30)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewY" fill="freeze" begin="100s" dur="2s" calcMode="paced" + values="10; 40; 50"/> + </use> + </g> + <!-- scale --> + <g transform="translate(50 150) scale(0.5)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="scale" fill="freeze" begin="100s" dur="2s" calcMode="paced" + values="-4 -2.5; 4 3.5; 8 0.5"/> + </use> + </g> + <!-- to-animation + + You can't have to-animation with a paced calcMode. This test should just + produce regular to-animation without any assertions. This is a white-box + test. + --> + <g transform="translate(100 150)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="translate" fill="freeze" begin="100s" dur="2s" calcMode="paced" + to="100"/> + </use> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/reftest.list b/layout/reftests/svg/smil/transform/reftest.list new file mode 100644 index 0000000000..ef97515317 --- /dev/null +++ b/layout/reftests/svg/smil/transform/reftest.list @@ -0,0 +1,18 @@ +# Tests related to SVG Animation (using SMIL), focusing on the animateTransform +# element. + +fuzzy(0-130,0-1000) == additive-1.svg additive-1-ref.svg # bug 981344, bug 1239766 +== animate-width-1.svg lime.svg +fuzzy-if(cocoaWidget,0-5,0-101) fuzzy-if(winWidget,0-15,0-101) fuzzy-if(gtkWidget,0-5,0-101) fuzzy-if(Android,0-16,0-1) == paced-1.svg paced-1-ref.svg # bug 981640, Bug 1293550, Bug 1592998 +fuzzy(0-7,0-90) == rotate-angle-1.svg rotate-angle-ref.svg +fuzzy(0-7,0-90) == rotate-angle-2.svg rotate-angle-ref.svg +fuzzy(0-7,0-130) == rotate-angle-3.svg rotate-angle-ref.svg +fuzzy(0-7,0-90) == rotate-angle-4.svg rotate-angle-ref.svg +fuzzy(0-7,0-60) == rotate-angle-5.svg rotate-angle-ref.svg +fuzzy(0-7,0-306) fuzzy-if(Android,0-16,0-3) == scale-1.svg scale-1-ref.svg # bug 981004, AA difference +== set-transform-1.svg lime.svg +fuzzy(0-7,0-1548) == skew-1.svg skew-1-ref.svg # bug 983671, Bug 1260629 +== translate-clipPath-1.svg lime.svg +== translate-gradient-1.svg lime.svg +== translate-pattern-1.svg lime.svg +== use-1.svg lime.svg diff --git a/layout/reftests/svg/smil/transform/rotate-angle-1.svg b/layout/reftests/svg/smil/transform/rotate-angle-1.svg new file mode 100644 index 0000000000..75ace79c2d --- /dev/null +++ b/layout/reftests/svg/smil/transform/rotate-angle-1.svg @@ -0,0 +1,60 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(101, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <g transform="translate(50 50) rotate(90)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="0" begin="100s" dur="4s" fill="freeze"/> + </path> + </g> + <g transform="translate(150 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="90" begin="100s" dur="1s" fill="freeze"/> + </path> + </g> + <g transform="translate(250 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="180" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> + <g transform="translate(50 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="270" begin="100s" dur="3s" fill="freeze"/> + </path> + </g> + <g transform="translate(150 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="360" begin="100s" dur="4s" fill="freeze"/> + </path> + </g> + <g transform="translate(250 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="540" begin="100s" dur="6s" fill="freeze"/> + </path> + </g> + <g transform="translate(50 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="3600" begin="100s" dur="40s" fill="freeze"/> + </path> + </g> + <g transform="translate(150 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="-270" begin="100s" dur="1s" fill="freeze"/> + </path> + </g> + <g transform="translate(250 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="-540" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/rotate-angle-2.svg b/layout/reftests/svg/smil/transform/rotate-angle-2.svg new file mode 100644 index 0000000000..8d75991aa0 --- /dev/null +++ b/layout/reftests/svg/smil/transform/rotate-angle-2.svg @@ -0,0 +1,60 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(101, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <g transform="translate(44 0) rotate(90 6 50)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 6 50" to="0 6 50" begin="100s" dur="4s" fill="freeze"/> + </path> + </g> + <g transform="translate(144 0)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0,6,50" to="90 6 50" begin="100s" dur="1s" fill="freeze"/> + </path> + </g> + <g transform="translate(244,0)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 6 50" to="180,6,50" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> + <g transform="translate(44,100)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0,6,50" to="270,6,50" begin="100s" dur="3s" fill="freeze"/> + </path> + </g> + <g transform="translate(144,100)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 6 50" to="360 6 50" begin="100s" dur="4s" fill="freeze"/> + </path> + </g> + <g transform="translate(244,100)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 6 50" to="540 6 50" begin="100s" dur="6s" fill="freeze"/> + </path> + </g> + <g transform="translate(44,200)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 6 50" to="3600 6 50" begin="100s" dur="40s" fill="freeze"/> + </path> + </g> + <g transform="translate(144,200)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 6 50" to="-270 6 50" begin="100s" dur="1s" fill="freeze"/> + </path> + </g> + <g transform="translate(244,200)"> + <path d="M4 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 6 50" to="-540 6 50" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/rotate-angle-3.svg b/layout/reftests/svg/smil/transform/rotate-angle-3.svg new file mode 100644 index 0000000000..c24a2a5b54 --- /dev/null +++ b/layout/reftests/svg/smil/transform/rotate-angle-3.svg @@ -0,0 +1,60 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(101, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <g transform="translate(0 0) rotate(90 50 50)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="0 200 50" begin="100s" dur="4s" fill="freeze"/> + </path> + </g> + <g transform="translate(100 0)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="90 50 50" begin="100s" dur="1s" fill="freeze"/> + </path> + </g> + <g transform="translate(200 0)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="180 100 50" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> + <g transform="translate(0 100)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="270 150 50" begin="100s" dur="3s" fill="freeze"/> + </path> + </g> + <g transform="translate(100 100)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="360 200 50" begin="100s" dur="4s" fill="freeze"/> + </path> + </g> + <g transform="translate(200 100)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="540 300 50" begin="100s" dur="6s" fill="freeze"/> + </path> + </g> + <g transform="translate(0 200)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="3600 2000 50" begin="100s" dur="40s" fill="freeze"/> + </path> + </g> + <g transform="translate(100 200)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="-270 50 50" begin="100s" dur="1s" fill="freeze"/> + </path> + </g> + <g transform="translate(200 200)"> + <path d="M48 100h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0 0 50" to="-540 100 50" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/rotate-angle-4.svg b/layout/reftests/svg/smil/transform/rotate-angle-4.svg new file mode 100644 index 0000000000..48a9e8b92f --- /dev/null +++ b/layout/reftests/svg/smil/transform/rotate-angle-4.svg @@ -0,0 +1,79 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(101, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- no animation --> + <g transform="translate(50 50) rotate(90)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"/> + </g> + <!-- accumulate: sum --> + <g transform="translate(150 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="45" begin="100s" dur="0.5s" fill="freeze" + repeatCount="4" accumulate="sum"/> + </path> + </g> + <!-- accumulate: none --> + <g transform="translate(250 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="270" begin="100s" dur="0.75s" fill="freeze" + repeatCount="2"/> + </path> + </g> + <!-- additive: replace --> + <g transform="translate(50 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="180" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> + <!-- additive: sum (adding to base value) --> + <g transform="translate(150 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90)"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="270" begin="100s" dur="1.5s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- additive: sum (adding to other animations) --> + <g transform="translate(250 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" from="0" to="60" begin="100s" dur="2s" fill="freeze"/> + <animateTransform attributeName="transform" + type="rotate" from="0" to="60" begin="100s" dur="2s" fill="freeze" + additive="sum"/> + <animateTransform attributeName="transform" + type="rotate" from="0" to="60" begin="100s" dur="2s" fill="freeze" + additive="sum"/> + </path> + </g> + <!-- to animation --> + <g transform="translate(50 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(45)"> + <animateTransform attributeName="transform" + type="rotate" to="135" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> + <!-- by animation --> + <g transform="translate(150 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(45)"> + <animateTransform attributeName="transform" + type="rotate" by="90" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> + <!-- values animation --> + <g transform="translate(250 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue"> + <animateTransform attributeName="transform" + type="rotate" values="0; 135; 0" begin="100s" dur="1.5s" fill="freeze"/> + </path> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/rotate-angle-5.svg b/layout/reftests/svg/smil/transform/rotate-angle-5.svg new file mode 100644 index 0000000000..354b0f7e0b --- /dev/null +++ b/layout/reftests/svg/smil/transform/rotate-angle-5.svg @@ -0,0 +1,86 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(101, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <!-- Tests to-animation behaviour for a lot of undefined situations. + SVG 1.1 doesn't define what should happen here but the behaviour we + expect is based on other browsers. --> + <!-- to animation: rotation from base value -90 to final value 180 --> + <g transform="translate(50 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90)"> + <animateTransform attributeName="transform" + type="rotate" to="180" begin="100s" dur="1.5s" fill="freeze"/> + </path> + </g> + <!-- to animation: rotation from base value -810 to final value 990 --> + <g transform="translate(150 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-810)"> + <animateTransform attributeName="transform" + type="rotate" to="990" begin="100s" dur="2s" fill="freeze"/> + </path> + </g> + <!-- to animation: rotation from base value -180 to final value 90 but with + other animations combined. + + What happens here is that the rotation animation can't interpolate from + the base value as it's not a rotation transformation, so instead it + assumes an underlying zero matrix as the base value. (see next comment) + --> + <g transform="translate(250 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90) translate(0 50) scale(2)"> + <animateTransform attributeName="transform" + type="rotate" to="180" begin="100s" dur="2s" fill="freeze" additive="sum"/> + </path> + </g> + <!-- to animation: rotate and scale + + Here again the scale animation can't interpolate from its base value + which is of a different type so it assumes a zero matrix NOT an identity + matrix (this is what the SVG WG have decided in the SVGT1.2 Tiny test + suite). + --> + <g transform="translate(50 150) rotate(90)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="scale(2)"> + <animateTransform attributeName="transform" + type="rotate" to="180" begin="100s" dur="1s" fill="freeze" additive="sum"/> + <animateTransform attributeName="transform" + type="scale" to="2" begin="100s" dur="2s" fill="freeze" additive="sum"/> + </path> + </g> + <!-- to animation: translate and rotate + + Likewise here we end up rotating from 0 to 180 because we can't + interpolate from the underlying translation transformation. + --> + <g transform="translate(150 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(-90) translate(0 50) scale(2)"> + <animateTransform attributeName="transform" + type="translate" to="0" begin="100s" dur="1s" fill="freeze" additive="sum"/> + <animateTransform attributeName="transform" + type="rotate" to="180" begin="100s" dur="2s" fill="freeze" additive="sum"/> + </path> + </g> + <!-- The following are from the reference image --> + <g transform="translate(250 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(50 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(150 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(250 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/rotate-angle-ref.svg b/layout/reftests/svg/smil/transform/rotate-angle-ref.svg new file mode 100644 index 0000000000..e69ce351ef --- /dev/null +++ b/layout/reftests/svg/smil/transform/rotate-angle-ref.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <g transform="translate(50 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(150 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(250 50)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(50 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(150 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(250 150)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(50 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(150 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> + <g transform="translate(250 250)"> + <path d="M-2 50h4v -90h4l -6 -10 -6 10h4z" fill="blue" + transform="rotate(90)"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/scale-1-ref.svg b/layout/reftests/svg/smil/transform/scale-1-ref.svg new file mode 100644 index 0000000000..58a3c117f9 --- /dev/null +++ b/layout/reftests/svg/smil/transform/scale-1-ref.svg @@ -0,0 +1,43 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <g id="smiley"> + <circle fill="yellow" stroke="black" stroke-width="1" cx="0" cy="0" + r="20"/> + <circle fill="white" stroke="black" stroke-width="1" cx="-7" cy="-7" + r="7"/> + <circle fill="white" stroke="black" stroke-width="1" cx="7" cy="-7" + r="7"/> + <circle cx="-5" cy="-7" r="2"/> + <circle cx="5" cy="-7" r="2"/> + <path d="m-11 7a13,13 0 0,0 22,0" fill="none" stroke="black"/> + </g> + </defs> + <g transform="translate(50 50)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(150 50)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(250 50)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(50 150)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(150 150)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(250 150)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(50 250)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(150 250)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> + <g transform="translate(250 250)"> + <use xlink:href="#smiley" transform="scale(2)"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/scale-1.svg b/layout/reftests/svg/smil/transform/scale-1.svg new file mode 100644 index 0000000000..7393c35e11 --- /dev/null +++ b/layout/reftests/svg/smil/transform/scale-1.svg @@ -0,0 +1,119 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + window.addEventListener("MozReftestInvalidate", run, false); + + function run() { + setTimeAndSnapshot(101, true); + } + </script> + <defs> + <g id="smiley"> + <circle fill="yellow" stroke="black" stroke-width="1" cx="0" cy="0" + r="20"/> + <circle fill="white" stroke="black" stroke-width="1" cx="-7" cy="-7" + r="7"/> + <circle fill="white" stroke="black" stroke-width="1" cx="7" cy="-7" + r="7"/> + <circle cx="-5" cy="-7" r="2"/> + <circle cx="5" cy="-7" r="2"/> + <path d="m-11 7a13,13 0 0,0 22,0" fill="none" stroke="black"/> + </g> + </defs> + <!-- to animation + + This should interpolate from 0 (not 1) to 4 to match the behaviour + required by the SVGT1.2 test suite and Opera's behaviour. + --> + <g transform="translate(50 50)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" + type="scale" to="4" begin="100s" dur="2s" fill="freeze"/> + </use> + </g> + <!-- from-to animation --> + <g transform="translate(150 50)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" + type="scale" from="-5" to="9" begin="100s" dur="2s" fill="freeze"/> + </use> + </g> + <!-- negative to-animation + + Should go from 0 to -4 over 2s, therefore at t=1s, the scale factor + should be -2, so we add a rotation animation to correct the gradient + --> + <g transform="translate(250 50)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" + type="scale" to="-4" begin="100s" dur="2s" fill="freeze"/> + <animateTransform attributeName="transform" + type="rotate" from="0" to="360" begin="100s" dur="2s" fill="freeze" additive="sum"/> + </use> + </g> + <!-- by animation + + The behaviour at this point is not clear. The definition of by-animation + is: + + "simple animation in which the animation function is defined to offset + the underlying value for the attribute, using a delta that varies over + the course of the simple duration, starting from a delta of 0 and ending + with the delta specified with the by attribute." (SMILANIM 3.2.2) + + Therefore it might seem like by-animation of by="1" means to ADD to the + underlying scale factor. Furthermore, the underlying scale factor when + not otherwise specified might seemt to be 1, but the SVG WG have decided + it's 0. This is inconsistent with the definition of addition for + animateTransform (post-multiplication of matrices) but it is the + behaviour required by SVGT1.2 test suite and used by Opera. + + The following animation should go from 0 to 4, over 2s so at t=1s, the + scale factor should be 2. + --> + <g transform="translate(50 150)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" + type="scale" by="4" begin="100s" dur="2s" fill="freeze"/> + </use> + </g> + <!-- by animation #2 --> + <g transform="translate(150 150)"> + <use xlink:href="#smiley" transform="scale(4)"> + <animateTransform attributeName="transform" + type="scale" by="1" begin="100s" dur="2s" fill="freeze" additive="sum"/> + </use> + </g> + <!-- from-by animation --> + <g transform="translate(250 150)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" + type="scale" from="2" by="0" begin="100s" dur="2s" fill="freeze"/> + </use> + </g> + <!-- values animation --> + <g transform="translate(50 250)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" + type="scale" values="0; 10; 2; 5; -1" begin="100s" dur="2s" fill="freeze"/> + </use> + </g> + <!-- repetition --> + <g transform="translate(150 250)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" type="scale" from="0" + to="0.6" begin="100s" dur="0.3s" repeatCount="4" accumulate="sum" + fill="freeze"/> + </use> + </g> + <!-- repeated to-animation (should NOT accumulate) --> + <g transform="translate(250 250)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" type="scale" + to="6" begin="100s" dur="0.75" repeatCount="2" accumulate="sum" + fill="freeze"/> + </use> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/set-transform-1.svg b/layout/reftests/svg/smil/transform/set-transform-1.svg new file mode 100644 index 0000000000..f698cbaa82 --- /dev/null +++ b/layout/reftests/svg/smil/transform/set-transform-1.svg @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function doTest() { + setTimeAndSnapshot(101, false); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + + <rect width="100%" height="100%" fill="lime" /> + + <!-- Test 1: We shouldn't animate a transform attribute with set --> + + <rect x="50" y="50" width="100" height="100" fill="red"> + <set attributeName="transform" to="75,75" begin="100s"/> + </rect> + + <rect x="50" y="50" width="100" height="100" fill="lime"/> + +</svg> diff --git a/layout/reftests/svg/smil/transform/skew-1-ref.svg b/layout/reftests/svg/smil/transform/skew-1-ref.svg new file mode 100644 index 0000000000..10c7ca8a38 --- /dev/null +++ b/layout/reftests/svg/smil/transform/skew-1-ref.svg @@ -0,0 +1,43 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <g id="smiley"> + <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0" + r="40"/> + <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14" + r="14"/> + <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14" + r="14"/> + <circle cx="-10" cy="-14" r="4"/> + <circle cx="10" cy="-14" r="4"/> + <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/> + </g> + </defs> + <g transform="translate(50 50)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(150 50)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(250 50)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(50 150)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(150 150)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(250 150)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(50 250)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(150 250)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> + <g transform="translate(250 250)"> + <use xlink:href="#smiley" transform="skewX(30)"/> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/skew-1.svg b/layout/reftests/svg/smil/transform/skew-1.svg new file mode 100644 index 0000000000..603c7f4025 --- /dev/null +++ b/layout/reftests/svg/smil/transform/skew-1.svg @@ -0,0 +1,86 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait" + onload="setTimeAndSnapshot(101, true)"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <defs> + <g id="smiley"> + <circle fill="yellow" stroke="black" stroke-width="2" cx="0" cy="0" + r="40"/> + <circle fill="white" stroke="black" stroke-width="1" cx="-14" cy="-14" + r="14"/> + <circle fill="white" stroke="black" stroke-width="1" cx="14" cy="-14" + r="14"/> + <circle cx="-10" cy="-14" r="4"/> + <circle cx="10" cy="-14" r="4"/> + <path d="m-11 14a13,13 0 0,0 22,0" fill="none" stroke="black"/> + </g> + </defs> + <!-- from-to animation --> + <g transform="translate(50 50)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" from="-30" to="90" begin="100s" dur="2s"/> + </use> + </g> + <!-- from-by animation --> + <g transform="translate(150 50)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" from="60" by="-60" begin="100s" dur="2s"/> + </use> + </g> + <!-- by animation --> + <g transform="translate(250 50) skewX(-15)"> + <use xlink:href="#smiley" transform="skewX(15)"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" by="60" begin="100s" dur="2s"/> + </use> + </g> + <!-- to animation --> + <g transform="translate(50 150)"> + <use xlink:href="#smiley" transform="skewX(15)"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" to="45" begin="100s" dur="2s"/> + </use> + </g> + <!-- values animation --> + <g transform="translate(150 150)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" values="10; 40; 20; 60" begin="100s" dur="2s"/> + </use> + </g> + <!-- additive --> + <g transform="translate(250 150)"> + <use xlink:href="#smiley" transform="skewY(-30)"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewY" fill="freeze" to="30" begin="100s" dur="2s"/> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" from="-30" to="90" begin="100s" dur="2s" additive="sum"/> + </use> + </g> + <!-- accumulate: none --> + <g transform="translate(50 250)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" from="20" to="50" begin="100s" dur="0.75s" + repeatCount="3"/> + </use> + </g> + <!-- accumulate: sum --> + <g transform="translate(150 250)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" from="0" to="22.5" begin="100s" dur="0.75" + accumulate="sum" repeatCount="3"/> + </use> + </g> + <!-- angles > 360 --> + <g transform="translate(250 250)"> + <use xlink:href="#smiley"> + <animateTransform attributeName="transform" attributeType="XML" + type="skewX" fill="freeze" from="-690" to="750" begin="100s" dur="2s"/> + </use> + </g> +</svg> diff --git a/layout/reftests/svg/smil/transform/translate-clipPath-1.svg b/layout/reftests/svg/smil/transform/translate-clipPath-1.svg new file mode 100644 index 0000000000..80291076cd --- /dev/null +++ b/layout/reftests/svg/smil/transform/translate-clipPath-1.svg @@ -0,0 +1,39 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function doTest() { + setTimeAndSnapshot(101, false); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + <defs> + <clipPath id="clip"> + <rect x="0" y="0" width="50" height="100%"/> + <animateTransform attributeName="transform" type="translate" begin="100s" dur="1s" + from="0 0" to="-50 0" fill="freeze"/> + </clipPath> + </defs> + + <!-- Test 1: Lime background covered by clipped red block. + After the animation, the clipping path doesn't intersecting the red + block at all, so no red is shown. --> + <rect x="0" width="50" height="100%" fill="lime" /> + <rect x="0" width="50" height="100%" fill="red" + style="clip-path: url(#clip);"/> + + <!-- Test 2: Purple background covered by clipped lime block. + Initially, the clipping path is to the right of the lime, so the purple + background shows through. But after the animation, the clipping path + exactly matches the dimensions of the lime block, which lets it + completly cover all the purple. --> + <g transform="translate(100, 0)"> + <rect x="-50" y="0" width="50" height="100%" fill="purple"/> + <rect x="-50" y="0" width="50" height="100%" fill="lime" + style="clip-path: url(#clip);"/> + </g> + + <!-- Not a test: Paint the rest of the viewport, to match lime.svg --> + <rect x="100" height="100%" width="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/smil/transform/translate-gradient-1.svg b/layout/reftests/svg/smil/transform/translate-gradient-1.svg new file mode 100644 index 0000000000..240777b14e --- /dev/null +++ b/layout/reftests/svg/smil/transform/translate-gradient-1.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function doTest() { + setTimeAndSnapshot(101, false); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + <defs> + <linearGradient id="grad" width="200%"> + <stop offset="0" stop-color="red"/> + <stop offset="1" stop-color="lime"/> + <stop offset="2" stop-color="lime"/> + <animateTransform attributeName="gradientTransform" type="translate" begin="100s" dur="1s" + from="0 0" to="-1 0" fill="freeze"/> + </linearGradient> + </defs> + + <!-- Test 1: Lime background covered by left hand side of gradient. + After the animation, the right hand lime side of the gradient + is visible, so no red is shown. --> + <rect x="0" width="50" height="100%" fill="lime" /> + <rect x="0" width="50" height="100%" fill="url(#grad)"/> + + <!-- Not a test: Paint the rest of the viewport, to match lime.svg --> + <rect x="50" height="100%" width="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/smil/transform/translate-pattern-1.svg b/layout/reftests/svg/smil/transform/translate-pattern-1.svg new file mode 100644 index 0000000000..b6b9983f03 --- /dev/null +++ b/layout/reftests/svg/smil/transform/translate-pattern-1.svg @@ -0,0 +1,28 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> + <script xlink:href="../smil-util.js" type="text/javascript"/> + <script> + function doTest() { + setTimeAndSnapshot(101, false); + } + window.addEventListener("MozReftestInvalidate", doTest, false); + </script> + <defs> + <pattern id="pat" width="200%" height="100%"> + <rect x="0" y="0" width="50" height="100%" fill="red"/> + <rect x="50" y="0" width="50" height="100%" fill="lime"/> + <animateTransform attributeName="patternTransform" type="translate" begin="100s" dur="1s" + from="0 0" to="-50 0" fill="freeze"/> + </pattern> + </defs> + + <!-- Test 1: Lime background covered by left hand side of pattern. + After the animation, the right hand lime side of the pattern + is visible, so no red is shown. --> + <rect x="0" width="50" height="100%" fill="lime" /> + <rect x="0" width="50" height="100%" fill="url(#pat)" /> + + <!-- Not a test: Paint the rest of the viewport, to match lime.svg --> + <rect x="50" height="100%" width="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/smil/transform/use-1.svg b/layout/reftests/svg/smil/transform/use-1.svg new file mode 100644 index 0000000000..eee0b33796 --- /dev/null +++ b/layout/reftests/svg/smil/transform/use-1.svg @@ -0,0 +1,27 @@ +<svg width="100%" xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + class="reftest-wait"> +<script> + function run() { + document.documentElement.setCurrentTime(30); + document.documentElement.removeAttribute('class'); + } + window.addEventListener("MozReftestInvalidate", run, false); +</script> +<defs> + <g id="shape"> + <rect height="100" width="100" fill="red"/> + <rect x="100" height="100" width="100" fill="lime"/> + </g> + + <pattern id="pattern" width="200" height="100" patternUnits="userSpaceOnUse"> + <use xlink:href="#shape"> + <animateTransform attributeName="transform" type="translate" calcMode="discrete" + dur="30s" from="0 0" to="-100 0" fill="freeze"/> + </use> + </pattern> +</defs> +<rect height="100%" width="100%" fill="lime"/> +<rect height="100%" width="100%" fill="url(#pattern)"/> +</svg> + diff --git a/layout/reftests/svg/stroke-dasharray-01-ref.svg b/layout/reftests/svg/stroke-dasharray-01-ref.svg new file mode 100644 index 0000000000..78d9c2d518 --- /dev/null +++ b/layout/reftests/svg/stroke-dasharray-01-ref.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference for a stroke with a dasharray whose gaps add up to 0 still painting</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=885585 --> + + <g fill="none" stroke="black" stroke-width="2"> + <path d="M 100,100 v 100"/> + <path d="M 110,100 h 100"/> + </g> +</svg> diff --git a/layout/reftests/svg/stroke-dasharray-01.svg b/layout/reftests/svg/stroke-dasharray-01.svg new file mode 100644 index 0000000000..39746863ec --- /dev/null +++ b/layout/reftests/svg/stroke-dasharray-01.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test for a stroke with a dasharray whose gaps add up to 0 still painting</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=885585 --> + + <g fill="none" stroke="black" stroke-width="2" stroke-dasharray="10 0"> + <path d="M 100,100 v 100"/> + <path d="M 110,100 h 100"/> + </g> +</svg> diff --git a/layout/reftests/svg/stroke-dasharray-02.svg b/layout/reftests/svg/stroke-dasharray-02.svg new file mode 100644 index 0000000000..147498f4e3 --- /dev/null +++ b/layout/reftests/svg/stroke-dasharray-02.svg @@ -0,0 +1,48 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Test the start point and direction of dashing on circle and ellipse</title> + + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=944704 --> + + <rect width="100%" height="100%" fill="lime"/> + + <!-- Test circle element dashes cover two red circles --> + <circle cx="100" cy="62" r="8" fill="red"/> + <circle cx="66" cy="98" r="8" fill="red"/> + <circle cx="50" cy="50" r="50" fill="none" stroke="lime" stroke-width="30" stroke-dasharray="25 25 25 100000"/> + + <!-- Sanity test to check that two circles cover circle element dashes (i.e. that the previous check didn't pass because the stroke was solid) --> + <circle cx="200" cy="50" r="50" fill="none" stroke="red" stroke-width="10" stroke-dasharray="10 40 10 100000"/> + <circle cx="250" cy="56" r="11" fill="lime"/> + <circle cx="223" cy="96" r="11" fill="lime"/> + + <!-- Test ellipse element dashes cover two red circles --> + <circle cx="95" cy="211" r="8" fill="red"/> + <circle cx="47" cy="225" r="8" fill="red"/> + <ellipse cx="50" cy="200" rx="50" ry="25" fill="none" stroke="lime" stroke-width="25" stroke-dasharray="25 25 25 100000"/> + + <!-- Sanity test to check that two circles cover ellipse element dashes (i.e. that the previous check didn't pass because the stroke was solid) --> + <ellipse cx="200" cy="200" rx="50" ry="25" fill="none" stroke="red" stroke-width="10" stroke-dasharray="10 40 10 100000"/> + <circle cx="250" cy="205" r="11" fill="lime"/> + <circle cx="206" cy="225" r="11" fill="lime"/> + + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1131264 --> + <!-- small circles take a different code path --> + + <!-- Test circle element dashes cover two red circles --> + <circle cx="125" cy="325" r="8" fill="red"/> + <circle cx="50" cy="380" r="8" fill="red"/> + <circle cx="0" cy="0" r=".0008" fill="none" stroke="lime" stroke-width=".0003" stroke-dasharray=".0005 .0005 .0005 100" + transform="translate(50, 300) scale(1e5, 1e5)"/> + + <!-- Sanity test to check that two circles cover circle element dashes (i.e. that the previous check didn't pass because the stroke was solid) --> + <circle cx="0" cy="0" r=".0008" fill="none" stroke="red" stroke-width=".0001" stroke-dasharray=".0001 .0005 .0001 100" + transform="translate(180, 300) scale(1e5, 1e5)"/> + <circle cx="260" cy="305" r="14" fill="lime"/> + <circle cx="235" cy="358" r="14" fill="lime"/> + +</svg> diff --git a/layout/reftests/svg/stroke-dasharray-03.svg b/layout/reftests/svg/stroke-dasharray-03.svg new file mode 100644 index 0000000000..b8dd8928c2 --- /dev/null +++ b/layout/reftests/svg/stroke-dasharray-03.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Test the start point and direction of dashing on rect</title> + + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1122578 --> + + <rect width="100%" height="100%" fill="lime"/> + + <rect x="20" y="20" width="100" height="60" fill="none" stroke="red" stroke-width="10" stroke-dasharray="120,10000"/> + <path d="M20,20 h100 v20" fill="none" stroke="lime" stroke-width="10"/> + + <rect x="20" y="100" width="100" height="60" fill="none" stroke="red" stroke-width="10" stroke-dasharray="120,10000" rx="10" ry="10"/> + <path d="M30,100 h80 a10,10 0 0 1 10,10 v25" fill="none" stroke="lime" stroke-width="14"/> + +</svg> + diff --git a/layout/reftests/svg/stroke-dasharray-and-pathLength-01.svg b/layout/reftests/svg/stroke-dasharray-and-pathLength-01.svg new file mode 100644 index 0000000000..77f5a4d1b3 --- /dev/null +++ b/layout/reftests/svg/stroke-dasharray-and-pathLength-01.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test stroke-dasharray with pathLength and scaling</title> + <rect width="100%" height="100%" fill="lime"/> + <!-- + Here we set the 'pathLength' to twice the actual length of the path, + which should cause the stroke-dasharray values to be scaled down by one + half. Visually, this should effectively cancel out the 2x scaling along + the x-axis introduced by the 'transform' attribute. + --> + <path d="M0.5,10 L100.5,10" stroke="red" stroke-width="18" stroke-dasharray="18 22" pathLength="200" transform="scale(2,1)"/> + <rect x="1" y="1" width="18" height="18" fill="lime"/> + <rect x="41" y="1" width="18" height="18" fill="lime"/> + <rect x="81" y="1" width="18" height="18" fill="lime"/> + <rect x="121" y="1" width="18" height="18" fill="lime"/> + <rect x="161" y="1" width="18" height="18" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/stroke-dasharray-and-text-01-ref.svg b/layout/reftests/svg/stroke-dasharray-and-text-01-ref.svg new file mode 100644 index 0000000000..77f9e01141 --- /dev/null +++ b/layout/reftests/svg/stroke-dasharray-and-text-01-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test stroke-dasharray with text and zooming</title> + <g fill="none" stroke-width="2" stroke="black" stroke-dasharray="64" stroke-linejoin="round" stroke-linecap="round"> + <text font-size="128" x="128" y="128">|</text> + </g> +</svg> diff --git a/layout/reftests/svg/stroke-dasharray-and-text-01.svg b/layout/reftests/svg/stroke-dasharray-and-text-01.svg new file mode 100644 index 0000000000..6e7b165f26 --- /dev/null +++ b/layout/reftests/svg/stroke-dasharray-and-text-01.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" reftest-zoom="2" + width="50%" height="50%"> + <title>Test stroke-dasharray with text and zooming</title> + <g fill="none" stroke-width="1" stroke="black" stroke-dasharray="32" stroke-linejoin="round" stroke-linecap="round"> + <text font-size="64" x="64" y="64">|</text> + </g> +</svg> diff --git a/layout/reftests/svg/stroke-dashoffset-01.svg b/layout/reftests/svg/stroke-dashoffset-01.svg new file mode 100644 index 0000000000..e79325c4eb --- /dev/null +++ b/layout/reftests/svg/stroke-dashoffset-01.svg @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that stroke-dashoffset is independent of stroke-width</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=885585 --> + + <rect width="100%" height="100%" fill="lime"/> + + <path d="M10,30 h300" stroke="red" stroke-width="40" stroke-dashoffset="10" stroke-dasharray="50"/> + <path d="M10,70 h300" stroke="red" stroke-width="20" stroke-dashoffset="20" stroke-dasharray="50"/> + <path d="M10,95 h300" stroke="red" stroke-width="10" stroke-dashoffset="40" stroke-dasharray="50"/> + + <!-- if the stroke-dashoffset is independent of the stroke width then these should cover what's above --> + <rect x="10" y="10" width="40" height="40" fill="lime"/> + <rect x="100" y="10" width="50" height="40" fill="lime"/> + <rect x="200" y="10" width="50" height="40" fill="lime"/> + <rect x="300" y="10" width="10" height="40" fill="lime"/> + + <rect x="10" y="60" width="30" height="20" fill="lime"/> + <rect x="90" y="60" width="50" height="20" fill="lime"/> + <rect x="190" y="60" width="50" height="20" fill="lime"/> + <rect x="290" y="60" width="20" height="20" fill="lime"/> + + <rect x="10" y="90" width="10" height="10" fill="lime"/> + <rect x="70" y="90" width="50" height="10" fill="lime"/> + <rect x="170" y="90" width="50" height="10" fill="lime"/> + <rect x="270" y="90" width="40" height="10" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/stroke-dashoffset-and-pathLength-01.svg b/layout/reftests/svg/stroke-dashoffset-and-pathLength-01.svg new file mode 100644 index 0000000000..2a009961d4 --- /dev/null +++ b/layout/reftests/svg/stroke-dashoffset-and-pathLength-01.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test stroke-dashoffset with pathLength</title> + <!-- + The path is much longer than 100 user units, so if the pathLength is not + factored into the stroke-dashoffset calculation, the stroke will be visible. + A correct implementation will see the first dash pushed off the end of the + path which will mean that the path does not display at all. + --> + <style> + path { + fill: none; + stroke-width: 5; + stroke: red; + stroke-dasharray: 100; + stroke-dashoffset: 100; + } + </style> + <rect width="100%" height="100%" fill="lime"/> + + <path pathLength="100" d="M175,25 A150,150,0,1,1,175,325 A150,150,0,1,1,175,25"/> +</svg> diff --git a/layout/reftests/svg/stroke-linecap-circle-ellipse-01-ref.svg b/layout/reftests/svg/stroke-linecap-circle-ellipse-01-ref.svg new file mode 100644 index 0000000000..47065f0e87 --- /dev/null +++ b/layout/reftests/svg/stroke-linecap-circle-ellipse-01-ref.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference to test that stroke-linecap:"square" is ignored on circles and ellipses</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1178159 --> + + <circle cx="300" cy="300" r="200" stroke="black" fill="none" + stroke-width="80"/> + + <ellipse cx="300" cy="750" rx="150" ry="100" fill="none" + stroke="blue" stroke-width="80"/> +</svg> diff --git a/layout/reftests/svg/stroke-linecap-circle-ellipse-01.svg b/layout/reftests/svg/stroke-linecap-circle-ellipse-01.svg new file mode 100644 index 0000000000..81fc433271 --- /dev/null +++ b/layout/reftests/svg/stroke-linecap-circle-ellipse-01.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that stroke-linecap:"square" is ignored on circles and ellipses</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1178159 --> + + <circle cx="300" cy="300" r="200" stroke="black" fill="none" + stroke-width="80" stroke-linecap="square"/> + + <ellipse cx="300" cy="750" rx="150" ry="100" fill="none" + stroke="blue" stroke-width="80" stroke-linecap="square"/> +</svg> diff --git a/layout/reftests/svg/stroke-linecap-circle-ellipse-dashed-01.svg b/layout/reftests/svg/stroke-linecap-circle-ellipse-dashed-01.svg new file mode 100644 index 0000000000..4ea509fbd6 --- /dev/null +++ b/layout/reftests/svg/stroke-linecap-circle-ellipse-dashed-01.svg @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that stroke-linecap != "butt" is not ignored on circles and + ellipses with dashed stroke</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=1242147 --> + + <rect width="100%" height="100%" fill="lime" /> + + <circle cx="100" cy="100" r="25" fill="red" /> + <circle cx="500" cy="100" r="25" fill="red" /> + <!-- a half circle --> + <circle cx="300" cy="100" r="200" stroke="lime" fill="none" + stroke-width="80" stroke-linecap="round" + stroke-dasharray="628.318 1000" /> + + <path d="M 100,400 l 0,0" stroke="red" stroke-width="50" + stroke-linecap="square" /> + <path d="M 500,400 l 0,0" stroke="red" stroke-width="50" + stroke-linecap="square" /> + <!-- another half circle --> + <ellipse cx="300" cy="400" rx="200" ry="200" fill="none" + stroke="lime" stroke-width="80" stroke-linecap="square" + stroke-dasharray="628.318 1000" /> + +</svg> diff --git a/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-01.svg b/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-01.svg new file mode 100644 index 0000000000..5a6c6ad2c2 --- /dev/null +++ b/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-01.svg @@ -0,0 +1,169 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Test 'stroke-linecap: round' with zero length path segments</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1075399 for paths and + https://bugzilla.mozilla.org/show_bug.cgi?id=1187770 for lines --> + + <style> + +path, line { + stroke-width: 20px; + stroke-linecap: round; +} + +circle { + fill: red; +} + +/* expect lime circles to cover red circles */ +path.circles-expected, line.circles-expected { + stroke: lime; +} + +path.circles-not-expected { + stroke: red; +} + +/* thicker stroke to cover circles-not-expected paths */ +path.coverer { + stroke: lime; + stroke-width: 24px; +} + +/* to show edges of shapes to help in debugging: +g > circle { + stroke: red; + stroke-width: 5px; +} +path.coverer { + stroke: lime; + stroke-width: 18px; +} +*/ + + </style> + + <rect width="100%" height="100%" style="fill:lime"/> + + <!-- Column 1: test single segment zero-length subpaths: --> + + <g transform="translate(25,25)"> + <circle cx="0" cy="0" r="8"/> + <circle cx="50" cy="50" r="8"/> + <circle cx="100" cy="100" r="8"/> + <path class="circles-expected" d="M0,0 L0,0 M20,20 L30,30 M50,50 L50,50 M70,70 L80,80 M100,100 L100,100"/> + </g> + + <g transform="translate(25,75)"> + <circle cx="0" cy="0" r="8"/> + <circle cx="50" cy="50" r="8"/> + <circle cx="100" cy="100" r="8"/> + <path class="circles-expected" d="M0,0 C0,0 0,0 0,0 M20,20 L30,30 M50,50 C50,50 50,50 50,50 M70,70 L80,80 M100,100 C100,100 100,100 100,100"/> + </g> + + <g transform="translate(25,125)"> + <circle cx="0" cy="0" r="8"/> + <circle cx="50" cy="50" r="8"/> + <circle cx="100" cy="100" r="8"/> + <path class="circles-expected" d="M0,0 A0,10 0 0 0 0,0 M20,20 L30,30 M50,50 A0,10 0 0 0 50,50 M70,70 L80,80 M100,100 A0,10 0 0 0 100,100"/> + </g> + + <g transform="translate(25,175)"> + <circle cx="0" cy="0" r="8"/> + <circle cx="50" cy="50" r="8"/> + <circle cx="100" cy="100" r="8"/> + <path class="circles-expected" d="M0,0 Z M20,20 L30,30 M50,50 Z M70,70 L80,80 M100,100 Z"/> + </g> + + + <!-- Column 2: test multi-segment zero-length subpaths: --> + + <g transform="translate(175,25)"> + <circle cx="0" cy="0" r="8"/> + <circle cx="50" cy="50" r="8"/> + <circle cx="100" cy="100" r="8"/> + <path class="circles-expected" d="M0,0 L0,0 M0,0 L0,0 M20,20 L30,30 M50,50 L50,50 L50,50 M70,70 L80,80 M100,100 L100,100 L100,100"/> + </g> + + <g transform="translate(177,75)"> + <circle cx="0" cy="0" r="8"/> + <circle cx="50" cy="50" r="8"/> + <circle cx="100" cy="100" r="8"/> + <path class="circles-expected" d="M0,0 C0,0 0,0 0,0 C0,0 0,0 0,0 M20,20 L30,30 M50,50 C50,50 50,50 50,50 C50,50 50,50 50,50 M70,70 L80,80 M100,100 C100,100 100,100 100,100 C100,100 100,100 100,100"/> + </g> + + <g transform="translate(175,125)"> + <circle cx="0" cy="0" r="8"/> + <circle cx="50" cy="50" r="8"/> + <circle cx="100" cy="100" r="8"/> + <path class="circles-expected" d="M0,0 A0,10 0 0 0 0,0 A0,10 0 0 0 0,0 M20,20 L30,30 M50,50 A0,10 0 0 0 50,50 A0,10 0 0 0 50,50 M70,70 L80,80 M100,100 A0,10 0 0 0 100,100 A0,10 0 0 0 100,100"/> + </g> + + <g transform="translate(175,175)"> + <circle cx="0" cy="0" r="8"/> + <circle cx="50" cy="50" r="8"/> + <circle cx="100" cy="100" r="8"/> + <path class="circles-expected" d="M0,0 Z Z M20,20 L30,30 M50,50 Z Z M70,70 L80,80 M100,100 Z Z"/> + </g> + + + <!-- Column 3: test non-zero-length subpaths that begin, end and contain + zero length segments: --> + + <g transform="translate(325,25)"> + <path class="circles-not-expected" d="M20,20 L20,20 L30,30 L30,30 L40,40 L40,40"/> + <path class="coverer" d="M20,20 L40,40"/> + </g> + + <g transform="translate(325,75)"> + <path class="circles-not-expected" d="M20,20 C20,20 20,20 20,20 C20,20 30,30 30,30 C30,30 30,30 30,30 C30,30 40,40 40,40 C40,40 40,40 40,40"/> + <path class="coverer" d="M20,20 L40,40"/> + </g> + + <g transform="translate(325,125)"> + <path class="circles-not-expected" d="M20,20 A0,10 0 0 0 20,20 A0,10 0 0 0 30,30 A0,10 0 0 0 30,30 A0,10 0 0 0 40,40 A0,10 0 0 0 40,40"/> + <path class="coverer" d="M20,20 L40,40"/> + </g> + + <!-- this one is shorter because the Z's mean we only have path end points + at 20,20 --> + <g transform="translate(325,175)"> + <circle cx="20" cy="20" r="8"/> + <path class="circles-expected" d="M20,20 Z L30,30 Z L40,40 Z"/> + </g> + + + <!-- Column 4: test lone movetos --> + + <g transform="translate(425,25)"> + <path class="circles-not-expected" d="M0,0 M0,0 M20,20 L30,30 M50,50 M50,50 M70,70 L80,80 M100,100 M100,100"/> + <path class="coverer" d="M20,20 L30,30 M70,70 L80,80"/> + </g> + + <!-- Column 5: test stroke-dasharray --> + + <g transform="translate(525,25)"> + <circle cy="0" r="8"/> + <circle cy="40" r="8"/> + <circle cy="80" r="8"/> + <path class="circles-expected" d="M0,0v81" stroke-dasharray="0 40" /> + </g> + <g transform="translate(575,25)"> + <circle cy="0" r="8"/> + <circle cy="40" r="8"/> + <circle cy="80" r="8"/> + <path class="circles-expected" d="M0,0v81" stroke-dasharray="0" /> + </g> + + <!-- Column 6: test zero-length line --> + <g transform="translate(625, 25)"> + <circle cy="0" r="8" /> + <line class="circles-expected" x1="0" y1="0" x2="0" y2="0" /> + </g> + +</svg> diff --git a/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-02.svg b/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-02.svg new file mode 100644 index 0000000000..223a5e0df3 --- /dev/null +++ b/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-02.svg @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + + <title>Test invalidation for 'stroke-linecap: round' with zero length path segments</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1075399 for path and + https://bugzilla.mozilla.org/show_bug.cgi?id=1187770 for line --> + + <script> + +function run() +{ + document.getElementById('path').setAttribute('stroke-linecap', 'butt'); + document.getElementById('line').setAttribute('stroke-linecap', 'butt'); + document.documentElement.removeAttribute('class'); +} + +window.addEventListener("MozReftestInvalidate", run, false); + + </script> + + <rect width="100%" height="100%" style="fill:lime"/> + + <path id="path" stroke="red" stroke-width="200" stroke-linecap="round" + d="M100,100 L100,100"/> + <line id="line" stroke="red" stroke-width="200" stroke-linecap="round" + x1="300" y1="300" x2="300" y2="300"/> + +</svg> diff --git a/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-03.svg b/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-03.svg new file mode 100644 index 0000000000..7d63b537b4 --- /dev/null +++ b/layout/reftests/svg/stroke-linecap-round-w-zero-length-segs-03.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="100%" fill="lime"/> + <g fill="red"> + <circle cx="40" cy="50" r="18"/> + <circle cx="260" cy="50" r="18"/> + </g> + <g stroke-width="40" stroke="lime" stroke-linecap="round"> + <path d="M40, 50z m220,0z"/> + </g> +</svg> + diff --git a/layout/reftests/svg/stroke-linecap-square-w-zero-length-segs-01.svg b/layout/reftests/svg/stroke-linecap-square-w-zero-length-segs-01.svg new file mode 100644 index 0000000000..df395b0e16 --- /dev/null +++ b/layout/reftests/svg/stroke-linecap-square-w-zero-length-segs-01.svg @@ -0,0 +1,154 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Test 'stroke-linecap: square' with zero length path segments</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=589648 for paths and + https://bugzilla.mozilla.org/show_bug.cgi?id=1187770 for lines --> + + <style> + +path, line { + stroke-width: 20px; + stroke-linecap: square; +} + +rect { + fill: red; +} + +/* expect lime squares to cover red rects */ +path.squares-expected, line.squares-expected { + stroke: lime; +} + +path.squares-not-expected { + stroke: red; +} + +/* thicker stroke to cover squares-not-expected paths */ +path.coverer { + stroke: lime; + stroke-width: 24px; +} + +/* to show edges of shapes to help in debugging: +g > rect { + stroke: red; + stroke-width: 5px; +} +path.coverer { + stroke: lime; + stroke-width: 18px; +} +*/ + + </style> + + <rect width="100%" height="100%" style="fill:lime"/> + + <!-- Column 1: test single segment zero-length subpaths: --> + + <g transform="translate(25,25)"> + <rect x="-9" y="-9" width="18" height="18"/> + <rect x="41" y="41" width="18" height="18"/> + <rect x="91" y="91" width="18" height="18"/> + <path class="squares-expected" d="M0,0 L0,0 M20,20 L30,30 M50,50 L50,50 M70,70 L80,80 M100,100 L100,100"/> + </g> + + <g transform="translate(25,75)"> + <rect x="-9" y="-9" width="18" height="18"/> + <rect x="41" y="41" width="18" height="18"/> + <rect x="91" y="91" width="18" height="18"/> + <path class="squares-expected" d="M0,0 C0,0 0,0 0,0 M20,20 L30,30 M50,50 C50,50 50,50 50,50 M70,70 L80,80 M100,100 C100,100 100,100 100,100"/> + </g> + + <g transform="translate(25,125)"> + <rect x="-9" y="-9" width="18" height="18"/> + <rect x="41" y="41" width="18" height="18"/> + <rect x="91" y="91" width="18" height="18"/> + <path class="squares-expected" d="M0,0 A0,10 0 0 0 0,0 M20,20 L30,30 M50,50 A0,10 0 0 0 50,50 M70,70 L80,80 M100,100 A0,10 0 0 0 100,100"/> + </g> + + <g transform="translate(25,175)"> + <rect x="-9" y="-9" width="18" height="18"/> + <rect x="41" y="41" width="18" height="18"/> + <rect x="91" y="91" width="18" height="18"/> + <path class="squares-expected" d="M0,0 Z M20,20 L30,30 M50,50 Z M70,70 L80,80 M100,100 Z"/> + </g> + + + <!-- Column 2: test multi-segment zero-length subpaths: --> + + <g transform="translate(175,25)"> + <rect x="-9" y="-9" width="18" height="18"/> + <rect x="41" y="41" width="18" height="18"/> + <rect x="91" y="91" width="18" height="18"/> + <path class="squares-expected" d="M0,0 L0,0 M0,0 L0,0 M20,20 L30,30 M50,50 L50,50 L50,50 M70,70 L80,80 M100,100 L100,100 L100,100"/> + </g> + + <g transform="translate(177,75)"> + <rect x="-9" y="-9" width="18" height="18"/> + <rect x="41" y="41" width="18" height="18"/> + <rect x="91" y="91" width="18" height="18"/> + <path class="squares-expected" d="M0,0 C0,0 0,0 0,0 C0,0 0,0 0,0 M20,20 L30,30 M50,50 C50,50 50,50 50,50 C50,50 50,50 50,50 M70,70 L80,80 M100,100 C100,100 100,100 100,100 C100,100 100,100 100,100"/> + </g> + + <g transform="translate(175,125)"> + <rect x="-9" y="-9" width="18" height="18"/> + <rect x="41" y="41" width="18" height="18"/> + <rect x="91" y="91" width="18" height="18"/> + <path class="squares-expected" d="M0,0 A0,10 0 0 0 0,0 A0,10 0 0 0 0,0 M20,20 L30,30 M50,50 A0,10 0 0 0 50,50 A0,10 0 0 0 50,50 M70,70 L80,80 M100,100 A0,10 0 0 0 100,100 A0,10 0 0 0 100,100"/> + </g> + + <g transform="translate(175,175)"> + <rect x="-9" y="-9" width="18" height="18"/> + <rect x="41" y="41" width="18" height="18"/> + <rect x="91" y="91" width="18" height="18"/> + <path class="squares-expected" d="M0,0 Z Z M20,20 L30,30 M50,50 Z Z M70,70 L80,80 M100,100 Z Z"/> + </g> + + + <!-- Column 3: test non-zero-length subpaths that begin, end and contain + zero length segments: --> + + <g transform="translate(325,25)"> + <path class="squares-not-expected" d="M20,20 L20,20 L30,30 L30,30 L40,40 L40,40"/> + <path class="coverer" d="M20,20 L40,40"/> + </g> + + <g transform="translate(325,75)"> + <path class="squares-not-expected" d="M20,20 C20,20 20,20 20,20 C20,20 30,30 30,30 C30,30 30,30 30,30 C30,30 40,40 40,40 C40,40 40,40 40,40"/> + <path class="coverer" d="M20,20 L40,40"/> + </g> + + <g transform="translate(325,125)"> + <path class="squares-not-expected" d="M20,20 A0,10 0 0 0 20,20 A0,10 0 0 0 30,30 A0,10 0 0 0 30,30 A0,10 0 0 0 40,40 A0,10 0 0 0 40,40"/> + <path class="coverer" d="M20,20 L40,40"/> + </g> + + <!-- this one is shorter because the Z's mean we only have path end points + at 20,20 --> + <g transform="translate(325,175)"> + <rect x="11" y="11" width="18" height="18"/> + <path class="squares-expected" d="M20,20 Z L30,30 Z L40,40 Z"/> + </g> + + + <!-- Column 4: test lone movetos --> + + <g transform="translate(425,25)"> + <path class="squares-not-expected" d="M0,0 M0,0 M20,20 L30,30 M50,50 M50,50 M70,70 L80,80 M100,100 M100,100"/> + <path class="coverer" d="M20,20 L30,30 M70,70 L80,80"/> + </g> + + <!-- Column 5: test zero-length line --> + <g transform="translate(525, 25)"> + <rect x="-9" y="-9" width="18" height="18"/> + <line class="squares-expected" x1="0" y1="0" x2="0" y2="0" /> + </g> + +</svg> diff --git a/layout/reftests/svg/stroke-linecap-square-w-zero-length-segs-02.svg b/layout/reftests/svg/stroke-linecap-square-w-zero-length-segs-02.svg new file mode 100644 index 0000000000..506b2f12fd --- /dev/null +++ b/layout/reftests/svg/stroke-linecap-square-w-zero-length-segs-02.svg @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + + <title>Test 'stroke-linecap: square' with zero length path segments</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=589648 for path and + https://bugzilla.mozilla.org/show_bug.cgi?id=1187770 for line --> + + <script> + +function run() +{ + document.getElementById('path').setAttribute('stroke-linecap', 'butt'); + document.getElementById('line').setAttribute('stroke-linecap', 'butt'); + document.documentElement.removeAttribute('class'); +} + +window.addEventListener("MozReftestInvalidate", run, false); + + </script> + + <rect width="100%" height="100%" style="fill:lime"/> + + <path id="path" stroke="red" stroke-width="200" stroke-linecap="square" + d="M100,100 L100,100"/> + + <line id="line" stroke="red" stroke-width="200" stroke-linecap="square" + x1="300" y1="300" x2="300" y2="300"/> + +</svg> diff --git a/layout/reftests/svg/stroke-width-percentage-01.svg b/layout/reftests/svg/stroke-width-percentage-01.svg new file mode 100644 index 0000000000..e147ed2fa9 --- /dev/null +++ b/layout/reftests/svg/stroke-width-percentage-01.svg @@ -0,0 +1,14 @@ +<!-- + 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"> + + <title>Testcase for percentage stroke-width</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=373485 --> + + <rect width="100%" height="100%" fill="red"/> + <line y1="50%" x2="100%" y2="50%" stroke="lime" stroke-width="200%"/> + +</svg> diff --git a/layout/reftests/svg/stroke-width-percentage-02-ref.svg b/layout/reftests/svg/stroke-width-percentage-02-ref.svg new file mode 100644 index 0000000000..538f013979 --- /dev/null +++ b/layout/reftests/svg/stroke-width-percentage-02-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="50" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/stroke-width-percentage-02a.svg b/layout/reftests/svg/stroke-width-percentage-02a.svg new file mode 100644 index 0000000000..233baf98a7 --- /dev/null +++ b/layout/reftests/svg/stroke-width-percentage-02a.svg @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <title>Test percentage stroke-width repaints after viewport size change</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=875069 --> + <script> + +function doTest() { + document.getElementById("inner").setAttribute("width", "100"); + document.getElementById("inner").setAttribute("height", "100"); + document.documentElement.removeAttribute('class'); +} + +document.addEventListener("MozReftestInvalidate", doTest, false); +setTimeout(doTest, 4000); // fallback for running outside reftest + + </script> + <svg id="inner" width="50" height="50"> + <!-- Don't give the line's x/y attributes percentages since that + may trigger reflow in which case this test wouldn't be + testing what we intend! + --> + <line x1="50" x2="50" y2="50" stroke="blue" stroke-width="100%"/> + </svg> +</svg> diff --git a/layout/reftests/svg/stroke-width-percentage-02b.svg b/layout/reftests/svg/stroke-width-percentage-02b.svg new file mode 100644 index 0000000000..7a02de656e --- /dev/null +++ b/layout/reftests/svg/stroke-width-percentage-02b.svg @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" + id="outer" style="width:50px; height:50px;"> + <title>Test percentage stroke-width repaints after viewport size change</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=875069 --> + <script> + +function doTest() { + document.getElementById("outer").style.width = "100px"; + document.getElementById("outer").style.height = "100px"; + document.documentElement.removeAttribute('class'); +} + +document.addEventListener("MozReftestInvalidate", doTest, false); +setTimeout(doTest, 4000); // fallback for running outside reftest + + </script> + <!-- Don't give the line's x/y attributes percentages since that + may trigger reflow in which case this test wouldn't be + testing what we intend! + --> + <line x1="50" x2="50" y2="50" stroke="blue" stroke-width="100%"/> +</svg> diff --git a/layout/reftests/svg/stroke-width-percentage-03-iframe.svg b/layout/reftests/svg/stroke-width-percentage-03-iframe.svg new file mode 100644 index 0000000000..5b9ceab1e2 --- /dev/null +++ b/layout/reftests/svg/stroke-width-percentage-03-iframe.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=875069 --> + + <!-- Don't give the line's x/y attributes percentages since that + may trigger reflow in which case this test wouldn't be + testing what we intend! + --> + <line x1="50" x2="50" y2="50" stroke="blue" stroke-width="100%"/> +</svg> diff --git a/layout/reftests/svg/stroke-width-percentage-03-ref.xhtml b/layout/reftests/svg/stroke-width-percentage-03-ref.xhtml new file mode 100644 index 0000000000..52de4624d2 --- /dev/null +++ b/layout/reftests/svg/stroke-width-percentage-03-ref.xhtml @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=875069 --> +<html xmlns="http://www.w3.org/1999/xhtml"> + <body> + <div id="container" style="width: 100px; height: 50px; background: blue;"> + </div> + </body> +</html> diff --git a/layout/reftests/svg/stroke-width-percentage-03.xhtml b/layout/reftests/svg/stroke-width-percentage-03.xhtml new file mode 100644 index 0000000000..c702ab8881 --- /dev/null +++ b/layout/reftests/svg/stroke-width-percentage-03.xhtml @@ -0,0 +1,47 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=875069 --> +<!-- + This test checks that when the content area of the window resizes without + any style change that we reflow stroked SVG elements that have + 'vector-effect' set to 'non-scaling-stroke' and that are under a + transformed ancestor. We use an iframe to allow us to resize the content + area of the embedded document without changing its style. + + This test should end up rendering a blue square, 100px by 50px. +--> +<html xmlns="http://www.w3.org/1999/xhtml" + class="reftest-wait"> + <head> + <style> + +#frame { + /* width and height are given the same value since percentage stroke resolves + as sqrt(width^2 + height^2). + */ + width: 50px; + height: 50px; + border: 0; +} + + </style> + <script> + +function doTest() { + document.getElementById("frame").style.width = "100px"; + document.getElementById("frame").style.height = "100px"; + document.documentElement.removeAttribute("class"); +} + +window.addEventListener("MozReftestInvalidate", doTest, false); +setTimeout(doTest, 4000); // fallback for running outside reftest + + </script> + </head> + <body> + <iframe id="frame" src="stroke-width-percentage-03-iframe.svg"></iframe> + </body> +</html> diff --git a/layout/reftests/svg/style-property-on-script-element-01.svg b/layout/reftests/svg/style-property-on-script-element-01.svg new file mode 100644 index 0000000000..f4f76157bd --- /dev/null +++ b/layout/reftests/svg/style-property-on-script-element-01.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase ensuring 'style' is a property of SVGScriptElement</title> + + <!-- For https://bugzilla.mozilla.org/show_bug.cgi?id=379178 --> + + <rect id="rect" width="100%" height="100%" fill="lime"/> + + <script id="script" type="application/javascript"> + +if (typeof document.getElementById('script').style == 'undefined') { + document.getElementById('rect').setAttribute('fill', 'red'); +} + + </script> + +</svg> diff --git a/layout/reftests/svg/style-without-type-attribute.svg b/layout/reftests/svg/style-without-type-attribute.svg new file mode 100644 index 0000000000..7ea8787198 --- /dev/null +++ b/layout/reftests/svg/style-without-type-attribute.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" > + + <title>Testcase for defaulting of 'type' attribute on <style></title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=421464 --> + + <style> + #r1 { fill: lime; } + </style> + + <style type=""> + #r2 { fill: lime; } + </style> + + <rect id="r1" width="50%" height="100%" fill="red"/> + <rect id="r2" x="50%" width="50%" height="100%" fill="red"/> + +</svg> diff --git a/layout/reftests/svg/suspend-01.svg b/layout/reftests/svg/suspend-01.svg new file mode 100644 index 0000000000..fa681fbe60 --- /dev/null +++ b/layout/reftests/svg/suspend-01.svg @@ -0,0 +1,14 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that suspendRedraw doesn't apply after the end of a script</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=734079 --> + + <rect width="100%" height="100%" fill="lime"/> + <script> + document.documentElement.suspendRedraw(10000); + </script> +</svg> diff --git a/layout/reftests/svg/suspend-02.svg b/layout/reftests/svg/suspend-02.svg new file mode 100644 index 0000000000..a9f7ced9c4 --- /dev/null +++ b/layout/reftests/svg/suspend-02.svg @@ -0,0 +1,27 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <title>Test that suspendRedraw doesn't apply after the end of a script</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=734079 --> + + <script type="text/javascript"> + <![CDATA[ + + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + var svg = document.documentElement; + svg.suspendRedraw(10000); + document.getElementById("r").setAttribute("fill", "lime"); + setTimeout(function() { + svg.removeAttribute("class"); + }, 50); + } + ]]> + </script> + <rect id="r" width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/suspend-03.svg b/layout/reftests/svg/suspend-03.svg new file mode 100644 index 0000000000..33ceb09286 --- /dev/null +++ b/layout/reftests/svg/suspend-03.svg @@ -0,0 +1,24 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()"> + <title>Test that suspendRedraw doesn't apply after the end of a script</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=734079 --> + + <script> + function f() { + var svg = document.documentElement; + setTimeout(function() { + svg.suspendRedraw(10000); + setTimeout(function() { + svg.removeChild(document.getElementById("r")); + svg.removeAttribute("class"); + }, 1); + }, 1); + } + </script> + <rect width="100%" height="100%" fill="lime"/> + <rect id="r" width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/suspend-04.svg b/layout/reftests/svg/suspend-04.svg new file mode 100644 index 0000000000..5ab4b7f249 --- /dev/null +++ b/layout/reftests/svg/suspend-04.svg @@ -0,0 +1,31 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <title>Test that suspendRedraw doesn't apply after the end of a script</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <script type="text/javascript"> + <![CDATA[ + + document.addEventListener("MozReftestInvalidate", doTest, false); + setTimeout(doTest, 4000); // fallback for running outside reftest + + function doTest() { + var svg = document.documentElement; + setTimeout(function() { + svg.suspendRedraw(10000); + var r = document.createElementNS("http://www.w3.org/2000/svg", "rect"); + r.setAttribute("width", "100%"); + r.setAttribute("height", "100%"); + r.setAttribute("fill", "lime"); + svg.appendChild(r); + svg.removeAttribute("class"); + }, 50); + } + ]]> + </script> + <rect width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/suspend-05.svg b/layout/reftests/svg/suspend-05.svg new file mode 100644 index 0000000000..eee051d8f3 --- /dev/null +++ b/layout/reftests/svg/suspend-05.svg @@ -0,0 +1,21 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()"> + <title>Test that unsuspendRedrawAll works</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <script> + function f() { + var svg = document.documentElement; + svg.suspendRedraw(10000); + setTimeout(function() { + svg.unsuspendRedrawAll(); + svg.removeAttribute("class"); + }, 1); + } + </script> + <rect width="100%" height="100%" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/suspend-06.svg b/layout/reftests/svg/suspend-06.svg new file mode 100644 index 0000000000..46551a25da --- /dev/null +++ b/layout/reftests/svg/suspend-06.svg @@ -0,0 +1,24 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()"> + <title>Test that unsuspendRedrawAll works</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <script> + function f() { + var svg = document.documentElement; + setTimeout(function() { + svg.suspendRedraw(10000); + setTimeout(function() { + document.getElementById("r").setAttribute("fill", "lime"); + svg.unsuspendRedrawAll(); + svg.removeAttribute("class"); + }, 1); + }, 1); + } + </script> + <rect id="r" width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/suspend-07.svg b/layout/reftests/svg/suspend-07.svg new file mode 100644 index 0000000000..25f6e337f7 --- /dev/null +++ b/layout/reftests/svg/suspend-07.svg @@ -0,0 +1,25 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()"> + <title>Test that unsuspendRedrawAll works</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <script> + function f() { + var svg = document.documentElement; + setTimeout(function() { + svg.suspendRedraw(10000); + setTimeout(function() { + svg.removeChild(document.getElementById("r")); + svg.unsuspendRedrawAll(); + svg.removeAttribute("class"); + }, 1); + }, 1); + } + </script> + <rect width="100%" height="100%" fill="lime"/> + <rect id="r" width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/suspend-08.svg b/layout/reftests/svg/suspend-08.svg new file mode 100644 index 0000000000..363842911e --- /dev/null +++ b/layout/reftests/svg/suspend-08.svg @@ -0,0 +1,28 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" onload="f()"> + <title>Test that unsuspendRedrawAll works</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + + <script> + function f() { + var svg = document.documentElement; + setTimeout(function() { + svg.suspendRedraw(10000); + setTimeout(function() { + var r = document.createElementNS("http://www.w3.org/2000/svg", "rect"); + r.setAttribute("width", "100%"); + r.setAttribute("height", "100%"); + r.setAttribute("fill", "lime"); + svg.appendChild(r); + svg.unsuspendRedrawAll(); + svg.removeAttribute("class"); + }, 1); + }, 1); + } + </script> + <rect width="100%" height="100%" fill="red"/> +</svg> diff --git a/layout/reftests/svg/svg-blurry-with-subpixel-position-ref.html b/layout/reftests/svg/svg-blurry-with-subpixel-position-ref.html new file mode 100644 index 0000000000..c315509d72 --- /dev/null +++ b/layout/reftests/svg/svg-blurry-with-subpixel-position-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<style> + svg { + width:750px; + height:750px; + margin:3px; + } +</style> + +<svg viewBox="0.5 0.5 750 750"> + <path d="M3,6L277,6M3,12L277,12M3,18L277,18M3,24L277,24M3,30L277,30M3,36L277,36M3,42L277,42M3,48L277,48M3,54L277,54M3,60L277,60M3,66L277,66M3,72L277,72M3,78L277,78M3,84L277,84M3,90L277,90M3,96L277,96M3,102L277,102M3,108L277,108M3,114L277,114" style="stroke-width:1; stroke:black;" /> + <path d="M6,3L6,277M12,3L12,277M18,3L18,277M24,3L24,277M30,3L30,277M36,3L36,277M42,3L42,277M48,3L48,277M54,3L54,277M60,3L60,277M66,3L66,277M72,3L72,277M78,3L78,277M84,3L84,277M90,3L90,277M96,3L96,277M102,3L102,277M108,3L108,277M114,3L114,277" style="stroke-width:1; stroke:black;" /> +</svg> diff --git a/layout/reftests/svg/svg-blurry-with-subpixel-position.html b/layout/reftests/svg/svg-blurry-with-subpixel-position.html new file mode 100644 index 0000000000..20bca71741 --- /dev/null +++ b/layout/reftests/svg/svg-blurry-with-subpixel-position.html @@ -0,0 +1,13 @@ +<!doctype html> +<style> + svg { + width:750px; + height:750px; + margin:2.5px; + } +</style> + +<svg viewBox="0.5 0.5 750 750"> + <path d="M3,6L277,6M3,12L277,12M3,18L277,18M3,24L277,24M3,30L277,30M3,36L277,36M3,42L277,42M3,48L277,48M3,54L277,54M3,60L277,60M3,66L277,66M3,72L277,72M3,78L277,78M3,84L277,84M3,90L277,90M3,96L277,96M3,102L277,102M3,108L277,108M3,114L277,114" style="stroke-width:1; stroke:black;" /> + <path d="M6,3L6,277M12,3L12,277M18,3L18,277M24,3L24,277M30,3L30,277M36,3L36,277M42,3L42,277M48,3L48,277M54,3L54,277M60,3L60,277M66,3L66,277M72,3L72,277M78,3L78,277M84,3L84,277M90,3L90,277M96,3L96,277M102,3L102,277M108,3L108,277M114,3L114,277" style="stroke-width:1; stroke:black;" /> +</svg> diff --git a/layout/reftests/svg/svg-effects-area-unzoomed-ref.xhtml b/layout/reftests/svg/svg-effects-area-unzoomed-ref.xhtml new file mode 100644 index 0000000000..48e4c2e0d1 --- /dev/null +++ b/layout/reftests/svg/svg-effects-area-unzoomed-ref.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test for bug 541270 (SVG Effects area)</title> + <style type="text/css"> + html, body, div { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + /* ick, filters can't be display: none or inside of something display:none! */ + svg { display: block; height: 0; } + </style> +</head> +<body> + <div style="background: #fc3"><div style="background: #3c6; width: 100px;height:25px" /></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-effects-area-unzoomed.xhtml b/layout/reftests/svg/svg-effects-area-unzoomed.xhtml new file mode 100644 index 0000000000..3b2139b9e6 --- /dev/null +++ b/layout/reftests/svg/svg-effects-area-unzoomed.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8"?> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test for bug 541270 (SVG Effects area)</title> + <style type="text/css"> + html, body, div { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + /* ick, filters can't be display: none or inside of something display:none! */ + svg { display: block; height: 0; } + </style> +</head> +<body> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <!-- use a filter that doesn't change anything (since the background + is opaque, we can apply a gamma correction to the alpha channel) + but is unlikely to be optimized away --> + <!-- use sRGB to avoid errors creeping in --> + <filter id="notMuch" x="0%" y="0%" width="100%" height="100%" + style="color-interpolation-filters: sRGB"> + <feComponentTransfer> + <feFuncR type="linear" intercept="0" slope="1" /> + <feFuncG type="linear" intercept="0" slope="1" /> + <feFuncB type="linear" intercept="0" slope="1" /> + <feFuncA type="gamma" exponent="0.5" /> + </feComponentTransfer> + </filter> + </defs> + </svg> + <div style="background: #fc3; filter:url(#notMuch)"><div style="background: #3c6; width: 100px;height:25px" /></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-effects-area-zoomed-in-ref.xhtml b/layout/reftests/svg/svg-effects-area-zoomed-in-ref.xhtml new file mode 100644 index 0000000000..76b99cb3b2 --- /dev/null +++ b/layout/reftests/svg/svg-effects-area-zoomed-in-ref.xhtml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" reftest-zoom="2"> +<head> + <title>Test for bug 541270 (SVG Effects area)</title> + <style type="text/css"> + html, body, div { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + /* ick, filters can't be display: none or inside of something display:none! */ + svg { display: block; height: 0; } + </style> +</head> +<body> + <div style="background: #fc3"><div style="background: #3c6; width: 100px;height:25px" /></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-effects-area-zoomed-in.xhtml b/layout/reftests/svg/svg-effects-area-zoomed-in.xhtml new file mode 100644 index 0000000000..086b981b4b --- /dev/null +++ b/layout/reftests/svg/svg-effects-area-zoomed-in.xhtml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8"?> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" reftest-zoom="2"> +<head> + <title>Test for bug 541270 (SVG Effects area)</title> + <style type="text/css"> + html, body, div { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + /* ick, filters can't be display: none or inside of something display:none! */ + svg { display: block; height: 0; } + </style> +</head> +<body> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <!-- use a filter that doesn't change anything (since the background + is opaque, we can apply a gamma correction to the alpha channel) + but is unlikely to be optimized away --> + <!-- use sRGB to avoid errors creeping in --> + <filter id="notMuch" x="0%" y="0%" width="100%" height="100%" + style="color-interpolation-filters: sRGB"> + <feComponentTransfer> + <feFuncR type="linear" intercept="0" slope="1" /> + <feFuncG type="linear" intercept="0" slope="1" /> + <feFuncB type="linear" intercept="0" slope="1" /> + <feFuncA type="gamma" exponent="0.5" /> + </feComponentTransfer> + </filter> + </defs> + </svg> + <div style="background: #fc3; filter:url(#notMuch)"><div style="background: #3c6; width: 100px;height:25px" /></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-effects-area-zoomed-out-ref.xhtml b/layout/reftests/svg/svg-effects-area-zoomed-out-ref.xhtml new file mode 100644 index 0000000000..494989f09a --- /dev/null +++ b/layout/reftests/svg/svg-effects-area-zoomed-out-ref.xhtml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8"?> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" reftest-zoom="0.6"> +<head> + <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no" /> + <title>Test for bug 541270 (SVG Effects area)</title> + <style type="text/css"> + html, body, div { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + /* ick, filters can't be display: none or inside of something display:none! */ + svg { display: block; height: 0; } + </style> +</head> +<body> + <div style="background: #fc3"><div style="background: #3c6; width: 100px;height:25px" /></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-effects-area-zoomed-out.xhtml b/layout/reftests/svg/svg-effects-area-zoomed-out.xhtml new file mode 100644 index 0000000000..8600eb9b75 --- /dev/null +++ b/layout/reftests/svg/svg-effects-area-zoomed-out.xhtml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="UTF-8"?> +<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" reftest-zoom="0.6"> +<head> + <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, user-scalable=no" /> + <title>Test for bug 541270 (SVG Effects area)</title> + <style type="text/css"> + html, body, div { display: block; width: 100%; height: 100%; border: none; margin: 0; padding: 0; } + /* ick, filters can't be display: none or inside of something display:none! */ + svg { display: block; height: 0; } + </style> +</head> +<body> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + <defs> + <!-- use a filter that doesn't change anything (since the background + is opaque, we can apply a gamma correction to the alpha channel) + but is unlikely to be optimized away --> + <!-- use sRGB to avoid errors creeping in --> + <filter id="notMuch" x="0%" y="0%" width="100%" height="100%" + style="color-interpolation-filters: sRGB"> + <feComponentTransfer> + <feFuncR type="linear" intercept="0" slope="1" /> + <feFuncG type="linear" intercept="0" slope="1" /> + <feFuncB type="linear" intercept="0" slope="1" /> + <feFuncA type="gamma" exponent="0.5" /> + </feComponentTransfer> + </filter> + </defs> + </svg> + <div style="background: #fc3; filter:url(#notMuch)"><div style="background: #3c6; width: 100px;height:25px" /></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-in-foreignObject-01-ref.xhtml b/layout/reftests/svg/svg-in-foreignObject-01-ref.xhtml new file mode 100644 index 0000000000..f701e5d010 --- /dev/null +++ b/layout/reftests/svg/svg-in-foreignObject-01-ref.xhtml @@ -0,0 +1,24 @@ +<!--
+ 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">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=411146 -->
+
+ <title>Reference for svg-in-foreignObject-01.xhtml</title>
+
+ <svg width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ <svg x="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ <svg y="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ <svg x="25%" y="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+
+</svg>
diff --git a/layout/reftests/svg/svg-in-foreignObject-01.xhtml b/layout/reftests/svg/svg-in-foreignObject-01.xhtml new file mode 100644 index 0000000000..0c5cc85cf1 --- /dev/null +++ b/layout/reftests/svg/svg-in-foreignObject-01.xhtml @@ -0,0 +1,27 @@ +<!--
+ 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">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=411146 -->
+
+ <title>Test percentages dimensions for SVG inside a foreignObject</title>
+
+ <foreignObject width="50%" height="50%">
+ <svg xmlns="http://www.w3.org/2000/svg" style="width: 50%; height: 50%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ </foreignObject>
+
+ <svg x="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ <svg y="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ <svg x="25%" y="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+
+</svg>
diff --git a/layout/reftests/svg/svg-in-foreignObject-02.xhtml b/layout/reftests/svg/svg-in-foreignObject-02.xhtml new file mode 100644 index 0000000000..c7d7bc8bcf --- /dev/null +++ b/layout/reftests/svg/svg-in-foreignObject-02.xhtml @@ -0,0 +1,29 @@ +<!--
+ 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">
+
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=411146 -->
+
+ <title>Test percentages dimensions for SVG inside a foreignObject</title>
+
+ <foreignObject width="50%" height="50%">
+ <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;">
+ <svg xmlns="http://www.w3.org/2000/svg" style="width: 50%; height: 50%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ </div>
+ </foreignObject>
+
+ <svg x="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ <svg y="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+ <svg x="25%" y="25%" width="25%" height="25%">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
+ </svg>
+
+</svg>
diff --git a/layout/reftests/svg/svg-in-inner-svg-dimensions.svg b/layout/reftests/svg/svg-in-inner-svg-dimensions.svg new file mode 100644 index 0000000000..7268dfe160 --- /dev/null +++ b/layout/reftests/svg/svg-in-inner-svg-dimensions.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Test that percentage width/height for inner-<svg> resolves against the nearest <svg> ancestor, not the outer-<svg></title> + <rect width="100%" height="100%" fill="lime"/> + <!-- This red rect should be covered by the lime one below --> + <rect x="50" y="50" width="50" height="50" fill="red"/> + <svg width="100" height="100"> + <svg viewBox="0 0 100 100"> + <rect x="50" y="50" width="50" height="50" fill="lime"/> + </svg> + </svg> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-01-ref.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-01-ref.xhtml new file mode 100644 index 0000000000..45cbb2ee3d --- /dev/null +++ b/layout/reftests/svg/svg-integration/box-decoration-break-01-ref.xhtml @@ -0,0 +1,37 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <meta charset="utf-8" /> + <style> + .clip { + clip-path:url(#path); + } + span { + font: 24px sans-serif; + line-height: 2; + color: lime; + background: lime; + } + br { + line-height: 0; + } + </style> +</head> +<body> + <h2>Box-Decoration-Break: Clone</h2> + <span class="clip">The</span><br /> + <span class="clip">quick</span><br /> + <span class="clip">orange fox</span> + + <h2>Box-Decoration-Break: Slice</h2> + <span>The</span> + + <svg xmlns="http://www.w3.org/2000/svg" height="0"> + <defs> + <clipPath id="path" clipPathUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="0.3"/> + </clipPath> + </defs> + </svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-01.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-01.xhtml new file mode 100644 index 0000000000..a033175cd0 --- /dev/null +++ b/layout/reftests/svg/svg-integration/box-decoration-break-01.xhtml @@ -0,0 +1,41 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <meta charset="utf-8" /> + <title>Test of box-decoration-break with clip-path: url</title> + <style> + .clone { + box-decoration-break: clone; + } + span { + font: 24px sans-serif; + line-height: 2; + color: lime; + background: lime; + clip-path: url(#path); + } + br { + line-height: 0; + } + </style> +</head> +<body> + <h2>Box-Decoration-Break: Clone</h2> + <span class="clone">The<br />quick<br />orange fox</span> + + <h2>Box-Decoration-Break: Slice</h2> + <span>The<br />quick<br />orange fox</span> + + <svg xmlns="http://www.w3.org/2000/svg" height="0"> + <defs> + <clipPath id="path" clipPathUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="0.3"/> + </clipPath> + </defs> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-02-ref.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-02-ref.xhtml new file mode 100644 index 0000000000..43d6d45efa --- /dev/null +++ b/layout/reftests/svg/svg-integration/box-decoration-break-02-ref.xhtml @@ -0,0 +1,27 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <meta charset="utf-8" /> + <style> + span { + font: 24px sans-serif; + line-height: 2; + color: lime; + background: lime; + } + br { + line-height: 0; + } + </style> +</head> +<body> + <h2>Box-Decoration-Break: Clone</h2> + <span>The</span><br /> + <span>quick</span><br /> + <span>orange fox</span> + + <h2>Box-Decoration-Break: Slice</h2> + <span>The</span><br /> + <span>quick</span><br /> + <span>orange fox</span> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-02.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-02.xhtml new file mode 100644 index 0000000000..f76d679d15 --- /dev/null +++ b/layout/reftests/svg/svg-integration/box-decoration-break-02.xhtml @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <meta charset="utf-8" /> + <title>Test of box-decoration-break with filter</title> + <style> + .clone { + box-decoration-break: clone; + } + span { + font: 24px sans-serif; + line-height: 2; + color: lime; + background: lime; + filter: blur(0px); + } + br { + line-height: 0; + } + </style> +</head> +<body> + <h2>Box-Decoration-Break: Clone</h2> + <span class="clone">The<br />quick<br />orange fox</span> + + <h2>Box-Decoration-Break: Slice</h2> + <span>The<br />quick<br />orange fox</span> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/box-decoration-break-03.xhtml b/layout/reftests/svg/svg-integration/box-decoration-break-03.xhtml new file mode 100644 index 0000000000..1563b24cf7 --- /dev/null +++ b/layout/reftests/svg/svg-integration/box-decoration-break-03.xhtml @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> + +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <meta charset="utf-8" /> + <title>Test of box-decoration-break with clip-path: url and filter</title> + <style> + .clone { + box-decoration-break: clone; + } + span { + font: 24px sans-serif; + line-height: 2; + color: lime; + background: lime; + clip-path: url(#path); + filter: blur(0px); + } + br { + line-height: 0; + } + </style> +</head> +<body> + <h2>Box-Decoration-Break: Clone</h2> + <span class="clone">The<br />quick<br />orange fox</span> + + <h2>Box-Decoration-Break: Slice</h2> + <span>The<br />quick<br />orange fox</span> + + <svg xmlns="http://www.w3.org/2000/svg" height="0"> + <defs> + <clipPath id="path" clipPathUnits="objectBoundingBox"> + <rect x="0" y="0" width="1" height="0.3"/> + </clipPath> + </defs> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001-ref.html new file mode 100644 index 0000000000..34def2ff95 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 001</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: url(#c1)"></div> + <svg> + <clipPath id="c1"> + <circle cx="100" cy="100" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001.html new file mode 100644 index 0000000000..c506a2b684 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-001.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with no values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle without values for clipping of a square. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: circle();"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002-ref.html new file mode 100644 index 0000000000..007cd80c9d --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 002</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="100" cy="100" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002.html new file mode 100644 index 0000000000..c242dc91b3 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-002.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with farthest-side</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with farthest-side for clipping of a square. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: circle(farthest-side);"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003-ref.html new file mode 100644 index 0000000000..4bb8d89ee1 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 003</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="padding-left: 200px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="100" cy="100" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003.html new file mode 100644 index 0000000000..ae4d2d5098 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-003.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with closest-side</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with the value closest-side for clipping of a square. On pass you + should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 100px; height: 100px; border: solid green 50px; background-color: green; clip-path: circle(closest-side);"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004-ref.html new file mode 100644 index 0000000000..3885dd5547 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 004</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="padding-top: 200px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="100" cy="100" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html new file mode 100644 index 0000000000..6bff6f8399 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-004.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 001</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 0; height: 100px; border: solid green 100px; background-color: green; clip-path: circle(at top 100px left 50%);"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005-ref.html new file mode 100644 index 0000000000..1a52c69567 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 005</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="padding-top: 200px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="100" cy="300" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html new file mode 100644 index 0000000000..aeea854ea2 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-005.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 002</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at bottom 100px left 50%);"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006-ref.html new file mode 100644 index 0000000000..a07cbb66cd --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 006</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 400px; height: 400px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="100" cy="100" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html new file mode 100644 index 0000000000..423f4b24ca --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-006.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 003</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 100px; height: 0; border: solid green 100px; background-color: green; clip-path: circle(at left 100px top 50%);"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007-ref.html new file mode 100644 index 0000000000..caba51737b --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 007</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="100" cy="100" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html new file mode 100644 index 0000000000..fbf204fd7e --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-007.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 004</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at right 100px top 50%);"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008-ref.html new file mode 100644 index 0000000000..cdf8da8ede --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 008</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="150" cy="150" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html new file mode 100644 index 0000000000..564b6cd105 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-008.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 005</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 200px; padding-left: 200px; background-color: green; clip-path: circle(at left -100px top 50%) content-box;"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009-ref.html new file mode 100644 index 0000000000..7d055c4d7d --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 009</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="200" cy="200" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html new file mode 100644 index 0000000000..949c6afd14 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-009.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 006</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-003-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="padding-right: 200px; width: 0; height: 200px; background-color: green; clip-path: circle(at right -100px top 50%) content-box;"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010-ref.html new file mode 100644 index 0000000000..7fed7ee45c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's circle function 010</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="padding: 100px; width: 200px; height: 200px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <circle cx="200" cy="200" r="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html new file mode 100644 index 0000000000..4952c6f48d --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-010.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 007</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-004-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 200px; padding-top: 200px; background-color: green; clip-path: circle(at top -100px left 50%) content-box;"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html new file mode 100644 index 0000000000..d2a00b5e80 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-011.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 008</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-005-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 200px; padding-bottom: 200px; background-color: green; clip-path: circle(at bottom -100px left 50%) content-box;"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-012.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-012.html new file mode 100644 index 0000000000..efded811f8 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-012.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 009</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-006-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 400px; height: 400px; background-color: green; clip-path: circle(100px at 100px 100px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-013.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-013.html new file mode 100644 index 0000000000..482980af9b --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-013.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with position 010</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a rectangle. On pass you should see + a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 400px; height: 400px; background-color: green; clip-path: circle(25% at 25% 25%);"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-014.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-014.html new file mode 100644 index 0000000000..3c4b35d7d3 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-014.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with border-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-007-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position and the keyword border-box for clipping of a + rectangle. On pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: circle(100px at 100px 100px) border-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-015.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-015.html new file mode 100644 index 0000000000..bc8e161cc6 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-015.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with padding-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-008-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position and the keyword padding-box for clipping of a + rectangle. On pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: circle(100px at 100px 100px) padding-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-016.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-016.html new file mode 100644 index 0000000000..7cea5f2bbb --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-016.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with content-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-009-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position and the keyword content-box for clipping of a + rectangle. On pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; clip-path: circle(100px at 100px 100px) content-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-017.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-017.html new file mode 100644 index 0000000000..4947ac1a27 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-017.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function with margin-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-007-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position and the keyword margin-box for clipping of a + rectangle. On pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="margin: 50px; padding: 50px; border: 50px solid green; width: 100px; height: 100px; background-color: green; box-shadow: 0 0 0 50px green; clip-path: circle(100px at 150px 150px) margin-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-018.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-018.html new file mode 100644 index 0000000000..b41d7aecc5 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-018.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function on rectangle 001</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-010-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a differently sized rectangle. On + pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 100px; background-color: green; clip-path: circle(farthest-side at center 100px) content-box; padding: 100px;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-019.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-019.html new file mode 100644 index 0000000000..395002a2d2 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-019.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function on rectangle 002</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a differently sized rectangle. On + pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 200px; height: 400px; background-color: green; clip-path: circle(closest-side at center 100px) content-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-020.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-020.html new file mode 100644 index 0000000000..82b52ae457 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-020.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function on rectangle 003</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-002-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + circle with a position for clipping of a differently sized rectangle. This + also tests the correct usage of the specified formula: + r = sqrt(width^2 + height^2) + On pass you should see a green circle."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 60px; height: 80px; padding: 60px 70px 60px 70px; background-color: green; clip-path: circle(100px) content-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021-ref.html new file mode 100644 index 0000000000..c87ded532f --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021-ref.html @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function on circle 021</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 600px; height: 600px; background-color: green; clip-path: circle();"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021.html new file mode 100644 index 0000000000..a9229e6ea7 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-circle-021.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and circle function on circle 021</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-circle-021-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape circle() with large reference box and percentage radius."> +</head> +<body> + <p>The test passes if there is a green circle.</p> + <div style="width: 600px; height: 600px; background-color: green; clip-path: circle(50%);"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html new file mode 100644 index 0000000000..fc0392da94 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001-ref.html @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's ellipse function 001</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 400px; height: 200px; background-color: green; clip-path: url(#c1);"></div> + <svg> + <clipPath id="c1"> + <ellipse cx="200" cy="100" rx="200" ry="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001.html new file mode 100644 index 0000000000..77ff7b9b0e --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-001.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function without values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse without values for clipping of a rectangle. On pass you should see + a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse();"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-002.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-002.html new file mode 100644 index 0000000000..6b80585b90 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-002.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with absolute radii</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse with absolute radii for clipping of a rectangle. On pass you should + see a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse(200px 100px);"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-003.html new file mode 100644 index 0000000000..9b1051d189 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-003.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function percentage radii</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse with percentage radii for clipping of a rectangle. On pass you + should see a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse(50% 50%);"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-004.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-004.html new file mode 100644 index 0000000000..b1d05cddf5 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-004.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with farthest-side</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse with the value farthest-side for clipping of a rectangle. On pass + you should see a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 400px; height: 200px; background-color: green; clip-path: ellipse(farthest-side farthest-side);"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html new file mode 100644 index 0000000000..116a08e4c1 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-005.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with closest-side</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse with the value closest-side and position for clipping of a + rectangle. On pass you should see a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 400px; height: 200px; padding-top: 200px; background-color: green; clip-path: ellipse(closest-side closest-side at top -100px left 50%) content-box;"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html new file mode 100644 index 0000000000..39c07e98e4 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-006.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with position 001</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse with a position for clipping of a rectangle. On pass you should see + a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 400px; height: 200px; padding-left: 200px; background-color: green; clip-path: ellipse(200px closest-side at left center) content-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-007.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-007.html new file mode 100644 index 0000000000..ca23693c2c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-007.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with position 002</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse with a position for clipping of a rectangle. On pass you should see + a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 200px; height: 200px; padding-left: 200px; background-color: green; clip-path: ellipse(farthest-side 50% at left center) content-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-008.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-008.html new file mode 100644 index 0000000000..560cfc0761 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-ellipse-008.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and ellipse function with border-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-ellipse-001-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + ellipse with the keyword border-box for clipping of a rectangle. On pass + you should see a green horizontal ellipse."> +</head> +<body> + <p>The test passes if there is a green horizontal ellipse.</p> + <div style="width: 200px; height: 200px; padding-left: 200px; background-color: green; clip-path: ellipse(closest-side closest-side) border-box;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001-ref.html new file mode 100644 index 0000000000..6bfa2d39fd --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001-ref.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reference for clip-path's inset function 001</title> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 100px; + height: 100px; + border: solid green 40px; + background-color: green; + position: relative; + top: 10px; + left: 10px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square not touching the edges</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001a.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001a.html new file mode 100644 index 0000000000..35eab0305c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001a.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and inset function with 10px on all sides</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> + <link rel="match" href="clip-path-inset-001-ref.html"> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 100px; + height: 100px; + border: solid green 50px; + background-color: green; + clip-path: inset(10px); + } + </style> +</head> +<body> + <p>The test passes if there is a green square not touching the edges</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001b.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001b.html new file mode 100644 index 0000000000..7af06c8907 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001b.html @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and inset function with different insets on each side</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> + <link rel="match" href="clip-path-inset-001-ref.html"> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 120px; + height: 100px; + border: solid green 50px; + background-color: green; + clip-path: inset(10px 20px); + position: relative; + left: -10px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square not touching the edges</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001c.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001c.html new file mode 100644 index 0000000000..81c016084c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-001c.html @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and inset function with different insets for all 4 sides</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> + <link rel="match" href="clip-path-inset-001-ref.html"> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 110px; + height: 100px; + border: solid green 50px; + background-color: green; + clip-path: inset(5px 10px 15px 20px); + position: relative; + left: -10px; + top: 5px; + } + </style> +</head> +<body> + <p>The test passes if there is a green square not touching the edges</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002-ref.html new file mode 100644 index 0000000000..1c15399e3d --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002-ref.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reference for clip-path's inset function (with rounded corners) 002</title> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 180px; + height: 180px; + background-color: green; + position: relative; + top: 10px; + left: 10px; + border-radius: 20px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rect not touching the sides with rounded corners</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002a.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002a.html new file mode 100644 index 0000000000..2ac95f1beb --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002a.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and inset function with uniformly rounded corners</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> + <link rel="match" href="clip-path-inset-002-ref.html"> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 100px; + height: 100px; + border: solid green 50px; + background-color: green; + clip-path: inset(10px round 20px); + } + </style> +</head> +<body> + <p>The test passes if there is a green rect not touching the sides with rounded corners</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002b.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002b.html new file mode 100644 index 0000000000..1a87f8258a --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002b.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and inset function with uniformly rounded corners</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> + <link rel="match" href="clip-path-inset-002-ref.html"> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 100px; + height: 100px; + border: solid green 50px; + background-color: green; + clip-path: inset(10px round 20px 20px 20px 20px); + } + </style> +</head> +<body> + <p>The test passes if there is a green rect not touching the sides with rounded corners</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002c.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002c.html new file mode 100644 index 0000000000..01b60634f7 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-002c.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and inset function with uniformly rounded corners</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> + <link rel="match" href="clip-path-inset-002-ref.html"> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 100px; + height: 100px; + border: solid green 50px; + background-color: green; + clip-path: inset(10px round 20px / 20px); + } + </style> +</head> +<body> + <p>The test passes if there is a green rect not touching the sides with rounded corners</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003-ref.html new file mode 100644 index 0000000000..faec64ce7c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003-ref.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Ref test for clip-path's inset function (with different rounded corners) 003</title> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 180px; + height: 180px; + background-color: green; + position: relative; + top: 10px; + left: 10px; + border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px; + } + </style> +</head> +<body> + <p>The test passes if there is a green rect not touching the sides with rounded corners, with different radii</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003.html new file mode 100644 index 0000000000..5c57c39239 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-inset-003.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and inset function with different rounded corners</title> + <link rel="help" href="https://drafts.csswg.org/css-shapes/#typedef-basic-shape"> + <link rel="match" href="clip-path-inset-003-ref.html"> + <link rel="author" title="Manish Goregaokar" href="mailto:manish@mozilla.com"> + <style type="text/css"> + #square { + width: 100px; + height: 100px; + border: solid green 50px; + background-color: green; + clip-path: inset(10px round 10px 20px 30px 40px / 50px 60px 70px 80px); + } + </style> +</head> +<body> + <p>The test passes if there is a green rect not touching the sides with rounded corners, with different radii</p> + <div id="square"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-001.html new file mode 100644 index 0000000000..bd3093f15b --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-001.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with absolute values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'polygon' for clipping. Test absolute value arguments. On pass you should + see a green square and no red."> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(50px 50px, 200px 50px, 200px 150px, 50px 150px)"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-002.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-002.html new file mode 100644 index 0000000000..b34a73228e --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-002.html @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with percentage values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'polygon' for clipping. Test percentage values for arguments. Percentage + values are relative to specified reference box. If no reference box was + specified, percentage values are relative to border-box. A number of + percentage values are specified as coordinates. On pass you should see a + green square and no red."> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(20% 25%, 80% 25%, 80% 75%, 20% 75%)"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-003.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-003.html new file mode 100644 index 0000000000..067a3f939a --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-003.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with absolute and percentage values</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-rectangle-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'polygon' for clipping. Test absolute and percentage value arguments. On + pass you should see a green square and no red."> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; position: absolute; clip-path: polygon(20% 50px, 200px 25%, 200px 150px, 20% 75%)"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-004.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-004.html new file mode 100644 index 0000000000..7c937ed3ea --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-004.html @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with fill rule evenodd</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-rectangle-border-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape 'polygon' for clipping. + The point list for the polygon creates a 'whole' with the dimension of the background. With + the fill rule 'evenodd', this whole is clipped out. The clipping makes the green background + of the parent div box visible. + On pass you should see a green box with a blue border."> +</head> +<body> + <p>The test passes if there is a green rectangle with a blue border.</p> + <div style="background-color: green; width: 250px;"> + <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: polygon(evenodd, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 200px 50px, 200px 150px, 50px 150px, 50px 50px, 0 50px)"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-005.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-005.html new file mode 100644 index 0000000000..5b141290fe --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-005.html @@ -0,0 +1,26 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path property and polygon function with fill rule nonzero</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-rectangle-border-ref.html"> + <meta name="assert" content="The clip-path property takes the basic shape + 'polygon' for clipping. The point list for the polygon creates a 'hole' + with the dimension of the background of the clipped element. With the fill + rule 'nonzero', this hole is clipped out. The clipping makes the green + background of the parent div box visible. On pass you should see a green + square with a blue border."> +</head> +<body> + <p>The test passes if there is a green rectangle with a blue border.</p> + <div style="background-color: green; width: 250px;"> + <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: polygon(nonzero, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 50px 50px, 50px 150px, 200px 150px, 200px 50px, 0 50px)"></div> + </div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-006.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-006.html new file mode 100644 index 0000000000..cb345de91d --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-006.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with padding-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-square-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box 'padding-box' for the polygon() function by mixing percentage + and absolute values as coordinates. On sucess you should see a green square + and no red."> +</head> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; +} +</style> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="clip-path: polygon(0% 0%, 100% 0%, 100px 100%, 0 100px) padding-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-007.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-007.html new file mode 100644 index 0000000000..9d3c2dc9c3 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-007.html @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with border-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-stripes-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box 'border-box' for the polygon() function by mixing percentage + and absolute values as coordinates. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; + border-left: lime solid 50px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) border-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-008.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-008.html new file mode 100644 index 0000000000..04edaf5a5a --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-008.html @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with margin-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-stripes-002-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box 'margin-box' for the polygon() function by mixing percentage + and absolute values as coordinates. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +</head> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 25px; + border-left: lime solid 25px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(12.5% 25%, 37.5% 50px, 75px 50%, 25px 100px) margin-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-009.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-009.html new file mode 100644 index 0000000000..2debdc38e4 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-009.html @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with content-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-square-002-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box 'content-box' for the polygon() function by mixing percentage + and absolute values as coordinates. On sucess you should see a green square + and no red."> +</head> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 25px; +} +</style> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="clip-path: polygon(0% 0px, 50px 0%, 100% 50px, 0px 100%) content-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.html new file mode 100644 index 0000000000..37f1ad5f81 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.html @@ -0,0 +1,37 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with fill-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-stripes-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box. 'fill-box' was specified but is not supported for HTML + elements. The used value should be 'border-box' for the polygon() function + instead. By mixing percentage and absolute values as coordinates we check + the correct used reference box. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; + border-left: lime solid 50px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(-75px -50%, 50% -25px, 25px 150%, -75px 75px) + fill-box"></div> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-011.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-011.html new file mode 100644 index 0000000000..f8a80ef2df --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-011.html @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with stroke-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-stripes-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box. 'stroke-box' was specified but is not supported for HTML + elements. The used value should be 'border-box' for the polygon() function + instead. By mixing percentage and absolute values as coordinates we check + the correct used reference box. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; + border-left: lime solid 50px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) stroke-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-012.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-012.html new file mode 100644 index 0000000000..dc48d662e5 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-012.html @@ -0,0 +1,36 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with view-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-stripes-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box. 'view-box' was specified but is not supported for HTML + elements. The used value should be 'border-box' for the polygon() function + instead. By mixing percentage and absolute values as coordinates we check + the correct used reference box. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; + border-left: lime solid 50px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) view-box"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-013.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-013.html new file mode 100644 index 0000000000..203c7e1015 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-013.html @@ -0,0 +1,51 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon different units</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-stripes-003-ref.html"> + <meta name="assert" content="Test the support of different units for + polygon coordinates. The test passes if you see a multiple green and blue + stripe pairs. For each pair, the blue and green stripe must be of same + length."> +<style> +div { + width: 100%; + height: 20px; + background-color: green; + padding: 0; + margin: 0; +} +div:nth-child(odd) { + margin-bottom: 5px; + background-color: blue; +} +</style> +<body> + <p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p> + <div style="clip-path: polygon(0 0, 50% 0, 50% 20px, 0 20px)"></div> + <div style="width: 50%"></div> + + <div style="clip-path: polygon(0 0, 20em 0, 20em 20px, 0 20px)"></div> + <div style="width: 20em"></div> + + <!-- Activate when SVG2 is supported. + <div style="clip-path: polygon(0 0, 50vw 0, 50vw 20px, 0 20px)"></div> + <div style="width: 50vw"></div> + + <div style="clip-path: polygon(0 0, 40vh 0, 40vh 20px, 0 20px)"></div> + <div style="width: 40vh"></div> + + <div style="clip-path: polygon(0 0, calc(30% + 15px) 0, calc(30% + 15px) 20px, 0 20px)"></div> + <div style="width: calc(30% + 15px)"></div>--> + + <div style="clip-path: polygon(0 0, 30ex 0, 30ex 20px, 0 20px)"></div> + <div style="width: 30ex"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-border-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-border-ref.html new file mode 100644 index 0000000000..2a9f65f163 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-border-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green rectangle with a blue border.</p> + <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-ref.html new file mode 100644 index 0000000000..45bc902c3d --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-rectangle-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green rectangle and no red.</p> + <div style="margin-top: 50px; margin-left: 50px; position: absolute; width: 150px; height: 100px; background-color: green;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-square-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-001-ref.html new file mode 100644 index 0000000000..f0f26e065c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-001-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="width: 100px; height: 100px; background-color: green; margin: 75px;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-square-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-002-ref.html new file mode 100644 index 0000000000..1831ecebae --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-square-002-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div style="width: 50px; height: 50px; background-color: green; margin: 75px;"></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-001-ref.html new file mode 100644 index 0000000000..6add82da00 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-001-ref.html @@ -0,0 +1,39 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Test clip-path and polygon with border-box</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths"> + <link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path"> + <link rel="match" href="clip-path-stripes-001-ref.html"> + <meta name="assert" content="The clip-path property allows specifying + basic shapes and reference boxes. This test checks the usage of the correct + reference box 'border-box' for the polygon() function by mixing percentage + and absolute values as coordinates. On sucess you should see a green + vertical stripe next to a lime green vertical stripe. Both should be of equal + size."> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 50px; + border-left: lime solid 50px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: url(#c1)"></div> + <svg> + <clipPath id="c1"> + <rect x="0" y="50" width="100" height="100"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-002-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-002-ref.html new file mode 100644 index 0000000000..6a0132fb69 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-002-ref.html @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +</head> +<style> +div { + width: 50px; + height: 50px; + background-color: green; + padding: 25px; + margin: 25px; + border: red solid 25px; + border-left: lime solid 25px; +} +</style> +<body> + <p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p> + <div style="clip-path: polygon(12.5% 25%, 37.5% 50px, 75px 50%, 25px 100px) margin-box"></div> + <svg> + <clipPath id="c1"> + <rect x="0" y="50" width="50" height="50"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-003-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-003-ref.html new file mode 100644 index 0000000000..731ff91533 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stripes-003-ref.html @@ -0,0 +1,63 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<html> +<head> + <title>CSS Masking: Reftest reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> +<style> +div { + height: 20px; + width: 100%; + background-color: green; + padding: 0; + margin: 0; +} +div:nth-child(odd) { + margin-bottom: 5px; + background-color: blue; +} +</style> +<body> + <p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p> + <div style="clip-path: url(#c1)"></div> + <div style="width: 50%"></div> + + <div style="clip-path: url(#c2)"></div> + <div style="width: 20em"></div> + + <!--<div style="clip-path: url(#c3)"></div> + <div style="width: 50vw"></div> + + <div style="clip-path: url(#c4)"></div> + <div style="width: 40vh"></div> + + <div style="clip-path: url(#c5)"></div> + <div style="width: calc(30% + 15px)"></div>--> + + <div style="clip-path: url(#c6)"></div> + <div style="width: 30ex"></div> + <svg> + <clipPath id="c1" clipPathUnits="objectBoundingBox"> + <rect width="0.5" height="1"/> + </clipPath> + <clipPath id="c2"> + <rect width="20em" height="20"/> + </clipPath> + <!--<clipPath id="c3"> + <rect width="50vw" height="20"/> + </clipPath> + <clipPath id="c4"> + <rect width="40vh" height="20"/> + </clipPath> + <clipPath id="c5"> + <rect width="calc(30% + 15px)" height="20"/> + </clipPath>--> + <clipPath id="c6"> + <rect width="30ex" height="20"/> + </clipPath> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001-ref.html new file mode 100644 index 0000000000..64d41f90c5 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<body> + <svg width="367" height="146.8" style="overflow: hidden;" aria-label="A chart."> + <g> + <rect x="20" y="22" width="297" height="119" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect> + <g> + <g> + <rect x="20" y="140" width="297" height="1" stroke="none" stroke-width="0" fill="#dddddd"></rect> + </g> + <g> + <path d="M25.785714285714285,131.35382L36.35714285714286,140.5L46.92857142857143,136.76864333333333L57.5,140.5L68.07142857142857,140.5L78.64285714285714,108.29988466666667L89.21428571428571,140.5L99.78571428571428,138.777318L110.35714285714286,140.5L120.92857142857143,136.838106L131.5,136.09950466666666L142.07142857142856,137.82533333333333L152.64285714285714,128.40448866666668L163.21428571428572,133.099748L173.78571428571428,140.5L184.35714285714286,125.99917666666667L194.92857142857142,127.75560666666667L205.5,134.93449066666668L216.07142857142856,125.536184L226.64285714285714,140.29468L237.21428571428572,138.080528L247.78571428571428,136.22847866666666L258.3571428571429,140.5L268.92857142857144,122.33464733333334L279.5,140.5L290.07142857142856,140.5L300.6428571428571,32.77095600000001L311.2142857142857,106.47371666666666" stroke="#5f8fc9" stroke-width="2" fill-opacity="1" fill="none"></path> + </g> + </g> + </g> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001.html new file mode 100644 index 0000000000..30ddee2d56 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-stroke-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<body> + <svg width="367" height="146.8" style="overflow: hidden;" aria-label="A chart."> + <defs id="defs"> + <clipPath id="_ABSTRACT_RENDERER_ID_1"> + <rect x="20" y="22" width="297" height="124"></rect> + </clipPath> + </defs> + <g> + <rect x="20" y="22" width="297" height="119" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect> + <g clip-path="url(#_ABSTRACT_RENDERER_ID_1)"> + <g> + <rect x="20" y="140" width="297" height="1" stroke="none" stroke-width="0" fill="#dddddd"></rect> + </g> + <g> + <path d="M25.785714285714285,131.35382L36.35714285714286,140.5L46.92857142857143,136.76864333333333L57.5,140.5L68.07142857142857,140.5L78.64285714285714,108.29988466666667L89.21428571428571,140.5L99.78571428571428,138.777318L110.35714285714286,140.5L120.92857142857143,136.838106L131.5,136.09950466666666L142.07142857142856,137.82533333333333L152.64285714285714,128.40448866666668L163.21428571428572,133.099748L173.78571428571428,140.5L184.35714285714286,125.99917666666667L194.92857142857142,127.75560666666667L205.5,134.93449066666668L216.07142857142856,125.536184L226.64285714285714,140.29468L237.21428571428572,138.080528L247.78571428571428,136.22847866666666L258.3571428571429,140.5L268.92857142857144,122.33464733333334L279.5,140.5L290.07142857142856,140.5L300.6428571428571,32.77095600000001L311.2142857142857,106.47371666666666" stroke="#5f8fc9" stroke-width="2" fill-opacity="1" fill="none"></path> + </g> + </g> + </g> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001-ref.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001-ref.html new file mode 100644 index 0000000000..f4a0c48e93 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001-ref.html @@ -0,0 +1,5 @@ +<svg> + <g> + <circle cx="50" cy="50" r="50" style="fill: green;"></circle> + </g> +</svg> diff --git a/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001.html b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001.html new file mode 100644 index 0000000000..44ec2997f2 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-transform-001.html @@ -0,0 +1,10 @@ +<svg> + <defs> + <clipPath id="clip" transform="translate(-50,0)"> + <rect x="0" y="0" width="100" height="100" transform="translate(50,0)"></rect> + </clipPath> + </defs> + <g clip-path="url(#clip)"> + <circle cx="50" cy="50" r="50" style="fill: green;"></circle> + </g> +</svg> diff --git a/layout/reftests/svg/svg-integration/clip-path/reftest.list b/layout/reftests/svg/svg-integration/clip-path/reftest.list new file mode 100644 index 0000000000..82d4c813f5 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/reftest.list @@ -0,0 +1,61 @@ +# These tests verify that CSS clip-path behaves properly. +# e.g. clip-path: polygon(nonzero, 3px 3px, 20% 20%) + +# Following tests adapted from W3C csswg-test repo +== clip-path-polygon-001.html clip-path-rectangle-ref.html +== clip-path-polygon-002.html clip-path-rectangle-ref.html +== clip-path-polygon-003.html clip-path-rectangle-ref.html +== clip-path-polygon-004.html clip-path-rectangle-border-ref.html +== clip-path-polygon-005.html clip-path-rectangle-border-ref.html +== clip-path-polygon-006.html clip-path-square-001-ref.html +== clip-path-polygon-007.html clip-path-stripes-001-ref.html +== clip-path-polygon-008.html clip-path-stripes-002-ref.html +== clip-path-polygon-009.html clip-path-square-002-ref.html +== clip-path-polygon-010.html clip-path-stripes-001-ref.html +== clip-path-polygon-011.html clip-path-stripes-001-ref.html +== clip-path-polygon-012.html clip-path-stripes-001-ref.html +fuzzy(0-1,0-20) == clip-path-polygon-013.html clip-path-stripes-003-ref.html + +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-001.html clip-path-circle-001-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-002.html clip-path-circle-001-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-003.html clip-path-circle-001-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-004.html clip-path-circle-001-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-005.html clip-path-circle-002-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-006.html clip-path-circle-001-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-007.html clip-path-circle-002-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-008.html clip-path-circle-002-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-009.html clip-path-circle-003-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-010.html clip-path-circle-004-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-011.html clip-path-circle-005-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-012.html clip-path-circle-006-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-013.html clip-path-circle-002-ref.html +fuzzy-if(!useDrawSnapshot,34-70,696-925) == clip-path-circle-014.html clip-path-circle-007-ref.html +fuzzy-if(!useDrawSnapshot,34-70,696-925) == clip-path-circle-015.html clip-path-circle-008-ref.html +fuzzy-if(!useDrawSnapshot,34-70,696-925) == clip-path-circle-016.html clip-path-circle-009-ref.html +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-16,0-9) fuzzy-if(!useDrawSnapshot,34-70,696-920) == clip-path-circle-017.html clip-path-circle-007-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-018.html clip-path-circle-010-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-019.html clip-path-circle-002-ref.html +fuzzy-if(!useDrawSnapshot,35-70,696-800) == clip-path-circle-020.html clip-path-circle-002-ref.html +fuzzy-if(winWidget||cocoaWidget,0-1,0-11) == clip-path-circle-021.html clip-path-circle-021-ref.html + +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-001.html clip-path-ellipse-001-ref.html +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-002.html clip-path-ellipse-001-ref.html +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-003.html clip-path-ellipse-001-ref.html +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-004.html clip-path-ellipse-001-ref.html +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-005.html clip-path-ellipse-001-ref.html +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-006.html clip-path-ellipse-001-ref.html +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-007.html clip-path-ellipse-001-ref.html +fuzzy-if(!useDrawSnapshot,36-40,1096-1162) == clip-path-ellipse-008.html clip-path-ellipse-001-ref.html + +== clip-path-inset-001a.html clip-path-inset-001-ref.html +== clip-path-inset-001b.html clip-path-inset-001-ref.html +== clip-path-inset-001c.html clip-path-inset-001-ref.html +# Anti-aliasing behavior for masking and borders is different +fuzzy-if(useDrawSnapshot,0-64,0-146) fuzzy-if(!useDrawSnapshot,0-2,0-28) == clip-path-inset-002a.html clip-path-inset-002-ref.html +fuzzy-if(useDrawSnapshot,0-64,0-146) fuzzy-if(!useDrawSnapshot,0-2,0-28) == clip-path-inset-002b.html clip-path-inset-002-ref.html +fuzzy-if(useDrawSnapshot,0-64,0-146) fuzzy-if(!useDrawSnapshot,0-2,0-28) == clip-path-inset-002c.html clip-path-inset-002-ref.html +fuzzy-if(useDrawSnapshot,0-64,0-340) fuzzy-if(!useDrawSnapshot,0-1,0-60) == clip-path-inset-003.html clip-path-inset-003-ref.html + +fuzzy(0-1,0-17) == clip-path-stroke-001.html clip-path-stroke-001-ref.html + +== clip-path-transform-001.html clip-path-transform-001-ref.html diff --git a/layout/reftests/svg/svg-integration/clipPath-html-01-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-01-extref.xhtml new file mode 100644 index 0000000000..7751e5f1fb --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-01-extref.xhtml @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="position:absolute; top:0; left:0; clip-path: url(clipPath-html-01.xhtml#c1); width:500px; height:500px; background:lime;"></div> + <svg:svg height="0"> + <!-- use an empty g to force clipPath-html-01.xhtml to load before onload --> + <svg:use xlink:href="clipPath-html-01.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-01-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-01-ref.svg new file mode 100644 index 0000000000..182b042172 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-01-ref.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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="250" y="0" width="250" height="500" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-01.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-01.xhtml new file mode 100644 index 0000000000..d1f5135053 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-01.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:500px; height:500px; background:lime;"></div> + <svg:svg height="0"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:clipPath id="c1" clipPathUnits="objectBoundingBox"> + <svg:rect x="0.5" y="0" width="0.5" height="1"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-02-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-02-extref.xhtml new file mode 100644 index 0000000000..433d5d471f --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-02-extref.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="clip-path: url(clipPath-html-02.xhtml#c1); width:500px; height:200px; background:lime;"> + <div style="height:200px;"/> + <div style="height:200px; background:blue;"/> + </div> + <svg:svg height="0"> + <!-- use an empty g to force clipPath-html-02.xhtml to load before onload --> + <svg:use xlink:href="clipPath-html-02.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-02-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-02-ref.svg new file mode 100644 index 0000000000..83065a0cd6 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-02-ref.svg @@ -0,0 +1,9 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="0" y="0" width="500" height="200" fill="lime"/> + <rect x="0" y="200" width="500" height="120" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-02.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-02.xhtml new file mode 100644 index 0000000000..8429e71c7a --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-02.xhtml @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:500px; height:200px; background:lime;"> + <div style="height:200px;"/> + <div style="height:200px; background:blue;"/> + </div> + + <svg:svg height="0"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:clipPath id="c1" clipPathUnits="objectBoundingBox"> + <svg:rect x="0" y="0" width="1" height="0.8"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-03-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-03-extref.xhtml new file mode 100644 index 0000000000..fb0d8e87cf --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-03-extref.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="clip-path: url(clipPath-html-03.xhtml#c1); width:500px; height:200px; background:lime;"> + <div style="height:200px;"/> + <div style="height:200px; background:blue;"/> + </div> + <svg:svg height="0"> + <!-- use an empty g to force clipPath-html-03.xhtml to load before onload --> + <svg:use xlink:href="clipPath-html-03.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-03-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-03-ref.svg new file mode 100644 index 0000000000..19cf5eb16b --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-03-ref.svg @@ -0,0 +1,10 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="0" y="0" width="100" height="150" fill="lime"/> + <rect x="100" y="0" width="100" height="200" fill="lime"/> + <rect x="100" y="200" width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-03.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-03.xhtml new file mode 100644 index 0000000000..eb6a1edbcc --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-03.xhtml @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:500px; height:200px; background:lime;"> + <div style="height:200px;"/> + <div style="height:200px; background:blue;"/> + </div> + + <svg:svg height="0"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:clipPath id="c1"> + <svg:rect x="0" y="0" width="100" height="150"/> + <svg:rect x="100" y="0" width="100" height="300"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-04-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-04-extref.xhtml new file mode 100644 index 0000000000..4f35f255bf --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-04-extref.xhtml @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> +.unit { display:inline-block; width:100px; height:1px; } +</style> +</head> +<body style="margin:0; width:350px; line-height:100px;"> + <span class="unit"/><span class="unit" + /><span style="clip-path:url(clipPath-html-04.xhtml#c1); background:lime;"><span class="unit"/><span class="unit" + /></span> + <svg:svg height="0"> + <!-- use an empty g to force clipPath-html-04.xhtml to load before onload --> + <svg:use xlink:href="clipPath-html-04.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-04-ref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-04-ref.xhtml new file mode 100644 index 0000000000..640997d4d2 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-04-ref.xhtml @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0; line-height:100px;"> + <span style="display:inline-block; width:200px;" + /><span style="background:lime;"><span style="display:inline-block; width:50px;"/></span><br/> + <span style="display:inline-block; width:50px;" + /><span style="background:lime;"><span style="display:inline-block; width:50px;"/></span> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-04.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-04.xhtml new file mode 100644 index 0000000000..a516f1ff1e --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-04.xhtml @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> +.unit { display:inline-block; width:100px; height:1px; } +</style> +</head> +<body style="margin:0; width:350px; line-height:100px;"> + <span class="unit"/><span class="unit" + /><span style="clip-path:url(#c1); background:lime;"><span class="unit"/><span class="unit" + /></span> + + <svg:svg height="0"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:clipPath id="c1"> + <svg:rect x="50" y="0" width="200" height="200"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-05-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-05-extref.xhtml new file mode 100644 index 0000000000..6d4e7c8972 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-05-extref.xhtml @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> +.unit { display:inline-block; width:100px; height:1px; } +</style> +</head> +<body style="margin:0; width:350px; line-height:100px;"> + <span class="unit"/><span class="unit" + /><span style="clip-path:url(clipPath-html-05.xhtml#c1); background:lime;"><span class="unit"/><span class="unit" + /></span> + <svg:svg height="0"> + <!-- use an empty g to force clipPath-html-05.xhtml to load before onload --> + <svg:use xlink:href="clipPath-html-05.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-05-ref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-05-ref.xhtml new file mode 100644 index 0000000000..f6e7d26eca --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-05-ref.xhtml @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0; line-height:100px;"> + <span style="display:inline-block; width:200px;" + /><span style="background:lime;"><span style="display:inline-block; width:70px;"/></span><br/> + <span style="display:inline-block; width:30px;" + /><span style="background:lime;"><span style="display:inline-block; width:70px;"/></span> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-05.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-05.xhtml new file mode 100644 index 0000000000..15a3be6b61 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-05.xhtml @@ -0,0 +1,27 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> +.unit { display:inline-block; width:100px; height:1px; } +</style> +</head> +<body style="margin:0; width:350px; line-height:100px;"> + <span class="unit"/><span class="unit" + /><span style="clip-path:url(#c1); background:lime;"><span class="unit"/><span class="unit" + /></span> + + <svg:svg height="0"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:clipPath id="c1" clipPathUnits="objectBoundingBox"> + <svg:rect x="0.1" y="0" width="0.8" height="1"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml new file mode 100644 index 0000000000..339bc629a4 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-06-extref.xhtml @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> +.unit { display:inline-block; width:100px; height:10px; } +</style> +</head> +<body style="margin:0"> + <span style="clip-path: url(clipPath-html-06.xhtml#c1);"> + <span class="unit" style="background:lime;"></span> + <div style="height:200px; width:100px;"/> + <span class="unit" style="background:lime;"></span> + </span> + <svg:svg height="0" style="display: block"> + <!-- use an empty g to force clipPath-html-06.xhtml to load before onload --> + <svg:use xlink:href="clipPath-html-06.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-06-ref.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-06-ref.xhtml new file mode 100644 index 0000000000..747f8105ef --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-06-ref.xhtml @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> +.unit { display:inline-block; width:50px; height:10px; } +</style> +</head> +<body style="margin:0"> + <span> + <span class="unit"></span> + <div style="height:200px;"/> + <span class="unit" style="background:lime;"></span> + </span> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-06.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-06.xhtml new file mode 100644 index 0000000000..8008d576e5 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-06.xhtml @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> +.unit { display:inline-block; width:100px; height:10px; } +</style> +</head> +<body style="margin:0"> + <span style="clip-path: url(#c1);"> + <span class="unit" style="background:lime;"></span> + <div style="height:200px; width:100px;"/> + <span class="unit" style="background:lime;"></span> + </span> + + <svg:svg height="0" style="display: block"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:clipPath id="c1" clipPathUnits="objectBoundingBox"> + <svg:rect x="0" y="0.5" width="0.5" height="0.5"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-html-07-ref.svg b/layout/reftests/svg/svg-integration/clipPath-html-07-ref.svg new file mode 100644 index 0000000000..4d7153968a --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-07-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg">
+ <rect x="100" y="100" width="100" height="100" fill="black"/>
+ <rect x="150" y="150" width="50" height="50" fill="yellow"/>
+</svg>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-07.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-07.xhtml new file mode 100644 index 0000000000..8391ad01e6 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-07.xhtml @@ -0,0 +1,31 @@ +<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=822014 -->
+ <head>
+ <title>Test clip-path on outer-<svg> with border</title>
+ <style>
+
+html, body {
+ border: 0; margin: 0;
+}
+
+ </style>
+ </head>
+ <body>
+ <svg xmlns="http://www.w3.org/2000/svg"
+ width="200" height="200" clip-path="url(#cp)"
+ style="border: solid 100px black; margin: 50px;">
+
+ <clipPath id="cp">
+ <path d="M50,50 150,50 150,150 50,150 z"/>
+ </clipPath>
+
+ <rect width="100%" height="100%" fill="yellow"/>
+
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-08.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-08.xhtml new file mode 100644 index 0000000000..3eb0dfa3c3 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-08.xhtml @@ -0,0 +1,26 @@ +<!DOCTYPE html>
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=822014 -->
+ <head>
+ <title>Test clip-path on <div> with border</title>
+ <style>
+
+html, body {
+ border: 0; margin: 0;
+}
+
+ </style>
+ </head>
+ <body>
+ <div style="clip-path: url(#cp); width: 200px; height: 200px; background: yellow; border: solid 100px black; margin: 50px;"></div>
+ <svg xmlns="http://www.w3.org/2000/svg" height="0">
+ <clipPath id="cp">
+ <path d="M50,50 150,50 150,150 50,150 z"/>
+ </clipPath>
+ </svg>
+ </body>
+</html>
diff --git a/layout/reftests/svg/svg-integration/clipPath-html-zoomed-01.xhtml b/layout/reftests/svg/svg-integration/clipPath-html-zoomed-01.xhtml new file mode 100644 index 0000000000..4f98941543 --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-html-zoomed-01.xhtml @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" reftest-zoom="2"> +<body style="margin:0"> + <div style="clip-path: url(#c1); width:250px; height:250px; background:lime;"></div> + <svg:svg height="0"> + <svg:clipPath id="c1" clipPathUnits="objectBoundingBox"> + <svg:rect x="0.5" y="0" width="0.5" height="1"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-transformed-html-01.xhtml b/layout/reftests/svg/svg-integration/clipPath-transformed-html-01.xhtml new file mode 100644 index 0000000000..e1569f1f6c --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-transformed-html-01.xhtml @@ -0,0 +1,44 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test SVG clipPath clipping of transformed HTML elements</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773197 --> + <style type="text/css"> + +* { margin: 0; border: 0; padding: 0;} + +div { + position: absolute; + left: 1px; + top: 1px; + width: 3px; + height: 3px; + transform: scale(100,100); + transform-origin: 0 0; +} + + </style> +</head> +<body bgcolor="lime"> + + <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" + style="display:block; position:absolute;"> + <clipPath id="cp1" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.01" fill="white"/> + <circle cx="0.5" cy="0.5" r="0.48" fill="white"/> + </clipPath> + <clipPath id="cp2" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.01" fill="white"/> + <circle cx="0.5" cy="0.5" r="0.50" fill="white"/> + </clipPath> + <circle cx="150" cy="150" r="147" fill="red"/> + </svg> + + <div style="background: red; clip-path: url(#cp1);"/> + <div style="background: lime; clip-path: url(#cp2);"/> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/clipPath-transformed-html-02.xhtml b/layout/reftests/svg/svg-integration/clipPath-transformed-html-02.xhtml new file mode 100644 index 0000000000..a36782231e --- /dev/null +++ b/layout/reftests/svg/svg-integration/clipPath-transformed-html-02.xhtml @@ -0,0 +1,44 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test SVG clipPath clipping of transformed HTML elements</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773197 --> + <style type="text/css"> + +* { margin: 0; border: 0; padding: 0;} + +div { + position: absolute; + left: 50px; + top: 50px; + width: 150px; + height: 150px; + transform: scale(2,2); + transform-origin: 0 0; +} + + </style> +</head> +<body bgcolor="lime"> + + <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" + style="display:block; position:absolute;"> + <clipPath id="cp1" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.01" fill="white"/> + <circle cx="0.5" cy="0.5" r="0.48" fill="white"/> + </clipPath> + <clipPath id="cp2" x="0" y="0" width="1" height="1" clipPathUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.01" fill="white"/> + <circle cx="0.5" cy="0.5" r="0.50" fill="white"/> + </clipPath> + <circle cx="200" cy="200" r="147" fill="red"/> + </svg> + + <div style="background: red; clip-path: url(#cp1);"/> + <div style="background: lime; clip-path: url(#cp2);"/> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml b/layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml new file mode 100644 index 0000000000..f28425ee07 --- /dev/null +++ b/layout/reftests/svg/svg-integration/conditions-outer-svg-01.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <title>Test that conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + <style>svg { position: absolute; top: 0; left: 0; height: 100%; width: 100% }</style> +</head> +<body> + +<svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg> +<svg:svg systemLanguage="x"><svg:rect width="100%" height="100%" fill="red"/></svg:svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml b/layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml new file mode 100644 index 0000000000..e60477f112 --- /dev/null +++ b/layout/reftests/svg/svg-integration/conditions-outer-svg-02.xhtml @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> + <title>Test that using elements from conditional-failing outer 'svg' elements works</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + <style>svg { position: absolute; top: 0; left: 0; height: 100%; width: 100% }</style> +</head> +<body> + +<svg:svg requiredExtensions="x"><svg:rect id="r" width="100%" height="100%" fill="lime"/></svg:svg> +<svg:svg><svg:use xlink:href="#r"/></svg:svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/css-and-svg-filter-01-ref.html b/layout/reftests/svg/svg-integration/css-and-svg-filter-01-ref.html new file mode 100644 index 0000000000..5ca68b1f66 --- /dev/null +++ b/layout/reftests/svg/svg-integration/css-and-svg-filter-01-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> +<body> + + <svg class="dark" width="400" height="110"> + <rect width="300" height="100" style="fill:rgb(0,0,0);" /> + </svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/css-and-svg-filter-01.html b/layout/reftests/svg/svg-integration/css-and-svg-filter-01.html new file mode 100644 index 0000000000..7b278d1b10 --- /dev/null +++ b/layout/reftests/svg/svg-integration/css-and-svg-filter-01.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> + <style> + .dark { + filter: invert(1) url("#balance-color") ; + } + </style> +</head> +<body> + + <svg class="dark" width="400" height="110"> + <rect width="300" height="100" style="fill:rgb(255,255,255);" /> + </svg> + + <svg width="10" height="10"> + <defs> + <filter id="balance-color"> + <feColorMatrix type="matrix" + values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"> + </feColorMatrix> + </filter> + </defs> + </svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml new file mode 100644 index 0000000000..213f713a59 --- /dev/null +++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-01.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <title>Test that conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> +</head> +<body onload="document.getElementById('a').setAttribute('requiredExtensions', 'x')"> + +<svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg> +<svg:svg id="a"><svg:rect width="100%" height="100%" fill="red"/></svg:svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml new file mode 100644 index 0000000000..a2087c5da5 --- /dev/null +++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-02.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <title>Test that conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> +</head> +<body onload="document.getElementById('a').removeAttribute('requiredExtensions')"> + +<svg:svg><svg:rect width="100%" height="100%" fill="red"/></svg:svg> +<svg:svg id="a" requiredExtensions="x"><svg:rect width="100%" height="100%" fill="lime"/></svg:svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml new file mode 100644 index 0000000000..f042469e35 --- /dev/null +++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-03.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <title>Test that conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> +</head> +<body onload="document.getElementById('a').setAttribute('systemLanguage', 'x')"> + +<svg:svg><svg:rect width="100%" height="100%" fill="lime"/></svg:svg> +<svg:svg id="a" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Gradient"><svg:rect width="100%" height="100%" fill="red"/></svg:svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml new file mode 100644 index 0000000000..f82f3d510a --- /dev/null +++ b/layout/reftests/svg/svg-integration/dynamic-conditions-outer-svg-04.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> + <title>Test that conditional processing attributes on outer 'svg' elements are honored</title> + <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 --> + <style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style> +</head> +<body onload="document.getElementById('a').setAttribute('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Gradient')"> + +<svg:svg><svg:rect width="100%" height="100%" fill="red"/></svg:svg> +<svg:svg id="a" requiredFeatures="x"><svg:rect width="100%" height="100%" fill="lime"/></svg:svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/filter-html-01-extref.xhtml b/layout/reftests/svg/svg-integration/filter-html-01-extref.xhtml new file mode 100644 index 0000000000..cb6a72388e --- /dev/null +++ b/layout/reftests/svg/svg-integration/filter-html-01-extref.xhtml @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="background:lime; width:200px; height:200px; margin:50px; filter:url(filter-html-01.xhtml#f1)"/> + <svg:svg height="0"> + <!-- use an empty g to force filter-html-01.xhtml to load before onload --> + <svg:use xlink:href="filter-html-01.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/filter-html-01-ref.svg b/layout/reftests/svg/svg-integration/filter-html-01-ref.svg new file mode 100644 index 0000000000..ecc3d4f9d6 --- /dev/null +++ b/layout/reftests/svg/svg-integration/filter-html-01-ref.svg @@ -0,0 +1,14 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <filter id="f1"> + <feFlood flood-color="black" result="black"/> + <feComposite in="SourceAlpha" operator="in"/> + <feOffset dx="10" dy="10"/> + <feComposite in="SourceGraphic"/> + </filter> + <rect x="50" y="50" width="200" height="200" fill="lime" filter="url(#f1)"/> +</svg> diff --git a/layout/reftests/svg/svg-integration/filter-html-01.xhtml b/layout/reftests/svg/svg-integration/filter-html-01.xhtml new file mode 100644 index 0000000000..8e048cb1ac --- /dev/null +++ b/layout/reftests/svg/svg-integration/filter-html-01.xhtml @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<body style="margin:0"> + <div style="background:lime; width:200px; height:200px; margin:50px; filter:url(#f1)"/> + <svg:svg height="0"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:filter id="f1"> + <svg:feFlood flood-color="black" result="black"/> + <svg:feComposite in="SourceAlpha" operator="in"/> + <svg:feOffset dx="10" dy="10"/> + <svg:feComposite in="SourceGraphic"/> + </svg:filter> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/filter-html-dynamic-01-ref.xhtml b/layout/reftests/svg/svg-integration/filter-html-dynamic-01-ref.xhtml new file mode 100644 index 0000000000..1c222befa4 --- /dev/null +++ b/layout/reftests/svg/svg-integration/filter-html-dynamic-01-ref.xhtml @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> +<style> + div{ + left: 10px; + top: 10px; + position: absolute; + width : 100px; + height : 100px; + margin : 10px; + background : lime; + } +</style> +</head> +<body style="margin:0"> +<div></div> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/filter-html-dynamic-01.xhtml b/layout/reftests/svg/svg-integration/filter-html-dynamic-01.xhtml new file mode 100644 index 0000000000..7a6a4ab07c --- /dev/null +++ b/layout/reftests/svg/svg-integration/filter-html-dynamic-01.xhtml @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<head> +<style> + div{ + left: 10px; + top: 10px; + position: absolute; + width : 100px; + height : 100px; + margin : 10px; + background : red; + filter:url(#flood); + } +</style> +</head> +<body style="margin:0"> +<script> + window.addEventListener('load',function(e){ + var div = document.createElement('div'); + document.body.appendChild(div); + },false); +</script> + +<svg:svg width="0" height="0"> + <svg:filter id="flood" x="0" y="0" width="100%" height="100%" filterUnits="userSpaceOnUse"> + <svg:feFlood flood-color="lime"/> + </svg:filter> +</svg:svg> +</body> +</html>
\ No newline at end of file diff --git a/layout/reftests/svg/svg-integration/filter-html-zoomed-01.xhtml b/layout/reftests/svg/svg-integration/filter-html-zoomed-01.xhtml new file mode 100644 index 0000000000..b84d4e9d74 --- /dev/null +++ b/layout/reftests/svg/svg-integration/filter-html-zoomed-01.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" reftest-zoom="2"> +<body style="margin:0"> + <div style="background:lime; width:100px; height:100px; margin:25px; filter:url(#f1)"/> + <svg:svg height="0"> + <svg:filter id="f1"> + <svg:feFlood flood-color="black" result="black"/> + <svg:feComposite in="SourceAlpha" operator="in"/> + <svg:feOffset dx="5" dy="5"/> + <svg:feComposite in="SourceGraphic"/> + </svg:filter> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01-ref.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01-ref.xhtml new file mode 100644 index 0000000000..95d1a24588 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01-ref.xhtml @@ -0,0 +1,14 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> + div { + width: 50px; + height: 100px; + background-color: rgba(0,0,255,0.5); + } +</style> +</head> +<body> + <div/> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01a.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01a.xhtml new file mode 100644 index 0000000000..d845463e01 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01a.xhtml @@ -0,0 +1,20 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> + div { + width: 100px; + height: 100px; + mask: url(#m1); + background-color: blue; + } +</style> +</head> +<body> + <div/> + <svg:svg height="0"> + <svg:mask id="m1" style="mask-type:alpha"> + <svg:rect x="0" y="0" width="50" height="100" style="stroke:none; fill: #ffffff" fill-opacity="0.5"/> + </svg:mask> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01b.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01b.xhtml new file mode 100644 index 0000000000..fc05430db0 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01b.xhtml @@ -0,0 +1,21 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> + div { + width: 100px; + height: 100px; + opacity: 0.5; + mask:url(#m1); + background-color: blue; + } +</style> +</head> +<body> + <div/> + <svg:svg height="0"> + <svg:mask id="m1" style="mask-type:alpha"> + <svg:rect x="0" y="0" width="50" height="100" style="stroke:none; fill: #ffffff"/> + </svg:mask> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01c.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01c.xhtml new file mode 100644 index 0000000000..e59812267d --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01c.xhtml @@ -0,0 +1,21 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> + div { + width: 100px; + height: 100px; + clip-path: url(#c1); + background-color: blue; + opacity: 0.5; + } +</style> +</head> +<body> + <div/> + <svg:svg height="0"> + <svg:clipPath id="c1"> + <svg:rect x="0" y="0" width="50" height="100"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01d.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01d.xhtml new file mode 100644 index 0000000000..e59812267d --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01d.xhtml @@ -0,0 +1,21 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> + div { + width: 100px; + height: 100px; + clip-path: url(#c1); + background-color: blue; + opacity: 0.5; + } +</style> +</head> +<body> + <div/> + <svg:svg height="0"> + <svg:clipPath id="c1"> + <svg:rect x="0" y="0" width="50" height="100"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01e.xhtml b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01e.xhtml new file mode 100644 index 0000000000..83356f9336 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-clipPath-opacity-01e.xhtml @@ -0,0 +1,25 @@ +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> + div { + width: 100px; + height: 100px; + clip-path: url(#c1); + mask:url(#m1); + background-color: blue; + opacity: 0.5; + } +</style> +</head> +<body> + <div/> + <svg:svg height="0"> + <svg:mask id="m1" style="mask-type:alpha"> + <svg:rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/> + </svg:mask> + <svg:clipPath id="c1"> + <svg:rect x="0" y="0" width="50" height="100"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-html-01-extref-01.xhtml b/layout/reftests/svg/svg-integration/mask-html-01-extref-01.xhtml new file mode 100644 index 0000000000..fba9fc4b0b --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-html-01-extref-01.xhtml @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="mask: url(mask-html-01.xhtml#m1); width:500px; height:500px; background:lime;"></div> + <svg:svg height="0"> + <!-- use an empty g to force mask-html-01.xhtml to load before onload --> + <svg:use xlink:href="mask-html-01.xhtml#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-html-01-extref-02.xhtml b/layout/reftests/svg/svg-integration/mask-html-01-extref-02.xhtml new file mode 100644 index 0000000000..1fc3ecf084 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-html-01-extref-02.xhtml @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> +<body style="margin:0"> + <div style="mask: url(mask-html-01-resource.svg#m1); width:500px; height:500px; background:lime;"></div> + <svg:svg height="0"> + <!-- use an empty g to force mask-html-01-resource.svg to load before onload --> + <svg:use xlink:href="mask-html-01-resource.svg#empty" /> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-html-01-ref.svg b/layout/reftests/svg/svg-integration/mask-html-01-ref.svg new file mode 100644 index 0000000000..5afbf8f0c0 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-html-01-ref.svg @@ -0,0 +1,16 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect x="0" y="0" width="500" height="500" style="mask: url(#m1); fill: lime;"/> + <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="white" offset="0"/> + <stop stop-color="white" stop-opacity="0" offset="1"/> + </linearGradient> + <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <rect x="0.5" y="0" width="0.5" height="1" fill="url(#g)"/> + </mask> +</svg> diff --git a/layout/reftests/svg/svg-integration/mask-html-01-resource.svg b/layout/reftests/svg/svg-integration/mask-html-01-resource.svg new file mode 100644 index 0000000000..5522555f80 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-html-01-resource.svg @@ -0,0 +1,33 @@ +<?xml-stylesheet + type="text/css" + href="data:text/css,circle { fill: white }" ?> +<!-- test for javascript: execution: shouldn't happen --> +<?xml-stylesheet + type="text/css" + href="javascript:'circle { fill: black }'" ?> +<svg height="0" xmlns="http://www.w3.org/2000/svg"> + <style type="text/css"> + /* XXXbz this should really be an external reference to mask-html-01.xhtml + but there's the little problem of "fill" not using nsReferencedElement + yet, so that's broken */ + /* Test that media queries work on resource documents while we're here */ + @media (min-resolution: 1dpi) { + rect { fill: url(#g); } + } + </style> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <g id="empty" /> + <mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <stop stop-color="white" offset="0"/> + <stop stop-color="white" stop-opacity="0" offset="1"/> + </linearGradient> + <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="black"/> + <rect x="0.5" y="0" width="0.5" height="1" fill="black"/> + </mask> + <script type="application/ecmascript"> + // Make sure scripts don't run + document.getElementById("m1").textContent = ""; + </script> +</svg> diff --git a/layout/reftests/svg/svg-integration/mask-html-01.xhtml b/layout/reftests/svg/svg-integration/mask-html-01.xhtml new file mode 100644 index 0000000000..77c3b5c9c9 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-html-01.xhtml @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg"> +<body style="margin:0"> + <div style="mask: url(#m1); width:500px; height:500px; background:lime;"></div> + <svg:svg height="0"> + <!-- so that other documents can svg:use this one and force it to + load before onload --> + <svg:g id="empty" /> + <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <svg:stop stop-color="white" offset="0"/> + <svg:stop stop-color="white" stop-opacity="0" offset="1"/> + </svg:linearGradient> + <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <svg:rect x="0.5" y="0" width="0.5" height="1" fill="url(#g)"/> + </svg:mask> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-html-zoomed-01.xhtml b/layout/reftests/svg/svg-integration/mask-html-zoomed-01.xhtml new file mode 100644 index 0000000000..bc89dfa723 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-html-zoomed-01.xhtml @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:svg="http://www.w3.org/2000/svg" reftest-zoom="2"> +<body style="margin:0"> + <div style="mask: url(#m1); width:250px; height:250px; background:lime;"></div> + <svg:svg height="0"> + <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <svg:stop stop-color="white" offset="0"/> + <svg:stop stop-color="white" stop-opacity="0" offset="1"/> + </svg:linearGradient> + <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <svg:rect x="0.5" y="0" width="0.5" height="1" fill="url(#g)"/> + </svg:mask> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale-ref.xhtml b/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale-ref.xhtml new file mode 100644 index 0000000000..8e870b8627 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale-ref.xhtml @@ -0,0 +1,15 @@ +<html reftest-zoom="2.0" xmlns="http://www.w3.org/1999/xhtml"> + +<head> +<style> + div { + width: 50px; + height: 100px; + background-color: rgba(0,0,255,0.5); +} +</style> +</head> +<body> + <div/> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale.xhtml b/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale.xhtml new file mode 100644 index 0000000000..b2df18034d --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-mask-clipPath-opacity-scale.xhtml @@ -0,0 +1,25 @@ +<html reftest-zoom="2.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<head> +<style> + div { + width: 100px; + height: 100px; + clip-path: url(#c1); + mask:url(#m1), url(#m1); + background-color: blue; + opacity: 0.5; + } +</style> +</head> +<body> + <div/> + <svg:svg height="0"> + <svg:mask id="m1" style="mask-type:alpha"> + <svg:rect x="0" y="0" width="100" height="100" style="stroke:none; fill: #ffffff"/> + </svg:mask> + <svg:clipPath id="c1"> + <svg:rect x="0" y="0" width="50" height="100"/> + </svg:clipPath> + </svg:svg> +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-transformed-html-01.xhtml b/layout/reftests/svg/svg-integration/mask-transformed-html-01.xhtml new file mode 100644 index 0000000000..1e1a2ed552 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-transformed-html-01.xhtml @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test SVG masking of transformed HTML elements</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769103 --> + <style type="text/css"> + +* { margin: 0; border: 0; padding: 0;} + +div { + position: absolute; + left: 1px; + top: 1px; + width: 3px; + height: 3px; + transform: scale(100,100); + transform-origin: 0 0; +} + + </style> +</head> +<body bgcolor="lime"> + + <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" + style="display:block; position:absolute;"> + <mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.48" fill="white"/> + </mask> + <mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.5" fill="white"/> + </mask> + <circle cx="150" cy="150" r="147" fill="red"/> + </svg> + + <div style="background: red; mask: url(#mask1);"/> + <div style="background: lime; mask: url(#mask2);"/> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/mask-transformed-html-02.xhtml b/layout/reftests/svg/svg-integration/mask-transformed-html-02.xhtml new file mode 100644 index 0000000000..c83f5a3ea9 --- /dev/null +++ b/layout/reftests/svg/svg-integration/mask-transformed-html-02.xhtml @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test SVG masking of transformed HTML elements</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769103 --> + <style type="text/css"> + +* { margin: 0; border: 0; padding: 0;} + +div { + position: absolute; + left: 50px; + top: 50px; + width: 150px; + height: 150px; + transform: scale(2,2); + transform-origin: 0 0; +} + + </style> +</head> +<body bgcolor="lime"> + + <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350" + style="display:block; position:absolute;"> + <mask id="mask1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.48" fill="white"/> + </mask> + <mask id="mask2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox"> + <circle cx="0.5" cy="0.5" r="0.50" fill="white"/> + </mask> + <circle cx="200" cy="200" r="147" fill="red"/> + </svg> + + <div style="background: red; mask: url(#mask1);"/> + <div style="background: lime; mask: url(#mask2);"/> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-01.xhtml b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-01.xhtml new file mode 100644 index 0000000000..66291d3bf6 --- /dev/null +++ b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-01.xhtml @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test SVG patterning under transformed HTML elements</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769970 --> + <style type="text/css"> + +* { margin: 0; border: 0; padding: 0;} + +svg { + display: block; + position: absolute; +} + +.scaled { + left: 1px; + top: 1px; + width: 3px; + height: 3px; + transform: scale(100,100); + transform-origin: 0 0; +} + + </style> +</head> +<body bgcolor="lime"> + + <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> + <circle cx="151" cy="151" r="148" fill="red"/> + </svg> + + <svg xmlns="http://www.w3.org/2000/svg" class="scaled"> + <pattern id="redDot" width="1" height="1"> + <circle cx="1.5" cy="1.5" r="1.48" fill="red"/> + </pattern> + <pattern id="limeDot" width="1" height="1"> + <circle cx="1.5" cy="1.5" r="1.5" fill="lime"/> + </pattern> + <rect width="100%" height="100%" fill="url(#redDot)"/> + <rect width="100%" height="100%" fill="url(#limeDot)"/> + </svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-02.xhtml b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-02.xhtml new file mode 100644 index 0000000000..f9182b272b --- /dev/null +++ b/layout/reftests/svg/svg-integration/patterned-svg-under-transformed-html-02.xhtml @@ -0,0 +1,47 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test SVG patterning under transformed HTML elements</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=769970 --> + <style type="text/css"> + +* { margin: 0; border: 0; padding: 0;} + +svg { + display: block; + position: absolute; +} + +.scaled { + left: 50px; + top: 50px; + width: 150px; + height: 150px; + transform: scale(2,2); + transform-origin: 0 0; +} + + </style> +</head> +<body bgcolor="lime"> + + <svg xmlns="http://www.w3.org/2000/svg" width="350" height="350"> + <circle cx="200" cy="200" r="147" fill="red"/> + </svg> + + <svg xmlns="http://www.w3.org/2000/svg" class="scaled"> + <pattern id="redDot" width="1" height="1"> + <circle cx="75" cy="75" r="74" fill="red"/> + </pattern> + <pattern id="limeDot" width="1" height="1"> + <circle cx="75" cy="75" r="75" fill="lime"/> + </pattern> + <rect width="100%" height="100%" fill="url(#redDot)"/> + <rect width="100%" height="100%" fill="url(#limeDot)"/> + </svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/reftest.list b/layout/reftests/svg/svg-integration/reftest.list new file mode 100644 index 0000000000..478a129aa6 --- /dev/null +++ b/layout/reftests/svg/svg-integration/reftest.list @@ -0,0 +1,53 @@ +# clip-path tests +include clip-path/reftest.list + +== clipPath-html-01.xhtml clipPath-html-01-ref.svg +== clipPath-html-01-extref.xhtml clipPath-html-01-ref.svg +== clipPath-html-02.xhtml clipPath-html-02-ref.svg +== clipPath-html-02-extref.xhtml clipPath-html-02-ref.svg +== clipPath-html-03.xhtml clipPath-html-03-ref.svg +== clipPath-html-03-extref.xhtml clipPath-html-03-ref.svg +== clipPath-html-04.xhtml clipPath-html-04-ref.xhtml +== clipPath-html-04-extref.xhtml clipPath-html-04-ref.xhtml +fuzzy(0-140,0-70) == clipPath-html-05.xhtml clipPath-html-05-ref.xhtml # Bug 776089 +fuzzy(0-140,0-70) == clipPath-html-05-extref.xhtml clipPath-html-05-ref.xhtml # Bug 776089 +fuzzy-if(Android,0-255,0-30) == clipPath-html-06.xhtml clipPath-html-06-ref.xhtml +fuzzy-if(Android,0-255,0-30) == clipPath-html-06-extref.xhtml clipPath-html-06-ref.xhtml +== clipPath-html-07.xhtml clipPath-html-07-ref.svg +== clipPath-html-08.xhtml clipPath-html-07-ref.svg # reuse 07-ref.svg +fails-if(useDrawSnapshot) == clipPath-html-zoomed-01.xhtml clipPath-html-01-ref.svg +== clipPath-transformed-html-01.xhtml ../pass.svg +== clipPath-transformed-html-02.xhtml ../pass.svg +== css-and-svg-filter-01.html css-and-svg-filter-01-ref.html +== conditions-outer-svg-01.xhtml ../pass.svg +== conditions-outer-svg-02.xhtml ../pass.svg +== dynamic-conditions-outer-svg-01.xhtml ../pass.svg +== dynamic-conditions-outer-svg-02.xhtml ../pass.svg +== dynamic-conditions-outer-svg-03.xhtml ../pass.svg +== dynamic-conditions-outer-svg-04.xhtml ../pass.svg +== filter-html-01.xhtml filter-html-01-ref.svg +== filter-html-dynamic-01.xhtml filter-html-dynamic-01-ref.xhtml +random-if(Android) == filter-html-01-extref.xhtml filter-html-01-ref.svg # Android: bug 1198380 +fails-if(useDrawSnapshot) == filter-html-zoomed-01.xhtml filter-html-01-ref.svg +fuzzy(0-1,0-125414) == mask-html-01.xhtml mask-html-01-ref.svg +fuzzy(0-1,0-125414) == mask-html-01-extref-01.xhtml mask-html-01-ref.svg +== mask-html-01-extref-02.xhtml mask-html-01-ref.svg +fuzzy(0-1,0-125414) fails-if(useDrawSnapshot) == mask-html-zoomed-01.xhtml mask-html-01-ref.svg +== mask-transformed-html-01.xhtml ../pass.svg +== mask-transformed-html-02.xhtml ../pass.svg +fuzzy(0-1,0-5) == patterned-svg-under-transformed-html-01.xhtml ../pass.svg +== patterned-svg-under-transformed-html-02.xhtml ../pass.svg + +fuzzy(0-1,0-5000) == mask-clipPath-opacity-01a.xhtml mask-clipPath-opacity-01-ref.xhtml +fuzzy(0-1,0-5000) == mask-clipPath-opacity-01b.xhtml mask-clipPath-opacity-01-ref.xhtml +fuzzy(0-1,0-5000) == mask-clipPath-opacity-01c.xhtml mask-clipPath-opacity-01-ref.xhtml +fuzzy(0-1,0-5000) == mask-clipPath-opacity-01d.xhtml mask-clipPath-opacity-01-ref.xhtml +fuzzy(0-1,0-5000) == mask-clipPath-opacity-01e.xhtml mask-clipPath-opacity-01-ref.xhtml +fuzzy(0-1,0-5000) == mask-mask-clipPath-opacity-scale.xhtml mask-mask-clipPath-opacity-scale-ref.xhtml + +== transform-outer-svg-01.xhtml transform-outer-svg-01-ref.xhtml + +# box-decoration-break tests +fuzzy-if(Android,0-4,0-10) == box-decoration-break-01.xhtml box-decoration-break-01-ref.xhtml +fuzzy(0-119,0-16) == box-decoration-break-02.xhtml box-decoration-break-02-ref.xhtml +fuzzy(0-67,0-238) == box-decoration-break-03.xhtml box-decoration-break-01-ref.xhtml diff --git a/layout/reftests/svg/svg-integration/transform-outer-svg-01-ref.xhtml b/layout/reftests/svg/svg-integration/transform-outer-svg-01-ref.xhtml new file mode 100644 index 0000000000..3fa609a94b --- /dev/null +++ b/layout/reftests/svg/svg-integration/transform-outer-svg-01-ref.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test that the 'transform' attribute transforms our border too</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1353697 --> +</head> +<body> + + <svg xmlns="http://www.w3.org/2000/svg" width="250" height="250"> + <rect x="75" y="75" width="150" height="150" fill="none" stroke="black" stroke-width="50"/> + <rect x="125" y="125" width="50" height="50" fill="blue"/> + </svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-integration/transform-outer-svg-01.xhtml b/layout/reftests/svg/svg-integration/transform-outer-svg-01.xhtml new file mode 100644 index 0000000000..10484fbb97 --- /dev/null +++ b/layout/reftests/svg/svg-integration/transform-outer-svg-01.xhtml @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test that the 'transform' attribute transforms our border too</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1353697 --> +</head> +<body> + + <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" + style="border: 50px solid black;" transform="translate(50,50)"> + <rect x="25" y="25" width="50" height="50" fill="blue"/> + </svg> + +</body> +</html> diff --git a/layout/reftests/svg/svg-transform-01.svg b/layout/reftests/svg/svg-transform-01.svg new file mode 100644 index 0000000000..9bc81acd9d --- /dev/null +++ b/layout/reftests/svg/svg-transform-01.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=861188 --> + + <rect width="100%" height="100%" fill="lime"/> + + <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" x="100" y="100" viewBox="0 0 640 480"> + <rect width="100%" height="100%" fill="red"/> + </svg> + <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" x="100" y="100" viewBox="0 0 640 480" transform=""> + <rect width="100%" height="100%" fill="lime"/> + </svg> +</svg> diff --git a/layout/reftests/svg/svg-transform-02.svg b/layout/reftests/svg/svg-transform-02.svg new file mode 100644 index 0000000000..53f6718c93 --- /dev/null +++ b/layout/reftests/svg/svg-transform-02.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=863994 --> + + <rect width="100%" height="100%" fill="lime"/> + + <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" x="100" y="100" viewBox="0 0 640 480"> + <rect width="100%" height="100%" fill="red"/> + </svg> + <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" x="100" y="100" viewBox="0 0 640 480" transform="translate(0, 0)"> + <rect width="100%" height="100%" fill="lime"/> + </svg> +</svg> diff --git a/layout/reftests/svg/switch-01.svg b/layout/reftests/svg/switch-01.svg new file mode 100644 index 0000000000..1244525bb9 --- /dev/null +++ b/layout/reftests/svg/switch-01.svg @@ -0,0 +1,64 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg version="1.1" xmlns="http://www.w3.org/2000/svg"> + <title>Testcase for switch</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=409383 --> + + <rect width="100%" height="100%" fill="lime"/> + + <rect x="50" y="100" width="50" height="50" fill="red"/> + <switch> + <!-- first switch item is visible --> + <rect x="50" y="100" width="50" height="50" fill="lime"/> + <rect x="50" y="100" width="50" height="50" fill="red"/> + <rect x="50" y="100" width="50" height="50" fill="red"/> + <rect x="50" y="100" width="50" height="50" fill="red"/> + <rect x="50" y="100" width="50" height="50" fill="red"/> + <rect x="50" y="100" width="50" height="50" fill="red"/> + <rect x="50" y="100" width="50" height="50" fill="red"/> + <rect x="50" y="100" width="50" height="50" fill="red"/> + <rect x="50" y="100" width="50" height="50" fill="red"/> + <rect x="50" y="100" width="50" height="50" fill="red"/> + <rect x="50" y="100" width="50" height="50" fill="red"/> + <rect x="50" y="100" width="50" height="50" fill="red"/> + </switch> + + <rect x="200" y="100" width="50" height="50" fill="red"/> + <switch> + <!-- test non-matching system language --> + <rect systemLanguage="foo" x="200" y="100" width="50" height="50" fill="red"/> + <rect x="200" y="100" width="50" height="50" fill="lime"/> + <rect x="200" y="100" width="50" height="50" fill="red"/> + <rect x="200" y="100" width="50" height="50" fill="red"/> + </switch> + + <rect x="50" y="200" width="50" height="50" fill="red"/> + <switch> + <!-- test matching required features --> + <rect requiredFeatures="http://www.w3.org/TR/SVG11/feature#CoreAttribute http://www.w3.org/TR/SVG11/feature#Gradient" + x="50" y="200" width="50" height="50" fill="lime"/> + <rect x="50" y="200" width="50" height="50" fill="red"/> + <rect x="50" y="200" width="50" height="50" fill="red"/> + </switch> + + <!-- this rectangle intentionally left green --> + <rect x="200" y="200" width="50" height="50" fill="lime"/> + + <rect x="50" y="300" width="50" height="50" fill="red"/> + <switch> + <!-- test non-matching required extensions --> + <rect requiredExtensions="foo" x="50" y="300" width="50" height="50" fill="red"/> + <rect x="50" y="300" width="50" height="50" fill="lime"/> + <rect x="50" y="300" width="50" height="50" fill="red"/> + <rect x="50" y="300" width="50" height="50" fill="red"/> + </switch> + + <switch> + <!-- test display:none - should see nothing here --> + <rect style="display: none;" x="200" y="300" width="50" height="50" fill="red"/> + <rect x="200" y="300" width="50" height="50" fill="red"/> + </switch> +</svg> diff --git a/layout/reftests/svg/symbol-01-ref.svg b/layout/reftests/svg/symbol-01-ref.svg new file mode 100644 index 0000000000..efddfe8273 --- /dev/null +++ b/layout/reftests/svg/symbol-01-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <circle cx='50' cy='50' r='40' fill='green'/> +</svg> diff --git a/layout/reftests/svg/symbol-01.svg b/layout/reftests/svg/symbol-01.svg new file mode 100644 index 0000000000..905a697e7a --- /dev/null +++ b/layout/reftests/svg/symbol-01.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink'> + <style type="text/css"><![CDATA[ + #s { + display: inline; + } + ]]></style> + <!-- + A basic test that referencing a <symbol> with a <use> works. + Note that the fill specified on the <use> inherits into the + <use> shadow tree. + Also <symbol> itself should have |display:none !important|. + --> + <symbol id='s' viewBox='100 100 10 10'> + <circle cx='105' cy='105' r='4'/> + </symbol> + <use xlink:href='#s' x='0' y='0' width='100' height='100' fill='green'/> +</svg> diff --git a/layout/reftests/svg/text-font-size-01.svg b/layout/reftests/svg/text-font-size-01.svg new file mode 100644 index 0000000000..e9d67571a6 --- /dev/null +++ b/layout/reftests/svg/text-font-size-01.svg @@ -0,0 +1,19 @@ +<!-- + 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"> + + <title>Test text with zero font-size</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=732819 --> + + <rect width="100%" height="100%" fill="lime"/> + + <text x="10" y="50" font-size="0">Some + <tspan dy="30">text</tspan> + that should not show. + </text> + +</svg> + diff --git a/layout/reftests/svg/text-font-weight-01-ref.svg b/layout/reftests/svg/text-font-weight-01-ref.svg new file mode 100644 index 0000000000..1c0ffea49b --- /dev/null +++ b/layout/reftests/svg/text-font-weight-01-ref.svg @@ -0,0 +1,17 @@ +<!-- + 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"> + + <title>Reference for text font-weight</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=379284 --> + + <g id="test-body-content" font-family="Georgia, 'Times New Roman', Times, 'MS Mincho', serif" font-size="30"> + <text font-weight="normal" x="10" y="50">This should be normal</text> + <text font-weight="bold" x="10" y="100">This should be bold</text> + <text font-weight="400" x="10" y="150">This should be normal</text> + <text font-weight="700" x="10" y="200">This should be bold</text> + </g> +</svg> diff --git a/layout/reftests/svg/text-font-weight-01.svg b/layout/reftests/svg/text-font-weight-01.svg new file mode 100644 index 0000000000..ae784b8e5b --- /dev/null +++ b/layout/reftests/svg/text-font-weight-01.svg @@ -0,0 +1,25 @@ +<!-- + 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"> + + <title>Testcase for text font-weight</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=379284 --> + + <g id="test-body-content" font-family="Georgia, 'Times New Roman', Times, 'MS Mincho', serif" font-size="30"> + <g font-weight="bold"> + <text font-weight="lighter" x="10" y="50">This should be normal</text> + </g> + <g font-weight="normal"> + <text font-weight="bolder" x="10" y="100">This should be bold</text> + </g> + <g font-weight="700"> + <text font-weight="lighter" x="10" y="150">This should be normal</text> + </g> + <g font-weight="400"> + <text font-weight="bolder" x="10" y="200">This should be bold</text> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/text-gradient-01-ref.svg b/layout/reftests/svg/text-gradient-01-ref.svg new file mode 100644 index 0000000000..7acd518487 --- /dev/null +++ b/layout/reftests/svg/text-gradient-01-ref.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + +<title>Reference for gradient on text</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=424586 --> + + <defs> + <linearGradient id="grad" x1="0.0" y1="0.0" x2="1.0" y2="0.0"> + <stop stop-color="green" offset="0.0"/> + <stop stop-color="blue" offset="1.0"/> + </linearGradient> + </defs> + <text font-size="3.5em" x="100" y="100" fill="url(#grad)">PASS</text> +</svg> diff --git a/layout/reftests/svg/text-gradient-01.svg b/layout/reftests/svg/text-gradient-01.svg new file mode 100644 index 0000000000..9185d106c3 --- /dev/null +++ b/layout/reftests/svg/text-gradient-01.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + +<title>Testcase for gradient on text</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=424586 --> + + <defs> + <linearGradient id="grad" x1="0.0" y1="0.0" x2="1.0" y2="0.0"> + <stop stop-color="green" offset="0.0"/> + <stop stop-color="blue" offset="1.0"/> + </linearGradient> + </defs> + <!-- check the gradient moves with the transform --> + <g transform="translate(100,100)"> + <text font-size="3.5em" fill="url(#grad)">PASS</text> + </g> +</svg> diff --git a/layout/reftests/svg/text-gradient-02-ref.svg b/layout/reftests/svg/text-gradient-02-ref.svg new file mode 100644 index 0000000000..e3d74773dc --- /dev/null +++ b/layout/reftests/svg/text-gradient-02-ref.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + +<title>Reference for gradient on text</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=577850 --> + + <defs> + <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1"> + <stop offset="0.0" stop-color="rgb(0, 0, 0)"/> + <stop offset="0.5" stop-color="rgb(255, 255, 255)"/> + <stop offset="1.0" stop-color="rgb(0, 0, 0)"/> + </linearGradient> + </defs> + + <text x="0, 30, 60, 0, 40, 70" y="0, 0, 0, 1em, 1em, 1em" fill="url(#gradient)" font-size="60" transform="translate(50, 80)"> + FooBar + </text> +</svg> diff --git a/layout/reftests/svg/text-gradient-02.svg b/layout/reftests/svg/text-gradient-02.svg new file mode 100644 index 0000000000..b418bec990 --- /dev/null +++ b/layout/reftests/svg/text-gradient-02.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + +<title>Testcase for gradient on text</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=577850 --> + + <defs> + <linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1"> + <stop offset="0.00" stop-color="rgb(0, 0, 0)"/> + <stop offset="0.50" stop-color="rgb(255, 255, 255)"/> + <stop offset="1.00" stop-color="rgb(0, 0, 0)"/> + </linearGradient> + </defs> + + <text fill="url(#gradient)" font-size="60" transform="translate(50, 80)"> + <tspan x="0, 30, 60" y="0" >Foo</tspan> + <tspan x="0, 40, 70" dy="1em">Bar</tspan> + </text> +</svg> diff --git a/layout/reftests/svg/text-gradient-03.svg b/layout/reftests/svg/text-gradient-03.svg new file mode 100644 index 0000000000..c1b1bbfb82 --- /dev/null +++ b/layout/reftests/svg/text-gradient-03.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <title>Testcase for gradient on text</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=611975 --> + <defs> + <linearGradient id="grad" x1="0" y1="-0.1" x2="0" y2="1" gradientUnits="objectBoundingBox"> + <stop stop-color="red" offset="-10%"/> + <stop stop-color="lime" offset="0%"/> + </linearGradient> + </defs> + + <g fill="lime"> + <rect width="100%" height="100%"/> + <text x="100" y="100" stroke-width="5" stroke="url(#grad)" font-size="80px">SHOULD NOT SEE THIS</text> + </g> + +</svg> diff --git a/layout/reftests/svg/text-gradient-04-ref.svg b/layout/reftests/svg/text-gradient-04-ref.svg new file mode 100644 index 0000000000..11c187e0c0 --- /dev/null +++ b/layout/reftests/svg/text-gradient-04-ref.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Reference for gradients being positioned correctly within filters</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=797708 --> + + <clipPath id="c"> + <path d="M 130,70 h 40 v 40 h -40 z + M 230,70 h 40 v 40 h -40 z"/> + </clipPath> + + <g clip-path="url(#c)"> + <rect x="100" y="50" width="100" height="100" fill="red"/> + <rect x="200" y="50" width="100" height="100" fill="blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/text-gradient-04.svg b/layout/reftests/svg/text-gradient-04.svg new file mode 100644 index 0000000000..6eaffbcf02 --- /dev/null +++ b/layout/reftests/svg/text-gradient-04.svg @@ -0,0 +1,39 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Test for gradients being positioned correctly within filters</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=797708 --> + + <style> + @font-face { + src: url(../fonts/Ahem.ttf); + font-family: Ahem; + } + </style> + + <linearGradient id="g" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="300" y2="0"> + <stop offset="0" stop-color="red"/> + <stop offset="0.5" stop-color="red"/> + <stop offset="0.5" stop-color="blue"/> + <stop offset="1" stop-color="blue"/> + </linearGradient> + + <filter id="f"> + <feMerge> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + + <clipPath id="c"> + <path d="M 130,70 h 40 v 40 h -40 z + M 230,70 h 40 v 40 h -40 z"/> + </clipPath> + + <g style="font: 64px Ahem; fill: url(#g); text-anchor: middle; filter: url(#f); clip-path: url(#c)"> + <text x="150" y="100">a</text> + <text x="250" y="100">a</text> + </g> +</svg> diff --git a/layout/reftests/svg/text-in-link-01-ref.svg b/layout/reftests/svg/text-in-link-01-ref.svg new file mode 100644 index 0000000000..67beb778ac --- /dev/null +++ b/layout/reftests/svg/text-in-link-01-ref.svg @@ -0,0 +1,20 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size:2em;"> + + <title>Reference to check that text in links is displayed</title> + + <!-- link in text --> + <text x="10" y="50" fill="lime">This should be green</text> + + <!-- link in tspan --> + <text x="10" y="100" fill="lime">This should be green</text> + + <!-- tspan in link --> + <text x="10" y="150" fill="lime">This should be green</text> + +</svg> diff --git a/layout/reftests/svg/text-in-link-01.svg b/layout/reftests/svg/text-in-link-01.svg new file mode 100644 index 0000000000..2a95da1fd2 --- /dev/null +++ b/layout/reftests/svg/text-in-link-01.svg @@ -0,0 +1,28 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="font-size:2em;"> + + <title>Testcase to check that text in links is displayed</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=330059 --> + + <!-- link in text --> + <text x="10" y="50"> + <a fill="lime">This should be green</a> + </text> + + <!-- link in tspan --> + <text x="10" y="100"> + <tspan><a fill="lime">This should be green</a></tspan> + </text> + + <!-- tspan in link --> + <text> + <a><tspan x="10" y="150" fill="lime">This should be green</tspan></a> + </text> + +</svg> diff --git a/layout/reftests/svg/text-in-link-02-ref.svg b/layout/reftests/svg/text-in-link-02-ref.svg new file mode 100644 index 0000000000..bb6fdb4ddd --- /dev/null +++ b/layout/reftests/svg/text-in-link-02-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="300" height="50" viewBox="0 0 300 50"> + <title>Reference to check that links with viewBoxes work</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=534216 --> + + <text x="0" y="15"><tspan>AAAAA</tspan><tspan>BBBBB</tspan><tspan>CCCCC</tspan><tspan>DDDDD</tspan> + </text> +</svg> diff --git a/layout/reftests/svg/text-in-link-02.svg b/layout/reftests/svg/text-in-link-02.svg new file mode 100644 index 0000000000..4fa8d5f949 --- /dev/null +++ b/layout/reftests/svg/text-in-link-02.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="300" height="50" viewBox="0 0 300 50"> + <title>Testcase to check that links with viewBoxes work</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=534216 --> + + <text x="0" y="15"><a>AAAAA</a><a>BBBBB</a><a>CCCCC</a><a>DDDDD</a></text> +</svg> diff --git a/layout/reftests/svg/text-in-link-03-ref.svg b/layout/reftests/svg/text-in-link-03-ref.svg new file mode 100644 index 0000000000..c667992494 --- /dev/null +++ b/layout/reftests/svg/text-in-link-03-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="300" height="50"> + <title>Reference to check that CSS works for links</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=570354 --> + + <text x="0" y="25"><tspan font-size="15">AAAAA</tspan></text> +</svg> diff --git a/layout/reftests/svg/text-in-link-03.svg b/layout/reftests/svg/text-in-link-03.svg new file mode 100644 index 0000000000..9db19b0176 --- /dev/null +++ b/layout/reftests/svg/text-in-link-03.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="300" height="50"> + <title>Testcase to check that CSS works for links</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=570354 --> + + <text x="0" y="25"><a font-size="15"><tspan>AAAAA</tspan></a></text> +</svg> diff --git a/layout/reftests/svg/text-language-00-ref.xhtml b/layout/reftests/svg/text-language-00-ref.xhtml new file mode 100644 index 0000000000..4b6c8c4248 --- /dev/null +++ b/layout/reftests/svg/text-language-00-ref.xhtml @@ -0,0 +1,28 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>SVG, text, language...</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<style type="text/css"> +body { + font-family: sans-serif; + font-size: 24px; + margin: 24px; +} +div { + height: 100px; +} +</style> +</head> + +<body> +<div lang="en"> + <p>Hello world, 你好吗?</p> +</div> +<div lang="en"> + <p>Hello world, 你好吗?</p> +</div> +<div lang="en"> + <p>Hello world, 你好吗?</p> +</div> +</body> +</html> diff --git a/layout/reftests/svg/text-language-00.xhtml b/layout/reftests/svg/text-language-00.xhtml new file mode 100644 index 0000000000..5e9cc6d953 --- /dev/null +++ b/layout/reftests/svg/text-language-00.xhtml @@ -0,0 +1,32 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>SVG, text, language...</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<style type="text/css"> +body { + font-family: sans-serif; + font-size: 24px; + margin: 24px; +} +div { + height: 100px; +} +</style> +</head> + +<!-- This file, which does NOT use SVG, serves as a sanity-check; + if this reftest fails (i.e. test and reference images match) + then our font configuration is not suitable for this test + and the SVG testcases must be expected to fail as well. --> +<body> +<div lang="ar"> + <p>Hello world, 你好吗?</p> +</div> +<div lang="zh-TW"> + <p>Hello world, 你好吗?</p> +</div> +<div lang="ja"> + <p>Hello world, 你好吗?</p> +</div> +</body> +</html> diff --git a/layout/reftests/svg/text-language-01-ref.xhtml b/layout/reftests/svg/text-language-01-ref.xhtml new file mode 100644 index 0000000000..7f7b254a11 --- /dev/null +++ b/layout/reftests/svg/text-language-01-ref.xhtml @@ -0,0 +1,35 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>SVG, text, language...</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<style type="text/css"> +body { + font-family: sans-serif; + font-size: 24px; + margin: 24px; +} +div { + height: 100px; +} +</style> +</head> + +<body> +<div lang="en"> + <svg xmlns="http://www.w3.org/2000/svg" height="200"> + <text y="50">Hello world, 你好吗?</text> + </svg> +</div> +<div lang="en"> + <svg xmlns="http://www.w3.org/2000/svg" height="200"> + <text y="50">Hello world, 你好吗?</text> + </svg> +</div> +<div lang="en"> + <svg xmlns="http://www.w3.org/2000/svg" height="200"> + <text y="50">Hello world, 你好吗?</text> + </svg> +</div> + +</body> +</html> diff --git a/layout/reftests/svg/text-language-01.xhtml b/layout/reftests/svg/text-language-01.xhtml new file mode 100644 index 0000000000..a208c04b9f --- /dev/null +++ b/layout/reftests/svg/text-language-01.xhtml @@ -0,0 +1,37 @@ +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>SVG, text, language...</title> +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> +<style type="text/css"> +body { + font-family: sans-serif; + font-size: 24px; + margin: 24px; +} +div { + height: 100px; +} +</style> +</head> + +<!-- The reference is tagged as "en", the test cases as other languages. + Expectation is that these will have different default fonts, + so the test and reference should NOT match. --> +<body> +<div lang="ar" style="height:100px"> + <svg xmlns="http://www.w3.org/2000/svg" height="200"> + <text y="50">Hello world, 你好吗?</text> + </svg> +</div> +<div lang="zh-TW" style="height:100px"> + <svg xmlns="http://www.w3.org/2000/svg" height="200"> + <text y="50">Hello world, 你好吗?</text> + </svg> +</div> +<div lang="ja" style="height:100px"> + <svg xmlns="http://www.w3.org/2000/svg" height="200"> + <text y="50">Hello world, 你好吗?</text> + </svg> +</div> +</body> +</html> diff --git a/layout/reftests/svg/text-layout-01-ref.svg b/layout/reftests/svg/text-layout-01-ref.svg new file mode 100644 index 0000000000..abaa11f310 --- /dev/null +++ b/layout/reftests/svg/text-layout-01-ref.svg @@ -0,0 +1,42 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink" + font-family="monospace" font-size="20" xml:space="preserve"> + + <title>Reference to check that dx, dy works for text</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=388547 --> + + <text x="30" y="30">TEST1</text> + + <text x="30" y="60">T</text> + <text x="30" y="70"> E</text> + <text x="40" y="80"> ST2</text> + + <text x="30" y="100">T</text> + <text x="30" y="110"> E</text> + <text x="40" y="120"> ST3</text> + + <text x="30" y="160">T</text> + <text x="30" y="150"> EST4</text> + + <text x="40" y="200">TEST5</text> + + <text x="220" y="30">T</text> + <text x="240" y="30">E</text> + <text x="260" y="30">S</text> + <text x="280" y="30">T6</text> + + <text x="220" y="70">T</text> + <text x="220" y="90">E</text> + <text x="220" y="110">S</text> + <text x="220" y="130">T</text> + <text x="220" y="150">7</text> + + <text x="220" y="200">T ST8</text> + + <g transform="translate(150,100)rotate(45)"><text>A</text></g> +</svg> diff --git a/layout/reftests/svg/text-layout-01.svg b/layout/reftests/svg/text-layout-01.svg new file mode 100644 index 0000000000..25c28d6b3a --- /dev/null +++ b/layout/reftests/svg/text-layout-01.svg @@ -0,0 +1,36 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink" + font-family="monospace" font-size="20" xml:space="preserve"> + + <title>Testcase to check that dx, dy works for text</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=388547 --> + + <defs> + <path id="h1" d="M 30,150 h 100"/> + <path id="h2" d="M 30,200 h 100"/> + <path id="h3" d="M 220,200 h 100"/> + </defs> + + <text x="20" y="20" dx="10" dy="10">TEST1</text> + + <text x="30" y="60" dx="0, 0, 10" dy="0, 10, 10">TEST2</text> + + <text x="30" y="100">T<tspan dx="0, 10" dy="10, 10">EST</tspan>3</text> + + <text><textPath xlink:href="#h1"><tspan dy="10, -10">TE</tspan>ST4</textPath></text> + + <text><textPath xlink:href="#h2"><tspan dx="10">TE</tspan>ST5</textPath></text> + + <text x="220, 240, 260, 280" y="30">TEST6</text> + + <text x="220, 220, 220, 220, 220" y="70, 90, 110, 130, 150">TEST7</text> + + <text><textPath xlink:href="#h3"><tspan dx="0,1000,-1000">TES</tspan>T8</textPath></text> + + <text x="150" y="100" rotate="45">A</text> +</svg> diff --git a/layout/reftests/svg/text-layout-02-ref.svg b/layout/reftests/svg/text-layout-02-ref.svg new file mode 100644 index 0000000000..7f416b1e90 --- /dev/null +++ b/layout/reftests/svg/text-layout-02-ref.svg @@ -0,0 +1,21 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink" + font-family="monospace" font-size="20" xml:space="preserve"> + + <title>Reference to check that a single rotate value works for text</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=521636 --> + + <defs> + <path id="h1" d="M 30,150 h 100"/> + </defs> + + <text x="20" y="20" rotate="90,90,90,90,90">TEST1</text> + + <text><textPath xlink:href="#h1"><tspan rotate="90,90">TE</tspan>ST4</textPath></text> + +</svg> diff --git a/layout/reftests/svg/text-layout-02.svg b/layout/reftests/svg/text-layout-02.svg new file mode 100644 index 0000000000..cb9a6eb9bf --- /dev/null +++ b/layout/reftests/svg/text-layout-02.svg @@ -0,0 +1,21 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink" + font-family="monospace" font-size="20" xml:space="preserve"> + + <title>Testcase to check that a single rotate value works for text</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=521636 --> + + <defs> + <path id="h1" d="M 30,150 h 100"/> + </defs> + + <text x="20" y="20" rotate="90">TEST1</text> + + <text><textPath xlink:href="#h1"><tspan rotate="90">TE</tspan>ST4</textPath></text> + +</svg> diff --git a/layout/reftests/svg/text-layout-03-ref.svg b/layout/reftests/svg/text-layout-03-ref.svg new file mode 100644 index 0000000000..1b035782d2 --- /dev/null +++ b/layout/reftests/svg/text-layout-03-ref.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference to check that nodes without text don't affect whitespace handling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=617737 --> + + <g text-anchor="end" font-size="30"> + <text x="100" y="75">ABC </text> + </g> +</svg> diff --git a/layout/reftests/svg/text-layout-03.svg b/layout/reftests/svg/text-layout-03.svg new file mode 100644 index 0000000000..934dab5772 --- /dev/null +++ b/layout/reftests/svg/text-layout-03.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase to check that nodes without text don't affect whitespace handling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=617737 --> + + <g text-anchor="end" font-size="30"> + <text x="100" y="75">ABC <tspan/></text> + </g> +</svg> diff --git a/layout/reftests/svg/text-layout-04-ref.svg b/layout/reftests/svg/text-layout-04-ref.svg new file mode 100644 index 0000000000..638e0336b8 --- /dev/null +++ b/layout/reftests/svg/text-layout-04-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference to check whitespace handling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=620286 --> + + <text x="10" y="50" font-size="50">A <tspan/>B</text> +</svg> diff --git a/layout/reftests/svg/text-layout-04.svg b/layout/reftests/svg/text-layout-04.svg new file mode 100644 index 0000000000..1c72cb4354 --- /dev/null +++ b/layout/reftests/svg/text-layout-04.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase to check whitespace handling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=620286 --> + + <text x="10" y="50" font-size="50">A <tspan/> B</text> +</svg> diff --git a/layout/reftests/svg/text-layout-05-ref.svg b/layout/reftests/svg/text-layout-05-ref.svg new file mode 100644 index 0000000000..3f0c996d9f --- /dev/null +++ b/layout/reftests/svg/text-layout-05-ref.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference to check that dominant-baseline works for tspan</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=672519 --> + + <rect width="100%" height="100%" fill="lime"/> + <text x="20" y="200" dominant-baseline="central" + font-family="monospace" font-size="50px">foo bar baz</text> +</svg> diff --git a/layout/reftests/svg/text-layout-05.svg b/layout/reftests/svg/text-layout-05.svg new file mode 100644 index 0000000000..7842f1bcd8 --- /dev/null +++ b/layout/reftests/svg/text-layout-05.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase to check that dominant-baseline works for tspan</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=672519 --> + + <rect width="100%" height="100%" fill="lime"/> + <text x="20" y="200" dominant-baseline="central" + font-family="monospace" font-size="50px"><tspan>foo </tspan><tspan>bar </tspan><tspan>baz</tspan></text> +</svg> diff --git a/layout/reftests/svg/text-layout-06-ref.svg b/layout/reftests/svg/text-layout-06-ref.svg new file mode 100644 index 0000000000..9751d1a17e --- /dev/null +++ b/layout/reftests/svg/text-layout-06-ref.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference to check fill and stroke handling</title> + + <linearGradient id="transparent"> + <stop stop-opacity="0"/> + </linearGradient> + <text x="50" y="80" font-size="80" fill="blue" stroke="url(#transparent)">A B</text> + <text x="50" y="80" font-size="80" fill="none" stroke="yellow" stroke-width="2">A B</text> +</svg> diff --git a/layout/reftests/svg/text-layout-06.svg b/layout/reftests/svg/text-layout-06.svg new file mode 100644 index 0000000000..5e8e49b91d --- /dev/null +++ b/layout/reftests/svg/text-layout-06.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase to check fill and stroke handling</title> + + <text x="50" y="80" font-size="80" fill="blue" stroke="yellow" stroke-width="2">A B</text> +</svg> diff --git a/layout/reftests/svg/text-layout-07-ref.svg b/layout/reftests/svg/text-layout-07-ref.svg new file mode 100644 index 0000000000..939b1faea2 --- /dev/null +++ b/layout/reftests/svg/text-layout-07-ref.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"> + <text transform="translate(0, 31)" font-size="120" text-anchor="middle"> + <tspan y="122.3" x="273">ABC</tspan></text> +</svg> diff --git a/layout/reftests/svg/text-layout-07.svg b/layout/reftests/svg/text-layout-07.svg new file mode 100644 index 0000000000..056827043b --- /dev/null +++ b/layout/reftests/svg/text-layout-07.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <text transform="translate(0, 31)" font-size="120" text-anchor="middle"> + <tspan y="122.3" x="273">ABC</tspan> + </text> +</svg> diff --git a/layout/reftests/svg/text-layout-08-ref.svg b/layout/reftests/svg/text-layout-08-ref.svg new file mode 100644 index 0000000000..e4c6612754 --- /dev/null +++ b/layout/reftests/svg/text-layout-08-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="100" y="100" rotate="-10 -10 10 10 10" style="font: 48px sans-serif">A B C</text> +</svg> diff --git a/layout/reftests/svg/text-layout-08.svg b/layout/reftests/svg/text-layout-08.svg new file mode 100644 index 0000000000..1d17f2d613 --- /dev/null +++ b/layout/reftests/svg/text-layout-08.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="100" y="100" rotate="-10 -10 -10 -10 -10" style="font: 48px sans-serif"> + A + <tspan rotate="10">B C</tspan> + </text> +</svg> diff --git a/layout/reftests/svg/text-layout-09.svg b/layout/reftests/svg/text-layout-09.svg new file mode 100644 index 0000000000..c5a0626c08 --- /dev/null +++ b/layout/reftests/svg/text-layout-09.svg @@ -0,0 +1,49 @@ +<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + + <foreignObject><canvas xmlns="http://www.w3.org/1999/xhtml" id="canvas"/></foreignObject> + + <rect width="100%" height="100%" fill="lime"/> + + <g fill="red"> + <text dominant-baseline="hanging" x="70" y="70">hanging</text> + <text dominant-baseline="mathematical" x="70" y="140">mathematical</text> + </g> + + <g fill="lime"> + <text id="hanging" x="70" y="70" dy="0">hanging</text> + <text id="mathematical" x="70" y="140" dy="0">mathematical</text> + </g> + + <style><![CDATA[ + text { + font: bold 30px Verdana, Helvetica, Arial, sans-serif; + } + ]]></style> + <script> + function cover(id, offset) { + let element = document.getElementById(id); + element.dy.baseVal[0].value = offset; + let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); + let bbox = element.getBBox(); + rect.x.baseVal.value = bbox.x; + rect.y.baseVal.value = bbox.y; + rect.width.baseVal.value = bbox.width; + rect.height.baseVal.value = bbox.height; + element.parentElement.appendChild(rect); + } + onload = function() { + const canvas = document.getElementById('canvas'); + const ctx = canvas.getContext('2d'); + ctx.font = 'bold 30px Verdana, Helvetica, Arial, sans-serif'; + + let text = 'h'; + let textMetrics = ctx.measureText(text); + + cover("hanging", textMetrics.actualBoundingBoxAscent * 1.1); + + cover("mathematical", textMetrics.actualBoundingBoxAscent / 2 * 1.4); + + document.documentElement.removeAttribute('class'); + } + </script> +</svg> diff --git a/layout/reftests/svg/text-layout-10.svg b/layout/reftests/svg/text-layout-10.svg new file mode 100644 index 0000000000..cf4397d85a --- /dev/null +++ b/layout/reftests/svg/text-layout-10.svg @@ -0,0 +1,66 @@ +<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + + <foreignObject><canvas xmlns="http://www.w3.org/1999/xhtml" id="canvas"/></foreignObject> + + <rect width="100%" height="100%" fill="lime"/> + + <g fill="red"> + <text dominant-baseline="alphabetic" x="10" y="20">Alphabetic</text> + <text dominant-baseline="auto" x="80" y="20">Auto</text> + <text dominant-baseline="middle" x="150" y="20">Middle</text> + <text dominant-baseline="hanging" x="220" y="20">Hanging</text> + <text dominant-baseline="central" x="290" y="20">Central</text> + <text dominant-baseline="mathematical" x="360" y="20">Mathematical</text> + </g> + + <g fill="lime"> + <text id="alphabetic" dominant-baseline="text-before-edge" x="10" y="20" dx="0">Alphabetic</text> + <text id="auto" dominant-baseline="text-before-edge" x="80" y="20" dx="0">Auto</text> + <text id="middle" dominant-baseline="text-before-edge" x="150" y="20" dx="0">Middle</text> + <text id="hanging" dominant-baseline="text-before-edge" x="220" y="20" dx="0">Hanging</text> + <text id="central" dominant-baseline="text-before-edge" x="290" y="20" dx="0">Central</text> + <text id="mathematical" dominant-baseline="text-before-edge" x="360" y="20" dx="0">Mathematical</text> + </g> + + <style><![CDATA[ + text { + font: bold 30px Verdana, Helvetica, Arial, sans-serif; + writing-mode: vertical-rl; + } + ]]></style> + <script> + function cover(id, offset) { + let element = document.getElementById(id); + element.dx.baseVal[0].value = offset; + let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); + let bbox = element.getBBox(); + rect.x.baseVal.value = bbox.x; + rect.y.baseVal.value = bbox.y; + rect.width.baseVal.value = bbox.width; + rect.height.baseVal.value = bbox.height; + element.parentElement.appendChild(rect); + } + onload = function() { + const canvas = document.getElementById('canvas'); + const ctx = canvas.getContext('2d'); + ctx.font = 'bold 30px Verdana, Helvetica, Arial, sans-serif'; + + let text = 'h'; + let textMetrics = ctx.measureText(text); + + cover("alphabetic", textMetrics.actualBoundingBoxAscent); + + cover("auto", textMetrics.actualBoundingBoxAscent * 0.8); + + cover("middle", textMetrics.actualBoundingBoxAscent * 0.6); + + cover("hanging", textMetrics.actualBoundingBoxAscent * 0.1); + + cover("central", textMetrics.actualBoundingBoxAscent * 0.7); + + cover("mathematical", textMetrics.actualBoundingBoxAscent * 0.4); + + document.documentElement.removeAttribute('class'); + } + </script> +</svg> diff --git a/layout/reftests/svg/text-scale-01-ref.svg b/layout/reftests/svg/text-scale-01-ref.svg new file mode 100644 index 0000000000..bf481bfdfa --- /dev/null +++ b/layout/reftests/svg/text-scale-01-ref.svg @@ -0,0 +1,14 @@ +<!-- + 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"> + + <title>Reference for text scaling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=392233 --> + + <text x="0" y="128" font-size="128">Hello</text> + <text x="0" y="256" font-size="128">Hello</text> + <text x="0" y="384" font-size="128">Hello</text> +</svg> diff --git a/layout/reftests/svg/text-scale-01.svg b/layout/reftests/svg/text-scale-01.svg new file mode 100644 index 0000000000..e109d91541 --- /dev/null +++ b/layout/reftests/svg/text-scale-01.svg @@ -0,0 +1,22 @@ +<!-- + 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"> + + <title>Testcase for text scaling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=392233 --> + <!-- we use powers of two for the scales so they can be represented + exactly in a floating point representation --> + + <g transform="scale(8)"> + <text x="0" y="16" font-size="16">Hello</text> + </g> + <g transform="scale(64)"> + <text x="0" y="4" font-size="2">Hello</text> + </g> + <g transform="scale(512)"> + <text x="0" y="0.75" font-size="0.25">Hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text-scale-02-ref.svg b/layout/reftests/svg/text-scale-02-ref.svg new file mode 100644 index 0000000000..efc1c63df0 --- /dev/null +++ b/layout/reftests/svg/text-scale-02-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <linearGradient id="g" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="500" y2="500"> + <stop stop-color="red"/> + <stop stop-color="yellow" offset="1"/> + </linearGradient> + <rect x="100" y="100" width="400" height="400" fill="url(#g)"/> +</svg> diff --git a/layout/reftests/svg/text-scale-02.svg b/layout/reftests/svg/text-scale-02.svg new file mode 100644 index 0000000000..d8d8d69e80 --- /dev/null +++ b/layout/reftests/svg/text-scale-02.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { + font-family: Ahem; + src: url(../fonts/Ahem.ttf); + } + </style> + <linearGradient id="g" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="500" y2="500"> + <stop stop-color="red"/> + <stop stop-color="yellow" offset="1"/> + </linearGradient> + <text x="100" y="420" style="font: 400px Ahem; fill: url(#g)">a</text> +</svg> diff --git a/layout/reftests/svg/text-scale-03-ref.svg b/layout/reftests/svg/text-scale-03-ref.svg new file mode 100644 index 0000000000..7bba5f0f8e --- /dev/null +++ b/layout/reftests/svg/text-scale-03-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect x="100" y="100" width="400" height="400" style="fill: none; font: 400px Ahem; stroke: black; stroke-width: 8px"/> +</svg> diff --git a/layout/reftests/svg/text-scale-03.svg b/layout/reftests/svg/text-scale-03.svg new file mode 100644 index 0000000000..1e3483e28e --- /dev/null +++ b/layout/reftests/svg/text-scale-03.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { + font-family: Ahem; + src: url(../fonts/Ahem.ttf); + } + </style> + <text x="100" y="420" style="fill: none; font: 400px Ahem; stroke: black; stroke-width: 8px">a</text> +</svg> diff --git a/layout/reftests/svg/text-stroke-scaling-01-ref.svg b/layout/reftests/svg/text-stroke-scaling-01-ref.svg new file mode 100644 index 0000000000..8467e78574 --- /dev/null +++ b/layout/reftests/svg/text-stroke-scaling-01-ref.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <title>Reference for stroke-width of text with scaling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=595209 --> + + <g transform="scale(2)"> + <text x="10" y="30" + fill="black" stroke="black" stroke-width="1">a</text> + <text x="20" y="30" + fill="black" stroke="black" stroke-width="1">b</text> + <text x="30" y="30" + fill="black" stroke="black" stroke-width="1">c</text> + </g> +</svg> diff --git a/layout/reftests/svg/text-stroke-scaling-01.svg b/layout/reftests/svg/text-stroke-scaling-01.svg new file mode 100644 index 0000000000..5801a86e2b --- /dev/null +++ b/layout/reftests/svg/text-stroke-scaling-01.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <title>Testcase for stroke-width of text with scaling</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=595209 --> + + <g transform="scale(2)"> + <text x="10, 20, 30" y="30" rotate="0" + fill="black" stroke="black" stroke-width="1">abc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text-stroke-scaling-02-ref.html b/layout/reftests/svg/text-stroke-scaling-02-ref.html new file mode 100644 index 0000000000..cc54d7edd4 --- /dev/null +++ b/layout/reftests/svg/text-stroke-scaling-02-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <svg width="500" height="400"> + <text x="0" y="20" style="stroke: orange; stroke-width: 0.5px" + transform="scale(4)"> + This is some text + </text> + </svg> +</html> diff --git a/layout/reftests/svg/text-stroke-scaling-02a.html b/layout/reftests/svg/text-stroke-scaling-02a.html new file mode 100644 index 0000000000..194b58cd06 --- /dev/null +++ b/layout/reftests/svg/text-stroke-scaling-02a.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html class="reftest-wait"> + <svg width="500" height="400"> + <text x="0" y="20" style="stroke: orange; stroke-width: 2px" + transform="scale(4)"> + This is some text + </text> + </svg> + <script> + onload = function() { + var obj = document.querySelector("text"); + window.w = obj.getBoundingClientRect().width; + obj.style.vectorEffect = "non-scaling-stroke"; + document.documentElement.className = ""; + } + </script> +</html> diff --git a/layout/reftests/svg/text-stroke-scaling-02b.html b/layout/reftests/svg/text-stroke-scaling-02b.html new file mode 100644 index 0000000000..162b418a45 --- /dev/null +++ b/layout/reftests/svg/text-stroke-scaling-02b.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <svg width="500" height="400"> + <text x="0" y="20" style="stroke: orange; vector-effect: non-scaling-stroke; + stroke-width: 2px" + transform="scale(4)"> + This is some text + </text> + </svg> +</html> diff --git a/layout/reftests/svg/text-style-01-ref.svg b/layout/reftests/svg/text-style-01-ref.svg new file mode 100644 index 0000000000..9e5b67263e --- /dev/null +++ b/layout/reftests/svg/text-style-01-ref.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + +<title>Reference for style changes</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=395155 --> + +<style id="s" type="text/css"> +tspan { fill: green; } +</style> + +<text> + <tspan x="10" y="50"> + This should be green + </tspan> +</text> + +</svg> diff --git a/layout/reftests/svg/text-style-01a.svg b/layout/reftests/svg/text-style-01a.svg new file mode 100644 index 0000000000..4e8fc8ea35 --- /dev/null +++ b/layout/reftests/svg/text-style-01a.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" onload="m();"> + +<title>Testcase for style changes</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=395155 --> + +<style id="s" type="text/css"> +* { fill: red; } +</style> + +<script> +function m() +{ + var s = document.getElementById("s"); + s.appendChild(document.createTextNode("tspan { fill: green }")); +} +</script> + +<text> + <tspan x="10" y="50"> + This should be green + </tspan> +</text> + +</svg> diff --git a/layout/reftests/svg/text-style-01b.svg b/layout/reftests/svg/text-style-01b.svg new file mode 100644 index 0000000000..dd07f3a930 --- /dev/null +++ b/layout/reftests/svg/text-style-01b.svg @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" onload="m();"> + +<title>Testcase for style changes</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=395155 --> + +<style id="s" type="text/css"> +* { fill: red; } +</style> + +<script> +function m() +{ + var s = document.getElementById("s"); + s.appendChild(document.createTextNode("tspan { fill: ")); + s.appendChild(document.createTextNode("green }")); +} +</script> + +<text> + <tspan x="10" y="50"> + This should be green + </tspan> +</text> + +</svg> diff --git a/layout/reftests/svg/text-style-01c.svg b/layout/reftests/svg/text-style-01c.svg new file mode 100644 index 0000000000..aeff296fb3 --- /dev/null +++ b/layout/reftests/svg/text-style-01c.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" onload="m();"> + +<title>Testcase for style changes</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=395155 --> + +<style id="s" type="text/css"> +tspan { fill: red; } +</style> + +<script> +function m() +{ + var s = document.getElementById("s"); + s.firstChild.data = s.firstChild.data.replace("red", "green"); +} +</script> + +<text> + <tspan x="10" y="50"> + This should be green + </tspan> +</text> + +</svg> diff --git a/layout/reftests/svg/text-style-01d.svg b/layout/reftests/svg/text-style-01d.svg new file mode 100644 index 0000000000..c32a70545e --- /dev/null +++ b/layout/reftests/svg/text-style-01d.svg @@ -0,0 +1,30 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" onload="m();"> + +<title>Testcase for style changes</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=395155 --> + +<style id="s" type="text/css"> +* { fill: red; } +</style> + +<script> +function m() +{ + var s = document.getElementById("s"); + s.appendChild(document.createTextNode("")); + s.firstChild.data = "tspan { fill: green }"; +} +</script> + +<text> + <tspan x="10" y="50"> + This should be green + </tspan> +</text> + +</svg> diff --git a/layout/reftests/svg/text-style-01e.svg b/layout/reftests/svg/text-style-01e.svg new file mode 100644 index 0000000000..9f621bcdbe --- /dev/null +++ b/layout/reftests/svg/text-style-01e.svg @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" onload="m();"> + +<title>Testcase for style changes</title> + +<!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=395155 --> + +<style id="s" type="text/css"> +tspan { fill: red; } +</style> + +<script> +function m() +{ + var s = document.getElementById("s"); + s.appendChild(document.createTextNode("tspan { fill: green }")); + s.appendChild(document.createTextNode("tspan { fill: red }")); + s.removeChild(s.lastChild); +} +</script> + +<text> + <tspan x="10" y="50"> + This should be green + </tspan> +</text> + +</svg> diff --git a/layout/reftests/svg/text-white-space-01-ref.svg b/layout/reftests/svg/text-white-space-01-ref.svg new file mode 100644 index 0000000000..54ec18fe83 --- /dev/null +++ b/layout/reftests/svg/text-white-space-01-ref.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <title>Reference to check xml:space mapping to white-space for foreignObject</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=828962 --> + + <text x="10" y="20">A    B</text> + <foreignObject x="10" y="40" width="100" height="100"><h:p>A B</h:p></foreignObject> + <foreignObject x="10" y="140" width="100" height="100"><h:p>A    B<h:br/>C</h:p></foreignObject> +</svg> diff --git a/layout/reftests/svg/text-white-space-01.svg b/layout/reftests/svg/text-white-space-01.svg new file mode 100644 index 0000000000..daaa85148b --- /dev/null +++ b/layout/reftests/svg/text-white-space-01.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" xml:space="preserve"> + <title>Testcase to check xml:space mapping to white-space for foreignObject</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=828962 --> + + <text x="10" y="20">A B</text> + <foreignObject x="10" y="40" width="100" height="100"><h:p>A B</h:p></foreignObject> + <foreignObject x="10" y="140" width="100" height="100" style="white-space: pre"><h:p>A B +C</h:p></foreignObject> +</svg> diff --git a/layout/reftests/svg/text/clipPath-applied-ref.svg b/layout/reftests/svg/text/clipPath-applied-ref.svg new file mode 100644 index 0000000000..e628a865c9 --- /dev/null +++ b/layout/reftests/svg/text/clipPath-applied-ref.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <g style="font: 32px Ahem; fill: blue; white-space: pre"> + <text x="20" y="100">one</text> + <text x="20" y="200">three</text> + <text x="20" y="150" text-decoration="line-through"> </text> + <text x="20" y="250" text-decoration="line-through"> </text> + </g> + <rect x="100" width="300" height="400" fill="white"/> + <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> + <rect x="20" y="73" width="96" height="32"/> + <rect x="20" y="173" width="96" height="32"/> + </g> +</svg> diff --git a/layout/reftests/svg/text/clipPath-applied.svg b/layout/reftests/svg/text/clipPath-applied.svg new file mode 100644 index 0000000000..ba213f8bc5 --- /dev/null +++ b/layout/reftests/svg/text/clipPath-applied.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <defs> + <clipPath id="c" x="0" y="0" width="600" height="400"> + <rect width="100" height="400"/> + </clipPath> + </defs> + <g style="font: 32px Ahem; fill: blue; white-space: pre"> + <text x="20" y="100" clip-path="url(#c)">one</text> + <text x="20" y="150" clip-path="url(#c)" style="text-decoration: line-through"> </text> + <g clip-path="url(#c)"> + <text x="20" y="200">three</text> + <text x="20" y="250" style="text-decoration: line-through"> </text> + </g> + </g> + <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> + <rect x="20" y="73" width="96" height="32"/> + <rect x="20" y="173" width="96" height="32"/> + </g> +</svg> diff --git a/layout/reftests/svg/text/clipPath-content-2-ref.svg b/layout/reftests/svg/text/clipPath-content-2-ref.svg new file mode 100644 index 0000000000..9404d5a495 --- /dev/null +++ b/layout/reftests/svg/text/clipPath-content-2-ref.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <!-- We stick this in a pattern instead of rendering the <text> elements + directly so that it gets the same mFontSizeScaleFactor, and thus + will get the same thickness text decoration line. --> + <pattern id="p" x="0" y="0" width="600" height="400" patternUnits="userSpaceOnUse"> + <g style="font: 32px Ahem; white-space: pre; fill: blue"> + <text x="20" y="100">one</text> + <text x="20" y="150" style="text-decoration: line-through"> </text> + </g> + </pattern> + <rect width="600" height="400" fill="url(#p)"/> + <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> + <rect x="20" y="73" width="96" height="32"/> + </g> +</svg> diff --git a/layout/reftests/svg/text/clipPath-content-2.svg b/layout/reftests/svg/text/clipPath-content-2.svg new file mode 100644 index 0000000000..fb3483641e --- /dev/null +++ b/layout/reftests/svg/text/clipPath-content-2.svg @@ -0,0 +1,42 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <defs> + <clipPath id="c" x="0" y="0" width="600" height="400"> + <text x="20" y="100" style="font: 32px Ahem; white-space: pre">one</text> + <text x="20" y="150" style="font: 32px Ahem; white-space: pre; text-decoration: line-through"> </text> + </clipPath> + </defs> + <rect x="0" y="0" width="600" height="400" fill="blue" clip-path="url(#c)"/> + <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> + <rect x="20" y="73" width="96" height="32"/> + </g> + <script> + function waitUntilFontLoaded() { + var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas"); + canvas.width = 100; + canvas.height = 100; + var ctx = canvas.getContext("2d"); + ctx.font = "100px Ahem"; + ctx.fillText("_", 0, 100); + var img = ctx.getImageData(50, 50, 1, 1); + if (img.data[3] == 255) { + setTimeout(function() { + document.documentElement.removeAttribute("class"); + }, 1); + } else { + setTimeout(waitUntilFontLoaded, 200); + } + } + + setTimeout(waitUntilFontLoaded, 200); + </script> +</svg> diff --git a/layout/reftests/svg/text/clipPath-content-ref.svg b/layout/reftests/svg/text/clipPath-content-ref.svg new file mode 100644 index 0000000000..4a37d44755 --- /dev/null +++ b/layout/reftests/svg/text/clipPath-content-ref.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <g style="font: 32px Ahem; white-space: pre; fill: blue"> + <text x="20" y="100">one</text> + </g> + <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> + <rect x="20" y="73" width="96" height="32"/> + </g> +</svg> diff --git a/layout/reftests/svg/text/clipPath-content.svg b/layout/reftests/svg/text/clipPath-content.svg new file mode 100644 index 0000000000..a365b002a5 --- /dev/null +++ b/layout/reftests/svg/text/clipPath-content.svg @@ -0,0 +1,41 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <defs> + <clipPath id="c" x="0" y="0" width="600" height="400"> + <text x="20" y="100" style="font: 32px Ahem; white-space: pre">one</text> + </clipPath> + </defs> + <rect x="0" y="0" width="600" height="400" fill="blue" clip-path="url(#c)"/> + <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> + <rect x="20" y="73" width="96" height="32"/> + </g> + <script> + function waitUntilFontLoaded() { + var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas"); + canvas.width = 100; + canvas.height = 100; + var ctx = canvas.getContext("2d"); + ctx.font = "100px Ahem"; + ctx.fillText("_", 0, 100); + var img = ctx.getImageData(50, 50, 1, 1); + if (img.data[3] == 255) { + setTimeout(function() { + document.documentElement.removeAttribute("class"); + }, 1); + } else { + setTimeout(waitUntilFontLoaded, 200); + } + } + + setTimeout(waitUntilFontLoaded, 200); + </script> +</svg> diff --git a/layout/reftests/svg/text/deselectAll-ref.svg b/layout/reftests/svg/text/deselectAll-ref.svg new file mode 100644 index 0000000000..228b0755db --- /dev/null +++ b/layout/reftests/svg/text/deselectAll-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/deselectAll.svg b/layout/reftests/svg/text/deselectAll.svg new file mode 100644 index 0000000000..6c0c18d2bc --- /dev/null +++ b/layout/reftests/svg/text/deselectAll.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>hello</text> + </g> + <script> + var text = document.getElementsByTagName("text")[0]; + text.selectSubString(1, 3); + document.documentElement.deselectAll(); + </script> +</svg> diff --git a/layout/reftests/svg/text/display-none-1.svg b/layout/reftests/svg/text/display-none-1.svg new file mode 100644 index 0000000000..f24835479c --- /dev/null +++ b/layout/reftests/svg/text/display-none-1.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text><tspan display="none">xx</tspan>hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/display-none-2.svg b/layout/reftests/svg/text/display-none-2.svg new file mode 100644 index 0000000000..cec10efd21 --- /dev/null +++ b/layout/reftests/svg/text/display-none-2.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>he<tspan display="none">xx</tspan>llo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/display-none-3.svg b/layout/reftests/svg/text/display-none-3.svg new file mode 100644 index 0000000000..9d616067b1 --- /dev/null +++ b/layout/reftests/svg/text/display-none-3.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>hello<tspan display="none">xx</tspan></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/display-none-4.svg b/layout/reftests/svg/text/display-none-4.svg new file mode 100644 index 0000000000..84fa857444 --- /dev/null +++ b/layout/reftests/svg/text/display-none-4.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200" + style="font: 16px sans-serif"> + <text x="100" y="100">hello</text> + <text x="100" y="200"><textPath display="none">f</textPath></text> +</svg> diff --git a/layout/reftests/svg/text/dynamic-dominant-baseline-ref.svg b/layout/reftests/svg/text/dynamic-dominant-baseline-ref.svg new file mode 100644 index 0000000000..f8b0956208 --- /dev/null +++ b/layout/reftests/svg/text/dynamic-dominant-baseline-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="100" y="100" font-family="sans-serif" dominant-baseline="central">hello <tspan font-size="48px">there</tspan></text> +</svg> diff --git a/layout/reftests/svg/text/dynamic-dominant-baseline.svg b/layout/reftests/svg/text/dynamic-dominant-baseline.svg new file mode 100644 index 0000000000..5a05b801c8 --- /dev/null +++ b/layout/reftests/svg/text/dynamic-dominant-baseline.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <text x="100" y="100" font-family="sans-serif">hello <tspan font-size="48px">there</tspan></text> + <script> + function f() { + document.getElementsByTagName("text")[0].style.dominantBaseline = "central"; + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", f, false); + </script> +</svg> diff --git a/layout/reftests/svg/text/dynamic-font-size-2-ref.svg b/layout/reftests/svg/text/dynamic-font-size-2-ref.svg new file mode 100644 index 0000000000..d4f0a7a967 --- /dev/null +++ b/layout/reftests/svg/text/dynamic-font-size-2-ref.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + svg { font: 32px sans-serif; } + </style> + <defs> + <mask id="m" x="0" y="0" width="600" height="400"> + <text x="100" y="100" fill="white"><tspan>abc</tspan><tspan>def</tspan></text> + </mask> + </defs> + <rect width="600" height="400" fill="blue" mask="url(#m)"/> +</svg> diff --git a/layout/reftests/svg/text/dynamic-font-size-2.svg b/layout/reftests/svg/text/dynamic-font-size-2.svg new file mode 100644 index 0000000000..3e9a0ced3f --- /dev/null +++ b/layout/reftests/svg/text/dynamic-font-size-2.svg @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <!-- + This tests that a style change on a <text> element within a resource + element like <mask> will cause a reflow of the <text>. + --> + <style> + svg { font: 16px sans-serif; } + svg.a { font-size: 32px; } + </style> + <defs> + <mask id="m" x="0" y="0" width="600" height="400"> + <text x="100" y="100" fill="white"><tspan>abc</tspan><tspan>def</tspan></text> + </mask> + </defs> + <rect width="600" height="400" fill="blue" mask="url(#m)"/> + <script> + function doTest() { + document.documentElement.setAttribute("class", "a"); + } + + window.addEventListener("MozReftestInvalidate", doTest, false); + window.setTimeout(doTest, 4000); // fallback for running outside reftest + </script> +</svg> diff --git a/layout/reftests/svg/text/dynamic-font-size-3-ref.svg b/layout/reftests/svg/text/dynamic-font-size-3-ref.svg new file mode 100644 index 0000000000..a2f5e5f8e4 --- /dev/null +++ b/layout/reftests/svg/text/dynamic-font-size-3-ref.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + g { font: 32px sans-serif; } + </style> + <defs> + <g> + <mask id="m" x="0" y="0" width="600" height="400"> + <text x="100" y="100" fill="white"><tspan>abc</tspan><tspan>def</tspan></text> + </mask> + </g> + </defs> + <rect width="600" height="400" fill="blue" mask="url(#m)"/> +</svg> diff --git a/layout/reftests/svg/text/dynamic-font-size-3.svg b/layout/reftests/svg/text/dynamic-font-size-3.svg new file mode 100644 index 0000000000..c7f1dcb1d9 --- /dev/null +++ b/layout/reftests/svg/text/dynamic-font-size-3.svg @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <!-- + This tests that a style change on a <text> element within a resource + element like <mask> will cause a reflow of the <text>. + --> + <style> + g { font: 16px sans-serif; } + g.a { font-size: 32px; } + </style> + <defs> + <g> + <mask id="m" x="0" y="0" width="600" height="400"> + <text x="100" y="100" fill="white"><tspan>abc</tspan><tspan>def</tspan></text> + </mask> + </g> + </defs> + <rect width="600" height="400" fill="blue" mask="url(#m)"/> + <script> + function doTest() { + document.querySelector("g").setAttribute("class", "a"); + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", doTest, false); + window.setTimeout(doTest, 4000); // fallback for running outside reftest + </script> +</svg> diff --git a/layout/reftests/svg/text/dynamic-font-size-4-ref.svg b/layout/reftests/svg/text/dynamic-font-size-4-ref.svg new file mode 100644 index 0000000000..62d280caf2 --- /dev/null +++ b/layout/reftests/svg/text/dynamic-font-size-4-ref.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + g text { font: 32px sans-serif; } + </style> + <defs> + <g> + <mask id="m" x="0" y="0" width="600" height="400"> + <text x="100" y="100" fill="white"><tspan>abc</tspan><tspan>def</tspan></text> + </mask> + </g> + </defs> + <rect width="600" height="400" fill="blue" mask="url(#m)"/> +</svg> diff --git a/layout/reftests/svg/text/dynamic-font-size-4.svg b/layout/reftests/svg/text/dynamic-font-size-4.svg new file mode 100644 index 0000000000..4131e08e11 --- /dev/null +++ b/layout/reftests/svg/text/dynamic-font-size-4.svg @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <!-- + This tests that a style change on a <text> element within a resource + element like <mask> will cause a reflow of the <text>. + --> + <style> + g text { font: 16px sans-serif; } + g.a text { font-size: 32px; } + </style> + <defs> + <g> + <mask id="m" x="0" y="0" width="600" height="400"> + <text x="100" y="100" fill="white"><tspan>abc</tspan><tspan>def</tspan></text> + </mask> + </g> + </defs> + <rect width="600" height="400" fill="blue" mask="url(#m)"/> + <script> + function doTest() { + document.querySelector("g").setAttribute("class", "a"); + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", doTest, false); + window.setTimeout(doTest, 4000); // fallback for running outside reftest + </script> +</svg> diff --git a/layout/reftests/svg/text/dynamic-font-size-ref.svg b/layout/reftests/svg/text/dynamic-font-size-ref.svg new file mode 100644 index 0000000000..64879d3ee4 --- /dev/null +++ b/layout/reftests/svg/text/dynamic-font-size-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="100" y="100" style="font: 16px sans-serif">hello there</text> +</svg> diff --git a/layout/reftests/svg/text/dynamic-font-size.svg b/layout/reftests/svg/text/dynamic-font-size.svg new file mode 100644 index 0000000000..f7a55bd897 --- /dev/null +++ b/layout/reftests/svg/text/dynamic-font-size.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <text x="100" y="100" style="font: 32px sans-serif"><tspan>hello</tspan> there</text> + <script> + function f() { + document.getElementsByTagName("text")[0].style.fontSize = "16px"; + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", f, false); + </script> +</svg> diff --git a/layout/reftests/svg/text/dynamic-multiple-x-ref.svg b/layout/reftests/svg/text/dynamic-multiple-x-ref.svg new file mode 100644 index 0000000000..b0ecda41d5 --- /dev/null +++ b/layout/reftests/svg/text/dynamic-multiple-x-ref.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" style="font: 16px sans-serif"> + <text x="100 150 200 250" y="50">34</text> + <text x="100 150 200 250" y="100">34</text> + <text x="100 150 200 250" y="150">1234</text> + <text x="200 250" y="200">34</text> + <text x="100 150 200 250 300 350" y="250">123456</text> + <text x="100 150 300 350" y="300">1256</text> + <text x="200 250" y="350">34</text> +</svg> diff --git a/layout/reftests/svg/text/dynamic-multiple-x.svg b/layout/reftests/svg/text/dynamic-multiple-x.svg new file mode 100644 index 0000000000..23f2b20f6c --- /dev/null +++ b/layout/reftests/svg/text/dynamic-multiple-x.svg @@ -0,0 +1,55 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait" style="font: 16px sans-serif"> + <text x="100 150 200 250" y="50"><tspan>12</tspan>34</text> + <text x="100 150 200 250" y="100"><tspan display="none">12</tspan>34</text> + <text x="100 150 200 250" y="150">34</text> + <text x="100 150 200 250" y="200">34</text> + <text x="100 150 200 250 300 350" y="250"><tspan>12</tspan>56</text> + <text x="100 150 200 250 300 350" y="300"><tspan>12</tspan>56</text> + <text x="100 150 200 250" y="350"><tspan display="none"/>34</text> + + <script> + function newTSpan(s) { + var e = document.createElementNS("http://www.w3.org/2000/svg", "tspan"); + e.textContent = s; + return e; + } + + function f() { + window.removeEventListener("MozAfterPaint", f); + + var t = document.getElementsByTagName("text"); + var e; + + t[0].removeChild(t[0].firstChild); + + t[1].removeChild(t[1].firstChild); + + e = newTSpan("12"); + t[2].insertBefore(e, t[2].firstChild); + + e = newTSpan("12"); + e.setAttribute("display", "none"); + t[3].insertBefore(e, t[3].firstChild); + + e = newTSpan("34"); + t[4].firstChild.appendChild(e); + + e = newTSpan("34"); + e.setAttribute("display", "none"); + t[5].firstChild.appendChild(e); + + e = newTSpan("12"); + t[6].firstChild.appendChild(e); + + setTimeout(function() { + document.documentElement.removeAttribute("class"); + }, 0); + } + + window.addEventListener("MozAfterPaint", f, false); + </script> +</svg> diff --git a/layout/reftests/svg/text/dynamic-non-scaling-stroke-ref.svg b/layout/reftests/svg/text/dynamic-non-scaling-stroke-ref.svg new file mode 100644 index 0000000000..8fb57ed2c1 --- /dev/null +++ b/layout/reftests/svg/text/dynamic-non-scaling-stroke-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" style="font: 32px sans-serif; text-rendering: geometricPrecision"> + <text x="100" y="100" stroke="blue" stroke-width="5"><tspan>hello</tspan> there</text> + + <text x="100" y="160" stroke="blue" stroke-width="5"><tspan>hello</tspan> there</text> + + <text x="100" y="220" stroke="blue" stroke-width="5"><tspan>hello</tspan> there</text> +</svg> diff --git a/layout/reftests/svg/text/dynamic-non-scaling-stroke.svg b/layout/reftests/svg/text/dynamic-non-scaling-stroke.svg new file mode 100644 index 0000000000..ea3ba19909 --- /dev/null +++ b/layout/reftests/svg/text/dynamic-non-scaling-stroke.svg @@ -0,0 +1,31 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <title>Test non-scaling-stroke repainting when ancestor transforms change</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=875069 --> +<style> + .noscale { + vector-effect: non-scaling-stroke; + } +</style> + <script> + +function doTest() { + document.getElementById("g").setAttribute("transform", "scale(2)"); + document.documentElement.removeAttribute('class'); +} + +document.addEventListener("MozReftestInvalidate", doTest, false); +setTimeout(doTest, 4000); // fallback for running outside reftest + + </script> + <g id="g" style="font: 16px sans-serif; text-rendering: geometricPrecision"> + <text x="50" y="50" stroke="blue" stroke-width="5" class="noscale"><tspan class="noscale">hello</tspan> there</text> + + <text x="50" y="80" stroke="blue" stroke-width="2.5"><tspan class="noscale" stroke-width="5">hello</tspan> there</text> + + <text x="50" y="110" stroke="blue" stroke-width="5" class="noscale"><tspan stroke-width="2.5">hello</tspan> there</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/dynamic-text-shadow.svg b/layout/reftests/svg/text/dynamic-text-shadow.svg new file mode 100644 index 0000000000..469eaa6023 --- /dev/null +++ b/layout/reftests/svg/text/dynamic-text-shadow.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <text x="30" y="30" fill="green" style="text-shadow: #cc9900 20px 12px 2px">Hello</text> + <script> + function f() { + document.getElementsByTagName("text")[0].style.textShadow = "grey 3px 3px"; + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", f, false); + </script> +</svg> diff --git a/layout/reftests/svg/text/filter-applied-ref.svg b/layout/reftests/svg/text/filter-applied-ref.svg new file mode 100644 index 0000000000..cd55e7e3f3 --- /dev/null +++ b/layout/reftests/svg/text/filter-applied-ref.svg @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <defs> + <filter id="f" x="0" y="0" width="150%" height="100%" filterUnits="objectBoundingBox"> + <feFlood flood-color="yellow" result="flood"/> + <feMerge> + <feMergeNode in="flood"/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + </defs> + <g style="font: 32px Ahem; fill: blue"> + <rect x="20" y="74" width="96" height="32" filter="url(#f)"/> + <g filter="url(#f)"> + <rect x="20" y="174" width="160" height="32"/> + </g> + </g> + <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> + <rect x="20" y="73" width="96" height="32"/> + <rect x="20" y="73" width="144" height="32"/> + <rect x="20" y="173" width="160" height="32"/> + <rect x="20" y="173" width="240" height="32"/> + </g> +</svg> diff --git a/layout/reftests/svg/text/filter-applied.svg b/layout/reftests/svg/text/filter-applied.svg new file mode 100644 index 0000000000..a60b6571c1 --- /dev/null +++ b/layout/reftests/svg/text/filter-applied.svg @@ -0,0 +1,40 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <defs> + <filter id="f1" x="20" y="73" width="144" height="32" filterUnits="userSpaceOnUse"> + <feFlood flood-color="yellow" result="flood"/> + <feMerge> + <feMergeNode in="flood"/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + <filter id="f2" x="20" y="173" width="240" height="32" filterUnits="userSpaceOnUse"> + <feFlood flood-color="yellow" result="flood"/> + <feMerge> + <feMergeNode in="flood"/> + <feMergeNode in="SourceGraphic"/> + </feMerge> + </filter> + </defs> + <g style="font: 32px Ahem; fill: blue"> + <text x="20" y="100" filter="url(#f1)">one</text> + <g filter="url(#f2)"> + <text x="20" y="200">three</text> + </g> + </g> + <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> + <rect x="20" y="73" width="96" height="32"/> + <rect x="20" y="73" width="144" height="32"/> + <rect x="20" y="173" width="160" height="32"/> + <rect x="20" y="173" width="240" height="32"/> + </g> +</svg> diff --git a/layout/reftests/svg/text/ignore-before-after.svg b/layout/reftests/svg/text/ignore-before-after.svg new file mode 100644 index 0000000000..8db670fa33 --- /dev/null +++ b/layout/reftests/svg/text/ignore-before-after.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <style> + text::before { content: "I said '" } + text::after { content: "'." } + tspan::before { content: "out " } + tspan::after { content: " to" } + </style> + <text x="100" y="100" style="font: 16px sans-serif">hello <tspan>there</tspan> everyone</text> +</svg> diff --git a/layout/reftests/svg/text/ignore-border.svg b/layout/reftests/svg/text/ignore-border.svg new file mode 100644 index 0000000000..cb16461f79 --- /dev/null +++ b/layout/reftests/svg/text/ignore-border.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="border: 8px solid black">there</tspan> everyone</text> +</svg> diff --git a/layout/reftests/svg/text/ignore-display-ref.svg b/layout/reftests/svg/text/ignore-display-ref.svg new file mode 100644 index 0000000000..689bdc5b1f --- /dev/null +++ b/layout/reftests/svg/text/ignore-display-ref.svg @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400"> + <g style="font: 16px sans-serif"> + <text x="100" y="40">hello there everyone</text> + <text x="100" y="60">hello there everyone</text> + <text x="100" y="80">hello there everyone</text> + <text x="100" y="100">hello there everyone</text> + <text x="100" y="120">hello there everyone</text> + <text x="100" y="140">hello there everyone</text> + <text x="100" y="160">hello there everyone</text> + <text x="100" y="180">hello there everyone</text> + <text x="100" y="200">hello there everyone</text> + <text x="100" y="220">hello there everyone</text> + <text x="100" y="240">hello there everyone</text> + <text x="100" y="260">hello there everyone</text> + <text x="100" y="280">hello there everyone</text> + + <text x="400" y="40">hello there everyone</text> + <text x="400" y="60">hello there everyone</text> + <text x="400" y="80">hello there everyone</text> + <text x="400" y="100">hello there everyone</text> + <text x="400" y="120">hello there everyone</text> + <text x="400" y="140">hello there everyone</text> + <text x="400" y="160">hello there everyone</text> + <text x="400" y="180">hello there everyone</text> + <text x="400" y="200">hello there everyone</text> + <text x="400" y="220">hello there everyone</text> + <text x="400" y="240">hello there everyone</text> + <text x="400" y="260">hello there everyone</text> + <text x="400" y="280">hello there everyone</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/ignore-display.svg b/layout/reftests/svg/text/ignore-display.svg new file mode 100644 index 0000000000..17856ad71b --- /dev/null +++ b/layout/reftests/svg/text/ignore-display.svg @@ -0,0 +1,35 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="400"> + <g style="font: 16px sans-serif"> + <text x="100" y="40">hello <tspan style="display: block">there</tspan> everyone</text> + <text x="100" y="60">hello <tspan style="display: list-item">there</tspan> everyone</text> + <text x="100" y="80">hello <tspan style="display: inline-block">there</tspan> everyone</text> + <text x="100" y="100">hello <tspan style="display: table">there</tspan> everyone</text> + <text x="100" y="120">hello <tspan style="display: inline-table">there</tspan> everyone</text> + <text x="100" y="140">hello <tspan style="display: table-row-group">there</tspan> everyone</text> + <text x="100" y="160">hello <tspan style="display: table-header-group">there</tspan> everyone</text> + <text x="100" y="180">hello <tspan style="display: table-footer-group">there</tspan> everyone</text> + <text x="100" y="200">hello <tspan style="display: table-row">there</tspan> everyone</text> + <text x="100" y="220">hello <tspan style="display: table-column-group">there</tspan> everyone</text> + <text x="100" y="240">hello <tspan style="display: table-column">there</tspan> everyone</text> + <text x="100" y="260">hello <tspan style="display: table-cell">there</tspan> everyone</text> + <text x="100" y="280">hello <tspan style="display: table-caption">there</tspan> everyone</text> + + <text x="400" y="40" style="display: block">hello there everyone</text> + <text x="400" y="60" style="display: list-item">hello there everyone</text> + <text x="400" y="80" style="display: inline-block">hello there everyone</text> + <text x="400" y="100" style="display: table">hello there everyone</text> + <text x="400" y="120" style="display: inline-table">hello there everyone</text> + <text x="400" y="140" style="display: table-row-group">hello there everyone</text> + <text x="400" y="160" style="display: table-header-group">hello there everyone</text> + <text x="400" y="180" style="display: table-footer-group">hello there everyone</text> + <text x="400" y="200" style="display: table-row">hello there everyone</text> + <text x="400" y="220" style="display: table-column-group">hello there everyone</text> + <text x="400" y="240" style="display: table-column">hello there everyone</text> + <text x="400" y="260" style="display: table-cell">hello there everyone</text> + <text x="400" y="280" style="display: table-caption">hello there everyone</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/ignore-float-first-letter.svg b/layout/reftests/svg/text/ignore-float-first-letter.svg new file mode 100644 index 0000000000..94ca633d68 --- /dev/null +++ b/layout/reftests/svg/text/ignore-float-first-letter.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <style> + text:first-letter { float: right } + </style> + <text x="100" y="100" style="font: 16px sans-serif">hello there everyone</text> +</svg> diff --git a/layout/reftests/svg/text/ignore-float.svg b/layout/reftests/svg/text/ignore-float.svg new file mode 100644 index 0000000000..cb4b72898a --- /dev/null +++ b/layout/reftests/svg/text/ignore-float.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="float: right">there</tspan> everyone</text> +</svg> diff --git a/layout/reftests/svg/text/ignore-invalid-child-2-ref.svg b/layout/reftests/svg/text/ignore-invalid-child-2-ref.svg new file mode 100644 index 0000000000..ece0929ddf --- /dev/null +++ b/layout/reftests/svg/text/ignore-invalid-child-2-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif"> + <tspan> + ab + ef + </tspan> + </text> +</svg> diff --git a/layout/reftests/svg/text/ignore-invalid-child-2.svg b/layout/reftests/svg/text/ignore-invalid-child-2.svg new file mode 100644 index 0000000000..0617c46940 --- /dev/null +++ b/layout/reftests/svg/text/ignore-invalid-child-2.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif"> + <tspan> + ab + <progress xmlns="http://www.w3.org/1999/xhtml">cd</progress> + ef + </tspan> + </text> +</svg> diff --git a/layout/reftests/svg/text/ignore-invalid-child-ref.svg b/layout/reftests/svg/text/ignore-invalid-child-ref.svg new file mode 100644 index 0000000000..3740106794 --- /dev/null +++ b/layout/reftests/svg/text/ignore-invalid-child-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif">abef</text> +</svg> diff --git a/layout/reftests/svg/text/ignore-invalid-child.svg b/layout/reftests/svg/text/ignore-invalid-child.svg new file mode 100644 index 0000000000..37f6fa494d --- /dev/null +++ b/layout/reftests/svg/text/ignore-invalid-child.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif">ab<a xmlns="data:,">cd</a>ef</text> +</svg> diff --git a/layout/reftests/svg/text/ignore-margin.svg b/layout/reftests/svg/text/ignore-margin.svg new file mode 100644 index 0000000000..37d263e7b8 --- /dev/null +++ b/layout/reftests/svg/text/ignore-margin.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="margin: 20px">there</tspan> everyone</text> +</svg> diff --git a/layout/reftests/svg/text/ignore-overflow-scroll.svg b/layout/reftests/svg/text/ignore-overflow-scroll.svg new file mode 100644 index 0000000000..eecc3b32af --- /dev/null +++ b/layout/reftests/svg/text/ignore-overflow-scroll.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif; overflow: scroll">hello <tspan style="display: block; overflow: scroll">there</tspan> everyone</text> +</svg> diff --git a/layout/reftests/svg/text/ignore-padding.svg b/layout/reftests/svg/text/ignore-padding.svg new file mode 100644 index 0000000000..3fb410cdb3 --- /dev/null +++ b/layout/reftests/svg/text/ignore-padding.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="padding: 20px">there</tspan> everyone</text> +</svg> diff --git a/layout/reftests/svg/text/ignore-position-ref.svg b/layout/reftests/svg/text/ignore-position-ref.svg new file mode 100644 index 0000000000..3d265f2ab7 --- /dev/null +++ b/layout/reftests/svg/text/ignore-position-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g style="font: 16px sans-serif"> + <text x="100" y="40">hello there everyone</text> + <text x="100" y="60">hello there everyone</text> + <text x="100" y="80">hello there everyone</text> + <text x="100" y="100">hello there everyone</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/ignore-position.svg b/layout/reftests/svg/text/ignore-position.svg new file mode 100644 index 0000000000..ec0878264f --- /dev/null +++ b/layout/reftests/svg/text/ignore-position.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g style="font: 16px sans-serif"> + <text x="100" y="40">hello <tspan style="position: relative; left: 20px">there</tspan> everyone</text> + <text x="100" y="60">hello <tspan style="position: absolute; top: 0; left: 0">there</tspan> everyone</text> + <text x="100" y="80">hello <tspan style="position: fixed; top: 0; left: 0">there</tspan> everyone</text> + <text x="100" y="100">hello <tspan style="position: sticky; left: 500px">there</tspan> everyone</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/ignore-prop-ref.svg b/layout/reftests/svg/text/ignore-prop-ref.svg new file mode 100644 index 0000000000..d0f7035fc6 --- /dev/null +++ b/layout/reftests/svg/text/ignore-prop-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif">hello there everyone</text> +</svg> diff --git a/layout/reftests/svg/text/ignore-text-align-2-ref.svg b/layout/reftests/svg/text/ignore-text-align-2-ref.svg new file mode 100644 index 0000000000..58a786fa6e --- /dev/null +++ b/layout/reftests/svg/text/ignore-text-align-2-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>Hello.</text> + <text y="20">Goodbye.</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/ignore-text-align-2.svg b/layout/reftests/svg/text/ignore-text-align-2.svg new file mode 100644 index 0000000000..0210124e88 --- /dev/null +++ b/layout/reftests/svg/text/ignore-text-align-2.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text style="white-space: pre-line; line-height: 20px; text-align: center">Hello. +Goodbye.</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/ignore-text-align.svg b/layout/reftests/svg/text/ignore-text-align.svg new file mode 100644 index 0000000000..5f072818e6 --- /dev/null +++ b/layout/reftests/svg/text/ignore-text-align.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif; text-align: center">hello there everyone</text> +</svg> diff --git a/layout/reftests/svg/text/ignore-vertical-align-ref.svg b/layout/reftests/svg/text/ignore-vertical-align-ref.svg new file mode 100644 index 0000000000..c4c7995f95 --- /dev/null +++ b/layout/reftests/svg/text/ignore-vertical-align-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="font-size: 24px">there</tspan> everyone</text> +</svg> diff --git a/layout/reftests/svg/text/ignore-vertical-align.svg b/layout/reftests/svg/text/ignore-vertical-align.svg new file mode 100644 index 0000000000..03612bc770 --- /dev/null +++ b/layout/reftests/svg/text/ignore-vertical-align.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif">hello <tspan style="vertical-align: top; font-size: 24px">there</tspan> everyone</text> +</svg> diff --git a/layout/reftests/svg/text/link-surrounding.svg b/layout/reftests/svg/text/link-surrounding.svg new file mode 100644 index 0000000000..19e7c562c1 --- /dev/null +++ b/layout/reftests/svg/text/link-surrounding.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="200"> + <a xlink:href="data:," transform="translate(100,100)" style="font: 16px sans-serif"> + <text>hello</text> + </a> +</svg> diff --git a/layout/reftests/svg/text/mask-applied-ref.svg b/layout/reftests/svg/text/mask-applied-ref.svg new file mode 100644 index 0000000000..e628a865c9 --- /dev/null +++ b/layout/reftests/svg/text/mask-applied-ref.svg @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <g style="font: 32px Ahem; fill: blue; white-space: pre"> + <text x="20" y="100">one</text> + <text x="20" y="200">three</text> + <text x="20" y="150" text-decoration="line-through"> </text> + <text x="20" y="250" text-decoration="line-through"> </text> + </g> + <rect x="100" width="300" height="400" fill="white"/> + <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> + <rect x="20" y="73" width="96" height="32"/> + <rect x="20" y="173" width="96" height="32"/> + </g> +</svg> diff --git a/layout/reftests/svg/text/mask-applied.svg b/layout/reftests/svg/text/mask-applied.svg new file mode 100644 index 0000000000..36f1ad380e --- /dev/null +++ b/layout/reftests/svg/text/mask-applied.svg @@ -0,0 +1,29 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <defs> + <mask id="m" x="0" y="0" width="600" height="400"> + <rect width="100" height="400" fill="white"/> + </mask> + </defs> + <g style="font: 32px Ahem; fill: blue; white-space: pre"> + <text x="20" y="100" mask="url(#m)">one</text> + <text x="20" y="150" mask="url(#m)" style="text-decoration: line-through"> </text> + <g mask="url(#m)"> + <text x="20" y="200">three</text> + <text x="20" y="250" style="text-decoration: line-through"> </text> + </g> + </g> + <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> + <rect x="20" y="73" width="96" height="32"/> + <rect x="20" y="173" width="96" height="32"/> + </g> +</svg> diff --git a/layout/reftests/svg/text/mask-content-2-ref.svg b/layout/reftests/svg/text/mask-content-2-ref.svg new file mode 100644 index 0000000000..9404d5a495 --- /dev/null +++ b/layout/reftests/svg/text/mask-content-2-ref.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <!-- We stick this in a pattern instead of rendering the <text> elements + directly so that it gets the same mFontSizeScaleFactor, and thus + will get the same thickness text decoration line. --> + <pattern id="p" x="0" y="0" width="600" height="400" patternUnits="userSpaceOnUse"> + <g style="font: 32px Ahem; white-space: pre; fill: blue"> + <text x="20" y="100">one</text> + <text x="20" y="150" style="text-decoration: line-through"> </text> + </g> + </pattern> + <rect width="600" height="400" fill="url(#p)"/> + <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> + <rect x="20" y="73" width="96" height="32"/> + </g> +</svg> diff --git a/layout/reftests/svg/text/mask-content-2.svg b/layout/reftests/svg/text/mask-content-2.svg new file mode 100644 index 0000000000..06d487d2ab --- /dev/null +++ b/layout/reftests/svg/text/mask-content-2.svg @@ -0,0 +1,44 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <defs> + <mask id="m" x="0" y="0" width="600" height="400"> + <g style="font: 32px Ahem; white-space: pre; fill: white"> + <text x="20" y="100">one</text> + <text x="20" y="150" style="text-decoration: line-through"> </text> + </g> + </mask> + </defs> + <rect x="0" y="0" width="600" height="400" fill="blue" mask="url(#m)"/> + <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> + <rect x="20" y="73" width="96" height="32"/> + </g> + <script> + function waitUntilFontLoaded() { + var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas"); + canvas.width = 100; + canvas.height = 100; + var ctx = canvas.getContext("2d"); + ctx.font = "100px Ahem"; + ctx.fillText("_", 0, 100); + var img = ctx.getImageData(50, 50, 1, 1); + if (img.data[3] == 255) { + setTimeout(function() { + document.documentElement.removeAttribute("class"); + }, 1); + } else { + setTimeout(waitUntilFontLoaded, 200); + } + } + + setTimeout(waitUntilFontLoaded, 200); + </script> +</svg> diff --git a/layout/reftests/svg/text/mask-content-ref.svg b/layout/reftests/svg/text/mask-content-ref.svg new file mode 100644 index 0000000000..4a37d44755 --- /dev/null +++ b/layout/reftests/svg/text/mask-content-ref.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <g style="font: 32px Ahem; white-space: pre; fill: blue"> + <text x="20" y="100">one</text> + </g> + <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> + <rect x="20" y="73" width="96" height="32"/> + </g> +</svg> diff --git a/layout/reftests/svg/text/mask-content.svg b/layout/reftests/svg/text/mask-content.svg new file mode 100644 index 0000000000..35dfd81c33 --- /dev/null +++ b/layout/reftests/svg/text/mask-content.svg @@ -0,0 +1,43 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" class="reftest-wait"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <defs> + <mask id="m" x="0" y="0" width="600" height="400"> + <g style="font: 32px Ahem; white-space: pre; fill: white"> + <text x="20" y="100">one</text> + </g> + </mask> + </defs> + <rect x="0" y="0" width="600" height="400" fill="blue" mask="url(#m)"/> + <g fill="none" stroke="black" stroke-width="4" shape-rendering="crispEdges"> + <rect x="20" y="73" width="96" height="32"/> + </g> + <script> + function waitUntilFontLoaded() { + var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "canvas"); + canvas.width = 100; + canvas.height = 100; + var ctx = canvas.getContext("2d"); + ctx.font = "100px Ahem"; + ctx.fillText("_", 0, 100); + var img = ctx.getImageData(50, 50, 1, 1); + if (img.data[3] == 255) { + setTimeout(function() { + document.documentElement.removeAttribute("class"); + }, 1); + } else { + setTimeout(waitUntilFontLoaded, 200); + } + } + + setTimeout(waitUntilFontLoaded, 200); + </script> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-bidi-ref.svg b/layout/reftests/svg/text/multiple-chunks-bidi-ref.svg new file mode 100644 index 0000000000..bb8321d7a1 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-bidi-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="end">אב</text> + <text x="300" text-anchor="end"><tspan visibility="hidden">אב</tspan>לגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-bidi.svg b/layout/reftests/svg/text/multiple-chunks-bidi.svg new file mode 100644 index 0000000000..5392ecd382 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor='end'>אב<tspan x='300'>ל</tspan>גabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-different-anchor-bidi-ref.svg b/layout/reftests/svg/text/multiple-chunks-different-anchor-bidi-ref.svg new file mode 100644 index 0000000000..23ed5e1cdb --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-different-anchor-bidi-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="end">אב</text> + <text x="300" text-anchor="middle"><tspan visibility="hidden">אב</tspan>לגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-different-anchor-bidi.svg b/layout/reftests/svg/text/multiple-chunks-different-anchor-bidi.svg new file mode 100644 index 0000000000..daef0c2ad5 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-different-anchor-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor='end'>אב<tspan x='300' text-anchor='middle'>ל</tspan>גabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-different-anchor-ref.svg b/layout/reftests/svg/text/multiple-chunks-different-anchor-ref.svg new file mode 100644 index 0000000000..5ea33edcc0 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-different-anchor-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="end">he</text> + <text x="300" text-anchor="middle">llo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-different-anchor-rtl-ref.svg b/layout/reftests/svg/text/multiple-chunks-different-anchor-rtl-ref.svg new file mode 100644 index 0000000000..0c0156fe5f --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-different-anchor-rtl-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100">אב</text> + <text x="300" text-anchor="middle">גדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-different-anchor-rtl.svg b/layout/reftests/svg/text/multiple-chunks-different-anchor-rtl.svg new file mode 100644 index 0000000000..11ad062604 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-different-anchor-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end' direction='rtl'>אב<tspan x='300' text-anchor='middle'>ג</tspan>דה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-different-anchor.svg b/layout/reftests/svg/text/multiple-chunks-different-anchor.svg new file mode 100644 index 0000000000..5517412795 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-different-anchor.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end'>he<tspan x='300' text-anchor='middle'>l</tspan>lo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-direction-and-anchor-ref.svg b/layout/reftests/svg/text/multiple-chunks-direction-and-anchor-ref.svg new file mode 100644 index 0000000000..77a7b805e2 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-direction-and-anchor-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="end">ab</text> + <text x="300" text-anchor="end">cde</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-dx-ref.svg b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-dx-ref.svg new file mode 100644 index 0000000000..55d9a75adf --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-dx-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end'>ab<tspan x='300' direction='rtl' text-anchor='start'>c</tspan>de</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-dx.svg b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-dx.svg new file mode 100644 index 0000000000..97f9b36d87 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-dx.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='90' dx='10' text-anchor='end'>ab<tspan x='280' dx='20' direction='rtl' text-anchor='start'>c</tspan>de</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-multiple-dx-ref.svg b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-multiple-dx-ref.svg new file mode 100644 index 0000000000..cd128b8d01 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-multiple-dx-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="110" text-anchor="end">ab</text> + <text x="290" text-anchor="end">c<tspan visibility="hidden">de</tspan></text> + <text x="320" text-anchor="end">de</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-multiple-dx.svg b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-multiple-dx.svg new file mode 100644 index 0000000000..7703a6986f --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-multiple-dx.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' dx='10' text-anchor='end'>ab<tspan x='300' dx='20 30' direction='rtl' text-anchor='start'>cd</tspan>e</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-ref.svg b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-ref.svg new file mode 100644 index 0000000000..77a7b805e2 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="end">ab</text> + <text x="300" text-anchor="end">cde</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-directions-and-anchor.svg b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor.svg new file mode 100644 index 0000000000..55d9a75adf --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-directions-and-anchor.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end'>ab<tspan x='300' direction='rtl' text-anchor='start'>c</tspan>de</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-dx-bidi-ref.svg b/layout/reftests/svg/text/multiple-chunks-dx-bidi-ref.svg new file mode 100644 index 0000000000..5392ecd382 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-dx-bidi-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor='end'>אב<tspan x='300'>ל</tspan>גabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-dx-bidi.svg b/layout/reftests/svg/text/multiple-chunks-dx-bidi.svg new file mode 100644 index 0000000000..e682281a0f --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-dx-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="90" dx="10" text-anchor='end'>אב<tspan x='280' dx='20'>ל</tspan>גabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-bidi-ref.svg b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-bidi-ref.svg new file mode 100644 index 0000000000..daef0c2ad5 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-bidi-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor='end'>אב<tspan x='300' text-anchor='middle'>ל</tspan>גabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-bidi.svg b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-bidi.svg new file mode 100644 index 0000000000..1f7a628ed3 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="90" dx='10' text-anchor='end'>אב<tspan x='280' dx='20' text-anchor='middle'>ל</tspan>גabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-ref.svg b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-ref.svg new file mode 100644 index 0000000000..5517412795 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end'>he<tspan x='300' text-anchor='middle'>l</tspan>lo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-rtl-ref.svg b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-rtl-ref.svg new file mode 100644 index 0000000000..11ad062604 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-rtl-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end' direction='rtl'>אב<tspan x='300' text-anchor='middle'>ג</tspan>דה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-rtl.svg b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-rtl.svg new file mode 100644 index 0000000000..b8213875a2 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='90' dx='10' text-anchor='end' direction='rtl'>אב<tspan x='280' dx='20' text-anchor='middle'>ג</tspan>דה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-dx-different-anchor.svg b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor.svg new file mode 100644 index 0000000000..5c896d887e --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-dx-different-anchor.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='90' dx='10' text-anchor='end'>he<tspan x='280' dx='20' text-anchor='middle'>l</tspan>lo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-dx-ref.svg b/layout/reftests/svg/text/multiple-chunks-dx-ref.svg new file mode 100644 index 0000000000..e0962bbe12 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-dx-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end'>he<tspan x='300'>l</tspan>lo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-dx-rtl-ref.svg b/layout/reftests/svg/text/multiple-chunks-dx-rtl-ref.svg new file mode 100644 index 0000000000..dc53101f65 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-dx-rtl-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end' direction='rtl'>אב<tspan x='300'>ג</tspan>דה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-dx-rtl.svg b/layout/reftests/svg/text/multiple-chunks-dx-rtl.svg new file mode 100644 index 0000000000..0becadf0c5 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-dx-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='90' dx='10' text-anchor='end' direction='rtl'>אב<tspan x='280' dx='20'>ג</tspan>דה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-dx.svg b/layout/reftests/svg/text/multiple-chunks-dx.svg new file mode 100644 index 0000000000..d764453102 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-dx.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='90' dx='10' text-anchor='end'>he<tspan x='280' dx='20'>l</tspan>lo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-fill-color-ref.svg b/layout/reftests/svg/text/multiple-chunks-fill-color-ref.svg new file mode 100644 index 0000000000..ac4703b778 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-fill-color-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <g fill="blue"> + <text x="100" text-anchor="end">he</text> + <text x="300" text-anchor="end"><tspan fill="green">l</tspan>lo</text> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-fill-color.svg b/layout/reftests/svg/text/multiple-chunks-fill-color.svg new file mode 100644 index 0000000000..13a557a3ca --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-fill-color.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end' fill='blue'>he<tspan x='300' fill='green'>l</tspan>lo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-letter-spacing-ref.svg b/layout/reftests/svg/text/multiple-chunks-letter-spacing-ref.svg new file mode 100644 index 0000000000..1c32f85c82 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-letter-spacing-ref.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <!-- + Place characters, end-anchored, as follows: + + First anchored chunk: + "h": 100 - adv("e") - 2 * letter-spacing + "e": 100 - letter-spacing + + Second anchored chunk: + "l": 300 - adv("lo") - 3 * letter-spacing + "l": 300 - adv("o") - 2 * letter-spacing + "o": 300 - letter-spacing + --> + <text x='100' text-anchor='end' dx="-40">h<tspan fill="none">e</tspan></text> + <text x='100' text-anchor='end' dx="-20">e</text> + <text x='300' text-anchor='end' dx="-60">l<tspan fill="none">lo</tspan></text> + <text x='300' text-anchor='end' dx="-40">l<tspan fill="none">o</tspan></text> + <text x='300' text-anchor='end' dx="-20">o</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-letter-spacing.svg b/layout/reftests/svg/text/multiple-chunks-letter-spacing.svg new file mode 100644 index 0000000000..27cf54e835 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-letter-spacing.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif; letter-spacing: 20px;"> + <text x='100' text-anchor='end'>he<tspan x='300'>l</tspan>lo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-bidi-ref.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-bidi-ref.svg new file mode 100644 index 0000000000..eb9ed17d52 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-bidi-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="110" text-anchor="end">אב</text> + <text x="320" text-anchor="end"><tspan visibility="hidden">אבל</tspan>גשabc</text> + <text x="270" text-anchor="end"><tspan visibility="hidden">אב</tspan>ל<tspan visibility="hidden">גשabc</tspan></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-bidi.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-bidi.svg new file mode 100644 index 0000000000..82cb1cbc3d --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" dx="10" text-anchor='end'>אב<tspan x='300' dx='20 50'>לג</tspan>שabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-bidi-ref.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-bidi-ref.svg new file mode 100644 index 0000000000..8d590eb66a --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-bidi-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" dx='10' text-anchor='end'>אב</text> + <text x='320' dx='0 0 0 30' text-anchor='middle'><tspan visibility="hidden">אב</tspan>לגשabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-bidi.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-bidi.svg new file mode 100644 index 0000000000..391638507e --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" dx='10' text-anchor='end'>אב<tspan x='300' dx='20 30' text-anchor='middle'>לג</tspan>שabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-ref.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-ref.svg new file mode 100644 index 0000000000..fe04a27f73 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" dx='10' text-anchor="end">he</text> + <text x='300' dx='20 30' text-anchor='middle'>llo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-rtl-ref.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-rtl-ref.svg new file mode 100644 index 0000000000..af08cca907 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-rtl-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" dx='10'>אב</text> + <text x='320' dx='0 0 0 30' text-anchor='middle'><tspan visibility="hidden">אב</tspan>גדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-rtl.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-rtl.svg new file mode 100644 index 0000000000..5e9c3bdfe3 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' dx='10' text-anchor='end' direction='rtl'>אב<tspan x='300' dx='20 30' text-anchor='middle'>גד</tspan>ה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor.svg new file mode 100644 index 0000000000..7394342572 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-different-anchor.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' dx='10' text-anchor='end'>he<tspan x='300' dx='20 30' text-anchor='middle'>ll</tspan>o</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-ref.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-ref.svg new file mode 100644 index 0000000000..0e1929938c --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' dx='10' text-anchor='end'>he</text> + <text x='300' dx='20 30' text-anchor="end">llo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-rtl-ref.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-rtl-ref.svg new file mode 100644 index 0000000000..a708bad73b --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-rtl-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="110">אב</text> + <text x="320" dx="0 0 0 30"><tspan visibility="hidden">אב</tspan>גדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx-rtl.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx-rtl.svg new file mode 100644 index 0000000000..ed9fd85f7f --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' dx='10' text-anchor='end' direction='rtl'>אב<tspan x='300' dx='20 30'>גד</tspan>ה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-multiple-dx.svg b/layout/reftests/svg/text/multiple-chunks-multiple-dx.svg new file mode 100644 index 0000000000..60874a6d9e --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-multiple-dx.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' dx='10' text-anchor='end'>he<tspan x='300' dx='20 30'>ll</tspan>o</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-ref.svg b/layout/reftests/svg/text/multiple-chunks-ref.svg new file mode 100644 index 0000000000..5e23dac0de --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end'>he</text> + <text x='300' text-anchor='end'>llo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-rtl-ref.svg b/layout/reftests/svg/text/multiple-chunks-rtl-ref.svg new file mode 100644 index 0000000000..3f104064c9 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-rtl-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="end" direction="rtl">אב</text> + <text x="300" text-anchor="end" direction="rtl"><tspan visibility="hidden">אב</tspan>גדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-rtl.svg b/layout/reftests/svg/text/multiple-chunks-rtl.svg new file mode 100644 index 0000000000..dc53101f65 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end' direction='rtl'>אב<tspan x='300'>ג</tspan>דה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-selection-ref.svg b/layout/reftests/svg/text/multiple-chunks-selection-ref.svg new file mode 100644 index 0000000000..e0f417e31a --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-selection-ref.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end'>he</text> + <text x='300' text-anchor='end'>llo</text> + </g> + <script> + var text = document.getElementsByTagName("text"); + var range = document.createRange(); + range.setStart(text[0].firstChild, 1); + range.setEnd(text[1].firstChild, 2); + window.getSelection().addRange(range); + </script> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks-selection.svg b/layout/reftests/svg/text/multiple-chunks-selection.svg new file mode 100644 index 0000000000..12816b189a --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks-selection.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end'>he<tspan x='300'>l</tspan>lo</text> + </g> + <script> + var text = document.getElementsByTagName("text")[0]; + var range = document.createRange(); + range.setStart(text.firstChild, 1); + range.setEnd(text.lastChild, 1); + window.getSelection().addRange(range); + </script> +</svg> diff --git a/layout/reftests/svg/text/multiple-chunks.svg b/layout/reftests/svg/text/multiple-chunks.svg new file mode 100644 index 0000000000..e0962bbe12 --- /dev/null +++ b/layout/reftests/svg/text/multiple-chunks.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end'>he<tspan x='300'>l</tspan>lo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-text-selection-ref.html b/layout/reftests/svg/text/multiple-text-selection-ref.html new file mode 100644 index 0000000000..63b15c53df --- /dev/null +++ b/layout/reftests/svg/text/multiple-text-selection-ref.html @@ -0,0 +1,23 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif } +#a { margin-left: -700px; vertical-align: 100px } +#b { margin-left: -700px; vertical-align: 50px } +span { margin-left: 100px } +</style> +<body> + <svg></svg><div id=a><span>hello</span></div><div id=b><span>there</span></div> + <script> + var span = document.getElementsByTagName("span"); + var range = document.createRange(); + range.setStart(span[0].firstChild, 1); + range.setEnd(span[1].firstChild, 4); + window.getSelection().addRange(range); + </script> +</body> diff --git a/layout/reftests/svg/text/multiple-text-selection.svg b/layout/reftests/svg/text/multiple-text-selection.svg new file mode 100644 index 0000000000..98188b1341 --- /dev/null +++ b/layout/reftests/svg/text/multiple-text-selection.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>hello</text> + <text y="50">there</text> + </g> + <script> + var text = document.getElementsByTagName("text"); + var range = document.createRange(); + range.setStart(text[0].firstChild, 1); + range.setEnd(text[1].firstChild, 4); + window.getSelection().addRange(range); + </script> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-anchor-end-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-anchor-end-bidi-ref.svg new file mode 100644 index 0000000000..8ecea9ddc3 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-anchor-end-bidi-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="end">א</text> + <text x="200" text-anchor="end"><tspan visibility="hidden" direction="ltr" unicode-bidi="override">א</tspan>בגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-anchor-end-bidi.svg b/layout/reftests/svg/text/multiple-x-anchor-end-bidi.svg new file mode 100644 index 0000000000..6d49872aae --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-anchor-end-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100 200" text-anchor='end'>אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-anchor-end-ref.svg b/layout/reftests/svg/text/multiple-x-anchor-end-ref.svg new file mode 100644 index 0000000000..04aa3c9e9f --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-anchor-end-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' text-anchor='end'>h</text> + <text x='200' text-anchor='end'>ello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-anchor-end-rtl-ref.svg b/layout/reftests/svg/text/multiple-x-anchor-end-rtl-ref.svg new file mode 100644 index 0000000000..024b35e43a --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-anchor-end-rtl-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='300'>א</text> + <text x='200'>בגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-anchor-end-rtl.svg b/layout/reftests/svg/text/multiple-x-anchor-end-rtl.svg new file mode 100644 index 0000000000..2c9531e078 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-anchor-end-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='300 200' direction='rtl' text-anchor='end'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-anchor-end.svg b/layout/reftests/svg/text/multiple-x-anchor-end.svg new file mode 100644 index 0000000000..5add7ca56a --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-anchor-end.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200' text-anchor='end'>hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-bidi-ref.svg new file mode 100644 index 0000000000..2be20970e3 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-bidi-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100">א</text> + <text x="200"><tspan visibility="hidden" direction="ltr" unicode-bidi="override">א</tspan>בגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-bidi.svg b/layout/reftests/svg/text/multiple-x-bidi.svg new file mode 100644 index 0000000000..55f265b9c2 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200'>אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-dx-anchor-end-bidi.svg b/layout/reftests/svg/text/multiple-x-dx-anchor-end-bidi.svg new file mode 100644 index 0000000000..ca5ae35de6 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-dx-anchor-end-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100 200" dx='10' text-anchor='end'>אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-dx-anchor-end-rtl.svg b/layout/reftests/svg/text/multiple-x-dx-anchor-end-rtl.svg new file mode 100644 index 0000000000..c7bb9e1abe --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-dx-anchor-end-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='300 200' dx='10' direction='rtl' text-anchor='end'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-dx-anchor-end.svg b/layout/reftests/svg/text/multiple-x-dx-anchor-end.svg new file mode 100644 index 0000000000..ebf6691fc7 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-dx-anchor-end.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200' dx='10' text-anchor='end'>hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-dx-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-dx-bidi-ref.svg new file mode 100644 index 0000000000..55f265b9c2 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-dx-bidi-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200'>אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-dx-bidi.svg b/layout/reftests/svg/text/multiple-x-dx-bidi.svg new file mode 100644 index 0000000000..52b67d9256 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-dx-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='90 200' dx='10'>אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-dx-ref.svg b/layout/reftests/svg/text/multiple-x-dx-ref.svg new file mode 100644 index 0000000000..a1e8c71279 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-dx-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200'>hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-dx-rtl-ref.svg b/layout/reftests/svg/text/multiple-x-dx-rtl-ref.svg new file mode 100644 index 0000000000..9955e22e96 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-dx-rtl-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text direction='rtl' x='300 200'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-dx-rtl.svg b/layout/reftests/svg/text/multiple-x-dx-rtl.svg new file mode 100644 index 0000000000..f5bc8647d2 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-dx-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text direction='rtl' x='290 200' dx='10'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-dx.svg b/layout/reftests/svg/text/multiple-x-dx.svg new file mode 100644 index 0000000000..589d7ef955 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-dx.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='90 200' dx='10'>hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-holes-bidi-ref.svg new file mode 100644 index 0000000000..34cf120e2b --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-bidi-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100'>א</text> + <text x='200'>בל</text> + <text x='300'><tspan visibility="hidden">אבל</tspan>גabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-bidi.svg b/layout/reftests/svg/text/multiple-x-holes-bidi.svg new file mode 100644 index 0000000000..429e286fb8 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200'>אבל<tspan x='300'>גa</tspan>bc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-dx-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-holes-dx-bidi-ref.svg new file mode 100644 index 0000000000..429e286fb8 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-dx-bidi-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200'>אבל<tspan x='300'>גa</tspan>bc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-dx-bidi.svg b/layout/reftests/svg/text/multiple-x-holes-dx-bidi.svg new file mode 100644 index 0000000000..482c1892da --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-dx-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='90 200' dx='10'>אבל<tspan x='280' dx='20'>גa</tspan>bc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-dx-ref.svg b/layout/reftests/svg/text/multiple-x-holes-dx-ref.svg new file mode 100644 index 0000000000..2fb60e1618 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-dx-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200'>hel<tspan x='300'>l</tspan>o</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-dx-rtl.svg b/layout/reftests/svg/text/multiple-x-holes-dx-rtl.svg new file mode 100644 index 0000000000..8c4b01ecb6 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-dx-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200' dx='10' direction='rtl'>אבג<tspan x='300' dx='20'>ד</tspan>ה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-dx.svg b/layout/reftests/svg/text/multiple-x-holes-dx.svg new file mode 100644 index 0000000000..e6d0f5d07b --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-dx.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='90 200' dx='10'>hel<tspan x='280' dx='20'>l</tspan>o</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-multiple-dx-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-bidi-ref.svg new file mode 100644 index 0000000000..429e286fb8 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-bidi-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200'>אבל<tspan x='300'>גa</tspan>bc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-multiple-dx-bidi.svg b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-bidi.svg new file mode 100644 index 0000000000..203e3f92ad --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='90 180' dx='10 20'>אבל<tspan x='270' dx='30'>גa</tspan>bc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-multiple-dx-ref.svg b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-ref.svg new file mode 100644 index 0000000000..2fb60e1618 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200'>hel<tspan x='300'>l</tspan>o</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-multiple-dx-rtl-ref.svg b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-rtl-ref.svg new file mode 100644 index 0000000000..5ea60be2bd --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-rtl-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200' direction='rtl'>אבג<tspan x='300'>ד</tspan>ה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-multiple-dx-rtl.svg b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-rtl.svg new file mode 100644 index 0000000000..93c1168015 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-multiple-dx-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='90 180' dx='10 20' direction='rtl'>אבג<tspan x='270' dx='30'>ד</tspan>ה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-multiple-dx.svg b/layout/reftests/svg/text/multiple-x-holes-multiple-dx.svg new file mode 100644 index 0000000000..492c6bca77 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-multiple-dx.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='90 180' dx='10 20'>hel<tspan x='270' dx='30'>l</tspan>o</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-ref.svg b/layout/reftests/svg/text/multiple-x-holes-ref.svg new file mode 100644 index 0000000000..33a4e6e69c --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100'>h</text> + <text x='200'>el</text> + <text x='300'>lo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-rtl-ref.svg b/layout/reftests/svg/text/multiple-x-holes-rtl-ref.svg new file mode 100644 index 0000000000..2349179119 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-rtl-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' direction='rtl'>א</text> + <text x='200' direction='rtl'>בג</text> + <text x='300' direction='rtl'>דה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes-rtl.svg b/layout/reftests/svg/text/multiple-x-holes-rtl.svg new file mode 100644 index 0000000000..5ea60be2bd --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200' direction='rtl'>אבג<tspan x='300'>ד</tspan>ה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-holes.svg b/layout/reftests/svg/text/multiple-x-holes.svg new file mode 100644 index 0000000000..2fb60e1618 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-holes.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200'>hel<tspan x='300'>l</tspan>o</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-bidi-ref.svg new file mode 100644 index 0000000000..bdb3cd58bc --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-bidi-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="110" text-anchor="end">א</text> + <text x="220" text-anchor="end"><tspan visibility="hidden">אב</tspan>גabc</text> + <text x="190" text-anchor="end"><tspan visibility="hidden">א</tspan>ב<tspan visibility="hidden">abc</tspan></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-bidi.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-bidi.svg new file mode 100644 index 0000000000..0be270e550 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100 200" dx='10 20 30' text-anchor='end'>אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-ref.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-ref.svg new file mode 100644 index 0000000000..e466df84ca --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='110' text-anchor='end'>h</text> + <text x='190' text-anchor='end'>e<tspan visibility="hidden">llo</tspan></text> + <text x='220' text-anchor='end'>llo</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-rtl-ref.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-rtl-ref.svg new file mode 100644 index 0000000000..09b0238aa2 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-rtl-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="310">א</text> + <text x='250'>ב<tspan visibility="hidden">גדה</tspan></text> + <text x='220'><tspan visibility="hidden">ב</tspan>גדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-rtl.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-rtl.svg new file mode 100644 index 0000000000..80af12be22 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='300 200' dx='10 20 -30' direction='rtl' text-anchor='end'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end.svg new file mode 100644 index 0000000000..dae9225b0c --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-multiple-dx-anchor-end.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200' dx='10 20 30' text-anchor='end'>hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-bidi-ref.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-bidi-ref.svg new file mode 100644 index 0000000000..ae5f778e21 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-multiple-dx-bidi-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="110">א</text> + <text x="220">ב</text> + <text x="250" text-anchor="end">ג</text> + <text x="250"><tspan visibility="hidden">אב</tspan>abc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-bidi.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-bidi.svg new file mode 100644 index 0000000000..d951b6d668 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-multiple-dx-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200' dx='10 20 30'>אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-ref.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-ref.svg new file mode 100644 index 0000000000..b0879a43fd --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-multiple-dx-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200' dx='10 20 30'>hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-rtl-ref.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-rtl-ref.svg new file mode 100644 index 0000000000..d1eb6c8848 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-multiple-dx-rtl-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="310" text-anchor="end">א</text> + <text x="220" text-anchor="end">ב</text> + <text x="190" text-anchor="end"><tspan visibility="hidden">ב</tspan>גדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx-rtl.svg b/layout/reftests/svg/text/multiple-x-multiple-dx-rtl.svg new file mode 100644 index 0000000000..ca1c8c64a9 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-multiple-dx-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text direction='rtl' x='300 200' dx='10 20 -30'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-multiple-dx.svg b/layout/reftests/svg/text/multiple-x-multiple-dx.svg new file mode 100644 index 0000000000..b0879a43fd --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-multiple-dx.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200' dx='10 20 30'>hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-percentages-2-iframe-ref.svg b/layout/reftests/svg/text/multiple-x-percentages-2-iframe-ref.svg new file mode 100644 index 0000000000..bf2ff14e3f --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-percentages-2-iframe-ref.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"> + <text x="50 100" y="100" style="font: 16px sans-serif">hello</text> + <text x="150" y="100 150" style="font: 16px sans-serif">there</text> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-percentages-2-iframe.svg b/layout/reftests/svg/text/multiple-x-percentages-2-iframe.svg new file mode 100644 index 0000000000..03a336d74c --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-percentages-2-iframe.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"> + <text x="50 50%" y="100" style="font: 16px sans-serif">hello</text> + <text x="150" y="100 75%" style="font: 16px sans-serif">there</text> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-percentages-2-ref.html b/layout/reftests/svg/text/multiple-x-percentages-2-ref.html new file mode 100644 index 0000000000..5597555323 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-percentages-2-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<iframe style="width: 200px; height: 200px; border: 0" src="multiple-x-percentages-2-iframe-ref.svg"></iframe> diff --git a/layout/reftests/svg/text/multiple-x-percentages-2.html b/layout/reftests/svg/text/multiple-x-percentages-2.html new file mode 100644 index 0000000000..d554b7445c --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-percentages-2.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> +<iframe style="width: 400px; height: 400px; border: 0" src="multiple-x-percentages-2-iframe.svg"></iframe> +<script> +function doTest() { + var iframe = document.querySelector("iframe"); + iframe.style.width = "200px"; + iframe.style.height = "200px"; + document.documentElement.removeAttribute("class"); +} + +window.addEventListener("MozReftestInvalidate", doTest); +setTimeout(doTest, 4000); // fallback for running outside reftest +</script> diff --git a/layout/reftests/svg/text/multiple-x-percentages-3-iframe-ref.svg b/layout/reftests/svg/text/multiple-x-percentages-3-iframe-ref.svg new file mode 100644 index 0000000000..0e148f4257 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-percentages-3-iframe-ref.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"> + <text x="50 60 70 80 90 100" y="100" style="font: 16px sans-serif">hello!</text> + <text x="150" y="100 110 120 130 140 150" style="font: 16px sans-serif">there!</text> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-percentages-3-iframe.svg b/layout/reftests/svg/text/multiple-x-percentages-3-iframe.svg new file mode 100644 index 0000000000..a8d7e937c3 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-percentages-3-iframe.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"> + <text x="50 60 70 80 90 50%" y="100" style="font: 16px sans-serif">hello</text> + <text x="150" y="100 110 120 130 140 75%" style="font: 16px sans-serif">there</text> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-percentages-3-ref.html b/layout/reftests/svg/text/multiple-x-percentages-3-ref.html new file mode 100644 index 0000000000..fdf7ad890f --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-percentages-3-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<iframe style="width: 200px; height: 200px; border: 0" src="multiple-x-percentages-3-iframe-ref.svg"></iframe> diff --git a/layout/reftests/svg/text/multiple-x-percentages-3.html b/layout/reftests/svg/text/multiple-x-percentages-3.html new file mode 100644 index 0000000000..409c305d15 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-percentages-3.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html class="reftest-wait"> +<iframe style="width: 400px; height: 400px; border: 0" src="multiple-x-percentages-3-iframe.svg"></iframe> +<script> +var iframe = document.querySelector("iframe"); + +function doTest() { + window.removeEventListener("MozReftestInvalidate", doTest); + + iframe.style.width = "200px"; + iframe.style.height = "200px"; + + var text = iframe.contentDocument.querySelectorAll("text"); + text[0].firstChild.nodeValue += "!"; + text[1].firstChild.nodeValue += "!"; + + document.documentElement.removeAttribute("class"); +} + +window.addEventListener("MozReftestInvalidate", doTest); +</script> diff --git a/layout/reftests/svg/text/multiple-x-percentages-ref.svg b/layout/reftests/svg/text/multiple-x-percentages-ref.svg new file mode 100644 index 0000000000..78f6ab9223 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-percentages-ref.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" width="200" height="200"> + <text x="50 100" y="100" style="font: 16px sans-serif">hello</text> + <text x="150" y="100 150" style="font: 16px sans-serif">there</text> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-percentages.svg b/layout/reftests/svg/text/multiple-x-percentages.svg new file mode 100644 index 0000000000..faf7a64ced --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-percentages.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" class="reftest-wait"> + <text x="50 50%" y="100" style="font: 16px sans-serif">hello</text> + <text x="150" y="100 75%" style="font: 16px sans-serif">there</text> + <script> + window.addEventListener("MozReftestInvalidate", function() { + document.documentElement.setAttribute("width", "200"); + document.documentElement.setAttribute("height", "200"); + document.documentElement.removeAttribute("class"); + }, false); + </script> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-ref.svg b/layout/reftests/svg/text/multiple-x-ref.svg new file mode 100644 index 0000000000..97ae33e5b9 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100'>h</text> + <text x='200'>ello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-rtl-ref.svg b/layout/reftests/svg/text/multiple-x-rtl-ref.svg new file mode 100644 index 0000000000..90b62d8420 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-rtl-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='300' direction='rtl'>א</text> + <text x='200' direction='rtl'>בגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-rtl.svg b/layout/reftests/svg/text/multiple-x-rtl.svg new file mode 100644 index 0000000000..9955e22e96 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text direction='rtl' x='300 200'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-white-space-ref.svg b/layout/reftests/svg/text/multiple-x-white-space-ref.svg new file mode 100644 index 0000000000..c8ac8f67da --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-white-space-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" style="font-family: sans-serif; font-size: 16px; line-height: 20px"> + <text x="50 150" y="100">ab</text> + <text x="50 350" y="200 220">ab</text> + <text x="50 150" y="300 320">ab</text> + <text x="50 150" y="400 420">ab</text> + <text x="50 100" y="500">a b</text> +</svg> diff --git a/layout/reftests/svg/text/multiple-x-white-space.svg b/layout/reftests/svg/text/multiple-x-white-space.svg new file mode 100644 index 0000000000..f62b2747f5 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x-white-space.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" style="font-family: sans-serif; font-size: 16px; line-height: 20px"> + <text x="50 100 150 200 250 300 350" y="100">a + b</text> + <text x="50 100 150 200 250 300 350" y="200" style="white-space: pre">a + b</text> + <text x="50 100 150 200 250 300 350" y="300" style="white-space: pre-line">a + b</text> + <text x="50 100 150" y="400" style="white-space: pre">a +b</text> + <text y="500"><tspan x="50 100 150 200">a </tspan>b</text> +</svg> diff --git a/layout/reftests/svg/text/multiple-x.svg b/layout/reftests/svg/text/multiple-x.svg new file mode 100644 index 0000000000..a1e8c71279 --- /dev/null +++ b/layout/reftests/svg/text/multiple-x.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100 200'>hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/pattern-content-ref.svg b/layout/reftests/svg/text/pattern-content-ref.svg new file mode 100644 index 0000000000..6f2d74b0ec --- /dev/null +++ b/layout/reftests/svg/text/pattern-content-ref.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <pattern id="p2" width="8" height="8" patternUnits="userSpaceOnUse"> + <rect x="-1" y="-1" width="10" height="10" fill="yellow"/> + <rect width="4" height="4"/> + <rect x="4" y="4" width="4" height="4"/> + </pattern> + </defs> + <g transform="scale(2)translate(50,120)scale(4)"> + <text style="font: bold 48px sans-serif; fill: url(#p2); stroke: black; stroke-width: 1px">a</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/pattern-content.svg b/layout/reftests/svg/text/pattern-content.svg new file mode 100644 index 0000000000..fcee528d47 --- /dev/null +++ b/layout/reftests/svg/text/pattern-content.svg @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <pattern id="p2" width="8" height="8" patternUnits="userSpaceOnUse"> + <rect x="-1" y="-1" width="10" height="10" fill="yellow"/> + <rect width="4" height="4"/> + <rect x="4" y="4" width="4" height="4"/> + </pattern> + <pattern id="p" width="200" height="200" patternUnits="userSpaceOnUse"> + <g transform="translate(50,120)scale(4)"> + <text style="font: bold 48px sans-serif; fill: url(#p2)">a</text> + </g> + </pattern> + </defs> + <rect width="200" height="200" fill="url(#p)" transform="scale(2)"/> + <g transform="scale(2)translate(50,120)scale(4)"> + <text style="font: bold 48px sans-serif; fill: none; stroke: black; stroke-width: 1px">a</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/pseudo-first-letter-2-ref.svg b/layout/reftests/svg/text/pseudo-first-letter-2-ref.svg new file mode 100644 index 0000000000..b0954b3d5d --- /dev/null +++ b/layout/reftests/svg/text/pseudo-first-letter-2-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif">́t</text> +</svg> diff --git a/layout/reftests/svg/text/pseudo-first-letter-2.svg b/layout/reftests/svg/text/pseudo-first-letter-2.svg new file mode 100644 index 0000000000..a88d8d8058 --- /dev/null +++ b/layout/reftests/svg/text/pseudo-first-letter-2.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <style> + text::first-letter { font-size: 32px } + </style> + <text x="100" y="100" style="font: 16px sans-serif">́t</text> +</svg> diff --git a/layout/reftests/svg/text/pseudo-first-letter-ref.svg b/layout/reftests/svg/text/pseudo-first-letter-ref.svg new file mode 100644 index 0000000000..b76cd93c21 --- /dev/null +++ b/layout/reftests/svg/text/pseudo-first-letter-ref.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" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif"><tspan font-size="32px">h</tspan>ello there everyone + <tspan x="100" y="120">and good night</tspan></text> +</svg> diff --git a/layout/reftests/svg/text/pseudo-first-letter.svg b/layout/reftests/svg/text/pseudo-first-letter.svg new file mode 100644 index 0000000000..3d59e6b002 --- /dev/null +++ b/layout/reftests/svg/text/pseudo-first-letter.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <style> + text::first-letter { font-size: 32px } + </style> + <text x="100" y="100" style="font: 16px sans-serif">hello there everyone + <tspan x="100" y="120">and good night</tspan></text> +</svg> diff --git a/layout/reftests/svg/text/pseudo-first-line-2-ref.svg b/layout/reftests/svg/text/pseudo-first-line-2-ref.svg new file mode 100644 index 0000000000..f436ab0f6a --- /dev/null +++ b/layout/reftests/svg/text/pseudo-first-line-2-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g style="font: 16px sans-serif; text-decoration-skip-ink: none;"> + <text x="100" y="100" text-decoration="underline">hello there everyone</text> + <text x="100" y="120">and good night</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/pseudo-first-line-2.svg b/layout/reftests/svg/text/pseudo-first-line-2.svg new file mode 100644 index 0000000000..d27a03461e --- /dev/null +++ b/layout/reftests/svg/text/pseudo-first-line-2.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <style> + text::first-line { + text-decoration: underline; + text-decoration-skip-ink: none; + } + </style> + <text x="100" y="100" style="font: 16px sans-serif; white-space: pre-line; line-height: 20px">hello there everyone + and good night</text> +</svg> diff --git a/layout/reftests/svg/text/pseudo-first-line-ref.svg b/layout/reftests/svg/text/pseudo-first-line-ref.svg new file mode 100644 index 0000000000..9573b0a627 --- /dev/null +++ b/layout/reftests/svg/text/pseudo-first-line-ref.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" width="700" height="200"> + <text x="100" y="100" style="font: 16px sans-serif; text-decoration: underline">hello there everyone + <tspan x="100" y="120">and good night</tspan></text> +</svg> diff --git a/layout/reftests/svg/text/pseudo-first-line.svg b/layout/reftests/svg/text/pseudo-first-line.svg new file mode 100644 index 0000000000..1347e302a6 --- /dev/null +++ b/layout/reftests/svg/text/pseudo-first-line.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <style> + text::first-line { text-decoration: underline } + </style> + <text x="100" y="100" style="font: 16px sans-serif">hello there everyone + <tspan x="100" y="120">and good night</tspan></text> +</svg> diff --git a/layout/reftests/svg/text/reftest.list b/layout/reftests/svg/text/reftest.list new file mode 100644 index 0000000000..8b62546713 --- /dev/null +++ b/layout/reftests/svg/text/reftest.list @@ -0,0 +1,216 @@ +fuzzy-if(winWidget,47-127,221-254) == simple.svg simple-ref.html +== simple-2.svg simple.svg +fuzzy-if(winWidget,47-127,221-254) == simple-underline.svg simple-underline-ref.html +== simple-underline-scaled.svg simple-underline-scaled-ref.svg +fuzzy-if(winWidget,47-166,255-318) fuzzy-if(OSX,0-1,0-1) == simple-anchor-end-bidi.svg simple-anchor-end-bidi-ref.html +fuzzy-if(winWidget,47-139,181-204) == simple-anchor-end-rtl.svg simple-anchor-end-rtl-ref.html +fuzzy-if(winWidget,47-137,181-250) == simple-anchor-end.svg simple-anchor-end-ref.html +fuzzy-if(dwrite,0-104,0-131) fuzzy-if(cocoaWidget,0-143,0-124) fuzzy-if(!(gtkWidget||geckoview),79-200,59-319) == simple-anchor-middle-bidi.svg simple-anchor-middle-bidi-ref.html +fuzzy-if(winWidget,47-138,188-207) == simple-anchor-middle-rtl.svg simple-anchor-middle-rtl-ref.html +fuzzy(0-111,0-81) fuzzy-if(winWidget,47-181,221-257) == simple-anchor-middle.svg simple-anchor-middle-ref.html +fuzzy-if(winWidget,47-138,260-319) == simple-bidi.svg simple-bidi-ref.html +== simple-bidi-2.svg simple-bidi.svg + +== simple-dx.svg simple.svg +== simple-dx-2.svg simple-dx-2-ref.svg +== simple-dx-anchor-end-bidi.svg simple-dx-anchor-end-bidi-ref.svg +== simple-dx-anchor-end-rtl.svg simple-dx-anchor-end-rtl-ref.svg +== simple-dx-anchor-end.svg simple-dx-anchor-end-ref.svg +== simple-dx-anchor-middle-bidi.svg simple-dx-anchor-middle-bidi-ref.svg +== simple-dx-anchor-middle-rtl.svg simple-dx-anchor-middle-rtl-ref.svg +== simple-dx-anchor-middle.svg simple-dx-anchor-middle-ref.svg +== simple-dx-bidi.svg simple-dx-bidi-ref.svg +== simple-dx-bidi-2.svg simple-dx-bidi-2-ref.svg +== simple-dx-rtl.svg simple-dx-rtl-ref.svg +== simple-dx-rtl-2.svg simple-dx-rtl-2-ref.svg + +== simple-fill-color-dynamic.svg simple-fill-color-dynamic-ref.svg +fuzzy-if(winWidget,47-129,221-254) fuzzy-if(OSX,23-65,195-196) == simple-fill-color.svg simple-fill-color-ref.html +== simple-fill-gradient.svg simple-fill-gradient-ref.svg +== simple-fill-none.svg simple.svg +== simple-pointer-events.svg simple.svg + +fuzzy-if(winWidget,47-127,221-254) == simple-multiple-dx.svg simple-multiple-dx-ref.html +== simple-multiple-dx-2.svg simple-multiple-dx.svg +== simple-multiple-dx-anchor-end-bidi.svg simple-multiple-dx-anchor-end-bidi-ref.svg +== simple-multiple-dx-anchor-middle-bidi.svg simple-multiple-dx-anchor-middle-bidi-ref.svg +== simple-multiple-dx-anchor-end-rtl.svg simple-multiple-dx-anchor-end-rtl-ref.svg +== simple-multiple-dx-anchor-end.svg simple-multiple-dx-anchor-end-ref.svg +fuzzy(0-1,0-2) == simple-multiple-dx-anchor-middle-rtl.svg simple-multiple-dx-anchor-middle-rtl-ref.svg +== simple-multiple-dx-anchor-middle.svg simple-multiple-dx-anchor-middle-ref.svg +== simple-multiple-dx-bidi.svg simple-multiple-dx-bidi-ref.svg +== simple-multiple-dx-bidi-2.svg simple-multiple-dx-bidi.svg +== simple-multiple-dx-rtl.svg simple-multiple-dx-rtl-ref.svg +== simple-multiple-dx-rtl-2.svg simple-multiple-dx-rtl.svg + +fuzzy-if(winWidget,47-138,183-206) == simple-rtl.svg simple-rtl-ref.html +== simple-rtl-2.svg simple-rtl.svg +== simple-transform-rotate.svg simple-transform-rotate-ref.svg + +== multiple-x.svg multiple-x-ref.svg +== multiple-x-bidi.svg multiple-x-bidi-ref.svg +== multiple-x-rtl.svg multiple-x-rtl-ref.svg +== multiple-x-anchor-end-bidi.svg multiple-x-anchor-end-bidi-ref.svg +== multiple-x-anchor-end-rtl.svg multiple-x-anchor-end-rtl-ref.svg +== multiple-x-anchor-end.svg multiple-x-anchor-end-ref.svg +== multiple-x-dx-bidi.svg multiple-x-dx-bidi-ref.svg +== multiple-x-dx-rtl.svg multiple-x-dx-rtl-ref.svg +== multiple-x-dx.svg multiple-x-dx-ref.svg +fuzzy-if(Android,0-65,0-74) == multiple-x-holes-bidi.svg multiple-x-holes-bidi-ref.svg +== multiple-x-holes-dx-bidi.svg multiple-x-holes-dx-bidi-ref.svg +== multiple-x-holes.svg multiple-x-holes-ref.svg +== multiple-x-holes-dx.svg multiple-x-holes-dx-ref.svg +== multiple-x-holes-multiple-dx-bidi.svg multiple-x-holes-multiple-dx-bidi-ref.svg +== multiple-x-holes-multiple-dx-rtl.svg multiple-x-holes-multiple-dx-rtl-ref.svg +== multiple-x-holes-multiple-dx.svg multiple-x-holes-multiple-dx-ref.svg +fuzzy-if(Android,0-192,0-82) == multiple-x-holes-rtl.svg multiple-x-holes-rtl-ref.svg +== multiple-x-multiple-dx-bidi.svg multiple-x-multiple-dx-bidi-ref.svg +== multiple-x-multiple-dx-rtl.svg multiple-x-multiple-dx-rtl-ref.svg +== multiple-x-multiple-dx.svg multiple-x-multiple-dx-ref.svg +== multiple-x-multiple-dx-anchor-end-bidi.svg multiple-x-multiple-dx-anchor-end-bidi-ref.svg +== multiple-x-multiple-dx-anchor-end-rtl.svg multiple-x-multiple-dx-anchor-end-rtl-ref.svg +== multiple-x-multiple-dx-anchor-end.svg multiple-x-multiple-dx-anchor-end-ref.svg + +== multiple-x-percentages.svg multiple-x-percentages-ref.svg +== multiple-x-percentages-2.html multiple-x-percentages-2-ref.html +== multiple-x-percentages-3.html multiple-x-percentages-3-ref.html + +== multiple-x-white-space.svg multiple-x-white-space-ref.svg + +fails-if(geckoview) == multiple-chunks-bidi.svg multiple-chunks-bidi-ref.svg # Bug 1558513 for GV +fails-if(geckoview) == multiple-chunks-different-anchor-bidi.svg multiple-chunks-different-anchor-bidi-ref.svg # Bug 1558513 for GV +fuzzy-if(Android,0-128,0-177) == multiple-chunks-different-anchor-rtl.svg multiple-chunks-different-anchor-rtl-ref.svg +== multiple-chunks-different-anchor.svg multiple-chunks-different-anchor-ref.svg +fuzzy-if(Android,0-242,0-81) == multiple-chunks-directions-and-anchor.svg multiple-chunks-directions-and-anchor-ref.svg +== multiple-chunks-directions-and-anchor-dx.svg multiple-chunks-directions-and-anchor-dx-ref.svg +fuzzy-if(Android,0-242,0-81) == multiple-chunks-directions-and-anchor-multiple-dx.svg multiple-chunks-directions-and-anchor-multiple-dx-ref.svg +== multiple-chunks-dx-bidi.svg multiple-chunks-dx-bidi-ref.svg +== multiple-chunks-dx-different-anchor-bidi.svg multiple-chunks-dx-different-anchor-bidi-ref.svg +== multiple-chunks-dx-different-anchor-rtl.svg multiple-chunks-dx-different-anchor-rtl-ref.svg +== multiple-chunks-dx-different-anchor.svg multiple-chunks-dx-different-anchor-ref.svg +== multiple-chunks-dx-rtl.svg multiple-chunks-dx-rtl-ref.svg +== multiple-chunks-dx.svg multiple-chunks-dx-ref.svg +== multiple-chunks-fill-color.svg multiple-chunks-fill-color-ref.svg +fails-if(geckoview) == multiple-chunks-multiple-dx-bidi.svg multiple-chunks-multiple-dx-bidi-ref.svg # Bug 1558513 for GV +fails-if(geckoview) == multiple-chunks-multiple-dx-different-anchor-bidi.svg multiple-chunks-multiple-dx-different-anchor-bidi-ref.svg # Bug 1558513 for GV +fuzzy-if(Android13,192-192,55-106) == multiple-chunks-multiple-dx-different-anchor-rtl.svg multiple-chunks-multiple-dx-different-anchor-rtl-ref.svg +== multiple-chunks-multiple-dx-different-anchor.svg multiple-chunks-multiple-dx-different-anchor-ref.svg +fuzzy-if(Android13,192-192,55-113) == multiple-chunks-multiple-dx-rtl.svg multiple-chunks-multiple-dx-rtl-ref.svg +== multiple-chunks-multiple-dx.svg multiple-chunks-multiple-dx-ref.svg +== multiple-chunks-rtl.svg multiple-chunks-rtl-ref.svg +== multiple-chunks.svg multiple-chunks-ref.svg + +== display-none-1.svg simple.svg +== display-none-2.svg simple.svg +== display-none-3.svg simple.svg +== display-none-4.svg simple.svg + +== simple-multiline.svg simple-multiline-ref.svg +== simple-multiline-number.svg simple-multiline-number-ref.svg +== simple-multiline-pc.svg simple-multiline-pc-ref.svg +== simple-multiline-anchor-end.svg simple-multiline-anchor-end-ref.svg + +fuzzy(0-1,0-15) == textpath.svg textpath-ref.svg +== textpath-a.svg textpath-a-ref.svg +== textpath-anchor-middle.svg textpath-anchor-middle-ref.svg +== textpath-anchor-end.svg textpath-anchor-end-ref.svg +== textpath-cluster.svg textpath-cluster-ref.svg +== textpath-cluster-2.svg textpath-cluster-2-ref.svg +== textpath-invalid-parent.svg textpath-invalid-parent-ref.svg +== textpath-multiline.svg textpath-multiline-ref.svg +== textpath-multiline-2.svg textpath-multiline-2-ref.svg +== textpath-after.svg textpath-after-ref.svg +== textpath-multiple.svg ../pass.svg +== textpath-after-anchor-end.svg textpath-after-anchor-end-ref.svg +== textpath-reset-position.svg textpath-reset-position-ref.svg +== textpath-inherit-position.svg textpath-inherit-position-ref.svg + +== textLength.svg textLength-ref.svg +fuzzy(0-1,0-200) == textLength-2.svg textLength-2-ref.svg +fuzzy(0-4,0-100) == textLength-3.svg textLength-3-ref.svg +== textLength-4.svg textLength-4-ref.svg +== textLength-5.svg textLength-5-ref.svg +== textLength-6.svg textLength-6-ref.svg + +# text-shadow +fuzzy(0-127,0-5) fuzzy-if(Android,0-127,0-12) == text-shadow.svg text-shadow-ref.svg + +# vertical text +== vertical-01.svg vertical-01-ref.svg + +# tests for ignoring various properties +== ignore-border.svg ignore-prop-ref.svg +== ignore-display.svg ignore-display-ref.svg +== ignore-float.svg ignore-prop-ref.svg +== ignore-float-first-letter.svg ignore-prop-ref.svg +== ignore-position.svg ignore-position-ref.svg +== ignore-margin.svg ignore-prop-ref.svg +== ignore-padding.svg ignore-prop-ref.svg +== ignore-vertical-align.svg ignore-vertical-align-ref.svg +== ignore-overflow-scroll.svg ignore-prop-ref.svg +== ignore-text-align.svg ignore-prop-ref.svg +== ignore-text-align-2.svg ignore-text-align-2-ref.svg + +# pseudo-elements +== pseudo-first-line.svg pseudo-first-line-ref.svg +== pseudo-first-line-2.svg pseudo-first-line-2-ref.svg +== pseudo-first-letter.svg pseudo-first-letter-ref.svg +== pseudo-first-letter-2.svg pseudo-first-letter-2-ref.svg +== ignore-before-after.svg ignore-prop-ref.svg + +# invalid child nodes +== ignore-invalid-child.svg ignore-invalid-child-ref.svg +== ignore-invalid-child-2.svg ignore-invalid-child-2-ref.svg + +# text inside a link +== link-surrounding.svg simple.svg + +# dynamic document changes +== dynamic-font-size.svg dynamic-font-size-ref.svg +== dynamic-font-size-2.svg dynamic-font-size-2-ref.svg +== dynamic-font-size-3.svg dynamic-font-size-3-ref.svg +== dynamic-font-size-4.svg dynamic-font-size-4-ref.svg +== dynamic-dominant-baseline.svg dynamic-dominant-baseline-ref.svg +== dynamic-multiple-x.svg dynamic-multiple-x-ref.svg +fuzzy(0-1,0-200) == dynamic-non-scaling-stroke.svg dynamic-non-scaling-stroke-ref.svg #Bug 885316 +fuzzy(0-127,0-5) fuzzy-if(Android,0-127,0-41) == dynamic-text-shadow.svg text-shadow-ref.svg + +# text and masks +fuzzy-if(winWidget,0-50,0-224) == mask-applied.svg mask-applied-ref.svg +fuzzy-if(winWidget,0-105,0-112) == mask-content.svg mask-content-ref.svg +fuzzy-if(winWidget,0-53,0-112) == mask-content-2.svg mask-content-2-ref.svg + +# text and clipPaths +== clipPath-applied.svg clipPath-applied-ref.svg +fuzzy-if(winWidget,0-105,0-56) == clipPath-content.svg clipPath-content-ref.svg +fuzzy-if(winWidget,0-53,0-112) == clipPath-content-2.svg clipPath-content-2-ref.svg + +# text and patterns +== pattern-content.svg pattern-content-ref.svg + +# text and filters +fuzzy-if(winWidget,0-126,0-336) == filter-applied.svg filter-applied-ref.svg + +# vertical text +fuzzy(0-1,0-80) == textpath-vertical-dx.svg textpath-vertical-dx-ref.svg +fuzzy(0-1,0-80) == textpath-vertical-x.svg textpath-vertical-x-ref.svg + +# selection +needs-focus == deselectAll.svg deselectAll-ref.svg +fuzzy(0-1,0-250) needs-focus == selectSubString.svg selectSubString-ref.svg +fuzzy(0-1,0-600) needs-focus == selectSubString-2.svg selectSubString-2-ref.svg +fuzzy(0-1,0-250) needs-focus == selectSubString-3.svg selectSubString-3-ref.svg +fuzzy-if(!geckoview,0-1,0-237) needs-focus fuzzy-if(winWidget,55-148,200-254) == simple-selection.svg simple-selection-ref.html +fuzzy(0-1,0-100) needs-focus fuzzy-if(winWidget,55-148,200-318) == simple-bidi-selection.svg simple-bidi-selection-ref.html +fuzzy(0-1,0-50) needs-focus fuzzy-if(winWidget,55-148,200-254) fuzzy-if(OSX,1-65,19-196) == simple-fill-color-selection.svg simple-fill-color-selection-ref.html +fuzzy(0-1,0-150) needs-focus fuzzy-if(winWidget,125-148,221-254) == simple-underline-selection.svg simple-underline-selection-ref.html # Bug 1392106 +fuzzy(0-1,0-300) needs-focus fuzzy-if(Android13,0-3,0-926) fuzzy-if(winWidget,134-152,432-501) == multiple-text-selection.svg multiple-text-selection-ref.html # Bug 1392106 +needs-focus == multiple-chunks-selection.svg multiple-chunks-selection-ref.svg +fuzzy(0-1,0-200) needs-focus == textpath-selection.svg textpath-selection-ref.svg + +# letter-spacing and word-spacing +== simple-letter-spacing.svg simple-letter-spacing-ref.svg +== simple-word-spacing.svg simple-word-spacing-ref.svg +== multiple-chunks-letter-spacing.svg multiple-chunks-letter-spacing-ref.svg + +== tspan-shaping.svg tspan-shaping-ref.svg diff --git a/layout/reftests/svg/text/selectSubString-2-ref.svg b/layout/reftests/svg/text/selectSubString-2-ref.svg new file mode 100644 index 0000000000..87984048da --- /dev/null +++ b/layout/reftests/svg/text/selectSubString-2-ref.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" class="reftest-wait"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>hello</text> + </g> + <script> + function f() { + var text = document.getElementsByTagName("text")[0]; + var range = document.createRange(); + range.setStart(text.firstChild, 0); + range.setEnd(text.firstChild, 5); + window.getSelection().addRange(range); + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", f, false); + </script> +</svg> diff --git a/layout/reftests/svg/text/selectSubString-2.svg b/layout/reftests/svg/text/selectSubString-2.svg new file mode 100644 index 0000000000..d92e86b63b --- /dev/null +++ b/layout/reftests/svg/text/selectSubString-2.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" class="reftest-wait"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>hello</text> + </g> + <script> + function f() { + var text = document.getElementsByTagName("text")[0]; + text.selectSubString(0, 5); + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", f, false); + </script> +</svg> diff --git a/layout/reftests/svg/text/selectSubString-3-ref.svg b/layout/reftests/svg/text/selectSubString-3-ref.svg new file mode 100644 index 0000000000..8a7fc2abb8 --- /dev/null +++ b/layout/reftests/svg/text/selectSubString-3-ref.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" class="reftest-wait"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>abc אבג 123 דהו def</text> + </g> + <script> + function f() { + var text = document.getElementsByTagName("text")[0]; + var range = document.createRange(); + range.setStart(text.firstChild, 0); + range.setEnd(text.firstChild, 9); + window.getSelection().addRange(range); + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", f, false); + </script> +</svg> diff --git a/layout/reftests/svg/text/selectSubString-3.svg b/layout/reftests/svg/text/selectSubString-3.svg new file mode 100644 index 0000000000..902859a6a2 --- /dev/null +++ b/layout/reftests/svg/text/selectSubString-3.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" class="reftest-wait"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text> + abc אבג 123 דהו def + </text> + </g> + <script> + function f() { + var text = document.getElementsByTagName("text")[0]; + text.selectSubString(0, 9); + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", f, false); + </script> +</svg> diff --git a/layout/reftests/svg/text/selectSubString-ref.svg b/layout/reftests/svg/text/selectSubString-ref.svg new file mode 100644 index 0000000000..cc11cd22c0 --- /dev/null +++ b/layout/reftests/svg/text/selectSubString-ref.svg @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" class="reftest-wait"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>hello</text> + </g> + <script> + function f() { + var text = document.getElementsByTagName("text")[0]; + var range = document.createRange(); + range.setStart(text.firstChild, 1); + range.setEnd(text.firstChild, 4); + window.getSelection().addRange(range); + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", f, false); + </script> +</svg> diff --git a/layout/reftests/svg/text/selectSubString.svg b/layout/reftests/svg/text/selectSubString.svg new file mode 100644 index 0000000000..3329b2c924 --- /dev/null +++ b/layout/reftests/svg/text/selectSubString.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" class="reftest-wait"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>hello</text> + </g> + <script> + function f() { + var text = document.getElementsByTagName("text")[0]; + text.selectSubString(1, 3); + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", f, false); + </script> +</svg> diff --git a/layout/reftests/svg/text/simple-2.svg b/layout/reftests/svg/text/simple-2.svg new file mode 100644 index 0000000000..871e5418d9 --- /dev/null +++ b/layout/reftests/svg/text/simple-2.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif"> + <text x="100">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-anchor-end-bidi-ref.html b/layout/reftests/svg/text/simple-anchor-end-bidi-ref.html new file mode 100644 index 0000000000..ad561778c3 --- /dev/null +++ b/layout/reftests/svg/text/simple-anchor-end-bidi-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<meta charset=UTF-8> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px } +div { text-align: right } +span { position: relative; left: -500px } +</style> +<body> +<svg></svg><div><span>אבגabc</span></div> diff --git a/layout/reftests/svg/text/simple-anchor-end-bidi.svg b/layout/reftests/svg/text/simple-anchor-end-bidi.svg new file mode 100644 index 0000000000..430fb8f11d --- /dev/null +++ b/layout/reftests/svg/text/simple-anchor-end-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="end">אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-anchor-end-ref.html b/layout/reftests/svg/text/simple-anchor-end-ref.html new file mode 100644 index 0000000000..ae31b12211 --- /dev/null +++ b/layout/reftests/svg/text/simple-anchor-end-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<meta charset=UTF-8> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px } +div { text-align: right } +span { position: relative; left: -500px } +</style> +<body> +<svg></svg><div><span>hello</span></div> diff --git a/layout/reftests/svg/text/simple-anchor-end-rtl-ref.html b/layout/reftests/svg/text/simple-anchor-end-rtl-ref.html new file mode 100644 index 0000000000..0d0e1435f4 --- /dev/null +++ b/layout/reftests/svg/text/simple-anchor-end-rtl-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<meta charset=UTF-8> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px } +div { text-align: left } +span { position: relative; left: 300px } +</style> +<body> +<svg></svg><div><span>אבגדה</span></div> diff --git a/layout/reftests/svg/text/simple-anchor-end-rtl.svg b/layout/reftests/svg/text/simple-anchor-end-rtl.svg new file mode 100644 index 0000000000..66b0f9c2ae --- /dev/null +++ b/layout/reftests/svg/text/simple-anchor-end-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='200' direction='rtl' text-anchor='end'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-anchor-end.svg b/layout/reftests/svg/text/simple-anchor-end.svg new file mode 100644 index 0000000000..bd97d05b32 --- /dev/null +++ b/layout/reftests/svg/text/simple-anchor-end.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="end">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-anchor-middle-bidi-ref.html b/layout/reftests/svg/text/simple-anchor-middle-bidi-ref.html new file mode 100644 index 0000000000..6fe675123a --- /dev/null +++ b/layout/reftests/svg/text/simple-anchor-middle-bidi-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<meta charset=UTF-8> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px } +div { text-align: center } +span { position: relative; left: -150px } +</style> +<body> +<svg></svg><div><span>אבגabc</span></div> diff --git a/layout/reftests/svg/text/simple-anchor-middle-bidi.svg b/layout/reftests/svg/text/simple-anchor-middle-bidi.svg new file mode 100644 index 0000000000..cf1db5d6c3 --- /dev/null +++ b/layout/reftests/svg/text/simple-anchor-middle-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="middle">אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-anchor-middle-ref.html b/layout/reftests/svg/text/simple-anchor-middle-ref.html new file mode 100644 index 0000000000..3c6a21d629 --- /dev/null +++ b/layout/reftests/svg/text/simple-anchor-middle-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<meta charset=UTF-8> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px } +div { text-align: center } +span { position: relative; left: -150px } +</style> +<body> +<svg></svg><div><span>hello</span></div> diff --git a/layout/reftests/svg/text/simple-anchor-middle-rtl-ref.html b/layout/reftests/svg/text/simple-anchor-middle-rtl-ref.html new file mode 100644 index 0000000000..31b35a768c --- /dev/null +++ b/layout/reftests/svg/text/simple-anchor-middle-rtl-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<meta charset=UTF-8> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px } +div { text-align: center } +span { position: relative; left: -50px } +</style> +<body> +<svg></svg><div><span>אבגדה</span></div> diff --git a/layout/reftests/svg/text/simple-anchor-middle-rtl.svg b/layout/reftests/svg/text/simple-anchor-middle-rtl.svg new file mode 100644 index 0000000000..ce1adc9852 --- /dev/null +++ b/layout/reftests/svg/text/simple-anchor-middle-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='200' direction='rtl' text-anchor='middle'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-anchor-middle.svg b/layout/reftests/svg/text/simple-anchor-middle.svg new file mode 100644 index 0000000000..93f3ed5538 --- /dev/null +++ b/layout/reftests/svg/text/simple-anchor-middle.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="middle">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-bidi-2.svg b/layout/reftests/svg/text/simple-bidi-2.svg new file mode 100644 index 0000000000..2097b40d0b --- /dev/null +++ b/layout/reftests/svg/text/simple-bidi-2.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif"> + <text x="100">אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-bidi-ref.html b/layout/reftests/svg/text/simple-bidi-ref.html new file mode 100644 index 0000000000..fac6834498 --- /dev/null +++ b/layout/reftests/svg/text/simple-bidi-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<meta charset=UTF-8> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px } +div { text-align: left } +span { position: relative; left: 100px } +</style> +<body> +<svg></svg><div><span>אבגabc</span></div> diff --git a/layout/reftests/svg/text/simple-bidi-selection-ref.html b/layout/reftests/svg/text/simple-bidi-selection-ref.html new file mode 100644 index 0000000000..8e0f500c13 --- /dev/null +++ b/layout/reftests/svg/text/simple-bidi-selection-ref.html @@ -0,0 +1,22 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<meta charset=UTF-8> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px } +div { text-align: left } +span { position: relative; left: 100px } +</style> +<body> +<svg></svg><div><span>אבגabc</span></div> +<script> + var span = document.getElementsByTagName("span")[0]; + var range = document.createRange(); + range.setStart(span.firstChild, 1); + range.setEnd(span.firstChild, 5); + window.getSelection().addRange(range); +</script> diff --git a/layout/reftests/svg/text/simple-bidi-selection.svg b/layout/reftests/svg/text/simple-bidi-selection.svg new file mode 100644 index 0000000000..da336d89c8 --- /dev/null +++ b/layout/reftests/svg/text/simple-bidi-selection.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>אבגabc</text> + </g> + <script> + var text = document.getElementsByTagName("text")[0]; + var range = document.createRange(); + range.setStart(text.firstChild, 1); + range.setEnd(text.firstChild, 5); + window.getSelection().addRange(range); + </script> +</svg> diff --git a/layout/reftests/svg/text/simple-bidi.svg b/layout/reftests/svg/text/simple-bidi.svg new file mode 100644 index 0000000000..a2cedaf927 --- /dev/null +++ b/layout/reftests/svg/text/simple-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-2-ref.svg b/layout/reftests/svg/text/simple-dx-2-ref.svg new file mode 100644 index 0000000000..871e5418d9 --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-2-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif"> + <text x="100">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-2.svg b/layout/reftests/svg/text/simple-dx-2.svg new file mode 100644 index 0000000000..4cdc5d0965 --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-2.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif"> + <text x="50" dx="50">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-anchor-end-bidi-ref.svg b/layout/reftests/svg/text/simple-dx-anchor-end-bidi-ref.svg new file mode 100644 index 0000000000..430fb8f11d --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-anchor-end-bidi-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="end">אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-anchor-end-bidi.svg b/layout/reftests/svg/text/simple-dx-anchor-end-bidi.svg new file mode 100644 index 0000000000..24b3b2362e --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-anchor-end-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="50" dx="50" text-anchor="end">אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-anchor-end-ref.svg b/layout/reftests/svg/text/simple-dx-anchor-end-ref.svg new file mode 100644 index 0000000000..bd97d05b32 --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-anchor-end-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="end">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-anchor-end-rtl-ref.svg b/layout/reftests/svg/text/simple-dx-anchor-end-rtl-ref.svg new file mode 100644 index 0000000000..66b0f9c2ae --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-anchor-end-rtl-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='200' direction='rtl' text-anchor='end'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-anchor-end-rtl.svg b/layout/reftests/svg/text/simple-dx-anchor-end-rtl.svg new file mode 100644 index 0000000000..7f8a221b8e --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-anchor-end-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' dx='100' direction='rtl' text-anchor='end'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-anchor-end.svg b/layout/reftests/svg/text/simple-dx-anchor-end.svg new file mode 100644 index 0000000000..186a69e18d --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-anchor-end.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="50" dx="50" text-anchor="end">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-anchor-middle-bidi-ref.svg b/layout/reftests/svg/text/simple-dx-anchor-middle-bidi-ref.svg new file mode 100644 index 0000000000..cf1db5d6c3 --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-anchor-middle-bidi-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="middle">אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-anchor-middle-bidi.svg b/layout/reftests/svg/text/simple-dx-anchor-middle-bidi.svg new file mode 100644 index 0000000000..7d928bbd0e --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-anchor-middle-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="50" dx="50" text-anchor="middle">אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-anchor-middle-ref.svg b/layout/reftests/svg/text/simple-dx-anchor-middle-ref.svg new file mode 100644 index 0000000000..93f3ed5538 --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-anchor-middle-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="middle">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-anchor-middle-rtl-ref.svg b/layout/reftests/svg/text/simple-dx-anchor-middle-rtl-ref.svg new file mode 100644 index 0000000000..ce1adc9852 --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-anchor-middle-rtl-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='200' direction='rtl' text-anchor='middle'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-anchor-middle-rtl.svg b/layout/reftests/svg/text/simple-dx-anchor-middle-rtl.svg new file mode 100644 index 0000000000..4a5e1a0128 --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-anchor-middle-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' dx='100' direction='rtl' text-anchor='middle'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-anchor-middle.svg b/layout/reftests/svg/text/simple-dx-anchor-middle.svg new file mode 100644 index 0000000000..68d9888e7f --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-anchor-middle.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="50" dx="50" text-anchor="middle">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-bidi-2-ref.svg b/layout/reftests/svg/text/simple-dx-bidi-2-ref.svg new file mode 100644 index 0000000000..2097b40d0b --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-bidi-2-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif"> + <text x="100">אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-bidi-2.svg b/layout/reftests/svg/text/simple-dx-bidi-2.svg new file mode 100644 index 0000000000..c210041822 --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-bidi-2.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif"> + <text x="50" dx="50">אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-bidi-ref.svg b/layout/reftests/svg/text/simple-dx-bidi-ref.svg new file mode 100644 index 0000000000..a2cedaf927 --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-bidi-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-bidi.svg b/layout/reftests/svg/text/simple-dx-bidi.svg new file mode 100644 index 0000000000..0e56b92553 --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif"> + <text dx='100'>אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-rtl-2-ref.svg b/layout/reftests/svg/text/simple-dx-rtl-2-ref.svg new file mode 100644 index 0000000000..725a8901fb --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-rtl-2-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif"> + <text direction='rtl' x='100'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-rtl-2.svg b/layout/reftests/svg/text/simple-dx-rtl-2.svg new file mode 100644 index 0000000000..55aede4edf --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-rtl-2.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(50,100)" style="font: 16px sans-serif"> + <text direction='rtl' x='25' dx='25'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-rtl-ref.svg b/layout/reftests/svg/text/simple-dx-rtl-ref.svg new file mode 100644 index 0000000000..cdce9d87ad --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-rtl-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text direction='rtl'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx-rtl.svg b/layout/reftests/svg/text/simple-dx-rtl.svg new file mode 100644 index 0000000000..878614a95b --- /dev/null +++ b/layout/reftests/svg/text/simple-dx-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(50,100)" style="font: 16px sans-serif"> + <text dx="50" direction='rtl'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-dx.svg b/layout/reftests/svg/text/simple-dx.svg new file mode 100644 index 0000000000..8ab0a152df --- /dev/null +++ b/layout/reftests/svg/text/simple-dx.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif"> + <text dx="100">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-fill-color-dynamic-ref.svg b/layout/reftests/svg/text/simple-fill-color-dynamic-ref.svg new file mode 100644 index 0000000000..195e0a22a0 --- /dev/null +++ b/layout/reftests/svg/text/simple-fill-color-dynamic-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif; fill: green"> + <text>hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-fill-color-dynamic.svg b/layout/reftests/svg/text/simple-fill-color-dynamic.svg new file mode 100644 index 0000000000..2846216da7 --- /dev/null +++ b/layout/reftests/svg/text/simple-fill-color-dynamic.svg @@ -0,0 +1,25 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200" class="reftest-wait"> + <g transform="translate(100,100)" style="font: 16px sans-serif; fill: red"> + <text>hello</text> + </g> + <script> + function when(type, f) { + var g = function(evt) { + window.removeEventListener(type, g, false); + f(evt); + }; + window.addEventListener(type, g, false); + } + + when("MozReftestInvalidate", function() { + document.getElementsByTagName("g")[0].style.fill = "green"; + when("MozAfterPaint", function() { + document.documentElement.removeAttribute("class"); + }); + }); + </script> +</svg> diff --git a/layout/reftests/svg/text/simple-fill-color-ref.html b/layout/reftests/svg/text/simple-fill-color-ref.html new file mode 100644 index 0000000000..3f72aabfde --- /dev/null +++ b/layout/reftests/svg/text/simple-fill-color-ref.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; margin-left: -700px; vertical-align: 100px } +span { margin-left: 100px; color: green } +</style> +<body> + <svg></svg><div><span>hello</span></div> +</body> diff --git a/layout/reftests/svg/text/simple-fill-color-selection-ref.html b/layout/reftests/svg/text/simple-fill-color-selection-ref.html new file mode 100644 index 0000000000..9e43d703ea --- /dev/null +++ b/layout/reftests/svg/text/simple-fill-color-selection-ref.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; margin-left: -700px; vertical-align: 100px } +span { margin-left: 100px; color: green } +</style> +<body> + <svg></svg><div><span>hello</span></div> + <script> + var span = document.getElementsByTagName("span")[0]; + var range = document.createRange(); + range.setStart(span.firstChild, 1); + range.setEnd(span.firstChild, 4); + window.getSelection().addRange(range); + </script> +</body> diff --git a/layout/reftests/svg/text/simple-fill-color-selection.svg b/layout/reftests/svg/text/simple-fill-color-selection.svg new file mode 100644 index 0000000000..810343af64 --- /dev/null +++ b/layout/reftests/svg/text/simple-fill-color-selection.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif; fill: green"> + <text>hello</text> + </g> + <script> + var text = document.getElementsByTagName("text")[0]; + var range = document.createRange(); + range.setStart(text.firstChild, 1); + range.setEnd(text.firstChild, 4); + window.getSelection().addRange(range); + </script> +</svg> diff --git a/layout/reftests/svg/text/simple-fill-color.svg b/layout/reftests/svg/text/simple-fill-color.svg new file mode 100644 index 0000000000..195e0a22a0 --- /dev/null +++ b/layout/reftests/svg/text/simple-fill-color.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif; fill: green"> + <text>hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-fill-gradient-ref.svg b/layout/reftests/svg/text/simple-fill-gradient-ref.svg new file mode 100644 index 0000000000..b0d625f70c --- /dev/null +++ b/layout/reftests/svg/text/simple-fill-gradient-ref.svg @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <linearGradient id="g" gradientUnits="userSpaceOnUse" x1="0" y1="-13" x2="0" y2="3"> + <stop offset="0" stop-color="red"/> + <stop offset="1" stop-color="yellow"/> + </linearGradient> + <g transform="translate(100,100)"> + <rect x="0" y="-13" width="16" height="16" fill="url(#g)"/> + <rect x="0" y="-13" width="16" height="16" stroke="black" stroke-width="2" fill="none"/> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-fill-gradient.svg b/layout/reftests/svg/text/simple-fill-gradient.svg new file mode 100644 index 0000000000..74ec4507aa --- /dev/null +++ b/layout/reftests/svg/text/simple-fill-gradient.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <linearGradient id="g" gradientUnits="userSpaceOnUse" x1="0" y1="-13" x2="0" y2="3"> + <stop offset="0" stop-color="red"/> + <stop offset="1" stop-color="yellow"/> + </linearGradient> + <g transform="translate(100,100)" style="font: 16px Ahem"> + <text fill="url(#g)">a</text> + <rect x="0" y="-13" width="16" height="16" stroke="black" stroke-width="2" fill="none"/> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-fill-none.svg b/layout/reftests/svg/text/simple-fill-none.svg new file mode 100644 index 0000000000..20b1987d39 --- /dev/null +++ b/layout/reftests/svg/text/simple-fill-none.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>hello<tspan fill="none">ooo</tspan></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-letter-spacing-ref.svg b/layout/reftests/svg/text/simple-letter-spacing-ref.svg new file mode 100644 index 0000000000..062e2f7281 --- /dev/null +++ b/layout/reftests/svg/text/simple-letter-spacing-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif"> + <text x="100" dx="0 20 20 20 20">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-letter-spacing.svg b/layout/reftests/svg/text/simple-letter-spacing.svg new file mode 100644 index 0000000000..9f17ff188f --- /dev/null +++ b/layout/reftests/svg/text/simple-letter-spacing.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif; letter-spacing: 20px;"> + <text x="100">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiline-anchor-end-ref.svg b/layout/reftests/svg/text/simple-multiline-anchor-end-ref.svg new file mode 100644 index 0000000000..ac6bea46f5 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiline-anchor-end-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <g text-anchor="end"> + <text x="100">Hello.</text> + <text x="100" y="20">Goodbye.</text> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiline-anchor-end.svg b/layout/reftests/svg/text/simple-multiline-anchor-end.svg new file mode 100644 index 0000000000..667e5411dd --- /dev/null +++ b/layout/reftests/svg/text/simple-multiline-anchor-end.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="end" style="white-space: pre-line; line-height: 20px">Hello. +Goodbye.</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiline-number-ref.svg b/layout/reftests/svg/text/simple-multiline-number-ref.svg new file mode 100644 index 0000000000..58a786fa6e --- /dev/null +++ b/layout/reftests/svg/text/simple-multiline-number-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>Hello.</text> + <text y="20">Goodbye.</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiline-number.svg b/layout/reftests/svg/text/simple-multiline-number.svg new file mode 100644 index 0000000000..4073169416 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiline-number.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text style="white-space: pre-line; line-height: 1.25">Hello. +Goodbye.</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiline-pc-ref.svg b/layout/reftests/svg/text/simple-multiline-pc-ref.svg new file mode 100644 index 0000000000..58a786fa6e --- /dev/null +++ b/layout/reftests/svg/text/simple-multiline-pc-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>Hello.</text> + <text y="20">Goodbye.</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiline-pc.svg b/layout/reftests/svg/text/simple-multiline-pc.svg new file mode 100644 index 0000000000..12f96c3d3c --- /dev/null +++ b/layout/reftests/svg/text/simple-multiline-pc.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text style="white-space: pre-line; line-height: 125%">Hello. +Goodbye.</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiline-ref.svg b/layout/reftests/svg/text/simple-multiline-ref.svg new file mode 100644 index 0000000000..58a786fa6e --- /dev/null +++ b/layout/reftests/svg/text/simple-multiline-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>Hello.</text> + <text y="20">Goodbye.</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiline.svg b/layout/reftests/svg/text/simple-multiline.svg new file mode 100644 index 0000000000..12beaff511 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiline.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text style="white-space: pre-line; line-height: 20px">Hello. +Goodbye.</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-2.svg b/layout/reftests/svg/text/simple-multiple-dx-2.svg new file mode 100644 index 0000000000..12802190c7 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-2.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif"> + <text x="50" dx="60 20 30">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-end-bidi-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-bidi-ref.svg new file mode 100644 index 0000000000..9ba587826d --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-bidi-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" text-anchor="end"><tspan visibility="hidden">אב</tspan>גabc</text> + <text x="50" text-anchor="end"><tspan visibility="hidden">א</tspan>ב<tspan visibility="hidden">גabc</tspan></text> + <text x="20" text-anchor="end">א<tspan visibility="hidden">בגabc</tspan></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-end-bidi.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-bidi.svg new file mode 100644 index 0000000000..10758b48a6 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="90" dx="10 30 50" text-anchor="end">אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-end-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-ref.svg new file mode 100644 index 0000000000..8725cd4ad4 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="110" text-anchor="end">llo</text> + <text x="80" text-anchor="end"><tspan visibility="hidden">h</tspan>e<tspan visibility="hidden">llo</tspan></text> + <text x="60" text-anchor="end">h<tspan visibility="hidden">ello</tspan></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-end-rtl-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-rtl-ref.svg new file mode 100644 index 0000000000..24fe83db65 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-rtl-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="110" text-anchor="end" direction="rtl">גדה</text> + <text x="140" text-anchor="end" direction="rtl">ב<tspan visibility="hidden">גדה</tspan></text> + <text x="160" text-anchor="end" direction="rtl">א<tspan visibility="hidden">בגדה</tspan></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-end-rtl.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-rtl.svg new file mode 100644 index 0000000000..d11ab10e06 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-end-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='100' dx='10 -20 -30' direction='rtl' text-anchor='end'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-end.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-end.svg new file mode 100644 index 0000000000..34e0bdf535 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-end.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="100" dx="10 20 30" text-anchor="end">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-bidi-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-bidi-ref.svg new file mode 100644 index 0000000000..9ed3955c54 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-bidi-ref.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <g transform="translate(100,100)" style="font: 16px Ahem"> + <text x="214" fill="blue"><tspan direction="rtl" unicode-bidi="bidi-override" fill="red">x y z</tspan><tspan visibility="hidden">ww</tspan>a b<tspan visibility="hidden">w</tspan> c</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-bidi.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-bidi.svg new file mode 100644 index 0000000000..20eef41cf8 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-bidi.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <g transform="translate(100,100)" style="font: 16px Ahem"> + <text x="110" dx="0 0 0 0 0 32 0 0 16" text-anchor="middle" fill="blue"><tspan direction="rtl" unicode-bidi="bidi-override" fill="red">x y z</tspan>a b c</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-ref.svg new file mode 100644 index 0000000000..96443ddc25 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-ref.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <g transform="translate(100,100)" style="font: 16px Ahem"> + <text x="12"><tspan visibility="hidden">w</tspan><tspan fill="green">h</tspan><tspan visibility="hidden">w</tspan> e <tspan visibility="hidden">w</tspan>l l o</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-rtl-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-rtl-ref.svg new file mode 100644 index 0000000000..740e21fa34 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-rtl-ref.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <g transform="translate(100,100)" style="font: 16px Ahem"> + <text x="280"><tspan direction="rtl" unicode-bidi="bidi-override"><tspan fill="green">a</tspan><tspan visibility="hidden">ww</tspan>b c d e</tspan></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-rtl.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-rtl.svg new file mode 100644 index 0000000000..414bf0fa1d --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle-rtl.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <g transform="translate(100,100)" style="font: 16px Ahem"> + <text x='200' dx='0 0 -16' direction='rtl' text-anchor='middle'><tspan direction='rtl' unicode-bidi='bidi-override'><tspan fill="green">a</tspan> b c d e</tspan></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-anchor-middle.svg b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle.svg new file mode 100644 index 0000000000..392f4e35eb --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-anchor-middle.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <g transform="translate(100,100)" style="font: 16px Ahem"> + <text x="100" dx="16 0 16 0 16" text-anchor="middle"><tspan fill="green">h</tspan> e l l o</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-bidi-2.svg b/layout/reftests/svg/text/simple-multiple-dx-bidi-2.svg new file mode 100644 index 0000000000..7f29cad1ef --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-bidi-2.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="110" dx="0 -30 -100">אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-bidi-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-bidi-ref.svg new file mode 100644 index 0000000000..a1748dcb64 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-bidi-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x='110'><tspan visibility="hidden">אב</tspan>גabc</text> + <text x='210'><tspan visibility="hidden">א</tspan>ב<tspan visibility="hidden">גabc</tspan></text> + <text x='240'>א<tspan visibility="hidden">בגabc</tspan></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-bidi.svg b/layout/reftests/svg/text/simple-multiple-dx-bidi.svg new file mode 100644 index 0000000000..7dfc20f838 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-bidi.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="110" dx='0 -30 -100'>אבגabc</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-ref.html b/layout/reftests/svg/text/simple-multiple-dx-ref.html new file mode 100644 index 0000000000..53b20148a9 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-ref.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; margin-left: -700px; vertical-align: 100px } +div > span { margin-left: 110px } +</style> +<body> + <svg></svg><div><span>h<span style="padding-left: 20px"></span>e<span style="padding-left: 30px"></span>llo</span></div> +</body> diff --git a/layout/reftests/svg/text/simple-multiple-dx-rtl-2.svg b/layout/reftests/svg/text/simple-multiple-dx-rtl-2.svg new file mode 100644 index 0000000000..cca2629c0d --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-rtl-2.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text direction='rtl' x='100' dx='10 -20 -30'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-rtl-ref.svg b/layout/reftests/svg/text/simple-multiple-dx-rtl-ref.svg new file mode 100644 index 0000000000..41eb27b8d7 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-rtl-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text x="110" direction='rtl'>א</text> + <text x="90" direction='rtl'><tspan visibility="hidden">א</tspan>ב</text> + <text x="60" direction='rtl'><tspan visibility="hidden">אב</tspan>גדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx-rtl.svg b/layout/reftests/svg/text/simple-multiple-dx-rtl.svg new file mode 100644 index 0000000000..16632b13da --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text dx="110 -20 -30" direction='rtl'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-multiple-dx.svg b/layout/reftests/svg/text/simple-multiple-dx.svg new file mode 100644 index 0000000000..883e088180 --- /dev/null +++ b/layout/reftests/svg/text/simple-multiple-dx.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text dx="10 20 30">hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-pointer-events.svg b/layout/reftests/svg/text/simple-pointer-events.svg new file mode 100644 index 0000000000..6c572418bb --- /dev/null +++ b/layout/reftests/svg/text/simple-pointer-events.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="100" y="100" style="font: 16px sans-serif; pointer-events: none">hello</text> +</svg> diff --git a/layout/reftests/svg/text/simple-ref.html b/layout/reftests/svg/text/simple-ref.html new file mode 100644 index 0000000000..410cd19bf2 --- /dev/null +++ b/layout/reftests/svg/text/simple-ref.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; margin-left: -700px; vertical-align: 100px } +span { margin-left: 100px } +</style> +<body> + <svg></svg><div><span>hello</span></div> +</body> diff --git a/layout/reftests/svg/text/simple-rtl-2.svg b/layout/reftests/svg/text/simple-rtl-2.svg new file mode 100644 index 0000000000..725a8901fb --- /dev/null +++ b/layout/reftests/svg/text/simple-rtl-2.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif"> + <text direction='rtl' x='100'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-rtl-ref.html b/layout/reftests/svg/text/simple-rtl-ref.html new file mode 100644 index 0000000000..a82eb1e7e4 --- /dev/null +++ b/layout/reftests/svg/text/simple-rtl-ref.html @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<meta charset=UTF-8> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; position: relative; margin-left: -700px; vertical-align: 100px } +div { text-align: right; width: 200px } +span { position: relative; right: 100px } +</style> +<body> +<svg></svg><div><span>אבגדה</span></div> diff --git a/layout/reftests/svg/text/simple-rtl.svg b/layout/reftests/svg/text/simple-rtl.svg new file mode 100644 index 0000000000..cdce9d87ad --- /dev/null +++ b/layout/reftests/svg/text/simple-rtl.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text direction='rtl'>אבגדה</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-selection-ref.html b/layout/reftests/svg/text/simple-selection-ref.html new file mode 100644 index 0000000000..45ee3cfec9 --- /dev/null +++ b/layout/reftests/svg/text/simple-selection-ref.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; margin-left: -700px; vertical-align: 100px } +span { margin-left: 100px } +</style> +<body> + <svg></svg><div><span>hello</span></div> + <script> + var span = document.getElementsByTagName("span")[0]; + var range = document.createRange(); + range.setStart(span.firstChild, 1); + range.setEnd(span.firstChild, 4); + window.getSelection().addRange(range); + </script> +</body> diff --git a/layout/reftests/svg/text/simple-selection.svg b/layout/reftests/svg/text/simple-selection.svg new file mode 100644 index 0000000000..227f587a74 --- /dev/null +++ b/layout/reftests/svg/text/simple-selection.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>hello</text> + </g> + <script> + var text = document.getElementsByTagName("text")[0]; + var range = document.createRange(); + range.setStart(text.firstChild, 1); + range.setEnd(text.firstChild, 4); + window.getSelection().addRange(range); + </script> +</svg> diff --git a/layout/reftests/svg/text/simple-transform-rotate-ref.svg b/layout/reftests/svg/text/simple-transform-rotate-ref.svg new file mode 100644 index 0000000000..40439005ad --- /dev/null +++ b/layout/reftests/svg/text/simple-transform-rotate-ref.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <text x="100" y="100" rotate="45" style="font: 32px Ahem">a</text> +</svg> diff --git a/layout/reftests/svg/text/simple-transform-rotate.svg b/layout/reftests/svg/text/simple-transform-rotate.svg new file mode 100644 index 0000000000..18dd8f5479 --- /dev/null +++ b/layout/reftests/svg/text/simple-transform-rotate.svg @@ -0,0 +1,13 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <style> + @font-face { + font-family: Ahem; + src: url(../../fonts/Ahem.ttf); + } + </style> + <text transform="translate(100,100)rotate(45)" style="font: 32px Ahem">a</text> +</svg> diff --git a/layout/reftests/svg/text/simple-underline-ref.html b/layout/reftests/svg/text/simple-underline-ref.html new file mode 100644 index 0000000000..b7a63e6bb5 --- /dev/null +++ b/layout/reftests/svg/text/simple-underline-ref.html @@ -0,0 +1,14 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; text-decoration: underline; margin-left: -700px; vertical-align: 100px } +span { margin-left: 100px; } +</style> +<body> + <svg></svg><div><span>hello</span></div> +</body> diff --git a/layout/reftests/svg/text/simple-underline-scaled-ref.svg b/layout/reftests/svg/text/simple-underline-scaled-ref.svg new file mode 100644 index 0000000000..3c7b0688b7 --- /dev/null +++ b/layout/reftests/svg/text/simple-underline-scaled-ref.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="20" y="100" style="font: 64px sans-serif; text-decoration: underline">Hello</text> +</svg> diff --git a/layout/reftests/svg/text/simple-underline-scaled.svg b/layout/reftests/svg/text/simple-underline-scaled.svg new file mode 100644 index 0000000000..61f808faff --- /dev/null +++ b/layout/reftests/svg/text/simple-underline-scaled.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="10" y="50" style="font: 32px sans-serif; text-decoration: underline" transform="scale(2)">Hello</text> +</svg> diff --git a/layout/reftests/svg/text/simple-underline-selection-ref.html b/layout/reftests/svg/text/simple-underline-selection-ref.html new file mode 100644 index 0000000000..b754ae0e8a --- /dev/null +++ b/layout/reftests/svg/text/simple-underline-selection-ref.html @@ -0,0 +1,21 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<!DOCTYPE html> +<style> +html, body { margin: 0 } +svg, div { display: inline-block; width: 700px; height: 200px } +div { font: 16px sans-serif; text-decoration: underline; margin-left: -700px; vertical-align: 100px } +span { margin-left: 100px; } +</style> +<body> + <svg></svg><div><span>hello</span></div> + <script> + var span = document.getElementsByTagName("span")[0]; + var range = document.createRange(); + range.setStart(span.firstChild, 1); + range.setEnd(span.firstChild, 4); + window.getSelection().addRange(range); + </script> +</body> diff --git a/layout/reftests/svg/text/simple-underline-selection.svg b/layout/reftests/svg/text/simple-underline-selection.svg new file mode 100644 index 0000000000..a4f3e9b480 --- /dev/null +++ b/layout/reftests/svg/text/simple-underline-selection.svg @@ -0,0 +1,16 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif; text-decoration: underline"> + <text>hello</text> + </g> + <script> + var text = document.getElementsByTagName("text")[0]; + var range = document.createRange(); + range.setStart(text.firstChild, 1); + range.setEnd(text.firstChild, 4); + window.getSelection().addRange(range); + </script> +</svg> diff --git a/layout/reftests/svg/text/simple-underline.svg b/layout/reftests/svg/text/simple-underline.svg new file mode 100644 index 0000000000..9143963539 --- /dev/null +++ b/layout/reftests/svg/text/simple-underline.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(100,100)" style="font: 16px sans-serif; text-decoration: underline"> + <text>hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-word-spacing-ref.svg b/layout/reftests/svg/text/simple-word-spacing-ref.svg new file mode 100644 index 0000000000..aec2f9890c --- /dev/null +++ b/layout/reftests/svg/text/simple-word-spacing-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif"> + <text x="100">hello <tspan dx="20">there</tspan></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple-word-spacing.svg b/layout/reftests/svg/text/simple-word-spacing.svg new file mode 100644 index 0000000000..7ad1d5435d --- /dev/null +++ b/layout/reftests/svg/text/simple-word-spacing.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200" viewBox="0 0 700 200"> + <g transform="translate(0,100)" style="font: 16px sans-serif; word-spacing: 20px;"> + <text x="100">hello there</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/simple.svg b/layout/reftests/svg/text/simple.svg new file mode 100644 index 0000000000..228b0755db --- /dev/null +++ b/layout/reftests/svg/text/simple.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="700" height="200"> + <g transform="translate(100,100)" style="font: 16px sans-serif"> + <text>hello</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/text-shadow-ref.svg b/layout/reftests/svg/text/text-shadow-ref.svg new file mode 100644 index 0000000000..0fff19f144 --- /dev/null +++ b/layout/reftests/svg/text/text-shadow-ref.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"> + <text x="33" y="33" fill="grey">Hello</text> + <text x="30" y="30" fill="green">Hello</text> +</svg> diff --git a/layout/reftests/svg/text/text-shadow.svg b/layout/reftests/svg/text/text-shadow.svg new file mode 100644 index 0000000000..35875f51df --- /dev/null +++ b/layout/reftests/svg/text/text-shadow.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="30" y="30" fill="green" style="text-shadow: grey 3px 3px;">Hello</text> +</svg> diff --git a/layout/reftests/svg/text/textLength-2-ref.svg b/layout/reftests/svg/text/textLength-2-ref.svg new file mode 100644 index 0000000000..ac7b10cba9 --- /dev/null +++ b/layout/reftests/svg/text/textLength-2-ref.svg @@ -0,0 +1,40 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { font-family: Linux Libertine; src: url(../../fonts/LinLibertine_Re-4.7.5.woff); } + svg { font: 50px Linux Libertine; text-rendering: geometricPrecision; } + </style> + <!-- the unscaled width of the "123" is 66 --> + <g text-anchor="end" transform="translate(200,0)"> + <g stroke="red"> + <path d="M 0,40 h-66"/> + <path d="M 0,80 h-132"/> + <path d="M 0,120 h-132"/> + <path d="M 0,160 h-44"/> + <path d="M 0,200 h-44"/> + </g> + + <g fill="aqua"> + <text y="40">123</text> + <text x="-132" y="80" text-anchor="start">1</text> + <text x="-66" y="80" text-anchor="middle">2</text> + <text y="80">3</text> + <text transform="scale(2,1)" y="120">123</text> + <text x="-44" y="160" text-anchor="start">1</text> + <text x="-22" y="160" text-anchor="middle">2</text> + <text y="160">3</text> + <text transform="scale(0.6666666666,1)" y="200">123</text> + </g> + + <g fill="none" stroke="black" stroke-width="2px"> + <text y="40">123</text> + <text x="-132" y="80" text-anchor="start">1</text> + <text x="-66" y="80" text-anchor="middle">2</text> + <text y="80">3</text> + <text transform="scale(2,1)" y="120">123</text> + <text x="-44" y="160" text-anchor="start">1</text> + <text x="-22" y="160" text-anchor="middle">2</text> + <text y="160">3</text> + <text transform="scale(0.6666666666,1)" y="200">123</text> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/text/textLength-2.svg b/layout/reftests/svg/text/textLength-2.svg new file mode 100644 index 0000000000..ad66e9fc1e --- /dev/null +++ b/layout/reftests/svg/text/textLength-2.svg @@ -0,0 +1,36 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { font-family: Linux Libertine; src: url(../../fonts/LinLibertine_Re-4.7.5.woff); } + svg { font: 50px Linux Libertine; text-rendering: geometricPrecision; } + </style> + <!-- the unscaled width of the "123" is 66 --> + <g text-anchor="end" transform="translate(200,0)"> + <g stroke="red"> + <path d="M 0,40 h-66"/> + <path d="M 0,80 h-132"/> + <path d="M 0,120 h-132"/> + <path d="M 0,160 h-44"/> + <path d="M 0,200 h-44"/> + </g> + + <g fill="aqua"> + <text y="40">123</text> + <text y="80" textLength="132">123</text> + <text y="120" textLength="132" lengthAdjust="spacingAndGlyphs">123</text> + <text y="160" textLength="44">123</text> + <text y="200" textLength="44" lengthAdjust="spacingAndGlyphs">123</text> + </g> + + <g fill="none" stroke="black" stroke-width="2px"> + <text y="40">123</text> + <text x="-132" y="80" text-anchor="start">1</text> + <text x="-66" y="80" text-anchor="middle">2</text> + <text y="80">3</text> + <text transform="scale(2,1)" y="120">123</text> + <text x="-44" y="160" text-anchor="start">1</text> + <text x="-22" y="160" text-anchor="middle">2</text> + <text y="160">3</text> + <text transform="scale(0.6666666666,1)" y="200">123</text> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/text/textLength-3-ref.svg b/layout/reftests/svg/text/textLength-3-ref.svg new file mode 100644 index 0000000000..a36feab1d9 --- /dev/null +++ b/layout/reftests/svg/text/textLength-3-ref.svg @@ -0,0 +1,43 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { font-family: Linux Libertine; src: url(../../fonts/LinLibertine_Re-4.7.5.woff); } + svg { font: 50px Linux Libertine; text-rendering: geometricPrecision; } + </style> + <linearGradient id="aqua"> + <stop stop-color="aqua"/> + </linearGradient> + <!-- the unscaled width of the "123" is 66 --> + <g transform="translate(50,0)"> + <g stroke="red"> + <path id="p1" d="M 0,40 v 66" stroke="red"/> + <path id="p2" d="M 40,40 v 132" stroke="red"/> + <path id="p3" d="M 80,40 v 132" stroke="red"/> + <path id="p4" d="M 120,40 v 44" stroke="red"/> + <path id="p5" d="M 160,40 v 44" stroke="red"/> + </g> + + <g fill="url(#aqua)"> + <text transform="translate(40,40)rotate(90)" y="40">123</text> + <text transform="translate(80,40)rotate(90)" y="40">1</text> + <text transform="translate(80,40)rotate(90)" x="66" y="40" text-anchor="middle">2</text> + <text transform="translate(80,40)rotate(90)" x="132" y="40" text-anchor="end">3</text> + <text transform="translate(80,40)rotate(90)scale(2,1)">123</text> + <text transform="translate(120,40)rotate(90)">1</text> + <text transform="translate(120,40)rotate(90)" x="22" text-anchor="middle">2</text> + <text transform="translate(120,40)rotate(90)" x="44" text-anchor="end">3</text> + <text transform="translate(160,40)rotate(90)scale(0.66666666,1)">123</text> + </g> + + <g fill="none" stroke="black" stroke-width="2px"> + <text transform="translate(40,40)rotate(90)" y="40">123</text> + <text transform="translate(80,40)rotate(90)" y="40">1</text> + <text transform="translate(80,40)rotate(90)" x="66" y="40" text-anchor="middle">2</text> + <text transform="translate(80,40)rotate(90)" x="132" y="40" text-anchor="end">3</text> + <text transform="translate(80,40)rotate(90)scale(2,1)">123</text> + <text transform="translate(120,40)rotate(90)">1</text> + <text transform="translate(120,40)rotate(90)" x="22" text-anchor="middle">2</text> + <text transform="translate(120,40)rotate(90)" x="44" text-anchor="end">3</text> + <text transform="translate(160,40)rotate(90)scale(0.66666666,1)">123</text> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/text/textLength-3.svg b/layout/reftests/svg/text/textLength-3.svg new file mode 100644 index 0000000000..b3b8d93da6 --- /dev/null +++ b/layout/reftests/svg/text/textLength-3.svg @@ -0,0 +1,40 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <style> + @font-face { font-family: Linux Libertine; src: url(../../fonts/LinLibertine_Re-4.7.5.woff); } + svg { font: 50px Linux Libertine; text-rendering: geometricPrecision; } + </style> + <linearGradient id="aqua"> + <stop stop-color="aqua"/> + </linearGradient> + <!-- the unscaled width of the "123" is 66 --> + <g transform="translate(50,0)"> + <g stroke="red"> + <path id="p1" d="M 0,40 v 66"/> + <path id="p2" d="M 40,40 v 132"/> + <path id="p3" d="M 80,40 v 132"/> + <path id="p4" d="M 120,40 v 44"/> + <path id="p5" d="M 160,40 v 44"/> + </g> + + <g fill="url(#aqua)"> + <text><textPath xlink:href="#p1">123</textPath></text> + <text textLength="132"><textPath xlink:href="#p2">123</textPath></text> + <text id="t" textLength="132" lengthAdjust="spacingAndGlyphs"><textPath xlink:href="#p3">123</textPath></text> + <text textLength="44"><textPath xlink:href="#p4">123</textPath></text> + <text textLength="44" lengthAdjust="spacingAndGlyphs"><textPath xlink:href="#p5">123</textPath></text> + </g> + + <g fill="none" stroke="black" stroke-width="2px"> + <text transform="translate(40,40)rotate(90)" y="40">123</text> + <text transform="translate(80,40)rotate(90)" y="40">1</text> + <text transform="translate(80,40)rotate(90)" x="66" y="40" text-anchor="middle">2</text> + <text transform="translate(80,40)rotate(90)" x="132" y="40" text-anchor="end">3</text> + <text transform="translate(80,40)rotate(90)scale(2,1)">123</text> + <text transform="translate(120,40)rotate(90)">1</text> + <text transform="translate(120,40)rotate(90)" x="22" text-anchor="middle">2</text> + <text transform="translate(120,40)rotate(90)" x="44" text-anchor="end">3</text> + <text transform="translate(160,40)rotate(90)scale(0.66666666,1)">123</text> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/text/textLength-4-ref.svg b/layout/reftests/svg/text/textLength-4-ref.svg new file mode 100644 index 0000000000..1a7153b323 --- /dev/null +++ b/layout/reftests/svg/text/textLength-4-ref.svg @@ -0,0 +1,28 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { + font-family: Linux Libertine; + src: url(../../fonts/LinLibertine_Re-4.7.5.woff); + } + </style> + <!-- the unscaled width of the "123" is 66 --> + <linearGradient id="g1" x1="0" y1="0" x2="66" y2="0" gradientUnits="userSpaceOnUse"> + <stop stop-color="red"/> + <stop offset="0.333333" stop-color="red"/> + <stop offset="0.333333" stop-color="yellow"/> + <stop offset="0.666666" stop-color="yellow"/> + <stop offset="0.666666" stop-color="red"/> + <stop offset="1" stop-color="red"/> + </linearGradient> + <linearGradient id="g2" x1="100" y1="0" x2="232" y2="0" gradientUnits="userSpaceOnUse"> + <stop stop-color="red"/> + <stop offset="0.333333" stop-color="red"/> + <stop offset="0.333333" stop-color="yellow"/> + <stop offset="0.666666" stop-color="yellow"/> + <stop offset="0.666666" stop-color="red"/> + <stop offset="1" stop-color="red"/> + </linearGradient> + <text transform="scale(2,1)translate(50,0)" y="100" style="font: 50px Linux Libertine; text-rendering: geometricPrecision; fill: url(#g1)">123</text> + <text transform="scale(2,1)translate(50,0)" y="100" style="font: 50px Linux Libertine; text-rendering: geometricPrecision; fill: none; stroke: black; stroke-width: 2px">123</text> + <rect x="100" y="110" width="132" height="10" fill="url(#g2)"/> +</svg> diff --git a/layout/reftests/svg/text/textLength-4.svg b/layout/reftests/svg/text/textLength-4.svg new file mode 100644 index 0000000000..d346304712 --- /dev/null +++ b/layout/reftests/svg/text/textLength-4.svg @@ -0,0 +1,20 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { + font-family: Linux Libertine; + src: url(../../fonts/LinLibertine_Re-4.7.5.woff); + } + </style> + <!-- the unscaled width of the "123" is 66 --> + <linearGradient id="g" x1="100" y1="0" x2="232" y2="0" gradientUnits="userSpaceOnUse"> + <stop stop-color="red"/> + <stop offset="0.333333" stop-color="red"/> + <stop offset="0.333333" stop-color="yellow"/> + <stop offset="0.666666" stop-color="yellow"/> + <stop offset="0.666666" stop-color="red"/> + <stop offset="1" stop-color="red"/> + </linearGradient> + <text x="100" y="100" style="font: 50px Linux Libertine; text-rendering: geometricPrecision" textLength="132" lengthAdjust="spacingAndGlyphs" fill="url(#g)">123</text> + <text transform="scale(2,1)translate(50,0)" y="100" style="font: 50px Linux Libertine; text-rendering: geometricPrecision; fill: none; stroke: black; stroke-width: 2px">123</text> + <rect x="100" y="110" width="132" height="10" fill="url(#g)"/> +</svg> diff --git a/layout/reftests/svg/text/textLength-5-ref.svg b/layout/reftests/svg/text/textLength-5-ref.svg new file mode 100644 index 0000000000..2c6e7c2a43 --- /dev/null +++ b/layout/reftests/svg/text/textLength-5-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="100" y="100" style="font: 32px sans-serif" textLength="50" lengthAdjust="spacingAndGlyphs">hello</text> + <text x="100" y="140" style="font: 32px sans-serif" textLength="50" lengthAdjust="spacingAndGlyphs">hello</text> +</svg> diff --git a/layout/reftests/svg/text/textLength-5.svg b/layout/reftests/svg/text/textLength-5.svg new file mode 100644 index 0000000000..52e2fc3a30 --- /dev/null +++ b/layout/reftests/svg/text/textLength-5.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="100" y="100" style="font: 32px sans-serif" textLength="100" lengthAdjust="spacingAndGlyphs">hello<tspan x="100" y="140">hello</tspan></text> +</svg> diff --git a/layout/reftests/svg/text/textLength-6-ref.svg b/layout/reftests/svg/text/textLength-6-ref.svg new file mode 100644 index 0000000000..2c6e7c2a43 --- /dev/null +++ b/layout/reftests/svg/text/textLength-6-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="100" y="100" style="font: 32px sans-serif" textLength="50" lengthAdjust="spacingAndGlyphs">hello</text> + <text x="100" y="140" style="font: 32px sans-serif" textLength="50" lengthAdjust="spacingAndGlyphs">hello</text> +</svg> diff --git a/layout/reftests/svg/text/textLength-6.svg b/layout/reftests/svg/text/textLength-6.svg new file mode 100644 index 0000000000..587124f712 --- /dev/null +++ b/layout/reftests/svg/text/textLength-6.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="100" y="100" style="font: 32px sans-serif">hello<tspan x="100" y="140">hello</tspan> + <animate attributeName="textLength" begin="-100s" dur="200s" values="50; 100; 100; 150"/> + <set attributeName="lengthAdjust" to="spacingAndGlyphs"/></text> +</svg> diff --git a/layout/reftests/svg/text/textLength-ref.svg b/layout/reftests/svg/text/textLength-ref.svg new file mode 100644 index 0000000000..bcdb21f4c7 --- /dev/null +++ b/layout/reftests/svg/text/textLength-ref.svg @@ -0,0 +1,40 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { font-family: Linux Libertine; src: url(../../fonts/LinLibertine_Re-4.7.5.woff); } + svg { font: 50px Linux Libertine; text-rendering: geometricPrecision; } + </style> + <!-- the unscaled width of the "123" is 66 --> + <g transform="translate(50,0)"> + <g stroke="red"> + <path d="M 0,40 h 66"/> + <path d="M 0,80 h 132"/> + <path d="M 0,120 h 132"/> + <path d="M 0,160 h 44"/> + <path d="M 0,200 h 44"/> + </g> + + <g fill="aqua"> + <text y="40">123</text> + <text y="80">1</text> + <text x="66" y="80" text-anchor="middle">2</text> + <text x="132" y="80" text-anchor="end">3</text> + <text transform="scale(2,1)" y="120">123</text> + <text y="160">1</text> + <text x="22" y="160" text-anchor="middle">2</text> + <text x="44" y="160" text-anchor="end">3</text> + <text transform="scale(0.6666666666,1)" y="200">123</text> + </g> + + <g fill="none" stroke="black" stroke-width="2px"> + <text y="40">123</text> + <text y="80">1</text> + <text x="66" y="80" text-anchor="middle">2</text> + <text x="132" y="80" text-anchor="end">3</text> + <text transform="scale(2,1)" y="120">123</text> + <text y="160">1</text> + <text x="22" y="160" text-anchor="middle">2</text> + <text x="44" y="160" text-anchor="end">3</text> + <text transform="scale(0.6666666666,1)" y="200">123</text> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/text/textLength.svg b/layout/reftests/svg/text/textLength.svg new file mode 100644 index 0000000000..93dd2e61fb --- /dev/null +++ b/layout/reftests/svg/text/textLength.svg @@ -0,0 +1,36 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <style> + @font-face { font-family: Linux Libertine; src: url(../../fonts/LinLibertine_Re-4.7.5.woff); } + svg { font: 50px Linux Libertine; text-rendering: geometricPrecision; } + </style> + <!-- the unscaled width of the "123" is 66 --> + <g transform="translate(50,0)"> + <g stroke="red"> + <path d="M 0,40 h 66"/> + <path d="M 0,80 h 132"/> + <path d="M 0,120 h 132"/> + <path d="M 0,160 h 44"/> + <path d="M 0,200 h 44"/> + </g> + + <g fill="aqua"> + <text y="40">123</text> + <text y="80" textLength="132">123</text> + <text y="120" textLength="132" lengthAdjust="spacingAndGlyphs">123</text> + <text y="160" textLength="44">123</text> + <text y="200" textLength="44" lengthAdjust="spacingAndGlyphs">123</text> + </g> + + <g fill="none" stroke="black" stroke-width="2px"> + <text y="40">123</text> + <text y="80">1</text> + <text x="66" y="80" text-anchor="middle">2</text> + <text x="132" y="80" text-anchor="end">3</text> + <text transform="scale(2,1)" y="120">123</text> + <text y="160">1</text> + <text x="22" y="160" text-anchor="middle">2</text> + <text x="44" y="160" text-anchor="end">3</text> + <text transform="scale(0.6666666666,1)" y="200">123</text> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/text/textpath-a-ref.svg b/layout/reftests/svg/text/textpath-a-ref.svg new file mode 100644 index 0000000000..50de8ee340 --- /dev/null +++ b/layout/reftests/svg/text/textpath-a-ref.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" xmlns:xlink="http://www.w3.org/1999/xlink" style="font: 16px sans-serif"> + <path id="p" d="M 100,100 h 100"/> + <text><textPath xlink:href="#p">hello</textPath></text> +</svg> diff --git a/layout/reftests/svg/text/textpath-a.svg b/layout/reftests/svg/text/textpath-a.svg new file mode 100644 index 0000000000..639f47db44 --- /dev/null +++ b/layout/reftests/svg/text/textpath-a.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" xmlns:xlink="http://www.w3.org/1999/xlink" style="font: 16px sans-serif"> + <path id="p" d="M 100,100 h 100"/> + <text><a><textPath xlink:href="#p">hello</textPath></a></text> +</svg> diff --git a/layout/reftests/svg/text/textpath-after-anchor-end-ref.svg b/layout/reftests/svg/text/textpath-after-anchor-end-ref.svg new file mode 100644 index 0000000000..5b32f54610 --- /dev/null +++ b/layout/reftests/svg/text/textpath-after-anchor-end-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g transform="translate(150,50)" style="font: 32px sans-serif"> + <path id="p" d="M 100,100 l 100,100"/> + <text text-anchor="end"><textPath xlink:href="#p" startOffset="100%">hello</textPath><tspan y="0">there</tspan></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/textpath-after-anchor-end.svg b/layout/reftests/svg/text/textpath-after-anchor-end.svg new file mode 100644 index 0000000000..4a8a19b087 --- /dev/null +++ b/layout/reftests/svg/text/textpath-after-anchor-end.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g transform="translate(150,50)" style="font: 32px sans-serif"> + <path id="p" d="M 100,100 l 100,100"/> + <text text-anchor="end"><textPath xlink:href="#p" startOffset="100%">hello</textPath>there</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/textpath-after-ref.svg b/layout/reftests/svg/text/textpath-after-ref.svg new file mode 100644 index 0000000000..c90ae4fccd --- /dev/null +++ b/layout/reftests/svg/text/textpath-after-ref.svg @@ -0,0 +1,11 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g transform="translate(50,50)" style="font: 32px sans-serif"> + <path id="p" d="M 100,100 l 100,100"/> + <text><textPath xlink:href="#p">hello</textPath></text> + <text><tspan visibility="hidden">hello</tspan>there</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/textpath-after.svg b/layout/reftests/svg/text/textpath-after.svg new file mode 100644 index 0000000000..b250e833e9 --- /dev/null +++ b/layout/reftests/svg/text/textpath-after.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g transform="translate(50,50)" style="font: 32px sans-serif"> + <path id="p" d="M 100,100 l 100,100"/> + <text><textPath xlink:href="#p">hello</textPath>there</text> + </g> +</svg> diff --git a/layout/reftests/svg/text/textpath-anchor-end-ref.svg b/layout/reftests/svg/text/textpath-anchor-end-ref.svg new file mode 100644 index 0000000000..27d80ae053 --- /dev/null +++ b/layout/reftests/svg/text/textpath-anchor-end-ref.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"> + <path id="p" d="M 0,100 h 200"/> + <text x="200" y="100" text-anchor="end" style="font: 16px sans-serif">hello</text> +</svg> diff --git a/layout/reftests/svg/text/textpath-anchor-end.svg b/layout/reftests/svg/text/textpath-anchor-end.svg new file mode 100644 index 0000000000..f77549ab7f --- /dev/null +++ b/layout/reftests/svg/text/textpath-anchor-end.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" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path id="p" d="M 0,100 h 200"/> + <text text-anchor="end" style="font: 16px sans-serif"><textPath xlink:href="#p" startOffset="100%">hello</textPath></text> +</svg> diff --git a/layout/reftests/svg/text/textpath-anchor-middle-ref.svg b/layout/reftests/svg/text/textpath-anchor-middle-ref.svg new file mode 100644 index 0000000000..dfa19bc42b --- /dev/null +++ b/layout/reftests/svg/text/textpath-anchor-middle-ref.svg @@ -0,0 +1,7 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="100" y="100" text-anchor="middle" style="font: 16px sans-serif">ABCDE</text> +</svg> diff --git a/layout/reftests/svg/text/textpath-anchor-middle.svg b/layout/reftests/svg/text/textpath-anchor-middle.svg new file mode 100644 index 0000000000..8f7b347e25 --- /dev/null +++ b/layout/reftests/svg/text/textpath-anchor-middle.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" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path id="p" d="M 0,100 h 200"/> + <text text-anchor="middle" style="font: 16px sans-serif"><textPath xlink:href="#p" startOffset="50%">ABCDE</textPath></text> +</svg> diff --git a/layout/reftests/svg/text/textpath-cluster-2-ref.svg b/layout/reftests/svg/text/textpath-cluster-2-ref.svg new file mode 100644 index 0000000000..7a16f55d14 --- /dev/null +++ b/layout/reftests/svg/text/textpath-cluster-2-ref.svg @@ -0,0 +1,8 @@ +<svg height="250" width="250" xmlns="http://www.w3.org/2000/svg"> + <defs> + <path id="path" d="M 10 50 H 200" /> + </defs> + <text font-size="36"> + <textPath href="#path">abcd</textPath> + </text> +</svg> diff --git a/layout/reftests/svg/text/textpath-cluster-2.svg b/layout/reftests/svg/text/textpath-cluster-2.svg new file mode 100644 index 0000000000..925f2d7c2f --- /dev/null +++ b/layout/reftests/svg/text/textpath-cluster-2.svg @@ -0,0 +1,9 @@ +<svg height="250" width="250" xmlns="http://www.w3.org/2000/svg"> + <defs> + <path id="path" d="M 10 50 H 200" /> + </defs> + <text font-size="36"> + <!-- Next line ends with whitespace. Do not change it --> + <textPath href="#path">abcd</textPath> + </text> +</svg> diff --git a/layout/reftests/svg/text/textpath-cluster-ref.svg b/layout/reftests/svg/text/textpath-cluster-ref.svg new file mode 100644 index 0000000000..f88983c23b --- /dev/null +++ b/layout/reftests/svg/text/textpath-cluster-ref.svg @@ -0,0 +1,12 @@ +<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" > + <defs> + <path id="path" d="M 100 200 C 200 100 300 0 400 100" /> + <style> + text { + font: 40px monospace; + } + </style> + </defs> + + <text transform="translate(0, 40)">a <textPath href="#path">b </textPath>c</text> +</svg> diff --git a/layout/reftests/svg/text/textpath-cluster.svg b/layout/reftests/svg/text/textpath-cluster.svg new file mode 100644 index 0000000000..7861eb5c2b --- /dev/null +++ b/layout/reftests/svg/text/textpath-cluster.svg @@ -0,0 +1,12 @@ +<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" > + <defs> + <path id="path" d="M 100 200 C 200 100 300 0 400 100" /> + <style> + text { + font: 40px monospace; + } + </style> + </defs> + + <text transform="translate(0, 40)">a <textPath href="#path">b </textPath> c</text> +</svg> diff --git a/layout/reftests/svg/text/textpath-inherit-position-ref.svg b/layout/reftests/svg/text/textpath-inherit-position-ref.svg new file mode 100644 index 0000000000..305330b171 --- /dev/null +++ b/layout/reftests/svg/text/textpath-inherit-position-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g transform="translate(150,50)" style="font: 32px sans-serif"> + <path id="p" d="M 100,100 l 100,100"/> + <text x="0 20 40 60 80">hello <textPath xlink:href="#p"><tspan x="50">there</tspan></textPath></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/textpath-inherit-position.svg b/layout/reftests/svg/text/textpath-inherit-position.svg new file mode 100644 index 0000000000..d728c3c8e1 --- /dev/null +++ b/layout/reftests/svg/text/textpath-inherit-position.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g transform="translate(150,50)" style="font: 32px sans-serif"> + <path id="p" d="M 100,100 l 100,100"/> + <text x="0 20 40 60 80 100 50" y="0 0 0 0 0 0 200">hello <textPath xlink:href="#p">there</textPath></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/textpath-invalid-parent-ref.svg b/layout/reftests/svg/text/textpath-invalid-parent-ref.svg new file mode 100644 index 0000000000..ecb9af043c --- /dev/null +++ b/layout/reftests/svg/text/textpath-invalid-parent-ref.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" xmlns:xlink="http://www.w3.org/1999/xlink" style="font: 16px sans-serif"> + <path id="p" d="M 100,100 h 100"/> + <text x="50" y="100">hello<tspan><textPath xlink:href="#p"> or not</textPath></tspan></text> +</svg> diff --git a/layout/reftests/svg/text/textpath-invalid-parent.svg b/layout/reftests/svg/text/textpath-invalid-parent.svg new file mode 100644 index 0000000000..ecb9af043c --- /dev/null +++ b/layout/reftests/svg/text/textpath-invalid-parent.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" xmlns:xlink="http://www.w3.org/1999/xlink" style="font: 16px sans-serif"> + <path id="p" d="M 100,100 h 100"/> + <text x="50" y="100">hello<tspan><textPath xlink:href="#p"> or not</textPath></tspan></text> +</svg> diff --git a/layout/reftests/svg/text/textpath-multiline-2-ref.svg b/layout/reftests/svg/text/textpath-multiline-2-ref.svg new file mode 100644 index 0000000000..8bd2b7cb3c --- /dev/null +++ b/layout/reftests/svg/text/textpath-multiline-2-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path id="p" d="M 50,200 C 50,100 300,100 300,200" fill="none"/> + <text style="font: 24px/30px sans-serif; text-anchor: middle"> + <textPath xlink:href="#p" startOffset="50%"> + <tspan x="0" y="0">hello</tspan><tspan x="0" y="30">hello</tspan><tspan x="0" y="60">hello</tspan> + </textPath> + </text> +</svg> diff --git a/layout/reftests/svg/text/textpath-multiline-2.svg b/layout/reftests/svg/text/textpath-multiline-2.svg new file mode 100644 index 0000000000..363cf8be5b --- /dev/null +++ b/layout/reftests/svg/text/textpath-multiline-2.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path id="p" d="M 50,200 C 50,100 300,100 300,200" fill="none"/> + <text style="white-space: pre-line; font: 24px/30px sans-serif; text-anchor: middle"> + <textPath xlink:href="#p" startOffset="50%">hello +hello +hello</textPath> + </text> +</svg> diff --git a/layout/reftests/svg/text/textpath-multiline-ref.svg b/layout/reftests/svg/text/textpath-multiline-ref.svg new file mode 100644 index 0000000000..d6d0ed7bbc --- /dev/null +++ b/layout/reftests/svg/text/textpath-multiline-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <text x="100" y="100" style="line-height: 20px; white-space: pre-line; font: 16px sans-serif">line 1 +line 2 +line 3</text> +</svg> diff --git a/layout/reftests/svg/text/textpath-multiline.svg b/layout/reftests/svg/text/textpath-multiline.svg new file mode 100644 index 0000000000..06f5ec3796 --- /dev/null +++ b/layout/reftests/svg/text/textpath-multiline.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path id="p" d="M 100,100 h 400"/> + <text style="white-space: pre-line; line-height: 20px; font: 16px sans-serif"> + <textPath xlink:href="#p">line 1 +line 2 +line 3</textPath> + </text> +</svg> diff --git a/layout/reftests/svg/text/textpath-multiple.svg b/layout/reftests/svg/text/textpath-multiple.svg new file mode 100644 index 0000000000..417084c455 --- /dev/null +++ b/layout/reftests/svg/text/textpath-multiple.svg @@ -0,0 +1,13 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> + <defs> + <path id="path1" d="M100,100 H300"/> + <path id="path2" d="M200,100 H300"/> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <g font-size="50px"> + <text fill="red"><textPath href="#path1">Text</textPath> <textPath href="#path2">Text</textPath></text> + <text fill="lime" stroke="lime" stroke-width="4px"><textPath href="#path1">Text</textPath><textPath href="#path2">Text</textPath></text> + </g> +</svg> + + diff --git a/layout/reftests/svg/text/textpath-ref.svg b/layout/reftests/svg/text/textpath-ref.svg new file mode 100644 index 0000000000..5bd8d5b9dc --- /dev/null +++ b/layout/reftests/svg/text/textpath-ref.svg @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path id="p" d="M 100,100 h 50 v 200" fill="none" stroke="red" stroke-width="1"/> + <g style="font: 30px monospace"> + <text x="100" y="100">a</text> + </g> + <script><![CDATA[ + function put(s, x, y, r) { + var e = document.createElementNS("http://www.w3.org/2000/svg", "text"); + e.setAttribute("x", x); + e.setAttribute("y", y); + e.setAttribute("rotate", r); + e.textContent = s; + g.appendChild(e); + } + + var s = "a.b.c.d.e."; + var text = document.getElementsByTagName("text")[0]; + var g = text.parentNode; + var adv = text.getSubStringLength(0, 1); + for (var i = 1; i < s.length; i++) { + var x = i * adv; + if (x + adv / 2 < 50) { + put(s[i], 100 + x, 100, 0); + } else { + put(s[i], 150, 50 + x, 90); + } + } + ]]></script> +</svg> diff --git a/layout/reftests/svg/text/textpath-reset-position-ref.svg b/layout/reftests/svg/text/textpath-reset-position-ref.svg new file mode 100644 index 0000000000..6dce784958 --- /dev/null +++ b/layout/reftests/svg/text/textpath-reset-position-ref.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g transform="translate(150,50)" style="font: 32px sans-serif"> + <path id="p" d="M 100,100 l 100,100"/> + <text x="50">hello <textPath xlink:href="#p"><tspan x="0">there</tspan></textPath></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/textpath-reset-position.svg b/layout/reftests/svg/text/textpath-reset-position.svg new file mode 100644 index 0000000000..2d2181a14e --- /dev/null +++ b/layout/reftests/svg/text/textpath-reset-position.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <g transform="translate(150,50)" style="font: 32px sans-serif"> + <path id="p" d="M 100,100 l 100,100"/> + <text x="50">hello <textPath xlink:href="#p">there</textPath></text> + </g> +</svg> diff --git a/layout/reftests/svg/text/textpath-selection-ref.svg b/layout/reftests/svg/text/textpath-selection-ref.svg new file mode 100644 index 0000000000..4d06ad0217 --- /dev/null +++ b/layout/reftests/svg/text/textpath-selection-ref.svg @@ -0,0 +1,39 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path id="p" d="M 100,100 h 50 v 200" fill="none" stroke="red" stroke-width="1"/> + <g style="font: 30px monospace"> + <text x="100" y="100">a</text> + </g> + <script><![CDATA[ + function put(s, x, y, r) { + var e = document.createElementNS("http://www.w3.org/2000/svg", "text"); + e.setAttribute("x", x); + e.setAttribute("y", y); + e.setAttribute("rotate", r); + e.textContent = s; + g.appendChild(e); + } + + var s = "a.b.c.d.e."; + var text = document.getElementsByTagName("text")[0]; + var g = text.parentNode; + var adv = text.getSubStringLength(0, 1); + for (var i = 1; i < s.length; i++) { + var x = i * adv; + if (x + adv / 2 < 50) { + put(s[i], 100 + x, 100, 0); + } else { + put(s[i], 150, 50 + x, 90); + } + } + + var lastText = document.getElementsByTagName("text")[s.length - 1]; + var range = document.createRange(); + range.setStart(text.firstChild, 1); + range.setEnd(lastText.firstChild, 0); + window.getSelection().addRange(range); + ]]></script> +</svg> diff --git a/layout/reftests/svg/text/textpath-selection.svg b/layout/reftests/svg/text/textpath-selection.svg new file mode 100644 index 0000000000..6e98a9d845 --- /dev/null +++ b/layout/reftests/svg/text/textpath-selection.svg @@ -0,0 +1,15 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path id="p" d="M 100,100 h 50 v 200" fill="none" stroke="red" stroke-width="1"/> + <text style="font: 30px monospace"><textPath xlink:href="#p">a.b.c.d.e.</textPath></text> + <script> + var textPath = document.getElementsByTagName("textPath")[0]; + var range = document.createRange(); + range.setStart(textPath.firstChild, 1); + range.setEnd(textPath.firstChild, 9); + window.getSelection().addRange(range); + </script> +</svg> diff --git a/layout/reftests/svg/text/textpath-vertical-dx-ref.svg b/layout/reftests/svg/text/textpath-vertical-dx-ref.svg new file mode 100644 index 0000000000..e73812b61e --- /dev/null +++ b/layout/reftests/svg/text/textpath-vertical-dx-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <style> + path { stroke: red; } + text { writing-mode: vertical-rl; font: 24px sans-serif; } + </style> + <path id="p" d="M 40,40 v 150"/> + <text transform="translate(16, 0)"><textPath xlink:href="#p">中国 China</textPath></text> +</svg> diff --git a/layout/reftests/svg/text/textpath-vertical-dx.svg b/layout/reftests/svg/text/textpath-vertical-dx.svg new file mode 100644 index 0000000000..92657cd3c2 --- /dev/null +++ b/layout/reftests/svg/text/textpath-vertical-dx.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <style> + path { stroke: red; } + text { writing-mode: vertical-rl; font: 24px sans-serif; } + </style> + <path id="p" d="M 40,40 v 150"/> + <text dx="16"><textPath xlink:href="#p">中国 China</textPath></text> +</svg> diff --git a/layout/reftests/svg/text/textpath-vertical-x-ref.svg b/layout/reftests/svg/text/textpath-vertical-x-ref.svg new file mode 100644 index 0000000000..aeb00c2bb9 --- /dev/null +++ b/layout/reftests/svg/text/textpath-vertical-x-ref.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <style> + path { stroke: red; } + text { writing-mode: vertical-rl; font: 24px sans-serif; } + </style> + <path id="p" d="M 40,40 v 150"/> + <text><textPath xlink:href="#p">中国 China</textPath></text> +</svg> diff --git a/layout/reftests/svg/text/textpath-vertical-x.svg b/layout/reftests/svg/text/textpath-vertical-x.svg new file mode 100644 index 0000000000..c94a6739b1 --- /dev/null +++ b/layout/reftests/svg/text/textpath-vertical-x.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <style> + path { stroke: red; } + text { writing-mode: vertical-rl; font: 24px sans-serif; } + </style> + <path id="p" d="M 40,40 v 150"/> + <text x="16"><textPath xlink:href="#p">中国 China</textPath></text> +</svg> diff --git a/layout/reftests/svg/text/textpath.svg b/layout/reftests/svg/text/textpath.svg new file mode 100644 index 0000000000..cba2085c9f --- /dev/null +++ b/layout/reftests/svg/text/textpath.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" xmlns:xlink="http://www.w3.org/1999/xlink"> + <path id="p" d="M 100,100 h 50 v 200" fill="none" stroke="red" stroke-width="1"/> + <text style="font: 30px monospace"><textPath xlink:href="#p">a.b.c.d.e.</textPath></text> +</svg> diff --git a/layout/reftests/svg/text/tspan-shaping-ref.svg b/layout/reftests/svg/text/tspan-shaping-ref.svg new file mode 100644 index 0000000000..2f10e32dda --- /dev/null +++ b/layout/reftests/svg/text/tspan-shaping-ref.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"> + <!-- any font with an "fi" ligature will do, try a few likely names: --> + <text x="0" y="50" style="font: 50px Calibri, DejaVu Serif, FreeSerif, Times, serif"> + <tspan x="20" dy="0">off</tspan> + <tspan x="20" dy="50">ice</tspan> + </text> +</svg> diff --git a/layout/reftests/svg/text/tspan-shaping.svg b/layout/reftests/svg/text/tspan-shaping.svg new file mode 100644 index 0000000000..3a81bc2da0 --- /dev/null +++ b/layout/reftests/svg/text/tspan-shaping.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"> + <!-- any font with an "fi" ligature will do, try a few likely names: --> + <text x="0" y="50" style="font: 50px Calibri, DejaVu Serif, FreeSerif, Times, serif"> + <tspan x="20" dy="0">off</tspan><tspan x="20" dy="50">ice</tspan> + </text> +</svg> diff --git a/layout/reftests/svg/text/vertical-01-ref.svg b/layout/reftests/svg/text/vertical-01-ref.svg new file mode 100644 index 0000000000..31989c4265 --- /dev/null +++ b/layout/reftests/svg/text/vertical-01-ref.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <path id="path" d="M 100, 100 v 200" /> + </defs> + <text style="font: 48px sans-serif" text-rendering="geometricPrecision"> + <textPath xlink:href="#path">A B C</textPath> + </text> +</svg> diff --git a/layout/reftests/svg/text/vertical-01.svg b/layout/reftests/svg/text/vertical-01.svg new file mode 100644 index 0000000000..a5fe02af0a --- /dev/null +++ b/layout/reftests/svg/text/vertical-01.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <text x="100" y="100" text-rendering="geometricPrecision" + writing-mode="vertical-rl" style="text-orientation: sideways-right;font: 48px sans-serif"> + A B C + </text> +</svg> diff --git a/layout/reftests/svg/textPath-01-ref.svg b/layout/reftests/svg/textPath-01-ref.svg new file mode 100644 index 0000000000..711e0fe5aa --- /dev/null +++ b/layout/reftests/svg/textPath-01-ref.svg @@ -0,0 +1,16 @@ +<!-- + 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" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference to check that percentage startOffset ignores pathLength</title> + + <defs> + <path id="x" d="M 0 100 h 400"/> + </defs> + + <text> + <textPath xlink:href="#x" font-size="20" fill="black" startOffset="50%">Should see this</textPath> + </text> + +</svg> diff --git a/layout/reftests/svg/textPath-01.svg b/layout/reftests/svg/textPath-01.svg new file mode 100644 index 0000000000..6543044e67 --- /dev/null +++ b/layout/reftests/svg/textPath-01.svg @@ -0,0 +1,16 @@ +<!-- + 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" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase to check that percentage startOffset ignores pathLength</title> + + <defs> + <path id="x" pathLength="20" d="M 0 100 h 400"/> + </defs> + + <text> + <textPath xlink:href="#x" font-size="20" fill="black" startOffset="50%">Should see this</textPath> + </text> + +</svg> diff --git a/layout/reftests/svg/textPath-02.svg b/layout/reftests/svg/textPath-02.svg new file mode 100644 index 0000000000..c24422a2ad --- /dev/null +++ b/layout/reftests/svg/textPath-02.svg @@ -0,0 +1,15 @@ +<!-- + 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" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test effect on startOffset of a scale transform on a textPath's path</title> + <defs> + <path id="path" d="M20,20 C20,150 150,150 150,20" pathLength="100" transform="scale(2,1)" fill="none" stroke="black"/> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <text y="50"> + <textPath xlink:href="#path" font-size="20" fill="red" startOffset="50">FAIL</textPath> + </text> + <rect x="160" y="80" width="100" height="60" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/textPath-03.svg b/layout/reftests/svg/textPath-03.svg new file mode 100644 index 0000000000..e4c224efc7 --- /dev/null +++ b/layout/reftests/svg/textPath-03.svg @@ -0,0 +1,18 @@ +<!-- + 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" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test effect on startOffset in em units</title> + + <defs> + <path id="p" d="M100,100 h200" stroke="red"/> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + + <text font-size="50" fill="red"> + <textPath xlink:href="#p" startOffset="2em">abc</textPath> + </text> + <text x="100" y="100" dx="2em" font-size="50" stroke-width="4" fill="lime" stroke="lime">abc</text> +</svg> diff --git a/layout/reftests/svg/textPath-04.svg b/layout/reftests/svg/textPath-04.svg new file mode 100644 index 0000000000..fe487bd19d --- /dev/null +++ b/layout/reftests/svg/textPath-04.svg @@ -0,0 +1,28 @@ +<!-- + 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" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test effect on display:none on path</title> + + <defs> +<!-- + <path id="p" display="none" d="M100,100 h200"/> +--> + <path id="p" d="M100,100 h200"/> + </defs> + + <rect width="100%" height="100%" fill="lime"/> + + <!-- check if something displays, its displayed in the right place --> + <text font-size="50" fill="red" transform="translate(0,100)"> + <textPath xlink:href="#p">abc</textPath> + </text> + <text x="100" y="200" font-size="50" stroke-width="4" fill="lime" stroke="lime">abc</text> + + <!-- check something displays --> + <text x="200" y="200" font-size="50" fill="red">abc</text> + <text font-size="50" stroke-width="4" stroke="lime" fill="lime" transform="translate(100,100)"> + <textPath xlink:href="#p">abc</textPath> + </text> +</svg> diff --git a/layout/reftests/svg/textPath-05.html b/layout/reftests/svg/textPath-05.html new file mode 100644 index 0000000000..489a2b842e --- /dev/null +++ b/layout/reftests/svg/textPath-05.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html style="background-color: lime;"> +<head> + <meta http-equiv="content-type" content="text/html; charset=UTF-8"> +</head> +<body> + <span style="display:none;"> דניאל גל</span> + <svg width="100%" height="100%"> + <defs> + <path id="p" d="M50,50h400"/> + </defs> + <text fill="lime" font-size="50px"> + <textPath xlink:href="#p"><tspan>I should be lime</tspan></textPath> + </text> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/textPath-06.svg b/layout/reftests/svg/textPath-06.svg new file mode 100644 index 0000000000..1cff33a780 --- /dev/null +++ b/layout/reftests/svg/textPath-06.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <path id="path" d="" /> + </defs> + + <rect fill="lime" width="100%" height="100%"/> + + <text y="50" font-size="50" fill="red" > + <textPath path="">Empty paths should be invisible</textPath> + </text> + + <text y="100" font-size="50" fill="red" > + <textPath href="#path">Empty paths should be invisible</textPath> + </text> + + <text y="150" font-size="50" fill="red" > + <textPath>No path at all should be invisible too</textPath> + </text> +</svg> diff --git a/layout/reftests/svg/textPath-line-01-ref.svg b/layout/reftests/svg/textPath-line-01-ref.svg new file mode 100644 index 0000000000..cd1fa42591 --- /dev/null +++ b/layout/reftests/svg/textPath-line-01-ref.svg @@ -0,0 +1,16 @@ +<!-- + 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" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference to check that textPath can point to a line</title> + + <defs> + <path id="x" d="M 100 100 h 400"/> + </defs> + + <text> + <textPath xlink:href="#x" font-size="20" fill="black">Should see this</textPath> + </text> + +</svg> diff --git a/layout/reftests/svg/textPath-line-01.svg b/layout/reftests/svg/textPath-line-01.svg new file mode 100644 index 0000000000..9fc8571576 --- /dev/null +++ b/layout/reftests/svg/textPath-line-01.svg @@ -0,0 +1,16 @@ +<!-- + 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" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase to check that textPath can point to a line</title> + + <defs> + <line id="x" x1="100" y1="100" x2="500" y2="100"/> + </defs> + + <text> + <textPath xlink:href="#x" font-size="20" fill="black">Should see this</textPath> + </text> + +</svg> diff --git a/layout/reftests/svg/textPath-path-attribute-01-ref.svg b/layout/reftests/svg/textPath-path-attribute-01-ref.svg new file mode 100644 index 0000000000..6c90cf505d --- /dev/null +++ b/layout/reftests/svg/textPath-path-attribute-01-ref.svg @@ -0,0 +1,24 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Reference for path attribute on textPath</title> + + <defs> + <path id="path" d="M 100 100 h 400"/> + </defs> + + <text font-size="20"> + <textPath href="#path">Text on path with path attribute</textPath> + </text> + + <text transform="translate(0,50)" font-size="20"> + <textPath href="#path">Animate the path attribute into place</textPath> + </text> + + <text transform="translate(0,100)" font-size="20"> + <textPath href="#path">Ensure path is preferred over href</textPath> + </text> + +</svg> diff --git a/layout/reftests/svg/textPath-path-attribute-01.svg b/layout/reftests/svg/textPath-path-attribute-01.svg new file mode 100644 index 0000000000..8470ee0348 --- /dev/null +++ b/layout/reftests/svg/textPath-path-attribute-01.svg @@ -0,0 +1,28 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testcase for path attribute on textPath</title> + + <defs> + <path id="path" d="M 100 100 h 400"/> + </defs> + + <text font-size="20"> + <textPath path="M 100 100 h 400">Text on path with path attribute</textPath> + </text> + + <text transform="translate(0,50)" font-size="20"> + <textPath>Animate the path attribute into place + <set attributeName="path" to="M 100 100 h 400"/> + </textPath> + </text> + + <text transform="translate(0,100)" font-size="20"> + <textPath path="M 400 100 h 400" href="#path">Ensure path is preferred over href + <set attributeName="path" to=""/> + </textPath> + </text> + +</svg> diff --git a/layout/reftests/svg/textPath-side-attribute-01.svg b/layout/reftests/svg/textPath-side-attribute-01.svg new file mode 100644 index 0000000000..ac71fd5698 --- /dev/null +++ b/layout/reftests/svg/textPath-side-attribute-01.svg @@ -0,0 +1,45 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <path id="path1" d="M100 100 h 300"/> + <!-- path2 is drawn in the same place but the opposite direction to path1 + so using it should give the same result as side="right" --> + <path id="path2" d="M400 100 h -300"/> + </defs> + + <rect fill="lime" width="100%" height="100%"/> + + <text font-size="30" fill="red"> + <textPath side="right" href="#path1">Text on a path.</textPath> + </text> + + <text font-size="30" fill="lime" stroke="lime" stroke-width="4"> + <textPath href="#path2">Text on a path.</textPath> + </text> + + <text transform="translate(0, 50)" font-size="30" fill="red"> + <textPath href="#path2">Text on a path.</textPath> + </text> + + <text transform="translate(0, 50)" font-size="30" fill="lime" stroke="lime" stroke-width="4"> + <textPath side="right" href="#path1">Text on a path.</textPath> + </text> + + <text transform="translate(0, 100)" font-size="30" fill="red"> + <textPath href="#path2">Text on a path.</textPath> + </text> + + <text transform="translate(0, 100)" font-size="30" fill="lime" stroke="lime" stroke-width="4"> + <textPath href="#path1">Text on a path. + <set attributeName="side" to="right"/> + </textPath> + </text> + + <text transform="translate(0, 150)" font-size="30" fill="red"> + <textPath href="#path1">Text on a path.</textPath> + </text> + + <text transform="translate(0, 150)" font-size="30" fill="lime" stroke="lime" stroke-width="4"> + <textPath side="left" href="#path1">Text on a path.</textPath> + </text> + +</svg> diff --git a/layout/reftests/svg/thin-stroke-01.svg b/layout/reftests/svg/thin-stroke-01.svg new file mode 100644 index 0000000000..204bc90a6e --- /dev/null +++ b/layout/reftests/svg/thin-stroke-01.svg @@ -0,0 +1,10 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Test for a thin stroke-width render</title> + + <rect width="100%" height="100%" fill="lime" stroke="black" stroke-width="0.0001"/> +</svg> diff --git a/layout/reftests/svg/transform-animation-on-path-ref.html b/layout/reftests/svg/transform-animation-on-path-ref.html new file mode 100644 index 0000000000..ecdf155e82 --- /dev/null +++ b/layout/reftests/svg/transform-animation-on-path-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> +<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"> + <path id="target" d="M .1 .1 H .9 V .9 H .10 L .10 .10"/> +</svg> +</html> diff --git a/layout/reftests/svg/transform-animation-on-path.html b/layout/reftests/svg/transform-animation-on-path.html new file mode 100644 index 0000000000..065e080a9e --- /dev/null +++ b/layout/reftests/svg/transform-animation-on-path.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html class="reftest-wait reftest-no-flush"> +<style> +@keyframes anim { + from { transform: scale(1); } + to { transform: scale(0); } +} +</style> +<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"> + <path id="target" d="M .1 .1 H .9 V .9 H .10 L .10 .10"/> +</svg> +<script> +document.addEventListener("MozReftestInvalidate", () => { + target.style.animation = "anim 100s step-end reverse"; + target.addEventListener("animationstart", () => { + document.documentElement.classList.remove("reftest-wait"); + }); +}); +</script> +</html> diff --git a/layout/reftests/svg/transform-origin-presentation-01.svg b/layout/reftests/svg/transform-origin-presentation-01.svg new file mode 100644 index 0000000000..b59fa5f11e --- /dev/null +++ b/layout/reftests/svg/transform-origin-presentation-01.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 200 100" preserveAspectRatio="none"> + <rect width="200" height="100" fill="red"/> + <rect width="100" height="200" x="50" y="-50" fill="lime" transform="rotate(90)" transform-origin="center"/> +</svg> diff --git a/layout/reftests/svg/transform-outer-svg-01-ref.svg b/layout/reftests/svg/transform-outer-svg-01-ref.svg new file mode 100644 index 0000000000..e6cc4b49a2 --- /dev/null +++ b/layout/reftests/svg/transform-outer-svg-01-ref.svg @@ -0,0 +1,9 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1353697 --> + <rect x="75" y="75" width="150" height="150" fill="none" stroke="black" stroke-width="50"/> + <rect x="125" y="125" width="50" height="50" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/transform-outer-svg-01.svg b/layout/reftests/svg/transform-outer-svg-01.svg new file mode 100644 index 0000000000..c4b26c6378 --- /dev/null +++ b/layout/reftests/svg/transform-outer-svg-01.svg @@ -0,0 +1,10 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" + style="border: 50px solid black;" transform="translate(50,50)"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=1353697 --> + <title>Test that the 'transform' attribute transforms our border too</title> + <rect x="25" y="25" width="50" height="50" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/tspan-dxdy-01.svg b/layout/reftests/svg/tspan-dxdy-01.svg new file mode 100644 index 0000000000..1113ab95a8 --- /dev/null +++ b/layout/reftests/svg/tspan-dxdy-01.svg @@ -0,0 +1,10 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor dx/dy attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text dx="50 40 40 0" dy="20 20 40 -20"><tspan>abcdef</tspan></text> +</svg> diff --git a/layout/reftests/svg/tspan-dxdy-02.svg b/layout/reftests/svg/tspan-dxdy-02.svg new file mode 100644 index 0000000000..8f60510288 --- /dev/null +++ b/layout/reftests/svg/tspan-dxdy-02.svg @@ -0,0 +1,10 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor dx/dy attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text dx="0 40 40 0" dy="20 20 40 -20"><tspan dx="50">abcdef</tspan></text> +</svg> diff --git a/layout/reftests/svg/tspan-dxdy-03.svg b/layout/reftests/svg/tspan-dxdy-03.svg new file mode 100644 index 0000000000..febe8623f1 --- /dev/null +++ b/layout/reftests/svg/tspan-dxdy-03.svg @@ -0,0 +1,10 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor dx/dy attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text dx="50 40 40 0" dy="20 20 40 -20"><tspan>a</tspan>bcdef</text> +</svg> diff --git a/layout/reftests/svg/tspan-dxdy-04.svg b/layout/reftests/svg/tspan-dxdy-04.svg new file mode 100644 index 0000000000..f8a2e2ad25 --- /dev/null +++ b/layout/reftests/svg/tspan-dxdy-04.svg @@ -0,0 +1,10 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor dx/dy attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text dx="50 0 40 0" dy="20 0 0 -20">a<tspan dx="40" dy="20 40 40">bc</tspan>def</text> +</svg> diff --git a/layout/reftests/svg/tspan-dxdy-05.svg b/layout/reftests/svg/tspan-dxdy-05.svg new file mode 100644 index 0000000000..205c71f62e --- /dev/null +++ b/layout/reftests/svg/tspan-dxdy-05.svg @@ -0,0 +1,10 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor x/y attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text dx="50 40 40 0" dy="20 20 40 -20"><tspan><tspan>a</tspan>b<tspan>cde</tspan>f</tspan></text> +</svg> diff --git a/layout/reftests/svg/tspan-dxdy-06.svg b/layout/reftests/svg/tspan-dxdy-06.svg new file mode 100644 index 0000000000..57eb0c6481 --- /dev/null +++ b/layout/reftests/svg/tspan-dxdy-06.svg @@ -0,0 +1,10 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor x/y attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text dx="50 40 40 0" dy="20 20 40 -20">abc<tspan>def</tspan></text> +</svg> diff --git a/layout/reftests/svg/tspan-dxdy-ref.svg b/layout/reftests/svg/tspan-dxdy-ref.svg new file mode 100644 index 0000000000..543866c47b --- /dev/null +++ b/layout/reftests/svg/tspan-dxdy-ref.svg @@ -0,0 +1,10 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for tspan with ancestor dx/dy attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text dx="50 40 40 0" dy="20 20 40 -20">abcdef</text> +</svg> diff --git a/layout/reftests/svg/tspan-dxdy-textPath-01-ref.svg b/layout/reftests/svg/tspan-dxdy-textPath-01-ref.svg new file mode 100644 index 0000000000..940554855a --- /dev/null +++ b/layout/reftests/svg/tspan-dxdy-textPath-01-ref.svg @@ -0,0 +1,20 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for tspan with ancestor dx/dy attributes and textPath</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <defs> + <path id="path" d="M 50 20 l 100 10 l 100 -10" fill="none" stroke="black"/> + </defs> + <g> + <use xlink:href="#path"/> + <text><textPath xlink:href="#path"><tspan dx="10 20 10" dy="-10 10 15 -15">abcdef</tspan></textPath></text> + </g> + <g transform="translate(0, 50)"> + <use xlink:href="#path"/> + <text><textPath xlink:href="#path" startOffset="33%"><tspan dx="10 20 10" dy="-10 10 15 -15">abcdef</tspan></textPath></text> + </g> +</svg> diff --git a/layout/reftests/svg/tspan-dxdy-textPath-01.svg b/layout/reftests/svg/tspan-dxdy-textPath-01.svg new file mode 100644 index 0000000000..40eb331c38 --- /dev/null +++ b/layout/reftests/svg/tspan-dxdy-textPath-01.svg @@ -0,0 +1,20 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor dx/dy attributes and textPath</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <defs> + <path id="path" d="M 50 20 l 100 10 l 100 -10" fill="none" stroke="black"/> + </defs> + <g> + <use xlink:href="#path"/> + <text dx="10 20 10" dy="-10 10 15 -15"><textPath xlink:href="#path"><tspan><tspan>a</tspan>b<tspan>cde</tspan>f</tspan></textPath></text> + </g> + <g transform="translate(0, 50)"> + <use xlink:href="#path"/> + <text dx="10 20 10" dy="-10 10 15 -15"><textPath xlink:href="#path" startOffset="33%"><tspan><tspan>a</tspan>b<tspan>cde</tspan>f</tspan></textPath></text> + </g> +</svg> diff --git a/layout/reftests/svg/tspan-rotate-01.svg b/layout/reftests/svg/tspan-rotate-01.svg new file mode 100644 index 0000000000..8f13b29881 --- /dev/null +++ b/layout/reftests/svg/tspan-rotate-01.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor rotate attribute</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60" rotate="90 45 -45 180"><tspan>abcdef</tspan></text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-rotate-02-ref.svg b/layout/reftests/svg/tspan-rotate-02-ref.svg new file mode 100644 index 0000000000..54160f3236 --- /dev/null +++ b/layout/reftests/svg/tspan-rotate-02-ref.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for tspan with ancestor rotate attribute</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60" rotate="90 90 90 90 90">abcdef</text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-rotate-02.svg b/layout/reftests/svg/tspan-rotate-02.svg new file mode 100644 index 0000000000..63b479f99e --- /dev/null +++ b/layout/reftests/svg/tspan-rotate-02.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor rotate attribute</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60" rotate="0 45 -45 180"><tspan rotate="90">abcdef</tspan></text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-rotate-03.svg b/layout/reftests/svg/tspan-rotate-03.svg new file mode 100644 index 0000000000..77edefece0 --- /dev/null +++ b/layout/reftests/svg/tspan-rotate-03.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor rotate attribute</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60" rotate="90 45 -45 180"><tspan>a</tspan>bcdef</text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-rotate-04-ref.svg b/layout/reftests/svg/tspan-rotate-04-ref.svg new file mode 100644 index 0000000000..700b85dfb5 --- /dev/null +++ b/layout/reftests/svg/tspan-rotate-04-ref.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for tspan with ancestor rotate attribute</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60" rotate="90 45 45 180 180 180">abcdef</text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-rotate-04.svg b/layout/reftests/svg/tspan-rotate-04.svg new file mode 100644 index 0000000000..b817ab1547 --- /dev/null +++ b/layout/reftests/svg/tspan-rotate-04.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor rotate attribute</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60" rotate="90 0 -45 180">a<tspan rotate="45">bc</tspan>def</text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-rotate-05.svg b/layout/reftests/svg/tspan-rotate-05.svg new file mode 100644 index 0000000000..562b3f8c3a --- /dev/null +++ b/layout/reftests/svg/tspan-rotate-05.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor rotate attribute</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60" rotate="90 45 -45 180"><tspan><tspan>a</tspan>b<tspan>cde</tspan>f</tspan></text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-rotate-06.svg b/layout/reftests/svg/tspan-rotate-06.svg new file mode 100644 index 0000000000..5bece763e8 --- /dev/null +++ b/layout/reftests/svg/tspan-rotate-06.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor rotate attribute</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60" rotate="90 45 -45 180">abc<tspan>def</tspan></text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-rotate-07-ref.svg b/layout/reftests/svg/tspan-rotate-07-ref.svg new file mode 100644 index 0000000000..5494cda6c2 --- /dev/null +++ b/layout/reftests/svg/tspan-rotate-07-ref.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"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=862158 --> + <text x="100" y="100" style="font: 32px sans-serif" rotate="45 0">A B</text> +</svg> diff --git a/layout/reftests/svg/tspan-rotate-07.svg b/layout/reftests/svg/tspan-rotate-07.svg new file mode 100644 index 0000000000..83b1dbdde1 --- /dev/null +++ b/layout/reftests/svg/tspan-rotate-07.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"> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=862158 --> + <text x="100" y="100" style="font: 32px sans-serif"><tspan rotate="45">A </tspan>B</text> +</svg> diff --git a/layout/reftests/svg/tspan-rotate-ref.svg b/layout/reftests/svg/tspan-rotate-ref.svg new file mode 100644 index 0000000000..1f2d213426 --- /dev/null +++ b/layout/reftests/svg/tspan-rotate-ref.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for tspan with ancestor rotate attribute</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text rotate="90 45 -45 180" x="50 100 150" y="20 40 80 60">abcdef</text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-rotate-textPath-01-ref.svg b/layout/reftests/svg/tspan-rotate-textPath-01-ref.svg new file mode 100644 index 0000000000..02234fb470 --- /dev/null +++ b/layout/reftests/svg/tspan-rotate-textPath-01-ref.svg @@ -0,0 +1,20 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor rotate attribute and textPath</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <defs> + <path id="path" d="M 50 20 l 50 10 l 50 -10" fill="none" stroke="black"/> + </defs> + <g> + <use xlink:href="#path"/> + <text><textPath xlink:href="#path"><tspan rotate="90 45 -45 180 180 180">abcdef</tspan></textPath></text> + </g> + <g transform="translate(0, 50)"> + <use xlink:href="#path"/> + <text><textPath xlink:href="#path" startOffset="33%"><tspan rotate="90 45 -45 180 180 180">abcdef</tspan></textPath></text> + </g> +</svg> diff --git a/layout/reftests/svg/tspan-rotate-textPath-01.svg b/layout/reftests/svg/tspan-rotate-textPath-01.svg new file mode 100644 index 0000000000..0b4a63cab2 --- /dev/null +++ b/layout/reftests/svg/tspan-rotate-textPath-01.svg @@ -0,0 +1,20 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor rotate attribute and textPath</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <defs> + <path id="path" d="M 50 20 l 50 10 l 50 -10" fill="none" stroke="black"/> + </defs> + <g> + <use xlink:href="#path"/> + <text rotate="90 45 -45 180"><textPath xlink:href="#path"><tspan><tspan>a</tspan>b<tspan>cde</tspan>f</tspan></textPath></text> + </g> + <g transform="translate(0, 50)"> + <use xlink:href="#path"/> + <text rotate="90 45 -45 180"><textPath xlink:href="#path" startOffset="33%"><tspan><tspan>a</tspan>b<tspan>cde</tspan>f</tspan></textPath></text> + </g> +</svg> diff --git a/layout/reftests/svg/tspan-xy-01.svg b/layout/reftests/svg/tspan-xy-01.svg new file mode 100644 index 0000000000..1951b2746e --- /dev/null +++ b/layout/reftests/svg/tspan-xy-01.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor x/y attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60"><tspan>abcdef</tspan></text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-xy-02.svg b/layout/reftests/svg/tspan-xy-02.svg new file mode 100644 index 0000000000..41125214a4 --- /dev/null +++ b/layout/reftests/svg/tspan-xy-02.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor x/y attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="100 100 150" y="20 40 80 60"><tspan x="50">abcdef</tspan></text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-xy-03.svg b/layout/reftests/svg/tspan-xy-03.svg new file mode 100644 index 0000000000..07605288dd --- /dev/null +++ b/layout/reftests/svg/tspan-xy-03.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor x/y attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60"><tspan>a</tspan>bcdef</text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-xy-04.svg b/layout/reftests/svg/tspan-xy-04.svg new file mode 100644 index 0000000000..09d0b018dc --- /dev/null +++ b/layout/reftests/svg/tspan-xy-04.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor x/y attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 0 150" y="20 0 0 60">a<tspan x="100" y="40 80 100">bc</tspan>def</text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-xy-05.svg b/layout/reftests/svg/tspan-xy-05.svg new file mode 100644 index 0000000000..a4a065578c --- /dev/null +++ b/layout/reftests/svg/tspan-xy-05.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor x/y attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60"><tspan><tspan>a</tspan>b<tspan>cde</tspan>f</tspan></text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-xy-06.svg b/layout/reftests/svg/tspan-xy-06.svg new file mode 100644 index 0000000000..cad1e47b01 --- /dev/null +++ b/layout/reftests/svg/tspan-xy-06.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor x/y attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60">abc<tspan>def</tspan></text> + <use xlink:href="tspan-xy-ref.svg#grid"/> +</svg> diff --git a/layout/reftests/svg/tspan-xy-anchor-end-01.svg b/layout/reftests/svg/tspan-xy-anchor-end-01.svg new file mode 100644 index 0000000000..0937f69829 --- /dev/null +++ b/layout/reftests/svg/tspan-xy-anchor-end-01.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor x/y attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60" text-anchor="end"><tspan>abcdef</tspan></text> + <use xlink:href="tspan-xy-ref.svg#grid" /> +</svg> diff --git a/layout/reftests/svg/tspan-xy-anchor-end-ref.svg b/layout/reftests/svg/tspan-xy-anchor-end-ref.svg new file mode 100644 index 0000000000..34f8c60e41 --- /dev/null +++ b/layout/reftests/svg/tspan-xy-anchor-end-ref.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor x/y attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60" text-anchor="end">abcdef</text> + <use xlink:href="tspan-xy-ref.svg#grid" /> +</svg> diff --git a/layout/reftests/svg/tspan-xy-anchor-middle-01.svg b/layout/reftests/svg/tspan-xy-anchor-middle-01.svg new file mode 100644 index 0000000000..a692acd596 --- /dev/null +++ b/layout/reftests/svg/tspan-xy-anchor-middle-01.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for tspan with ancestor x/y attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60" text-anchor="middle"><tspan>abcdef</tspan></text> + <use xlink:href="tspan-xy-ref.svg#grid" /> +</svg> diff --git a/layout/reftests/svg/tspan-xy-anchor-middle-ref.svg b/layout/reftests/svg/tspan-xy-anchor-middle-ref.svg new file mode 100644 index 0000000000..616787fc01 --- /dev/null +++ b/layout/reftests/svg/tspan-xy-anchor-middle-ref.svg @@ -0,0 +1,11 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for tspan with ancestor x/y attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60" text-anchor="middle">abcdef</text> + <use xlink:href="tspan-xy-ref.svg#grid" /> +</svg> diff --git a/layout/reftests/svg/tspan-xy-ref.svg b/layout/reftests/svg/tspan-xy-ref.svg new file mode 100644 index 0000000000..28c2b040d8 --- /dev/null +++ b/layout/reftests/svg/tspan-xy-ref.svg @@ -0,0 +1,23 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for tspan with ancestor x/y attributes</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=333698 --> + <text x="50 100 150" y="20 40 80 60">abcdef</text> + + <g id="grid"> + <line x1="10" y1="20" x2="200" y2="20" stroke="black"/> + <line x1="50" y1="10" x2="50" y2="100" stroke="black"/> + + <line x1="10" y1="40" x2="200" y2="40" stroke="black"/> + <line x1="100" y1="10" x2="100" y2="100" stroke="black"/> + + <line x1="10" y1="80" x2="200" y2="80" stroke="black"/> + <line x1="150" y1="10" x2="150" y2="100" stroke="black"/> + + <line x1="10" y1="60" x2="200" y2="60" stroke="black"/> + </g> +</svg> diff --git a/layout/reftests/svg/use-01-extref-resource.svg b/layout/reftests/svg/use-01-extref-resource.svg new file mode 100644 index 0000000000..b3484478d2 --- /dev/null +++ b/layout/reftests/svg/use-01-extref-resource.svg @@ -0,0 +1,27 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <g id="g3"> + <rect width="11%" height="100%" fill="lime" id="r1"/> + </g> + <g id="g4"> + <rect width="11%" height="100%" fill="lime"/> + <use x="10%" xlink:href="#r1"/> + <use x="20%" xlink:href="use-01-extref.svg#r2"/> + <use x="10%" xlink:href="use-01-extref.svg#g1"/> + </g> + <g id="g5"> + <use xlink:href="#r1"/> + <use x="-60%" xlink:href="use-01-extref.svg#g2"/> + </g> + <g id="g6"> + <use xlink:href="#r1"/> + <use x="10%" xlink:href="#g7"/> + </g> + <g id="g7"> + <use xlink:href="#g6"/> + </g> +</svg> diff --git a/layout/reftests/svg/use-01-extref.svg b/layout/reftests/svg/use-01-extref.svg new file mode 100644 index 0000000000..8a2c0a68a7 --- /dev/null +++ b/layout/reftests/svg/use-01-extref.svg @@ -0,0 +1,24 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that dynamic changes to the element for a given ID are reflected in 'use'</title> + + <use x="10%" xlink:href="use-01-extref-resource.svg#r1"/> + + <g id="g1"> + <use x="20%" xlink:href="use-01-extref-resource.svg#g3"/> + </g> + + <use x="30%" xlink:href="use-01-extref-resource.svg#g4"/> + + <g id="g2"> + <use x="70%" xlink:href="use-01-extref-resource.svg#g5"/> + </g> + + <use x="80%" xlink:href="use-01-extref-resource.svg#g6"/> + + <rect width="11%" height="100%" fill="lime" id="r2"/> +</svg> diff --git a/layout/reftests/svg/use-01.svg b/layout/reftests/svg/use-01.svg new file mode 100644 index 0000000000..9f92754186 --- /dev/null +++ b/layout/reftests/svg/use-01.svg @@ -0,0 +1,25 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that 'use' with zero width/height is not displayed</title> + <defs> + <symbol id="red"> + <rect width="100" height="100" fill="red"/> + </symbol> + <symbol id="lime"> + <rect width="100" height="100" fill="lime"/> + </symbol> + </defs> + <rect width="100%" height="100%" fill="lime"/> + + <!-- zero width/height pointing at symbol should disable --> + <use x="0" y="0" width="0" xlink:href="#red"/> + <use x="150" y="0" height="0" xlink:href="#red"/> + + <rect x="0" y="150" width="100" height="100" fill="red"/> + <!-- no width/height specified should display though --> + <use x="0" y="150" xlink:href="#lime"/> +</svg> diff --git a/layout/reftests/svg/use-02-extref-ref.svg b/layout/reftests/svg/use-02-extref-ref.svg new file mode 100644 index 0000000000..c5b0d6c6cd --- /dev/null +++ b/layout/reftests/svg/use-02-extref-ref.svg @@ -0,0 +1,30 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <g id="testContent" color="forestgreen"> + <defs> + <linearGradient id="linearGrad" gradientUnits="objectBoundingBox" y1="0" x1="0" y2="1" x2="1"> + <stop offset="0%" stop-color="royalblue"/> + <stop offset="33%" stop-color="white"/> + <stop offset="50%" stop-color="darkblue"/> + <stop offset="66%" stop-color="white"/> + <stop offset="100%" stop-color="royalblue"/> + </linearGradient> + + <radialGradient id="radialGrad" gradientUnits="objectBoundingBox" cx="0.5" cy="0.5" r="0.5" fx="0.15" fy="0.15"> + <stop offset="000%" stop-color="orange" /> + <stop offset="033%" stop-color="red" /> + <stop offset="050%" stop-color="gold" /> + <stop offset="066%" stop-color="red" /> + <stop offset="100%" stop-color="orange" /> + </radialGradient> + </defs> + + <rect x="0" y="0" width="200" height="125" stroke="none" + fill="url(#linearGrad)"/> + <rect x="200" y="0" width="200" height="125" stroke="none" + fill="currentColor"/> + <rect x="0" y="125" width="200" height="125" stroke="none" + fill="currentColor"/> + <rect x="200" y="125" width="200" height="125" stroke="none" fill="url(#radialGrad)" /> + </g> +</svg> diff --git a/layout/reftests/svg/use-02-extref-resource.svg b/layout/reftests/svg/use-02-extref-resource.svg new file mode 100644 index 0000000000..005ad6373e --- /dev/null +++ b/layout/reftests/svg/use-02-extref-resource.svg @@ -0,0 +1,34 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <g color="ghostwhite"> + <defs> + <linearGradient id="linearGrad1" gradientUnits="objectBoundingBox" y1="0" x1="0" y2="1" x2="1" > + <stop offset="000%" stop-color="orange" /> + <stop offset="033%" stop-color="red" /> + <stop offset="050%" stop-color="gold" /> + <stop offset="066%" stop-color="red" /> + <stop offset="100%" stop-color="orange" /> + </linearGradient> + + <radialGradient id="radialGrad1" gradientUnits="objectBoundingBox" cx="0.5" cy="0.5" r="0.5" fx="0.15" fy="0.15" > + <stop offset="000%" stop-color="orange" /> + <stop offset="033%" stop-color="red" /> + <stop offset="050%" stop-color="gold" /> + <stop offset="066%" stop-color="red" /> + <stop offset="100%" stop-color="orange" /> + </radialGradient> + </defs> + + <g> + <g id="foreign"> + <foreignObject x="0" y="0" width="100" height="100"> + <p xmlns="http://www.w3.org/1999/xhtml">Foo</p> + </foreignObject> + </g> + <rect id="rect1" x="0" y="0" width="200" height="125" stroke="none" /> + <rect id="rect2" x="200" y="0" width="200" height="125" stroke="none" /> + <rect id="rect3" x="0" y="125" width="200" height="125" stroke="none" fill="currentColor"/> + <rect id="rect4" x="200" y="125" width="200" height="125" stroke="none" fill="url(#radialGrad1)" /> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/use-02-extref.svg b/layout/reftests/svg/use-02-extref.svg new file mode 100644 index 0000000000..9dc7a5c770 --- /dev/null +++ b/layout/reftests/svg/use-02-extref.svg @@ -0,0 +1,28 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <g color="forestgreen"> + <defs> + <linearGradient id="linearGrad1" gradientUnits="objectBoundingBox" y1="0" x1="0" y2="1" x2="1"> + <stop offset="0%" stop-color="royalblue"/> + <stop offset="33%" stop-color="white"/> + <stop offset="50%" stop-color="darkblue"/> + <stop offset="66%" stop-color="white"/> + <stop offset="100%" stop-color="royalblue"/> + </linearGradient> + + <radialGradient id="radialGrad1" gradientUnits="objectBoundingBox" cx="0.5" cy="0.5" r="0.5" fx="0.15" fy="0.15"> + <stop offset="00%" stop-color="royalblue"/> + <stop offset="33%" stop-color="white"/> + <stop offset="50%" stop-color="darkblue"/> + <stop offset="66%" stop-color="white"/> + <stop offset="100%" stop-color="royalblue"/> + </radialGradient> + </defs> + + <use xlink:href="use-02-extref-resource.svg#rect1" fill="url(#linearGrad1)"/> + <use xlink:href="use-02-extref-resource.svg#rect2" fill="currentColor"/> + <use xlink:href="use-02-extref-resource.svg#rect3"/> + <use xlink:href="use-02-extref-resource.svg#rect4"/> + </g> +</svg> diff --git a/layout/reftests/svg/use-02.svg b/layout/reftests/svg/use-02.svg new file mode 100644 index 0000000000..5ebaed85dc --- /dev/null +++ b/layout/reftests/svg/use-02.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <title>Testing that 'use' with zero width/height is displayed when + not referencing svg or symbol elements</title> + <defs> + <rect id="to-cover" x="2" y="2" height="96" width="96" fill="red"/> + <rect id="r" x="0" y="0" height="100" width="100" fill="lime"/> + </defs> + <rect width="100%" height="100%" fill="lime"/> + + <use href="#to-cover"/> + <use x="110" href="#to-cover"/> + <use y="110" href="#to-cover"/> + + <use href="#r" width="0" height="0" /> + <use x="110" href="#r" width="0" /> + <use y="110" href="#r" height="0" /> +</svg> diff --git a/layout/reftests/svg/use-children.svg b/layout/reftests/svg/use-children.svg new file mode 100644 index 0000000000..f0b04e3163 --- /dev/null +++ b/layout/reftests/svg/use-children.svg @@ -0,0 +1,13 @@ +<!-- + 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" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing that 'use' doesn't render its kids.</title> + + <rect width="100%" height="100%" fill="lime" id="r1"/> + <use id="u2" x="0%" width="100%"> + <rect width="100%" height="100%" fill="red" id="r2"/> + </use> +</svg> diff --git a/layout/reftests/svg/use-element-shadow-tree-rule-matching.html b/layout/reftests/svg/use-element-shadow-tree-rule-matching.html new file mode 100644 index 0000000000..e73c910939 --- /dev/null +++ b/layout/reftests/svg/use-element-shadow-tree-rule-matching.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html> +<style type="text/css"> + div { + width: 100px; + height:100px; + position: fixed; + } + + /* #outer is in main DOM, circle instance in use-element shadow DOM, + should not match this rule for cloned circle instance. */ + #outer circle { + stroke: red; + fill: red; + stroke-width: 4px; + } + + /* div is in main DOM, rect instance in use-element shadow DOM. + should not match this rule for cloned rect instance. */ + div rect { + stroke: red; + fill: red; + stroke-width: 4px; + } + + /* use element is host of shadow tree, not part of it. This rule should + not match any elements in the use-element shadow tree. */ + use > rect, use > circle { + stroke: red; + fill: red; + stroke-width: 4px; + } + + /* A cloned symbol instance inside an use-element shadow tree should match + rules of symbol tag, instead of svg tag. */ + svg { + fill: red; + } + symbol { + fill: lime; + } +</style> + +<body style="background-color: lime;"> + +<svg> + <defs> + <circle id="circle" cx="25" cy="25" r="25" /> + <rect id="rect" width="100" height="100"/> + <symbol id="symbol"> + <circle cx="25" cy="25" r="25" /> + </symbol> + </defs> + + <g id="outer"> + <use xlink:href="#circle" fill="lime" width="50" height="50" /> + </g> +</svg> + +<div style="left: 0px; top: 10px;"> + <svg> + <use xlink:href="#rect" fill="lime" width="50" height="50" /> + </svg> +</div> + +<div style="left: 110px; top: 10px;"> + <svg> + <use xlink:href="#symbol" fill="lime" width="50" height="50" /> + </svg> +</div> + +<div style="left: 220px; top: 10px;"> + <svg> + <use xlink:href="#symbol" width="50" height="50" /> + </svg> +</div> + +</body> +</html> diff --git a/layout/reftests/svg/use-extref-dataURI-01.svg b/layout/reftests/svg/use-extref-dataURI-01.svg new file mode 100644 index 0000000000..3274a21264 --- /dev/null +++ b/layout/reftests/svg/use-extref-dataURI-01.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title> + Testcase for bug 686013: <use> targeting a fragment in a data URI + </title> + <rect fill="red" height="100%" width="100%"/> + <use xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect id='target' height='100%' width='100%' fill='lime'/><rect height='100%' width='100%' fill='orange'/></svg>#target"/> +</svg> diff --git a/layout/reftests/svg/use-image-01.svg b/layout/reftests/svg/use-image-01.svg new file mode 100644 index 0000000000..a49d15411d --- /dev/null +++ b/layout/reftests/svg/use-image-01.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> +<rect width="100%" height="100%" fill="url(#pattern0)"/> +<defs> +<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1"> +<use xlink:href="#image0" /> +</pattern> +<image id="image0" width="100%" height="100%" xlink:href="pass.svg"/> +</defs> +</svg> + diff --git a/layout/reftests/svg/use-localRef-clipPath-01-ref.svg b/layout/reftests/svg/use-localRef-clipPath-01-ref.svg new file mode 100644 index 0000000000..8383a720ea --- /dev/null +++ b/layout/reftests/svg/use-localRef-clipPath-01-ref.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for clipPath linked to local-ref URL</title> + <defs> + <clipPath id="clip1"> + <circle cx="50" cy="50" r="50"/> + </clipPath> + <clipPath id="clip2"> + <circle cx="50" cy="150" r="50"/> + </clipPath> + <clipPath id="clip3"> + <circle cx="50" cy="250" r="50"/> + </clipPath> + </defs> + <rect x="0" y="0" width="100" height="100" fill="blue" clip-path="url(#clip1)"/> + <rect x="0" y="100" width="100" height="100" fill="blue" clip-path="url(#clip2)"/> + <rect x="0" y="200" width="100" height="100" fill="blue" clip-path="url(#clip3)"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/use-localRef-clipPath-01.svg b/layout/reftests/svg/use-localRef-clipPath-01.svg new file mode 100644 index 0000000000..5bc697608a --- /dev/null +++ b/layout/reftests/svg/use-localRef-clipPath-01.svg @@ -0,0 +1,23 @@ +<?xml-stylesheet href="use-localRef.css" type="text/css"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for clipPath linked to local-ref URL</title> + <defs> + <clipPath id="circleClip1"> + <circle cx="50" cy="50" r="0"/> + </clipPath> + <clipPath id="circleClip2"> + <circle cx="50" cy="150" r="50"/> + </clipPath> + <clipPath id="circleClip3"> + <circle cx="50" cy="250" r="50"/> + </clipPath> + </defs> + <style> + #cp3 { + clip-path: url(#circleClip3); + } + </style> + <use xlink:href="use-localRef-clipPath-resource.svg#cp1"/> + <use xlink:href="use-localRef-clipPath-resource.svg#cp2" clip-path="url(#circleClip2)"/> + <use xlink:href="use-localRef-clipPath-resource.svg#cp3"/> +</svg> diff --git a/layout/reftests/svg/use-localRef-clipPath-resource.svg b/layout/reftests/svg/use-localRef-clipPath-resource.svg new file mode 100644 index 0000000000..96e2d1095a --- /dev/null +++ b/layout/reftests/svg/use-localRef-clipPath-resource.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <clipPath id="circleClip1"> + <circle cx="50" cy="50" r="50"/> + </clipPath> + <clipPath id="circleClip2"> + <circle cx="50" cy="150" r="0"/> + </clipPath> + <clipPath id="circleClip3"> + <circle cx="50" cy="250" r="0"/> + </clipPath> + </defs> + <rect id="cp1" x="0" y="0" width="100" height="100" fill="blue" clip-path="url(#circleClip1)"/> + <rect id="cp2" x="0" y="100" width="100" height="100" fill="blue"/> + <rect id="cp3" x="0" y="200" width="100" height="100" fill="blue"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/use-localRef-fill-01-ref.svg b/layout/reftests/svg/use-localRef-fill-01-ref.svg new file mode 100644 index 0000000000..407e0a78c1 --- /dev/null +++ b/layout/reftests/svg/use-localRef-fill-01-ref.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for fill linked to local-ref URL</title> + <defs> + <linearGradient id="gradient1"> + <stop offset="0%" stop-color="white"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + </defs> + <rect x="10" y="10" width="80" height="80" fill="url(#gradient1)"/> + <rect x="10" y="110" width="80" height="80" fill="url(#gradient1)"/> + <rect x="10" y="210" width="80" height="80" fill="url(#gradient1)"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/use-localRef-fill-01.svg b/layout/reftests/svg/use-localRef-fill-01.svg new file mode 100644 index 0000000000..d8f9c7c6eb --- /dev/null +++ b/layout/reftests/svg/use-localRef-fill-01.svg @@ -0,0 +1,25 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for fill linked to local-ref URL</title> + <defs> + <linearGradient id="gradient1"> + <stop offset="0%" stop-color="blue"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + <linearGradient id="gradient2"> + <stop offset="0%" stop-color="white"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + <linearGradient id="gradient3"> + <stop offset="0%" stop-color="white"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + </defs> + <style> + #fill3 { + fill: url(#gradient3); + } + </style> + <use xlink:href="use-localRef-fill-resource.svg#fill1"/> + <use xlink:href="use-localRef-fill-resource.svg#fill2" fill="url(#gradient2)"/> + <use xlink:href="use-localRef-fill-resource.svg#fill3"/> +</svg> diff --git a/layout/reftests/svg/use-localRef-fill-resource.svg b/layout/reftests/svg/use-localRef-fill-resource.svg new file mode 100644 index 0000000000..4771a77d92 --- /dev/null +++ b/layout/reftests/svg/use-localRef-fill-resource.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <linearGradient id="gradient1"> + <stop offset="0%" stop-color="white"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + <linearGradient id="gradient2"> + <stop offset="0%" stop-color="blue"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + <linearGradient id="gradient3"> + <stop offset="0%" stop-color="blue"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + </defs> + <rect id="fill1" x="10" y="10" width="80" height="80" fill="url(#gradient1)"/> + <rect id="fill2" x="10" y="110" width="80" height="80"/> + <rect id="fill3" x="10" y="210" width="80" height="80"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/use-localRef-filter-01-ref.svg b/layout/reftests/svg/use-localRef-filter-01-ref.svg new file mode 100644 index 0000000000..aedde40006 --- /dev/null +++ b/layout/reftests/svg/use-localRef-filter-01-ref.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for filter linked to local-ref URL</title> + <defs> + <filter id="blurFilter" x="-10" y="-10" width="100" height="100"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10" /> + </filter> + </defs> + <rect x="10" y="10" width="80" height="80" fill="blue" filter="url(#blurFilter)"/> + <rect x="10" y="110" width="80" height="80" fill="blue" filter="url(#blurFilter)"/> + <rect x="10" y="210" width="80" height="80" fill="blue" filter="url(#blurFilter)"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/use-localRef-filter-01.svg b/layout/reftests/svg/use-localRef-filter-01.svg new file mode 100644 index 0000000000..aad16794b0 --- /dev/null +++ b/layout/reftests/svg/use-localRef-filter-01.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for filter linked to local-ref URL</title> + <defs> + <filter id="blurFilter1" x="-10" y="-10" width="100" height="100"> + <feGaussianBlur in="SourceGraphic" stdDeviation="0" /> + </filter> + <filter id="blurFilter2" x="-10" y="-10" width="100" height="100"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10" /> + </filter> + <filter id="blurFilter3" x="-10" y="-10" width="100" height="100"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10" /> + </filter> + </defs> + <style> + #f3 { + filter: url(#blurFilter3); + } + </style> + <use xlink:href="use-localRef-filter-resource.svg#f1"/> + <use xlink:href="use-localRef-filter-resource.svg#f2" filter="url(#blurFilter2)"/> + <use xlink:href="use-localRef-filter-resource.svg#f3"/> +</svg> diff --git a/layout/reftests/svg/use-localRef-filter-resource.svg b/layout/reftests/svg/use-localRef-filter-resource.svg new file mode 100644 index 0000000000..55c05a4ad4 --- /dev/null +++ b/layout/reftests/svg/use-localRef-filter-resource.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <filter id="blurFilter1" x="-10" y="-10" width="100" height="100"> + <feGaussianBlur in="SourceGraphic" stdDeviation="10" /> + </filter> + <filter id="blurFilter2" x="-10" y="-10" width="100" height="100"> + <feGaussianBlur in="SourceGraphic" stdDeviation="0" /> + </filter> + <filter id="blurFilter3" x="-10" y="-10" width="100" height="100"> + <feGaussianBlur in="SourceGraphic" stdDeviation="0" /> + </filter> + </defs> + <rect id="f1" x="10" y="10" width="80" height="80" fill="blue" filter="url(#blurFilter1)"/> + <rect id="f2" x="10" y="110" width="80" height="80" fill="blue"/> + <rect id="f3" x="10" y="210" width="80" height="80" fill="blue"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/use-localRef-link.html b/layout/reftests/svg/use-localRef-link.html new file mode 100644 index 0000000000..6f6d6feeb3 --- /dev/null +++ b/layout/reftests/svg/use-localRef-link.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<head> +<base href="/test"> +</head> +<body style="background-color: lime;"> + <svg width="100" height="100"> + <defs> + <rect id="a" x="0" y="0" width="50" height="50" fill="lime"/> + </defs> + <rect x="0" y="0" width="50" height="50" fill="red"/> + <use xlink:href="#a"/> + </svg> +</body> +</html> + diff --git a/layout/reftests/svg/use-localRef-marker-01-ref.svg b/layout/reftests/svg/use-localRef-marker-01-ref.svg new file mode 100644 index 0000000000..fdfca07335 --- /dev/null +++ b/layout/reftests/svg/use-localRef-marker-01-ref.svg @@ -0,0 +1,29 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for marker linked to local-ref URL</title> + <defs> + <marker id="limeCircle" markerWidth="8" markerHeight="8" refX="5" refY="5"> + <circle cx="5" cy="5" r="2" style="stroke: none; fill:lime;"/> + </marker> + <marker id="blueCircle" markerWidth="8" markerHeight="8" refX="5" refY="5"> + <circle cx="5" cy="5" r="2" style="stroke: none; fill:blue;"/> + </marker> + <marker id="purpleCircle" markerWidth="8" markerHeight="8" refX="5" refY="5"> + <circle cx="5" cy="5" r="2" style="stroke: none; fill:purple;"/> + </marker> + </defs> + <style> + path { + stroke: blue; + stroke-width: 2px; + } + </style> + <path d="M20,20 L70,20 L120,20" style="marker-start: url(#limeCircle);"/> + <path d="M20,40 L70,40 L120,40" style="marker-start: url(#blueCircle);"/> + <path d="M20,60 L70,60 L120,60" style="marker-start: url(#blueCircle);"/> + <path d="M20,80 L70,80 L120,80" style="marker-mid: url(#limeCircle);"/> + <path d="M20,100 L70,100 L120,100" style="marker-mid: url(#blueCircle);"/> + <path d="M20,120 L70,120 L120,120" style="marker-mid: url(#blueCircle);"/> + <path d="M20,140 L70,140 L120,140" style="marker-end: url(#limeCircle);"/> + <path d="M20,160 L70,160 L120,160" style="marker-end: url(#blueCircle);"/> + <path d="M20,180 L70,180 L120,180" style="marker-end: url(#blueCircle);"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/use-localRef-marker-01.svg b/layout/reftests/svg/use-localRef-marker-01.svg new file mode 100644 index 0000000000..643f9687f7 --- /dev/null +++ b/layout/reftests/svg/use-localRef-marker-01.svg @@ -0,0 +1,30 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for marker linked to local-ref URL</title> + <defs> + <marker id="circleMarker" markerWidth="8" markerHeight="8" refX="5" refY="5"> + <circle cx="5" cy="5" r="2" style="stroke: none; fill:blue;"/> + </marker> + </defs> + <style> + #markerA3 { + marker-start: url(#circleMarker); + } + #markerB3 { + marker-mid: url(#circleMarker); + } + #markerC3 { + marker-end: url(#circleMarker); + } + </style> + <use xlink:href="use-localRef-marker-resource.svg#markerA1"/> + <use xlink:href="use-localRef-marker-resource.svg#markerA2" style="marker-start: url(#circleMarker);"/> + <use xlink:href="use-localRef-marker-resource.svg#markerA3"/> + + <use xlink:href="use-localRef-marker-resource.svg#markerB1"/> + <use xlink:href="use-localRef-marker-resource.svg#markerB2" style="marker-mid: url(#circleMarker);"/> + <use xlink:href="use-localRef-marker-resource.svg#markerB3"/> + + <use xlink:href="use-localRef-marker-resource.svg#markerC1"/> + <use xlink:href="use-localRef-marker-resource.svg#markerC2" style="marker-end: url(#circleMarker);"/> + <use xlink:href="use-localRef-marker-resource.svg#markerC3"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/use-localRef-marker-resource.svg b/layout/reftests/svg/use-localRef-marker-resource.svg new file mode 100644 index 0000000000..2586abeb6f --- /dev/null +++ b/layout/reftests/svg/use-localRef-marker-resource.svg @@ -0,0 +1,18 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <marker id="circleMarker" markerWidth="8" markerHeight="8" refX="5" refY="5"> + <circle cx="5" cy="5" r="2" style="stroke: none; fill:lime;"/> + </marker> + </defs> + <path id="markerA1" d="M20,20 L70,20 L120,20" style="stroke: blue; stroke-width: 2px; marker-start: url(#circleMarker);"/> + <path id="markerA2" d="M20,40 L70,40 L120,40" style="stroke: blue; stroke-width: 2px;"/> + <path id="markerA3" d="M20,60 L70,60 L120,60" style="stroke: blue; stroke-width: 2px;"/> + + <path id="markerB1" d="M20,80 L70,80 L120,80" style="stroke: blue; stroke-width: 2px; marker-mid: url(#circleMarker);"/> + <path id="markerB2" d="M20,100 L70,100 L120,100" style="stroke: blue; stroke-width: 2px;"/> + <path id="markerB3" d="M20,120 L70,120 L120,120" style="stroke: blue; stroke-width: 2px;"/> + + <path id="markerC1" d="M20,140 L70,140 L120,140" style="stroke: blue; stroke-width: 2px; marker-end: url(#circleMarker);"/> + <path id="markerC2" d="M20,160 L70,160 L120,160" style="stroke: blue; stroke-width: 2px;"/> + <path id="markerC3" d="M20,180 L70,180 L120,180" style="stroke: blue; stroke-width: 2px;;"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/use-localRef-mask-01-ref.svg b/layout/reftests/svg/use-localRef-mask-01-ref.svg new file mode 100644 index 0000000000..2eeba09464 --- /dev/null +++ b/layout/reftests/svg/use-localRef-mask-01-ref.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for mask linked to local-ref URL</title> + <defs> + <mask id="circleMask1" x="0" y="0" width="100" height="100" > + <circle cx="50" cy="50" r="40" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="circleMask2" x="0" y="0" width="100" height="100" > + <circle cx="50" cy="150" r="40" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="circleMask3" x="0" y="0" width="100" height="100" > + <circle cx="50" cy="250" r="40" style="stroke:none; fill: #ffffff"/> + </mask> + </defs> + <rect id="mask1" x="10" y="10" width="80" height="80" fill="blue" mask="url(#circleMask1)"/> + <rect id="mask2" x="10" y="110" width="80" fill="blue" height="80" mask="url(#circleMask2)"/> + <rect id="mask3" x="10" y="210" width="80" fill="blue" height="80" mask="url(#circleMask3)"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/use-localRef-mask-01.svg b/layout/reftests/svg/use-localRef-mask-01.svg new file mode 100644 index 0000000000..fa524e9f9c --- /dev/null +++ b/layout/reftests/svg/use-localRef-mask-01.svg @@ -0,0 +1,22 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for mask linked to local-ref URL</title> + <defs> + <mask id="circleMask1" x="0" y="0" width="100" height="100" > + <circle cx="50" cy="50" r="0" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="circleMask2" x="0" y="0" width="100" height="100" > + <circle cx="50" cy="150" r="40" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="circleMask3" x="0" y="0" width="100" height="100" > + <circle cx="50" cy="250" r="40" style="stroke:none; fill: #ffffff"/> + </mask> + </defs> + <style> + #mask3 { + mask: url(#circleMask3); + } + </style> + <use xlink:href="use-localRef-mask-resource.svg#mask1"/> + <use xlink:href="use-localRef-mask-resource.svg#mask2" mask="url(#circleMask2)"/> + <use xlink:href="use-localRef-mask-resource.svg#mask3"/> +</svg> diff --git a/layout/reftests/svg/use-localRef-mask-resource.svg b/layout/reftests/svg/use-localRef-mask-resource.svg new file mode 100644 index 0000000000..49d7b6cc4a --- /dev/null +++ b/layout/reftests/svg/use-localRef-mask-resource.svg @@ -0,0 +1,16 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <mask id="circleMask1" x="0" y="0" width="100" height="100" > + <circle cx="50" cy="50" r="40" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="circleMask2" x="0" y="0" width="100" height="100" > + <circle cx="50" cy="150" r="0" style="stroke:none; fill: #ffffff"/> + </mask> + <mask id="circleMask3" x="0" y="0" width="100" height="100" > + <circle cx="50" cy="250" r="0" style="stroke:none; fill: #ffffff"/> + </mask> + </defs> + <rect id="mask1" x="10" y="10" width="80" height="80" fill="blue" mask="url(#circleMask1)"/> + <rect id="mask2" x="10" y="110" width="80" fill="blue" height="80"/> + <rect id="mask3" x="10" y="210" width="80" fill="blue" height="80"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/use-localRef-stroke-01-ref.svg b/layout/reftests/svg/use-localRef-stroke-01-ref.svg new file mode 100644 index 0000000000..ce7695684e --- /dev/null +++ b/layout/reftests/svg/use-localRef-stroke-01-ref.svg @@ -0,0 +1,12 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Reference for stroke linked to local-ref URL</title> + <defs> + <linearGradient id="gradient1"> + <stop offset="0%" stop-color="white"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + </defs> + <rect x="10" y="10" width="80" height="80" stroke-width="5" fill="white" stroke="url(#gradient1)"/> + <rect x="10" y="110" width="80" height="80" stroke-width="5" fill="white" stroke="url(#gradient1)"/> + <rect x="10" y="210" width="80" height="80" stroke-width="5" fill="white" stroke="url(#gradient1)"/> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/use-localRef-stroke-01.svg b/layout/reftests/svg/use-localRef-stroke-01.svg new file mode 100644 index 0000000000..1e8e3e5922 --- /dev/null +++ b/layout/reftests/svg/use-localRef-stroke-01.svg @@ -0,0 +1,26 @@ +<?xml-stylesheet href="use-localRef.css" type="text/css"?> +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testcase for stroke linked to local-ref URL</title> + <defs> + <linearGradient id="gradient1"> + <stop offset="0%" stop-color="blue"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + <linearGradient id="gradient2"> + <stop offset="0%" stop-color="white"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + <linearGradient id="gradient3"> + <stop offset="0%" stop-color="white"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + </defs> + <style> + #stroke3 { + stroke: url(#gradient3); + } + </style> + <use xlink:href="use-localRef-stroke-resource.svg#stroke1"/> + <use xlink:href="use-localRef-stroke-resource.svg#stroke2" stroke="url(#gradient2)"/> + <use xlink:href="use-localRef-stroke-resource.svg#stroke3"/> +</svg> diff --git a/layout/reftests/svg/use-localRef-stroke-resource.svg b/layout/reftests/svg/use-localRef-stroke-resource.svg new file mode 100644 index 0000000000..e78b95dc56 --- /dev/null +++ b/layout/reftests/svg/use-localRef-stroke-resource.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <linearGradient id="gradient1"> + <stop offset="0%" stop-color="white"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + <linearGradient id="gradient2"> + <stop offset="0%" stop-color="blue"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + <linearGradient id="gradient3"> + <stop offset="0%" stop-color="blue"/> + <stop offset="100%" stop-color="blue"/> + </linearGradient> + </defs> + <rect id="stroke1" x="10" y="10" width="80" height="80" fill="white" stroke-width="5" stroke="url(#gradient1)"/> + <rect id="stroke2" x="10" y="110" width="80" height="80" fill="white" stroke-width="5" /> + <rect id="stroke3" x="10" y="210" width="80" height="80" fill="white" stroke-width="5" /> +</svg>
\ No newline at end of file diff --git a/layout/reftests/svg/use-restrictions-not-restricted-ref.svg b/layout/reftests/svg/use-restrictions-not-restricted-ref.svg new file mode 100644 index 0000000000..524bc7c8c9 --- /dev/null +++ b/layout/reftests/svg/use-restrictions-not-restricted-ref.svg @@ -0,0 +1,11 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <g color="green"> + <foreignObject x="0" y="0" width="100" height="100"> + <p xmlns="http://www.w3.org/1999/xhtml">Foo</p> + </foreignObject> + <foreignObject x="100" y="0" width="100" height="100"> + <p xmlns="http://www.w3.org/1999/xhtml">Foo</p> + </foreignObject> + </g> +</svg> diff --git a/layout/reftests/svg/use-restrictions.svg b/layout/reftests/svg/use-restrictions.svg new file mode 100644 index 0000000000..8cadeb6be2 --- /dev/null +++ b/layout/reftests/svg/use-restrictions.svg @@ -0,0 +1,14 @@ +<?xml version="1.0"?> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <g id="foreign"> + <foreignObject x="100" y="0" width="100" height="100"> + <p xmlns="http://www.w3.org/1999/xhtml">Foo</p> + </foreignObject> + </g> + </defs> + <g color="green"> + <use href="use-02-extref-resource.svg#foreign" /> + <use href="#foreign" /> + </g> +</svg> diff --git a/layout/reftests/svg/userSpaceOnUse-and-pattern-01-ref.svg b/layout/reftests/svg/userSpaceOnUse-and-pattern-01-ref.svg new file mode 100644 index 0000000000..03315272d4 --- /dev/null +++ b/layout/reftests/svg/userSpaceOnUse-and-pattern-01-ref.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + + <title>Reference for elements referencing an userSpaceOnUse pattern</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=521759 --> + + <defs> + <pattern id="test" patternUnits="userSpaceOnUse" width="100" height="100" viewBox="0 0 10 10"> + <rect x="0" y="0" width="10" height="10" fill="lime" /> + </pattern> + </defs> + <rect x="20" y="20" width="100" height="100" fill="url(#test)" /> +</svg> diff --git a/layout/reftests/svg/userSpaceOnUse-and-pattern-01.svg b/layout/reftests/svg/userSpaceOnUse-and-pattern-01.svg new file mode 100644 index 0000000000..11638e0b1e --- /dev/null +++ b/layout/reftests/svg/userSpaceOnUse-and-pattern-01.svg @@ -0,0 +1,18 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + + <title>Testcase for elements referencing an userSpaceOnUse pattern</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=521759 --> + + <defs> + <pattern id="test" patternUnits="userSpaceOnUse" width="20%" height="20%" viewBox="0 0 10 10"> + <rect x="0" y="0" width="10" height="10" fill="lime" /> + </pattern> + </defs> + <rect x="20" y="20" width="100" height="100" fill="red" /> + <rect x="20" y="20" width="100" height="100" fill="url(#test)" /> +</svg> diff --git a/layout/reftests/svg/viewBox-and-pattern-01.svg b/layout/reftests/svg/viewBox-and-pattern-01.svg new file mode 100644 index 0000000000..065d77a315 --- /dev/null +++ b/layout/reftests/svg/viewBox-and-pattern-01.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> + + <title>Testcase for elements referencing a viewBox pattern</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=519368 --> + + <defs> + <pattern id="test" patternUnits="userSpaceOnUse" x="10" y="10" width="20" height="20" viewBox="10 10 10 10"> + <rect x="10" y="10" width="10" height="10" fill="lime" /> + </pattern> + </defs> + <rect width="100%" height="100%" fill="lime" /> + <rect x="20" y="20" width="100" height="100" fill="red" /> + <rect x="20" y="20" width="100" height="100" fill="url(#test)" /> +</svg> diff --git a/layout/reftests/svg/viewBox-and-pattern-02.svg b/layout/reftests/svg/viewBox-and-pattern-02.svg new file mode 100644 index 0000000000..43f50b9d5a --- /dev/null +++ b/layout/reftests/svg/viewBox-and-pattern-02.svg @@ -0,0 +1,20 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> + + <title>Testcase for elements referencing a viewBox pattern</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773467 --> + + <defs> + <pattern id="test" x="10" y="10" width="20" height="20" viewBox="10 10 10 10" + patternContentUnits="userSpaceOnUse"> + <rect x="10" y="10" width="10" height="10" fill="lime" /> + </pattern> + </defs> + <rect width="100%" height="100%" fill="lime" /> + <rect x="20" y="20" width="100" height="100" fill="red" /> + <rect x="20" y="20" width="100" height="100" fill="url(#test)" /> +</svg> diff --git a/layout/reftests/svg/viewBox-and-pattern-03.svg b/layout/reftests/svg/viewBox-and-pattern-03.svg new file mode 100644 index 0000000000..d671f59ab2 --- /dev/null +++ b/layout/reftests/svg/viewBox-and-pattern-03.svg @@ -0,0 +1,19 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> + + <title>Testcase for elements referencing a viewBox pattern</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773467 --> + + <defs> + <pattern id="test" width="1" height="2" viewBox="0 0 10 10" patternUnits="userSpaceOnUse"> + <rect y="-3" width="10" height="5" fill="lime" /> + </pattern> + </defs> + <rect width="100%" height="100%" fill="lime" /> + <rect transform="scale(10)" x=".2" y=".2" width="1" height="0.5" fill="red" /> + <rect transform="scale(10)" x=".2" y=".2" width="1" height="0.5" fill="url(#test)" /> +</svg> diff --git a/layout/reftests/svg/viewBox-and-pattern-04.svg b/layout/reftests/svg/viewBox-and-pattern-04.svg new file mode 100644 index 0000000000..8963bb9366 --- /dev/null +++ b/layout/reftests/svg/viewBox-and-pattern-04.svg @@ -0,0 +1,17 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <pattern id="p2" + height="1" width="1" + viewBox="0 0 10 10" + preserveAspectRatio="xMidYMid meet"> + <circle cx="5" cy="5" r="5px" fill="red"/> + </pattern> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <rect width="300" height="100" fill="url(#p2)"/> + <rect x="100" width="100" height="100" fill="lime"/> +</svg> diff --git a/layout/reftests/svg/viewBox-and-symbol-01.svg b/layout/reftests/svg/viewBox-and-symbol-01.svg new file mode 100644 index 0000000000..5c8ebf7bc3 --- /dev/null +++ b/layout/reftests/svg/viewBox-and-symbol-01.svg @@ -0,0 +1,14 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <defs> + <symbol id="mySymbol" viewBox="0 0 20 20"> + <rect fill="lime" x="50%" height="20px" width="3%"/> + </symbol> + </defs> + <rect width="100%" height="100%" fill="lime"/> + <svg viewBox="0 0 20 20"> + <rect fill="red" x="50%" height="20px" width="2%"/> + </svg> + <svg> + <use href="#mySymbol"/> + </svg> +</svg> diff --git a/layout/reftests/svg/viewBox-invalid-01.svg b/layout/reftests/svg/viewBox-invalid-01.svg new file mode 100644 index 0000000000..f9239afb03 --- /dev/null +++ b/layout/reftests/svg/viewBox-invalid-01.svg @@ -0,0 +1,127 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing invalid values for |viewBox| attribute</title> + <defs> + <rect id="redRect" fill="red" height="10" width="10"/> + <rect id="limeRect" fill="lime" height="10" width="10"/> + </defs> + <rect fill="lime" height="100%" width="100%"/> + + <!-- SUMMARY: Each <svg> subdocument below has an invalid viewBox. If we + honor the invalid viewBox (ignoring typos), that will make us scale + the <use>'d redRect to appear larger than the limeRect, and we'll have + some red showing (and we'll fail the test). --> + + <!-- First row: Initial comma(s) --> + <g transform="translate(0, 0)"> + <g transform="translate(0, 0)"> + <svg width="20" height="20" viewBox=",0,0,1,1"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(40, 0)"> + <svg width="20" height="20" viewBox=",,0,0,1,1"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(80, 0)"> + <svg width="20" height="20" viewBox=", ,0,0,1,1"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(120, 0)"> + <svg width="20" height="20" viewBox=", 0,0,1,1"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(160, 0)"> + <svg width="20" height="20" viewBox=",,, 0,0,1,1"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + </g> + <!-- Second row: Trailing comma(s) --> + <g transform="translate(0, 40)"> + <g transform="translate(0, 0)"> + <svg width="20" height="20" viewBox="0,0,1,1,"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(40, 0)"> + <svg width="20" height="20" viewBox="0,0,1,1 ,"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(80, 0)"> + <svg width="20" height="20" viewBox="0,0,1,1,,"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(120, 0)"> + <svg width="20" height="20" viewBox="0,0,1,1, ,"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(160, 0)"> + <svg width="20" height="20" viewBox="0,0,1,1 ,,,"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + </g> + <!-- Third row: Repeated commas in the middle --> + <g transform="translate(0, 80)"> + <g transform="translate(0, 0)"> + <svg width="20" height="20" viewBox="0,,0,1,1"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(40, 0)"> + <svg width="20" height="20" viewBox="0,,,0,1,1"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(80, 0)"> + <svg width="20" height="20" viewBox="0, ,0,1,1"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(120, 0)"> + <svg width="20" height="20" viewBox="0 0,, 1,1"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(160, 0)"> + <svg width="20" height="20" viewBox="0 0,,1 1"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + </g> + <!-- Fourth row: wrong number of values --> + <g transform="translate(0, 120)"> + <g transform="translate(0, 0)"> + <svg width="20" height="20" viewBox=""> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(40, 0)"> + <svg width="20" height="20" viewBox="0"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(80, 0)"> + <svg width="20" height="20" viewBox="0 0"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(120, 0)"> + <svg width="20" height="20" viewBox="0 0 1"> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + <g transform="translate(160, 0)"> + <svg width="20" height="20" viewBox="0 0 1 1 1 "> + <use xlink:href="#redRect"/> + </svg><use xlink:href="#limeRect"/> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/viewBox-invalid-02.svg b/layout/reftests/svg/viewBox-invalid-02.svg new file mode 100644 index 0000000000..8463d9859c --- /dev/null +++ b/layout/reftests/svg/viewBox-invalid-02.svg @@ -0,0 +1,38 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing invalid values for |viewBox| attributes</title> + <defs> + <rect id="redRect" fill="red" height="10" width="10"/> + <rect id="limeRect" fill="lime" height="10" width="10"/> + </defs> + <rect fill="lime" height="100%" width="100%"/> + + <g transform="translate(0, 0)"> + <use xlink:href="#redRect"/> + <!-- negative width/height in viewBox should ignore entire attribute --> + <svg width="20" height="20" viewBox="0,0,0,-1"> + <use xlink:href="#limeRect"/> + </svg> + </g> + <g transform="translate(20, 0)"> + <use xlink:href="#redRect"/> + <!-- negative width/height in viewBox should ignore entire attribute --> + <svg width="20" height="20" viewBox="0,0,-1,0"> + <use xlink:href="#limeRect"/> + </svg> + </g> + <g transform="translate(40, 0)"> + <use xlink:href="#limeRect"/> + <!-- zero width/height in viewBox should render nothing --> + <svg width="20" height="20" viewBox="0,0,0,20"> + <use xlink:href="#redRect"/> + </svg> + </g> + <g transform="translate(60, 0)"> + <use xlink:href="#limeRect"/> + <!-- zero width/height in viewBox should render nothing --> + <svg width="20" height="20" viewBox="0,0,20,0"> + <use xlink:href="#redRect"/> + </svg> + </g> +</svg> diff --git a/layout/reftests/svg/viewBox-valid-01.svg b/layout/reftests/svg/viewBox-valid-01.svg new file mode 100644 index 0000000000..38ee208889 --- /dev/null +++ b/layout/reftests/svg/viewBox-valid-01.svg @@ -0,0 +1,96 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <title>Testing valid values for |viewBox| attribute</title> + <defs> + <rect id="redRect" fill="red" height="20" width="20"/> + <rect id="limeRect" fill="lime" height="10" width="10"/> + </defs> + <rect fill="lime" height="100%" width="100%"/> + + <!-- SUMMARY: Each <svg> subdocument below has a valid viewBox. If we honor + the valid viewBox (ignoring typos), that will make us scale the <use>'d + limeRect to appear as big as than the redRect, and we'll have no red + showing (and we'll pass the test). --> + + <!-- First row: no commas at all --> + <g transform="translate(0, 0)"> + <g transform="translate(0, 0)"> + <use xlink:href="#redRect"/> + <svg width="20" height="20" viewBox="0 0 10 10"> + <use xlink:href="#limeRect"/> + </svg> + </g> + <g transform="translate(40, 0)"> + <use xlink:href="#redRect"/> + <svg width="20" height="20" viewBox=" 0 0 10 10"> + <use xlink:href="#limeRect"/> + </svg> + </g> + <g transform="translate(80, 0)"> + <use xlink:href="#redRect"/> + <svg width="20" height="20" viewBox="0 0 10 10 "> + <use xlink:href="#limeRect"/> + </svg> + </g> + <g transform="translate(120, 0)"> + <use xlink:href="#redRect"/> + <svg width="20" height="20" viewBox=" 0 0 10 10 "> + <use xlink:href="#limeRect"/> + </svg> + </g> + </g> + <!-- Second row: some commas --> + <g transform="translate(0, 40)"> + <g transform="translate(0, 0)"> + <use xlink:href="#redRect"/> + <svg width="20" height="20" viewBox="0,0 10 10"> + <use xlink:href="#limeRect"/> + </svg> + </g> + <g transform="translate(40, 0)"> + <use xlink:href="#redRect"/> + <svg width="20" height="20" viewBox="0 0,10 10"> + <use xlink:href="#limeRect"/> + </svg> + </g> + <g transform="translate(80, 0)"> + <use xlink:href="#redRect"/> + <svg width="20" height="20" viewBox="0 0 10,10"> + <use xlink:href="#limeRect"/> + </svg> + </g> + <g transform="translate(120, 0)"> + <use xlink:href="#redRect"/> + <svg width="20" height="20" viewBox="0,0,10,10"> + <use xlink:href="#limeRect"/> + </svg> + </g> + </g> + <!-- Third row: commas & whitespace mixed --> + <g transform="translate(0, 80)"> + <g transform="translate(0, 0)"> + <use xlink:href="#redRect"/> + <svg width="20" height="20" viewBox="0, 0 10 10"> + <use xlink:href="#limeRect"/> + </svg> + </g> + <g transform="translate(40, 0)"> + <use xlink:href="#redRect"/> + <svg width="20" height="20" viewBox="0 0 , 10 10"> + <use xlink:href="#limeRect"/> + </svg> + </g> + <g transform="translate(80, 0)"> + <use xlink:href="#redRect"/> + <svg width="20" height="20" viewBox="0 0 10 ,10"> + <use xlink:href="#limeRect"/> + </svg> + </g> + <g transform="translate(120, 0)"> + <use xlink:href="#redRect"/> + <svg width="20" height="20" viewBox=" 0 ,0, 10,10 "> + <use xlink:href="#limeRect"/> + </svg> + </g> + </g> +</svg> diff --git a/layout/reftests/svg/viewBox-valid-02.xhtml b/layout/reftests/svg/viewBox-valid-02.xhtml new file mode 100644 index 0000000000..b6c8551b2e --- /dev/null +++ b/layout/reftests/svg/viewBox-valid-02.xhtml @@ -0,0 +1,27 @@ +<?xml version="1.0"?> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>Test viewBox translating out-of-viewport rect into viewport</title> + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=773450 --> + <style> + +div, svg { + display: block; + position: absolute; + width: 100px; + height: 100px; +} + + </style> +</head> +<body bgcolor="lime"> + <div style="background:red;"/> + <svg viewBox="100 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <rect x="100" y="0" width="100" height="100" fill="lime"/> + </svg> +</body> +</html> diff --git a/layout/reftests/svg/viewport-percent-graphic-user-01.svg b/layout/reftests/svg/viewport-percent-graphic-user-01.svg new file mode 100644 index 0000000000..808888b459 --- /dev/null +++ b/layout/reftests/svg/viewport-percent-graphic-user-01.svg @@ -0,0 +1,15 @@ +<!-- + 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%"> + + <title>Testcase for percentage units on viewport and user units on graphic</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=367352 --> + + <rect width="100%" height="100%" fill="red"/> + <rect width="32767" height="32767" fill="lime"/> + +</svg> diff --git a/layout/reftests/svg/winding-01.svg b/layout/reftests/svg/winding-01.svg new file mode 100644 index 0000000000..a8651ef705 --- /dev/null +++ b/layout/reftests/svg/winding-01.svg @@ -0,0 +1,11 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> + + <title>Testcase for path with evenodd winding</title> + + <!-- From https://bugzilla.mozilla.org/show_bug.cgi?id=786216 --> + + <rect width="100%" height="100%" fill="lime"/> + + <path fill-rule="evenodd" fill="red" d="M100,100 l 50,0 0,50 -50,0 0,-50 50,0 0,50 -50,0 0,-50z"/> + +</svg> diff --git a/layout/reftests/svg/zero-stroke-01.svg b/layout/reftests/svg/zero-stroke-01.svg new file mode 100644 index 0000000000..6d2392c348 --- /dev/null +++ b/layout/reftests/svg/zero-stroke-01.svg @@ -0,0 +1,12 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg"> + + <title>Testcase for stroke-width="0"</title> + + <rect width="100%" height="100%" fill="lime"/> + <text font-size="50" fill="lime" x="100" y="100" stroke="red" stroke-width="0">should not see this</text> + +</svg> |
