content-visibility-058-ref.html (1339B)
1 <!doctype HTML> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>CSS Content Visibility: auto, scrollIntoView() (reference)</title> 5 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-contain/#content-visibility"> 7 <script src="/common/reftest-wait.js"></script> 8 9 <style> 10 .spacer { 11 height: 10000px; 12 } 13 .container { 14 position: relative; 15 width: 150px; 16 background: lightblue; 17 contain-intrinsic-size: 50px 250px; 18 } 19 .size_contained { 20 contain: size; 21 } 22 .child { 23 width: 50px; 24 height: 300px; 25 background: lightgreen; 26 } 27 #target { 28 position: absolute; 29 bottom: 0; 30 31 width: 10px; 32 height: 10px; 33 background: blue; 34 } 35 </style> 36 37 <p>Test FAILS if this sentence is at the top of the screen. 38 <div class=spacer></div> 39 <div id=container class="container"> 40 <div class=child></div> 41 <div id=target></div> 42 </div> 43 <p>Test PASSES if this sentence is near the top of the screen, after a thin band of three colors. 44 <div class=spacer></div> 45 46 <script> 47 48 function runReference() { 49 document.getElementById("target").scrollIntoView(true /* alignToTop */); 50 requestAnimationFrame(takeScreenshot); 51 } 52 53 window.onload = requestAnimationFrame(() => { 54 requestAnimationFrame(() => { 55 requestAnimationFrame(() => { 56 runReference(); 57 }); 58 }); 59 }); 60 61 </script>