<!DOCTYPE html>
<script src='../../resources/testharness.js'></script>
<script src='../../resources/testharnessreport.js'></script>
<script>
var rules = [
"::slotted { display: block; }", /* invalid - no parameter */
"::slotted() { display: block; }", /* invalid - empty parameter */
"::slotted(*) { display: block; }",
"*::slotted(*) { display: block; }",
"::slotted(div) { display: block; }", /* expects universal selector (*) on the left in cssText */
"::slotted( div) { display: block; }", /* allow a space on left */
"::slotted(div ) { display: block; }", /* allow a space on right */
"::slotted(div::before) { display: block; }", /* having a pseudo element in () is invalid */
".foo::slotted(div) { color: blue; }",
"#id::slotted(*) { color: blue; }",
"[attr=foo]::slotted(*) { color: blue; }",
".foo .bar::slotted(div) { color: blue; }",
".foo::before .bar::slotted(div) { color: blue; }", /* invalid, only one pseudo element is allowed at the rightmost compound */
".foo::slotted(div) .bar { color: blue; }", /* invalid, same as above */
"::slotted(div, div) { color: blue; }", /* invalid - selector list */
"::slotted(div div) { color: blue; }", /* invalid - complex selector (combinator is used) */
"slot::slotted(.green) { color: green; }",
"slot::slotted(#green) { color: green; }",
"slot::slotted([green=green]) { color: green; }",
"slot::slotted(div.green) { color: green; }",
"div ::slotted(div) { color: red; }",
"div + slot::slotted(div) { color: red; }",
"span::slotted(*) { color: red; }", /* never matches, but valid as a selector */
"::slotted(span)::slotted(span) { color: red; }", /* invalid */
"::slotted(::slotted(div)) { color: red; }" /* invalid */
];

var expectedCSSTexts = [
"", 
"",
"::slotted(*) { display: block; }",
"*::slotted(*) { display: block; }",
"::slotted(div) { display: block; }",
"::slotted(div) { display: block; }", 
"::slotted(div) { display: block; }",
"",
".foo::slotted(div) { color: blue; }",
"#id::slotted(*) { color: blue; }",
"[attr=\"foo\"]::slotted(*) { color: blue; }",
".foo .bar::slotted(div) { color: blue; }",
"",
"",
"",
"",
"slot::slotted(.green) { color: green; }",
"slot::slotted(#green) { color: green; }",
"slot::slotted([green=\"green\"]) { color: green; }",
"slot::slotted(div.green) { color: green; }",
"div ::slotted(div) { color: red; }",
"div + slot::slotted(div) { color: red; }",
"span::slotted(*) { color: red; }",
"",
"",
];

function ruleCSSText(rule)
{
    var style = document.createElement("style");
    style.innerText = rule;
    document.head.appendChild(style);
    if (style.sheet.cssRules.length == 0)
        return "";
    return style.sheet.cssRules.item(0).cssText;
}

for (var i = 0; i < rules.length; ++i) {
    test(() => {
        assert_equals(ruleCSSText(rules[i]), expectedCSSTexts[i]);
    }, rules[i]);
}
</script>