content-visibility-058.html (1544B)
1 <!doctype HTML> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>Content Visibility: auto, scrollIntoView()</title> 5 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 7 <link rel="match" href="content-visibility-058-ref.html"> 8 <meta name="assert" content="scrollIntoView() uses contain:size information to find target offset"> 9 <meta name="assert" content="viewport intersection removes contain:size thus moving target"> 10 <script src="/common/reftest-wait.js"></script> 11 12 <style> 13 .spacer { 14 height: 10000px; 15 } 16 .container { 17 width: 150px; 18 background: lightblue; 19 contain-intrinsic-size: 50px 250px; 20 } 21 .child { 22 width: 50px; 23 height: 300px; 24 background: lightgreen; 25 } 26 #target { 27 position: absolute; 28 bottom: 0; 29 30 width: 10px; 31 height: 10px; 32 background: blue; 33 } 34 .auto { content-visibility: auto; } 35 36 </style> 37 38 <p>Test FAILS if this sentence is at the top of the screen. 39 <div class=spacer></div> 40 <div class="container auto"> 41 <div class=child></div> 42 <div id=target></div> 43 </div> 44 <p>Test PASSES if this sentence is near the top of the screen, after a thin band of three colors. 45 <div class=spacer></div> 46 47 <script> 48 49 function runTest() { 50 document.getElementById("target").scrollIntoView(true /* alignToTop */); 51 requestAnimationFrame(takeScreenshot); 52 } 53 54 window.onload = requestAnimationFrame(() => { 55 requestAnimationFrame(() => { 56 requestAnimationFrame(() => { 57 runTest(); 58 }); 59 }); 60 }); 61 62 </script> 63 </html>