naturalWidth-naturalHeight.html (2728B)
1 <!doctype html> 2 <title>HTMLImageElement.prototype.naturalWidth/naturalHeight</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <img src="resources/cat.jpg" 6 title="raster image" data-width="320" data-height="240"> 7 <img src="resources/cat.jpg" width="10" height="10" 8 title="raster image with width/height attributes" data-width="320" data-height="240"> 9 <img src="non-existent.jpg" 10 title="non existent image, no natural dimensions" data-width="0" data-height="0"> 11 <img src="non-existent.jpg" width="10" height="10" 12 title="non existent image with width/height attributes, no natural dimensions" data-width="0" data-height="0"> 13 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" 14 title="SVG image, no natural dimensions" data-width="0" data-height="0"> 15 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='400'></svg>" 16 title="SVG image, width/height in pixels" data-width="500" data-height="400"> 17 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500'></svg>" 18 title="SVG image, width in pixels; height unspecified" data-width="500" data-height="0"> 19 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='100%'></svg>" 20 title="SVG image, width in pixels; percentage height" data-width="500" data-height="0"> 21 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='400' viewBox='0 0 800 600'></svg>" 22 title="SVG image, width/height in pixels; viewBox" data-width="500" data-height="400"> 23 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'></svg>" 24 title="SVG image, width/height unspecified; viewBox" data-width="0" data-height="0"> 25 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' viewBox='0 0 800 600'></svg>" 26 title="SVG image, width in pixels; height unspecified; viewBox" data-width="400" data-height="300"> 27 <img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='300' viewBox='0 0 800 600'></svg>" 28 title="SVG image, width unspecified; height in pixels; viewBox" data-width="400" data-height="300"> 29 <script> 30 setup({explicit_done:true}); 31 onload = function() { 32 Array.from(document.images).forEach(img => { 33 test(function() { 34 const expectedWidth = parseFloat(img.dataset.width); 35 const expectedHeight = parseFloat(img.dataset.height); 36 assert_equals(img.naturalWidth, expectedWidth, 'naturalWidth'); 37 assert_equals(img.naturalHeight, expectedHeight, 'naturalHeight'); 38 }, `${document.title}, ${img.title}`); 39 }); 40 done(); 41 }; 42 </script>