slotted-pseudo-element-css-text.html

<!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>
chromium/third_party/blink/web_tests/shadow-dom/slotted-pseudo-element-css-text.html
