OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 dialog { | |
6 height: 150px; | |
7 width: 150px; | |
8 } | |
9 | |
10 ::backdrop { | |
11 display: none; | |
12 } | |
13 | |
14 .red { | |
15 background-color: red; | |
16 top: 200px; | |
17 } | |
18 | |
19 #bottomDialog { | |
20 background-color: blue; | |
21 top: 50px; | |
22 } | |
23 | |
24 #topDialog { | |
25 background-color: green; | |
26 top: 100px; | |
27 left: 50px; | |
28 } | |
29 </style> | |
30 </head> | |
31 <body> | |
32 This tests top layer element stacking order after dynamically calling show/close
and removal from the DOM tree. | |
33 The test passes if you see a green rectangle stacked on top of a blue rectangle,
and see no red rectangles. | |
34 | |
35 <dialog id="topDialog"></dialog> | |
36 <dialog id="bottomDialog"></dialog> | |
37 <dialog id="removedDialog" class="red"> | |
38 <dialog id="removedDialogChild" class="red"></dialog> | |
39 </dialog> | |
40 <script> | |
41 document.getElementById('topDialog').showModal(); | |
42 var removedDialog = document.getElementById('removedDialog'); | |
43 removedDialog.showModal(); | |
44 document.getElementById('bottomDialog').showModal(); | |
45 document.getElementById('removedDialogChild').showModal(); | |
46 removedDialog.parentNode.removeChild(removedDialog); | |
47 document.getElementById('topDialog').close(); | |
48 document.getElementById('topDialog').showModal(); | |
49 </script> | |
50 </body> | |
51 </html> | |
OLD | NEW |