diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
| commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
| tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /layout/reftests/svg | |
| parent | Initial commit. (diff) | |
| download | thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip | |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/reftests/svg')
2671 files changed, 59062 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-image-rect-1png.html b/layout/reftests/svg/as-image/background-image-rect-1png.html new file mode 100644 index 0000000000..42813d6694 --- /dev/null +++ b/layout/reftests/svg/as-image/background-image-rect-1png.html @@ -0,0 +1,8 @@ +<html> +<body> + <div style="height: 100px; width: 100px; + background-image: -moz-image-rect(url('limeInRed100x100.png'), + 25,75,75,25)"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-image-rect-1svg.html b/layout/reftests/svg/as-image/background-image-rect-1svg.html new file mode 100644 index 0000000000..728c780acc --- /dev/null +++ b/layout/reftests/svg/as-image/background-image-rect-1svg.html @@ -0,0 +1,8 @@ +<html> +<body> + <div style="height: 100px; width: 100px; + background-image: -moz-image-rect(url('limeInRed100x100.svg'), + 25,75,75,25)"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-image-rect-2.html b/layout/reftests/svg/as-image/background-image-rect-2.html new file mode 100644 index 0000000000..15f861d40f --- /dev/null +++ b/layout/reftests/svg/as-image/background-image-rect-2.html @@ -0,0 +1,8 @@ +<html> +<body> + <div style="height: 100px; width: 100px; + background-image: -moz-image-rect(url('lime100x100.svg'), + 0,100,100,0)"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-resize-1.html b/layout/reftests/svg/as-image/background-resize-1.html new file mode 100644 index 0000000000..72111ceaf3 --- /dev/null +++ b/layout/reftests/svg/as-image/background-resize-1.html @@ -0,0 +1,18 @@ +<html class="reftest-wait"> +<head> +<script> + function doTest() { + document.getElementById("myDiv").style.width = "100px"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", doTest); +</script> +</head> +<body> + <div id="myDiv" + style="width: 10px; + height: 100px; + background-image: url('lime100x100.svg')"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-resize-2.html b/layout/reftests/svg/as-image/background-resize-2.html new file mode 100644 index 0000000000..86df50c02b --- /dev/null +++ b/layout/reftests/svg/as-image/background-resize-2.html @@ -0,0 +1,18 @@ +<html class="reftest-wait"> +<head> +<script> + function doTest() { + document.getElementById("myDiv").style.width = "100px"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", doTest); +</script> +</head> +<body> + <div id="myDiv" + style="width: 10px; + height: 100px; + background-image: url('lime100x100-noSVGDimensions.svg')"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-resize-3.html b/layout/reftests/svg/as-image/background-resize-3.html new file mode 100644 index 0000000000..e87c148e74 --- /dev/null +++ b/layout/reftests/svg/as-image/background-resize-3.html @@ -0,0 +1,19 @@ +<!-- Test for bug 600574 --> +<html class="reftest-wait"> +<head> +<script> + function doTest() { + document.getElementById("myDiv").style.width = "100px"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", doTest); +</script> +</head> +<body> + <div id="myDiv" + style="width: 10px; + height: 100px; + background-image: url('limeInRed-noSVGDimensions-viewBox.svg')"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-resize-4.html b/layout/reftests/svg/as-image/background-resize-4.html new file mode 100644 index 0000000000..ed4ea4f085 --- /dev/null +++ b/layout/reftests/svg/as-image/background-resize-4.html @@ -0,0 +1,20 @@ +<!-- Test for bug 600574 --> +<html class="reftest-wait"> +<head> +<script> + function doTest() { + document.getElementById("myDiv").style.width = "100px"; + document.documentElement.removeAttribute("class"); + } + window.addEventListener("MozReftestInvalidate", doTest); +</script> +</head> +<body> + <div id="myDiv" + style="width: 10px; + height: 100px; + background-image: + url('limeInRed-noSVGDimensions-animViewBox.svg')"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html b/layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html new file mode 100644 index 0000000000..e9ee74d29b --- /dev/null +++ b/layout/reftests/svg/as-image/background-scale-no-viewbox-1-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { + background-color: white; + width: 12px; + height: 60px; + } + body { + background-color: black; + margin: 0px; + padding: 0px; + border: 0px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-scale-no-viewbox-1.html b/layout/reftests/svg/as-image/background-scale-no-viewbox-1.html new file mode 100644 index 0000000000..e8ea278bb6 --- /dev/null +++ b/layout/reftests/svg/as-image/background-scale-no-viewbox-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html reftest-zoom="2.0"> +<head> + <style> + div { + background-color: yellow; + background-image: url("white-rect-no-viewbox.svg"); + width: 6px; + height: 30px; + } + body { + background-color: black; + margin: 0px; + padding: 0px; + border: 0px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html b/layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html new file mode 100644 index 0000000000..e9ee74d29b --- /dev/null +++ b/layout/reftests/svg/as-image/background-scale-with-viewbox-1-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { + background-color: white; + width: 12px; + height: 60px; + } + body { + background-color: black; + margin: 0px; + padding: 0px; + border: 0px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-scale-with-viewbox-1.html b/layout/reftests/svg/as-image/background-scale-with-viewbox-1.html new file mode 100644 index 0000000000..295aedf520 --- /dev/null +++ b/layout/reftests/svg/as-image/background-scale-with-viewbox-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html reftest-zoom="2.0"> +<head> + <style> + div { + background-color: yellow; + background-image: url("white-rect-with-viewbox.svg"); + width: 6px; + height: 30px; + } + body { + background-color: black; + margin: 0px; + padding: 0px; + border: 0px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-simple-1.html b/layout/reftests/svg/as-image/background-simple-1.html new file mode 100644 index 0000000000..d368b58318 --- /dev/null +++ b/layout/reftests/svg/as-image/background-simple-1.html @@ -0,0 +1,6 @@ +<html> +<body> + <div style="height: 100px; width: 100px; + background-image: url('lime100x100.svg')"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-simple-2.html b/layout/reftests/svg/as-image/background-simple-2.html new file mode 100644 index 0000000000..1b4cbba245 --- /dev/null +++ b/layout/reftests/svg/as-image/background-simple-2.html @@ -0,0 +1,6 @@ +<html> +<body> + <div style="height: 100px; width: 100px; + background-image: url('limeInRed100x100-viewBox.svg')"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-stretch-1-ref.html b/layout/reftests/svg/as-image/background-stretch-1-ref.html new file mode 100644 index 0000000000..3b017fbdf7 --- /dev/null +++ b/layout/reftests/svg/as-image/background-stretch-1-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { + background-color: yellow; + height: 30px; + } + .container { + width: 100px; + } + .should-not-stretch { + width: 6px; + background-color: white; + display: inline-block; + } + .left-spacer { + width: 47px; + float: left; + } + .right-spacer { + width: 47px; + float: right; + } + body { + background-color: black; + } + </style> +</head> +<body> + <div class="container"> + <div class="left-spacer"></div> + <div class="should-not-stretch"></div> + <div class="right-spacer"></div> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-stretch-1.html b/layout/reftests/svg/as-image/background-stretch-1.html new file mode 100644 index 0000000000..0931cf3ccc --- /dev/null +++ b/layout/reftests/svg/as-image/background-stretch-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <style> + div { + height: 30px; + width: 100px; + background-image: url("white-rect-with-viewbox.svg"); + background-repeat: no-repeat; + background-position: 30px; + background-size: 40px 30px; + background-color: yellow; + } + body { + background-color: black; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/background-viewBox-1.html b/layout/reftests/svg/as-image/background-viewBox-1.html new file mode 100644 index 0000000000..077dedfeb7 --- /dev/null +++ b/layout/reftests/svg/as-image/background-viewBox-1.html @@ -0,0 +1,7 @@ +<html> +<body> + <div style="height: 100px; width: 100px; + background-image: url('limeInRed100x100-viewBox.svg')"> + </div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/black100x100-ref.html b/layout/reftests/svg/as-image/black100x100-ref.html new file mode 100644 index 0000000000..0d0121ccb8 --- /dev/null +++ b/layout/reftests/svg/as-image/black100x100-ref.html @@ -0,0 +1,5 @@ +<html> +<body> + <div style="width: 100px; height: 100px; background: black"></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/blue-square-in-square-par-none.svg b/layout/reftests/svg/as-image/blue-square-in-square-par-none.svg new file mode 100644 index 0000000000..33a08a0bca --- /dev/null +++ b/layout/reftests/svg/as-image/blue-square-in-square-par-none.svg @@ -0,0 +1,7 @@ +<?xml version="1.0"?> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<svg preserveAspectRatio="none" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> +<rect x="0" y="0" width="100" height="100" stroke-width="0" fill="blue"/> +<rect x="10" y="10" width="80" height="80" stroke-width="0" fill="lightblue"/> +</svg> diff --git a/layout/reftests/svg/as-image/blue-square-in-square.svg b/layout/reftests/svg/as-image/blue-square-in-square.svg new file mode 100644 index 0000000000..d43a27951d --- /dev/null +++ b/layout/reftests/svg/as-image/blue-square-in-square.svg @@ -0,0 +1,7 @@ +<?xml version="1.0"?> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> +<rect x="0" y="0" width="100" height="100" stroke-width="0" fill="blue"/> +<rect x="10" y="10" width="80" height="80" stroke-width="0" fill="lightblue"/> +</svg> diff --git a/layout/reftests/svg/as-image/blue100x100-border-ref.html b/layout/reftests/svg/as-image/blue100x100-border-ref.html new file mode 100644 index 0000000000..1bd865856c --- /dev/null +++ b/layout/reftests/svg/as-image/blue100x100-border-ref.html @@ -0,0 +1,5 @@ +<html> +<body> + <div style="width: 100px; height: 100px; border: 10px solid blue; box-sizing: border-box;"></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/blue100x100-ref.html b/layout/reftests/svg/as-image/blue100x100-ref.html new file mode 100644 index 0000000000..307fbd6bd3 --- /dev/null +++ b/layout/reftests/svg/as-image/blue100x100-ref.html @@ -0,0 +1,5 @@ +<html> +<body> + <div style="width: 100px; height: 100px; background: blue"></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/blue100x100.svg b/layout/reftests/svg/as-image/blue100x100.svg new file mode 100644 index 0000000000..a9c8eba794 --- /dev/null +++ b/layout/reftests/svg/as-image/blue100x100.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + width="100" height="100"> + <rect width="100%" height="100%" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/as-image/border-image-simple-1.html b/layout/reftests/svg/as-image/border-image-simple-1.html new file mode 100644 index 0000000000..e6b696e1d2 --- /dev/null +++ b/layout/reftests/svg/as-image/border-image-simple-1.html @@ -0,0 +1,6 @@ +<html> +<body> + <div style="height: 100px; width: 100px; + border-image: url('lime100x100.png') 0 fill;"/> +</body> +</html> diff --git a/layout/reftests/svg/as-image/border-image-simple-2.html b/layout/reftests/svg/as-image/border-image-simple-2.html new file mode 100644 index 0000000000..4eba8cee53 --- /dev/null +++ b/layout/reftests/svg/as-image/border-image-simple-2.html @@ -0,0 +1,6 @@ +<html> +<body> + <div style="height: 100px; width: 100px; + border-image: url('lime100x100-noSVGDimensions.svg') 0 fill;"/> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-1-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1-ref.html new file mode 100644 index 0000000000..b2be295acb --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1-ref.html @@ -0,0 +1,6 @@ +<html> +<body> + <div style="width: 100px; height: 100px; background: orange; position:absolute"></div> + <div style="width: 100px; height: 100px; background: lime; opacity: .25; position:absolute"></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-1.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1.html new file mode 100644 index 0000000000..ca6a362c34 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-1.html @@ -0,0 +1,22 @@ +<html> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + var image = document.getElementById("image"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + ctx.globalAlpha = 0.25; + ctx.drawImage(image, 0, 0); + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> + <img id="image" src="lime100x100.svg" style="display: none"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-2-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2-ref.html new file mode 100644 index 0000000000..563e60bb91 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2-ref.html @@ -0,0 +1,6 @@ +<html> +<body> + <embed style="width: 200px; height: 200px;" + src="squaredCircle-transparent.svg"/> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-alpha-2.html b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2.html new file mode 100644 index 0000000000..ca56934f6b --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-alpha-2.html @@ -0,0 +1,22 @@ +<html> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + var image = document.getElementById("image"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 200, 200); + + ctx.globalAlpha = 0.75; + ctx.drawImage(image, 0, 0, 200, 200); + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> + <img id="image" src="squaredCircle-viewBox-100x100.svg" style="display: none"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-origin-clean-1.html b/layout/reftests/svg/as-image/canvas-drawImage-origin-clean-1.html new file mode 100644 index 0000000000..c363bad581 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-origin-clean-1.html @@ -0,0 +1,24 @@ +<html> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + var image = document.getElementById("image"); + + // Draw the SVG image + ctx.drawImage(image, 0, 0); + + try { + canvas.toDataURL(); + } catch (ex) { + document.body.textContent = ex; + } + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> + <img id="image" src="lime100x100.svg" style="display: none"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-1a.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-1a.html new file mode 100644 index 0000000000..da382386f4 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-1a.html @@ -0,0 +1,27 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + // Instantiate an image. Once it has loaded, draw it & take snapshot. + var image = new Image(); + image.onload = function() { + // Note that our canvas is 100x100, so our scaled 200x200 image will + // get cropped to 100x100. + ctx.drawImage(image, 0, 0, 200, 200); + document.documentElement.removeAttribute("class"); + } + image.src ="lime100x100.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-1b.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-1b.html new file mode 100644 index 0000000000..94154d480e --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-1b.html @@ -0,0 +1,28 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + // Instantiate an image. Once it has loaded, draw it & take snapshot. + var image = new Image(); + image.onload = function() { + // Note that our canvas is 100x100, so our scaled 200x200 image will + // get cropped to 100x100. + ctx.scale(2, 2); // Scale our image-drawing by 2 + ctx.drawImage(image, 0, 0); + document.documentElement.removeAttribute("class"); + } + image.src ="lime100x100.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-1c.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-1c.html new file mode 100644 index 0000000000..92eed4e101 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-1c.html @@ -0,0 +1,26 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + // Instantiate an image. Once it has loaded, draw it & take snapshot. + var image = new Image(); + image.onload = function() { + ctx.scale(2, 2); // Scale our image-drawing by 2 + ctx.drawImage(image, 0, 0); + document.documentElement.removeAttribute("class"); + } + image.src ="lime50x50.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-2-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-2-ref.html new file mode 100644 index 0000000000..bd4585eaa9 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-2-ref.html @@ -0,0 +1,6 @@ +<html> +<body> + <embed style="width: 200px; height: 200px" + src="squaredCircle-viewBox-noSize.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-2a.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-2a.html new file mode 100644 index 0000000000..0e8cf233ff --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-2a.html @@ -0,0 +1,26 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 200, 200); + + // Instantiate an image. Draw it at a larger size, & take snapshot + // once it has loaded. + var image = new Image(); + image.onload = function() { + ctx.drawImage(image, 0, 0, 200, 200); + document.documentElement.removeAttribute("class"); + } + image.src ="squaredCircle-viewBox-100x100.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-scale-2b.html b/layout/reftests/svg/as-image/canvas-drawImage-scale-2b.html new file mode 100644 index 0000000000..f3ca821230 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-scale-2b.html @@ -0,0 +1,26 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 200, 200); + + // Instantiate an image. Once it has loaded, draw it & take snapshot. + var image = new Image(); + image.onload = function() { + ctx.scale(2, 2); + ctx.drawImage(image, 0, 0); + document.documentElement.removeAttribute("class"); + } + image.src ="squaredCircle-viewBox-100x100.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-simple-1a.html b/layout/reftests/svg/as-image/canvas-drawImage-simple-1a.html new file mode 100644 index 0000000000..b40d5fc39a --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-simple-1a.html @@ -0,0 +1,22 @@ +<html> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + var image = document.getElementById("image"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + // Draw the SVG image on top of our red + ctx.drawImage(image, 0, 0); + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> + <img id="image" src="lime100x100.svg" style="display: none"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-simple-1b.html b/layout/reftests/svg/as-image/canvas-drawImage-simple-1b.html new file mode 100644 index 0000000000..f3348b1e16 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-simple-1b.html @@ -0,0 +1,25 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + // Instantiate an image. Once it has loaded, draw it & take snapshot. + var image = new Image(); + image.onload = function() { + ctx.drawImage(image, 0, 0); + document.documentElement.removeAttribute("class"); + } + image.src ="lime100x100.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="200" height="200"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-slice-1a.html b/layout/reftests/svg/as-image/canvas-drawImage-slice-1a.html new file mode 100644 index 0000000000..6f173b7d6b --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-slice-1a.html @@ -0,0 +1,28 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + // Instantiate an image. Once it has loaded, draw it & take snapshot. + var image = new Image(); + image.onload = function() { + // This version of the test is "easier", in that the sampled region + // is offset from the red by 1px on all sides. This lets us avoid + // any pixel-rounding errors. + ctx.drawImage(image, 26, 26, 48, 48, 0, 0, 100, 100); + document.documentElement.removeAttribute("class"); + } + image.src ="limeInRed100x100.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-slice-1b.html b/layout/reftests/svg/as-image/canvas-drawImage-slice-1b.html new file mode 100644 index 0000000000..6b56ce1e60 --- /dev/null +++ b/layout/reftests/svg/as-image/canvas-drawImage-slice-1b.html @@ -0,0 +1,25 @@ +<html class="reftest-wait"> + <head> + <script type="text/javascript"> + function go() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // Draw some orange + ctx.fillStyle = "orange"; + ctx.fillRect(0, 0, 100, 100); + + // Instantiate an image. Once it has loaded, draw it & take snapshot. + var image = new Image(); + image.onload = function() { + ctx.drawImage(image, 25, 25, 50, 50, 0, 0, 100, 100); + document.documentElement.removeAttribute("class"); + } + image.src ="limeInRed100x100.svg"; + } + </script> + </head> + <body onload="go()"> + <canvas id="canvas" width="100" height="100"></canvas> +</body> +</html> diff --git a/layout/reftests/svg/as-image/canvas-drawImage-transform-restored-ref.html b/layout/reftests/svg/as-image/canvas-drawImage-transform-restored-ref.html new file mode 100644 index 0000000000..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..bf06b4c948 --- /dev/null +++ b/layout/reftests/svg/as-image/reftest.list @@ -0,0 +1,222 @@ +# Tests related to SVG being used as an image + +# zoom/ +include zoom/reftest.list + +# Background-image tests +== background-display-none-1.html about:blank +== background-simple-1.html lime100x100-ref.html +== background-simple-2.html lime100x100-ref.html + +# Sightly trickier background-image test +== background-viewBox-1.html lime100x100-ref.html + +# background tests with the background area getting resized +== background-resize-1.html lime100x100-ref.html +== background-resize-2.html lime100x100-ref.html +== background-resize-3.html lime100x100-ref.html +== background-resize-4.html lime100x100-ref.html + +# Test for stretching background images by different amounts in each dimension +== background-stretch-1.html background-stretch-1-ref.html + +# Tests for scaling background images +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 + +# Tests with -moz-image-rect() +== background-image-rect-1svg.html lime100x100-ref.html +== background-image-rect-1png.html lime100x100-ref.html +== background-image-rect-2.html lime100x100-ref.html + +# Test for border-image +== border-image-simple-1.html lime100x100-ref.html +== border-image-simple-2.html lime100x100-ref.html + +# Test for canvas "drawImage" method +== canvas-drawImage-simple-1a.html lime100x100-ref.html +== canvas-drawImage-simple-1b.html lime100x100-ref.html + +== canvas-drawImage-scale-1a.html lime100x100-ref.html +== canvas-drawImage-scale-1b.html lime100x100-ref.html +== canvas-drawImage-scale-1c.html lime100x100-ref.html + +fuzzy(0-1,0-2) fuzzy-if(!remoteCanvas,0-1,0-529) fuzzy-if(remoteCanvas,0-97,0-745) fuzzy-if(Android&&device,0-64,0-1212) == canvas-drawImage-scale-2a.html canvas-drawImage-scale-2-ref.html +fuzzy(0-1,0-2) fuzzy-if(!remoteCanvas,0-1,0-529) fuzzy-if(remoteCanvas,0-97,0-745) fuzzy-if(Android&&device,0-64,0-1212) == 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 + +fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),0-8,0-1) == list-simple-1.html list-simple-1-ref.html + +== svg-image-simple-1.svg lime100x100.svg +== svg-image-simple-2.svg lime100x100.svg +== svg-image-simple-3.svg lime100x100.svg + +# tests for <svg> files that include themselves as an <image> +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-1a.svg svg-image-recursive-1-ref.svg +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-1b.svg svg-image-recursive-1-ref.svg +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-2a.svg svg-image-recursive-2-ref.svg +fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu),0-1,0-1) == svg-image-recursive-2b.html svg-image-recursive-2-ref.svg + +# tests for external resources vs. data URIs in SVG as an image +== svg-image-datauri-1.html lime100x100.svg +HTTP == svg-image-datauri-1.html lime100x100.svg +== svg-image-external-1.html blue100x100.svg +HTTP == svg-image-external-1.html blue100x100.svg +== svg-stylesheet-datauri-1.html lime100x100.svg +HTTP == svg-stylesheet-datauri-1.html lime100x100.svg +== svg-stylesheet-external-1.html blue100x100.svg +HTTP == svg-stylesheet-external-1.html blue100x100.svg + +# tests for SVG <image> that should have a synthetic viewBox +== svg-image-synthetic-viewBox-01.svg svg-image-synthetic-viewBox-01-ref.svg + +# Test for painting problems with SVGs used in border images. +# XXXseth: The underlying problems also apply to media fragments, +# but the test case would be much simpler. This should be switched +# over to use media fragments once bug 790640 lands. +fuzzy(0-2,0-1) == svg-border-image-repaint-1.html svg-border-image-repaint-1-ref.html + +# Test that 'image-orientation: from-image' has no effect, since SVGs don't have EXIF data. +== image-orientation-viewbox-and-size.html?from-image image-orientation-viewbox-and-size.html?none +== image-orientation-viewbox-no-size.html?from-image image-orientation-viewbox-no-size.html?none + +# Tests that nonuniform scales work with SVG-as-image. +== nonuniform-scale-2d.html?0.5&1.0 nonuniform-scale-ref.html?50&100 +== nonuniform-scale-2d.html?1.0&0.5 nonuniform-scale-ref.html?100&50 +== nonuniform-scale-3d.html?0.5&1.0&0.5 nonuniform-scale-ref.html?50&100 +== nonuniform-scale-3d.html?1.0&0.5&0.5 nonuniform-scale-ref.html?100&50 + +# Sanity checks that nonuniform scales don't devolve to uniform scales. +!= nonuniform-scale-2d.html?0.3&1.0 nonuniform-scale-2d.html?0.3&0.3 +!= nonuniform-scale-2d.html?0.3&1.0 nonuniform-scale-2d.html?1.0&1.0 +!= nonuniform-scale-2d.html?1.0&0.3 nonuniform-scale-2d.html?0.3&0.3 +!= nonuniform-scale-2d.html?1.0&0.3 nonuniform-scale-2d.html?1.0&1.0 +!= nonuniform-scale-3d.html?0.3&1.0&0.3 nonuniform-scale-3d.html?0.3&0.3&0.3 +!= nonuniform-scale-3d.html?0.3&1.0&0.3 nonuniform-scale-3d.html?1.0&1.0&1.0 +!= nonuniform-scale-3d.html?1.0&0.3&0.3 nonuniform-scale-3d.html?0.3&0.3&0.3 +!= nonuniform-scale-3d.html?1.0&0.3&0.3 nonuniform-scale-3d.html?1.0&1.0&1.0 + +# Test for preserveAspectRatio with no-longer-supported "defer" keyword +== defer-unsupported-1.svg defer-unsupported-1-ref.svg diff --git a/layout/reftests/svg/as-image/squaredCircle-100x100.svg b/layout/reftests/svg/as-image/squaredCircle-100x100.svg new file mode 100644 index 0000000000..892cc0e8c6 --- /dev/null +++ b/layout/reftests/svg/as-image/squaredCircle-100x100.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + width="100" height="100" + shape-rendering="crispEdges"> + <rect x="2" y="2" height="96" width="96" + stroke-width="4" stroke="black" fill="yellow"/> + <circle cx="50" cy="50" r="46" style="fill: blue"/> +</svg> diff --git a/layout/reftests/svg/as-image/squaredCircle-100x50.svg b/layout/reftests/svg/as-image/squaredCircle-100x50.svg new file mode 100644 index 0000000000..57b5169581 --- /dev/null +++ b/layout/reftests/svg/as-image/squaredCircle-100x50.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" + width="100" height="50" + shape-rendering="crispEdges"> + <rect x="2" y="2" height="96" width="96" + stroke-width="4" stroke="black" fill="yellow"/> + <circle cx="50" cy="50" r="46" style="fill: blue"/> +</svg> diff --git a/layout/reftests/svg/as-image/squaredCircle-transparent.svg b/layout/reftests/svg/as-image/squaredCircle-transparent.svg new file mode 100644 index 0000000000..32bd67b634 --- /dev/null +++ b/layout/reftests/svg/as-image/squaredCircle-transparent.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" > + <rect x="0" y="0" height="100" width="100" fill="orange"/> + <g style="opacity:.75"> + <rect x="2" y="2" height="96" width="96" + stroke-width="4" stroke="black" fill="yellow"/> + <circle cx="50" cy="50" r="46" style="fill: blue"/> + </g> +</svg> diff --git a/layout/reftests/svg/as-image/squaredCircle-viewBox-100x100.svg b/layout/reftests/svg/as-image/squaredCircle-viewBox-100x100.svg new file mode 100644 index 0000000000..4912c656d0 --- /dev/null +++ b/layout/reftests/svg/as-image/squaredCircle-viewBox-100x100.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" + height="100" width="100" > + <rect x="2" y="2" height="96" width="96" + stroke-width="4" stroke="black" fill="yellow"/> + <circle cx="50" cy="50" r="46" style="fill: blue"/> +</svg> diff --git a/layout/reftests/svg/as-image/squaredCircle-viewBox-noSize.svg b/layout/reftests/svg/as-image/squaredCircle-viewBox-noSize.svg new file mode 100644 index 0000000000..c0665d15d6 --- /dev/null +++ b/layout/reftests/svg/as-image/squaredCircle-viewBox-noSize.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> + <rect x="2" y="2" height="96" width="96" + stroke-width="4" stroke="black" fill="yellow"/> + <circle cx="50" cy="50" r="46" style="fill: blue"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-1-ref.html b/layout/reftests/svg/as-image/svg-border-image-repaint-1-ref.html new file mode 100644 index 0000000000..bb11b225b6 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-border-image-repaint-1-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=809181 +--> +<html> + <head></head> + <body> + <iframe src="svg-border-image-repaint-iframe.html"></iframe> + </body> +</html> + diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-1.html b/layout/reftests/svg/as-image/svg-border-image-repaint-1.html new file mode 100644 index 0000000000..2f33345873 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-border-image-repaint-1.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=809181 +--> +<html class="reftest-wait"> + <head> + <script> + document.addEventListener('MozReftestInvalidate', function() { + document.getElementById('test').style.opacity = '1.0'; + document.documentElement.removeAttribute('class'); + }); + </script> + </head> + <body> + <iframe id="test" src="svg-border-image-repaint-iframe.html" style="opacity: 0.5"></iframe> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-helper.svg b/layout/reftests/svg/as-image/svg-border-image-repaint-helper.svg new file mode 100644 index 0000000000..ccc7824465 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-border-image-repaint-helper.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="UTF-8" ?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<svg viewBox="0 0 40 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> +<path fill="#000000" d=" M 0.00 0.00 L 20.00 0.00 C 20.00 6.67 20.00 13.33 20.00 20.00 C 13.33 20.00 6.67 20.00 0.00 20.00 L 0.00 0.00 Z" /> +<path fill="#ff0000" d=" M 20.00 0.00 L 40.00 0.00 C 40.00 6.67 40.00 13.33 40.00 20.00 C 33.33 20.00 26.67 20.00 20.00 20.00 C 20.00 13.33 20.00 6.67 20.00 0.00 Z" /> +</svg> diff --git a/layout/reftests/svg/as-image/svg-border-image-repaint-iframe.html b/layout/reftests/svg/as-image/svg-border-image-repaint-iframe.html new file mode 100644 index 0000000000..f0281228ed --- /dev/null +++ b/layout/reftests/svg/as-image/svg-border-image-repaint-iframe.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=809181 +--> +<html> + <head> + <style> + div { + background-color: green; + border-image: url("svg-border-image-repaint-helper.svg") 20 repeat; + border-image-width: 20px 20px 20px 20px; + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <div></div> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-datauri-1.html b/layout/reftests/svg/as-image/svg-image-datauri-1.html new file mode 100644 index 0000000000..3d7d171b55 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-datauri-1.html @@ -0,0 +1,5 @@ +<html> +<body style="margin: 0"> + <img src="svg-image-datauri.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-datauri.svg b/layout/reftests/svg/as-image/svg-image-datauri.svg new file mode 100644 index 0000000000..114a772325 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-datauri.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <!-- This blue rect should always be covered up by the <image>: --> + <circle cx="50" cy="50" r="50" fill="blue"/> + <image width="100" height="100" + xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAKJJREFUeNrt0QENAAAIw7CDf89gg5BOwlqZTHSmtgCIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAiIgAARECACAkRAgAgIEAERECACAkRAvrfrTQLGaH3qbAAAAABJRU5ErkJggg%3D%3D"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-external-1.html b/layout/reftests/svg/as-image/svg-image-external-1.html new file mode 100644 index 0000000000..3a13e55164 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-external-1.html @@ -0,0 +1,5 @@ +<html> +<body style="margin: 0"> + <img src="svg-image-external.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-external.svg b/layout/reftests/svg/as-image/svg-image-external.svg new file mode 100644 index 0000000000..721d4fe13c --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-external.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <!-- This blue rect should be covered up by the <image> when this SVG is + loaded as an image by a local document, but not when the document is + served over HTTP: --> + <rect width="100" height="100" fill="blue"/> + <image width="100" height="100" + xlink:href="lime100x100.png"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-recursive-1-ref.svg b/layout/reftests/svg/as-image/svg-image-recursive-1-ref.svg new file mode 100644 index 0000000000..b884f4e5bb --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-recursive-1-ref.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <circle cx="10" cy="10" r="10" fill="blue"/> + <circle cx="30" cy="30" r="10" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-recursive-1a.svg b/layout/reftests/svg/as-image/svg-image-recursive-1a.svg new file mode 100644 index 0000000000..2587877c6a --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-recursive-1a.svg @@ -0,0 +1,13 @@ +<!-- This SVG file uses itself as an image. Currently, we don't paint + recursively-referenced images beyond the first level. When this testcase + is viewed directly, it gets treated as a document (not an image), so its + <image> element is painted. However, the <image>'s own *internal* <image> + element does *not* get painted. So we end up painting two blue circles: + one for the <circle> and one for the <image>'s <circle> (and no more). --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <circle cx="10" cy="10" r="10" fill="blue"/> + <image x="20" y="20" width="100" height="100" + xlink:href="svg-image-recursive-1a.svg"/> <!-- my own filename --> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-recursive-1b.svg b/layout/reftests/svg/as-image/svg-image-recursive-1b.svg new file mode 100644 index 0000000000..3e5c9befe9 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-recursive-1b.svg @@ -0,0 +1,15 @@ +<!-- This SVG file uses itself as an image. Currently, we don't paint + recursively-referenced images beyond the first level. When this testcase + is viewed directly, it gets treated as a document (not an image), so its + <image> element is painted. However, the <image>'s own *internal* <image> + element does *not* get painted. So we end up painting two blue circles: + one for the <circle> and one for the <image>'s <circle> (and no more). --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <circle cx="10" cy="10" r="10" fill="blue"/> + <image x="20" y="20" width="100" height="100" + xlink:href="#foo"/> + <!-- When used as a URL, #foo evaluates to ${my_url}#foo, which (when treated + as an image URL) just turns into ${my_url}. --> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-recursive-2-ref.svg b/layout/reftests/svg/as-image/svg-image-recursive-2-ref.svg new file mode 100644 index 0000000000..e548c53f47 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-recursive-2-ref.svg @@ -0,0 +1,5 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <circle cx="10" cy="10" r="10" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-recursive-2a.svg b/layout/reftests/svg/as-image/svg-image-recursive-2a.svg new file mode 100644 index 0000000000..651c29e85e --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-recursive-2a.svg @@ -0,0 +1,10 @@ +<!-- The SVG file referenced in our <image> tag uses itself as an <image>. + Currently, we don't paint recursively-referenced images beyond the first + level. So, the <image> element inside our helper document doesn't get + painted, and we end up only showing one blue circle. --> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <image width="100" height="100" + xlink:href="svg-image-recursive-1a.svg"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-recursive-2b.html b/layout/reftests/svg/as-image/svg-image-recursive-2b.html new file mode 100644 index 0000000000..2e0708c1d9 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-recursive-2b.html @@ -0,0 +1,9 @@ +<!-- The SVG file referenced in our <img> tag uses itself as an <image>. + Currently, we don't paint recursively-referenced images beyond the first + level. So, the <image> element inside our helper document doesn't get + painted, and we end up only showing one blue circle. --> +<html> +<body style="margin: 0"> + <img src="svg-image-recursive-1a.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-simple-1.svg b/layout/reftests/svg/as-image/svg-image-simple-1.svg new file mode 100644 index 0000000000..ad657ce2ab --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-simple-1.svg @@ -0,0 +1,6 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <rect width="100%" height="100%" fill="red"/> + <image width="100%" height="100%" xlink:href="lime100x100.svg"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-simple-2.svg b/layout/reftests/svg/as-image/svg-image-simple-2.svg new file mode 100644 index 0000000000..34cc2277d5 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-simple-2.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <rect width="100%" height="100%" fill="red"/> + <image width="100%" height="100%" + xlink:href="lime100x100-noSVGDimensions.svg"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-simple-3.svg b/layout/reftests/svg/as-image/svg-image-simple-3.svg new file mode 100644 index 0000000000..31d064a0a8 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-simple-3.svg @@ -0,0 +1,7 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <rect width="100%" height="100%" fill="red"/> + <image width="100%" height="100%" + xlink:href="limeInRed-noSVGDimensions-viewBox.svg"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-1.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-1.svg new file mode 100644 index 0000000000..9a185877a6 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-1.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> + <circle cx="100" cy="100" r="100" fill="blue"/> +</svg> + diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-2.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-2.svg new file mode 100644 index 0000000000..83f49b787f --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-helper-2.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <circle cx="50" cy="50" r="50" fill="blue"/> +</svg> + diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-ref.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-ref.svg new file mode 100644 index 0000000000..c93d68fc30 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01-ref.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <image width="100" height="100" href="svg-image-synthetic-viewBox-01-helper-2.svg"/> +</svg> + diff --git a/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01.svg b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01.svg new file mode 100644 index 0000000000..449c61862e --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-synthetic-viewBox-01.svg @@ -0,0 +1,4 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <image width="100" height="100" href="svg-image-synthetic-viewBox-01-helper-1.svg"/> +</svg> + diff --git a/layout/reftests/svg/as-image/svg-image-util.css b/layout/reftests/svg/as-image/svg-image-util.css new file mode 100644 index 0000000000..3d5a9338f6 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-util.css @@ -0,0 +1,3 @@ +body { margin: 0px; line-height: 10px; } +img { background: purple; vertical-align: top; } +embed { background: purple; vertical-align: top; } diff --git a/layout/reftests/svg/as-image/svg-image-util.js b/layout/reftests/svg/as-image/svg-image-util.js new file mode 100644 index 0000000000..ea84259238 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-util.js @@ -0,0 +1,173 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +// Standard values to use for <img>/<embed> height & width, if requested. +var HOST_NODE_HEIGHT = "20"; +var HOST_NODE_WIDTH = "30"; + +// All the possible values of "align" +const ALIGN_VALS = ["none", + "xMinYMin", "xMinYMid", "xMinYMax", + "xMidYMin", "xMidYMid", "xMidYMax", + "xMaxYMin", "xMaxYMid", "xMaxYMax"]; + +// All the possible values of "meetOrSlice" +const MEETORSLICE_VALS = [ "meet", "slice" ]; + +/** + * Generates full data URI for an SVG document, with the given parameters + * on the SVG element. + * + * @param aViewboxArr An array of four numbers, representing the + * viewBox attribute, or null for no viewBox. + * @param aWidth The width attribute, or null for no width. + * @param aHeight The height attribute, or null for no height. + * @param aAlign The 'align' component of the + * preserveAspectRatio attribute, or null for none. + * @param aMeetOrSlice The 'meetOrSlice' component of the + * preserveAspectRatio attribute, or null for + * none. (If non-null, implies non-null value for + * aAlign.) + * @param aViewParams Parameters to use for the view element. + * @param aFragmentIdentifier The SVG fragment identifier. + */ +function generateSVGDataURI(aViewboxArr, aWidth, aHeight, + aAlign, aMeetOrSlice, + aViewParams, aFragmentIdentifier) { + // prefix + var datauri = "data:image/svg+xml," + // Begin the SVG tag + datauri += "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20shape-rendering%3D%22crispEdges%22"; + + // Append the custom chunk from our params + // If we're working with views, the align customisation is applied there instead + datauri += generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight, + aViewParams ? null : aAlign, + aMeetOrSlice); + + // Add 'font-size' just in case the client wants to use ems + datauri += "%20font-size%3D%22" + "10px" + "%22"; + + // Put closing right bracket on SVG tag + datauri += "%3E"; + + if (aViewParams) { + // Give the view the id of the fragment identifier + datauri += "%3Cview%20id%3D%22" + aFragmentIdentifier + "%22"; + + // Append the custom chunk from our view params + datauri += generateSVGAttrsForParams(aViewParams.viewBox, null, null, + aAlign, aViewParams.meetOrSlice); + + datauri += "%2F%3E"; + } + + // Add the rest of the SVG document + datauri += "%3Crect%20x%3D%221%22%20y%3D%221%22%20height%3D%2218%22%20width%3D%2218%22%20stroke-width%3D%222%22%20stroke%3D%22black%22%20fill%3D%22yellow%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%228%22%20style%3D%22fill%3A%20blue%22%2F%3E%3C%2Fsvg%3E"; + + return datauri; +} + +// Generates just the chunk of a data URI that's relevant to +// the given params. +function generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight, + aAlign, aMeetOrSlice) { + var str = ""; + if (aViewboxArr) { + str += "%20viewBox%3D%22"; + for (var i in aViewboxArr) { + str += aViewboxArr[i]; + if (i != aViewboxArr.length - 1) { + str += "%20"; + } + } + str += "%22"; + } + if (aWidth) { + str += "%20width%3D%22" + aWidth + "%22"; + } + if (aHeight) { + str += "%20height%3D%22" + aHeight + "%22"; + } + if (aAlign) { + str += "%20preserveAspectRatio%3D%22" + aAlign; + if (aMeetOrSlice) { + str += "%20" + aMeetOrSlice; + } + str += "%22"; + } + + return str; +} + +// Returns a newly-generated element with the given tagname, the given URI +// for its |src| attribute, and the given width & height values. +function generateHostNode(aHostNodeTagName, aUri, + aHostNodeWidth, aHostNodeHeight) { + var elem = document.createElement(aHostNodeTagName); + elem.setAttribute("src", aUri); + + if (aHostNodeWidth) { + elem.setAttribute("width", aHostNodeWidth); + } + if (aHostNodeHeight) { + elem.setAttribute("height", aHostNodeHeight); + } + + return elem; +} + +// THIS IS THE CHIEF HELPER FUNCTION TO BE CALLED BY CLIENTS +function appendSVGArrayWithParams(aSVGParams, aHostNodeTagName) { + // These are width & height vals that will be used for the *host node*. + // (i.e. the <img> or <embed> node -- not the <svg> node) + var hostNodeWidthVals = [ null, HOST_NODE_WIDTH ]; + var hostNodeHeightVals = [ null, HOST_NODE_HEIGHT ]; + + for (var i = 0; i < hostNodeWidthVals.length; i++) { + var hostNodeWidth = hostNodeWidthVals[i]; + for (var j = 0; j < hostNodeHeightVals.length; j++) { + var hostNodeHeight = hostNodeHeightVals[j]; + appendSVGSubArrayWithParams(aSVGParams, aHostNodeTagName, + hostNodeWidth, hostNodeHeight); + } + } +} + +// Helper function for above, for a fixed [host-node-width][host-node-height] +function appendSVGSubArrayWithParams(aSVGParams, aHostNodeTagName, + aHostNodeWidth, aHostNodeHeight) { + var rootNode = document.getElementsByTagName("body")[0]; + for (var k = 0; k < ALIGN_VALS.length; k++) { + var alignVal = ALIGN_VALS[k]; + if (!aSVGParams.meetOrSlice) { + alignVal = "none"; + } + + // Generate the Data URI + var uri = generateSVGDataURI(aSVGParams.viewBox, + aSVGParams.width, aSVGParams.height, + alignVal, + aSVGParams.meetOrSlice, + aSVGParams.view, + aSVGParams.fragmentIdentifier); + + if (aSVGParams.fragmentIdentifier) { + uri += "#" + aSVGParams.fragmentIdentifier; + } + + // Generate & append the host node element + var hostNode = generateHostNode(aHostNodeTagName, uri, + aHostNodeWidth, aHostNodeHeight); + rootNode.appendChild(hostNode); + + // Cosmetic: Add a newline when we get halfway through the ALIGN_VALS + // and then again when we reach the end + if (k + 1 == ALIGN_VALS.length / 2 || + k + 1 == ALIGN_VALS.length) { + rootNode.appendChild(document.createElement("br")); + } + } +} diff --git a/layout/reftests/svg/as-image/svg-image-visited-1-ref.html b/layout/reftests/svg/as-image/svg-image-visited-1-ref.html new file mode 100644 index 0000000000..7539a7ec98 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <title>Reference for bug 641731</title> + <style> + .imgRef, .embedRef { + height: 100px; + width: 100px; + border: 1px solid black; + display: inline-block; + } + .imgRef { background: lime } + .embedRef { background: purple } + </style> + </head> + <body> + <div class="imgRef"></div> + <div class="embedRef"></div> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1a-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1a-helper.svg new file mode 100644 index 0000000000..9843e85f59 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1a-helper.svg @@ -0,0 +1,34 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + height="100" width="100"> + <style> + <![CDATA[ + a:link {/* Note: an a:link block was needed to trigger bug 641731. */ } + a:link > rect { fill: lime; } + a:visited > rect { fill: purple; } + ]]> + </style> + + <!-- Note: the <a> element below links to a visited page, so it'll + normally be treated as visited. However, in an image context, we want to + ignore visitedness. --> + <a xlink:href="visited-page.html" id="foo"> + <rect x="0" y="0" width="100" height="100" fill="orange"/> + </a> + + <!-- This trivial SMIL animation ensures that we *won't* get repainted via + imagelib's SurfaceCache optimization. Specifically, we want to bypass + the SurfaceCache so that we can ensure that repaints of this file (as an + image) will *actually repaint the SVG content*, rather than painting a + previously-rasterized snapshot (which may've been rasterized before we + had any chance to consider :visited styles). --> + <rect x="0" y="0" width="100" height="100" fill="teal"> + <set attributeName="fill" to="transparent" + begin="0s" duration="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1a.html b/layout/reftests/svg/as-image/svg-image-visited-1a.html new file mode 100644 index 0000000000..53aff74c9b --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1a.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <title>Test for bug 641731</title> + <style> + img, embed { + height: 100px; + width: 100px; + border: 1px solid black; + } + </style> + </head> + <body> + <!-- This shouldn't show visited link coloring: --> + <img src="svg-image-visited-1a-helper.svg"> + <!-- This should show visited link coloring: --> + <embed src="svg-image-visited-1a-helper.svg"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1b-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1b-helper.svg new file mode 100644 index 0000000000..2a47f02d58 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1b-helper.svg @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + height="100" width="100"> + <style> + <![CDATA[ + a:link > rect { fill: lime; } + a:visited > rect { fill: purple; } + ]]> + </style> + + <!-- Note: the <a> element below links to a visited page, so it'll + normally be treated as visited. However, in an image context, we want to + ignore visitedness. --> + <a xlink:href="visited-page.html" id="foo"> + <rect x="0" y="0" width="100" height="100" fill="orange"/> + </a> + + <!-- This trivial SMIL animation ensures that we *won't* get repainted via + imagelib's SurfaceCache optimization. Specifically, we want to bypass + the SurfaceCache so that we can ensure that repaints of this file (as an + image) will *actually repaint the SVG content*, rather than painting a + previously-rasterized snapshot (which may've been rasterized before we + had any chance to consider :visited styles). --> + <rect x="0" y="0" width="100" height="100" fill="teal"> + <set attributeName="fill" to="transparent" + begin="0s" duration="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1b.html b/layout/reftests/svg/as-image/svg-image-visited-1b.html new file mode 100644 index 0000000000..05227cc85d --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1b.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <title>Test for bug 641731</title> + <style> + img, embed { + height: 100px; + width: 100px; + border: 1px solid black; + } + </style> + </head> + <body> + <!-- This shouldn't show visited link coloring: --> + <img src="svg-image-visited-1b-helper.svg"> + <!-- This should show visited link coloring: --> + <embed src="svg-image-visited-1b-helper.svg"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1c-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1c-helper.svg new file mode 100644 index 0000000000..ca688a2b55 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1c-helper.svg @@ -0,0 +1,33 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + height="100" width="100"> + <style> + <![CDATA[ + a:link {/* Note: an a:link block was needed to trigger bug 641731. */ } + a:link > rect { fill: lime; } + a:visited > rect { fill: purple; } + ]]> + </style> + + <!-- Note: our mochitest runner visits "visited-page.html" early on. + Nonetheless, as an image, we should ignore visitedness. --> + <a xlink:href="visited-page.html" id="foo"> + <rect x="0" y="0" width="100" height="100" fill="orange"/> + </a> + + <!-- This trivial SMIL animation ensures that we *won't* get repainted via + imagelib's SurfaceCache optimization. Specifically, we want to bypass + the SurfaceCache so that we can ensure that repaints of this file (as an + image) will *actually repaint the SVG content*, rather than painting a + previously-rasterized snapshot (which may've been rasterized before we + had any chance to consider :visited styles). --> + <rect x="0" y="0" width="100" height="100" fill="teal"> + <set attributeName="fill" to="transparent" + begin="0s" duration="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1c.html b/layout/reftests/svg/as-image/svg-image-visited-1c.html new file mode 100644 index 0000000000..f016d5cebe --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1c.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <title>Test for bug 641731</title> + <style> + img, embed { + height: 100px; + width: 100px; + border: 1px solid black; + } + </style> + </head> + <body> + <!-- This shouldn't show visited link coloring: --> + <img src="svg-image-visited-1c-helper.svg"> + <!-- This should show visited link coloring: --> + <embed src="svg-image-visited-1c-helper.svg"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1d-helper.svg b/layout/reftests/svg/as-image/svg-image-visited-1d-helper.svg new file mode 100644 index 0000000000..cc62c3a27c --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1d-helper.svg @@ -0,0 +1,32 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/licenses/publicdomain/ + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + height="100" width="100"> + <style> + <![CDATA[ + a:link > rect { fill: lime; } + a:visited > rect { fill: purple; } + ]]> + </style> + + <!-- Note: our mochitest runner visits "visited-page.html" early on. + Nonetheless, as an image, we should ignore visitedness. --> + <a xlink:href="visited-page.html" id="foo"> + <rect x="0" y="0" width="100" height="100" fill="orange"/> + </a> + + <!-- This trivial SMIL animation ensures that we *won't* get repainted via + imagelib's SurfaceCache optimization. Specifically, we want to bypass + the SurfaceCache so that we can ensure that repaints of this file (as an + image) will *actually repaint the SVG content*, rather than painting a + previously-rasterized snapshot (which may've been rasterized before we + had any chance to consider :visited styles). --> + <rect x="0" y="0" width="100" height="100" fill="teal"> + <set attributeName="fill" to="transparent" + begin="0s" duration="indefinite"/> + </rect> +</svg> diff --git a/layout/reftests/svg/as-image/svg-image-visited-1d.html b/layout/reftests/svg/as-image/svg-image-visited-1d.html new file mode 100644 index 0000000000..39005b39d3 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-image-visited-1d.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html> + <head> + <title>Test for bug 641731</title> + <style> + img, embed { + height: 100px; + width: 100px; + border: 1px solid black; + } + </style> + </head> + <body> + <!-- This shouldn't show visited link coloring: --> + <img src="svg-image-visited-1d-helper.svg"> + <!-- This should show visited link coloring: --> + <embed src="svg-image-visited-1d-helper.svg"> + </body> +</html> diff --git a/layout/reftests/svg/as-image/svg-stylesheet-datauri-1.html b/layout/reftests/svg/as-image/svg-stylesheet-datauri-1.html new file mode 100644 index 0000000000..9b99258f00 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-stylesheet-datauri-1.html @@ -0,0 +1,5 @@ +<html> +<body style="margin: 0"> + <img src="svg-stylesheet-datauri.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/svg-stylesheet-datauri.svg b/layout/reftests/svg/as-image/svg-stylesheet-datauri.svg new file mode 100644 index 0000000000..003e150179 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-stylesheet-datauri.svg @@ -0,0 +1,8 @@ +<?xml-stylesheet href="data:text/css,rect%20%7B%20fill%3A%20lime%20%7D%0A" + type="text/css"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <!-- This blue rect should always be styled as lime by the stylesheet: --> + <rect width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/as-image/svg-stylesheet-external-1.html b/layout/reftests/svg/as-image/svg-stylesheet-external-1.html new file mode 100644 index 0000000000..c6815579b9 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-stylesheet-external-1.html @@ -0,0 +1,5 @@ +<html> +<body style="margin: 0"> + <img src="svg-stylesheet-external.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/svg-stylesheet-external.css b/layout/reftests/svg/as-image/svg-stylesheet-external.css new file mode 100644 index 0000000000..70025dd20a --- /dev/null +++ b/layout/reftests/svg/as-image/svg-stylesheet-external.css @@ -0,0 +1 @@ +rect { fill: lime } diff --git a/layout/reftests/svg/as-image/svg-stylesheet-external.svg b/layout/reftests/svg/as-image/svg-stylesheet-external.svg new file mode 100644 index 0000000000..2b288e4268 --- /dev/null +++ b/layout/reftests/svg/as-image/svg-stylesheet-external.svg @@ -0,0 +1,9 @@ +<?xml-stylesheet href="svg-stylesheet-external.css" type="text/css"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + width="100" height="100"> + <!-- This blue rect should be styled as lime by the stylesheet when this SVG + is loaded as an image by a local document, but not when the document is + served over HTTP: --> + <rect width="100" height="100" fill="blue"/> +</svg> diff --git a/layout/reftests/svg/as-image/transparent100x100-w-border-ref.html b/layout/reftests/svg/as-image/transparent100x100-w-border-ref.html new file mode 100644 index 0000000000..f0727820c9 --- /dev/null +++ b/layout/reftests/svg/as-image/transparent100x100-w-border-ref.html @@ -0,0 +1,5 @@ +<html> +<body> + <div style="width: 100px; height: 100px; border: 1px solid black"></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/white-rect-no-viewbox.svg b/layout/reftests/svg/as-image/white-rect-no-viewbox.svg new file mode 100644 index 0000000000..76a7efd3dc --- /dev/null +++ b/layout/reftests/svg/as-image/white-rect-no-viewbox.svg @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="utf-8"?> + +<svg version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <rect width="6" height="30" style="fill:white;" /> +</svg> diff --git a/layout/reftests/svg/as-image/white-rect-with-viewbox.svg b/layout/reftests/svg/as-image/white-rect-with-viewbox.svg new file mode 100644 index 0000000000..6bb59d19a4 --- /dev/null +++ b/layout/reftests/svg/as-image/white-rect-with-viewbox.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="utf-8"?>
+
+<svg version="1.1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="6px"
+ height="30px"
+ viewBox="0 0 6 30">
+
+ <rect width="6" height="30" style="fill:white;" />
+</svg>
diff --git a/layout/reftests/svg/as-image/zoom/circle-large.svg b/layout/reftests/svg/as-image/zoom/circle-large.svg new file mode 100644 index 0000000000..a097f3c666 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/circle-large.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="80"> + <circle cx="40" cy="40" r="40" style="fill: green"/> +</svg> diff --git a/layout/reftests/svg/as-image/zoom/circle-small.svg b/layout/reftests/svg/as-image/zoom/circle-small.svg new file mode 100644 index 0000000000..b0cba24a65 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/circle-small.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20"> + <circle cx="10" cy="10" r="10" style="fill: green"/> +</svg> diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomIn-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomIn-1.html new file mode 100644 index 0000000000..b4eadba92e --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomIn-1.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<head> + <style> + body { + margin: 0px; + padding: 0px; + border: 0px; + } + div { + background: url('circle-small.svg'); + background-size: 40px 40px; + background-repeat: repeat; + margin: 0px; + padding: 0px; + border: 0px; + width: 80px; + height: 80px; + transform: scale(2.0); + transform-origin: 0 0; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomOut-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomOut-1.html new file mode 100644 index 0000000000..db0e6c06b9 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-transform-zoomOut-1.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<head> + <style> + body { + margin: 0px; + padding: 0px; + border: 0px; + } + div { + background: url('circle-large.svg'); + background-size: 40px 40px; + background-repeat: repeat; + margin: 0px; + padding: 0px; + border: 0px; + width: 80px; + height: 80px; + transform: scale(0.5); + transform-origin: 0 0; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1-ref.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1-ref.html new file mode 100644 index 0000000000..81e6011e62 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<head> + <style> + body { + margin: 0px; + padding: 0px; + border: 0px; + } + div { + background: url('circle-large.svg'); + background-size: 80px 80px; + background-repeat: repeat; + margin: 0px; + padding: 0px; + border: 0px; + width: 160px; + height: 160px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1.html new file mode 100644 index 0000000000..de39990b95 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomIn-1.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html reftest-zoom="2.0"> +<head> + <style> + body { + margin: 0px; + padding: 0px; + border: 0px; + } + div { + background: url('circle-small.svg'); + background-size: 40px 40px; + background-repeat: repeat; + margin: 0px; + padding: 0px; + border: 0px; + width: 80px; + height: 80px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1-ref.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1-ref.html new file mode 100644 index 0000000000..48f2d05ff7 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html> +<head> + <style> + body { + margin: 0px; + padding: 0px; + border: 0px; + } + div { + background: url('circle-small.svg'); + background-size: 20px 20px; + background-repeat: repeat; + margin: 0px; + padding: 0px; + border: 0px; + width: 40px; + height: 40px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1.html b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1.html new file mode 100644 index 0000000000..75cd1d61af --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-fuzzy-zoomOut-1.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- Any copyright is dedicated to the Public Domain. + - http://creativecommons.org/publicdomain/zero/1.0/ --> +<html reftest-zoom="0.5"> +<head> + <style> + body { + margin: 0px; + padding: 0px; + border: 0px; + } + div { + background: url('circle-large.svg'); + background-size: 40px 40px; + background-repeat: repeat; + margin: 0px; + padding: 0px; + border: 0px; + width: 80px; + height: 80px; + } + </style> +</head> +<body> + <div></div> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/img-zoomIn-1.html b/layout/reftests/svg/as-image/zoom/img-zoomIn-1.html new file mode 100644 index 0000000000..cc31a933ed --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-zoomIn-1.html @@ -0,0 +1,5 @@ +<html reftest-zoom="1.5"> +<body> + <img src="squaredCircle.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/img-zoomOut-1.html b/layout/reftests/svg/as-image/zoom/img-zoomOut-1.html new file mode 100644 index 0000000000..5133acb8b4 --- /dev/null +++ b/layout/reftests/svg/as-image/zoom/img-zoomOut-1.html @@ -0,0 +1,5 @@ +<html reftest-zoom="0.5"> +<body> + <img src="squaredCircle.svg"> +</body> +</html> diff --git a/layout/reftests/svg/as-image/zoom/reftest.list b/layout/reftests/svg/as-image/zoom/reftest.list new file mode 100644 index 0000000000..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..e0e4fa34a0 --- /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="-moz-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..a358f7e541 --- /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="-moz-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..bb66b5041c --- /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-6,12000-19950) fuzzy-if(swgl,5-10,13600-20260) fuzzy-if(Android&&device&&!swgl,6-6,19986-19986) == long-chain.html long-chain-ref.html # Win10: Bug 1258241 +== moz-element.html moz-element-ref.html +fuzzy-if(!useDrawSnapshot,13-15,7670-7982) fuzzy-if(!useDrawSnapshot&&swgl,11-12,14052-14056) fuzzy-if(Android&&device&&!swgl,13-13,13505-13505) == 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.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..d32dc0d4d0 --- /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 +== clipPath-and-mask-on-outflowElement-01a.html clipPath-on-outflowElement-01-ref.html +== 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 +== clipPath-on-outflowElement-01a.html clipPath-on-outflowElement-01-ref.html +== 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 +== mask-on-outflowElement-01a.html clipPath-on-outflowElement-01-ref.html +== 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-32,0-223) fuzzy-if(winWidget&&!swgl&&!/^Windows\x20NT\x206\.1/.test(http.oscpu),78-96,21684-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 +fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),0-3,0-4) == 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 +== 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(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-1.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-2.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-3.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-4.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-5.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-6.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-7.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-8.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) skip-if(geckoview) == fragid-shadow-9.html fragid-shadow-ref.html # bug 1560367 for GV+WR, bug 1717061 for Win 7 +skip-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)) 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/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..4437da4299 --- /dev/null +++ b/layout/reftests/svg/sizing/reftest.list @@ -0,0 +1,311 @@ + +# 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 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/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..ddb0ffe454 --- /dev/null +++ b/layout/reftests/svg/smil/anim-pattern-attr-presence-01-ref.svg @@ -0,0 +1,103 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 600"> + <!-- 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> + <!-- 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..b33a58fa27 --- /dev/null +++ b/layout/reftests/svg/smil/anim-pattern-attr-presence-01.svg @@ -0,0 +1,138 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 600"> + <!-- 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> + <!-- 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-02-ref.svg b/layout/reftests/svg/smil/anim-pattern-attr-presence-02-ref.svg new file mode 100644 index 0000000000..cfe0027d5f --- /dev/null +++ b/layout/reftests/svg/smil/anim-pattern-attr-presence-02-ref.svg @@ -0,0 +1,35 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200"> + <!-- 1. 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> + <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> + <!-- 2. 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 100)"> + <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-02.svg b/layout/reftests/svg/smil/anim-pattern-attr-presence-02.svg new file mode 100644 index 0000000000..e0d2e35dff --- /dev/null +++ b/layout/reftests/svg/smil/anim-pattern-attr-presence-02.svg @@ -0,0 +1,52 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200"> + <!-- Bug 544809 - nsSVGPatternFrame::GetPatternWithAttr and callers should + take account of SMIL animation. + + This test is a continuation of anim-pattern-attr-presence-01.svg but is + separated because it currently fails due to bug 621651. Once that bug is + resolved the tests in this file should be merged into + anim-pattern-attr-presence-01.svg + --> + <!-- 1. x, y: defaults to 0 --> + <!-- Currently broken by bug 621651 --> + <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> + <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> + <!-- 2. width, height: defaults to 0 (disables rendering) --> + <!-- Currently broken by bug 621651 --> + <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 100)"> + <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..0df307526f --- /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('end', 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..1b700f180a --- /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('end', 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..16469b30a5 --- /dev/null +++ b/layout/reftests/svg/smil/reftest.list @@ -0,0 +1,297 @@ +# 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 +fails == anim-pattern-attr-presence-02.svg anim-pattern-attr-presence-02-ref.svg +# ^ bug 621651 +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..bf2b042532 --- /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; -moz-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..9ec40cbfee --- /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="-moz-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..7a2499e1ce --- /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; -moz-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..eae4a6c899 --- /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="-moz-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..b820b4ff3c --- /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; -moz-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..8bc634f53d --- /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="-moz-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..a4058361f5 --- /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; -moz-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..74f4c5197e --- /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; -moz-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..c5656d134b --- /dev/null +++ b/layout/reftests/svg/svg-integration/clip-path/clip-path-polygon-010.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 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(0% 25%, 50% 50px, 100px 75%, 0 150px) fill-box"></div> +</body> +</html>
\ No newline at end of file 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..914c4f6168 --- /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-920) == clip-path-circle-014.html clip-path-circle-007-ref.html +fuzzy-if(!useDrawSnapshot,34-70,696-920) == clip-path-circle-015.html clip-path-circle-008-ref.html +fuzzy-if(!useDrawSnapshot,34-70,696-920) == 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-5) == 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..644bafb4f3 --- /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) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),55-56,200-200) == 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) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu),55-56,382-382) == 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> |
