Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1)

Side by Side Diff: third_party/WebKit/ManualTests/compositor-worker/mirror.html

Issue 1547893003: WIP - compositor worker mega patch. Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: . Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1
2 <script id='compositor_worker' type='text/compositor-worker'>
3 (function(scope) {
4
5 scope.onmessage = function(event) {
6 var message = event.data;
7 var main = message['main'];
8 var mirror = message['mirror'];
9 var main_container = message['main_container'];
10 var mirror_container = message['mirror_container'];
11
12 function raf() {
13 mirror.opacity = main.opacity;
14 mirror.transform = main.transform;
15 mirror.scrollLeft = main.scrollLeft;
16
17 mirror_container.scrollLeft = main_container.scrollLeft;
18 mirror_container.scrollTop = main_container.scrollTop;
19
20 requestAnimationFrame(raf);
21 }
22
23 requestAnimationFrame(raf);
24 };
25
26 })(self);
27 </script>
28
29 <style>
30
31 .container {
32 width: 300px;
33 height: 300px;
34 overflow: scroll;
35 }
36
37 .x {
38 width: 500px;
39 height: 1000px;
40 }
41
42 #main {
43 background-color: gray;
44 transition: all 5s ease;
45 }
46
47 #mirror {
48 background-color: silver;
49 }
50
51 .animate-opacity {
52 opacity: 0.5;
53 }
54
55 .animate-transform {
56 transform: translateX(100px);
57 }
58
59 </style>
60
61 <div class='container' id='main_container'>
62 <div id='main' class='x'>
63 <pre>
64 00
65 01
66 02
67 03
68 04
69 05
70 06
71 07
72 08
73 09
74 10
75 11
76 12
77 13
78 14
79 15
80 16
81 17
82 18
83 19
84 20
85 21
86 22
87 23
88 24
89 25
90 26
91 27
92 28
93 29
94 30
95 31
96 32
97 33
98 34
99 35
100 36
101 37
102 38
103 39
104 40
105 41
106 42
107 43
108 44
109 45
110 46
111 47
112 48
113 49
114 </pre>
115 </div>
116 </div>
117
118 <div class='container' id='mirror_container'>
119 <div id='mirror' class='x'>
120 </div>
121 </div>
122
123 <script>
124
125 mirror.appendChild(main.firstElementChild.cloneNode(true));
126
127 if (('CompositorProxy' in window)) {
128 var mainp = new CompositorProxy(main, ['opacity', 'transform', 'scrollLeft']);
129 var mirrorp = new CompositorProxy(mirror, ['opacity', 'transform', 'scrollLeft ']);
130 var main_containerp = new CompositorProxy(main_container,
131 ['scrollLeft', 'scrollTop']);
132 var mirror_containerp = new CompositorProxy(mirror_container,
133 ['scrollLeft', 'scrollTop']);
134
135 var url = window.URL.createObjectURL(new Blob([compositor_worker.textContent]) );
136
137 var worker = new CompositorWorker(url);
138 worker.postMessage({
139 'main' : mainp,
140 'mirror' : mirrorp,
141 'main_container' : main_containerp,
142 'mirror_container' : mirror_containerp
143 });
144
145 window.setTimeout(function() {
146 main.classList.add('animate-transform');
147 main.classList.add('animate-opacity');
148 window.setTimeout(function() {
149 var old = Date.now();
150 var count = 0;
151 while (Date.now() - old < 3000)
152 ++count;
153 console.log(count);
154 }, 10);
155 }, 3000);
156 }
157
158 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698