Chromium Code Reviews Chromium Code Reviews
Issue 1565263003:
Implement CSS parser part for ::slotted pseudo element (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| 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::slotted(div) .bar::before { color: blue; } /* TODO(kochi): This should be invalid, as pseudo | |
| 18 element should only be al lowed at the last | |
| 19 compound selector */ | |
| 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; } /* TODO(kochi): This should be in valid */ | |
| 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; }", | |
|
rune
2016/01/15 11:01:16
I thought the '*' should be dropped from this one?
kochi
2016/01/19 07:25:56
This one has an explicit '*' on the left (see line
rune
2016/01/19 09:16:09
It's not expected as "*::before" is serialized as
| |
| 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::slotted(div) .bar::before { 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 "::slotted(span)::slotted(span) { color: red; }" | |
|
kochi
2016/01/19 07:25:56
This case is now invalid and removed from this exp
rune
2016/01/19 09:16:09
Acknowledged.
kochi
2016/01/19 11:09:12
Thanks to your change!
| |
| 59 ]; | |
| 60 | |
| 61 assert_equals(cssRules.length, expectedCSSTexts.length); | |
| 62 for (var i = 0; i < expectedCSSTexts.length; ++i) | |
| 63 assert_equals(cssRules.item(i).cssText, expectedCSSTexts[i]); | |
| 64 | |
| 65 }, "Test for cssText of '::slotted' rule."); | |
| 66 </script> | |
| OLD | NEW |
