michael@0: /* Any copyright is dedicated to the Public Domain.
michael@0:    http://creativecommons.org/publicdomain/zero/1.0/ */
michael@0: 
michael@0: /**
michael@0:  * Tests if timeline correctly displays interval divisions.
michael@0:  */
michael@0: 
michael@0: function test() {
michael@0:   initNetMonitor(SIMPLE_URL).then(([aTab, aDebuggee, aMonitor]) => {
michael@0:     info("Starting test... ");
michael@0: 
michael@0:     let { document, L10N, NetMonitorView } = aMonitor.panelWin;
michael@0:     let { RequestsMenu } = NetMonitorView;
michael@0: 
michael@0:     RequestsMenu.lazyUpdate = false;
michael@0: 
michael@0:     ok(document.querySelector("#requests-menu-waterfall-label"),
michael@0:       "An timeline label should be displayed when the frontend is opened.");
michael@0:     ok(document.querySelectorAll(".requests-menu-timings-division").length == 0,
michael@0:       "No tick labels should be displayed when the frontend is opened.");
michael@0: 
michael@0:     ok(!RequestsMenu._canvas,
michael@0:       "No canvas should be created when the frontend is opened.");
michael@0:     ok(!RequestsMenu._ctx,
michael@0:       "No 2d context should be created when the frontend is opened.");
michael@0: 
michael@0:     waitForNetworkEvents(aMonitor, 1).then(() => {
michael@0:       ok(!document.querySelector("#requests-menu-waterfall-label"),
michael@0:         "The timeline label should be hidden after the first request.");
michael@0:       ok(document.querySelectorAll(".requests-menu-timings-division").length >= 3,
michael@0:         "There should be at least 3 tick labels in the network requests header.");
michael@0: 
michael@0:       is(document.querySelectorAll(".requests-menu-timings-division")[0]
michael@0:         .getAttribute("value"), L10N.getFormatStr("networkMenu.millisecond", 0),
michael@0:         "The first tick label has an incorrect value");
michael@0:       is(document.querySelectorAll(".requests-menu-timings-division")[1]
michael@0:         .getAttribute("value"), L10N.getFormatStr("networkMenu.millisecond", 80),
michael@0:         "The second tick label has an incorrect value");
michael@0:       is(document.querySelectorAll(".requests-menu-timings-division")[2]
michael@0:         .getAttribute("value"), L10N.getFormatStr("networkMenu.millisecond", 160),
michael@0:         "The third tick label has an incorrect value");
michael@0: 
michael@0:       is(document.querySelectorAll(".requests-menu-timings-division")[0]
michael@0:         .style.transform, "translateX(0px)",
michael@0:         "The first tick label has an incorrect translation");
michael@0:       is(document.querySelectorAll(".requests-menu-timings-division")[1]
michael@0:         .style.transform, "translateX(80px)",
michael@0:         "The second tick label has an incorrect translation");
michael@0:       is(document.querySelectorAll(".requests-menu-timings-division")[2]
michael@0:         .style.transform, "translateX(160px)",
michael@0:         "The third tick label has an incorrect translation");
michael@0: 
michael@0:       ok(RequestsMenu._canvas,
michael@0:         "A canvas should be created after the first request.");
michael@0:       ok(RequestsMenu._ctx,
michael@0:         "A 2d context should be created after the first request.");
michael@0: 
michael@0:       let imageData = RequestsMenu._ctx.getImageData(0, 0, 161, 1);
michael@0:       ok(imageData, "The image data should have been created.");
michael@0: 
michael@0:       let data = imageData.data;
michael@0:       ok(data, "The image data should contain a pixel array.");
michael@0: 
michael@0:       ok( hasPixelAt(0), "The tick at 0 is should not be empty.");
michael@0:       ok(!hasPixelAt(1), "The tick at 1 is should be empty.");
michael@0:       ok(!hasPixelAt(19), "The tick at 19 is should be empty.");
michael@0:       ok( hasPixelAt(20), "The tick at 20 is should not be empty.");
michael@0:       ok(!hasPixelAt(21), "The tick at 21 is should be empty.");
michael@0:       ok(!hasPixelAt(39), "The tick at 39 is should be empty.");
michael@0:       ok( hasPixelAt(40), "The tick at 40 is should not be empty.");
michael@0:       ok(!hasPixelAt(41), "The tick at 41 is should be empty.");
michael@0:       ok(!hasPixelAt(59), "The tick at 59 is should be empty.");
michael@0:       ok( hasPixelAt(60), "The tick at 60 is should not be empty.");
michael@0:       ok(!hasPixelAt(61), "The tick at 61 is should be empty.");
michael@0:       ok(!hasPixelAt(79), "The tick at 79 is should be empty.");
michael@0:       ok( hasPixelAt(80), "The tick at 80 is should not be empty.");
michael@0:       ok(!hasPixelAt(81), "The tick at 81 is should be empty.");
michael@0:       ok(!hasPixelAt(159), "The tick at 159 is should be empty.");
michael@0:       ok( hasPixelAt(160), "The tick at 160 is should not be empty.");
michael@0:       ok(!hasPixelAt(161), "The tick at 161 is should be empty.");
michael@0: 
michael@0:       ok(isPixelBrighterAtThan(0, 20),
michael@0:         "The tick at 0 should be brighter than the one at 20");
michael@0:       ok(isPixelBrighterAtThan(40, 20),
michael@0:         "The tick at 40 should be brighter than the one at 20");
michael@0:       ok(isPixelBrighterAtThan(40, 60),
michael@0:         "The tick at 40 should be brighter than the one at 60");
michael@0:       ok(isPixelBrighterAtThan(80, 60),
michael@0:         "The tick at 80 should be brighter than the one at 60");
michael@0: 
michael@0:       ok(isPixelBrighterAtThan(80, 100),
michael@0:         "The tick at 80 should be brighter than the one at 100");
michael@0:       ok(isPixelBrighterAtThan(120, 100),
michael@0:         "The tick at 120 should be brighter than the one at 100");
michael@0:       ok(isPixelBrighterAtThan(120, 140),
michael@0:         "The tick at 120 should be brighter than the one at 140");
michael@0:       ok(isPixelBrighterAtThan(160, 140),
michael@0:         "The tick at 160 should be brighter than the one at 140");
michael@0: 
michael@0:       ok(isPixelEquallyBright(20, 60),
michael@0:         "The tick at 20 should be equally bright to the one at 60");
michael@0:       ok(isPixelEquallyBright(100, 140),
michael@0:         "The tick at 100 should be equally bright to the one at 140");
michael@0: 
michael@0:       ok(isPixelEquallyBright(40, 120),
michael@0:         "The tick at 40 should be equally bright to the one at 120");
michael@0: 
michael@0:       ok(isPixelEquallyBright(0, 80),
michael@0:         "The tick at 80 should be equally bright to the one at 160");
michael@0:       ok(isPixelEquallyBright(80, 160),
michael@0:         "The tick at 80 should be equally bright to the one at 160");
michael@0: 
michael@0:       function hasPixelAt(x) {
michael@0:         let i = (x | 0) * 4;
michael@0:         return data[i] && data[i + 1] && data[i + 2] && data[i + 3];
michael@0:       }
michael@0: 
michael@0:       function isPixelBrighterAtThan(x1, x2) {
michael@0:         let i = (x1 | 0) * 4;
michael@0:         let j = (x2 | 0) * 4;
michael@0:         return data[i + 3] > data [j + 3];
michael@0:       }
michael@0: 
michael@0:       function isPixelEquallyBright(x1, x2) {
michael@0:         let i = (x1 | 0) * 4;
michael@0:         let j = (x2 | 0) * 4;
michael@0:         return data[i + 3] == data [j + 3];
michael@0:       }
michael@0: 
michael@0:       teardown(aMonitor).then(finish);
michael@0:     });
michael@0: 
michael@0:     aDebuggee.location.reload();
michael@0:   });
michael@0: }