Bug 1698728 [wpt PR 28046] - Revert "Improve counterscroll handling", a=testonly

Automatic update from web-platform-tests
Revert "Improve counterscroll handling"

This reverts commit c3a63721ee0613b73066c5166109c0dd054b926e.

Reason for revert: Caused CLS benchmark regressions. Some are expected,
like the change in shift-while-scrolled.html. Some look problematic,
e.g. some results changed from 0 to non-0. Needs investigation.

Original change's description:
> Improve counterscroll handling
>
> Previously we tracked the maximum scroll offset in a viewport to ignore
> counterscroll shifts, but it failed when
> - There were multiple scrollers scroll at the same time. Tested by
>   external/wpt/layout-instability/shift-with-counterscroll-2.html.
> - An invisible shift was countered by both scroll and transform, e.g.
>   move layout location by 100px, scroll by -50px, and transform by
>   -50px. Tested by
>   external/wpt/layout-instability/shift-with-counter-scroll-and-transform.html
>
> Now let PaintPropertyTreeBuilder track scroll delta, and pass the delta
> to LayoutShiftTracker.
>
> Bug: 1182213
> Change-Id: I18366ff7bc0e96374a954bee1c1600b582681dd8
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2741240
> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
> Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
> Reviewed-by: Steve Kobes <skobes@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#861702}

Bug: 1182213, 1186894
Change-Id: I69ccdb7d132f73618777530e932578fbadee35e7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2754072
Bot-Commit: Rubber Stamper <rubber-stamper@appspot.gserviceaccount.com>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#862256}

--

wpt-commits: 482859cfb029e9d64ee19027133b6fd3a67bff44
wpt-pr: 28046
This commit is contained in:
Xianzhu Wang 2021-03-17 13:28:23 +00:00 committed by moz-wptsync-bot
parent 39d7370875
commit 2e380694d3
4 changed files with 5 additions and 123 deletions

View File

@ -26,8 +26,9 @@ promise_test(async () => {
// Generate a layout shift.
document.querySelector("#shift").style = "top: 60px";
const moveDistanceInView = 100 - 60;
const expectedScore = computeExpectedScore(300 * 200, moveDistanceInView);
// Impact region: width * (height - scrollTop + moveDistance)
const expectedScore = computeExpectedScore(
300 * (200 - 100 + 60), 60);
await watcher.promise;
assert_equals(watcher.score, expectedScore);

View File

@ -1,62 +0,0 @@
<!DOCTYPE html>
<title>Layout Instability: shift with counter scroll and transform not counted</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
.scroller {
overflow: scroll;
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 200px;
}
.content {
width: 600px;
height: 600px;
}
.changer {
position: relative;
background: yellow;
left: 10px;
top: 100px;
width: 150px;
height: 150px;
}
</style>
<div id="scroller1" class="scroller">
<div class="content">
<div id="changer1" class="changer"></div>
</div>
</div>
<div id="scroller2" class="scroller">
<div class="content">
<div id="changer2" class="changer"></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>
<script>
promise_test(async () => {
const watcher = new ScoreWatcher;
// Wait for the initial render to complete.
await waitForAnimationFrames(2);
changer1.style.top = "250px";
changer1.style.transform = "translateY(-50px)";
// 250 - 50 = 200; old position is 100; hence scrollTop to counter is 100.
scroller1.scrollTop = 100;
changer2.style.left = "220px";
changer2.style.transform = "translateX(80px)";
// 220 + 80 = 300; old position is 10; hence scrollTop to counter is 290.
scroller2.scrollLeft = 290;
await waitForAnimationFrames(3);
assert_equals(watcher.score, 0);
}, "Shift with counter scroll and transform not counted.");
</script>

View File

@ -1,59 +0,0 @@
<!DOCTYPE html>
<title>Layout Instability: shift with counterscroll not counted, with 2 scrollers</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
.scroller {
overflow: scroll;
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 200px;
}
.content {
width: 170px;
height: 600px;
}
.changer {
position: relative;
background: yellow;
left: 10px;
top: 100px;
width: 150px;
height: 150px;
}
</style>
<div id="scroller1" class="scroller">
<div class="content">
<div id="changer1" class="changer"></div>
</div>
</div>
<div id="scroller2" class="scroller">
<div class="content">
<div id="changer2" class="changer"></div>
</div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>
<script>
promise_test(async () => {
const watcher = new ScoreWatcher;
// Wait for the initial render to complete.
await waitForAnimationFrames(2);
// Top goes from 100 to 200. scroll by 100 to counter it.
changer1.style.top = "200px";
scroller1.scrollTop = 100;
// Top goes from 100 to 300. scroll by 200 to counter it.
changer2.style.top = "300px";
scroller2.scrollTop = 200;
await waitForAnimationFrames(3);
assert_equals(watcher.score, 0);
}, "Shift with counterscroll not counted, with 2 scrollers.");
</script>

View File

@ -52,3 +52,5 @@ promise_test(async () => {
}, "Shift with counterscroll not counted.");
</script>