content-visibility-099.html (1398B)
1 <!doctype HTML> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>Content Visibility: auto, make unskipped, then skipped while also 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-099-ref.html"> 8 <meta name="assert" content="making c-v: auto container unskipped and then skipped 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 target.focus(); 37 requestAnimationFrame(step2); 38 } 39 40 function step2() { 41 document.getElementById("target").scrollIntoView(true /* alignToTop */); 42 requestAnimationFrame(finishTest); 43 } 44 45 function finishTest() { 46 container.setAttribute("style", "content-visibility: hidden; visibility: hidden"); 47 requestAnimationFrame(takeScreenshot); 48 } 49 50 window.onload = requestAnimationFrame(() => { 51 requestAnimationFrame(() => { 52 requestAnimationFrame(() => { 53 step1(); 54 }); 55 }); 56 }); 57 58 </script> 59 </html>