position-sticky-change-top.html (1396B)
1 <!DOCTYPE html> 2 <html class='reftest-wait'> 3 <title>Sticky elements should invalidate when top/left/bottom/right changes</title> 4 <link rel="match" href="position-sticky-change-top-ref.html" /> 5 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 6 <link rel="help" href="https://crbug.com/939632"> 7 <meta name="assert" content="This test checks that sticky elements are invalidated correctly when top/left/bottom/right change "/> 8 9 <script src="/common/reftest-wait.js"></script> 10 <script src="../resources/ref-rectangle.js"></script> 11 12 <!-- 13 It is important for this test that the sticky element is viewport-bound, and 14 that multiple animation frames pass before changing the style. 15 --> 16 <style> 17 .marker { 18 background: red; 19 position: absolute; 20 top: 200px; 21 height: 100px; 22 width: 100px; 23 } 24 25 .sticky { 26 /* Triggers promotion without creating stacking context. */ 27 backface-visibility: hidden; 28 background: green; 29 position: sticky; 30 top: 0; 31 width: 100px; 32 height: 100px; 33 } 34 35 .spacer { 36 height: 200vh; 37 } 38 </style> 39 <div class="marker"></div> 40 41 <div class="sticky"></div> 42 <div class="spacer"></div> 43 44 <script> 45 requestAnimationFrame(() => { 46 requestAnimationFrame(() => { 47 document.querySelector('.sticky').style.setProperty('top', '200px'); 48 createIndicatorForStickyElements(document.querySelectorAll('.sticky')); 49 takeScreenshot(); 50 }); 51 }); 52 </script> 53 </html>