<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test()
{
    let suite = InspectorTest.createAsyncSuite("CSS.getMatchedStylesForNode.UserAgentShadowRoot");

    function nodeForId(id) {
        return WI.domManager.nodeForId(id)
    }

    function addTestCase({name, description, resolveTargetDOMNode, expectedSelectors})
    {
        suite.addTestCase({
            name,
            description,
            async test() {
                let documentNode = await WI.domManager.requestDocument();
                let domNode = await resolveTargetDOMNode(documentNode);
                InspectorTest.assert(domNode, `Should find DOM Node.`);

                let domNodeStyles = WI.cssManager.stylesForNode(domNode);
                await domNodeStyles.refreshIfNeeded();

                let matchedSelectorTexts = [];
                for (let rule of domNodeStyles.matchedRules) {
                    let selectorText = rule.selectorText
                    matchedSelectorTexts.push(selectorText)

                    // A sign of bad parsing from the backend is a disagreement between the individual selectors and the combined selector text.
                    for (let selector of rule.selectors)
                        InspectorTest.assert(selectorText.includes(selector.text), `Should find selector '${selector.text}' in whole selector text '${selectorText}'.`);
                }

                let matchedSelectors = domNodeStyles.matchedRules.map((rule) => rule.selectorText);
                for (let expectedSelector of expectedSelectors)
                    InspectorTest.expectThat(matchedSelectorTexts.includes(expectedSelector), `Should have matched rule for selector '${expectedSelector}'`);
            },
        });
    }

    addTestCase({
        name: "CSS.getMatchedStylesForNode.UserAgentShadowRoot.StyleFollowingNormallyInvalidSelector",
        description: "Ensure that rules declared after a normaly invalid selector (that is exempted due to being in a UA Shadow Root) are correctly resolved.",
        async resolveTargetDOMNode(documentNode) {
            let videoElement = nodeForId(await documentNode.querySelector("#target"));
            let shadowRoot = videoElement.shadowRoots()[0];
            return nodeForId(await shadowRoot.querySelector(".time-label"));
        },
        expectedSelectors: [
            ".media-controls .time-label, .media-controls .status-label",
            ".time-label",
            ".media-controls-container, .media-controls-container *",
            ":host(audio), :host(video.media-document.audio), *",
            "*",
        ],
    });

    suite.runTestCasesAndFinish();
}
</script>
<style>
</style>
</head>
<body onload="runTest()">
    <p>Tests for the CSS.getMatchedStylesForNode command styles inside user-agent shadow roots.</p>
    <video id="target" loop muted autoplay controls>
        <source src="../../http/tests/resources/test.mp4" />
    </video>
</body>
</html>