naturalWidth-naturalHeight.html

Enable keyboard shortcuts

<!doctype html>

<title>HTMLImageElement.prototype.naturalWidth/naturalHeight</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<img src="resources/cat.jpg"

     title="raster image" data-width="320" data-height="240">

<img src="resources/cat.jpg" width="10" height="10"

     title="raster image with width/height attributes" data-width="320" data-height="240">

<img src="non-existent.jpg"

     title="non existent image, no natural dimensions" data-width="0" data-height="0">

<img src="non-existent.jpg" width="10" height="10"

     title="non existent image with width/height attributes, no natural dimensions" data-width="0" data-height="0">

<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"

     title="SVG image, no natural dimensions" data-width="0" data-height="0">

<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='400'></svg>"

     title="SVG image, width/height in pixels" data-width="500" data-height="400">

<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500'></svg>"

     title="SVG image, width in pixels; height unspecified" data-width="500" data-height="0">

<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='100%'></svg>"

     title="SVG image, width in pixels; percentage height" data-width="500" data-height="0">

<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='400' viewBox='0 0 800 600'></svg>"

     title="SVG image, width/height in pixels; viewBox" data-width="500" data-height="400">

<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'></svg>"

     title="SVG image, width/height unspecified; viewBox" data-width="0" data-height="0">

<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' viewBox='0 0 800 600'></svg>"

     title="SVG image, width in pixels; height unspecified; viewBox" data-width="400" data-height="300">

<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='300' viewBox='0 0 800 600'></svg>"

     title="SVG image, width unspecified; height in pixels; viewBox" data-width="400" data-height="300">

<script>

setup({explicit_done:true});

onload = function() {

  Array.from(document.images).forEach(img => {

    test(function() {

      const expectedWidth = parseFloat(img.dataset.width);

      const expectedHeight = parseFloat(img.dataset.height);

      assert_equals(img.naturalWidth, expectedWidth, 'naturalWidth');

      assert_equals(img.naturalHeight, expectedHeight, 'naturalHeight');

    }, `${document.title}, ${img.title}`);

});

  done();

};

</script>