| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| div { |
| width: 300px; |
| height: 100px; |
| background-color: red; |
| } |
| </style> |
| </head> |
| <body onload="changeImage('orange')"> |
| <div> |
| <img height="100" id="image_1" onload="onloadImage()"> |
| </div> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function onloadImage() { |
| var colors = ["orange", "green", "salmon", "yellow", "green"]; |
| |
| if (typeof onloadImage.counter == 'undefined') |
| onloadImage.counter = 0; |
| |
| if (++onloadImage.counter == colors.length) { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| return; |
| } |
| |
| changeImage(colors[onloadImage.counter]); |
| } |
| function changeImage(name) { |
| var image = document.getElementById('image_1'); |
| switch (name) { |
| case 'orange': |
| image.src = "data:image/svg+xml, \ |
| <svg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' width='100' height='100'> \ |
| <rect width='100%' height='100%' fill='orange'/> \ |
| <rect x='25%' y='25%' width='50%' height='50%' fill='lime'/> \ |
| </svg>"; |
| break; |
| |
| default: |
| image.src = "data:image/svg+xml, \ |
| <svg version='1.1' xmlns='http://www.w3.org/2000/svg'> \ |
| <rect width='100%' height='100%' fill='" + name + "'/> \ |
| <rect x='25%' y='25%' width='50%' height='50%' fill='lime'/> \ |
| </svg>"; |
| break; |
| } |
| } |
| </script> |
| </body> |
| </html> |
