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

Side by Side Diff: third_party/WebKit/LayoutTests/http/tests/inspector/network/waterfall-images.html

Issue 2592113003: Load data URI images in an async way according to spec (take 3) (Closed)
Patch Set: Fixed more devtools reliance on sync loading Created 3 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
1 <html> 1 <html>
2 <head> 2 <head>
3 <script src="../inspector-test.js"></script> 3 <script src="../inspector-test.js"></script>
4 <script src="../network-test.js"></script> 4 <script src="../network-test.js"></script>
5 <script> 5 <script>
6 // TODO(allada) Move much of this canvas code to a canvas-test.js file. 6 // TODO(allada) Move much of this canvas code to a canvas-test.js file.
7 var images = []; 7 var images = [];
8 var sumWidth = 0;
9 var maxHeight = 0;
10 8
11 function receiveImage(imageUrl) { 9 function receiveImage(imageUrl) {
12 var image = new Image(); 10 var image = new Image();
13 image.src = imageUrl; 11 image.src = imageUrl;
14 images.push(image); 12 images.push(image);
15
16 sumWidth += image.width;
17 maxHeight = Math.max(image.height, maxHeight);
18 } 13 }
19 14
20 function done() { 15 function done() {
16 var sumWidth = 0;
17 var maxHeight = 0;
18 for (var image of images) {
19 sumWidth += image.width;
20 maxHeight = Math.max(image.height, maxHeight);
21 }
21 var canvas = document.getElementById("outputCanvas"); 22 var canvas = document.getElementById("outputCanvas");
22 canvas.height = maxHeight; 23 canvas.height = maxHeight;
23 canvas.width = sumWidth; 24 canvas.width = sumWidth;
24 canvas.style.height = maxHeight + "px"; 25 canvas.style.height = maxHeight + "px";
25 canvas.style.width = sumWidth + "px"; 26 canvas.style.width = sumWidth + "px";
26 var context = canvas.getContext('2d'); 27 var context = canvas.getContext('2d');
27 var offsetLeft = 0; 28 var offsetLeft = 0;
28 for (var image of images) { 29 for (var image of images) {
29 context.drawImage(image, offsetLeft, 0); 30 context.drawImage(image, offsetLeft, 0);
30 offsetLeft += image.width; 31 offsetLeft += image.width;
(...skipping 230 matching lines...) Expand 10 before | Expand all | Expand 10 after
261 this.sendStart = data.sendStart || -1; 262 this.sendStart = data.sendStart || -1;
262 this.sendEnd = data.sendEnd || -1; 263 this.sendEnd = data.sendEnd || -1;
263 this.receiveHeadersEnd = data.receiveHeadersEnd || -1; 264 this.receiveHeadersEnd = data.receiveHeadersEnd || -1;
264 } 265 }
265 266
266 function onWaterfallDraw() { 267 function onWaterfallDraw() {
267 numDraws++; 268 numDraws++;
268 if (numDraws > 2) 269 if (numDraws > 2)
269 return; 270 return;
270 if (numDraws === 2) { 271 if (numDraws === 2) {
271 sendData(waterfall._canvas, true); 272 sendData(true);
272 return; 273 return;
273 } 274 }
274 sendData(waterfall._canvas, false); 275 sendData(false);
275 // This makes sure we test both old bars and new bars with same data. 276 // This makes sure we test both old bars and new bars with same data.
276 Common.moduleSetting('networkColorCodeResourceTypes').set(true); 277 Common.moduleSetting('networkColorCodeResourceTypes').set(true);
277 } 278 }
278 279
279 function sendData(canvas, done) { 280 function sendData(done) {
280 var imageData = waterfall._canvas.toDataURL(); 281 var imageData = waterfall._canvas.toDataURL();
281 var height = waterfall._canvas.height; 282 var height = waterfall._canvas.height;
282 var width = waterfall._canvas.width; 283 var width = waterfall._canvas.width;
283 var promise = InspectorTest.evaluateInPagePromise(`receiveImage('${imageData }')`); 284 var promise = InspectorTest.evaluateInPagePromise(`receiveImage('${imageData }')`);
284 if (done) { 285 if (done) {
285 promise.then( 286 promise.then(
286 InspectorTest.evaluateInPage.bind(InspectorTest, "done()", InspectorTe st.completeTest.bind(InspectorTest))); 287 InspectorTest.evaluateInPage.bind(InspectorTest, "done()", InspectorTe st.completeTest.bind(InspectorTest)));
287 } 288 }
288 } 289 }
289 } 290 }
290 </script> 291 </script>
291 </head> 292 </head>
292 <body onload="runTest(true)" style="overflow:hidden;height:600px;"> 293 <body onload="runTest(true)" style="overflow:hidden;height:600px;">
293 <canvas id="outputCanvas"><canvas> 294 <canvas id="outputCanvas"><canvas>
294 </body> 295 </body>
295 </html> 296 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698