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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Check that toggling a flex highlighter does not change a grid highlighter badge.
// Bug 1592604
const TEST_URI = `
<style type='text/css'>
.grid {
display: grid;
}
.flex {
display: flex;
}
</style>
<div class="grid">
</div>
<div class="flex">
</div>
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector } = await openLayoutView();
const gridBadge = await enableHighlighterByBadge("grid", ".grid", inspector);
const flexBadge = await enableHighlighterByBadge("flex", ".flex", inspector);
info("Check that both display badges are active");
ok(flexBadge.classList.contains("active"), `flex display badge is active.`);
ok(gridBadge.classList.contains("active"), `grid display badge is active.`);
});
/**
* Enable the flex or grid highlighter by clicking on the corresponding badge
* next to a node in the markup view. Returns the badge element.
*
* @param {String} type
* Either "flex" or "grid"
* @param {String} selector
* Selector matching the flex or grid container element.
* @param {Inspector} inspector
* Instance of Inspector panel
* @return {Element} The DOM element of the display badge that shows next to the element
* mathched by the selector in the markup view.
*/
async function enableHighlighterByBadge(type, selector, inspector) {
const { waitForHighlighterTypeShown } = getHighlighterTestHelpers(inspector);
info(`Check the ${type} display badge is shown and not active.`);
const container = await getContainerForSelector(selector, inspector);
const badge = container.elt.querySelector(
".inspector-badge.interactive[data-display]"
);
ok(!badge.classList.contains("active"), `${type} badge is not active.`);
ok(badge.classList.contains("interactive"), `${type} badge is interactive.`);
info(`Toggling ON the ${type} highlighter from the ${type} display badge.`);
let onHighlighterShown;
switch (type) {
case "grid":
onHighlighterShown = waitForHighlighterTypeShown(
inspector.highlighters.TYPES.GRID
);
break;
case "flex":
onHighlighterShown = waitForHighlighterTypeShown(
inspector.highlighters.TYPES.FLEXBOX
);
break;
}
badge.click();
await onHighlighterShown;
ok(badge.classList.contains("active"), `${type} badge is active.`);
ok(badge.classList.contains("interactive"), `${type} badge is interactive.`);
return badge;
}
|
