1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/browser/devtools/netmonitor/test/browser_net_timeline_ticks.js Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,135 @@
1.4 +/* Any copyright is dedicated to the Public Domain.
1.5 + http://creativecommons.org/publicdomain/zero/1.0/ */
1.6 +
1.7 +/**
1.8 + * Tests if timeline correctly displays interval divisions.
1.9 + */
1.10 +
1.11 +function test() {
1.12 + initNetMonitor(SIMPLE_URL).then(([aTab, aDebuggee, aMonitor]) => {
1.13 + info("Starting test... ");
1.14 +
1.15 + let { document, L10N, NetMonitorView } = aMonitor.panelWin;
1.16 + let { RequestsMenu } = NetMonitorView;
1.17 +
1.18 + RequestsMenu.lazyUpdate = false;
1.19 +
1.20 + ok(document.querySelector("#requests-menu-waterfall-label"),
1.21 + "An timeline label should be displayed when the frontend is opened.");
1.22 + ok(document.querySelectorAll(".requests-menu-timings-division").length == 0,
1.23 + "No tick labels should be displayed when the frontend is opened.");
1.24 +
1.25 + ok(!RequestsMenu._canvas,
1.26 + "No canvas should be created when the frontend is opened.");
1.27 + ok(!RequestsMenu._ctx,
1.28 + "No 2d context should be created when the frontend is opened.");
1.29 +
1.30 + waitForNetworkEvents(aMonitor, 1).then(() => {
1.31 + ok(!document.querySelector("#requests-menu-waterfall-label"),
1.32 + "The timeline label should be hidden after the first request.");
1.33 + ok(document.querySelectorAll(".requests-menu-timings-division").length >= 3,
1.34 + "There should be at least 3 tick labels in the network requests header.");
1.35 +
1.36 + is(document.querySelectorAll(".requests-menu-timings-division")[0]
1.37 + .getAttribute("value"), L10N.getFormatStr("networkMenu.millisecond", 0),
1.38 + "The first tick label has an incorrect value");
1.39 + is(document.querySelectorAll(".requests-menu-timings-division")[1]
1.40 + .getAttribute("value"), L10N.getFormatStr("networkMenu.millisecond", 80),
1.41 + "The second tick label has an incorrect value");
1.42 + is(document.querySelectorAll(".requests-menu-timings-division")[2]
1.43 + .getAttribute("value"), L10N.getFormatStr("networkMenu.millisecond", 160),
1.44 + "The third tick label has an incorrect value");
1.45 +
1.46 + is(document.querySelectorAll(".requests-menu-timings-division")[0]
1.47 + .style.transform, "translateX(0px)",
1.48 + "The first tick label has an incorrect translation");
1.49 + is(document.querySelectorAll(".requests-menu-timings-division")[1]
1.50 + .style.transform, "translateX(80px)",
1.51 + "The second tick label has an incorrect translation");
1.52 + is(document.querySelectorAll(".requests-menu-timings-division")[2]
1.53 + .style.transform, "translateX(160px)",
1.54 + "The third tick label has an incorrect translation");
1.55 +
1.56 + ok(RequestsMenu._canvas,
1.57 + "A canvas should be created after the first request.");
1.58 + ok(RequestsMenu._ctx,
1.59 + "A 2d context should be created after the first request.");
1.60 +
1.61 + let imageData = RequestsMenu._ctx.getImageData(0, 0, 161, 1);
1.62 + ok(imageData, "The image data should have been created.");
1.63 +
1.64 + let data = imageData.data;
1.65 + ok(data, "The image data should contain a pixel array.");
1.66 +
1.67 + ok( hasPixelAt(0), "The tick at 0 is should not be empty.");
1.68 + ok(!hasPixelAt(1), "The tick at 1 is should be empty.");
1.69 + ok(!hasPixelAt(19), "The tick at 19 is should be empty.");
1.70 + ok( hasPixelAt(20), "The tick at 20 is should not be empty.");
1.71 + ok(!hasPixelAt(21), "The tick at 21 is should be empty.");
1.72 + ok(!hasPixelAt(39), "The tick at 39 is should be empty.");
1.73 + ok( hasPixelAt(40), "The tick at 40 is should not be empty.");
1.74 + ok(!hasPixelAt(41), "The tick at 41 is should be empty.");
1.75 + ok(!hasPixelAt(59), "The tick at 59 is should be empty.");
1.76 + ok( hasPixelAt(60), "The tick at 60 is should not be empty.");
1.77 + ok(!hasPixelAt(61), "The tick at 61 is should be empty.");
1.78 + ok(!hasPixelAt(79), "The tick at 79 is should be empty.");
1.79 + ok( hasPixelAt(80), "The tick at 80 is should not be empty.");
1.80 + ok(!hasPixelAt(81), "The tick at 81 is should be empty.");
1.81 + ok(!hasPixelAt(159), "The tick at 159 is should be empty.");
1.82 + ok( hasPixelAt(160), "The tick at 160 is should not be empty.");
1.83 + ok(!hasPixelAt(161), "The tick at 161 is should be empty.");
1.84 +
1.85 + ok(isPixelBrighterAtThan(0, 20),
1.86 + "The tick at 0 should be brighter than the one at 20");
1.87 + ok(isPixelBrighterAtThan(40, 20),
1.88 + "The tick at 40 should be brighter than the one at 20");
1.89 + ok(isPixelBrighterAtThan(40, 60),
1.90 + "The tick at 40 should be brighter than the one at 60");
1.91 + ok(isPixelBrighterAtThan(80, 60),
1.92 + "The tick at 80 should be brighter than the one at 60");
1.93 +
1.94 + ok(isPixelBrighterAtThan(80, 100),
1.95 + "The tick at 80 should be brighter than the one at 100");
1.96 + ok(isPixelBrighterAtThan(120, 100),
1.97 + "The tick at 120 should be brighter than the one at 100");
1.98 + ok(isPixelBrighterAtThan(120, 140),
1.99 + "The tick at 120 should be brighter than the one at 140");
1.100 + ok(isPixelBrighterAtThan(160, 140),
1.101 + "The tick at 160 should be brighter than the one at 140");
1.102 +
1.103 + ok(isPixelEquallyBright(20, 60),
1.104 + "The tick at 20 should be equally bright to the one at 60");
1.105 + ok(isPixelEquallyBright(100, 140),
1.106 + "The tick at 100 should be equally bright to the one at 140");
1.107 +
1.108 + ok(isPixelEquallyBright(40, 120),
1.109 + "The tick at 40 should be equally bright to the one at 120");
1.110 +
1.111 + ok(isPixelEquallyBright(0, 80),
1.112 + "The tick at 80 should be equally bright to the one at 160");
1.113 + ok(isPixelEquallyBright(80, 160),
1.114 + "The tick at 80 should be equally bright to the one at 160");
1.115 +
1.116 + function hasPixelAt(x) {
1.117 + let i = (x | 0) * 4;
1.118 + return data[i] && data[i + 1] && data[i + 2] && data[i + 3];
1.119 + }
1.120 +
1.121 + function isPixelBrighterAtThan(x1, x2) {
1.122 + let i = (x1 | 0) * 4;
1.123 + let j = (x2 | 0) * 4;
1.124 + return data[i + 3] > data [j + 3];
1.125 + }
1.126 +
1.127 + function isPixelEquallyBright(x1, x2) {
1.128 + let i = (x1 | 0) * 4;
1.129 + let j = (x2 | 0) * 4;
1.130 + return data[i + 3] == data [j + 3];
1.131 + }
1.132 +
1.133 + teardown(aMonitor).then(finish);
1.134 + });
1.135 +
1.136 + aDebuggee.location.reload();
1.137 + });
1.138 +}
