mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 05:08:36 +02:00
e91be6b314
One of the issues with the test-case in this bug is that the page consumes a ton
of CPU due to scroll anchor adjustments being triggered from scroll events,
which in turn cause other scroll events to fire.
This happens in Chrome as well (just scroll to the bottom of the test-case, and
do `addEventListener("scroll", () => console.log("scroll"))` on devtools. But I
think it's worth fixing. This patch fixes it and overall I think it's a slightly
better approach to suppress adjustments than what we're doing.
Differential Revision: https://phabricator.services.mozilla.com/D39339
--HG--
extra : moz-landing-system : lando
71 lines
2 KiB
HTML
71 lines
2 KiB
HTML
<!DOCTYPE html>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
|
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1568778">
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/#suppression-triggers">
|
|
<style>
|
|
#hidden {
|
|
display: none;
|
|
background: red;
|
|
}
|
|
#spacer {
|
|
height: calc(100vh + 200px); /* At least 200px of scroll range */
|
|
}
|
|
</style>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>1
|
|
<th>1
|
|
<th>1
|
|
<th>1
|
|
</tr>
|
|
</thead>
|
|
<thead id="hidden">
|
|
<tr>
|
|
<th>1
|
|
<th>1
|
|
<th>1
|
|
<th>1
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>0 <td>0 <td>0 <td>0 </tr>
|
|
<tr><td>0 <td>0 <td>0 <td>0 </tr>
|
|
<tr><td>0 <td>0 <td>0 <td>0 </tr>
|
|
<tr><td>0 <td>0 <td>0 <td>0 </tr>
|
|
<tr><td>0 <td>0 <td>0 <td>0 </tr>
|
|
<tr><td>0 <td>0 <td>0 <td>0 </tr>
|
|
<tr><td>0 <td>0 <td>0 <td>0 </tr>
|
|
</tbody>
|
|
</table>
|
|
<div id="spacer"></div>
|
|
<script>
|
|
let isFirstEvent = true;
|
|
const targetScrollPosition = 100;
|
|
const hidden = document.querySelector("#hidden");
|
|
const t = async_test("Scroll offset doesn't get stuck in infinite scroll events when an element goes back and forth to display: none while changing abspos style");
|
|
window.onscroll = t.step_func(function() {
|
|
hidden.style.display = "block";
|
|
hidden.style.position = "absolute";
|
|
hidden.style.visibility = "hidden";
|
|
window.unused = hidden.offsetHeight;
|
|
hidden.style.display = "";
|
|
hidden.style.position = "";
|
|
hidden.style.visibility = "";
|
|
|
|
assert_true(isFirstEvent, "Shouldn't get more than one scroll event");
|
|
isFirstEvent = false;
|
|
requestAnimationFrame(t.step_func(function() {
|
|
requestAnimationFrame(t.step_func_done(function() {
|
|
assert_equals(document.scrollingElement.scrollTop, targetScrollPosition);
|
|
}));
|
|
}));
|
|
});
|
|
|
|
window.onload = t.step_func(function() {
|
|
window.scrollTo(0, targetScrollPosition);
|
|
});
|
|
</script>
|