1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
// Make sure the canvases are created correctly
"use strict";
const CanvasUtils = require("resource://devtools/client/memory/components/tree-map/canvas-utils.js");
const D3_SCRIPT =
'<script type="application/javascript" ' +
'src="chrome://global/content/third_party/d3/d3.js">';
const TEST_URL = `data:text/html,<html><body>${D3_SCRIPT}</body></html>`;
this.test = makeMemoryTest(TEST_URL, async function ({ panel }) {
const document = panel.panelWin.document;
const window = panel.panelWin;
const div = document.createElement("div");
Object.assign(div.style, {
width: "100px",
height: "200px",
position: "absolute",
});
document.body.appendChild(div);
info("Create the canvases");
const canvases = new CanvasUtils(div, 0);
info("Test the shape of the returned object");
is(typeof canvases, "object", "Canvases create an object");
is(typeof canvases.emit, "function", "Decorated with an EventEmitter");
is(typeof canvases.on, "function", "Decorated with an EventEmitter");
is(div.children[0], canvases.container, "Div has the container");
ok(
canvases.main.canvas instanceof window.HTMLCanvasElement,
"Creates the main canvas"
);
ok(
canvases.zoom.canvas instanceof window.HTMLCanvasElement,
"Creates the zoom canvas"
);
ok(
canvases.main.ctx instanceof window.CanvasRenderingContext2D,
"Creates the main canvas context"
);
ok(
canvases.zoom.ctx instanceof window.CanvasRenderingContext2D,
"Creates the zoom canvas context"
);
info("Test resizing");
let timesResizeCalled = 0;
canvases.on("resize", function () {
timesResizeCalled++;
});
const main = canvases.main.canvas;
const zoom = canvases.zoom.canvas;
const ratio = window.devicePixelRatio;
is(
main.width,
100 * ratio,
"Main canvas width is the same as the parent div"
);
is(
main.height,
200 * ratio,
"Main canvas height is the same as the parent div"
);
is(
zoom.width,
100 * ratio,
"Zoom canvas width is the same as the parent div"
);
is(
zoom.height,
200 * ratio,
"Zoom canvas height is the same as the parent div"
);
is(timesResizeCalled, 0, "Resize was not emitted");
div.style.width = "500px";
div.style.height = "700px";
window.dispatchEvent(new Event("resize"));
is(
main.width,
500 * ratio,
"Main canvas width is resized to be the same as the parent div"
);
is(
main.height,
700 * ratio,
"Main canvas height is resized to be the same as the parent div"
);
is(
zoom.width,
500 * ratio,
"Zoom canvas width is resized to be the same as the parent div"
);
is(
zoom.height,
700 * ratio,
"Zoom canvas height is resized to be the same as the parent div"
);
is(timesResizeCalled, 1, "'resize' was emitted was emitted");
div.style.width = "1100px";
div.style.height = "1300px";
canvases.destroy();
window.dispatchEvent(new Event("resize"));
is(main.width, 500 * ratio, "Main canvas width is not resized after destroy");
is(
main.height,
700 * ratio,
"Main canvas height is not resized after destroy"
);
is(zoom.width, 500 * ratio, "Zoom canvas width is not resized after destroy");
is(
zoom.height,
700 * ratio,
"Zoom canvas height is not resized after destroy"
);
is(timesResizeCalled, 1, "onResize was not called again");
document.body.removeChild(div);
});
|
