Bug 1345119 - Part 5: Test browser_boxmodel_offsetparent.js to test front end box model. r?gl draft
authorStanford Lockhart <lockhart@cs.dal.ca>
Sat, 25 Mar 2017 13:43:49 -0300
changeset 551322 c5718b41bd24
parent 551320 3ee0e75b9370
child 621516 b0b9e05791c6
push id51022
push userbmo:lockhart@cs.dal.ca
push dateSat, 25 Mar 2017 16:45:46 +0000
reviewersgl
bugs1345119
milestone55.0a1
Bug 1345119 - Part 5: Test browser_boxmodel_offsetparent.js to test front end box model. r?gl MozReview-Commit-ID: E2PtkTEvqQo
devtools/client/inspector/boxmodel/test/browser.ini
devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
devtools/client/shared/redux/middleware/log.js
--- a/devtools/client/inspector/boxmodel/test/browser.ini
+++ b/devtools/client/inspector/boxmodel/test/browser.ini
@@ -17,16 +17,17 @@ support-files =
 # [browser_boxmodel_editablemodel_allproperties.js]
 # Disabled for too many intermittent failures (bug 1009322)
 [browser_boxmodel_editablemodel_bluronclick.js]
 [browser_boxmodel_editablemodel_border.js]
 [browser_boxmodel_editablemodel_stylerules.js]
 [browser_boxmodel_guides.js]
 [browser_boxmodel_navigation.js]
 skip-if = true # Bug 1336198
+[browser_boxmodel_offsetparent.js]
 [browser_boxmodel_properties.js]
 [browser_boxmodel_rotate-labels-on-sides.js]
 [browser_boxmodel_sync.js]
 [browser_boxmodel_tooltips.js]
 skip-if = true # Bug 1336198
 [browser_boxmodel_update-after-navigation.js]
 [browser_boxmodel_update-after-reload.js]
 # [browser_boxmodel_update-in-iframes.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
@@ -0,0 +1,95 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the box model displays the right values and that it updates when
+// the node's style is changed
+
+const boxModelOffsetParentSelector = ".boxmodel-offset-parent .objectBox-node";
+
+const res1 = [
+  {
+    selector: "#absolute_child",
+    offsetParentValue: "div#relative_parent"
+  },
+  {
+    selector: "#no_parent",
+    offsetParentValue: "body"
+  },
+  {
+    selector: "#relative_parent",
+    offsetParentValue: null
+  },
+  {
+    selector: "#static",
+    offsetParentValue: null
+  },
+  {
+    selector: "#fixed",
+    offsetParentValue: null
+  },
+];
+
+const updates = [
+  {
+    selector: "#absolute_child",
+    update: "position: static"
+  },
+];
+
+const res2 = [
+  {
+    selector: "#absolute_child",
+    offsetParentValue: null
+  },
+];
+
+add_task(function* () {
+  let html = `
+      <div id="relative_parent" style="position: relative">
+        <div id="absolute_child" style="position: absolute"></div>
+      </div>
+      <div id="static"></div>
+      <div id="no_parent" style="position: absolute"></div>
+      <div id="fixed" style="position: fixed"></div>
+  `;
+
+  yield addTab("data:text/html," + encodeURIComponent(html));
+  let { inspector, view, testActor } = yield openBoxModelView();
+
+  yield testInitialValues(inspector, view);
+  yield testChangingValues(inspector, view, testActor);
+});
+
+function* testInitialValues(inspector, view) {
+  info("Test that the initial values of the box model offset parent are correct");
+  let viewdoc = view.document;
+
+  for (let { selector, offsetParentValue } of res1) {
+    yield selectNode(selector, inspector);
+
+    let elt = viewdoc.querySelector(boxModelOffsetParentSelector);
+    is(elt && elt.textContent, offsetParentValue, selector + " has the right value.");
+  }
+}
+
+function* testChangingValues(inspector, view, testActor) {
+  info("Test that changing the document updates the box model");
+  let viewdoc = view.document;
+
+  for (let { selector, update } of updates) {
+    let onUpdated = waitForUpdate(inspector);
+    yield testActor.setAttribute(selector, "style", update);
+    yield onUpdated;
+  }
+
+  for (let { selector, offsetParentValue } of res2) {
+    yield selectNode(selector, inspector);
+
+    let elt = viewdoc.querySelector(boxModelOffsetParentSelector);
+    is(elt && elt.textContent, offsetParentValue,
+      selector + " has the right value after style update.");
+  }
+}
--- a/devtools/client/shared/redux/middleware/log.js
+++ b/devtools/client/shared/redux/middleware/log.js
@@ -4,14 +4,18 @@
 "use strict";
 
 /**
  * A middleware that logs all actions coming through the system
  * to the console.
  */
 function log({ dispatch, getState }) {
   return next => action => {
-    console.log("[DISPATCH]", JSON.stringify(action, null, 2));
+    try {
+      console.log("[DISPATCH]", JSON.stringify(action, null, 2));
+    } catch (e) {
+      console.log("[DISPATCH]", action);
+    }
     next(action);
   };
 }
 
 exports.log = log;