| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| img { |
| width: 100px; |
| height: 100px; |
| } |
| </style> |
| </head> |
| <body> |
| <div id="group-1"> |
| <p><img> with #fragment referencing <view></p> |
| <img src="resources/rgb-icons-1.svg#green-icon-view"> |
| <img src="http://localhost:8000/svg/resources/rgb-icons-1.svg#green-icon-view"> |
| </div> |
| <div id="group-2"> |
| <p><img> with #svgView(viewBox())</p> |
| <img src="resources/rgb-icons-2.svg#svgView(viewBox(0,32,32,32))"> |
| <img src="http://localhost:8000/svg/resources/rgb-icons-2.svg#svgView(viewBox(0,32,32,32))"> |
| </div> |
| <div id="group-3"> |
| <p><img> with hide/show embedded :target CSS</p> |
| <img src="resources/rgb-icons-3.svg#green-icon"> |
| <img src="http://localhost:8000/svg/resources/rgb-icons-3.svg#green-icon"> |
| </div> |
| <script> |
| function createAndLoadImage(parent, src, srcset) { |
| return new Promise((resolve) => { |
| var image = new Image; |
| parent.appendChild(image); |
| image.onload = (() => { |
| resolve(image); |
| }); |
| image.src = src; |
| image.srcset = srcset; |
| }); |
| } |
| |
| (function() { |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| var imageData = [ |
| { |
| "parent": document.getElementById("group-1"), |
| "src": "http://127.0.0.1:8000/svg/resources/rgb-icons-1.svg#red-icon-view", |
| "srcset": "http://127.0.0.1:8000/svg/resources/rgb-icons-1.svg#green-icon-view", |
| }, |
| { |
| "parent": document.getElementById("group-2"), |
| "src": "http://127.0.0.1:8000/svg/resources/rgb-icons-2.svg#svgView(viewBox(0,0,32,32))", |
| "srcset": "http://127.0.0.1:8000/svg/resources/rgb-icons-2.svg#svgView(viewBox(0,32,32,32))" |
| }, |
| { |
| "parent": document.getElementById("group-3"), |
| "src" : "http://127.0.0.1:8000/svg/resources/rgb-icons-3.svg#red-icon", |
| "srcset" : "http://127.0.0.1:8000/svg/resources/rgb-icons-3.svg#green-icon" |
| }, |
| ]; |
| |
| var promises = []; |
| for (let datum of imageData) |
| promises.push(createAndLoadImage(datum.parent, datum.src, datum.srcset)); |
| |
| Promise.all(promises).then(() => { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| })(); |
| </script> |
| </body> |
| </html> |
