OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <style> |
5 dialog { | 5 dialog { |
6 height: 100px; | 6 height: 100px; |
7 width: 100px; | 7 width: 100px; |
8 } | 8 } |
9 | 9 |
| 10 ::backdrop { |
| 11 display: none; |
| 12 } |
| 13 |
10 #bottomDialog { | 14 #bottomDialog { |
11 background-color: blue; | 15 background-color: blue; |
12 top: 100px; | 16 top: 100px; |
13 } | 17 } |
14 | 18 |
15 #topDialog { | 19 #topDialog { |
16 background-color: green; | 20 background-color: green; |
17 top: 150px; | 21 top: 150px; |
18 left: 50px; | 22 left: 50px; |
19 } | 23 } |
20 </style> | 24 </style> |
21 </head> | 25 </head> |
22 <body> | 26 <body> |
23 <p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=105489">105489</a>: Elem
ents must be reattached when inserted/removed from top layer | 27 <p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=105489">105489</a>: Elem
ents must be reattached when inserted/removed from top layer |
24 <p>The test passes if you see a green rectangle stacked on top of a blue rectang
le. | 28 <p>The test passes if you see a green rectangle stacked on top of a blue rectang
le. |
25 <dialog id="bottomDialog"></dialog> | 29 <dialog id="bottomDialog"></dialog> |
26 <dialog id="topDialog"></dialog> | 30 <dialog id="topDialog"></dialog> |
27 <script> | 31 <script> |
28 document.getElementById('topDialog').showModal(); | 32 document.getElementById('topDialog').showModal(); |
29 var bottomDialog = document.getElementById('bottomDialog'); | 33 var bottomDialog = document.getElementById('bottomDialog'); |
30 bottomDialog.showModal(); | 34 bottomDialog.showModal(); |
31 bottomDialog.offsetTop; // force a layout | 35 bottomDialog.offsetTop; // force a layout |
32 var parent = bottomDialog.parentNode; | 36 var parent = bottomDialog.parentNode; |
33 parent.removeChild(bottomDialog); | 37 parent.removeChild(bottomDialog); |
34 parent.appendChild(bottomDialog); | 38 parent.appendChild(bottomDialog); |
35 </script> | 39 </script> |
36 </body> | 40 </body> |
37 </html> | 41 </html> |
38 | 42 |
OLD | NEW |