Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test for attr() in rule view.
const TEST_URI = `data:text/html,<meta charset=utf8>
<style>
div::before {
content: attr(data-before);
}
div::after {
content: attr(data-after, "✕");
display: list-item;
}
div::after::marker {
content: attr(data-marker, "-");
}
</style>
<div id=with-attr data-before="→" data-after="←" data-marker="❥"></div>
<div id=without-attr></div>`;
add_task(async function () {
await addTab(TEST_URI);
const { inspector, view } = await openRuleView();
const withAttrNodeFront = await getNodeFront("#with-attr", inspector);
await selectNode(withAttrNodeFront, inspector);
is(
getRuleViewProperty(view, "div::before", "content").valueSpan.innerHTML,
`attr(<span xmlns="${NS}">data-before</span>)`,
`"data-before" doesn't have unmatched style on #with-attr node`
);
is(
getRuleViewProperty(view, "div::after", "content").valueSpan.innerHTML,
`attr(<span xmlns="${NS}">data-after</span>, <span xmlns="${NS}" class="inspector-unmatched">"✕"</span>)`,
`"data-after" fallback has unmatched style on #with-attr node`
);
// Select #with-attr::after element
const withAttrChildren =
await inspector.markup.walker.children(withAttrNodeFront);
const withAttrAfterNode = withAttrChildren.nodes.at(-1);
await selectNode(withAttrAfterNode, inspector);
is(
getRuleViewProperty(view, "div::after", "content").valueSpan.innerHTML,
`attr(<span xmlns="${NS}">data-after</span>, <span xmlns="${NS}" class="inspector-unmatched">"✕"</span>)`,
`"data-after" fallback has unmatched style on #with-attr::after node`
);
// Select ::after::marker element
const withAttrAfterChildren =
await inspector.markup.walker.children(withAttrAfterNode);
const withAttrAfterMarkerNode = withAttrAfterChildren.nodes[0];
await selectNode(withAttrAfterMarkerNode, inspector);
// so we're showing the right thing here
is(
getRuleViewProperty(view, "div::after::marker", "content").valueSpan
.innerHTML,
`attr(<span xmlns="${NS}">data-marker</span>, <span xmlns="${NS}" class="inspector-unmatched">"-"</span>)`,
`"data-marker" fallback has unmatched style on #with-attr::after::marker node`
);
const withoutAttrNodeFront = await getNodeFront("#without-attr", inspector);
await selectNode(withoutAttrNodeFront, inspector);
is(
getRuleViewProperty(view, "div::before", "content").valueSpan.innerHTML,
`attr(<span xmlns="${NS}" class="inspector-unmatched">data-before</span>)`,
`"data-before" has unmatched style on #without-attr node`
);
is(
getRuleViewProperty(view, "div::after", "content").valueSpan.innerHTML,
`attr(<span xmlns="${NS}" class="inspector-unmatched">data-after</span>, <span xmlns="${NS}">"✕"</span>)`,
`"data-after" has unmatched style on #without-attr node`
);
// Select #with-attr::after element
const withoutAttrChildren =
await inspector.markup.walker.children(withoutAttrNodeFront);
const withoutAttrAfterNode = withoutAttrChildren.nodes.at(-1);
await selectNode(withoutAttrAfterNode, inspector);
is(
getRuleViewProperty(view, "div::after", "content").valueSpan.innerHTML,
`attr(<span xmlns="${NS}" class="inspector-unmatched">data-after</span>, <span xmlns="${NS}">"✕"</span>)`,
`"data-after" has unmatched style on #without-attr::after node`
);
// Select ::after::marker element
const withoutAttrAfterChildren =
await inspector.markup.walker.children(withoutAttrAfterNode);
const withoutAttrAfterMarkerNode = withoutAttrAfterChildren.nodes[0];
await selectNode(withoutAttrAfterMarkerNode, inspector);
is(
getRuleViewProperty(view, "div::after::marker", "content").valueSpan
.innerHTML,
`attr(<span xmlns="${NS}" class="inspector-unmatched">data-marker</span>, <span xmlns="${NS}">"-"</span>)`,
`"data-marker" has unmatched style on #without-attr::after::marker node`
);
});