91 lines
3.4 KiB
HTML
91 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
|
|
<script>
|
|
function changeElementDisplayValue(id, value)
|
|
{
|
|
document.getElementById(id).style.display = value;
|
|
}
|
|
|
|
function test()
|
|
{
|
|
let suite = InspectorTest.createAsyncSuite("CSS.getMatchedStyleForNode.MarkerPseudoId");
|
|
|
|
function addTestCase({name, description, selector, domNodeStylesHandler})
|
|
{
|
|
suite.addTestCase({
|
|
name,
|
|
description,
|
|
async test() {
|
|
let documentNode = await WI.domManager.requestDocument();
|
|
let nodeId = await documentNode.querySelector(selector);
|
|
let domNode = WI.domManager.nodeForId(nodeId);
|
|
InspectorTest.assert(domNode, `Should find DOM Node for selector '${selector}'.`);
|
|
|
|
let domNodeStyles = WI.cssManager.stylesForNode(domNode);
|
|
InspectorTest.assert(domNodeStyles, `Should find CSS Styles for DOM Node.`);
|
|
await domNodeStyles.refreshIfNeeded();
|
|
|
|
await domNodeStylesHandler(domNodeStyles);
|
|
},
|
|
});
|
|
}
|
|
|
|
async function changeElementDisplayValue(id, value)
|
|
{
|
|
await InspectorTest.evaluateInPage(`changeElementDisplayValue("${id}", "${value}")`);
|
|
}
|
|
|
|
addTestCase({
|
|
name: "CSS.getMatchedStyleForNode.MarkerPseudoId.ListItem",
|
|
description: "A list item should have both the User Agent and authored `::marker` rules.",
|
|
selector: "#listItem",
|
|
async domNodeStylesHandler(styles) {
|
|
InspectorTest.expectEqual(styles.pseudoElements.get(WI.CSSManager.PseudoSelectorNames.Marker).matchedRules.length, 2, "Expected exactly 2 rules for selector `*::marker`.");
|
|
}
|
|
});
|
|
|
|
addTestCase({
|
|
name: "CSS.getMatchedStyleForNode.MarkerPseudoId.NonListItem",
|
|
description: "A non-list item should have no `::marker` rules.",
|
|
selector: "#nonListItem",
|
|
async domNodeStylesHandler(styles) {
|
|
InspectorTest.expectEqual(styles.pseudoElements.get(WI.CSSManager.PseudoSelectorNames.Marker), undefined, "Expected no rules entry for selector `*::marker`.");
|
|
}
|
|
});
|
|
|
|
addTestCase({
|
|
name: "CSS.getMatchedStyleForNode.MarkerPseudoId.NonListItemWithMarkerSpecified",
|
|
description: "A non-list item with a `base-selector::marker` specified should not show the specified rule unless it becomes a list item.",
|
|
selector: "#nonListItemWithMarkerSpecified",
|
|
async domNodeStylesHandler(styles) {
|
|
InspectorTest.expectEqual(styles.pseudoElements.get(WI.CSSManager.PseudoSelectorNames.Marker), undefined, "Expected no rules entry for selector `*::marker`.");
|
|
await changeElementDisplayValue("nonListItemWithMarkerSpecified", "list-item");
|
|
await styles.refresh();
|
|
InspectorTest.expectEqual(styles.pseudoElements.get(WI.CSSManager.PseudoSelectorNames.Marker).matchedRules.length, 3, "Expected 3 rules for selector `*::marker`.");
|
|
}
|
|
});
|
|
|
|
suite.runTestCasesAndFinish();
|
|
}
|
|
</script>
|
|
<style>
|
|
::marker {
|
|
color: red;
|
|
}
|
|
#nonListItemWithMarkerSpecified::marker {
|
|
color: green;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body onload="runTest()">
|
|
<p>Tests for the CSS.getMatchedStyleForNode command and the `::marker` CSS rule selector.</p>
|
|
<ul>
|
|
<li id="listItem"></li>
|
|
</ul>
|
|
<div id="nonListItem"></div>
|
|
<div id="nonListItemWithMarkerSpecified"></div>
|
|
</body>
|
|
</html>
|