Bug 1466225 - (Part 2) Split scale and transform shape path editor test to prevent exceeding max test run time. r=pbro
authorRazvan Caliman <rcaliman@mozilla.com>
Thu, 21 Jun 2018 16:26:00 +0200
changeset 423337 1f05dd7f51b55b8cc74d8ebd662bf15376528f48
parent 423336 cf183f5fce6a303c2b6385d7fc7f6b4dcb69006d
child 423338 bfde37aecadd49f0f12bd975b0c1f96af17d39d3
push id34173
push userapavel@mozilla.com
push dateFri, 22 Jun 2018 21:49:08 +0000
treeherdermozilla-central@c2c89b7bb8b5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1466225
milestone62.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1466225 - (Part 2) Split scale and transform shape path editor test to prevent exceeding max test run time. r=pbro MozReview-Commit-ID: CT0bGAWmU36
devtools/client/inspector/test/browser.ini
devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-scale.js
devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-translate.js
--- a/devtools/client/inspector/test/browser.ini
+++ b/devtools/client/inspector/test/browser.ini
@@ -78,16 +78,17 @@ skip-if = os == "mac" # Full keyboard na
 [browser_inspector_highlighter-comments.js]
 [browser_inspector_highlighter-cssgrid_01.js]
 [browser_inspector_highlighter-cssgrid_02.js]
 [browser_inspector_highlighter-cssshape_01.js]
 [browser_inspector_highlighter-cssshape_02.js]
 [browser_inspector_highlighter-cssshape_03.js]
 [browser_inspector_highlighter-cssshape_04.js]
 [browser_inspector_highlighter-cssshape_05.js]
+[browser_inspector_highlighter-cssshape_06-scale.js]
 [browser_inspector_highlighter-cssshape_06-translate.js]
 [browser_inspector_highlighter-cssshape_07.js]
 [browser_inspector_highlighter-cssshape_iframe_01.js]
 skip-if = (verify && debug)
 [browser_inspector_highlighter-csstransform_01.js]
 [browser_inspector_highlighter-csstransform_02.js]
 [browser_inspector_highlighter-embed.js]
 [browser_inspector_highlighter-eyedropper-clipboard.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-scale.js
@@ -0,0 +1,148 @@
+/* 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/. */
+
+"use strict";
+
+// Test that shapes are updated correctly on mouse events in transform mode.
+
+const TEST_URL = URL_ROOT + "doc_inspector_highlighter_cssshapes.html";
+const HIGHLIGHTER_TYPE = "ShapesHighlighter";
+const SHAPE_SELECTORS = ["#polygon-transform", "#circle", "#ellipse", "#inset"];
+
+add_task(async function() {
+  const env = await openInspectorForURL(TEST_URL);
+  const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env);
+  const {testActor, inspector} = env;
+  const view = selectRuleView(inspector);
+  const highlighters = view.highlighters;
+  const config = { inspector, view, highlighters, testActor, helper };
+
+  await testScale(config);
+});
+
+async function setup(config) {
+  const { inspector, view, selector, property, options } = config;
+  await selectNode(selector, inspector);
+  await toggleShapesHighlighter(view, selector, property, true, options);
+}
+
+async function teardown(config) {
+  const { view, selector, property } = config;
+  info(`Turn off shapes highlighter for ${selector}`);
+  await toggleShapesHighlighter(view, selector, property, false);
+}
+
+async function testScale(config) {
+  const { testActor, helper, highlighters } = config;
+  const options = { transformMode: true };
+  const property = "clip-path";
+
+  for (const selector of SHAPE_SELECTORS) {
+    await setup({selector, property, options, ...config});
+    const { mouse } = helper;
+
+    const { nw, width,
+          height, center } = await getBoundingBoxInPx({selector, ...config});
+
+    // if the top or left edges are not visible, move the shape so it is.
+    if (nw[0] < 0 || nw[1] < 0) {
+      const [x, y] = center;
+      const dx = Math.max(0, -nw[0]);
+      const dy = Math.max(0, -nw[1]);
+      await mouse.down(x, y, selector);
+      await mouse.move(x + dx, y + dy, selector);
+      await mouse.up(x + dx, y + dy, selector);
+      await testActor.reflow();
+      nw[0] += dx;
+      nw[1] += dy;
+    }
+    const dx = width / 10;
+    const dy = height / 10;
+    let onShapeChangeApplied;
+
+    info("Scaling from nw");
+    onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
+    await mouse.down(nw[0], nw[1], selector);
+    await mouse.move(nw[0] + dx, nw[1] + dy, selector);
+    await mouse.up(nw[0] + dx, nw[1] + dy, selector);
+    await testActor.reflow();
+    await onShapeChangeApplied;
+
+    const nwBB = await getBoundingBoxInPx({selector, ...config});
+    isnot(nwBB.nw[0], nw[0], `${selector} nw moved right after nw scale`);
+    isnot(nwBB.nw[1], nw[1], `${selector} nw moved down after nw scale`);
+    isnot(nwBB.width, width, `${selector} width reduced after nw scale`);
+    isnot(nwBB.height, height, `${selector} height reduced after nw scale`);
+
+    info("Scaling from ne");
+    onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
+    await mouse.down(nwBB.ne[0], nwBB.ne[1], selector);
+    await mouse.move(nwBB.ne[0] - dx, nwBB.ne[1] + dy, selector);
+    await mouse.up(nwBB.ne[0] - dx, nwBB.ne[1] + dy, selector);
+    await testActor.reflow();
+    await onShapeChangeApplied;
+
+    const neBB = await getBoundingBoxInPx({selector, ...config});
+    isnot(neBB.ne[0], nwBB.ne[0], `${selector} ne moved right after ne scale`);
+    isnot(neBB.ne[1], nwBB.ne[1], `${selector} ne moved down after ne scale`);
+    isnot(neBB.width, nwBB.width, `${selector} width reduced after ne scale`);
+    isnot(neBB.height, nwBB.height, `${selector} height reduced after ne scale`);
+
+    info("Scaling from sw");
+    onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
+    await mouse.down(neBB.sw[0], neBB.sw[1], selector);
+    await mouse.move(neBB.sw[0] + dx, neBB.sw[1] - dy, selector);
+    await mouse.up(neBB.sw[0] + dx, neBB.sw[1] - dy, selector);
+    await testActor.reflow();
+    await onShapeChangeApplied;
+
+    const swBB = await getBoundingBoxInPx({selector, ...config});
+    isnot(swBB.sw[0], neBB.sw[0], `${selector} sw moved right after sw scale`);
+    isnot(swBB.sw[1], neBB.sw[1], `${selector} sw moved down after sw scale`);
+    isnot(swBB.width, neBB.width, `${selector} width reduced after sw scale`);
+    isnot(swBB.height, neBB.height, `${selector} height reduced after sw scale`);
+
+    info("Scaling from se");
+    onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
+    await mouse.down(swBB.se[0], swBB.se[1], selector);
+    await mouse.move(swBB.se[0] - dx, swBB.se[1] - dy, selector);
+    await mouse.up(swBB.se[0] - dx, swBB.se[1] - dy, selector);
+    await testActor.reflow();
+    await onShapeChangeApplied;
+
+    const seBB = await getBoundingBoxInPx({selector, ...config});
+    isnot(seBB.se[0], swBB.se[0], `${selector} se moved right after se scale`);
+    isnot(seBB.se[1], swBB.se[1], `${selector} se moved down after se scale`);
+    isnot(seBB.width, swBB.width, `${selector} width reduced after se scale`);
+    isnot(seBB.height, swBB.height, `${selector} height reduced after se scale`);
+
+    await teardown({selector, property, ...config});
+  }
+}
+
+async function getBoundingBoxInPx(config) {
+  const { testActor, selector, inspector, highlighters } = config;
+  const quads = await testActor.getAllAdjustedQuads(selector);
+  const { width, height } = quads.content[0].bounds;
+  const highlightedNode = await getNodeFront(selector, inspector);
+  const computedStyle = await inspector.pageStyle.getComputed(highlightedNode);
+  const paddingTop = parseFloat(computedStyle["padding-top"].value);
+  const paddingLeft = parseFloat(computedStyle["padding-left"].value);
+  // path is always of form "Mx y Lx y Lx y Lx y Z", where x/y are numbers
+  const path = await testActor.getHighlighterNodeAttribute(
+    "shapes-bounding-box", "d", highlighters.highlighters[HIGHLIGHTER_TYPE]);
+  const coords = path.replace(/[MLZ]/g, "").split(" ").map((n, i) => {
+    return i % 2 === 0 ? paddingLeft + width * n / 100 : paddingTop + height * n / 100;
+  });
+
+  const nw = [coords[0], coords[1]];
+  const ne = [coords[2], coords[3]];
+  const se = [coords[4], coords[5]];
+  const sw = [coords[6], coords[7]];
+  const center = [(nw[0] + se[0]) / 2, (nw[1] + se[1]) / 2];
+  const shapeWidth = Math.sqrt((ne[0] - nw[0]) ** 2 + (ne[1] - nw[1]) ** 2);
+  const shapeHeight = Math.sqrt((sw[0] - nw[0]) ** 2 + (sw[1] - nw[1]) ** 2);
+
+  return { nw, ne, se, sw, center, width: shapeWidth, height: shapeHeight };
+}
--- a/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-translate.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-cssshape_06-translate.js
@@ -14,17 +14,16 @@ add_task(async function() {
   const env = await openInspectorForURL(TEST_URL);
   const helper = await getHighlighterHelperFor(HIGHLIGHTER_TYPE)(env);
   const {testActor, inspector} = env;
   const view = selectRuleView(inspector);
   const highlighters = view.highlighters;
   const config = { inspector, view, highlighters, testActor, helper };
 
   await testTranslate(config);
-  await testScale(config);
 });
 
 async function setup(config) {
   const { inspector, view, selector, property, options } = config;
   await selectNode(selector, inspector);
   await toggleShapesHighlighter(view, selector, property, true, options);
 }
 
@@ -49,16 +48,17 @@ async function testTranslate(config) {
     const dy = height / 10;
     let onShapeChangeApplied;
 
     info(`Translating ${selector}`);
     onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
     await mouse.down(x, y, selector);
     await mouse.move(x + dx, y + dy, selector);
     await mouse.up(x + dx, y + dy, selector);
+    await testActor.reflow();
     await onShapeChangeApplied;
 
     let newBB = await getBoundingBoxInPx({selector, ...config});
     isnot(newBB.center[0], x, `${selector} translated on y axis`);
     isnot(newBB.center[1], y, `${selector} translated on x axis`);
 
     info(`Translating ${selector} back`);
     onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
@@ -71,104 +71,16 @@ async function testTranslate(config) {
     newBB = await getBoundingBoxInPx({selector, ...config});
     is(newBB.center[0], x, `${selector} translated back on x axis`);
     is(newBB.center[1], y, `${selector} translated back on y axis`);
 
     await teardown({selector, property, ...config});
   }
 }
 
-async function testScale(config) {
-  const { testActor, helper, highlighters } = config;
-  const options = { transformMode: true };
-  const property = "clip-path";
-
-  for (const selector of SHAPE_SELECTORS) {
-    await setup({selector, property, options, ...config});
-    const { mouse } = helper;
-
-    const { nw, width,
-          height, center } = await getBoundingBoxInPx({selector, ...config});
-
-    // if the top or left edges are not visible, move the shape so it is.
-    if (nw[0] < 0 || nw[1] < 0) {
-      const [x, y] = center;
-      const dx = Math.max(0, -nw[0]);
-      const dy = Math.max(0, -nw[1]);
-      await mouse.down(x, y, selector);
-      await mouse.move(x + dx, y + dy, selector);
-      await mouse.up(x + dx, y + dy, selector);
-      await testActor.reflow();
-      nw[0] += dx;
-      nw[1] += dy;
-    }
-    const dx = width / 10;
-    const dy = height / 10;
-    let onShapeChangeApplied;
-
-    info("Scaling from nw");
-    onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
-    await mouse.down(nw[0], nw[1], selector);
-    await mouse.move(nw[0] + dx, nw[1] + dy, selector);
-    await mouse.up(nw[0] + dx, nw[1] + dy, selector);
-    await testActor.reflow();
-    await onShapeChangeApplied;
-
-    const nwBB = await getBoundingBoxInPx({selector, ...config});
-    isnot(nwBB.nw[0], nw[0], `${selector} nw moved right after nw scale`);
-    isnot(nwBB.nw[1], nw[1], `${selector} nw moved down after nw scale`);
-    isnot(nwBB.width, width, `${selector} width reduced after nw scale`);
-    isnot(nwBB.height, height, `${selector} height reduced after nw scale`);
-
-    info("Scaling from ne");
-    onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
-    await mouse.down(nwBB.ne[0], nwBB.ne[1], selector);
-    await mouse.move(nwBB.ne[0] - dx, nwBB.ne[1] + dy, selector);
-    await mouse.up(nwBB.ne[0] - dx, nwBB.ne[1] + dy, selector);
-    await testActor.reflow();
-    await onShapeChangeApplied;
-
-    const neBB = await getBoundingBoxInPx({selector, ...config});
-    isnot(neBB.ne[0], nwBB.ne[0], `${selector} ne moved right after ne scale`);
-    isnot(neBB.ne[1], nwBB.ne[1], `${selector} ne moved down after ne scale`);
-    isnot(neBB.width, nwBB.width, `${selector} width reduced after ne scale`);
-    isnot(neBB.height, nwBB.height, `${selector} height reduced after ne scale`);
-
-    info("Scaling from sw");
-    onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
-    await mouse.down(neBB.sw[0], neBB.sw[1], selector);
-    await mouse.move(neBB.sw[0] + dx, neBB.sw[1] - dy, selector);
-    await mouse.up(neBB.sw[0] + dx, neBB.sw[1] - dy, selector);
-    await testActor.reflow();
-    await onShapeChangeApplied;
-
-    const swBB = await getBoundingBoxInPx({selector, ...config});
-    isnot(swBB.sw[0], neBB.sw[0], `${selector} sw moved right after sw scale`);
-    isnot(swBB.sw[1], neBB.sw[1], `${selector} sw moved down after sw scale`);
-    isnot(swBB.width, neBB.width, `${selector} width reduced after sw scale`);
-    isnot(swBB.height, neBB.height, `${selector} height reduced after sw scale`);
-
-    info("Scaling from se");
-    onShapeChangeApplied = highlighters.once("shapes-highlighter-changes-applied");
-    await mouse.down(swBB.se[0], swBB.se[1], selector);
-    await mouse.move(swBB.se[0] - dx, swBB.se[1] - dy, selector);
-    await mouse.up(swBB.se[0] - dx, swBB.se[1] - dy, selector);
-    await testActor.reflow();
-    await onShapeChangeApplied;
-
-    const seBB = await getBoundingBoxInPx({selector, ...config});
-    isnot(seBB.se[0], swBB.se[0], `${selector} se moved right after se scale`);
-    isnot(seBB.se[1], swBB.se[1], `${selector} se moved down after se scale`);
-    isnot(seBB.width, swBB.width, `${selector} width reduced after se scale`);
-    isnot(seBB.height, swBB.height, `${selector} height reduced after se scale`);
-
-    await teardown({selector, property, ...config});
-  }
-}
-
 async function getBoundingBoxInPx(config) {
   const { testActor, selector, inspector, highlighters } = config;
   const quads = await testActor.getAllAdjustedQuads(selector);
   const { width, height } = quads.content[0].bounds;
   const highlightedNode = await getNodeFront(selector, inspector);
   const computedStyle = await inspector.pageStyle.getComputed(highlightedNode);
   const paddingTop = parseFloat(computedStyle["padding-top"].value);
   const paddingLeft = parseFloat(computedStyle["padding-left"].value);