Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Tests that the anchor badge is displayed on element with expected anchor-name values.
const TEST_URI = `
<style type="text/css">
#not-an-anchor {
anchor-name: none;
}
#anchor {
anchor-name: --my-anchor;
}
#anchor-with-multiple-names {
anchor-name: --my-other-anchor, --anchor-alias;
}
.anchored {
position: fixed;
left: anchor(right);
position-anchor: --my-anchor;
width: 20px;
height: 20px;
background-color: gold;
}
</style>
<span id="anchor">--my-anchor</span>
<span id="anchor-with-multiple-names">--my-other-anchor --anchor-alias</span>
<span id="not-an-anchor">not an anchor</span>
<div class="anchored">A</div>
<div class="anchored" style="position-anchor: --my-other-anchor">B</div>
<div class="anchored" style="position-anchor: --updated-anchor-name">C</div>
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector } = await openLayoutView();
let badge = await getAnchorBadgeForSelector("#anchor", inspector);
ok(!!badge, "anchor badge is displayed for element with valid anchor name");
is(badge.textContent, "anchor", "badge has expected text");
is(badge.title, "anchor-name: --my-anchor", "badge has expected title");
badge = await getAnchorBadgeForSelector(
"#anchor-with-multiple-names",
inspector
);
ok(
!!badge,
"anchor badge is displayed for element with multiple anchor name"
);
is(badge.textContent, "anchor", "badge has expected text");
is(
badge.title,
"anchor-name: --my-other-anchor, --anchor-alias",
"badge has expected title"
);
info(
"Change the element anchorName value to see if the badge title is updated"
);
const oldTitle = badge.title;
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
content.document.getElementById(
"anchor-with-multiple-names"
).style.anchorName = "--updated-anchor-name";
});
await waitFor(() => badge.title !== oldTitle);
badge = await getAnchorBadgeForSelector(
"#anchor-with-multiple-names",
inspector
);
ok(!!badge, "anchor badge is still displayed after changing the anchor name");
is(
badge.textContent,
"anchor",
"badge has expected text after changing the anchor name"
);
is(
badge.title,
"anchor-name: --updated-anchor-name",
"badge has expected title after changing the anchor name"
);
info("Set the element anchorName to none to see if the badge gets hidden");
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
content.document.getElementById(
"anchor-with-multiple-names"
).style.anchorName = "none";
});
await waitFor(
async () =>
(await getAnchorBadgeForSelector(
"#anchor-with-multiple-names",
inspector
)) === null,
"wait for badge to be hidden",
// interval
500,
// max tries
10
);
ok(true, "The badge was hidden when setting anchorName to none");
info(
"Change the element anchorName value back to a dashed ident to see if the badge is shown again"
);
await SpecialPowers.spawn(gBrowser.selectedBrowser, [], async function () {
content.document.getElementById(
"anchor-with-multiple-names"
).style.anchorName = "--my-other-anchor";
});
badge = await waitFor(
async () =>
await getAnchorBadgeForSelector("#anchor-with-multiple-names", inspector),
"wait for badge to be visible",
// interval
500,
// max tries
10
);
ok(
!!badge,
"anchor badge is displayed again after setting a valid anchor name"
);
is(
badge.textContent,
"anchor",
"badge has expected text after setting a valid anchor name"
);
is(
badge.title,
"anchor-name: --my-other-anchor",
"badge has expected title after setting a valid anchor name"
);
badge = await getAnchorBadgeForSelector("#not-an-anchor", inspector);
ok(
!badge,
"anchor badge is not displayed for element with anchor-name: none"
);
});
async function getAnchorBadgeForSelector(selector, inspector) {
const container = await getContainerForSelector(selector, inspector);
return container.elt.querySelector(".inspector-badge[data-anchor]");
}