<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<body>
<script type="text/javascript">
// Verify that when the 'src' attribute for an <img> element is changed, the
// element transitions properly between states where primary content is shown,
// fallback content is shown, and when the element is collapsed.
//
// This test is carried out using a matrix of <img> elements. Initially, all
// images in the first row are set to show primary content, all images in the
// second row are set to show fallback content, etc. Once everything is loaded,
// the 'src' URLs are changed so that all images in the first column should show
// primary content, in the second column fallback content, etc.

var INITIAL_URLS = {
  "primary": "resources/alpha.png",
  "fallback": "resources/non-existent-1.png",
  "collapsed": "resources/gamma.png"
};

var FINAL_URLS = {
  "primary": "resources/beta.png",
  "fallback": "resources/non-existent-2.png",
  "collapsed": "resources/delta.png"
};

var EXPECTED_LOADEND_EVENT = {
  "primary": "load",
  "fallback": "error",
  "collapsed": "error"
};

var EXPECTED_WIDTH = {
  "primary": 100,
  "fallback": 0,
  "collapsed": 0
};

var EXPECTED_DISPLAY = {
  "primary": "inline",
  "fallback": "inline",
  "collapsed": "none",
};

var numPendingImages =
    Object.keys(INITIAL_URLS).length * Object.keys(FINAL_URLS).length;

if (window.testRunner)
  testRunner.setDisallowedSubresourcePathSuffixes(["gamma.png", "delta.png"], true /* block_subresources */);

let table = document.createElement("table");
let headerRow = table.insertRow();

headerRow.insertCell().innerHTML = "- - - - \\ Final<br>Initial \\";
for (let finalState of Object.keys(FINAL_URLS)) {
  headerRow.insertCell().textContent = finalState;
}

for (let [initialState, initialUrl] of Object.entries(INITIAL_URLS)) {
  let row = table.insertRow();
  row.insertCell().textContent = initialState;
  for (let [finalState, finalUrl] of Object.entries(FINAL_URLS)) {
    let cell = row.insertCell();
    let img = document.createElement("img");
    img.src = initialUrl;
    async_test(t => {
      let eventWatcher = new EventWatcher(t, img, ["load", "error"]);
      eventWatcher.wait_for(EXPECTED_LOADEND_EVENT[initialState])
        .then(_ => {
          window.setTimeout(_ => img.src = finalUrl);
          return eventWatcher.wait_for(EXPECTED_LOADEND_EVENT[finalState]);
        })
        .then(t.step_func_done(_ => {
          assert_equals(img.clientWidth, EXPECTED_WIDTH[finalState],
              "Image has incorrect width for the expected final state.");
          let style = window.getComputedStyle(img);
          assert_equals(style.display, EXPECTED_DISPLAY[finalState],
              "Images has incorrect computed style for the final state.");
        }));
    }, "State transition " + initialState + " to " + finalState + ". ");
    cell.append(img);
  }
}
document.body.append(table);
</script>