<!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>