Eain Chen
b5e49e3748
Automatic update from web-platform-tests Fix background painting when scrolling in reversed-flow containers When multiple backgrounds were set to scroll along with the content (background-attachment: local), they would not move correctly inside containers where the content flow was reversed, such as with flex-direction: row-reverse, column-reverse, or in rtl mode. The painting logic in AdjustRectForScrolledContent did not correctly handle the inverted scroll offsets that these reversed-flow layouts produce. This change corrects the calculation by using the original offset value for scrolling. This will ensure the background scrolls in sync with the content without affecting standard layouts. The background scrolling of following cases are as expected now: 1. Container with `direction:rtl`, fixed. 2. Container with `flex-direction:row-reverse`; fixed. 3. When `flex-direction:row-reverse` is applied to an inner content element, leaving the scroller's origin unchanged; not broken. 4. When both `rtl` and `row-reverse` are used for the container (contentand scrollbar remains as normal); not broken. 5. Container with `flex-direction:column-reverse`; fixed. Bug: 416697801 Change-Id: I21690ee7e78f0de6bba7a1cba4a586d1a9ea21d1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7535331 Reviewed-by: Claire Chambers <clchambers@microsoft.com> Commit-Queue: Eain Chen <eainchen@microsoft.com> Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1585027} -- wpt-commits: ac9f6f064919d8ae40cf44e13d9cef120821a9d6 wpt-pr: 57797
50 lines
1.5 KiB
HTML
50 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html class="reftest-wait">
|
|
<title>CSS Backgrounds: local attachment with flex-direction: row-reverse scroll</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-background-attachment">
|
|
<link rel="match" href="local-attachment-flex-row-reverse-scroll-ref.html">
|
|
<script src="/common/reftest-wait.js"></script>
|
|
<script src="/common/rendering-utils.js"></script>
|
|
<style>
|
|
.container {
|
|
width: 100px;
|
|
height: 100px;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
/* This is a multi-layered background for testing. */
|
|
background:
|
|
local linear-gradient(to right, yellow 50%, blue 50%) 0 0 / 100% 100% no-repeat,
|
|
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.2), transparent) 0 0 / 20px 100% no-repeat,
|
|
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.2), transparent) 100% 0 / 20px 100% no-repeat;
|
|
}
|
|
.content {
|
|
width: 100px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
</style>
|
|
<div id="init_scrolled" class="container">
|
|
<div class="content"></div>
|
|
<div class="content"></div>
|
|
</div>
|
|
<div id="mid_scrolled" class="container">
|
|
<div class="content"></div>
|
|
<div class="content"></div>
|
|
</div>
|
|
<div id="max_scrolled" class="container">
|
|
<div class="content"></div>
|
|
<div class="content"></div>
|
|
</div>
|
|
<script>
|
|
// In flex row-reverse setting, scrolling moves scrollLeft towards negative values.
|
|
mid_scrolled.scrollLeft = -50;
|
|
max_scrolled.scrollLeft = -100;
|
|
|
|
waitForAtLeastOneFrame().then(() => {
|
|
takeScreenshot();
|
|
});
|
|
</script>
|
|
</html>
|