content-visibility-auto-img-001.html (1665B)
1 <!doctype HTML> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>CSS Test: img with content-visibility:auto honors its object-fit (restoring its aspect ratio) when coming back from offscreen</title> 5 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility"> 7 <link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size"> 8 <link rel="match" href="content-visibility-auto-img-001-ref.html"> 9 <meta name="assert" content="img elements honor their aspect-ratio and object-fit even after briefly having their aspect-ratio suppressed by content-visibility:auto"> 10 11 <script src="/common/reftest-wait.js"></script> 12 13 <style> 14 body { 15 /* body needs to be tall enough so that we can programmatically scroll. Use 16 'overflow:hidden' to suppress scrollbars so they don't interfere with the 17 reftest snapshot. */ 18 height: 400vh; 19 overflow: hidden; 20 } 21 img { 22 width: 500px; /* Much wider than the image's actual intrinsic width. */ 23 height: 210px; /* The image's actual intrinsic height. */ 24 object-fit: contain; 25 object-position: 0 0; 26 content-visibility: auto; 27 } 28 </style> 29 <img id="myImg" src="resources/dice.png"> 30 31 <script> 32 33 function runTest() { 34 // Scroll to the very end: 35 document.documentElement.scrollTop = document.documentElement.scrollHeight; 36 37 // Double-rAF to flush paints, and then scroll back to top 38 // and take screenshot: 39 requestAnimationFrame(()=>{ 40 requestAnimationFrame(()=>{ 41 document.documentElement.scrollTop = 0; 42 takeScreenshot(); 43 }); 44 }); 45 } 46 47 window.onload = runTest; 48 </script> 49 </html>