Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Tests that pseudoelements are displayed correctly in the rule view.
const TEST_URI = URL_ROOT + "doc_pseudoelement.html";
add_task(async function () {
await addTab(TEST_URI);
const { inspector, view } = await openComputedView();
await testTopLeft(inspector, view);
});
async function testTopLeft(inspector, view) {
const node = await getNodeFront("#topleft", inspector.markup);
await selectNode(node, inspector);
const float = getComputedViewPropertyValue(view, "float");
is(float, "left", "The computed view shows the correct float");
const children = await inspector.markup.walker.children(node);
is(children.nodes.length, 3, "Element has correct number of children");
const beforeElement = children.nodes[0];
await selectNode(beforeElement, inspector);
info("check `top` property on #topleft::before");
await checkMatchedSelectorForProperty(view, {
property: "top",
expectedComputedValue: "0px",
expectedMatchedSelectors: [
{
selector: ".topleft::before",
value: "0px",
},
{
selector: ":where(.topleft)::before",
value: "10px",
},
],
});
info("check `left` property on #topleft::before");
await checkMatchedSelectorForProperty(view, {
property: "left",
expectedComputedValue: "0px",
expectedMatchedSelectors: [
{
selector: ".topleft::before",
value: "0px",
},
{
selector: ":where(.topleft)::before",
value: "20px",
},
],
});
info("check `color` property on #topleft::before");
await checkMatchedSelectorForProperty(view, {
property: "color",
expectedComputedValue: "rgb(0, 255, 0)",
expectedMatchedSelectors: [
{
selector: ":where(.topleft)::before",
value: "lime",
},
{
selector: ".topleft",
value: "blue",
match: false,
},
{
selector: "body",
value: "rgb(51, 51, 51)",
match: false,
},
{
selector: ":root",
value: "canvastext",
match: false,
},
],
});
const afterElement = children.nodes.at(-1);
await selectNode(afterElement, inspector);
info("check `top` property on #topleft::after");
await checkMatchedSelectorForProperty(view, {
property: "top",
expectedComputedValue: "96px",
expectedMatchedSelectors: [
{
selector: ".box::after",
value: "50%",
},
],
});
info("check `left` property on #topleft::after");
await checkMatchedSelectorForProperty(view, {
property: "left",
expectedComputedValue: "96px",
expectedMatchedSelectors: [
{
selector: ".box::after",
value: "50%",
},
],
});
}