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 top layer element is th
e initial containing 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 |