| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| .green-box { |
| background-color: green; |
| height: 50px; |
| width: 50px; |
| border: none; |
| padding: 0; |
| margin: 0; |
| } |
| |
| #left-div { |
| position: absolute; |
| top: 100px; |
| left: 100px; |
| } |
| |
| #middle-dialog { |
| position: relative; |
| top: 100px; |
| left: 150px; |
| } |
| |
| #right-dialog { |
| position: relative; |
| top: 100px; |
| left: 200px; |
| } |
| </style> |
| <script src="../../resources/check-layout.js"></script> |
| </head> |
| <body onload="checkLayout('dialog')"> |
| <p>Bug <a href="http://webkit.org/b/106538">106538</a>: Top layer fails for inline elements |
| <p>This tests that position 'relative' computes to 'absolute' in the top layer. The test passes if you see a single green box.</p> |
| <div id="left-div" class="green-box"></div> |
| <dialog id="middle-dialog" class="green-box" data-offset-x="150" data-offset-y="100"></dialog> |
| <dialog id="right-dialog" class="green-box" data-offset-x="200" data-offset-y="100"></dialog> |
| <script> |
| document.getElementById('middle-dialog').showModal(); |
| var rightDialog = document.getElementById('right-dialog'); |
| rightDialog.showModal(); |
| rightDialog.style.position = 'absolute'; |
| </script> |
| </body> |
| </html> |
