img-aspect-ratio.html (5087B)
1 <!doctype html> 2 <title>Image width and height attributes are used to infer aspect-ratio</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="resources/aspect-ratio.js"></script> 6 <style> 7 img { 8 width: 100%; 9 max-width: 100px; 10 height: auto; 11 } 12 </style> 13 <img src="/images/green.png"> 14 <img src="/images/green.png" width=100 height=125> 15 <img src="" width=100 height=125> 16 <img src="error.png" width=100 height=125> 17 <img src="error.png"> 18 <img src="error.png" alt="Alt text" width=100 height=500> 19 <script> 20 let guard = async_test("Image width and height attributes are used to infer aspect-ratio"); 21 let cookie = Math.random(); 22 function assert_ratio(img, expected, description) { 23 let epsilon = 0.001; 24 assert_approx_equals(parseFloat(getComputedStyle(img).width, 10) / parseFloat(getComputedStyle(img).height, 10), 25 expected, epsilon, description); 26 } 27 28 function test_computed_style(width, height, expected) { 29 test_computed_style_aspect_ratio("img", {width: width, height: height}, expected); 30 test_computed_style_aspect_ratio("input", {type: "image", width: width, height: height}, expected); 31 // input type=submit should not do this mapping. 32 test_computed_style_aspect_ratio("input", {type: "submit", width: width, height: height}, "auto"); 33 } 34 35 // Create and append a new image and immediately check the ratio. 36 // We append a random query to the URL(s) to avoid matching something in the 'list 37 // of available images' (step 6 of the algorithm below) and thus have the actual 38 // load run in a microtask. 39 // https://html.spec.whatwg.org/multipage/images.html#updating-the-image-data 40 test(function() { 41 // This img will be tested again after loaded. In order to locate it correctly, body should append it first. 42 var img = new Image(); 43 img.width = 250; 44 img.height = 100; 45 img.src = "/images/blue.png?" + cookie; 46 document.body.appendChild(img); 47 assert_ratio(img, 2.5); 48 }, "Create, append and test immediately: <img> with attributes width=250, height=100"); 49 50 test(function () { 51 img = new Image(); 52 img.setAttribute("width", "0.8"); 53 img.setAttribute("height", "0.2"); 54 img.src = "/images/blue.png?" + (cookie + 1); 55 document.body.appendChild(img); 56 assert_ratio(img, 4); 57 }, "Create, append and test immediately: <img> with attributes width=0.8, height=0.2"); 58 59 test(function () { 60 img = new Image(); 61 img.setAttribute("width", "50%"); 62 img.setAttribute("height", "25%"); 63 img.src = "/images/blue.png?" + (cookie + 2); 64 document.body.appendChild(img); 65 // Percentages should be ignored. 66 assert_equals(getComputedStyle(img).height, "0px"); 67 }, "Create, append and test immediately: <img> with attributes width=50% height=25%"); 68 69 test(function () { 70 img = new Image(); 71 img.setAttribute("width", "50pp"); 72 img.setAttribute("height", "25xx"); 73 img.src = "/images/blue.png?" + (cookie + 3); 74 document.body.appendChild(img); 75 assert_ratio(img, 2); 76 }, "Create, append and test immediately: <img> with invalid trailing attributes width=50pp height=25xx"); 77 78 test_computed_style("10", "20", "auto 10 / 20"); 79 test_computed_style("0", "1", "auto 0 / 1"); 80 test_computed_style("1", "0", "auto 1 / 0"); 81 test_computed_style("0", "0", "auto 0 / 0"); 82 test_computed_style("0.5", "1.5", "auto 0.5 / 1.5"); 83 test_computed_style(null, null, "auto"); 84 test_computed_style("10", null, "auto"); 85 test_computed_style(null, "20", "auto"); 86 test_computed_style("xx", "20", "auto"); 87 test_computed_style("10%", "20", "auto"); 88 89 onload = function() { 90 let images = document.querySelectorAll("img"); 91 // Tests for images finished loading. 92 test(function() { 93 assert_ratio(images[0], 2.0, "2.0 is the original aspect ratio of green.png"); 94 }, "Loaded images test: <img> without width height attributes"); 95 96 test(function() { 97 assert_ratio(images[1], 2.0, "Loaded image's aspect ratio, at least by default, overrides width / height ratio."); 98 }, "Loaded images test: <img> with width and height attributes, but conflicting to the original aspect ratio"); 99 100 test(function () { 101 assert_ratio(images[2], 100 / 125, "aspect-ratio should override intrinsic size of images that don't have any src."); 102 }, "Loaded images test: <img> with width, height and empty src attributes"); 103 104 test(function () { 105 assert_ratio(images[3], 100 / 125, "aspect-ratio should affect the size of error images."); 106 }, "Loaded images test: Error image with width and height attributes"); 107 108 test(function () { 109 assert_not_equals(images[5].offsetHeight, 500, "Images with alt text should be inline and ignore the aspect ratio"); 110 // Though aspect-ratio is ignored, its value does not change. 111 assert_equals(getComputedStyle(images[5]).aspectRatio, "auto 100 / 500"); 112 }, "Loaded images test: Error image with width, height and alt attributes"); 113 114 test(function () { 115 assert_ratio(images[6], 133 / 106, "The original aspect ratio of blue.png"); 116 }, "Loaded images test: <img> with width and height attributes, but not equal to the original aspect ratio"); 117 118 guard.done(); 119 }; 120 </script>