Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-26 12:20:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1598495 [wpt PR 20378] - Migrate more layout instability tests to WPT., a=testonly

Browse Source 
Automatic update from web-platform-tests
Migrate more layout instability tests to WPT.

Bug: 984109
Change-Id: Ie31c63995f63f8acbfa26d97966ffe30016edd3c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1925447
Commit-Queue: Steve Kobes <skobes@chromium.org>
Reviewed-by: Nicolás Peña Moreno <npm@chromium.org>
Cr-Commit-Position: refs/heads/master@{#718648}

--

wpt-commits: 1a09247a6b3cee81a1cf32af40d17220680dc7f7
wpt-pr: 20378
This commit is contained in:
Steve Kobes 2019-12-02 13:28:01 +00:00 committed by moz-wptsync-bot
parent 30e98112b7
commit f973ccfb55
11 changed files with 431 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
testing/web-platform/tests/layout-instability/clip-negative-bottom-margin.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<title>Layout Instability: clip with negative bottom margin</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
#scroller { overflow: scroll; width: 200px; height: 500px; }
#space { height: 1000px; margin-bottom: -500px; }
#j { width: 150px; height: 150px; background: yellow; }
</style>
<div id='scroller'>
<div id='space'></div>
<div id='j'></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);
// Increase j's top margin by 100px. Since j is fully clipped by the scroller,
// this should not generate a shift.
document.querySelector("#j").style.marginTop = "100px";
await waitForAnimationFrames(3);
assert_equals(watcher.score, 0);
}, "Clip with negative bottom margin.");
</script>

52
testing/web-platform/tests/layout-instability/composited-element-movement.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<title>Layout Instability: element with compositing layer hint</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
#shift {
position: relative;
width: 500px;
height: 200px;
background: yellow;
}
#container {
position: absolute;
width: 350px;
height: 400px;
right: 50px;
top: 100px;
background: #ccc;
}
.promote { will-change: transform; }
</style>
<div id="container" class="promote">
<div id="space"></div>
<div id="shift" class="promote"></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);
// Induce a shift.
document.querySelector("#space").style = "height: 100px";
// #shift is 400x200 after viewport intersection with correct application of
// composited #container offset, and 100px lower after shifting, so impact
// region is 400 * (200 + 100).
const expectedScore = computeExpectedScore(400 * (200 + 100), 100);
// Observer fires after the frame is painted.
assert_equals(watcher.score, 0);
await watcher.promise;
assert_equals(watcher.score, expectedScore);
}, "Element with compositing layer hint.");
</script>

32
testing/web-platform/tests/layout-instability/fully-clipped-visual-rect.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>Layout Instability: fully clipped visual rect</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
body { margin: 0; }
#clip { width: 0px; height: 600px; overflow: hidden; }
#j { position: relative; width: 300px; height: 200px; }
</style>
<div id='clip'><div id='j'></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);
// Shift an element that is fully clipped by its container.
document.querySelector("#j").style.top = "200px";
await waitForAnimationFrames(3);
assert_equals(watcher.score, 0);
}, "Fully clipped visual rect.");
</script>

52
testing/web-platform/tests/layout-instability/ignore-fixed-and-sticky.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<title>Layout Instability: ignore fixed and sticky positioning</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
body { height: 2000px; }
#f1, #f2 {
position: fixed;
width: 300px;
height: 100px;
left: 100px;
}
#f1 { top: 0; }
#f2 { top: 150px; will-change: transform; }
#s1 {
position: sticky;
width: 200px;
height: 100px;
left: 450px;
top: 0;
}
</style>
<div id='f1'>fixed</div>
<div id='f2'>fixed composited</div>
<div id='s1'>sticky</div>
normal
<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);
// Scroll down by 50px.
document.scrollingElement.scrollTop = 50;
// Force a layout.
document.body.style.height = "2500px";
// No layout shift should occur as a result of the scroll-triggered
// repositioning of fixed and sticky elements.
await waitForAnimationFrames(3);
assert_equals(watcher.score, 0);
}, 'Ignore fixed and sticky.');
</script>

32
testing/web-platform/tests/layout-instability/local-shift-without-viewport-shift.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>Layout Instability: local shift without viewport shift</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
#c { position: relative; width: 300px; height: 100px; transform: scale(0.1); }
#j { position: relative; width: 100px; height: 10px; }
</style>
<div id='c'>
<div id='j'></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);
document.querySelector("#j").style.top = "4px";
// Make sure no shift score is reported, since the element didn't move in the
// viewport.
await waitForAnimationFrames(3);
assert_equals(watcher.score, 0);
}, "Local shift without viewport shift.");
</script>

36
testing/web-platform/tests/layout-instability/multi-clip-visual-rect.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<title>Layout Instability: multi clip visual rect</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
body { margin: 0; }
#outer { width: 200px; height: 600px; overflow: hidden; }
#inner { width: 300px; height: 150px; overflow: hidden; }
#j { position: relative; width: 300px; height: 600px; }
</style>
<div id='outer'><div id='inner'><div id='j'></div></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);
document.querySelector("#j").style.top = "-200px";
// Note that, while the element moves up 200px, its visibility is
// clipped at 0px,150px height, so the additional 200px of vertical
// move distance is not included in the score.
// (clip width 200) * (clip height 150)
const expectedScore = computeExpectedScore(200 * 150, 200);
await watcher.promise;
assert_equals(watcher.score, expectedScore);
}, "Multi clip visual rect.");
</script>

32
testing/web-platform/tests/layout-instability/partially-clipped-visual-rect.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>Layout Instability: partially clipped visual rect</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
body { margin: 0; }
#clip { width: 150px; height: 600px; overflow: hidden; }
#j { position: relative; width: 300px; height: 200px; }
</style>
<div id='clip'><div id='j'></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);
document.querySelector("#j").style.top = "200px";
// (clipped width 150px) * (height 200 + movement 200)
const expectedScore = computeExpectedScore(150 * (200 + 200), 200);
await watcher.promise;
assert_equals(watcher.score, expectedScore);
}, "Partially clipped visual rect.");
</script>

34
testing/web-platform/tests/layout-instability/shift-into-viewport.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<title>Layout Instability: shift into viewport</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
body { margin: 0; }
#j { position: relative; width: 600px; height: 200px; top: 600px; }
</style>
<div id='j'></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);
document.querySelector("#j").style.top = "400px";
// The element moves from outside the viewport to within the viewport, which
// should generate a shift.
// (width 600) * (height 0 + move 200)
const expectedScore = computeExpectedScore(600 * 200, 200);
await watcher.promise;
assert_equals(watcher.score, expectedScore);
}, "Shift into viewport.");
</script>

32
testing/web-platform/tests/layout-instability/shift-outside-viewport.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<title>Layout Instability: shift outside viewport</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
body { margin: 0; }
#j { position: relative; width: 600px; height: 200px; top: 600px; }
</style>
<div id='j'></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);
document.querySelector("#j").style.top = "800px";
// Since the element moves entirely outside of the viewport, it shouldn't
// generate a score.
await waitForAnimationFrames(3);
assert_equals(watcher.score, 0);
}, "Shift outside viewport.");
</script>

37
testing/web-platform/tests/layout-instability/shift-while-scrolled.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<title>Layout Instability: shift while scrolled</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
body { height: 2000px; margin: 0; }
#shift { position: relative; width: 300px; height: 200px; }
</style>
<div id="shift"></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);
// Scroll down by 100px.
document.scrollingElement.scrollTop = 100;
assert_equals(watcher.score, 0);
// Generate a layout shift.
document.querySelector("#shift").style = "top: 60px";
// Impact region: width * (height - scrollTop + moveDistance)
const expectedScore = computeExpectedScore(
300 * (200 - 100 + 60), 60);
await watcher.promise;
assert_equals(watcher.score, expectedScore);
}, 'Layout shift with non-zero scroll offset.');
</script>

56
testing/web-platform/tests/layout-instability/shift-with-counterscroll.html Normal file
View File

@ -0,0 +1,56 @@
<!DOCTYPE html>
<title>Layout Instability: shift with counterscroll not counted</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
#s {
overflow: scroll;
position: absolute;
left: 20px;
top: 20px;
width: 200px;
height: 200px;
}
#sp {
width: 170px;
height: 600px;
}
#ch {
position: relative;
background: yellow;
left: 10px;
top: 100px;
width: 150px;
height: 150px;
}
</style>
<div id="s">
<div id="sp">
<div id="ch"></div>
</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);
let scroller = document.querySelector("#s");
let changer = document.querySelector("#ch");
changer.style.top = "200px";
scroller.scrollTop = 100;
await waitForAnimationFrames(3);
assert_equals(watcher.score, 0);
}, "Shift with counterscroll not counted.");
</script>