summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/boxmodel/test/browser_boxmodel_show-tooltip-for-unassociated-rule.js
blob: ffb911b342ecfb97884a3a74a4156fd77210ffeb (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* Any copyright is dedicated to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

const L10N = new LocalizationHelper(
  "devtools/client/locales/inspector.properties"
);

// Test that hovering over a box model value with no associated rule will show a tooltip
// saying: "No associated rule".

const TEST_URI = `<style>
    #box {}
  </style>
  <div id="box"></div>`;

add_task(async function () {
  await pushPref("devtools.layout.boxmodel.highlightProperty", true);
  await addTab("data:text/html," + encodeURIComponent(TEST_URI));
  const { inspector, boxmodel } = await openLayoutView();
  const { rulePreviewTooltip } = boxmodel;
  await selectNode("#box", inspector);

  info(
    "Test that hovering over margin-top shows tooltip showing 'No associated rule'."
  );
  const el = boxmodel.document.querySelector(
    ".boxmodel-margin.boxmodel-top > span"
  );

  info("Wait for mouse to hover over margin-top element.");
  const onRulePreviewTooltipShown = rulePreviewTooltip._tooltip.once(
    "shown",
    () => {
      ok(true, "Tooltip shown.");
      is(
        rulePreviewTooltip.message.textContent,
        L10N.getStr("rulePreviewTooltip.noAssociatedRule"),
        `Tooltip shows ${L10N.getStr("rulePreviewTooltip.noAssociatedRule")}`
      );
    }
  );
  EventUtils.synthesizeMouseAtCenter(
    el,
    { type: "mousemove", shiftKey: true },
    boxmodel.document.defaultView
  );
  await onRulePreviewTooltipShown;
});