mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 05:08:36 +02:00
36953e3765
Automatic update from web-platform-tests [css-scroll-snap] Resnap containers after layout changes Per spec [1], snap containers should attempt to snap after layout changes and initial layout. If the previously snapped element still exists after the layout change, then the container must snap to it. This patch only considers snap targets set on the main thread since snap targets set on the impl thread are currently not synced back to main; this behaviour will be implemented in a follow-up. Design doc: https://docs.google.com/document/d/1Ufy55a19-iquba-LBiAE6AS2yBzfBQ5ZHFSpZGabS4c/edit?usp=sharing [1] https://drafts.csswg.org/css-scroll-snap/#re-snap Bug: 866127 Change-Id: I1442e0f464408fb5d9c49c5748a45aec0ed4d166 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1912906 Commit-Queue: Kaan Alsan <alsan@google.com> Reviewed-by: Majid Valipour <majidvp@chromium.org> Reviewed-by: David Bokan <bokan@chromium.org> Reviewed-by: Yi Gu <yigu@chromium.org> Cr-Commit-Position: refs/heads/master@{#720007} -- wpt-commits: c4182149f03eb30058efcd0e46c6e41b526f1cb1 wpt-pr: 20241
49 lines
881 B
HTML
49 lines
881 B
HTML
<!DOCTYPE html>
|
|
<title>
|
|
Scrollers should snap to the closest snap point on initial layout (using 'direction: rtl')
|
|
</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-scroll-snap/#re-snap" />
|
|
<link rel="match" href="snap-after-initial-layout-ref.html" />
|
|
<style>
|
|
div {
|
|
position: absolute;
|
|
margin: 0;
|
|
}
|
|
|
|
#scroller {
|
|
height: 500px;
|
|
width: 500px;
|
|
overflow: hidden;
|
|
scroll-snap-type: both mandatory;
|
|
direction: rtl;
|
|
}
|
|
|
|
#close-target {
|
|
width: 300px;
|
|
height: 300px;
|
|
top: 100px;
|
|
right: 200px;
|
|
background-color: green;
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
#far-target {
|
|
width: 300px;
|
|
height: 300px;
|
|
top: 100px;
|
|
right: 700px;
|
|
background-color: red;
|
|
scroll-snap-align: start;
|
|
}
|
|
|
|
.area {
|
|
width: 2000px;
|
|
height: 2000px;
|
|
}
|
|
</style>
|
|
|
|
<div id="scroller">
|
|
<div class="area"></div>
|
|
<div id="close-target"></div>
|
|
<div id="far-target"></div>
|
|
</div>
|