1 files changed, 104 insertions, 0 deletions
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
new file mode 100644
index 0000000000..000d548bdd
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_offsetparent.js
@@ -0,0 +1,104 @@
+/* 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 for the offset parent and that it
+// updates when the node's style is changed
+
+const TEST_URI = `
+  <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>
+`;
+
+const OFFSET_PARENT_SELECTOR =
+  ".computed-property-value-container .objectBox-node";
+
+const res1 = [
+  {
+    selector: "#absolute_child",
+    offsetParentValue: "div#relative_parent",
+  },
+  {
+    selector: "#no_parent",
+    offsetParentValue: "body",
+  },
+  {
+    selector: "#relative_parent",
+    offsetParentValue: "body",
+  },
+  {
+    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(async function () {
+  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+
+  await testInitialValues(inspector, boxmodel);
+  await testChangingValues(inspector, boxmodel);
+});
+
+async function testInitialValues(inspector, boxmodel) {
+  info(
+    "Test that the initial values of the box model offset parent are correct"
+  );
+  const viewdoc = boxmodel.document;
+
+  for (const { selector, offsetParentValue } of res1) {
+    await selectNode(selector, inspector);
+
+    const elt = viewdoc.querySelector(OFFSET_PARENT_SELECTOR);
+    is(
+      elt && elt.textContent,
+      offsetParentValue,
+      selector + " has the right value."
+    );
+  }
+}
+
+async function testChangingValues(inspector, boxmodel) {
+  info("Test that changing the document updates the box model");
+  const viewdoc = boxmodel.document;
+
+  for (const { selector, update } of updates) {
+    const onUpdated = waitForUpdate(inspector);
+    await setContentPageElementAttribute(selector, "style", update);
+    await onUpdated;
+  }
+
+  for (const { selector, offsetParentValue } of res2) {
+    await selectNode(selector, inspector);
+
+    const elt = viewdoc.querySelector(OFFSET_PARENT_SELECTOR);
+    is(
+      elt && elt.textContent,
+      offsetParentValue,
+      selector + " has the right value after style update."
+    );
+  }
+}