diff -r 000000000000 -r 6474c204b198 browser/components/tabview/test/browser_tabview_snapping.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/browser/components/tabview/test/browser_tabview_snapping.js Wed Dec 31 06:09:35 2014 +0100 @@ -0,0 +1,157 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +function test() { + waitForExplicitFinish(); + + newWindowWithTabView(onTabViewWindowLoaded, null, 1000, 800); +} + +function onTabViewWindowLoaded(win) { + let contentWindow = win.document.getElementById("tab-view").contentWindow; + let [originalTab] = win.gBrowser.visibleTabs; + + ok(win.TabView.isVisible(), "Tab View is visible"); + is(contentWindow.GroupItems.groupItems.length, 1, "There is only one group"); + let currentActiveGroup = contentWindow.GroupItems.getActiveGroupItem(); + + // Create a group + // Note: 150 x 150 should be larger than the minimum size for a group item + let firstBox = new contentWindow.Rect(80, 80, 160, 160); + let firstGroup = new contentWindow.GroupItem([], { bounds: firstBox, + immediately: true }); + ok(firstGroup.getBounds().equals(firstBox), "This group got its bounds"); + + // Create a second group + let secondBox = new contentWindow.Rect(80, 280, 160, 160); + let secondGroup = new contentWindow.GroupItem([], { bounds: secondBox, + immediately: true }); + ok(secondGroup.getBounds().equals(secondBox), "This second group got its bounds"); + + // A third group is created later, but multiple functions need access to it. + let thirdGroup = null; + + is(secondGroup.getBounds().top - firstGroup.getBounds().bottom, 40, + "There's currently 40 px between the first group and second group"); + + let endGame = function() { + firstGroup.container.parentNode.removeChild(firstGroup.container); + firstGroup.close(); + thirdGroup.container.parentNode.removeChild(thirdGroup.container); + thirdGroup.close(); + + win.close(); + ok(win.closed, "new window is closed"); + finish(); + } + + let continueWithPart2 = function() { + + ok(firstGroup.getBounds().equals(firstBox), "The first group should still have its bounds"); + + // Create a third group + let thirdBox = new contentWindow.Rect(80, 280, 200, 160); + thirdGroup = new contentWindow.GroupItem([], { bounds: thirdBox, + immediately: true }); + ok(thirdGroup.getBounds().equals(thirdBox), "This third group got its bounds"); + + is(thirdGroup.getBounds().top - firstGroup.getBounds().bottom, 40, + "There's currently 40 px between the first group and third group"); + + // Just move it to the left and drop it. + checkSnap(thirdGroup, 0, 0, contentWindow, function(snapped){ + ok(!snapped,"Offset: Just move it to the left and drop it"); + + // Move the second group up 10 px. It shouldn't snap yet. + checkSnap(thirdGroup, 0, -10, contentWindow, function(snapped){ + ok(!snapped,"Offset: Moving up 10 should not snap"); + + // Move the second group up 10 px. It now should snap. + checkSnap(thirdGroup, 0, -10, contentWindow, function(snapped){ + ok(snapped,"Offset: Moving up 10 again should snap!"); + endGame(); + }); + }); + }); + }; + + let part1 = function() { + // Just pick it up and drop it. + checkSnap(secondGroup, 0, 0, contentWindow, function(snapped){ + ok(!snapped,"Right under: Just pick it up and drop it"); + + // Move the second group up 10 px. It shouldn't snap yet. + checkSnap(secondGroup, 0, -10, contentWindow, function(snapped){ + ok(!snapped,"Right under: Moving up 10 should not snap"); + + // Move the second group up 10 px. It now should snap. + checkSnap(secondGroup, 0, -10, contentWindow, function(snapped){ + ok(snapped,"Right under: Moving up 10 again should snap!"); + // cheat by removing the second group, so that we disappear immediately + secondGroup.container.parentNode.removeChild(secondGroup.container); + secondGroup.close(); + continueWithPart2(); + }); + }); + }); + } + + part1(); +} + +function simulateDragDrop(tabItem, offsetX, offsetY, contentWindow) { + // enter drag mode + let dataTransfer; + + EventUtils.synthesizeMouse( + tabItem.container, 1, 1, { type: "mousedown" }, contentWindow); + let event = contentWindow.document.createEvent("DragEvents"); + event.initDragEvent( + "dragenter", true, true, contentWindow, 0, 0, 0, 0, 0, + false, false, false, false, 1, null, dataTransfer); + tabItem.container.dispatchEvent(event); + + // drag over + if (offsetX || offsetY) { + let Ci = Components.interfaces; + let utils = contentWindow.QueryInterface(Ci.nsIInterfaceRequestor). + getInterface(Ci.nsIDOMWindowUtils); + let rect = tabItem.getBounds(); + for (let i = 1; i <= 5; i++) { + let left = rect.left + 1 + Math.round(i * offsetX / 5); + let top = rect.top + 1 + Math.round(i * offsetY / 5); + utils.sendMouseEvent("mousemove", left, top, 0, 1, 0); + } + event = contentWindow.document.createEvent("DragEvents"); + event.initDragEvent( + "dragover", true, true, contentWindow, 0, 0, 0, 0, 0, + false, false, false, false, 0, null, dataTransfer); + tabItem.container.dispatchEvent(event); + } + + // drop + EventUtils.synthesizeMouse( + tabItem.container, 0, 0, { type: "mouseup" }, contentWindow); + event = contentWindow.document.createEvent("DragEvents"); + event.initDragEvent( + "drop", true, true, contentWindow, 0, 0, 0, 0, 0, + false, false, false, false, 0, null, dataTransfer); + tabItem.container.dispatchEvent(event); +} + +function checkSnap(item, offsetX, offsetY, contentWindow, callback) { + let firstTop = item.getBounds().top; + let firstLeft = item.getBounds().left; + let onDrop = function() { + let snapped = false; + item.container.removeEventListener('drop', onDrop, false); + if (item.getBounds().top != firstTop + offsetY) + snapped = true; + if (item.getBounds().left != firstLeft + offsetX) + snapped = true; + callback(snapped); + }; + item.container.addEventListener('drop', onDrop, false); + simulateDragDrop(item, offsetX, offsetY, contentWindow); +} +