Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-24 21:31:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1698751 [wpt PR 28030] - Skip layout shift tracking for more invisible elements, a=testonly

Browse Source 
Automatic update from web-platform-tests
Skip layout shift tracking for more invisible elements

Besides the current conditions, e.g. visibility:hidden, opacity:0
(which is checked in PaintInvalidator instead of LayoutShiftTracker)
etc., also ignore the following invisible elements:
- For texts:
  - if the font is not renderable
  - if the text contains all whitespaces
- For blocks:
  - if it doesn't have any decorations, and doesn't have any children.

For performance and to reduce risk of false-negative of layout shift
tracking, the conditions are kept simple. If a developer still get
unexpected layout shift for invisible elements, we can suggest adding
visibility:hidden to the element to explicitly disable layout shift
tracking on the element.

See https://ct.skia.org/results/cluster-telemetry/tasks/chromium_perf_runs/wangxianzhu-ChromiumPerf-5677/html/index.html
for the change of overall CLS score with this CL.

Bug: 1099350
Change-Id: Ib7e89e0331663572d1eef511976556e8b2a96a96
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2743811
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Reviewed-by: Steve Kobes <skobes@chromium.org>
Reviewed-by: Nicolás Peña Moreno <npm@chromium.org>
Cr-Commit-Position: refs/heads/master@{#862593}

--

wpt-commits: 48e5e3c75c9d0df0b18ee7628a98bbc85250eedd
wpt-pr: 28030
This commit is contained in:
Xianzhu Wang 2021-03-17 13:30:58 +00:00 committed by moz-wptsync-bot
parent 8e5ffacf30
commit 7fcdc5f656
37 changed files with 61 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
testing/web-platform/tests/layout-instability/buffer-layout-shift.html
View File

@ -3,7 +3,7 @@
<title>Layout Instability entries are not available via the performance timeline</title>
<body>
<style>
#myDiv { position: relative; width: 300px; height: 100px; }
#myDiv { position: relative; width: 300px; height: 100px; background: blue; }
</style>
<div id='myDiv'></div>
<script src="/resources/testharness.js"></script>

2
testing/web-platform/tests/layout-instability/buffered-flag.html
View File

@ -3,7 +3,7 @@
<title>Layout Instability: PerformanceObserver sees entries with buffered flag</title>
<body>
<style>
#myDiv { position: relative; width: 300px; height: 100px; }
#myDiv { position: relative; width: 300px; height: 100px; background: blue; }
</style>
<div id='myDiv'></div>
<script src="/resources/testharness.js"></script>

2
testing/web-platform/tests/layout-instability/child-shift-with-parent-overflow-hidden.html
View File

@ -6,7 +6,7 @@
<script src="resources/util.js"></script>
<div id="parent" style="position: relative; width: 200px; height: 200px;
border: 50px solid blue; overflow: hidden">
<div id="child" style="width: 400px; height: 400px"></div>
<div id="child" style="width: 400px; height: 400px; background: blue"></div>
</div>
<script>

2
testing/web-platform/tests/layout-instability/child-shift-with-parent-overflow-x-clip.html
View File

@ -5,7 +5,7 @@
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>
<div id="parent" style="position: relative; width: 100px; height: 100px; border: 100px solid blue; overflow-x: clip">
<div id="child" style="width: 1000px; height: 300px"></div>
<div id="child" style="width: 1000px; height: 300px; background: blue"></div>
</div>
<script>

2
testing/web-platform/tests/layout-instability/contain-paint-fully-clipped.html
View File

@ -2,7 +2,7 @@
<title>Layout Instability: fully clipped by contain:paint</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<div style="contain: paint; height: 0; position: relative">
<div id="target" style="position: absolute; top: 0; width: 400px; height: 400px"></div>
<div id="target" style="position: absolute; top: 0; width: 400px; height: 400px; background: blue"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

4
testing/web-platform/tests/layout-instability/content-visibility-auto-offscreen.html
View File

@ -40,8 +40,8 @@ promise_test(async () => {
}
</style>
<div class=auto>
<div style="width: 100px; height: 100px"></div>
<div style="width: 100px; height: 100px; background: blue"></div>
</div>
<div id="target" class=auto style="position: relative; top: 100000px">
<div style="width: 100px; height: 100px"></div>
<div style="width: 100px; height: 100px; background: blue"></div>
</div>

2
testing/web-platform/tests/layout-instability/content-visibility-auto-onscreen.html
View File

@ -23,5 +23,5 @@ promise_test(async () => {
}
</style>
<div id=target>
<div style="width: 100px; height: 100px"></div>
<div style="width: 100px; height: 100px; background: blue"></div>
</div>

1
testing/web-platform/tests/layout-instability/content-visibility-auto-resize.html
View File

@ -24,6 +24,7 @@ promise_test(async () => {
}
.contained {
height: 100px;
background: blue;
}
</style>
<div class=auto><div class=contained></div></div>

2
testing/web-platform/tests/layout-instability/content-visibility-hidden.html
View File

@ -23,5 +23,5 @@ promise_test(async () => {
}
</style>
<div id=target>
<div style="width: 100px; height: 100px"></div>
<div style="width: 100px; height: 100px; background: blue"></div>
</div>

1
testing/web-platform/tests/layout-instability/display-change-with-transform.html
View File

@ -5,6 +5,7 @@
div {
width: 100px;
height: 100px;
background: blue;
}
#target {
transform: translateX(0);

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

@ -5,7 +5,7 @@
body { margin: 0; }
#clip { width: 0px; height: 600px; overflow: hidden; }
#j { position: relative; width: 300px; height: 200px; }
#j { position: relative; width: 300px; height: 200px; background: blue; }
</style>
<div id='clip'><div id='j'></div></div>

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

@ -9,6 +9,7 @@ body { height: 2000px; }
width: 300px;
height: 100px;
left: 100px;
background: yellow;
}
#f1 { top: 0; }
#f2 { top: 150px; will-change: transform; }
@ -18,6 +19,7 @@ body { height: 2000px; }
height: 100px;
left: 450px;
top: 0;
background: blue;
}
</style>

1
testing/web-platform/tests/layout-instability/input-timestamp.html
View File

@ -8,6 +8,7 @@
position: relative;
width: 300px;
height: 100px;
background: blue;
}
/* Disable the button's focus ring, which otherwise expands its visual rect by

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

@ -4,7 +4,7 @@
<style>
#c { position: relative; width: 300px; height: 100px; transform: scale(0.1); }
#j { position: relative; width: 100px; height: 10px; }
#j { position: relative; width: 100px; height: 10px; background: blue; }
</style>
<div id='c'>

1
testing/web-platform/tests/layout-instability/move-distance-clamped.html
View File

@ -13,6 +13,7 @@ body { margin: 0; }
height: 100vh;
left: -2000vw;
top: -2000vh;
background: blue;
}
</style>
<div id="shifter"></div>

2
testing/web-platform/tests/layout-instability/move-transformed.html
View File

@ -3,7 +3,7 @@
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
body { margin: 0; }
#transformed { position: relative; transform: translateX(20px); width: 100px; height: 100px; }
#transformed { position: relative; transform: translateX(20px); width: 100px; height: 100px; background: blue; }
</style>
<div id="transformed"></div>
<script src="/resources/testharness.js"></script>

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

@ -6,7 +6,7 @@
body { margin: 0; }
#outer { width: 200px; height: 600px; overflow: hidden; }
#inner { width: 300px; height: 150px; overflow: hidden; }
#j { position: relative; width: 300px; height: 600px; }
#j { position: relative; width: 300px; height: 600px; background: blue; }
</style>
<div id='outer'><div id='inner'><div id='j'></div></div></div>

2
testing/web-platform/tests/layout-instability/opacity-nonzero-to-zero.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<title>Layout Instability: opacity:0</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<div id="target" style="position: absolute; top: 0; width: 400px; height: 400px;">
<div id="target" style="position: absolute; top: 0; width: 400px; height: 400px; background: blue;">
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

2
testing/web-platform/tests/layout-instability/opacity-zero-layout-and-visible.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<title>Layout Instability: opacity:0</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<div id="target" style="position: absolute; top: 0; width: 200px; height: 200px; opacity: 0"></div>
<div id="target" style="position: absolute; top: 0; width: 200px; height: 200px; opacity: 0; background: blue"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>

4
testing/web-platform/tests/layout-instability/opacity-zero.html
View File

@ -1,8 +1,8 @@
<!DOCTYPE html>
<title>Layout Instability: opacity:0</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<div id="target" style="position: absolute; top: 0; width: 400px; height: 400px; opacity: 0">
<div id="child" style="position: relative; top: 0; width: 200px; height: 200px; opacity: 0.5"></div>
<div id="target" style="position: absolute; top: 0; width: 400px; height: 400px; opacity: 0; background: blue">
<div id="child" style="position: relative; top: 0; width: 200px; height: 200px; opacity: 0.5; background: yellow"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

2
testing/web-platform/tests/layout-instability/outline.html
View File

@ -4,7 +4,7 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>
<div id="target" style="width: 300px; height: 300px"></div>
<div id="target" style="width: 300px; height: 300px; background: blue"></div>
<script>
promise_test(async () => {
const watcher = new ScoreWatcher;

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

@ -5,7 +5,7 @@
body { margin: 0; }
#clip { width: 150px; height: 600px; overflow: hidden; }
#j { position: relative; width: 300px; height: 200px; }
#j { position: relative; width: 300px; height: 200px; background: blue; }
</style>
<div id='clip'><div id='j'></div></div>

2
testing/web-platform/tests/layout-instability/recent-input.html
View File

@ -3,7 +3,7 @@
<title>Layout Instability: observe after user input</title>
<body>
<style>
#myDiv { position: relative; width: 300px; height: 100px; }
#myDiv { position: relative; width: 300px; height: 100px; background: blue; }
/* Disable the button's focus ring, which otherwise expands its visual rect by
* 1px on all sides, triggering a layout shift event.

2
testing/web-platform/tests/layout-instability/rtl-distance.html
View File

@ -3,7 +3,7 @@
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
#shifter { position: relative; width: 100px; height: 100px; direction: rtl; }
#shifter { position: relative; width: 100px; height: 100px; direction: rtl; background: blue; }
</style>
<div id='shifter'></div>

2
testing/web-platform/tests/layout-instability/shift-into-viewport.html
View File

@ -4,7 +4,7 @@
<style>
body { margin: 0; }
#j { position: absolute; width: 600px; height: 200px; top: 100%; }
#j { position: absolute; width: 600px; height: 200px; top: 100%; background: blue; }
</style>
<div id='j'></div>

22
testing/web-platform/tests/layout-instability/shift-invisible.html Normal file
View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<title>Layout Instability: shift of invisible element not counted</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<div id="target" style="width: 100px; height: 100px; position: relative"></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);
target.style.top = "200px";
await waitForAnimationFrames(3);
assert_equals(watcher.score, 0);
}, "Shift of invisible element not counted.");
</script>

2
testing/web-platform/tests/layout-instability/shift-outside-viewport.html
View File

@ -4,7 +4,7 @@
<style>
body { margin: 0; }
#j { position: absolute; width: 600px; height: 200px; top: 100%; }
#j { position: absolute; width: 600px; height: 200px; top: 100%; background: blue; }
</style>
<div id='j'></div>

2
testing/web-platform/tests/layout-instability/shift-while-scrolled.html
View File

@ -4,7 +4,7 @@
<style>
body { height: 2000px; margin: 0; }
#shift { position: relative; width: 300px; height: 200px; }
#shift { position: relative; width: 300px; height: 200px; background: blue; }
</style>
<div id="shift"></div>

2
testing/web-platform/tests/layout-instability/simple-block-movement.html
View File

@ -6,7 +6,7 @@
<script src="resources/test-adapter.js"></script>
<script src="resources/util.js"></script>
<style>
#shifter { position: relative; width: 300px; height: 200px; }
#shifter { position: relative; width: 300px; height: 200px; background: blue; }
</style>
<div id="shifter"></div>
<script>

2
testing/web-platform/tests/layout-instability/sources.html
View File

@ -4,7 +4,7 @@
<style>
body { margin: 10px; }
#shifter { position: relative; width: 300px; height: 100px; }
#shifter { position: relative; width: 300px; height: 100px; background: blue; }
</style>
<div id="shifter"></div>

2
testing/web-platform/tests/layout-instability/toJSON.html
View File

@ -3,7 +3,7 @@
<title>Layout Instability: toJSON</title>
<body>
<style>
#myDiv { position: relative; width: 300px; height: 100px; }
#myDiv { position: relative; width: 300px; height: 100px; background: blue; }
</style>
<div id='myDiv'></div>
<script src="/resources/testharness.js"></script>

2
testing/web-platform/tests/layout-instability/transform-change.html
View File

@ -3,7 +3,7 @@
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
body { margin: 0; }
#transformed { position: relative; transform: translateX(20px); width: 100px; height: 100px; }
#transformed { position: relative; transform: translateX(20px); width: 100px; height: 100px; background: blue; }
#child { width: 400px; height: 400px; }
</style>
<div id="transformed">

2
testing/web-platform/tests/layout-instability/transform-counter-layout-shift.html
View File

@ -3,7 +3,7 @@
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<style>
body { margin: 0; }
#transformed { position: relative; transform: translateX(20px); width: 100px; height: 100px; }
#transformed { position: relative; transform: translateX(20px); width: 100px; height: 100px; background: blue; }
#child { width: 400px; height: 400px; }
</style>
<div id="transformed">

2
testing/web-platform/tests/layout-instability/transform.html
View File

@ -5,7 +5,7 @@
body { margin: 0; }
#container { transform: translateX(-300px) translateY(-40px); }
#shifter { position: relative; width: 600px; height: 140px; }
#shifter { position: relative; width: 600px; height: 140px; background: blue; }
</style>
<div id="container">

2
testing/web-platform/tests/layout-instability/visibility-hidden-layout-and-visible.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<title>Layout Instability: visibility:hidden change with layout</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<div id="target" style="position: absolute; top: 0; width: 200px; height: 200px; visibility: hidden"></div>
<div id="target" style="position: absolute; top: 0; width: 200px; height: 200px; visibility: hidden; background: blue"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>

2
testing/web-platform/tests/layout-instability/visibility-hidden.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<title>Layout Instability: visibility:hidden</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<div id="target" style="position: absolute; top: 0; width: 400px; height: 400px; visibility: hidden"></div>
<div id="target" style="position: absolute; top: 0; width: 400px; height: 400px; visibility: hidden; background: blue"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>

2
testing/web-platform/tests/layout-instability/visible-to-hidden.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<title>Layout Instability: visibility:hidden</title>
<link rel="help" href="https://wicg.github.io/layout-instability/" />
<div id="target" style="position: absolute; top: 0; width: 400px; height: 400px;"></div>
<div id="target" style="position: absolute; top: 0; width: 400px; height: 400px; background: blue;"></div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/util.js"></script>