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 .foo::slotted(div) .bar::before { display: block; } | |
rune
2016/01/09 01:15:36
This should be invalid, I think. ::slotted should
kochi
2016/01/13 07:49:31
Done.
| |
6 ::slotted { display: block; } /* invalid - no parameter */ | |
7 ::slotted() { display: block; } /* invalid - empty parameter */ | |
8 slot::slotted(div, div) { display: block; } /* invalid - selector list */ | |
9 slot::slotted(div div) { display: block; } /* invalid - complex selector (combin ator) */ | |
10 slot::slotted(.green) { color: green; } | |
11 slot::slotted(#green) { color: green; } | |
12 slot::slotted([green=green]) { color: green; } | |
13 slot::slotted(div.green) { color: green; } | |
14 *::slotted(*) { color: blue; } | |
15 .foo::slotted(*) { color: blue; } | |
16 #id::slotted(*) { color: blue; } | |
17 [attr=foo]::slotted(*) { color: blue; } | |
18 span::slotted(*) { color: blue; } /* never matches, but valid */ | |
rune
2016/01/09 01:15:36
could you add a case or two where you have a compo
kochi
2016/01/13 07:49:31
Done.
| |
19 </style> | |
20 <script> | |
21 'use strict'; | |
22 test(() => { | |
23 assert_equals(document.getElementById('style1').sheet.cssRules.item(0).cssText , | |
24 ".foo::slotted(div) .bar::before { display: block; }"); | |
25 assert_equals(document.getElementById('style1').sheet.cssRules.item(1).cssText , | |
26 "slot::slotted(.green) { color: green; }"); | |
27 assert_equals(document.getElementById('style1').sheet.cssRules.item(2).cssText , | |
28 "slot::slotted(#green) { color: green; }"); | |
29 assert_equals(document.getElementById('style1').sheet.cssRules.item(3).cssText , | |
30 "slot::slotted([green=\"green\"]) { color: green; }"); | |
31 assert_equals(document.getElementById('style1').sheet.cssRules.item(4).cssText , | |
32 "slot::slotted(div.green) { color: green; }"); | |
33 assert_equals(document.getElementById('style1').sheet.cssRules.item(5).cssText , | |
34 "*::slotted(*) { color: blue; }"); | |
rune
2016/01/09 01:15:36
Why does the serialization contain the (first) '*'
kochi
2016/01/13 07:49:31
Because we add an implicit universal type selector
rune
2016/01/13 10:02:30
Implicit means we shouldn't need to serialize it,
| |
35 assert_equals(document.getElementById('style1').sheet.cssRules.item(6).cssText , | |
36 ".foo::slotted(*) { color: blue; }"); | |
37 assert_equals(document.getElementById('style1').sheet.cssRules.item(7).cssText , | |
38 "#id::slotted(*) { color: blue; }"); | |
39 assert_equals(document.getElementById('style1').sheet.cssRules.item(8).cssText , | |
40 "[attr=\"foo\"]::slotted(*) { color: blue; }"); | |
41 assert_equals(document.getElementById('style1').sheet.cssRules.item(9).cssText , | |
42 "span::slotted(*) { color: blue; }"); | |
43 }, "Test for cssText of '::slotted' rule."); | |
44 </script> | |
OLD | NEW |