--- a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_04.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_04.js
@@ -179,36 +179,37 @@ async function testPolygonRemovePoint(co
   await teardown({selector, property, ...config});
 }
 
 async function testCircleMoveCenter(config) {
   const {inspector, highlighters, testActor, helper} = config;
   const selector = "#circle";
   const property = "clip-path";
 
+  let onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
   await setup({selector, property, ...config});
 
   let cx = parseFloat(await testActor.getHighlighterNodeAttribute(
     "shapes-ellipse", "cx", highlighters.highlighters[HIGHLIGHTER_TYPE]));
   let cy = parseFloat(await testActor.getHighlighterNodeAttribute(
     "shapes-ellipse", "cy", highlighters.highlighters[HIGHLIGHTER_TYPE]));
   let quads = await testActor.getAllAdjustedQuads(selector);
   let { width, height } = quads.border[0].bounds;
   let cxPixel = width * cx / 100;
   let cyPixel = height * cy / 100;
   let dx = width / 10;
   let dy = height / 10;
 
-  let onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
   info("Moving circle center");
   let { mouse } = helper;
   await mouse.down(cxPixel, cyPixel, selector);
   await mouse.move(cxPixel + dx, cyPixel + dy, selector);
   await mouse.up(cxPixel + dx, cyPixel + dy, selector);
   await testActor.reflow();
+  info("Waiting for shape changes to apply");
   await onShapeChangeApplied;
 
   let definition = await getComputedPropertyValue(selector, property, inspector);
   ok(definition.includes(`at ${cx + 10}% ${cy + 10}%`),
      "Circle center successfully moved");
 
   await teardown({selector, property, ...config});
 }
@@ -287,35 +288,41 @@ async function testInsetMoveEdges(config
   let bottom = top + elemHeight * height / 100;
   let xCenter = (left + right) / 2;
   let yCenter = (top + bottom) / 2;
   let dx = elemWidth / 10;
   let dy = elemHeight / 10;
   let { mouse } = helper;
 
   info("Moving inset top");
+  let onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
   await mouse.down(xCenter, top, selector);
   await mouse.move(xCenter, top + dy, selector);
   await mouse.up(xCenter, top + dy, selector);
   await testActor.reflow();
+  await onShapeChangeApplied;
 
   info("Moving inset bottom");
+  onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
   await mouse.down(xCenter, bottom, selector);
   await mouse.move(xCenter, bottom + dy, selector);
   await mouse.up(xCenter, bottom + dy, selector);
   await testActor.reflow();
+  await onShapeChangeApplied;
 
   info("Moving inset left");
+  onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
   await mouse.down(left, yCenter, selector);
   await mouse.move(left + dx, yCenter, selector);
   await mouse.up(left + dx, yCenter, selector);
   await testActor.reflow();
+  await onShapeChangeApplied;
 
   info("Moving inset right");
-  let onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
+  onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
   await mouse.down(right, yCenter, selector);
   await mouse.move(right + dx, yCenter, selector);
   await mouse.up(right + dx, yCenter, selector);
   await testActor.reflow();
   await onShapeChangeApplied;
 
   let definition = await getComputedPropertyValue(selector, property, inspector);
   ok(definition.includes(