| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src='../../../resources/testharness.js'></script> |
| 3 <script src='../../../resources/testharnessreport.js'></script> |
| 4 <style id="style1"> |
| 5 ::slotted { display: block; } /* invalid - no parameter */ |
| 6 ::slotted() { display: block; } /* invalid - empty parameter */ |
| 7 ::slotted(*) { display: block; } |
| 8 *::slotted(*) { display: block; } |
| 9 ::slotted(div) { display: block; } /* expects universal selector (*) on the left
in cssText */ |
| 10 ::slotted( div) { display: block; } /* allow a space on left */ |
| 11 ::slotted(div ) { display: block; } /* allow a space on right */ |
| 12 ::slotted(div::before) { display: block; } /* having a pseudo element in () is i
nvalid */ |
| 13 |
| 14 .foo::slotted(div) { color: blue; } |
| 15 #id::slotted(*) { color: blue; } |
| 16 [attr=foo]::slotted(*) { color: blue; } |
| 17 .foo .bar::slotted(div) { color: blue; } |
| 18 .foo::before .bar::slotted(div) { color: blue; } /* invalid, only one pseudo ele
ment is allowed at the rightmost compound */ |
| 19 .foo::slotted(div) .bar { color: blue; } /* invalid, same as above */ |
| 20 ::slotted(div, div) { color: blue; } /* invalid - selector list */ |
| 21 ::slotted(div div) { color: blue; } /* invalid - complex selector (combinator is
used) */ |
| 22 |
| 23 slot::slotted(.green) { color: green; } |
| 24 slot::slotted(#green) { color: green; } |
| 25 slot::slotted([green=green]) { color: green; } |
| 26 slot::slotted(div.green) { color: green; } |
| 27 |
| 28 div ::slotted(div) { color: red; } |
| 29 div + slot::slotted(div) { color: red; } |
| 30 |
| 31 span::slotted(*) { color: red; } /* never matches, but valid as a selector */ |
| 32 ::slotted(span)::slotted(span) { color: red; } /* invalid */ |
| 33 ::slotted(::slotted(div)) { color: red; } /* invalid */ |
| 34 </style> |
| 35 <script> |
| 36 'use strict'; |
| 37 test(() => { |
| 38 var style1 = document.getElementById('style1'); |
| 39 var cssRules = style1.sheet.cssRules; |
| 40 |
| 41 var expectedCSSTexts = [ |
| 42 "::slotted(*) { display: block; }", |
| 43 "*::slotted(*) { display: block; }", |
| 44 "::slotted(div) { display: block; }", |
| 45 "::slotted(div) { display: block; }", |
| 46 "::slotted(div) { display: block; }", |
| 47 ".foo::slotted(div) { color: blue; }", |
| 48 "#id::slotted(*) { color: blue; }", |
| 49 "[attr=\"foo\"]::slotted(*) { color: blue; }", |
| 50 ".foo .bar::slotted(div) { color: blue; }", |
| 51 "slot::slotted(.green) { color: green; }", |
| 52 "slot::slotted(#green) { color: green; }", |
| 53 "slot::slotted([green=\"green\"]) { color: green; }", |
| 54 "slot::slotted(div.green) { color: green; }", |
| 55 "div ::slotted(div) { color: red; }", |
| 56 "div + slot::slotted(div) { color: red; }", |
| 57 "span::slotted(*) { color: red; }" |
| 58 ]; |
| 59 |
| 60 for (var i = 0; i < expectedCSSTexts.length; ++i) |
| 61 assert_equals(cssRules.item(i).cssText, expectedCSSTexts[i]); |
| 62 assert_equals(cssRules.length, expectedCSSTexts.length); |
| 63 |
| 64 }, "Test for cssText of '::slotted' rule."); |
| 65 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1565263003:
Implement CSS parser part for ::slotted pseudo element (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master