blob: f680f735de4de55521f8f2c2bb2e5837a4e5ce0a [file] [log] [blame]
simon.fraser@apple.com61d3e782014-12-06 01:25:21 +00001<!DOCTYPE html>
2<head>
3<style>
4 #testInner {
5 position: absolute;
6 width: 600px;
7 top: 400px;
8 left: 200px;;
9 padding: 1em;
10 background: yellow;
11 box-shadow: 0 0 0.5em gray;
12 }
13
14 .marker {
15 position: fixed;
16 background: black;
17 color: white;
18 top: 200px;
19 padding: 1em;
20 }
21
22 .spacer {
23 height: 200px;
24 }
25
26 button {
27 position: fixed;
28 top: 100px;
29 left: 200px;
30 padding: 2em;
31 font-size: 16px;
32 font-weight: bold;
33 }
34
35 .trigger #testInner {
36 -webkit-transform: translateY(-200px);
37 }
38</style>
39</head>
40<body>
41<button onclick="toggleRunning()">
42 CLICK ME to start / stop test
43</button>
44<div class="marker">Correct top position</div>
45<div id="parent" class="trigger">
46 <div id="testInner">test element</div>
47</div>
48<p class="spacer">.</p>
49<p class="spacer">.</p>
50<p class="spacer">.</p>
51<p class="spacer">.</p>
52<p class="spacer">.</p>
53<p class="spacer">.</p>
54<p class="spacer" id="last">.</p>
55
56<script>
57var INTERVAL_MS = 17;
58var testElement = document.getElementById('testInner');
59var testContainerElement = document.getElementById('parent');
60
61var state = {};
62state.triggerTranslationOnOrOff = false;
63state.running = false;
64state.intervalId = 0;
65
66function updateState()
67{
68 var translated = testContainerElement.classList.contains('trigger');
69 state.scrolled = !translated;
70}
71
72function toggleRunning()
73{
74 state.running = !state.running;
75 if (state.running) {
76 updateState();
77 state.intervalId = setInterval(runSequence, INTERVAL_MS);
78 } else {
79 clearInterval(state.intervalId);
80 }
81}
82
83function doExpensiveContentUpdate()
84{
85 var content = 'I should be stable at the correct position and not flicker above/below';
86 if (state.scrolled)
87 content += '.';
88
89 testElement.innerHTML = content;
90
91 var lastElement = document.getElementById('last');
92 var startTime = Date.now();
93 for (var i = 0; i < 1000; i++) {
94 lastElement.innerHTML = (lastElement.innerHTML + '.');
95 }
96 var domWriteTimeMs = Date.now() - startTime;
97 if (domWriteTimeMs > 2 * INTERVAL_MS)
98 lastElement.innerHTML = '';
99}
100
101function runSequence()
102{
103 doExpensiveContentUpdate();
104
105 var newScrollTop;
106 if (state.scrolled) {
107 testContainerElement.classList.add('trigger');
108 newScrollTop = 0;
109 } else {
110 testContainerElement.classList.remove('trigger');
111 newScrollTop = 200;
112 }
113
114 document.body.scrollTop = newScrollTop;
115 state.scrolled = !state.scrolled;
116}
117
118</script>
119</body>
120