Commit 416c9444 authored by Steve Kobes's avatar Steve Kobes Committed by Commit Bot

Convert some LayoutShiftTrackerTest cases to WPT.

Bug: 984109
Change-Id: I34290d577d9a96218dfbf892f669572a2c1b1395
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1895389
Commit-Queue: Steve Kobes <skobes@chromium.org>
Reviewed-by: default avatarNicolás Peña Moreno <npm@chromium.org>
Cr-Commit-Position: refs/heads/master@{#712747}
parent 01fe81ff
...@@ -41,57 +41,6 @@ class LayoutShiftTrackerTest : public RenderingTest { ...@@ -41,57 +41,6 @@ class LayoutShiftTrackerTest : public RenderingTest {
} }
}; };
TEST_F(LayoutShiftTrackerTest, SimpleBlockMovement) {
SetBodyInnerHTML(R"HTML(
<style>
#j { position: relative; width: 300px; height: 100px; }
</style>
<div id='j'></div>
)HTML");
EXPECT_EQ(0.0, GetLayoutShiftTracker().Score());
EXPECT_EQ(0.0, GetLayoutShiftTracker().OverallMaxDistance());
GetDocument().getElementById("j")->setAttribute(html_names::kStyleAttr,
AtomicString("top: 60px"));
UpdateAllLifecyclePhases();
// 300 * (100 + 60) * (60 / 800) / (default viewport size 800 * 600)
EXPECT_FLOAT_EQ(0.1 * (60.0 / 800.0), GetLayoutShiftTracker().Score());
EXPECT_FLOAT_EQ(60.0, GetLayoutShiftTracker().OverallMaxDistance());
}
TEST_F(LayoutShiftTrackerTest, Transform) {
SetBodyInnerHTML(R"HTML(
<style>
body { margin: 0; }
#c { transform: translateX(-300px) translateY(-40px); }
#j { position: relative; width: 600px; height: 140px; }
</style>
<div id='c'>
<div id='j'></div>
</div>
)HTML");
GetDocument().getElementById("j")->setAttribute(html_names::kStyleAttr,
AtomicString("top: 60px"));
UpdateAllLifecyclePhases();
// (600 - 300) * (140 - 40 + 60) * (60 / 800) / (800 * 600)
EXPECT_FLOAT_EQ(0.1 * (60.0 / 800.0), GetLayoutShiftTracker().Score());
}
TEST_F(LayoutShiftTrackerTest, RtlDistance) {
SetBodyInnerHTML(R"HTML(
<style>
#j { position: relative; width: 100px; height: 100px; direction: rtl; }
</style>
<div id='j'></div>
)HTML");
GetDocument().getElementById("j")->setAttribute(
html_names::kStyleAttr, AtomicString("width: 70px; left: 10px"));
UpdateAllLifecyclePhases();
EXPECT_FLOAT_EQ(20.0, GetLayoutShiftTracker().OverallMaxDistance());
}
TEST_F(LayoutShiftTrackerTest, IgnoreAfterInput) { TEST_F(LayoutShiftTrackerTest, IgnoreAfterInput) {
SetBodyInnerHTML(R"HTML( SetBodyInnerHTML(R"HTML(
<style> <style>
......
// Utilities for Layout Instability tests.
// Returns a promise that is resolved when the specified number of animation
// frames has occurred.
waitForAnimationFrames = frameCount => {
return new Promise(resolve => {
const handleFrame = () => {
if (--frameCount <= 0)
resolve();
else
requestAnimationFrame(handleFrame);
};
requestAnimationFrame(handleFrame);
});
};
// Returns a promise that is resolved when the next animation frame occurs.
waitForAnimationFrame = () => waitForAnimationFrames(1);
// Helper to compute an expected layout shift score based on an expected impact
// region and max move distance for a particular animation frame.
computeExpectedScore = (impactRegionArea, moveDistance) => {
const docElement = document.documentElement;
const viewWidth = docElement.clientWidth;
const viewHeight = docElement.clientHeight;
const viewArea = viewWidth * viewHeight;
const viewMaxDim = Math.max(viewWidth, viewHeight);
const impactFraction = impactRegionArea / viewArea;
const distanceFraction = moveDistance / viewMaxDim;
return impactFraction * distanceFraction;
};
// An object that tracks the document cumulative layout shift score.
// Usage:
//
// const watcher = new ScoreWatcher;
// ...
// assert_equals(watcher.score, expectedScore);
//
// The score reflects only layout shifts that occur after the ScoreWatcher is
// constructed.
ScoreWatcher = function() {
if (PerformanceObserver.supportedEntryTypes.indexOf("layout-shift") == -1)
throw new Error("Layout Instability API not supported");
this.score = 0;
const resetPromise = () => {
this.promise = new Promise(resolve => {
this.resolve = () => {
resetPromise();
resolve();
}
});
};
resetPromise();
const observer = new PerformanceObserver(list => {
list.getEntries().forEach(entry => {
this.score += entry.value;
this.resolve();
});
});
observer.observe({entryTypes: ['layout-shift']});
};
<!DOCTYPE html>
<title>Layout Instability: movement distance uses starting corner</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
#shifter { position: relative; width: 100px; height: 100px; direction: rtl; }
</style>
<div id='shifter'></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>
<script>
promise_test(async () => {
const watcher = new ScoreWatcher;
// Wait for the initial render to complete.
await waitForAnimationFrames(2);
// Move the left edge rightward by 10px and the right edge leftward by 20px.
document.querySelector("#shifter").style = "width: 70px; left: 10px";
// The movement distance should use the displacement of the right edge.
const expectedScore = computeExpectedScore(100 * 100, 20);
await watcher.promise;
assert_equals(watcher.score, expectedScore);
}, 'RTL element.');
</script>
<!DOCTYPE html>
<title>Layout Instability: simple block movement is detected</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
#shifter { position: relative; width: 300px; height: 100px; }
</style>
<div id="shifter"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>
<script>
promise_test(async () => {
const watcher = new ScoreWatcher;
// Wait for the initial render to complete.
await waitForAnimationFrames(2);
// Modify the position of the div.
document.querySelector("#shifter").style = "top: 60px";
// An element of size (300 x 100) has shifted by 60px.
const expectedScore = computeExpectedScore(300 * (100 + 60), 60);
// Observer fires after the frame is painted.
assert_equals(watcher.score, 0);
await watcher.promise;
assert_equals(watcher.score, expectedScore);
}, 'Simple block movement.');
</script>
<!DOCTYPE html>
<title>Layout Instability: shift inside a transformed container</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
body { margin: 0; }
#container { transform: translateX(-300px) translateY(-40px); }
#shifter { position: relative; width: 600px; height: 140px; }
</style>
<div id="container">
<div id="shifter"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>
<script>
promise_test(async () => {
const watcher = new ScoreWatcher;
// Wait for the initial render to complete.
await waitForAnimationFrames(2);
// Modify the position of the div.
document.querySelector("#shifter").style = "top: 60px";
// The shifter has size 600 x 140, but the container's transform
// reduces its viewport overlap.
const expectedScore = computeExpectedScore(
(600 - 300) * (140 - 40 + 60), 60);
await watcher.promise;
assert_equals(watcher.score, expectedScore);
}, 'Transformed container.');
</script>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment