blur() on shadow host should work when a shadow host contains a focused element in...
[WebKit-https.git] / LayoutTests / fast / dom / shadow / shadow-root-blur.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../../js/resources/js-test-pre.js"></script>
5 <script src="resources/shadow-dom.js"></script>
6 </head>
7 <body>
8 <div id="console">
9 </div>
10 <script>
11 description("This tests the blur() on on shadow host should work when a shadow host contains a focused element in its shadow DOM subtrees property (bug 81102)");
12
13 if (!window.internals)
14     debug('This test runs on DRT only');
15
16 if (window.layoutTestController)
17     layoutTestController.dumpAsText();
18
19 document.body.appendChild(
20     createDOM('div', {'id':'shadowHostA'},
21         createShadowRoot(
22             createDOM('p', {'id':'childInTreeOne', 'tabindex':'1'}),
23             createDOM('div', {'id':'shadowHostB'},
24                 createShadowRoot(
25                     createDOM('p', {'id':'childInTreeTwo', 'tabindex':'2'}))))));
26
27 document.body.appendChild(
28     createDOM('div', {'id':'shadowHostC'},
29         createShadowRoot(
30             createDOM('p', {'id':'childInTreeThree', 'tabindex':'3'})))
31 );
32
33 getNodeInShadowTreeStack('shadowHostA').onblur = function() { debug("shadowHostA onblur called!"); }
34 getNodeInShadowTreeStack('shadowHostA/shadowHostB').onblur = function() { debug("shadowHostB onblur called!"); }
35
36 // childInTreeOne foucsed - shadowHostA blurred
37 evalAndLog("getNodeInShadowTreeStack('shadowHostA/childInTreeOne').focus()");
38 shouldBeEqualToString("document.activeElement.id", "shadowHostA");
39 evalAndLog("getNodeInShadowTreeStack('shadowHostA').blur();");
40 shouldBe("document.activeElement", "document.body");
41 shouldBe("getNodeInShadowTreeStack('shadowHostA/').activeElement", "null");
42 shouldBe("getNodeInShadowTreeStack('shadowHostA/shadowHostB/').activeElement", "null");
43 shouldBe("getNodeInShadowTreeStack('shadowHostC/').activeElement", "null");
44
45 // childInTreeTwo foucsed - shadowHostB blurred
46 evalAndLog("getNodeInShadowTreeStack('shadowHostA/shadowHostB/childInTreeTwo').focus()");
47 shouldBeEqualToString("document.activeElement.id", "shadowHostA");
48 evalAndLog("getNodeInShadowTreeStack('shadowHostA/shadowHostB').blur();");
49 shouldBe("document.activeElement", "document.body");
50 shouldBe("getNodeInShadowTreeStack('shadowHostA/').activeElement", "null");
51 shouldBe("getNodeInShadowTreeStack('shadowHostA/shadowHostB/').activeElement", "null");
52 shouldBe("getNodeInShadowTreeStack('shadowHostC/').activeElement", "null");
53
54 // childInTreeTwo foucsed - shadowHostA blurred
55 evalAndLog("getNodeInShadowTreeStack('shadowHostA/shadowHostB/childInTreeTwo').focus()");
56 shouldBeEqualToString("document.activeElement.id", "shadowHostA");
57 evalAndLog("getNodeInShadowTreeStack('shadowHostA').blur();");
58 shouldBe("document.activeElement", "document.body");
59 shouldBe("getNodeInShadowTreeStack('shadowHostA/').activeElement", "null");
60 shouldBe("getNodeInShadowTreeStack('shadowHostA/shadowHostB/').activeElement", "null");
61 shouldBe("getNodeInShadowTreeStack('shadowHostC/').activeElement", "null");
62
63 // childInTreeThree foucsed - shadowHostA blurred
64 evalAndLog("getNodeInShadowTreeStack('shadowHostC/childInTreeThree').focus()");
65 shouldBeEqualToString("document.activeElement.id", "shadowHostC");
66 evalAndLog("getNodeInShadowTreeStack('shadowHostA').blur();");
67 shouldBeEqualToString("document.activeElement.id", "shadowHostC");
68 shouldBe("getNodeInShadowTreeStack('shadowHostA/').activeElement", "null");
69 shouldBe("getNodeInShadowTreeStack('shadowHostA/shadowHostB/').activeElement", "null");
70 shouldBeEqualToString("getNodeInShadowTreeStack('shadowHostC/').activeElement.id", "childInTreeThree");
71
72 var successfullyParsed = true;
73 </script>
74 <script src="../../js/resources/js-test-post.js"></script>
75 </body>
76 </html>