sec-ch-width-auto-sizes-img.https.html (1122B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta http-equiv="Delegate-CH" content="Sec-CH-Width"> 4 <title>Tests Sec-CH-Width with auto sizes</title> 5 <link rel="help" href="https://wicg.github.io/responsive-image-client-hints/#sec-ch-width"> 6 <link rel="help" href="https://html.spec.whatwg.org/#sizes-attributes"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <script> 11 setup({explicit_done: true}); 12 13 function run() { 14 test(() => { 15 const testImage = document.getElementsByTagName('img')[0]; 16 // Spec: sec-ch-width MUST be an integer greater than or equal to 0. 17 const width = Math.ceil(50 * devicePixelRatio); 18 assert_equals(testImage.naturalWidth, 2 * width); 19 assert_equals(testImage.naturalHeight, 3 * width); 20 }, 'Sec-CH-Width is set for lazy auto sizes'); 21 done(); 22 } 23 </script> 24 25 <div style="width: 100px; height: 100px;"> 26 <img 27 onload="run()" 28 loading="lazy" 29 sizes="auto" 30 srcset="resources/2x3-svg-scaled-by-sec-ch-width.py 50w" 31 width="300" 32 height="300" 33 style="width: 50%; height: 50%;"> 34 </div>