| 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 |