forked from mirrors/gecko-dev
ebacbf1864
Automatic update from web-platform-tests Fix performance bug with scrollable areas in subtree layout (#32601) This change fixes the perf test in third_party/blink/perf_tests/layout/subtree-layout-scrollable-area.html by limiting the number of scrollable areas that are added to the frame view. This regressed in https://crrev.com/c/1931148, which added all areas to the frame view. This change improves performance in that test by 90%. The previous behavior of only adding scrollable areas which are visible to hit-testing and not `overflow: hidden` no longer works, since such areas must still be considered for scroll anchoring. However, scroll anchoring does not apply to areas whose content is shorter (in the block flow direction) than the scrollable area, and so scrollable areas which don't overflow in the block flow direction do not need to be added to the frame view. Bug: 1291551 Change-Id: I23270795b70d6a7d3b6f2c28cfc6e29d938f7943 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3424999 Reviewed-by: Steve Kobes <skobes@chromium.org> Commit-Queue: Andreu Botella <abotella@igalia.com> Cr-Commit-Position: refs/heads/main@{#965386} Co-authored-by: Andreu Botella <abotella@igalia.com> -- wpt-commits: ebd1e5305bdb87f8a359d2703d018568f589c1b6 wpt-pr: 32601
52 lines
1.3 KiB
HTML
52 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait">
|
|
<head>
|
|
<title>Test that subtree layout with nested overflow preserves scroll anchoring in vertical mode.</title>
|
|
<link rel="author" title="Chris Harrelson" href="mailto:chrishtr@chromium.org">
|
|
<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/">
|
|
<link rel="match" href="nested-overflow-subtree-layout-vertical-ref.html">
|
|
<script src="/common/reftest-wait.js"></script>
|
|
</head>
|
|
<style>
|
|
#outer {
|
|
overflow: hidden;
|
|
width: 500px;
|
|
height: 500px;
|
|
writing-mode: vertical-rl;
|
|
}
|
|
#inner {
|
|
overflow: auto;
|
|
position: relative;
|
|
width: 2000px;
|
|
height: 500px;
|
|
}
|
|
p {
|
|
font: 48pt monospace;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="outer">
|
|
<div id="inner">
|
|
<p>Anchor</p>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const outer = document.querySelector("#outer");
|
|
const inner = document.querySelector("#inner");
|
|
|
|
onload = () => {
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => {
|
|
outer.scrollTo(-70, 0);
|
|
requestAnimationFrame(() => {
|
|
const elem = document.createElement("p");
|
|
elem.textContent = "FAIL";
|
|
inner.insertBefore(elem, inner.firstChild);
|
|
takeScreenshot();
|
|
});
|
|
});
|
|
});
|
|
};
|
|
</script>
|