blob: e510dcdf0ca7b45610737074801ff4bc205caf72 [file] [log] [blame]
<!DOCTYPE html>
<script src='../resources/testharness.js'></script>
<script src='../resources/testharnessreport.js'></script>
<style id="style1">
::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 */
</style>
<script>
'use strict';
test(() => {
var style1 = document.getElementById('style1');
var cssRules = style1.sheet.cssRules;
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; }"
];
for (var i = 0; i < expectedCSSTexts.length; ++i)
assert_equals(cssRules.item(i).cssText, expectedCSSTexts[i]);
assert_equals(cssRules.length, expectedCSSTexts.length);
}, "Test for cssText of '::slotted' rule.");
</script>