diff options
Diffstat (limited to 'testing/web-platform/tests/svg/extensibility')
39 files changed, 593 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/composited-inside-object-ref.html b/testing/web-platform/tests/svg/extensibility/foreignObject/composited-inside-object-ref.html new file mode 100644 index 0000000000..079662bc74 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/composited-inside-object-ref.html @@ -0,0 +1,9 @@ +<!doctype HTML> +<title>Compositing inside a non-stacking-context object works reference</title> +<object style="display: block; backface-visibility:hidden"> + <svg> + <foreignObject> + <div>Test</div> + </foreignObject> + </svg> +</object> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/composited-inside-object.html b/testing/web-platform/tests/svg/extensibility/foreignObject/composited-inside-object.html new file mode 100644 index 0000000000..caa613bb46 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/composited-inside-object.html @@ -0,0 +1,13 @@ +<!doctype HTML> +<title>Compositing inside a non-stacking-context object works.</title> +<link rel="author" title="Chris Harrelson" href="chrishtr@chromium.org"> +<link rel="match" href="composited-inside-object-ref.html"> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/> + +<object style="display: block; backface-visibility:hidden"> + <svg> + <foreignObject> + <div style="will-change: transform">Test</div> + </foreignObject> + </svg> +</object> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/compositing-backface-visibility-ref.html b/testing/web-platform/tests/svg/extensibility/foreignObject/compositing-backface-visibility-ref.html new file mode 100644 index 0000000000..790e90c635 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/compositing-backface-visibility-ref.html @@ -0,0 +1,8 @@ +<!doctype HTML> +<title>Basic backface-visibility compositing works reference</title> +<link rel="author" title="Chris Harrelson" href="chrishtr@chromium.org"> +<svg> + <foreignObject> + <div>Test</div> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/compositing-backface-visibility.html b/testing/web-platform/tests/svg/extensibility/foreignObject/compositing-backface-visibility.html new file mode 100644 index 0000000000..1551e25f8f --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/compositing-backface-visibility.html @@ -0,0 +1,13 @@ +<!doctype HTML> +<title>Basic backface-visibility compositing works.</title> +<link rel="author" title="Chris Harrelson" href="chrishtr@chromium.org"> +<link rel="match" href="compositing-backface-visibility-ref.html"> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/> +<style> + * { backface-visibility: hidden } +</style> +<svg> + <foreignObject> + <div style="will-change: transform">Test</div> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/containing-block.html b/testing/web-platform/tests/svg/extensibility/foreignObject/containing-block.html new file mode 100644 index 0000000000..da0728c96b --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/containing-block.html @@ -0,0 +1,46 @@ +<!doctype HTML> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/> +<style> + * { + margin: 5px; + } + .el { + background: lightblue; + width: 50px; + height: 60px; + } + .pos { + top: 5px; + left: 6px; + } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<svg> + <foreignObject id="first" width=100 height=100> + <div id=contained class="el" style="width: 50px; height: 60px;"></div> + <div id=containedrel class="el pos" style="position: relative"></div> + <div id=containedabs class="el pos" style="position: absolute"></div> + <div id=containedfixed class="el pos" style="position: fixed"></div> + </foreignObject> +</svg> +<script> +function checkPosition(el, offsetLeftVal, offsetTopVal, boundingRectLeft, boundingRectTop) { + assert_equals(el.offsetLeft, offsetLeftVal, "offsetLeft"); + assert_equals(el.offsetTop, offsetTopVal, "offsetTop"); + assert_equals(el.getBoundingClientRect().left, boundingRectLeft, "boundingRectLeft"); + assert_equals(el.getBoundingClientRect().top, boundingRectTop, "boundingRectTop"); +} + +test(function() { + // Test that #first is a containing block for all descendants. + var contained = document.getElementById('contained'); + var containedrel = document.getElementById('containedrel'); + var containedabs = document.getElementById('containedabs'); + var containedfixed = document.getElementById('containedfixed'); + checkPosition(contained, 5, 5, 20, 20); + checkPosition(containedrel, 11, 75, 26, 90); + checkPosition(containedabs, 11, 10, 26, 25); + checkPosition(containedfixed, 11, 10, 26, 25); +}, "position"); +</script> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/filter-repaint-ref.html b/testing/web-platform/tests/svg/extensibility/foreignObject/filter-repaint-ref.html new file mode 100644 index 0000000000..07563a617a --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/filter-repaint-ref.html @@ -0,0 +1,15 @@ +<html> + <svg> + <foreignObject style="overflow: visible;" + width="400" height="400" filter="url(#blur)"> + <div id=target>test</div> + </foreignObject> + <g> + <defs> + <filter id="blur"> + <feGaussianBlur stdDeviation="0.1"/> + </filter> + </defs> + </g> + </svg> +</html> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/filter-repaint.html b/testing/web-platform/tests/svg/extensibility/foreignObject/filter-repaint.html new file mode 100644 index 0000000000..0388977841 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/filter-repaint.html @@ -0,0 +1,24 @@ +<!doctype HTML> +<title>Test that re-painting a foreignObject element with a filter works.</title> +<link rel="match" href="filter-repaint-ref.html"> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/> +<svg> + <foreignObject style="overflow: visible;" + width="400" height="400" filter="url(#blur)"> + <div id=target>test</div> + </foreignObject> + <g> + <defs> + <filter id="blur"> + <feGaussianBlur stdDeviation="0.1"/> + </filter> + </defs> + </g> +</svg> +<script> +onload = () => { + requestAnimationFrame(() => requestAnimationFrame(() => + target.style.width = '11px')); +} +</script> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-circular-filter-reference-crash.html b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-circular-filter-reference-crash.html new file mode 100644 index 0000000000..162999402a --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-circular-filter-reference-crash.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>Should not crash on circular filter reference containing a foreignObject.</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script>test(()=>{})</script> +<svg id="svg" filter="url(#filter)"> + <foreignObject overflow="hidden"></foreignObject> +</svg> +<svg> + <filter id="filter"> + <feImage xlink:href="#svg"></feImage> + </filter> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-containing-svg-in-svg-in-object.html b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-containing-svg-in-svg-in-object.html new file mode 100644 index 0000000000..311697dd7b --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-containing-svg-in-svg-in-object.html @@ -0,0 +1,15 @@ +<!doctype html> +<title>An <svg> wrapped in a <foreignObject> in an <object></title> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/> +<link rel="match" href="../../struct/reftests/reference/green-100x100.html"> +<object data="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'> + <foreignObject width='100' height='100'> + <div xmlns='http://www.w3.org/1999/xhtml' style='display: flex'> + <div> + <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'> + <rect width='100' height='100' fill='green'/> + </svg> + </div> + </div> + </foreignObject> +</svg>"></object> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-margin-collapsing.html b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-margin-collapsing.html new file mode 100644 index 0000000000..49320f9573 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-margin-collapsing.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"> +<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#collapsing-margins"> +<link rel="match" href="foreign-object-size-ref.html"> +<svg> + <foreignobject width="100" height="100" style="background:red;"> + <div style="margin:100px 0;"> + <div style="margin:100px 0;"></div> + </div> + <div style="margin:100px 0;"> + <div style="margin:100px 0;"></div> + </div> + <div style="margin-top:-100px; height:100px; background:green;"></div> + </foreignobject> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-paints-before-rect-ref.html b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-paints-before-rect-ref.html new file mode 100644 index 0000000000..a0a8692602 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-paints-before-rect-ref.html @@ -0,0 +1,12 @@ +<!doctype HTML> +<!doctype HTML> +<style> +* { + margin: 0 +} +</style> +<svg style="width: 500px; height: 500px"> + <rect x="0" y="0" width="100%" height="100%" style="fill: blue"/> + <rect x="0" y="0" width="50%" height="50%"/> +</svg> + diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-paints-before-rect.html b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-paints-before-rect.html new file mode 100644 index 0000000000..5757d07a09 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-paints-before-rect.html @@ -0,0 +1,16 @@ +<!doctype HTML> +<link rel="match" href="foreign-object-paints-before-rect-ref.html"> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/> +<style> +* { + margin: 0 +} +</style> +<!-- Test that the <foreignObject> root element paints in element order +within the SVG, but content within it is atomic. --> +<svg style="width: 500px; height: 500px"> + <foreignObject width="100%" height="100%"> + <div style="width: 500px; height: 500px; background: blue"></div> + </foreignObject> + <rect x="0" y="0" width="50%" height="50%"/> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-scale-scroll-ref.html b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-scale-scroll-ref.html new file mode 100644 index 0000000000..a2217fed5d --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-scale-scroll-ref.html @@ -0,0 +1,8 @@ +<!doctype html> +<svg width="400" height="400"> + <foreignObject x="200" y="200" width="200" height="200"> + <div style="width: 100px; height: 100px; transform: scale(2); transform-origin: 0 0; overflow: scroll"> + <div style="width: 1000px; height: 1000px; background: blue"></div> + </div> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-scale-scroll.html b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-scale-scroll.html new file mode 100644 index 0000000000..72ce40dc5c --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-scale-scroll.html @@ -0,0 +1,9 @@ +<!doctype html> +<title>foreignObject with scale transform and overflow:scroll</title> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/> +<link rel="match" href="foreign-object-scale-scroll-ref.html"> +<svg width="400" height="400"> + <foreignObject x="100" y="100" transform="scale(2)" width="100" height="100" style="overflow: scroll"> + <div style="width: 1000px; height: 1000px; background: blue"></div> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-size-ref.html b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-size-ref.html new file mode 100644 index 0000000000..e0b17a2c4a --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-size-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<style> +div { width: 100px; height: 100px; background-color: green; } +</style> +<div></div> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-size.html b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-size.html new file mode 100644 index 0000000000..91fc3ef7fe --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-size.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test: auto values for width and height properties on foreignObject compute to zero</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Sizing"> +<link rel="match" href="foreign-object-size-ref.html"> +<style> +div { width: 100px; height: 100px; } +</style> +<svg> + <foreignObject width="100" height="100"> + <div style="background-color: green;"></div> + </foreignObject> + <!-- + The foreignObject takes its size from its width and height properties. + Unlike HTML elements, a value of auto for these properties (as omitting + the width="" and height="" presentation attributes will do) will compute + to zero, causing it not to be rendered. + --> + <foreignObject> + <div style="background-color: red;"></div> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-under-clip-path-crash.html b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-under-clip-path-crash.html new file mode 100644 index 0000000000..c1d2b3a7e9 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-under-clip-path-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>Should not crash on foreignObject under clipPath</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script>test(()=>{})</script> +<svg> + <clipPath> + <foreignObject>ABC</foreignObject> + </clipPath> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-under-defs-crash.html b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-under-defs-crash.html new file mode 100644 index 0000000000..08c47454b6 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-under-defs-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Should not crash on foreignObject under defs</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script>test(()=>{})</script> +<div style="will-change: opacity; mix-blend-mode: exclusion;"></div> +<svg> + <defs> + <foreignObject width="100" height="100"> + <div style="will-change: opacity;">FAIL</div> + </foreignObject> + </defs> +</svg> +<div style="will-change: opacity;"></div> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-with-position-under-clip-path.html b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-with-position-under-clip-path.html new file mode 100644 index 0000000000..a6d34bfff1 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/foreign-object-with-position-under-clip-path.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>Test: x & y on foreignObject don't transform a clipPath with clipPathUnits="objectBoundingBox"</title> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"> +<link rel="match" href="foreign-object-size-ref.html"> +<svg> + <defs> + <clipPath id="clip" clipPathUnits="objectBoundingBox"> + <rect width="1" height="0.5" /> + </clipPath> + </defs> + <g transform="translate(-50 -50)"> + <foreignObject x="50" y="50" width="100" height="200" clip-path="url(#clip)"> + <html xmlns="http://www.w3.org/1999/xhtml"> + <body> + <div style="background: green; height: 100px;"></div> + <div style="background: red; height: 100px;"></div> + </body> + </html> + </foreignObject> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/getboundingclientrect.html b/testing/web-platform/tests/svg/extensibility/foreignObject/getboundingclientrect.html new file mode 100644 index 0000000000..82941bd14b --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/getboundingclientrect.html @@ -0,0 +1,33 @@ +<!doctype html> +<title>foreignObject: Element.prototype.getBoundingClientRect()</title> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"> +<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#descendant { + width: 100px; + height: 60px; + margin: 6px 12px; + background-color: blue; +} +</style> +<svg> + <foreignObject x="20" y="10" width="200" height="100"> + <div id="descendant"></div> + </foreignObject> +</svg> +<script> +function checkBoundingRect(element, bounds) { + let boundingRect = element.getBoundingClientRect(); + for (let prop of ['left', 'top', 'width', 'height']) + assert_equals(boundingRect[prop], bounds[prop], prop); +} + +test(function() { + checkBoundingRect(document.querySelector('foreignObject'), + { left: 28, top: 18, width: 200, height: 100 }); + checkBoundingRect(document.querySelector('foreignObject > div'), + { left: 40, top: 24, width: 100, height: 60 }); +}); +</script> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/isolation-with-html-ref.html b/testing/web-platform/tests/svg/extensibility/foreignObject/isolation-with-html-ref.html new file mode 100644 index 0000000000..91ccd6165f --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/isolation-with-html-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 200px; height: 200px; background: lime; mix-blend-mode: difference"></div>
\ No newline at end of file diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/isolation-with-html.html b/testing/web-platform/tests/svg/extensibility/foreignObject/isolation-with-html.html new file mode 100644 index 0000000000..df9f64824b --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/isolation-with-html.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>foreignObject should create an isolated group for html descendants</title> +<meta name="assert" content="ForeignObject creates a stacking context which is an isolated group, so mix-blend-mode should not be affected by content outside the isolated group." /> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#render-EstablishingStackingContex" /> +<link rel="help" href="https://drafts.fxtf.org/compositing-2/#csscompositingrules_CSS" /> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org" /> +<link rel="match" href="isolation-with-html-ref.html" /> +<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="200" height="200" style="fill: yellow" /> + <foreignObject width="200" height="200"> + <div style="width: 200px; height: 200px; background: lime; mix-blend-mode: difference"></div> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/isolation-with-svg-ref.html b/testing/web-platform/tests/svg/extensibility/foreignObject/isolation-with-svg-ref.html new file mode 100644 index 0000000000..91ccd6165f --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/isolation-with-svg-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 200px; height: 200px; background: lime; mix-blend-mode: difference"></div>
\ No newline at end of file diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/isolation-with-svg.html b/testing/web-platform/tests/svg/extensibility/foreignObject/isolation-with-svg.html new file mode 100644 index 0000000000..df5b37c8a6 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/isolation-with-svg.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>foreignObject should create an isolated group for svg descendants</title> +<meta name="assert" content="ForeignObject creates a stacking context which is an isolated group, so mix-blend-mode should not be affected by content outside the isolated group." /> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#render-EstablishingStackingContex" /> +<link rel="help" href="https://drafts.fxtf.org/compositing-2/#csscompositingrules_CSS" /> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org" /> +<link rel="match" href="isolation-with-svg-ref.html" /> +<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="200" height="200" style="fill: yellow" /> + <foreignObject width="200" height="200"> + <svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px"> + <rect x="0" y="0" width="200" height="200" style="fill: lime; mix-blend-mode: difference" /> + </svg> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/masked-ref.html b/testing/web-platform/tests/svg/extensibility/foreignObject/masked-ref.html new file mode 100644 index 0000000000..1a3b13c945 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/masked-ref.html @@ -0,0 +1,2 @@ +<!doctype HTML> +<div style="width: 32px; height: 32px; background: green; overflow: hidden; border-radius: 50%"></div> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/masked.html b/testing/web-platform/tests/svg/extensibility/foreignObject/masked.html new file mode 100644 index 0000000000..a4ca2fd852 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/masked.html @@ -0,0 +1,14 @@ +<!doctype HTML> +<title>Tests that an SVG mask applies to a foreignObject element</title> +<link rel="match" href="masked-ref.html"> +<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org"> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/> +<meta name="fuzzy" content="maxDifference=0-138; totalPixels=0-124"> +<svg style="display: block"> + <foreignObject x="0" y="0" width="32" height="32" mask="url(#circle)"> + <div style="width: 32px; height: 32px; background: green"></div> + </foreignObject> + <mask id="circle" maskContentUnits="objectBoundingBox" viewBox="0 0 1 1"> + <circle fill="white" cx="0.5" cy="0.5" r="0.5"></circle> + </mask> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/overlapped-positioned-and-will-change-transform-descendant.html b/testing/web-platform/tests/svg/extensibility/foreignObject/overlapped-positioned-and-will-change-transform-descendant.html new file mode 100644 index 0000000000..e5c6a1b99c --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/overlapped-positioned-and-will-change-transform-descendant.html @@ -0,0 +1,31 @@ +<!doctype html> +<title>fO with positioned descendants overlapping a fO with 'will-change: transform' child</title> +<link rel="match" href="../../struct/reftests/reference/green-100x100.html"> +<style> + #outer { + position: relative; + width: 50px; + margin: 0 25px; + background-color: red; + } + #inner { + position: relative; + width: 50px; + height: 100px; + background-color: green; + } + #willtransform { + will-change: transform; + width: 100px; + height: 100px; + background-color: green; + } +</style> +<svg> + <foreignObject width="100" height="100"> + <div id="willtransform"></div> + </foreignObject> + <foreignObject width="100" height="100"> + <div id="outer"><div id="inner"></div></div> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/position-svg-root-in-foreign-object-ref.html b/testing/web-platform/tests/svg/extensibility/foreignObject/position-svg-root-in-foreign-object-ref.html new file mode 100644 index 0000000000..668eb9b8c7 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/position-svg-root-in-foreign-object-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>SVG Reftest Reference</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<p>You should see the word PASS and no red below.</p> +PASS diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/position-svg-root-in-foreign-object.html b/testing/web-platform/tests/svg/extensibility/foreignObject/position-svg-root-in-foreign-object.html new file mode 100644 index 0000000000..fd32d2a961 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/position-svg-root-in-foreign-object.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>SVG: svg root child of foreignObject should be positionable</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="help" href="https://svgwg.org/svg2-draft/embedded.html#ForeignObjectElement"> +<link rel="match" href="position-svg-root-in-foreign-object-ref.html"> +<p>You should see the word PASS and no red below.</p> +<svg> + <foreignObject width="200" height="200"> + PASS + <svg style="position:absolute; left: -1000px; width:100px; height: 100px; background: red"></svg> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/properties.svg b/testing/web-platform/tests/svg/extensibility/foreignObject/properties.svg new file mode 100644 index 0000000000..dd198f177d --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/properties.svg @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/> + <h:link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#styling-PresentationAttributes"/> + <h:meta name="assert" content="x y width height are presentation attributes of foreignObject"/> + </metadata> + <style> + .c { + x: 10px; + y: 20px; + width: 30px; + height: 40px; + } + </style> + <foreignObject id="first"></foreignObject> + <foreignObject id="second" class="c"></foreignObject> + <foreignObject id="third" x="50" y="60" width="70" height="80"></foreignObject> + <foreignObject id="fourth" x="50" y="60" width="70" height="80" class="c"></foreignObject> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <script><![CDATA[ + test(function() { + var first = document.getElementById('first'); + assert_equals(getComputedStyle(first).x, "0px"); + assert_equals(getComputedStyle(first).y, "0px"); + assert_equals(getComputedStyle(first).width, "0px"); + assert_equals(getComputedStyle(first).height, "0px"); + }, 'width and height default to auto (which computes to "0px")'); + + test(function() { + var second = document.getElementById('second'); + assert_equals(getComputedStyle(second).x, "10px"); + assert_equals(getComputedStyle(second).y, "20px"); + assert_equals(getComputedStyle(second).width, "30px"); + assert_equals(getComputedStyle(second).height, "40px"); + }, 'style rules are applied'); + + test(function() { + var third = document.getElementById('third'); + assert_equals(getComputedStyle(third).x, "50px"); + assert_equals(getComputedStyle(third).y, "60px"); + assert_equals(getComputedStyle(third).width, "70px"); + assert_equals(getComputedStyle(third).height, "80px"); + }, 'attributes set properties'); + + test(function() { + var fourth = document.getElementById('fourth'); + assert_equals(getComputedStyle(fourth).x, "10px"); + assert_equals(getComputedStyle(fourth).y, "20px"); + assert_equals(getComputedStyle(fourth).width, "30px"); + assert_equals(getComputedStyle(fourth).height, "40px"); + }, 'style rules override attributes'); + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/scroll-transform-nested-stacked-children-ref.html b/testing/web-platform/tests/svg/extensibility/foreignObject/scroll-transform-nested-stacked-children-ref.html new file mode 100644 index 0000000000..4847be91e0 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/scroll-transform-nested-stacked-children-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<div style="height: 200px; overflow: scroll; background: white"> + <div style="display: inline-block; width: 300px; height: 300px"> + <div style="background: green; width: 100px; height: 100px; position: relative; top: 50px; left: 50px"></div> + </div> +</div> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/scroll-transform-nested-stacked-children.html b/testing/web-platform/tests/svg/extensibility/foreignObject/scroll-transform-nested-stacked-children.html new file mode 100644 index 0000000000..d57289f02c --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/scroll-transform-nested-stacked-children.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>foreignObject under scroll and transform, with nested stacked children</title> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#render-EstablishingStackingContex"> +<link rel="match" href="scroll-transform-nested-stacked-children-ref.html"> +<div style="height: 200px; overflow: scroll; background: white"> + <svg width="300" height="300"> + <g transform="translate(50, 50)"> + <foreignObject width="100" height="100"> + <div style="background: red; width: 100px; height: 100px; position: relative"> + <div style="background: green; width: 100px; height: 100px; position: relative"></div> + </div> + </foreignObject> + </g> + </svg> +</div> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/stacking-context-ref.html b/testing/web-platform/tests/svg/extensibility/foreignObject/stacking-context-ref.html new file mode 100644 index 0000000000..28e7e310c0 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/stacking-context-ref.html @@ -0,0 +1,18 @@ +<!doctype HTML> +<style> + * { + margin: 0; + } + .el { + width: 50px; + height: 60px; + } + +</style> +<div style="isolation: isolate"> + <div class="el" + style="position: absolute; z-index: 1; top: 40px; left: 10px; border: 1px solid black; background: lightblue"></div> + <div class="el" + style="position: absolute; z-index: 2; top: 5px; left: 5px; border: 1px solid black; background: lightgreen"></div> +</div> +<div id=top class="el" style="position: relative; background: lightgray; top: 50px"></div> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/stacking-context.html b/testing/web-platform/tests/svg/extensibility/foreignObject/stacking-context.html new file mode 100644 index 0000000000..dfad5a175f --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/stacking-context.html @@ -0,0 +1,26 @@ +<!doctype HTML> +<title>Test that the foreignObject element is a stacking context</title> +<link rel="match" href="stacking-context-ref.html"> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/> +<style> + * { + margin: 0; + } + .el { + width: 50px; + height: 60px; + } + +</style> + <!-- Test that the <foreignObject> root element is a stacking context, so z-index here + has no effect on order w.r.t. #top, but still does for stacking under + foreignObject --> +<svg style="width: 50px; height: 50px; overflow: visible; display: block"> + <foreignObject width=100 height=200> + <div class="el" + style="position: absolute; z-index: 1; top: 40px; left: 10px; border: 1px solid black; background: lightblue"></div> + <div class="el" + style="position: absolute; z-index: 2; top: 5px; left: 5px; border: 1px solid black; background: lightgreen"></div> + </foreignObject> +</svg> +<div id=top class="el" style="position: relative; background: lightgray"></div> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/will-change-in-foreign-object-paint-order-ref.html b/testing/web-platform/tests/svg/extensibility/foreignObject/will-change-in-foreign-object-paint-order-ref.html new file mode 100644 index 0000000000..684de0cf0c --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/will-change-in-foreign-object-paint-order-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<div style="width: 100px; height: 100px; background: green"></div> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/will-change-in-foreign-object-paint-order.html b/testing/web-platform/tests/svg/extensibility/foreignObject/will-change-in-foreign-object-paint-order.html new file mode 100644 index 0000000000..b6f50cfa75 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/will-change-in-foreign-object-paint-order.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>A foreignObject element containing will-change content is painted in correct order</title> +<link rel="help" href="https://svgwg.org/svg2-draft/single-page.html#embedded-ForeignObjectElement"/> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="match" href="will-change-in-foreign-object-paint-order-ref.html"> +<svg style="width: 100px; height: 100px;"> + <foreignObject width="100" height="100"> + <div style="will-change: transform; width: 100px; height: 100px; background: red"></div> + </foreignObject> + <rect width="100" height="100" fill="green"></rect> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/will-change-in-transformed-foreign-object-ref.html b/testing/web-platform/tests/svg/extensibility/foreignObject/will-change-in-transformed-foreign-object-ref.html new file mode 100644 index 0000000000..1e66eb9909 --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/will-change-in-transformed-foreign-object-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Reference for a transformed foreignObject element containing will-change content</title> +<p>You should see a 100x100 green box horizontally offset by 50px. No red should be visible.</p> +<div style="will-change: transform; transform: translate(50px, 0); width: 100px; height: 100px; background: green;"></div> diff --git a/testing/web-platform/tests/svg/extensibility/foreignObject/will-change-in-transformed-foreign-object.html b/testing/web-platform/tests/svg/extensibility/foreignObject/will-change-in-transformed-foreign-object.html new file mode 100644 index 0000000000..4b6e940b2f --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/foreignObject/will-change-in-transformed-foreign-object.html @@ -0,0 +1,12 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Test that a transformed foreignObject element can contain will-change content</title> +<link rel="match" href="will-change-in-transformed-foreign-object-ref.html"> +<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org"> +<p>You should see a 100x100 green box horizontally offset by 50px. No red should be visible.</p> +<svg style="width: 500px; height: 500px;"> + <rect id="should-be-hidden" width="100" height="100" fill="red" x="50" y="0"></rect> + <foreignObject width="400" height="200" transform="translate(50,0)"> + <div style="will-change: transform; width: 100px; height: 100px; background: green;"></div> + </foreignObject> +</svg> diff --git a/testing/web-platform/tests/svg/extensibility/interfaces/foreignObject-graphics.svg b/testing/web-platform/tests/svg/extensibility/interfaces/foreignObject-graphics.svg new file mode 100644 index 0000000000..7745e91f0a --- /dev/null +++ b/testing/web-platform/tests/svg/extensibility/interfaces/foreignObject-graphics.svg @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://www.w3.org/TR/SVG2/embedded.html#InterfaceSVGForeignObjectElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://svgwg.org/svg2-draft/changes.html#extend"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="foreignObject is a graphics element"/> + </metadata> + <foreignObject id="target" /> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <h:script><![CDATA[ + test(function() { + var target = document.getElementById('target'); + assert_equals(Object.getPrototypeOf(Object.getPrototypeOf(target)), SVGGraphicsElement.prototype); + }); + ]]></h:script> +</svg> |
