| <!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> |
