fune/testing/web-platform/tests/layout-instability/inline-flow-shift.html
Xianzhu Wang 1eea383eea Bug 1657453 [wpt PR 24898] - Reland again "Use border box or layout overflow rect for layout shift tracking", a=testonly
Automatic update from web-platform-tests
Reland again "Use border box or layout overflow rect for layout shift tracking"

Original patch: crrev.com/c/2319538
First reland: crrev.com/c/2333648

Changes in this patch (https://chromium-review.googlesource.com/c/chromium/src/+/2336301/1..10)
1. Fixed use-after-free of ContainingBlockScope. Similar to the first
   revert, the issue was because it was allocated in
   PaintInvalidatorContext which is in a vector replacing the real stack.
   ContainingBlockScope::outer_ might point to an invalid address if the
   vector was reallocated. Now use std::unique_ptr<ContainingBlockScope>
   in PaintInvalidatorContext. This increases the cost a bit but not much
   because ContainingBlockScope is created for LayoutBlockFlow with
   inline children only.
2. Rebased on crrev.com/c/2335647 which avoids memory regression caused
   by the original CL, and enables LayoutShiftTracker to use more
   accurate previous rects for shifted boxes.
3. Simplify LayoutShiftTracker::ReattachHook[::Scope].

Bug: 1108622
Change-Id: I7b4a85675483f7006ade8925c159a7882f08ec27
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2336301
Reviewed-by: Steve Kobes <skobes@chromium.org>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#795179}

--

wpt-commits: 70f8d7999f7af89efa26bd96567dbb7417aec4c5
wpt-pr: 24898
2020-08-15 07:04:10 +00:00

42 lines
1.5 KiB
HTML

<!DOCTYPE html>
<title>Layout Instability: inline/text movement is detected</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="width: 200px; font-size: 20px; line-height: 25px">
1AAAAAAA<br>
2AAAAAAA<br>
3AAAAAAA<br>
<div id="inline-block" style="display: inline-block; height: 50px">4AAAAAAA</div><br>
5AAAAAAA<br>
6AAAAAAA<br>
7AAAAAAA<br>
</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 inline_block = document.querySelector("#inline-block");
inline_block.style.height = '100px';
// The lines below the inline-block are shifted down by 50px.
// The implementation may measure the real width of the shifted text
// or use the available width (i.e. width of the containing block).
// Also tolerate extra 10% error.
const text_width = inline_block.offsetWidth;
const expectedScoreMin = computeExpectedScore(text_width * (30 * 3 + 50), 50) * 0.9;
const expectedScoreMax = computeExpectedScore(200 * (30 * 3 + 50), 50) * 1.1;
// Observer fires after the frame is painted.
assert_equals(watcher.score, 0);
await watcher.promise;
assert_between_exclusive(watcher.score, expectedScoreMin, expectedScoreMax);
}, 'Inline flow movement.');
</script>