mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 05:08:36 +02:00
a12f231eac
Automatic update from web-platform-testsReland "Port another set of sticky tests to JS rather than reftests" This is a reland of 913109149534a732bdb5461d0ba2759f5d2f50f4 Now that the WPT test infra has been pulled from upstream, the hope is that changing tests from reftest to jsharness won't cause the bots to fail horribly. Original change's description: > Port another set of sticky tests to JS rather than reftests > > Change-Id: Idf6dd882d2d50b1ec349f245d76717553ee266b3 > Reviewed-on: https://chromium-review.googlesource.com/882002 > Reviewed-by: Robert Flack <flackr@chromium.org> > Commit-Queue: Stephen McGruer <smcgruer@chromium.org> > Cr-Commit-Position: refs/heads/master@{#532966} Bug: 699244 Change-Id: Ib8c16d08f1327765e0bd322a708452373db8581c Reviewed-on: https://chromium-review.googlesource.com/951662 Commit-Queue: Stephen McGruer <smcgruer@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/master@{#541437} wpt-commits: 0070589338713156909137fbf4cc86ebdba8bc7c wpt-pr: 9881 wpt-commits: 0070589338713156909137fbf4cc86ebdba8bc7c wpt-pr: 9881
49 lines
2.1 KiB
HTML
49 lines
2.1 KiB
HTML
<!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>
|