basic.html (2075B)
1 <!doctype html> 2 <title>img current pixel density basic</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <div id=log></div> 6 <img src="/images/green-256x256.png" data-expect="256"> 7 <img srcset="/images/green-256x256.png 1x" data-expect="256"> 8 <img srcset="/images/green-256x256.png 1.6x" data-expect="160"> 9 <img srcset="/images/green-256x256.png 2x" data-expect="128"> 10 <img srcset="/images/green-256x256.png 10000x" data-expect="0"> 11 <img srcset="/images/green-256x256.png 9e99999999999999999999999x" data-expect="0"> 12 <img srcset="/images/green-256x256.png 256w" sizes="256px" data-expect="256"> 13 <img srcset="/images/green-256x256.png 512w" sizes="256px" data-expect="128"> 14 <img srcset="/images/green-256x256.png 256w" sizes="512px" data-expect="512"> 15 <img srcset="/images/green-256x256.png 256w" sizes="1px" data-expect="1"> 16 <img srcset="/images/green-256x256.png 256w" sizes="0px" data-expect="0"> 17 <!-- SVG --> 18 <img srcset="data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-1%20-1%202%202'%20width='20'%20height='20'><circle%20r='1'/></svg> 2x" data-expect="10"> 19 <img srcset="data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-1%20-1%202%202'%20width='20'><circle%20r='1'/></svg> 2x" data-expect="10"> 20 <img srcset="data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='-1%20-1%202%202'%20height='20'><circle%20r='1'/></svg> 2x" data-expect="10"> 21 <script> 22 setup({explicit_done:true}); 23 onload = function() { 24 [].forEach.call(document.images, function(img) { 25 test(function() { 26 var expected = parseFloat(img.dataset.expect); 27 assert_equals(img.width, expected, 'width'); 28 assert_equals(img.height, expected, 'height'); 29 assert_equals(img.clientWidth, expected, 'clientWidth'); 30 assert_equals(img.clientHeight, expected, 'clientHeight'); 31 assert_equals(img.naturalWidth, expected, 'naturalWidth'); 32 assert_equals(img.naturalHeight, expected, 'naturalHeight'); 33 }, img.outerHTML); 34 }); 35 done(); 36 }; 37 </script>