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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
<!DOCTYPE HTML>
<html>
<head>
<title>Test InspectorUtils.getAnchorFor</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<code>InspectorUtils.getAnchorFor</code>
<style>
#anchor {
anchor-name: --my-anchor, --anchor-alias;
}
#another-anchor {
anchor-name: --another-anchor;
}
.anchored {
position-anchor: --my-anchor;
position: absolute;
top: anchor(--another-anchor bottom);
}
#not-abs-pos {
position: relative;
}
#with-pseudo::before {
content: "";
display: block;
width: 10px;
height: 10px;
background: hotpink;
position: absolute;
position-anchor: auto;
position-area: top right;
}
</style>
<section>
<div id="anchor">⚓️</div>
<div id="another-anchor">⚓︎⚓︎⚓︎</div>
<div id="not-abs-pos" class="anchored">not abs-pos</div>
<div id="abs-pos" class="anchored">abs-pos</div>
<div id="with-pseudo">with pseudo</div>
<button id="popover-control" popovertarget="my-popover">show popover</button>
<aside id="my-popover" popover="auto">popover</aside>
</section>
<script>
add_task(async function() {
const { InspectorUtils } = SpecialPowers;
const test = (elementId, anchorName, expectedAnchorElement, expectedType) => {
info(`InspectorUtils.getAnchorFor(#${elementId}, ${anchorName ?? "null"})`);
const el = document.getElementById(elementId);
const res = InspectorUtils.getAnchorFor(el, anchorName);
if (expectedAnchorElement === null) {
is(res, null, `There should be no ${anchorName ? anchorName + " " : ""}anchor for #${elementId}`)
return;
}
// We compare the ids because res.element is a Proxy, so we can't match it against
// an element we'd retrieve.
is(
res?.element?.id,
expectedAnchorElement.id,
`Got expected ${anchorName ? anchorName + " " : ""}anchor element for #${elementId}`
);
is(
res?.type,
expectedType,
`Got expected anchor association type for #${elementId}`
);
}
// no anchor when passing an anchor name that is not set
test("abs-pos", "--undefined-name", null);
// no anchor for element that are not absolutely positioned
test("not-abs-pos", null, null);
const anchorEl = document.getElementById("anchor");
const anotherAnchorEl = document.getElementById("another-anchor");
const popoverControlEl = document.getElementById("popover-control")
// show popover so the popover element gets an implicit anchor
popoverControlEl.click();
// explicitly associated anchor
test("abs-pos", "--my-anchor", anchorEl, "explicit");
test("abs-pos", "--another-anchor", anotherAnchorEl, "explicit");
// still getting the associated anchor without passing a name
test("abs-pos", null, anchorEl, "explicit");
// implicitly associated popover anchor
test("my-popover", null, popoverControlEl, "popover");
// no anchor when the popover is not displayed
document.getElementById("my-popover").togglePopover();
test("my-popover", null, null);
// implicitly associated pseudo element
const [beforePseudoElement] = InspectorUtils.getChildrenForNode(
document.getElementById("with-pseudo"),
true,
false,
);
is(
beforePseudoElement.implementedPseudoElement,
"::before",
"Got expected ::before pseudo element"
);
const pseudoElementRes = InspectorUtils.getAnchorFor(beforePseudoElement);
is(
pseudoElementRes?.element?.id,
"with-pseudo",
`Got expected anchor element for ::before pseudo element`
);
is(
pseudoElementRes?.type,
"pseudo-element",
`Got expected anchor association type for ::before pseudo element`
);
});
</script>
</body>
</html>
|
