-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Let sticky elements be layout shift roots
This makes PaintInvalidator to detect shifts of descendants of a sticky ancestor based on the offset from the ancestor instead of the LayoutView. Bug: 1145078 Change-Id: I2887dd29e5ab7e7ad843d27673ad567775d4ecc1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2519360 Reviewed-by: Steve Kobes <skobes@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/master@{#824473}
- Loading branch information
1 parent
e463526
commit d64a0cd
Showing
2 changed files
with
55 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
<!DOCTYPE html> | ||
<title>Layout Instability: movement of descendant of sticky positioned</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="position: sticky; width: 400px; height: 300px; top: 0"> | ||
<div id="child" style="position: relative; width: 300px; height: 200px; background: yellow"></div> | ||
</div> | ||
<script> | ||
promise_test(async () => { | ||
const watcher = new ScoreWatcher; | ||
|
||
// Wait for the initial render to complete. | ||
await waitForAnimationFrames(2); | ||
|
||
// Modify the position of the div. | ||
const child = document.querySelector("#child"); | ||
child.style.top = '100px'; | ||
|
||
const expectedScore = computeExpectedScore(300 * (200 + 100), 100); | ||
|
||
// Observer fires after the frame is painted. | ||
assert_equals(watcher.score, 0); | ||
await watcher.promise; | ||
assert_equals(watcher.score, expectedScore); | ||
}, 'Movement of descendant of sticky positioned.'); | ||
|
||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
<!DOCTYPE html> | ||
<title>Layout Instability: sticky positioned layout no change</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: 3000px"></div> | ||
<div id="sticky" style="position: sticky; width: 200px; height: 300px; bottom: 0"> | ||
<div style="will-change: transform; height: 3000px; background: yellow"></div> | ||
</div> | ||
<script> | ||
|
||
promise_test(async () => { | ||
const watcher = new ScoreWatcher; | ||
|
||
// Wait for the initial render to complete. | ||
await waitForAnimationFrames(2); | ||
|
||
// This doesn't change layout because the sticky element sticks to the bottom. | ||
sticky.style.marginTop = "-1000px"; | ||
|
||
await waitForAnimationFrames(3); | ||
assert_equals(watcher.score, 0); | ||
}, 'Sticky layout no change.'); | ||
|
||
</script> |