Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(311)

Side by Side Diff: LayoutTests/fast/dom/shadow/closed-mode-deep-combinator-and-shadow-pseudo.html

Issue 1270313002: Handle closed mode shadow for /deep/ and ::shadow selectors (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: add a layout test for 2 /deep/s Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
1 <!doctype html>
2 <script src="../../../resources/js-test.js"></script>
3 <script src="resources/shadow-dom.js"></script>
4 <style id="style1">
5 </style>
6 <body></body>
7 <script>
8 function prepareShadowTree(hostId, mode1, mode2, div1, div2, div3) {
9 var parent = document.body;
10 parent.appendChild(
11 createDOM('div', {'id': hostId},
12 createShadowRoot({'mode': mode1},
13 createDOM('div', {'id': div1},
14 createShadowRoot({'mode': mode2},
15 createDOM('div', {'id': div2})),
16 createDOM('div', {'id': div3})))));
17 }
18
19 prepareShadowTree('host_open_open', 'open', 'open', 'div1', 'div2', 'div1b');
20 prepareShadowTree('host_open_closed', 'open', 'closed', 'div3', 'div4', 'div3b') ;
21 prepareShadowTree('host_closed_open', 'closed', 'open', 'div5', 'div6', 'div5b') ;
22 prepareShadowTree('host_closed_closed', 'closed', 'closed', 'div7', 'div8', 'div 7b');
23
24 debug('(1/6) /deep/ style rule on top-level document.');
25 var styleElement = document.getElementById('style1');
26 styleElement.textContent = 'div /deep/ div { background-color: blue; }';
27
28 backgroundColorShouldBe('host_open_open', 'rgba(0, 0, 0, 0)');
29 backgroundColorShouldBe('host_open_open/div1', 'rgb(0, 0, 255)');
30 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 0, 255)');
31 backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 0, 255)');
32 backgroundColorShouldBe('host_open_closed', 'rgba(0, 0, 0, 0)');
33 backgroundColorShouldBe('host_open_closed/div3', 'rgb(0, 0, 255)');
34 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
35 backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 0, 255)');
36 backgroundColorShouldBe('host_closed_open', 'rgba(0, 0, 0, 0)');
37 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
38 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)');
39 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)');
40 backgroundColorShouldBe('host_closed_closed', 'rgba(0, 0, 0, 0)');
41 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
42 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
43 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)');
44
45 debug('(2/6) ::shadow style rule on top-level document.');
46 styleElement.innerHTML = 'div::shadow div { background-color: green; }';
47
48 backgroundColorShouldBe('host_open_open', 'rgba(0, 0, 0, 0)');
49 backgroundColorShouldBe('host_open_open/div1', 'rgb(0, 128, 0)');
50 backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)');
51 backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 128, 0)');
52 backgroundColorShouldBe('host_open_closed', 'rgba(0, 0, 0, 0)');
53 backgroundColorShouldBe('host_open_closed/div3', 'rgb(0, 128, 0)');
54 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
55 backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 128, 0)');
56 backgroundColorShouldBe('host_closed_open', 'rgba(0, 0, 0, 0)');
57 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
58 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)');
59 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)');
60 backgroundColorShouldBe('host_closed_closed', 'rgba(0, 0, 0, 0)');
61 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
62 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
63 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)');
64
65 debug('(3/6) /deep/ style on shadow tree.');
66 styleElement.innerHTML = '';
67 var div1 = getNodeInTreeOfTrees('host_open_open/div1');
68 div1.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
69 backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)');
70 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 0, 255)');
71 backgroundColorShouldBe('host_open_open/div1b', 'rgb(0, 0, 255)');
72 div1.removeChild(div1.firstElementChild);
73
74 var div3 = getNodeInTreeOfTrees('host_open_closed/div3');
75 div3.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
76 backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)');
77 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
78 backgroundColorShouldBe('host_open_closed/div3b', 'rgb(0, 0, 255)');
79 div3.removeChild(div3.firstElementChild);
80
81 var div5 = getNodeInTreeOfTrees('host_closed_open/div5');
82 div5.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
83 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
84 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgb(0, 0, 255)');
85 backgroundColorShouldBe('host_closed_open/div5b', 'rgb(0, 0, 255)');
86 div5.removeChild(div5.firstElementChild);
87
88 var div7 = getNodeInTreeOfTrees('host_closed_closed/div7');
89 div7.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
90 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
91 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
92 backgroundColorShouldBe('host_closed_closed/div7b', 'rgb(0, 0, 255)');
93 div7.removeChild(div7.firstElementChild);
94
95 debug('(4/6) ::shadow style on shadow tree.');
96 div1.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>');
97 backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)');
98 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 128, 0)');
99 backgroundColorShouldBe('host_open_open/div1b', 'rgba(0, 0, 0, 0)');
100 div1.removeChild(div1.firstElementChild);
101
102 div3.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>');
103 backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)');
104 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
105 backgroundColorShouldBe('host_open_closed/div3b', 'rgba(0, 0, 0, 0)');
106 div3.removeChild(div3.firstElementChild);
107
108 div5.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>');
109 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
110 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgb(0, 128, 0)');
111 backgroundColorShouldBe('host_closed_open/div5b', 'rgba(0, 0, 0, 0)');
112 div5.removeChild(div5.firstElementChild);
113
114 div7.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>');
115 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
116 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
117 backgroundColorShouldBe('host_closed_closed/div7b', 'rgba(0, 0, 0, 0)');
118 div7.removeChild(div7.firstElementChild);
119
120 debug('(5/6) /deep/ selector in querySelectorAll()');
121 shouldBe('host_open_open.querySelectorAll("div /deep/ div").length', '3');
hayato 2015/08/20 03:47:11 Could you assert the content of the result of quer
kochi 2015/08/20 06:04:26 Done.
122 shouldBe('host_open_closed.querySelectorAll("div /deep/ div").length', '2');
123 shouldBe('host_closed_open.querySelectorAll("div /deep/ div").length', '0');
124 shouldBe('host_closed_closed.querySelectorAll("div /deep/ div").length', '0');
125
126 shouldBe('div1.querySelectorAll("div /deep/ div").length', '2');
127 shouldBe('div3.querySelectorAll("div /deep/ div").length', '1');
128 shouldBe('div5.querySelectorAll("div /deep/ div").length', '2');
129 shouldBe('div7.querySelectorAll("div /deep/ div").length', '1');
130
131 debug('(6/6) ::shadow selector in querySelectorAll()');
132 shouldBe('host_open_open.querySelectorAll("div::shadow div").length', '2');
133 shouldBe('host_open_closed.querySelectorAll("div::shadow div").length', '2');
134 shouldBe('host_closed_open.querySelectorAll("div::shadow div").length', '0');
135 shouldBe('host_closed_closed.querySelectorAll("div::shadow div").length', '0');
136
137 shouldBe('div1.querySelectorAll("div::shadow div").length', '1');
138 shouldBe('div3.querySelectorAll("div::shadow div").length', '0');
139 shouldBe('div5.querySelectorAll("div::shadow div").length', '1');
140 shouldBe('div7.querySelectorAll("div::shadow div").length', '0');
141 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698