position-sticky-transforms.html | Explore in Territory

<!DOCTYPE html>
<title>transforms on position:sticky elements should apply after sticking</title>
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that transforms on position:sticky elements are carried out on their stuck position" />

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<script src="../resources/sticky-util.js"></script>

<body style="margin: 0;"></body>

<script>
test(() => {
  const elements = setupStickyTest('top', 50);
  elements.sticky.style.transform = 'scale(2)';
  elements.scroller.scrollTop = 200;

  // Transforms don't affect offsetTop, so use getBoundingClientRect.
  // Scaling the sticky element by 2 means its top-y moves (1/2 * height)
  // upwards, in this case placing it at the top of the viewport.
  const boundingRect = elements.sticky.getBoundingClientRect();
  assert_equals(boundingRect.y, elements.scroller.getBoundingClientRect().y);
}, 'Scale transforms are carried out on the stuck element position');

test(() => {
  const elements = setupStickyTest('top', 50);
  elements.sticky.style.transform = 'rotateX(60deg)';
  elements.scroller.scrollTop = 200;

  // Transforms don't affect offsetTop, so use getBoundingClientRect.
  // Rotating around the x-axis essentially 'squashes' it (from the camera's
  // viewpoint), in this case shifting the offset to 75 rather than 50.
  const stickyElementOffset = elements.sticky.getBoundingClientRect().y -
    elements.scroller.getBoundingClientRect().y;
  assert_equals(stickyElementOffset, 75);
}, 'Rotate transforms are carried out on the stuck element position');

test(() => {
  const elements = setupStickyTest('top', 50);
  elements.sticky.style.transform = 'perspective(3px) translateZ(1px)';
  elements.scroller.scrollTop = 200;

  // Transforms don't affect offsetTop, so use getBoundingClientRect.
  const stickyElementOffset = elements.sticky.getBoundingClientRect().y -
    elements.scroller.getBoundingClientRect().y;
  assert_equals(stickyElementOffset, 25);
}, 'Perspective transforms are carried out on the stuck element position');
</script>
chromium/third_party/blink/web_tests/external/wpt/css/css-position/sticky/position-sticky-transforms.html
