diff --git a/browser/devtools/shared/test/browser_cubic-bezier-01.js b/browser/devtools/shared/test/browser_cubic-bezier-01.js
index 7d04ce4412ec..2e288c0ea74f 100644
--- a/browser/devtools/shared/test/browser_cubic-bezier-01.js
+++ b/browser/devtools/shared/test/browser_cubic-bezier-01.js
@@ -9,11 +9,12 @@
 const TEST_URI = "chrome://browser/content/devtools/cubic-bezier-frame.xhtml";
 const {CubicBezierWidget} = devtools.require("devtools/shared/widgets/CubicBezierWidget");
 
-let test = Task.async(function*() {
-  yield promiseTab(TEST_URI);
+add_task(function*() {
+  yield promiseTab("about:blank");
+  let [host, win, doc] = yield createHost("bottom", TEST_URI);
 
   info("Checking that the markup is created in the parent");
-  let container = content.document.querySelector("#container");
+  let container = doc.querySelector("#container");
   let w = new CubicBezierWidget(container);
 
   ok(container.querySelector(".coordinate-plane"),
@@ -31,6 +32,6 @@ let test = Task.async(function*() {
   w.destroy();
   is(container.children.length, 0, "All nodes have been removed");
 
+  host.destroy();
   gBrowser.removeCurrentTab();
-  finish();
 });
diff --git a/browser/devtools/shared/test/browser_cubic-bezier-02.js b/browser/devtools/shared/test/browser_cubic-bezier-02.js
index dc46f835a22d..30887a74d534 100644
--- a/browser/devtools/shared/test/browser_cubic-bezier-02.js
+++ b/browser/devtools/shared/test/browser_cubic-bezier-02.js
@@ -10,22 +10,23 @@ const TEST_URI = "chrome://browser/content/devtools/cubic-bezier-frame.xhtml";
 const {CubicBezierWidget, PREDEFINED} =
   devtools.require("devtools/shared/widgets/CubicBezierWidget");
 
-let test = Task.async(function*() {
-  yield promiseTab(TEST_URI);
+add_task(function*() {
+  yield promiseTab("about:blank");
+  let [host, win, doc] = yield createHost("bottom", TEST_URI);
 
-  let container = content.document.querySelector("#container");
+  let container = doc.querySelector("#container");
   let w = new CubicBezierWidget(container, PREDEFINED.linear);
 
-  yield pointsCanBeDragged(w);
-  yield curveCanBeClicked(w);
-  yield pointsCanBeMovedWithKeyboard(w);
+  yield pointsCanBeDragged(w, win, doc);
+  yield curveCanBeClicked(w, win, doc);
+  yield pointsCanBeMovedWithKeyboard(w, win, doc);
 
   w.destroy();
+  host.destroy();
   gBrowser.removeCurrentTab();
-  finish();
 });
 
-function* pointsCanBeDragged(widget) {
+function* pointsCanBeDragged(widget, win, doc) {
   info("Checking that the control points can be dragged with the mouse");
 
   info("Listening for the update event");
@@ -33,10 +34,8 @@ function* pointsCanBeDragged(widget) {
 
   info("Generating a mousedown/move/up on P1");
   widget._onPointMouseDown({target: widget.p1});
-  EventUtils.synthesizeMouse(content.document.documentElement, 0, 100,
-    {type: "mousemove"}, content.window);
-  EventUtils.synthesizeMouse(content.document.documentElement, 0, 100,
-    {type: "mouseup"}, content.window);
+  doc.onmousemove({pageX: 0, pageY: 100});
+  doc.onmouseup();
 
   let bezier = yield onUpdated;
   ok(true, "The widget fired the updated event");
@@ -49,17 +48,15 @@ function* pointsCanBeDragged(widget) {
 
   info("Generating a mousedown/move/up on P2");
   widget._onPointMouseDown({target: widget.p2});
-  EventUtils.synthesizeMouse(content.document.documentElement, 200, 300,
-    {type: "mousemove"}, content.window);
-  EventUtils.synthesizeMouse(content.document.documentElement, 200, 300,
-    {type: "mouseup"}, content.window);
+  doc.onmousemove({pageX: 200, pageY: 300});
+  doc.onmouseup();
 
   bezier = yield onUpdated;
   is(bezier.P2[0], 1, "The new P2 time coordinate is correct");
   is(bezier.P2[1], 0, "The new P2 progress coordinate is correct");
 }
 
-function* curveCanBeClicked(widget) {
+function* curveCanBeClicked(widget, win, doc) {
   info("Checking that clicking on the curve moves the closest control point");
 
   info("Listening for the update event");
@@ -88,7 +85,7 @@ function* curveCanBeClicked(widget) {
   is(bezier.P1[1], 0.75, "P1 progress coordinate remained unchanged");
 }
 
-function* pointsCanBeMovedWithKeyboard(widget) {
+function* pointsCanBeMovedWithKeyboard(widget, win, doc) {
   info("Checking that points respond to keyboard events");
 
   info("Moving P1 to the left");
diff --git a/browser/devtools/shared/test/browser_cubic-bezier-03.js b/browser/devtools/shared/test/browser_cubic-bezier-03.js
index 93d21a0d35e6..2ce5fe4561d0 100644
--- a/browser/devtools/shared/test/browser_cubic-bezier-03.js
+++ b/browser/devtools/shared/test/browser_cubic-bezier-03.js
@@ -10,18 +10,19 @@ const TEST_URI = "chrome://browser/content/devtools/cubic-bezier-frame.xhtml";
 const {CubicBezierWidget, PREDEFINED} =
   devtools.require("devtools/shared/widgets/CubicBezierWidget");
 
-let test = Task.async(function*() {
-  yield promiseTab(TEST_URI);
+add_task(function*() {
+  yield promiseTab("about:blank");
+  let [host, win, doc] = yield createHost("bottom", TEST_URI);
 
-  let container = content.document.querySelector("#container");
+  let container = doc.querySelector("#container");
   let w = new CubicBezierWidget(container, PREDEFINED.linear);
 
   yield coordinatesCanBeChangedByProvidingAnArray(w);
   yield coordinatesCanBeChangedByProvidingAValue(w);
 
   w.destroy();
+  host.destroy();
   gBrowser.removeCurrentTab();
-  finish();
 });
 
 function* coordinatesCanBeChangedByProvidingAnArray(widget) {
diff --git a/browser/devtools/shared/test/head.js b/browser/devtools/shared/test/head.js
index b9f265839861..9ae0812131bc 100644
--- a/browser/devtools/shared/test/head.js
+++ b/browser/devtools/shared/test/head.js
@@ -5,6 +5,8 @@
 let {devtools} = Cu.import("resource://gre/modules/devtools/Loader.jsm", {});
 let {console} = Cu.import("resource://gre/modules/devtools/Console.jsm", {});
 let TargetFactory = devtools.TargetFactory;
+const {DOMHelpers} = Cu.import("resource:///modules/devtools/DOMHelpers.jsm", {});
+const {Hosts} = devtools.require("devtools/framework/toolbox-hosts");
 
 gDevTools.testing = true;
 SimpleTest.registerCleanupFunction(() => {