77 lines
2.8 KiB
HTML
77 lines
2.8 KiB
HTML
<!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>
|