OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style> |
| 5 .pseudodialog { |
| 6 position: absolute; |
| 7 left: 0; right: 0; |
| 8 margin: auto; |
| 9 border: solid; |
| 10 padding: 1em; |
| 11 background: white; |
| 12 color: black; |
| 13 } |
| 14 </style> |
| 15 </head> |
| 16 <body style="height: 10000px; width: 10000px"> |
| 17 <p style="position: fixed"> |
| 18 This tests that a top layer element's containing block is the initial containing |
| 19 block. The dialog is positioned at (1200, 1200) and the window is scrolled to |
| 20 (1000, 1000) so the dialog should be positioned at (200, 200) relative to the |
| 21 viewport. |
| 22 </p> |
| 23 <div class="pseudodialog" style="top: 1200px; left: 1200px; right: auto; height:
250px; width: 50%; background-color: yellow"> |
| 24 This dialog should be onscreen with a width of 50% of the viewport. It is th
e child of an narrow element |
| 25 positioned off screen, but its containing block is the initial containing bl
ock, so its |
| 26 position and percent lengths are relative to that. |
| 27 </div> |
| 28 <script> |
| 29 window.scroll(1000, 1000); |
| 30 </script> |
| 31 </body> |
| 32 </html> |
OLD | NEW |