| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <meta http-equiv="Delegate-CH" content="Sec-CH-Width"> |
| <title>Tests Sec-CH-Width with auto sizes and picture</title> |
| <link rel="help" href="https://wicg.github.io/responsive-image-client-hints/#sec-ch-width"> |
| <link rel="help" href="https://html.spec.whatwg.org/#sizes-attributes"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <script> |
| setup({explicit_done: true}); |
| |
| function run() { |
| test(() => { |
| const testImage = document.getElementsByTagName('img')[0]; |
| // Spec: sec-ch-width MUST be an integer greater than or equal to 0. |
| const width = Math.ceil(50 * devicePixelRatio); |
| assert_equals(testImage.naturalWidth, 2 * width); |
| assert_equals(testImage.naturalHeight, 3 * width); |
| }, 'Sec-CH-Width is set for lazy auto sizes'); |
| done(); |
| } |
| </script> |
| |
| <picture> |
| <source |
| srcset="resources/2x3-svg-scaled-by-sec-ch-width.py 50w" |
| sizes="auto" |
| width="100" |
| height="100"> |
| <img |
| onload="run()" |
| loading="lazy" |
| sizes="auto" |
| src="fail.png" |
| width="100" |
| height="100" |
| style="width: 50px; height: 50px;"> |
| </picture> |
