diff options
Diffstat (limited to 'devtools/client/memory/test/browser/browser_memory_tree_map-02.js')
-rw-r--r-- | devtools/client/memory/test/browser/browser_memory_tree_map-02.js | 161 |
1 files changed, 161 insertions, 0 deletions
diff --git a/devtools/client/memory/test/browser/browser_memory_tree_map-02.js b/devtools/client/memory/test/browser/browser_memory_tree_map-02.js new file mode 100644 index 000000000..15f8b0457 --- /dev/null +++ b/devtools/client/memory/test/browser/browser_memory_tree_map-02.js @@ -0,0 +1,161 @@ +/* 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/. */ + +// Test the drag and zooming behavior + +"use strict"; + +const CanvasUtils = require("devtools/client/memory/components/tree-map/canvas-utils"); +const DragZoom = require("devtools/client/memory/components/tree-map/drag-zoom"); + +const TEST_URL = "data:text/html,<html><body></body></html>"; +const PIXEL_SCROLL_MODE = 0; +const PIXEL_DELTA = 10; +const MAX_RAF_LOOP = 1000; + +this.test = makeMemoryTest(TEST_URL, function* ({ tab, panel }) { + const panelWin = panel.panelWin; + const panelDoc = panelWin.document; + const div = panelDoc.createElement("div"); + + Object.assign(div.style, { + width: "100px", + height: "200px", + position: "absolute", + left:0, + top:0 + }); + + let rafMock = createRAFMock(); + + panelDoc.body.appendChild(div); + + let canvases = new CanvasUtils(div, 0); + let dragZoom = new DragZoom(canvases.container, 0, rafMock.raf); + let style = canvases.container.style; + + info("Check initial state of dragZoom"); + { + is(dragZoom.zoom, 0, "Zooming starts at 0"); + is(dragZoom.smoothZoom, 0, "Smoothed zooming starts at 0"); + is(rafMock.timesCalled, 0, "No RAFs have been queued"); + is(style.transform, "translate(0px, 0px) scale(1)", + "No transforms have been done."); + + canvases.container.dispatchEvent(new WheelEvent("wheel", { + deltaY: -PIXEL_DELTA, + deltaMode: PIXEL_SCROLL_MODE + })); + + is(style.transform, "translate(0px, 0px) scale(1.05)", + "The div has been slightly scaled."); + is(dragZoom.zoom, PIXEL_DELTA * dragZoom.ZOOM_SPEED, + "The zoom was increased"); + ok(floatEquality(dragZoom.smoothZoom, 0.05), + "The smooth zoom is between the initial value and the target"); + is(rafMock.timesCalled, 1, "A RAF has been queued"); + } + + info("RAF will eventually stop once the smooth values approach the target"); + { + let i; + let lastCallCount; + for (i = 0; i < MAX_RAF_LOOP; i++) { + if (lastCallCount === rafMock.timesCalled) { + break; + } + lastCallCount = rafMock.timesCalled; + rafMock.nextFrame(); + } + is(style.transform, "translate(0px, 0px) scale(1.1)", + "The scale has been fully applied"); + is(dragZoom.zoom, dragZoom.smoothZoom, + "The smooth and target zoom values match"); + isnot(MAX_RAF_LOOP, i, + "The RAF loop correctly stopped"); + } + + info("Dragging correctly translates the div"); + { + let initialX = dragZoom.translateX; + let initialY = dragZoom.translateY; + div.dispatchEvent(new MouseEvent("mousemove", { + clientX: 10, + clientY: 10, + })); + div.dispatchEvent(new MouseEvent("mousedown")); + div.dispatchEvent(new MouseEvent("mousemove", { + clientX: 20, + clientY: 20, + })); + div.dispatchEvent(new MouseEvent("mouseup")); + + is(style.transform, "translate(2.5px, 5px) scale(1.1)", + "The style is correctly translated"); + ok(floatEquality(dragZoom.translateX, 5), + "Translate X moved by some pixel amount"); + ok(floatEquality(dragZoom.translateY, 10), + "Translate Y moved by some pixel amount"); + } + + info("Zooming centers around the mouse"); + { + canvases.container.dispatchEvent(new WheelEvent("wheel", { + deltaY: -PIXEL_DELTA, + deltaMode: PIXEL_SCROLL_MODE + })); + // Run through the RAF loop to zoom in towards that value. + let lastCallCount; + for (let i = 0; i < MAX_RAF_LOOP; i++) { + if (lastCallCount === rafMock.timesCalled) { + break; + } + lastCallCount = rafMock.timesCalled; + rafMock.nextFrame(); + } + is(style.transform, "translate(8.18182px, 18.1818px) scale(1.2)", + "Zooming affects the translation to keep the mouse centered"); + ok(floatEquality(dragZoom.translateX, 8.181818181818185), + "Translate X was affected by the mouse position"); + ok(floatEquality(dragZoom.translateY, 18.18181818181817), + "Translate Y was affected by the mouse position"); + is(dragZoom.zoom, 0.2, "Zooming starts at 0"); + } + + dragZoom.destroy(); + + info("Scroll isn't tracked after destruction"); + { + let previousZoom = dragZoom.zoom; + let previousSmoothZoom = dragZoom.smoothZoom; + + canvases.container.dispatchEvent(new WheelEvent("wheel", { + deltaY: -PIXEL_DELTA, + deltaMode: PIXEL_SCROLL_MODE + })); + + is(dragZoom.zoom, previousZoom, + "The zoom stayed the same"); + is(dragZoom.smoothZoom, previousSmoothZoom, + "The smooth zoom stayed the same"); + } + + info("Translation isn't tracked after destruction"); + { + let initialX = dragZoom.translateX; + let initialY = dragZoom.translateY; + + div.dispatchEvent(new MouseEvent("mousedown")); + div.dispatchEvent(new MouseEvent("mousemove"), { + clientX: 40, + clientY: 40, + }); + div.dispatchEvent(new MouseEvent("mouseup")); + is(dragZoom.translateX, initialX, + "The translationX didn't change"); + is(dragZoom.translateY, initialY, + "The translationY didn't change"); + } + panelDoc.body.removeChild(div); +}); |