Unreviewed, fix build failure
[WebKit-https.git] / ManualTests / programmatic-scroll-flicker.html
1 <!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>
57 var INTERVAL_MS = 17;
58 var testElement = document.getElementById('testInner');
59 var testContainerElement = document.getElementById('parent');
60
61 var state = {};
62 state.triggerTranslationOnOrOff = false;
63 state.running = false;
64 state.intervalId = 0;
65
66 function updateState()
67 {
68     var translated = testContainerElement.classList.contains('trigger');
69     state.scrolled = !translated;
70 }
71
72 function 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
83 function 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
101 function 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