content-visibility-vs-scrollIntoView-002-ref.html (1466B)
1 <!doctype HTML> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>CSS Content Visibility: auto + overflow clip + 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 <meta name="assert" 8 content="Test if target scrollIntoView is hidden when it is inside the overflow area of a content-visibility: auto which is not relevent content"> 9 10 <script src="/common/reftest-wait.js"></script> 11 12 <style> 13 .auto { 14 content-visibility: auto; 15 contain-intrinsic-size: auto 1px auto 10000px; 16 } 17 18 .child { 19 height: 40000px; 20 position: relative; 21 } 22 23 #target { 24 position: absolute; 25 bottom: 0; 26 } 27 28 .before_target { 29 height: 40000px; 30 } 31 32 #overflow_clip { 33 overflow: clip; 34 height: 20000px; 35 } 36 </style> 37 38 <div id=e1 class="auto before_target"></div> 39 <div id=e2 class="auto before_target"></div> 40 <div id=e3 class="auto"> 41 <div id="overflow_clip"> 42 <div class=child> 43 <div id=target>PASS</div> 44 </div> 45 </div> 46 </div> 47 <div id=e4 class=auto> 48 <div class=child></div> 49 </div> 50 51 52 <script> 53 function runTest() { 54 target.scrollIntoView(); 55 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 56 } 57 58 window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 59 </script>