Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

SVG Preview (Scaled)

Preview of https://hg.mozilla.org/mozilla-central/raw-file/tip/testing/web-platform/tests/svg/embedded/image-modify-href-3.svg
xmlns:h="http://www.w3.org/1999/xhtml" viewBox="0 0 4 4" width="200" height="200" class="reftest-wait">
<metadata>
<title>modifying xlink:href on an SVG image</title>
<h:link rel="match" href="reference/green-rect-100x100.svg"/>
</metadata>
<script href="/common/reftest-wait.js"></script>
<script href="/common/rendering-utils.js"></script>
<image width="2" height="2" onload="test()"
xlink:href="data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' &gt;&lt;rect width='50' height='50' fill='red'/&gt;&lt;/svg&gt;"/>
<script>
const XLINK_NS = "http://www.w3.org/1999/xlink";
const GREEN_DATA_URI = "data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' &gt;&lt;rect width='50' height='50' fill='green'/&gt;&lt;/svg&gt;";
// Our 'image' elem fires its load event more than once: first for the
// initial data-URI, and then again after our dynamic mutation adjusts it.
// But we only want test() to run for the first load, so we use
// 'didStartTest' to nerf any invocations after the first.
let didStartTest = false;
async function test() {
if (didStartTest) {
return;
}
didStartTest = true;
await waitForAtLeastOneFrame();
document.querySelector('image').setAttributeNS(XLINK_NS, 'href',
GREEN_DATA_URI);
await waitForAtLeastOneFrame();
takeScreenshot();
}
</script>
</svg>