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| Index: third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-css-text.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-css-text.html b/third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-css-text.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..53cc0aebf9b7092e34c22c7f908c1f9a3c89838a |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/dom/shadow/slotted-pseudo-element-css-text.html |
| @@ -0,0 +1,66 @@ |
| +<!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::slotted(div) .bar::before { color: blue; } /* TODO(kochi): This should be invalid, as pseudo |
| + element should only be allowed at the last |
| + compound selector */ |
| +::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; } /* TODO(kochi): This should be 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; }", |
|
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
|
| + "::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::slotted(div) .bar::before { 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; }", |
| + "::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!
|
| + ]; |
| + |
| + assert_equals(cssRules.length, expectedCSSTexts.length); |
| + for (var i = 0; i < expectedCSSTexts.length; ++i) |
| + assert_equals(cssRules.item(i).cssText, expectedCSSTexts[i]); |
| + |
| +}, "Test for cssText of '::slotted' rule."); |
| +</script> |
