sec-ch-width-auto-sizes-picture.https.html (1187B)
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 and picture</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 <picture> 26 <source 27 srcset="resources/2x3-svg-scaled-by-sec-ch-width.py 50w" 28 sizes="auto" 29 width="100" 30 height="100"> 31 <img 32 onload="run()" 33 loading="lazy" 34 sizes="auto" 35 src="fail.png" 36 width="100" 37 height="100" 38 style="width: 50px; height: 50px;"> 39 </picture>