Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update LayoutShift entryType and rename "fraction" to "value". #16855

Merged
merged 1 commit into from May 16, 2019
Merged

Update LayoutShift entryType and rename "fraction" to "value". #16855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 9 additions & 9 deletions layout-stability/buffer-layout-jank.html → layout-instability/buffer-layout-shift.html
View file
Open in desktop
@@ -1,6 +1,6 @@
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Layout Jank: query jank via the performance timeline</title>
<title>Layout Instability: query layout shift value via the performance timeline</title>
<body>
<style>
#myDiv { position: relative; width: 300px; height: 100px; }
Expand All @@ -16,27 +16,27 @@
// Modify the position of the div.
document.getElementById('myDiv').style = "top: 60px";
function testBufferedEntry() {
if (performance.getEntriesByType('layoutJank').length === 0) {
if (performance.getEntriesByType('layoutShift').length === 0) {
t.step_timeout(testBufferedEntry, 0);
return;
}
const endTime = performance.now();
assert_equals(performance.getEntriesByType('layoutJank').length, 1);
assert_equals(performance.getEntriesByType('layoutShift').length, 1);
assert_equals(performance.getEntries().filter(
entry => entry.entryType === 'layoutJank').length, 1);
const entry = performance.getEntriesByType('layoutJank')[0];
assert_equals(entry.entryType, "layoutJank");
entry => entry.entryType === 'layoutShift').length, 1);
const entry = performance.getEntriesByType('layoutShift')[0];
assert_equals(entry.entryType, "layoutShift");
assert_equals(entry.name, "");
assert_greater_than_equal(entry.startTime, startTime)
assert_less_than_equal(entry.startTime, endTime)
assert_equals(entry.duration, 0.0);
// The layout jank fraction should be: 300 * (100 + 60) / viewport size.
assert_equals(entry.fraction, 300 * (100 + 60) /
// The layout shift value should be: 300 * (100 + 60) / viewport size.
assert_equals(entry.value, 300 * (100 + 60) /
(document.documentElement.clientWidth * document.documentElement.clientHeight));
t.done();
}
t.step(testBufferedEntry);
}, 'LayoutJank before onload is buffered into the performance timeline.');
}, 'Layout shift before onload is buffered into the performance timeline.');
</script>

</body>
12 changes: 6 additions & 6 deletions layout-stability/observe-layoutjank.html → layout-instability/observe-layout-shift.html
View file
Open in desktop
@@ -1,6 +1,6 @@
<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Layout Jank: observe jank fraction via PerformanceObserver</title>
<title>Layout Instability: observe layout shift value via PerformanceObserver</title>
<body>
<style>
#myDiv { position: relative; width: 300px; height: 100px; }
Expand All @@ -16,22 +16,22 @@
const endTime = performance.now();
assert_equals(entryList.getEntries().length, 1);
const entry = entryList.getEntries()[0];
assert_equals(entry.entryType, "layoutJank");
assert_equals(entry.entryType, "layoutShift");
assert_equals(entry.name, "");
assert_greater_than_equal(entry.startTime, startTime)
assert_less_than_equal(entry.startTime, endTime)
assert_equals(entry.duration, 0.0);
// The layout jank fraction should be: 300 * (100 + 60) / viewport size.
assert_equals(entry.fraction, 300 * (100 + 60) /
// The layout shift value should be: 300 * (100 + 60) / viewport size.
assert_equals(entry.value, 300 * (100 + 60) /
(document.documentElement.clientWidth * document.documentElement.clientHeight));
})
);
observer.observe({entryTypes: ['layoutJank']});
observer.observe({entryTypes: ['layoutShift']});
window.onload = () => {
// Modify the position of the div.
document.getElementById('myDiv').style = "top: 60px";
};
}, 'LayoutJank is observable via PerformanceObserver.');
}, 'Layout shift is observable via PerformanceObserver.');
</script>

</body>
0 layout-stability/resources/slow-image.py → layout-instability/resources/slow-image.py
View file
Open in desktop
File renamed without changes.
8 changes: 4 additions & 4 deletions layout-stability/supported-layout-type.html → ...ut-instability/supported-layout-type.html
View file
Open in desktop
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<head>
<title>PerformanceObserver.supportedEntryTypes contains "layoutJank"</title>
<title>PerformanceObserver.supportedEntryTypes contains "layoutShift"</title>
</head>
<body>
<script src="/resources/testharness.js"></script>
Expand All @@ -9,9 +9,9 @@
test(() => {
if (typeof PerformanceObserver.supportedEntryTypes === "undefined")
assert_unreached("supportedEntryTypes is not supported.");
assert_greater_than(PerformanceObserver.supportedEntryTypes.indexOf("layoutJank"), -1,
"There should be an entry 'layoutJank' in PerformanceObserver.supportedEntryTypes");
}, "supportedEntryTypes contains 'layoutJank'.");
assert_greater_than(PerformanceObserver.supportedEntryTypes.indexOf("layoutShift"), -1,
"There should be an entry 'layoutShift' in PerformanceObserver.supportedEntryTypes");
}, "supportedEntryTypes contains 'layoutShift'.");
</script>
</body>
</html>