57 lines
1.5 KiB
HTML
57 lines
1.5 KiB
HTML
<!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>
|