2 <meta name="viewport" content="width=device-width, user-scalable=no">
3 <link rel="stylesheet" type="text/css" href="resources/tablet.css">
4 <link rel="stylesheet" type="text/css" href="resources/transition.css">
5 <script src="resources/perftesthelper.js"></script>
18 <container id="container"></container>
21 var N = PerfTestHelper.getN(1000);
23 var stash = {SHOW: [], HIDE: []};
26 for (var i = 0; i < N; i++) {
27 stash.HIDE.push(document.createElement('hide'));
28 var show = document.createElement('show');
29 container.appendChild(show);
30 var target = document.createElement('target');
31 container.appendChild(target);
35 function startTransition(target, fastForward) {
36 var state = target.previousSibling;
37 stash[state.tagName].push(state);
39 var newState = state.tagName == 'SHOW' ? stash.HIDE.pop() : stash.SHOW.pop();
40 container.insertBefore(newState, target);
41 target.style.transitionDelay = -fastForward + 'ms';
44 requestAnimationFrame(function(time) {
45 var startTime = time - duration;
48 function staggeredStart(time) {
49 var elapsed = time - startTime;
50 var targetStep = Math.floor(N * elapsed / duration);
51 step = Math.max(targetStep - N, step);
52 for (; step < targetStep; step++) {
53 startTransition(targets[step % N], elapsed - (step / N * duration));
55 requestAnimationFrame(staggeredStart);
60 PerfTestHelper.signalReady();