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