content-visibility-078.html (1116B)
1 <!doctype HTML> 2 <html class="reftest-wait"> 3 <meta charset="utf8"> 4 <title>CSS Content Visibility: positioned movement update moves hidden container</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 <link rel="match" href="content-visibility-078-ref.html"> 8 <meta name="assert" content="when locked, position updates still apply"> 9 10 <script src="/common/reftest-wait.js"></script> 11 12 <style> 13 .hidden { content-visibility: hidden; } 14 #target { 15 top: 50px; 16 left: 0; 17 position: absolute; 18 width: 100px; 19 height: 100px; 20 background: blue; 21 } 22 #t2 { 23 top: 150px; 24 left: 100px; 25 position: absolute; 26 width: 100px; 27 height: 100px; 28 background: orange; 29 } 30 </style> 31 32 <p>Test passes if the blue and orange boxes are vertically aligned with each other. 33 <div id=target class=hidden>FAIL</div> 34 <div id=t2 class=hidden>FAIL</div> 35 36 <script> 37 function runTest() { 38 target.style = "left: 100px;"; 39 takeScreenshot(); 40 } 41 42 window.onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 43 </script>