content-visibility-097.html (1429B)
1 <!doctype HTML> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>Content Visibility: auto, scroll away and back while toggling visibility</title> 5 <link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 7 <link rel="match" href="content-visibility-097-ref.html"> 8 <meta name="assert" content="scolling away from c-v: auto container and back while toggling visibility renders as expected"> 9 <script src="/common/reftest-wait.js"></script> 10 11 <style> 12 .spacer { 13 height: 10000px; 14 } 15 #child { 16 width: 100px; 17 height: 100px; 18 background: green; 19 position: relative 20 } 21 #target { 22 width: 10px; 23 height: 10px; 24 } 25 </style> 26 27 <div id="container" style="content-visibility: auto"> 28 <div id=child></div> 29 </div> 30 <div class=spacer></div> 31 <div id=target></div> 32 33 <script> 34 35 function step1() { 36 document.getElementById("target").scrollIntoView(true /* alignToTop */); 37 requestAnimationFrame(step2); 38 } 39 40 function step2() { 41 container.style.visibility = "hidden"; 42 requestAnimationFrame(finishTest); 43 } 44 45 function finishTest() { 46 container.setAttribute("style", "content-visibility: visible; visibility: visible"); 47 window.scrollTo(0, 0); 48 requestAnimationFrame(takeScreenshot); 49 } 50 51 window.onload = requestAnimationFrame(() => { 52 requestAnimationFrame(() => { 53 requestAnimationFrame(() => { 54 step1(); 55 }); 56 }); 57 }); 58 59 </script> 60 </html>