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