OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <html> | |
3 <head> | |
4 <script src="resources/shadow-dom.js"></script> | |
5 <script src="../../../resources/js-test.js"></script> | |
6 <style> | |
7 #host::part(x-part) { | |
8 color: green; | |
9 } | |
10 </style> | |
11 </head> | |
12 <body> | |
13 <div id='sandbox'></div> | |
14 <pre id='console'></pre> | |
15 <script> | |
16 description('Test for crbug.com/273138. ::part declared in document (or parent t
reescope) can override styles with lower specificity declared in a shadow tree.'
); | |
17 | |
18 var sandbox = document.getElementById('sandbox'); | |
19 | |
20 sandbox.appendChild( | |
21 createDOM('div', {'id': 'host'}, | |
22 createShadowRoot( | |
23 createDOM('style', {}, | |
24 document.createTextNode('div { color: red; }')), | |
25 createDOM('div', {'id': 'target', 'part': 'x-part'}, | |
26 document.createTextNode('Hello'))))); | |
27 | |
28 shouldBe('window.getComputedStyle(getNodeInTreeOfTrees("host/target")).color', '
"rgb(0, 128, 0)"'); | |
29 sandbox.innerHTML = ''; | |
30 | |
31 sandbox.appendChild( | |
32 createDOM('div', {'id': 'host'}, | |
33 createShadowRoot( | |
34 createDOM('style', {}, | |
35 document.createTextNode('#target.targetClass { color: red; }')), | |
36 createDOM('div', {'id': 'target', 'part': 'x-part', 'class': 'target
Class'}, | |
37 document.createTextNode('Hello'))))); | |
38 | |
39 shouldBe('window.getComputedStyle(getNodeInTreeOfTrees("host/target")).color', '
"rgb(0, 128, 0)"'); | |
40 sandbox.innerHTML = ''; | |
41 | |
42 sandbox.appendChild( | |
43 createDOM('div', {'id': 'host1'}, | |
44 createShadowRoot( | |
45 createDOM('div', {'id': 'host'}, | |
46 createShadowRoot({'applyAuthorStyles': 'true'}, | |
47 createDOM('style', {}, | |
48 document.createTextNode('div { color: red; }')), | |
49 createDOM('div', {'id': 'target', 'part': 'x-part'}, | |
50 document.createTextNode('Hello'))))))); | |
51 | |
52 shouldBe('window.getComputedStyle(getNodeInTreeOfTrees("host1/host/target")).col
or', '"rgb(0, 128, 0)"'); | |
53 sandbox.innerHTML = ''; | |
54 | |
55 sandbox.appendChild( | |
56 createDOM('div', {'id': 'host1'}, | |
57 createShadowRoot( | |
58 createDOM('style', {}, | |
59 document.createTextNode('#host::part(x-part) { color: blue; }'))
, | |
60 createDOM('div', {'id': 'host'}, | |
61 createShadowRoot( | |
62 createDOM('style', {}, | |
63 document.createTextNode('div { color: red; }')), | |
64 createDOM('div', {'id': 'target', 'part': 'x-part'}, | |
65 document.createTextNode('Hello'))))))); | |
66 | |
67 shouldBe('window.getComputedStyle(getNodeInTreeOfTrees("host1/host/target")).col
or', '"rgb(0, 0, 255)"'); | |
68 sandbox.innerHTML = ''; | |
69 | |
70 sandbox.appendChild( | |
71 createDOM('div', {'id': 'host1'}, | |
72 createShadowRoot( | |
73 createDOM('style', {}, | |
74 document.createTextNode('div::part(x-part) { color: blue; }')), | |
75 createDOM('div', {'id': 'host'}, | |
76 createShadowRoot({'applyAuthorStyles': 'true'}, | |
77 createDOM('style', {}, | |
78 document.createTextNode('div { color: red; }')), | |
79 createDOM('div', {'id': 'target', 'part': 'x-part'}, | |
80 document.createTextNode('Hello'))))))); | |
81 | |
82 shouldBe('window.getComputedStyle(getNodeInTreeOfTrees("host1/host/target")).col
or', '"rgb(0, 128, 0)"'); | |
83 sandbox.innerHTML = ''; | |
84 | |
85 sandbox.appendChild( | |
86 createDOM('div', {'id': 'host1'}, | |
87 createShadowRoot( | |
88 createDOM('style', {}, | |
89 document.createTextNode('#host::part(x-part) { color: blue; }'))
, | |
90 createDOM('div', {'id': 'host'}, | |
91 createShadowRoot({'applyAuthorStyles': 'true'}, | |
92 createDOM('style', {}, | |
93 document.createTextNode('div { color: red; }')), | |
94 createDOM('div', {'id': 'target', 'part': 'x-part'}, | |
95 document.createTextNode('Hello'))))))); | |
96 | |
97 shouldBe('window.getComputedStyle(getNodeInTreeOfTrees("host1/host/target")).col
or', '"rgb(0, 0, 255)"'); | |
98 sandbox.innerHTML = ''; | |
99 | |
100 </script> | |
101 </body> | |
102 </html> | |
OLD | NEW |