position-sticky-transforms-translate.html (2091B)
1 <!DOCTYPE html> 2 <title>translations on position:sticky elements should apply after sticking</title> 3 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 4 <meta name="viewport" content="width=device-width,initial-scale=1"> 5 <meta name="assert" content="This test checks that translations on position:sticky elements are carried out on their stuck position" /> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <script src="../resources/sticky-util.js"></script> 11 12 <body style="margin: 0;"></body> 13 14 <script> 15 test(() => { 16 const elements = setupStickyTest('top', 50); 17 elements.sticky.style.transform = 'translateY(-100%)'; 18 elements.scroller.scrollTop = 100; 19 // Transforms don't affect offsetTop, so use getBoundingClientRect. 20 assert_equals(elements.sticky.getBoundingClientRect().y, 21 elements.scroller.getBoundingClientRect().y); 22 }, 'Translation transform can move sticky element past sticking point'); 23 24 test(() => { 25 const elements = setupStickyTest('top', 50); 26 elements.sticky.style.transform = 'translateY(50%)'; 27 elements.scroller.scrollTop = 200; 28 // Transforms don't affect offsetTop, so use getBoundingClientRect. 29 const stickyElementOffset = elements.sticky.getBoundingClientRect().y - 30 elements.scroller.getBoundingClientRect().y; 31 assert_equals(stickyElementOffset, 100); 32 }, 'Stuck elements can still be moved via translations'); 33 34 test(() => { 35 const elements = setupStickyTest('top', 50); 36 elements.container.style.transform = 'translateY(100px)'; 37 elements.scroller.scrollTop = 200; 38 // Transforms don't affect offsetTop, so use getBoundingClientRect. 39 // Here the sticky element will originally have stuck at 50px from the top, 40 // but is then 'pulled' downwards by the 100px container transform. 41 const stickyElementOffset = elements.sticky.getBoundingClientRect().y - 42 elements.scroller.getBoundingClientRect().y; 43 assert_equals(stickyElementOffset, 150); 44 }, 'The sticky element should stick before the container is offset by a ' + 45 'translation'); 46 </script>