position-sticky-transforms.html (2180B)
1 <!DOCTYPE html> 2 <title>transforms 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="assert" content="This test checks that transforms on position:sticky elements are carried out on their stuck position" /> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <script src="../resources/sticky-util.js"></script> 10 11 <body style="margin: 0;"></body> 12 13 <script> 14 test(() => { 15 const elements = setupStickyTest('top', 50); 16 elements.sticky.style.transform = 'scale(2)'; 17 elements.scroller.scrollTop = 200; 18 19 // Transforms don't affect offsetTop, so use getBoundingClientRect. 20 // Scaling the sticky element by 2 means its top-y moves (1/2 * height) 21 // upwards, in this case placing it at the top of the viewport. 22 const boundingRect = elements.sticky.getBoundingClientRect(); 23 assert_equals(boundingRect.y, elements.scroller.getBoundingClientRect().y); 24 }, 'Scale transforms are carried out on the stuck element position'); 25 26 test(() => { 27 const elements = setupStickyTest('top', 50); 28 elements.sticky.style.transform = 'rotateX(60deg)'; 29 elements.scroller.scrollTop = 200; 30 31 // Transforms don't affect offsetTop, so use getBoundingClientRect. 32 // Rotating around the x-axis essentially 'squashes' it (from the camera's 33 // viewpoint), in this case shifting the offset to 75 rather than 50. 34 const stickyElementOffset = elements.sticky.getBoundingClientRect().y - 35 elements.scroller.getBoundingClientRect().y; 36 assert_equals(stickyElementOffset, 75); 37 }, 'Rotate transforms are carried out on the stuck element position'); 38 39 test(() => { 40 const elements = setupStickyTest('top', 50); 41 elements.sticky.style.transform = 'perspective(3px) translateZ(1px)'; 42 elements.scroller.scrollTop = 200; 43 44 // Transforms don't affect offsetTop, so use getBoundingClientRect. 45 const stickyElementOffset = elements.sticky.getBoundingClientRect().y - 46 elements.scroller.getBoundingClientRect().y; 47 assert_equals(stickyElementOffset, 25); 48 }, 'Perspective transforms are carried out on the stuck element position'); 49 </script>