Skip to content
This repository was archived by the owner on Sep 20, 2019. It is now read-only.

Commit 69803cb

Browse files
dfreedmdfreedm
committed
Merge pull request #463 from webcomponents/bicknellr/activeElement-2
Fix `activeElement` for ShadowRoot: focused elements in light DOM of host are now returned.
2 parents 396430f + 1f1d211 commit 69803cb

3 files changed

Lines changed: 131 additions & 17 deletions

File tree

‎src/ShadowDOM/wrappers/Document.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@
5959

6060
// Loop while activeElement is not a shallow child of this document.
6161
while (!this.contains(activeElement)) {
62-
var lastHost = activeElement;
6362
// Iterate until we hit activeElement's containing ShadowRoot (which
6463
// isn't this one) or document.
6564
while (activeElement.parentNode) {

‎src/ShadowDOM/wrappers/ShadowRoot.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,15 @@
8080

8181
var activeElement = wrap(unwrappedActiveElement);
8282

83-
// Loop while activeElement is not a shallow child of this ShadowRoot.
84-
while (!this.contains(activeElement)) {
83+
// If the active element is this ShadowRoot's host, this ShadowRoot
84+
// has no active element.
85+
if (activeElement === this.host) {
86+
return null;
87+
}
88+
89+
// Loop while activeElement is not a shallow descendant of this ShadowRoot
90+
// or this ShadowRoot's host.
91+
while (!this.contains(activeElement) && !this.host.contains(activeElement)) {
8592
// Iterate until we hit activeElement's containing ShadowRoot (which
8693
// isn't this one) or document.
8794
while (activeElement.parentNode) {

‎tests/ShadowDOM/html/activeElement.html‎

Lines changed: 122 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@
5757
var r_1;
5858
// light
5959
var r_1_l;
60+
// shadow
61+
var r_1_l_0;
62+
var r_1_l_1;
6063
// shadow
6164
var r_1_0;
6265
// light
@@ -85,6 +88,8 @@
8588
r_0_1_l = r_0_1.querySelector('[shadow-template-id=x-shadow-host-root-0-1-light]');
8689
r_1 = r.shadowRoot.querySelector('[shadow-template-id=x-shadow-host-root-1]');
8790
r_1_l = r_1.querySelector('[shadow-template-id=x-shadow-host-root-1-light]');
91+
r_1_l_0 = r_1_l.shadowRoot.querySelector('[shadow-template-id=x-shadow-host-root-1-light-0]');
92+
r_1_l_1 = r_1_l.shadowRoot.querySelector('[shadow-template-id=x-shadow-host-root-1-light-1]');
8893
r_1_0 = r_1.shadowRoot.querySelector('[shadow-template-id=x-shadow-host-root-1-0]');
8994
r_1_0_l = r_1_0.querySelector('[shadow-template-id=x-shadow-host-root-1-0-light]');
9095
r_1_1 = r_1.shadowRoot.querySelector('[shadow-template-id=x-shadow-host-root-1-1]');
@@ -94,11 +99,6 @@
9499
});
95100

96101
teardown(function() {
97-
assert.equal(r_0_0.shadowRoot.activeElement, null);
98-
assert.equal(r_0_1.shadowRoot.activeElement, null);
99-
assert.equal(r_1_0.shadowRoot.activeElement, null);
100-
assert.equal(r_1_1.shadowRoot.activeElement, null);
101-
102102
document.body.removeChild(r);
103103
});
104104

@@ -120,16 +120,24 @@
120120
assert.equal(doc.activeElement, r);
121121
assert.equal(r.shadowRoot.activeElement, null);
122122
assert.equal(r_0.shadowRoot.activeElement, null);
123+
assert.equal(r_0_0.shadowRoot.activeElement, null);
124+
assert.equal(r_0_1.shadowRoot.activeElement, null);
123125
assert.equal(r_1.shadowRoot.activeElement, null);
126+
assert.equal(r_1_0.shadowRoot.activeElement, null);
127+
assert.equal(r_1_1.shadowRoot.activeElement, null);
124128
});
125129

126130
test('r_l.focus()', function() {
127131
r_l.focus();
128132

129133
assert.equal(doc.activeElement, r_l);
130-
assert.equal(r.shadowRoot.activeElement, null);
134+
assert.equal(r.shadowRoot.activeElement, r_l);
131135
assert.equal(r_0.shadowRoot.activeElement, null);
136+
assert.equal(r_0_0.shadowRoot.activeElement, null);
137+
assert.equal(r_0_1.shadowRoot.activeElement, null);
132138
assert.equal(r_1.shadowRoot.activeElement, null);
139+
assert.equal(r_1_0.shadowRoot.activeElement, null);
140+
assert.equal(r_1_1.shadowRoot.activeElement, null);
133141
});
134142

135143
test('r_0.focus()', function() {
@@ -138,16 +146,24 @@
138146
assert.equal(doc.activeElement, r);
139147
assert.equal(r.shadowRoot.activeElement, r_0);
140148
assert.equal(r_0.shadowRoot.activeElement, null);
149+
assert.equal(r_0_0.shadowRoot.activeElement, null);
150+
assert.equal(r_0_1.shadowRoot.activeElement, null);
141151
assert.equal(r_1.shadowRoot.activeElement, null);
152+
assert.equal(r_1_0.shadowRoot.activeElement, null);
153+
assert.equal(r_1_1.shadowRoot.activeElement, null);
142154
});
143155

144156
test('r_0_l.focus()', function() {
145157
r_0_l.focus();
146158

147159
assert.equal(doc.activeElement, r);
148160
assert.equal(r.shadowRoot.activeElement, r_0_l);
149-
assert.equal(r_0.shadowRoot.activeElement, null);
161+
assert.equal(r_0.shadowRoot.activeElement, r_0_l);
162+
assert.equal(r_0_0.shadowRoot.activeElement, null);
163+
assert.equal(r_0_1.shadowRoot.activeElement, null);
150164
assert.equal(r_1.shadowRoot.activeElement, null);
165+
assert.equal(r_1_0.shadowRoot.activeElement, null);
166+
assert.equal(r_1_1.shadowRoot.activeElement, null);
151167
});
152168

153169
test('r_0_0.focus()', function() {
@@ -156,7 +172,11 @@
156172
assert.equal(doc.activeElement, r);
157173
assert.equal(r.shadowRoot.activeElement, r_0);
158174
assert.equal(r_0.shadowRoot.activeElement, r_0_0);
175+
assert.equal(r_0_0.shadowRoot.activeElement, null);
176+
assert.equal(r_0_1.shadowRoot.activeElement, null);
159177
assert.equal(r_1.shadowRoot.activeElement, null);
178+
assert.equal(r_1_0.shadowRoot.activeElement, null);
179+
assert.equal(r_1_1.shadowRoot.activeElement, null);
160180
});
161181

162182
test('r_0_0_l.focus()', function() {
@@ -165,7 +185,11 @@
165185
assert.equal(doc.activeElement, r);
166186
assert.equal(r.shadowRoot.activeElement, r_0);
167187
assert.equal(r_0.shadowRoot.activeElement, r_0_0_l);
188+
assert.equal(r_0_0.shadowRoot.activeElement, r_0_0_l);
189+
assert.equal(r_0_1.shadowRoot.activeElement, null);
168190
assert.equal(r_1.shadowRoot.activeElement, null);
191+
assert.equal(r_1_0.shadowRoot.activeElement, null);
192+
assert.equal(r_1_1.shadowRoot.activeElement, null);
169193
});
170194

171195
test('r_0_1.focus()', function() {
@@ -174,7 +198,11 @@
174198
assert.equal(doc.activeElement, r);
175199
assert.equal(r.shadowRoot.activeElement, r_0);
176200
assert.equal(r_0.shadowRoot.activeElement, r_0_1);
201+
assert.equal(r_0_0.shadowRoot.activeElement, null);
202+
assert.equal(r_0_1.shadowRoot.activeElement, null);
177203
assert.equal(r_1.shadowRoot.activeElement, null);
204+
assert.equal(r_1_0.shadowRoot.activeElement, null);
205+
assert.equal(r_1_1.shadowRoot.activeElement, null);
178206
});
179207

180208
test('r_0_1_l.focus()', function() {
@@ -183,7 +211,11 @@
183211
assert.equal(doc.activeElement, r);
184212
assert.equal(r.shadowRoot.activeElement, r_0);
185213
assert.equal(r_0.shadowRoot.activeElement, r_0_1_l);
214+
assert.equal(r_0_0.shadowRoot.activeElement, null);
215+
assert.equal(r_0_1.shadowRoot.activeElement, r_0_1_l);
186216
assert.equal(r_1.shadowRoot.activeElement, null);
217+
assert.equal(r_1_0.shadowRoot.activeElement, null);
218+
assert.equal(r_1_1.shadowRoot.activeElement, null);
187219
});
188220

189221
test('r_1.focus()', function() {
@@ -192,7 +224,11 @@
192224
assert.equal(doc.activeElement, r);
193225
assert.equal(r.shadowRoot.activeElement, r_1);
194226
assert.equal(r_0.shadowRoot.activeElement, null);
227+
assert.equal(r_0_0.shadowRoot.activeElement, null);
228+
assert.equal(r_0_1.shadowRoot.activeElement, null);
195229
assert.equal(r_1.shadowRoot.activeElement, null);
230+
assert.equal(r_1_0.shadowRoot.activeElement, null);
231+
assert.equal(r_1_1.shadowRoot.activeElement, null);
196232
});
197233

198234
test('r_1_l.focus()', function() {
@@ -201,7 +237,39 @@
201237
assert.equal(doc.activeElement, r);
202238
assert.equal(r.shadowRoot.activeElement, r_1_l);
203239
assert.equal(r_0.shadowRoot.activeElement, null);
204-
assert.equal(r_1_l.shadowRoot.activeElement, null);
240+
assert.equal(r_0_0.shadowRoot.activeElement, null);
241+
assert.equal(r_0_1.shadowRoot.activeElement, null);
242+
assert.equal(r_1.shadowRoot.activeElement, r_1_l);
243+
assert.equal(r_1_0.shadowRoot.activeElement, null);
244+
assert.equal(r_1_1.shadowRoot.activeElement, null);
245+
});
246+
247+
test('r_1_l_0.focus()', function() {
248+
r_1_l_0.focus();
249+
250+
assert.equal(doc.activeElement, r);
251+
assert.equal(r.shadowRoot.activeElement, r_1_l);
252+
assert.equal(r_0.shadowRoot.activeElement, null);
253+
assert.equal(r_0_0.shadowRoot.activeElement, null);
254+
assert.equal(r_0_1.shadowRoot.activeElement, null);
255+
assert.equal(r_1.shadowRoot.activeElement, r_1_l);
256+
assert.equal(r_1_l.shadowRoot.activeElement, r_1_l_0);
257+
assert.equal(r_1_0.shadowRoot.activeElement, null);
258+
assert.equal(r_1_1.shadowRoot.activeElement, null);
259+
});
260+
261+
test('r_1_l_1.focus()', function() {
262+
r_1_l_1.focus();
263+
264+
assert.equal(doc.activeElement, r);
265+
assert.equal(r.shadowRoot.activeElement, r_1_l);
266+
assert.equal(r_0.shadowRoot.activeElement, null);
267+
assert.equal(r_0_0.shadowRoot.activeElement, null);
268+
assert.equal(r_0_1.shadowRoot.activeElement, null);
269+
assert.equal(r_1.shadowRoot.activeElement, r_1_l);
270+
assert.equal(r_1_l.shadowRoot.activeElement, r_1_l_1);
271+
assert.equal(r_1_0.shadowRoot.activeElement, null);
272+
assert.equal(r_1_1.shadowRoot.activeElement, null);
205273
});
206274

207275
test('r_1_0.focus()', function() {
@@ -210,7 +278,11 @@
210278
assert.equal(doc.activeElement, r);
211279
assert.equal(r.shadowRoot.activeElement, r_1);
212280
assert.equal(r_0.shadowRoot.activeElement, null);
281+
assert.equal(r_0_0.shadowRoot.activeElement, null);
282+
assert.equal(r_0_1.shadowRoot.activeElement, null);
213283
assert.equal(r_1.shadowRoot.activeElement, r_1_0);
284+
assert.equal(r_1_0.shadowRoot.activeElement, null);
285+
assert.equal(r_1_1.shadowRoot.activeElement, null);
214286
});
215287

216288
test('r_1_0_l.focus()', function() {
@@ -219,7 +291,11 @@
219291
assert.equal(doc.activeElement, r);
220292
assert.equal(r.shadowRoot.activeElement, r_1);
221293
assert.equal(r_0.shadowRoot.activeElement, null);
294+
assert.equal(r_0_0.shadowRoot.activeElement, null);
295+
assert.equal(r_0_1.shadowRoot.activeElement, null);
222296
assert.equal(r_1.shadowRoot.activeElement, r_1_0_l);
297+
assert.equal(r_1_0.shadowRoot.activeElement, r_1_0_l);
298+
assert.equal(r_1_1.shadowRoot.activeElement, null);
223299
});
224300

225301
test('r_1_1.focus()', function() {
@@ -228,7 +304,11 @@
228304
assert.equal(doc.activeElement, r);
229305
assert.equal(r.shadowRoot.activeElement, r_1);
230306
assert.equal(r_0.shadowRoot.activeElement, null);
307+
assert.equal(r_0_0.shadowRoot.activeElement, null);
308+
assert.equal(r_0_1.shadowRoot.activeElement, null);
231309
assert.equal(r_1.shadowRoot.activeElement, r_1_1);
310+
assert.equal(r_1_0.shadowRoot.activeElement, null);
311+
assert.equal(r_1_1.shadowRoot.activeElement, null);
232312
});
233313

234314
test('r_1_1_l.focus()', function() {
@@ -237,7 +317,11 @@
237317
assert.equal(doc.activeElement, r);
238318
assert.equal(r.shadowRoot.activeElement, r_1);
239319
assert.equal(r_0.shadowRoot.activeElement, null);
320+
assert.equal(r_0_0.shadowRoot.activeElement, null);
321+
assert.equal(r_0_1.shadowRoot.activeElement, null);
240322
assert.equal(r_1.shadowRoot.activeElement, r_1_1_l);
323+
assert.equal(r_1_0.shadowRoot.activeElement, null);
324+
assert.equal(r_1_1.shadowRoot.activeElement, r_1_1_l);
241325
});
242326
});
243327

@@ -249,13 +333,17 @@
249333
<div>
250334
<div>
251335
<div shadow-template-id="x-shadow-host-root-0">
252-
<div shadow-template-id="x-shadow-host-root-0-light"></div>
336+
<div>
337+
<div shadow-template-id="x-shadow-host-root-0-light"></div>
338+
</div>
253339
</div>
254340
</div>
255341
</div>
256342
<div>
257343
<div shadow-template-id="x-shadow-host-root-1">
258-
<div shadow-template-id="x-shadow-host-root-1-light"></div>
344+
<div>
345+
<div shadow-template-id="x-shadow-host-root-1-light"></div>
346+
</div>
259347
</div>
260348
</div>
261349
</template>
@@ -266,7 +354,11 @@
266354
<content></content>
267355
<div>
268356
<div shadow-template-id="x-shadow-host-root-0-0">
269-
<div shadow-template-id="x-shadow-host-root-0-0-light"></div>
357+
<div>
358+
<div>
359+
<div shadow-template-id="x-shadow-host-root-0-0-light"></div>
360+
</div>
361+
</div>
270362
</div>
271363
</div>
272364
<div shadow-template-id="x-shadow-host-root-0-1">
@@ -292,21 +384,37 @@
292384
<content></content>
293385
<div>
294386
<div shadow-template-id="x-shadow-host-root-1-0">
295-
<div shadow-template-id="x-shadow-host-root-1-0-light"></div>
387+
<div>
388+
<div>
389+
<div shadow-template-id="x-shadow-host-root-1-0-light"></div>
390+
</div>
391+
</div>
296392
</div>
297393
</div>
298394
<div>
299395
<div>
300396
<div>
301397
<div shadow-template-id="x-shadow-host-root-1-1">
302-
<div shadow-template-id="x-shadow-host-root-1-1-light"></div>
398+
<div>
399+
<div shadow-template-id="x-shadow-host-root-1-1-light"></div>
400+
</div>
303401
</div>
304402
</div>
305403
</div>
306404
</div>
307405
</template>
308406

309-
<template id="x-shadow-host-root-1-light"></template>
407+
<template id="x-shadow-host-root-1-light">
408+
<content></content>
409+
<div shadow-template-id="x-shadow-host-root-1-light-0"></div>
410+
<div>
411+
<div shadow-template-id="x-shadow-host-root-1-light-1"></div>
412+
</div>
413+
</template>
414+
415+
<template id="x-shadow-host-root-1-light-0"></template>
416+
417+
<template id="x-shadow-host-root-1-light-1"></template>
310418

311419
<template id="x-shadow-host-root-1-0">
312420
<content></content>

0 commit comments

Comments
 (0)