diff options
Diffstat (limited to 'testing/web-platform/tests/svg/render')
18 files changed, 329 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/render/foreignObject-in-non-rendered-getComputedStyle.html b/testing/web-platform/tests/svg/render/foreignObject-in-non-rendered-getComputedStyle.html new file mode 100644 index 0000000000..409f1044a3 --- /dev/null +++ b/testing/web-platform/tests/svg/render/foreignObject-in-non-rendered-getComputedStyle.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>SVG Test: Resolved width inside non-rendered foreignObject</title> +<link rel="help" href="https://www.w3.org/TR/SVG2/render.html#Rendered-vs-NonRendered"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<svg> + <radialGradient> + <pattern> + <foreignObject id="foreignObject"> + <div id="foRoot"></div> + </foreignObject> + </pattern> + </radialGradient> +</svg> +<script> + test(() => { + assert_equals(getComputedStyle(foreignObject).width, "auto", "Non-rendered foreignObject should have width computed to 'auto'."); + assert_equals(getComputedStyle(foRoot).width, "auto", "Non-rendered block inside foreignObject should have width computed to 'auto'."); + }, "Test that we don't generated boxes for foreignObject in non-rendered SVG."); +</script> diff --git a/testing/web-platform/tests/svg/render/reftests/blending-001-ref.svg b/testing/web-platform/tests/svg/render/reftests/blending-001-ref.svg new file mode 100644 index 0000000000..dcd39a8a1d --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/blending-001-ref.svg @@ -0,0 +1,32 @@ +<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" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>'mix-blend-mode' with 'isolation'</title> + <html:link rel="author" + title="Tavmjong Bah" + href="http://tavmjong.free.fr"/> + </g> + + <g id="test-body-content"> + <g> + <rect x="120" y="80" width="160" height="160" fill="red"/> + <rect x="200" y="80" width="160" height="160" fill="lime"/> + <rect x="160" y="160" width="160" height="160" fill="blue"/> + <rect x="200" y="160" width="80" height="80" fill="#ffffff"/> + <rect x="200" y="80" width="80" height="80" fill="#ffff00"/> + <rect x="160" y="160" width="40" height="80" fill="#ff00ff"/> + <rect x="280" y="160" width="40" height="80" fill="#00ffff"/> + </g> + + <!-- Stroke to prevent aliasing from effecting results. --> + <g style="fill:none;stroke:black;stroke-width:2px"> + <rect x="120" y="80" width="160" height="160"/> + <rect x="200" y="80" width="160" height="160"/> + <rect x="160" y="160" width="160" height="160"/> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/render/reftests/blending-001.svg b/testing/web-platform/tests/svg/render/reftests/blending-001.svg new file mode 100644 index 0000000000..f8fcf9fae4 --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/blending-001.svg @@ -0,0 +1,47 @@ +<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" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>'mix-blend-mode'</title> + <html:link rel="author" + title="Tavmjong Bah" + href="http://tavmjong.free.fr"/> + <html:link rel="help" + href="https://www.w3.org/TR/SVG2/render.html#PaintersModel"/> + <html:link rel="match" href="blending-001-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + rect { + mix-blend-mode: screen; + } + + #edgecover > rect { + mix-blend-mode: normal; + } + + g { + isolation: isolate; + } + </style> + + <g id="test-body-content"> + + <g> + <rect x="120" y="80" width="160" height="160" fill="red"/> + <rect x="200" y="80" width="160" height="160" fill="lime"/> + <rect x="160" y="160" width="160" height="160" fill="blue"/> + </g> + + <!-- Stroke to prevent aliasing from effecting results. --> + <g style="fill:none;stroke:black;stroke-width:2px" id="edgecover"> + <rect x="120" y="80" width="160" height="160"/> + <rect x="200" y="80" width="160" height="160"/> + <rect x="160" y="160" width="160" height="160"/> + </g> + + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/render/reftests/blending-002-ref.svg b/testing/web-platform/tests/svg/render/reftests/blending-002-ref.svg new file mode 100644 index 0000000000..df6f29fa3b --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/blending-002-ref.svg @@ -0,0 +1,32 @@ +<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" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>'mix-blend-mode' with 'isolation'</title> + <html:link rel="author" + title="Tavmjong Bah" + href="http://tavmjong.free.fr"/> + </g> + + <g id="test-body-content"> + <g> + <rect x="120" y="80" width="160" height="160" fill="red"/> + <rect x="200" y="80" width="160" height="160" fill="lime"/> + <rect x="160" y="160" width="160" height="160" fill="blue"/> + <rect x="200" y="160" width="80" height="80" fill="#00ffff"/> + <rect x="200" y="80" width="80" height="80" fill="#00ff00"/> + <rect x="160" y="160" width="40" height="80" fill="#0000ff"/> + <rect x="280" y="160" width="40" height="80" fill="#00ffff"/> + </g> + + <!-- Stroke to prevent aliasing from effecting results. --> + <g style="fill:none;stroke:black;stroke-width:2px"> + <rect x="120" y="80" width="160" height="160"/> + <rect x="200" y="80" width="160" height="160"/> + <rect x="160" y="160" width="160" height="160"/> + </g> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/render/reftests/blending-002.svg b/testing/web-platform/tests/svg/render/reftests/blending-002.svg new file mode 100644 index 0000000000..d74333c96f --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/blending-002.svg @@ -0,0 +1,45 @@ +<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" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>'mix-blend-mode' with 'isolation'</title> + <html:link rel="author" + title="Tavmjong Bah" + href="http://tavmjong.free.fr"/> + <html:link rel="help" + href="https://www.w3.org/TR/SVG2/render.html#PaintersModel"/> + <html:link rel="match" href="blending-002-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + rect { + mix-blend-mode: screen; + } + + #edgecover > rect { + mix-blend-mode: normal; + } + </style> + + <g id="test-body-content"> + + <g style="isolation: isolate"> + <rect x="120" y="80" width="160" height="160" fill="red"/> + <g style="isolation: isolate"> + <rect x="200" y="80" width="160" height="160" fill="lime"/> + <rect x="160" y="160" width="160" height="160" fill="blue"/> + </g> + </g> + + <!-- Stroke to prevent aliasing from effecting results. --> + <g style="fill:none;stroke:black;stroke-width:2px" id="edgecover"> + <rect x="120" y="80" width="160" height="160"/> + <rect x="200" y="80" width="160" height="160"/> + <rect x="160" y="160" width="160" height="160"/> + </g> + + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/render/reftests/blending-svg-foreign-object-ref.html b/testing/web-platform/tests/svg/render/reftests/blending-svg-foreign-object-ref.html new file mode 100644 index 0000000000..b34012c656 --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/blending-svg-foreign-object-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<div style="background: green"> + <div>Expected: a black square on green background.</div> + <svg style="height: 200px"> + <foreignObject width="200" height="200"> + <div style="width: 200px; height: 200px; background: black"></div> + </foreignObject> + </svg> +</div> diff --git a/testing/web-platform/tests/svg/render/reftests/blending-svg-foreign-object.html b/testing/web-platform/tests/svg/render/reftests/blending-svg-foreign-object.html new file mode 100644 index 0000000000..a87df89de0 --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/blending-svg-foreign-object.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>'mix-blend-mode' for <svg:foreignObject></title> +<link rel="help" href="https://www.w3.org/TR/SVG2/render.html#PaintersModel"> +<link rel="match" href="blending-svg-foreign-object-ref.html"> +<div style="background: green"> + <div>Expected: a black square on green background.</div> + <svg style="width: 200px; height: 200px"> + <foreignObject width="200" height="200" style="mix-blend-mode: multiply"> + <div style="width: 200px; height: 200px; background: red"></div> + </foreignObject> + </svg> +</div> diff --git a/testing/web-platform/tests/svg/render/reftests/blending-svg-root-ref.html b/testing/web-platform/tests/svg/render/reftests/blending-svg-root-ref.html new file mode 100644 index 0000000000..35f278cfaf --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/blending-svg-root-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<div style="background: green"> + <div>Expected: a black square on green background.</div> + <svg style="width: 200px; height: 200px; background: black"> + </svg> +</div> diff --git a/testing/web-platform/tests/svg/render/reftests/blending-svg-root.html b/testing/web-platform/tests/svg/render/reftests/blending-svg-root.html new file mode 100644 index 0000000000..7cbf68d39a --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/blending-svg-root.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>'mix-blend-mode' for <svg></title> +<link rel="help" href="https://www.w3.org/TR/SVG2/render.html#PaintersModel"> +<link rel="match" href="blending-svg-root-ref.html"> +<div style="background: green"> + <div>Expected: a black square on green background.</div> + <svg style="mix-blend-mode: multiply; width: 200px; height: 200px; background: red"> + </svg> +</div> diff --git a/testing/web-platform/tests/svg/render/reftests/change-sync-for-nested-use-ref.html b/testing/web-platform/tests/svg/render/reftests/change-sync-for-nested-use-ref.html new file mode 100644 index 0000000000..e52fa18d3f --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/change-sync-for-nested-use-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> +<title>Change sync for nested use</title> +<svg width="400" height="500"> + <rect id="r1" width="40" height="40" style="fill:navy" /> + <rect id="r2" x="50" y="50" width="40" height="40" style="fill:purple" /> + <g id="g1"> + <use id="u1" x="120" href="#r1" /> + <use id="u2" x="120" href="#r2" /> + <rect x="120" y="120" width="50" height="50" style="fill:skyblue" /> + </g> + <use id="u3" x="120" href="#g1" /> + <use id="u4" y="170" href="#u2" /> + <use id="u5" x="-30" y="220" href="#u2" /> +</svg> +</html> diff --git a/testing/web-platform/tests/svg/render/reftests/change-sync-for-nested-use.html b/testing/web-platform/tests/svg/render/reftests/change-sync-for-nested-use.html new file mode 100644 index 0000000000..9a6e134350 --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/change-sync-for-nested-use.html @@ -0,0 +1,30 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Change sync for nested use</title> +<link rel="match" href="change-sync-for-nested-use-ref.html"> +<svg width="400" height="500" onload="main()"> + <rect id="r1" width="40" height="40" style="fill:red" /> + <rect id="r2" x="50" y="50" width="40" height="40" style="fill:gray" /> + <g id="g1"> + <use id="u1" x="120" href="#r1" /> + <use id="u2" x="120" href="#r2" /> + <rect x="120" y="120" width="50" height="50" style="fill:skyblue" /> + </g> + <use id="u3" x="120" href="#g1" /> + <use id="u4" y="170" href="#u2" /> + <use id="u5" x="-30" y="220" href="#u2" /> +</svg> + +<script> + function main() { + let r1 = document.getElementById("r1"), + r2 = document.getElementById("r2"); + + requestAnimationFrame(() => requestAnimationFrame(() => { + r1.style.fill = "navy"; + r2.style.fill = "purple"; + document.documentElement.removeAttribute("class"); + })); + }; +</script> +</html> diff --git a/testing/web-platform/tests/svg/render/reftests/filter-effects-on-pattern-ref.html b/testing/web-platform/tests/svg/render/reftests/filter-effects-on-pattern-ref.html new file mode 100644 index 0000000000..a61f17bf19 --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/filter-effects-on-pattern-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<div>Expected: a solid green square.</div> +<svg style="width: 200px; height: 200px; background: green;"></svg> diff --git a/testing/web-platform/tests/svg/render/reftests/filter-effects-on-pattern.html b/testing/web-platform/tests/svg/render/reftests/filter-effects-on-pattern.html new file mode 100644 index 0000000000..1894bf8cc3 --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/filter-effects-on-pattern.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>'mix-blend-mode' for <svg:pattern></title> +<link rel="help" href="https://www.w3.org/TR/SVG2/render.html#PaintersModel"> +<link rel="help" href="https://github.com/w3c/fxtf-drafts/issues/309"> +<link rel="match" href="filter-effects-on-pattern-ref.html"> +<div>Expected: a solid green square.</div> +<svg style="width: 200px; height: 200px; background: green;"> + <defs> + <pattern id="pattern" x="0" y="0" width=".25" height=".25" style="mix-blend-mode: difference;"> + <rect x="0" y="0" width="25" height="25" fill="green"/> + </pattern> + </defs> + <rect fill="url(#pattern)" width="200" height="200"/> +</svg> diff --git a/testing/web-platform/tests/svg/render/reftests/nested-svg-overflow-clip.html b/testing/web-platform/tests/svg/render/reftests/nested-svg-overflow-clip.html new file mode 100644 index 0000000000..b6f7e6d5ed --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/nested-svg-overflow-clip.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="match" href="rect-ref.html"> +<style> +svg { + overflow: visible; +} +</style> +<svg style="width: 100px; height: 100px"> + <svg style="overflow: clip;"> + <rect height="250" width="250" fill="green"> + </svg> +</svg> diff --git a/testing/web-platform/tests/svg/render/reftests/overflow-clip.html b/testing/web-platform/tests/svg/render/reftests/overflow-clip.html new file mode 100644 index 0000000000..24e5ef5637 --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/overflow-clip.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="match" href="rect-ref.html"> +<style> +svg { + overflow: visible; +} +</style> +<svg style="overflow: clip; width: 100px; height: 100px"> + <rect width="200" height="200" fill="green"> +</svg> diff --git a/testing/web-platform/tests/svg/render/reftests/rect-ref.html b/testing/web-platform/tests/svg/render/reftests/rect-ref.html new file mode 100644 index 0000000000..a6e6f37d4e --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/rect-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="green" /> +</svg> diff --git a/testing/web-platform/tests/svg/render/reftests/render-sync-with-font-size-ref.html b/testing/web-platform/tests/svg/render/reftests/render-sync-with-font-size-ref.html new file mode 100644 index 0000000000..c313193041 --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/render-sync-with-font-size-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>Render is synchronized with font-size change</title> +<svg width="400" height="400" style="font-size:20px"> + <rect width="5em" height="5em" rx="5px" ry="5px" fill="magenta" /> + <circle cx="10em" cy="5em" r="4em" fill="purple" /> + <line y1="6em" x2="15em" y2="6em" stroke="skyblue" /> +</svg> diff --git a/testing/web-platform/tests/svg/render/reftests/render-sync-with-font-size.html b/testing/web-platform/tests/svg/render/reftests/render-sync-with-font-size.html new file mode 100644 index 0000000000..e78ba1f3cd --- /dev/null +++ b/testing/web-platform/tests/svg/render/reftests/render-sync-with-font-size.html @@ -0,0 +1,21 @@ +<!doctype html> +<html class="reftest-wait"> +<title>Render is synchronized with font-size change</title> +<link rel="match" href="render-sync-with-font-size-ref.html"> +<svg width="400" height="400" style="font-size:10px" onload="main()"> + <rect width="5em" height="5em" rx="5px" ry="5px" fill="magenta" /> + <circle cx="10em" cy="5em" r="4em" fill="purple" /> + <line y1="6em" x2="15em" y2="6em" stroke="skyblue" /> +</svg> +<script> + function main() { + window.requestAnimationFrame(() => { + let s = document.querySelector("svg"); + s.style.fontSize = "20px"; + window.requestAnimationFrame(() => { + document.documentElement.removeAttribute("class"); + }); + }); + }; +</script> +</html> |
