content-visibility-064.html (1397B)
1 <!doctype HTML> 2 3 <html class="reftest-wait"> 4 <meta charset="utf8"> 5 <title>CSS Content Visibility: auto + focus</title> 6 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 7 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 8 <link rel="match" href="content-visibility-064-ref.html"> 9 <meta name="assert" content="focus() can focus auto skipped subtree elements"> 10 <meta name="assert" content="focus() scrolls after removing contain:size"> 11 <script src="/common/reftest-wait.js"></script> 12 13 <style> 14 .spacer { 15 height: 1000px; 16 background: lightblue; 17 } 18 #container { 19 width: 150px; 20 background: lightblue; 21 contain-intrinsic-size: 50px 150px; 22 contain: paint; 23 } 24 #child { 25 width: 150px; 26 height: 300px; 27 } 28 #target { 29 position: absolute; 30 bottom: 0; 31 32 width: 50px; 33 height: 50px; 34 background: green; 35 } 36 .auto { 37 content-visibility: auto; 38 } 39 </style> 40 41 <div>top of the page</div> 42 <div class=spacer></div> 43 <div id=container class=auto> 44 <div id=child></div> 45 <div id=target tabindex=0>PASS</div> 46 </div> 47 <div class=spacer></div> 48 <div>bottom of the page</div> 49 50 <script> 51 function runTest() { 52 document.getElementById("target").focus(); 53 requestAnimationFrame(takeScreenshot); 54 } 55 56 window.onload = requestAnimationFrame(() => { 57 requestAnimationFrame(() => { 58 requestAnimationFrame(() => { 59 runTest(); 60 }); 61 }); 62 }); 63 </script> 64 </html>