| OLD | NEW | 
|---|
| (Empty) |  | 
|  | 1 <!DOCTYPE html> | 
|  | 2 <html> | 
|  | 3 <head> | 
|  | 4 <script> | 
|  | 5 </script> | 
|  | 6 <style> | 
|  | 7 .pseudodialog { | 
|  | 8     position: absolute; | 
|  | 9     left: 0; right: 0; | 
|  | 10     margin: auto; | 
|  | 11     border: solid; | 
|  | 12     padding: 1em; | 
|  | 13     background: white; | 
|  | 14     color: black; | 
|  | 15 } | 
|  | 16 </style> | 
|  | 17 </head> | 
|  | 18 <body> | 
|  | 19 <p> | 
|  | 20 This tests that a dialog's containing block is in the initial containing block a
    nd that it is unaffected by | 
|  | 21 ancestor elements with overflow or opacity. | 
|  | 22 <div class="pseudodialog" style="position: absolute; top: 100px; height: 250px; 
    width: 90%; background-color: yellow"> | 
|  | 23     This dialog should be onscreen with a width of 90% of the page. It is the ch
    ild of an narrow element | 
|  | 24     positioned off screen, but the containing block of a dialog is the initial c
    ontaining block, so its | 
|  | 25     position and percent lengths are relative to that. | 
|  | 26 </div> | 
|  | 27 <div class="pseudodialog" style="position: absolute; top: 200px; left: 0px; heig
    ht: 100px; background-color: cyan"> | 
|  | 28     This dialog should be unaffected by its ancestor with overflow. It should no
    t be clipped. | 
|  | 29 </div> | 
|  | 30 <div class="pseudodialog" style="position: absolute; top: 250px; left: 0px; back
    ground-color: magenta"> | 
|  | 31     This dialog should be unaffected by its ancestor with opacity. | 
|  | 32 </div> | 
|  | 33 </body> | 
|  | 34 </html> | 
| OLD | NEW | 
|---|