| <!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> |
