content-visibility-vs-scrollIntoView-001.html (1677B)
1 <!doctype HTML> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>Nested CSS Content Visibility: auto + scrollIntoView</title> 5 <link rel="author" title="Cathie Chen" href="mailto:cathiechen@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 7 <link rel="match" href="content-visibility-vs-scrollIntoView-001-ref.html"> 8 <meta name="assert" 9 content="Test if target scrollIntoView is visible when it is inside a nested content-visibility: auto"> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <script src="/common/reftest-wait.js"></script> 12 13 <style> 14 .auto { 15 content-visibility: auto; 16 contain-intrinsic-size: auto 1px auto 10000px; 17 } 18 19 .child { 20 height: 40000px; 21 position: relative; 22 } 23 24 #target { 25 position: absolute; 26 bottom: 0; 27 font: 25px/1 Ahem; 28 } 29 30 .before_target { 31 height: 40000px; 32 } 33 </style> 34 35 <div id=e1 class="auto before_target"></div> 36 <div id=e2 class="auto before_target"></div> 37 <div id=e3 class=auto> 38 <div class=auto> 39 <div class=child></div> 40 <div class=auto> 41 <div class=child></div> 42 <div class=auto> 43 <div class=child> 44 <div id=target>PASS</div> 45 </div> 46 </div> 47 </div> 48 </div> 49 </div> 50 51 <script> 52 function runTest() { 53 target.scrollIntoView(); 54 // Double rAF to ensure that rendering has "settled". 55 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 56 } 57 58 window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 59 </script>