forked from mirrors/gecko-dev
ef3d4e5f78
Automatic update from web-platform-tests Let OverflowClip instead of ScrollTranslation create layout shift root This avoids layout shift root status change (causing layout shifts in descendants ignored) when the existence of ScrollTranslation changes, e.g. when overflowing status changes or scroll offset changes from 0 to non-zero. Summary of layout_shift.cluster_telemetry https://ct.skia.org/results/cluster-telemetry/tasks/chromium_perf_runs/wangxianzhu-ChromiumPerf-5625/html/index.html: mainFrameCumulativeLayoutShift 1.441% overallCumulativeLayoutShift 0.519% Bug: 1165353 Change-Id: I61cb5994e9d70c751a2767de417b8e70aab79def Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2690998 Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/master@{#853843} -- wpt-commits: 9b0d1ce0412c990e8d1e715c88ad37a6d88ebf0b wpt-pr: 27615
33 lines
1.3 KiB
HTML
33 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<title>Layout Instability: change under overflow clipping container causing shift and overflow status change at the same time</title>
|
|
<link rel="help" href="https://wicg.github.io/layout-instability/" />
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="resources/util.js"></script>
|
|
<div style="height: 100px"></div>
|
|
<div style="overflow: auto; width: 400px; height: 400px">
|
|
<div id="resized" style="width: 600px; height: 100px; background: gray"></div>
|
|
<div id="shifted" style="width: 300px; height: 100px; background: blue"></div>
|
|
</div>
|
|
<script>
|
|
promise_test(async () => {
|
|
const watcher = new ScoreWatcher;
|
|
|
|
// Wait for the initial render to complete.
|
|
await waitForAnimationFrames(2);
|
|
|
|
resized.style.width = '200px';
|
|
resized.style.height = '200px';
|
|
|
|
const expectedScore = computeExpectedScore(300 * (100 + 100), 100);
|
|
|
|
assert_equals(watcher.score, 0);
|
|
await watcher.promise;
|
|
assert_equals(watcher.score, expectedScore);
|
|
|
|
resized.style.width = '600px';
|
|
resized.style.height = '100px';
|
|
await watcher.promise;
|
|
assert_equals(watcher.score, expectedScore * 2);
|
|
}, 'Change under overflow clipping container causing shift and overflow status change at the same time');
|
|
</script>
|