Focusing a shadow host places the slot content after the shadow DOM content
[WebKit.git] / LayoutTests / fast / shadow-dom / shadow-layout-after-focus.html
1 <!DOCTYPE html>
2 <html>
3 <body>
4 <style>
5
6 #container {
7     position: relative;
8 }
9
10 #host {
11     width: 90px;
12     height: 90px;
13     border: solid 5px red;
14     outline: none;
15 }
16
17 #host:not(:focus)::after {
18     position: absolute;
19     left: 5px;
20     bottom: 5px;
21     width: 90px;
22     height: 45px;
23     content: 'FAIL - not focused';
24 }
25
26 #host:focus {
27     outline: solid 5px green;
28     outline-offset: -5px;
29 }
30
31 #host div {
32     background: red;
33     width: 90px;
34     height: 45px;
35 }
36
37 #overlay {
38     position: absolute;
39     top: 0;
40     left: 0;
41     background: green;
42     display: block;
43     width: 100px;
44     height: 50px;
45 }
46
47 </style>
48 <p>Test passes if you see a single 100px by 100px green box below.</p>
49 <div id="container">
50 <div id="host" tabindex=0><div>FAIL - misplaced</div></div>
51 <div id="overlay"></div>
52 </div>
53 <script>
54
55 var host = document.getElementById('host');
56 var shadow = host.attachShadow({mode: 'closed'});
57 shadow.innerHTML = `
58     <style>
59         div { background: green; width: 90px; height: 45px; }
60     </style>
61     <slot></slot>
62     <div></div>
63 `;
64
65 host.getBoundingClientRect();
66 host.focus();
67
68 </script>
69 </body>
70 </html>