Ane Diaz de Tuesta
663da710ae
Automatic update from web-platform-tests layout_shift: Sort LayoutShift.sources by impact area Sort the LayoutShift.sources array by per-source impact area in descending order (largest first). LayoutShift.sources currently returns up to five sources in an undefined order. This makes it difficult for diagnostics and tooling to reliably identify the most impactful contributor to a layout shift. Sorting ensures that sources[0] always corresponds to the largest impact area. Impact area is computed as the union of previousRect and currentRect for each source, matching the semantics used by Cumulative Layout Shift (CLS) calculation. This provides a deterministic ordering and makes the API more meaningful for users. The WICG spec PR: https://github.com/WICG/layout-instability/pull/126 Bug: 450950606 Change-Id: Iec3530250a8c29f44203f0e17b7789806323dd48 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7196706 Commit-Queue: Ane Diaz De Tuesta <anediaz@gmail.com> Reviewed-by: Michal Mocny <mmocny@chromium.org> Reviewed-by: Scott Haseley <shaseley@chromium.org> Cr-Commit-Position: refs/heads/main@{#1554088} -- wpt-commits: a9cc67ed3c97410ad427eeb0cdfb2baea7bb644c wpt-pr: 56496
74 lines
1.7 KiB
HTML
74 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<title>Layout Instability: source attribution prioritization</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/test-adapter.js"></script>
|
|
<script src="resources/util.js"></script>
|
|
<style>
|
|
body { margin: 0; }
|
|
#a, #b, #c, #d, #e, #f {
|
|
display: inline-block;
|
|
background: gray;
|
|
min-width: 10px;
|
|
min-height: 10px;
|
|
vertical-align: top;
|
|
}
|
|
#a { width: 30px; height: 30px; }
|
|
#b { width: 20px; height: 20px; }
|
|
#c { height: 50px; }
|
|
#d { width: 50px; }
|
|
#e { width: 40px; height: 30px; }
|
|
#f { width: 30px; height: 40px; }
|
|
</style>
|
|
<div id="grow"></div>
|
|
<div id="a"></div
|
|
><div id="b"></div
|
|
><div id="c"></div
|
|
><div id="d"></div
|
|
><div id="e"></div
|
|
><div id="f"></div>
|
|
<script>
|
|
|
|
let $ = id => document.querySelector(id);
|
|
|
|
promise_test(async () => {
|
|
const watcher = new ScoreWatcher;
|
|
|
|
// Wait for the initial render to complete.
|
|
await waitForAnimationFrames(2);
|
|
|
|
$("#grow").style.height = "50px";
|
|
await watcher.promise;
|
|
|
|
cls_expect(watcher, {sources: [
|
|
{
|
|
node: $("#e"),
|
|
previousRect: [110, 0, 40, 30],
|
|
currentRect: [110, 50, 40, 30]
|
|
},
|
|
{
|
|
node: $("#f"),
|
|
previousRect: [150, 0, 30, 40],
|
|
currentRect: [150, 50, 30, 40]
|
|
},
|
|
{
|
|
node: $("#a"),
|
|
previousRect: [0, 0, 30, 30],
|
|
currentRect: [0, 50, 30, 30]
|
|
},
|
|
{
|
|
node: $("#c"),
|
|
previousRect: [50, 0, 10, 50],
|
|
currentRect: [50, 50, 10, 50]
|
|
},
|
|
{
|
|
node: $("#d"),
|
|
previousRect: [60, 0, 50, 10],
|
|
currentRect: [60, 50, 50, 10]
|
|
}
|
|
]});
|
|
}, "Source attribution prioritizes by impact.");
|
|
|
|
</script>
|