| <!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> |
