Skip to content

GitLab

T
tangled
Commit db1eb549 authored by benjhayden's avatar benjhayden Committed by Commit bot
Browse files
Options

key_silk_cases/list_animation_simple.html: there should always be exactly 1 layout. 

Merge script tags and also use body {display:none;} then document.body.style.display = 'block'.
Also move the page from the web into the repo.
This should reduce the noisiness of thread_times.key_silk_cases layout_avg somewhat.

BUG=459668

Review URL: https://codereview.chromium.org/952733002

Cr-Commit-Position: refs/heads/master@{#318218}
parent 56b45a93
Hide whitespace changes
Inline Side-by-side
Showing with 227 additions and 1 deletion
tools/perf/page_sets/key_silk_cases.py
View file @ db1eb549
......@@ -63,7 +63,7 @@ class Page2(KeySilkCasesPage):
def __init__(self, page_set, run_no_page_interactions):
super(Page2, self).__init__(
url='http://groupcloned.com/test/plain/list-animation-simple.html',
url='file://key_silk_cases/list_animation_simple.html',
page_set=page_set, run_no_page_interactions=run_no_page_interactions)
def PerformPageInteractions(self, action_runner):
......
tools/perf/page_sets/key_silk_cases/list_animation_simple.html 0 → 100644
View file @ db1eb549
<!doctype html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<style>
html, body {
height: 100%;
overflow: hidden;
}
* {
box-sizing: border-box;
}
.scrollable {
position: relative;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.stretcher {
position: absolute;
visibility: hidden;
left: 0;
top: 0;
width: 1px;
height: 1000000px;
}
.item {
background-color: #FFF;
width: 100%;
position: absolute;
left: 0;
top: 0;
-webkit-transform: translate3d(0, 0, 0);
height: 50px;
border: 1px solid #000;
padding: 10px;
}
body {
-ms-touch-action: none;
display: none;
}
@keyframes slideIn {
from {
transform: translate3d(100%, 0, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
@keyframes slideOut {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-100%, 0, 0);
}
}
@-webkit-keyframes slideIn {
from {
-webkit-transform: translate3d(100%, 0, 0);
}
to {
-webkit-transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes slideOut {
from {
-webkit-transform: translate3d(0, 0, 0);
}
to {
-webkit-transform: translate3d(-100%, 0, 0);
}
}
.list {
transform: translate3d(100%, 0, 0);
-webkit-transform: translate3d(100%, 0, 0);
border: 5px solid red;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script>
var LIST_COUNT = 10;
for (var i = 0; i < LIST_COUNT; i++) {
document.write('<div class="list scrollable" style="border-color: #' +
Math.floor(Math.random() * 16777215).toString(16) + '"><div class="stretcher"></div></div>');
}
var transform = 'webkitTransform' in document.body.style ? 'webkitTransform' : 'transform';
function InfiniteList(options) {
var scrollable = options.element,
itemTemplate = options.template,
renderFn = options.render,
itemHeight = options.itemHeight || 50,
itemsPool = [],
itemsPoolCount = 0,
topItemIndex = 0,
scrollableHeight = window.innerHeight,
div, i;
function update() {
var newScrollTop = scrollable.scrollTop,
newTopItemIndex = Math.floor(newScrollTop / itemHeight),
delta = newTopItemIndex - topItemIndex;
if (delta !== 0) {
if (Math.abs(delta) > itemsPoolCount) {
renderAllItems(newTopItemIndex);
}
else {
renderItems(delta);
}
}
}
function renderAllItems(index) {
for (i = 0; i < itemsPoolCount; i++) {
renderItem(itemsPool[i], index + i);
}
topItemIndex = index;
}
function renderItems(count) {
var lastIndex = itemsPoolCount - 1;
// Recycle top items to render at the bottom
if (count > 0) {
for (i = 0; i < count; i++) {
div = itemsPool[i];
renderItem(div, topItemIndex + itemsPoolCount + i);
}
itemsPool.push.apply(itemsPool, itemsPool.splice(0, count));
topItemIndex += count;
}
// Recycle bottom items to render at the top
else {
count = Math.abs(count);
for (i = lastIndex; i > lastIndex - count; i--) {
div = itemsPool[i];
renderItem(div, --topItemIndex);
}
itemsPool.unshift.apply(itemsPool, itemsPool.splice(lastIndex - count + 1, count));
}
}
function renderItem(div, index) {
renderFn(div, index);
div.style[transform] = 'translate3d(0, ' + (index * itemHeight) + 'px' + ', 0)';
}
function loop() {
window.requestAnimationFrame(function() {
update();
loop();
});
}
window.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded');
var holder = document.createElement('div'),
itemsHtml = [];
itemsPoolCount = Math.ceil(scrollableHeight / itemHeight) + 1;
for (i = 0; i < itemsPoolCount; i++) {
itemsHtml.push(itemTemplate);
}
holder.innerHTML = itemsHtml.join('');
itemsPool.push.apply(itemsPool, holder.children);
itemsPool.forEach(function(item) {
item.style.height = itemHeight + 'px';
scrollable.appendChild(item);
});
renderAllItems(0);
loop();
});
}
document.body.style.display = 'block';
var lists = document.querySelectorAll('.list'),
prefix = 'onwebkitanimationend' in window ? '-webkit-' : '',
count = 0,
index = 0;
[].forEach.call(lists, function(list) {
new InfiniteList({
element: list,
template: '<div class="item"></div>',
render: function(div, index) {
div.textContent = 'This is item #' + index;
}
});
});
function animate(index, name) {
var list = lists[index];
list.style.setProperty(prefix + 'animation-name', name, null);
list.style.setProperty(prefix + 'animation-duration', '5s', null);
list.style.setProperty(prefix + 'animation-timing-function', 'ease-out', null);
list.style.setProperty(prefix + 'animation-fill-mode', 'forwards', null);
count++;
}
function next() {
if (index > lists.length - 1) {
index = 0;
}
animate(index, 'slideOut');
if (++index > lists.length - 1) {
index = 0;
}
animate(index, 'slideIn');
}
document.addEventListener(prefix ? 'webkitAnimationEnd' : 'animationend', function() {
console.log('animationend');
if (--count === 0) {
next();
}
}, true);
next();
</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