OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <script src="resources/shadow-dom.js"></script> | |
3 <script src="../../../resources/js-test.js"></script> | |
4 <body> | |
5 <div id='sandbox'></div> | |
6 </body> | |
7 <script> | |
8 function colorOf(node) | |
9 { | |
10 return document.defaultView.getComputedStyle(node, null).getPropertyValue('c
olor'); | |
11 } | |
12 | |
13 function colorShouldBe(selector, color) | |
14 { | |
15 var text = 'colorOf(getNodeInComposedTree("' + selector + '"))'; | |
16 shouldBeEqualToString(text, color); | |
17 } | |
18 | |
19 function colorShouldNotBe(selector, color) | |
20 { | |
21 var text = 'colorOf(getNodeInComposedTree("' + selector + '"))'; | |
22 var unevaledString = '"' + color.replace(/\\/g, "\\\\").replace(/"/g, "\"")
+ '"'; | |
23 shouldNotBe(text, unevaledString); | |
24 } | |
25 | |
26 function cleanUp() | |
27 { | |
28 document.getElementById('sandbox').innerHTML = ''; | |
29 } | |
30 | |
31 description('Test for ::shadow pseudo element, http://crbug.com/367266.'); | |
32 | |
33 sandbox.appendChild( | |
34 createDOM('div', {}, | |
35 createDOM('style', {'id': 'style-with-shadow'}, | |
36 document.createTextNode('div::shadow { color: red; }')), | |
37 createDOM('div', {'id': 'host'}, | |
38 createShadowRoot( | |
39 createDOM('div', {'id': 'target'}, | |
40 document.createTextNode('not red color.')))))); | |
41 | |
42 colorShouldNotBe('host/target', 'rgb(255, 0, 0)'); | |
43 | |
44 var styleWithShadow = document.getElementById('style-with-shadow'); | |
45 styleWithShadow.innerHTML = ':not(div::shadow) { color: red; }'; | |
46 | |
47 colorShouldNotBe('host/target', 'rgb(255, 0, 0)'); | |
48 | |
49 styleWithShadow.innerHTML = ':-webkit-any(div::shadow, div::shadow div) { color:
red; }'; | |
50 | |
51 colorShouldNotBe('host/target', 'rgb(255, 0, 0)'); | |
52 | |
53 cleanUp(); | |
54 | |
55 sandbox.appendChild( | |
56 createDOM('div', {}, | |
57 createDOM('style', {}, | |
58 document.createTextNode('div::shadow + div { color: red; }')), | |
59 createDOM('div', {'id': 'host'}, | |
60 createShadowRoot( | |
61 createDOM('div', {'id': 'first-direct-child'}, | |
62 document.createTextNode('not red color.')), | |
63 createDOM('div', {'id': 'second-direct-child'}, | |
64 document.createTextNode('not red color.')))), | |
65 createDOM('div', {'id': 'host-sibling'}, | |
66 document.createTextNode('not red color.')))); | |
67 | |
68 colorShouldNotBe('host/first-direct-child', 'rgb(255, 0, 0)'); | |
69 colorShouldNotBe('host/second-direct-child', 'rgb(255, 0, 0)'); | |
70 colorShouldNotBe('host-sibling', 'rgb(255, 0, 0)'); | |
71 | |
72 cleanUp(); | |
73 | |
74 sandbox.appendChild( | |
75 createDOM('div', {}, | |
76 createDOM('style', {}, | |
77 document.createTextNode('div::shadow ~ div { color: red; }')), | |
78 createDOM('div', {'id': 'host'}, | |
79 createShadowRoot( | |
80 createDOM('div', {'id': 'first-direct-child'}, | |
81 document.createTextNode('not red color.')), | |
82 createDOM('div', {'id': 'second-direct-child'}, | |
83 document.createTextNode('not red color.')))), | |
84 createDOM('div', {'id': 'host-sibling'}, | |
85 document.createTextNode('not red color.')))); | |
86 | |
87 colorShouldNotBe('host/first-direct-child', 'rgb(255, 0, 0)'); | |
88 colorShouldNotBe('host/second-direct-child', 'rgb(255, 0, 0)'); | |
89 colorShouldNotBe('host-sibling', 'rgb(255, 0, 0)'); | |
90 | |
91 cleanUp(); | |
92 | |
93 sandbox.appendChild( | |
94 createDOM('div', {}, | |
95 createDOM('style', {}, | |
96 document.createTextNode('div::shadow > div { color: green; }')), | |
97 createDOM('div', {'id': 'host'}, | |
98 createShadowRoot( | |
99 createDOM('div', {'id': 'direct-child'}, | |
100 document.createTextNode('green color.')), | |
101 createDOM('p', {}, | |
102 createDOM('div', {'id': 'not-direct-child'}, | |
103 document.createTextNode('not green color.'))))), | |
104 createDOM('div', {'id': 'host-child'}, | |
105 document.createTextNode('not green color.')))); | |
106 | |
107 colorShouldBe('host/direct-child', 'rgb(0, 128, 0)'); | |
108 colorShouldNotBe('host/not-direct-child', 'rgb(0, 128, 0)'); | |
109 colorShouldNotBe('host-child', 'rgb(0, 128, 0)'); | |
110 | |
111 cleanUp(); | |
112 | |
113 </script> | |
114 | |
115 | |
OLD | NEW |