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

Issues Search
    My Issues | Starred     Open | Closed | All

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: . 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
« no previous file with comments | « no previous file | LayoutTests/fast/dom/shadow/closed-mode-deep-combinator-and-shadow-pseudo-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!doctype html>
2 <script src="../../../resources/js-test.js"></script>
3 <script src="resources/shadow-dom.js"></script>
4 <script>
5 function transformShadowRoot(root) {
6 while (true) {
7 var shadow = root.querySelector('shadow-root');
8 if (!shadow)
9 break;
10 var host = shadow.parentElement;
11 var mode = shadow.getAttribute('mode') || 'open';
12 var content = shadow.children;
13
14 host.removeChild(shadow);
15 var shadowRoot = host.createShadowRoot({'mode': mode});
16 for (var i = 0; i < content.length; ++i)
17 shadowRoot.appendChild(content[i]);
18 transformShadowRoot(shadowRoot);
19 }
20 }
21 </script>
22 <style id="style1">
23 </style>
24 <body>
25 <div id="host_open_open">
26 <shadow-root mode="open">
27 <div id="div1">
hayato 2015/08/06 02:26:52 Each tree should have more than one nested div ele
kochi 2015/08/19 04:30:27 Done.
28 <shadow-root mode="open">
29 <div id="div2">div2</div>
30 </shadow-root>
31 </div>
32 </shadow-root>
33 <span>content of open/open host</span>
34 </div>
35
36 <div id="host_open_closed">
37 <shadow-root mode="open">
38 <div id="div3">
39 <shadow-root mode="closed">
40 <div id="div4">div4</div>
41 </shadow-root>
42 </div>
43 </shadow-root>
44 <span>content of open/closed host</span>
45 </div>
46
47 <div id="host_closed_open">
48 <shadow-root mode="closed">
49 <div id="div5">
50 <shadow-root mode="open">
51 <div id="div6">div6</div>
52 </shadow-root>
53 </div>
54 </shadow-root>
55 <span>content of closed/open host</span>
56 </div>
57
58 <div id="host_closed_closed">
59 <shadow-root mode="closed">
60 <div id="div7">
61 <shadow-root mode="closed">
62 <div id="div8">div8</div>
63 </shadow-root>
64 </div>
65 </shadow-root>
66 <span>content of closed/closed host</span>
67 </div>
68 </body>
69 <script>
70 transformShadowRoot(document.body);
71
72 debug('(1/6) /deep/ style rule on top-level document.');
73 var styleElement = document.getElementById('style1');
74 styleElement.innerHTML = 'div /deep/ div { background-color: blue; }';
75 styleElement.offsetTop; // trigger style recalc
76
77 backgroundColorShouldBe('host_open_open/div1', 'rgb(0, 0, 255)');
78 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 0, 255)');
79 backgroundColorShouldBe('host_open_closed/div3', 'rgb(0, 0, 255)');
80 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
81 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
82 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)');
83 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
84 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
85
86 debug('(2/6) ::shadow style rule on top-level document.');
87 styleElement.innerHTML = 'div::shadow div { background-color: green; }';
88 styleElement.offsetTop; // trigger style recalc
89
90 backgroundColorShouldBe('host_open_open/div1', 'rgb(0, 128, 0)');
91 backgroundColorShouldBe('host_open_open/div1/div2', 'rgba(0, 0, 0, 0)');
92 backgroundColorShouldBe('host_open_closed/div3', 'rgb(0, 128, 0)');
93 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
94 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
95 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgba(0, 0, 0, 0)');
96 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
97 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
98
99 debug('(3/6) /deep/ style on shadow tree.');
100 styleElement.innerHTML = '';
101 var div1 = getNodeInTreeOfTrees('host_open_open/div1');
102 div1.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
103 var div3 = getNodeInTreeOfTrees('host_open_closed/div3');
104 div3.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
105 var div5 = getNodeInTreeOfTrees('host_closed_open/div5');
106 div5.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
107 var div7 = getNodeInTreeOfTrees('host_closed_closed/div7');
108 div7.insertAdjacentHTML('afterbegin', '<style>div /deep/ div { background-color: blue; }</style>');
109 styleElement.offsetTop; // trigger style recalc
110
111 backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)');
112 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 0, 255)');
113 backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)');
114 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
115 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
116 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgb(0, 0, 255)');
117 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
118 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
119
120 debug('(4/6) ::shadow style on shadow tree.');
121 div1.removeChild(div1.firstElementChild);
122 div3.removeChild(div3.firstElementChild);
123 div5.removeChild(div5.firstElementChild);
124 div7.removeChild(div7.firstElementChild);
125 div1.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>');
126 div3.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>');
127 div5.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>');
128 div7.insertAdjacentHTML('afterbegin', '<style>div::shadow div { background-color : green; }</style>');
129
130 backgroundColorShouldBe('host_open_open/div1', 'rgba(0, 0, 0, 0)');
131 backgroundColorShouldBe('host_open_open/div1/div2', 'rgb(0, 128, 0)');
132 backgroundColorShouldBe('host_open_closed/div3', 'rgba(0, 0, 0, 0)');
133 backgroundColorShouldBe('host_open_closed/div3/div4', 'rgba(0, 0, 0, 0)');
134 backgroundColorShouldBe('host_closed_open/div5', 'rgba(0, 0, 0, 0)');
135 backgroundColorShouldBe('host_closed_open/div5/div6', 'rgb(0, 128, 0)');
136 backgroundColorShouldBe('host_closed_closed/div7', 'rgba(0, 0, 0, 0)');
137 backgroundColorShouldBe('host_closed_closed/div7/div8', 'rgba(0, 0, 0, 0)');
138
139 debug('(5/6) /deep/ selector in querySelectorAll()');
140 shouldBe('host_open_open.querySelectorAll("div /deep/ div").length', '2');
141 shouldBe('host_open_closed.querySelectorAll("div /deep/ div").length', '1');
142 shouldBe('host_closed_open.querySelectorAll("div /deep/ div").length', '0');
143 shouldBe('host_closed_closed.querySelectorAll("div /deep/ div").length', '0');
144
145 shouldBe('div1.querySelectorAll("div /deep/ div").length', '1');
146 shouldBe('div3.querySelectorAll("div /deep/ div").length', '0');
147 shouldBe('div5.querySelectorAll("div /deep/ div").length', '1');
148 shouldBe('div7.querySelectorAll("div /deep/ div").length', '0');
149
150 debug('(6/6) ::shadow selector in querySelectorAll()');
151 shouldBe('host_open_open.querySelectorAll("div::shadow div").length', '1');
152 shouldBe('host_open_closed.querySelectorAll("div::shadow div").length', '1');
153 shouldBe('host_closed_open.querySelectorAll("div::shadow div").length', '0');
154 shouldBe('host_closed_closed.querySelectorAll("div::shadow div").length', '0');
155
156 shouldBe('div1.querySelectorAll("div::shadow div").length', '1');
157 shouldBe('div3.querySelectorAll("div::shadow div").length', '0');
158 shouldBe('div5.querySelectorAll("div::shadow div").length', '1');
159 shouldBe('div7.querySelectorAll("div::shadow div").length', '0');
160 </script>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/dom/shadow/closed-mode-deep-combinator-and-shadow-pseudo-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698