content-visibility-vs-scrollIntoView-002.html (1821B)
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 <link rel="match" href="content-visibility-vs-scrollIntoView-002-ref.html"> 8 <meta name="assert" 9 content="content-visibility: auto element not relevent to user should be hidden even after calling scrollIntoView of its descendant"> 10 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 } 28 29 .before_target { 30 height: 40000px; 31 } 32 33 #overflow_clip { 34 overflow: clip; 35 height: 20000px; 36 } 37 </style> 38 39 <div id=e1 class="auto before_target"></div> 40 <div id=e2 class="auto before_target"></div> 41 <div id=e3 class="auto"> 42 <div id="overflow_clip"> 43 <div class=child> 44 <div id=target>PASS</div> 45 </div> 46 </div> 47 </div> 48 <div id=e4 class=auto> 49 <div class=child></div> 50 </div> 51 52 <script> 53 function runTest() { 54 target.scrollIntoView(); 55 requestAnimationFrame(() => requestAnimationFrame(() => { 56 // Remove the fixed value of height, so that the computed height would be 40000px. 57 // e3 should be hidden now, "PASS" should not show up. 58 overflow_clip.style.height = "auto"; 59 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 60 })); 61 } 62 window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 63 </script>