* SUMMARY Pseudo element matchedCSSRules do not include matching selector info. The frontend then displays all selectors as matching instead of showing exactly which selector matched. * STEPS TO REPRODUCE 1. Inspect <audio> on data:text/html,<audio%20controls> 2. Expand Shadow DOM and select ::webkit-media-text-track-container element 3. Show Styles Sidebar => "video::-webkit-media-text-track-container, audio::-webkit-media-text-track-container" selectors are both highlighted. => expected only audio::-webkit-media-text-track-container to be highlighted, since this is an <audio> * NOTES The result of CSSAgent.getMatchedStylesForNode includes the Rule and Selectors, but an empty matchingSelectors list. { "result": { "matchedCSSRules": [ ... { "rule": { "selectorList": { "selectors": [{ "text": "video::-webkit-media-controls-panel", "specificity": [0, 1, 1] }, { "text": "audio::-webkit-media-controls-panel", "specificity": [0, 1, 1] }], "text": "video::-webkit-media-controls-panel, audio::-webkit-media-controls-panel" }, }, "matchingSelectors": [] }] ... } }
<rdar://problem/18885821>
Ben helped point out the issue. InspectorCSSAgent::buildArrayForMatchedRuleList was using the JavaScript Element::matches API which won't work with pseudo elements. He suggested instead that we use the SelectorChecker machinery. That works great!
Created attachment 241070 [details] [PATCH] Proposed Fix The test here is pretty crappy. I'll see if I can come up with a better test.
Comment on attachment 241070 [details] [PATCH] Proposed Fix View in context: https://bugs.webkit.org/attachment.cgi?id=241070&action=review > LayoutTests/ChangeLog:9 > + * inspector/css/psuedo-element-matches-expected.txt: Added. > + * inspector/css/psuedo-element-matches.html: Added. Typo: pseudo. There are other interesting problem with the old code: -Regular pseudo element matching, a::before, b::after, etc can never match. -:visited can never match.
<http://trac.webkit.org/changeset/175758>