<!DOCTYPE html>
<body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
'use strict';

const srcs = [
  "/images/green.svg",
  "/images/green.png",
];

for (var src of srcs) {
  async_test(t => {
    var img = document.createElement('IMG');
    img.intrinsicSize = '400 x 500';
    var expected_intrinsic_width = 400;
    var expected_intrinsic_height = 500;
    var expected_width = expected_intrinsic_width;
    var expected_height = expected_intrinsic_height;

    document.body.appendChild(img);
    img.addEventListener('load', t.step_func(() => {
      assert_equals(img.width, expected_width, 'width');
      assert_equals(img.height, expected_height, 'height');
      assert_equals(img.naturalWidth, expected_intrinsic_width, 'naturalWidth');
      assert_equals(img.naturalHeight, expected_intrinsic_height, 'naturalHeigh');
      t.done();
    }));
    img.srcset = src + ' 3x';
  }, 'Test image ' + src + ' with no specified sizes, width, or height');

  async_test(t => {
    var img = document.createElement('IMG');
    img.intrinsicSize = '400 x 500';
    img.width = '800'; /* 2x of intrinsic width */
    var expected_intrinsic_width = 400;
    var expected_intrinsic_height = 500;
    var expected_width = expected_intrinsic_width * 2;
    var expected_height = expected_intrinsic_height * 2;

    document.body.appendChild(img);
    img.addEventListener('load', t.step_func(() => {
      assert_equals(img.width, expected_width, 'width');
      assert_equals(img.height, expected_height, 'height');
      assert_equals(img.naturalWidth, expected_intrinsic_width, 'naturalWidth');
      assert_equals(img.naturalHeight, expected_intrinsic_height, 'naturalHeigh');
      t.done();
    }));
    img.srcset = src + ' 3x';
  }, 'Test image ' + src + ' with width = 800, no specified sizes, or height');

  async_test(t => {
    var img = document.createElement('IMG');
    img.intrinsicSize = '400 x 500';
    img.width = '800';
    img.style = 'height:800px;';
    var expected_intrinsic_width = 400;
    var expected_intrinsic_height = 500;
    var expected_width = 800;
    var expected_height = 800;

    document.body.appendChild(img);
    img.addEventListener('load', t.step_func(() => {
      assert_equals(img.width, expected_width, 'width');
      assert_equals(img.height, expected_height, 'height');
      assert_equals(img.naturalWidth, expected_intrinsic_width, 'naturalWidth');
      assert_equals(img.naturalHeight, expected_intrinsic_height, 'naturalHeigh');
      t.done();
    }));
    img.srcset = src + ' 3x';
  }, 'Test image ' + src + ' with width = 800, height = 800, and no specified sizes');
}

async_test(t => {
  var img = document.createElement('IMG');
  img.intrinsicSize = '400 x 500';
  img.sizes = '100px';
  var expected_intrinsic_width = 100;
  var expected_intrinsic_height = 125;
  var expected_width = 100;
  var expected_height = 125;

  document.body.appendChild(img);
  img.addEventListener('load', t.step_func(() => {
    assert_equals(img.width, expected_width, 'width');
    assert_equals(img.height, expected_height, 'height');
    assert_equals(img.naturalWidth, expected_intrinsic_width, 'naturalWidth');
    assert_equals(img.naturalHeight, expected_intrinsic_height, 'naturalHeigh');
    t.done();
  }));
  img.srcset = '/images/background.png 32w';
}, 'Test image (32 x 32) with sizes = 100 and srcset descriptor = 32w');

</script>
</body>
